@ds-autonomie/web-components 2.6.0 → 2.7.1

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @ds-autonomie/web-components
 
+## 2.7.1
+
+### Patch Changes
+
+- 090de99: `header`, `page-header`, `table-container`, `table-toolbar`, `tree-item`: amélioration du rendu avec un zoom important
+- 4a34419: Mise à jour des couleurs du brandbook
+- 2d0aa8a: `step`: correction de la couleur de la barre de progrès en mode horizontal
+- 4b161f0: `accordion`: ajout d'un divider entre les actions et le chevron
+- f70d4e3: `input-date`, `input-time`: ajout de l'attribut 'hoist' contrant certains problèmes d'affichage
+- Updated dependencies [4a34419]
+  - @ds-autonomie/assets@1.4.8
+
+## 2.7.0
+
+### Minor Changes
+
+- c260f56: `dropdown` : ajout d'un attribut pour fermer le panneau au clic
+- 0d2fdc5: Ajout de classes permettant d'avoir le header ou les premières colonnes d'un tableau personnalisé en "sticky"
+- f133eab: `input` : ajout d'un état de succès
+- ba0c2cd: `input-date` : possibilité de sélectionner une plage de dates
+- f25ec84: `table-single-cell-row`: ajout du composant
+
+### Patch Changes
+
+- 259ae3d: `file-upload`: amélioration de l'intégration au sein des formulaires
+- 0597e4c: `input`: séparation interne des inputs type date, time et amount
+- c73d3c7: Mise à jour des dépendances
+- Updated dependencies [c73d3c7]
+  - @ds-autonomie/assets@1.4.7
+
 ## 2.6.0
 
 ### Minor Changes

package/cdn/chunks/chunk.2FLI3YXG.js

