@syncfusion/ej2-buttons
Version:
A package of feature-rich Essential JS 2 components such as Button, CheckBox, RadioButton and Switch.
1,407 lines (1,403 loc) • 210 kB
JavaScript
import { getValue, attributes, setValue, deleteObject, detach, getUniqueID, addClass, rippleEffect, Observer, Component, isBlazor, SanitizeHtmlHelper, EventHandler, removeClass, isRippleEnabled, Property, Event, NotifyPropertyChanges, closest, isNullOrUndefined, getInstance, Draggable, remove, compile, append, select, ChildProperty, KeyboardEvents, selectAll, formatUnit, animationMode, extend, Complex, Collection, Animation } 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) {
let input = element;
if (element.tagName === tag) {
const ejInstance = getValue('ej2_instances', element);
input = createElement('input', { attrs: { 'type': type } });
const props = ['change', 'cssClass', 'label', 'labelPosition', 'id'];
for (let 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 });
element.appendChild(input);
element.classList.add(role);
element.classList.remove(role);
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) {
let node;
const childnode = element.childNodes;
for (let 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((key) => {
ejInst.element.removeAttribute(key);
});
}
else {
['role', 'aria-checked', 'class'].forEach((key) => {
wrapper.removeAttribute(key);
});
wrapper.innerHTML = '';
ejInst.element = wrapper;
}
}
/**
* 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 = false, options = {}) {
const 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) {
const rippleSpan = createElement('span', { className: 'e-ripple-container' });
rippleEffect(rippleSpan, { isCenterRipple: true, duration: 400 });
wrapper.appendChild(rippleSpan);
}
const frameSpan = createElement('span', { className: 'e-frame e-icons' });
if (options.checked) {
frameSpan.classList.add('e-check');
}
wrapper.appendChild(frameSpan);
if (options.label) {
const 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) {
const event = document.createEvent('MouseEvents');
event.initEvent(e.type, false, true);
rippleSpan.dispatchEvent(event);
}
}
/**
* 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' }
}));
}
}
/**
* Represents the event arguments for a "beforeChange" event.
*
* This object contains details about an action that is about to occur, allowing you to intercept and cancel the action before it's finalized.
*/
class BeforeChangeEventArgs {
}
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;
};
/**
* Defines the icon position of button.
*/
var IconPosition;
(function (IconPosition) {
/**
* Positions the Icon at the left of the text content in the Button.
*/
IconPosition["Left"] = "Left";
/**
* Positions the Icon at the right of the text content in the Button.
*/
IconPosition["Right"] = "Right";
/**
* Positions the Icon at the top of the text content in the Button.
*/
IconPosition["Top"] = "Top";
/**
* Positions the Icon at the bottom of the text content in the Button.
*/
IconPosition["Bottom"] = "Bottom";
})(IconPosition || (IconPosition = {}));
const buttonObserver = new Observer();
const 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>
* ```
*/
let Button = class Button extends Component {
/**
* Constructor for creating the widget
*
* @param {ButtonModel} options - Specifies the button model
* @param {string|HTMLButtonElement} element - Specifies the target element
*/
constructor(options, element) {
super(options, element);
}
preRender() {
// pre render code snippets
}
/**
* Initialize the control rendering
*
* @returns {void}
* @private
*/
render() {
this.initialize();
this.removeRippleEffect = rippleEffect(this.element, { selector: '.' + cssClassName.BUTTON });
this.renderComplete();
}
initialize() {
if (this.cssClass) {
addClass([this.element], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
}
if (this.isPrimary) {
this.element.classList.add(cssClassName.PRIMARY);
}
if (!isBlazor() || (isBlazor() && this.getModuleName() !== 'progress-btn')) {
if (this.content) {
const 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();
}
}
controlStatus(disabled) {
this.element.disabled = disabled;
}
setIconCss() {
if (this.iconCss) {
const 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');
}
}
const node = this.element.childNodes[0];
if (node && (this.iconPosition === 'Left' || this.iconPosition === 'Top')) {
this.element.insertBefore(span, node);
}
else {
this.element.appendChild(span);
}
}
}
wireEvents() {
if (this.isToggle) {
EventHandler.add(this.element, 'click', this.btnClickHandler, this);
}
}
unWireEvents() {
if (this.isToggle) {
EventHandler.remove(this.element, 'click', this.btnClickHandler);
}
}
btnClickHandler() {
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}
*/
destroy() {
let 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(/\s+/).filter((c) => c.length > 0));
}
super.destroy();
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, '');
}
const 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
*/
getModuleName() {
return 'btn';
}
/**
* Get the properties to be maintained in the persisted state.
*
* @returns {string} - Persist Data
* @private
*/
getPersistData() {
return this.addOnPersist([]);
}
/**
* Dynamically injects the required modules to the component.
*
* @private
* @returns {void}
*/
static Inject() {
// 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
*/
onPropertyChanged(newProp, oldProp) {
let span = this.element.querySelector('span.e-btn-icon');
for (const prop of Object.keys(newProp)) {
switch (prop) {
case 'isPrimary':
if (newProp.isPrimary) {
this.element.classList.add(cssClassName.PRIMARY);
}
else {
this.element.classList.remove(cssClassName.PRIMARY);
}
break;
case 'disabled':
this.controlStatus(newProp.disabled);
break;
case 'iconCss': {
span = this.element.querySelector('span.e-btn-icon');
if (span) {
if (newProp.iconCss) {
span.className = 'e-btn-icon ' + newProp.iconCss;
if (this.element.textContent.trim()) {
if (this.iconPosition === 'Left') {
span.classList.add('e-icon-left');
}
else {
span.classList.add('e-icon-right');
}
}
}
else {
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(/\s+/).filter((c) => c.length > 0));
}
if (newProp.cssClass) {
addClass([this.element], newProp.cssClass.replace(/\s+/g, ' ').trim().split(' '));
}
break;
case 'enableRtl':
if (newProp.enableRtl) {
this.element.classList.add(cssClassName.RTL);
}
else {
this.element.classList.remove(cssClassName.RTL);
}
break;
case 'content': {
const 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}
*/
click() {
this.element.click();
}
/**
* Sets the focus to Button
* its native method
*
* @public
* @returns {void}
*/
focusIn() {
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(true)
], Button.prototype, "enableHtmlSanitizer", void 0);
__decorate([
Event()
], Button.prototype, "created", void 0);
Button = __decorate([
NotifyPropertyChanges
], Button);
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;
};
const CHECK = 'e-check';
const DISABLED = 'e-checkbox-disabled';
const FRAME = 'e-frame';
const INDETERMINATE = 'e-stop';
const LABEL = 'e-label';
const RIPPLE = 'e-ripple-container';
const RIPPLECHECK = 'e-ripple-check';
const RIPPLEINDETERMINATE = 'e-ripple-stop';
const RTL = 'e-rtl';
const WRAPPER = 'e-checkbox-wrapper';
const containerAttr = ['title', 'class', 'style', 'disabled', 'readonly', 'name', 'value', 'id', 'tabindex', 'aria-label', 'required'];
/**
* 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>
* ```
*/
let CheckBox = class CheckBox extends Component {
/**
* Constructor for creating the widget
*
* @private
* @param {CheckBoxModel} options - Specifies checkbox model
* @param {string | HTMLInputElement} element - Specifies target element
*/
constructor(options, element) {
super(options, element);
this.isFocused = false;
this.isMouseClick = false;
this.clickTriggered = false;
this.validCheck = true;
this.type = 'checkbox';
}
changeState(state, isInitialize, isInterAction) {
const wrapper = this.getWrapper();
let rippleSpan = null;
let frameSpan = null;
if (wrapper) {
frameSpan = wrapper.getElementsByClassName(FRAME)[0];
if (isRippleEnabled) {
rippleSpan = wrapper.getElementsByClassName(RIPPLE)[0];
}
}
if (state === 'check') {
if (frameSpan) {
frameSpan.classList.remove(INDETERMINATE);
frameSpan.classList.add(CHECK);
}
if (rippleSpan) {
rippleSpan.classList.remove(RIPPLEINDETERMINATE);
rippleSpan.classList.add(RIPPLECHECK);
}
this.element.checked = true;
if ((this.element.required || closest(this.element, 'form') && closest(this.element, 'form').classList.contains('e-formvalidator')) && this.validCheck && !isInitialize && isInterAction) {
this.element.checked = false;
this.validCheck = false;
}
else if (this.element.required || closest(this.element, 'form') && closest(this.element, 'form').classList.contains('e-formvalidator')) {
this.validCheck = true;
}
}
else if (state === 'uncheck') {
if (frameSpan) {
removeClass([frameSpan], [CHECK, INDETERMINATE]);
}
if (rippleSpan) {
removeClass([rippleSpan], [RIPPLECHECK, RIPPLEINDETERMINATE]);
}
this.element.checked = false;
if ((this.element.required || closest(this.element, 'form') && closest(this.element, 'form').classList.contains('e-formvalidator')) && this.validCheck && !isInitialize && isInterAction) {
this.element.checked = true;
this.validCheck = false;
}
else if (this.element.required || closest(this.element, 'form') && closest(this.element, 'form').classList.contains('e-formvalidator')) {
this.validCheck = true;
}
}
else {
if (frameSpan) {
frameSpan.classList.remove(CHECK);
frameSpan.classList.add(INDETERMINATE);
}
if (rippleSpan) {
rippleSpan.classList.remove(RIPPLECHECK);
rippleSpan.classList.add(RIPPLEINDETERMINATE);
}
this.element.indeterminate = true;
this.indeterminate = true;
}
}
clickHandler(event) {
if (event.target.tagName === 'INPUT' && this.clickTriggered) {
this.changeState(this.checked ? 'check' : 'uncheck');
this.clickTriggered = false;
return;
}
if (event.target.tagName === 'SPAN' || event.target.tagName === 'LABEL' ||
closest(event.target, '.e-label')) {
this.clickTriggered = true;
}
if (this.isMouseClick) {
this.focusOutHandler();
this.isMouseClick = false;
}
if (this.indeterminate) {
this.changeState(this.checked ? 'check' : 'uncheck', false, true);
this.indeterminate = false;
this.element.indeterminate = false;
}
else if (this.checked) {
this.changeState('uncheck', false, true);
this.checked = false;
}
else {
this.changeState('check', false, true);
this.checked = true;
}
const changeEventArgs = { checked: this.updateVueArrayModel(false), event: event };
this.trigger('change', changeEventArgs);
event.stopPropagation();
}
/**
* Destroys the widget.
*
* @returns {void}
*/
destroy() {
let wrapper = this.getWrapper();
super.destroy();
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((key) => {
this.element.removeAttribute(key);
});
}
else {
['class'].forEach((key) => {
wrapper.removeAttribute(key);
});
wrapper.innerHTML = '';
this.element = wrapper;
if (this.refreshing) {
['e-control', 'e-checkbox', 'e-lib'].forEach((key) => {
this.element.classList.add(key);
});
setValue('ej2_instances', [this], this.element);
}
}
}
}
focusHandler() {
this.isFocused = true;
}
focusOutHandler() {
const wrapper = this.getWrapper();
if (wrapper) {
wrapper.classList.remove('e-focus');
}
this.isFocused = false;
}
/**
* Gets the module name.
*
* @private
* @returns {string} - Module Name
*/
getModuleName() {
return 'checkbox';
}
/**
* Gets the properties to be maintained in the persistence state.
*
* @private
* @returns {string} - Persist Data
*/
getPersistData() {
return this.addOnPersist(['checked', 'indeterminate']);
}
getWrapper() {
if (this.element && this.element.parentElement) {
return this.element.parentElement.parentElement;
}
else {
return null;
}
}
getLabel() {
if (this.element) {
return this.element.parentElement;
}
else {
return null;
}
}
initialize() {
if (isNullOrUndefined(this.initialCheckedValue)) {
this.initialCheckedValue = this.checked;
}
if (this.name) {
this.element.setAttribute('name', this.name);
}
this.element.setAttribute('tabindex', '0');
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', true);
}
if (this.indeterminate) {
this.changeState();
}
if (this.disabled) {
this.setDisabled();
}
}
initWrapper() {
let wrapper = this.element.parentElement;
if (!wrapper.classList.contains(WRAPPER)) {
wrapper = this.createElement('div', {
className: WRAPPER
});
if (this.element.parentNode) {
this.element.parentNode.insertBefore(wrapper, this.element);
}
}
const label = this.createElement('label', { attrs: { for: this.htmlAttributes.id ? this.htmlAttributes.id : this.element.id } });
const 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.replace(/\s+/g, ' ').trim().split(' '));
}
wrapper.appendChild(label);
label.appendChild(this.element);
setHiddenInput(this, label);
label.appendChild(frameSpan);
if (isRippleEnabled) {
const 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);
}
}
keyUpHandler() {
if (this.isFocused) {
this.getWrapper().classList.add('e-focus');
}
}
labelMouseDownHandler(e) {
this.isMouseClick = true;
const rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];
rippleMouseHandler(e, rippleSpan);
}
labelMouseLeaveHandler(e) {
const rippleSpan = this.getLabel().getElementsByClassName(RIPPLE)[0];
if (rippleSpan) {
const rippleElem = rippleSpan.querySelectorAll('.e-ripple-element');
for (let i = rippleElem.length - 1; i > 0; i--) {
rippleSpan.removeChild(rippleSpan.childNodes[i]);
}
rippleMouseHandler(e, rippleSpan);
}
}
labelMouseUpHandler(e) {
this.isMouseClick = true;
const rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];
if (rippleSpan) {
const rippleElem = rippleSpan.querySelectorAll('.e-ripple-element');
for (let 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}
*/
onPropertyChanged(newProp, oldProp) {
const wrapper = this.getWrapper();
for (const prop of Object.keys(newProp)) {
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(/\s+/).filter((c) => c.length > 0));
}
if (newProp.cssClass) {
addClass([wrapper], newProp.cssClass.replace(/\s+/g, ' ').trim().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': {
const label = wrapper.getElementsByClassName(LABEL)[0];
const 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}
*/
preRender() {
let element = this.element;
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}
*/
render() {
this.initWrapper();
this.initialize();
if (!this.disabled) {
this.wireEvents();
}
this.updateHtmlAttributeToWrapper();
this.updateVueArrayModel(true);
this.renderComplete();
this.wrapper = this.getWrapper();
}
setDisabled() {
const wrapper = this.getWrapper();
this.element.disabled = true;
wrapper.classList.add(DISABLED);
wrapper.setAttribute('aria-disabled', 'true');
}
setText(text) {
const wrapper = this.getWrapper();
if (!wrapper) {
return;
}
let label = wrapper.getElementsByClassName(LABEL)[0];
if (label) {
label.innerHTML = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(text) : text;
}
else {
text = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(text) : text;
label = this.createElement('span', { className: LABEL, innerHTML: text });
const labelWrap = wrapper.getElementsByTagName('label')[0];
if (this.labelPosition === 'Before') {
labelWrap.insertBefore(label, wrapper.getElementsByClassName(FRAME)[0]);
}
else {
labelWrap.appendChild(label);
}
}
}
changeHandler(e) {
e.stopPropagation();
}
formResetHandler() {
this.checked = this.initialCheckedValue;
this.element.checked = this.initialCheckedValue;
}
unWireEvents() {
const wrapper = this.wrapper;
EventHandler.remove(this.element, 'keyup', this.keyUpHandler);
EventHandler.remove(this.element, 'focus', this.focusHandler);
EventHandler.remove(this.element, 'focusout', this.focusOutHandler);
if (wrapper) {
EventHandler.remove(wrapper, 'click', this.clickHandler);
const label = wrapper.getElementsByTagName('label')[0];
if (label) {
EventHandler.remove(label, 'mousedown', this.labelMouseDownHandler);
EventHandler.remove(label, 'mouseup', this.labelMouseUpHandler);
EventHandler.remove(label, 'mouseleave', this.labelMouseLeaveHandler);
}
}
const formElem = closest(this.element, 'form');
if (formElem) {
EventHandler.remove(formElem, 'reset', this.formResetHandler);
}
if (this.tagName === 'EJS-CHECKBOX') {
EventHandler.remove(this.element, 'change', this.changeHandler);
}
}
wireEvents() {
const wrapper = this.getWrapper();
EventHandler.add(wrapper, '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);
const label = wrapper.getElementsByTagName('label')[0];
EventHandler.add(label, 'mousedown', this.labelMouseDownHandler, this);
EventHandler.add(label, 'mouseup', this.labelMouseUpHandler, this);
EventHandler.add(label, 'mouseleave', this.labelMouseLeaveHandler, this);
const formElem = closest(this.element, 'form');
if (formElem) {
EventHandler.add(formElem, 'reset', this.formResetHandler, this);
}
if (this.tagName === 'EJS-CHECKBOX') {
EventHandler.add(this.element, 'change', this.changeHandler, this);
}
}
updateVueArrayModel(init) {
if (this.isVue && typeof this.value === 'object') {
const value = this.element.value;
if (value && this.value) {
if (init) {
for (let i = 0; i < this.value.length; i++) {
if (value === this.value[i]) {
this.changeState('check');
this.setProperties({ 'checked': true }, true);
}
}
}
else {
const 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.validCheck ? this.element.checked : !this.element.checked;
}
updateHtmlAttributeToWrapper() {
if (!isNullOrUndefined(this.htmlAttributes)) {
for (const key of Object.keys(this.htmlAttributes)) {
const wrapper = this.getWrapper();
if (containerAttr.indexOf(key) > -1) {
if (key === 'class') {
addClass([wrapper], this.htmlAttributes[`${key}`].split(' '));
}
else if (key === 'title') {
wrapper.setAttribute(key, this.htmlAttributes[`${key}`]);
}
else if (key === 'style') {
const frameSpan = this.getWrapper().getElementsByClassName(FRAME)[0];
frameSpan.setAttribute(key, this.htmlAttributes[`${key}`]);
}
else if (key === 'disabled') {
if (this.htmlAttributes[`${key}`] === 'true') {
this.setDisabled();
}
this.element.setAttribute(key, this.htmlAttributes[`${key}`]);
}
else {
this.element.setAttribute(key, this.htmlAttributes[`${key}`]);
}
}
else {
wrapper.setAttribute(key, this.htmlAttributes[`${key}`]);
}
}
}
}
/**
* Click the CheckBox element
* its native method
*
* @public
* @returns {void}
*/
click() {
this.element.click();
}
/**
* Sets the focus to CheckBox
* its native method
*
* @public
* @returns {void}
*/
focusIn() {
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(true)
], CheckBox.prototype, "enableHtmlSanitizer", void 0);
__decorate$1([
Property({})
], CheckBox.prototype, "htmlAttributes", void 0);
CheckBox = __decorate$1([
NotifyPropertyChanges
], CheckBox);
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 RadioButton_1;
const LABEL$1 = 'e-label';
const RIPPLE$1 = 'e-ripple-container';
const RTL$1 = 'e-rtl';
const WRAPPER$1 = 'e-radio-wrapper';
const ATTRIBUTES = ['title', 'class', 'style', 'disabled', 'readonly', 'name', 'value', 'id'];
/**
* 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>
* ```
*/
let RadioButton = RadioButton_1 = class RadioButton extends Component {
/**
* Constructor for creating the widget
*
* @private
* @param {RadioButtonModel} options - Specifies Radio button model
* @param {string | HTMLInputElement} element - Specifies target element
*/
constructor(options, element) {
super(options, element);
this.isFocused = false;
this.type = 'radio';
}
changeHandler(event) {
this.checked = true;
this.dataBind();
let value = this.element.getAttribute('value');
value = this.isVue && value ? this.element.value : this.value;
const type = typeof this.value;
if (this.isVue && type === 'boolean') {
value = value === 'true' ? true : false;
}
this.trigger('change', { value: value, event: event });
// eslint-disable-next-line @typescript-eslint/no-explicit-any
if (this.isAngular) {
event.stopPropagation();
}
}
updateChange() {
let input;
let instance;
const radioGrp = this.getRadioGroup();
for (let 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}
*/
destroy() {
const radioWrap = this.wrapper;
super.destroy();
if (radioWrap) {
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((key) => {
this.element.removeAttribute(key);
});
}
else {
['role', 'aria-checked', 'class'].forEach((key) => {
radioWrap.removeAttribute(key);
});
radioWrap.innerHTML = '';
this.element = this.wrapper;
if (this.refreshing) {
['e-control', 'e-radio', 'e-lib'].forEach((key) => {
this.element.classList.add(key);
});
setValue('ej2_instances', [this], this.element);
}
}
}
}
focusHandler() {
this.isFocused = true;
}
focusOutHandler() {
const label = this.getLabel();
if (label) {
label.classList.remove('e-focus');
}
}
getModuleName() {
return 'radio';
}
/**
* To get the value of selected radio button in a group.
*
* @method getSelectedValue
* @returns {string} - Selected Value
*/
getSelectedValue() {
let input;
const radioGrp = this.getRadioGroup();
for (let i = 0, len = radioGrp.length; i < len; i++) {
input = radioGrp[i];
if (input.checked) {
return input.value;
}
}
return '';
}
getRadioGroup() {
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
*/
getPersistData() {
return this.addOnPersist(['checked']);
}
getWrapper() {
if (this.element.parentElement) {
return this.element.parentElement;
}
else {
return null;
}
}
getLabel() {
if (this.element.nextElementSibling) {
return this.element.nextElementSibling;
}
else {
return null;
}
}
initialize() {
if (isNullOrUndefined(this.initialCheckedValue)) {
this.initialCheckedValue = this.checked;
}
this.initWrapper();
this.updateHtmlAttribute();
if (this.name) {
this.element.setAttribute('name', this.name);
}
let value = this.element.getAttribute('value');
const type = typeof this.value;
if (this.isVue && type === 'boolean') {
value = value === 'true' ? true : false;
}
if (this.isVue ? this.value && type !== 'boolean' && !value : this.value) {
this.element.setAttribute('value', this.value);
}
if (this.checked) {
this.element.checked = true;
}
if (this.disabled) {
this.setDisabled();
}
}
initWrapper() {
let rippleSpan;
let wrapper = this.element.parentElement;
if (!wrapper.classList.contains(WRAPPER$1)) {
wrapper = this.createElement('div', { className: WRAPPER$1 });
if (this.element.parentNode) {
this.element.parentNode.insertBefore(wrapper, this.element);
}
}
const 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.replace(/\s+/g, ' ').trim().split(' '));
}
if (this.label) {
this.setText(this.label);
}
}
keyUpHandler() {
if (this.isFocused) {
this.getLabel().classList.add('e-focus');
}
}
labelMouseDownHandler(e) {
const rippleSpan = this.getLabel().getElementsByClassName(RIPPLE$1)[0];
rippleMouseHandler(e, rippleSpan);
}
labelMouseLeaveHandler(e) {
const rippleSpan = this.getLabel().getElementsByClassName(RIPPLE$1)[0];
if (rippleSpan) {
const rippleElem = rippleSpan.querySelectorAll('.e-ripple-element');
for (let i = rippleElem.length - 1; i > 0; i--) {
rippleSpan.removeChild(rippleSpan.childNodes[i]);
}
rippleMouseHandler(e, rippleSpan);
}
}
labelMouseUpHandler(e) {
const rippleSpan = this.getLabel().getElementsByClassName(RIPPLE$1)[0];
if (rippleSpan) {
const rippleElem = rippleSpan.querySelectorAll('.e-ripple-element');
for (let i = rippleElem.length - 1; i > 0; i--) {
rippleSpan.removeChild(rippleSpan.childNodes[i]);
}
rippleMouseHandler(e, rippleSpan);
}
}
formResetHandler() {
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} oldPro