@ds-autonomie/web-components 1.16.2 → 1.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-autonomie/web-components",
-  "version": "1.16.2",
+  "version": "1.18.0",
   "author": "CNSA",
   "license": "MIT",
   "customElements": "dist/custom-elements.json",
@@ -43,10 +43,10 @@
     "@shoelace-style/localize": "3.1.1",
     "composed-offset-position": "0.0.4",
     "lit": "2.8.0",
-    "wc-datepicker": "0.5.3"
+    "wc-datepicker": "0.6.0"
   },
   "peerDependencies": {
-    "@ds-autonomie/assets": "1.4.1"
+    "@ds-autonomie/assets": "1.4.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.8.4",
@@ -87,6 +87,7 @@
     "sinon": "15.0.1",
     "source-map": "0.7.4",
     "storybook": "7.3.2",
+    "storybook-addon-mock-date": "0.6.0",
     "storybook-addon-pseudo-states": "2.1.0",
     "strip-css-comments": "5.0.0",
     "stylelint": "16.5.0",

package/dist/chunks/chunk.5BCAEDG4.js

@@ -1,382 +0,0 @@
-import {
-  filter_counter_styles_default
-} from "./chunk.OXM5EF3F.js";
-import {
-  waitForEvent
-} from "./chunk.B4BZKR24.js";
-import {
-  animateTo,
-  stopAnimations
-} from "./chunk.2FK6USFR.js";
-import {
-  getAnimation,
-  setDefaultAnimation
-} from "./chunk.V7RJROLH.js";
-import {
-  LocalizeController
-} from "./chunk.6L6CZSQX.js";
-import {
-  watch
-} from "./chunk.6IH66JBY.js";
-import {
-  ShoelaceElement
-} from "./chunk.YCXTCVAZ.js";
-import {
-  __decorateClass
-} from "./chunk.6M63UXML.js";
-
-// src/components/filter/filter-counter/filter-counter.ts
-import { html } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
-var DSAFilterCounter = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.localize = new LocalizeController(this);
-    this.value = "";
-    this.defaultValue = "";
-    this.open = false;
-    this.hoist = false;
-    this.label = "";
-    this.filterLabel = "";
-    this.disabled = false;
-    this.readonly = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
-    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
-    this.tempValue = this.value === "" ? this.defaultValue : this.value;
-  }
-  addOpenListeners() {
-    document.addEventListener("focusin", this.handleDocumentFocusIn);
-    document.addEventListener("mousedown", this.handleDocumentMouseDown);
-  }
-  removeOpenListeners() {
-    document.removeEventListener("focusin", this.handleDocumentFocusIn);
-    document.removeEventListener("mousedown", this.handleDocumentMouseDown);
-  }
-  handleFocus() {
-    this.emit("dsa-focus");
-  }
-  handleBlur() {
-    this.emit("dsa-blur");
-  }
-  handleDocumentFocusIn(event) {
-    const path = event.composedPath();
-    if (this && !path.includes(this)) {
-      this.hide();
-      this.filterTrigger.focus({ preventScroll: true });
-    }
-  }
-  handleKeyDown(event) {
-    if (this.open && event.key === "Escape") {
-      event.stopPropagation();
-      event.preventDefault();
-      this.hide();
-      this.filterTrigger.focus({ preventScroll: true });
-    }
-    if (this.open && event.key === "Tab") {
-      setTimeout(() => {
-        var _a, _b;
-        const activeElement = (this == null ? void 0 : this.getRootNode()) instanceof ShadowRoot ? (_b = (_a = document.activeElement) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.activeElement : document.activeElement;
-        if (!this || (activeElement == null ? void 0 : activeElement.closest(this.tagName.toLowerCase())) !== this) {
-          this.hide();
-          this.filterTrigger.focus({ preventScroll: true });
-        }
-      });
-    }
-    const path = event.composedPath();
-    const isFilterTrigger = path.some((el) => el === this.filterTrigger);
-    if (isFilterTrigger && (event.key === "Enter" || event.key === " ")) {
-      event.preventDefault();
-      if (!this.open) {
-        this.show();
-        return;
-      }
-      if (isFilterTrigger) {
-        this.hide();
-      }
-    }
-  }
-  handleDocumentMouseDown(event) {
-    const path = event.composedPath();
-    if (this && !path.includes(this)) {
-      this.hide();
-    }
-  }
-  handleFilterTriggerMouseDown(event) {
-    event.preventDefault();
-    this.filterTrigger.focus({ preventScroll: true });
-    this.open = !this.open;
-  }
-  handleInput(event) {
-    event.stopPropagation();
-    this.tempValue = this.filterInput.value;
-  }
-  handleDecrease() {
-    if (this.tempValue === "") {
-      this.tempValue = this.defaultValue !== "" ? this.defaultValue : "0";
-    } else if (!this.min || parseFloat(this.tempValue) > this.min) {
-      this.tempValue = `${parseFloat(this.tempValue) - 1}`;
-      this.emit("dsa-input");
-    }
-  }
-  handleIncrease() {
-    if (this.tempValue === "") {
-      this.tempValue = this.defaultValue !== "" ? this.defaultValue : "0";
-    } else if (!this.max || parseFloat(this.tempValue) < this.max) {
-      this.tempValue = `${parseFloat(this.tempValue) + 1}`;
-      this.emit("dsa-input");
-    }
-  }
-  handleReset() {
-    this.tempValue = this.defaultValue;
-    this.emit("dsa-input");
-    this.filterInput.focus({ preventScroll: true });
-  }
-  handleSubmit() {
-    this.value = this.tempValue;
-    this.emit("dsa-submit");
-    this.hide();
-    this.filterTrigger.focus({ preventScroll: true });
-  }
-  handleValueChange() {
-    if (this.value !== "") {
-      this.tempValue = this.value === "" ? this.defaultValue : this.value;
-    }
-  }
-  async handleDisabledChange() {
-    if (this.disabled || this.readonly) {
-      this.open = false;
-      this.emit("dsa-hide");
-      this.removeOpenListeners();
-      await stopAnimations(this);
-      this.popup.active = false;
-      const { keyframes, options } = getAnimation(this, "filter.hide", {
-        dir: this.localize.dir()
-      });
-      await animateTo(this.popup.popup, keyframes, options);
-      this.emit("dsa-after-hide");
-    }
-  }
-  async handleOpenChange() {
-    if (this.open) {
-      this.emit("dsa-show");
-      this.addOpenListeners();
-      await stopAnimations(this);
-      this.popup.active = true;
-      const { keyframes, options } = getAnimation(this, "filter.show", {
-        dir: this.localize.dir()
-      });
-      await animateTo(this.popup.popup, keyframes, options);
-      this.emit("dsa-after-show");
-    } else {
-      this.emit("dsa-hide");
-      this.removeOpenListeners();
-      this.tempValue = this.value === "" ? this.defaultValue : this.value;
-      await stopAnimations(this);
-      const { keyframes, options } = getAnimation(this, "filter.hide", {
-        dir: this.localize.dir()
-      });
-      await animateTo(this.popup.popup, keyframes, options);
-      this.popup.active = false;
-      this.emit("dsa-after-hide");
-    }
-  }
-  /** Shows the listbox. */
-  async show() {
-    if (this.open) {
-      this.open = false;
-      return void 0;
-    }
-    this.open = true;
-    return await waitForEvent(this, "dsa-after-show");
-  }
-  /** Hides the listbox. */
-  async hide() {
-    if (!this.open) {
-      this.open = false;
-      return void 0;
-    }
-    this.open = false;
-    return await waitForEvent(this, "dsa-after-hide");
-  }
-  /** Sets focus on the control. */
-  focus(options) {
-    this.filterTrigger.focus(options);
-  }
-  /** Removes focus from the control. */
-  blur() {
-    this.filterTrigger.blur();
-  }
-  render() {
-    return html`
-      <dsa-popup
-        class="filter"
-        part="popup"
-        placement="bottom-start"
-        strategy=${this.hoist ? "fixed" : "absolute"}
-        distance="4"
-        flip
-        shift
-        auto-size="vertical"
-        auto-size-padding="10"
-        @keydown=${this.handleKeyDown}
-      >
-        <dsa-filter-button
-          slot="anchor"
-          class="filter__trigger"
-          label=${this.label !== "" ? this.label : this.filterLabel}
-          selected-option=${this.value}
-          selection-count=${this.value !== "" ? 1 : 0}
-          aria-expanded=${this.open ? "true" : "false"}
-          aria-controls="filter__panel"
-          ?disabled=${this.disabled}
-          ?readonly=${this.readonly}
-          @focus=${this.handleFocus}
-          @blur=${this.handleBlur}
-          @mousedown=${this.handleFilterTriggerMouseDown}
-        ></dsa-filter-button>
-
-        <div id="filter__panel" class="filter__panel">
-          <div class="filter__content">
-            <dsa-icon-button
-              name="remove"
-              variant="secondary"
-              size="xlarge"
-              label=${this.localize.term("decrease")}
-              @click=${this.handleDecrease}
-              ?disabled=${this.min && parseFloat(this.tempValue) <= this.min}
-              class="filter__decrease"
-            ></dsa-icon-button>
-            <dsa-input
-              type="number"
-              .value=${this.tempValue}
-              @input=${this.handleInput}
-              min=${this.min}
-              max=${this.max}
-              title=${this.label !== "" ? this.label : this.filterLabel}
-              aria-label=${this.label !== "" ? this.label : this.filterLabel}
-            ></dsa-input>
-            <dsa-icon-button
-              name="add"
-              variant="secondary"
-              size="xlarge"
-              label=${this.localize.term("increase")}
-              @click=${this.handleIncrease}
-              ?disabled=${this.max && parseFloat(this.tempValue) >= this.max}
-              class="filter__increase"
-            ></dsa-icon-button>
-          </div>
-
-          <div class="filter__footer">
-            <dsa-button
-              variant="tertiary"
-              size="small"
-              @click=${this.handleReset}
-              class="filter__reset"
-              ?disabled=${this.tempValue === this.defaultValue}
-            >
-              <dsa-icon name="restart_alt" slot="prefix"></dsa-icon>
-              ${this.localize.term("reinitialize")}
-            </dsa-button>
-            <dsa-button
-              variant="primary"
-              size="small"
-              @click=${this.handleSubmit}
-              class="filter__submit"
-              ?disabled=${this.min && parseFloat(this.tempValue) < this.min || this.max && parseFloat(this.tempValue) > this.max}
-            >
-              ${this.localize.term("validate")}
-            </dsa-button>
-          </div>
-        </div>
-      </dsa-popup>
-    `;
-  }
-};
-DSAFilterCounter.styles = filter_counter_styles_default;
-__decorateClass([
-  query(".filter")
-], DSAFilterCounter.prototype, "popup", 2);
-__decorateClass([
-  query(".filter__trigger")
-], DSAFilterCounter.prototype, "filterTrigger", 2);
-__decorateClass([
-  query("dsa-input")
-], DSAFilterCounter.prototype, "filterInput", 2);
-__decorateClass([
-  query(".filter__decrease")
-], DSAFilterCounter.prototype, "decreaseButton", 2);
-__decorateClass([
-  query(".filter__increase")
-], DSAFilterCounter.prototype, "increaseButton", 2);
-__decorateClass([
-  query(".filter__reset")
-], DSAFilterCounter.prototype, "resetButton", 2);
-__decorateClass([
-  query(".filter__submit")
-], DSAFilterCounter.prototype, "submitButton", 2);
-__decorateClass([
-  state()
-], DSAFilterCounter.prototype, "tempValue", 2);
-__decorateClass([
-  property({ reflect: true })
-], DSAFilterCounter.prototype, "value", 2);
-__decorateClass([
-  property({ attribute: "default-value" })
-], DSAFilterCounter.prototype, "defaultValue", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DSAFilterCounter.prototype, "open", 2);
-__decorateClass([
-  property({ type: Boolean })
-], DSAFilterCounter.prototype, "hoist", 2);
-__decorateClass([
-  property({ attribute: "label", reflect: true })
-], DSAFilterCounter.prototype, "label", 2);
-__decorateClass([
-  property({ attribute: "filter-label", reflect: true })
-], DSAFilterCounter.prototype, "filterLabel", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DSAFilterCounter.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DSAFilterCounter.prototype, "readonly", 2);
-__decorateClass([
-  property()
-], DSAFilterCounter.prototype, "min", 2);
-__decorateClass([
-  property()
-], DSAFilterCounter.prototype, "max", 2);
-__decorateClass([
-  watch("value", { waitUntilFirstUpdate: true })
-], DSAFilterCounter.prototype, "handleValueChange", 1);
-__decorateClass([
-  watch(["disabled", "readonly"], { waitUntilFirstUpdate: true })
-], DSAFilterCounter.prototype, "handleDisabledChange", 1);
-__decorateClass([
-  watch("open", { waitUntilFirstUpdate: true })
-], DSAFilterCounter.prototype, "handleOpenChange", 1);
-DSAFilterCounter = __decorateClass([
-  customElement("dsa-filter-counter")
-], DSAFilterCounter);
-setDefaultAnimation("filter.show", {
-  keyframes: [
-    { opacity: 0, scale: 0.9 },
-    { opacity: 1, scale: 1 }
-  ],
-  options: { duration: 100, easing: "ease" }
-});
-setDefaultAnimation("filter.hide", {
-  keyframes: [
-    { opacity: 1, scale: 1 },
-    { opacity: 0, scale: 0.9 }
-  ],
-  options: { duration: 100, easing: "ease" }
-});
-
-export {
-  DSAFilterCounter
-};

