@ui5/webcomponents 2.27.0-rc.1 → 2.27.0-rc.2

package/dist/AvatarBadge.d.ts

@@ -61,10 +61,26 @@ declare class AvatarBadge extends UI5Element {
      * - `Negative` - Red, used for error/rejected states
      * - `Information` - Blue, used for informational states
      *
+     * **Note:** `state` takes precedence over `colorScheme`. When `state` is set
+     * to any value other than `None`, the semantic styling applies and `colorScheme` is ignored.
+     *
      * @default "None"
      * @public
      */
     state: `${ValueState}`;
+    /**
+     * Defines the color scheme of the badge using the indication color palette.
+     *
+     * Available options are `"1"` through `"10"`, matching the indication colors.
+     *
+     * **Note:** `state` takes precedence - when `state` is set to any value other than `None`,
+     * the semantic state styling applies and `colorScheme` is ignored.
+     *
+     * @default undefined
+     * @public
+     * @since 2.27.0
+     */
+    colorScheme?: string;
     /**
      * @private
      */

package/dist/AvatarBadge.js

@@ -58,6 +58,9 @@ let AvatarBadge = class AvatarBadge extends UI5Element {
          * - `Negative` - Red, used for error/rejected states
          * - `Information` - Blue, used for informational states
          *
+         * **Note:** `state` takes precedence over `colorScheme`. When `state` is set
+         * to any value other than `None`, the semantic styling applies and `colorScheme` is ignored.
+         *
          * @default "None"
          * @public
          */
@@ -108,6 +111,9 @@ __decorate([
 __decorate([
     property()
 ], AvatarBadge.prototype, "state", void 0);
+__decorate([
+    property()
+], AvatarBadge.prototype, "colorScheme", void 0);
 __decorate([
     property({ type: Boolean })
 ], AvatarBadge.prototype, "invalid", void 0);

package/dist/AvatarBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarBadge.js","sourceRoot":"","sources":["../src/AvatarBadge.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 property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport { getIconData, getIconDataSync } from \"@ui5/webcomponents-base/dist/asset-registries/Icons.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\n\n// Template\nimport AvatarBadgeTemplate from \"./AvatarBadgeTemplate.js\";\n\n// Styles\nimport AvatarBadgeCss from \"./generated/themes/AvatarBadge.css.js\";\n\nimport ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\n\nconst ICON_NOT_FOUND = \"ICON_NOT_FOUND\";\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-avatar-badge` component is used to display a badge on top of `ui5-avatar` component.\n * The badge can display an icon and supports different states for visual affordance.\n *\n * ### Usage\n *\n * The badge should be used as a child element of `ui5-avatar` in the `badge` slot.\n *\n * ```html\n * <ui5-avatar>\n *   <ui5-avatar-badge icon=\"edit\" slot=\"badge\"></ui5-avatar-badge>\n * </ui5-avatar>\n * ```\n *\n * ### Keyboard Handling\n *\n * The badge does not receive keyboard focus.\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents/dist/AvatarBadge.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @since 2.19.0\n * @public\n */\n@customElement({\n\ttag: \"ui5-avatar-badge\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\tstyles: AvatarBadgeCss,\n\ttemplate: AvatarBadgeTemplate,\n})\nclass AvatarBadge extends UI5Element {\n\t/**\n\t * Defines the icon name to be displayed inside the badge.\n\t *\n\t * **Note:** You should import the desired icon first, then use its name as \"icon\".\n\t *\n\t * `import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ticon?: string;\n\n\t/**\n\t * Defines the tooltip text of the badge icon.\n\t *\n\t * **Note:** If not provided, the badge uses the icon accessible name.\n\t * If no icon accessible name is available, a generic fallback text is used.\n\t * @default undefined\n\t * @public\n\t * @since 2.22.0\n\t */\n\t@property()\n\ttooltip?: string;\n\n\t/**\n\t * Defines the state of the badge, which determines its styling.\n\t *\n\t * Available options:\n\t * - `None` (default) - Standard appearance\n\t * - `Positive` - Green, used for success/approved states\n\t * - `Critical` - Orange, used for warning states\n\t * - `Negative` - Red, used for error/rejected states\n\t * - `Information` - Blue, used for informational states\n\t *\n\t * @default \"None\"\n\t * @public\n\t */\n\t@property()\n\tstate: `${ValueState}` = ValueState.None;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tinvalid = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\teffectiveTooltip?: string;\n\n\tasync onBeforeRendering() {\n\t\tconst icon = this.icon;\n\t\tif (!icon) {\n\t\t\tthis.invalid = true;\n\t\t\tthis.effectiveTooltip = undefined;\n\t\t\treturn;\n\t\t}\n\n\t\tconst iconData = getIconDataSync(icon) || await getIconData(icon);\n\t\tthis.invalid = !iconData || iconData === ICON_NOT_FOUND;\n\n\t\tif (this.invalid) {\n\t\t\tthis.effectiveTooltip = undefined;\n\t\t} else if (this.tooltip) {\n\t\t\t// User-provided tooltip takes precedence\n\t\t\tthis.effectiveTooltip = this.tooltip;\n\t\t} else if (iconData && iconData !== ICON_NOT_FOUND && iconData.accData) {\n\t\t\t// Use the icon's registered i18n label (e.g., message-error -> \"Error\")\n\t\t\tif (iconData.packageName) {\n\t\t\t\tconst i18nBundle = await getI18nBundle(iconData.packageName);\n\t\t\t\tthis.effectiveTooltip = i18nBundle.getText(iconData.accData) || undefined;\n\t\t\t} else {\n\t\t\t\tthis.effectiveTooltip = iconData.accData.defaultText || undefined;\n\t\t\t}\n\t\t} else {\n\t\t\t// Derive from icon name (e.g., \"edit\" -> \"Edit\")\n\t\t\tthis.effectiveTooltip = icon.charAt(0).toUpperCase() + icon.slice(1);\n\t\t}\n\t}\n}\n\nAvatarBadge.define();\n\nexport default AvatarBadge;\n"]}
+{"version":3,"file":"AvatarBadge.js","sourceRoot":"","sources":["../src/AvatarBadge.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 property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport { getIconData, getIconDataSync } from \"@ui5/webcomponents-base/dist/asset-registries/Icons.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\n\n// Template\nimport AvatarBadgeTemplate from \"./AvatarBadgeTemplate.js\";\n\n// Styles\nimport AvatarBadgeCss from \"./generated/themes/AvatarBadge.css.js\";\n\nimport ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\n\nconst ICON_NOT_FOUND = \"ICON_NOT_FOUND\";\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-avatar-badge` component is used to display a badge on top of `ui5-avatar` component.\n * The badge can display an icon and supports different states for visual affordance.\n *\n * ### Usage\n *\n * The badge should be used as a child element of `ui5-avatar` in the `badge` slot.\n *\n * ```html\n * <ui5-avatar>\n *   <ui5-avatar-badge icon=\"edit\" slot=\"badge\"></ui5-avatar-badge>\n * </ui5-avatar>\n * ```\n *\n * ### Keyboard Handling\n *\n * The badge does not receive keyboard focus.\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents/dist/AvatarBadge.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @since 2.19.0\n * @public\n */\n@customElement({\n\ttag: \"ui5-avatar-badge\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\tstyles: AvatarBadgeCss,\n\ttemplate: AvatarBadgeTemplate,\n})\nclass AvatarBadge extends UI5Element {\n\t/**\n\t * Defines the icon name to be displayed inside the badge.\n\t *\n\t * **Note:** You should import the desired icon first, then use its name as \"icon\".\n\t *\n\t * `import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ticon?: string;\n\n\t/**\n\t * Defines the tooltip text of the badge icon.\n\t *\n\t * **Note:** If not provided, the badge uses the icon accessible name.\n\t * If no icon accessible name is available, a generic fallback text is used.\n\t * @default undefined\n\t * @public\n\t * @since 2.22.0\n\t */\n\t@property()\n\ttooltip?: string;\n\n\t/**\n\t * Defines the state of the badge, which determines its styling.\n\t *\n\t * Available options:\n\t * - `None` (default) - Standard appearance\n\t * - `Positive` - Green, used for success/approved states\n\t * - `Critical` - Orange, used for warning states\n\t * - `Negative` - Red, used for error/rejected states\n\t * - `Information` - Blue, used for informational states\n\t *\n\t * **Note:** `state` takes precedence over `colorScheme`. When `state` is set\n\t * to any value other than `None`, the semantic styling applies and `colorScheme` is ignored.\n\t *\n\t * @default \"None\"\n\t * @public\n\t */\n\t@property()\n\tstate: `${ValueState}` = ValueState.None;\n\n\t/**\n\t * Defines the color scheme of the badge using the indication color palette.\n\t *\n\t * Available options are `\"1\"` through `\"10\"`, matching the indication colors.\n\t *\n\t * **Note:** `state` takes precedence - when `state` is set to any value other than `None`,\n\t * the semantic state styling applies and `colorScheme` is ignored.\n\t *\n\t * @default undefined\n\t * @public\n\t * @since 2.27.0\n\t */\n\t@property()\n\tcolorScheme?: string;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tinvalid = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\teffectiveTooltip?: string;\n\n\tasync onBeforeRendering() {\n\t\tconst icon = this.icon;\n\t\tif (!icon) {\n\t\t\tthis.invalid = true;\n\t\t\tthis.effectiveTooltip = undefined;\n\t\t\treturn;\n\t\t}\n\n\t\tconst iconData = getIconDataSync(icon) || await getIconData(icon);\n\t\tthis.invalid = !iconData || iconData === ICON_NOT_FOUND;\n\n\t\tif (this.invalid) {\n\t\t\tthis.effectiveTooltip = undefined;\n\t\t} else if (this.tooltip) {\n\t\t\t// User-provided tooltip takes precedence\n\t\t\tthis.effectiveTooltip = this.tooltip;\n\t\t} else if (iconData && iconData !== ICON_NOT_FOUND && iconData.accData) {\n\t\t\t// Use the icon's registered i18n label (e.g., message-error -> \"Error\")\n\t\t\tif (iconData.packageName) {\n\t\t\t\tconst i18nBundle = await getI18nBundle(iconData.packageName);\n\t\t\t\tthis.effectiveTooltip = i18nBundle.getText(iconData.accData) || undefined;\n\t\t\t} else {\n\t\t\t\tthis.effectiveTooltip = iconData.accData.defaultText || undefined;\n\t\t\t}\n\t\t} else {\n\t\t\t// Derive from icon name (e.g., \"edit\" -> \"Edit\")\n\t\t\tthis.effectiveTooltip = icon.charAt(0).toUpperCase() + icon.slice(1);\n\t\t}\n\t}\n}\n\nAvatarBadge.define();\n\nexport default AvatarBadge;\n"]}

package/dist/CardHeaderTemplate.js

@@ -7,10 +7,11 @@ export default function CardHeaderTemplate() {
             "ui5-card-header--active": this.interactive && this._headerActive,
             "ui5-card-header-ff": isFirefox(),
         }, part: "root", onClick: this._click, onKeyDown: this._keydown, onKeyUp: this._keyup, children: [_jsxs("div", { class: "ui5-card-header-focusable-element", "aria-labelledby": this.ariaLabelledBy, "aria-roledescription": this.ariaRoleDescription, role: this.ariaRoleFocusableElement, "data-sap-focus-ref": true, tabindex: 0, children: [this.hasAvatar &&
-                        _jsx("div", { id: `${this._id}-avatar`, class: "ui5-card-header-avatar", "aria-label": this.ariaCardAvatarLabel, children: _jsx("slot", { name: "avatar" }) }), _jsxs("div", { class: "ui5-card-header-text", children: [_jsxs("div", { class: "ui5-card-header-first-line", children: [this.titleText &&
-                                        _jsx("div", { id: `${this._id}-title`, class: "ui5-card-header-title", part: "title", role: "heading", "aria-level": 3, children: this.titleText }), this.additionalText &&
-                                        _jsx("div", { class: "ui5-card-header-additionalText", children: _jsx("span", { id: `${this._id}-additionalText`, part: "additional-text", dir: "auto", children: this.additionalText }) })] }), this.subtitleText &&
-                                _jsx("div", { id: `${this._id}-subtitle`, class: "ui5-card-header-subtitle", part: "subtitle", children: this.subtitleText })] })] }), this.hasAction &&
-                _jsx("div", { class: "ui5-card-header-action", onFocusIn: this._actionsFocusin, onFocusOut: this._actionsFocusout, children: _jsx("slot", { name: "action" }) })] }));
+                        _jsx("div", { id: `${this._id}-avatar`, class: "ui5-card-header-avatar", "aria-label": this.ariaCardAvatarLabel, children: _jsx("slot", { name: "avatar" }) }), _jsxs("div", { class: "ui5-card-header-text", children: [this.titleText &&
+                                _jsx("div", { id: `${this._id}-title`, class: "ui5-card-header-title", part: "title", role: "heading", "aria-level": 3, children: this.titleText }), this.subtitleText &&
+                                _jsx("div", { id: `${this._id}-subtitle`, class: "ui5-card-header-subtitle", part: "subtitle", children: this.subtitleText })] })] }), (this.hasAction || this.additionalText) &&
+                _jsxs("div", { class: "ui5-card-header-action-and-additional-text", onFocusIn: this._actionsFocusin, onFocusOut: this._actionsFocusout, children: [this.hasAction &&
+                            _jsx("slot", { name: "action" }), this.additionalText &&
+                            _jsx("div", { class: "ui5-card-header-additionalText", children: _jsx("span", { id: `${this._id}-additionalText`, part: "additional-text", dir: "auto", children: this.additionalText }) })] })] }));
 }
 //# sourceMappingURL=CardHeaderTemplate.js.map

