@ds-autonomie/web-components 2.18.0 → 2.20.0

package/dist/events/dsa-table-row-reordered.d.ts

@@ -0,0 +1,14 @@
+import type DSATableRow from '../components/table-row/table-row';
+type DSATableRowReordered = CustomEvent<{
+    movedRow: DSATableRow;
+    oldIndex: number;
+    newIndex: number;
+    rows: DSATableRow[];
+    source: 'keyboard' | 'pointer';
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'dsa-table-row-reordered': DSATableRowReordered;
+    }
+}
+export default DSATableRowReordered;

package/dist/events/dsa-table-row-reordered.js

@@ -0,0 +1 @@
+export {};

package/dist/events/events.d.ts

@@ -44,4 +44,5 @@ export type { default as DSATableRowAllChangeSelection } from './dsa-table-row-a
 export type { default as DSATableAllSelected } from './dsa-table-row-all-selected';
 export type { default as DSATableRowClick } from './dsa-table-row-click';
 export type { default as DSATableRowExpandChange } from './dsa-table-row-expand-change';
+export type { default as DSATableRowReordered } from './dsa-table-row-reordered';
 export type { default as DSATableRowSelected } from './dsa-table-row-selected';

package/dist/internal/components/date-field/date-field.d.ts

@@ -28,6 +28,7 @@ export default class DSAInternalDateField extends ShoelaceElement implements Sho
     private lastPressedKey;
     private internalValueChange;
     private previousTentativeDate;
+    private previousSpinbuttonValue;
     /** The parent element accessible name */
     parentName: string;
     /** A description for accessibility */

package/dist/internal/components/date-field/date-field.js

@@ -55,6 +55,7 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
         this.lastPressedKey = '';
         this.internalValueChange = false;
         this.previousTentativeDate = '';
+        this.previousSpinbuttonValue = new WeakMap();
         /** The parent element accessible name */
         this.parentName = '';
         /** A description for accessibility */
@@ -165,11 +166,12 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
         const allEmpty = tempSelectedDay === '' &&
             tempSelectedMonth === '' &&
             tempSelectedYear === '';
+        const isTentativeDateValid = isValidDate(tentativeDate);
         if (allEmpty) {
             this.setCustomValidity('');
             this.value = '';
         }
-        else if (!isValidDate(tentativeDate)) {
+        else if (!isTentativeDateValid) {
             this.setCustomValidity(this.localize.term('invalidDate'));
             this.value = '';
         }
@@ -179,7 +181,7 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
         }
         this.internalValueChange = true;
         this.formControlController.updateValidity();