package/dist/chunks/chunk.FZODQJBF.js

@@ -1,99 +0,0 @@
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
-
-// src/components/filter/filter-range/filter-range.styles.ts
-import { css } from "lit";
-var filter_range_styles_default = css`
-  ${component_styles_default}
-
-  :host {
-    display: inline-flex;
-  }
-
-  /** The popup */
-  .filter {
-    flex: 1 1 auto;
-    display: inline-flex;
-    width: 100%;
-    position: relative;
-    vertical-align: middle;
-  }
-
-  .filter::part(popup) {
-    z-index: var(--dsa-wc-z-index-dropdown);
-  }
-
-  /* Panel */
-  .filter__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-select-listbox-background-color);
-    border: solid var(--dsa-wc-select-listbox-border-width)
-      var(--dsa-wc-select-listbox-border-color);
-    border-radius: var(--dsa-wc-select-listbox-border-radius);
-    padding-inline: 0;
-    overflow: hidden;
-    overscroll-behavior: none;
-    min-width: 300px;
-
-    /* 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: min(
-      var(--auto-size-available-height),
-      var(--dsa-filter-panel-max-height)
-    );
-  }
-
-  .filter__content {
-    padding: var(--dsa-spacing-16);
-    display: flex;
-    flex-direction: column;
-    gap: var(--dsa-spacing-16);
-  }
-
-  .filter__footer {
-    display: flex;
-    justify-content: flex-end;
-    padding: var(--dsa-spacing-8) var(--dsa-spacing-16);
-    gap: var(--dsa-spacing-16);
-    border-top: solid var(--dsa-wc-select-listbox-border-width)
-      var(--dsa-wc-select-listbox-border-color);
-  }
-
-  .filter__content--inputs {
-    display: flex;
-    flex-direction: row;
-    gap: var(--dsa-spacing-16);
-  }
-
-  .filter__slider {
-    height: 25px;
-    display: flex;
-    align-items: center;
-  }
-
-  dsa-input {
-    flex: 1;
-  }
-
-  dsa-range-slider {
-    flex: 1;
-  }
-
-  dsa-divider {
-    width: 8px;
-    border-color: var(--dsa-color-primitive-colors-neutral-600);
-    margin: auto;
-    margin-bottom: 20px;
-  }
-`;
-
-export {
-  filter_range_styles_default
-};