@ds-autonomie/web-components 2.19.0 → 2.20.0

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/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/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.",