-        if (!isValidDate(tentativeDate)) {
+        if (!isTentativeDateValid) {
             this.formControlController.emitInvalidEvent(event);
         }
         // Emit change event if the value has changed, or if the individual inputs have changed AND they are all filled or all empty (if the date is invalid the value will be reset to an empty string)
@@ -206,6 +208,7 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
     }
     handleSpinbuttonKeydown(event) {
         const currentInput = event.currentTarget;
+        this.previousSpinbuttonValue.set(currentInput, currentInput.value);
         this.lastPressedKey = event.key;
         // Hack to prevent dead keys input on Firefox/Safari
         if (event.key === 'Dead') {
@@ -231,12 +234,19 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
         }
     }
     handleSpinbuttonInput(event) {
+        var _a;
         event.stopPropagation();
         const currentTarget = event.currentTarget;
+        const previousSpinbuttonValue = (_a = this.previousSpinbuttonValue.get(currentTarget)) !== null && _a !== void 0 ? _a : '';
         if (Number(currentTarget.value) > Number(currentTarget.max)) {
-            currentTarget.value = currentTarget.value.slice(-1);
+            const shouldKeepPreviousValue = currentTarget === this.yearInput && previousSpinbuttonValue !== '';
+            currentTarget.value = shouldKeepPreviousValue
+                ? previousSpinbuttonValue
+                : currentTarget.value.slice(-1);
             event.preventDefault();
-            this.focusNextSpinbutton(currentTarget);
+            if (!shouldKeepPreviousValue) {
+                this.focusNextSpinbutton(currentTarget);
+            }
         }
         // Zeros padding
         if (currentTarget.value !== '') {
@@ -255,8 +265,13 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
                 break;
         }
         // If adding another character would increase the value over the maximum, focus on next input
+        const shouldMoveToNextBecauseLeadingZero = currentTarget !== this.yearInput &&
+            previousSpinbuttonValue === '00' &&
+            currentTarget.value !== '00' &&
+            currentTarget.value.startsWith('0');
         if (!['ArrowUp', 'ArrowDown'].includes(this.lastPressedKey) &&
-            Number(`${currentTarget.value}0`) > Number(currentTarget.max)) {
+            (shouldMoveToNextBecauseLeadingZero ||
+                Number(`${currentTarget.value}0`) > Number(currentTarget.max))) {
             this.focusNextSpinbutton(currentTarget);
         }
         this.setCustomValidity('');
@@ -302,9 +317,10 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
                 this.selectedYear = '';
             }
             else {
-                this.selectedDay = `${getDateFromISO(this.value).getDate()}`.padStart(2, '0');
-                this.selectedMonth = `${getDateFromISO(this.value).getMonth() + 1}`.padStart(2, '0');
-                this.selectedYear = `${getDateFromISO(this.value).getFullYear()}`.padStart(4, '0');
+                const parsedDate = getDateFromISO(this.value);
+                this.selectedDay = `${parsedDate.getDate()}`.padStart(2, '0');
+                this.selectedMonth = `${parsedDate.getMonth() + 1}`.padStart(2, '0');
+                this.selectedYear = `${parsedDate.getFullYear()}`.padStart(4, '0');
             }
             yield this.updateComplete;
             this.setCustomValidity('');

package/dist/internal/components/form-selectable-card/form-selectable-card.js

@@ -14,6 +14,7 @@ import { DSAInternalRadioIcon } from '../../components/radio-icon/radio-icon';
 import { ShoelaceElement } from '../../shoelace-element';
 import { HasSlotController } from '../../slot';
 import { watch } from '../../watch';
