("colors");
return colors.filter(item => item.value).slice(0, 15);
}
diff --git a/packages/main/src/ColorPaletteItem.ts b/packages/main/src/ColorPaletteItem.ts
index 486b727adf3b..272a5527d1fe 100644
--- a/packages/main/src/ColorPaletteItem.ts
+++ b/packages/main/src/ColorPaletteItem.ts
@@ -10,10 +10,16 @@ import ColorPaletteItemTemplate from "./ColorPaletteItemTemplate.js";
import {
COLORPALETTE_COLOR_LABEL,
} from "./generated/i18n/i18n-defaults.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
// Styles
import ColorPaletteItemCss from "./generated/themes/ColorPaletteItem.css.js";
+type ColorPaletteItemNativeClickEventDetail = {
+ item: ColorPaletteItem,
+ originalEvent: Event;
+};
+
/**
* @class
*
@@ -33,7 +39,25 @@ import ColorPaletteItemCss from "./generated/themes/ColorPaletteItem.css.js";
template: ColorPaletteItemTemplate,
shadowRootOptions: { delegatesFocus: true },
})
+
+/**
+ * Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.
+ *
+ * **Note:** The event will not be fired if the `disabled` property is set to `true`.
+ *
+ * @param {ColorPaletteItem} item The color palette item that was clicked.
+ * @param {Event} originalEvent The original DOM event that triggered the click. Use this to access modifier keys (altKey, ctrlKey, metaKey, shiftKey) and other native event properties.
+ * @since 2.22.0
+ * @public
+ */
+@event("click", {
+ bubbles: true,
+ cancelable: true,
+})
class ColorPaletteItem extends UI5Element implements IColorPaletteItem {
+ eventDetails!: {
+ "click": ColorPaletteItemNativeClickEventDetail,
+ }
/**
* Defines the colour of the component.
*
@@ -129,8 +153,30 @@ class ColorPaletteItem extends UI5Element implements IColorPaletteItem {
},
};
}
+
+ _onClick(e: MouseEvent) {
+ if (this._disabled) {
+ e.preventDefault();
+ e.stopPropagation();
+ return;
+ }
+
+ e.stopImmediatePropagation();
+
+ // Fire semantic click event (CustomEvent that bubbles)
+ const prevented = !this.fireDecoratorEvent("click", {
+ item: this,
+ originalEvent: e,
+ });
+
+ if (prevented) {
+ e.preventDefault();
+ e.stopPropagation();
+ }
+ }
}
ColorPaletteItem.define();
export default ColorPaletteItem;
+export type { ColorPaletteItemNativeClickEventDetail };
diff --git a/packages/main/src/ColorPaletteItemTemplate.tsx b/packages/main/src/ColorPaletteItemTemplate.tsx
index f8dae34c0604..f1ab9a326f9d 100644
--- a/packages/main/src/ColorPaletteItemTemplate.tsx
+++ b/packages/main/src/ColorPaletteItemTemplate.tsx
@@ -9,6 +9,7 @@ export default function ColorPaletteItemTemplate(this: ColorPaletteItem) {
aria-label={this.getLabelText}
aria-pressed={this.selected}
title={this.getLabelText}
+ onClick={this._onClick}
>
);
}
diff --git a/packages/main/src/ColorPalettePopover.ts b/packages/main/src/ColorPalettePopover.ts
index b9a8d3042eb5..212e4fcefd74 100644
--- a/packages/main/src/ColorPalettePopover.ts
+++ b/packages/main/src/ColorPalettePopover.ts
@@ -204,7 +204,7 @@ class ColorPalettePopover extends UI5Element {
}
// since height is dynamically determined by padding-block-start
- colorPalette.allColorsInPalette.forEach((item: IColorPaletteItem) => {
+ (colorPalette.allColorsInPalette).forEach((item: ColorPaletteItem) => {
const itemHeight = item.offsetHeight + 4; // adding 4px for the offsets on top and bottom
item.style.setProperty("--_ui5_color_palette_item_height", `${itemHeight}px`);
});
diff --git a/packages/main/test/pages/ColorPalette.html b/packages/main/test/pages/ColorPalette.html
index b961217011f9..7e83135bdd60 100644
--- a/packages/main/test/pages/ColorPalette.html
+++ b/packages/main/test/pages/ColorPalette.html
@@ -127,6 +127,35 @@
+
+
+
+
+ ColorPaletteItem Click Event Demo
+ Sample 1: Listen to click event on individual items (with modifier keys)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sample 2: preventDefault on item click prevents parent's item-click event
+
+
+
+
+
+
+
+ The middle item (brown) calls preventDefault and parent's item-click will not fire
+