@ds-autonomie/web-components 1.22.2 → 1.23.0

package/dist/chunks/{chunk.PGUC3I5F.js → chunk.KDQ7QGKG.js}

@@ -1,27 +1,21 @@
 import {
   textarea_styles_default
-} from "./chunk.GM4DVAZJ.js";
+} from "./chunk.IPUOJRFA.js";
+import {
+  FormControlLayout
+} from "./chunk.FJI3P5RX.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
-import {
-  renderFormElementErrors
-} from "./chunk.E3B2D5KE.js";
 import {
   FormControlController
 } from "./chunk.KIFBWPW5.js";
-import {
-  HasSlotController
-} from "./chunk.DA6UU6UL.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";
-import {
-  ShoelaceElement
-} from "./chunk.YCXTCVAZ.js";
 import {
   __decorateClass
 } from "./chunk.6M63UXML.js";
@@ -32,37 +26,19 @@ import { customElement, property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { live } from "lit/directives/live.js";
-var DSATextarea = class extends ShoelaceElement {
+var DSATextarea = class extends FormControlLayout {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this, {
       assumeInteractionOn: ["dsa-blur", "dsa-input"]
     });
-    this.hasSlotController = new HasSlotController(
-      this,
-      "help-text",
-      "label"
-    );
     this.hasFocus = false;
-    this.title = "";
-    this.name = "";
     this.value = "";
-    this.size = "medium";
-    this.variant = "base";
-    this.error = false;
-    this.errorMessage = "";
-    this.label = "";
-    this.helpText = "";
-    this.placeholder = "";
+    this.defaultValue = "";
     this.rows = 4;
     this.resize = "vertical";
-    this.disabled = false;
-    this.readonly = false;
-    this.form = "";
-    this.required = false;
     this.counter = false;
     this.spellcheck = true;
-    this.defaultValue = "";
   }
   /** Gets the validity state object */
   get validity() {
@@ -199,45 +175,13 @@ var DSATextarea = class extends ShoelaceElement {
     this.input.setCustomValidity(message);
     this.formControlController.updateValidity();
   }
-  render() {
+  renderInput() {
     const hasLabelSlot = this.hasSlotController.test("label");
-    const hasHelpTextSlot = this.hasSlotController.test("help-text");
     const hasLabel = this.label ? true : !!hasLabelSlot;
-    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
-    const counterText = this.maxlength && this.counter ? `${this.value.length}/${this.maxlength}` : void 0;
     return html`
       <div
-        part="form-control"
+        part="base"
         class=${classMap({
-      "form-control": true,
-      "form-control--small": this.size === "small",
-      "form-control--medium": this.size === "medium",
-      "form-control--large": this.size === "large",
-      "form-control--disabled": this.disabled,
-      "form-control--has-label": hasLabel,
-      "form-control--has-help-text": hasHelpText,
-      "form-control--error": this.error,
-      "form-control--has-counter": counterText !== void 0
-    })}
-      >
-        <label
-          part="form-control-label"
-          class="form-control__label"
-          for="input"
-          aria-hidden=${hasLabel ? "false" : "true"}
-        >
-          ${this.required ? html`<span class="form-control__label-required">*</span>` : ""}
-          <slot name="label">${this.label}</slot>
-        </label>
-        <slot name="tooltip" class="form-control__tooltip"></slot>
-
-        <div
-          part="form-control-input"
-          class="form-control-input form-control__field"
-        >
-          <div
-            part="base"
-            class=${classMap({
       textarea: true,
       "textarea--small": this.size === "small",
       "textarea--medium": this.size === "medium",
@@ -253,60 +197,49 @@ var DSATextarea = class extends ShoelaceElement {
       "textarea--resize-vertical": this.resize === "vertical",
       "textarea--resize-auto": this.resize === "auto"
     })}
-          >
-            <textarea
-              part="textarea"
-              id="input"
-              class="textarea__control"
-              title=${ifDefinedAndNotEmpty(hasLabel ? void 0 : this.title)}
-              name=${ifDefinedAndNotEmpty(this.name)}
-              .value=${live(this.value)}
-              ?disabled=${this.disabled}
-              ?readonly=${this.readonly}
-              ?required=${this.required}
-              placeholder=${ifDefined(this.placeholder)}
-              rows=${ifDefined(this.rows)}
-              minlength=${ifDefined(this.minlength)}
-              maxlength=${ifDefined(this.maxlength)}
-              autocapitalize=${ifDefined(this.autocapitalize)}
-              autocorrect=${ifDefined(this.autocorrect)}
-              ?autofocus=${this.autofocus}
-              spellcheck=${ifDefined(this.spellcheck)}
-              enterkeyhint=${ifDefined(this.enterkeyhint)}
-              inputmode=${ifDefined(this.inputmode)}
-              aria-describedby=${this.getDescriptionIds()}
-              aria-label=${ifDefinedAndNotEmpty(
-      hasLabel ? void 0 : this.title
-    )}
-              aria-invalid=${ifDefined(this.error ? "true" : void 0)}
-              @change=${this.handleChange}
-              @input=${this.handleInput}
-              @invalid=${this.handleInvalid}
-              @focus=${this.handleFocus}
-              @blur=${this.handleBlur}
-            ></textarea>
-          </div>
-        </div>
-        <slot
-          name="help-text"
-          part="form-control-help-text"
-          id="help-text"
-          class="form-control__help-text"
-          aria-hidden=${hasHelpText ? "false" : "true"}
-        >
-          ${this.helpText}
-        </slot>
-        ${counterText !== void 0 ? html`<span
-              id="counter"
-              class=${classMap({
+      >
+        <textarea
+          part="textarea"
+          id="input"
+          class="textarea__control"
+          title=${ifDefinedAndNotEmpty(hasLabel ? void 0 : this.title)}
+          name=${ifDefinedAndNotEmpty(this.name)}
+          .value=${live(this.value)}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          placeholder=${ifDefined(this.placeholder)}
+          rows=${ifDefined(this.rows)}
+          minlength=${ifDefined(this.minlength)}
+          maxlength=${ifDefined(this.maxlength)}
+          autocapitalize=${ifDefined(this.autocapitalize)}
+          autocorrect=${ifDefined(this.autocorrect)}
+          ?autofocus=${this.autofocus}
+          spellcheck=${ifDefined(this.spellcheck)}
+          enterkeyhint=${ifDefined(this.enterkeyhint)}
+          inputmode=${ifDefined(this.inputmode)}
+          aria-describedby=${this.getDescriptionIds()}
+          aria-label=${ifDefinedAndNotEmpty(hasLabel ? void 0 : this.title)}
+          aria-invalid=${ifDefined(this.error ? "true" : void 0)}
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+          @invalid=${this.handleInvalid}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        ></textarea>
+      </div>
+    `;
+  }
+  renderCounter() {
+    const counterText = this.maxlength && this.counter ? `${this.value.length}/${this.maxlength}` : void 0;
+    return counterText !== void 0 ? html`<span
+          id="counter"
+          class=${classMap({
       "form-control__counter": true,
       "form-control__counter--animated": this.value.length === this.maxlength
     })}
-              >${counterText}</span
-            >` : ""}
-        ${this.error && !this.disabled ? renderFormElementErrors(this.errorMessage) : ""}
-      </div>
-    `;
+          >${counterText}</span
+        >` : html``;
   }
 };
 DSATextarea.styles = textarea_styles_default;
@@ -316,66 +249,18 @@ __decorateClass([
 __decorateClass([
   state()
 ], DSATextarea.prototype, "hasFocus", 2);
-__decorateClass([
-  property()
-], DSATextarea.prototype, "title", 2);
-__decorateClass([
-  property()
-], DSATextarea.prototype, "name", 2);
 __decorateClass([
   property()
 ], DSATextarea.prototype, "value", 2);
 __decorateClass([
-  property({ reflect: true })
-], DSATextarea.prototype, "size", 2);
-__decorateClass([
-  property({ reflect: true })
-], DSATextarea.prototype, "variant", 2);
-__decorateClass([
-  property({ type: Boolean })
-], DSATextarea.prototype, "error", 2);
-__decorateClass([
-  property({
-    attribute: "error-message",
-    converter: {
-      fromAttribute: (value) => value ? value.split("|") : "",
-      toAttribute: (value) => {
-        if (typeof value === "string") {
-          return value;
-        } else {
-          return value.join("|");
-        }
-      }
-    }
-  })
-], DSATextarea.prototype, "errorMessage", 2);
-__decorateClass([
-  property()
-], DSATextarea.prototype, "label", 2);
-__decorateClass([
-  property({ attribute: "help-text" })
-], DSATextarea.prototype, "helpText", 2);
-__decorateClass([
-  property()
-], DSATextarea.prototype, "placeholder", 2);
+  defaultValue()
+], DSATextarea.prototype, "defaultValue", 2);
 __decorateClass([
   property({ type: Number })
 ], DSATextarea.prototype, "rows", 2);
 __decorateClass([
   property()
 ], DSATextarea.prototype, "resize", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DSATextarea.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DSATextarea.prototype, "readonly", 2);
-__decorateClass([
-  property({ reflect: true })
-], DSATextarea.prototype, "form", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DSATextarea.prototype, "required", 2);
 __decorateClass([
   property({ type: Number })
 ], DSATextarea.prototype, "minlength", 2);
@@ -413,9 +298,6 @@ __decorateClass([
 __decorateClass([
   property()
 ], DSATextarea.prototype, "inputmode", 2);
-__decorateClass([
-  defaultValue()
-], DSATextarea.prototype, "defaultValue", 2);
 __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], DSATextarea.prototype, "handleDisabledChange", 1);

package/dist/chunks/{chunk.SMB4Q2LK.js → chunk.L64R3324.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.SGIGGO5M.js";
 import {
   LocalizeController
-} from "./chunk.5MBTOZ4X.js";
+} from "./chunk.4ZYXTXB5.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";

package/dist/chunks/{chunk.GL4GU5DO.js → chunk.MJ3ZLDHO.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.G4ODEI4O.js";
 import {
   HasSlotController
-} from "./chunk.DA6UU6UL.js";
+} from "./chunk.YIY5RM53.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";