@postnord/web-components
Version:
PostNord Web Components
792 lines (791 loc) • 32.8 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { h, Host } from "@stencil/core";
import { uuidv4, en, awaitTopbar } from "../../../index";
import { alert_exclamation_circle, check, close, preview_on, preview_off } from "pn-design-assets/pn-assets/icons.js";
import { translations } from "./translations";
/**
* The `pn-input` is a regular `input` but styled. This means you can use native events to listen to the changes.
* Always use the `label` prop to make sure the input is accessible.
*
* @nativeInput Use the `input` event to listen to content being modified by the user. It is emitted everytime a user writes or removes content in the input.
* @nativeChange The `change` event is emitted when the input loses focus, the user clicks `Enter` or makes a selection (such as auto complete or suggestions).
*
* @slot helpertext - You can use this slot instead of the prop `helpertext`. Recommended, only if you need to include additional HTML markup.
* Such as a `pn-text-link`. Use a `span` element to wrap the text and link.
* @slot error - You can use this slot instead of the prop `error`. Recommended, only if you need to include additional HTML markup.
* Such as a `pn-text-link`. Use a `span` element to wrap the text and link.
*/
export class PnInput {
constructor() {
this.offsetLeft = 0;
this.offsetRight = 0;
this.showHelperSlot = false;
this.showErrorSlot = false;
this.showPassword = false;
this.label = undefined;
this.helpertext = undefined;
this.inputid = this.id;
this.value = '';
this.language = null;
this.icon = undefined;
this.textPrefix = undefined;
this.textSuffix = undefined;
this.type = 'text';
this.name = undefined;
this.placeholder = undefined;
this.autocomplete = undefined;
this.maxlength = undefined;
this.inputmode = undefined;
this.list = undefined;
this.pattern = undefined;
this.min = undefined;
this.max = undefined;
this.step = undefined;
this.arialabel = undefined;
this.ariacontrols = undefined;
this.required = false;
this.disabled = false;
this.readonly = false;
this.valid = false;
this.invalid = false;
this.error = undefined;
}
id = `pn-input-${uuidv4()}`;
idMessage = `${this.id}-message`;
prefix;
suffix;
mo;
hostElement;
togglePassword() {
this.showPassword = !this.showPassword;
}
handleOffset() {
requestAnimationFrame(() => requestAnimationFrame(() => {
const left = this.prefix?.clientWidth ? this.prefix.clientWidth + 8 : 0;
const right = this.suffix?.clientWidth ? this.suffix.clientWidth + 8 : 0;
this.offsetLeft = left;
this.offsetRight = right;
}));
}
handleMessage() {
this.checkSlottedHelper();
this.checkSlottedError();
}
async componentWillLoad() {
this.handleMessage();
if (this.inputid !== this.id)
this.idMessage = `${this.inputid}-message`;
if (this.language === null)
await awaitTopbar(this.hostElement);
}
componentDidLoad() {
this.handleOffset();
if (this.mo)
this.mo.disconnect();
this.mo = new MutationObserver(() => {
this.handleOffset();
this.handleMessage();
});
this.mo.observe(this.hostElement, {
subtree: true,
childList: true,
});
}
setVal(event) {
const target = event.composedPath?.()[0];
this.value = target.value;
}
clearVal() {
const inputClear = new InputEvent('input', { bubbles: true, data: '' });
const input = this.hostElement.querySelector('input');
this.value = '';
input.focus();
input.value = this.value;
input.dispatchEvent(inputClear);
}
translate(prop) {
return translations?.[prop]?.[this.language || en];
}
hasHelperText() {
return this.helpertext?.length > 0 || this.showHelperSlot;
}
hasErrorMessage() {
return this.error?.length > 0 || this.showErrorSlot;
}
/** If any error is active, either via the prop `invalid` or `error` prop/slot. */
hasError() {
return this.hasErrorMessage() || this.invalid || this.showErrorSlot;
}
/** If any helpertext or error message is active. Checks both props and slots. */
hasMessage() {
return this.hasHelperText() || this.hasErrorMessage();
}
checkSlottedHelper() {
const slottedHelper = this.hostElement.querySelector('[slot=helpertext]')?.textContent;
this.showHelperSlot = !!slottedHelper?.length;
}
checkSlottedError() {
const slottedError = this.hostElement.querySelector('[slot=error]')?.textContent;
this.showErrorSlot = !!slottedError?.length;
}
getInputType() {
const types = ['text', 'password', 'url', 'tel', 'search', 'number', 'email'];
return types.includes(this.type) && !this.showPassword ? this.type : 'text';
}
isPassword() {
if (this.disabled)
return false;
return this.type === 'password' || (this.type === 'text' && this.showPassword);
}
isSearch() {
if (this.disabled)
return false;
return this.type === 'search' && !!this.value?.length;
}
passwordText() {
return this.translate(this.showPassword ? 'HIDE' : 'SHOW');
}
/** Check if there is a valid or error state active. Returns false if neither is true. */
stateDisplay() {
return this.valid || this.hasError();
}
/**
* Returns the correct icon for the current state (valid or error).
* Defaults to error icon.
* @see {@link stateDisplay}
*/
stateIcon() {
if (this.valid)
return check;
return alert_exclamation_circle;
}
/**
* Returns the correct color for the validation icon. Defaults to red.
* @see {@link stateDisplay}
*/
stateColor() {
if (this.valid)
return 'green700';
return 'warning';
}
showPrefix() {
return this.textPrefix && !this.icon;
}
showSuffix() {
return !this.showPrefix() && !!this.textSuffix?.length && !this.isPassword() && this.type !== 'search';
}
render() {
return (h(Host, { key: '2bc031e2fc0f7cd478ff02ab4bb56adc5f4b46c0' }, h("div", { key: 'dc3a9890f53bd38e47447ac430811be4d14693fe', class: "pn-input", "data-valid": this.valid, "data-error": this.hasError() }, (this.label || this.maxlength >= 1) && (h("label", { key: '7c214ac52d5b1a8cc7386a73ac4f630f78528049', htmlFor: this.inputid, class: "pn-input-label" }, this.label && h("span", { key: '905fa8707cbfa3a23eddad91f8ce5d98433d8f5f' }, this.label), this.maxlength >= 0 && h("span", { key: '6bc0675d6f15ee8d35424edc03e0c2fbbf7835ca' }, `${this.value.length}/${this.maxlength}`))), h("div", { key: '917e726163fd0d954306ae7b3e4dfbb88e3a1672', class: "pn-input-group" }, h("input", { key: 'd8fdb828f60e1401a87dfd1166fa7b556502f03a', type: this.getInputType(), id: this.inputid, class: "pn-input-element", name: this.name, placeholder: this.placeholder, autocomplete: this.autocomplete, maxlength: this.maxlength, list: this.list, pattern: this.pattern, min: this.min, max: this.max, step: this.step, value: this.value, inputmode: this.inputmode, disabled: this.disabled, required: this.required, readonly: this.readonly, "aria-label": this.arialabel, "aria-describedby": this.hasMessage() ? this.idMessage : null, "aria-controls": this.ariacontrols, "aria-invalid": this.hasError()?.toString(), style: {
'--pn-input-offset-left': `${this.offsetLeft}px`,
'--pn-input-offset-right': `${this.offsetRight}px`,
}, onInput: e => this.setVal(e) }), h("div", { key: 'e94ec9cc3a31ab98e4c065b3dfbe1175b98856ad', class: "pn-input-eyecandy", "data-prefix": true, ref: el => (this.prefix = el) }, !!this.icon && h("pn-icon", { key: '8706a6c62500d9f4860c821f140f392300713433', icon: this.icon, "aria-hidden": "true" }), this.showPrefix() && h("span", { key: 'fe78515f28e209423b64364c11f8a639ddb9a190', class: "pn-input-text" }, this.textPrefix)), h("div", { key: '48cd35cb9de70878cabeab034912ef0e823a5889', class: "pn-input-eyecandy", "data-suffix": true, ref: el => (this.suffix = el) }, this.showSuffix() && h("span", { key: '0b4f5bec4bfbf736716c08ff16b3c8f8827786d9', class: "pn-input-text" }, this.textSuffix), this.stateDisplay() && h("pn-icon", { key: 'a6984b78251c0430f5eb43f4761d8ff12173dee2', "aria-hidden": "true", icon: this.stateIcon(), color: this.stateColor() }), this.isPassword() && (h("pn-button", { key: 'dde16f9148ec4a23482ae15cd20249a5f1cf622d', icon: this.showPassword ? preview_on : preview_off, iconOnly: true, arialabel: this.passwordText(), small: true, appearance: "light", variant: "borderless", onClick: () => this.togglePassword() })), this.isSearch() && (h("pn-button", { key: '0b9ceab2669930332d54eac6e67ef4eddc913a3a', icon: close, iconOnly: true, arialabel: this.translate('CLEAR'), small: true, appearance: "light", variant: "borderless", onClick: () => this.clearVal() })))), h("p", { key: '3ca0b7bbf296d2545c30f501973e00d1f3105971', class: "pn-input-message", id: this.idMessage, role: this.hasErrorMessage() ? 'alert' : null, hidden: !this.hasMessage() }, this.hasHelperText() && !this.hasError() && h("span", { key: '4e01f516a3e607ebb693e11557536709e0b0c4ac', class: "pn-input-helper" }, this.helpertext), h("span", { key: '7a7b1fc60f2fc479b13eb17f77d397dafbe9670a', class: "pn-input-helper-slot", hidden: !this.showHelperSlot || this.hasError() }, h("slot", { key: '7fbf45a720fa99a002e18eee7c13a9139447d3dc', name: "helpertext" })), this.hasErrorMessage() && h("span", { key: '5a8407a45b84b9cccac81729ec9858265a033760', class: "pn-input-error" }, this.error), h("span", { key: 'f3929bdf3e0b0986c82ec59959770cba462748e0', class: "pn-input-error-slot", hidden: !this.showErrorSlot }, h("slot", { key: 'e932cda8b4b4b162baf53234edafd82a94366436', name: "error" }))))));
}
static get is() { return "pn-input"; }
static get originalStyleUrls() {
return {
"$": ["pn-input.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-input.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Text label placed above the input field."
},
"attribute": "label",
"reflect": false
},
"helpertext": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Text message placed underneath the input field."
},
"attribute": "helpertext",
"reflect": false
},
"inputid": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Provide a unique HTML id to connect the input with the label.\nA unique uuid ID will be generated if this field is left empty."
},
"attribute": "inputid",
"reflect": false,
"defaultValue": "this.id"
},
"value": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set the value of the input."
},
"attribute": "value",
"reflect": false,
"defaultValue": "''"
},
"language": {
"type": "string",
"mutable": false,
"complexType": {
"original": "PnLanguages",
"resolved": "\"\" | \"da\" | \"en\" | \"fi\" | \"no\" | \"sv\"",
"references": {
"PnLanguages": {
"location": "import",
"path": "@/index",
"id": "src/index.ts::PnLanguages"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set the language manually for the translations of show/hide/clear button text.\nNot needed if you have the pntopbar on the page."
},
"attribute": "language",
"reflect": false,
"defaultValue": "null"
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "see",
"text": "{@link textPrefix }"
}, {
"name": "category",
"text": "Visual"
}],
"text": "Select an icon to display before the input field value.\n`icon` takes precedence over the `text-prefix` prop."
},
"attribute": "icon",
"reflect": false
},
"textPrefix": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "see",
"text": "{@link icon }"
}, {
"name": "see",
"text": "{@link textSuffix }"
}, {
"name": "category",
"text": "Visual"
}],
"text": "Set a small text before the input field value.\nCannot be used together with an `icon` at the same time."
},
"attribute": "text-prefix",
"reflect": false
},
"textSuffix": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "see",
"text": "{@link textPrefix }"
}, {
"name": "category",
"text": "Visual"
}],
"text": "Set a small text after the input field value.\nCannot be used with the `text-prefix` prop at the same time."
},
"attribute": "text-suffix",
"reflect": false
},
"type": {
"type": "string",
"mutable": true,
"complexType": {
"original": "'text' | 'password' | 'url' | 'tel' | 'search' | 'number' | 'email' | ''",
"resolved": "\"\" | \"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML input"
}],
"text": "pn-input supports: `text`, `password`, `url`, `tel`, `search`, `number` & `email`."
},
"attribute": "type",
"reflect": false,
"defaultValue": "'text'"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML input"
}],
"text": "HTML input name. Setting a name will help the browser understand what type of data the input have\nand can better assist with autofill data based on previous entires much better."
},
"attribute": "name",
"reflect": false
},
"placeholder": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML input"
}],
"text": "Provide a placeholder text. Remember that this is no replacement for a label.\nThe placeholder should be a nice addition to the label/helpertext, not important information."
},
"attribute": "placeholder",
"reflect": false
},
"autocomplete": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "see",
"text": "{@link name }"
}, {
"name": "see",
"text": "{@link inputid }"
}, {
"name": "category",
"text": "HTML input"
}],
"text": "Let the browser know what type of autocorrects the input should use.\nWorks much better if a `name` and `inputid` is supplied."
},
"attribute": "autocomplete",
"reflect": false
},
"maxlength": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "HTML input"
}],
"text": "The maximum number of characters the user should be able to add, also adds a visible counter."
},
"attribute": "maxlength",
"reflect": false
},
"inputmode": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'text' | 'none' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'",
"resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML input"
}],
"text": "Hint the browser about what type of virtual keyboard should be used.\nThe browser will be able to decide this on its own most of the time,\nespecially if you use the `type`, `name` and `inputid` props.\n\nLeave empty or with a `''` value if you want the browsers default behaviour (`text`)."
},
"attribute": "inputmode",
"reflect": false
},
"list": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML input"
}],
"text": "Point to a datalist element for this input."
},
"attribute": "list",
"reflect": false
},
"pattern": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML input"
}],
"text": "Pattern prop."
},
"attribute": "pattern",
"reflect": false
},
"min": {
"type": "any",
"mutable": false,
"complexType": {
"original": "number | string",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML input"
}],
"text": "Set the `min` value of the `number` input."
},
"attribute": "min",
"reflect": false
},
"max": {
"type": "any",
"mutable": false,
"complexType": {
"original": "number | string",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML input"
}],
"text": "Set the `max` value of the `number` input."
},
"attribute": "max",
"reflect": false
},
"step": {
"type": "any",
"mutable": false,
"complexType": {
"original": "number | string",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML input"
}],
"text": "Set a `step` for the number input."
},
"attribute": "step",
"reflect": false
},
"arialabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML input"
}],
"text": "While you can use the `aria-label`, using a `label` is far more accessible."
},
"attribute": "arialabel",
"reflect": false
},
"ariacontrols": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML input"
}],
"text": "Set the ID of what this input controls."
},
"attribute": "ariacontrols",
"reflect": false
},
"required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Set the input as `required`."
},
"attribute": "required",
"reflect": false,
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Set the input as `disabled`."
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"readonly": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Set the input as `readonly`."
},
"attribute": "readonly",
"reflect": false,
"defaultValue": "false"
},
"valid": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Validation"
}],
"text": "Set the input as `valid`. Provides a green color and a check icon."
},
"attribute": "valid",
"reflect": false,
"defaultValue": "false"
},
"invalid": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "see",
"text": "{@link error Provide an error message.}"
}, {
"name": "category",
"text": "Validation"
}],
"text": "Set the input as `invalid`. Provides a red color and red warning icon."
},
"attribute": "invalid",
"reflect": false,
"defaultValue": "false"
},
"error": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "see",
"text": "{@link invalid Set invalid without an error message.}"
}, {
"name": "category",
"text": "Validation"
}],
"text": "Set the input as `invalid` and display an error message (applies the same style as `invalid`).\n\nError message; will take precedence over helpertext if both are provided."
},
"attribute": "error",
"reflect": false
}
};
}
static get states() {
return {
"offsetLeft": {},
"offsetRight": {},
"showHelperSlot": {},
"showErrorSlot": {},
"showPassword": {}
};
}
static get elementRef() { return "hostElement"; }
static get watchers() {
return [{
"propName": "textPrefix",
"methodName": "handleOffset"
}, {
"propName": "textSuffix",
"methodName": "handleOffset"
}, {
"propName": "helpertext",
"methodName": "handleMessage"
}, {
"propName": "error",
"methodName": "handleMessage"
}];
}
}
//# sourceMappingURL=pn-input.js.map