all files / split-button/ split-button.js

96% Statements 216/225
91.3% Branches 84/92
97.56% Functions 40/41
95.89% Lines 210/219
18 statements, 7 functions, 29 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 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360              43×   44× 44×     44×     44× 44× 44×   44× 44× 44× 44× 44×           44× 40× 40×   44× 44×   44×     44×               44× 44× 44× 44× 44× 44×   44× 44×         44× 44×               44× 24×   24×   44×   44×   44×   44×       44×     44× 44× 44× 44× 40× 40×   44× 44× 44× 44×     44×         432×     59× 59× 59×   59× 59× 59× 43×     39× 39× 195×   39× 39×   43×     59× 59× 59× 59× 19×   59×     59×   44× 44×               43× 43×                                                                                                                                       12× 12× 12× 12×   12× 12×        
/* 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;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (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", "@syncfusion/ej2-buttons", "./../common/common", "../drop-down-button/drop-down-button"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, ej2_buttons_1, common_1, drop_down_button_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var RTL = 'e-rtl';
    var TAGNAME = 'EJS-SPLITBUTTON';
    var SplitButton = (function (_super) {
        __extends(SplitButton, _super);
        function SplitButton(options, element) {
            return _super.call(this, options, element) || this;
        }
        SplitButton.prototype.preRender = function () {
            var ele = this.element;
            if (ele.tagName === TAGNAME) {
                var ejInstance = ej2_base_1.getValue('ej2_instances', ele);
                var btn = this.createElement('button', { attrs: { 'type': 'button' } });
                var wrapper = this.createElement(TAGNAME, { className: 'e-' + this.getModuleName() + '-wrapper' });
                for (var idx = 0, len = ele.attributes.length; idx < len; idx++) {
                    btn.setAttribute(ele.attributes[idx].nodeName, ele.attributes[idx].nodeValue);
                }
                ele.parentNode.insertBefore(wrapper, ele);
                ej2_base_1.detach(ele);
                ele = btn;
                wrapper.appendChild(ele);
                ej2_base_1.setValue('ej2_instances', ejInstance, ele);
                this.wrapper = wrapper;
                this.element = ele;
            }
            if (!this.element.id) {
                this.element.id = ej2_base_3.getUniqueID('e-' + this.getModuleName());
            }
        };
        SplitButton.prototype.render = function () {
            this.initWrapper();
            this.createPrimaryButton();
            this.renderControl();
        };
        SplitButton.prototype.renderControl = function () {
            this.createSecondaryButton();
            this.setActiveElem([this.element, this.secondaryBtnObj.element]);
            this.setAria();
            this.wireEvents();
            this.renderComplete();
        };
        SplitButton.prototype.addItems = function (items, text) {
            _super.prototype.addItems.call(this, items, text);
            this.secondaryBtnObj.items = this.items;
        };
        SplitButton.prototype.removeItems = function (items, isUniqueId) {
            _super.prototype.removeItems.call(this, items, isUniqueId);
            this.secondaryBtnObj.items = this.items;
        };
        SplitButton.prototype.initWrapper = function () {
            if (!this.wrapper) {
                this.wrapper = this.createElement('div', { className: 'e-' + this.getModuleName() + '-wrapper' });
                this.element.parentNode.insertBefore(this.wrapper, this.element);
            }
            this.element.classList.remove('e-' + this.getModuleName());
            if (this.enableRtl) {
                this.wrapper.classList.add(RTL);
            }
            if (this.cssClass) {
                ej2_base_1.addClass([this.wrapper], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
            }
        };
        SplitButton.prototype.createPrimaryButton = function () {
            var btnModel = {
                cssClass: this.cssClass,
                enableRtl: this.enableRtl,
                iconCss: this.iconCss,
                iconPosition: this.iconPosition,
                content: this.content,
                disabled: this.disabled
            };
            this.primaryBtnObj = new ej2_buttons_1.Button(btnModel);
            this.primaryBtnObj.createElement = this.createElement;
            this.primaryBtnObj.appendTo(this.element);
            this.element.classList.add('e-' + this.getModuleName());
            this.element.type = 'button';
            this.wrapper.appendChild(this.element);
        };
        SplitButton.prototype.createSecondaryButton = function () {
            var _this = this;
            var btnElem = this.createElement('button', {
                className: 'e-icon-btn',
                attrs: { 'tabindex': '-1' },
                id: this.element.id + '_dropdownbtn'
            });
            this.wrapper.appendChild(btnElem);
            var dropDownBtnModel = {
                cssClass: this.cssClass,
                disabled: this.disabled,
                enableRtl: this.enableRtl,
                items: this.items,
                target: this.target,
                createPopupOnClick: this.createPopupOnClick
            };
            dropDownBtnModel.beforeItemRender = function (args) {
                if (_this.createPopupOnClick) {
                    _this.secondaryBtnObj.dropDown.relateTo = _this.wrapper;
                    _this.dropDown = _this.secondaryBtnObj.dropDown;
                }
                _this.trigger('beforeItemRender', args);
            };
            dropDownBtnModel.open = function (args) {
                _this.trigger('open', args);
            };
            dropDownBtnModel.close = function (args) {
                _this.trigger('close', args);
            };
            dropDownBtnModel.select = function (args) {
                _this.trigger('select', args);
            };
            dropDownBtnModel.beforeOpen = function (args) {
                if (_this.createPopupOnClick && _this.items.length === 0) {
                    _this.secondaryBtnObj.dropDown.relateTo = _this.wrapper;
                    _this.dropDown = _this.secondaryBtnObj.dropDown;
                }
                var callBackPromise = new Deferred();
                _this.trigger('beforeOpen', args, function (observedArgs) {
                    callBackPromise.resolve(observedArgs);
                });
                return callBackPromise;
            };
            dropDownBtnModel.beforeClose = function (args) {
                var callBackPromise = new Deferred();
                _this.trigger('beforeClose', args, function (observedArgs) {
                    callBackPromise.resolve(observedArgs);
                });
                return callBackPromise;
            };
            this.secondaryBtnObj = new drop_down_button_1.DropDownButton(dropDownBtnModel);
            this.secondaryBtnObj.createElement = this.createElement;
            this.secondaryBtnObj.appendTo(btnElem);
            if (!this.createPopupOnClick) {
                this.secondaryBtnObj.dropDown.relateTo = this.wrapper;
                this.dropDown = this.secondaryBtnObj.dropDown;
            }
            this.isPopupCreated = this.secondaryBtnObj.isPopupCreated;
            this.secondaryBtnObj.activeElem = [this.element, this.secondaryBtnObj.element];
            this.secondaryBtnObj.element.querySelector('.e-btn-icon').classList.remove('e-icon-right');
            if (this.disabled) {
                this.wrapper.classList.add('e-splitbtn-disabled');
            }
        };
        SplitButton.prototype.setAria = function () {
            ej2_base_3.attributes(this.element, {
                'aria-expanded': 'false', 'aria-haspopup': 'true',
                'aria-label': this.element.textContent ? this.element.textContent + ' splitbutton' : 'splitbutton', 'aria-owns': this.element.id + '_dropdownbtn-popup'
            });
        };
        SplitButton.prototype.getModuleName = function () {
            return 'split-btn';
        };
        SplitButton.prototype.toggle = function () {
            this.secondaryBtnObj.toggle();
        };
        SplitButton.prototype.destroy = function () {
            var _this = this;
            var classList = [RTL];
            if (this.cssClass) {
                classList = classList.concat(this.cssClass.split(' '));
            }
            Eif (this.element) {
                var element = document.getElementById(this.element.id);
                if (element && element.parentElement === this.wrapper) {
                    if (this.wrapper.tagName === TAGNAME) {
                        this.wrapper.innerHTML = '';
                        ej2_base_1.removeClass([this.wrapper], ['e-rtl', 'e-' + this.getModuleName() + '-wrapper']);
                        ej2_base_1.removeClass([this.wrapper], this.cssClass.split(' '));
                    }
                    else {
                        ej2_base_1.removeClass([this.element], classList);
                        ['aria-label', 'aria-haspopup', 'aria-expanded', 'aria-owns', 'type'].forEach(function (key) {
                            _this.element.removeAttribute(key);
                        });
                        this.wrapper.parentNode.insertBefore(this.element, this.wrapper);
                        ej2_base_1.remove(this.wrapper);
                    }
                    this.unWireEvents();
                }
            }
            this.primaryBtnObj.destroy();
            this.secondaryBtnObj.destroy();
            _super.prototype.destroy.call(this);
            if (this.element && !this.element.getAttribute('class')) {
                this.element.removeAttribute('class');
            }
            if (this.refreshing && this.isAngular) {
                this.element = this.wrapper;
                ['e-control', 'e-split-btn', 'e-lib'].forEach(function (key) {
                    _this.element.classList.add(key);
                });
                ej2_base_1.setValue('ej2_instances', [this], this.element);
            }
            this.wrapper = null;
        };
        SplitButton.prototype.wireEvents = function () {
            ej2_base_2.EventHandler.add(this.element, 'click', this.primaryBtnClickHandler, this);
            new ej2_base_3.KeyboardEvents(this.element, {
                keyAction: this.btnKeyBoardHandler.bind(this),
                keyConfigs: {
                    altdownarrow: 'alt+downarrow',
                    enter: 'enter'
                }
            });
        };
        SplitButton.prototype.unWireEvents = function () {
            ej2_base_2.EventHandler.remove(this.element, 'click', this.primaryBtnClickHandler);
            ej2_base_3.getInstance(this.element, ej2_base_3.KeyboardEvents).destroy();
        };
        SplitButton.prototype.primaryBtnClickHandler = function () {
            this.trigger('click', { element: this.element });
        };
        SplitButton.prototype.btnKeyBoardHandler = function (e) {
            switch (e.action) {
                case 'altdownarrow':
                    this.clickHandler(e);
                    break;
                case 'enter':
                    this.clickHandler(e);
                    Iif (this.getPopUpElement() && !this.getPopUpElement().classList.contains('e-popup-close')) {
                        this.element.classList.remove('e-active');
                        this.secondaryBtnObj.element.classList.add('e-active');
                    }
                    else {
                        this.secondaryBtnObj.element.classList.remove('e-active');
                    }
                    break;
            }
        };
        SplitButton.prototype.onPropertyChanged = function (newProp, oldProp) {
            var model = ['content', 'iconCss', 'iconPosition', 'cssClass', 'disabled', 'enableRtl'];
            this.primaryBtnObj.setProperties(common_1.getModel(newProp, model));
            model = ['beforeOpen', 'beforeItemRender', 'select', 'open',
                'close', 'cssClass', 'disabled', 'enableRtl', 'createPopupOnClick'];
            Iif (Object.keys(newProp).indexOf('items') > -1) {
                this.secondaryBtnObj.items = newProp.items;
                this.secondaryBtnObj.dataBind();
            }
            this.secondaryBtnObj.setProperties(common_1.getModel(newProp, model));
            for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
                var prop = _a[_i];
                switch (prop) {
                    case 'cssClass':
                        Eif (oldProp.cssClass) {
                            ej2_base_1.removeClass([this.wrapper], oldProp.cssClass.split(' '));
                        }
                        ej2_base_1.addClass([this.wrapper], newProp.cssClass.replace(/\s+/g, ' ').trim().split(' '));
                        break;
                    case 'enableRtl':
                        if (newProp.enableRtl) {
                            ej2_base_1.addClass([this.wrapper], RTL);
                        }
                        else {
                            ej2_base_1.removeClass([this.wrapper], RTL);
                        }
                        break;
                    case 'disabled':
                        if (newProp.disabled) {
                            ej2_base_1.addClass([this.wrapper], 'e-splitbtn-disabled');
                        }
                        else {
                            ej2_base_1.removeClass([this.wrapper], 'e-splitbtn-disabled');
                        }
                }
            }
        };
        SplitButton.prototype.focusIn = function () {
            this.element.focus();
        };
        __decorate([
            ej2_base_2.Property('')
        ], SplitButton.prototype, "content", void 0);
        __decorate([
            ej2_base_2.Property('')
        ], SplitButton.prototype, "cssClass", void 0);
        __decorate([
            ej2_base_2.Property(false)
        ], SplitButton.prototype, "disabled", void 0);
        __decorate([
            ej2_base_2.Property('')
        ], SplitButton.prototype, "iconCss", void 0);
        __decorate([
            ej2_base_2.Property('Left')
        ], SplitButton.prototype, "iconPosition", void 0);
        __decorate([
            ej2_base_2.Property(false)
        ], SplitButton.prototype, "createPopupOnClick", void 0);
        __decorate([
            ej2_base_2.Collection([], common_1.Item)
        ], SplitButton.prototype, "items", void 0);
        __decorate([
            ej2_base_2.Property('')
        ], SplitButton.prototype, "target", void 0);
        __decorate([
            ej2_base_1.Event()
        ], SplitButton.prototype, "beforeItemRender", void 0);
        __decorate([
            ej2_base_1.Event()
        ], SplitButton.prototype, "beforeOpen", void 0);
        __decorate([
            ej2_base_1.Event()
        ], SplitButton.prototype, "beforeClose", void 0);
        __decorate([
            ej2_base_1.Event()
        ], SplitButton.prototype, "click", void 0);
        __decorate([
            ej2_base_1.Event()
        ], SplitButton.prototype, "close", void 0);
        __decorate([
            ej2_base_1.Event()
        ], SplitButton.prototype, "open", void 0);
        __decorate([
            ej2_base_1.Event()
        ], SplitButton.prototype, "select", void 0);
        __decorate([
            ej2_base_1.Event()
        ], SplitButton.prototype, "created", void 0);
        SplitButton = __decorate([
            ej2_base_2.NotifyPropertyChanges
        ], SplitButton);
        return SplitButton;
    }(drop_down_button_1.DropDownButton));
    exports.SplitButton = SplitButton;
    var Deferred = (function () {
        function Deferred() {
            var _this = this;
            this.promise = new Promise(function (resolve, reject) {
                _this.resolve = resolve;
                _this.reject = reject;
            });
            this.catch = this.promise.catch.bind(this.promise);
            this.then = this.promise.then.bind(this.promise);
        }
        return Deferred;
    }());
    exports.Deferred = Deferred;
});