@aqua-ds/web-components
Version:
AquaDS Web Components
245 lines (240 loc) • 17.6 kB
JavaScript
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { n as numbro$1 } from './numbro.js';
import { e as emitEvent } from './eventEmitter.js';
import { L as Label } from './label.js';
import { U as UniqueIdGenerator } from './uidGenerator.js';
import { S as Size, d as defineCustomElement$5 } from './aq-button2.js';
import { d as defineCustomElement$4 } from './aq-helper-text2.js';
import { d as defineCustomElement$3 } from './aq-label2.js';
import { d as defineCustomElement$2 } from './aq-tooltip2.js';
const aqNumberFieldCss = ".aq-number-field{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:var(--spacing-size-big);border-radius:var(--spacing-size-minor)}.aq-number-field--plain:not(.aq-number-field--error),.aq-number-field--plain:not(:hover) .aq-number-field__input{border-color:transparent}.aq-number-field--plain .aq-number-field__input:hover{border-bottom-color:var(--color-paper-light);border-top-color:var(--color-paper-light);border-left-color:transparent;border-right-color:transparent}.aq-number-field--error .aq-number-field__input{border:var(--spacing-size-basic) solid var(--color-danger-base) !important}.aq-number-field--error .aq-number-field__right-button-set{margin-left:var(--spacing-size-basic)}.aq-number-field--readonly{pointer-events:none;background-color:transparent;padding-left:0}.aq-number-field--disabled{color:var(--color-paper-dark);pointer-events:none;background-color:var(--color-paper-lighter)}.aq-number-field .aq-button{position:relative;font-size:var(--font-size-m);padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:background-color 0.2s, border 0s, -webkit-box-shadow 0.3s;transition:background-color 0.2s, border 0s, -webkit-box-shadow 0.3s;transition:box-shadow 0.3s, background-color 0.2s, border 0s;transition:box-shadow 0.3s, background-color 0.2s, border 0s, -webkit-box-shadow 0.3s;width:var(--spacing-size-big)}.aq-number-field .aq-button.is-outline{border-color:var(--color-paper-light)}.aq-number-field .aq-button:focus{background-color:transparent}.aq-number-field .aq-button:focus,.aq-number-field .aq-button:active{z-index:3}.aq-number-field__left-button .aq-button{border-radius:var(--spacing-size-minor) 0px 0px var(--spacing-size-minor)}.aq-number-field__right-button .aq-button{border-radius:0px var(--spacing-size-minor) var(--spacing-size-minor) 0px}.aq-number-field__right-button-set{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around}.aq-number-field__right-button-set .aq-button{height:100%;display:-ms-flexbox;display:flex}.aq-number-field__up-button{height:50%}.aq-number-field__up-button .aq-button{border-radius:0 var(--spacing-size-minor) 0 0}.aq-number-field__up-button .aq-button:not(:hover){border-bottom:0;padding-bottom:var(--spacing-size-basic)}.aq-number-field--plain:hover .aq-number-field__up-button .aq-button.is-plain{border-color:var(--color-paper-light)}.aq-number-field__down-button{height:50%}.aq-number-field__down-button .aq-button{border-radius:0 0 4px 0}.aq-number-field__down-button .aq-button:not(:hover){border-top:0;padding-top:var(--spacing-size-basic)}.aq-number-field--plain:hover .aq-number-field__down-button .aq-button.is-plain{border-color:var(--color-paper-light)}.aq-number-field__icon-button{margin-right:var(--spacing-size-basic)}.aq-number-field__icon-button .aq-button{border-radius:var(--spacing-size-minor) 0px 0px var(--spacing-size-minor);pointer-events:none}.aq-number-field--plain:hover .aq-number-field__icon-button .aq-button.is-plain{border-color:var(--color-paper-light)}.aq-number-field__left-button,.aq-number-field--plain:hover .aq-number-field__left-button .aq-button.is-plain,.aq-number-field__left-button .aq-button.is-outline:not(:hover,:focus,:active){border-right:0;padding-right:var(--spacing-size-basic);border-top-color:var(--color-paper-light);border-left-color:var(--color-paper-light);border-bottom-color:var(--color-paper-light)}.aq-number-field__right-button,.aq-number-field--plain:hover .aq-number-field__right-button .aq-button.is-plain,.aq-number-field__right-button .aq-button.is-outline:not(:hover,:focus,:active){border-left:0;padding-left:var(--spacing-size-basic);border-top-color:var(--color-paper-light);border-right-color:var(--color-paper-light);border-bottom-color:var(--color-paper-light)}.aq-number-field__input{position:relative;font-size:var(--font-size-s);font-family:var(--font-family-basic);color:var(--color-ink-lighter);line-height:var(--font-line-height-7);margin-left:calc(-1 * var(--spacing-size-basic));margin-right:calc(-1 * var(--spacing-size-basic));background:var(--color-white);-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;-ms-flex:0 1 auto;flex:0 1 auto;resize:none;height:var(--spacing-size-big);width:84px;outline:none;text-align:center;-webkit-transition:border 0.3s, -webkit-box-shadow 0.3s;transition:border 0.3s, -webkit-box-shadow 0.3s;transition:border 0.3s, box-shadow 0.3s;transition:border 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s;border-width:var(--spacing-size-basic);border-style:solid;border-bottom-color:var(--color-paper-light);border-top-color:var(--color-paper-light);border-left:0;border-right:0;-moz-appearance:textfield}.aq-number-field__input[disabled]{color:var(--color-paper-dark);background-color:var(--color-paper-lighter);border:var(--spacing-size-basic) solid var(--color-paper-light);pointer-events:none;margin-left:calc(-1 * var(--spacing-size-small))}.aq-number-field__input[disabled]:not(.aq-number-field__input--manual-disabled){border-radius:var(--spacing-size-minor);width:146px}.aq-number-field__input[readonly]{background-color:transparent;border-color:transparent;pointer-events:none;text-align:left;color:var(--color-ink-base)}.aq-number-field__input:hover{-webkit-box-shadow:var(--shadow-basic);box-shadow:var(--shadow-basic);border-left-color:var(--color-paper-light);border-right-color:var(--color-paper-light)}.aq-number-field__input:focus,.aq-number-field__input:active{-webkit-box-shadow:var(--shadow-focus);box-shadow:var(--shadow-focus);z-index:4}.aq-number-field__input::-webkit-outer-spin-button,.aq-number-field__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.aq-number-field__label{display:block;margin-bottom:var(--spacing-size-minor);line-height:var(--font-line-height-7)}.aq-number-field__footer-container{margin-top:var(--spacing-size-minor)}";
const AqNumberField$1 = /*@__PURE__*/ proxyCustomElement(class AqNumberField extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.value = '0';
this.format = { mantissa: 0 };
this.size = Size.LARGE;
this.helperText = '';
this.placeholder = '0';
this.isDisabled = false;
this.isReadonly = false;
this.isPlain = false;
this.isError = false;
this.step = 1;
this.minValue = -5e4;
this.maxValue = 50000;
this.strictLimitValue = false;
this.isManualInputAllowed = true;
// Label props
this.label = '';
this.info = '';
this.tooltipWidth = '';
this.isRequired = false;
// "small" variant props
this.icon = 'aq-icon-line-spacing';
this.leftButtonTooltip = '';
this.leftButtonTooltipWidth = '';
this.hasFocus = false;
this.localValue = '';
this.labelHelper = Label(this);
}
onValueChange() {
this.handleChange({ value: this.value });
emitEvent('change', this.hostElement, this.detail);
emitEvent('input', this.hostElement, this.detail);
}
componentDidLoad() {
this.idNumberField = !this.idNumberField ? new UniqueIdGenerator().generateId() : this.idNumberField;
this.setFormat();
}
async setFormat(format) {
const currentFormat = format || this.format;
this.format = typeof currentFormat === 'string' ? { ...this.parseFormatString(currentFormat) } : { ...currentFormat };
this.value = this.formatValue(this.value);
}
async increment() {
this.incrementValue();
}
async decrease() {
this.decreaseValue();
}
parseFormatString(format) {
try {
const quotedKeys = format.replace(/([{,]\s*)(\w+)\s*:/g, '$1"$2":');
const quotedValues = quotedKeys.replace(/:\s*([\w-]+)/g, (_, value) => {
if (/^(true|false|null|\d+(\.\d+)?)$/.test(value)) {
return `: ${value}`;
}
return `: "${value}"`;
});
return JSON.parse(quotedValues);
}
catch (error) {
console.error('Invalid format string:', format);
return {};
}
}
formatValue(value) {
const localValue = numbro$1(value).value();
return numbro$1(localValue).format(this.format);
}
getHasError() {
return this.isError && !this.isDisabled && !this.isReadonly;
}
renderRightContent() {
return this.size === Size.LARGE ? (h("aq-button", { onClick: () => this.incrementValue(), class: "aq-number-field__right-button", isDisabled: this.isDisabled, isPlain: this.isPlain, isOutline: !this.isPlain }, h("em", { class: "aq-icon-chevron-up" }))) : (h("div", { class: "aq-number-field__right-button-set" }, h("aq-button", { onClick: () => this.incrementValue(), class: "aq-number-field__up-button", isDisabled: this.isDisabled, isPlain: this.isPlain, isOutline: !this.isPlain }, h("em", { class: "aq-icon-chevron-up" })), h("aq-button", { onClick: () => this.decreaseValue(), class: "aq-number-field__down-button", isDisabled: this.isDisabled, isPlain: this.isPlain, isOutline: !this.isPlain }, h("em", { class: "aq-icon-chevron-down" }))));
}
incrementValue() {
const addedVal = numbro$1(this.value).add(this.step);
let newVal = addedVal.value();
newVal = this.validateMinMaxValue(newVal);
this.value = this.formatValue(newVal);
}
decreaseValue() {
const addedVal = numbro$1(this.value).subtract(this.step);
let newVal = addedVal.value();
newVal = this.validateMinMaxValue(newVal);
this.value = this.formatValue(newVal);
}
renderLeftContent() {
return this.size === Size.LARGE ? (h("aq-button", { onClick: () => this.decreaseValue(), class: "aq-number-field__left-button", isDisabled: this.isDisabled, isPlain: this.isPlain, isOutline: !this.isPlain }, h("em", { class: "aq-icon-chevron-down" }))) : (h("span", null, this.leftButtonTooltip.length > 0 && (h("aq-tooltip", { config: { placement: 'top', maxWidth: this.leftButtonTooltipWidth } }, h("span", null, this.leftButtonTooltip))), h("aq-button", { class: "aq-number-field__icon-button", isDisabled: this.isDisabled, isPlain: this.isPlain, isOutline: !this.isPlain }, h("em", { class: this.icon }))));
}
getContainerClass() {
return {
'aq-number-field--plain': this.isPlain,
'aq-number-field--focus': this.hasFocus,
'aq-number-field--error': this.getHasError(),
'aq-number-field--disabled': this.isDisabled && !this.isReadonly,
'aq-number-field--readonly': this.isReadonly,
'aq-number-field--small': this.size === `${Size.SMALL}`,
'aq-number-field': true,
};
}
getInputFieldClass() {
return {
'aq-number-field__input': true,
'aq-number-field__input--manual-disabled': !this.isManualInputAllowed,
};
}
validateMinMaxValue(localValue) {
let numberValue = numbro$1(localValue).value();
numberValue = Math.min(Math.max(numberValue, this.minValue), this.maxValue);
return numberValue;
}
getInputValue(inputValue) {
const inputValueAsNumber = numbro$1(inputValue).value();
return { inputValue, inputValueAsNumber };
}
/* Events */
handleInput(input, event) {
event.stopPropagation();
input.value = input.value.replace(/[^0-9.-]|(?!^)-|\.{2,}/g, '');
const localData = event?.data ? event?.data.replace(/[^0-9.-]|(?!^)-|\.{2,}/g, '') : '';
const { inputValue, inputValueAsNumber } = this.getInputValue(input.value);
const formattedValue = this.formatValue(inputValue);
if (!inputValue || !localData)
return;
this.value = inputValue;
this.localValue = inputValue;
this.detail = { value: this.value, formattedValue, rawValue: inputValue, valueAsNumber: inputValueAsNumber };
}
handleChange(input) {
let localInputValue = input?.value || '0';
const { inputValue, inputValueAsNumber } = this.getInputValue(localInputValue);
if (this.strictLimitValue)
localInputValue = this.validateMinMaxValue(inputValue).toString();
else
localInputValue = inputValue;
this.localValue = this.formatValue(localInputValue);
this.detail = { value: this.value, formattedValue: this.localValue, rawValue: localInputValue, valueAsNumber: inputValueAsNumber };
}
handleFocus(hasFocus) {
this.hasFocus = hasFocus;
if (!this.hasFocus && this.strictLimitValue) {
this.validateMinMaxValue(this.value).toString();
}
}
handleNewValue(e) {
e.stopPropagation();
this.value = this.formatValue(this.localValue);
}
render() {
return (h(Host, { key: 'c9bd9113ddd95b1188924df4586f787dca438851', style: { display: 'inline-flex', flexDirection: 'column' } }, this.labelHelper.isLabelVisible && (h("aq-label", { key: '33401dc72220545086854971763b4589046b7eec', class: "aq-number-field__label", for: this.name || this.idNumberField, ...this.labelHelper.bindsLabel }, h("span", { key: '993538a928df02c6a2b6f2b57f0941186dd93f2f', slot: "text" }, this.label))), h("div", { key: 'ffd088e3bc64d82382f947c43e36dfcd83daeedc', class: this.getContainerClass() }, !this.isReadonly && !this.isDisabled && this.renderLeftContent(), h("input", { key: 'e3c488951f13de4f091c8f3b816d7d980c53e118', class: this.getInputFieldClass(), placeholder: this.placeholder, id: this.idNumberField, name: this.name, type: "text", min: this.minValue, max: this.maxValue, value: this.localValue, disabled: this.isDisabled || !this.isManualInputAllowed, readonly: this.isReadonly, required: this.isRequired, onInput: (e) => this.handleInput(e.target, e), onChange: (e) => this.handleNewValue(e), onFocus: () => this.handleFocus(true), onBlur: () => this.handleFocus(false) }), !this.isReadonly && !this.isDisabled && this.renderRightContent()), this.helperText && (h("div", { key: '7e91c7b0ad0205f4d831c93f0c7a05cadf7e3a93', class: "aq-number-field__footer-container" }, h("aq-helper-text", { key: 'f776ec3f663f6e4198dbb61c494ccb7b18294908', isError: this.getHasError() }, h("span", { key: '5c9e1535487149b3d1e3b4a600baf23be65c5328', slot: "text" }, this.helperText))))));
}
get hostElement() { return this; }
static get watchers() { return {
"value": ["onValueChange"]
}; }
static get style() { return aqNumberFieldCss; }
}, [256, "aq-number-field", {
"value": [1537],
"format": [1040],
"size": [1],
"helperText": [1, "helper-text"],
"placeholder": [1],
"idNumberField": [1025, "id-number-field"],
"name": [1],
"isDisabled": [4, "is-disabled"],
"isReadonly": [4, "is-readonly"],
"isPlain": [4, "is-plain"],
"isError": [4, "is-error"],
"step": [2],
"minValue": [2, "min-value"],
"maxValue": [2, "max-value"],
"strictLimitValue": [4, "strict-limit-value"],
"isManualInputAllowed": [4, "is-manual-input-allowed"],
"label": [1],
"info": [1],
"tooltipWidth": [1, "tooltip-width"],
"isRequired": [4, "is-required"],
"icon": [1],
"leftButtonTooltip": [1, "left-button-tooltip"],
"leftButtonTooltipWidth": [1, "left-button-tooltip-width"],
"hasFocus": [32],
"localValue": [32],
"detail": [32],
"setFormat": [64],
"increment": [64],
"decrease": [64]
}, undefined, {
"value": ["onValueChange"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-number-field", "aq-button", "aq-helper-text", "aq-label", "aq-tooltip"];
components.forEach(tagName => { switch (tagName) {
case "aq-number-field":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqNumberField$1);
}
break;
case "aq-button":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "aq-helper-text":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "aq-label":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "aq-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const AqNumberField = AqNumberField$1;
const defineCustomElement = defineCustomElement$1;
export { AqNumberField, defineCustomElement };