all files / src/components/button/ button.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
1×
1×
24×
24×
24×
24×
24×
24×
 
1×
24×
24×
2×
1×
1×
 
 
 
1×
24×
3×
 
 
1×
24×
24×
 
14×
14×
 
1×
1×
 
1×
1×
1×
 
1×
1×
 
 
7×
 
24×
13×
 
24×
 
1×
4×
3×
 
 
1×
1×
 
1×
1×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
"use strict";
var OsButton = (function () {
    function OsButton($element, $window) {
        this.$element = $element;
        this.$window = $window;
        this.mdButton = $element.children('md-button');
        this.mdButton.addClass(this.makeClass());
        this.setDisabled();
        this.assignEvents();
    }
    OsButton.prototype.assignEvents = function () {
        var _this = this;
        this.$element.on('click', function (e) {
            if (_this.disabled) {
                e.preventDefault();
                e.stopImmediatePropagation();
            }
        });
    };
    OsButton.prototype.setDisabled = function () {
        if (this.disabled || this.loading) {
            this.mdButton.attr('disabled', 'disabled');
        }
    };
    OsButton.prototype.makeClass = function () {
        var classes = [];
        switch (this.variation) {
            case 'solid':
                classes.push('md-raised');
                break;
            case 'outline':
                classes.push('md-os-outline');
                break;
            case 'super':
                classes.push('md-raised');
                classes.push('md-os-super');
                break;
            case 'icon':
                classes.push('md-os-icon');
                break;
            case 'text':
            default:
                break;
        }
        if (this.colour) {
            classes.push('md-' + this.colour);
        }
        return classes.join(' ');
    };
    OsButton.prototype.$postLink = function () {
        if ('componentHandler' in this.$window) {
            this.$window.componentHandler.upgradeElements(this.mdButton);
        }
    };
    OsButton.$inject = ['$element', '$window'];
    return OsButton;
}());
exports.OsButton = OsButton;
angular
    .module('osElements')
    .component('osButton', {
    bindings: {
        disabled: '=ngDisabled',
        colour: '@',
        variation: '@',
        type: '@',
        loading: '<'
    },
    controller: OsButton,
    controllerAs: 'osButton',
    transclude: true,
    template: "\n            <md-button ng-disabled=\"osButton.disabled || osButton.loading\" md-no-ink type=\"{{osButton.type}}\" class=\"mdl-button mdl-js-button mdl-js-ripple-effect\" ng-class=\"{loading: osButton.loading, 'md-hue-900': osButton.loading}\" layout=\"row\">\n              <ng-transclude></ng-transclude>\n              <div class=\"loader\" ng-if=\"osButton.loading\">\n                <svg class=\"circular\" viewBox=\"25 25 50 50\">\n                  <circle class=\"path\" cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" stroke-width=\"3\" stroke-miterlimit=\"10\"/>\n                </svg>\n              </div>\n            </md-button>\n        "
});