@syncfusion/ej2-inputs 34.2.2 → 34.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -0
- package/dist/ej2-inputs.min.js +2 -2
- package/dist/ej2-inputs.umd.min.js +2 -2
- package/dist/ej2-inputs.umd.min.js.map +1 -1
- package/dist/es6/ej2-inputs.es2015.js +45 -1
- package/dist/es6/ej2-inputs.es2015.js.map +1 -1
- package/dist/es6/ej2-inputs.es5.js +44 -0
- package/dist/es6/ej2-inputs.es5.js.map +1 -1
- package/dist/global/ej2-inputs.min.js +2 -2
- package/dist/global/ej2-inputs.min.js.map +1 -1
- package/dist/global/index.d.ts +1 -1
- package/package.json +5 -5
- package/src/input/input.js +26 -0
- package/src/numerictextbox/numerictextbox.d.ts +2 -0
- package/src/numerictextbox/numerictextbox.js +9 -0
- package/src/textarea/textarea.d.ts +2 -0
- package/src/textarea/textarea.js +9 -0
- package/styles/fluent2-lite.css +4 -4
- package/styles/fluent2.css +8 -8
- package/styles/input/_bigger.scss +18 -2
- package/styles/input/_layout.scss +19 -2
- package/styles/input/fluent2.css +8 -8
- package/styles/input/tailwind3.css +8 -8
- package/styles/tailwind3-lite.css +4 -4
- package/styles/tailwind3.css +8 -8
|
@@ -38,6 +38,7 @@ var Input;
|
|
|
38
38
|
(function (Input) {
|
|
39
39
|
var floatType;
|
|
40
40
|
var isBindClearAction = true;
|
|
41
|
+
var resizeHandlers = new Map();
|
|
41
42
|
/**
|
|
42
43
|
* Create a wrapper to input element with multiple span elements and set the basic properties to input based components.
|
|
43
44
|
* ```
|
|
@@ -459,6 +460,11 @@ var Input;
|
|
|
459
460
|
_internalRipple(false, null, args.buttons);
|
|
460
461
|
}
|
|
461
462
|
unwireFloatingEvents(args.element);
|
|
463
|
+
var resizeHandler = resizeHandlers.get(args.element);
|
|
464
|
+
if (resizeHandler) {
|
|
465
|
+
window.removeEventListener('resize', resizeHandler);
|
|
466
|
+
resizeHandlers.delete(args.element);
|
|
467
|
+
}
|
|
462
468
|
if (!isNullOrUndefined(args.element)) {
|
|
463
469
|
delete args.element.__eventHandlers;
|
|
464
470
|
if (args.element.classList.contains(CLASSNAMES.INPUT)) {
|
|
@@ -578,10 +584,30 @@ var Input;
|
|
|
578
584
|
* @param {HTMLElement} container - The parent element which is need to get the label span to calculate width
|
|
579
585
|
*/
|
|
580
586
|
function calculateWidth(element, container, moduleName) {
|
|
587
|
+
if (moduleName !== 'multiselect' && element && container && !resizeHandlers.has(element)) {
|
|
588
|
+
var resizeHandler_1 = function () {
|
|
589
|
+
if (!document.documentElement.contains(container)) {
|
|
590
|
+
window.removeEventListener('resize', resizeHandler_1);
|
|
591
|
+
resizeHandlers.delete(element);
|
|
592
|
+
return;
|
|
593
|
+
}
|
|
594
|
+
calculateWidth(element, container, moduleName);
|
|
595
|
+
};
|
|
596
|
+
resizeHandlers.set(element, resizeHandler_1);
|
|
597
|
+
window.addEventListener('resize', resizeHandler_1);
|
|
598
|
+
}
|
|
581
599
|
if (moduleName !== 'multiselect' && !_isElementVisible(element)) {
|
|
582
600
|
return;
|
|
583
601
|
}
|
|
584
602
|
var elementWidth = moduleName === 'multiselect' ? element : element.clientWidth - parseInt(getComputedStyle(element, null).getPropertyValue('padding-left'), 10);
|
|
603
|
+
if (moduleName !== 'multiselect' && element && container) {
|
|
604
|
+
var iconWidth_1 = 0;
|
|
605
|
+
var icons = container.getElementsByClassName('e-input-group-icon');
|
|
606
|
+
Array.from(icons).forEach(function (icon) {
|
|
607
|
+
iconWidth_1 += icon.clientWidth + parseInt(getComputedStyle(icon, null).getPropertyValue('margin-right'), 10);
|
|
608
|
+
});
|
|
609
|
+
elementWidth = elementWidth + (iconWidth_1 - parseInt(getComputedStyle(element, null).getPropertyValue('padding-left'), 10));
|
|
610
|
+
}
|
|
585
611
|
if (!isNullOrUndefined(container) && !isNullOrUndefined(container.getElementsByClassName('e-float-text-content')[0])) {
|
|
586
612
|
if (container.getElementsByClassName('e-float-text-content')[0].classList.contains('e-float-text-overflow')) {
|
|
587
613
|
container.getElementsByClassName('e-float-text-content')[0].classList.remove('e-float-text-overflow');
|
|
@@ -1616,6 +1642,8 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
|
|
|
1616
1642
|
EventHandler.add(this.formEle, 'reset', this.resetFormHandler, this);
|
|
1617
1643
|
}
|
|
1618
1644
|
}
|
|
1645
|
+
this.resizeHandler = this.windowResize.bind(this);
|
|
1646
|
+
window.addEventListener('resize', this.resizeHandler);
|
|
1619
1647
|
};
|
|
1620
1648
|
NumericTextBox.prototype.wireSpinBtnEvents = function () {
|
|
1621
1649
|
/* bind spin button events */
|
|
@@ -1638,6 +1666,10 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
|
|
|
1638
1666
|
if (this.formEle) {
|
|
1639
1667
|
EventHandler.remove(this.formEle, 'reset', this.resetFormHandler);
|
|
1640
1668
|
}
|
|
1669
|
+
if (this.resizeHandler) {
|
|
1670
|
+
window.removeEventListener('resize', this.resizeHandler);
|
|
1671
|
+
this.resizeHandler = null;
|
|
1672
|
+
}
|
|
1641
1673
|
};
|
|
1642
1674
|
NumericTextBox.prototype.unwireSpinBtnEvents = function () {
|
|
1643
1675
|
/* unbind spin button events */
|
|
@@ -2163,6 +2195,9 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
|
|
|
2163
2195
|
}
|
|
2164
2196
|
this.cancelEvent(event);
|
|
2165
2197
|
};
|
|
2198
|
+
NumericTextBox.prototype.windowResize = function () {
|
|
2199
|
+
this.updateFloatLabelOverflowWidth();
|
|
2200
|
+
};
|
|
2166
2201
|
NumericTextBox.prototype.focusHandler = function (event) {
|
|
2167
2202
|
var _this = this;
|
|
2168
2203
|
clearTimeout(selectionTimeOut);
|
|
@@ -15753,6 +15788,8 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
|
|
|
15753
15788
|
EventHandler.add(this.formElement, 'reset', this.resetForm, this);
|
|
15754
15789
|
}
|
|
15755
15790
|
this.bindClearEvent();
|
|
15791
|
+
this.resizeHandler = this.windowResize.bind(this);
|
|
15792
|
+
window.addEventListener('resize', this.resizeHandler);
|
|
15756
15793
|
};
|
|
15757
15794
|
TextArea.prototype.unWireEvents = function () {
|
|
15758
15795
|
EventHandler.remove(this.element, 'focus', this.focusHandler);
|
|
@@ -15763,6 +15800,10 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
|
|
|
15763
15800
|
if (this.isForm) {
|
|
15764
15801
|
EventHandler.remove(this.formElement, 'reset', this.resetForm);
|
|
15765
15802
|
}
|
|
15803
|
+
if (this.resizeHandler) {
|
|
15804
|
+
window.removeEventListener('resize', this.resizeHandler);
|
|
15805
|
+
this.resizeHandler = null;
|
|
15806
|
+
}
|
|
15766
15807
|
};
|
|
15767
15808
|
/**
|
|
15768
15809
|
* Removes the component from the DOM and detaches all its related event handlers.
|
|
@@ -15801,6 +15842,9 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
|
|
|
15801
15842
|
}
|
|
15802
15843
|
_super.prototype.destroy.call(this);
|
|
15803
15844
|
};
|
|
15845
|
+
TextArea.prototype.windowResize = function () {
|
|
15846
|
+
this.updateFloatLabelOverflowWidth();
|
|
15847
|
+
};
|
|
15804
15848
|
TextArea.prototype.focusHandler = function (args) {
|
|
15805
15849
|
var eventArgs = {
|
|
15806
15850
|
container: this.textareaWrapper.container,
|