package/dist/CardHeaderTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeaderTemplate.js","sourceRoot":"","sources":["../src/CardHeaderTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,kBAAkB;IACzC,OAAO,CACN,eACC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,UAAU,EACzB,KAAK,EAAE;YACN,iBAAiB,EAAE,IAAI;YACvB,8BAA8B,EAAE,IAAI,CAAC,WAAW;YAChD,yBAAyB,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,aAAa;YACjE,oBAAoB,EAAE,SAAS,EAAE;SACjC,EACD,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,SAAS,EAAE,IAAI,CAAC,QAAQ,EACxB,OAAO,EAAE,IAAI,CAAC,MAAM,aAEpB,eACC,KAAK,EAAC,mCAAmC,qBACxB,IAAI,CAAC,cAAc,0BACd,IAAI,CAAC,mBAAmB,EAC9C,IAAI,EAAE,IAAI,CAAC,wBAAwB,8BAEnC,QAAQ,EAAE,CAAC,aAEV,IAAI,CAAC,SAAS;wBACd,cAAK,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,SAAS,EAAE,KAAK,EAAC,wBAAwB,gBAAa,IAAI,CAAC,mBAAmB,YACjG,eAAM,IAAI,EAAC,QAAQ,GAAQ,GACtB,EAGP,eAAK,KAAK,EAAC,sBAAsB,aAChC,eAAK,KAAK,EAAC,4BAA4B,aACrC,IAAI,CAAC,SAAS;wCACd,cACC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,QAAQ,EACvB,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,SAAS,gBACF,CAAC,YACZ,IAAI,CAAC,SAAS,GAAO,EAGvB,IAAI,CAAC,cAAc;wCACnB,cAAK,KAAK,EAAC,gCAAgC,YAC1C,eAAM,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,iBAAiB,EAAE,IAAI,EAAC,iBAAiB,EAAC,GAAG,EAAC,MAAM,YAAE,IAAI,CAAC,cAAc,GAAQ,GACjG,IAEF,EAEL,IAAI,CAAC,YAAY;gCACjB,cAAK,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,WAAW,EAAE,KAAK,EAAC,0BAA0B,EAAC,IAAI,EAAC,UAAU,YAAE,IAAI,CAAC,YAAY,GAAO,IAEvG,IACD,EAEL,IAAI,CAAC,SAAS;gBACd,cACC,KAAK,EAAC,wBAAwB,EAC9B,SAAS,EAAE,IAAI,CAAC,eAAe,EAC/B,UAAU,EAAE,IAAI,CAAC,gBAAgB,YAEjC,eAAM,IAAI,EAAC,QAAQ,GAAQ,GACtB,IAEF,CACN,CAAC;AACH,CAAC","sourcesContent":["import type CardHeader from \"./CardHeader.js\";\nimport { isFirefox } from \"@ui5/webcomponents-base/dist/Device.js\";\n\nexport default function CardHeaderTemplate(this: CardHeader) {\n\treturn (\n\t\t<div\n\t\t\tid={`${this._id}--header`}\n\t\t\tclass={{\n\t\t\t\t\"ui5-card-header\": true,\n\t\t\t\t\"ui5-card-header--interactive\": this.interactive,\n\t\t\t\t\"ui5-card-header--active\": this.interactive && this._headerActive,\n\t\t\t\t\"ui5-card-header-ff\": isFirefox(),\n\t\t\t}}\n\t\t\tpart=\"root\"\n\t\t\tonClick={this._click}\n\t\t\tonKeyDown={this._keydown}\n\t\t\tonKeyUp={this._keyup}\n\t\t>\n\t\t\t<div\n\t\t\t\tclass=\"ui5-card-header-focusable-element\"\n\t\t\t\taria-labelledby={this.ariaLabelledBy}\n\t\t\t\taria-roledescription={this.ariaRoleDescription}\n\t\t\t\trole={this.ariaRoleFocusableElement}\n\t\t\t\tdata-sap-focus-ref\n\t\t\t\ttabindex={0}\n\t\t\t>\n\t\t\t\t{this.hasAvatar &&\n\t\t\t\t\t<div id={`${this._id}-avatar`} class=\"ui5-card-header-avatar\" aria-label={this.ariaCardAvatarLabel}>\n\t\t\t\t\t\t<slot name=\"avatar\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t<div class=\"ui5-card-header-text\">\n\t\t\t\t\t<div class=\"ui5-card-header-first-line\">\n\t\t\t\t\t\t{this.titleText &&\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tid={`${this._id}-title`}\n\t\t\t\t\t\t\t\tclass=\"ui5-card-header-title\"\n\t\t\t\t\t\t\t\tpart=\"title\"\n\t\t\t\t\t\t\t\trole=\"heading\"\n\t\t\t\t\t\t\t\taria-level={3}\n\t\t\t\t\t\t\t>{this.titleText}</div>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t{this.additionalText &&\n\t\t\t\t\t\t\t<div class=\"ui5-card-header-additionalText\">\n\t\t\t\t\t\t\t\t<span id={`${this._id}-additionalText`} part=\"additional-text\" dir=\"auto\">{this.additionalText}</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.subtitleText &&\n\t\t\t\t\t\t<div id={`${this._id}-subtitle`} class=\"ui5-card-header-subtitle\" part=\"subtitle\">{this.subtitleText}</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{this.hasAction &&\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ui5-card-header-action\"\n\t\t\t\t\tonFocusIn={this._actionsFocusin}\n\t\t\t\t\tonFocusOut={this._actionsFocusout}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"action\"></slot>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"file":"CardHeaderTemplate.js","sourceRoot":"","sources":["../src/CardHeaderTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,kBAAkB;IACzC,OAAO,CACN,eACC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,UAAU,EACzB,KAAK,EAAE;YACN,iBAAiB,EAAE,IAAI;YACvB,8BAA8B,EAAE,IAAI,CAAC,WAAW;YAChD,yBAAyB,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,aAAa;YACjE,oBAAoB,EAAE,SAAS,EAAE;SACjC,EACD,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,SAAS,EAAE,IAAI,CAAC,QAAQ,EACxB,OAAO,EAAE,IAAI,CAAC,MAAM,aAEpB,eACC,KAAK,EAAC,mCAAmC,qBACxB,IAAI,CAAC,cAAc,0BACd,IAAI,CAAC,mBAAmB,EAC9C,IAAI,EAAE,IAAI,CAAC,wBAAwB,8BAEnC,QAAQ,EAAE,CAAC,aAEV,IAAI,CAAC,SAAS;wBACd,cAAK,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,SAAS,EAAE,KAAK,EAAC,wBAAwB,gBAAa,IAAI,CAAC,mBAAmB,YACjG,eAAM,IAAI,EAAC,QAAQ,GAAQ,GACtB,EAGP,eAAK,KAAK,EAAC,sBAAsB,aAC/B,IAAI,CAAC,SAAS;gCACd,cACC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,QAAQ,EACvB,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,SAAS,gBACF,CAAC,YACZ,IAAI,CAAC,SAAS,GAAO,EAGvB,IAAI,CAAC,YAAY;gCACjB,cAAK,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,WAAW,EAAE,KAAK,EAAC,0BAA0B,EAAC,IAAI,EAAC,UAAU,YAAE,IAAI,CAAC,YAAY,GAAO,IAEvG,IACD,EAEL,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,cAAc,CAAC;gBACvC,eACC,KAAK,EAAC,4CAA4C,EAClD,SAAS,EAAE,IAAI,CAAC,eAAe,EAC/B,UAAU,EAAE,IAAI,CAAC,gBAAgB,aAEhC,IAAI,CAAC,SAAS;4BACd,eAAM,IAAI,EAAC,QAAQ,GAAQ,EAE3B,IAAI,CAAC,cAAc;4BACnB,cAAK,KAAK,EAAC,gCAAgC,YAC1C,eAAM,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,iBAAiB,EAAE,IAAI,EAAC,iBAAiB,EAAC,GAAG,EAAC,MAAM,YAAE,IAAI,CAAC,cAAc,GAAQ,GACjG,IAEF,IAEF,CACN,CAAC;AACH,CAAC","sourcesContent":["import type CardHeader from \"./CardHeader.js\";\nimport { isFirefox } from \"@ui5/webcomponents-base/dist/Device.js\";\n\nexport default function CardHeaderTemplate(this: CardHeader) {\n\treturn (\n\t\t<div\n\t\t\tid={`${this._id}--header`}\n\t\t\tclass={{\n\t\t\t\t\"ui5-card-header\": true,\n\t\t\t\t\"ui5-card-header--interactive\": this.interactive,\n\t\t\t\t\"ui5-card-header--active\": this.interactive && this._headerActive,\n\t\t\t\t\"ui5-card-header-ff\": isFirefox(),\n\t\t\t}}\n\t\t\tpart=\"root\"\n\t\t\tonClick={this._click}\n\t\t\tonKeyDown={this._keydown}\n\t\t\tonKeyUp={this._keyup}\n\t\t>\n\t\t\t<div\n\t\t\t\tclass=\"ui5-card-header-focusable-element\"\n\t\t\t\taria-labelledby={this.ariaLabelledBy}\n\t\t\t\taria-roledescription={this.ariaRoleDescription}\n\t\t\t\trole={this.ariaRoleFocusableElement}\n\t\t\t\tdata-sap-focus-ref\n\t\t\t\ttabindex={0}\n\t\t\t>\n\t\t\t\t{this.hasAvatar &&\n\t\t\t\t\t<div id={`${this._id}-avatar`} class=\"ui5-card-header-avatar\" aria-label={this.ariaCardAvatarLabel}>\n\t\t\t\t\t\t<slot name=\"avatar\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t<div class=\"ui5-card-header-text\">\n\t\t\t\t\t{this.titleText &&\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tid={`${this._id}-title`}\n\t\t\t\t\t\t\tclass=\"ui5-card-header-title\"\n\t\t\t\t\t\t\tpart=\"title\"\n\t\t\t\t\t\t\trole=\"heading\"\n\t\t\t\t\t\t\taria-level={3}\n\t\t\t\t\t\t>{this.titleText}</div>\n\t\t\t\t\t}\n\n\t\t\t\t\t{this.subtitleText &&\n\t\t\t\t\t\t<div id={`${this._id}-subtitle`} class=\"ui5-card-header-subtitle\" part=\"subtitle\">{this.subtitleText}</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{(this.hasAction || this.additionalText) &&\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ui5-card-header-action-and-additional-text\"\n\t\t\t\t\tonFocusIn={this._actionsFocusin}\n\t\t\t\t\tonFocusOut={this._actionsFocusout}\n\t\t\t\t>\n\t\t\t\t\t{this.hasAction &&\n\t\t\t\t\t\t<slot name=\"action\"></slot>\n\t\t\t\t\t}\n\t\t\t\t\t{this.additionalText &&\n\t\t\t\t\t\t<div class=\"ui5-card-header-additionalText\">\n\t\t\t\t\t\t\t<span id={`${this._id}-additionalText`} part=\"additional-text\" dir=\"auto\">{this.additionalText}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t);\n}\n"]}