@@ -0,0 +1,310 @@
+import {
+  debounce
+} from "./chunk.I5IKEQES.js";
+import {
+  FilterBase
+} from "./chunk.727KD4JC.js";
+import {
+  filter_range_styles_default
+} from "./chunk.B6FKIMN6.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.SUUV7E4I.js";
+import {
+  o
+} from "./chunk.XED65RH5.js";
+import {
+  watch
+} from "./chunk.4FQJ3QJK.js";
+import {
+  e,
+  n,
+  r,
+  t
+} from "./chunk.EW5LC4ZI.js";
+import {
+  x
+} from "./chunk.JXF4O366.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/filter-range/filter-range.ts
+var RANGE_SLIDER_DEBOUNCE_DELAY = 100;
+var DSAFilterRange = class extends FilterBase {
+  constructor() {
+    super(...arguments);
+    this.currentStartValue = "";
+    this.currentEndValue = "";
+    this.start = "";
+    this.end = "";
+    this.defaultStart = "";
+    this.defaultEnd = "";
+    this.slider = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleSliderFromValueChange = this.handleSliderFromValueChange.bind(this);
+    this.handleSliderToValueChange = this.handleSliderToValueChange.bind(this);
+    this.addEventListener(
+      "dsa-slider-from-value-change",
+      this.handleSliderFromValueChange
+    );
+    this.addEventListener(
+      "dsa-slider-to-value-change",
+      this.handleSliderToValueChange
+    );
+    this.start = this.start === "" ? this.defaultStart : this.start;
+    this.currentStartValue = this.start;
+    this.end = this.end === "" ? this.defaultEnd : this.end;
+    this.currentEndValue = this.end;
+    this.value = this.getRangeValue();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener(
+      "dsa-slider-from-value-change",
+      this.handleSliderFromValueChange
+    );
+    this.removeEventListener(
+      "dsa-slider-to-value-change",
+      this.handleSliderToValueChange
+    );
+  }
+  handleSliderFromValueChange(event) {
+    const value = event.detail.value;
+    this.currentStartValue = value;
+  }
+  handleSliderToValueChange(event) {
+    const value = event.detail.value;
+    this.currentEndValue = value;
+  }
+  handleReset() {
+    var _a;
+    this.currentStartValue = this.defaultStart;
+    this.currentEndValue = this.defaultEnd;
+    (_a = this.startValueInput) == null ? void 0 : _a.focus({ preventScroll: true });
+  }
+  handleSubmit() {
+    this.start = this.currentStartValue;
+    this.end = this.currentEndValue;
+    this.value = this.getRangeValue();
+    this.emit("dsa-submit");
+    this.hide();
+    this.filterTrigger.focus({ preventScroll: true });
+  }
+  handleStartInput(event) {
+    const nextStartValue = event.target.value;
+    this.currentStartValue = nextStartValue;
+    this.emit("dsa-input");
+  }
+  handleEndInput(event) {
+    const nextEndValue = event.target.value;
+    this.currentEndValue = nextEndValue;
+    this.emit("dsa-input");
+  }
+  handleStartChange(event) {
+    const nextStartValue = event.target.value;
+    const currentEndValue = parseFloat(this.currentEndValue);
+    if (parseFloat(nextStartValue) <= this.min) {
+      this.currentStartValue = `${this.min}`;
+    } else if (parseFloat(nextStartValue) <= currentEndValue) {
+      this.currentStartValue = nextStartValue;
+    } else if (parseFloat(nextStartValue) > currentEndValue) {
+      this.currentStartValue = this.currentEndValue;
+    }
+    this.emit("dsa-change");
+  }
+  handleEndChange(event) {
+    const nextEndValue = event.target.value;
+    const currentStartValue = parseFloat(this.currentStartValue);
+    if (parseFloat(nextEndValue) >= this.max) {
+      this.currentEndValue = `${this.max}`;
+    } else if (parseFloat(nextEndValue) >= currentStartValue) {
+      this.currentEndValue = nextEndValue;
+    } else if (parseFloat(nextEndValue) < currentStartValue) {
+      this.currentEndValue = this.currentStartValue;
+    }
+    this.emit("dsa-change");
+  }
+  getRangeValue() {
+    if (this.start === "" && this.end === "") {
+      return "";
+    }
+    if (this.start === "") {
+      return `${this.localize.term("lessThan")} ${this.end}`;
+    }
+    if (this.end === "") {
+      return `${this.localize.term("moreThan")} ${this.start}`;
+    }
+    return `${this.start} - ${this.end}`;
+  }
+  handleFilterRangeOpenChange() {
+    if (!this.open) {
+      this.currentStartValue = this.start === "" ? this.defaultStart : this.start;
+      this.currentEndValue = this.end === "" ? this.defaultEnd : this.end;
+    }
+  }
+  handleStartPropChange() {
+    if (this.currentStartValue !== this.start) {
+      this.currentStartValue = this.start;
+    }
+    this.value = this.getRangeValue();
+  }
+  handleEndPropChange() {
+    if (this.currentEndValue !== this.end) {
+      this.currentEndValue = this.end;
+    }
+    this.value = this.getRangeValue();
+  }
+  handleCurrentValuesChange() {
+    if (this.drawer) {
+      this.start = this.currentStartValue;
+      this.end = this.currentEndValue;
+      this.value = this.getRangeValue();
+    }
+  }
+  renderPanelContent() {
+    return x`
+      <div class="filter__content">
+        ${this.slider ? x`
+              <div class="filter__slider">
+                <dsa-range-slider
+                  from=${ifDefinedAndNotEmpty(
+      this.currentStartValue !== "" ? this.currentStartValue : `${this.min}`
+    )}
+                  to=${ifDefinedAndNotEmpty(
+      this.currentEndValue !== "" ? this.currentEndValue : `${this.max}`
+    )}
+                  min=${o(this.min)}
+                  max=${o(this.max)}
+                  label-from=${this.localize.term("min")}
+                  label-to=${this.localize.term("max")}
+                ></dsa-range-slider>
+              </div>
+            ` : x``}
+
+        <div class="filter__content--inputs">
+          <dsa-input
+            class="start-range__input"
+            label=${this.localize.term("min")}
+            .value=${this.currentStartValue}
+            placeholder=${ifDefinedAndNotEmpty(`${this.min}`)}
+            min=${o(this.min)}
+            max=${o(this.max)}
+            type="number"
+            variant=${this.drawer ? "layer" : "base"}
+            @dsa-input=${this.handleStartInput}
+            @dsa-change=${this.handleStartChange}
+          ></dsa-input>
+          <dsa-divider></dsa-divider>
+          <dsa-input
+            class="end-range__input"
+            label=${this.localize.term("max")}
+            placeholder=${ifDefinedAndNotEmpty(`${this.max}`)}
+            .value=${this.currentEndValue}
+            min=${o(this.min)}
+            max=${o(this.max)}
+            type="number"
+            variant=${this.drawer ? "layer" : "base"}
+            @dsa-input=${this.handleEndInput}
+            @dsa-change=${this.handleEndChange}
+          ></dsa-input>
+        </div>
+      </div>
+
+      <div class="filter__footer">
+        <dsa-button
+          variant="tertiary"
+          size="small"
+          class="reset__button"
+          @click=${this.handleReset}
+          ?disabled=${this.currentStartValue === this.defaultStart && this.currentEndValue === this.defaultEnd}
+        >
+          <dsa-icon
+            name="restart_alt"
+            slot="prefix"
+            library="system"
+          ></dsa-icon>
+          ${this.localize.term("filterReset")}
+        </dsa-button>
+
+        ${!this.drawer ? x`
+              <dsa-button
+                variant="primary"
+                size="small"
+                class="submit__button"
+                @click=${this.handleSubmit}
+              >
+                ${this.localize.term("filterSubmit")}
+              </dsa-button>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+DSAFilterRange.styles = filter_range_styles_default;
+__decorateClass([
+  r()
+], DSAFilterRange.prototype, "currentStartValue", 2);
+__decorateClass([
+  r()
+], DSAFilterRange.prototype, "currentEndValue", 2);
+__decorateClass([
+  e(".start-range__input")
+], DSAFilterRange.prototype, "startValueInput", 2);
+__decorateClass([
+  e(".end-range__input")
+], DSAFilterRange.prototype, "endValueInput", 2);
+__decorateClass([
+  e(".reset__button")
+], DSAFilterRange.prototype, "resetButton", 2);
+__decorateClass([
+  e(".submit__button")
+], DSAFilterRange.prototype, "submitButton", 2);
+__decorateClass([
+  n({ attribute: "start" })
+], DSAFilterRange.prototype, "start", 2);
+__decorateClass([
+  n({ attribute: "end" })
+], DSAFilterRange.prototype, "end", 2);
+__decorateClass([
+  n({ attribute: "default-start" })
+], DSAFilterRange.prototype, "defaultStart", 2);
+__decorateClass([
+  n({ attribute: "default-end" })
+], DSAFilterRange.prototype, "defaultEnd", 2);
+__decorateClass([
+  n({ type: Boolean })
+], DSAFilterRange.prototype, "slider", 2);
+__decorateClass([
+  n()
+], DSAFilterRange.prototype, "min", 2);
+__decorateClass([
+  n()
+], DSAFilterRange.prototype, "max", 2);
+__decorateClass([
+  debounce(RANGE_SLIDER_DEBOUNCE_DELAY)
+], DSAFilterRange.prototype, "handleSliderFromValueChange", 1);
+__decorateClass([
+  debounce(RANGE_SLIDER_DEBOUNCE_DELAY)
+], DSAFilterRange.prototype, "handleSliderToValueChange", 1);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], DSAFilterRange.prototype, "handleFilterRangeOpenChange", 1);
+__decorateClass([
+  watch("start", { waitUntilFirstUpdate: true })
+], DSAFilterRange.prototype, "handleStartPropChange", 1);
+__decorateClass([
+  watch("end", { waitUntilFirstUpdate: true })
+], DSAFilterRange.prototype, "handleEndPropChange", 1);
+__decorateClass([
+  watch(["currentStartValue", "currentEndValue"])
+], DSAFilterRange.prototype, "handleCurrentValuesChange", 1);
+DSAFilterRange = __decorateClass([
+  t("dsa-filter-range")
+], DSAFilterRange);
+
+export {
+  DSAFilterRange
+};

