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

package/dist/collection/components/nv-calendar/partials/day-cell.js

@@ -0,0 +1,31 @@
+import { h } from "@stencil/core";
+/**
+ * Renders a single day cell in the calendar grid
+ * @param {DayCellProps} props - Component properties
+ * @returns {JSX.Element} JSX element representing a day cell
+ */
+export const DayCell = props => {
+    const { date, dayOfMonth, isCurrentMonth, isSelected, isInRange, isStart, isEnd, isToday, isDisabled, onClick, } = props;
+    // Build CSS classes for the day cell
+    const dayClasses = [
+        'day',
+        isSelected ? 'selected' : '',
+        isStart ? 'range-start' : '',
+        isEnd ? 'range-end' : '',
+        isInRange ? 'in-range' : '',
+        isDisabled ? 'disabled' : '',
+        !isCurrentMonth ? 'outside-month' : '',
+        isToday ? 'is-today' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const handleClick = () => {
+        if (!isDisabled && onClick) {
+            onClick(date);
+        }
+    };
+    return (
+    // eslint-disable-next-line react/jsx-no-bind
+    h("div", { class: dayClasses, onClick: handleClick, "aria-disabled": isDisabled }, dayOfMonth));
+};
+//# sourceMappingURL=day-cell.js.map

package/dist/collection/components/nv-calendar/partials/day-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"day-cell.js","sourceRoot":"","sources":["../../../../src/components/nv-calendar/partials/day-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AA8BvD;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAsC,KAAK,CAAC,EAAE;IAChE,MAAM,EACJ,IAAI,EACJ,UAAU,EACV,cAAc,EACd,UAAU,EACV,SAAS,EACT,OAAO,EACP,KAAK,EACL,OAAO,EACP,UAAU,EACV,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,qCAAqC;IACrC,MAAM,UAAU,GAAG;QACjB,KAAK;QACL,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;QAC5B,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;QAC5B,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;QACxB,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;QAC3B,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;QAC5B,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;QACtC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;KAC1B;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,CAAC,UAAU,IAAI,OAAO,EAAE,CAAC;YAC3B,OAAO,CAAC,IAAI,CAAC,CAAC;QAChB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO;IACL,6CAA6C;IAC7C,WAAK,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,mBAAiB,UAAU,IACpE,UAAU,CACP,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\n/**\n * Props for the DayCell component\n */\ninterface DayCellProps {\n  /** Date object for this cell */\n  date: Date;\n  /** Day number (1-31) */\n  dayOfMonth: number;\n  /** Whether this day belongs to the current month */\n  isCurrentMonth: boolean;\n  /** Whether this day is selected (single mode) */\n  isSelected: boolean;\n  /** Whether this day is in a selected range */\n  isInRange: boolean;\n  /** Whether this day is the start of a range */\n  isStart: boolean;\n  /** Whether this day is the end of a range */\n  isEnd: boolean;\n  /** Whether this day is today */\n  isToday: boolean;\n  /** Whether this day is disabled */\n  isDisabled: boolean;\n  /** Selection type for conditional styling */\n  selectionType: 'single' | 'range';\n  /** Click handler for day selection */\n  onClick?: (date: Date) => void;\n}\n\n/**\n * Renders a single day cell in the calendar grid\n * @param {DayCellProps} props - Component properties\n * @returns {JSX.Element} JSX element representing a day cell\n */\nexport const DayCell: FunctionalComponent<DayCellProps> = props => {\n  const {\n    date,\n    dayOfMonth,\n    isCurrentMonth,\n    isSelected,\n    isInRange,\n    isStart,\n    isEnd,\n    isToday,\n    isDisabled,\n    onClick,\n  } = props;\n\n  // Build CSS classes for the day cell\n  const dayClasses = [\n    'day',\n    isSelected ? 'selected' : '',\n    isStart ? 'range-start' : '',\n    isEnd ? 'range-end' : '',\n    isInRange ? 'in-range' : '',\n    isDisabled ? 'disabled' : '',\n    !isCurrentMonth ? 'outside-month' : '',\n    isToday ? 'is-today' : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const handleClick = () => {\n    if (!isDisabled && onClick) {\n      onClick(date);\n    }\n  };\n\n  return (\n    // eslint-disable-next-line react/jsx-no-bind\n    <div class={dayClasses} onClick={handleClick} aria-disabled={isDisabled}>\n      {dayOfMonth}\n    </div>\n  );\n};\n"]}

package/dist/collection/components/nv-calendar/partials/index.js

@@ -0,0 +1,7 @@
+export { DayCell } from './day-cell';
+export { CalendarActions } from './calendar-actions';
+export { WeekNumbers } from './week-numbers';
+export { CalendarShortcuts } from './calendar-shortcuts';
+export { CalendarHeader } from './calendar-header';
+export { CalendarGrid } from './calendar-grid';
+//# sourceMappingURL=index.js.map

package/dist/collection/components/nv-calendar/partials/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/nv-calendar/partials/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { DayCell } from './day-cell';\nexport { CalendarActions } from './calendar-actions';\nexport { WeekNumbers } from './week-numbers';\nexport { CalendarShortcuts } from './calendar-shortcuts';\nexport { CalendarHeader } from './calendar-header';\nexport { CalendarGrid } from './calendar-grid';\n"]}

package/dist/collection/components/nv-calendar/partials/week-numbers.js

