wj-elements 0.7.7 → 0.8.0

package/dist/wje-textarea.js

@@ -1,315 +1,115 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { F as FormAssociatedElement } from "./form-associated-element-DEQ4y-jn.js";
-import { event } from "./event.js";
-const styles = "/*\n[ WJ Textarea ]\n*/\n\n:host {\n    width: 100%;\n    margin-bottom: var(--wje-textarea-margin-bottom);\n    display: block;\n\n    label {\n        margin: var(--wje-textarea-label-margin);\n        padding: var(--wje-textarea-label-padding);\n        display: var(--wje-textarea-label-display);\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-textarea-label-line-height);\n        font-size: var(--wje-textarea-label-font-size);\n    }\n\n    .wrapper {\n        display: flex;\n        width: 100%;\n        border-width: var(--wje-textarea-border-width);\n        border-style: var(--wje-textarea-border-style);\n        border-color: var(--wje-textarea-border-color);\n        border-radius: var(--wje-textarea-border-radius);\n        box-sizing: border-box;\n    }\n    textarea {\n        font-family: var(--wje-textarea-font-family);\n        color: var(--wje-textarea-color);\n        font-size: 14px;\n        border: 0 none;\n        padding: var(--wje-textarea-padding);\n        &:focus {\n            outline: none;\n        }\n    }\n}\n\n:host([invalid]) {\n    .error-message {\n        display: block;\n    }\n    .default {\n        label {\n            opacity: 1 !important;\n            color: var(--wje-input-color-invalid) !important;\n            animation-name: shake;\n            animation-duration: 0.4s;\n            animation-iteration-count: 1;\n        }\n    }\n}\n\n:host([required]) .wrapper::after {\n    color: var(--wje-input-color-invalid);\n    content: var(--wje-input-required-symbol);\n    font-size: 24px;\n    position: absolute;\n    right: 12px;\n    top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n    right: 13px;\n    top: -20px;\n}\n\n:host([resize='auto']) textarea,\n:host([resize='none']) textarea {\n    resize: none;\n}\n\n.native-textarea {\n    .input-wrapper {\n        width: 100%;\n        line-height: normal;\n    }\n    &.default {\n        background-color: var(--wje-textarea-background-color);\n        font-family: var(--wje-textarea-font-family);\n        position: relative;\n        padding-inline: 0;\n        padding-top: 0;\n        transition: background-color 0.2s ease;\n        cursor: text;\n        &.focused {\n            .wrapper {\n                border-color: var(--wje-textarea-border-color-focus) !important;\n            }\n            label {\n                opacity: 0.67;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n        textarea {\n            border: none;\n            padding-top: 0;\n            background: none;\n            box-shadow: none;\n            width: calc(100% - var(--wje-textarea-padding) * 2);\n            max-width: calc(100% - var(--wje-textarea-padding) * 2);\n            min-width: calc(100% - var(--wje-textarea-padding) * 2);\n            padding: 0 var(--wje-textarea-padding);\n        }\n        label {\n            margin: var(--wje-textarea-label-margin);\n            padding: var(--wje-textarea-label-padding);\n            display: var(--wje-textarea-label-display);\n            opacity: 1;\n            cursor: text;\n            transition: opacity 0.2s ease;\n            line-height: var(--wje-textarea-label-line-height);\n            font-size: var(--wje-textarea-label-font-size);\n        }\n        /*label {*/\n        /*    padding: 0 var(--wje-textarea-padding);*/\n        /*    display: block;*/\n        /*    line-height: var(--wje-textarea-line-height);*/\n        /*    padding-top: 0.25rem;*/\n        /*    &.fade {*/\n        /*        opacity: 0.5;*/\n        /*        font-size: 12px;*/\n        /*        letter-spacing: normal;*/\n        /*    }*/\n        /*}*/\n        ::slotted([slot='start']) {\n            border-left: none;\n            border-top: none;\n            border-bottom: none;\n        }\n\n        ::slotted([slot='end']) {\n            border-right: none;\n            border-top: none;\n            border-bottom: none;\n        }\n    }\n    &.standard {\n        position: relative;\n        border-radius: var(--wje-textarea-border-radius);\n        padding: 0;\n        transition: background-color 0.2s ease;\n        cursor: text;\n        &.focused {\n            .wrapper {\n                border-color: var(--wje-textarea-border-color-focus) !important;\n            }\n        }\n        textarea {\n            background-color: var(--wje-textarea-background-color);\n            display: block;\n            min-height: 32px;\n            box-shadow: none;\n            width: 100%;\n            box-sizing: border-box;\n            border-radius: var(--wje-textarea-border-radius);\n        }\n        /*label {*/\n        /*    margin: var(--wje-textarea-label-margin);*/\n        /*    display: inline-block;*/\n        /*    line-height: var(--wje-textarea-line-height);*/\n        /*}*/\n        ::slotted([slot='start']) {\n            border-right: none;\n            border-radius: var(--wje-textarea-border-radius) 0 0 var(--wje-textarea-border-radius);\n        }\n\n        ::slotted([slot='end']) {\n            border-left: none;\n            border-radius: 0 var(--wje-textarea-border-radius) var(--wje-textarea-border-radius) 0;\n        }\n\n        &.has-start textarea {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n        }\n\n        &.has-end textarea {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n        slot[name='error'] {\n            position: static;\n            background: transparent;\n            padding: 0.25rem 0;\n            left: auto;\n            transform: none;\n            color: var(--wje-textarea-color-invalid);\n            font-size: 12px;\n            line-height: normal;\n        }\n    }\n}\n\n.counter {\n    float: right;\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\nslot[name='error'] {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background-color: var(--wje-textarea-error-background-color, var(--wje-tooltip-background));\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: var(--wje-textarea-error-color, var(--wje-tooltip-color));\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n@keyframes shake {\n    8%,\n    41% {\n        transform: translateX(-4px);\n    }\n    25%,\n    58% {\n        transform: translateX(4px);\n    }\n    75% {\n        transform: translateX(-2px);\n    }\n    92% {\n        transform: translateX(2px);\n    }\n    0%,\n    100% {\n        transform: translateX(0);\n    }\n}\n";
-const _Textarea = class _Textarea extends FormAssociatedElement {
-  /**
-   * Creates an instance of Textarea.
-   * @class
-   */
+import { F as t } from "./form-associated-element-BjeJn7j8.js";
+import { event as e } from "./event.js";
+const _a = class _a extends t {
   constructor() {
     super();
     __publicField(this, "className", "Textarea");
-    /**
-     * Sets the height of the textarea.
-     */
     __publicField(this, "setTextareaHeight", () => {
-      if (this.getAttribute("resize") === "auto") {
-        this.input.style.height = "auto";
-        this.input.style.height = this.input.scrollHeight + "px";
-      }
+      "auto" === this.getAttribute("resize") && (this.input.style.height = "auto", this.input.style.height = this.input.scrollHeight + "px");
     });
-    /**
-     * Updates the counter for the textarea.
-     * @param {Event} e The event object.
-     */
-    __publicField(this, "counterFn", (e) => {
-      this.counterElement.innerText = e.target.value.length + "/" + this.input.maxLength;
+    __publicField(this, "counterFn", (t2) => {
+      this.counterElement.innerText = t2.target.value.length + "/" + this.input.maxLength;
     });
-    this.invalid = false;
-    this.pristine = true;
-    this._instanceId = ++_Textarea._instanceId;
+    this.invalid = false, this.pristine = true, this._instanceId = ++_a._instanceId;
   }
-  /**
-   * Setter for the value attribute.
-   * @param {string} value The value to set.
-   */
-  set value(value) {
-    this.internals.setFormValue(value);
-    if (this.input) this.input.value = value;
-    this.pristine = false;
-    this._value = value;
-    this.syncAria();
+  set value(t2) {
+    this.internals.setFormValue(t2), this.input && (this.input.value = t2), this.pristine = false, this._value = t2, this.syncAria();
   }
-  /**
-   * Getter for the value attribute.
-   * @returns {string} The value of the attribute.
-   */
   get value() {
-    var _a;
-    return ((_a = this.input) == null ? void 0 : _a.value) ?? this._value ?? "";
+    var _a2;
+    return ((_a2 = this.input) == null ? void 0 : _a2.value) ?? this._value ?? "";
   }
-  /**
-   * Sets the label attribute of the element.
-   * @param {string} value The value to set as the label attribute.
-   */
-  set label(value) {
-    if (value === null || value === void 0) {
-      this.removeAttribute("label");
-    } else {
-      this.setAttribute("label", value);
-    }
+  set label(t2) {
+    null == t2 ? this.removeAttribute("label") : this.setAttribute("label", t2);
   }
-  /**
-   * Retrieves the value of the 'label' attribute if it exists.
-   * If the 'label' attribute is not set, it returns false.
-   * @returns {string|boolean} The value of the 'label' attribute as a string, or false if the attribute is not set.
-   */
   get label() {
     return this.getAttribute("label") || false;
   }
-  /**
-   * Sets the `validateOnChange` property. If set to a truthy value, it adds the
-   * `validate-on-change` attribute to the element. If set to a falsy value, it
-   * removes the `validate-on-change` attribute from the element.
-   * @param {boolean} value Determines whether to add or remove the
-   * `validate-on-change` attribute. A truthy value adds the attribute, whereas a
-   * falsy value removes it.
-   */
-  set validateOnChange(value) {
-    if (value) {
-      this.setAttribute("validate-on-change", "");
-    } else {
-      this.removeAttribute("validate-on-change");
-    }
+  set validateOnChange(t2) {
+    t2 ? this.setAttribute("validate-on-change", "") : this.removeAttribute("validate-on-change");
   }
-  /**
-   * Getter for the validateOnChange attribute.
-   * @returns {boolean} Whether the attribute is present.
-   */
   get validateOnChange() {
     return this.hasAttribute("validate-on-change");
   }
-  set placeholder(value) {
-    this.setAttribute("placeholder", value);
+  set placeholder(t2) {
+    this.setAttribute("placeholder", t2);
   }
   get placeholder() {
     return this.getAttribute("placeholder");
   }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet} The CSS stylesheet
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ':host{width:100%;margin-bottom:var(--wje-textarea-margin-bottom);display:block}:host label{margin:var(--wje-textarea-label-margin);padding:var(--wje-textarea-label-padding);display:var(--wje-textarea-label-display);opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wje-textarea-label-line-height);font-size:var(--wje-textarea-label-font-size)}:host .wrapper{display:flex;width:100%;border-width:var(--wje-textarea-border-width);border-style:var(--wje-textarea-border-style);border-color:var(--wje-textarea-border-color);border-radius:var(--wje-textarea-border-radius);box-sizing:border-box}:host textarea{font-family:var(--wje-textarea-font-family);color:var(--wje-textarea-color);font-size:14px;border:0 none;padding:var(--wje-textarea-padding)}:host textarea:focus{outline:none}:host([invalid]) .error-message{display:block}:host([invalid]) .default label{opacity:1!important;color:var(--wje-input-color-invalid)!important;animation-name:shake;animation-duration:.4s;animation-iteration-count:1}:host([required]) .wrapper:after{color:var(--wje-input-color-invalid);content:var(--wje-input-required-symbol);font-size:24px;position:absolute;right:12px;top:0}:host([required]) .standard .input-wrapper:after{right:13px;top:-20px}:host([resize="auto"]) textarea,:host([resize="none"]) textarea{resize:none}.native-textarea .input-wrapper{width:100%;line-height:normal}.native-textarea.default{background-color:var(--wje-textarea-background-color);font-family:var(--wje-textarea-font-family);position:relative;padding-inline:0;padding-top:0;transition:background-color .2s ease;cursor:text}.native-textarea.default.focused .wrapper{border-color:var(--wje-textarea-border-color-focus)!important}.native-textarea.default.focused label{opacity:.67;font-size:12px;letter-spacing:normal}.native-textarea.default textarea{border:none;padding-top:0;background:none;box-shadow:none;width:calc(100% - var(--wje-textarea-padding) * 2);max-width:calc(100% - var(--wje-textarea-padding) * 2);min-width:calc(100% - var(--wje-textarea-padding) * 2);padding:0 var(--wje-textarea-padding)}.native-textarea.default label{margin:var(--wje-textarea-label-margin);padding:var(--wje-textarea-label-padding);display:var(--wje-textarea-label-display);opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wje-textarea-label-line-height);font-size:var(--wje-textarea-label-font-size)}.native-textarea.default ::slotted([slot="start"]){border-left:none;border-top:none;border-bottom:none}.native-textarea.default ::slotted([slot="end"]){border-right:none;border-top:none;border-bottom:none}.native-textarea.standard{position:relative;border-radius:var(--wje-textarea-border-radius);padding:0;transition:background-color .2s ease;cursor:text}.native-textarea.standard.focused .wrapper{border-color:var(--wje-textarea-border-color-focus)!important}.native-textarea.standard textarea{background-color:var(--wje-textarea-background-color);display:block;min-height:32px;box-shadow:none;width:100%;box-sizing:border-box;border-radius:var(--wje-textarea-border-radius)}.native-textarea.standard ::slotted([slot="start"]){border-right:none;border-radius:var(--wje-textarea-border-radius) 0 0 var(--wje-textarea-border-radius)}.native-textarea.standard ::slotted([slot="end"]){border-left:none;border-radius:0 var(--wje-textarea-border-radius) var(--wje-textarea-border-radius) 0}.native-textarea.standard.has-start textarea{border-top-left-radius:0;border-bottom-left-radius:0}.native-textarea.standard.has-end textarea{border-top-right-radius:0;border-bottom-right-radius:0}.native-textarea.standard slot[name=error]{position:static;background:transparent;padding:.25rem 0;left:auto;transform:none;color:var(--wje-textarea-color-invalid);font-size:12px;line-height:normal}.counter{float:right}slot[name=error]{display:none}:host([invalid]) slot[name=error]{display:block}slot[name=error]{display:none;position:absolute;max-width:100%;min-width:auto;border-radius:50px;background-color:var(--wje-textarea-error-background-color, var(--wje-tooltip-background));padding:.25rem .5rem;top:0;left:50%;transform:translate(-50%,-50%);color:var(--wje-textarea-error-color, var(--wje-tooltip-color));font-size:var(--wje-font-size-small);width:max-content;line-height:normal}@keyframes shake{8%,41%{transform:translate(-4px)}25%,58%{transform:translate(4px)}75%{transform:translate(-2px)}92%{transform:translate(2px)}0%,to{transform:translate(0)}}';
   }
-  /**
-   * Returns the list of attributes to observe for changes.
-   * @static
-   * @returns {Array<string>}
-   */
   static get observedAttributes() {
     return ["value", "name", "disabled", "placeholder", "label", "required", "readonly", "invalid", "rows"];
   }
-  /**
-   * Sets up the attributes for the component.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    if (this.pristine) {
-      const attrValue = this.getAttribute("value");
-      this.value = attrValue !== null ? attrValue : this.innerHTML;
-      this.pristine = false;
+    if (this.isShadowRoot = "open", this.pristine) {
+      const t2 = this.getAttribute("value");
+      this.value = null !== t2 ? t2 : this.innerHTML, this.pristine = false;
     }
     this.syncAria();
   }
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (oldValue === newValue) return;
-    if (name === "label") {
-      this.refresh();
-      return;
-    }
-    if (!this.input) {
-      this.syncAria();
-      return;
-    }
-    if (name === "value") {
-      this._value = newValue ?? "";
-      this.input.value = this.value;
-      this.internals.setFormValue(this.value);
-    } else if (name === "name") {
-      this.input.name = this.name;
-    } else if (name === "disabled") {
-      this.input.disabled = this.hasAttribute("disabled");
-    } else if (name === "required") {
-      this.input.required = this.required;
-    } else if (name === "readonly") {
-      this.input.readOnly = this.hasAttribute("readonly");
-    } else if (name === "placeholder") {
-      this.input.placeholder = this.placeholder || "";
-    } else if (name === "rows") {
-      this.input.rows = Number(newValue || 3);
-    }
-    this.syncAria();
+  attributeChangedCallback(t2, e2, a2) {
+    e2 !== a2 && ("label" !== t2 ? this.input ? ("value" === t2 ? (this._value = a2 ?? "", this.input.value = this.value, this.internals.setFormValue(this.value)) : "name" === t2 ? this.input.name = this.name : "disabled" === t2 ? this.input.disabled = this.hasAttribute("disabled") : "required" === t2 ? this.input.required = this.required : "readonly" === t2 ? this.input.readOnly = this.hasAttribute("readonly") : "placeholder" === t2 ? this.input.placeholder = this.placeholder || "" : "rows" === t2 && (this.input.rows = Number(a2 || 3)), this.syncAria()) : this.syncAria() : this.refresh());
   }
-  /**
-   * Draws the component for the textarea.
-   * @returns {DocumentFragment}
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.classList.add("native-textarea", this.variant || "default");
-    native.setAttribute("part", "native");
-    if (this.hasAttribute("invalid")) native.classList.add("has-error");
-    let wrapper = document.createElement("div");
-    wrapper.setAttribute("part", "wrapper");
-    wrapper.classList.add("wrapper");
-    let inputWrapper = document.createElement("div");
-    inputWrapper.classList.add("input-wrapper");
-    let label = document.createElement("label");
-    label.setAttribute("part", "label");
-    label.htmlFor = "textarea";
-    label.innerHTML = this.label || "";
-    let input = document.createElement("textarea");
-    input.id = "textarea";
-    input.name = this.name;
-    input.disabled = this.hasAttribute("disabled");
-    input.innerText = this.value;
-    input.placeholder = this.placeholder || "";
-    input.classList.add("form-control");
-    input.setAttribute("part", "input");
-    input.rows = Number(this.getAttribute("rows") || 3);
-    input.setAttribute("spellcheck", false);
-    const attributes = Array.from(this.attributes).map((attr) => attr.name);
-    attributes.forEach((attr) => {
-      if (this.hasAttribute(attr)) {
-        input.setAttribute(attr, this[attr] || "");
-      }
+    let t2 = document.createDocumentFragment(), e2 = document.createElement("div");
+    e2.classList.add("native-textarea", this.variant || "default"), e2.setAttribute("part", "native"), this.hasAttribute("invalid") && e2.classList.add("has-error");
+    let a2 = document.createElement("div");
+    a2.setAttribute("part", "wrapper"), a2.classList.add("wrapper");
+    let r = document.createElement("div");
+    r.classList.add("input-wrapper");
+    let i = document.createElement("label");
+    i.setAttribute("part", "label"), i.htmlFor = "textarea", i.innerHTML = this.label || "";
+    let s = document.createElement("textarea");
+    s.id = "textarea", s.name = this.name, s.disabled = this.hasAttribute("disabled"), s.innerText = this.value, s.placeholder = this.placeholder || "", s.classList.add("form-control"), s.setAttribute("part", "input"), s.rows = Number(this.getAttribute("rows") || 3), s.setAttribute("spellcheck", false);
+    Array.from(this.attributes).map((t3) => t3.name).forEach((t3) => {
+      this.hasAttribute(t3) && s.setAttribute(t3, this[t3] || "");
     });
-    let error = document.createElement("div");
-    error.setAttribute("slot", "error");
-    let errorSlot = document.createElement("slot");
-    errorSlot.setAttribute("name", "error");
-    this._ariaErrorId = this.id ? `${this.id}-error` : `wje-textarea-${this._instanceId}-error`;
-    errorSlot.id = this._ariaErrorId;
-    if (this.getAttribute("resize") === "auto") input.addEventListener("input", this.setTextareaHeight);
-    if (this.label) {
-      if (this.variant === "standard") {
-        native.appendChild(label);
-      } else {
-        inputWrapper.appendChild(label);
-      }
+    let n = document.createElement("div");
+    n.setAttribute("slot", "error");
+    let o = document.createElement("slot");
+    if (o.setAttribute("name", "error"), this._ariaErrorId = this.id ? `${this.id}-error` : `wje-textarea-${this._instanceId}-error`, o.id = this._ariaErrorId, "auto" === this.getAttribute("resize") && s.addEventListener("input", this.setTextareaHeight), this.label && ("standard" === this.variant ? e2.appendChild(i) : r.appendChild(i)), r.appendChild(s), a2.appendChild(r), e2.appendChild(a2), e2.append(o), this.append(n), t2.appendChild(e2), this.hasAttribute("counter")) {
+      s.maxLength = this.maxLength || 1e3, s.addEventListener("input", this.counterFn);
+      let e3 = document.createElement("div");
+      e3.classList.add("counter"), e3.innerText = `${s.value.length}/${s.maxLength}`, this.counterElement = e3, t2.appendChild(e3);
     }
-    inputWrapper.appendChild(input);
-    wrapper.appendChild(inputWrapper);
-    native.appendChild(wrapper);
-    native.append(errorSlot);
-    this.append(error);
-    fragment.appendChild(native);
-    if (this.hasAttribute("counter")) {
-      input.maxLength = this.maxLength || 1e3;
-      input.addEventListener("input", this.counterFn);
-      let counter = document.createElement("div");
-      counter.classList.add("counter");
-      counter.innerText = `${input.value.length}/${input.maxLength}`;
-      this.counterElement = counter;
-      fragment.appendChild(counter);
-    }
-    this.native = native;
-    this.labelElement = label;
-    this.input = input;
-    this.syncAria();
-    return fragment;
+    return this.native = e2, this.labelElement = i, this.input = s, this.syncAria(), t2;
   }
-  /**
-   * Sets up the event listeners after the component is drawn.
-   */
   afterDraw() {
-    if (this.getAttribute("resize") === "auto" && typeof ResizeObserver === "function") {
-      this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());
-      this.resizeObserver.observe(this.input);
-    }
-    if (!this.hasAttribute("disabled")) {
-      event.addListener(this, "click", "wje-textarea:change");
-      event.addListener(this, "click", "wje-textarea:input");
-    }
-    this.input.addEventListener("focus", (e) => {
-      this.labelElement.classList.add("fade");
-      this.native.classList.add("focused");
-    });
-    this.input.addEventListener("blur", (e) => {
-      this.native.classList.remove("focused");
-      if (!e.target.value) this.labelElement.classList.remove("fade");
-    });
-    this.input.addEventListener("input", (e) => {
-      this.validate();
-      if (this.validateOnChange) {
-        this.pristine = false;
-        this.propagateValidation();
-      }
-      if (this.invalid) {
-        this.invalid = false;
-        this.internals.setValidity({}, "");
-      }
-      this.input.classList.remove("pristine");
-      this.labelElement.classList.add("fade");
-      const clone = new e.constructor(e.type, e);
-      this.dispatchEvent(clone);
-      event.dispatchCustomEvent(this, "wje-textarea:input", {
-        value: this.input.value
-      });
-      this.value = this.input.value;
-    });
-    this.addEventListener("invalid", (e) => {
-      this.invalid = true;
-      this.pristine = false;
-      this.showInvalidMessage();
-      if (this.customErrorDisplay) {
-        e.preventDefault();
-      }
-    });
-    this.validate();
-    this.syncAria();
+    "auto" === this.getAttribute("resize") && "function" == typeof ResizeObserver && (this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight()), this.resizeObserver.observe(this.input)), this.hasAttribute("disabled") || (e.addListener(this, "click", "wje-textarea:change"), e.addListener(this, "click", "wje-textarea:input")), this.input.addEventListener("focus", (t2) => {
+      this.labelElement.classList.add("fade"), this.native.classList.add("focused");
+    }), this.input.addEventListener("blur", (t2) => {
+      this.native.classList.remove("focused"), t2.target.value || this.labelElement.classList.remove("fade");
+    }), this.input.addEventListener("input", (t2) => {
+      this.validate(), this.validateOnChange && (this.pristine = false, this.propagateValidation()), this.invalid && (this.invalid = false, this.internals.setValidity({}, "")), this.input.classList.remove("pristine"), this.labelElement.classList.add("fade");
+      const a2 = new t2.constructor(t2.type, t2);
+      this.dispatchEvent(a2), e.dispatchCustomEvent(this, "wje-textarea:input", { value: this.input.value }), this.value = this.input.value;
+    }), this.addEventListener("invalid", (t2) => {
+      this.invalid = true, this.pristine = false, this.showInvalidMessage(), this.customErrorDisplay && t2.preventDefault();
+    }), this.validate(), this.syncAria();
   }
-  /**
-   * Syncs ARIA attributes on the host element.
-   */
   syncAria() {
-    const requiredInvalid = this.required && !this.value;
-    const invalid = this.invalid || requiredInvalid;
-    const label = this.label && this.label !== false ? this.label.trim() : "";
-    this.setAriaState({
-      role: "textbox",
-      disabled: this.disabled,
-      required: this.required,
-      readonly: this.hasAttribute("readonly"),
-      invalid,
-      describedBy: this._ariaErrorId,
-      ...label ? { label } : {}
-    });
+    const t2 = this.required && !this.value, e2 = this.invalid || t2, a2 = this.label && false !== this.label ? this.label.trim() : "";
+    this.setAriaState({ role: "textbox", disabled: this.disabled, required: this.required, readonly: this.hasAttribute("readonly"), invalid: e2, describedBy: this._ariaErrorId, ...a2 ? { label: a2 } : {} });
   }
   componentCleanup() {
-    var _a, _b;
-    (_a = this.resizeObserver) == null ? void 0 : _a.unobserve(this.input);
-    (_b = this.resizeObserver) == null ? void 0 : _b.disconnect();
+    var _a2, _b;
+    (_a2 = this.resizeObserver) == null ? void 0 : _a2.unobserve(this.input), (_b = this.resizeObserver) == null ? void 0 : _b.disconnect();
   }
-  /**
-   * Disconnects the component.
-   */
   beforeDisconnect() {
-    var _a, _b;
-    (_a = this.resizeObserver) == null ? void 0 : _a.unobserve(this.input);
-    (_b = this.resizeObserver) == null ? void 0 : _b.disconnect();
+    var _a2, _b;
+    (_a2 = this.resizeObserver) == null ? void 0 : _a2.unobserve(this.input), (_b = this.resizeObserver) == null ? void 0 : _b.disconnect();
   }
 };
-__publicField(_Textarea, "_instanceId", 0);
-let Textarea = _Textarea;
-Textarea.define("wje-textarea", Textarea);
+__publicField(_a, "_instanceId", 0);
+let a = _a;
+a.define("wje-textarea", a);
 export {
-  Textarea as default
+  a as default
 };
 //# sourceMappingURL=wje-textarea.js.map

package/dist/wje-textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-textarea.js","sources":["../packages/wje-textarea/textarea.element.js","../packages/wje-textarea/textarea.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Textarea` is a custom web component that represents a textarea input.\n * @summary This element represents a textarea input.\n * @documentation https://elements.webjet.sk/components/textarea\n * @status stable\n * @augments {FormAssociatedElement}\n * @csspart native - The native textarea wrapper.\n * @csspart input - The textarea input.\n * @csspart wrapper - The textarea wrapper.\n * @cssproperty [--wje-textarea-font-family=var(--wje-font-family)] - Specifies the font family used for the textarea. Accepts any valid CSS font-family value.\n * @cssproperty [--wje-textarea-background-color=var(--wje-background)] - Sets the background color of the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-color=var(--wje-color)] - Defines the text color within the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-color-invalid=var(--wje-color-danger)] - Changes the text color of the textarea when it is invalid. Useful for highlighting validation errors.\n * @cssproperty [--wje-textarea-error-background-color=var(--wje-tooltip-background)] - Controls the background color of the validation error bubble.\n * @cssproperty [--wje-textarea-error-color=var(--wje-tooltip-color)] - Controls the text color of the validation error bubble.\n * @cssproperty [--wje-textarea-border-width=1px] - Specifies the width of the textarea's border. Accepts any valid CSS length unit.\n * @cssproperty [--wje-textarea-border-style=solid] - Sets the style of the textarea's border. Accepts standard CSS border styles such as `solid`, `dashed`, or `dotted`.\n * @cssproperty [--wje-textarea-border-color=var(--wje-border-color)] - Defines the border color of the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-border-color-focus=var(--wje-color-primary)] - Specifies the border color of the textarea when it is focused. Enhances the user experience by providing visual feedback.\n * @cssproperty [--wje-textarea-border-radius=4px] - Determines the border radius of the textarea, defining how rounded its corners are. Accepts any valid CSS length unit.\n * @cssproperty [--wje-textarea-margin-bottom=.5rem] - Sets the bottom margin of the textarea. Ensures spacing between the textarea and other elements.\n * @cssproperty [--wje-textarea-line-height=20px] - Specifies the line height of the text within the textarea. Helps control the vertical spacing of the text.\n * @cssproperty [--wje-textarea-padding=0.5rem] - Defines the padding inside the textarea. Controls the spacing between the content and the border.\n * @tag wje-textarea\n */\n\nexport default class Textarea extends FormAssociatedElement {\n    static _instanceId = 0;\n    /**\n     * Creates an instance of Textarea.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\n        this._instanceId = ++Textarea._instanceId;\n    }\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        this.internals.setFormValue(value);\n\n        if (this.input) this.input.value = value;\n\n        this.pristine = false;\n        this._value = value;\n        this.syncAria();\n    }\n\n    /**\n     * Getter for the value attribute.\n     * @returns {string} The value of the attribute.\n     */\n    get value() {\n        return this.input?.value ?? this._value ?? '';\n    }\n\n    /**\n     * Sets the label attribute of the element.\n     * @param {string} value The value to set as the label attribute.\n     */\n    set label(value) {\n        if (value === null || value === undefined) {\n            this.removeAttribute('label');\n        } else {\n            this.setAttribute('label', value);\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'label' attribute if it exists.\n     * If the 'label' attribute is not set, it returns false.\n     * @returns {string|boolean} The value of the 'label' attribute as a string, or false if the attribute is not set.\n     */\n    get label() {\n        return this.getAttribute('label') || false;\n    }\n\n    /**\n     * Sets the `validateOnChange` property. If set to a truthy value, it adds the\n     * `validate-on-change` attribute to the element. If set to a falsy value, it\n     * removes the `validate-on-change` attribute from the element.\n     * @param {boolean} value Determines whether to add or remove the\n     * `validate-on-change` attribute. A truthy value adds the attribute, whereas a\n     * falsy value removes it.\n     */\n    set validateOnChange(value) {\n        if (value) {\n            this.setAttribute('validate-on-change', '');\n        } else {\n            this.removeAttribute('validate-on-change');\n        }\n    }\n\n    /**\n     * Getter for the validateOnChange attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get validateOnChange() {\n        return this.hasAttribute('validate-on-change');\n    }\n\n    set placeholder(value) {\n        this.setAttribute('placeholder', value);\n    }\n\n    get placeholder() {\n        return this.getAttribute('placeholder');\n    }\n\n    className = 'Textarea';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['value', 'name', 'disabled', 'placeholder', 'label', 'required', 'readonly', 'invalid', 'rows'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n\n        // if some value was set via value setter then don't use default value\n        if (this.pristine) {\n            const attrValue = this.getAttribute('value');\n            this.value = attrValue !== null ? attrValue : this.innerHTML;\n            this.pristine = false;\n        }\n        this.syncAria();\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (oldValue === newValue) return;\n\n        if (name === 'label') {\n            this.refresh();\n            return;\n        }\n\n        if (!this.input) {\n            this.syncAria();\n            return;\n        }\n\n        if (name === 'value') {\n            this._value = newValue ?? '';\n            this.input.value = this.value;\n            this.internals.setFormValue(this.value);\n        } else if (name === 'name') {\n            this.input.name = this.name;\n        } else if (name === 'disabled') {\n            this.input.disabled = this.hasAttribute('disabled');\n        } else if (name === 'required') {\n            this.input.required = this.required;\n        } else if (name === 'readonly') {\n            this.input.readOnly = this.hasAttribute('readonly');\n        } else if (name === 'placeholder') {\n            this.input.placeholder = this.placeholder || '';\n        } else if (name === 'rows') {\n            this.input.rows = Number(newValue || 3);\n        }\n\n        this.syncAria();\n    }\n\n    /**\n     * Draws the component for the textarea.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-textarea', this.variant || 'default');\n        native.setAttribute('part', 'native');\n\n        if (this.hasAttribute('invalid')) native.classList.add('has-error');\n\n        let wrapper = document.createElement('div');\n        wrapper.setAttribute('part', 'wrapper');\n        wrapper.classList.add('wrapper');\n\n        let inputWrapper = document.createElement('div');\n        inputWrapper.classList.add('input-wrapper');\n\n        let label = document.createElement('label');\n        label.setAttribute('part', 'label');\n        label.htmlFor = 'textarea';\n        label.innerHTML = this.label || '';\n\n        let input = document.createElement('textarea');\n        input.id = 'textarea';\n        input.name = this.name;\n        input.disabled = this.hasAttribute('disabled');\n        input.innerText = this.value;\n        input.placeholder = this.placeholder || '';\n        input.classList.add('form-control');\n        input.setAttribute('part', 'input');\n        input.rows = Number(this.getAttribute('rows') || 3);\n        input.setAttribute('spellcheck', false);\n\n        const attributes = Array.from(this.attributes).map((attr) => attr.name);\n\n        attributes.forEach((attr) => {\n            if (this.hasAttribute(attr)) {\n                input.setAttribute(attr, this[attr] || '');\n            }\n        });\n\n        let error = document.createElement('div');\n        error.setAttribute('slot', 'error');\n\n        let errorSlot = document.createElement('slot');\n        errorSlot.setAttribute('name', 'error');\n        this._ariaErrorId = this.id ? `${this.id}-error` : `wje-textarea-${this._instanceId}-error`;\n        errorSlot.id = this._ariaErrorId;\n\n        if (this.getAttribute('resize') === 'auto') input.addEventListener('input', this.setTextareaHeight);\n\n        if (this.label) {\n            if (this.variant === 'standard') {\n                native.appendChild(label);\n            } else {\n                inputWrapper.appendChild(label);\n            }\n        }\n\n        inputWrapper.appendChild(input);\n\n        wrapper.appendChild(inputWrapper);\n\n        native.appendChild(wrapper);\n        native.append(errorSlot);\n\n        this.append(error);\n\n        fragment.appendChild(native);\n\n        if (this.hasAttribute('counter')) {\n            input.maxLength = this.maxLength || 1000;\n            input.addEventListener('input', this.counterFn);\n\n            let counter = document.createElement('div');\n            counter.classList.add('counter');\n            counter.innerText = `${input.value.length}/${input.maxLength}`;\n\n            this.counterElement = counter;\n            fragment.appendChild(counter);\n        }\n\n        this.native = native;\n        this.labelElement = label;\n        this.input = input;\n\n        this.syncAria();\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners after the component is drawn.\n     */\n    afterDraw() {\n        if (this.getAttribute('resize') === 'auto' && typeof ResizeObserver === 'function') {\n            this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n            this.resizeObserver.observe(this.input);\n        }\n\n        if (!this.hasAttribute('disabled')) {\n            event.addListener(this, 'click', 'wje-textarea:change');\n            event.addListener(this, 'click', 'wje-textarea:input');\n        }\n\n        this.input.addEventListener('focus', (e) => {\n            this.labelElement.classList.add('fade');\n            this.native.classList.add('focused');\n        });\n\n        this.input.addEventListener('blur', (e) => {\n            this.native.classList.remove('focused');\n            if (!e.target.value) this.labelElement.classList.remove('fade');\n        });\n\n        this.input.addEventListener('input', (e) => {\n            this.validate();\n\n            if (this.validateOnChange) {\n                this.pristine = false;\n                this.propagateValidation();\n            }\n\n            if (this.invalid) {\n                this.invalid = false;\n                this.internals.setValidity({}, '');\n            }\n\n            this.input.classList.remove('pristine');\n            this.labelElement.classList.add('fade');\n\n            const clone = new e.constructor(e.type, e);\n            this.dispatchEvent(clone);\n\n            event.dispatchCustomEvent(this, 'wje-textarea:input', {\n                value: this.input.value,\n            });\n\n            this.value = this.input.value;\n        });\n\n        this.addEventListener('invalid', (e) => {\n            this.invalid = true;\n            this.pristine = false;\n\n            this.showInvalidMessage();\n\n            if (this.customErrorDisplay) {\n                e.preventDefault();\n            }\n        });\n\n        this.validate();\n\n        this.syncAria();\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const requiredInvalid = this.required && !this.value;\n        const invalid = this.invalid || requiredInvalid;\n        const label = this.label && this.label !== false ? this.label.trim() : '';\n        this.setAriaState({\n            role: 'textbox',\n            disabled: this.disabled,\n            required: this.required,\n            readonly: this.hasAttribute('readonly'),\n            invalid,\n            describedBy: this._ariaErrorId,\n            ...(label ? { label } : {}),\n        });\n    }\n\n    componentCleanup() {\n        this.resizeObserver?.unobserve(this.input);\n        this.resizeObserver?.disconnect();\n    }\n\n    /**\n     * Disconnects the component.\n     */\n    beforeDisconnect() {\n        this.resizeObserver?.unobserve(this.input);\n        this.resizeObserver?.disconnect();\n    }\n\n    /**\n     * Sets the height of the textarea.\n     */\n    setTextareaHeight = () => {\n        if (this.getAttribute('resize') === 'auto') {\n            this.input.style.height = 'auto';\n            this.input.style.height = this.input.scrollHeight + 'px';\n        }\n    };\n\n    /**\n     * Updates the counter for the textarea.\n     * @param {Event} e The event object.\n     */\n    counterFn = (e) => {\n        this.counterElement.innerText = e.target.value.length + '/' + this.input.maxLength;\n    }\n}\n","import Textarea from './textarea.element.js';\n\nexport default Textarea;\n\nTextarea.define('wje-textarea', Textarea);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-textarea.js","sources":["../packages/wje-textarea/textarea.element.js","../packages/wje-textarea/textarea.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Textarea` is a custom web component that represents a textarea input.\n * @summary This element represents a textarea input.\n * @documentation https://elements.webjet.sk/components/textarea\n * @status stable\n * @augments {FormAssociatedElement}\n * @csspart native - The native textarea wrapper.\n * @csspart input - The textarea input.\n * @csspart wrapper - The textarea wrapper.\n * @cssproperty [--wje-textarea-font-family=var(--wje-font-family)] - Specifies the font family used for the textarea. Accepts any valid CSS font-family value.\n * @cssproperty [--wje-textarea-background-color=var(--wje-background)] - Sets the background color of the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-color=var(--wje-color)] - Defines the text color within the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-color-invalid=var(--wje-color-danger)] - Changes the text color of the textarea when it is invalid. Useful for highlighting validation errors.\n * @cssproperty [--wje-textarea-error-background-color=var(--wje-tooltip-background)] - Controls the background color of the validation error bubble.\n * @cssproperty [--wje-textarea-error-color=var(--wje-tooltip-color)] - Controls the text color of the validation error bubble.\n * @cssproperty [--wje-textarea-border-width=1px] - Specifies the width of the textarea's border. Accepts any valid CSS length unit.\n * @cssproperty [--wje-textarea-border-style=solid] - Sets the style of the textarea's border. Accepts standard CSS border styles such as `solid`, `dashed`, or `dotted`.\n * @cssproperty [--wje-textarea-border-color=var(--wje-border-color)] - Defines the border color of the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-border-color-focus=var(--wje-color-primary)] - Specifies the border color of the textarea when it is focused. Enhances the user experience by providing visual feedback.\n * @cssproperty [--wje-textarea-border-radius=4px] - Determines the border radius of the textarea, defining how rounded its corners are. Accepts any valid CSS length unit.\n * @cssproperty [--wje-textarea-margin-bottom=.5rem] - Sets the bottom margin of the textarea. Ensures spacing between the textarea and other elements.\n * @cssproperty [--wje-textarea-line-height=20px] - Specifies the line height of the text within the textarea. Helps control the vertical spacing of the text.\n * @cssproperty [--wje-textarea-padding=0.5rem] - Defines the padding inside the textarea. Controls the spacing between the content and the border.\n * @tag wje-textarea\n */\n\nexport default class Textarea extends FormAssociatedElement {\n    static _instanceId = 0;\n    /**\n     * Creates an instance of Textarea.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\n        this._instanceId = ++Textarea._instanceId;\n    }\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        this.internals.setFormValue(value);\n\n        if (this.input) this.input.value = value;\n\n        this.pristine = false;\n        this._value = value;\n        this.syncAria();\n    }\n\n    /**\n     * Getter for the value attribute.\n     * @returns {string} The value of the attribute.\n     */\n    get value() {\n        return this.input?.value ?? this._value ?? '';\n    }\n\n    /**\n     * Sets the label attribute of the element.\n     * @param {string} value The value to set as the label attribute.\n     */\n    set label(value) {\n        if (value === null || value === undefined) {\n            this.removeAttribute('label');\n        } else {\n            this.setAttribute('label', value);\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'label' attribute if it exists.\n     * If the 'label' attribute is not set, it returns false.\n     * @returns {string|boolean} The value of the 'label' attribute as a string, or false if the attribute is not set.\n     */\n    get label() {\n        return this.getAttribute('label') || false;\n    }\n\n    /**\n     * Sets the `validateOnChange` property. If set to a truthy value, it adds the\n     * `validate-on-change` attribute to the element. If set to a falsy value, it\n     * removes the `validate-on-change` attribute from the element.\n     * @param {boolean} value Determines whether to add or remove the\n     * `validate-on-change` attribute. A truthy value adds the attribute, whereas a\n     * falsy value removes it.\n     */\n    set validateOnChange(value) {\n        if (value) {\n            this.setAttribute('validate-on-change', '');\n        } else {\n            this.removeAttribute('validate-on-change');\n        }\n    }\n\n    /**\n     * Getter for the validateOnChange attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get validateOnChange() {\n        return this.hasAttribute('validate-on-change');\n    }\n\n    set placeholder(value) {\n        this.setAttribute('placeholder', value);\n    }\n\n    get placeholder() {\n        return this.getAttribute('placeholder');\n    }\n\n    className = 'Textarea';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['value', 'name', 'disabled', 'placeholder', 'label', 'required', 'readonly', 'invalid', 'rows'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n\n        // if some value was set via value setter then don't use default value\n        if (this.pristine) {\n            const attrValue = this.getAttribute('value');\n            this.value = attrValue !== null ? attrValue : this.innerHTML;\n            this.pristine = false;\n        }\n        this.syncAria();\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (oldValue === newValue) return;\n\n        if (name === 'label') {\n            this.refresh();\n            return;\n        }\n\n        if (!this.input) {\n            this.syncAria();\n            return;\n        }\n\n        if (name === 'value') {\n            this._value = newValue ?? '';\n            this.input.value = this.value;\n            this.internals.setFormValue(this.value);\n        } else if (name === 'name') {\n            this.input.name = this.name;\n        } else if (name === 'disabled') {\n            this.input.disabled = this.hasAttribute('disabled');\n        } else if (name === 'required') {\n            this.input.required = this.required;\n        } else if (name === 'readonly') {\n            this.input.readOnly = this.hasAttribute('readonly');\n        } else if (name === 'placeholder') {\n            this.input.placeholder = this.placeholder || '';\n        } else if (name === 'rows') {\n            this.input.rows = Number(newValue || 3);\n        }\n\n        this.syncAria();\n    }\n\n    /**\n     * Draws the component for the textarea.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-textarea', this.variant || 'default');\n        native.setAttribute('part', 'native');\n\n        if (this.hasAttribute('invalid')) native.classList.add('has-error');\n\n        let wrapper = document.createElement('div');\n        wrapper.setAttribute('part', 'wrapper');\n        wrapper.classList.add('wrapper');\n\n        let inputWrapper = document.createElement('div');\n        inputWrapper.classList.add('input-wrapper');\n\n        let label = document.createElement('label');\n        label.setAttribute('part', 'label');\n        label.htmlFor = 'textarea';\n        label.innerHTML = this.label || '';\n\n        let input = document.createElement('textarea');\n        input.id = 'textarea';\n        input.name = this.name;\n        input.disabled = this.hasAttribute('disabled');\n        input.innerText = this.value;\n        input.placeholder = this.placeholder || '';\n        input.classList.add('form-control');\n        input.setAttribute('part', 'input');\n        input.rows = Number(this.getAttribute('rows') || 3);\n        input.setAttribute('spellcheck', false);\n\n        const attributes = Array.from(this.attributes).map((attr) => attr.name);\n\n        attributes.forEach((attr) => {\n            if (this.hasAttribute(attr)) {\n                input.setAttribute(attr, this[attr] || '');\n            }\n        });\n\n        let error = document.createElement('div');\n        error.setAttribute('slot', 'error');\n\n        let errorSlot = document.createElement('slot');\n        errorSlot.setAttribute('name', 'error');\n        this._ariaErrorId = this.id ? `${this.id}-error` : `wje-textarea-${this._instanceId}-error`;\n        errorSlot.id = this._ariaErrorId;\n\n        if (this.getAttribute('resize') === 'auto') input.addEventListener('input', this.setTextareaHeight);\n\n        if (this.label) {\n            if (this.variant === 'standard') {\n                native.appendChild(label);\n            } else {\n                inputWrapper.appendChild(label);\n            }\n        }\n\n        inputWrapper.appendChild(input);\n\n        wrapper.appendChild(inputWrapper);\n\n        native.appendChild(wrapper);\n        native.append(errorSlot);\n\n        this.append(error);\n\n        fragment.appendChild(native);\n\n        if (this.hasAttribute('counter')) {\n            input.maxLength = this.maxLength || 1000;\n            input.addEventListener('input', this.counterFn);\n\n            let counter = document.createElement('div');\n            counter.classList.add('counter');\n            counter.innerText = `${input.value.length}/${input.maxLength}`;\n\n            this.counterElement = counter;\n            fragment.appendChild(counter);\n        }\n\n        this.native = native;\n        this.labelElement = label;\n        this.input = input;\n\n        this.syncAria();\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners after the component is drawn.\n     */\n    afterDraw() {\n        if (this.getAttribute('resize') === 'auto' && typeof ResizeObserver === 'function') {\n            this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n            this.resizeObserver.observe(this.input);\n        }\n\n        if (!this.hasAttribute('disabled')) {\n            event.addListener(this, 'click', 'wje-textarea:change');\n            event.addListener(this, 'click', 'wje-textarea:input');\n        }\n\n        this.input.addEventListener('focus', (e) => {\n            this.labelElement.classList.add('fade');\n            this.native.classList.add('focused');\n        });\n\n        this.input.addEventListener('blur', (e) => {\n            this.native.classList.remove('focused');\n            if (!e.target.value) this.labelElement.classList.remove('fade');\n        });\n\n        this.input.addEventListener('input', (e) => {\n            this.validate();\n\n            if (this.validateOnChange) {\n                this.pristine = false;\n                this.propagateValidation();\n            }\n\n            if (this.invalid) {\n                this.invalid = false;\n                this.internals.setValidity({}, '');\n            }\n\n            this.input.classList.remove('pristine');\n            this.labelElement.classList.add('fade');\n\n            const clone = new e.constructor(e.type, e);\n            this.dispatchEvent(clone);\n\n            event.dispatchCustomEvent(this, 'wje-textarea:input', {\n                value: this.input.value,\n            });\n\n            this.value = this.input.value;\n        });\n\n        this.addEventListener('invalid', (e) => {\n            this.invalid = true;\n            this.pristine = false;\n\n            this.showInvalidMessage();\n\n            if (this.customErrorDisplay) {\n                e.preventDefault();\n            }\n        });\n\n        this.validate();\n\n        this.syncAria();\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const requiredInvalid = this.required && !this.value;\n        const invalid = this.invalid || requiredInvalid;\n        const label = this.label && this.label !== false ? this.label.trim() : '';\n        this.setAriaState({\n            role: 'textbox',\n            disabled: this.disabled,\n            required: this.required,\n            readonly: this.hasAttribute('readonly'),\n            invalid,\n            describedBy: this._ariaErrorId,\n            ...(label ? { label } : {}),\n        });\n    }\n\n    componentCleanup() {\n        this.resizeObserver?.unobserve(this.input);\n        this.resizeObserver?.disconnect();\n    }\n\n    /**\n     * Disconnects the component.\n     */\n    beforeDisconnect() {\n        this.resizeObserver?.unobserve(this.input);\n        this.resizeObserver?.disconnect();\n    }\n\n    /**\n     * Sets the height of the textarea.\n     */\n    setTextareaHeight = () => {\n        if (this.getAttribute('resize') === 'auto') {\n            this.input.style.height = 'auto';\n            this.input.style.height = this.input.scrollHeight + 'px';\n        }\n    };\n\n    /**\n     * Updates the counter for the textarea.\n     * @param {Event} e The event object.\n     */\n    counterFn = (e) => {\n        this.counterElement.innerText = e.target.value.length + '/' + this.input.maxLength;\n    }\n}\n","import Textarea from './textarea.element.js';\n\nexport default Textarea;\n\nTextarea.define('wje-textarea', Textarea);\n"],"names":["Textarea","FormAssociatedElement","super","className","setTextareaHeight","this","getAttribute","input","style","height","scrollHeight","counterFn","e","counterElement","innerText","target","value","length","maxLength","invalid","pristine","_instanceId","internals","setFormValue","_value","syncAria","removeAttribute","setAttribute","validateOnChange","hasAttribute","setupAttributes","isShadowRoot","attrValue","innerHTML","name","oldValue","newValue","disabled","required","readOnly","placeholder","rows","Number","refresh","fragment","document","createDocumentFragment","native","createElement","classList","add","variant","wrapper","inputWrapper","label","htmlFor","id","Array","from","attributes","map","attr","forEach","error","errorSlot","_ariaErrorId","addEventListener","appendChild","append","counter","labelElement","ResizeObserver","resizeObserver","observe","event","addListener","remove","validate","propagateValidation","setValidity","clone","constructor","type","dispatchEvent","dispatchCustomEvent","showInvalidMessage","customErrorDisplay","preventDefault","requiredInvalid","trim","setAriaState","role","readonly","describedBy","componentCleanup","unobserve","disconnect","beforeDisconnect","static","define"],"mappings":"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"}

package/dist/wje-thumbnail.js

@@ -1,73 +1,32 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Thumbnail ]\n*/\n\n:host {\n    width: var(--wje-thumbnail-width);\n    height: var(--wje-thumbnail-height);\n    display: block;\n    border-radius: var(--wje-border-radius);\n}\n\n:host([circle]) ::slotted(img) {\n    border-radius: 50%;\n}\n::slotted(wje-img),\n::slotted(img) {\n    border-radius: var(--wje-thumbnail-border-radius);\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    overflow: hidden;\n}\n";
-class Thumbnail extends WJElement {
-  /**
-   * Creates an instance of Thumbnail.
-   */
+import t from "./wje-element.js";
+class e extends t {
   constructor() {
     super();
-    /**
-     * The class name for the component
-     */
     __publicField(this, "className", "Thumbnail");
   }
-  /**
-   * Returns the CSS stylesheet for the component.
-   * @static
-   * @returns {CSSStyleSheet} The CSS stylesheet
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ":host{width:var(--wje-thumbnail-width);height:var(--wje-thumbnail-height);display:block;border-radius:var(--wje-border-radius)}:host([circle]) ::slotted(img){border-radius:50%}::slotted(wje-img),::slotted(img){border-radius:var(--wje-thumbnail-border-radius);width:100%;height:100%;object-fit:cover;overflow:hidden}";
   }
-  /**
-   * Returns the list of observed attributes.
-   * @static
-   * @returns {Array} An empty array
-   */
   static get observedAttributes() {
     return [];
   }
-  /**
-   * Sets up the attributes for the component.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.syncAria();
+    this.isShadowRoot = "open", this.syncAria();
   }
-  /**
-   * Draws the component for the thumbnail.
-   * @returns {object} Document fragment
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("slot");
-    fragment.appendChild(element);
-    return fragment;
+    let t2 = document.createDocumentFragment(), e2 = document.createElement("slot");
+    return t2.appendChild(e2), t2;
   }
-  /**
-   * Sync ARIA attributes on host.
-   */
   syncAria() {
-    const ariaLabel = this.getAttribute("aria-label");
-    const label = this.getAttribute("label");
-    if (ariaLabel || label) {
-      if (!this.hasAttribute("role")) {
-        this.setAttribute("role", "img");
-      }
-      if (!ariaLabel && label) {
-        this.setAriaState({ label });
-      }
-      this.removeAttribute("aria-hidden");
-    } else {
-      this.setAttribute("aria-hidden", "true");
-    }
+    const t2 = this.getAttribute("aria-label"), e2 = this.getAttribute("label");
+    t2 || e2 ? (this.hasAttribute("role") || this.setAttribute("role", "img"), !t2 && e2 && this.setAriaState({ label: e2 }), this.removeAttribute("aria-hidden")) : this.setAttribute("aria-hidden", "true");
   }
 }
-Thumbnail.define("wje-thumbnail", Thumbnail);
+e.define("wje-thumbnail", e);
 export {
-  Thumbnail as default
+  e as default
 };
 //# sourceMappingURL=wje-thumbnail.js.map

package/dist/wje-thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-thumbnail.js","sources":["../packages/wje-thumbnail/thumbnail.element.js","../packages/wje-thumbnail/thumbnail.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary Thumbnail class\n * @documentation https://elements.webjet.sk/components/thumbnail\n * @status stable\n * @augments WJElement\n * @slot thumbnail-slot - The slot for the thumbnail content.\n * @cssproperty [--wje-thumbnail-width=48px] - Defines the width of the thumbnail. Accepts any valid CSS length unit such as `px`, `rem`, or `%`.\n * @cssproperty [--wje-thumbnail-height=48px] - Specifies the height of the thumbnail. Accepts any valid CSS length unit.\n * @cssproperty [--wje-thumbnail-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the thumbnail, determining how rounded its corners appear. Accepts any valid CSS length unit or CSS variable.\n * @tag thumbnail-element\n */\n\nexport default class Thumbnail extends WJElement {\n    /**\n     * Creates an instance of Thumbnail.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component\n     */\n    className = 'Thumbnail';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of observed attributes.\n     * @static\n     * @returns {Array} An empty array\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Draws the component for the thumbnail.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        const ariaLabel = this.getAttribute('aria-label');\n        const label = this.getAttribute('label');\n\n        if (ariaLabel || label) {\n            if (!this.hasAttribute('role')) {\n                this.setAttribute('role', 'img');\n            }\n            if (!ariaLabel && label) {\n                this.setAriaState({ label });\n            }\n            this.removeAttribute('aria-hidden');\n        } else {\n            this.setAttribute('aria-hidden', 'true');\n        }\n    }\n}\n","import Thumbnail from './thumbnail.element.js';\n\nexport default Thumbnail;\n\nThumbnail.define('wje-thumbnail', Thumbnail);\n"],"names":[],"mappings":";;;;;AAee,MAAM,kBAAkB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI7C,cAAc;AACV,UAAK;AAMT;AAAA;AAAA;AAAA,qCAAY;AAAA,EALZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,SAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AACP,UAAM,YAAY,KAAK,aAAa,YAAY;AAChD,UAAM,QAAQ,KAAK,aAAa,OAAO;AAEvC,QAAI,aAAa,OAAO;AACpB,UAAI,CAAC,KAAK,aAAa,MAAM,GAAG;AAC5B,aAAK,aAAa,QAAQ,KAAK;AAAA,MACnC;AACA,UAAI,CAAC,aAAa,OAAO;AACrB,aAAK,aAAa,EAAE,OAAO;AAAA,MAC/B;AACA,WAAK,gBAAgB,aAAa;AAAA,IACtC,OAAO;AACH,WAAK,aAAa,eAAe,MAAM;AAAA,IAC3C;AAAA,EACJ;AACJ;ACnFA,UAAU,OAAO,iBAAiB,SAAS;"}
+{"version":3,"file":"wje-thumbnail.js","sources":["../packages/wje-thumbnail/thumbnail.element.js","../packages/wje-thumbnail/thumbnail.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary Thumbnail class\n * @documentation https://elements.webjet.sk/components/thumbnail\n * @status stable\n * @augments WJElement\n * @slot thumbnail-slot - The slot for the thumbnail content.\n * @cssproperty [--wje-thumbnail-width=48px] - Defines the width of the thumbnail. Accepts any valid CSS length unit such as `px`, `rem`, or `%`.\n * @cssproperty [--wje-thumbnail-height=48px] - Specifies the height of the thumbnail. Accepts any valid CSS length unit.\n * @cssproperty [--wje-thumbnail-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the thumbnail, determining how rounded its corners appear. Accepts any valid CSS length unit or CSS variable.\n * @tag thumbnail-element\n */\n\nexport default class Thumbnail extends WJElement {\n    /**\n     * Creates an instance of Thumbnail.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component\n     */\n    className = 'Thumbnail';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of observed attributes.\n     * @static\n     * @returns {Array} An empty array\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Draws the component for the thumbnail.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        const ariaLabel = this.getAttribute('aria-label');\n        const label = this.getAttribute('label');\n\n        if (ariaLabel || label) {\n            if (!this.hasAttribute('role')) {\n                this.setAttribute('role', 'img');\n            }\n            if (!ariaLabel && label) {\n                this.setAriaState({ label });\n            }\n            this.removeAttribute('aria-hidden');\n        } else {\n            this.setAttribute('aria-hidden', 'true');\n        }\n    }\n}\n","import Thumbnail from './thumbnail.element.js';\n\nexport default Thumbnail;\n\nThumbnail.define('wje-thumbnail', Thumbnail);\n"],"names":["Thumbnail","WJElement","super","className","cssStyleSheet","this","isShadowRoot","syncAria","draw","fragment","document","createDocumentFragment","element","createElement","appendChild","ariaLabel","getAttribute","label","hasAttribute","setAttribute","setAriaState","removeAttribute","define"],"mappings":";;;;AAee,MAAMA,UAAkBC,EAAAA;AAAAA,EAInC;AACIC,UAAAA;AAMJC,qCAAY;AAAA,EALZ;AAAA,EAYA,2BAAWC;AACP;EACJ;AAAA,EAOA,WAAA;AACI,WAAO,CAAA;AAAA,EACX;AAAA,EAKA;AACIC,SAAKC,eAAe,QACpBD,KAAKE;EACT;AAAA,EAMA,OAAAC;AACI,QAAIC,KAAWC,SAASC,uBAAAA,GAEpBC,KAAUF,SAASG,cAAc;AAIrC,WAFAJ,GAASK,YAAYF,EAAAA,GAEdH;AAAAA,EACX;AAAA,EAKA,WAAAF;AACI,UAAMQ,KAAYV,KAAKW,aAAa,YAAA,GAC9BC,KAAQZ,KAAKW,aAAa,OAAA;AAE5BD,IAAAA,MAAaE,MACRZ,KAAKa,aAAa,MAAA,KACnBb,KAAKc,aAAa,QAAQ,SAEzBJ,MAAaE,MACdZ,KAAKe,aAAa,EAAEH,cAExBZ,KAAKgB,gBAAgB,aAAA,KAErBhB,KAAKc,aAAa,eAAe,MAAA;AAAA,EAEzC;;AClFJnB,EAAUsB,OAAO,iBAAiBtB,CAAAA;"}