@postnord/web-components
Version:
PostNord Web Components
145 lines (141 loc) • 14 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-XKg-ydzH.js';
import { uuidv4 } from './index.js';
const pnTextareaCss = () => `${transformTag("pn-textarea")}{display:inline-flex;flex-direction:column}${transformTag("pn-textarea")} .pn-textarea{position:relative}${transformTag("pn-textarea")} .pn-textarea-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){${transformTag("pn-textarea")} .pn-textarea-label{transition-duration:0s;transition-delay:0s}}${transformTag("pn-textarea")} .pn-textarea-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}${transformTag("pn-textarea")} .pn-textarea-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${transformTag("pn-textarea")} .pn-textarea-label>span{font-size:0.875em}${transformTag("pn-textarea")} .pn-textarea-label[data-compact]>span{background-color:#ffffff;color:#2d2013}${transformTag("pn-textarea")} .pn-textarea-text{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em;text-align:left}${transformTag("pn-textarea")} .pn-textarea-text[role=alert]{color:#a70707}${transformTag("pn-textarea")} .pn-textarea-text[hidden]{display:none}${transformTag("pn-textarea")} .pn-textarea-element{width:100%;resize:none;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}${transformTag("pn-textarea")} .pn-textarea-element:-webkit-autofill,${transformTag("pn-textarea")} .pn-textarea-element:-webkit-autofill:hover,${transformTag("pn-textarea")} .pn-textarea-element:-webkit-autofill:focus,${transformTag("pn-textarea")} .pn-textarea-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${transformTag("pn-textarea")} .pn-textarea-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-textarea")} .pn-textarea-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${transformTag("pn-textarea")} .pn-textarea-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){${transformTag("pn-textarea")} .pn-textarea-element{transition-duration:0s;transition-delay:0s}}${transformTag("pn-textarea")} .pn-textarea-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${transformTag("pn-textarea")} .pn-textarea-element[data-compact]::placeholder{color:transparent}${transformTag("pn-textarea")} .pn-textarea-element[data-compact]:focus+.pn-textarea-label,${transformTag("pn-textarea")} .pn-textarea-element[data-compact]:not(:placeholder-shown)+.pn-textarea-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${transformTag("pn-textarea")} .pn-textarea-element::placeholder{color:#5e554a;font-weight:normal}${transformTag("pn-textarea")} .pn-textarea-element:hover{border-color:#005d92}${transformTag("pn-textarea")} .pn-textarea-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${transformTag("pn-textarea")} .pn-textarea-element::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${transformTag("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${transformTag("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${transformTag("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${transformTag("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-corner,${transformTag("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-button{display:none}${transformTag("pn-textarea")} .pn-textarea-element:read-only{border-color:#ffffff}${transformTag("pn-textarea")} .pn-textarea-element:disabled+.pn-textarea-label>span{background-color:#f3f2f2}${transformTag("pn-textarea")} .pn-textarea-element::-webkit-resizer{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M7%2017L17%207M12%2017L17%2012%22%20stroke%3D%22%23005D92%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:center}${transformTag("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-label{color:#005e41}${transformTag("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element{border-color:#005e41}${transformTag("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:hover{border-color:#002f24}${transformTag("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:focus-visible{background-color:#ffffff;border-color:#005e41;outline-color:#005e41}${transformTag("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:-webkit-autofill,${transformTag("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:-webkit-autofill:hover,${transformTag("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:-webkit-autofill:focus,${transformTag("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #edfbf3 inset;-webkit-text-fill-color:#2d2013}${transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-label{color:#a70707}${transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element{border-color:#a70707}${transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:hover{border-color:#500715}${transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:-webkit-autofill,${transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:-webkit-autofill:hover,${transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:-webkit-autofill:focus,${transformTag("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${transformTag("pn-textarea")} .pn-textarea[data-resize]>.pn-textarea-element{resize:vertical}`;
const PnTextarea = class {
constructor(hostRef) {
registerInstance(this, hostRef);
}
id = `pn-textarea-${uuidv4()}`;
idHelper = `${this.id}-text`;
idError = `${this.id}-error`;
get hostElement() { return getElement(this); }
/** The label describing the textarea. */
label;
/** Helper text that will appear underneath the textarea. Will be overwritten if you set an `error` string */
helpertext;
/** The textarea content, do not provide slotted content. @category Native attributes */
value = '';
/** HTML name. @category Native attributes */
name;
/** Placeholder for the textarea. @category Native attributes */
placeholder;
/** Set the associated form. @category Native attributes */
form;
/** Set the row count for the textarea. @category Native attributes */
rows = 2;
/** Set the col count for the textarea. @category Native attributes */
cols = 20;
/** Set the wrap control. @category Native attributes */
wrap = 'soft';
/** The maximum number of characters the user should be able to add, also adds a visible counter. @category Native attributes */
maxlength;
/** Allow the browser to autocomplete the textarea. @category Native attributes */
autocomplete = 'off';
/** Allow the browser to spellcheck the textarea. @category Native attributes */
spellcheck = false;
/** Allow the user to resize the textarea vertically. Handle width in your own layout. @category Native attributes */
resize = false;
/** Make the textarea required. @category Native attributes */
required = false;
/** Disable the textarea. @category Native attributes */
disabled = false;
/** Make the textarea readonly. @category Native attributes */
readonly = false;
/** Use the compact label variant. @since v7.21.0 @category Features */
compact = false;
/** Set the textarea as `valid`, will make the Label and focus rings green. @category Features */
valid = false;
/** Set the textarea as `invalid`, will make the Label and focus rings red. @category Features */
invalid = false;
/** Same as `invalid`, but will display the string as an error message under the textarea. @category Features */
error;
/** Set a custom ID for the textarea. @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 a custom ID for the textarea. @deprecated Use `pn-id` instead. @category HTML attributes */
textareaid;
handleId() {
this.idHelper = `${this.getId()}-helpertext`;
this.idError = `${this.getId()}-error`;
}
setVal(event) {
const value = event.target.value;
this.value = value;
}
hasHelperText() {
return this.helpertext?.length > 0 || this.checkSlottedHelper();
}
/** If any `error` text is present, either via prop/slot. */
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 || this.checkSlottedError();
}
checkSlottedHelper() {
return !!this.hostElement.querySelector('[slot=helpertext]');
}
checkSlottedError() {
return !!this.hostElement.querySelector('[slot=error]');
}
hideHelpertext() {
return this.hasErrorMessage() || !this.hasHelperText();
}
hideError() {
return !this.hasErrorMessage();
}
getId() {
return this.pnId || this.textareaid || this.id;
}
displayLabel() {
return !!this.label;
}
getAriaLabel() {
return !this.displayLabel() && !this.pnAriaLabelledby ? this.pnAriaLabel : null;
}
getAriaLabelledby() {
return !this.displayLabel() && !this.pnAriaLabel ? this.pnAriaLabelledby : null;
}
getAriaDescribedby() {
const list = [];
if (this.hasErrorMessage())
list.push(this.idError);
else if (this.hasHelperText())
list.push(this.idHelper);
return list.length ? list.join(' ') : null;
}
renderLabel() {
return (h("label", { class: "pn-textarea-label", htmlFor: this.getId(), "data-compact": this.compact }, h("span", null, this.label), this.maxlength >= 1 && h("span", null, `${this.value?.length || 0}/${this.maxlength}`)));
}
render() {
return (h(Host, { key: '30ea927b4d57c041164f7ccfd052121d3723591b' }, h("div", { key: '2c927468a5159cd2544af2bd351df2b45a5abf55', class: "pn-textarea", "data-valid": this.valid, "data-error": this.hasError(), "data-resize": this.resize }, !this.compact && this.renderLabel(), h("textarea", { key: '2f933bd8e3477c3f7010d676f4fde0f49e2ebc9e', class: "pn-textarea-element", id: this.getId(), value: this.value, name: this.name, placeholder: this.compact ? this.placeholder || ' ' : this.placeholder, rows: this.rows, cols: this.cols, wrap: this.wrap, autocomplete: this.autocomplete, spellcheck: this.spellcheck, maxlength: this.maxlength, required: this.required, disabled: this.disabled, readonly: this.readonly, "aria-label": this.getAriaLabel(), "aria-labelledby": this.getAriaLabelledby(), "aria-describedby": this.getAriaDescribedby(), "aria-invalid": this.hasError().toString(), "data-compact": this.compact, onInput: e => this.setVal(e) }), this.compact && this.renderLabel(), h("p", { key: '368de1a346ca5161b8e6da6170453cd68605e92c', id: this.idHelper, class: "pn-textarea-text", hidden: this.hideHelpertext() }, h("span", { key: '055d5ea03484c61e64bb674bad2a8bc5bffb253e' }, this.helpertext), h("slot", { key: '3782f2b397e46f3dd8e0d4253b1071b1d98ffb65', name: "helpertext" })), h("p", { key: '7a092d28df13950e4fba9e4df46c8e6176a70ae3', id: this.idError, class: "pn-textarea-text", role: "alert", hidden: this.hideError() }, h("span", { key: '49ef6664c21f2a4281dd8f8919cfa0d66d7554fb' }, this.error), h("slot", { key: '51819bfeff00a85706a4c60de35926e65e3cd22d', name: "error" })))));
}
static get watchers() { return {
"textareaid": [{
"handleId": 0
}],
"pnId": [{
"handleId": 1
}]
}; }
};
PnTextarea.style = pnTextareaCss();
export { PnTextarea as pn_textarea };