all files / button/ button.js

100% Statements 170/170
92.68% Branches 114/123
100% Functions 26/26
100% Lines 164/164
5 statements, 2 functions, 11 branches Ignored     
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 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284    11× 11× 11×       112× 112× 112× 112×                 332×     332× 332× 332×   332× 211×   332× 269×   332× 332× 14× 14×   332×   332×   332×     328×     11×   371× 35× 35× 13×     22× 22×     35× 35× 13×     22×       326×     317×             319×     319× 211×   319× 319× 319× 35×   319×   319× 14×   319× 319× 24×   319× 319×     778×       175× 175× 178× 178×             39× 39× 13× 10× 10×                   26×   39×               14×       14×                                                                              
/* istanbul ignore next */ 
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
/* istanbul ignore next */ 
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    Iif (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) Eif (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../common/common"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, common_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var IconPosition;
    (function (IconPosition) {
        IconPosition["Left"] = "Left";
        IconPosition["Right"] = "Right";
        IconPosition["Top"] = "Top";
        IconPosition["Bottom"] = "Bottom";
    })(IconPosition = exports.IconPosition || (exports.IconPosition = {}));
    exports.buttonObserver = new ej2_base_3.Observer();
    var cssClassName = {
        RTL: 'e-rtl',
        BUTTON: 'e-btn',
        PRIMARY: 'e-primary',
        ICONBTN: 'e-icon-btn'
    };
    var Button = (function (_super) {
        __extends(Button, _super);
        function Button(options, element) {
            return _super.call(this, options, element) || this;
        }
        Button.prototype.preRender = function () {
        };
        Button.prototype.render = function () {
            this.initialize();
            this.removeRippleEffect = ej2_base_3.rippleEffect(this.element, { selector: '.' + cssClassName.BUTTON });
            this.renderComplete();
        };
        Button.prototype.initialize = function () {
            if (this.cssClass) {
                ej2_base_2.addClass([this.element], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
            }
            if (this.isPrimary) {
                this.element.classList.add(cssClassName.PRIMARY);
            }
            Eif (!ej2_base_1.isBlazor() || (ej2_base_1.isBlazor() && this.getModuleName() !== 'progress-btn')) {
                if (this.content) {
                    var tempContent = (this.enableHtmlSanitizer) ? ej2_base_3.SanitizeHtmlHelper.sanitize(this.content) : this.content;
                    this.element.innerHTML = tempContent;
                }
                this.setIconCss();
            }
            if (this.enableRtl) {
                this.element.classList.add(cssClassName.RTL);
            }
            if (this.disabled) {
                this.controlStatus(this.disabled);
            }
            else {
                this.wireEvents();
            }
        };
        Button.prototype.controlStatus = function (disabled) {
            this.element.disabled = disabled;
        };
        Button.prototype.setIconCss = function () {
            if (this.iconCss) {
                var span = this.createElement('span', { className: 'e-btn-icon ' + this.iconCss });
                if (!this.element.textContent.trim()) {
                    this.element.classList.add(cssClassName.ICONBTN);
                }
                else {
                    span.classList.add('e-icon-' + this.iconPosition.toLowerCase());
                    if (this.iconPosition === 'Top' || this.iconPosition === 'Bottom') {
                        this.element.classList.add('e-' + this.iconPosition.toLowerCase() + '-icon-btn');
                    }
                }
                var node = this.element.childNodes[0];
                if (node && (this.iconPosition === 'Left' || this.iconPosition === 'Top')) {
                    this.element.insertBefore(span, node);
                }
                else {
                    this.element.appendChild(span);
                }
            }
        };
        Button.prototype.wireEvents = function () {
            if (this.isToggle) {
                ej2_base_3.EventHandler.add(this.element, 'click', this.btnClickHandler, this);
            }
        };
        Button.prototype.unWireEvents = function () {
            if (this.isToggle) {
                ej2_base_3.EventHandler.remove(this.element, 'click', this.btnClickHandler);
            }
        };
        Button.prototype.btnClickHandler = function () {
            if (this.element.classList.contains('e-active')) {
                this.element.classList.remove('e-active');
            }
            else {
                this.element.classList.add('e-active');
            }
        };
        Button.prototype.destroy = function () {
            var classList = [cssClassName.PRIMARY, cssClassName.RTL, cssClassName.ICONBTN, 'e-success', 'e-info', 'e-danger',
                'e-warning', 'e-flat', 'e-outline', 'e-small', 'e-bigger', 'e-active', 'e-round',
                'e-top-icon-btn', 'e-bottom-icon-btn'];
            if (this.cssClass) {
                classList = classList.concat(this.cssClass.split(' '));
            }
            _super.prototype.destroy.call(this);
            ej2_base_2.removeClass([this.element], classList);
            if (!this.element.getAttribute('class')) {
                this.element.removeAttribute('class');
            }
            if (this.disabled) {
                this.element.removeAttribute('disabled');
            }
            if (this.content) {
                this.element.innerHTML = this.element.innerHTML.replace(this.content, '');
            }
            var span = this.element.querySelector('span.e-btn-icon');
            if (span) {
                ej2_base_2.detach(span);
            }
            this.unWireEvents();
            if (ej2_base_1.isRippleEnabled) {
                this.removeRippleEffect();
            }
        };
        Button.prototype.getModuleName = function () {
            return 'btn';
        };
        Button.prototype.getPersistData = function () {
            return this.addOnPersist([]);
        };
        Button.Inject = function () {
        };
        Button.prototype.onPropertyChanged = function (newProp, oldProp) {
            var span = this.element.querySelector('span.e-btn-icon');
            for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
                var prop = _a[_i];
                switch (prop) {
                    case 'isPrimary':
                        if (newProp.isPrimary) {
                            this.element.classList.add(cssClassName.PRIMARY);
                        }
                        else {
                            this.element.classList.remove(cssClassName.PRIMARY);
                        }
                        break;
                    case 'disabled':
                        this.controlStatus(newProp.disabled);
                        break;
                    case 'iconCss': {
                        span = this.element.querySelector('span.e-btn-icon');
                        if (span) {
                            if (newProp.iconCss) {
                                span.className = 'e-btn-icon ' + newProp.iconCss;
                                if (this.element.textContent.trim()) {
                                    if (this.iconPosition === 'Left') {
                                        span.classList.add('e-icon-left');
                                    }
                                    else {
                                        span.classList.add('e-icon-right');
                                    }
                                }
                            }
                            else {
                                ej2_base_2.detach(span);
                            }
                        }
                        else {
                            this.setIconCss();
                        }
                        break;
                    }
                    case 'iconPosition':
                        ej2_base_2.removeClass([this.element], ['e-top-icon-btn', 'e-bottom-icon-btn']);
                        span = this.element.querySelector('span.e-btn-icon');
                        if (span) {
                            ej2_base_2.detach(span);
                        }
                        this.setIconCss();
                        break;
                    case 'cssClass':
                        if (oldProp.cssClass) {
                            ej2_base_2.removeClass([this.element], oldProp.cssClass.split(' '));
                        }
                        if (newProp.cssClass) {
                            ej2_base_2.addClass([this.element], newProp.cssClass.replace(/\s+/g, ' ').trim().split(' '));
                        }
                        break;
                    case 'enableRtl':
                        if (newProp.enableRtl) {
                            this.element.classList.add(cssClassName.RTL);
                        }
                        else {
                            this.element.classList.remove(cssClassName.RTL);
                        }
                        break;
                    case 'content': {
                        var node = common_1.getTextNode(this.element);
                        if (!node) {
                            this.element.classList.remove(cssClassName.ICONBTN);
                        }
                        Eif (!ej2_base_1.isBlazor() || (ej2_base_1.isBlazor() && !this.isServerRendered && this.getModuleName() !== 'progress-btn')) {
                            Eif (this.enableHtmlSanitizer) {
                                newProp.content = ej2_base_3.SanitizeHtmlHelper.sanitize(newProp.content);
                            }
                            this.element.innerHTML = newProp.content;
                            this.setIconCss();
                        }
                        break;
                    }
                    case 'isToggle':
                        if (newProp.isToggle) {
                            ej2_base_3.EventHandler.add(this.element, 'click', this.btnClickHandler, this);
                        }
                        else {
                            ej2_base_3.EventHandler.remove(this.element, 'click', this.btnClickHandler);
                            ej2_base_2.removeClass([this.element], ['e-active']);
                        }
                        break;
                }
            }
        };
        Button.prototype.click = function () {
            this.element.click();
        };
        Button.prototype.focusIn = function () {
            this.element.focus();
        };
        __decorate([
            ej2_base_1.Property('Left')
        ], Button.prototype, "iconPosition", void 0);
        __decorate([
            ej2_base_1.Property('')
        ], Button.prototype, "iconCss", void 0);
        __decorate([
            ej2_base_1.Property(false)
        ], Button.prototype, "disabled", void 0);
        __decorate([
            ej2_base_1.Property(false)
        ], Button.prototype, "isPrimary", void 0);
        __decorate([
            ej2_base_1.Property('')
        ], Button.prototype, "cssClass", void 0);
        __decorate([
            ej2_base_1.Property('')
        ], Button.prototype, "content", void 0);
        __decorate([
            ej2_base_1.Property(false)
        ], Button.prototype, "isToggle", void 0);
        __decorate([
            ej2_base_1.Property()
        ], Button.prototype, "locale", void 0);
        __decorate([
            ej2_base_1.Property(true)
        ], Button.prototype, "enableHtmlSanitizer", void 0);
        __decorate([
            ej2_base_2.Event()
        ], Button.prototype, "created", void 0);
        Button = __decorate([
            ej2_base_1.NotifyPropertyChanges
        ], Button);
        return Button;
    }(ej2_base_1.Component));
    exports.Button = Button;
});