@ds-autonomie/web-components 1.0.1

package/dist/chunks/chunk.OVK7QCA7.js

@@ -0,0 +1,441 @@
+import {
+  input_mask_styles_default
+} from "./chunk.O73OYTYJ.js";
+import {
+  getMaskedValue,
+  stripSpecialChars
+} from "./chunk.SQMWMSBA.js";
+import {
+  defaultValue
+} from "./chunk.GI7VDIWX.js";
+import {
+  FormControlController
+} from "./chunk.KIFBWPW5.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  LocalizeController
+} from "./chunk.5XL2LZLC.js";
+import {
+  watch
+} from "./chunk.D7CATJYB.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/input-mask/input-mask.ts
+import { html } from "lit";
+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 DSAInputMask = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      assumeInteractionOn: ["dsa-blur", "dsa-input"]
+    });
+    this.hasSlotController = new HasSlotController(
+      this,
+      "help-text",
+      "label",
+      "prefix"
+    );
+    this.localize = new LocalizeController(this);
+    this.hasFocus = false;
+    this.title = "";
+    this.name = "";
+    this.value = "";
+    this.defaultValue = "";
+    this.size = "medium";
+    this.variant = "base";
+    this.label = "";
+    this.helpText = "";
+    this.clearable = false;
+    this.disabled = false;
+    this.placeholder = "";
+    this.readonly = false;
+    this.validate = false;
+    this.error = false;
+    this.errorMessage = "";
+    this.form = "";
+    this.required = false;
+  }
+  /** Gets the validity state object */
+  get validity() {
+    if (this.validate) {
+      if (this.value.length > 0) {
+        const strippedValue = stripSpecialChars(this.value);
+        const matches = strippedValue.match(this.pattern);
+        this.error = matches === null;
+      } else {
+        this.error = false;
+      }
+      const validityState = {
+        badInput: false,
+        customError: false,
+        patternMismatch: this.error,
+        rangeOverflow: false,
+        rangeUnderflow: false,
+        stepMismatch: false,
+        tooLong: false,
+        tooShort: false,
+        typeMismatch: false,
+        valid: !this.error,
+        valueMissing: false
+      };
+      return validityState;
+    }
+    return this.input.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.input.validationMessage;
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("dsa-blur");
+  }
+  handleChange() {
+    const strippedValue = stripSpecialChars(this.input.value);
+    this.value = strippedValue;
+    this.emit("dsa-change");
+  }
+  getMaskedValue(inputValue) {
+    return getMaskedValue(inputValue, this.placeholder);
+  }
+  handleClearClick(event) {
+    this.value = "";
+    this.emit("dsa-clear");
+    this.emit("dsa-input");
+    this.emit("dsa-change");
+    this.input.focus();
+    event.stopPropagation();
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("dsa-focus");
+  }
+  handleInput() {
+    const strippedValue = stripSpecialChars(this.input.value);
+    this.value = strippedValue;
+    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 (event.key === "Enter" && !hasModifier) {
+      setTimeout(() => {
+        if (!event.defaultPrevented && !event.isComposing) {
+          this.formControlController.submit();
+        }
+      });
+    }
+  }
+  handleDisabledChange() {
+    this.formControlController.setValidity(this.disabled);
+  }
+  async handleValueChange() {
+    await this.updateComplete;
+    this.formControlController.updateValidity();
+  }
+  handleErrorChange() {
+    if (this.error) {
+      this.setAttribute("aria-invalid", "true");
+    } else {
+      this.removeAttribute("aria-invalid");
+    }
+  }
+  /** 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() {
+    this.input.select();
+  }
+  /** Sets the start and end positions of the text selection (0-based). */
+  setSelectionRange(selectionStart, selectionEnd, selectionDirection = "none") {
+    this.input.setSelectionRange(
+      selectionStart,
+      selectionEnd,
+      selectionDirection
+    );
+  }
+  /** Replaces a range of text with a new string. */
+  setRangeText(replacement, start, end, selectMode) {
+    this.input.setRangeText(replacement, start, end, selectMode);
+    if (this.value !== this.input.value) {
+      this.value = this.input.value;
+    }
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    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() {
+    return this.input.reportValidity();
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    if (this.validate) {
+      this.input.setCustomValidity(this.error ? this.errorMessage : "");
+    } else {
+      this.input.setCustomValidity(message);
+    }
+    this.formControlController.updateValidity();
+  }
+  render() {
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasHelpTextSlot = this.hasSlotController.test("help-text");
+    const hasPrefixIcon = this.hasSlotController.test("prefix");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    const hasClearIcon = this.clearable && !this.disabled && !this.readonly && (typeof this.value === "number" || this.value.length > 0);
+    const maskedValue = this.getMaskedValue(this.value);
+    const placeholder = this.placeholder.substring(maskedValue.length);
+    return html`
+      <div
+        part="form-control"
+        class=${classMap({
+      "form-control": true,
+      "form-control--error": this.error,
+      "form-control--small": this.size === "small",
+      "form-control--medium": this.size === "medium",
+      "form-control--large": this.size === "large",
+      "form-control--has-label": hasLabel,
+      "form-control--has-help-text": hasHelpText
+    })}
+      >
+        <label
+          part="form-control-label"
+          class='form-control__label'
+          for="input-mask"
+          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({
+      "input-mask": true,
+      // Sizes
+      "input-mask--small": this.size === "small",
+      "input-mask--medium": this.size === "medium",
+      "input-mask--large": this.size === "large",
+      // States
+      "input-mask--error": this.error,
+      "input-mask--on-layer": this.variant === "layer",
+      "input-mask--on-base": this.variant === "base",
+      "input-mask--disabled": this.disabled,
+      "input-mask--readonly": this.readonly,
+      "input-mask--focused": this.hasFocus,
+      "input-mask--empty": !this.value
+    })}
+          >
+          <slot name="prefix" part="prefix" class="input-mask__prefix"></slot>
+
+
+          <div class=${classMap({
+      "input-mask__placeholder": true
+    })}  aria-placeholder=${placeholder}  aria-hidden="true"
+              >
+                <span class="input-mask__value"  aria-hidden="true">${maskedValue}</span>
+                ${placeholder}</div
+            >
+
+            <input
+              part="input"
+              id="input-mask"
+              class=${classMap({
+      "input-mask__control": true,
+      "input-mask__control-with-prefix": hasPrefixIcon
+    })}
+              type="text"
+              title=${hasLabel ? void 0 : this.title}
+              name=${ifDefined(this.name)}
+              ?disabled=${this.disabled}
+              ?readonly=${this.readonly}
+              ?required=${this.required}
+              minlength=${ifDefined(this.minlength)}
+              maxlength=${ifDefined(this.placeholder.length)}
+              size=${ifDefined(this.placeholder.length)}
+              pattern=${ifDefined(this.pattern)}
+              placeholder=${ifDefined(this.placeholder)}
+              .value=${live(maskedValue)}
+              autocomplete=${ifDefined(this.autocomplete)}
+              autocorrect=${ifDefined(this.autocorrect)}
+              ?autofocus=${this.autofocus}
+              spellcheck=${this.spellcheck}
+              enterkeyhint=${ifDefined(this.enterkeyhint)}
+              inputmode=${this.inputmode}
+              aria-label=${hasLabel ? void 0 : this.title}
+              aria-describedby=${this.error ? "error-text help-text" : "help-text"}
+              @change=${this.handleChange}
+              @input=${this.handleInput}
+              @invalid=${this.handleInvalid}
+              @keydown=${this.handleKeyDown}
+              @focus=${this.handleFocus}
+              @blur=${this.handleBlur}
+            />
+
+
+
+            ${hasClearIcon ? html`
+                    <button
+                      part="clear-button"
+                      class="input-mask__clear"
+                      type="button"
+                      aria-label=${this.localize.term("clearEntry")}
+                      @click=${this.handleClearClick}
+                      tabindex="-1"
+                    >
+                      <slot name="clear-icon">
+                        <dsa-icon name="close"></dsa-icon>
+                      </slot>
+                    </button>
+                  ` : ""}
+
+          </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>
+
+        ${this.error && !this.disabled ? html`<dsa-error-text
+                id="error-text"
+                class="form-control__error-text"
+                >${this.errorMessage}</dsa-error-text
+              >` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+DSAInputMask.styles = input_mask_styles_default;
+__decorateClass([
+  query(".input-mask__control")
+], DSAInputMask.prototype, "input", 2);
+__decorateClass([
+  state()
+], DSAInputMask.prototype, "hasFocus", 2);
+__decorateClass([
+  property()
+], DSAInputMask.prototype, "title", 2);
+__decorateClass([
+  property()
+], DSAInputMask.prototype, "name", 2);
+__decorateClass([
+  property()
+], DSAInputMask.prototype, "value", 2);
+__decorateClass([
+  defaultValue()
+], DSAInputMask.prototype, "defaultValue", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAInputMask.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAInputMask.prototype, "variant", 2);
+__decorateClass([
+  property()
+], DSAInputMask.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], DSAInputMask.prototype, "helpText", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAInputMask.prototype, "clearable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAInputMask.prototype, "disabled", 2);
+__decorateClass([
+  property()
+], DSAInputMask.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAInputMask.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAInputMask.prototype, "validate", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAInputMask.prototype, "error", 2);
+__decorateClass([
+  property({ attribute: "error-message" })
+], DSAInputMask.prototype, "errorMessage", 2);
+__decorateClass([
+  property()
+], DSAInputMask.prototype, "inputmode", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAInputMask.prototype, "form", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAInputMask.prototype, "required", 2);
+__decorateClass([
+  property()
+], DSAInputMask.prototype, "pattern", 2);
+__decorateClass([
+  property({ type: Number })
+], DSAInputMask.prototype, "minlength", 2);
+__decorateClass([
+  property()
+], DSAInputMask.prototype, "autocorrect", 2);
+__decorateClass([
+  property()
+], DSAInputMask.prototype, "autocomplete", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAInputMask.prototype, "autofocus", 2);
+__decorateClass([
+  property()
+], DSAInputMask.prototype, "enterkeyhint", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], DSAInputMask.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("value", { waitUntilFirstUpdate: true })
+], DSAInputMask.prototype, "handleValueChange", 1);
+__decorateClass([
+  watch("error")
+], DSAInputMask.prototype, "handleErrorChange", 1);
+DSAInputMask = __decorateClass([
+  customElement("dsa-input-mask")
+], DSAInputMask);
+
+export {
+  DSAInputMask
+};

package/dist/chunks/chunk.PQWQ42E2.js

@@ -0,0 +1,150 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/dialog/dialog.styles.ts
+import { css } from "lit";
+var dialog_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    --header-spacing: var(--dsa-wc-dialog-spacing);
+    --body-spacing: var(--dsa-wc-dialog-spacing);
+    --footer-spacing: var(--dsa-wc-dialog-spacing);
+    display: contents;
+  }
+
+  .dialog {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: var(--dsa-wc-z-index-dialog);
+    font: var(--dsa-wc-dialog-font);
+  }
+
+  .dialog__panel {
+    display: flex;
+    flex-direction: column;
+    z-index: 2;
+    width: var(--dsa-wc-dialog-size);
+    max-width: calc(100% - var(--dsa-wc-dialog-panel-gutter));
+    max-height: calc(100% - var(--dsa-wc-dialog-panel-gutter));
+    background-color: var(--dsa-wc-dialog-panel-color);
+    border-radius: var(--dsa-wc-dialog-panel-border-radius);
+    box-shadow: var(--dsa-wc-dialog-panel-box-shadow);
+  }
+  .dialog--small .dialog__panel {
+    width: var(--dsa-wc-dialog-size-small);
+  }
+  .dialog--large .dialog__panel {
+    width: var(--dsa-wc-dialog-size-large);
+  }
+  .dialog__panel:focus {
+    outline: none;
+  }
+
+  /* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */
+  @media screen and (max-width: 420px) {
+    .dialog__panel {
+      max-height: 80vh;
+    }
+  }
+
+  .dialog--open .dialog__panel {
+    display: flex;
+    opacity: 1;
+  }
+
+  .dialog__header {
+    flex: 0 0 auto;
+    display: flex;
+  }
+
+  .dialog__title {
+    flex: 1 1 auto;
+    font: var(--dsa-wc-dialog-header-title-font);
+    padding: var(--header-spacing);
+    margin: 0;
+  }
+
+  .dialog__header-actions {
+    flex-shrink: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: end;
+    font: var(--dsa-wc-dialog-header-title-font);
+    gap: var(--dsa-wc-dialog-header-actions-gap);
+    padding: 0 var(--header-spacing);
+  }
+
+  .dialog__header-actions dsa-icon-button,
+  .dialog__header-actions ::slotted(dsa-icon-button) {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: var(--dsa-wc-dialog-header-icon-size);
+  }
+
+  .dialog__body {
+    flex: 1 1 auto;
+    display: block;
+    padding: var(--body-spacing);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /*Add padding to scrollbar*/
+  .dialog__body-container {
+    margin: 4px;
+    display: block;
+    overflow: auto;
+  }
+
+  .dialog__body-container:focus-visible {
+    outline: var(--dsa-wc-focus-ring);
+    border-radius: var(--dsa-wc-focus-ring-radius);
+  }
+
+  .dialog__footer {
+    display: flex;
+    gap: 16px;
+    flex-direction: row;
+    justify-content: flex-end;
+    text-align: right;
+    padding: var(--footer-spacing);
+    border-top: var(--dsa-wc-dialog-footer-border);
+  }
+
+  .dialog__footer ::slotted(dsa-button:not(:first-of-type)) {
+    margin-inline-start: var(--dsa-wc-dialog-footer-content-margin);
+  }
+
+  .dialog:not(.dialog--has-footer) .dialog__footer {
+    display: none;
+  }
+
+  .dialog__overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: var(--dsa-wc-dialog-overlay);
+    opacity: 0.4;
+  }
+
+  @media (forced-colors: active) {
+    .dialog__panel {
+      border: solid 1px var(--dsa-wc-dialog-panel-color);
+    }
+  }
+`;
+
+export {
+  dialog_styles_default
+};

package/dist/chunks/chunk.PULHNCDM.js

@@ -0,0 +1,98 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/breadcrumb-item/breadcrumb-item.styles.ts
+import { css } from "lit";
+var breadcrumb_item_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: inline-flex;
+  }
+
+  .breadcrumb-item {
+    display: inline-flex;
+    align-items: center;
+    font: var(--dsa-wc-breadcrumb-item-font);
+    white-space: nowrap;
+  }
+
+  .breadcrumb-item__label {
+    display: inline-block;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    text-decoration: none;
+    color: inherit;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    transition: var(--dsa-wc-transition-fast) --color;
+  }
+
+  :host(:not(:last-of-type)) .breadcrumb-item__label {
+    color: var(--dsa-wc-breadcrumb-item-color);
+    text-decoration-line: underline;
+    text-underline-offset: var(--dsa-wc-breadcrumb-item-text-underline-offset);
+  }
+
+  :host(:not(:last-of-type)) .breadcrumb-item__label:hover {
+    color: var(--dsa-wc-breadcrumb-item-hover-color);
+    text-decoration-line: underline;
+    text-decoration-thickness: var(
+      --dsa-wc-breadcrumb-item-text-decoration-thickness
+    );
+    text-underline-offset: var(--dsa-wc-breadcrumb-item-text-underline-offset);
+  }
+
+  :host(:not(:last-of-type)) .breadcrumb-item__label:active {
+    color: var(--dsa-wc-breadcrumb-item-active-color);
+  }
+
+  .breadcrumb-item__label:focus {
+    outline: none;
+  }
+
+  .breadcrumb-item__label:focus-visible {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-breadcrumb-item-outline-offset);
+  }
+
+  .breadcrumb-item__prefix,
+  .breadcrumb-item__suffix {
+    display: none;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .breadcrumb-item--has-prefix .breadcrumb-item__prefix {
+    display: inline-flex;
+    margin-inline-end: var(--dsa-wc-breadcrumb-item-spacing);
+  }
+
+  .breadcrumb-item--has-suffix .breadcrumb-item__suffix {
+    display: inline-flex;
+    margin-inline-start: var(--dsa-wc-breadcrumb-item-spacing);
+  }
+
+  :host(:last-of-type) .breadcrumb-item__separator {
+    display: none;
+  }
+
+  .breadcrumb-item__separator {
+    display: inline-flex;
+    align-items: center;
+    margin: 0 var(--dsa-wc-breadcrumb-item-separator-margin-y);
+    user-select: none;
+    color: var(--dsa-wc-breadcrumb-item-icon-color);
+  }
+`;
+
+export {
+  breadcrumb_item_styles_default
+};