paper-dialog handle onclose in component class - polymer

Question

I'm trying to use the 'paper-dialog' tag for Polymer 2 in a web component.
I'm trying to detect when the user clicks the cancel button vs the save/ok button.
The documenation says to create an event for 'iron-overlay-closed' to detect when the OK/Save button is clicked.
My problem is that the 'iron-overlay-closed' is firing even when I click the cancel button.
From my reading of the documentation only the button with dialog-confirm attribute should cause the event to fire.
<paper-dialog modal backdrdop id="dialog">
<h2>Select Time</h2>
<paper-dialog-scrollable>
<div slot="body">
<p>Body is here</p>
</div>
</paper-dialog-scrollable>
<div id="dialog-buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm autofocus>Save</paper-button>
</div>
</paper-dialog>
The below open method adds the listener.
The fireCallback method is then closed regardless of whether I click Save or Cancel.
open()
{
this.$.dialog.addEventListener('iron-overlay-closed', ()=> {this.fireCallback()});
this.$.dialog.open();
}
fireCallback()
{
console.log("closing");
}

Answer 1

If you define on-click method for both buttons explicitly, then you understand which button clicked ;
Demo
<div class="buttons">
<paper-button dialog-dismiss on-tap="_cancelled">Cancel</paper-button>
<paper-button dialog-confirm autofocus on-tap="_confirmed">OK</paper-button>
</div>
At script:
_cancelled(){
console.log('Cancelled');
}
_confirmed(){
console.log('Confirmed');
}
EDIT
As #Brett Sutton 'coment, on close of the paper-dialog, iron-overlay-closed event fired;
<paper-dialog id="scrolling" on-iron-overlay-closed="_myClosedFunction">
at script;
_myClosedFunction(c){
console.log('Closed as ', c.detail); // canceled: false, confirmed: true
}

Answer 2

#HakanC your example lead me to the answer.
The problem was that I was missing the import for:
<link href="../../../bower_components/iron-overlay-behavior/iron-overlay-behavior.html" rel="import">
Without the import my addEventListener was always firing but the 'confirmed' field in the details object that came back with the event was always false.
So my two problems were:
1) didn't realise I was missing an import
2) expected the event to only fire when I clicked save
- it fires for cancel and save and you need to check the 'confirmed' field to see which button was actually clicked.
So the final dialog was:
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/paper-dialog/paper-dialog.html">
<link href="../../../bower_components/iron-overlay-behavior/iron-overlay-behavior.html" rel="import">
<dom-module id="dialog-test">
<template>
<style include="shared-styles">
:host {
display: block;
margin: 5px;
height: 100%;
}
paper-dialog {
width: 100%;
margin: 0px;
}
#dialog-buttons {
display: flex;
justify-content: space-between;
}
</style>
<paper-dialog modal backdrdop id="dialog">
<h2>Select Time</h2>
<paper-dialog-scrollable>
<div slot="body">
<p>Body is here</p>
</div>
</paper-dialog-scrollable>
<div id="dialog-buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm autofocus>Save</paper-button>
</div>
</paper-dialog>
</template>
<script>
class DialogTest extends Polymer.Element {
static get is() {
return 'dialog-test';
}
static get properties() {
return {
};
}
open()
{
this.$.dialog.addEventListener('iron-overlay-closed', (e)=> {this.fireCallback(e)});
this.$.dialog.open();
}
fireCallback(e)
{
console.log(e.detail);
if (c.detail.confirmed == true)
{
console.log("saving")
}
}
connectedCallback()
{
super.connectedCallback();
this.open();
}
}
customElements.define(DialogTest.is, DialogTest);
</script> </dom-module>