feat(WIP): result action

elements/itemfilter/src/components/results.js

@@ -31,6 +31,7 @@ export class EOxItemFilterResults extends LitElement {
       resultAggregation: { attribute: false, type: Array },
       selectedResult: { state: true, type: Object },
       resultType: { attribute: "result-type", type: String },
+      resultActionIcon: { attribute: false, type: String },
     };
   }
 
@@ -61,6 +62,11 @@ export class EOxItemFilterResults extends LitElement {
      * @type String("list"|"card")
      */
     this.resultType = "list";
+
+    /**
+     * @type String
+     */
+    this.resultActionIcon = undefined;
   }
 
   /**

elements/itemfilter/src/main.js

@@ -68,6 +68,7 @@ export class EOxItemFilter extends LitElement {
       },
       externalFilter: { attribute: false, type: Function },
       resultType: { attribute: "result-type", type: String },
+      resultActionIcon: { attribute: false, type: String },
       unstyled: { type: Boolean },
     };
   }
@@ -241,6 +242,13 @@ export class EOxItemFilter extends LitElement {
      */
     this.resultType = "list";
 
+    /**
+     * Icon for result action. Supports html.
+     *
+     * @type String
+     */
+    this.resultActionIcon = undefined;
+
     /**
      * Render the element without additional styles
      */
@@ -381,6 +389,24 @@ export class EOxItemFilter extends LitElement {
     this.requestUpdate();
   }
 
