text: import { Component, Event, EventHandler, NotifyPropertyChanges, Observer, Property, SanitizeHtmlHelper, addClass, append, attributes, closest, deleteObject, detach, getElement, getInstance, getUniqueID, getValue, isBlazor, isNullOrUndefined, isRippleEnabled, removeClass, rippleEffect, setValue } from '@syncfusion/ej2-base';
  
  /**
   * Initialize wrapper element for angular.
   *
   * @private
   *
   * @param {CreateElementArgs} createElement - Specifies created element args
   * @param {string} tag - Specifies tag name
   * @param {string} type - Specifies type name
   * @param {HTMLInputElement} element - Specifies input element
   * @param {string} WRAPPER - Specifies wrapper element
   * @param {string} role - Specifies role
   * @returns {HTMLInputElement} - Input Element
   */
  function wrapperInitialize(createElement, tag, type, element, WRAPPER, role) {
      var input = element;
      if (element.tagName === tag) {
          var ejInstance = getValue('ej2_instances', element);
          input = createElement('input', { attrs: { 'type': type } });
          var props = ['change', 'cssClass', 'label', 'labelPosition', 'id'];
          for (var index = 0, len = element.attributes.length; index < len; index++) {
              if (props.indexOf(element.attributes[index].nodeName) === -1) {
                  input.setAttribute(element.attributes[index].nodeName, element.attributes[index].nodeValue);
              }
          }
          attributes(element, { 'class': WRAPPER, 'role': role, 'aria-checked': 'false' });
          element.appendChild(input);
          setValue('ej2_instances', ejInstance, input);
          deleteObject(element, 'ej2_instances');
      }
      return input;
  }
  /**
   * Get the text node.
   *
   * @param {HTMLElement} element - Specifies html element
   * @private
   * @returns {Node} - Text node.
   */
  function getTextNode(element) {
      var node;
      var childnode = element.childNodes;
      for (var i = 0; i < childnode.length; i++) {
          node = childnode[i];
          if (node.nodeType === 3) {
              return node;
          }
      }
      return null;
  }
  /**
   * Destroy the button components.
   *
   * @private
   * @param {Switch | CheckBox} ejInst - Specifies eJ2 Instance
   * @param {Element} wrapper - Specifies wrapper element
   * @param {string} tagName - Specifies tag name
   * @returns {void}
   */
  function destroy(ejInst, wrapper, tagName) {
      if (tagName === 'INPUT') {
          wrapper.parentNode.insertBefore(ejInst.element, wrapper);
          detach(wrapper);
          ejInst.element.checked = false;
          ['name', 'value', 'disabled'].forEach(function (key) {
              ejInst.element.removeAttribute(key);
          });
      }
      else {
          ['role', 'aria-checked', 'class'].forEach(function (key) {
              wrapper.removeAttribute(key);
          });
          wrapper.innerHTML = '';
      }
  }
  /**
   * Initialize control pre rendering.
   *
   * @private
   * @param {Switch | CheckBox} proxy - Specifies proxy
   * @param {string} control - Specifies control
   * @param {string} wrapper - Specifies wrapper element
   * @param {HTMLInputElement} element - Specifies input element
   * @param {string} moduleName - Specifies module name
   * @returns {void}
   */
  function preRender(proxy, control, wrapper, element, moduleName) {
      element = wrapperInitialize(proxy.createElement, control, 'checkbox', element, wrapper, moduleName);
      proxy.element = element;
      if (proxy.element.getAttribute('type') !== 'checkbox') {
          proxy.element.setAttribute('type', 'checkbox');
      }
      if (!proxy.element.id) {
          proxy.element.id = getUniqueID('e-' + moduleName);
      }
  }
  /**
   * Creates CheckBox component UI with theming and ripple support.
   *
   * @private
   * @param {CreateElementArgs} createElement - Specifies Created Element args
   * @param {boolean} enableRipple - Specifies ripple effect
   * @param {CheckBoxUtilModel} options - Specifies Checkbox util Model
   * @returns {Element} - Checkbox Element
   */
  function createCheckBox(createElement, enableRipple, options) {
      if (enableRipple === void 0) { enableRipple = false; }
      if (options === void 0) { options = {}; }
      var wrapper = createElement('div', { className: 'e-checkbox-wrapper e-css' });
      if (options.cssClass) {
          addClass([wrapper], options.cssClass.split(' '));
      }
      if (options.enableRtl) {
          wrapper.classList.add('e-rtl');
      }
      if (enableRipple) {
          var rippleSpan = createElement('span', { className: 'e-ripple-container' });
          rippleEffect(rippleSpan, { isCenterRipple: true, duration: 400 });
          wrapper.appendChild(rippleSpan);
      }
      var frameSpan = createElement('span', { className: 'e-frame e-icons' });
      if (options.checked) {
          frameSpan.classList.add('e-check');
      }
      wrapper.appendChild(frameSpan);
      if (options.label) {
          var labelSpan = createElement('span', { className: 'e-label' });
          if (options.disableHtmlEncode) {
              labelSpan.textContent = options.label;
          }
          else {
              labelSpan.innerHTML = options.label;
          }
          wrapper.appendChild(labelSpan);
      }
      return wrapper;
  }
  /**
   * Handles ripple mouse.
   *
   * @private
   * @param {MouseEvent} e - Specifies mouse event
   * @param {Element} rippleSpan - Specifies Ripple span element
   * @returns {void}
   */
  function rippleMouseHandler(e, rippleSpan) {
      if (rippleSpan) {
          var event_1 = document.createEvent('MouseEvents');
          event_1.initEvent(e.type, false, true);
          rippleSpan.dispatchEvent(event_1);
      }
  }
  /**
   * Append hidden input to given element
   *
   * @private
   * @param {Switch | CheckBox} proxy - Specifies Proxy
   * @param {Element} wrap - Specifies Wrapper ELement
   * @returns {void}
   */
  function setHiddenInput(proxy, wrap) {
      if (proxy.element.getAttribute('ejs-for')) {
          wrap.appendChild(proxy.createElement('input', {
              attrs: { 'name': proxy.name || proxy.element.name, 'value': 'false', 'type': 'hidden' }
          }));
      }
  }
  
  /**
   * Common modules
   */
  
  var __extends = (undefined && undefined.__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 __());
      };
  })();
  var __decorate = (undefined && undefined.__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;
  };
  var buttonObserver = new Observer();
  var cssClassName = {
      RTL: 'e-rtl',
      BUTTON: 'e-btn',
      PRIMARY: 'e-primary',
      ICONBTN: 'e-icon-btn'
  };
  /**
   * The Button is a graphical user interface element that triggers an event on its click action. It can contain a text, an image, or both.
   * ```html
   * <button id="button">Button</button>
   * ```
   * ```typescript
   * <script>
   * var btnObj = new Button();
   * btnObj.appendTo("#button");
   * </script>
   * ```
   */
  var Button = /** @__PURE__ @class */ (function (_super) {
      __extends(Button, _super);
      /**
       * Constructor for creating the widget
       *
       * @param  {ButtonModel} options - Specifies the button model
       * @param  {string|HTMLButtonElement} element - Specifies the target element
       */
      function Button(options, element) {
          return _super.call(this, options, element) || this;
      }
      Button.prototype.preRender = function () {
          // pre render code snippets
      };
      /**
       * Initialize the control rendering
       *
       * @returns {void}
       * @private
       */
      Button.prototype.render = function () {
          this.initialize();
          this.removeRippleEffect = rippleEffect(this.element, { selector: '.' + cssClassName.BUTTON });
          this.renderComplete();
      };
      Button.prototype.initialize = function () {
          if (this.cssClass) {
              addClass([this.element], this.cssClass.split(' '));
          }
          if (this.isPrimary) {
              this.element.classList.add(cssClassName.PRIMARY);
          }
          if (!isBlazor() || (isBlazor() && this.getModuleName() !== 'progress-btn')) {
              if (this.content) {
                  var tempContent = (this.enableHtmlSanitizer) ? 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) {
              EventHandler.add(this.element, 'click', this.btnClickHandler, this);
          }
      };
      Button.prototype.unWireEvents = function () {
          if (this.isToggle) {
              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');
          }
      };
      /**
       * Destroys the widget.
       *
       * @returns {void}
       */
      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);
          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) {
              detach(span);
          }
          this.unWireEvents();
          if (isRippleEnabled) {
              this.removeRippleEffect();
          }
      };
      /**
       * Get component name.
       *
       * @returns {string} - Module name
       * @private
       */
      Button.prototype.getModuleName = function () {
          return 'btn';
      };
      /**
       * Get the properties to be maintained in the persisted state.
       *
       * @returns {string} - Persist Data
       * @private
       */
      Button.prototype.getPersistData = function () {
          return this.addOnPersist([]);
      };
      /**
       * Dynamically injects the required modules to the component.
       *
       * @private
       * @returns {void}
       */
      Button.Inject = function () {
          // Inject code snippets
      };
      /**
       * Called internally if any of the property value changed.
       *
       * @param  {ButtonModel} newProp - Specifies new properties
       * @param  {ButtonModel} oldProp - Specifies old properties
       * @returns {void}
       * @private
       */
      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': {
                      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 {
                              detach(span);
                          }
                      }
                      else {
                          this.setIconCss();
                      }
                      break;
                  }
                  case 'iconPosition':
                      removeClass([this.element], ['e-top-icon-btn', 'e-bottom-icon-btn']);
                      span = this.element.querySelector('span.e-btn-icon');
                      if (span) {
                          detach(span);
                      }
                      this.setIconCss();
                      break;
                  case 'cssClass':
                      if (oldProp.cssClass) {
                          removeClass([this.element], oldProp.cssClass.split(' '));
                      }
                      if (newProp.cssClass) {
                          addClass([this.element], newProp.cssClass.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 = getTextNode(this.element);
                      if (!node) {
                          this.element.classList.remove(cssClassName.ICONBTN);
                      }
                      if (!isBlazor() || (isBlazor() && !this.isServerRendered && this.getModuleName() !== 'progress-btn')) {
                          if (this.enableHtmlSanitizer) {
                              newProp.content = SanitizeHtmlHelper.sanitize(newProp.content);
                          }
                          this.element.innerHTML = newProp.content;
                          this.setIconCss();
                      }
                      break;
                  }
                  case 'isToggle':
                      if (newProp.isToggle) {
                          EventHandler.add(this.element, 'click', this.btnClickHandler, this);
                      }
                      else {
                          EventHandler.remove(this.element, 'click', this.btnClickHandler);
                          removeClass([this.element], ['e-active']);
                      }
                      break;
              }
          }
      };
      /**
       * Click the button element
       * its native method
       *
       * @public
       * @returns {void}
       */
      Button.prototype.click = function () {
          this.element.click();
      };
      /**
       * Sets the focus to Button
       * its native method
       *
       * @public
       * @returns {void}
       */
      Button.prototype.focusIn = function () {
          this.element.focus();
      };
      __decorate([
          Property('Left')
      ], Button.prototype, "iconPosition", void 0);
      __decorate([
          Property('')
      ], Button.prototype, "iconCss", void 0);
      __decorate([
          Property(false)
      ], Button.prototype, "disabled", void 0);
      __decorate([
          Property(false)
      ], Button.prototype, "isPrimary", void 0);
      __decorate([
          Property('')
      ], Button.prototype, "cssClass", void 0);
      __decorate([
          Property('')
      ], Button.prototype, "content", void 0);
      __decorate([
          Property(false)
      ], Button.prototype, "isToggle", void 0);
      __decorate([
          Property()
      ], Button.prototype, "locale", void 0);
      __decorate([
          Property(false)
      ], Button.prototype, "enableHtmlSanitizer", void 0);
      __decorate([
          Event()
      ], Button.prototype, "created", void 0);
      Button = __decorate([
          NotifyPropertyChanges
      ], Button);
      return Button;
  }(Component));
  
  /**
   * Button modules
   */
  
  var __extends$1 = (undefined && undefined.__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 __());
      };
  })();
  var __decorate$1 = (undefined && undefined.__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;
  };
  var CHECK = 'e-check';
  var DISABLED = 'e-checkbox-disabled';
  var FRAME = 'e-frame';
  var INDETERMINATE = 'e-stop';
  var LABEL = 'e-label';
  var RIPPLE = 'e-ripple-container';
  var RIPPLECHECK = 'e-ripple-check';
  var RIPPLEINDETERMINATE = 'e-ripple-stop';
  var RTL = 'e-rtl';
  var WRAPPER = 'e-checkbox-wrapper';
  var containerAttr = ['title', 'class', 'style', 'disabled', 'readonly', 'name', 'value'];
  /**
   * The CheckBox is a graphical user interface element that allows you to select one or more options from the choices.
   * It contains checked, unchecked, and indeterminate states.
   * ```html
   * <input type="checkbox" id="checkbox"/>
   * <script>
   * var checkboxObj = new CheckBox({ label: "Default" });
   * checkboxObj.appendTo("#checkbox");
   * </script>
   * ```
   */
  var CheckBox = /** @__PURE__ @class */ (function (_super) {
      __extends$1(CheckBox, _super);
      /**
       * Constructor for creating the widget
       *
       * @private
       * @param {CheckBoxModel} options - Specifies checkbox model
       * @param {string | HTMLInputElement} element - Specifies target element
       */
      function CheckBox(options, element) {
          var _this = _super.call(this, options, element) || this;
          _this.isFocused = false;
          _this.isMouseClick = false;
          return _this;
      }
      CheckBox.prototype.changeState = function (state) {
          var ariaState;
          var rippleSpan;
          var frameSpan = this.getWrapper().getElementsByClassName(FRAME)[0];
          if (isRippleEnabled) {
              rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];
          }
          if (state === 'check') {
              frameSpan.classList.remove(INDETERMINATE);
              frameSpan.classList.add(CHECK);
              if (rippleSpan) {
                  rippleSpan.classList.remove(RIPPLEINDETERMINATE);
                  rippleSpan.classList.add(RIPPLECHECK);
              }
              ariaState = 'true';
              this.element.checked = true;
          }
          else if (state === 'uncheck') {
              removeClass([frameSpan], [CHECK, INDETERMINATE]);
              if (rippleSpan) {
                  removeClass([rippleSpan], [RIPPLECHECK, RIPPLEINDETERMINATE]);
              }
              ariaState = 'false';
              this.element.checked = false;
          }
          else {
              frameSpan.classList.remove(CHECK);
              frameSpan.classList.add(INDETERMINATE);
              if (rippleSpan) {
                  rippleSpan.classList.remove(RIPPLECHECK);
                  rippleSpan.classList.add(RIPPLEINDETERMINATE);
              }
              ariaState = 'mixed';
              this.element.indeterminate = true;
          }
          this.getWrapper().setAttribute('aria-checked', ariaState);
      };
      CheckBox.prototype.clickHandler = function (event) {
          if (this.isMouseClick) {
              this.focusOutHandler();
              this.isMouseClick = false;
          }
          if (this.indeterminate) {
              this.changeState(this.checked ? 'check' : 'uncheck');
              this.indeterminate = false;
              this.element.indeterminate = false;
          }
          else if (this.checked) {
              this.changeState('uncheck');
              this.checked = false;
          }
          else {
              this.changeState('check');
              this.checked = true;
          }
          var changeEventArgs = { checked: this.updateVueArrayModel(false), event: event };
          this.trigger('change', changeEventArgs);
          event.stopPropagation();
      };
      /**
       * Destroys the widget.
       *
       * @returns {void}
       */
      CheckBox.prototype.destroy = function () {
          var _this = this;
          var wrapper = this.getWrapper();
          _super.prototype.destroy.call(this);
          if (this.wrapper) {
              wrapper = this.wrapper;
              if (!this.disabled) {
                  this.unWireEvents();
              }
              if (this.tagName === 'INPUT') {
                  if (this.getWrapper() && wrapper.parentNode) {
                      wrapper.parentNode.insertBefore(this.element, wrapper);
                  }
                  detach(wrapper);
                  this.element.checked = false;
                  if (this.indeterminate) {
                      this.element.indeterminate = false;
                  }
                  ['name', 'value', 'disabled'].forEach(function (key) {
                      _this.element.removeAttribute(key);
                  });
              }
              else {
                  ['role', 'aria-checked', 'class'].forEach(function (key) {
                      wrapper.removeAttribute(key);
                  });
                  wrapper.innerHTML = '';
              }
          }
      };
      CheckBox.prototype.focusHandler = function () {
          this.isFocused = true;
      };
      CheckBox.prototype.focusOutHandler = function () {
          var wrapper = this.getWrapper();
          if (wrapper) {
              wrapper.classList.remove('e-focus');
          }
          this.isFocused = false;
      };
      /**
       * Gets the module name.
       *
       * @private
       * @returns {string} - Module Name
       */
      CheckBox.prototype.getModuleName = function () {
          return 'checkbox';
      };
      /**
       * Gets the properties to be maintained in the persistence state.
       *
       * @private
       * @returns {string} - Persist Data
       */
      CheckBox.prototype.getPersistData = function () {
          return this.addOnPersist(['checked', 'indeterminate']);
      };
      CheckBox.prototype.getWrapper = function () {
          if (this.element && this.element.parentElement) {
              return this.element.parentElement.parentElement;
          }
          else {
              return null;
          }
      };
      CheckBox.prototype.initialize = function () {
          if (isNullOrUndefined(this.initialCheckedValue)) {
              this.initialCheckedValue = this.checked;
          }
          if (this.name) {
              this.element.setAttribute('name', this.name);
          }
          if (this.value) {
              this.element.setAttribute('value', this.value);
              if (this.isVue && typeof this.value === 'boolean' && this.value === true) {
                  this.setProperties({ 'checked': true }, true);
              }
          }
          if (this.checked) {
              this.changeState('check');
          }
          if (this.indeterminate) {
              this.changeState();
          }
          if (this.disabled) {
              this.setDisabled();
          }
      };
      CheckBox.prototype.initWrapper = function () {
          var wrapper = this.element.parentElement;
          if (!wrapper.classList.contains(WRAPPER)) {
              wrapper = this.createElement('div', {
                  className: WRAPPER, attrs: { 'role': 'checkbox', 'aria-checked': 'false' }
              });
              this.element.parentNode.insertBefore(wrapper, this.element);
          }
          var label = this.createElement('label', { attrs: { for: this.element.id } });
          var frameSpan = this.createElement('span', { className: 'e-icons ' + FRAME });
          wrapper.classList.add('e-wrapper');
          if (this.enableRtl) {
              wrapper.classList.add(RTL);
          }
          if (this.cssClass) {
              addClass([wrapper], this.cssClass.split(' '));
          }
          wrapper.appendChild(label);
          label.appendChild(this.element);
          setHiddenInput(this, label);
          label.appendChild(frameSpan);
          if (isRippleEnabled) {
              var rippleSpan = this.createElement('span', { className: RIPPLE });
              if (this.labelPosition === 'Before') {
                  label.appendChild(rippleSpan);
              }
              else {
                  label.insertBefore(rippleSpan, frameSpan);
              }
              rippleEffect(rippleSpan, { duration: 400, isCenterRipple: true });
          }
          if (this.label) {
              this.setText(this.label);
          }
      };
      CheckBox.prototype.keyUpHandler = function () {
          if (this.isFocused) {
              this.getWrapper().classList.add('e-focus');
          }
      };
      CheckBox.prototype.labelMouseDownHandler = function (e) {
          this.isMouseClick = true;
          var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];
          rippleMouseHandler(e, rippleSpan);
      };
      CheckBox.prototype.labelMouseUpHandler = function (e) {
          this.isMouseClick = true;
          var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];
          if (rippleSpan) {
              var rippleElem = rippleSpan.querySelectorAll('.e-ripple-element');
              for (var i = 0; i < rippleElem.length - 1; i++) {
                  rippleSpan.removeChild(rippleSpan.childNodes[i]);
              }
              rippleMouseHandler(e, rippleSpan);
          }
      };
      /**
       * Called internally if any of the property value changes.
       *
       * @private
       * @param {CheckBoxModel} newProp - Specifies new Properties
       * @param {CheckBoxModel} oldProp - Specifies old Properties
       *
       * @returns {void}
       */
      CheckBox.prototype.onPropertyChanged = function (newProp, oldProp) {
          var wrapper = this.getWrapper();
          for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
              var prop = _a[_i];
              switch (prop) {
                  case 'checked':
                      this.indeterminate = false;
                      this.element.indeterminate = false;
                      this.changeState(newProp.checked ? 'check' : 'uncheck');
                      break;
                  case 'indeterminate':
                      if (newProp.indeterminate) {
                          this.changeState();
                      }
                      else {
                          this.element.indeterminate = false;
                          this.changeState(this.checked ? 'check' : 'uncheck');
                      }
                      break;
                  case 'disabled':
                      if (newProp.disabled) {
                          this.setDisabled();
                          this.wrapper = this.getWrapper();
                          this.unWireEvents();
                      }
                      else {
                          this.element.disabled = false;
                          wrapper.classList.remove(DISABLED);
                          wrapper.setAttribute('aria-disabled', 'false');
                          this.wireEvents();
                      }
                      break;
                  case 'cssClass':
                      if (oldProp.cssClass) {
                          removeClass([wrapper], oldProp.cssClass.split(' '));
                      }
                      if (newProp.cssClass) {
                          addClass([wrapper], newProp.cssClass.split(' '));
                      }
                      break;
                  case 'enableRtl':
                      if (newProp.enableRtl) {
                          wrapper.classList.add(RTL);
                      }
                      else {
                          wrapper.classList.remove(RTL);
                      }
                      break;
                  case 'label':
                      this.setText(newProp.label);
                      break;
                  case 'labelPosition': {
                      var label = wrapper.getElementsByClassName(LABEL)[0];
                      var labelWrap = wrapper.getElementsByTagName('label')[0];
                      detach(label);
                      if (newProp.labelPosition === 'After') {
                          labelWrap.appendChild(label);
                      }
                      else {
                          labelWrap.insertBefore(label, wrapper.getElementsByClassName(FRAME)[0]);
                      }
                      break;
                  }
                  case 'name':
                      this.element.setAttribute('name', newProp.name);
                      break;
                  case 'value':
                      if (this.isVue && typeof newProp.value === 'object') {
                          break;
                      }
                      this.element.setAttribute('value', newProp.value);
                      break;
                  case 'htmlAttributes':
                      this.updateHtmlAttributeToWrapper();
                      break;
              }
          }
      };
      /**
       * Initialize Angular, React and Unique ID support.
       *
       * @private
       * @returns {void}
       */
      CheckBox.prototype.preRender = function () {
          var element = this.element;
          this.formElement = closest(this.element, 'form');
          this.tagName = this.element.tagName;
          element = wrapperInitialize(this.createElement, 'EJS-CHECKBOX', 'checkbox', element, WRAPPER, 'checkbox');
          this.element = element;
          if (this.element.getAttribute('type') !== 'checkbox') {
              this.element.setAttribute('type', 'checkbox');
          }
          if (!this.element.id) {
              this.element.id = getUniqueID('e-' + this.getModuleName());
          }
      };
      /**
       * Initialize the control rendering.
       *
       * @private
       * @returns {void}
       */
      CheckBox.prototype.render = function () {
          this.initWrapper();
          this.initialize();
          if (!this.disabled) {
              this.wireEvents();
          }
          this.updateHtmlAttributeToWrapper();
          this.updateVueArrayModel(true);
          this.renderComplete();
          this.wrapper = this.getWrapper();
      };
      CheckBox.prototype.setDisabled = function () {
          var wrapper = this.getWrapper();
          this.element.disabled = true;
          wrapper.classList.add(DISABLED);
          wrapper.setAttribute('aria-disabled', 'true');
      };
      CheckBox.prototype.setText = function (text) {
          var wrapper = this.getWrapper();
          if (!wrapper) {
              return;
          }
          var label = wrapper.getElementsByClassName(LABEL)[0];
          if (label) {
              label.textContent = text;
          }
          else {
              text = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(text) : text;
              label = this.createElement('span', { className: LABEL, innerHTML: text });
              var labelWrap = wrapper.getElementsByTagName('label')[0];
              if (this.labelPosition === 'Before') {
                  labelWrap.insertBefore(label, wrapper.getElementsByClassName(FRAME)[0]);
              }
              else {
                  labelWrap.appendChild(label);
              }
          }
      };
      CheckBox.prototype.changeHandler = function (e) {
          e.stopPropagation();
      };
      CheckBox.prototype.formResetHandler = function () {
          this.checked = this.initialCheckedValue;
          this.element.checked = this.initialCheckedValue;
      };
      CheckBox.prototype.unWireEvents = function () {
          var wrapper = this.wrapper;
          EventHandler.remove(this.element, 'click', this.clickHandler);
          EventHandler.remove(this.element, 'keyup', this.keyUpHandler);
          EventHandler.remove(this.element, 'focus', this.focusHandler);
          EventHandler.remove(this.element, 'focusout', this.focusOutHandler);
          var label = wrapper.getElementsByTagName('label')[0];
          EventHandler.remove(label, 'mousedown', this.labelMouseDownHandler);
          EventHandler.remove(label, 'mouseup', this.labelMouseUpHandler);
          if (this.formElement) {
              EventHandler.remove(this.formElement, 'reset', this.formResetHandler);
          }
          if (this.tagName === 'EJS-CHECKBOX') {
              EventHandler.remove(this.element, 'change', this.changeHandler);
          }
      };
      CheckBox.prototype.wireEvents = function () {
          var wrapper = this.getWrapper();
          EventHandler.add(this.element, 'click', this.clickHandler, this);
          EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);
          EventHandler.add(this.element, 'focus', this.focusHandler, this);
          EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);
          var label = wrapper.getElementsByTagName('label')[0];
          EventHandler.add(label, 'mousedown', this.labelMouseDownHandler, this);
          EventHandler.add(label, 'mouseup', this.labelMouseUpHandler, this);
          if (this.formElement) {
              EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);
          }
          if (this.tagName === 'EJS-CHECKBOX') {
              EventHandler.add(this.element, 'change', this.changeHandler, this);
          }
      };
      CheckBox.prototype.updateVueArrayModel = function (init) {
          if (this.isVue && typeof this.value === 'object') {
              var value = this.element.value;
              if (value && this.value) {
                  if (init) {
                      for (var i = 0; i < this.value.length; i++) {
                          if (value === this.value[i]) {
                              this.changeState('check');
                              this.setProperties({ 'checked': true }, true);
                          }
                      }
                  }
                  else {
                      var index = this.value.indexOf(value);
                      if (this.checked) {
                          if (index < 0) {
                              this.value.push(value);
                          }
                      }
                      else {
                          if (index > -1) {
                              this.value.splice(index, 1);
                          }
                      }
                      // eslint-disable-next-line @typescript-eslint/no-explicit-any
                      return this.value;
                  }
              }
          }
          return this.element.checked;
      };
      CheckBox.prototype.updateHtmlAttributeToWrapper = function () {
          if (!isNullOrUndefined(this.htmlAttributes)) {
              for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
                  var key = _a[_i];
                  if (containerAttr.indexOf(key) > -1) {
                      var wrapper = this.getWrapper();
                      if (key === 'class') {
                          addClass([wrapper], this.htmlAttributes[key].split(' '));
                      }
                      else if (key === 'title') {
                          wrapper.setAttribute(key, this.htmlAttributes[key]);
                      }
                      else if (key === 'style') {
                          var frameSpan = this.getWrapper().getElementsByClassName(FRAME)[0];
                          frameSpan.setAttribute(key, this.htmlAttributes[key]);
                      }
                      else {
                          this.element.setAttribute(key, this.htmlAttributes[key]);
                      }
                  }
              }
          }
      };
      /**
       * Click the CheckBox element
       * its native method
       *
       * @public
       * @returns {void}
       */
      CheckBox.prototype.click = function () {
          this.element.click();
      };
      /**
       * Sets the focus to CheckBox
       * its native method
       *
       * @public
       * @returns {void}
       */
      CheckBox.prototype.focusIn = function () {
          this.element.focus();
      };
      __decorate$1([
          Event()
      ], CheckBox.prototype, "change", void 0);
      __decorate$1([
          Event()
      ], CheckBox.prototype, "created", void 0);
      __decorate$1([
          Property(false)
      ], CheckBox.prototype, "checked", void 0);
      __decorate$1([
          Property('')
      ], CheckBox.prototype, "cssClass", void 0);
      __decorate$1([
          Property(false)
      ], CheckBox.prototype, "disabled", void 0);
      __decorate$1([
          Property(false)
      ], CheckBox.prototype, "indeterminate", void 0);
      __decorate$1([
          Property('')
      ], CheckBox.prototype, "label", void 0);
      __decorate$1([
          Property('After')
      ], CheckBox.prototype, "labelPosition", void 0);
      __decorate$1([
          Property('')
      ], CheckBox.prototype, "name", void 0);
      __decorate$1([
          Property('')
      ], CheckBox.prototype, "value", void 0);
      __decorate$1([
          Property(false)
      ], CheckBox.prototype, "enableHtmlSanitizer", void 0);
      __decorate$1([
          Property({})
      ], CheckBox.prototype, "htmlAttributes", void 0);
      CheckBox = __decorate$1([
          NotifyPropertyChanges
      ], CheckBox);
      return CheckBox;
  }(Component));
  
  /**
   * CheckBox modules
   */
  
  var __extends$2 = (undefined && undefined.__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 __());
      };
  })();
  var __decorate$2 = (undefined && undefined.__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;
  };
  var LABEL$1 = 'e-label';
  var RIPPLE$1 = 'e-ripple-container';
  var RTL$1 = 'e-rtl';
  var WRAPPER$1 = 'e-radio-wrapper';
  var ATTRIBUTES = ['title', 'class', 'style', 'disabled', 'readonly', 'name', 'value'];
  /**
   * The RadioButton is a graphical user interface element that allows you to select one option from the choices.
   * It contains checked and unchecked states.
   * ```html
   * <input type="radio" id="radio"/>
   * <script>
   * var radioObj = new RadioButton({ label: "Default" });
   * radioObj.appendTo("#radio");
   * </script>
   * ```
   */
  var RadioButton = /** @__PURE__ @class */ (function (_super) {
      __extends$2(RadioButton, _super);
      /**
       * Constructor for creating the widget
       *
       * @private
       * @param {RadioButtonModel} options - Specifies Radio button model
       * @param {string | HTMLInputElement} element - Specifies target element
       */
      function RadioButton(options, element) {
          var _this = _super.call(this, options, element) || this;
          _this.isFocused = false;
          return _this;
      }
      RadioButton_1 = RadioButton;
      RadioButton.prototype.changeHandler = function (event) {
          this.checked = true;
          this.dataBind();
          var value = this.element.getAttribute('value');
          value = this.isVue && value ? this.element.value : this.value;
          this.trigger('change', { value: value, event: event });
          if (this.tagName === 'EJS-RADIOBUTTON') {
              event.stopPropagation();
          }
      };
      RadioButton.prototype.updateChange = function () {
          var input;
          var instance;
          var radioGrp = this.getRadioGroup();
          for (var i = 0; i < radioGrp.length; i++) {
              input = radioGrp[i];
              if (input !== this.element) {
                  instance = getInstance(input, RadioButton_1);
                  instance.checked = false;
                  if (this.tagName === 'EJS-RADIOBUTTON') {
                      instance.angularValue = this.value;
                  }
              }
          }
      };
      /**
       * Destroys the widget.
       *
       * @returns {void}
       */
      RadioButton.prototype.destroy = function () {
          var _this = this;
          var radioWrap = this.element.parentElement;
          _super.prototype.destroy.call(this);
          if (!this.disabled) {
              this.unWireEvents();
          }
          if (this.tagName === 'INPUT') {
              if (radioWrap.parentNode) {
                  radioWrap.parentNode.insertBefore(this.element, radioWrap);
              }
              detach(radioWrap);
              this.element.checked = false;
              ['name', 'value', 'disabled'].forEach(function (key) {
                  _this.element.removeAttribute(key);
              });
          }
          else {
              ['role', 'aria-checked', 'class'].forEach(function (key) {
                  radioWrap.removeAttribute(key);
              });
              radioWrap.innerHTML = '';
          }
      };
      RadioButton.prototype.focusHandler = function () {
          this.isFocused = true;
      };
      RadioButton.prototype.focusOutHandler = function () {
          var label = this.getLabel();
          if (label) {
              label.classList.remove('e-focus');
          }
      };
      RadioButton.prototype.getModuleName = function () {
          return 'radio';
      };
      /**
       * To get the value of selected radio button in a group.
       *
       * @method getSelectedValue
       * @returns {string} - Selected Value
       */
      RadioButton.prototype.getSelectedValue = function () {
          var input;
          var radioGrp = this.getRadioGroup();
          for (var i = 0, len = radioGrp.length; i < len; i++) {
              input = radioGrp[i];
              if (input.checked) {
                  return input.value;
              }
          }
          return '';
      };
      RadioButton.prototype.getRadioGroup = function () {
          return document.querySelectorAll('input.e-radio[name="' + this.element.getAttribute('name') + '"]');
      };
      /**
       * Gets the properties to be maintained in the persistence state.
       *
       * @private
       * @returns {string} - Persist Data
       */
      RadioButton.prototype.getPersistData = function () {
          return this.addOnPersist(['checked']);
      };
      RadioButton.prototype.getWrapper = function () {
          if (this.element) {
              return this.element.parentElement;
          }
          else {
              return null;
          }
      };
      RadioButton.prototype.getLabel = function () {
          if (this.element) {
              return this.element.nextElementSibling;
          }
          else {
              return null;
          }
      };
      RadioButton.prototype.initialize = function () {
          if (isNullOrUndefined(this.initialCheckedValue)) {
              this.initialCheckedValue = this.checked;
          }
          this.initWrapper();
          this.updateHtmlAttribute();
          if (this.name) {
              this.element.setAttribute('name', this.name);
          }
          var value = this.element.getAttribute('value');
          if (this.isVue && value && value === this.value) {
              this.checked = true;
          }
          if (this.isVue ? this.value && !value : this.value) {
              this.element.setAttribute('value', this.value);
          }
          if (this.checked) {
              this.element.checked = true;
          }
          if (this.disabled) {
              this.setDisabled();
          }
      };
      RadioButton.prototype.initWrapper = function () {
          var rippleSpan;
          var wrapper = this.element.parentElement;
          if (!wrapper.classList.contains(WRAPPER$1)) {
              wrapper = this.createElement('div', { className: WRAPPER$1 });
              this.element.parentNode.insertBefore(wrapper, this.element);
          }
          var label = this.createElement('label', { attrs: { for: this.element.id } });
          wrapper.appendChild(this.element);
          wrapper.appendChild(label);
          if (isRippleEnabled) {
              rippleSpan = this.createElement('span', { className: (RIPPLE$1) });
              label.appendChild(rippleSpan);
              rippleEffect(rippleSpan, {
                  duration: 400,
                  isCenterRipple: true
              });
          }
          wrapper.classList.add('e-wrapper');
          if (this.enableRtl) {
              label.classList.add(RTL$1);
          }
          if (this.cssClass) {
              addClass([wrapper], this.cssClass.split(' '));
          }
          if (this.label) {
              this.setText(this.label);
          }
      };
      RadioButton.prototype.keyUpHandler = function () {
          if (this.isFocused) {
              this.getLabel().classList.add('e-focus');
          }
      };
      RadioButton.prototype.labelRippleHandler = function (e) {
          var ripple = this.getLabel().getElementsByClassName(RIPPLE$1)[0];
          rippleMouseHandler(e, ripple);
      };
      RadioButton.prototype.formResetHandler = function () {
          this.checked = this.initialCheckedValue;
          if (this.initialCheckedValue) {
              attributes(this.element, { 'checked': 'true' });
          }
      };
      /**
       * Called internally if any of the property value changes.
       *
       * @private
       * @param {RadioButtonModel} newProp - Specifies New Properties
       * @param {RadioButtonModel} oldProp - Specifies Old Properties
       * @returns {void}
       */
      RadioButton.prototype.onPropertyChanged = function (newProp, oldProp) {
          var wrap = this.getWrapper();
          var label = this.getLabel();
          for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
              var prop = _a[_i];
              switch (prop) {
                  case 'checked':
                      if (newProp.checked) {
                          this.updateChange();
                      }
                      this.element.checked = newProp.checked;
                      break;
                  case 'disabled':
                      if (newProp.disabled) {
                          this.setDisabled();
                          this.unWireEvents();
                      }
                      else {
                          this.element.disabled = false;
                          this.wireEvents();
                      }
                      break;
                  case 'cssClass':
                      if (oldProp.cssClass) {
                          removeClass([wrap], oldProp.cssClass.split(' '));
                      }
                      if (newProp.cssClass) {
                          addClass([wrap], newProp.cssClass.split(' '));
                      }
                      break;
                  case 'enableRtl':
                      if (newProp.enableRtl) {
                          label.classList.add(RTL$1);
                      }
                      else {
                          label.classList.remove(RTL$1);
                      }
                      break;
                  case 'label':
                      this.setText(newProp.label);
                      break;
                  case 'labelPosition':
                      if (newProp.labelPosition === 'Before') {
                          label.classList.add('e-right');
                      }
                      else {
                          label.classList.remove('e-right');
                      }
                      break;
                  case 'name':
                      this.element.setAttribute('name', newProp.name);
                      break;
                  case 'value':
                      if (!isNullOrUndefined(this.htmlAttributes) && this.htmlAttributes.value) {
                          break;
                      }
                      this.element.setAttribute('value', newProp.value);
                      break;
                  case 'htmlAttributes':
                      this.updateHtmlAttribute();
                      break;
              }
          }
      };
      /**
       * Initialize checked Property, Angular and React and Unique ID support.
       *
       * @private
       * @returns {void}
       */
      RadioButton.prototype.preRender = function () {
          var element = this.element;
          this.formElement = closest(this.element, 'form');
          this.tagName = this.element.tagName;
          element = wrapperInitialize(this.createElement, 'EJS-RADIOBUTTON', 'radio', element, WRAPPER$1, 'radio');
          this.element = element;
          if (this.element.getAttribute('type') !== 'radio') {
              this.element.setAttribute('type', 'radio');
          }
          if (!this.element.id) {
              this.element.id = getUniqueID('e-' + this.getModuleName());
          }
          if (this.tagName === 'EJS-RADIOBUTTON') {
              var formControlName = this.element.getAttribute('formcontrolname');
              if (formControlName) {
                  this.setProperties({ 'name': formControlName }, true);
                  this.element.setAttribute('name', formControlName);
              }
          }
      };
      /**
       * Initialize the control rendering
       *
       * @private
       * @returns {void}
       */
      RadioButton.prototype.render = function () {
          this.initialize();
          if (!this.disabled) {
              this.wireEvents();
          }
          this.renderComplete();
      };
      RadioButton.prototype.setDisabled = function () {
          this.element.disabled = true;
      };
      RadioButton.prototype.setText = function (text) {
          var label = this.getLabel();
          var textLabel = label.getElementsByClassName(LABEL$1)[0];
          if (textLabel) {
              textLabel.textContent = text;
          }
          else {
              text = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(text) : text;
              textLabel = this.createElement('span', { className: LABEL$1, innerHTML: text });
              label.appendChild(textLabel);
          }
          if (this.labelPosition === 'Before') {
              this.getLabel().classList.add('e-right');
          }
          else {
              this.getLabel().classList.remove('e-right');
          }
      };
      RadioButton.prototype.updateHtmlAttribute = function () {
          if (!isNullOrUndefined(this.htmlAttributes)) {
              for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
                  var key = _a[_i];
                  if (ATTRIBUTES.indexOf(key) > -1) {
                      var wrapper = this.element.parentElement;
                      if (key === 'class') {
                          addClass([wrapper], this.htmlAttributes[key].split(' '));
                      }
                      else if (key === 'title' || key === 'style') {
                          wrapper.setAttribute(key, this.htmlAttributes[key]);
                      }
                      else {
                          this.element.setAttribute(key, this.htmlAttributes[key]);
                      }
                  }
              }
          }
      };
      RadioButton.prototype.unWireEvents = function () {
          var label = this.getLabel();
          EventHandler.remove(this.element, 'change', this.changeHandler);
          EventHandler.remove(this.element, 'focus', this.focusHandler);
          EventHandler.remove(this.element, 'focusout', this.focusOutHandler);
          EventHandler.remove(this.element, 'keyup', this.keyUpHandler);
          var rippleLabel = label.getElementsByClassName(LABEL$1)[0];
          if (rippleLabel) {
              EventHandler.remove(rippleLabel, 'mousedown', this.labelRippleHandler);
              EventHandler.remove(rippleLabel, 'mouseup', this.labelRippleHandler);
          }
          if (this.formElement) {
              EventHandler.remove(this.formElement, 'reset', this.formResetHandler);
          }
      };
      RadioButton.prototype.wireEvents = function () {
          var label = this.getLabel();
          EventHandler.add(this.element, 'change', this.changeHandler, this);
          EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);
          EventHandler.add(this.element, 'focus', this.focusHandler, this);
          EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);
          var rippleLabel = label.getElementsByClassName(LABEL$1)[0];
          if (rippleLabel) {
              EventHandler.add(rippleLabel, 'mousedown', this.labelRippleHandler, this);
              EventHandler.add(rippleLabel, 'mouseup', this.labelRippleHandler, this);
          }
          if (this.formElement) {
              EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);
          }
      };
      /**
       * Click the RadioButton element
       * its native method
       *
       * @public
       * @returns {void}
       */
      RadioButton.prototype.click = function () {
          this.element.click();
      };
      /**
       * Sets the focus to RadioButton
       * its native method
       *
       * @public
       * @returns {void}
       */
      RadioButton.prototype.focusIn = function () {
          this.element.focus();
      };
      var RadioButton_1;
      __decorate$2([
          Event()
      ], RadioButton.prototype, "change", void 0);
      __decorate$2([
          Event()
      ], RadioButton.prototype, "created", void 0);
      __decorate$2([
          Property(false)
      ], RadioButton.prototype, "checked", void 0);
      __decorate$2([
          Property('')
      ], RadioButton.prototype, "cssClass", void 0);
      __decorate$2([
          Property(false)
      ], RadioButton.prototype, "disabled", void 0);
      __decorate$2([
          Property('')
      ], RadioButton.prototype, "label", void 0);
      __decorate$2([
          Property('After')
      ], RadioButton.prototype, "labelPosition", void 0);
      __decorate$2([
          Property('')
      ], RadioButton.prototype, "name", void 0);
      __decorate$2([
          Property('')
      ], RadioButton.prototype, "value", void 0);
      __decorate$2([
          Property(false)
      ], RadioButton.prototype, "enableHtmlSanitizer", void 0);
      __decorate$2([
          Property({})
      ], RadioButton.prototype, "htmlAttributes", void 0);
      RadioButton = RadioButton_1 = __decorate$2([
          NotifyPropertyChanges
      ], RadioButton);
      return RadioButton;
  }(Component));
  
  /**
   * RadioButton modules
   */
  
  var __extends$3 = (undefined && undefined.__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 __());
      };
  })();
  var __decorate$3 = (undefined && undefined.__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;
  };
  var DISABLED$1 = 'e-switch-disabled';
  var RIPPLE$2 = 'e-ripple-container';
  var RIPPLE_CHECK = 'e-ripple-check';
  var RTL$2 = 'e-rtl';
  var WRAPPER$2 = 'e-switch-wrapper';
  var ACTIVE = 'e-switch-active';
  /**
   * The Switch is a graphical user interface element that allows you to toggle between checked and unchecked states.
   * ```html
   * <input type="checkbox" id="switch"/>
   * <script>
   * var switchObj = new Switch({});
   * switchObj.appendTo("#switch");
   * </script>
   * ```
   */
  var Switch = /** @__PURE__ @class */ (function (_super) {
      __extends$3(Switch, _super);
      /**
       * Constructor for creating the widget.
       *
       * @private
       *
       * @param {SwitchModel} options switch model
       * @param {string | HTMLInputElement} element target element
       *
       */
      function Switch(options, element) {
          var _this = _super.call(this, options, element) || this;
          _this.isFocused = false;
          _this.isDrag = false;
          return _this;
      }
      Switch.prototype.changeState = function (state) {
          var ariaState;
          var rippleSpan;
          var wrapper = this.getWrapper();
          var bar = wrapper.querySelector('.e-switch-inner');
          var handle = wrapper.querySelector('.e-switch-handle');
          if (isRippleEnabled) {
              rippleSpan = wrapper.getElementsByClassName(RIPPLE$2)[0];
          }
          if (state) {
              addClass([bar, handle], ACTIVE);
              ariaState = 'true';
              this.element.checked = true;
              this.checked = true;
              if (rippleSpan) {
                  addClass([rippleSpan], [RIPPLE_CHECK]);
              }
          }
          else {
              removeClass([bar, handle], ACTIVE);
              ariaState = 'false';
              this.element.checked = false;
              this.checked = false;
              if (rippleSpan) {
                  removeClass([rippleSpan], [RIPPLE_CHECK]);
              }
          }
          wrapper.setAttribute('aria-checked', ariaState);
      };
      Switch.prototype.clickHandler = function (evt) {
          this.isDrag = false;
          this.focusOutHandler();
          this.changeState(!this.checked);
          this.element.focus();
          var changeEventArgs = { checked: this.element.checked, event: evt };
          this.trigger('change', changeEventArgs);
      };
      /**
       * Destroys the Switch widget.
       *
       * @returns {void}
       */
      Switch.prototype.destroy = function () {
          _super.prototype.destroy.call(this);
          if (!this.disabled) {
              this.unWireEvents();
          }
          destroy(this, this.getWrapper(), this.tagName);
      };
      Switch.prototype.focusHandler = function () {
          this.isFocused = true;
      };
      Switch.prototype.focusOutHandler = function () {
          this.getWrapper().classList.remove('e-focus');
      };
      /**
       * Gets the module name.
       *
       * @private
       * @returns {string} - Module Name
       */
      Switch.prototype.getModuleName = function () {
          return 'switch';
      };
      /**
       * Gets the properties to be maintained in the persistence state.
       *
       * @private
       * @returns {string} - Persist data
       */
      Switch.prototype.getPersistData = function () {
          return this.addOnPersist(['checked']);
      };
      Switch.prototype.getWrapper = function () {
          return this.element.parentElement;
      };
      Switch.prototype.initialize = function () {
          if (isNullOrUndefined(this.initialSwitchCheckedValue)) {
              this.initialSwitchCheckedValue = this.checked;
          }
          if (this.name) {
              this.element.setAttribute('name', this.name);
          }
          if (this.value) {
              this.element.setAttribute('value', this.value);
          }
          if (this.checked) {
              this.changeState(true);
          }
          if (this.disabled) {
              this.setDisabled();
          }
          if (this.onLabel || this.offLabel) {
              this.setLabel(this.onLabel, this.offLabel);
          }
      };
      Switch.prototype.initWrapper = function () {
          var wrapper = this.element.parentElement;
          if (!wrapper.classList.contains(WRAPPER$2)) {
              wrapper = this.createElement('div', {
                  className: WRAPPER$2, attrs: { 'role': 'switch', 'aria-checked': 'false' }
              });
              this.element.parentNode.insertBefore(wrapper, this.element);
          }
          var switchInner = this.createElement('span', { className: 'e-switch-inner' });
          var onLabel = this.createElement('span', { className: 'e-switch-on' });
          var offLabel = this.createElement('span', { className: 'e-switch-off' });
          var handle = this.createElement('span', { className: 'e-switch-handle' });
          wrapper.appendChild(this.element);
          setHiddenInput(this, wrapper);
          switchInner.appendChild(onLabel);
          switchInner.appendChild(offLabel);
          wrapper.appendChild(switchInner);
          wrapper.appendChild(handle);
          if (isRippleEnabled) {
              var rippleSpan = this.createElement('span', { className: RIPPLE$2 });
              handle.appendChild(rippleSpan);
              rippleEffect(rippleSpan, { duration: 400, isCenterRipple: true });
          }
          wrapper.classList.add('e-wrapper');
          if (this.enableRtl) {
              wrapper.classList.add(RTL$2);
          }
          if (this.cssClass) {
              addClass([wrapper], this.cssClass.split(' '));
          }
      };
      /**
       * Called internally if any of the property value changes.
       *
       * @private
       * @param {SwitchModel} newProp - Specifies New Properties
       * @param {SwitchModel} oldProp - Specifies Old Properties
       * @returns {void}
       */
      Switch.prototype.onPropertyChanged = function (newProp, oldProp) {
          var wrapper = this.getWrapper();
          for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
              var prop = _a[_i];
              switch (prop) {
                  case 'checked':
                      this.changeState(newProp.checked);
                      break;
                  case 'disabled':
                      if (newProp.disabled) {
                          this.setDisabled();
                          this.unWireEvents();
                      }
                      else {
                          this.element.disabled = false;
                          wrapper.classList.remove(DISABLED$1);
                          wrapper.setAttribute('aria-disabled', 'false');
                          this.wireEvents();
                      }
                      break;
                  case 'value':
                      this.element.setAttribute('value', newProp.value);
                      break;
                  case 'name':
                      this.element.setAttribute('name', newProp.name);
                      break;
                  case 'onLabel':
                  case 'offLabel':
                      this.setLabel(newProp.onLabel, newProp.offLabel);
                      break;
                  case 'enableRtl':
                      if (newProp.enableRtl) {
                          wrapper.classList.add(RTL$2);
                      }
                      else {
                          wrapper.classList.remove(RTL$2);
                      }
                      break;
                  case 'cssClass':
                      if (oldProp.cssClass) {
                          removeClass([wrapper], oldProp.cssClass.split(' '));
                      }
                      if (newProp.cssClass) {
                          addClass([wrapper], newProp.cssClass.split(' '));
                      }
                      break;
              }
          }
      };
      /**
       * Initialize Angular, React and Unique ID support.
       *
       * @private
       * @returns {void}
       */
      Switch.prototype.preRender = function () {
          var element = this.element;
          this.formElement = closest(this.element, 'form');
          this.tagName = this.element.tagName;
          preRender(this, 'EJS-SWITCH', WRAPPER$2, element, this.getModuleName());
      };
      /**
       * Initialize control rendering.
       *
       * @private
       * @returns {void}
       */
      Switch.prototype.render = function () {
          this.initWrapper();
          this.initialize();
          if (!this.disabled) {
              this.wireEvents();
          }
          this.renderComplete();
      };
      Switch.prototype.rippleHandler = function (e) {
          var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE$2)[0];
          rippleMouseHandler(e, rippleSpan);
          if (e.type === 'mousedown' && e.currentTarget.classList.contains('e-switch-wrapper') && e.which === 1) {
              this.isDrag = true;
              this.isFocused = false;
          }
      };
      Switch.prototype.rippleTouchHandler = function (eventType) {
          var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE$2)[0];
          if (rippleSpan) {
              var event_1 = document.createEvent('MouseEvents');
              event_1.initEvent(eventType, false, true);
              rippleSpan.dispatchEvent(event_1);
          }
      };
      Switch.prototype.setDisabled = function () {
          var wrapper = this.getWrapper();
          this.element.disabled = true;
          wrapper.classList.add(DISABLED$1);
          wrapper.setAttribute('aria-disabled', 'true');
      };
      Switch.prototype.setLabel = function (onText, offText) {
          var wrapper = this.getWrapper();
          if (onText) {
              wrapper.querySelector('.e-switch-on').textContent = onText;
          }
          if (offText) {
              wrapper.querySelector('.e-switch-off').textContent = offText;
          }
      };
      Switch.prototype.switchFocusHandler = function () {
          if (this.isFocused) {
              this.getWrapper().classList.add('e-focus');
          }
      };
      Switch.prototype.switchMouseUp = function (e) {
          var target = e.target;
          if (e.type === 'touchmove') {
              e.preventDefault();
          }
          if (e.type === 'touchstart') {
              this.isDrag = true;
              this.rippleTouchHandler('mousedown');
          }
          if (this.isDrag) {
              if ((e.type === 'mouseup' && target.className.indexOf('e-switch') < 0) || e.type === 'touchend') {
                  this.clickHandler(e);
                  this.rippleTouchHandler('mouseup');
                  e.preventDefault();
              }
          }
      };
      Switch.prototype.formResetHandler = function () {
          this.checked = this.initialSwitchCheckedValue;
          this.element.checked = this.initialSwitchCheckedValue;
      };
      /**
       * Toggle the Switch component state into checked/unchecked.
       *
       * @returns {void}
       */
      Switch.prototype.toggle = function () {
          this.clickHandler();
      };
      Switch.prototype.wireEvents = function () {
          var wrapper = this.getWrapper();
          this.delegateMouseUpHandler = this.switchMouseUp.bind(this);
          this.delegateKeyUpHandler = this.switchFocusHandler.bind(this);
          EventHandler.add(wrapper, 'click', this.clickHandler, this);
          EventHandler.add(this.element, 'focus', this.focusHandler, this);
          EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);
          EventHandler.add(this.element, 'mouseup', this.delegateMouseUpHandler, this);
          EventHandler.add(this.element, 'keyup', this.delegateKeyUpHandler, this);
          EventHandler.add(wrapper, 'mousedown mouseup', this.rippleHandler, this);
          EventHandler.add(wrapper, 'touchstart touchmove touchend', this.switchMouseUp, this);
          if (this.formElement) {
              EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);
          }
      };
      Switch.prototype.unWireEvents = function () {
          var wrapper = this.getWrapper();
          EventHandler.remove(wrapper, 'click', this.clickHandler);
          EventHandler.remove(this.element, 'focus', this.focusHandler);
          EventHandler.remove(this.element, 'focusout', this.focusOutHandler);
          EventHandler.remove(this.element, 'mouseup', this.delegateMouseUpHandler);
          EventHandler.remove(this.element, 'keyup', this.delegateKeyUpHandler);
          EventHandler.remove(wrapper, 'mousedown mouseup', this.rippleHandler);
          EventHandler.remove(wrapper, 'touchstart touchmove touchend', this.switchMouseUp);
          if (this.formElement) {
              EventHandler.remove(this.formElement, 'reset', this.formResetHandler);
          }
      };
      /**
       * Click the switch element
       * its native method
       *
       * @public
       * @returns {void}
       */
      Switch.prototype.click = function () {
          this.element.click();
      };
      /**
       * Sets the focus to Switch
       * its native method
       *
       * @public
       */
      Switch.prototype.focusIn = function () {
          this.element.focus();
      };
      __decorate$3([
          Event()
      ], Switch.prototype, "change", void 0);
      __decorate$3([
          Event()
      ], Switch.prototype, "created", void 0);
      __decorate$3([
          Property(false)
      ], Switch.prototype, "checked", void 0);
      __decorate$3([
          Property('')
      ], Switch.prototype, "cssClass", void 0);
      __decorate$3([
          Property(false)
      ], Switch.prototype, "disabled", void 0);
      __decorate$3([
          Property('')
      ], Switch.prototype, "name", void 0);
      __decorate$3([
          Property('')
      ], Switch.prototype, "onLabel", void 0);
      __decorate$3([
          Property('')
      ], Switch.prototype, "offLabel", void 0);
      __decorate$3([
          Property('')
      ], Switch.prototype, "value", void 0);
      Switch = __decorate$3([
          NotifyPropertyChanges
      ], Switch);
      return Switch;
  }(Component));
  
  /**
   * Switch modules
   */
  
  var __extends$4 = (undefined && undefined.__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 __());
      };
  })();
  var __decorate$4 = (undefined && undefined.__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;
  };
  var classNames = {
      chipSet: 'e-chip-set',
      chip: 'e-chip',
      avatar: 'e-chip-avatar',
      text: 'e-chip-text',
      icon: 'e-chip-icon',
      delete: 'e-chip-delete',
      deleteIcon: 'e-dlt-btn',
      multiSelection: 'e-multi-selection',
      singleSelection: 'e-selection',
      active: 'e-active',
      chipWrapper: 'e-chip-avatar-wrap',
      iconWrapper: 'e-chip-icon-wrap',
      focused: 'e-focused',
      disabled: 'e-disabled',
      rtl: 'e-rtl'
  };
  /**
   * A chip component is a small block of essential information, mostly used on contacts or filter tags.
   * ```html
   * <div id="chip"></div>
   * ```
   * ```typescript
   * <script>
   * var chipObj = new ChipList();
   * chipObj.appendTo("#chip");
   * </script>
   * ```
   */
  var ChipList = /** @__PURE__ @class */ (function (_super) {
      __extends$4(ChipList, _super);
      function ChipList(options, element) {
          var _this = _super.call(this, options, element) || this;
          _this.multiSelectedChip = [];
          return _this;
      }
      /**
       * Initialize the event handler
       *
       * @private
       */
      ChipList.prototype.preRender = function () {
          //prerender
      };
      /**
       * To find the chips length.
       *
       * @returns boolean
       * @private
       */
      ChipList.prototype.chipType = function () {
          return (this.chips && this.chips.length && this.chips.length > 0);
      };
      /**
       * To Initialize the control rendering.
       *
       * @returns void
       * @private
       */
      ChipList.prototype.render = function () {
          var property;
          this.type = this.chips.length ? 'chipset' : (this.text || this.element.innerText ? 'chip' : 'chipset');
          if (!isBlazor() || !this.isServerRendered) {
              this.setAttributes();
              this.createChip();
              this.setRtl();
              this.select(this.selectedChips, property);
          }
          this.wireEvent(false);
          this.rippleFunction = rippleEffect(this.element, {
              selector: '.e-chip'
          });
          this.renderComplete();
      };
      ChipList.prototype.createChip = function () {
          this.innerText = this.element.innerText.trim();
          if (isBlazor()) {
              var childElement = this.element.querySelectorAll('.e-chip');
              for (var i = 0; i < childElement.length; i++) {
                  if (childElement[i] != null) {
                      detach(childElement[i]);
                  }
              }
          }
          else {
              this.element.innerHTML = '';
          }
          this.chipCreation(this.type === 'chip' ? [this.innerText ? this.innerText : this.text] : this.chips);
      };
      ChipList.prototype.setAttributes = function () {
          if (this.type === 'chip') {
              this.element.tabIndex = 0;
              this.element.setAttribute('role', 'option');
          }
          else {
              this.element.classList.add(classNames.chipSet);
              this.element.setAttribute('role', 'listbox');
              if (this.selection === 'Multiple') {
                  this.element.classList.add(classNames.multiSelection);
                  this.element.setAttribute('aria-multiselectable', 'true');
              }
              else if (this.selection === 'Single') {
                  this.element.classList.add(classNames.singleSelection);
                  this.element.setAttribute('aria-multiselectable', 'false');
              }
              else {
                  this.element.setAttribute('aria-multiselectable', 'false');
              }
          }
      };
      ChipList.prototype.setRtl = function () {
          this.element.classList[this.enableRtl ? 'add' : 'remove'](classNames.rtl);
      };
      ChipList.prototype.chipCreation = function (data) {
          var chipListArray = [];
          for (var i = 0; i < data.length; i++) {
              var fieldsData = this.getFieldValues(data[i]);
              var chipArray = this.elementCreation(fieldsData);
              var className = (classNames.chip + ' ' + (fieldsData.enabled ? ' ' : classNames.disabled) + ' ' +
                  (fieldsData.avatarIconCss || fieldsData.avatarText ? classNames.chipWrapper : (fieldsData.leadingIconCss ?
                      classNames.iconWrapper : ' ')) + ' ' + fieldsData.cssClass).split(' ').filter(function (css) { return css; });
              if (!this.chipType()) {
                  chipListArray = chipArray;
                  addClass([this.element], className);
                  this.element.setAttribute('aria-label', fieldsData.text);
                  if (fieldsData.value) {
                      this.element.setAttribute('data-value', fieldsData.value.toString());
                  }
              }
              else {
                  var wrapper = this.createElement('DIV', {
                      className: className.join(' '), attrs: {
                          tabIndex: '0', role: 'option',
                          'aria-label': fieldsData.text, 'aria-selected': 'false'
                      }
                  });
                  if (fieldsData.value) {
                      wrapper.setAttribute('data-value', fieldsData.value.toString());
                  }
                  append(chipArray, wrapper);
                  chipListArray.push(wrapper);
              }
          }
          append(chipListArray, this.element);
      };
      ChipList.prototype.getFieldValues = function (data) {
          var chipEnabled = !(this.enabled.toString() === 'false');
          var fields = {
              text: typeof data === 'object' ? (data.text ? data.text.toString() : this.text.toString()) :
                  (!this.chipType() ? (this.innerText ? this.innerText : this.text.toString()) : data.toString()),
              cssClass: typeof data === 'object' ? (data.cssClass ? data.cssClass.toString() : this.cssClass.toString()) :
                  (this.cssClass.toString()),
              leadingIconCss: typeof data === 'object' ? (data.leadingIconCss ? data.leadingIconCss.toString() :
                  this.leadingIconCss.toString()) : (this.leadingIconCss.toString()),
              avatarIconCss: typeof data === 'object' ? (data.avatarIconCss ? data.avatarIconCss.toString() :
                  this.avatarIconCss.toString()) : (this.avatarIconCss.toString()),
              avatarText: typeof data === 'object' ? (data.avatarText ? data.avatarText.toString() : this.avatarText.toString()) :
                  (this.avatarText.toString()),
              trailingIconCss: typeof data === 'object' ? (data.trailingIconCss ? data.trailingIconCss.toString() :
                  this.trailingIconCss.toString()) : (this.trailingIconCss.toString()),
              enabled: typeof data === 'object' ? (!isNullOrUndefined(data.enabled) ? (data.enabled.toString() === 'false' ? false : true) :
                  chipEnabled) : (chipEnabled),
              value: typeof data === 'object' ? ((data.value ? data.value.toString() : null)) : null,
              leadingIconUrl: typeof data === 'object' ? (data.leadingIconUrl ? data.leadingIconUrl.toString() : this.leadingIconUrl) :
                  this.leadingIconUrl,
              trailingIconUrl: typeof data === 'object' ? (data.trailingIconUrl ? data.trailingIconUrl.toString() : this.trailingIconUrl) :
                  this.trailingIconUrl
          };
          return fields;
      };
      ChipList.prototype.elementCreation = function (fields) {
          var chipArray = [];
          if (fields.avatarText || fields.avatarIconCss) {
              var className = (classNames.avatar + ' ' + fields.avatarIconCss).trim();
              var chipAvatarElement = this.createElement('span', { className: className });
              chipAvatarElement.innerText = fields.avatarText;
              chipArray.push(chipAvatarElement);
          }
          else if (fields.leadingIconCss) {
              var className = (classNames.icon + ' ' + fields.leadingIconCss).trim();
              var chipIconElement = this.createElement('span', { className: className });
              chipArray.push(chipIconElement);
          }
          else if (fields.leadingIconUrl) {
              var className = (classNames.avatar + ' ' + 'image-url').trim();
              var chipIconElement = this.createElement('span', { className: className });
              chipIconElement.style.backgroundImage = 'url(' + fields.leadingIconUrl + ')';
              chipArray.push(chipIconElement);
          }
          var chipTextElement = this.createElement('span', { className: classNames.text });
          chipTextElement.innerText = fields.text;
          chipArray.push(chipTextElement);
          if (fields.trailingIconCss || (this.chipType() && this.enableDelete)) {
              var className = (classNames.delete + ' ' +
                  (fields.trailingIconCss ? fields.trailingIconCss : classNames.deleteIcon)).trim();
              var chipdeleteElement = this.createElement('span', { className: className });
              chipArray.push(chipdeleteElement);
          }
          else if (fields.trailingIconUrl) {
              var className = ('trailing-icon-url').trim();
              var chipIconsElement = this.createElement('span', { className: className });
              chipIconsElement.style.backgroundImage = 'url(' + fields.trailingIconUrl + ')';
              chipArray.push(chipIconsElement);
          }
          return chipArray;
      };
      /**
       * A function that finds chip based on given input.
       *
       * @param  {number | HTMLElement } fields - We can pass index number or element of chip.
       * {% codeBlock src='chips/find/index.md' %}{% endcodeBlock %}.
       */
      ChipList.prototype.find = function (fields) {
          var chipData;
          var chipElement = fields instanceof HTMLElement ?
              fields : this.element.querySelectorAll('.' + classNames.chip)[fields];
          if (chipElement && this.chipType()) {
              chipData = { text: undefined, index: undefined, element: undefined, data: undefined };
              chipData.index = Array.prototype.slice.call(this.element.querySelectorAll('.' + classNames.chip)).indexOf(chipElement);
              chipData.text = typeof this.chips[chipData.index] === 'object' ?
                  (this.chips[chipData.index].text ?
                      this.chips[chipData.index].text.toString() : '') :
                  this.chips[chipData.index].toString();
              chipData.data = this.chips[chipData.index];
              chipData.element = chipElement;
          }
          return chipData;
      };
      /**
       * Allows adding the chip item(s) by passing a single or array of string, number, or ChipModel values.
       *
       * @param  {string[] | number[] | ChipModel[] | string | number | ChipModel} chipsData - We can pass array of string or
       *  array of number or array of chip model or string data or number data or chip model.
       * {% codeBlock src='chips/add/index.md' %}{% endcodeBlock %}
       * @deprecated
       */
      ChipList.prototype.add = function (chipsData) {
          var _a;
          if (this.type !== 'chip') {
              var fieldData = chipsData instanceof Array ?
                  chipsData : [chipsData];
              (_a = this.chips).push.apply(_a, fieldData);
              this.chipCreation(fieldData);
          }
      };
      /**
       * Allows selecting the chip item(s) by passing a single or array of string, number, or ChipModel values.
       *
       * @param  {number | number[] | HTMLElement | HTMLElement[]} fields - We can pass number or array of number
       *  or chip element or array of chip element.
       * {% codeBlock src='chips/select/index.md' %}{% endcodeBlock %}
       */
      ChipList.prototype.select = function (fields, selectionType) {
          this.onSelect(fields, false, selectionType);
      };
      ChipList.prototype.multiSelection = function (newProp) {
          var items = this.element.querySelectorAll('.' + 'e-chip');
          for (var j = 0; j < newProp.length; j++) {
              if (typeof newProp[j] === 'string') {
                  for (var k = 0; k < items.length; k++) {
                      if (newProp[j] !== k) {
                          if (newProp[j] === items[k].attributes[5].value) {
                              this.multiSelectedChip.push(k);
                              break;
                          }
                      }
                  }
              }
              else {
                  this.multiSelectedChip.push(newProp[j]);
              }
          }
      };
      ChipList.prototype.onSelect = function (fields, callFromProperty, selectionType) {
          var index;
          var chipNodes;
          var chipValue;
          if (this.chipType() && this.selection !== 'None') {
              if (callFromProperty) {
                  var chipElements = this.element.querySelectorAll('.' + classNames.chip);
                  for (var i = 0; i < chipElements.length; i++) {
                      chipElements[i].setAttribute('aria-selected', 'false');
                      chipElements[i].classList.remove(classNames.active);
                  }
              }
              var fieldData = fields instanceof Array ? fields : [fields];
              for (var i = 0; i < fieldData.length; i++) {
                  var chipElement = fieldData[i] instanceof HTMLElement ? fieldData[i]
                      : this.element.querySelectorAll('.' + classNames.chip)[fieldData[i]];
                  if (selectionType !== 'index') {
                      for (var j = 0; j < this.chips.length; j++) {
                          chipNodes = this.element.querySelectorAll('.' + classNames.chip)[j];
                          var fieldsData = this.getFieldValues(this.chips[j]);
                          if (selectionType === 'value') {
                              if (fieldsData.value !== null) {
                                  chipValue = chipNodes.dataset.value;
                              }
                          }
                          else if (selectionType === 'text') {
                              chipValue = chipNodes.innerText;
                          }
                          if (chipValue === fieldData[i].toString()) {
                              index = j;
                              chipElement = this.element.querySelectorAll('.' + classNames.chip)[index];
                          }
                      }
                  }
                  if (chipElement instanceof HTMLElement) {
                      this.selectionHandler(chipElement);
                  }
              }
          }
      };
      /**
       * Allows removing the chip item(s) by passing a single or array of string, number, or ChipModel values.
       *
       * @param  {number | number[] | HTMLElement | HTMLElement[]} fields - We can pass number or array of number
       *  or chip element or array of chip element.
       * {% codeBlock src='chips/remove/index.md' %}{% endcodeBlock %}
       */
      ChipList.prototype.remove = function (fields) {
          var _this = this;
          if (this.chipType()) {
              var fieldData = fields instanceof Array ? fields : [fields];
              var chipElements_1 = [];
              var chipCollection_1 = this.element.querySelectorAll('.' + classNames.chip);
              fieldData.forEach(function (data) {
                  var chipElement = data instanceof HTMLElement ? data
                      : chipCollection_1[data];
                  if (chipElement instanceof HTMLElement) {
                      chipElements_1.push(chipElement);
                  }
              });
              chipElements_1.forEach(function (element) {
                  var chips = _this.element.querySelectorAll('.' + classNames.chip);
                  var index = Array.prototype.slice.call(chips).indexOf(element);
                  _this.deleteHandler(element, index);
              });
          }
      };
      /**
       * Returns the selected chip(s) data.
       * {% codeBlock src='chips/getSelectedChips/index.md' %}{% endcodeBlock %}
       */
      ChipList.prototype.getSelectedChips = function () {
          var selectedChips;
          if (this.chipType() && this.selection !== 'None') {
              var selectedItems = { texts: [], Indexes: [], data: [], elements: [] };
              var items = this.element.querySelectorAll('.' + classNames.active);
              for (var i = 0; i < items.length; i++) {
                  var chip = items[i];
                  selectedItems.elements.push(chip);
                  var index = Array.prototype.slice.call(this.element.querySelectorAll('.' + classNames.chip)).indexOf(chip);
                  selectedItems.Indexes.push(index);
                  selectedItems.data.push(this.chips[index]);
                  var text = typeof this.chips[index] === 'object' ?
                      this.chips[index].text ? this.chips[index].text.toString()
                          : null : this.chips[index].toString();
                  selectedItems.texts.push(text);
              }
              var selectedItem = {
                  text: selectedItems.texts[0], index: selectedItems.Indexes[0],
                  data: selectedItems.data[0], element: selectedItems.elements[0]
              };
              selectedChips = !isNullOrUndefined(selectedItem.index) ?
                  (this.selection === 'Multiple' ? selectedItems : selectedItem) : undefined;
          }
          return selectedChips;
      };
      ChipList.prototype.wireEvent = function (unWireEvent) {
          if (!unWireEvent) {
              EventHandler.add(this.element, 'click', this.clickHandler, this);
              EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);
              EventHandler.add(this.element, 'keydown', this.keyHandler, this);
              EventHandler.add(this.element, 'keyup', this.keyHandler, this);
          }
          else {
              EventHandler.remove(this.element, 'click', this.clickHandler);
              EventHandler.remove(this.element, 'focusout', this.focusOutHandler);
              EventHandler.remove(this.element, 'keydown', this.keyHandler);
              EventHandler.remove(this.element, 'keyup', this.keyHandler);
          }
      };
      ChipList.prototype.keyHandler = function (e) {
          if (e.target.classList.contains(classNames.chip)) {
              if (e.type === 'keydown') {
                  if (e.keyCode === 13) {
                      this.clickHandler(e);
                  }
                  else if (e.keyCode === 46 && this.enableDelete) {
                      this.clickHandler(e, true);
                  }
              }
              else if (e.keyCode === 9) {
                  this.focusInHandler(e.target);
              }
          }
      };
      ChipList.prototype.focusInHandler = function (chipWrapper) {
          if (!chipWrapper.classList.contains(classNames.focused)) {
              chipWrapper.classList.add(classNames.focused);
          }
      };
      ChipList.prototype.focusOutHandler = function (e) {
          var chipWrapper = closest(e.target, '.' + classNames.chip);
          var focusedElement = !this.chipType() ? (this.element.classList.contains(classNames.focused) ?
              this.element : null) : this.element.querySelector('.' + classNames.focused);
          if (chipWrapper && focusedElement) {
              focusedElement.classList.remove(classNames.focused);
          }
      };
      ChipList.prototype.clickHandler = function (e, del) {
          var _this = this;
          if (del === void 0) { del = false; }
          var chipWrapper = closest(e.target, '.' + classNames.chip);
          if (chipWrapper) {
              // eslint-disable-next-line
              var chipDataArgs = void 0;
              if (this.chipType()) {
                  chipDataArgs = this.find(chipWrapper);
              }
              else {
                  var index = Array.prototype.slice.call(this.element.querySelectorAll('.' + classNames.chip)).indexOf(chipWrapper);
                  chipDataArgs = {
                      text: this.innerText ? this.innerText : this.text,
                      element: chipWrapper, data: this.text, index: index
                  };
              }
              chipDataArgs.event = e;
              chipDataArgs.cancel = false;
              this.trigger('beforeClick', chipDataArgs, function (observedArgs) {
                  if (!observedArgs.cancel) {
                      observedArgs.element = isBlazor() ? getElement(observedArgs.element) : observedArgs.element;
                      _this.clickEventHandler(observedArgs.element, e, del);
                  }
              });
          }
      };
      ChipList.prototype.clickEventHandler = function (chipWrapper, e, del) {
          var _this = this;
          if (this.chipType()) {
              var chipData_1 = this.find(chipWrapper);
              chipData_1.event = e;
              var deleteElement = e.target.classList.contains(classNames.deleteIcon) ?
                  e.target : (del ? chipWrapper.querySelector('.' + classNames.deleteIcon) : undefined);
              if (deleteElement && this.enableDelete) {
                  chipData_1.cancel = false;
                  var deletedItemArgs = chipData_1;
                  this.trigger('delete', deletedItemArgs, function (observedArgs) {
                      if (!observedArgs.cancel) {
                          observedArgs.element = isBlazor() ? getElement(observedArgs.element) : observedArgs.element;
                          _this.deleteHandler(observedArgs.element, observedArgs.index);
                          _this.selectionHandler(chipWrapper);
                          chipData_1.selected = observedArgs.element.classList.contains(classNames.active);
                          var selectedItemArgs = chipData_1;
                          _this.trigger('click', selectedItemArgs);
                      }
                  });
              }
              else if (this.selection !== 'None') {
                  this.selectionHandler(chipWrapper);
                  chipData_1.selected = chipWrapper.classList.contains(classNames.active);
                  var selectedItemArgs = chipData_1;
                  this.trigger('click', selectedItemArgs);
              }
              else {
                  this.focusInHandler(chipWrapper);
                  var clickedItemArgs = chipData_1;
                  this.trigger('click', clickedItemArgs);
              }
          }
          else {
              this.focusInHandler(chipWrapper);
              var clickedItemArgs = {
                  text: this.innerText ? this.innerText : this.text,
                  element: chipWrapper, data: this.text, event: e
              };
              this.trigger('click', clickedItemArgs);
          }
      };
      ChipList.prototype.selectionHandler = function (chipWrapper) {
          if (this.selection === 'Single') {
              var activeElement = this.element.querySelector('.' + classNames.active);
              if (activeElement && activeElement !== chipWrapper) {
                  activeElement.classList.remove(classNames.active);
                  activeElement.setAttribute('aria-selected', 'false');
              }
              this.setProperties({ selectedChips: null }, true);
          }
          else {
              this.setProperties({ selectedChips: [] }, true);
          }
          if (chipWrapper.classList.contains(classNames.active)) {
              chipWrapper.classList.remove(classNames.active);
              chipWrapper.setAttribute('aria-selected', 'false');
          }
          else {
              chipWrapper.classList.add(classNames.active);
              chipWrapper.setAttribute('aria-selected', 'true');
          }
          this.updateSelectedChips();
      };
      ChipList.prototype.updateSelectedChips = function () {
          var chipListEle = this.element.querySelectorAll('.e-chip');
          var chipCollIndex = [];
          var chipCollValue = [];
          var chip = null;
          var value;
          for (var i = 0; i < chipListEle.length; i++) {
              var selectedEle = this.element.querySelectorAll('.e-chip')[i];
              if (selectedEle.getAttribute('aria-selected') === 'true') {
                  value = selectedEle.getAttribute('data-value');
                  if (this.selection === 'Single' && selectedEle.classList.contains('e-active')) {
                      chip = value ? value : i;
                      break;
                  }
                  else {
                      chip = value ? chipCollValue.push(value) : chipCollIndex.push(i);
                  }
              }
          }
          this.setProperties({ selectedChips: this.selection === 'Single' ? chip : value ? chipCollValue : chipCollIndex }, true);
      };
      ChipList.prototype.deleteHandler = function (chipWrapper, index) {
          this.allowServerDataBinding = true;
          this.chips.splice(index, 1);
          this.setProperties({ chips: this.chips }, true);
          this.serverDataBind();
          this.allowServerDataBinding = false;
          if (!(isBlazor() && this.isServerRendered)) {
              detach(chipWrapper);
          }
      };
      /**
       * Removes the component from the DOM and detaches all its related event handlers. Also, it removes the attributes and classes.
       * {% codeBlock src='chips/destroy/index.md' %}{% endcodeBlock %}
       */
      ChipList.prototype.destroy = function () {
          removeClass([this.element], [classNames.chipSet, classNames.chip, classNames.rtl,
              classNames.multiSelection, classNames.singleSelection, classNames.disabled, classNames.chipWrapper, classNames.iconWrapper,
              classNames.active, classNames.focused].concat(this.cssClass.toString().split(' ').filter(function (css) { return css; })));
          this.removeMultipleAttributes(['tabindex', 'role', 'aria-label', 'aria-multiselectable'], this.element);
          this.wireEvent(true);
          this.rippleFunction();
          if (isBlazor()) {
              var chipChildElement = !this.chipType() ? this.element.querySelectorAll('.e-chip-text') :
                  this.element.querySelectorAll('.e-chip');
              for (var i = 0; i < chipChildElement.length; i++) {
                  if (chipChildElement[i] != null) {
                      detach(chipChildElement[i]);
                  }
              }
          }
          else {
              _super.prototype.destroy.call(this);
              this.element.innerHTML = '';
              this.element.innerText = this.innerText;
          }
      };
      ChipList.prototype.removeMultipleAttributes = function (attributes$$1, element) {
          attributes$$1.forEach(function (attr) {
              element.removeAttribute(attr);
          });
      };
      ChipList.prototype.getPersistData = function () {
          return this.addOnPersist([]);
      };
      ChipList.prototype.getModuleName = function () {
          return 'chip-list';
      };
      /**
       * Called internally if any of the property value changed.
       *
       * @returns void
       * @private
       */
      ChipList.prototype.onPropertyChanged = function (newProp, oldProp) {
          var property;
          for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
              var prop = _a[_i];
              switch (prop) {
                  case 'chips':
                  case 'text':
                  case 'avatarText':
                  case 'avatarIconCss':
                  case 'leadingIconCss':
                  case 'trailingIconCss':
                  case 'selection':
                  case 'enableDelete':
                  case 'enabled':
                      if (!(isBlazor() && this.isServerRendered)) {
                          this.isServerRendered = false;
                          this.refresh();
                          this.isServerRendered = true;
                      }
                      break;
                  case 'cssClass':
                      if (!(isBlazor() && this.isServerRendered)) {
                          if (!this.chipType()) {
                              removeClass([this.element], oldProp.cssClass.toString().split(' ').filter(function (css) { return css; }));
                              addClass([this.element], newProp.cssClass.toString().split(' ').filter(function (css) { return css; }));
                          }
                          else {
                              this.isServerRendered = false;
                              this.refresh();
                              this.isServerRendered = true;
                          }
                      }
                      break;
                  case 'selectedChips':
                      removeClass(this.element.querySelectorAll('.e-active'), 'e-active');
                      if (this.selection === 'Multiple') {
                          this.multiSelectedChip = [];
                          this.multiSelection(newProp.selectedChips);
                          this.onSelect(this.multiSelectedChip, true, property);
                          this.updateSelectedChips();
                      }
                      else {
                          this.onSelect(newProp.selectedChips, true, property);
                      }
                      break;
                  case 'enableRtl':
                      this.setRtl();
                      break;
              }
          }
      };
      __decorate$4([
          Property([])
      ], ChipList.prototype, "chips", void 0);
      __decorate$4([
          Property('')
      ], ChipList.prototype, "text", void 0);
      __decorate$4([
          Property('')
      ], ChipList.prototype, "avatarText", void 0);
      __decorate$4([
          Property('')
      ], ChipList.prototype, "avatarIconCss", void 0);
      __decorate$4([
          Property('')
      ], ChipList.prototype, "leadingIconCss", void 0);
      __decorate$4([
          Property('')
      ], ChipList.prototype, "trailingIconCss", void 0);
      __decorate$4([
          Property('')
      ], ChipList.prototype, "leadingIconUrl", void 0);
      __decorate$4([
          Property('')
      ], ChipList.prototype, "trailingIconUrl", void 0);
      __decorate$4([
          Property('')
      ], ChipList.prototype, "cssClass", void 0);
      __decorate$4([
          Property(true)
      ], ChipList.prototype, "enabled", void 0);
      __decorate$4([
          Property([])
      ], ChipList.prototype, "selectedChips", void 0);
      __decorate$4([
          Property('None')
      ], ChipList.prototype, "selection", void 0);
      __decorate$4([
          Property(false)
      ], ChipList.prototype, "enableDelete", void 0);
      __decorate$4([
          Event()
      ], ChipList.prototype, "created", void 0);
      __decorate$4([
          Event()
      ], ChipList.prototype, "click", void 0);
      __decorate$4([
          Event()
      ], ChipList.prototype, "beforeClick", void 0);
      __decorate$4([
          Event()
      ], ChipList.prototype, "delete", void 0);
      ChipList = __decorate$4([
          NotifyPropertyChanges
      ], ChipList);
      return ChipList;
  }(Component));
  
  /**
   * Represents ChipList `Chip` model class.
   */
  var Chip = /** @__PURE__ @class */ (function () {
      function Chip() {
      }
      return Chip;
  }());
  
  /**
   * Chip modules
   */
  
  /**
   * Button all modules
   */
  
  export { wrapperInitialize, getTextNode, destroy, preRender, createCheckBox, rippleMouseHandler, setHiddenInput, buttonObserver, Button, CheckBox, RadioButton, Switch, classNames, ChipList, Chip };
  //# sourceMappingURL=ej2-buttons.es5.js.map
  