@ds-autonomie/web-components 1.16.2 → 1.18.0

package/dist/chunks/{chunk.AMIXGL74.js → chunk.TOZLN2DN.js}

@@ -1,6 +1,6 @@
 import {
   combobox_styles_default
-} from "./chunk.2UZSRWJ7.js";
+} from "./chunk.4QUJBAX3.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
@@ -29,7 +29,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.G3MRVMJ4.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
@@ -244,6 +244,7 @@ var DSACombobox = class extends ShoelaceElement {
   handleTagRemove(event, option) {
     event.stopPropagation();
     if (!this.disabled) {
+      this.focusNextTagOrInput(option);
       this.toggleOptionSelection(option, false);
       this.updateComplete.then(() => {
         this.emit("dsa-input");
@@ -251,6 +252,15 @@ var DSACombobox = class extends ShoelaceElement {
       });
     }
   }
+  focusNextTagOrInput(option) {
+    const optionIndex = this.selectedOptions.findIndex((el) => el === option);
+    const nextOption = this.selectedOptions[optionIndex + 1];
+    if (nextOption) {
+      nextOption.focus();
+    } else {
+      this.displayInput.focus({ preventScroll: true });
+    }
+  }
   // Gets an array of all <dsa-option> elements
   getAllOptions() {
     if (this.items !== void 0) {
@@ -571,6 +581,7 @@ var DSACombobox = class extends ShoelaceElement {
     const hasClearIcon = this.clearable && !this.disabled && isValueDefined;
     const isPlaceholderVisible = this.placeholder && this.value.length === 0;
     const selectInputWidth = this.value ? isValueDefined ? this.value.length : 1 : void 0;
+    const ariaDescribedBy = `${this.multiple && this.maxOptionsVisible > 0 ? this.selectedOptions.slice(0, this.maxOptionsVisible).map((option) => `tag-${option.value}`).join(" ") : ""} ${this.multiple && this.selectedOptions.length > this.maxOptionsVisible ? "tag-remaining" : ""} ${this.error ? "error-text" : ""} help-text`;
     return html`
       <div
         part="form-control"
@@ -670,7 +681,7 @@ var DSACombobox = class extends ShoelaceElement {
       hasLabel ? void 0 : this.title
     )}
                   aria-disabled=${this.disabled ? "true" : "false"}
-                  aria-describedby=${this.error ? "error-text help-text" : "help-text"}
+                  aria-describedby=${ariaDescribedBy}
                   aria-activedescendant=${(_b = (_a = this.currentOption) == null ? void 0 : _a.id) != null ? _b : ""}
                   role="combobox"
                   tabindex="0"
@@ -700,10 +711,16 @@ var DSACombobox = class extends ShoelaceElement {
                                 label=${option.getTextLabel()}
                               >
                               </dsa-tag>
+                              <span
+                                id=${`tag-${option.value}`}
+                                class="hidden-tag-label"
+                                >${option.getTextLabel()},</span
+                              >
                             `;
       } else if (index === this.maxOptionsVisible) {
         return html`
                               <dsa-tag
+                                id="tag-remaining"
                                 size=${this.size}
                                 label="+${this.selectedOptions.length - index}"
                               >

package/dist/chunks/chunk.TSW2ZSHN.js

@@ -0,0 +1,63 @@
+import {
+  filter_base_styles_default
+} from "./chunk.CZIWWDCG.js";
+
+// src/components/filter/filter-select/filter-select.styles.ts
+import { css } from "lit";
+var filter_select_styles_default = css`
+  ${filter_base_styles_default}
+
+  /* Panel */
+  .filter__panel {
+    display: flex;
+    flex-direction: column;
+    min-width: var(--dsa-filter-panel-min-width);
+  }
+
+  .filter__multiselect-header {
+    display: flex;
+    padding: var(--dsa-spacing-12) var(--dsa-spacing-8);
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: solid var(--dsa-wc-select-listbox-border-width)
+      var(--dsa-wc-select-listbox-border-color);
+  }
+
+  .filter__panel dsa-input {
+    margin: var(--dsa-spacing-8);
+  }
+
+  .filter__listbox {
+    overflow: auto;
+    margin: 0;
+    padding: 0;
+    position: relative;
+  }
+
+  .filter__options {
+    display: none;
+  }
+
+  .filter__see-all-button {
+    align-self: flex-start;
+    margin-inline-start: var(--dsa-spacing-4);
+  }
+
+  .filter__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);
+  }
+
+  .filter-select__footer {
+    display: flex;
+    justify-content: space-between;
+  }
+  .filter__multiselect-header__deselect-all {
+    margin-left: auto;
+  }
+`;
+
+export {
+  filter_select_styles_default
+};

package/dist/chunks/{chunk.IJMNSKEV.js → chunk.TVVACMGN.js}

@@ -59,9 +59,9 @@ var filter_date_styles_default = css`
     margin: 0;
     margin-left: var(--dsa-spacing-8);
     color: var(--dsa-wc-filter-date-input-placeholder-color);
+    width: 5rem;
     background: none;
     outline: none;
-    text-align: center;
   }
 
   .filter-button--date-active .filter-input {
@@ -75,10 +75,6 @@ var filter_date_styles_default = css`
     appearance: none;
   }
 
-  .filter-input::-webkit-input-placeholder {
-    visibility: hidden !important;
-  }
-
   .filter-input::-webkit-datetime-edit-month-field,
   .filter-input::-webkit-datetime-edit-day-field,
   .filter-input::-webkit-datetime-edit-year-field {
@@ -94,7 +90,6 @@ var filter_date_styles_default = css`
 
   .filter-separator {
     color: var(--dsa-color-primitive-colors-neutral-600);
-    margin-left: var(--dsa-spacing-8);
   }
 
   .datepicker-button::part(base) {

package/dist/chunks/{chunk.EMJZLQCL.js → chunk.UVGAHM33.js}

@@ -21,7 +21,8 @@ var tooltip_styles_default = css`
   }
 
   .tooltip::part(popup) {
-    pointer-events: none;
+    -webkit-user-select: none;
+    user-select: none;
     z-index: var(--dsa-wc-z-index-tooltip);
   }
 

package/dist/chunks/{chunk.YG7TOAY3.js → chunk.V5E77HVI.js}

@@ -1,15 +1,15 @@
-import {
-  footer_styles_default
-} from "./chunk.QDZIXDQB.js";
 import {
   footerLogoSvg
 } from "./chunk.6EHBM4N7.js";
+import {
+  footer_styles_default
+} from "./chunk.QDZIXDQB.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.G3MRVMJ4.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.SUCVNPSQ.js → chunk.VNMJ2D4A.js}

@@ -7,7 +7,7 @@ import { css } from "lit";
 var filter_button_styles_default = css`
   ${component_styles_default}
 
-  :host(:focus) {
+  :host(:focus-visible):host(:not([drawer])) {
     outline: var(--dsa-wc-focus-ring);
     outline-offset: var(--dsa-wc-focus-ring-offset);
     border-radius: var(--dsa-wc-input-border-radius);
@@ -35,6 +35,33 @@ var filter_button_styles_default = css`
     border: var(--dsa-wc-filter-button-border);
   }
 
+  :host([drawer]) {
+    display: flex;
+    width: 100%;
+    background-color: var(--dsa-wc-drawer-background-color);
+    border: unset;
+    border-bottom: 1px solid var(--dsa-color-border-default);
+    border-radius: 0;
+    min-height: var(--dsa-wc-filter-button-drawer-min-height);
+    padding: var(--dsa-wc-filter-button-drawer-padding);
+  }
+  :host([drawer]):host(:focus-visible) {
+    outline-offset: -1px;
+  }
+  :host(:hover) {
+    background-color: var(--dsa-wc-filter-button-hover-background-color);
+  }
+  :host([drawer]) .label {
+    color: var(--dsa-color-drawer-on-background);
+  }
+  :host([drawer]) .expand-icon {
+    order: -1;
+  }
+  :host([drawer]) .value,
+  :host([drawer]) .results-badge {
+    margin-left: auto;
+  }
+
   :host([disabled]) {
     background-color: var(--dsa-wc-filter-button-disabled-background-color);
     border-color: var(--dsa-wc-filter-button-disabled-border-color);
@@ -57,9 +84,9 @@ var filter_button_styles_default = css`
     font: var(--dsa-wc-filter-button-value-font);
   }
 
-  :host(:hover),
-  :host([aria-expanded='true']),
-  :host(:not([selection-count='0'])) {
+  :host(:hover):host(:not([drawer])),
+  :host([aria-expanded='true']):host(:not([drawer])),
+  :host(:not([selection-count='0'])):host(:not([drawer])) {
     border: var(--dsa-wc-filter-button-border-active);
   }
 

package/dist/chunks/{chunk.R6572W75.js → chunk.WMZ6HMZN.js}

@@ -1,6 +1,6 @@
 import {
   tooltip_styles_default
-} from "./chunk.EMJZLQCL.js";
+} from "./chunk.UVGAHM33.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.G3MRVMJ4.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
@@ -48,14 +48,13 @@ var DSATooltip = class extends ShoelaceElement {
     this.handleBlur = this.handleBlur.bind(this);
     this.handleClick = this.handleClick.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.handleMouseOver = this.handleMouseOver.bind(this);
     this.handleMouseOut = this.handleMouseOut.bind(this);
     this.updateComplete.then(() => {
       this.addEventListener("blur", this.handleBlur, true);
       this.addEventListener("focus", this.handleFocus, true);
       this.addEventListener("click", this.handleClick);
-      this.addEventListener("keydown", this.handleKeyDown);
       this.addEventListener("mouseover", this.handleMouseOver);
       this.addEventListener("mouseout", this.handleMouseOut);
     });
@@ -72,7 +71,7 @@ var DSATooltip = class extends ShoelaceElement {
     this.removeEventListener("blur", this.handleBlur, true);
     this.removeEventListener("focus", this.handleFocus, true);
     this.removeEventListener("click", this.handleClick);
-    this.removeEventListener("keydown", this.handleKeyDown);
+    this.removeEventListener("keydown", this.handleDocumentKeyDown);
     this.removeEventListener("mouseover", this.handleMouseOver);
     this.removeEventListener("mouseout", this.handleMouseOut);
   }
@@ -95,8 +94,8 @@ var DSATooltip = class extends ShoelaceElement {
       this.show();
     }
   }
-  handleKeyDown(event) {
-    if (this.open && event.key === "Escape") {
+  handleDocumentKeyDown(event) {
+    if (event.key === "Escape") {
       event.stopPropagation();
       this.hide();
     }
@@ -129,6 +128,7 @@ var DSATooltip = class extends ShoelaceElement {
         return;
       }
       this.emit("dsa-show");
+      document.addEventListener("keydown", this.handleDocumentKeyDown);
       await stopAnimations(this.body);
       this.body.hidden = false;
       this.popup.active = true;
@@ -136,9 +136,11 @@ var DSATooltip = class extends ShoelaceElement {
         dir: this.localize.dir()
       });
       await animateTo(this.popup.popup, keyframes, options);
+      this.popup.reposition();
       this.emit("dsa-after-show");
     } else {
       this.emit("dsa-hide");
+      document.removeEventListener("keydown", this.handleDocumentKeyDown);
       await stopAnimations(this.body);
       const { keyframes, options } = getAnimation(this, "tooltip.hide", {
         dir: this.localize.dir()
@@ -195,6 +197,7 @@ var DSATooltip = class extends ShoelaceElement {
         flip
         shift
         arrow
+        hover-bridge
       >
         <slot slot="anchor" aria-describedby="tooltip"></slot>
 

package/dist/chunks/{chunk.RTEOTFLP.js → chunk.WQVKSBYD.js}

@@ -36,6 +36,12 @@ var drawer_styles_default = css`
     z-index: var(--dsa-wc-z-index-drawer);
   }
 
+  .drawer--filters {
+    --header-spacing: var(--dsa-wc-drawer-filters-spacing);
+    --body-spacing: 0;
+    --footer-spacing: var(--dsa-wc-drawer-filters-spacing);
+  }
+
   .drawer__panel {
     position: absolute;
     display: flex;
@@ -90,6 +96,11 @@ var drawer_styles_default = css`
 
   .drawer__header {
     display: flex;
+    align-items: center;
+  }
+  .drawer--filters .drawer__header {
+    border-bottom: 1px solid var(--dsa-color-border-default);
+    min-height: var(--dsa-wc-drawer-filters-header-min-height);
   }
 
   .drawer__title {

package/dist/chunks/{chunk.QDXCYEAZ.js → chunk.WSP5BYQP.js}

@@ -1,11 +1,11 @@
-import {
-  input_mask_styles_default
-} from "./chunk.4DRKFRDB.js";
 import {
   maskedValueToRawValue,
   rawValueToMaskedValue,
   stripSpecialChars
 } from "./chunk.7OLEA3GQ.js";
+import {
+  input_mask_styles_default
+} from "./chunk.BNPEW3RO.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
@@ -17,7 +17,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.G3MRVMJ4.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
@@ -215,6 +215,7 @@ var DSAInputMask = class extends ShoelaceElement {
     const hasLabelSlot = this.hasSlotController.test("label");
     const hasHelpTextSlot = this.hasSlotController.test("help-text");
     const hasPrefixIcon = this.hasSlotController.test("prefix");
+    const hasSuffixIcon = this.hasSlotController.test("suffix");
     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);
@@ -271,8 +272,7 @@ var DSAInputMask = class extends ShoelaceElement {
     })}  aria-placeholder=${placeholder}  aria-hidden="true"
               >
                 <span class="input-mask__value"  aria-hidden="true">${this.maskedValue}</span>
-                ${placeholder}</div
-            >
+                ${placeholder}</div>
 
             <input
               part="input"
@@ -311,7 +311,7 @@ var DSAInputMask = class extends ShoelaceElement {
               @blur=${this.handleBlur}
             />
 
-
+            ${hasSuffixIcon ? html`<slot name="suffix" class="input-mask__suffix"></slot>` : ""}
 
             ${hasClearIcon ? html`
                     <button

package/dist/chunks/{chunk.XD5JM6WF.js → chunk.WYUQG5BJ.js}

@@ -48,6 +48,26 @@ var popup_styles_default = css`
     background: var(--arrow-color);
     z-index: -1;
   }
+
+  /* Hover bridge */
+  .popup-hover-bridge:not(.popup-hover-bridge--visible) {
+    display: none;
+  }
+  .popup-hover-bridge {
+    position: fixed;
+    z-index: calc(var(--dsa-wc-z-index-dropdown) - 1);
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    clip-path: polygon(
+      var(--hover-bridge-top-left-x, 0) var(--hover-bridge-top-left-y, 0),
+      var(--hover-bridge-top-right-x, 0) var(--hover-bridge-top-right-y, 0),
+      var(--hover-bridge-bottom-right-x, 0)
+        var(--hover-bridge-bottom-right-y, 0),
+      var(--hover-bridge-bottom-left-x, 0) var(--hover-bridge-bottom-left-y, 0)
+    );
+  }
 `;
 
 export {

package/dist/chunks/{chunk.N43R5DJN.js → chunk.YU57HFSC.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.EMIT7S33.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.G3MRVMJ4.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";