package/dist/DateTimeInput.d.ts

@@ -18,6 +18,12 @@ declare class DateTimeInput extends Input {
      */
     get hasValueStateMessage(): boolean;
     get _isMobileDevice(): boolean;
+    /**
+     * Placeholder must not remain on the native input when a value is present,
+     * so screen readers (e.g. JAWS) do not announce it together with the value.
+     * @override
+     */
+    get _placeholder(): string | undefined;
     /**
      * Override to handle nested slot structure from DatePicker -> DateTimeInput slot forwarding.
      * Assumes DateTimeInput always has slot-within-slot structure for valueStateMessage.

package/dist/DateTimeInput.js

@@ -36,6 +36,17 @@ let DateTimeInput = class DateTimeInput extends Input {
     get _isMobileDevice() {
         return !isDesktop() && (isPhone() || isTablet());
     }
+    /**
+     * Placeholder must not remain on the native input when a value is present,
+     * so screen readers (e.g. JAWS) do not announce it together with the value.
+     * @override
+     */
+    get _placeholder() {
+        if (this.value) {
+            return;
+        }
+        return super._placeholder;
+    }
     /**
      * Override to handle nested slot structure from DatePicker -> DateTimeInput slot forwarding.
      * Assumes DateTimeInput always has slot-within-slot structure for valueStateMessage.

package/dist/DateTimeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeInput.js","sourceRoot":"","sources":["../src/DateTimeInput.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,UAAU,MAAM,kDAAkD,CAAC;AAE1E,SAAS;AACT,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAEtF;;;;;;;GAOG;AAKH,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,KAAK;IAAjC;;QAEC,iCAA4B,GAAG,KAAK,CAAC;IAkDtC,CAAC;IAhDA;;;;;;OAMG;IACH,IAAI,oBAAoB;QACvB,OAAO,IAAI,CAAC,4BAA4B,IAAI,KAAK,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;IACjG,CAAC;IAED,IAAI,eAAe;QAClB,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,QAAQ,EAAE,CAAC,CAAC;IAClD,CAAC;IAED;;;;OAIG;IACH,IAAI,wBAAwB;QAC3B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACzB,OAAO;QACR,CAAC;QAED,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,KAAK,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAE3G,IAAI,IAAI,CAAC,qCAAqC,EAAE,CAAC;YAChD,OAAO,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;QAClF,CAAC;QAED,mFAAmF;QACnF,IAAI,IAAI,CAAC,iBAAiB,CAAC,MAAM,EAAE,CAAC;YACnC,MAAM,SAAS,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;YAC5C,IAAI,SAAS,CAAC,OAAO,KAAK,MAAM,EAAE,CAAC;gBAClC,MAAM,aAAa,GAAI,SAA6B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;gBACtF,MAAM,WAAW,GAAG,aAAa;qBAC/B,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC;qBACnC,IAAI,CAAC,GAAG,CAAC;qBACT,IAAI,EAAE,CAAC;gBACT,OAAO,WAAW,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,WAAW,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;YAClE,CAAC;YACD,gCAAgC;YAChC,OAAO,GAAG,UAAU,IAAI,SAAS,CAAC,WAAW,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;QAC9D,CAAC;QAED,OAAO,UAAU,CAAC;IACnB,CAAC;CACD,CAAA;AAlDA;IADC,QAAQ,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;mEACK;AAFhC,aAAa;IAJlB,aAAa,CAAC;QACd,GAAG,EAAE,oBAAoB;KACzB,CAAC;GAEI,aAAa,CAoDlB;AAED,aAAa,CAAC,MAAM,EAAE,CAAC;AAEvB,eAAe,aAAa,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\n\n// Styles\nimport Input from \"./Input.js\";\nimport { property } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport { isDesktop, isPhone, isTablet } from \"@ui5/webcomponents-base/dist/Device.js\";\n\n/**\n * Extention of the UI5 Input, so we do not modify Input's private properties within the datetime components.\n * Intended to be used for the DateTime components.\n *\n * @class\n * @extends Input\n * @private\n */\n@customElement({\n\ttag: \"ui5-datetime-input\",\n})\n\nclass DateTimeInput extends Input {\n\t@property({ noAttribute: true })\n\t_shouldOpenValueStatePopover = false;\n\n\t/**\n\t * Prevents the value state message popover from appearing when a responsive popover (like time selection) is open\n\t * since the responsive popover already includes the necessary information in its header.\n\t *\n\t * @protected\n\t * @override\n\t */\n\tget hasValueStateMessage() {\n\t\treturn this._shouldOpenValueStatePopover && super.hasValueStateMessage && !this._isMobileDevice;\n\t}\n\n\tget _isMobileDevice() {\n\t\treturn !isDesktop() && (isPhone() || isTablet());\n\t}\n\n\t/**\n\t * Override to handle nested slot structure from DatePicker -> DateTimeInput slot forwarding.\n\t * Assumes DateTimeInput always has slot-within-slot structure for valueStateMessage.\n\t * @override\n\t */\n\tget ariaValueStateHiddenText(): string | undefined {\n\t\tif (!this.hasValueState) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst valueState = this.valueState !== ValueState.None ? this.valueStateTypeMappings[this.valueState] : \"\";\n\n\t\tif (this.shouldDisplayDefaultValueStateMessage) {\n\t\t\treturn this.valueStateText ? `${valueState} ${this.valueStateText}` : valueState;\n\t\t}\n\n\t\t// Handle the specific nested slot case: outer slot -> inner slot -> actual content\n\t\tif (this.valueStateMessage.length) {\n\t\t\tconst outerSlot = this.valueStateMessage[0];\n\t\t\tif (outerSlot.tagName === \"SLOT\") {\n\t\t\t\tconst assignedNodes = (outerSlot as HTMLSlotElement).assignedNodes({ flatten: true });\n\t\t\t\tconst textContent = assignedNodes\n\t\t\t\t\t.map(node => node.textContent || \"\")\n\t\t\t\t\t.join(\" \")\n\t\t\t\t\t.trim();\n\t\t\t\treturn textContent ? `${valueState} ${textContent}` : valueState;\n\t\t\t}\n\t\t\t// Fallback for non-slot content\n\t\t\treturn `${valueState} ${outerSlot.textContent || \"\"}`.trim();\n\t\t}\n\n\t\treturn valueState;\n\t}\n}\n\nDateTimeInput.define();\n\nexport default DateTimeInput;\n"]}
+{"version":3,"file":"DateTimeInput.js","sourceRoot":"","sources":["../src/DateTimeInput.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,UAAU,MAAM,kDAAkD,CAAC;AAE1E,SAAS;AACT,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAEtF;;;;;;;GAOG;AAKH,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,KAAK;IAAjC;;QAEC,iCAA4B,GAAG,KAAK,CAAC;IA+DtC,CAAC;IA7DA;;;;;;OAMG;IACH,IAAI,oBAAoB;QACvB,OAAO,IAAI,CAAC,4BAA4B,IAAI,KAAK,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;IACjG,CAAC;IAED,IAAI,eAAe;QAClB,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,QAAQ,EAAE,CAAC,CAAC;IAClD,CAAC;IAED;;;;OAIG;IACH,IAAI,YAAY;QACf,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO;QACR,CAAC;QAED,OAAO,KAAK,CAAC,YAAY,CAAC;IAC3B,CAAC;IAED;;;;OAIG;IACH,IAAI,wBAAwB;QAC3B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACzB,OAAO;QACR,CAAC;QAED,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,KAAK,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAE3G,IAAI,IAAI,CAAC,qCAAqC,EAAE,CAAC;YAChD,OAAO,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;QAClF,CAAC;QAED,mFAAmF;QACnF,IAAI,IAAI,CAAC,iBAAiB,CAAC,MAAM,EAAE,CAAC;YACnC,MAAM,SAAS,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;YAC5C,IAAI,SAAS,CAAC,OAAO,KAAK,MAAM,EAAE,CAAC;gBAClC,MAAM,aAAa,GAAI,SAA6B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;gBACtF,MAAM,WAAW,GAAG,aAAa;qBAC/B,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC;qBACnC,IAAI,CAAC,GAAG,CAAC;qBACT,IAAI,EAAE,CAAC;gBACT,OAAO,WAAW,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,WAAW,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;YAClE,CAAC;YACD,gCAAgC;YAChC,OAAO,GAAG,UAAU,IAAI,SAAS,CAAC,WAAW,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;QAC9D,CAAC;QAED,OAAO,UAAU,CAAC;IACnB,CAAC;CACD,CAAA;AA/DA;IADC,QAAQ,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;mEACK;AAFhC,aAAa;IAJlB,aAAa,CAAC;QACd,GAAG,EAAE,oBAAoB;KACzB,CAAC;GAEI,aAAa,CAiElB;AAED,aAAa,CAAC,MAAM,EAAE,CAAC;AAEvB,eAAe,aAAa,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\n\n// Styles\nimport Input from \"./Input.js\";\nimport { property } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport { isDesktop, isPhone, isTablet } from \"@ui5/webcomponents-base/dist/Device.js\";\n\n/**\n * Extention of the UI5 Input, so we do not modify Input's private properties within the datetime components.\n * Intended to be used for the DateTime components.\n *\n * @class\n * @extends Input\n * @private\n */\n@customElement({\n\ttag: \"ui5-datetime-input\",\n})\n\nclass DateTimeInput extends Input {\n\t@property({ noAttribute: true })\n\t_shouldOpenValueStatePopover = false;\n\n\t/**\n\t * Prevents the value state message popover from appearing when a responsive popover (like time selection) is open\n\t * since the responsive popover already includes the necessary information in its header.\n\t *\n\t * @protected\n\t * @override\n\t */\n\tget hasValueStateMessage() {\n\t\treturn this._shouldOpenValueStatePopover && super.hasValueStateMessage && !this._isMobileDevice;\n\t}\n\n\tget _isMobileDevice() {\n\t\treturn !isDesktop() && (isPhone() || isTablet());\n\t}\n\n\t/**\n\t * Placeholder must not remain on the native input when a value is present,\n\t * so screen readers (e.g. JAWS) do not announce it together with the value.\n\t * @override\n\t */\n\tget _placeholder() {\n\t\tif (this.value) {\n\t\t\treturn;\n\t\t}\n\n\t\treturn super._placeholder;\n\t}\n\n\t/**\n\t * Override to handle nested slot structure from DatePicker -> DateTimeInput slot forwarding.\n\t * Assumes DateTimeInput always has slot-within-slot structure for valueStateMessage.\n\t * @override\n\t */\n\tget ariaValueStateHiddenText(): string | undefined {\n\t\tif (!this.hasValueState) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst valueState = this.valueState !== ValueState.None ? this.valueStateTypeMappings[this.valueState] : \"\";\n\n\t\tif (this.shouldDisplayDefaultValueStateMessage) {\n\t\t\treturn this.valueStateText ? `${valueState} ${this.valueStateText}` : valueState;\n\t\t}\n\n\t\t// Handle the specific nested slot case: outer slot -> inner slot -> actual content\n\t\tif (this.valueStateMessage.length) {\n\t\t\tconst outerSlot = this.valueStateMessage[0];\n\t\t\tif (outerSlot.tagName === \"SLOT\") {\n\t\t\t\tconst assignedNodes = (outerSlot as HTMLSlotElement).assignedNodes({ flatten: true });\n\t\t\t\tconst textContent = assignedNodes\n\t\t\t\t\t.map(node => node.textContent || \"\")\n\t\t\t\t\t.join(\" \")\n\t\t\t\t\t.trim();\n\t\t\t\treturn textContent ? `${valueState} ${textContent}` : valueState;\n\t\t\t}\n\t\t\t// Fallback for non-slot content\n\t\t\treturn `${valueState} ${outerSlot.textContent || \"\"}`.trim();\n\t\t}\n\n\t\treturn valueState;\n\t}\n}\n\nDateTimeInput.define();\n\nexport default DateTimeInput;\n"]}

package/dist/Filters.js

@@ -7,7 +7,7 @@ const StartsWithPerTerm = (value, items, propName) => {
     return items.filter(item => {
         const text = item[propName];
         reg.lastIndex = 0;
-        return reg.test(text.toLowerCase());
+        return reg.test((text ?? "").toLowerCase());
     });
 };
 const StartsWith = (value, items, propName) => items.filter(item => (item[propName] || "").toLowerCase().startsWith(value.toLowerCase()));

package/dist/Filters.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filters.js","sourceRoot":"","sources":["../src/Filters.ts"],"names":[],"mappings":"AAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC;AAExC,MAAM,YAAY,GAAG,CAAC,GAAW,EAAU,EAAE;IAC5C,OAAO,GAAG,CAAC,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AACvC,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAI,KAAa,EAAE,KAAe,EAAE,QAAgB,EAAE,EAAE;IACjF,MAAM,GAAG,GAAG,IAAI,MAAM,CAAC,UAAU,YAAY,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAE7E,OAAO,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;QAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,QAA6B,CAAW,CAAC;QAE3D,GAAG,CAAC,SAAS,GAAG,CAAC,CAAC;QAElB,OAAO,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAI,KAAa,EAAE,KAAe,EAAE,QAAgB,EAAY,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAA6B,CAAW,IAAI,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;AAChN,MAAM,QAAQ,GAAG,CAAI,KAAa,EAAE,KAAe,EAAE,QAAgB,EAAY,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAA6B,CAAW,IAAI,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;AAC5M,MAAM,IAAI,GAAG,CAAI,CAAS,EAAE,KAAe,EAAY,EAAE,CAAC,KAAK,CAAC;AAEhE,OAAO,EACN,iBAAiB,EACjB,UAAU,EACV,QAAQ,EACR,IAAI,GACJ,CAAC","sourcesContent":["const escapeReg = /[[\\]{}()*+?.\\\\^$|]/g;\n\nconst escapeRegExp = (str: string): string => {\n\treturn str.replace(escapeReg, \"\\\\$&\");\n};\n\nconst StartsWithPerTerm = <T>(value: string, items: Array<T>, propName: string) => {\n\tconst reg = new RegExp(`(^|\\\\s)${escapeRegExp(value.toLowerCase())}.*`, \"g\");\n\n\treturn items.filter(item => {\n\t\tconst text = item[propName as keyof typeof item] as string;\n\n\t\treg.lastIndex = 0;\n\n\t\treturn reg.test(text.toLowerCase());\n\t});\n};\n\nconst StartsWith = <T>(value: string, items: Array<T>, propName: string): Array<T> => items.filter(item => (item[propName as keyof typeof item] as string || \"\").toLowerCase().startsWith(value.toLowerCase()));\nconst Contains = <T>(value: string, items: Array<T>, propName: string): Array<T> => items.filter(item => (item[propName as keyof typeof item] as string || \"\").toLowerCase().includes(value.toLowerCase()));\nconst None = <T>(_: string, items: Array<T>): Array<T> => items;\n\nexport {\n\tStartsWithPerTerm,\n\tStartsWith,\n\tContains,\n\tNone,\n};\n"]}
+{"version":3,"file":"Filters.js","sourceRoot":"","sources":["../src/Filters.ts"],"names":[],"mappings":"AAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC;AAExC,MAAM,YAAY,GAAG,CAAC,GAAW,EAAU,EAAE;IAC5C,OAAO,GAAG,CAAC,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AACvC,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAI,KAAa,EAAE,KAAe,EAAE,QAAgB,EAAE,EAAE;IACjF,MAAM,GAAG,GAAG,IAAI,MAAM,CAAC,UAAU,YAAY,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAE7E,OAAO,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;QAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,QAA6B,CAAW,CAAC;QAE3D,GAAG,CAAC,SAAS,GAAG,CAAC,CAAC;QAElB,OAAO,GAAG,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAI,KAAa,EAAE,KAAe,EAAE,QAAgB,EAAY,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAA6B,CAAW,IAAI,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;AAChN,MAAM,QAAQ,GAAG,CAAI,KAAa,EAAE,KAAe,EAAE,QAAgB,EAAY,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAA6B,CAAW,IAAI,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;AAC5M,MAAM,IAAI,GAAG,CAAI,CAAS,EAAE,KAAe,EAAY,EAAE,CAAC,KAAK,CAAC;AAEhE,OAAO,EACN,iBAAiB,EACjB,UAAU,EACV,QAAQ,EACR,IAAI,GACJ,CAAC","sourcesContent":["const escapeReg = /[[\\]{}()*+?.\\\\^$|]/g;\n\nconst escapeRegExp = (str: string): string => {\n\treturn str.replace(escapeReg, \"\\\\$&\");\n};\n\nconst StartsWithPerTerm = <T>(value: string, items: Array<T>, propName: string) => {\n\tconst reg = new RegExp(`(^|\\\\s)${escapeRegExp(value.toLowerCase())}.*`, \"g\");\n\n\treturn items.filter(item => {\n\t\tconst text = item[propName as keyof typeof item] as string;\n\n\t\treg.lastIndex = 0;\n\n\t\treturn reg.test((text ?? \"\").toLowerCase());\n\t});\n};\n\nconst StartsWith = <T>(value: string, items: Array<T>, propName: string): Array<T> => items.filter(item => (item[propName as keyof typeof item] as string || \"\").toLowerCase().startsWith(value.toLowerCase()));\nconst Contains = <T>(value: string, items: Array<T>, propName: string): Array<T> => items.filter(item => (item[propName as keyof typeof item] as string || \"\").toLowerCase().includes(value.toLowerCase()));\nconst None = <T>(_: string, items: Array<T>): Array<T> => items;\n\nexport {\n\tStartsWithPerTerm,\n\tStartsWith,\n\tContains,\n\tNone,\n};\n"]}

package/dist/List.js

@@ -924,7 +924,10 @@ let List = List_1 = class List extends UI5Element {
     }
     onItemPress(e) {
         const pressedItem = e.detail.item;
-        if (!this.fireDecoratorEvent("item-click", { item: pressedItem })) {
+        // if InactiveSelectable - don't fire the public "item-click" event
+        // we fall through to the selection code below
+        const isInactiveSelectable = pressedItem.isInactiveSelectable;
+        if (!isInactiveSelectable && !this.fireDecoratorEvent("item-click", { item: pressedItem })) {
             return;
         }
         if (this.selectionMode !== ListSelectionMode.Delete) {