@solid-design-system/components 6.21.2 → 6.22.1

package/cdn/custom-elements.json

@@ -6297,6 +6297,62 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/datepicker/datepicker-converters.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "isoDateConverter",
+          "type": {
+            "text": "object"
+          },
+          "default": "{ fromAttribute(value: string | null): string | null { if (!value) return null; // normalize all separators to hyphens const cleaned = value.trim().replace(/[./]/g, '-'); // acccept YYYY-MM-DD only const match = cleaned.match(/^(\\d{4})-(\\d{2})-(\\d{2})$/); if (!match) return null; const iso = `${match[1]}-${match[2]}-${match[3]}`; // validate date const d = new Date(+match[1], +match[2] - 1, +match[3]); if (d.getFullYear() !== +match[1] || d.getMonth() !== +match[2] - 1 || d.getDate() !== +match[3]) { return null; } return iso; }, toAttribute(value: string | null): string { return value ?? ''; } }"
+        },
+        {
+          "kind": "variable",
+          "name": "viewMonthConverter",
+          "type": {
+            "text": "object"
+          },
+          "default": "{ fromAttribute(value: string | null): Date | null { if (!value) return null; const cleaned = value.trim().replace(/[./]/g, '-'); let m: RegExpMatchArray | null = cleaned.match(/^(\\d{2})-(\\d{4})$/); let month: number; let year: number; if (m) { month = Number(m[1]); year = Number(m[2]); } else { m = cleaned.match(/^(\\d{4})-(\\d{2})$/); if (!m) return null; year = Number(m[1]); month = Number(m[2]); } if (!year || !month || month < 1 || month > 12) return null; return new Date(year, month - 1, 1); }, toAttribute(value: Date | null): string { if (!value) return ''; const year = value.getFullYear(); const month = String(value.getMonth() + 1).padStart(2, '0'); return `${year}-${month}`; } }"
+        },
+        {
+          "kind": "variable",
+          "name": "disabledDatesConverter",
+          "type": {
+            "text": "object"
+          },
+          "default": "{ fromAttribute(value: string | null): string[] { if (!value) return []; let rawList: string[] = []; const trimmed = value.trim(); // arrays if (trimmed.startsWith('[')) { try { // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment const parsed = JSON.parse(trimmed); if (Array.isArray(parsed)) { rawList = parsed.map(String); } } catch { return []; } } else { // space separated rawList = trimmed .split(/[\\s,]+/) .map(v => v.trim()) .filter(Boolean); } const result: string[] = []; for (const raw of rawList) { // replace all separators with dots const cleaned = raw.replace(/[-/]/g, '.'); const parts = cleaned.split('.'); if (parts.length !== 3) continue; const [yyyy, mm, dd] = parts.map(Number); if (!yyyy || !mm || !dd) continue; // validate date const date = new Date(yyyy, mm - 1, dd); if (date.getFullYear() !== yyyy || date.getMonth() !== mm - 1 || date.getDate() !== dd) continue; const iso = `${yyyy}-${String(mm).padStart(2, '0')}-${String(dd).padStart(2, '0')}`; result.push(iso); } return result; }, toAttribute(value: string[] | null): string { return value ? value.join(',') : ''; } }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "isoDateConverter",
+          "declaration": {
+            "name": "isoDateConverter",
+            "module": "components/datepicker/datepicker-converters.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "viewMonthConverter",
+          "declaration": {
+            "name": "viewMonthConverter",
+            "module": "components/datepicker/datepicker-converters.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "disabledDatesConverter",
+          "declaration": {
+            "name": "disabledDatesConverter",
+            "module": "components/datepicker/datepicker-converters.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/datepicker/datepicker.js",
@@ -6305,6 +6361,192 @@
           "kind": "class",
           "description": "",
           "name": "SdDatepicker",
+          "cssProperties": [
+            {
+              "description": "The text color for the datepicker.",
+              "name": "--sd-form-control-color-text"
+            },
+            {
+              "description": "The border radius for the datepicker.",
+              "name": "--sd-form-control-border-radius"
+            },
+            {
+              "description": "The default border color for the datepicker.",
+              "name": "--sd-form-control-color-border"
+            },
+            {
+              "description": "The text color for the floating label when the input is filled.",
+              "name": "--sd-form-control--filled__floating-label-color-text"
+            },
+            {
+              "description": "The background color for the input when it is invalid.",
+              "name": "--sd-form-control--invalid-color-background"
+            },
+            {
+              "description": "The border radius for the bottom left corner of the datepicker.",
+              "name": "--sd-form-control__listbox-border-bottom-left-radius"
+            },
+            {
+              "description": "The border radius for the bottom right corner of the datepicker.",
+              "name": "--sd-form-control__listbox-border-bottom-right-radius"
+            },
+            {
+              "description": "The border radius for the top left corner of the datepicker.",
+              "name": "--sd-form-control__listbox-border-top-left-radius"
+            },
+            {
+              "description": "The border radius for the top right corner of the datepicker.",
+              "name": "--sd-form-control__listbox-border-top-right-radius"
+            },
+            {
+              "description": "The background color for form controls on hover.",
+              "name": "--sd-form-control--hover-color-background"
+            },
+            {
+              "description": "The background color for read-only form controls.",
+              "name": "--sd-form-control--read-only-color-background"
+            },
+            {
+              "description": "The default text color for date items.",
+              "name": "--sd-datepicker__date-item--default-color-text"
+            },
+            {
+              "description": "The background color for date items in hover state.",
+              "name": "--sd-datepicker__date-item--hover--default-color-background"
+            },
+            {
+              "description": "The text color for date items in hover state.",
+              "name": "--sd-datepicker__date-item--hover--default-color-text"
+            },
+            {
+              "description": "The default border color for date items.",
+              "name": "--sd-datepicker__date-item--default-color-border"
+            },
+            {
+              "description": "The text color for selected date items.",
+              "name": "--sd-datepicker__date-item--selected-color-text"
+            },
+            {
+              "description": "The background color for date items in hover state when they are previous/next month days.",
+              "name": "--sd-datepicker__date-item--hover--prev-next-color-background"
+            },
+            {
+              "description": "The text color for date items in hover state when they are previous/next month days.",
+              "name": "--sd-datepicker__date-item--hover--prev-next-color-text"
+            },
+            {
+              "description": "The font weight for the current date item.",
+              "name": "--sd-datepicker__date-item--current-font-weight"
+            },
+            {
+              "description": "The background color for selected date items.",
+              "name": "--sd-datepicker__date-item--selected-color-background"
+            },
+            {
+              "description": "The background color for selected date items in hover state.",
+              "name": "--sd-datepicker__date-item--selected--hover-color-background"
+            },
+            {
+              "description": "The background color for date items that are within the selected range.",
+              "name": "--sd-datepicker__date-item--range-color-background"
+            },
+            {
+              "description": "The text color for the current date item.",
+              "name": "--sd-datepicker__date-item--current-color-text"
+            },
+            {
+              "description": "The text color for selected date items in hover state.",
+              "name": "--sd-datepicker__date-item--selected--hover-color-text"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "datepicker"
+            },
+            {
+              "description": "The header containing the month/year and navigation buttons.",
+              "name": "header"
+            },
+            {
+              "description": "The button to go to the previous year.",
+              "name": "prev-year-button"
+            },
+            {
+              "description": "The button to go to the previous month.",
+              "name": "prev-month-button"
+            },
+            {
+              "description": "The month and year label.",
+              "name": "month-label"
+            },
+            {
+              "description": "The button to go to the next month.",
+              "name": "next-month-button"
+            },
+            {
+              "description": "The button to go to the next year.",
+              "name": "next-year-button"
+            },
+            {
+              "description": "The calendar grid container.",
+              "name": "grid"
+            },
+            {
+              "description": "Each weekday label in the calendar header.",
+              "name": "weekday"
+            },
+            {
+              "description": "Each day button in the calendar grid.",
+              "name": "day"
+            },
+            {
+              "description": "The form control wrapper around the input.",
+              "name": "form-control"
+            },
+            {
+              "description": "The label for the input.",
+              "name": "form-control-label"
+            },
+            {
+              "description": "The input element.",
+              "name": "form-control-input"
+            },
+            {
+              "description": "The border around the input.",
+              "name": "border"
+            },
+            {
+              "description": "The icon shown when the input is invalid.",
+              "name": "invalid-icon"
+            },
+            {
+              "description": "The icon shown when the input is valid.",
+              "name": "valid-icon"
+            },
+            {
+              "description": "The help text, displayed below the input.",
+              "name": "form-control-help-text"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot.",
+              "name": ""
+            },
+            {
+              "description": "The label for the date input.",
+              "name": "label"
+            },
+            {
+              "description": "The help text, displayed below the input.",
+              "name": "help-text"
+            },
+            {
+              "description": "The tooltip icon and content.",
+              "name": "tooltip"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -6730,6 +6972,40 @@
               }
             }
           ],
+          "events": [
+            {
+              "description": "Emitted when the date selection changes.",
+              "name": "sd-change"
+            },
+            {
+              "description": "Emitted when the date range selection changes.",
+              "name": "sd-range-select"
+            },
+            {
+              "description": "Emitted when the date selection changes.",
+              "name": "sd-select"
+            },
+            {
+              "description": "Emitted when the datepicker is closed.",
+              "name": "sd-datepicker-close"
+            },
+            {
+              "description": "Emitted when the datepicker is focused.",
+              "name": "sd-focus"
+            },
+            {
+              "description": "Emitted when the datepicker is blurred.",
+              "name": "sd-blur"
+            },
+            {
+              "description": "Emitted when the month is changed.",
+              "name": "sd-month-change"
+            },
+            {
+              "description": "Emitted when the year is changed.",
+              "name": "sd-month-year"
+            }
+          ],
           "attributes": [
             {
               "name": "locale",
@@ -6994,6 +7270,14 @@
             "name": "SolidElement",
             "module": "/src/internal/solid-element"
           },
+          "summary": "Used to enter or select a date or a range of dates using a calendar view.",
+          "status": "stable",
+          "since": "5.16.0",
+          "dependencies": [
+            "sd-icon",
+            "sd-divider",
+            "sd-popup"
+          ],
           "tagName": "sd-datepicker",
           "customElement": true
         }
@@ -12628,6 +12912,17 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "stacked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Stacks the navigation-item in a vertical layout. Only used if `vertical` is false.",
+              "attribute": "stacked",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "chevron",
@@ -12843,6 +13138,15 @@
               "description": "Disables the navigation item.",
               "fieldName": "disabled"
             },
+            {
+              "name": "stacked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Stacks the navigation-item in a vertical layout. Only used if `vertical` is false.",
+              "fieldName": "stacked"
+            },
             {
               "name": "chevron",
               "type": {
@@ -23017,7 +23321,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "6.21.2",
+    "version": "6.22.1",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"