+import { removeAttributeIfPresent, setAttributeIfDifferent, } from '../../../utilities/helpers';
 import styles from './form-selectable-card.styles';
 export class FormSelectableCard extends ShoelaceElement {
     constructor() {
@@ -50,10 +51,10 @@ export class FormSelectableCard extends ShoelaceElement {
     }
     handleDisabledChange() {
         if (this.readonly || this.parentReadonly) {
-            this.button.setAttribute('aria-disabled', 'true');
+            setAttributeIfDifferent(this.button, 'aria-disabled', 'true');
         }
         else {
-            this.button.removeAttribute('aria-disabled');
+            removeAttributeIfPresent(this.button, 'aria-disabled');
         }
     }
     /** Sets focus on the radio button. */

package/dist/internal/components/form-selectable-card/form-selectable-card.styles.js

@@ -113,17 +113,17 @@ export default css `
     pointer-events: none;
   }
 
-  .selectable-card.selectable-card--readonly {
+  .selectable-card--readonly {
     background-color: var(--dsa-wc-selectable-card-read-only-background-color);
     border-color: var(--dsa-wc-selectable-card-read-only-border-color);
   }
 
-  .selectable-card.selectable-card--disabled {
+  .selectable-card--disabled {
     background-color: var(--dsa-wc-selectable-card-disabled-background-color);
     border-color: var(--dsa-wc-selectable-card-disabled-border-color);
   }
-  .selectable-card.selectable-card--disabled .selectable-card__label,
-  .selectable-card.selectable-card--disabled .selectable-card__description {
+  .selectable-card--disabled .selectable-card__label,
+  .selectable-card--disabled .selectable-card__description {
     color: var(--dsa-wc-selectable-card-disabled-color);
   }
 

package/dist/internal/components/form-toggle-button/form-toggle-button.js

@@ -13,6 +13,7 @@ import { a11yWarning } from '../../a11y-warning';
 import { ShoelaceElement } from '../../shoelace-element';
 import { HasSlotController } from '../../slot';
 import { watch } from '../../watch';
+import { removeAttributeIfPresent, setAttributeIfDifferent, } from '../../../utilities/helpers';
 import styles from './form-toggle-button.styles';
 export class FormToggleButton extends ShoelaceElement {
     constructor() {
@@ -47,10 +48,10 @@ export class FormToggleButton extends ShoelaceElement {
     }
     handleDeactivatedChange() {
         if (this.readonly || this.parentReadonly) {
-            this.button.setAttribute('aria-disabled', 'true');
+            setAttributeIfDifferent(this.button, 'aria-disabled', 'true');
         }
         else {
-            this.button.removeAttribute('aria-disabled');
+            removeAttributeIfPresent(this.button, 'aria-disabled');
         }
     }
     /** Sets focus on the radio button. */

package/dist/internal/components/form-toggle-button/form-toggle-button.styles.js

@@ -61,14 +61,14 @@ export default css `
     border-color: var(--dsa-wc-toggle-button-checked-border-color);
     color: var(--dsa-wc-toggle-button-checked-color);
   }
-  .button--toggle:hover.button--checked {
+  .button--toggle.button--checked:hover {
     background-color: var(
       --dsa-wc-toggle-button-checked-hover-background-color
     );
     border-color: var(--dsa-wc-toggle-button-checked-hover-border-color);
     color: var(--dsa-wc-toggle-button-checked-hover-color);
   }
-  .button--toggle:active.button--checked {
+  .button--toggle.button--checked:active {
     background-color: var(
       --dsa-wc-toggle-button-checked-active-background-color
     );

package/dist/internal/components/input-base/input-base.styles.js

@@ -67,11 +67,11 @@ export default css `
     color: var(--dsa-wc-input-on-layer-text-field-input-color-disabled);
   }
 
-  .input--error.input--on-layer:not(.input--disabled):not(.input--readonly) {
+  .input--on-layer.input--error:not(.input--disabled):not(.input--readonly) {
     background-color: var(--dsa-wc-input-on-layer-background-color-error);
     border-color: var(--dsa-wc-input-on-layer-border-color-error);
   }
-  .input--error.input--on-layer:hover:not(.input--disabled):not(
+  .input--on-layer.input--error:hover:not(.input--disabled):not(
       .input--readonly
     ) {
     border-color: var(--dsa-wc-input-on-layer-border-color-error-hover);
@@ -110,11 +110,11 @@ export default css `
     border-color: var(--dsa-wc-input-on-base-read-only-border-color);
   }
 
-  .input--error.input--on-base:not(.input--disabled):not(.input--readonly) {
+  .input--on-base.input--error:not(.input--disabled):not(.input--readonly) {
     background-color: var(--dsa-wc-input-on-base-background-color-error);
     border-color: var(--dsa-wc-input-on-base-border-color-error);
   }
-  .input--error.input--on-base:hover:not(.input--disabled):not(
+  .input--on-base.input--error:hover:not(.input--disabled):not(
       .input--readonly
     ) {
     border-color: var(--dsa-wc-input-on-base-border-color-error-hover);
@@ -154,13 +154,13 @@ export default css `
     border-color: var(--dsa-wc-input-on-floating-read-only-border-color);
   }
 
-  .input--error.input--on-floating-menu:not(.input--disabled):not(
+  .input--on-floating-menu.input--error:not(.input--disabled):not(
       .input--readonly
     ) {
     background-color: var(--dsa-wc-input-on-floating-background-color-error);
     border-color: var(--dsa-wc-input-on-floating-border-color-error);
   }
-  .input--error.input--on-floating-menu:hover:not(.input--disabled):not(
+  .input--on-floating-menu.input--error:hover:not(.input--disabled):not(
       .input--readonly
     ) {
     border-color: var(--dsa-wc-input-on-floating-border-color-error-hover);

package/dist/templates/utilities/decorator.js

@@ -70,7 +70,7 @@ export const withPageTemplate = (story) => html `
       margin: 24px 16px 80px;
     }
     .placeholder {
-      color: red;
+      color: var(--dsa-color-primitive-colors-feedback-error-500);
     }
   </style>
   <div class="layout">

package/dist/translations/en-gb.js

@@ -1,7 +1,7 @@
 import {
   en_default,
   registerTranslation
-} from "../chunks/chunk.WHHYA5VY.js";
+} from "../chunks/chunk.34HS7ICN.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/translations/en.js

@@ -1,6 +1,6 @@
 import {
   en_default
-} from "../chunks/chunk.WHHYA5VY.js";
+} from "../chunks/chunk.34HS7ICN.js";
 import "../chunks/chunk.N3L4GIUO.js";
 export {
   en_default as default

package/dist/translations/fr.js

@@ -1,6 +1,6 @@
 import {
   fr_default
-} from "../chunks/chunk.WHHYA5VY.js";
+} from "../chunks/chunk.34HS7ICN.js";
 import "../chunks/chunk.N3L4GIUO.js";
 export {
   fr_default as default

package/dist/utilities/helpers.d.ts

@@ -1,2 +1,4 @@
 export declare function normalizeStr(str: string): string;
+export declare function setAttributeIfDifferent(element: Element, name: string, value: string): void;
+export declare function removeAttributeIfPresent(element: Element, name: string): void;
 export declare function isMacOS(): boolean;

package/dist/utilities/helpers.js

@@ -1,9 +1,13 @@
 import {
   isMacOS,
-  normalizeStr
-} from "../chunks/chunk.FLRB45SF.js";
+  normalizeStr,
+  removeAttributeIfPresent,
+  setAttributeIfDifferent
+} from "../chunks/chunk.PSYTLBRK.js";
 import "../chunks/chunk.N3L4GIUO.js";
 export {
   isMacOS,
-  normalizeStr
+  normalizeStr,
+  removeAttributeIfPresent,
+  setAttributeIfDifferent
 };

package/dist/utilities/localize.d.ts

@@ -69,6 +69,8 @@ export interface Translation extends DefaultTranslation {
     showExpandedTableRowHeader: string;
     showExpandedTableRow: string;
     hideExpandedTableRow: string;
+    reorderTableRowsHeader: string;
+    startReorderTableRow: string;
     cnsaFooterLogoLabel: string;
     openAll: string;
     closeAll: string;

package/dist/utilities/localize.js

@@ -1,7 +1,7 @@
 import {
   LocalizeController,
   registerTranslation
-} from "../chunks/chunk.WHHYA5VY.js";
+} from "../chunks/chunk.34HS7ICN.js";
 import "../chunks/chunk.N3L4GIUO.js";
 export {
   LocalizeController,

package/dist/utilities/storybook.js

@@ -1,4 +1,4 @@
-import "../chunks/chunk.TP5XEQ2O.js";
+import "../chunks/chunk.ELOLGOFM.js";
 import "../chunks/chunk.UVGAHM33.js";
 import "../chunks/chunk.GYWU4AAB.js";
 import "../chunks/chunk.WOMQVTNZ.js";
@@ -6,7 +6,7 @@ import "../chunks/chunk.B4BZKR24.js";
 import "../chunks/chunk.D6XRV35U.js";
 import "../chunks/chunk.HPDCOGLH.js";
 import "../chunks/chunk.PWL7QCVG.js";
-import "../chunks/chunk.WHHYA5VY.js";
+import "../chunks/chunk.34HS7ICN.js";
 import "../chunks/chunk.QB2NJE2Y.js";
 import "../chunks/chunk.SVWU6JW4.js";
 import "../chunks/chunk.TUVJKY7S.js";

package/dist/vscode.html-custom-data.json

@@ -988,6 +988,11 @@
           "name": "override-default-filtering",
           "description": "Deactivates the combobox inner filtering logic",
           "values": []
+        },
+        {
+          "name": "keep-search-after-selection",
+          "description": "Keeps the current search term after selecting an option when multiple is true.",
+          "values": []
         }
       ],
       "references": []
@@ -1405,6 +1410,11 @@
           "description": "`true` if this drop container should accept more than one files at once.",
           "values": []
         },
+        {
+          "name": "append-files",
+          "description": "When used with `multiple`, keeps previously selected files and appends newly selected files.\n\nBy default, each new selection replaces the previous one (native input behavior).",
+          "values": []
+        },
         {
           "name": "error",
           "description": "Indicates whether the file-upload should be in error state",
@@ -1465,32 +1475,6 @@
       ],
       "references": []
     },
