@scania/tegel
Version:
Tegel Design System
587 lines (586 loc) • 23.5 kB
JavaScript
import { h } from "@stencil/core";
import hasSlot from "../../utils/hasSlot";
import generateUniqueId from "../../utils/generateUniqueId";
/**
* @slot prefix - Slot for the prefix in the component.
* @slot suffix - Slot for the suffix in the component. Suffix is hidden when the input is in readonly state.
*/
export class TdsTextField {
constructor() {
this.uuid = generateUniqueId();
this.type = 'text';
this.labelPosition = 'no-label';
this.label = '';
this.min = undefined;
this.max = undefined;
this.helper = undefined;
this.placeholder = '';
this.value = '';
this.disabled = false;
this.readOnly = false;
this.hideReadOnlyIcon = false;
this.size = 'lg';
this.modeVariant = null;
this.noMinWidth = false;
this.name = '';
this.state = 'default';
this.maxLength = undefined;
this.autofocus = false;
this.tdsAriaLabel = undefined;
this.focusInput = false;
}
handleChange(event) {
this.tdsChange.emit(event);
}
// Data input event in value prop
handleInput(event) {
const inputEl = event.target;
let { value } = inputEl;
// Custom handling of number inputs when min/max are set
if (this.type === 'number') {
const numericValue = Number(value);
if (this.min !== undefined && numericValue < Number(this.min)) {
value = String(this.min);
}
if (this.max !== undefined && numericValue > Number(this.max)) {
value = String(this.max);
}
inputEl.value = value;
}
this.value = value;
this.tdsInput.emit(event);
}
/** Set the input as focus when clicking the whole Text Field with suffix/prefix */
handleFocus(event) {
this.textInput.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;
this.tdsBlur.emit(event);
}
/** Method to handle focus */
async focusElement() {
if (this.textInput) {
this.textInput.focus();
}
}
connectedCallback() {
if (!this.tdsAriaLabel) {
console.warn('Tegel Text Field component: prop tdsAriaLabel is missing');
}
}
render() {
var _a;
const usesPrefixSlot = hasSlot('prefix', this.host);
const usesSuffixSlot = hasSlot('suffix', this.host);
return (h("div", { key: '985928ef59662762648f2d95d5decad2e3188e05', 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: '7a409b43a1fee8b7b078abc5f96c925ab97bcedc', class: "text-field-label-outside" }, h("label", { key: 'c6bdaab4e6f81a95aa71a4e23a1f02fb1bcef9ec', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '945f7901a92850da22ab84c5fe77e2d97738aaa9', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '5d6cb2facb8ff90b7393409b769c2b5e5a860421', 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: 'b0f0e3ebb96dbd2af021150b68690af566db44b9', name: "prefix" }))), h("div", { key: 'c5b172ee6c561256ab930490113f406b88eae67c', class: "text-field-input-container" }, h("input", { key: '2e0a9070b41bde39a2a0f14b132f474692eb0e04', 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',
}, 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, 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-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}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'ffb3bbb84ab718c2259134f32ee6dd0eb348cb9f', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '166da0147311d28064b7e03bbefd1a0ee18db5ca', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: '4bb21d12957bf65d525931c88a5a89fff49d4eaf', 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: '7e67dbc8f4f67cb0c7d194e01e5787ae18ffab13', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: 'd213ec000d837cbd4b711468ef3cfa826cc65ac2', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: 'b89530a2422cdf782e92a124e7c353b4432b9719', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'fa2a35bc8514d802152a147d9c17c9a8dbe952c8', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '902924863a2e58f820647b89f289c4e649dd63a5', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '6bc81db447e040154a7d35acddbe732d8fbc5134', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '990205934bb31c179478c68cca7a991056678838', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: 'cfc4b7b95164832fcfa4c744a640356187ac41c1', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: 'bbcaee6e47a36ccce4e05ba672d92211f2612fd1', class: {
'text-field-textcounter-divider': true,
'text-field-textcounter-disabled': this.disabled,
} }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));
}
static get is() { return "tds-text-field"; }
static get encapsulation() { return "scoped"; }
static get originalStyleUrls() {
return {
"$": ["text-field.scss"]
};
}
static get styleUrls() {
return {
"$": ["text-field.css"]
};
}
static get properties() {
return {
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'text' | 'password' | 'number'",
"resolved": "\"number\" | \"password\" | \"text\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Which input type, text, password or similar"
},
"attribute": "type",
"reflect": true,
"defaultValue": "'text'"
},
"labelPosition": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'inside' | 'outside' | 'no-label'",
"resolved": "\"inside\" | \"no-label\" | \"outside\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Position of the label for the Text Field."
},
"attribute": "label-position",
"reflect": false,
"defaultValue": "'no-label'"
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Label text"
},
"attribute": "label",
"reflect": false,
"defaultValue": "''"
},
"min": {
"type": "any",
"mutable": false,
"complexType": {
"original": "string | number",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Min allowed value for input type number"
},
"attribute": "min",
"reflect": false
},
"max": {
"type": "any",
"mutable": false,
"complexType": {
"original": "string | number",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Max allowed value for input type number"
},
"attribute": "max",
"reflect": false
},
"helper": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Helper text"
},
"attribute": "helper",
"reflect": false
},
"placeholder": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Placeholder text"
},
"attribute": "placeholder",
"reflect": false,
"defaultValue": "''"
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Value of the input text"
},
"attribute": "value",
"reflect": true,
"defaultValue": "''"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set input in disabled state"
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"readOnly": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set input in readonly state"
},
"attribute": "read-only",
"reflect": false,
"defaultValue": "false"
},
"hideReadOnlyIcon": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Hides the read-only icon in the Text Field. Requires Read Only to be enabled."
},
"attribute": "hide-read-only-icon",
"reflect": false,
"defaultValue": "false"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'sm' | 'md' | 'lg'",
"resolved": "\"lg\" | \"md\" | \"sm\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Size of the input"
},
"attribute": "size",
"reflect": false,
"defaultValue": "'lg'"
},
"modeVariant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'primary' | 'secondary'",
"resolved": "\"primary\" | \"secondary\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Mode variant of the Text Field"
},
"attribute": "mode-variant",
"reflect": false,
"defaultValue": "null"
},
"noMinWidth": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Unset minimum width of 208px."
},
"attribute": "no-min-width",
"reflect": false,
"defaultValue": "false"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Name property"
},
"attribute": "name",
"reflect": false,
"defaultValue": "''"
},
"state": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'error' | 'success' | 'default'",
"resolved": "\"default\" | \"error\" | \"success\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Error state of input"
},
"attribute": "state",
"reflect": false,
"defaultValue": "'default'"
},
"maxLength": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Max length of input"
},
"attribute": "max-length",
"reflect": false
},
"autofocus": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Autofocus for input"
},
"attribute": "autofocus",
"reflect": false,
"defaultValue": "false"
},
"tdsAriaLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Value to be used for the aria-label attribute. Can be used for announcing that readOnly prop is set to true."
},
"attribute": "tds-aria-label",
"reflect": false
}
};
}
static get states() {
return {
"focusInput": {}
};
}
static get events() {
return [{
"method": "tdsChange",
"name": "tdsChange",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Change event for the Text Field"
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "tdsInput",
"name": "tdsInput",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Input event for the Text Field"
},
"complexType": {
"original": "InputEvent",
"resolved": "InputEvent",
"references": {
"InputEvent": {
"location": "global",
"id": "global::InputEvent"
}
}
}
}, {
"method": "tdsFocus",
"name": "tdsFocus",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Focus event for the Text Field"
},
"complexType": {
"original": "FocusEvent",
"resolved": "FocusEvent",
"references": {
"FocusEvent": {
"location": "global",
"id": "global::FocusEvent"
}
}
}
}, {
"method": "tdsBlur",
"name": "tdsBlur",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Blur event for the Text Field"
},
"complexType": {
"original": "FocusEvent",
"resolved": "FocusEvent",
"references": {
"FocusEvent": {
"location": "global",
"id": "global::FocusEvent"
}
}
}
}];
}
static get methods() {
return {
"focusElement": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Method to handle focus",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
}