package/cdn/chunks/chunk.2FU56VWP.js

@@ -0,0 +1,44 @@
+import {
+  table_single_cell_row_styles_default
+} from "./chunk.JJBI3ZYI.js";
+import {
+  ShoelaceElement,
+  n,
+  t
+} from "./chunk.EW5LC4ZI.js";
+import {
+  x
+} from "./chunk.JXF4O366.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/table-single-cell-row/table-single-cell-row.ts
+var DSATableSingleCellRow = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.role = "row";
+    this.colSpan = 1;
+  }
+  render() {
+    return x`
+      <td class="single-cell-row" colspan=${this.colSpan}>
+        <slot></slot>
+      </td>
+    `;
+  }
+};
+DSATableSingleCellRow.styles = table_single_cell_row_styles_default;
+__decorateClass([
+  n({ reflect: true })
+], DSATableSingleCellRow.prototype, "role", 2);
+__decorateClass([
+  n({ type: Number, attribute: "colspan" })
+], DSATableSingleCellRow.prototype, "colSpan", 2);
+DSATableSingleCellRow = __decorateClass([
+  t("dsa-table-single-cell-row")
+], DSATableSingleCellRow);
+
+export {
+  DSATableSingleCellRow
+};

package/cdn/chunks/chunk.2PCPJ2O2.js

