@postnord/web-components
Version:
PostNord Web Components
365 lines (357 loc) • 23.8 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
'use strict';
var index = require('./index-DWu-2oJc.js');
var index$1 = require('./index.cjs.js');
var alert_exclamation_circle = require('./alert_exclamation_circle-BiBEJK9P.js');
var check = require('./check-CQU2BD5S.js');
var close = require('./close-Bn5ieKko.js');
const icon$1 = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M1.81 11.727a1 1 0 0 1 1.363.378c.29.513.835 1.343 1.7 2.174a9.5 9.5 0 0 0 3.457 2.128c1.03.361 2.244.593 3.67.593s2.64-.232 3.67-.593a9.5 9.5 0 0 0 3.458-2.128 9.7 9.7 0 0 0 1.698-2.174 1 1 0 0 1 1.742.984 11.5 11.5 0 0 1-1.445 2.001l1.686 2.322a1 1 0 1 1-1.618 1.175l-1.537-2.116a11.4 11.4 0 0 1-2.453 1.48l.763 2.785a1 1 0 1 1-1.928.528l-.73-2.661c-.993.251-2.093.397-3.306.397s-2.313-.146-3.306-.397l-.73 2.661a1 1 0 1 1-1.928-.528l.763-2.786a11.4 11.4 0 0 1-2.453-1.479L2.81 18.587a1 1 0 0 1-1.618-1.175l1.686-2.322a11.5 11.5 0 0 1-1.445-2 1 1 0 0 1 .379-1.363" clip-rule="evenodd"/></svg>';
const preview_off = icon$1;
const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 7c-5.382 0-7.908 3.33-8.758 4.775a.43.43 0 0 0 0 .45C4.092 13.67 6.618 17 12 17s7.908-3.33 8.758-4.775a.43.43 0 0 0 0-.45C19.908 10.33 17.382 7 12 7M1.518 10.761C2.55 9.005 5.618 5 12 5s9.45 4.005 10.482 5.761a2.43 2.43 0 0 1 0 2.478C21.45 14.995 18.382 19 12 19s-9.45-4.005-10.482-5.761a2.43 2.43 0 0 1 0-2.478M8 12a4 4 0 1 1 8 0 4 4 0 0 1-8 0m4-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4" clip-rule="evenodd"/></svg>';
const preview_on = icon;
const translations = {
SHOW: {
sv: 'Visa',
en: 'Show',
da: 'At vise',
fi: 'Näytä',
no: 'Vise',
},
HIDE: {
sv: 'Dölj',
en: 'Hide',
da: 'Skjule',
fi: 'Piilottaa',
no: 'Gjemme seg',
},
CLEAR: {
sv: 'Rensa',
en: 'Clear',
da: 'Klar',
fi: 'Asia selvä',
no: 'Klar',
},
};
const pnInputCss = () => `${index.transformTag("pn-input")}{display:inline-flex;flex-direction:column}${index.transformTag("pn-input")} .pn-input{--pn-input-offset-left:0em;--pn-input-offset-right:0em}${index.transformTag("pn-input")} .pn-input-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${index.transformTag("pn-input")} .pn-input-label{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-input")} .pn-input-label[data-compact]{position:absolute;top:1.5625em;left:calc(var(--pn-input-offset-left, 0px) + 0.75em + 0.0625em);margin:0;pointer-events:none;align-items:center;height:1.5em;max-width:calc(100% - (var(--pn-input-offset-left, 0px) + 0.75em) - (var(--pn-input-offset-right, 0px) + 0.75em));transform:translateY(-50%) scale(1) translateZ(0);transform-origin:0 0;transition-delay:0.2s}${index.transformTag("pn-input")} .pn-input-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${index.transformTag("pn-input")} .pn-input-label>span{font-size:0.875em}${index.transformTag("pn-input")} .pn-input-group{position:relative}${index.transformTag("pn-input")} .pn-input-element{width:100%;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em calc(0.75em + var(--pn-input-offset-right)) 0.75em calc(0.75em + var(--pn-input-offset-left));font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}${index.transformTag("pn-input")} .pn-input-element:-webkit-autofill,${index.transformTag("pn-input")} .pn-input-element:-webkit-autofill:hover,${index.transformTag("pn-input")} .pn-input-element:-webkit-autofill:focus,${index.transformTag("pn-input")} .pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${index.transformTag("pn-input")} .pn-input-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${index.transformTag("pn-input")} .pn-input-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${index.transformTag("pn-input")} .pn-input-element{transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${index.transformTag("pn-input")} .pn-input-element{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-input")} .pn-input-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${index.transformTag("pn-input")} .pn-input-element[data-compact]::placeholder{color:transparent}${index.transformTag("pn-input")} .pn-input-element[data-compact]:focus+.pn-input-label,${index.transformTag("pn-input")} .pn-input-element[data-compact]:not(:placeholder-shown)+.pn-input-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${index.transformTag("pn-input")} .pn-input-element::placeholder{color:#5e554a;font-weight:normal}${index.transformTag("pn-input")} .pn-input-element:hover{border-color:#005d92}${index.transformTag("pn-input")} .pn-input-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${index.transformTag("pn-input")} .pn-input-element:read-only{border-color:#ffffff}${index.transformTag("pn-input")} .pn-input-element:disabled~.pn-input-eyecandy>${index.transformTag("pn-icon")} .pn-icon-svg>path{fill:#969087}${index.transformTag("pn-input")} .pn-input-element::-webkit-calendar-picker-indicator{visibility:hidden;display:none !important}${index.transformTag("pn-input")} .pn-input-element::-webkit-textfield-decoration-container,${index.transformTag("pn-input")} .pn-input-element::-webkit-search-cancel-button,${index.transformTag("pn-input")} .pn-input-element::-webkit-inner-spin-button,${index.transformTag("pn-input")} .pn-input-element::-webkit-outer-spin-button,${index.transformTag("pn-input")} .pn-input-element::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}${index.transformTag("pn-input")} .pn-input-element[type=number]{appearance:textfield}${index.transformTag("pn-input")} .pn-input-eyecandy{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:0.5em;height:1.5em}${index.transformTag("pn-input")} .pn-input-eyecandy[data-prefix]{left:0.75em}${index.transformTag("pn-input")} .pn-input-eyecandy[data-suffix]{right:0.75em}${index.transformTag("pn-input")} .pn-input-text{color:#5e554a;font-weight:400;line-height:1.5em}${index.transformTag("pn-input")} .pn-input-message{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${index.transformTag("pn-input")} .pn-input-message[hidden],${index.transformTag("pn-input")} .pn-input-message>span[hidden]{display:none}${index.transformTag("pn-input")} .pn-input[data-error]>.pn-input-label{color:#a70707}${index.transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element{border-color:#a70707}${index.transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:hover{border-color:#500715}${index.transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${index.transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill,${index.transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill:hover,${index.transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill:focus,${index.transformTag("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${index.transformTag("pn-input")} .pn-input[data-error]>.pn-input-message[role=alert]{color:#a70707}${index.transformTag("pn-input")} .pn-input[data-valid]>.pn-input-label{color:#005e41}${index.transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element{border-color:#005e41}${index.transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:hover{border-color:#002f24}${index.transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:focus-visible{background-color:#ffffff;border-color:#005e41;outline-color:#005e41}${index.transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill,${index.transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill:hover,${index.transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill:focus,${index.transformTag("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #edfbf3 inset;-webkit-text-fill-color:#2d2013}`;
const PnInput = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
id = `pn-input-${index$1.uuidv4()}`;
idHelper = `${this.id}-helper`;
idError = `${this.id}-error`;
prefix;
suffix;
mo;
get hostElement() { return index.getElement(this); }
offsetLeft = 0;
offsetRight = 0;
showPassword = false;
togglePassword() {
this.showPassword = !this.showPassword;
}
/** Text label placed above the input field. */
label;
/** Text message placed underneath the input field. */
helpertext;
/**
* Set the language manually for the translations of show/hide/clear button text.
* Not needed if you have the pntopbar on the page.
**/
language = undefined;
/** Set the value of the input. @category Native attributes */
value = '';
/** pn-input supports: `text`, `password`, `url`, `tel`, `search`, `number` & `email`. @category Native attributes */
type = 'text';
/**
* HTML input name. Setting a name will help the browser understand what type of data the input have
* and can better assist with autofill data based on previous entires much better.
* @category Native attributes
**/
name;
/**
* Provide a placeholder text. Remember that this is no replacement for a label.
* The placeholder should be a nice addition to the label/helpertext, not important information.
*
* @category Native attributes
**/
placeholder;
/**
* Let the browser know what type of autocorrects the input should use.
* Works much better if a `name` and `pn-id` is supplied.
* @see {@link name}
* @see {@link inputid}
*
* @category Native attributes
*/
autocomplete;
/** The maximum number of characters the user should be able to add, also adds a visible counter. @category Native attributes */
maxlength;
/**
* Hint the browser about what type of virtual keyboard should be used.
* The browser will be able to decide this on its own most of the time,
* especially if you use the `type`, `name` and `inputid` props.
*
* Leave empty or with a `''` value if you want the browsers default behaviour (`text`).
*
* @category Native attributes
**/
inputmode;
/** Point to a datalist element for this input. @category Native attributes */
list;
/** Pattern prop. @category Native attributes */
pattern;
/** Set the `min` value of the `number` input. @category Native attributes */
min;
/** Set the `max` value of the `number` input. @category Native attributes */
max;
/** Set a `step` for the number input. @category Native attributes */
step;
/** Set the input as `required`. @category Native attributes */
required = false;
/** Set the input as `readonly`. @category Native attributes */
readonly = false;
/** Set the input as `disabled`. @category Native attributes */
disabled = false;
/**
* Use the compact label variant. The `placeholder` you provide will not be visible if used at the same time.
* @since v7.21.0
* @category Features
*/
compact = false;
/**
* Select an icon to display before the input field value.
* `icon` takes precedence over the `text-prefix` prop.
*
* @see {@link textPrefix}
* @category Features
**/
icon;
/**
* Set a small text before the input field value.
* Cannot be used together with an `icon` at the same time.
*
* @see {@link icon}
* @see {@link textSuffix}
* @category Features
**/
textPrefix;
/**
* Set a small text after the input field value.
* Cannot be used with the `text-prefix` prop at the same time.
*
* @see {@link textPrefix}
* @category Features
**/
textSuffix;
/** Set the input as `valid`. Provides a green color and a check icon. @category Features */
valid = false;
/**
* Set the input as `invalid`. Provides a red color and red warning icon.
* @see{@link error Provide an error message.}
* @category Features
**/
invalid = false;
/**
* Set the input as `invalid` and display an error message (applies the same style as `invalid`).
*
* Error message; will take precedence over helpertext if both are provided.
* @see{@link invalid Set invalid without an error message.}
* @category Features
**/
error;
/** Set a custom ID for the input (default is a generated UUID). @since v7.25.0 @category HTML attributes */
pnId;
/**
* Provide the label via an aria attribute.
* We strongly recommend you use the `label` prop instead.
* @since v7.25.0
* @category HTML attributes
*/
pnAriaLabel;
/**
* Provide the label from another element via its ID.
* We strongly recommend you use the `label` prop instead.
* @since v7.25.0
* @category HTML attributes
*/
pnAriaLabelledby;
/** Set the ID of what this input controls. @since v7.25.0 @category HTML attributes */
pnAriaControls;
/** Set a custom ID for the input (default is a generated UUID). @deprecated Use `pn-id` instead. @category HTML attributes */
inputid;
/** While you can use the `aria-label`, using a `label` is far more accessible. @deprecated Use `pn-aria-label` instead. @category HTML attributes */
arialabel;
/** Set the ID of what this input controls. @deprecated Use `pn-aria-controls` instead. @category HTML attributes */
ariacontrols;
handleOffset() {
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;
});
}
handleId() {
this.idHelper = `${this.getId()}-helper`;
this.idError = `${this.getId()}-error`;
}
connectedCallback() {
this.mo = new MutationObserver(() => {
index.forceUpdate(this.hostElement);
this.handleOffset();
});
this.mo.observe(this.hostElement, { childList: true, subtree: true });
}
disconnectedCallback() {
if (this.mo)
this.mo.disconnect();
}
async componentWillLoad() {
if (this.language === undefined)
await index$1.awaitTopbar(this.hostElement);
}
componentDidLoad() {
this.handleOffset();
}
getId() {
return this.pnId || this.inputid || this.id;
}
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 || index$1.en];
}
hasHelperText() {
return this.helpertext?.length > 0 || this.checkSlottedHelper();
}
hasErrorMessage() {
return this.error?.length > 0 || this.checkSlottedError();
}
/** If any error is active, either via the prop `invalid` or `error` prop/slot. */
hasError() {
return this.hasErrorMessage() || this.invalid;
}
hideHelpertext() {
return this.hasErrorMessage() || !this.hasHelperText();
}
hideError() {
return !this.hasErrorMessage();
}
checkSlottedHelper() {
return !!this.hostElement.querySelector('[slot=helpertext]');
}
checkSlottedError() {
return !!this.hostElement.querySelector('[slot=error]');
}
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);
}
passwordText() {
return this.translate(this.showPassword ? 'HIDE' : 'SHOW');
}
/** Check if there is a valid or error state active. Returns false if neither is true. */
displayState() {
return this.valid || this.hasError();
}
/**
* Returns the correct icon for the current state (valid or error).
* Defaults to error icon.
* @see {@link displayState}
*/
stateIcon() {
if (this.valid)
return check.check;
return alert_exclamation_circle.alert_exclamation_circle;
}
/**
* Returns the correct color for the validation icon. Defaults to red.
* @see {@link displayState}
*/
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';
}
showClear() {
if (this.disabled || this.readonly)
return false;
return this.type === 'search' && !!this.value?.length;
}
validLabel() {
return this.label?.length > 0 || this.maxlength >= 1;
}
useLabel() {
return this.validLabel() && !this.compact;
}
/** Compact label must be positioned after the input element in order to work. */
useCompactLabel() {
return this.validLabel() && this.compact;
}
displayLabel() {
return !!this.label;
}
getAriaLabel() {
return !this.displayLabel() && !this.pnAriaLabelledby ? this.pnAriaLabel : null;
}
getAriaLabelledby() {
return !this.displayLabel() && !(this.pnAriaLabel || this.arialabel) ? this.pnAriaLabelledby : null;
}
getAriaDescribedby() {
if (this.hasErrorMessage())
return this.idError;
else if (this.hasHelperText())
return this.idHelper;
return null;
}
renderLabel() {
return (index.h("label", { htmlFor: this.getId(), class: "pn-input-label", "data-compact": this.compact }, this.label && index.h("span", null, this.label), this.maxlength >= 0 && index.h("span", null, `${this.value.length}/${this.maxlength}`)));
}
render() {
return (index.h(index.Host, { key: '800f4fb8490656e28657f7a4a041ba0c6dc46af2' }, index.h("div", { key: '8defa078a3e541509bc17278751f8e59f59f3bd7', class: "pn-input", "data-valid": this.valid, "data-error": this.hasError(), style: {
'--pn-input-offset-left': `${this.offsetLeft}px`,
'--pn-input-offset-right': `${this.offsetRight}px`,
} }, this.useLabel() && this.renderLabel(), index.h("div", { key: 'dc01fb7fdb2a60ee89473f0152d833243be4ff8d', class: "pn-input-group" }, index.h("input", { key: '32f63d4aa1c6edd2d10f8876ebd3371cff366eb7', type: this.getInputType(), id: this.getId(), class: "pn-input-element", name: this.name, placeholder: this.compact ? this.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.getAriaLabel(), "aria-labelledby": this.getAriaLabelledby(), "aria-describedby": this.getAriaDescribedby(), "aria-controls": this.pnAriaControls || this.ariacontrols, "aria-invalid": this.hasError()?.toString(), "data-compact": this.compact, "data-value": this.value?.length > 0, onInput: e => this.setVal(e) }), this.useCompactLabel() && this.renderLabel(), index.h("div", { key: 'b52d9bfa61569635f422fedc22edd09c768ab9d8', class: "pn-input-eyecandy", "data-prefix": true, ref: el => (this.prefix = el) }, !!this.icon && index.h("pn-icon", { key: 'e5035273e663855094ba88ed0b485a4e8ffed56c', icon: this.icon, "aria-hidden": "true" }), this.showPrefix() && index.h("span", { key: '1d0e5355c5dbfecf3dbb693589726a233e3b7df6', class: "pn-input-text" }, this.textPrefix)), index.h("div", { key: 'e1faa82f19dcfdb6c427d5d2967bfb6694508675', class: "pn-input-eyecandy", "data-suffix": true, ref: el => (this.suffix = el) }, this.showSuffix() && index.h("span", { key: '4c5ecf7c19bf64eea77b21b05d9ffe491bf4b91c', class: "pn-input-text" }, this.textSuffix), this.displayState() && index.h("pn-icon", { key: 'f7014e0c31faf3c563c846e4a7061c6f4b35a64a', "aria-hidden": "true", icon: this.stateIcon(), color: this.stateColor() }), this.isPassword() && (index.h("pn-button", { key: '21518c4f16245de370fcba302b177cfe04e91904', icon: this.showPassword ? preview_on : preview_off, iconOnly: true, arialabel: this.passwordText(), small: true, appearance: "light", variant: "borderless", onClick: () => this.togglePassword() })), this.showClear() && (index.h("pn-button", { key: '60263a255ee8c8d3ed72ea89a26abfbe9be11d0d', icon: close.close, iconOnly: true, arialabel: this.translate('CLEAR'), small: true, appearance: "light", variant: "borderless", onClick: () => this.clearVal() })))), index.h("p", { key: 'd23165556ffcdbfcf7229a04f5c1ea8686432c97', id: this.idHelper, class: "pn-input-message", hidden: this.hideHelpertext() }, !!this.helpertext && index.h("span", { key: 'b7e31855d677953bbc7a4f65cb0b26a5eac8887b' }, this.helpertext), index.h("slot", { key: 'a6bbaeceb31e2cc38d1e110b900e13b4f0957c6e', name: "helpertext" })), index.h("p", { key: '3668fbc1a512f92d3f5a2c6f1f7d86cf04df148b', id: this.idError, class: "pn-input-message", role: "alert", hidden: this.hideError() }, !!this.error && index.h("span", { key: 'c14fb6ab8e17c7d17813c83c0993f95d079f8274' }, this.error), index.h("slot", { key: '75ba01e945315e6a3bbf2f5e5ac34c73fe7ab57f', name: "error" })))));
}
static get watchers() { return {
"textPrefix": [{
"handleOffset": 0
}],
"textSuffix": [{
"handleOffset": 0
}],
"inputid": [{
"handleId": 0
}],
"pnId": [{
"handleId": 1
}]
}; }
};
PnInput.style = pnInputCss();
exports.pn_input = PnInput;