-    {
-      "name": "dsa-filter-button",
-      "description": "Filter Button is used to toggle a filter list of options, and display the selected values.\n---\n",
-      "attributes": [
-        { "name": "label", "description": "The filter's label", "values": [] },
-        {
-          "name": "selected-option",
-          "description": "The selected option label. Will be displayed in the button if only one option is selected.",
-          "values": []
-        },
-        {
-          "name": "selection-count",
-          "description": "The number of selected options. Will be displayed in the button as a badge if multiple options are selected.",
-          "values": []
-        },
-        {
-          "name": "tabindex",
-          "description": "The tab index of the filter button",
-          "values": []
-        },
-        { "name": "disabled", "values": [] },
-        { "name": "readonly", "values": [] },
-        { "name": "drawer", "values": [] }
-      ],
-      "references": []
-    },
     {
       "name": "dsa-filter-counter",
       "description": "Filter counter allow you to choose a numeric value to filter.\n---\n\n\n### **Events:**\n - **dsa-after-hide** - Emitted after the filter panel closes and all animations are complete.\n- **dsa-after-show** - Emitted after the filter panel opens and all animations are complete.\n- **dsa-blur** - Emitted when the filter loses focus.\n- **dsa-focus** - Emitted when the filter gains focus.\n- **dsa-hide** - Emitted when the filter panel closes.\n- **dsa-input** - Emitted when the filter receives input (when the temporary value changes).\n- **dsa-show** - Emitted when the filter panel opens.\n- **dsa-submit** - Emitted when the user confirms the filter value change.",
@@ -1656,6 +1640,32 @@
       "attributes": [],
       "references": []
     },