@@ -0,0 +1,67 @@
+import {
+  component_styles_default
+} from "./chunk.MQAAYEM3.js";
+import {
+  i
+} from "./chunk.UKK3NS3L.js";
+
+// src/components/navbar-link/navbar-link.styles.ts
+var navbar_link_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  .navbar-link {
+    display: flex;
+    align-items: center;
+    gap: var(--dsa-spacing-4);
+    border-radius: 0;
+    background-color: var(--dsa-wc-button-navigation-on-base-color);
+    border: none;
+    font: var(--dsa-wc-navbar-font);
+    color: var(--dsa-wc-button-navigation-on-base-font-color);
+    text-decoration: none;
+  }
+  .navbar-link:focus-visible {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: -3px;
+  }
+  .navbar-link:hover {
+    background-color: var(--dsa-wc-navbar-button-background-hover);
+  }
+
+  /*
+   * Desktop 
+   */
+  .navbar-link--desktop {
+    height: var(--dsa-wc-navbar-button-height-desktop);
+    border-bottom: 1px solid transparent;
+    padding: var(--dsa-wc-navbar-button-padding-desktop);
+  }
+  .navbar-link--desktop[aria-current] {
+    border-bottom: var(--dsa-wc-navbar-button-border-bottom-active);
+  }
+
+  /* 
+  * Mobile 
+  */
+  .navbar-link--mobile {
+    width: 100%;
+    min-height: var(--dsa-wc-navbar-button-height-mobile);
+    padding: var(--dsa-wc-navbar-link-padding-mobile);
+  }
+  /* On mobile, imitate menu navigation item */
+  .navbar-link--mobile[aria-current] {
+    color: var(--dsa-wc-menu-navigation-item-current-color);
+    background-color: var(
+      --dsa-wc-menu-navigation-item-current-background-color
+    );
+    font: var(--dsa-wc-menu-item-font-current);
+  }
+`;
+
+export {
+  navbar_link_styles_default
+};

package/cdn/chunks/chunk.2UTZVF2R.js

@@ -0,0 +1,51 @@
+import {
+  component_styles_default
+} from "./chunk.MQAAYEM3.js";
+import {
+  i
+} from "./chunk.UKK3NS3L.js";
+
+// src/components/callout/callout.styles.ts
+var callout_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: contents;
+
+    /* For better DX, we'll reset the margin here so the base part can inherit it */
+    margin: 0;
+  }
+
+  .callout {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    border-left: var(--dsa-wc-callout-border-left);
+    border-radius: var(--dsa-wc-callout-border-radius);
+    font: var(--dsa-wc-callout-message-font);
+    color: var(--dsa-wc-callout-message-color);
+    padding: var(--dsa-wc-callout-padding);
+    margin: inherit;
+    background-color: var(--dsa-wc-callout-default-background-color);
+  }
+
+  .callout__title {
+    font: var(--dsa-wc-callout-title-font);
+    word-wrap: break-word;
+    color: var(--dsa-wc-callout-title-color);
+  }
+
+  .callout__message {
+    word-wrap: break-word;
+  }
+
+  .callout__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-wc-callout-text-gap);
+  }
+`;
+
+export {
+  callout_styles_default
+};