@scania/tegel
Version:
Tegel Design System
173 lines (169 loc) • 22.7 kB
JavaScript
import { r as registerInstance, c as createEvent, h, a as getElement } from './index-9xxNGlso.js';
import { h as hasSlot } from './hasSlot-DDX6uFcm.js';
import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.js';
import { g as getAriaInvalid } from './getAriaInvalid-wEP_nEaO.js';
const textFieldCss = () => `.text-field-input-lg.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16)}.text-field-input-lg.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-lg.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-lg.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-lg.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-md.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-md.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-md.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-md.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-md.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-sm.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-sm.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-sm.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-sm.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-sm.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-container.sc-tds-text-field{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--tds-text-field-background);border-bottom:1px solid var(--tds-text-field-border-bottom);border-top:1px solid transparent;transition:border-bottom-color 200ms ease}.text-field-container.sc-tds-text-field:hover{border-bottom-color:var(--tds-text-field-border-bottom-hover)}.form-text-field-md.sc-tds-text-field .text-field-container.sc-tds-text-field{height:48px}.form-text-field-sm.sc-tds-text-field .text-field-container.sc-tds-text-field{height:40px}.text-field-container.sc-tds-text-field:focus-within{border:2px solid var(--tds-focus-outline-color);margin:0 -2px}.text-field-input-container.sc-tds-text-field{position:relative;width:100%}.text-field-data.sc-tds-text-field,.text-field-input.sc-tds-text-field{color:var(--tds-text-field-data-color)}.text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-text-field-label-color)}.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);position:absolute;pointer-events:none;color:var(--tds-text-field-label-inside-color);left:16px}.form-text-field.sc-tds-text-field{display:block;min-width:208px}.form-text-field-nomin.sc-tds-text-field{min-width:auto}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field{padding-top:var(--tds-spacing-element-24);padding-bottom:15px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:20px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:12px}.text-field-helper.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--tds-spacing-element-4);color:var(--tds-text-field-helper)}.text-field-helper.sc-tds-text-field .text-field-textcounter.sc-tds-text-field{margin-left:auto}.form-text-field-disabled.sc-tds-text-field .text-field-container.sc-tds-text-field{cursor:not-allowed;border-bottom-color:transparent}.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-prefix.sc-tds-text-field>*.sc-tds-text-field,.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-suffix.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-ps-color-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-disabled)}.text-field-icon__readonly.sc-tds-text-field{display:none;position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--tds-text-field-icon-read-only-label-color)}.text-field-icon__readonly.sc-tds-text-field .tds-tooltip.sc-tds-text-field{min-width:150px}.form-text-field-readonly.sc-tds-text-field{user-select:auto;caret-color:transparent;cursor:default}.form-text-field-readonly.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-readonly)}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field:hover~.text-field-icon__readonly-label.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-input.sc-tds-text-field{background-color:transparent}.form-text-field-readonly.sc-tds-text-field:has(.text-field-icon__readonly) .text-field-input.sc-tds-text-field{padding-right:54px}.form-text-field-success.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-success)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-error)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-error)}.text-field-helper-error-state.sc-tds-text-field{display:flex;gap:8px;flex-wrap:nowrap}.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-text-field-textcounter);float:right}.text-field-textcounter.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.text-field-textcounter-divider.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider)}.text-field-textcounter.text-field-textcounter-divider-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider-disabled)}.text-field-slot-wrap-prefix.sc-tds-text-field,.text-field-slot-wrap-suffix.sc-tds-text-field{align-self:center;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);margin:0 0 0 14px;color:var(--tds-text-field-ps-color)}.text-field-slot-wrap-prefix.sc-tds-text-field-s>:not(tds-icon),.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 0 0 2px}.text-field-slot-wrap-prefix.text-field-error.sc-tds-text-field,.text-field-slot-wrap-suffix.text-field-error.sc-tds-text-field{color:var(--tds-text-field-ps-color-error)}.text-field-slot-wrap-suffix.sc-tds-text-field{margin:0 14px 0 0}.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 2px 0 0}.text-field-input-no-arrows.sc-tds-text-field{appearance:textfield}.text-field-input-no-arrows.sc-tds-text-field::-webkit-outer-spin-button,.text-field-input-no-arrows.sc-tds-text-field::-webkit-inner-spin-button{appearance:none;margin:0}`;
const TdsTextField = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.tdsChange = createEvent(this, "tdsChange", 6);
this.tdsInput = createEvent(this, "tdsInput", 6);
this.tdsFocus = createEvent(this, "tdsFocus", 6);
this.tdsBlur = createEvent(this, "tdsBlur", 6);
this.tdsError = createEvent(this, "tdsError", 6);
this.uuid = generateUniqueId();
/** Which input type, text, password or similar */
this.type = 'text';
/** Position of the label for the Text Field. */
this.labelPosition = 'no-label';
/** Label text */
this.label = '';
/** Placeholder text */
this.placeholder = '';
/** Value of the input text */
this.value = '';
/** Set input in disabled state */
this.disabled = false;
/** Set input in readonly state */
this.readOnly = false;
/** Hides the read-only icon in the Text Field. Requires Read Only to be enabled. */
this.hideReadOnlyIcon = false;
/** Size of the input */
this.size = 'lg';
/** Mode variant of the Text Field */
this.modeVariant = null;
/** Unset minimum width of 208px. */
this.noMinWidth = false;
/** Name property */
this.name = '';
/** Error state of input */
this.state = 'default';
/** Autofocus for input */
this.autofocus = false;
/** Makes the text field required */
this.required = false;
/** Value to be used for the text field's autocomplete attribute */
this.autocomplete = 'off';
/** Hides the native arrows on number input type */
this.hideNumberArrows = false;
/** Listen to the focus state of the input */
this.focusInput = false;
}
handleChange(event) {
this.tdsChange.emit(event);
}
/** Data input event in value prop */
handleInput(event) {
const inputEl = event.target;
const { value } = inputEl;
this.value = value;
this.tdsInput.emit(event);
}
/** Set the input as focus when clicking the whole Text Field with suffix/prefix */
handleFocus(event) {
var _a;
(_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
this.focusInput = true;
this.tdsFocus.emit(event);
}
/** Set the input as focus when clicking the whole Text Field with suffix/prefix */
handleBlur(event) {
this.focusInput = false;
/** Custom handling of number inputs when min/max are set */
if (this.type === 'number' && this.textInput) {
const numericValue = this.textInput.valueAsNumber;
const minNum = this.min !== undefined ? Number(this.min) : undefined;
const maxNum = this.max !== undefined ? Number(this.max) : undefined;
if (minNum !== undefined && maxNum !== undefined && minNum > maxNum) {
console.warn('tds-text-field: min value is greater than max value');
return;
}
if (!isNaN(numericValue)) {
const originalValue = this.textInput.value;
let clampedValue = originalValue;
let clampReason = null;
if (minNum !== undefined && numericValue < minNum) {
clampedValue = String(this.min);
clampReason = 'min';
}
if (maxNum !== undefined && numericValue > maxNum) {
clampedValue = String(this.max);
clampReason = 'max';
}
if (clampedValue !== originalValue && clampReason) {
this.textInput.value = clampedValue;
this.value = clampedValue;
this.tdsError.emit({
originalValue,
clampedValue,
reason: clampReason,
});
}
}
}
this.tdsBlur.emit(event);
}
/** Method to handle focus */
async focusElement() {
if (this.textInput) {
this.textInput.focus();
}
}
render() {
var _a, _b, _c, _d;
const usesPrefixSlot = hasSlot('prefix', this.host);
const usesSuffixSlot = hasSlot('suffix', this.host);
return (h("div", { key: 'f16b01caa6aab76ff91b1bbd339726bc091073b4', class: {
'form-text-field': true,
'form-text-field-nomin': this.noMinWidth,
'text-field-focus': this.focusInput && !this.disabled,
'text-field-data': this.value !== '' && this.value !== null,
'text-field-container-label-inside': this.labelPosition === 'inside' && this.size !== 'sm',
'form-text-field-disabled': this.disabled,
'form-text-field-readonly': this.disabled ? false : this.readOnly,
'tds-mode-variant-primary': this.readOnly
? this.modeVariant === 'secondary'
: this.modeVariant === 'primary',
'tds-mode-variant-secondary': this.readOnly
? this.modeVariant === 'primary'
: this.modeVariant === 'secondary',
'form-text-field-md': this.size === 'md',
'form-text-field-sm': this.size === 'sm',
'form-text-field-error': this.state === 'error',
'form-text-field-success': this.state === 'success',
} }, this.labelPosition === 'outside' && (h("div", { key: '05a6ee014f2d3e6e4394050423282d18cf5908b0', class: "text-field-label-outside" }, h("label", { key: 'cf3b333f2a898c048a1d456c6b7f6c65390615f0', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: 'fc4a03cf20e81fa191ba536d2b79a0f1b0c535dd', onClick: () => { var _a; return (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus(); }, class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '3638c5a1acde4ad2eabc403d74a551d6185985a8', class: {
'text-field-slot-wrap-prefix': true,
'text-field-error': this.state === 'error',
'text-field-success': this.state === 'success',
'text-field-default': this.state === 'default',
} }, h("slot", { key: 'aa86f986720a076698b3193009eb8ebc5022e531', name: "prefix" }))), h("div", { key: '5b884728b755f3c604b233f706da028dc12ab0f8', class: "text-field-input-container" }, h("input", { key: 'a04b70515c8ea73d3435292249fb3aea9a43663a', ref: (inputEl) => {
this.textInput = inputEl;
}, class: {
'text-field-input': true,
'text-field-input-sm': this.size === 'sm',
'text-field-input-md': this.size === 'md',
'text-field-input-lg': this.size === 'lg',
'text-field-input-no-arrows': this.hideNumberArrows,
}, type: this.type, disabled: this.disabled, readonly: this.disabled ? false : this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, min: this.min, max: this.max, step: this.step, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
if (!this.readOnly) {
this.handleFocus(event);
}
}, onBlur: (event) => {
if (!this.readOnly) {
this.handleBlur(event);
}
}, "aria-invalid": getAriaInvalid(this.host, this.state), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}`, required: this.required, autocomplete: this.autocomplete }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '2b4adf151e255ac983027b61b43f18e81399f11a', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '70fccd2b3ffcab91b2537ef1512d2bbe86c4a1e5', class: {
'text-field-slot-wrap-suffix': true,
'text-field-error': this.state === 'error',
'text-field-success': this.state === 'success',
'text-field-default': this.state === 'default',
'tds-u-display-none': this.readOnly,
} }, h("slot", { key: '631a64c5239415bbf8449e90d046a3a2eb8fdf3c', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '975a0d8877d271c45c6b5f210537b11b5b70004e', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: 'e0aa565b62e640afcf13f270187269dbe79b9a48', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '9dadaaa674e0ef4f47e24889ff9e418e7ff3a168', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '787ae2f6f83ff667885adec7b30ac31c3d99a8e4', "aria-live": "assertive" }, (this.helper || ((_a = this.maxLength) !== null && _a !== void 0 ? _a : 0) > 0) && (h("div", { key: 'f655beff3ed7f0a3441c790fce325ce830770707', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '1e2ec411ebb607637b0584a54c1c19ff6d0e031e', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: 'ce34402f70808ab965669863d46c9d84fb66609d', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && ((_b = this.maxLength) !== null && _b !== void 0 ? _b : 0) > 0 && (h("span", { key: '17945ce6d01531279d561fc2115cc8461b59b6ea', class: {
'text-field-textcounter-divider': true,
'text-field-textcounter-disabled': this.disabled,
} }, this.value === null ? 0 : (_c = this.value) === null || _c === void 0 ? void 0 : _c.length, " / ", (_d = this.maxLength) !== null && _d !== void 0 ? _d : 0)))))));
}
get host() { return getElement(this); }
};
TdsTextField.style = textFieldCss();
export { TdsTextField as tds_text_field };