@ds-autonomie/web-components 2.6.0 → 2.7.1

package/cdn/chunks/chunk.NUCFULBV.js

@@ -0,0 +1,241 @@
+import {
+  range_slider_styles_default
+} from "./chunk.LRSBUKH6.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.SUUV7E4I.js";
+import {
+  o
+} from "./chunk.XED65RH5.js";
+import {
+  e2
+} from "./chunk.JY4LUWQC.js";
+import {
+  watch
+} from "./chunk.4FQJ3QJK.js";
+import {
+  ShoelaceElement,
+  e,
+  n,
+  r,
+  t
+} from "./chunk.EW5LC4ZI.js";
+import {
+  x
+} from "./chunk.JXF4O366.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/range-slider/range-slider.ts
+var DSARangeSlider = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasFromSliderFocus = false;
+    this.hasToSliderFocus = false;
+    this.labelFrom = "";
+    this.labelTo = "";
+    this.fromValue = "";
+    this.toValue = "";
+    this.max = 100;
+    this.min = 0;
+    this.disabled = false;
+  }
+  firstUpdated() {
+    this.updateSliderBackground(this.fromSlider, this.toSlider);
+    this.setToSliderThumbInReach();
+  }
+  updateSliderBackground(from, to) {
+    const sliderColor = "var(--dsa-wc-range-slider-background)";
+    const rangeColor = this.disabled ? "var(--dsa-wc-range-slider-disabled-background)" : "var(--dsa-wc-range-slider-selected-background)";
+    const rangeDistance = Number(this.max) - Number(this.min);
+    const fromPosition = (Number(from.value) - Number(this.min)) / rangeDistance * 100;
+    const toPosition = (Number(to.value) - Number(this.min)) / rangeDistance * 100;
+    to.style.background = `linear-gradient(
+      to right,
+      ${sliderColor} 0%,
+      ${sliderColor} ${fromPosition}%,
+      ${rangeColor} ${fromPosition}%,
+      ${rangeColor} ${toPosition}%, 
+      ${sliderColor} ${toPosition}%, 
+      ${sliderColor} 100%)`;
+  }
+  onFromSliderInputChange() {
+    const fromValue = parseInt(this.fromSlider.value, 10);
+    const toValue = parseInt(this.toSlider.value, 10);
+    if (fromValue > toValue) {
+      this.fromSlider.value = toValue.toString();
+    }
+    this.updateSliderBackground(this.fromSlider, this.toSlider);
+    this.emit("dsa-slider-from-value-change", {
+      detail: { value: this.fromSlider.value }
+    });
+  }
+  setToSliderThumbInReach() {
+    if (Number(this.toSlider.value) <= 0) {
+      this.toSlider.style.zIndex = "2";
+    } else {
+      this.toSlider.style.zIndex = "0";
+    }
+  }
+  onToSliderInputChange() {
+    const fromValue = parseInt(this.fromSlider.value, 10);
+    const toValue = parseInt(this.toSlider.value, 10);
+    this.setToSliderThumbInReach();
+    this.updateSliderBackground(this.fromSlider, this.toSlider);
+    if (fromValue <= toValue) {
+      this.toSlider.value = toValue.toString();
+    } else {
+      this.toSlider.value = fromValue.toString();
+    }
+    this.emit("dsa-slider-to-value-change", {
+      detail: { value: this.toSlider.value }
+    });
+  }
+  handleMinChange() {
+    this.updateSliderBackground(this.fromSlider, this.toSlider);
+  }
+  handleMaxChange() {
+    this.updateSliderBackground(this.fromSlider, this.toSlider);
+  }
+  handleToValueChange() {
+    this.toSlider.value = this.toValue;
+    this.updateSliderBackground(this.fromSlider, this.toSlider);
+  }
+  handleFromValueChange() {
+    this.fromSlider.value = this.fromValue;
+    this.updateSliderBackground(this.fromSlider, this.toSlider);
+  }
+  handleFromSliderFocus() {
+    this.hasFromSliderFocus = true;
+    this.emit("dsa-focus");
+  }
+  handleFromSliderBlur() {
+    this.hasFromSliderFocus = false;
+    this.emit("dsa-blur");
+  }
+  handleToSliderFocus() {
+    this.hasToSliderFocus = true;
+    this.emit("dsa-focus");
+  }
+  handleToSliderBlur() {
+    this.hasToSliderFocus = false;
+    this.emit("dsa-blur");
+  }
+  /** Sets focus on the left thumb. */
+  focusSliderLeftThumb(options) {
+    this.fromSlider.focus(options);
+  }
+  /** Removes focus from the left thumb. */
+  blurSliderLeftThumb() {
+    this.fromSlider.blur();
+  }
+  /** Sets focus on the right thumb. */
+  focusSliderRightThumb(options) {
+    this.toSlider.focus(options);
+  }
+  /** Removes focus from the right thumb. */
+  blurSliderRightThumb() {
+    this.toSlider.blur();
+  }
+  render() {
+    if (!this.labelFrom || !this.labelTo) {
+      a11yWarning(
+        "<dsa-range-slider> requires label-from and label-to attributes for accessibility"
+      );
+    }
+    return x`
+      <input
+        class=${e2({
+      "from-range-slider": true,
+      "from-range-slider--focused": this.hasFromSliderFocus,
+      "from-range-slider--disabled": this.disabled
+    })}
+        type="range"
+        .value=${this.fromValue}
+        min=${o(this.min)}
+        max=${o(this.max)}
+        ?disabled=${this.disabled}
+        aria-label=${ifDefinedAndNotEmpty(this.labelFrom)}
+        aria-disabled=${this.disabled}
+        @input=${this.onFromSliderInputChange}
+        @focus=${this.handleFromSliderFocus}
+        @blur=${this.handleFromSliderBlur}
+      />
+      <input
+        part="to-range-input"
+        class=${e2({
+      "to-range-slider": true,
+      "to-range-slider--focused": this.hasToSliderFocus,
+      "to-range-slider--disabled": this.disabled
+    })}
+        type="range"
+        .value=${this.toValue}
+        min=${o(this.min)}
+        max=${o(this.max)}
+        ?disabled=${this.disabled}
+        aria-label=${ifDefinedAndNotEmpty(this.labelTo)}
+        aria-disabled=${this.disabled}
+        @input=${this.onToSliderInputChange}
+        @focus=${this.handleToSliderFocus}
+        @blur=${this.handleToSliderBlur}
+      />
+    `;
+  }
+};
+DSARangeSlider.styles = range_slider_styles_default;
+__decorateClass([
+  e(".from-range-slider")
+], DSARangeSlider.prototype, "fromSlider", 2);
+__decorateClass([
+  e(".to-range-slider")
+], DSARangeSlider.prototype, "toSlider", 2);
+__decorateClass([
+  r()
+], DSARangeSlider.prototype, "hasFromSliderFocus", 2);
+__decorateClass([
+  r()
+], DSARangeSlider.prototype, "hasToSliderFocus", 2);
+__decorateClass([
+  n({ attribute: "label-from" })
+], DSARangeSlider.prototype, "labelFrom", 2);
+__decorateClass([
+  n({ attribute: "label-to" })
+], DSARangeSlider.prototype, "labelTo", 2);
+__decorateClass([
+  n({ attribute: "from" })
+], DSARangeSlider.prototype, "fromValue", 2);
+__decorateClass([
+  n({ attribute: "to" })
+], DSARangeSlider.prototype, "toValue", 2);
+__decorateClass([
+  n({ type: Number })
+], DSARangeSlider.prototype, "max", 2);
+__decorateClass([
+  n({ type: Number })
+], DSARangeSlider.prototype, "min", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSARangeSlider.prototype, "disabled", 2);
+__decorateClass([
+  watch("min", { waitUntilFirstUpdate: true })
+], DSARangeSlider.prototype, "handleMinChange", 1);
+__decorateClass([
+  watch("max", { waitUntilFirstUpdate: true })
+], DSARangeSlider.prototype, "handleMaxChange", 1);
+__decorateClass([
+  watch("toValue", { waitUntilFirstUpdate: true })
+], DSARangeSlider.prototype, "handleToValueChange", 1);
+__decorateClass([
+  watch("fromValue", { waitUntilFirstUpdate: true })
+], DSARangeSlider.prototype, "handleFromValueChange", 1);
+DSARangeSlider = __decorateClass([
+  t("dsa-range-slider")
+], DSARangeSlider);
+
+export {
+  DSARangeSlider
+};

