@nova-design-system/nova-webcomponents 3.0.0 → 3.2.0

package/dist/collection/components/nv-fielddaterange/nv-fielddaterange.docs.js

@@ -89,7 +89,7 @@ const getLastQuarter = () => {
             .format('DD/MM/YYYY'),
     };
 };
-const getDateRangeShortcuts = () => JSON.stringify([
+const getDateRangeShortcuts = () => [
     {
         label: 'Last 7 Days',
         rangeValue: {
@@ -100,10 +100,7 @@ const getDateRangeShortcuts = () => JSON.stringify([
     {
         label: 'Last Month',
         rangeValue: {
-            start: dayjs()
-                .subtract(1, 'month')
-                .startOf('month')
-                .format('YYYY-MM-DD'),
+            start: dayjs().subtract(1, 'month').startOf('month').format('YYYY-MM-DD'),
             end: dayjs().subtract(1, 'month').endOf('month').format('YYYY-MM-DD'),
         },
     },
@@ -121,7 +118,7 @@ const getDateRangeShortcuts = () => JSON.stringify([
             end: dayjs().add(1, 'year').endOf('year').format('YYYY-MM-DD'),
         },
     },
-]);
+];
 const NvFielddaterangeDocs = {
     component: 'nv-fielddaterange',
     subcomponents: ['nv-button', 'nv-iconbutton', 'nv-calendar'],
@@ -132,7 +129,7 @@ const NvFielddaterangeDocs = {
             args: {
                 startPlaceholder: 'Start date',
                 endPlaceholder: 'End date',
-                disabledDates: '[]',
+                disabledDates: [],
                 showWeekNumbers: true,
                 showActions: true,
                 dateFormat: 'YYYY-MM-DD',
@@ -152,7 +149,7 @@ const NvFielddaterangeDocs = {
                 numberOfCalendars: 2,
                 showWeekNumbers: true,
                 showActions: true,
-                shortcuts: JSON.stringify([
+                shortcuts: [
                     {
                         label: 'This Week',
                         rangeValue: {
@@ -173,7 +170,7 @@ const NvFielddaterangeDocs = {
                                 .format('DD/MM/YYYY'),
                         },
                     },
-                ]),
+                ],
                 shortcutsPlacement: 'bottom',
             },
             template: h("nv-fielddaterange", { "data-storybook-args": true }),
@@ -185,7 +182,7 @@ const NvFielddaterangeDocs = {
                 description: 'Calendar with shortcuts at the bottom',
                 dateFormat: 'DD/MM/YYYY',
                 showActions: true,
-                shortcuts: JSON.stringify([
+                shortcuts: [
                     {
                         label: 'This Month',
                         rangeValue: {
@@ -206,7 +203,7 @@ const NvFielddaterangeDocs = {
                                 .format('DD/MM/YYYY'),
                         },
                     },
-                ]),
+                ],
                 shortcutsPlacement: 'bottom',
             },
             template: h("nv-fielddaterange", { "data-storybook-args": true }),
@@ -218,7 +215,7 @@ const NvFielddaterangeDocs = {
                 description: 'Calendar with shortcuts on the right',
                 dateFormat: 'DD/MM/YYYY',
                 showActions: true,
-                shortcuts: JSON.stringify([
+                shortcuts: [
                     {
                         label: 'This Quarter',
                         rangeValue: getThisQuarter(),
@@ -227,7 +224,7 @@ const NvFielddaterangeDocs = {
                         label: 'Last Quarter',
                         rangeValue: getLastQuarter(),
                     },
-                ]),
+                ],
                 shortcutsPlacement: 'right',
             },
             template: h("nv-fielddaterange", { "data-storybook-args": true }),
@@ -238,11 +235,11 @@ const NvFielddaterangeDocs = {
                 label: 'Date Range with Disabled Dates',
                 description: 'Calendar with specific dates disabled',
                 dateFormat: 'DD/MM/YYYY',
-                disabledDates: JSON.stringify([
+                disabledDates: [
                     dayjs().add(1, 'day').format('DD/MM/YYYY'),
                     dayjs().add(3, 'day').format('DD/MM/YYYY'),
                     dayjs().add(5, 'day').format('DD/MM/YYYY'),
-                ]),
+                ],
             },
             template: h("nv-fielddaterange", { "data-storybook-args": true }),
         },

package/dist/collection/components/nv-fielddaterange/nv-fielddaterange.docs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-fielddaterange.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fielddaterange/nv-fielddaterange.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport dayjs from 'dayjs';\n\nconst toKebabCase = (str: string): string =>\n  str\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, '')\n    .replace(/^-+|-+$/g, '');\n\nconst formats = [\n  {\n    name: 'ISO 8601',\n    dateFormat: 'YYYY-MM-DD[T]HH:mm:ss[Z]',\n    value: {\n      start: '2025-03-15T00:00:00Z',\n      end: '2025-03-20T00:00:00Z',\n    },\n  },\n  {\n    name: 'YYYY-MM-DD',\n    dateFormat: 'YYYY-MM-DD',\n    value: {\n      start: '2025-03-15',\n      end: '2025-03-20',\n    },\n  },\n  {\n    name: 'DD/MM/YYYY',\n    dateFormat: 'DD/MM/YYYY',\n    value: {\n      start: '15/03/2025',\n      end: '20/03/2025',\n    },\n  },\n  {\n    name: 'MM/DD/YYYY',\n    dateFormat: 'MM/DD/YYYY',\n    value: {\n      start: '03/15/2025',\n      end: '03/20/2025',\n    },\n  },\n  {\n    name: 'Compact YYYYMMDD',\n    dateFormat: 'YYYYMMDD',\n    value: {\n      start: '20250315',\n      end: '20250320',\n    },\n  },\n  {\n    name: 'German DD.MM.YYYY',\n    dateFormat: 'DD.MM.YYYY',\n    value: {\n      start: '15.03.2025',\n      end: '20.03.2025',\n    },\n  },\n];\n\nconst formatStories = formats.map(format => ({\n  name: `Format${toKebabCase(format.name)}`,\n  args: {\n    label: `Date Range (${format.name})`,\n    description: `Using format: ${format.dateFormat}`,\n    startPlaceholder: format.value.start,\n    endPlaceholder: format.value.end,\n    dateFormat: format.dateFormat,\n    locale: format.name === 'German DD.MM.YYYY' ? 'de-DE' : 'en-US',\n    value: JSON.stringify(format.value),\n  },\n  template: <nv-fielddaterange data-storybook-args></nv-fielddaterange>,\n}));\n\nconst getThisQuarter = () => {\n  const currentMonth = dayjs().month();\n  const startMonth = currentMonth - (currentMonth % 3);\n  return {\n    start: dayjs().month(startMonth).startOf('month').format('DD/MM/YYYY'),\n    end: dayjs()\n      .month(startMonth + 2)\n      .endOf('month')\n      .format('DD/MM/YYYY'),\n  };\n};\n\nconst getLastQuarter = () => {\n  const currentMonth = dayjs().month();\n  const startMonth = currentMonth - (currentMonth % 3) - 3;\n  return {\n    start: dayjs().month(startMonth).startOf('month').format('DD/MM/YYYY'),\n    end: dayjs()\n      .month(startMonth + 2)\n      .endOf('month')\n      .format('DD/MM/YYYY'),\n  };\n};\n\nconst getDateRangeShortcuts = () =>\n  JSON.stringify([\n    {\n      label: 'Last 7 Days',\n      rangeValue: {\n        start: dayjs().subtract(7, 'days').format('YYYY-MM-DD'),\n        end: dayjs().format('YYYY-MM-DD'),\n      },\n    },\n    {\n      label: 'Last Month',\n      rangeValue: {\n        start: dayjs()\n          .subtract(1, 'month')\n          .startOf('month')\n          .format('YYYY-MM-DD'),\n        end: dayjs().subtract(1, 'month').endOf('month').format('YYYY-MM-DD'),\n      },\n    },\n    {\n      label: 'Next Month',\n      rangeValue: {\n        start: dayjs().add(1, 'month').startOf('month').format('YYYY-MM-DD'),\n        end: dayjs().add(1, 'month').endOf('month').format('YYYY-MM-DD'),\n      },\n    },\n    {\n      label: 'Next Year',\n      rangeValue: {\n        start: dayjs().add(1, 'year').startOf('year').format('YYYY-MM-DD'),\n        end: dayjs().add(1, 'year').endOf('year').format('YYYY-MM-DD'),\n      },\n    },\n  ]);\n\nconst NvFielddaterangeDocs: NovaDocs<Components.NvFielddaterange> = {\n  component: 'nv-fielddaterange',\n  subcomponents: ['nv-button', 'nv-iconbutton', 'nv-calendar'],\n  badge: 'beta',\n  stories: [\n    {\n      name: 'Default',\n      args: {\n        startPlaceholder: 'Start date',\n        endPlaceholder: 'End date',\n        disabledDates: '[]',\n        showWeekNumbers: true,\n        showActions: true,\n        dateFormat: 'YYYY-MM-DD',\n        shortcuts: getDateRangeShortcuts(),\n        shortcutsPlacement: 'bottom',\n        locale: 'en-BE',\n      },\n      template: <nv-fielddaterange data-storybook-args></nv-fielddaterange>,\n    },\n    {\n      name: 'WithCalendarOptions',\n      args: {\n        label: 'Date Range with Calendar Options',\n        description: 'Calendar with additional options',\n        dateFormat: 'DD/MM/YYYY',\n        firstDayOfWeek: 1,\n        numberOfCalendars: 2,\n        showWeekNumbers: true,\n        showActions: true,\n        shortcuts: JSON.stringify([\n          {\n            label: 'This Week',\n            rangeValue: {\n              start: dayjs().startOf('week').format('DD/MM/YYYY'),\n              end: dayjs().endOf('week').format('DD/MM/YYYY'),\n            },\n          },\n          {\n            label: 'Last Week',\n            rangeValue: {\n              start: dayjs()\n                .subtract(1, 'week')\n                .startOf('week')\n                .format('DD/MM/YYYY'),\n              end: dayjs()\n                .subtract(1, 'week')\n                .endOf('week')\n                .format('DD/MM/YYYY'),\n            },\n          },\n        ]),\n        shortcutsPlacement: 'bottom',\n      },\n      template: <nv-fielddaterange data-storybook-args></nv-fielddaterange>,\n    },\n    {\n      name: 'WithShortcutsBottom',\n      args: {\n        label: 'Date Range with Bottom Shortcuts',\n        description: 'Calendar with shortcuts at the bottom',\n        dateFormat: 'DD/MM/YYYY',\n        showActions: true,\n        shortcuts: JSON.stringify([\n          {\n            label: 'This Month',\n            rangeValue: {\n              start: dayjs().startOf('month').format('DD/MM/YYYY'),\n              end: dayjs().endOf('month').format('DD/MM/YYYY'),\n            },\n          },\n          {\n            label: 'Last Month',\n            rangeValue: {\n              start: dayjs()\n                .subtract(1, 'month')\n                .startOf('month')\n                .format('DD/MM/YYYY'),\n              end: dayjs()\n                .subtract(1, 'month')\n                .endOf('month')\n                .format('DD/MM/YYYY'),\n            },\n          },\n        ]),\n        shortcutsPlacement: 'bottom',\n      },\n      template: <nv-fielddaterange data-storybook-args></nv-fielddaterange>,\n    },\n    {\n      name: 'WithShortcutsRight',\n      args: {\n        label: 'Date Range with Right Shortcuts',\n        description: 'Calendar with shortcuts on the right',\n        dateFormat: 'DD/MM/YYYY',\n        showActions: true,\n        shortcuts: JSON.stringify([\n          {\n            label: 'This Quarter',\n            rangeValue: getThisQuarter(),\n          },\n          {\n            label: 'Last Quarter',\n            rangeValue: getLastQuarter(),\n          },\n        ]),\n        shortcutsPlacement: 'right',\n      },\n      template: <nv-fielddaterange data-storybook-args></nv-fielddaterange>,\n    },\n    {\n      name: 'WithDisabledDates',\n      args: {\n        label: 'Date Range with Disabled Dates',\n        description: 'Calendar with specific dates disabled',\n        dateFormat: 'DD/MM/YYYY',\n        disabledDates: JSON.stringify([\n          dayjs().add(1, 'day').format('DD/MM/YYYY'),\n          dayjs().add(3, 'day').format('DD/MM/YYYY'),\n          dayjs().add(5, 'day').format('DD/MM/YYYY'),\n        ]),\n      },\n      template: <nv-fielddaterange data-storybook-args></nv-fielddaterange>,\n    },\n    {\n      name: 'MultipleCalendars',\n      args: {\n        label: 'Multiple Calendars',\n        description: 'Display multiple calendars side by side',\n        dateFormat: 'DD/MM/YYYY',\n        numberOfCalendars: 3,\n        showWeekNumbers: true,\n      },\n      template: <nv-fielddaterange data-storybook-args></nv-fielddaterange>,\n    },\n    {\n      name: 'WithMinMax',\n      args: {\n        label: 'Date Range with Min/Max',\n        description: 'Select dates within range',\n        dateFormat: 'YYYY-MM-DD',\n        min: '2025-02-05',\n        max: '2025-02-20',\n      },\n      template: <nv-fielddaterange data-storybook-args></nv-fielddaterange>,\n    },\n    {\n      name: 'CulturalVariants',\n      args: {\n        numberOfCalendars: 2,\n        firstDayOfWeek: 1,\n        showWeekNumbers: true,\n      },\n      template: (\n        <div class=\"flex flex-wrap gap-4\">\n          <nv-fielddaterange\n            label=\"Date Range (en-BE)\"\n            locale=\"en-BE\"\n            dateFormat=\"YYYY-MM-DD\"\n            data-storybook-args\n          />\n          <nv-fielddaterange\n            label=\"Date Range (fr-BE)\"\n            locale=\"fr-BE\"\n            dateFormat=\"DD/MM/YYYY\"\n            data-storybook-args\n          />\n          <nv-fielddaterange\n            label=\"Date Range (de-DE)\"\n            locale=\"de-DE\"\n            dateFormat=\"DD.MM.YYYY\"\n            data-storybook-args\n          />\n        </div>\n      ),\n    },\n    ...formatStories,\n  ],\n};\n\nexport default NvFielddaterangeDocs;\n"]}
+{"version":3,"file":"nv-fielddaterange.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fielddaterange/nv-fielddaterange.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport dayjs from 'dayjs';\n\nconst toKebabCase = (str: string): string =>\n  str\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, '')\n    .replace(/^-+|-+$/g, '');\n\nconst formats = [\n  {\n    name: 'ISO 8601',\n    dateFormat: 'YYYY-MM-DD[T]HH:mm:ss[Z]',\n    value: {\n      start: '2025-03-15T00:00:00Z',\n      end: '2025-03-20T00:00:00Z',\n    },\n  },\n  {\n    name: 'YYYY-MM-DD',\n    dateFormat: 'YYYY-MM-DD',\n    value: {\n      start: '2025-03-15',\n      end: '2025-03-20',\n    },\n  },\n  {\n    name: 'DD/MM/YYYY',\n    dateFormat: 'DD/MM/YYYY',\n    value: {\n      start: '15/03/2025',\n      end: '20/03/2025',\n    },\n  },\n  {\n    name: 'MM/DD/YYYY',\n    dateFormat: 'MM/DD/YYYY',\n    value: {\n      start: '03/15/2025',\n      end: '03/20/2025',\n    },\n  },\n  {\n    name: 'Compact YYYYMMDD',\n    dateFormat: 'YYYYMMDD',\n    value: {\n      start: '20250315',\n      end: '20250320',\n    },\n  },\n  {\n    name: 'German DD.MM.YYYY',\n    dateFormat: 'DD.MM.YYYY',\n    value: {\n      start: '15.03.2025',\n      end: '20.03.2025',\n    },\n  },\n];\n\nconst formatStories = formats.map(format => ({\n  name: `Format${toKebabCase(format.name)}`,\n  args: {\n    label: `Date Range (${format.name})`,\n    description: `Using format: ${format.dateFormat}`,\n    startPlaceholder: format.value.start,\n    endPlaceholder: format.value.end,\n    dateFormat: format.dateFormat,\n    locale: format.name === 'German DD.MM.YYYY' ? 'de-DE' : 'en-US',\n    value: JSON.stringify(format.value),\n  },\n  template: <nv-fielddaterange data-storybook-args></nv-fielddaterange>,\n}));\n\nconst getThisQuarter = () => {\n  const currentMonth = dayjs().month();\n  const startMonth = currentMonth - (currentMonth % 3);\n  return {\n    start: dayjs().month(startMonth).startOf('month').format('DD/MM/YYYY'),\n    end: dayjs()\n      .month(startMonth + 2)\n      .endOf('month')\n      .format('DD/MM/YYYY'),\n  };\n};\n\nconst getLastQuarter = () => {\n  const currentMonth = dayjs().month();\n  const startMonth = currentMonth - (currentMonth % 3) - 3;\n  return {\n    start: dayjs().month(startMonth).startOf('month').format('DD/MM/YYYY'),\n    end: dayjs()\n      .month(startMonth + 2)\n      .endOf('month')\n      .format('DD/MM/YYYY'),\n  };\n};\n\nconst getDateRangeShortcuts = () => [\n  {\n    label: 'Last 7 Days',\n    rangeValue: {\n      start: dayjs().subtract(7, 'days').format('YYYY-MM-DD'),\n      end: dayjs().format('YYYY-MM-DD'),\n    },\n  },\n  {\n    label: 'Last Month',\n    rangeValue: {\n      start: dayjs().subtract(1, 'month').startOf('month').format('YYYY-MM-DD'),\n      end: dayjs().subtract(1, 'month').endOf('month').format('YYYY-MM-DD'),\n    },\n  },\n  {\n    label: 'Next Month',\n    rangeValue: {\n      start: dayjs().add(1, 'month').startOf('month').format('YYYY-MM-DD'),\n      end: dayjs().add(1, 'month').endOf('month').format('YYYY-MM-DD'),\n    },\n  },\n  {\n    label: 'Next Year',\n    rangeValue: {\n      start: dayjs().add(1, 'year').startOf('year').format('YYYY-MM-DD'),\n      end: dayjs().add(1, 'year').endOf('year').format('YYYY-MM-DD'),\n    },\n  },\n];\n\nconst NvFielddaterangeDocs: NovaDocs<Components.NvFielddaterange> = {\n  component: 'nv-fielddaterange',\n  subcomponents: ['nv-button', 'nv-iconbutton', 'nv-calendar'],\n  badge: 'beta',\n  stories: [\n    {\n      name: 'Default',\n      args: {\n        startPlaceholder: 'Start date',\n        endPlaceholder: 'End date',\n        disabledDates: [],\n        showWeekNumbers: true,\n        showActions: true,\n        dateFormat: 'YYYY-MM-DD',\n        shortcuts: getDateRangeShortcuts(),\n        shortcutsPlacement: 'bottom',\n        locale: 'en-BE',\n      },\n      template: <nv-fielddaterange data-storybook-args></nv-fielddaterange>,\n    },\n    {\n      name: 'WithCalendarOptions',\n      args: {\n        label: 'Date Range with Calendar Options',\n        description: 'Calendar with additional options',\n        dateFormat: 'DD/MM/YYYY',\n        firstDayOfWeek: 1,\n        numberOfCalendars: 2,\n        showWeekNumbers: true,\n        showActions: true,\n        shortcuts: [\n          {\n            label: 'This Week',\n            rangeValue: {\n              start: dayjs().startOf('week').format('DD/MM/YYYY'),\n              end: dayjs().endOf('week').format('DD/MM/YYYY'),\n            },\n          },\n          {\n            label: 'Last Week',\n            rangeValue: {\n              start: dayjs()\n                .subtract(1, 'week')\n                .startOf('week')\n                .format('DD/MM/YYYY'),\n              end: dayjs()\n                .subtract(1, 'week')\n                .endOf('week')\n                .format('DD/MM/YYYY'),\n            },\n          },\n        ],\n        shortcutsPlacement: 'bottom',\n      },\n      template: <nv-fielddaterange data-storybook-args></nv-fielddaterange>,\n    },\n    {\n      name: 'WithShortcutsBottom',\n      args: {\n        label: 'Date Range with Bottom Shortcuts',\n        description: 'Calendar with shortcuts at the bottom',\n        dateFormat: 'DD/MM/YYYY',\n        showActions: true,\n        shortcuts: [\n          {\n            label: 'This Month',\n            rangeValue: {\n              start: dayjs().startOf('month').format('DD/MM/YYYY'),\n              end: dayjs().endOf('month').format('DD/MM/YYYY'),\n            },\n          },\n          {\n            label: 'Last Month',\n            rangeValue: {\n              start: dayjs()\n                .subtract(1, 'month')\n                .startOf('month')\n                .format('DD/MM/YYYY'),\n              end: dayjs()\n                .subtract(1, 'month')\n                .endOf('month')\n                .format('DD/MM/YYYY'),\n            },\n          },\n        ],\n        shortcutsPlacement: 'bottom',\n      },\n      template: <nv-fielddaterange data-storybook-args></nv-fielddaterange>,\n    },\n    {\n      name: 'WithShortcutsRight',\n      args: {\n        label: 'Date Range with Right Shortcuts',\n        description: 'Calendar with shortcuts on the right',\n        dateFormat: 'DD/MM/YYYY',\n        showActions: true,\n        shortcuts: [\n          {\n            label: 'This Quarter',\n            rangeValue: getThisQuarter(),\n          },\n          {\n            label: 'Last Quarter',\n            rangeValue: getLastQuarter(),\n          },\n        ],\n        shortcutsPlacement: 'right',\n      },\n      template: <nv-fielddaterange data-storybook-args></nv-fielddaterange>,\n    },\n    {\n      name: 'WithDisabledDates',\n      args: {\n        label: 'Date Range with Disabled Dates',\n        description: 'Calendar with specific dates disabled',\n        dateFormat: 'DD/MM/YYYY',\n        disabledDates: [\n          dayjs().add(1, 'day').format('DD/MM/YYYY'),\n          dayjs().add(3, 'day').format('DD/MM/YYYY'),\n          dayjs().add(5, 'day').format('DD/MM/YYYY'),\n        ],\n      },\n      template: <nv-fielddaterange data-storybook-args></nv-fielddaterange>,\n    },\n    {\n      name: 'MultipleCalendars',\n      args: {\n        label: 'Multiple Calendars',\n        description: 'Display multiple calendars side by side',\n        dateFormat: 'DD/MM/YYYY',\n        numberOfCalendars: 3,\n        showWeekNumbers: true,\n      },\n      template: <nv-fielddaterange data-storybook-args></nv-fielddaterange>,\n    },\n    {\n      name: 'WithMinMax',\n      args: {\n        label: 'Date Range with Min/Max',\n        description: 'Select dates within range',\n        dateFormat: 'YYYY-MM-DD',\n        min: '2025-02-05',\n        max: '2025-02-20',\n      },\n      template: <nv-fielddaterange data-storybook-args></nv-fielddaterange>,\n    },\n    {\n      name: 'CulturalVariants',\n      args: {\n        numberOfCalendars: 2,\n        firstDayOfWeek: 1,\n        showWeekNumbers: true,\n      },\n      template: (\n        <div class=\"flex flex-wrap gap-4\">\n          <nv-fielddaterange\n            label=\"Date Range (en-BE)\"\n            locale=\"en-BE\"\n            dateFormat=\"YYYY-MM-DD\"\n            data-storybook-args\n          />\n          <nv-fielddaterange\n            label=\"Date Range (fr-BE)\"\n            locale=\"fr-BE\"\n            dateFormat=\"DD/MM/YYYY\"\n            data-storybook-args\n          />\n          <nv-fielddaterange\n            label=\"Date Range (de-DE)\"\n            locale=\"de-DE\"\n            dateFormat=\"DD.MM.YYYY\"\n            data-storybook-args\n          />\n        </div>\n      ),\n    },\n    ...formatStories,\n  ],\n};\n\nexport default NvFielddaterangeDocs;\n"]}

package/dist/collection/components/nv-fielddaterange/nv-fielddaterange.js

@@ -48,7 +48,7 @@ export class NvFielddaterange {
         /**
          * Autofocus the start input when the component is mounted.
          */
-        this.shouldAutoFocus = false;
+        this.autofocus = false;
         /**
          * The initial value of the date range (in string format).
          */
@@ -65,6 +65,10 @@ export class NvFielddaterange {
          * Controls the opening of the popover.
          */
         this.open = false;
+        /**
+         * Current calendar state to prevent unwanted navigation
+         */
+        this.calendarState = null;
         /**
          * First day of the week 0 = Sunday, 1 = Monday, etc.
          * @default 1
@@ -102,24 +106,9 @@ export class NvFielddaterange {
          */
         this.showActions = false;
         /**
-         * Custom actions to display in the footer
-         * JSON array of objects with the following properties:
-         * - label: string
-         * - onClick: function
-         * @default '[]'
-         */
-        this.shortcuts = '[]';
-        /**
-         * Show week numbers
-         * @default true
-         */
-        // eslint-disable-next-line @stencil-community/ban-default-true
-        this.showWeekNumbers = true;
-        /**
-         * Disabled dates ISO string array
-         * @default '[]'
+         * Allows the field to stretch and fill the entire width of its container.
          */
-        this.disabledDates = '[]';
+        this.fluid = false;
         /**
          * Closes the popover when a click is detected outside the component.
          * @param {MouseEvent} event - The mouse event
@@ -141,6 +130,17 @@ export class NvFielddaterange {
             const input = event.target;
             this.startValue = input.value;
             this.dateRangeChange.emit({ start: input.value, end: this.endValue });
+            // Temporarily enable navigation for keyboard input
+            if (this.calendarElement) {
+                this.calendarElement.removeAttribute('data-prevent-navigation');
+                this.updateCalendarValue();
+                // Restore navigation prevention after update
+                setTimeout(() => {
+                    if (this.calendarElement) {
+                        this.calendarElement.setAttribute('data-prevent-navigation', 'true');
+                    }
+                }, 100);
+            }
         };
         /**
          * Handles the input event on the end input element.
@@ -154,6 +154,17 @@ export class NvFielddaterange {
             const input = event.target;
             this.endValue = input.value;
             this.dateRangeChange.emit({ start: this.startValue, end: input.value });
+            // Temporarily enable navigation for keyboard input
+            if (this.calendarElement) {
+                this.calendarElement.removeAttribute('data-prevent-navigation');
+                this.updateCalendarValue();
+                // Restore navigation prevention after update
+                setTimeout(() => {
+                    if (this.calendarElement) {
+                        this.calendarElement.setAttribute('data-prevent-navigation', 'true');
+                    }
+                }, 100);
+            }
         };
         /**
          * Handles focus events on the input elements.
@@ -165,8 +176,17 @@ export class NvFielddaterange {
                 event.target.blur();
                 return;
             }
-            // Open the popover when an input is focused
+            // Enable navigation on focus
+            if (this.calendarElement) {
+                this.calendarElement.removeAttribute('data-prevent-navigation');
+            }
             this.open = true;
+            // Restore navigation prevention after opening
+            setTimeout(() => {
+                if (this.calendarElement) {
+                    this.calendarElement.setAttribute('data-prevent-navigation', 'true');
+                }
+            }, 300);
         };
         /**
          * Toggles the opening/closing of the popover.
@@ -187,11 +207,10 @@ export class NvFielddaterange {
      * @returns {string} The converted format for Inputmask
      */
     convertToInputmaskFormat(format) {
-        // Si le format n'est pas spécifié, utiliser le format par défaut YYYY-MM-DD
+        // If the format is not specified, use the default format YYYY-MM-DD
         if (!format) {
             return 'dd/mm/yyyy';
         }
-        // Conversion des formats
         const formatMap = {
             'YYYY-MM-DD': 'yyyy-mm-dd',
             'DD/MM/YYYY': 'dd/mm/yyyy',
@@ -201,6 +220,18 @@ export class NvFielddaterange {
         };
         return formatMap[format] || 'dd/mm/yyyy';
     }
+    /**
+     * Update the calendar's rangeValue property without forcing month change
+     */
+    updateCalendarValue() {
+        if (this.calendarElement && this.startValue && this.endValue) {
+            // Store the current calendar state
+            this.calendarState = {
+                start: this.startValue,
+                end: this.endValue,
+            };
+        }
+    }
     //#endregion METHODS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -213,6 +244,12 @@ export class NvFielddaterange {
                 const range = JSON.parse(this.value);
                 this.startValue = range.start || '';
                 this.endValue = range.end || '';
+                if (range.start && range.end) {
+                    this.calendarState = {
+                        start: range.start,
+                        end: range.end,
+                    };
+                }
             }
             catch (error) {
                 console.error('Invalid JSON for value:');
@@ -287,6 +324,7 @@ export class NvFielddaterange {
         if (start && end) {
             this.startValue = start;
             this.endValue = end;
+            this.calendarState = { start, end };
             this.dateRangeChange.emit({
                 start: this.startValue,
                 end: this.endValue,
@@ -302,6 +340,26 @@ export class NvFielddaterange {
     handleApplyDateRange() {
         this.open = false;
     }
+    /**
+     * Handles the reset event from the calendar's cancel button
+     * @param {CustomEvent} event - The event emitted by the calendar
+     */
+    handleDateReset(event) {
+        const isResetSingle = event.type === 'singleDateChange' && event.detail === '';
+        const isResetRange = event.type === 'rangeDateChange' &&
+            event.detail &&
+            event.detail.start === '' &&
+            event.detail.end === '';
+        if (isResetSingle || isResetRange) {
+            this.startValue = '';
+            this.endValue = '';
+            const inputs = this.el.querySelectorAll('.input-wrapper input');
+            inputs.forEach((input) => {
+                input.value = '';
+            });
+            this.dateRangeChange.emit({ start: '', end: '' });
+        }
+    }
     /**
      * Handles keyboard events.
      * @param {KeyboardEvent} event - The keyboard event
@@ -334,15 +392,10 @@ export class NvFielddaterange {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '965223047219ae767b07ccecb0a00580ea39c232' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (h("label", { key: '096d6a34148da30d61686024b5891e7e15cd92e2', htmlFor: this.startInputId }, h("slot", { key: 'ee6e84ef1927ad809e7dddb2f4ad5ef7380d0bca', name: "label" }, this.label))), h("nv-popover", { key: '1a0549e85ab73157b379fcbcee014a7d85be9752', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: 'd9fc4c8f379e3c1884867c87bcaa67b2da1c64ae', slot: "trigger", class: "input-wrapper" }, h("slot", { key: '4189696f3e877c19d4c24b09377b2ab0ce9aa437', name: "before-input" }), h("div", { key: '98025c8fc29121c736deb3042e961ef0eb1442fe', class: "input-container" }, h("slot", { key: '897481f836e33fd70a7c3b083a4e9b3db87637f2', name: "leading-input" }), h("div", { key: '788df58693fafaf8c78645b81d1b09a828138ccf', class: "range-inputs" }, h("input", { key: '7966b844668ca4cb02ac34886b62ee24cb7b1399', id: this.startInputId, type: "text", placeholder: this.startPlaceholder, name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.shouldAutoFocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus }), h("svg", { key: '67c0b68f0fb32ce122f9d4e5b1240440f3b649d0', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "icon icon-tabler icons-tabler-outline icon-tabler-arrows-move-horizontal" }, h("path", { key: 'eb68f32a768c1c48b51a45ddba3f85357b8045e6', stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), h("path", { key: 'b8ccaf592dc2d36719a8418800a736b06d1c1775', d: "M18 9l3 3l-3 3" }), h("path", { key: 'c4b8d8e8ffad9a339abcde63a9a0feb2ddc771d3', d: "M15 12h6" }), h("path", { key: '7a28c7086d7085163ff8d885acd7434b4e5ea69a', d: "M6 9l-3 3l3 3" }), h("path", { key: '39917978c25b13a270f0852818b31868f2034832', d: "M3 12h6" })), h("input", { key: 'aaad42e407d1fe8e31a7e7c153e2d4cd35d8d2df', id: this.endInputId, type: "text", placeholder: this.endPlaceholder, name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus })), h("nv-iconbutton", { key: '04701e7bdf80a869f8a5f519141ac99c0077c20b', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), h("slot", { key: 'cf1a48dcd20b4e363a746c9f26ecae8085e8ebbd', name: "after-input" })), h("div", { key: 'a36a223b6d5edd30bb9a4590d059caede5412b6a', slot: "content" }, h("nv-calendar", { key: '1ff22f214d648c4bb35455cf477529251c436e2d', dateFormat: this.dateFormat, rangeValue: this.startValue && this.endValue
-                ? JSON.stringify({
-                    start: this.startValue,
-                    end: this.endValue,
-                })
-                : '', firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, selectionType: "range" }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '780f82060de810eb394285f4799511d2223312a3', class: "description" }, h("slot", { key: '326cbf626387738b9997f3b4d452c50ea2b3d5b2', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '6043f611a60f14976b8572e975621fac57b18f89', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (h("slot", { name: "error-description" })) : (this.errorDescription))), h("slot", { key: '129fe5bcd6c5bd9449242dc6b4f0e1c90ae31082' })));
+        return (h(Host, { key: '152a588b815a0f3846c5b0c8b9da8d3dbc8f4768' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (h("label", { key: '786269a2bd4a50559cfad72c61f80797e4afc902', htmlFor: this.startInputId }, h("slot", { key: 'e1c6ed7d288d21889e1ebdfdf0595d4f43e551f7', name: "label" }, this.label))), h("nv-popover", { key: '228966569f5670f1b283c2e45f1c1057811e699d', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: 'ee39e8da7367bceb1fdcaf7f008d780652471e8e', slot: "trigger", class: "input-wrapper" }, h("slot", { key: '0555695d16ae919327771c586a291dc1767ed98f', name: "before-input" }), h("div", { key: '106aec6a9be06a03497f66407ea8038d5e4be899', class: "input-container" }, h("slot", { key: 'e448f8bacd3b383944f862b9dc1b7ea64feb565e', name: "leading-input" }), h("div", { key: '52ef48b4d76f063c65daa43865da607273ba6410', class: "range-inputs" }, h("input", { key: '899e309f7e100b7b6d12603b229aa4c429ddc1d2', id: this.startInputId, type: "text", placeholder: this.startPlaceholder, name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), h("svg", { key: '083bef93159b08aaf5c9f7637fbe459c2017e82f', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "icon icon-tabler icons-tabler-outline icon-tabler-arrows-move-horizontal" }, h("path", { key: '2946dbfae81e0b3cdd62f77bb928617d182ae5c1', stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), h("path", { key: 'afcf53514d22c9f8bb5d7d09294808f3ca053cc9', d: "M18 9l3 3l-3 3" }), h("path", { key: '53fe61cf1c1a5206f22d4c065292680f28fa3c59', d: "M15 12h6" }), h("path", { key: '1e138be2146498fa127922dcba9646e2e960a7e3', d: "M6 9l-3 3l3 3" }), h("path", { key: '3e324bf333bd69374fccac278386f6cc966fc3bd', d: "M3 12h6" })), h("input", { key: 'b7eeab7a9e0071c862528e8fa47c543d0295d331', id: this.endInputId, type: "text", placeholder: this.endPlaceholder, name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (h("nv-icon", { key: 'f2ab540736820a8fcf7f4dbb973bc3a16b14fa8d', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '91e75c515c4a44a3e499240e4d3c45b7a736429a', name: "circle-check", class: "validation", size: "md" })), h("nv-iconbutton", { key: 'a471cb1db59673f07ce493bae59e54ee8ecd8968', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), h("slot", { key: '375a0c1848445652c2ef5f20ded877223774f792', name: "after-input" })), h("div", { key: '7427c51a78cf38a979b9f7eb4e9a7f49a36279d5', slot: "content" }, h("nv-calendar", { key: '1f9ad9bed53d9496f17544c6381824490431c342', ref: el => (this.calendarElement = el), dateFormat: this.dateFormat, rangeValue: this.calendarState, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, selectionType: "range", "data-prevent-navigation": "true" }))), ((this.description && this.description.length > 0) ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'c964928de34f26fc82619601d0964079b061048f', class: "description" }, h("slot", { key: 'f409a5286e1c0ba16f36f062df3df5531dad6296', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '5e8a1b48da516f801372a59e379c5ade77f9761a', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (h("slot", { name: "error-description" })) : (this.errorDescription))), h("slot", { key: '68f37bddcd3208217a26eb230d1f8afdd3552eff' })));
     }
     static get is() { return "nv-fielddaterange"; }
     static get originalStyleUrls() {
@@ -630,7 +683,7 @@ export class NvFielddaterange {
                 "reflect": true,
                 "defaultValue": "false"
             },
-            "shouldAutoFocus": {
+            "autofocus": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -646,7 +699,7 @@ export class NvFielddaterange {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "should-auto-focus",
+                "attribute": "autofocus",
                 "reflect": true,
                 "defaultValue": "false"
             },
@@ -849,27 +902,26 @@ export class NvFielddaterange {
                 "defaultValue": "false"
             },
             "shortcuts": {
-                "type": "string",
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "HTMLNvCalendarElement['shortcuts']",
+                    "resolved": "{ label: string; singleValue?: string; rangeValue?: { start: string; end: string; }; }[]",
+                    "references": {
+                        "HTMLNvCalendarElement": {
+                            "location": "global",
+                            "id": "global::HTMLNvCalendarElement"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "'[]'"
-                        }],
-                    "text": "Custom actions to display in the footer\nJSON array of objects with the following properties:\n- label: string\n- onClick: function"
+                    "tags": [],
+                    "text": "Custom actions to display in the footer"
                 },
                 "getter": false,
-                "setter": false,
-                "attribute": "shortcuts",
-                "reflect": true,
-                "defaultValue": "'[]'"
+                "setter": false
             },
             "showWeekNumbers": {
                 "type": "boolean",
@@ -882,40 +934,55 @@ export class NvFielddaterange {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "true"
-                        }],
+                    "tags": [],
                     "text": "Show week numbers"
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "show-week-numbers",
-                "reflect": true,
-                "defaultValue": "true"
+                "reflect": true
             },
             "disabledDates": {
-                "type": "string",
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "Array<string>",
+                    "resolved": "string[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "'[]'"
-                        }],
+                    "tags": [],
                     "text": "Disabled dates ISO string array"
                 },
                 "getter": false,
+                "setter": false
+            },
+            "fluid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows the field to stretch and fill the entire width of its container."
+                },
+                "getter": false,
                 "setter": false,
-                "attribute": "disabled-dates",
+                "attribute": "fluid",
                 "reflect": true,
-                "defaultValue": "'[]'"
+                "defaultValue": "false"
             }
         };
     }
@@ -923,7 +990,8 @@ export class NvFielddaterange {
         return {
             "startValue": {},
             "endValue": {},
-            "open": {}
+            "open": {},
+            "calendarState": {}
         };
     }
     static get events() {
@@ -938,13 +1006,12 @@ export class NvFielddaterange {
                     "text": "Emits an event when the date range changes."
                 },
                 "complexType": {
-                    "original": "DateRange",
-                    "resolved": "DateRange",
+                    "original": "HTMLNvCalendarElementEventMap['rangeDateChange']",
+                    "resolved": "{ start: string; end: string; }",
                     "references": {
-                        "DateRange": {
-                            "location": "import",
-                            "path": "../../interfaces/dateRange",
-                            "id": "src/interfaces/dateRange.tsx::DateRange"
+                        "HTMLNvCalendarElementEventMap": {
+                            "location": "global",
+                            "id": "global::HTMLNvCalendarElementEventMap"
                         }
                     }
                 }
@@ -976,6 +1043,18 @@ export class NvFielddaterange {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "singleDateChange",
+                "method": "handleDateReset",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "rangeDateChange",
+                "method": "handleDateReset",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "keydown",
                 "method": "handleKeyDown",