A simple angular module for animating delete buttons using md-button

demo.gif

ht-md-delete-btn.module.js

/**
 * Created by alireza on 7/11/17.
 */

"use strict";

class HtMdDeleteBtnComponent {
    onDelete;
    onCancel;
    open = false;
    click($event) {
        if (this.open) {
            if (this.onDelete) {
                this.onDelete({$event});
            }
            this.open = false;
        }
        else {
            this.open = true;
        }
    }
    blur($event){
        this.open = false;
        if(this.onCancel){
            this.onCancel({$event});
        }
    }
}
export default angular.module('ht.md.deleteBtn', [])
    .component('htMdDeleteBtn', {
        template: `
            <md-button class="md-icon-button md-warn" 
                ng-blur="$ctrl.blur($event)" ng-click="$ctrl.click($event)" 
                ng-class="[$ctrl.btnClass || '', $ctrl.open ? 'md-hue-2' : '']">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" 
                     style="fill: currentColor">
                    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12z"></path>
                    <g  ng-style="{transform: $ctrl.open ? 'rotate(90deg)' : ''}"
                        style="transform-origin: 15px 10px; transition: transform .2s;">
                        <path d="M19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path>
                    </g>
                </svg>
            </md-button>
            `,
        controller: HtMdDeleteBtnComponent,
        bindings: {
            onDelete: '&?',
            onCancel: '&?',
            btnClass: '@'
        }
    }).name;