+  /**
+   * Emits "result-action" event.
+   *
+   * @param {{detail: Object}} evt - "result-action" event triggered by result component
+   */
+  emitResultAction(evt) {
+    /**
+     * Fires when a result-action is clicked; event detail is `result`
+     */
+    this.dispatchEvent(
+      new CustomEvent("result-action", {
+        detail: evt.detail,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
   /**
    * Renders the HTML template for the component.
    */
@@ -471,7 +497,9 @@ export class EOxItemFilter extends LitElement {
               .resultAggregation=${this.#resultAggregation}
               .selectedResult=${this.selectedResult}
               .resultType=${this.resultType}
+              .resultActionIcon=${this.resultActionIcon}
               @result=${this.updateResult}
+              @result-action=${this.emitResultAction}
             >
               <slot name="resultstitle"
                 ><h6 class="main-heading">Results</h6></slot

elements/itemfilter/src/methods/results/create.js

@@ -112,6 +112,21 @@ export function createItemListMethod(
                 `,
               )}
             </span>
+            ${when(
+              EOxItemFilterResults.resultActionIcon,
+              () => html`
+                <span
+                  class="result-action"
+                  @click=${() =>
+                    EOxItemFilterResults.dispatchEvent(
+                      new CustomEvent("result-action", {
+                        detail: item,
+                      }),
+                    )}
+                  >${unsafeHTML(EOxItemFilterResults.resultActionIcon)}</span
+                >
+              `,
+            )}
           </li>
         `,
       )}

elements/itemfilter/src/style.eox.js

@@ -187,6 +187,18 @@ ul:not(#filters) > li {
 }
 ul#results li {
   padding: 5px var(--padding);
+  display: flex;
+  justify-content: space-between;
+}
+ul#results li .result-action {
+  opacity: .5;
+  transition: opacity .3s ease-in-out;
+}
+ul#results li .result-action:hover {
+  opacity: 1;
+}
+ul#results li.highlighted .result-action > * {
+  filter: invert(1);
 }
 ul#results ul.cards {
   display: flex;

elements/itemfilter/stories/index.js

@@ -9,3 +9,4 @@ export { default as NestedPropertyStory } from "./nested-property"; // Item filt
 export { default as ExternalStory } from "./external"; // Item filter with external endpoint
 export { default as CardDisplayStory } from "./card-display";
 export { default as CSSVariablesStory } from "./css-variables";
+export { default as ResultActionStory } from "./result-action";

elements/itemfilter/stories/itemfilter.stories.js

@@ -9,6 +9,7 @@ import {
   NestedPropertyStory,
   PreSetFilterStory,
   PrimaryStory,
+  ResultActionStory,
 } from "./index.js";
 
 export default {
@@ -60,3 +61,9 @@ export const CardDisplay = CardDisplayStory();
  * variable set to `row` instead of `column` (default)
  */
 export const CSSVariables = CSSVariablesStory();
+
+/**
+ * The `result-action` event is triggered when a result action is clicked. The icon can be configered with the
+ * `resultActionIcon` property.
+ */
+export const ResultAction = ResultActionStory();

elements/itemfilter/stories/result-action.js

@@ -0,0 +1,81 @@
+import items from "../test/testItems.json";
+import { html } from "lit";
+
+/**
+ * Generates a story configuration for the Result Action.
+ *
+ * @returns {Object} The story configuration with arguments for the component and a play function for interaction testing.
+ */
+function ResultAction() {
+  return {
+    render: (args) =>
+      html`<eox-itemfilter
+        id="result-action"
+        .items=${args.items}
+        .titleProperty=${args.titleProperty}
+        .aggregateResults=${args.aggregateResults}
+        .filterProperties=${args.filterProperties}
+        .resultActionIcon=${args.resultActionIcon}
+        @result-action=${(evt) => alert(`${evt.detail.title} clicked!`)}
+      ></eox-itemfilter>`,
+    args: {
+      inlineMode: false,
+      titleProperty: "title",
+      aggregateResults: "themes",
+      subTitleProperty: "description",
+      resultActionIcon:
+        '<svg style="width: 24px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>click me!</title><path fill="#004170" d="M11.5,11L17.88,16.37L17,16.55L16.36,16.67C15.73,16.8 15.37,17.5 15.65,18.07L15.92,18.65L17.28,21.59L15.86,22.25L14.5,19.32L14.24,18.74C13.97,18.15 13.22,17.97 12.72,18.38L12.21,18.78L11.5,19.35V11M10.76,8.69A0.76,0.76 0 0,0 10,9.45V20.9C10,21.32 10.34,21.66 10.76,21.66C10.95,21.66 11.11,21.6 11.24,21.5L13.15,19.95L14.81,23.57C14.94,23.84 15.21,24 15.5,24C15.61,24 15.72,24 15.83,23.92L18.59,22.64C18.97,22.46 19.15,22 18.95,21.63L17.28,18L19.69,17.55C19.85,17.5 20,17.43 20.12,17.29C20.39,16.97 20.35,16.5 20,16.21L11.26,8.86L11.25,8.87C11.12,8.76 10.95,8.69 10.76,8.69M15,10V8H20V10H15M13.83,4.76L16.66,1.93L18.07,3.34L15.24,6.17L13.83,4.76M10,0H12V5H10V0M3.93,14.66L6.76,11.83L8.17,13.24L5.34,16.07L3.93,14.66M3.93,3.34L5.34,1.93L8.17,4.76L6.76,6.17L3.93,3.34M7,10H2V8H7V10" /></svg>',
+      filterProperties: [
+        {
+          keys: ["title", "themes"],
+          title: "Search",
+          type: "text",
+          placeholder: "Type Something...",
+          expanded: true,
+          validation: {
+            pattern: ".{0,10}",
+            message: "Maximum 10 characters",
+          },
+        },
+        {
+          key: "code",
+          title: "Codes",
+          type: "multiselect",
+          placeholder: "Search Codes",
+        },
+        {
+          key: "themes",
+          title: "Theme",
+          type: "select",
+          placeholder: "Select a theme",
+          inline: false,
+        },
+        {
+          key: "tags",
+          title: "Tags",
+          type: "multiselect",
+          placeholder: "Select tags",
+          inline: false,
+        },
+        {
+          key: "timestamp",
+          type: "range",
+          format: "date",
+        },
+        {
+          key: "correlation",
+          title: "Correlation",
+          type: "range",
+          step: 0.1,
+        },
+        {
+          key: "geometry",
+          type: "spatial",
+        },
+      ],
+      items,
+    },
+  };
+}
+
+export default ResultAction;