@@ -0,0 +1,36 @@
+import { h } from "@stencil/core";
+import { getWeekNumber } from "../nv-calendar.utils";
+/**
+ * Renders the week numbers column for the calendar
+ * @param {WeekNumbersProps} props - Component properties
+ * @returns {JSX.Element} JSX element representing the week numbers
+ */
+export const WeekNumbers = props => {
+    const { weeks, localizedWeekText, selectionType, onWeekSelect, calendarIndex, } = props;
+    /**
+     * Handles click on a week number for range selection
+     * @param {Array<WeekData>} week - Week data
+     */
+    const handleWeekClick = (week) => {
+        if (selectionType === 'range') {
+            const dates = week.map(d => d.date);
+            onWeekSelect(dates, calendarIndex);
+        }
+    };
+    /**
+     * Creates a click handler for a specific week
+     * @param {Array<WeekData>} week - Week data
+     * @returns {() => void} Click handler function
+     */
+    const createWeekHandler = (week) => {
+        return () => handleWeekClick(week);
+    };
+    return (h("div", { class: "week-numbers" }, h("div", { class: "week-header" }, localizedWeekText), weeks.map((week, weekIndex) => {
+        var _a;
+        const firstDayWithDate = ((_a = week.find(d => d.date)) === null || _a === void 0 ? void 0 : _a.date) || new Date();
+        const weekNumber = getWeekNumber(firstDayWithDate);
+        const isClickable = selectionType === 'range';
+        return (h("div", { class: `week-number ${isClickable ? 'clickable' : ''}`, onClick: createWeekHandler(week), key: `week-${weekIndex}`, role: isClickable ? 'button' : undefined, tabindex: isClickable ? 0 : undefined }, weekNumber));
+    })));
+};
+//# sourceMappingURL=week-numbers.js.map

package/dist/collection/components/nv-calendar/partials/week-numbers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"week-numbers.js","sourceRoot":"","sources":["../../../../src/components/nv-calendar/partials/week-numbers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AA0BrD;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAA0C,KAAK,CAAC,EAAE;IACxE,MAAM,EACJ,KAAK,EACL,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,aAAa,GACd,GAAG,KAAK,CAAC;IAEV;;;OAGG;IACH,MAAM,eAAe,GAAG,CAAC,IAAqB,EAAE,EAAE;QAChD,IAAI,aAAa,KAAK,OAAO,EAAE,CAAC;YAC9B,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;YACpC,YAAY,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,CAAC;IAEF;;;;OAIG;IACH,MAAM,iBAAiB,GAAG,CAAC,IAAqB,EAAE,EAAE;QAClD,OAAO,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,OAAO,CACL,WAAK,KAAK,EAAC,cAAc;QACvB,WAAK,KAAK,EAAC,aAAa,IAAE,iBAAiB,CAAO;QACjD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE;;YAC7B,MAAM,gBAAgB,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,0CAAE,IAAI,KAAI,IAAI,IAAI,EAAE,CAAC;YACpE,MAAM,UAAU,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC;YACnD,MAAM,WAAW,GAAG,aAAa,KAAK,OAAO,CAAC;YAE9C,OAAO,CACL,WACE,KAAK,EAAE,eAAe,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,EACtD,OAAO,EAAE,iBAAiB,CAAC,IAAI,CAAC,EAChC,GAAG,EAAE,QAAQ,SAAS,EAAE,EACxB,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACxC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,IAEpC,UAAU,CACP,CACP,CAAC;QACJ,CAAC,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { getWeekNumber } from '../nv-calendar.utils';\n\n/**\n * Week data structure\n */\ninterface WeekData {\n  /** Date object for this day */\n  date: Date;\n}\n\n/**\n * Props for the WeekNumbers component\n */\ninterface WeekNumbersProps {\n  /** Array of weeks with their days */\n  weeks: Array<Array<WeekData>>;\n  /** Localized text for \"week\" abbreviation */\n  localizedWeekText: string;\n  /** Current selection type */\n  selectionType: 'single' | 'range';\n  /** Handler for week selection in range mode */\n  onWeekSelect: (dates: Date[], calendarIndex: number) => void;\n  /** Calendar index for multi-calendar setups */\n  calendarIndex: number;\n}\n\n/**\n * Renders the week numbers column for the calendar\n * @param {WeekNumbersProps} props - Component properties\n * @returns {JSX.Element} JSX element representing the week numbers\n */\nexport const WeekNumbers: FunctionalComponent<WeekNumbersProps> = props => {\n  const {\n    weeks,\n    localizedWeekText,\n    selectionType,\n    onWeekSelect,\n    calendarIndex,\n  } = props;\n\n  /**\n   * Handles click on a week number for range selection\n   * @param {Array<WeekData>} week - Week data\n   */\n  const handleWeekClick = (week: Array<WeekData>) => {\n    if (selectionType === 'range') {\n      const dates = week.map(d => d.date);\n      onWeekSelect(dates, calendarIndex);\n    }\n  };\n\n  /**\n   * Creates a click handler for a specific week\n   * @param {Array<WeekData>} week - Week data\n   * @returns {() => void} Click handler function\n   */\n  const createWeekHandler = (week: Array<WeekData>) => {\n    return () => handleWeekClick(week);\n  };\n\n  return (\n    <div class=\"week-numbers\">\n      <div class=\"week-header\">{localizedWeekText}</div>\n      {weeks.map((week, weekIndex) => {\n        const firstDayWithDate = week.find(d => d.date)?.date || new Date();\n        const weekNumber = getWeekNumber(firstDayWithDate);\n        const isClickable = selectionType === 'range';\n\n        return (\n          <div\n            class={`week-number ${isClickable ? 'clickable' : ''}`}\n            onClick={createWeekHandler(week)}\n            key={`week-${weekIndex}`}\n            role={isClickable ? 'button' : undefined}\n            tabindex={isClickable ? 0 : undefined}\n          >\n            {weekNumber}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"]}