dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
229 lines (228 loc) • 10.3 kB
JavaScript
import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as f, html as d } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as l } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as S } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { query as g } from "../../node_modules/@lit/reactive-element/decorators/query.js";
import { ifDefined as h } from "../../node_modules/lit-html/directives/if-defined.js";
import "../../localization/localization.js";
import y from "../icon/icon.component.js";
import V from "../icon-button/icon-button.component.js";
import { InputBaseElement as b } from "../input/input-base-element.js";
import v from "../spinner/spinner.component.js";
import w from "../stack/stack.component.js";
import { translate as c } from "../../node_modules/lit-i18n/src/lit-i18n.js";
var k = Object.defineProperty, n = (p, t, e, a) => {
for (var i = void 0, r = p.length - 1, u; r >= 0; r--)
(u = p[r]) && (i = u(t, e, i) || i);
return i && k(t, e, i), i;
};
const o = class o extends b {
constructor() {
super(), this.thousandSeparator = "", this.decimalSeparator = ",", this.allowNegative = "true", this.allowDecimal = "true", this.hideControls = !1, this.decrementButtonTestId = "number-input-decrement-button", this.incrementButtonTestId = "number-input-increment-button", this.formattedValue = "", this.valueSetInternally = !1, this.manualValueSet = !0, this.type = "text";
}
get _thousandSeparator() {
var t;
return (t = this.thousandSeparator) == null ? void 0 : t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}
firstUpdated(t) {
super.firstUpdated(t), this.inputMode = this.inputMode || (this.allowDecimal === "true" ? "decimal" : "numeric"), this.inputElement.addEventListener(
"input",
(e) => this.handleInput(e)
), this.inputElement.addEventListener(
"keydown",
(e) => this.handleKeydown(e)
), this.inputElement.addEventListener("blur", () => this.applyPadStart()), this.value !== void 0 && (this.formattedValue = this.getMaskedValue(this.value), this.inputElement.value = this.formattedValue, this.applyPadStart());
}
handleKeydown(t) {
this.disabled || this.readonly || (t.key === "ArrowUp" ? (t.preventDefault(), this._increment()) : t.key === "ArrowDown" ? (t.preventDefault(), this._decrement()) : (t.key === "e" || t.key === "E" || t.key === "+" || t.key === "-" && this.allowNegative !== "true") && t.preventDefault());
}
getMaskedValue(t) {
if (!t && t !== 0) return "";
let e = t;
if (typeof e == "number" && e.toString().includes(".") && (e = e.toString().replace(".", this.decimalSeparator)), this.allowNegative === "true" && t.toString().startsWith("-") ? e = "-" + this.getMaskedValue(t.toString().substring(1)) : this.allowNegative === "false" && t.toString().startsWith("-") && (e = t.toString().substring(1)), this.thousandSeparator) {
const a = e.toString().split(this.decimalSeparator);
a[0] = a[0].replace(
/\B(?=(\d{3})+(?!\d))/g,
this.thousandSeparator
), e = a.join(this.decimalSeparator);
}
if (this.allowDecimal === "true" && this.decimalScale !== void 0) {
const a = e.toString().split(this.decimalSeparator);
a[1] && (a[1] = a[1].slice(0, this.decimalScale), e = a.join(this.decimalSeparator));
} else this.allowDecimal === "false" && (e = e.toString().split(this.decimalSeparator)[0]);
return e.toString();
}
isBackspaceOrDelete(t) {
return t.inputType === "deleteContentBackward" || t.inputType === "deleteContentForward";
}
handleEmptyValue() {
this.valueSetInternally = !0, this.value = "", this.formattedValue = "", this.inputElement.value = "", this.emit("dds-change", {
value: "",
formattedValue: ""
});
}
createNumericRegex() {
if (this.allowDecimal === "true") {
const t = this.decimalSeparator.replace(
/[.*+?^${}()|[\]\\]/g,
"\\$&"
);
return this.allowNegative === "true" ? new RegExp(`^-?\\d*${t}?\\d*$`) : new RegExp(`^\\d*${t}?\\d*$`);
}
return this.allowNegative === "true" ? /^-?\d*$/ : /^\d*$/;
}
enforceDecimalScale(t) {
if (this.decimalScale === void 0 || this.allowDecimal !== "true")
return t;
const e = t.split(this.decimalSeparator);
return e[1] && e[1].length > this.decimalScale ? (e[1] = e[1].slice(0, this.decimalScale), e.join(this.decimalSeparator)) : t;
}
applyPadStart() {
if (!this.padStart || !this.formattedValue) return;
const t = this.formattedValue.padStart(this.padStart, "0");
this.formattedValue = t, this.inputElement.value = t;
}
convertToNumericValue(t) {
if (!t) return t;
const e = t.replace(this.decimalSeparator, "."), a = parseFloat(e);
return isNaN(a) ? t : a;
}
handleInput(t) {
const e = t.target;
let a = e.value;
if (this.thousandSeparator && (a = a.replace(new RegExp(this._thousandSeparator, "g"), "")), a === "") {
this.handleEmptyValue(), this.setValidity();
return;
}
if (this.allowNegative === "false" && a.includes("-")) {
e.value = a.replace("-", ""), this.formattedValue = a.replace("-", ""), this.setValidity();
return;
}
if (!this.createNumericRegex().test(a) && !this.isBackspaceOrDelete(t)) {
e.value = this.formattedValue, this.setValidity();
return;
}
a = this.enforceDecimalScale(a);
const r = this.convertToNumericValue(a);
this.valueSetInternally = !0, this.value = r, this.formattedValue = this.getMaskedValue(a), e.value = this.formattedValue, this.emit("dds-change", {
value: this.value,
formattedValue: this.formattedValue
}), this.setValidity();
}
updated(t) {
var e;
t.has("value") && (this.valueSetInternally || (this.formattedValue = this.getMaskedValue((e = this.value) != null ? e : "")), this.valueSetInternally = !1, this.inputElement.value = this.formattedValue, this.setValidity());
}
formResetCallback() {
super.formResetCallback(), this.formattedValue = this.getMaskedValue(this.value || ""), this.inputElement.value = this.formattedValue;
}
_decrement() {
var i, r;
if (this.disabled || this.readonly) return;
const t = this.value ? parseFloat(this.value.toString().replace(this._thousandSeparator, "")) : 0, e = typeof this.step == "number" ? this.step : parseFloat((r = (i = this.step) == null ? void 0 : i.toString()) != null ? r : "1");
let a = t - e;
this.min !== void 0 && a < this.min && (a = this.min), this.valueSetInternally = !0, this.value = a, this.formattedValue = this.getMaskedValue(a), this.inputElement.value = this.formattedValue, this.emit("dds-change", {
value: this.value,
formattedValue: this.formattedValue
});
}
_increment() {
var i, r;
if (this.disabled || this.readonly) return;
const t = this.value ? parseFloat(this.value.toString().replace(this.thousandSeparator, "")) : 0, e = typeof this.step == "number" ? this.step : parseFloat((r = (i = this.step) == null ? void 0 : i.toString()) != null ? r : "1");
let a = t + e;
this.max !== void 0 && a > this.max && (a = this.max), this.valueSetInternally = !0, this.value = a, this.formattedValue = this.getMaskedValue(a), this.inputElement.value = this.formattedValue, this.emit("dds-change", {
value: this.value,
formattedValue: this.formattedValue
});
}
render() {
return this.renderInput(
d` <span
part="postfix"
class=${m("input__addon-postfix number-input")}>
${!(this.disabled || this.readonly) && !this.hideControls ? d` <dap-ds-stack direction="row" tabindex="-1" spacing="300">
${this.loading ? d`<dap-ds-spinner size="lg"></dap-ds-spinner>` : f}
<dap-ds-icon-button
part="decrement-button"
data-testid=${this.decrementButtonTestId}
exportparts="base: decrement-button-base, content: decrement-button-content"
size=${h(this.size)}
=${this._decrement}
aria-label="${c("decrease")}"
.disabled=${this.disabled}>
<slot name="decrement-icon">
<dap-ds-icon
size="lg"
name="subtract-line"
part="decrement-icon"
exportparts="icon: decrement-icon, base: decrement-icon-base"></dap-ds-icon>
</slot>
</dap-ds-icon-button>
<dap-ds-icon-button
part="increment-button"
data-testid=${this.incrementButtonTestId}
exportparts="base: increment-button-base, content: increment-button-content"
size=${h(this.size)}
=${this._increment}
aria-label="${c("increase")}"
.disabled=${this.disabled}>
<slot name="increment-icon">
<dap-ds-icon
size="lg"
name="add-line"
part="increment-icon"
exportparts="icon: increment-icon, base: increment-icon-base"></dap-ds-icon>
</slot>
</dap-ds-icon-button>
</dap-ds-stack>` : ""}
</span>`
);
}
};
o.tagName = "dap-ds-number-input", o.dependencies = {
"dap-ds-stack": w,
"dap-ds-spinner": v,
"dap-ds-icon-button": V,
"dap-ds-icon": y
};
let s = o;
n([
g("input")
], s.prototype, "inputElement");
n([
l({ type: String })
], s.prototype, "thousandSeparator");
n([
l({ type: String })
], s.prototype, "decimalSeparator");
n([
l({ type: Number })
], s.prototype, "decimalScale");
n([
l({ type: String })
], s.prototype, "allowNegative");
n([
l({ type: String })
], s.prototype, "allowDecimal");
n([
l({ type: Boolean })
], s.prototype, "hideControls");
n([
l({ type: Number })
], s.prototype, "padStart");
n([
l()
], s.prototype, "decrementButtonTestId");
n([
l()
], s.prototype, "incrementButtonTestId");
n([
S()
], s.prototype, "formattedValue");
export {
s as default
};
//# sourceMappingURL=number-input.component.js.map