@postnord/web-components
Version:
PostNord Web Components
101 lines (96 loc) • 8.16 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { u as uuidv4 } from './helpers.js';
const pnTextareaCss = "pn-textarea{display:inline-flex;flex-direction:column}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;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-textarea .pn-textarea-label{transition-duration:0s;transition-delay:0s}}pn-textarea .pn-textarea-label>span{font-size:0.875em}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}pn-textarea .pn-textarea-text>pn-icon{margin-right:0.25em}pn-textarea .pn-textarea-element{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;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);width:100%;resize:none}pn-textarea .pn-textarea-element:-webkit-autofill,pn-textarea .pn-textarea-element:-webkit-autofill:hover,pn-textarea .pn-textarea-element:-webkit-autofill:focus,pn-textarea .pn-textarea-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}pn-textarea .pn-textarea-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}@media (prefers-reduced-motion: reduce){pn-textarea .pn-textarea-element{transition-duration:0s;transition-delay:0s}}pn-textarea .pn-textarea-element::placeholder{color:#5e554a;font-weight:normal}pn-textarea .pn-textarea-element:hover{border-color:#005d92}pn-textarea .pn-textarea-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-textarea .pn-textarea-element::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}pn-textarea .pn-textarea-element::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}pn-textarea .pn-textarea-element::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}pn-textarea .pn-textarea-element::-webkit-scrollbar-thumb:hover{background-color:#5e554a}pn-textarea .pn-textarea-element::-webkit-scrollbar-corner,pn-textarea .pn-textarea-element::-webkit-scrollbar-button{display:none}pn-textarea .pn-textarea-element:read-only{border-color:#ffffff}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}pn-textarea .pn-textarea[data-valid]>.pn-textarea-label{color:#005e41}pn-textarea .pn-textarea[data-valid]>.pn-textarea-element{border-color:#005e41}pn-textarea .pn-textarea[data-valid]>.pn-textarea-element:hover{border-color:#002f24}pn-textarea .pn-textarea[data-valid]>.pn-textarea-element:focus-visible{background-color:#ffffff;border-color:#005e41;outline-color:#005e41}pn-textarea .pn-textarea[data-error]>.pn-textarea-label{color:#a70707}pn-textarea .pn-textarea[data-error]>.pn-textarea-element{border-color:#a70707}pn-textarea .pn-textarea[data-error]>.pn-textarea-element:hover{border-color:#500715}pn-textarea .pn-textarea[data-error]>.pn-textarea-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}pn-textarea .pn-textarea[data-error]>.pn-textarea-text[role=alert]{color:#a70707}pn-textarea .pn-textarea[data-resize]>.pn-textarea-element{resize:vertical}";
const PnTextareaStyle0 = pnTextareaCss;
const PnTextarea$1 = /*@__PURE__*/ proxyCustomElement(class PnTextarea extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.content = undefined;
this.label = undefined;
this.value = '';
this.helpertext = undefined;
this.textareaid = this.id;
this.name = undefined;
this.form = undefined;
this.rows = 2;
this.cols = 20;
this.wrap = 'soft';
this.maxlength = undefined;
this.autocomplete = 'off';
this.spellcheck = false;
this.placeholder = undefined;
this.resize = false;
this.required = false;
this.valid = false;
this.invalid = false;
this.error = undefined;
this.disabled = false;
this.readonly = false;
}
id = `pn-textarea-${uuidv4()}`;
idHelper = `${this.id}-text`;
get hostElement() { return this; }
componentWillLoad() {
if (this.textareaid !== this.id) {
this.idHelper = `${this.textareaid}-helper`;
}
}
setVal(event) {
const value = event.target.value;
this.value = value;
}
hasError() {
return this.invalid || !!this.error;
}
hasMessage() {
return !!(this.helpertext?.length || this.error?.length);
}
render() {
return (h(Host, { key: 'c8cd0f74604646f7ac3ed6e8d4e7846b6d818b02' }, h("div", { key: '48fb0a2c6c30968079633a36b5d6a85ee8a07366', class: "pn-textarea", "data-valid": this.valid, "data-error": this.hasError(), "data-resize": this.resize }, h("label", { key: 'fbe7eac959225c7ee7d2a13fc3bdc75aca42363a', class: "pn-textarea-label", htmlFor: this.textareaid }, h("span", { key: '6d433af86539e7bb9b0bdd673f33f3297f79aa69' }, this.label), this.maxlength >= 1 && h("span", { key: '12e7c0a22af8e92136d7c893685d80e741d0c9f1' }, `${this.value?.length || 0}/${this.maxlength}`)), h("textarea", { key: 'c7dca374bf36de54afc9e2183ddb95c0c78c9f61', class: "pn-textarea-element", id: this.textareaid, name: this.name, rows: this.rows, cols: this.cols, wrap: this.wrap, autocomplete: this.autocomplete, spellcheck: this.spellcheck, placeholder: this.placeholder, maxlength: this.maxlength, required: this.required, disabled: this.disabled, readonly: this.readonly, "aria-describedby": this.hasMessage() ? this.idHelper : null, "aria-invalid": this.hasError().toString(), onInput: e => this.setVal(e), value: this.value }), this.hasMessage() && (h("p", { key: '9a5c29b6db59b4b881fe4b76f3cfd6dd69d79249', id: this.idHelper, class: "pn-textarea-text", role: this.error?.length ? 'alert' : null }, h("span", { key: '25a43d7f4ba47550623e4937ae4b8bf830fda6c0' }, this.error || this.helpertext))))));
}
static get style() { return PnTextareaStyle0; }
}, [0, "pn-textarea", {
"label": [1],
"value": [1],
"helpertext": [1],
"textareaid": [1],
"name": [1],
"form": [1],
"rows": [2],
"cols": [2],
"wrap": [1],
"maxlength": [2],
"autocomplete": [1],
"spellcheck": [4],
"placeholder": [1],
"resize": [4],
"required": [4],
"valid": [4],
"invalid": [4],
"error": [1],
"disabled": [4],
"readonly": [4],
"content": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["pn-textarea"];
components.forEach(tagName => { switch (tagName) {
case "pn-textarea":
if (!customElements.get(tagName)) {
customElements.define(tagName, PnTextarea$1);
}
break;
} });
}
const PnTextarea = PnTextarea$1;
const defineCustomElement = defineCustomElement$1;
export { PnTextarea, defineCustomElement };
//# sourceMappingURL=pn-textarea.js.map