ng-devui
Version:
DevUI components based on Angular
503 lines (498 loc) • 32.8 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import * as i2 from '@angular/common';
import { DOCUMENT, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { forwardRef, EventEmitter, Component, Inject, Input, HostBinding, Output, ViewChild, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i1 from 'ng-devui/utils';
import { WithConfig } from 'ng-devui/utils';
import { fromEvent } from 'rxjs';
const INPUT_NUMBER_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => InputNumberComponent),
multi: true,
};
class InputNumberComponent {
get hasGlowStyle() {
return this.showGlowStyle;
}
set min(val) {
if (val || val === 0) {
this._min = val;
}
}
get min() {
return this._min;
}
set max(val) {
if (val || val === 0) {
this._max = val;
}
}
get max() {
return this._max;
}
constructor(cdr, devConfigService, el, renderer, doc) {
this.cdr = cdr;
this.devConfigService = devConfigService;
this.el = el;
this.renderer = renderer;
this.doc = doc;
this.step = 1;
this.disabled = false;
this.size = '';
this.autoFocus = false;
this.allowEmpty = false;
this.placeholder = '';
this.maxLength = 0;
this.styleType = 'default';
this.showGlowStyle = true;
this.afterValueChanged = new EventEmitter();
this.whileValueChanging = new EventEmitter();
this._min = Number.MIN_SAFE_INTEGER;
this._max = Number.MAX_SAFE_INTEGER;
this.disabledInc = false;
this.disabledDec = false;
this.onTouchedCallback = () => { };
this.onChangeCallback = (v) => { };
this.increaseValue = () => {
this.inDecreaseValue('increase');
};
this.decreaseValue = () => {
this.inDecreaseValue('decrease');
};
this.document = this.doc;
}
registerOnChange(fn) {
this.onChangeCallback = fn;
}
registerOnTouched(fn) {
this.onTouchedCallback = fn;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
this.toggleDisabled(isDisabled);
}
writeValue(newValue) {
this.lastEmittedValue = newValue;
this.setValue(this.ensureValueInRange(newValue));
}
valueMustBeValid(value) {
return !isNaN(typeof value !== 'number' ? parseFloat(value) : value);
}
clamp(min, n, max) {
// 兼容writeValue时的undefined
let currentValue = max !== undefined ? Math.min(n, max) : n;
currentValue = min !== undefined ? Math.max(min, currentValue) : currentValue;
return currentValue;
}
ensureValueInRange(value) {
let safeValue;
if (this.allowEmpty && (value === null || value === undefined)) {
safeValue = null;
}
else if (!this.valueMustBeValid(value)) {
safeValue = 0;
}
else {
let currentValue = value;
if (!value) {
currentValue = 0;
}
safeValue = this.clamp(this.min, currentValue, this.max);
}
return safeValue;
}
setValue(value) {
this.value = value;
this.lastValue = value;
if (this.allowEmpty && value === null) {
this.subscribeDecAction();
this.subscribeIncAction();
}
else {
if (!this.canDecrease()) {
this.unsubscribeDecAction();
}
else {
this.subscribeDecAction();
}
if (!this.canIncrease()) {
this.unsubscribeIncAction();
}
else {
this.subscribeIncAction();
}
}
this.renderer.setProperty(this.inputElement.nativeElement, 'value', value);
this.disabledDec = this.value === this.min;
this.disabledInc = this.value === this.max;
this.cdr.detectChanges();
}
ngAfterViewInit() {
this.registerListeners();
this.subscribeActions();
setTimeout(() => {
this.toggleDisabled(this.disabled);
if (!this.disabled) {
if (this.autoFocus) {
this.el.nativeElement.click();
this.inputElement.nativeElement.focus();
}
}
});
}
ngOnChanges(changes) {
if (Object.prototype.hasOwnProperty.call(changes, 'min') || Object.prototype.hasOwnProperty.call(changes, 'max')) {
this.checkRangeValues(this.min, this.max);
if (this.value < this.min) {
this.setValue(this.min);
}
else if (this.value > this.max) {
this.setValue(this.max);
}
}
}
ngOnDestroy() {
this.unsubscribeActions();
}
registerListeners() {
if (this.incButton && this.incButton.nativeElement) {
this.incListener = fromEvent(this.incButton.nativeElement, 'click');
}
if (this.decButton && this.decButton.nativeElement) {
this.decListener = fromEvent(this.decButton.nativeElement, 'click');
}
}
subscribeActions() {
this.subscribeIncAction();
this.subscribeDecAction();
}
subscribeIncAction() {
if (this.incListener && !this.incAction) {
this.incAction = this.incListener.subscribe(this.increaseValue);
}
}
subscribeDecAction() {
if (this.decListener && !this.decAction) {
this.decAction = this.decListener.subscribe(this.decreaseValue);
}
}
unsubscribeActions() {
this.unsubscribeIncAction();
this.unsubscribeDecAction();
}
unsubscribeIncAction() {
if (this.incListener && this.incAction) {
this.incAction.unsubscribe();
this.incAction = null;
this.disabledInc = true;
}
}
unsubscribeDecAction() {
if (this.incListener && this.decAction) {
this.decAction.unsubscribe();
this.decAction = null;
this.disabledDec = true;
}
}
inDecreaseValue(type) {
const canContinue = type === 'increase' ? this.canIncrease() : this.canDecrease();
if (canContinue) {
if (this.allowEmpty && (this.value === null || this.value === undefined)) {
this.updateValue(0);
}
else {
const decimals = this.getMaxDecimals(this.value);
const floatValue = type === 'increase' ? this.value + this.step : this.value - this.step;
if (this.matchReg(String(floatValue))) {
let value;
if (floatValue < 0) {
value = Math.ceil(floatValue * Number(`1e+${decimals}`) - Number('1e-12')) / Number(`1e+${decimals}`);
}
else {
value = Math.floor(floatValue * Number(`1e+${decimals}`) + Number('1e-12')) / Number(`1e+${decimals}`);
}
this.updateValue(value);
}
}
this.inputElement.nativeElement.focus();
}
}
matchReg(value) {
if (this.reg && !value.match(new RegExp(this.reg))) {
return false;
}
else {
return true;
}
}
canIncrease() {
if (this.allowEmpty && (this.value === null || this.value === undefined)) {
return this.min + this.step <= this.max;
}
else {
return this.value + this.step <= this.max;
}
}
canDecrease() {
if (this.allowEmpty && (this.value === null || this.value === undefined)) {
return this.min + this.step <= this.max;
}
else {
return this.value - this.step >= this.min;
}
}
toggleDisabled(disabled) {
if (disabled) {
this.unsubscribeActions();
}
else {
this.disabledDec = this.value === this.min;
this.disabledInc = this.value === this.max;
this.subscribeActions();
}
}
ensureValueIsValid(event) {
event.stopPropagation();
if (this.disabled) {
return;
}
const newValue = event.target.value;
const parseValue = parseFloat(newValue);
let result;
if (this.allowEmpty && newValue === '') {
result = null;
}
else if (!isNaN(parseValue)) {
result = parseValue;
}
else {
result = this.value;
}
result = this.ensureValueInRange(result);
this.notifyWhileValueChanging(result);
this.updateValue(result);
const blurEvent = new Event('blur', { bubbles: false, cancelable: true });
this.el.nativeElement.dispatchEvent(blurEvent);
this.onTouchedCallback();
}
checkRangeValues(minValue, maxValue) {
if (maxValue < minValue) {
throw new Error(`max value must be greater than or equal to min value`);
}
}
getDecimals(value) {
const valueString = value.toString();
const integerLength = valueString.indexOf('.') + 1;
return valueString.length - integerLength;
}
getMaxDecimals(currentValue) {
const stepPrecision = this.getDecimals(this.step);
const currentValuePrecision = this.getDecimals(currentValue);
if (!currentValue) {
return stepPrecision;
}
if (this.decimalLimit !== undefined && this.decimalLimit !== null) {
return this.decimalLimit;
}
return Math.max(currentValuePrecision, stepPrecision);
}
handleKeyDown(event) {
this.handleBackspace(event);
this.keyBoardControl(event);
}
protectInput(event) {
if (this.disabled) {
return;
}
const target = event.target;
let value = target.value;
let input;
let selectionStart = target.selectionStart;
let selectionEnd = target.selectionEnd;
if (event.clipboardData) {
input = event.clipboardData.getData('text');
value = value.substring(0, selectionStart) + input + value.substring(selectionEnd);
event.preventDefault();
}
else {
input = event.data;
if (input === undefined || input === null) {
return;
}
selectionStart = selectionStart - input.length;
selectionEnd = selectionEnd - input.length;
}
if (this.maxLength && value.length > this.maxLength) {
this.setValue(this.lastValue);
return;
}
if (!this.matchReg(value)) {
this.setValue(this.lastValue);
return;
}
else if (value === '-' ||
value.match(/^\s*(-|\+)?\d+\.$/) ||
value.match(/^\s*(-|\+)?\d+\.[0-9]*0$/) ||
value.match(/^\s*(-|\+)0+$/)) {
// indeterminate state
return;
}
else if (value.match(/^\s*(-|\+)?(\d+|(\d*(\.\d*)))$/)) {
if (this.decimalLimit !== undefined && this.decimalLimit !== null) {
if (value < 0) {
value = Math.ceil(value * Number(`1e+${this.decimalLimit}`) - Number('1e-12')) / Number(`1e+${this.decimalLimit}`);
}
else {
value = Math.floor(value * Number(`1e+${this.decimalLimit}`) + Number('1e-12')) / Number(`1e+${this.decimalLimit}`);
}
}
value = parseFloat(value);
if (!isNaN(value)) {
this.setValue(value);
this.notifyWhileValueChanging(value);
// updateValue会使输入游标跳到最后，这里设置输入游标归位
if (input !== null) {
setTimeout(() => {
target.setSelectionRange(selectionStart + input.length, selectionStart + input.length);
}, 0);
}
return;
}
}
else {
this.setValue(value.slice(0, value.length - 1));
setTimeout(() => {
target.setSelectionRange(selectionStart, selectionStart);
}, 0);
}
}
notifyValueChange() {
this.afterValueChanged.emit(this.value);
this.onChangeCallback(this.value);
}
notifyWhileValueChanging(value) {
this.whileValueChanging.emit(value);
}
updateValue(value) {
if (this.disabled) {
return;
}
this.setValue(value);
if (this.lastEmittedValue !== value) {
this.lastEmittedValue = value;
this.notifyValueChange();
}
}
handleBackspace(event) {
if (event.key === 'Backspace') {
const target = event.target;
const oldValue = target.value;
const selectionStart = target.selectionStart;
const selectionEnd = target.selectionEnd;
let newValue = oldValue.substring(0, selectionStart - 1) + oldValue.substring(selectionEnd);
if (newValue !== '-' && !newValue.match(/^\s*(-|\+)?\d+\.$/)) {
newValue = newValue === '' ? null : newValue;
this.notifyWhileValueChanging(newValue);
}
}
}
keyBoardControl(event) {
const key = event.key;
if (key === 'ArrowUp' || key === 'Up') {
event.preventDefault();
this.increaseValue();
}
else if (key === 'ArrowDown' || key === 'Down') {
event.preventDefault();
this.decreaseValue();
}
else if (key === 'Enter') {
this.inputElement.nativeElement.blur();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputNumberComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DevConfigService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InputNumberComponent, selector: "d-input-number", inputs: { step: "step", disabled: "disabled", size: "size", decimalLimit: "decimalLimit", autoFocus: "autoFocus", allowEmpty: "allowEmpty", placeholder: "placeholder", maxLength: "maxLength", reg: "reg", styleType: "styleType", showGlowStyle: "showGlowStyle", min: "min", max: "max" }, outputs: { afterValueChanged: "afterValueChanged", whileValueChanging: "whileValueChanging" }, host: { properties: { "class.devui-glow-style": "this.hasGlowStyle" } }, providers: [INPUT_NUMBER_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "incButton", first: true, predicate: ["incButton"], descendants: true, static: true }, { propertyName: "decButton", first: true, predicate: ["decButton"], descendants: true, static: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"input-control-buttons\"\n [ngClass]=\"{\n disabled: disabled,\n 'devui-input-number-lg': size === 'lg',\n 'devui-input-number-sm': size === 'sm',\n 'devui-gray-style': styleType === 'gray'\n }\"\n>\n <span class=\"input-control-button input-control-inc\" [ngClass]=\"{ disabled: disabledInc }\" #incButton>\n <svg\n class=\"devui-svg-icon-arrow\"\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </svg>\n </span>\n <span class=\"input-control-button input-control-dec\" [ngClass]=\"{ disabled: disabledDec }\" #decButton>\n <svg\n class=\"devui-svg-icon-arrow\"\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </svg>\n </span>\n</div>\n<div\n class=\"input-container\"\n [ngClass]=\"{\n 'devui-input-number-lg': size === 'lg',\n 'devui-input-number-sm': size === 'sm',\n 'devui-gray-style': styleType === 'gray'\n }\"\n>\n <input\n class=\"input-box devui-input\"\n [ngClass]=\"{ disabled: disabled }\"\n [placeholder]=\"placeholder\"\n [attr.readonly]=\"disabled ? '' : null\"\n (keydown)=\"handleKeyDown($event)\"\n (input)=\"protectInput($event)\"\n (blur)=\"ensureValueIsValid($event)\"\n (paste)=\"protectInput($event)\"\n #inputElement\n />\n</div>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}:host{display:inline-block;position:relative;width:80px}:host .disabled{cursor:not-allowed}:host:hover .input-box:not(.disabled){padding-right:24px}:host:hover .input-control-buttons:not(.disabled){display:flex}:host:focus-within .input-box:not(.disabled){border:1px solid var(--devui-form-control-line-active, #0a59f7);padding-right:24px}:host:focus-within .input-control-buttons:not(.disabled){border-color:var(--devui-form-control-line-active, #0a59f7)}:host:focus-within .input-control-buttons:not(.disabled){display:flex}:host .input-box{box-sizing:border-box;padding:4px 8px;font-size:var(--devui-font-size, 12px);vertical-align:middle;border-radius:var(--devui-border-radius, 2px);outline:none;width:100%;line-height:20px;height:28px;border-width:1px;border-style:solid}:host .input-box:not(.disabled){background-color:var(--devui-base-bg, #ffffff);border-color:var(--devui-line, #dbdbdb);color:var(--devui-text, #191919)}:host .input-control-buttons{display:none;position:absolute;right:0;width:22px;height:100%;flex-direction:column;justify-content:center;align-items:center;border:1px solid transparent;border-left-color:var(--devui-line, #dbdbdb);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;line-height:100%;border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}:host .input-control-buttons.disabled{border-left-color:var(--devui-disabled-line, #e6e6e6)}:host .input-control-buttons .input-control-button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:50%;line-height:50%;border-width:0 1px;transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));display:flex;justify-content:center;align-items:center}:host .input-control-buttons .input-control-button.input-control-inc svg{position:relative;top:2px;transform:rotate(180deg)}:host .input-control-buttons .input-control-button.input-control-dec svg{position:relative;bottom:2px}:host .input-control-buttons .input-control-button svg path{fill:var(--devui-text-weak, #333333)}:host .input-control-buttons .input-control-button:not(.disabled){cursor:pointer}:host .input-control-buttons .input-control-button:not(.disabled):hover>svg path{fill:var(--devui-icon-fill-active-hover, #000000)}:host .input-control-buttons .input-control-button.disabled>svg path{fill:var(--devui-disabled-text, #c2c2c2)}.devui-input-number-lg>.input-box{font-size:var(--devui-font-size-lg, 14px);line-height:24px;height:46px}::ng-deep .devui-input-number-lg.input-control-buttons .input-control-button .devui-svg-icon-arrow{width:16px;height:16px}.devui-input-number-sm>.input-box{font-size:var(--devui-font-size-sm, 12px);line-height:18px;height:26px}.devui-input-number-sm ::ng-deep .input-control-buttons .input-control-button:first-child .devui-svg-icon-arrow{width:14px;height:14px}.devui-input-number-sm ::ng-deep .input-control-buttons .input-control-button:last-child .devui-svg-icon-arrow{width:13px;height:13px;left:0}.input-container{line-height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
}
__decorate([
WithConfig(),
__metadata("design:type", Object)
], InputNumberComponent.prototype, "styleType", void 0);
__decorate([
WithConfig(),
__metadata("design:type", Object)
], InputNumberComponent.prototype, "showGlowStyle", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputNumberComponent, decorators: [{
type: Component,
args: [{ selector: 'd-input-number', providers: [INPUT_NUMBER_CONTROL_VALUE_ACCESSOR], preserveWhitespaces: false, template: "<div\n class=\"input-control-buttons\"\n [ngClass]=\"{\n disabled: disabled,\n 'devui-input-number-lg': size === 'lg',\n 'devui-input-number-sm': size === 'sm',\n 'devui-gray-style': styleType === 'gray'\n }\"\n>\n <span class=\"input-control-button input-control-inc\" [ngClass]=\"{ disabled: disabledInc }\" #incButton>\n <svg\n class=\"devui-svg-icon-arrow\"\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </svg>\n </span>\n <span class=\"input-control-button input-control-dec\" [ngClass]=\"{ disabled: disabledDec }\" #decButton>\n <svg\n class=\"devui-svg-icon-arrow\"\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </svg>\n </span>\n</div>\n<div\n class=\"input-container\"\n [ngClass]=\"{\n 'devui-input-number-lg': size === 'lg',\n 'devui-input-number-sm': size === 'sm',\n 'devui-gray-style': styleType === 'gray'\n }\"\n>\n <input\n class=\"input-box devui-input\"\n [ngClass]=\"{ disabled: disabled }\"\n [placeholder]=\"placeholder\"\n [attr.readonly]=\"disabled ? '' : null\"\n (keydown)=\"handleKeyDown($event)\"\n (input)=\"protectInput($event)\"\n (blur)=\"ensureValueIsValid($event)\"\n (paste)=\"protectInput($event)\"\n #inputElement\n />\n</div>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}:host{display:inline-block;position:relative;width:80px}:host .disabled{cursor:not-allowed}:host:hover .input-box:not(.disabled){padding-right:24px}:host:hover .input-control-buttons:not(.disabled){display:flex}:host:focus-within .input-box:not(.disabled){border:1px solid var(--devui-form-control-line-active, #0a59f7);padding-right:24px}:host:focus-within .input-control-buttons:not(.disabled){border-color:var(--devui-form-control-line-active, #0a59f7)}:host:focus-within .input-control-buttons:not(.disabled){display:flex}:host .input-box{box-sizing:border-box;padding:4px 8px;font-size:var(--devui-font-size, 12px);vertical-align:middle;border-radius:var(--devui-border-radius, 2px);outline:none;width:100%;line-height:20px;height:28px;border-width:1px;border-style:solid}:host .input-box:not(.disabled){background-color:var(--devui-base-bg, #ffffff);border-color:var(--devui-line, #dbdbdb);color:var(--devui-text, #191919)}:host .input-control-buttons{display:none;position:absolute;right:0;width:22px;height:100%;flex-direction:column;justify-content:center;align-items:center;border:1px solid transparent;border-left-color:var(--devui-line, #dbdbdb);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;line-height:100%;border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}:host .input-control-buttons.disabled{border-left-color:var(--devui-disabled-line, #e6e6e6)}:host .input-control-buttons .input-control-button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:50%;line-height:50%;border-width:0 1px;transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));display:flex;justify-content:center;align-items:center}:host .input-control-buttons .input-control-button.input-control-inc svg{position:relative;top:2px;transform:rotate(180deg)}:host .input-control-buttons .input-control-button.input-control-dec svg{position:relative;bottom:2px}:host .input-control-buttons .input-control-button svg path{fill:var(--devui-text-weak, #333333)}:host .input-control-buttons .input-control-button:not(.disabled){cursor:pointer}:host .input-control-buttons .input-control-button:not(.disabled):hover>svg path{fill:var(--devui-icon-fill-active-hover, #000000)}:host .input-control-buttons .input-control-button.disabled>svg path{fill:var(--devui-disabled-text, #c2c2c2)}.devui-input-number-lg>.input-box{font-size:var(--devui-font-size-lg, 14px);line-height:24px;height:46px}::ng-deep .devui-input-number-lg.input-control-buttons .input-control-button .devui-svg-icon-arrow{width:16px;height:16px}.devui-input-number-sm>.input-box{font-size:var(--devui-font-size-sm, 12px);line-height:18px;height:26px}.devui-input-number-sm ::ng-deep .input-control-buttons .input-control-button:first-child .devui-svg-icon-arrow{width:14px;height:14px}.devui-input-number-sm ::ng-deep .input-control-buttons .input-control-button:last-child .devui-svg-icon-arrow{width:13px;height:13px;left:0}.input-container{line-height:100%}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DevConfigService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }], propDecorators: { step: [{
type: Input
}], disabled: [{
type: Input
}], size: [{
type: Input
}], decimalLimit: [{
type: Input
}], autoFocus: [{
type: Input
}], allowEmpty: [{
type: Input
}], placeholder: [{
type: Input
}], maxLength: [{
type: Input
}], reg: [{
type: Input
}], styleType: [{
type: Input
}], showGlowStyle: [{
type: Input
}], hasGlowStyle: [{
type: HostBinding,
args: ['class.devui-glow-style']
}], afterValueChanged: [{
type: Output
}], whileValueChanging: [{
type: Output
}], incButton: [{
type: ViewChild,
args: ['incButton', { static: true }]
}], decButton: [{
type: ViewChild,
args: ['decButton', { static: true }]
}], inputElement: [{
type: ViewChild,
args: ['inputElement', { static: true }]
}], min: [{
type: Input
}], max: [{
type: Input
}] } });
class InputNumberModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputNumberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: InputNumberModule, declarations: [InputNumberComponent], imports: [CommonModule,
FormsModule], exports: [InputNumberComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputNumberModule, imports: [CommonModule,
FormsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputNumberModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule,
FormsModule
],
exports: [InputNumberComponent],
declarations: [InputNumberComponent],
providers: [],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { InputNumberComponent, InputNumberModule };
//# sourceMappingURL=ng-devui-input-number.mjs.map