package/cdn/chunks/chunk.NV4CUMOV.js

@@ -0,0 +1,22 @@
+import {
+  component_styles_default
+} from "./chunk.MQAAYEM3.js";
+import {
+  i
+} from "./chunk.UKK3NS3L.js";
+
+// src/components/breadcrumb/breadcrumb.styles.ts
+var breadcrumb_styles_default = i`
+  ${component_styles_default}
+
+  .breadcrumb__list {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    row-gap: var(--dsa-spacing-8);
+  }
+`;
+
+export {
+  breadcrumb_styles_default
+};

package/cdn/chunks/chunk.NYPRGHOM.js

@@ -0,0 +1,450 @@
+import {
+  form_control_styles_default
+} from "./chunk.Z67R2PEC.js";
+import {
+  component_styles_default
+} from "./chunk.MQAAYEM3.js";
+import {
+  i
+} from "./chunk.UKK3NS3L.js";
+
+// src/components/combobox/combobox.styles.ts
+var combobox_styles_default = i`
+  ${component_styles_default}
+  ${form_control_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  /** The popup */
+  .select {
+    flex: 1 1 auto;
+    display: inline-flex;
+    width: 100%;
+    position: relative;
+    vertical-align: middle;
+  }
+
+  .select::part(popup) {
+    z-index: var(--dsa-wc-z-index-dropdown);
+  }
+
+  .select[data-current-placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .select[data-current-placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  /* Combobox */
+  .select__combobox {
+    flex: 1;
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    position: relative;
+    align-items: center;
+    justify-content: start;
+    font: var(--dsa-wc-combobox-input-font);
+    vertical-align: middle;
+    overflow: hidden;
+    cursor: pointer;
+    transition: var(--dsa-wc-transition-fast) color,
+      var(--dsa-wc-transition-fast) border,
+      var(--dsa-wc-transition-fast) box-shadow,
+      var(--dsa-wc-transition-fast) background-color;
+    border-radius: var(--dsa-wc-input-border-radius);
+    padding: var(--dsa-wc-select-padding);
+  }
+
+  .select__display-input {
+    position: relative;
+    width: 100%;
+    font: inherit;
+    border: none;
+    background: none;
+    color: var(--dsa-wc-input-on-base-text-field-input-color);
+    cursor: inherit;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    -webkit-appearance: none;
+  }
+
+  .select__display-input::placeholder {
+    color: var(--dsa-wc-input-on-base-text-field-placeholder-color);
+    opacity: 1;
+  }
+
+  .select__display-input:focus {
+    outline: none;
+  }
+
+  .select--disabled .select__display-input,
+  .select--disabled .select__display-input::placeholder,
+  .select--disabled .select__expand-icon {
+    color: var(--dsa-wc-input-label-color-disabled);
+  }
+
+  /* Visually hide the display input when multiple is enabled */
+  .select--multiple:not(.select--placeholder-visible) .select__display-input {
+    flex: 1;
+    margin-left: 0.25rem;
+    min-width: 100px;
+  }
+
+  .input-container {
+    width: 100%;
+    display: flex;
+    align-items-center;
+    flex-wrap: wrap;
+    min-width: 0;
+    row-gap: 4px;
+  }
+
+  .select__value-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: -1;
+  }
+
+  .select__tags {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-inline-start: var(--dsa-wc-multiselect-tag-margin-inline-start);
+    min-width: 0;
+    order: -1;
+  }
+
+  .select__tags dsa-tag {
+    cursor: pointer !important;
+    min-width: 0;
+  }
+
+  .select__tags dsa-tag::part(base) {
+    background: var(--dsa-wc-multiselect-tag-background) !important;
+    color: var(--dsa-wc-multiselect-tag-color) !important;
+    border: solid 1px var(--dsa-wc-multiselect-tag-border-color);
+    border-radius: var(--dsa-wc-multiselect-tag-border-radius);
+    padding: 0 var(--dsa-wc-multiselect-tag-padding-inline);
+  }
+
+  .select--disabled .select__tags,
+  .select--disabled .select__tags::slotted(dsa-tag) {
+    cursor: not-allowed !important;
+  }
+
+  /* On base selects */
+  .select--on-base .select__combobox {
+    background-color: var(
+      --dsa-wc-internal-combobox-on-base-background-color,
+      var(--dsa-wc-input-on-base-background-color)
+    );
+    border: solid var(--dsa-wc-input-border-width)
+      var(
+        --dsa-wc-internal-combobox-on-base-border-color,
+        var(--dsa-wc-input-on-base-border-color)
+      );
+  }
+
+  .select--on-base:hover:not(.select--disabled):not(.select--readonly) .select__combobox {
+    border-color: var(
+      --dsa-wc-internal-combobox-on-base-hover-border-color,
+      var(--dsa-wc-input-on-base-border-color-hover)
+    );
+  }
+  .select--on-base.select--disabled .select__combobox {
+    background-color: var(
+      --dsa-wc-internal-combobox-on-base-disabled-background-color,
+      var(--dsa-wc-input-on-base-background-color-disabled)
+    );
+    border-color: var(
+      --dsa-wc-internal-combobox-on-base-disabled-border-color,
+      var(--dsa-wc-input-on-base-border-color-disabled)
+    );
+    cursor: var(--dsa-wc-internal-combobox-disabled-cursor, not-allowed);
+    outline: none;
+  }
+
+  .select--on-base.select--readonly .select__combobox {
+    background-color: var(--dsa-wc-input-on-base-read-only-background-color);
+    border-color: var(--dsa-wc-input-on-base-read-only-border-color);
+    cursor: default;
+  }
+
+  .select--on-base:not(.select--disabled).select--open .select__combobox,
+  .select--on-base:not(.select--disabled).select--focused .select__combobox {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+    z-index: 2;
+  }
+
+  .select--on-base select__prefix {
+    color: var(--dsa-wc-input-on-base-text-field-input-color);
+  }
+
+  .select--error.select--on-base:not(.select--disabled):not(.select--readonly) .select__combobox {
+    background-color: var(--dsa-wc-input-on-base-background-color-error);
+    border-color: var(--dsa-wc-input-on-base-border-color-error);
+  }
+
+  .select--error.select--on-base:hover:not(.select--disabled):not(.select--readonly)
+    .select__combobox {
+    border-color: var(--dsa-wc-input-on-base-border-color-error-hover);
+  }
+
+  /* On Layer selects */
+  .select--on-layer .select__combobox {
+    background-color: var(
+      --dsa-wc-internal-combobox-on-layer-background-color,
+      var(--dsa-wc-input-on-layer-background-color)
+    );
+    border: solid var(--dsa-wc-input-border-width)
+      var(
+        --dsa-wc-internal-combobox-on-layer-border-color,
+        var(--dsa-wc-input-on-layer-border-color)
+      );
+  }
+
+  .select--on-layer:hover:not(.select--disabled) .select__combobox {
+    border-color: var(
+      --dsa-wc-internal-combobox-on-layer-hover-border-color,
+      var(--dsa-wc-input-on-layer-border-color-hover)
+    );
+  }
+
+  .select--on-layer.select--disabled .select__combobox {
+    background-color: var(
+      --dsa-wc-internal-combobox-on-layer-disabled-background-color,
+      var(--dsa-wc-input-on-layer-background-color-disabled)
+    );
+    border-color: var(
+      --dsa-wc-internal-combobox-on-layer-disabled-border-color,
+      var(--dsa-wc-input-on-layer-border-color-disabled)
+    );
+    cursor: var(--dsa-wc-internal-combobox-disabled-cursor, not-allowed);
+    outline: none;
+  }
+
+  .select--on-layer.select--readonly .select__combobox {
+    background-color: var(--dsa-wc-input-on-layer-read-only-background-color);
+    border-color: var(--dsa-wc-input-on-layer-read-only-border-color);
+    cursor: default;
+  }
+
+  .select--on-layer:not(.select--disabled).select--open .select__combobox,
+  .select--on-layer:not(.select--disabled).select--focused .select__combobox {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+
+  .select--on-layer select__prefix {
+    color: var(--dsa-wc-input-on-layer-text-field-input-color);
+  }
+
+  .select--error.select--on-layer:not(.select--disabled) .select__combobox {
+    background-color: var(--dsa-wc-input-on-layer-background-color-error);
+    border-color: var(--dsa-wc-input-on-layer-border-color-error);
+  }
+
+  .select--error.select--on-layer:hover:not(.select--disabled)
+    .select__combobox {
+    border-color: var(--dsa-wc-input-on-layer-border-color-error-hover);
+  }
+
+  /* Sizes */
+  .select--small .select__combobox {
+    font: var(--dsa-wc-combobox-input-font-small);
+    min-height: var(--dsa-wc-form-input-height-small);
+  }
+
+  .select--small.select--multiple:not(.select--placeholder-visible)
+    .select__combobox {
+    padding-block: 2px;
+    padding-inline-start: 0;
+  }
+
+  .select--small .select__tags {
+    gap: 2px;
+  }
+
+  .select--medium .select__combobox {
+    font: var(--dsa-wc-combobox-input-font);
+    min-height: var(--dsa-wc-form-input-height);
+  }
+
+  .select--medium.select--multiple:not(.select--placeholder-visible)
+    .select__combobox {
+    padding-inline-start: 0;
+    padding-block: 3px;
+  }
+
+  .select--medium .select__tags {
+    gap: 3px;
+  }
+  .select--large .select__combobox {
+    padding-block: 3px;
+    font: var(--dsa-wc-combobox-input-font-large);
+    min-height: var(--dsa-wc-form-input-height-large);
+  }
+  .select--large.select--multiple:not(.select--placeholder-visible)
+    .select__combobox {
+  }
+
+  .select--large .select__tags {
+    gap: 4px;
+  }
+
+  /* Prefix */
+  .select__prefix {
+    flex: 0;
+    display: inline-flex;
+    align-items: center;
+  }
+  .select__prefix::slotted(*) {
+    margin-inline-end: var(--dsa-wc-input-margin-inline);
+  }
+  .select--multiple .select__prefix::slotted(*) {
+    margin-inline-start: var(--dsa-wc-input-margin-inline);
+  }
+
+  /* Clear button */
+  .select__clear {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    color: var(--dsa-wc-input-icon-color);
+    border: none;
+    background: none;
+    padding: 0;
+    transition: var(--dsa-wc-transition-fast) color;
+    cursor: pointer;
+    margin-inline-start: var(--dsa-wc-input-margin-inline);
+  }
+
+  :not(.select--disabled) .select__clear:hover,
+  :not(.select--disabled) .select__expand-icon:hover {
+    color: var(--dsa-wc-input-icon-color-hover);
+  }
+
+  .select__clear:focus {
+    outline: var(--dsa-wc-combobox-clear-button-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+    border-radius: 1px;
+  }
+
+  /* Expand icon */
+  .select__expand-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    transition: var(--dsa-wc-transition-medium) rotate ease;
+    rotate: 0;
+    color: var(--dsa-wc-input-icon-color);
+    margin-left: var(--dsa-spacing-4);
+    font-size: var(--dsa-wc-combobox-expand-icon-size);
+  }
+
+  .select--error .select__expand-icon {
+    color: var(--dsa-wc-combobox-expand-icon-error-color);
+  }
+
+  .select--open .select__expand-icon {
+    rotate: -180deg;
+  }
+
+  /* Panel */
+  .select__panel {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    font: var(--dsa-wc-input-text-field-font);
+    box-shadow: var(--dsa-wc-shadow-small);
+    background: var(--dsa-wc-combobox-listbox-background-color);
+    border: solid var(--dsa-wc-combobox-listbox-border-width)
+      var(--dsa-wc-combobox-listbox-border-color);
+    border-radius: var(--dsa-wc-combobox-listbox-border-radius);
+    padding-inline: 0;
+    padding-block: var(--dsa-spacing-2);
+    margin-top: var(--dsa-wc-combobox-listbox-margin-top);
+    overflow: auto;
+    overscroll-behavior: none;
+
+    /* Make sure it adheres to the popup's auto size */
+    /* stylelint-disable-next-line */
+    max-width: var(--auto-size-available-width);
+    /* stylelint-disable-next-line */
+    max-height: var(--auto-size-available-height);
+  }
+
+  .see-more-option-text {
+    font: var(--dsa-wc-button-font-small);
+    color: var(--dsa-wc-button-tertiary-on-base-font-color);
+    text-align: center;
+    display: inline-block;
+    width: 100%;
+    pointer-events: none;
+  }
+
+  /* Listbox */
+  .select__listbox {
+    padding: 0;
+    margin: 0;
+  }
+
+  .select__listbox::slotted(dsa-divider) {
+    --spacing-start: var(--dsa-wc-combobox-listbox-divider-spacing);
+    --spacing-end: var(--dsa-wc-combobox-listbox-divider-spacing);
+  }
+
+  .select__listbox::slotted(small) {
+    font-size: var(--dsa-wc-input-text-field-font-small);
+    padding-inline: var(--dsa-wc-combobox-listbox-padding-inline);
+  }
+
+  .slot_options {
+    display: none;
+  }
+
+  .select__empty_text {
+    font: var(--dsa-wc-combobox-empty-label-font);
+    color: var(--dsa-wc-combobox-empty-label-color);
+    padding-inline: var(--dsa-wc-combobox-listbox-padding-inline);
+  }
+
+  .select__loading_text {
+    display: flex;
+    align-items: center;
+    font: var(--dsa-wc-combobox-empty-label-font);
+    color: var(--dsa-wc-combobox-empty-label-color);
+    padding-inline: var(--dsa-wc-combobox-listbox-padding-inline);
+  }
+
+  .select__error_text {
+    font: var(--dsa-wc-combobox-empty-label-font);
+    color: var(--dsa-wc-combobox-empty-label-color);
+    padding-inline: var(--dsa-wc-combobox-listbox-padding-inline);
+  }
+
+  .select__loading_text > p {
+    padding-left: var(--dsa-spacing-8);
+  }
+
+  .hidden-tag-label {
+    display: none;
+  }
+`;
+
+export {
+  combobox_styles_default
+};