@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
409 lines (402 loc) • 35.2 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-8313e72a.js');
const dom = require('./dom-117fbac1.js');
const key = require('./key-f470de4c.js');
const locale = require('./locale-d81a46b2.js');
const form = require('./form-432ae178.js');
const number = require('./number-2eec0d86.js');
require('./guid-4637ad8f.js');
const INPUT_TYPE_ICONS = {
tel: "phone",
password: "lock",
email: "email-address",
date: "calendar",
time: "clock",
search: "search"
};
const SLOTS = {
action: "action"
};
const calciteInputCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}.sc-calcite-input:root{--calcite-popper-transition:150ms ease-in-out}[hidden].sc-calcite-input-h{display:none}[scale=s].sc-calcite-input-h textarea.sc-calcite-input,[scale=s].sc-calcite-input-h input.sc-calcite-input,[scale=s].sc-calcite-input-h .calcite-input-prefix.sc-calcite-input,[scale=s].sc-calcite-input-h .calcite-input-suffix.sc-calcite-input{font-size:var(--calcite-font-size--2);padding:0.5rem;height:2rem}[scale=s].sc-calcite-input-h textarea.sc-calcite-input{min-height:32px}[scale=s].sc-calcite-input-h .calcite-input-number-button-wrapper.sc-calcite-input,[scale=s].sc-calcite-input-h .calcite-action-wrapper.sc-calcite-input calcite-button.sc-calcite-input,[scale=s].sc-calcite-input-h .calcite-action-wrapper.sc-calcite-input calcite-button.sc-calcite-input button.sc-calcite-input{height:2rem}[scale=s].sc-calcite-input-h textarea.sc-calcite-input,[scale=s].sc-calcite-input-h input[type=file].sc-calcite-input{height:auto}[scale=s].sc-calcite-input-h .calcite-input-clear-button.sc-calcite-input{min-height:32px;min-width:32px}[scale=m].sc-calcite-input-h textarea.sc-calcite-input,[scale=m].sc-calcite-input-h input.sc-calcite-input,[scale=m].sc-calcite-input-h .calcite-input-prefix.sc-calcite-input,[scale=m].sc-calcite-input-h .calcite-input-suffix.sc-calcite-input{font-size:var(--calcite-font-size--1);padding:0.75rem;height:44px}[scale=m].sc-calcite-input-h textarea.sc-calcite-input{min-height:44px}[scale=m].sc-calcite-input-h .calcite-input-number-button-wrapper.sc-calcite-input,[scale=m].sc-calcite-input-h .calcite-action-wrapper.sc-calcite-input calcite-button.sc-calcite-input,[scale=m].sc-calcite-input-h .calcite-action-wrapper.sc-calcite-input calcite-button.sc-calcite-input button.sc-calcite-input{height:44px}[scale=m].sc-calcite-input-h textarea.sc-calcite-input,[scale=m].sc-calcite-input-h input[type=file].sc-calcite-input{height:auto}[scale=m].sc-calcite-input-h .calcite-input-clear-button.sc-calcite-input{min-height:44px;min-width:44px}[scale=l].sc-calcite-input-h textarea.sc-calcite-input,[scale=l].sc-calcite-input-h input.sc-calcite-input,[scale=l].sc-calcite-input-h .calcite-input-prefix.sc-calcite-input,[scale=l].sc-calcite-input-h .calcite-input-suffix.sc-calcite-input{font-size:var(--calcite-font-size-1);padding:1rem;height:56px}[scale=l].sc-calcite-input-h textarea.sc-calcite-input{min-height:56px}[scale=l].sc-calcite-input-h .calcite-input-number-button-wrapper.sc-calcite-input,[scale=l].sc-calcite-input-h .calcite-action-wrapper.sc-calcite-input calcite-button.sc-calcite-input,[scale=l].sc-calcite-input-h .calcite-action-wrapper.sc-calcite-input calcite-button.sc-calcite-input button.sc-calcite-input{height:56px}[scale=l].sc-calcite-input-h textarea.sc-calcite-input,[scale=l].sc-calcite-input-h input[type=file].sc-calcite-input{height:auto}[scale=l].sc-calcite-input-h .calcite-input-clear-button.sc-calcite-input{min-height:56px;min-width:56px}[disabled].sc-calcite-input-h{pointer-events:none}[disabled].sc-calcite-input-h .calcite-input-wrapper.sc-calcite-input{opacity:var(--calcite-ui-opacity-disabled);pointer-events:none}[disabled].sc-calcite-input-h textarea.sc-calcite-input,[disabled].sc-calcite-input-h input.sc-calcite-input{pointer-events:none}.sc-calcite-input-h textarea.sc-calcite-input,.sc-calcite-input-h input.sc-calcite-input{display:-ms-flexbox;display:flex;position:relative;min-width:20%;max-width:100%;max-height:100%;-ms-flex:1;flex:1;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;font-family:inherit;-webkit-transition:150ms ease-in-out, height 0s;transition:150ms ease-in-out, height 0s;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;outline:0;margin:0;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-1);font-weight:400;border-radius:0;-webkit-border-radius:0}.sc-calcite-input-h input[type=search].sc-calcite-input::-webkit-search-decoration{-webkit-appearance:none}.sc-calcite-input-h textarea.sc-calcite-input,.sc-calcite-input-h input.sc-calcite-input{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}.sc-calcite-input-h textarea.sc-calcite-input:focus,.sc-calcite-input-h input.sc-calcite-input:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.sc-calcite-input-h input.sc-calcite-input,.sc-calcite-input-h textarea.sc-calcite-input{color:var(--calcite-ui-text-1);border:1px solid var(--calcite-ui-border-1)}.sc-calcite-input-h input.sc-calcite-input:-ms-input-placeholder,.sc-calcite-input-h textarea.sc-calcite-input:-ms-input-placeholder{color:var(--calcite-ui-text-3);font-weight:400}.sc-calcite-input-h input.sc-calcite-input::-ms-input-placeholder,.sc-calcite-input-h textarea.sc-calcite-input::-ms-input-placeholder{color:var(--calcite-ui-text-3);font-weight:400}.sc-calcite-input-h input.sc-calcite-input::placeholder,.sc-calcite-input-h input.sc-calcite-input:-ms-input-placeholder,.sc-calcite-input-h input.sc-calcite-input::-ms-input-placeholder,.sc-calcite-input-h textarea.sc-calcite-input::placeholder,.sc-calcite-input-h textarea.sc-calcite-input:-ms-input-placeholder,.sc-calcite-input-h textarea.sc-calcite-input::-ms-input-placeholder{color:var(--calcite-ui-text-3);font-weight:400}.sc-calcite-input-h input.sc-calcite-input:focus,.sc-calcite-input-h textarea.sc-calcite-input:focus{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-text-1)}.sc-calcite-input-h input[readonly].sc-calcite-input,.sc-calcite-input-h textarea[readonly].sc-calcite-input{background-color:var(--calcite-ui-background)}.sc-calcite-input-h input[readonly].sc-calcite-input:focus,.sc-calcite-input-h textarea[readonly].sc-calcite-input:focus{color:var(--calcite-ui-text-1)}.sc-calcite-input-h calcite-icon.sc-calcite-input{color:var(--calcite-ui-text-1)}.sc-calcite-input-h slot.sc-calcite-input:not[name=input-message]{display:block;margin-bottom:0.375rem;color:var(--calcite-ui-text-2);font-weight:500}[icon].sc-calcite-input-h input.sc-calcite-input{padding-left:2.25rem}[icon].sc-calcite-input-h .calcite--rtl.sc-calcite-input input.sc-calcite-input{padding-right:2.25rem;padding-left:0.75rem}[icon][scale=l].sc-calcite-input-h .calcite--rtl.sc-calcite-input input.sc-calcite-input{padding-right:3rem;padding-left:0.75rem}[icon][scale=l].sc-calcite-input-h input.sc-calcite-input{padding-left:3rem}.calcite-input-element-wrapper.sc-calcite-input{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:1;flex:1;min-width:20%;position:relative;-ms-flex-order:3;order:3}.calcite-input-icon.sc-calcite-input{display:block;position:absolute;pointer-events:none;-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out;top:calc(50% - 9px);left:0.75rem;margin:1px auto 0;z-index:1}[scale=l].sc-calcite-input-h .calcite-input-icon.sc-calcite-input{top:calc(50% - 12px)}.calcite--rtl.sc-calcite-input .calcite-input-icon.sc-calcite-input{left:unset;right:0.75rem}input[type=text].sc-calcite-input::-ms-clear{display:none;width:0;height:0}input[type=text].sc-calcite-input::-ms-reveal{display:none;width:0;height:0}input[type=search].sc-calcite-input::-webkit-search-decoration,input[type=search].sc-calcite-input::-webkit-search-cancel-button,input[type=search].sc-calcite-input::-webkit-search-results-button,input[type=search].sc-calcite-input::-webkit-search-results-decoration,input[type=date].sc-calcite-input::-webkit-clear-button,input[type=time].sc-calcite-input::-webkit-clear-button{display:none}.calcite-input-clear-button.sc-calcite-input{display:-ms-flexbox;display:flex;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;min-height:100%;border:1px solid var(--calcite-ui-border-1);-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out;pointer-events:initial;background-color:var(--calcite-ui-foreground-1);border-left:none;-ms-flex-order:4;order:4}.calcite-input-clear-button.sc-calcite-input:hover,.calcite-input-clear-button.sc-calcite-input:focus{background-color:var(--calcite-ui-foreground-2)}.calcite-input-clear-button.sc-calcite-input:active{background-color:var(--calcite-ui-foreground-3)}.calcite-input-clear-button.sc-calcite-input:disabled{opacity:var(--calcite-ui-opacity-disabled)}.calcite--rtl.sc-calcite-input .calcite-input-clear-button.sc-calcite-input{border-left:1px solid var(--calcite-ui-border-1);border-right:none}.calcite-input-clear-button.sc-calcite-input{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}.calcite-input-clear-button.sc-calcite-input:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.calcite-input-loading.sc-calcite-input{display:block;pointer-events:none;position:absolute;top:1px;left:1px;right:1px}.calcite-action-wrapper.sc-calcite-input{display:-ms-flexbox;display:flex;-ms-flex-order:7;order:7}.calcite-input-prefix.sc-calcite-input,.calcite-input-suffix.sc-calcite-input{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;height:auto;min-height:100%;word-break:break-word;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;font-weight:500;border:1px solid var(--calcite-ui-border-1);background-color:var(--calcite-ui-background);color:var(--calcite-ui-text-2);line-height:1}.calcite-input-prefix.sc-calcite-input{-ms-flex-order:2;order:2;border-right-width:0px}.calcite-input-suffix.sc-calcite-input{-ms-flex-order:5;order:5;border-left-width:0px}.calcite--rtl.sc-calcite-input .calcite-input-prefix.sc-calcite-input{border-right-width:1px;border-left-width:0px}.calcite--rtl.sc-calcite-input .calcite-input-suffix.sc-calcite-input{border-left-width:1px;border-right-width:0px}[readonly].sc-calcite-input-h .calcite-input-number-button-item.sc-calcite-input{pointer-events:none}[alignment=start].sc-calcite-input-h textarea.sc-calcite-input,[alignment=start].sc-calcite-input-h input.sc-calcite-input{text-align:left}[alignment=end].sc-calcite-input-h textarea.sc-calcite-input,[alignment=end].sc-calcite-input-h input.sc-calcite-input{text-align:right}[alignment=start].sc-calcite-input-h .calcite--rtl.sc-calcite-input textarea.sc-calcite-input,[alignment=start].sc-calcite-input-h .calcite--rtl.sc-calcite-input input.sc-calcite-input{text-align:right}[alignment=end].sc-calcite-input-h .calcite--rtl.sc-calcite-input textarea.sc-calcite-input,[alignment=end].sc-calcite-input-h .calcite--rtl.sc-calcite-input input.sc-calcite-input{text-align:left}.sc-calcite-input-h input[type=number].sc-calcite-input{-moz-appearance:textfield}.sc-calcite-input-h input[type=number].sc-calcite-input::-webkit-inner-spin-button,.sc-calcite-input-h input[type=number].sc-calcite-input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:textfield;margin:0}.calcite-input-number-button-wrapper.sc-calcite-input{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out;pointer-events:none;-ms-flex-order:6;order:6}[number-button-type=vertical].sc-calcite-input-h .calcite-input-wrapper.sc-calcite-input{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex}[number-button-type=vertical].sc-calcite-input-h input.sc-calcite-input,[number-button-type=vertical].sc-calcite-input-h textarea.sc-calcite-input{-ms-flex-order:2;order:2}[number-button-type=horizontal].sc-calcite-input-h .calcite--rtl.sc-calcite-input .calcite-input-number-button-item[data-adjustment=down].sc-calcite-input calcite-icon.sc-calcite-input{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}[number-button-type=horizontal].sc-calcite-input-h .calcite--rtl.sc-calcite-input .calcite-input-number-button-item[data-adjustment=up].sc-calcite-input calcite-icon.sc-calcite-input{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.calcite-input-number-button-item.number-button-item-horizontal[data-adjustment=down].sc-calcite-input,.calcite-input-number-button-item.number-button-item-horizontal[data-adjustment=up].sc-calcite-input{min-height:100%;max-height:100%;-ms-flex-order:1;order:1;-ms-flex-item-align:auto;align-self:auto}.calcite-input-number-button-item.number-button-item-horizontal[data-adjustment=down].sc-calcite-input calcite-icon.sc-calcite-input,.calcite-input-number-button-item.number-button-item-horizontal[data-adjustment=up].sc-calcite-input calcite-icon.sc-calcite-input{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.calcite-input-number-button-item.number-button-item-horizontal[data-adjustment=down].sc-calcite-input{border-left:1px solid var(--calcite-ui-border-1);border-right:0px}.calcite-input-number-button-item.number-button-item-horizontal[data-adjustment=up].sc-calcite-input{-ms-flex-order:5;order:5}.calcite--rtl.sc-calcite-input .calcite-input-number-button-item.number-button-item-horizontal[data-adjustment=down].sc-calcite-input{border-right:1px solid var(--calcite-ui-border-1);border-left:0px}.calcite--rtl.sc-calcite-input .calcite-input-number-button-item.number-button-item-horizontal[data-adjustment=up].sc-calcite-input{border-left:1px solid var(--calcite-ui-border-1);border-right:0px}[number-button-type=vertical].sc-calcite-input-h .calcite-input-number-button-item[data-adjustment=down].sc-calcite-input{border-top:0}.calcite-input-number-button-item.sc-calcite-input{display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;max-height:50%;min-height:50%;padding:0 0.75rem;border:1px solid var(--calcite-ui-border-1);-webkit-transition:background-color 0.15s ease-in-out;transition:background-color 0.15s ease-in-out;pointer-events:initial;background-color:var(--calcite-ui-foreground-1);border-left:none}.calcite-input-number-button-item.sc-calcite-input calcite-icon.sc-calcite-input{pointer-events:none}.calcite-input-number-button-item.sc-calcite-input:hover,.calcite-input-number-button-item.sc-calcite-input:focus{background-color:var(--calcite-ui-foreground-2)}.calcite-input-number-button-item.sc-calcite-input:active{background-color:var(--calcite-ui-foreground-3)}[number-button-type=vertical].sc-calcite-input-h .calcite--rtl.sc-calcite-input .calcite-input-number-button-item.sc-calcite-input{border-right:none;border-left:1px solid var(--calcite-ui-border-1)}.calcite-input-wrapper.sc-calcite-input{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;position:relative}.sc-calcite-input-h input.sc-calcite-input::-webkit-calendar-picker-indicator{display:none}.sc-calcite-input-h input[type=date].sc-calcite-input::-webkit-input-placeholder{visibility:hidden !important}.sc-calcite-input-h textarea.sc-calcite-input::-webkit-resizer{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;bottom:0;right:0;padding:0 0.375rem}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){.calcite-input-resize-icon-wrapper.sc-calcite-input{display:none}}.calcite-input-resize-icon-wrapper.sc-calcite-input{background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-3);position:absolute;z-index:1;bottom:2px;right:2px;pointer-events:none;width:16px;height:16px}.calcite-input-resize-icon-wrapper.sc-calcite-input calcite-icon.sc-calcite-input{bottom:4px;right:4px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.calcite--rtl.sc-calcite-input textarea.sc-calcite-input::-webkit-resizer{left:0;right:unset}.calcite--rtl.sc-calcite-input .calcite-input-resize-icon-wrapper.sc-calcite-input{left:2px;right:unset}.calcite--rtl.sc-calcite-input .calcite-input-resize-icon-wrapper.sc-calcite-input calcite-icon.sc-calcite-input{bottom:4px;right:4px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}[type=file].sc-calcite-input-h input.sc-calcite-input,[type=file].sc-calcite-input-h textarea.sc-calcite-input{cursor:pointer;padding:1.5rem;border:1px dashed #d4d4d4;background-color:#f8f8f8;text-align:center}.no-bottom-border.sc-calcite-input-h input.sc-calcite-input.sc-calcite-input{border-bottom:none}[status=invalid].sc-calcite-input-h .calcite-input-icon.sc-calcite-input{color:var(--calcite-ui-danger)}[status=valid].sc-calcite-input-h .calcite-input-icon.sc-calcite-input{color:var(--calcite-ui-success)}[status=idle].sc-calcite-input-h .calcite-input-icon.sc-calcite-input{color:var(--calcite-ui-text-2)}";
const CalciteInput = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.calciteInputFocus = index.createEvent(this, "calciteInputFocus", 7);
this.calciteInputBlur = index.createEvent(this, "calciteInputBlur", 7);
this.calciteInputInput = index.createEvent(this, "calciteInputInput", 7);
this.calciteInputChange = index.createEvent(this, "calciteInputChange", 7);
//--------------------------------------------------------------------------
//
// Properties
//
//--------------------------------------------------------------------------
/** specify the alignment of the value of the input */
this.alignment = "start";
/** should the input autofocus */
this.autofocus = false;
/** for number values, displays the locale's group separator */
this.groupSeparator = false;
/** specify if the input is in loading state */
this.loading = false;
/** BCP 47 language tag for desired language and country format */
this.locale = document.documentElement.lang || "en";
/**
* Toggles locale formatting for numbers.
* @internal
*/
this.localeFormat = false;
/** specify the placement of the number buttons */
this.numberButtonType = "vertical";
/** is the input required */
this.required = false;
/** specify the scale of the input, defaults to m */
this.scale = "m";
/** specify the status of the input field, determines message and icons */
this.status = "idle";
/**
* specify the input type
*
* Note that the following types add type-specific icons by default: `date`, `email`, `password`, `search`, `tel`, `time`
*/
this.type = "text";
/** keep track of the rendered child type */
this.childElType = "input";
//--------------------------------------------------------------------------
//
// Private Methods
//
//--------------------------------------------------------------------------
this.clearInputValue = (nativeEvent) => {
this.setValue(null, nativeEvent, true);
};
this.inputBlurHandler = () => {
if (this.type === "number") {
this.setLocalizedValue(this.value);
}
this.calciteInputBlur.emit({
element: this.childEl,
value: this.value
});
if (this.preFocusValue !== this.value) {
this.calciteInputChange.emit();
}
};
this.inputFocusHandler = (event) => {
if (event.target !== this.slottedActionEl) {
this.setFocus();
}
this.calciteInputFocus.emit({
element: this.childEl,
value: this.value
});
this.preFocusValue = this.value;
};
this.inputInputHandler = (nativeEvent) => {
this.setValue(nativeEvent.target.value, nativeEvent);
};
this.inputKeyDownHandler = (event) => {
if (event.key === "Enter") {
this.calciteInputChange.emit();
}
};
this.inputNumberInputHandler = (nativeEvent) => {
const value = nativeEvent.target.value;
const delocalizedValue = locale.delocalizeNumberString(value, this.locale);
if (nativeEvent.inputType === "insertFromPaste") {
if (!number.isValidNumber(delocalizedValue)) {
nativeEvent.preventDefault();
}
this.setValue(number.parseNumberString(delocalizedValue), nativeEvent);
this.childNumberEl.value = this.localizedValue;
}
else {
this.setValue(locale.delocalizeNumberString(value, this.locale), nativeEvent);
}
};
this.inputNumberKeyDownHandler = (event) => {
if (this.type !== "number") {
return;
}
if (event.key === "ArrowUp") {
this.nudgeNumberValue("up", event);
return;
}
if (event.key === "ArrowDown") {
this.nudgeNumberValue("down", event);
return;
}
const supportedKeys = [
...key.numberKeys,
"ArrowLeft",
"ArrowRight",
"Backspace",
"Delete",
"Enter",
"Escape",
"Tab",
"-"
];
if (event.altKey || event.ctrlKey || event.metaKey) {
return;
}
const isShiftTabEvent = event.shiftKey && event.key === "Tab";
if (supportedKeys.includes(event.key) &&
(!event.shiftKey || isShiftTabEvent) &&
!(parseInt(this.value) === 0 && key.getKey(event.key) === "0")) {
if (event.key === "Enter") {
this.calciteInputChange.emit();
}
return;
}
const decimalSeparator = locale.getDecimalSeparator(this.locale);
if (event.key === decimalSeparator) {
if (!this.value && !this.childNumberEl.value) {
return;
}
if (this.value && this.childNumberEl.value.indexOf(decimalSeparator) === -1) {
return;
}
}
event.preventDefault();
};
this.nudgeNumberValue = (direction, nativeEvent) => {
var _a, _b;
if (this.type !== "number") {
return;
}
const decimals = ((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.split(".")[1]) === null || _b === void 0 ? void 0 : _b.length) || 0;
const inputMax = this.maxString ? parseFloat(this.maxString) : null;
const inputMin = this.minString ? parseFloat(this.minString) : null;
const inputStep = this.step === "any" ? 1 : Math.abs(this.step || 1);
let inputVal = this.value && this.value !== "" ? parseFloat(this.value) : 0;
let newValue = this.value;
if (direction === "up" && ((!inputMax && inputMax !== 0) || inputVal < inputMax)) {
newValue = (inputVal += inputStep).toFixed(decimals).toString();
}
if (direction === "down" && ((!inputMin && inputMin !== 0) || inputVal > inputMin)) {
newValue = (inputVal -= inputStep).toFixed(decimals).toString();
}
this.setValue(newValue, nativeEvent, true);
};
this.numberButtonMouseDownHandler = (event) => {
// todo, when dropping ie11 support, refactor to use stepup/stepdown
// prevent blur and re-focus of input on mousedown
event.preventDefault();
const direction = event.target.dataset.adjustment;
this.nudgeNumberValue(direction, event);
};
this.reset = (nativeEvent) => {
if (this.type === "number") {
nativeEvent.preventDefault();
}
this.setValue(this.defaultValue, nativeEvent);
};
this.setChildElRef = (el) => {
this.childEl = el;
};
this.setChildNumberElRef = (el) => {
this.childNumberEl = el;
};
this.setLocalizedValue = (value) => {
this.localizedValue = locale.localizeNumberString(value, this.locale, this.groupSeparator);
};
this.setValue = (value, nativeEvent, committing = false) => {
const previousValue = this.value;
this.value = this.type === "number" ? number.sanitizeNumberString(value) : value;
if (this.type === "number") {
this.setLocalizedValue(this.value);
}
if (nativeEvent) {
if (this.type === "number" && (value === null || value === void 0 ? void 0 : value.endsWith("."))) {
return;
}
const calciteInputInputEvent = this.calciteInputInput.emit({
element: this.childEl,
nativeEvent,
value
});
if (calciteInputInputEvent.defaultPrevented) {
this.value = previousValue;
this.setLocalizedValue(previousValue);
}
else if (committing) {
this.calciteInputChange.emit();
}
}
};
}
disabledWatcher() {
this.setDisabledAction();
}
/** watcher to update number-to-string for max */
maxWatcher() {
var _a;
this.maxString = ((_a = this.max) === null || _a === void 0 ? void 0 : _a.toString()) || null;
}
/** watcher to update number-to-string for min */
minWatcher() {
var _a;
this.minString = ((_a = this.min) === null || _a === void 0 ? void 0 : _a.toString()) || null;
}
valueWatcher(newValue) {
if (this.type === "number" &&
this.localizedValue !== locale.localizeNumberString(newValue, this.locale)) {
this.setLocalizedValue(newValue);
}
else if (this.childEl && this.childEl.value !== newValue) {
this.childEl.value = newValue;
}
}
updateRequestedIcon() {
this.requestedIcon = dom.setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
}
get isClearable() {
var _a;
return !this.isTextarea && (this.clearable || this.type === "search") && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0;
}
get isTextarea() {
return this.childElType === "textarea";
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
connectedCallback() {
var _a;
this.form = this.el.closest("form");
(_a = this.form) === null || _a === void 0 ? void 0 : _a.addEventListener("reset", this.reset);
this.scale = dom.getElementProp(this.el, "scale", this.scale);
this.status = dom.getElementProp(this.el, "status", this.status);
this.step = !this.step && this.type === "number" ? "any" : this.step;
if (this.type === "number" && this.value) {
if (number.isValidNumber(this.value)) {
this.localizedValue = locale.localizeNumberString(this.value, this.locale, this.groupSeparator);
}
else {
this.value = undefined;
}
}
}
disconnectedCallback() {
var _a;
(_a = this.form) === null || _a === void 0 ? void 0 : _a.removeEventListener("reset", this.reset);
}
componentWillLoad() {
var _a, _b;
this.childElType = this.type === "textarea" ? "textarea" : "input";
this.defaultValue = this.value;
this.maxString = (_a = this.max) === null || _a === void 0 ? void 0 : _a.toString();
this.minString = (_b = this.min) === null || _b === void 0 ? void 0 : _b.toString();
this.requestedIcon = dom.setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
}
componentDidLoad() {
this.slottedActionEl = this.el.querySelector("[slot=action]");
this.setDisabledAction();
if (this.type === "number" && this.childEl) {
this.childEl.style.cssText = form.hiddenInputStyle;
}
}
componentShouldUpdate(newValue, oldValue, property) {
if (this.type === "number" && property === "value" && newValue && !number.isValidNumber(newValue)) {
this.value = oldValue;
return false;
}
return true;
}
//--------------------------------------------------------------------------
//
// Event Listeners
//
//--------------------------------------------------------------------------
keyDownHandler(event) {
if (this.isClearable && key.getKey(event.key) === "Escape") {
this.clearInputValue(event);
event.preventDefault();
}
}
//--------------------------------------------------------------------------
//
// Public Methods
//
//--------------------------------------------------------------------------
/** focus the rendered child element */
async setFocus() {
var _a, _b;
if (this.type === "number") {
(_a = this.childNumberEl) === null || _a === void 0 ? void 0 : _a.focus();
}
else {
(_b = this.childEl) === null || _b === void 0 ? void 0 : _b.focus();
}
}
setDisabledAction() {
if (!this.slottedActionEl) {
return;
}
const slottedActionEl = this.slottedActionEl;
this.disabled
? slottedActionEl.setAttribute("disabled", "")
: slottedActionEl.removeAttribute("disabled");
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
render() {
const dir = dom.getElementDir(this.el);
const attributes = dom.getAttributes(this.el, [
"alignment",
"dir",
"clearable",
"min",
"max",
"step",
"value",
"icon",
"loading",
"prefix-text",
"scale",
"status",
"suffix-text",
"number-button-type",
"locale",
"group-separator"
]);
const loader = (index.h("div", { class: "calcite-input-loading" }, index.h("calcite-progress", { type: "indeterminate" })));
const iconScale = this.scale === "s" || this.scale === "m" ? "s" : "m";
const inputClearButton = (index.h("button", { class: "calcite-input-clear-button", disabled: this.loading, onClick: this.clearInputValue }, index.h("calcite-icon", { icon: "x", scale: iconScale })));
const iconEl = (index.h("calcite-icon", { class: "calcite-input-icon", dir: dir, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: iconScale }));
const numberButtonClassModifier = this.numberButtonType === "horizontal" ? "number-button-item-horizontal" : null;
const numberButtonsHorizontalUp = (index.h("div", { class: `calcite-input-number-button-item ${numberButtonClassModifier}`, "data-adjustment": "up", onMouseDown: this.numberButtonMouseDownHandler }, index.h("calcite-icon", { icon: "chevron-up", scale: iconScale })));
const numberButtonsHorizontalDown = (index.h("div", { class: `calcite-input-number-button-item ${numberButtonClassModifier}`, "data-adjustment": "down", onMouseDown: this.numberButtonMouseDownHandler }, index.h("calcite-icon", { icon: "chevron-down", scale: iconScale })));
const numberButtonsVertical = (index.h("div", { class: `calcite-input-number-button-wrapper` }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
const prefixText = index.h("div", { class: "calcite-input-prefix" }, this.prefixText);
const suffixText = index.h("div", { class: "calcite-input-suffix" }, this.suffixText);
const localeNumberInput = this.type === "number" ? (index.h("input", Object.assign({}, attributes, { autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, placeholder: this.placeholder || "", ref: this.setChildNumberElRef, tabIndex: 0, type: "text", value: this.localizedValue }))) : null;
const childEl = [
index.h(this.childElType, Object.assign({}, attributes, { autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, name: this.name, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, placeholder: this.placeholder || "", ref: this.setChildElRef, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || this.type === "number" ? -1 : null, type: this.type, value: this.value })),
this.isTextarea ? (index.h("div", { class: "calcite-input-resize-icon-wrapper" }, index.h("calcite-icon", { icon: "chevron-down", scale: "s" }))) : null
];
return (index.h(index.Host, { onClick: this.inputFocusHandler }, index.h("div", { class: { "calcite-input-wrapper": true, [dom.CSS_UTILITY.rtl]: dir === "rtl" }, dir: dir }, this.type === "number" && this.numberButtonType === "horizontal"
? numberButtonsHorizontalDown
: null, this.prefixText ? prefixText : null, index.h("div", { class: "calcite-input-element-wrapper" }, localeNumberInput, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), index.h("div", { class: "calcite-action-wrapper" }, index.h("slot", { name: SLOTS.action })), this.type === "number" && this.numberButtonType === "vertical"
? numberButtonsVertical
: null, this.suffixText ? suffixText : null, this.type === "number" && this.numberButtonType === "horizontal"
? numberButtonsHorizontalUp
: null)));
}
get el() { return index.getElement(this); }
static get watchers() { return {
"disabled": ["disabledWatcher"],
"max": ["maxWatcher"],
"min": ["minWatcher"],
"value": ["valueWatcher"],
"icon": ["updateRequestedIcon"],
"type": ["updateRequestedIcon"]
}; }
};
CalciteInput.style = calciteInputCss;
exports.calcite_input = CalciteInput;