The question is twofold. I have an element like this:
<dom-module id="sw-address-details">
<template>
<style include="sw-address-details-styles"></style>
<px-card hide-header="true">
<px-accordion-group>
<px-accordion
header-value="[[addressHeader]]"
on-px-accordion-expanded="expandAccordion"
opened="true"
icons='{"more":"px-utl:chevron-right","less":"px-utl:chevron","action":[{"icon":"px-utl:delete"}]}'
show-action>
<sw-address-element language="[[language]]" initial-header-value="{{addressHeader}}"></sw-address-element>
</px-accordion>
</px-accordion-group>
</px-card>
</template>
<script src='../js/sw-scroll-into-view-es6.js'></script>
<script src="../js/sw-address-details-es6.js"></script>
</dom-module>
First of all, according to the documentation, px-accordion-action-clicked is fired when one clicks the action. But, how do I know which icon is being clicked? I tried checking the returned event but that had no indication on whether the delete or edit icons have been clicked.
Second of all, I'd expect the event returned by the px-accordion-action-clicked would contain the target of the accordion, however in fact it bubbles up all the way and event.target refers to the sw-address-details. Basically I'd like to catch the event when the delete icon is pressed specifically (but not the edit icon) and .remove() the px-accordion element, not the whole sw-address-details element. How can i do this?
