@ds-autonomie/web-components 2.5.0 → 2.6.0

package/cdn/chunks/chunk.5F7AUS4F.js

@@ -1,703 +0,0 @@
-import {
-  DSAInputTime
-} from "./chunk.HG4TPK7J.js";
-import {
-  big_default,
-  getOverridenIconDetails,
-  isInvalidAmountKey,
-  isPrefixIconOverriden,
-  numberToFrAmount,
-  parseFrAmount,
-  roundToStep
-} from "./chunk.EF2VOGBL.js";
-import {
-  DSAInputDate
-} from "./chunk.TY7NQYTC.js";
-import {
-  input_styles_default
-} from "./chunk.L3ZYNSI3.js";
-import {
-  FormControlLayout
-} from "./chunk.E73QKLNL.js";
-import {
-  l
-} from "./chunk.7PPSHHT2.js";
-import {
-  defaultValue
-} from "./chunk.YY5FKN3H.js";
-import {
-  FormControlController
-} from "./chunk.3NWILHZZ.js";
-import {
-  LocalizeController
-} from "./chunk.BMQ5WSY7.js";
-import {
-  watch
-} from "./chunk.4FQJ3QJK.js";
-import {
-  ifDefinedAndNotEmpty
-} from "./chunk.B6GVVW66.js";
-import {
-  o
-} from "./chunk.YQLIIKLI.js";
-import {
-  e as e2
-} from "./chunk.IKHG7XGO.js";
-import {
-  e,
-  n,
-  r,
-  t
-} from "./chunk.DZB6XUZ7.js";
-import {
-  x
-} from "./chunk.7HUC6BF3.js";
-import {
-  __decorateClass
-} from "./chunk.4ZGVANML.js";
-
-// src/components/input/input.ts
-var DSAInput = class extends FormControlLayout {
-  constructor() {
-    super(...arguments);
-    this.formControlController = new FormControlController(this, {
-      assumeInteractionOn: ["dsa-blur", "dsa-input"]
-    });
-    this.localize = new LocalizeController(this);
-    this.hasFocus = false;
-    this.type = "text";
-    this.value = "";
-    this.defaultValue = "";
-    this.clearable = false;
-    this.passwordVisible = false;
-    this.counter = false;
-    this.spellcheck = true;
-  }
-  /** Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. */
-  get valueAsDate() {
-    var _a, _b;
-    if (this.input instanceof DSAInputTime) {
-      return null;
-    }
-    return (_b = (_a = this.input) == null ? void 0 : _a.valueAsDate) != null ? _b : null;
-  }
-  set valueAsDate(newValue) {
-    const input = document.createElement("input");
-    input.type = "date";
-    input.valueAsDate = newValue;
-    this.value = input.value;
-  }
-  /** Gets or sets the current value as a number. Returns `NaN` if the value can't be converted. */
-  get valueAsNumber() {
-    var _a, _b;
-    if (this.type === "amount") {
-      return parseFloat(this.value.replace(",", "."));
-    } else {
-      return (_b = (_a = this.standardInput) == null ? void 0 : _a.valueAsNumber) != null ? _b : parseFloat(this.value);
-    }
-  }
-  set valueAsNumber(newValue) {
-    const input = document.createElement("input");
-    input.type = "number";
-    input.valueAsNumber = newValue;
-    this.value = input.value;
-  }
-  /** Gets the validity state object */
-  get validity() {
-    var _a, _b;
-    return (_b = (_a = this.input) == null ? void 0 : _a.validity) != null ? _b : true;
-  }
-  /** Gets the validation message */
-  get validationMessage() {
-    return this.input.validationMessage;
-  }
-  async firstUpdated() {
-    await this.updateComplete;
-    if (this.type === "date") {
-      this.input = this.dateInput;
-    } else if (this.type === "time") {
-      this.input = this.timeInput;
-    } else {
-      this.input = this.standardInput;
-    }
-    this.formControlController.updateValidity();
-  }
-  handleBlur(event) {
-    if (["date", "time"].includes(this.type)) {
-      event.stopPropagation();
-    }
-    this.hasFocus = false;
-    this.emit("dsa-blur");
-  }
-  handleChange(event) {
-    if (["date", "time"].includes(this.type)) {
-      event.stopPropagation();
-    }
-    if (this.type === "amount") {
-      this.handleAmountChange();
-      this.value = this.input.value.replace(",", ".");
-    } else {
-      this.value = this.input.value;
-    }
-    this.emit("dsa-change");
-  }
-  handleAmountChange() {
-    if (this.input.value === "" || this.input.value === "-") {
-      this.input.value = "";
-      return;
-    }
-    const parsedValue = parseFrAmount(this.input.value);
-    const parsedMin = parseFloat(`${this.min}`);
-    const parsedMax = parseFloat(`${this.max}`);
-    this.input.value = numberToFrAmount(
-      roundToStep(parsedValue, this.getSafeStep())
-    );
-    if (!isNaN(parsedMin) && parsedValue < parsedMin) {
-      this.input.value = numberToFrAmount(this.min);
-    }
-    if (!isNaN(parsedMax) && parsedValue > parsedMax) {
-      this.input.value = numberToFrAmount(this.max);
-    }
-  }
-  handleClearClick(event) {
-    this.value = "";
-    this.emit("dsa-clear");
-    this.emit("dsa-input");
-    this.emit("dsa-change");
-    this.input.focus();
-    event.stopPropagation();
-  }
-  handleFocus(event) {
-    if (["date", "time"].includes(this.type)) {
-      event.stopPropagation();
-    }
-    this.hasFocus = true;
-    this.emit("dsa-focus");
-  }
-  handleInput(event) {
-    if (["date", "time"].includes(this.type)) {
-      event.stopPropagation();
-    }
-    if (this.type === "amount") {
-      this.value = this.input.value.replace(",", ".");
-    } else {
-      this.value = this.input.value;
-    }
-    this.formControlController.updateValidity();
-    this.emit("dsa-input");
-  }
-  handleInvalid(event) {
-    this.formControlController.setValidity(false);
-    this.formControlController.emitInvalidEvent(event);
-  }
-  handleKeyDown(event) {
-    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
-    if (this.type === "amount") {
-      this.handleAmountKeydown(event);
-    }
-    if (event.key === "Enter" && !hasModifier) {
-      setTimeout(() => {
-        if (!event.defaultPrevented && !event.isComposing) {
-          this.formControlController.submit();
-        }
-      });
-    }
-  }
-  handleAmountKeydown(event) {
-    if (event.key === "Dead") {
-      this.input.blur();
-      setTimeout(() => this.input.focus());
-    }
-    if (isInvalidAmountKey(event) || event.key === "-" && this.standardInput.selectionStart !== null && this.standardInput.selectionStart > 0 || event.key === "," && this.input.value.includes(",")) {
-      event.preventDefault();
-      return;
-    }
-    if (event.key === "ArrowDown") {
-      this.stepDown();
-    }
-    if (event.key === "ArrowUp") {
-      this.stepUp();
-    }
-    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-      const inputEvent = new Event("input", { bubbles: true });
-      const changeEvent = new Event("change", { bubbles: true });
-      this.input.dispatchEvent(inputEvent);
-      this.input.dispatchEvent(changeEvent);
-    }
-  }
-  getSafeStep() {
-    if (this.step === "any") {
-      return this.step;
-    }
-    const parsedStep = parseFloat(`${this.step}`);
-    if (isNaN(parsedStep) || parsedStep === 0) {
-      return 1;
-    } else {
-      return parsedStep;
-    }
-  }
-  handlePasswordToggle() {
-    this.passwordVisible = !this.passwordVisible;
-  }
-  getDescriptionIds() {
-    let ids = ["input__prefix", "input__suffix"];
-    if (this.error) ids = [...ids, "error-text"];
-    ids = [...ids, "help-text"];
-    if (this.maxlength && this.counter) ids = [...ids, "counter"];
-    ids = [...ids, "description"];
-    return ids.join(" ");
-  }
-  handleDisabledChange() {
-    this.formControlController.setValidity(this.disabled);
-  }
-  handleStepChange() {
-    if (this.input instanceof DSAInputTime) {
-      this.input.step = typeof this.step === "number" ? this.step : 60;
-    } else this.standardInput.step = String(this.step);
-    this.formControlController.updateValidity();
-  }
-  async handleValueChange() {
-    await this.updateComplete;
-    this.formControlController.updateValidity();
-  }
-  /** Sets focus on the input. */
-  focus(options) {
-    this.input.focus(options);
-  }
-  /** Removes focus from the input. */
-  blur() {
-    this.input.blur();
-  }
-  /** Selects all the text in the input. */
-  select() {
-    if (this.input instanceof HTMLInputElement) {
-      this.input.select();
-    }
-  }
-  /** Sets the start and end positions of the text selection (0-based). */
-  setSelectionRange(selectionStart, selectionEnd, selectionDirection = "none") {
-    if (this.input instanceof HTMLInputElement) {
-      this.input.setSelectionRange(
-        selectionStart,
-        selectionEnd,
-        selectionDirection
-      );
-    }
-  }
-  /** Replaces a range of text with a new string. */
-  setRangeText(replacement, start, end, selectMode) {
-    if (this.input instanceof HTMLInputElement) {
-      this.input.setRangeText(replacement, start, end, selectMode);
-      if (this.value !== this.input.value) {
-        this.value = this.input.value;
-      }
-    }
-  }
-  async showTimePicker() {
-    if (this.input instanceof DSAInputTime) {
-      await this.input.showTimePicker();
-    }
-  }
-  async hideTimePicker() {
-    if (this.input instanceof DSAInputTime) {
-      await this.input.hideTimePicker();
-    }
-  }
-  async showDatepicker() {
-    if (this.input instanceof DSAInputDate) {
-      await this.input.showDatepicker();
-    }
-  }
-  async hideDatepicker() {
-    await this.dateInput.hideDatepicker();
-  }
-  adjustAmountValue(direction) {
-    const safeStep = this.getSafeStep();
-    const numberStep = new big_default(safeStep === "any" ? 1 : safeStep);
-    const parsedValue = new big_default(parseFrAmount(this.input.value));
-    const newValue = direction === "up" ? parsedValue.plus(numberStep).toNumber() : parsedValue.minus(numberStep).toNumber();
-    this.input.value = numberToFrAmount(newValue);
-    this.value = this.input.value.replace(",", ".");
-  }
-  /** Increments the value of a numeric or time input type by the value of the step attribute, multiplied by an optional number parameter. */
-  stepUp(stepNumber) {
-    switch (this.type) {
-      case "date":
-        return;
-      case "time":
-        if (!(this.input instanceof DSAInputTime)) return;
-        this.input.stepUp(stepNumber);
-        this.value = this.input.value;
-        return;
-      case "amount":
-        this.adjustAmountValue("up");
-        return;
-      default:
-        this.standardInput.stepUp(stepNumber);
-        if (this.value !== this.standardInput.value) {
-          this.value = this.standardInput.value;
-        }
-    }
-  }
-  /** Decrements the value of a numeric or time input type by the value of the step attribute, multiplied by an optional number parameter.  */
-  stepDown(stepNumber) {
-    switch (this.type) {
-      case "date":
-        return;
-      case "time":
-        if (!(this.input instanceof DSAInputTime)) return;
-        this.input.stepDown(stepNumber);
-        this.value = this.input.value;
-        return;
-      case "amount":
-        this.adjustAmountValue("down");
-        return;
-      default:
-        this.standardInput.stepDown(stepNumber);
-        if (this.value !== this.standardInput.value) {
-          this.value = this.standardInput.value;
-        }
-    }
-  }
-  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
-  checkValidity() {
-    if (this.type === "amount") {
-      return this.input.checkValidity() && this.checkAmountValidity();
-    }
-    return this.input.checkValidity();
-  }
-  /** Gets the associated form, if one exists. */
-  getForm() {
-    return this.formControlController.getForm();
-  }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity() {
-    if (this.type === "amount") {
-      return this.input.reportValidity() && this.checkAmountValidity();
-    }
-    return this.input.reportValidity();
-  }
-  checkAmountValidity() {
-    if (this.value === "") {
-      return true;
-    }
-    const parsedValue = parseFloat(this.value);
-    const parsedMin = parseFloat(`${this.min}`);
-    const parsedMax = parseFloat(`${this.max}`);
-    const safeStep = this.getSafeStep();
-    return !isNaN(parsedValue) && (isNaN(parsedMin) || parsedValue >= parsedMin) && (isNaN(parsedMax) || parsedValue <= parsedMax) && (safeStep === "any" || roundToStep(parsedValue, safeStep) === parsedValue);
-  }
-  /** Sets a custom validation message. Pass an empty string to restore validity. */
-  setCustomValidity(message) {
-    this.input.setCustomValidity(message);
-    this.formControlController.updateValidity();
-  }
-  async getUpdateComplete() {
-    let result;
-    if (this.input instanceof DSAInputDate || this.input instanceof DSAInputTime) {
-      result = await this.input.updateComplete;
-    } else {
-      result = await super.getUpdateComplete();
-    }
-    return result;
-  }
-  render() {
-    if (this.type === "date") {
-      return x`
-        <dsa-input-date
-          name=${o(this.name)}
-          title=${o(this.title)}
-          value=${this.value}
-          .defaultValue=${o(this.defaultValue)}
-          size=${o(this.size)}
-          variant=${o(this.variant)}
-          label=${o(this.label)}
-          help-text=${o(this.helpText)}
-          ?clearable=${this.clearable}
-          ?disabled=${this.disabled}
-          lang=${o(this.lang)}
-          placeholder=${o(this.placeholder)}
-          ?readonly=${this.readonly}
-          ?error=${this.error}
-          .errorMessage=${o(this.errorMessage)}
-          form=${o(this.form)}
-          ?required=${this.required}
-          min=${o(this.min)}
-          max=${o(this.max)}
-          calendar-start-date=${o(this.calendarStartDate)}
-          ?autofocus=${this.autofocus}
-          enterkeyhint=${o(this.enterkeyhint)}
-          @dsa-change=${this.handleChange}
-          @dsa-input=${this.handleInput}
-          @dsa-focus=${this.handleFocus}
-          @dsa-blur=${this.handleBlur}
-          description=${o(this.description)}
-        >
-          ${this.hasSlotController.test("label") ? x` <slot name="label" slot="label"></slot> ` : ""}
-          ${this.hasSlotController.test("prefix") ? x` <slot name="prefix" slot="prefix"></slot> ` : ""}
-          ${this.hasSlotController.test("help-text") ? x` <slot name="help-text" slot="help-text"></slot> ` : ""}
-          ${this.hasSlotController.test("tooltip") ? x` <slot name="tooltip" slot="tooltip"></slot> ` : ""}
-        </dsa-input-date>
-      `;
-    } else if (this.type === "time") {
-      return x`
-        <dsa-input-time
-          name=${o(this.name)}
-          title=${o(this.title)}
-          value=${this.value}
-          .defaultValue=${o(this.defaultValue)}
-          size=${o(this.size)}
-          variant=${o(this.variant)}
-          label=${o(this.label)}
-          help-text=${o(this.helpText)}
-          ?clearable=${this.clearable}
-          ?disabled=${this.disabled}
-          ?readonly=${this.readonly}
-          ?error=${this.error}
-          .errorMessage=${o(this.errorMessage)}
-          form=${o(this.form)}
-          ?required=${this.required}
-          min=${o(this.min)}
-          max=${o(this.max)}
-          step=${o(this.step)}
-          ?autofocus=${this.autofocus}
-          enterkeyhint=${o(this.enterkeyhint)}
-          @dsa-change=${this.handleChange}
-          @dsa-input=${this.handleInput}
-          @dsa-focus=${this.handleFocus}
-          @dsa-blur=${this.handleBlur}
-          description=${o(this.description)}
-        >
-          ${this.hasSlotController.test("label") ? x` <slot name="label" slot="label"></slot> ` : ""}
-          ${this.hasSlotController.test("prefix") ? x` <slot name="prefix" slot="prefix"></slot> ` : ""}
-          ${this.hasSlotController.test("suffix") ? x` <slot name="suffix" slot="suffix"></slot> ` : ""}
-          ${this.hasSlotController.test("help-text") ? x` <slot name="help-text" slot="help-text"></slot> ` : ""}
-          ${this.hasSlotController.test("tooltip") ? x` <slot name="tooltip" slot="tooltip"></slot> ` : ""}
-        </dsa-input-time>
-      `;
-    } else {
-      return super.render();
-    }
-  }
-  renderInput() {
-    const hasLabelSlot = this.hasSlotController.test("label");
-    const overridenPrefixIcon = isPrefixIconOverriden(this.type) ? getOverridenIconDetails(this.type) : void 0;
-    const hasPrefixIcon = overridenPrefixIcon !== void 0 || this.hasSlotController.test("prefix");
-    const hasSuffixIcon = this.hasSlotController.test("suffix");
-    const hasLabel = this.label ? true : !!hasLabelSlot;
-    const hasClearIcon = this.clearable && !this.disabled && !this.readonly && (typeof this.value === "number" || this.value.length > 0);
-    const hasHideIcon = this.type === "password" && !this.disabled;
-    let nativeType;
-    if (this.type === "password" && this.passwordVisible || this.type === "amount") {
-      nativeType = "text";
-    } else {
-      nativeType = this.type;
-    }
-    return x`
-      <div
-        part="base"
-        class=${e2({
-      input: true,
-      // Sizes
-      "input--small": this.size === "small",
-      "input--medium": this.size === "medium",
-      "input--large": this.size === "large",
-      // States
-      "input--error": this.error,
-      "input--on-layer": this.variant === "layer",
-      "input--on-base": this.variant === "base",
-      "input--disabled": this.disabled,
-      "input--readonly": this.readonly,
-      "input--focused": this.hasFocus,
-      "input--empty": !this.value,
-      "form-control--has-prefix-icon": hasPrefixIcon
-    })}
-      >
-        ${overridenPrefixIcon ? x`<dsa-icon
-              name=${overridenPrefixIcon.iconName}
-              class="input__prefix"
-              library="system"
-            ></dsa-icon>` : x` <slot
-              name="prefix"
-              part="prefix"
-              id="input__prefix"
-              class="input__prefix"
-            ></slot>`}
-
-        <input
-          part="input"
-          id="input"
-          class="input__control"
-          type=${nativeType}
-          title=${ifDefinedAndNotEmpty(hasLabel ? void 0 : this.title)}
-          name=${ifDefinedAndNotEmpty(this.name)}
-          ?disabled=${this.disabled}
-          ?readonly=${this.readonly}
-          ?required=${this.required}
-          placeholder=${o(this.placeholder)}
-          minlength=${o(this.minlength)}
-          maxlength=${o(this.maxlength)}
-          min=${o(this.min)}
-          max=${o(this.max)}
-          step=${o(this.step)}
-          .value=${l(
-      this.type === "amount" ? numberToFrAmount(this.value) : this.value
-    )}
-          autocapitalize=${o(this.autocapitalize)}
-          autocomplete=${o(this.autocomplete)}
-          autocorrect=${o(this.autocorrect)}
-          ?autofocus=${this.autofocus}
-          spellcheck=${this.spellcheck}
-          pattern=${o(this.pattern)}
-          enterkeyhint=${o(this.enterkeyhint)}
-          inputmode=${o(this.inputmode)}
-          aria-label=${ifDefinedAndNotEmpty(hasLabel ? void 0 : this.title)}
-          aria-describedby=${this.getDescriptionIds()}
-          aria-invalid=${o(this.error ? "true" : void 0)}
-          @change=${this.handleChange}
-          @input=${this.handleInput}
-          @invalid=${this.handleInvalid}
-          @keydown=${this.handleKeyDown}
-          @focus=${this.handleFocus}
-          @blur=${this.handleBlur}
-        />
-
-        ${hasSuffixIcon ? x`<slot
-              name="suffix"
-              id="input__suffix"
-              class="input__suffix"
-            ></slot>` : ""}
-        ${hasClearIcon ? x`
-              <dsa-icon-button
-                part="clear-button"
-                class="input__action-button"
-                name="clear"
-                label=${this.localize.term("clearEntry")}
-                @click=${this.handleClearClick}
-                library="system"
-              ></dsa-icon-button>
-            ` : ""}
-        ${hasHideIcon ? x`<dsa-icon-button
-              part="password-toggle-button"
-              class="input__action-button"
-              label=${this.localize.term(
-      this.passwordVisible ? "hidePassword" : "showPassword"
-    )}
-              name=${this.passwordVisible ? "visibility_off" : "visibility"}
-              @click=${this.handlePasswordToggle}
-              library="system"
-            ></dsa-icon-button>` : ""}
-      </div>
-    `;
-  }
-  renderCounter() {
-    const counterText = this.maxlength && this.counter ? `${this.value.length}/${this.maxlength}` : void 0;
-    return counterText !== void 0 ? x`<span
-          id="counter"
-          class=${e2({
-      "form-control__counter": true,
-      "form-control__counter--animated": this.value.length === this.maxlength
-    })}
-          >${counterText}</span
-        >` : x``;
-  }
-};
-DSAInput.styles = input_styles_default;
-__decorateClass([
-  e("input")
-], DSAInput.prototype, "standardInput", 2);
-__decorateClass([
-  e("dsa-input-date")
-], DSAInput.prototype, "dateInput", 2);
-__decorateClass([
-  e("dsa-input-time")
-], DSAInput.prototype, "timeInput", 2);
-__decorateClass([
-  r()
-], DSAInput.prototype, "hasFocus", 2);
-__decorateClass([
-  n({ reflect: true })
-], DSAInput.prototype, "type", 2);
-__decorateClass([
-  n()
-], DSAInput.prototype, "value", 2);
-__decorateClass([
-  defaultValue()
-], DSAInput.prototype, "defaultValue", 2);
-__decorateClass([
-  n({ type: Boolean })
-], DSAInput.prototype, "clearable", 2);
-__decorateClass([
-  n()
-], DSAInput.prototype, "lang", 2);
-__decorateClass([
-  n({ attribute: "password-visible", type: Boolean })
-], DSAInput.prototype, "passwordVisible", 2);
-__decorateClass([
-  n()
-], DSAInput.prototype, "pattern", 2);
-__decorateClass([
-  n({ type: Number })
-], DSAInput.prototype, "minlength", 2);
-__decorateClass([
-  n({ type: Number })
-], DSAInput.prototype, "maxlength", 2);
-__decorateClass([
-  n({ type: Boolean })
-], DSAInput.prototype, "counter", 2);
-__decorateClass([
-  n()
-], DSAInput.prototype, "min", 2);
-__decorateClass([
-  n()
-], DSAInput.prototype, "max", 2);
-__decorateClass([
-  n({ attribute: "calendar-start-date" })
-], DSAInput.prototype, "calendarStartDate", 2);
-__decorateClass([
-  n()
-], DSAInput.prototype, "step", 2);
-__decorateClass([
-  n()
-], DSAInput.prototype, "autocapitalize", 2);
-__decorateClass([
-  n()
-], DSAInput.prototype, "autocorrect", 2);
-__decorateClass([
-  n()
-], DSAInput.prototype, "autocomplete", 2);
-__decorateClass([
-  n({ type: Boolean })
-], DSAInput.prototype, "autofocus", 2);
-__decorateClass([
-  n()
-], DSAInput.prototype, "enterkeyhint", 2);
-__decorateClass([
-  n({
-    type: Boolean,
-    converter: {
-      // Allow "true|false" attribute values but keep the property boolean
-      fromAttribute: (value) => !value || value === "false" ? false : true,
-      toAttribute: (value) => value ? "true" : "false"
-    }
-  })
-], DSAInput.prototype, "spellcheck", 2);
-__decorateClass([
-  n()
-], DSAInput.prototype, "inputmode", 2);
-__decorateClass([
-  watch("disabled", { waitUntilFirstUpdate: true })
-], DSAInput.prototype, "handleDisabledChange", 1);
-__decorateClass([
-  watch("step", { waitUntilFirstUpdate: true })
-], DSAInput.prototype, "handleStepChange", 1);
-__decorateClass([
-  watch("value", { waitUntilFirstUpdate: true })
-], DSAInput.prototype, "handleValueChange", 1);
-DSAInput = __decorateClass([
-  t("dsa-input")
-], DSAInput);
-
-export {
-  DSAInput
-};