+    {
+      "name": "dsa-filter-button",
+      "description": "Filter Button is used to toggle a filter list of options, and display the selected values.\n---\n",
+      "attributes": [
+        { "name": "label", "description": "The filter's label", "values": [] },
+        {
+          "name": "selected-option",
+          "description": "The selected option label. Will be displayed in the button if only one option is selected.",
+          "values": []
+        },
+        {
+          "name": "selection-count",
+          "description": "The number of selected options. Will be displayed in the button as a badge if multiple options are selected.",
+          "values": []
+        },
+        {
+          "name": "tabindex",
+          "description": "The tab index of the filter button",
+          "values": []
+        },
+        { "name": "disabled", "values": [] },
+        { "name": "readonly", "values": [] },
+        { "name": "drawer", "values": [] }
+      ],
+      "references": []
+    },
     {
       "name": "dsa-footer-mandatory-mentions",
       "description": "Footer mandatory mentions displays text elements separated by a divider within a [footer](/components/footer) context.\n---\n\n\n### **Slots:**\n - **text-left** - Used to display content to the left of the divider.\n- **text-right** - Used to display content to the right of the divider.",
@@ -3585,6 +3595,11 @@
           "description": "`true` if this table contains expandable rows",
           "values": []
         },
+        {
+          "name": "reorderable",
+          "description": "`true` if this table contains draggable rows",
+          "values": []
+        },
         {
           "name": "alignment",
           "description": "Used to align content",
@@ -3700,7 +3715,7 @@
     },
     {
       "name": "dsa-table-header-row",
-      "description": "The table header row defines a row of cells in a [table-head](/components/table/table-head) within a [table](/components/table/table)\n---\n\n\n### **Events:**\n - **dsa-table-row-all-change-selection** - Emit when alls rows are selected or unselected upon interaction with the checkbox.\n- **dsa-table-row-change-selection** - Emit when row is selected or unselected upon interaction with the checkbox.\n- **dsa-table-row-click** - Emitted when the user clicks on the table row.\n\n### **Slots:**\n - **Content** - to be placed inside the table header row",
+      "description": "The table header row defines a row of cells in a [table-head](/components/table/table-head) within a [table](/components/table/table)\n---\n\n\n### **Events:**\n - **dsa-table-row-all-change-selection** - Emit when alls rows are selected or unselected upon interaction with the checkbox.\n- **dsa-table-row-reorder-toggle**\n- **dsa-table-row-reorder-move**\n- **dsa-table-row-reorder-drag-start**\n- **dsa-table-row-reorder-drag-end**\n- **dsa-table-row-change-selection** - Emit when row is selected or unselected upon interaction with the checkbox.\n- **dsa-table-row-click** - Emitted when the user clicks on the table row.\n\n### **Slots:**\n - **Content** - to be placed inside the table header row",
       "attributes": [
         { "name": "role", "description": "The table-row's role", "values": [] },
         {
@@ -3722,6 +3737,16 @@
           "description": "Draws the row in a expanded state to show content underneath",
           "values": []
         },
+        {
+          "name": "reorderable",
+          "description": "`true` if this row can be rearranged by the user.",
+          "values": []
+        },
+        {
+          "name": "rearranging",
+          "description": "`true` if this row is currently in rearrange mode.",
+          "values": []
+        },
         {
           "name": "expanded",
           "description": "`true` if row expanded is draw",
@@ -3752,6 +3777,11 @@
           "description": "The `value` attribute for the `<checkbox>` for selection.",
           "values": []
         },
+        {
+          "name": "reorder-label",
+          "description": "The `aria-label` attribute for the reorder button.",
+          "values": []
+        },
         {
           "name": "loading",
           "description": "Displays a loading state.",
@@ -3784,7 +3814,7 @@
     },
     {
       "name": "dsa-table-row",
-      "description": "The table row defines a row of cells in a [table](/components/table)\n---\n\n\n### **Events:**\n - **dsa-table-row-change-selection** - Emit when row is selected or unselected upon interaction with the checkbox.\n- **dsa-table-row-click** - Emitted when the user clicks on the table row.\n\n### **Slots:**\n - **Content** - to be placed inside the table row",
+      "description": "The table row defines a row of cells in a [table](/components/table)\n---\n\n\n### **Events:**\n - **dsa-table-row-reorder-toggle**\n- **dsa-table-row-reorder-move**\n- **dsa-table-row-reorder-drag-start**\n- **dsa-table-row-reorder-drag-end**\n- **dsa-table-row-change-selection** - Emit when row is selected or unselected upon interaction with the checkbox.\n- **dsa-table-row-click** - Emitted when the user clicks on the table row.\n\n### **Slots:**\n - **Content** - to be placed inside the table row",
       "attributes": [
         { "name": "role", "description": "The table-row's role", "values": [] },
         {
@@ -3806,6 +3836,16 @@
           "description": "Draws the row in a expanded state to show content underneath",
           "values": []
         },
+        {
+          "name": "reorderable",
+          "description": "`true` if this row can be rearranged by the user.",
+          "values": []
+        },
+        {
+          "name": "rearranging",
+          "description": "`true` if this row is currently in rearrange mode.",
+          "values": []
+        },
         {
           "name": "expanded",
           "description": "`true` if row expanded is draw",
@@ -3836,6 +3876,11 @@
           "description": "The `value` attribute for the `<checkbox>` for selection.",
           "values": []
         },
+        {
+          "name": "reorder-label",
+          "description": "The `aria-label` attribute for the reorder button.",
+          "values": []
+        },
         {
           "name": "loading",
           "description": "Displays a loading state.",
@@ -4142,6 +4187,11 @@
             { "name": "leaf" },
             { "name": "parent" }
           ]
+        },
+        {
+          "name": "disable-checkbox-sync",
+          "description": "Disables checkbox synchronization between parent and child nodes when the tree's selection mode is `multiple`.",
+          "values": []
         }
       ],
       "references": []