@six-group/ui-library 0.0.0-insider.777a428 → 0.0.0-insider.77a508a

package/dist/collection/components/six-date/calendar-grid.js

@@ -0,0 +1,30 @@
+import { fromDate, today } from "./iso-date";
+import { eachDayOfInterval, endOfMonth, endOfWeek, formatDate, startOfWeek } from "date-fns";
+export function createCalendarGrid(options) {
+    const firstDayOfMonth = new Date(options.year, options.month - 1, 1);
+    const daysInCalendarMonth = eachDayOfInterval({
+        start: startOfWeek(firstDayOfMonth, { weekStartsOn: 1 }),
+        end: endOfWeek(endOfMonth(firstDayOfMonth), { weekStartsOn: 1 }),
+    });
+    const calendarGrid = [];
+    for (const day of daysInCalendarMonth) {
+        const isoDate = fromDate(day);
+        const isInMonth = day.getMonth() === options.month - 1;
+        const isBeforeMinDate = options.minDate == null ? false : isoDate < options.minDate;
+        const isAfterMaxDate = options.maxDate == null ? false : isoDate > options.maxDate;
+        const isDateAllowed = options.allowedDates === undefined ? true : options.allowedDates(isoDate);
+        const isDisabled = !isDateAllowed || isBeforeMinDate || isAfterMaxDate;
+        const isToday = isoDate === today();
+        calendarGrid.push({
+            date: fromDate(day),
+            label: day.getDate().toString(),
+            display: formatDate(day, options.dateFormat),
+            disabled: isDisabled,
+            outdated: !isInMonth,
+            selected: options.selected === isoDate,
+            today: isToday,
+        });
+    }
+    return calendarGrid;
+}
+//# sourceMappingURL=calendar-grid.js.map

package/dist/collection/components/six-date/calendar-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-grid.js","sourceRoot":"","sources":["../../../src/components/six-date/calendar-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAW,KAAK,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAsB7F,MAAM,UAAU,kBAAkB,CAAC,OAA4B;IAC7D,MAAM,eAAe,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;IACrE,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;QAC5C,KAAK,EAAE,WAAW,CAAC,eAAe,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC;QACxD,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC;KACjE,CAAC,CAAC;IACH,MAAM,YAAY,GAAmB,EAAE,CAAC;IAExC,KAAK,MAAM,GAAG,IAAI,mBAAmB,EAAE,CAAC;QACtC,MAAM,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC9B,MAAM,SAAS,GAAG,GAAG,CAAC,QAAQ,EAAE,KAAK,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC;QACvD,MAAM,eAAe,GAAG,OAAO,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;QACpF,MAAM,cAAc,GAAG,OAAO,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;QACnF,MAAM,aAAa,GAAG,OAAO,CAAC,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAChG,MAAM,UAAU,GAAG,CAAC,aAAa,IAAI,eAAe,IAAI,cAAc,CAAC;QACvE,MAAM,OAAO,GAAG,OAAO,KAAK,KAAK,EAAE,CAAC;QACpC,YAAY,CAAC,IAAI,CAAC;YAChB,IAAI,EAAE,QAAQ,CAAC,GAAG,CAAC;YACnB,KAAK,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE;YAC/B,OAAO,EAAE,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,UAAU,CAAC;YAC5C,QAAQ,EAAE,UAAU;YACpB,QAAQ,EAAE,CAAC,SAAS;YACpB,QAAQ,EAAE,OAAO,CAAC,QAAQ,KAAK,OAAO;YACtC,KAAK,EAAE,OAAO;SACf,CAAC,CAAC;IACL,CAAC;IAED,OAAO,YAAY,CAAC;AACtB,CAAC","sourcesContent":["import { fromDate, IsoDate, today } from './iso-date';\nimport { eachDayOfInterval, endOfMonth, endOfWeek, formatDate, startOfWeek } from 'date-fns';\n\nexport interface CalendarCell {\n  date: IsoDate;\n  label: string;\n  display: string;\n  disabled: boolean;\n  outdated: boolean;\n  selected: boolean;\n  today: boolean;\n}\n\nexport interface CalendarGridOptions {\n  year: number;\n  month: number;\n  selected?: IsoDate;\n  minDate?: IsoDate;\n  maxDate?: IsoDate;\n  dateFormat: string;\n  allowedDates?: (date: IsoDate) => boolean;\n}\n\nexport function createCalendarGrid(options: CalendarGridOptions): CalendarCell[] {\n  const firstDayOfMonth = new Date(options.year, options.month - 1, 1);\n  const daysInCalendarMonth = eachDayOfInterval({\n    start: startOfWeek(firstDayOfMonth, { weekStartsOn: 1 }),\n    end: endOfWeek(endOfMonth(firstDayOfMonth), { weekStartsOn: 1 }),\n  });\n  const calendarGrid: CalendarCell[] = [];\n\n  for (const day of daysInCalendarMonth) {\n    const isoDate = fromDate(day);\n    const isInMonth = day.getMonth() === options.month - 1;\n    const isBeforeMinDate = options.minDate == null ? false : isoDate < options.minDate;\n    const isAfterMaxDate = options.maxDate == null ? false : isoDate > options.maxDate;\n    const isDateAllowed = options.allowedDates === undefined ? true : options.allowedDates(isoDate);\n    const isDisabled = !isDateAllowed || isBeforeMinDate || isAfterMaxDate;\n    const isToday = isoDate === today();\n    calendarGrid.push({\n      date: fromDate(day),\n      label: day.getDate().toString(),\n      display: formatDate(day, options.dateFormat),\n      disabled: isDisabled,\n      outdated: !isInMonth,\n      selected: options.selected === isoDate,\n      today: isToday,\n    });\n  }\n\n  return calendarGrid;\n}\n"]}

package/dist/collection/components/six-date/components/day-selection.js

@@ -0,0 +1,16 @@
+import { h } from "@stencil/core";
+import { translateWeekday } from "../translations";
+export const DaySelection = (props) => {
+    return (h("div", { class: "day-selection" }, [1, 2, 3, 4, 5, 6, 7].map((day) => (h("div", { class: "cell--header" }, translateWeekday(day, props.language)))), props.calendarGrid.map((day) => (h("div", { "data-date": day.date, onClick: () => {
+            if (!day.disabled || day.outdated) {
+                props.dayClicked(day.date);
+            }
+        }, class: {
+            cell: true,
+            'cell--today': day.today,
+            'cell--selected': day.selected,
+            'cell--outdated': day.outdated,
+            'cell--disabled': day.disabled,
+        } }, h("span", { class: "label" }, day.label))))));
+};
+//# sourceMappingURL=day-selection.js.map

package/dist/collection/components/six-date/components/day-selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"day-selection.js","sourceRoot":"","sources":["../../../../src/components/six-date/components/day-selection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAInD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAI5B,EAAE,EAAE;IACH,OAAO,CACL,WAAK,KAAK,EAAC,eAAe;QACvB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAClC,WAAK,KAAK,EAAC,cAAc,IAAE,gBAAgB,CAAC,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAO,CACxE,CAAC;QACD,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAC/B,wBACa,GAAG,CAAC,IAAI,EACnB,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,CAAC,GAAG,CAAC,QAAQ,IAAI,GAAG,CAAC,QAAQ,EAAE,CAAC;oBAClC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBAC7B,CAAC;YACH,CAAC,EACD,KAAK,EAAE;gBACL,IAAI,EAAE,IAAI;gBACV,aAAa,EAAE,GAAG,CAAC,KAAK;gBACxB,gBAAgB,EAAE,GAAG,CAAC,QAAQ;gBAC9B,gBAAgB,EAAE,GAAG,CAAC,QAAQ;gBAC9B,gBAAgB,EAAE,GAAG,CAAC,QAAQ;aAC/B;YAED,YAAM,KAAK,EAAC,OAAO,IAAE,GAAG,CAAC,KAAK,CAAQ,CAClC,CACP,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { Language } from '../../../utils/error-messages';\nimport { translateWeekday } from '../translations';\nimport { CalendarCell } from '../calendar-grid';\nimport { IsoDate } from '../iso-date';\n\nexport const DaySelection = (props: {\n  language: Language;\n  calendarGrid: CalendarCell[];\n  dayClicked: (cell: IsoDate) => void;\n}) => {\n  return (\n    <div class=\"day-selection\">\n      {[1, 2, 3, 4, 5, 6, 7].map((day) => (\n        <div class=\"cell--header\">{translateWeekday(day, props.language)}</div>\n      ))}\n      {props.calendarGrid.map((day) => (\n        <div\n          data-date={day.date}\n          onClick={() => {\n            if (!day.disabled || day.outdated) {\n              props.dayClicked(day.date);\n            }\n          }}\n          class={{\n            cell: true,\n            'cell--today': day.today,\n            'cell--selected': day.selected,\n            'cell--outdated': day.outdated,\n            'cell--disabled': day.disabled,\n          }}\n        >\n          <span class=\"label\">{day.label}</span>\n        </div>\n      ))}\n    </div>\n  );\n};\n"]}

package/dist/collection/components/six-date/components/month-selection.js

@@ -0,0 +1,17 @@
+import { h } from "@stencil/core";
+import { getMonth, today } from "../iso-date";
+import { translateMonthShort } from "../translations";
+export const MonthSelection = (props) => {
+    const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((month) => ({
+        month,
+        label: translateMonthShort(month, props.language),
+        today: getMonth(today()) === month,
+        selected: props.selected === '' ? false : getMonth(props.selected) === month,
+    }));
+    return (h("div", { class: "month-selection" }, months.map((month) => (h("div", { class: {
+            cell: true,
+            'cell--today': month.today,
+            'cell--selected': month.selected,
+        }, onClick: () => props.monthClicked(month.month) }, h("span", { class: "label" }, month.label))))));
+};
+//# sourceMappingURL=month-selection.js.map

package/dist/collection/components/six-date/components/month-selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"month-selection.js","sourceRoot":"","sources":["../../../../src/components/six-date/components/month-selection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAW,KAAK,EAAE,MAAM,aAAa,CAAC;AAEvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAI9B,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACrE,KAAK;QACL,KAAK,EAAE,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC;QACjD,KAAK,EAAE,QAAQ,CAAC,KAAK,EAAE,CAAC,KAAK,KAAK;QAClC,QAAQ,EAAE,KAAK,CAAC,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,KAAK;KAC7E,CAAC,CAAC,CAAC;IAEJ,OAAO,CACL,WAAK,KAAK,EAAC,iBAAiB,IACzB,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,WACE,KAAK,EAAE;YACL,IAAI,EAAE,IAAI;YACV,aAAa,EAAE,KAAK,CAAC,KAAK;YAC1B,gBAAgB,EAAE,KAAK,CAAC,QAAQ;SACjC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC;QAE9C,YAAM,KAAK,EAAC,OAAO,IAAE,KAAK,CAAC,KAAK,CAAQ,CACpC,CACP,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { getMonth, IsoDate, today } from '../iso-date';\nimport { Language } from '../../../utils/error-messages';\nimport { translateMonthShort } from '../translations';\n\nexport const MonthSelection = (props: {\n  language: Language;\n  selected: IsoDate | '';\n  monthClicked: (month: number) => void;\n}) => {\n  const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((month) => ({\n    month,\n    label: translateMonthShort(month, props.language),\n    today: getMonth(today()) === month,\n    selected: props.selected === '' ? false : getMonth(props.selected) === month,\n  }));\n\n  return (\n    <div class=\"month-selection\">\n      {months.map((month) => (\n        <div\n          class={{\n            cell: true,\n            'cell--today': month.today,\n            'cell--selected': month.selected,\n          }}\n          onClick={() => props.monthClicked(month.month)}\n        >\n          <span class=\"label\">{month.label}</span>\n        </div>\n      ))}\n    </div>\n  );\n};\n"]}

package/dist/collection/components/six-date/components/year-selection.js

@@ -0,0 +1,16 @@
+import { h } from "@stencil/core";
+import { getYear, today } from "../iso-date";
+export const YearSelection = (props) => {
+    const years = Array.from({ length: props.yearCount }, (_, i) => props.pointerYear - 12 + i);
+    const yearsToDisplay = years.map((year) => ({
+        year: year,
+        today: getYear(today()) === year,
+        selected: props.selected === '' ? false : getYear(props.selected) === year,
+    }));
+    return (h("div", { class: "year-selection" }, yearsToDisplay.map((year) => (h("div", { class: {
+            cell: true,
+            'cell--today': year.today,
+            'cell--selected': year.selected,
+        }, onClick: () => props.yearClicked(year.year) }, h("span", { class: "label" }, year.year))))));
+};
+//# sourceMappingURL=year-selection.js.map

package/dist/collection/components/six-date/components/year-selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"year-selection.js","sourceRoot":"","sources":["../../../../src/components/six-date/components/year-selection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,OAAO,EAAW,KAAK,EAAE,MAAM,aAAa,CAAC;AAEtD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAK7B,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;IAC5F,MAAM,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAC1C,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI;QAChC,QAAQ,EAAE,KAAK,CAAC,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,IAAI;KAC3E,CAAC,CAAC,CAAC;IAEJ,OAAO,CACL,WAAK,KAAK,EAAC,gBAAgB,IACxB,cAAc,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC5B,WACE,KAAK,EAAE;YACL,IAAI,EAAE,IAAI;YACV,aAAa,EAAE,IAAI,CAAC,KAAK;YACzB,gBAAgB,EAAE,IAAI,CAAC,QAAQ;SAChC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;QAE3C,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,IAAI,CAAQ,CAClC,CACP,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { getYear, IsoDate, today } from '../iso-date';\n\nexport const YearSelection = (props: {\n  selected: IsoDate | '';\n  pointerYear: number;\n  yearCount: number;\n  yearClicked: (year: number) => void;\n}) => {\n  const years = Array.from({ length: props.yearCount }, (_, i) => props.pointerYear - 12 + i);\n  const yearsToDisplay = years.map((year) => ({\n    year: year,\n    today: getYear(today()) === year,\n    selected: props.selected === '' ? false : getYear(props.selected) === year,\n  }));\n\n  return (\n    <div class=\"year-selection\">\n      {yearsToDisplay.map((year) => (\n        <div\n          class={{\n            cell: true,\n            'cell--today': year.today,\n            'cell--selected': year.selected,\n          }}\n          onClick={() => props.yearClicked(year.year)}\n        >\n          <span class=\"label\">{year.year}</span>\n        </div>\n      ))}\n    </div>\n  );\n};\n"]}

package/dist/collection/components/six-date/iso-date.js

@@ -0,0 +1,95 @@
+import * as fns from "date-fns";
+/**
+ * Validates a date string against a given format and returns an IsoDate if valid.
+ *
+ * Example format patterns for year, month, and day:
+ * - Year: "yyyy" (e.g., "2021")
+ * - Month: "MM" (e.g., "01" for January, "12" for December)
+ * - Day: "dd" (e.g., "08" for the 8th day of the month)
+ *
+ * Common format examples:
+ * - "yyyy-MM-dd" (e.g., "2021-01-08")
+ * - "dd.MM.yyyy" (e.g., "08.01.2021")
+ * - "MM/dd/yyyy" (e.g., "01/08/2021")
+ *
+ * @param dateString - The date string to validate.
+ * @param format - The expected format of the date string (e.g., "yyyy-MM-dd").
+ * @returns An IsoDate if the date string is valid, otherwise undefined.
+ */
+export function fromFormattedString(dateString, format) {
+    const date = fns.parse(dateString, format, new Date());
+    if (fns.isValid(date) && fns.format(date, format) === dateString) {
+        return fromDate(date);
+    }
+    return undefined;
+}
+/**
+ * Formats a given ISO date string into a specified format.
+ *
+ * Example format patterns for year, month, and day:
+ * - Year: "yyyy" (e.g., "2021")
+ * - Month: "MM" (e.g., "01" for January, "12" for December)
+ * - Day: "dd" (e.g., "08" for the 8th day of the month)
+ *
+ * Common format examples:
+ * - "yyyy-MM-dd" (e.g., "2021-01-08")
+ * - "dd.MM.yyyy" (e.g., "08.01.2021")
+ * - "MM/dd/yyyy" (e.g., "01/08/2021")
+ *
+ * @param {IsoDate} isoDate - The ISO date string to be formatted.
+ * @param {string} format - The desired date format string.
+ * @return {string} A string representing the formatted date.
+ */
+export function formatDate(isoDate, format) {
+    return fns.format(fns.parseISO(isoDate), format);
+}
+export function fromDate(date) {
+    return fns.formatISO(date, { representation: 'date' });
+}
+export function today() {
+    return fromDate(new Date());
+}
+export function isValidIsoDate(isoDate) {
+    return fns.isValid(fns.parseISO(isoDate));
+}
+export function getDaysInMonth(year, month) {
+    return fns.getDaysInMonth(new Date(year, month - 1));
+}
+export function getMonth(isoDate) {
+    return toPointerDate(isoDate).month;
+}
+export function getYear(isoDate) {
+    return toPointerDate(isoDate).year;
+}
+export function toPointerDate(isoDate) {
+    if (!isValidIsoDate(isoDate)) {
+        throw new Error(`Invalid ISO date: ${isoDate}`);
+    }
+    return {
+        year: parseInt(isoDate.slice(0, 4), 10),
+        month: parseInt(isoDate.slice(5, 7), 10),
+        day: parseInt(isoDate.slice(8), 10),
+    };
+}
+export function todayAsPointerDate() {
+    const today = new Date();
+    return {
+        year: today.getFullYear(),
+        month: today.getMonth() + 1,
+        day: today.getDate(),
+    };
+}
+export function cleanupValue(value) {
+    if (value === '') {
+        return { value, pointerDate: todayAsPointerDate() };
+    }
+    if (typeof value !== 'string' || !isValidIsoDate(value)) {
+        return {
+            value: '',
+            pointerDate: todayAsPointerDate(),
+            warning: `The specified value '${value}' does not conform to the required format, "yyyy-MM-dd".`,
+        };
+    }
+    return { value, pointerDate: toPointerDate(value) };
+}
+//# sourceMappingURL=iso-date.js.map

package/dist/collection/components/six-date/iso-date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iso-date.js","sourceRoot":"","sources":["../../../src/components/six-date/iso-date.ts"],"names":[],"mappings":"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","sourcesContent":["import * as fns from 'date-fns';\n\ntype Year = `${number}${number}${number}${number}`;\ntype Month = `${number}${number}`;\ntype Day = `${number}${number}`;\n\n/**\n * Represent an iso date string like `2021-01-08`.\n */\nexport type IsoDate = `${Year}-${Month}-${Day}`;\n\nexport interface PointerDate {\n  year: number;\n  month: number;\n  day: number;\n}\n\n/**\n * Validates a date string against a given format and returns an IsoDate if valid.\n *\n * Example format patterns for year, month, and day:\n * - Year: \"yyyy\" (e.g., \"2021\")\n * - Month: \"MM\" (e.g., \"01\" for January, \"12\" for December)\n * - Day: \"dd\" (e.g., \"08\" for the 8th day of the month)\n *\n * Common format examples:\n * - \"yyyy-MM-dd\" (e.g., \"2021-01-08\")\n * - \"dd.MM.yyyy\" (e.g., \"08.01.2021\")\n * - \"MM/dd/yyyy\" (e.g., \"01/08/2021\")\n *\n * @param dateString - The date string to validate.\n * @param format - The expected format of the date string (e.g., \"yyyy-MM-dd\").\n * @returns An IsoDate if the date string is valid, otherwise undefined.\n */\nexport function fromFormattedString(dateString: string, format: string): IsoDate | undefined {\n  const date = fns.parse(dateString, format, new Date());\n\n  if (fns.isValid(date) && fns.format(date, format) === dateString) {\n    return fromDate(date);\n  }\n\n  return undefined;\n}\n\n/**\n * Formats a given ISO date string into a specified format.\n *\n * Example format patterns for year, month, and day:\n * - Year: \"yyyy\" (e.g., \"2021\")\n * - Month: \"MM\" (e.g., \"01\" for January, \"12\" for December)\n * - Day: \"dd\" (e.g., \"08\" for the 8th day of the month)\n *\n * Common format examples:\n * - \"yyyy-MM-dd\" (e.g., \"2021-01-08\")\n * - \"dd.MM.yyyy\" (e.g., \"08.01.2021\")\n * - \"MM/dd/yyyy\" (e.g., \"01/08/2021\")\n *\n * @param {IsoDate} isoDate - The ISO date string to be formatted.\n * @param {string} format - The desired date format string.\n * @return {string} A string representing the formatted date.\n */\nexport function formatDate(isoDate: IsoDate, format: string): string {\n  return fns.format(fns.parseISO(isoDate), format);\n}\n\nexport function fromDate(date: Date): IsoDate {\n  return fns.formatISO(date, { representation: 'date' }) as IsoDate;\n}\n\nexport function today(): IsoDate {\n  return fromDate(new Date());\n}\n\nexport function isValidIsoDate(isoDate: string): isoDate is IsoDate {\n  return fns.isValid(fns.parseISO(isoDate));\n}\n\nexport function getDaysInMonth(year: number, month: number) {\n  return fns.getDaysInMonth(new Date(year, month - 1));\n}\n\nexport function getMonth(isoDate: IsoDate): number {\n  return toPointerDate(isoDate).month;\n}\n\nexport function getYear(isoDate: IsoDate): number {\n  return toPointerDate(isoDate).year;\n}\n\nexport function toPointerDate(isoDate: IsoDate): PointerDate {\n  if (!isValidIsoDate(isoDate)) {\n    throw new Error(`Invalid ISO date: ${isoDate}`);\n  }\n\n  return {\n    year: parseInt(isoDate.slice(0, 4), 10),\n    month: parseInt(isoDate.slice(5, 7), 10),\n    day: parseInt(isoDate.slice(8), 10),\n  };\n}\n\nexport function todayAsPointerDate(): PointerDate {\n  const today = new Date();\n  return {\n    year: today.getFullYear(),\n    month: today.getMonth() + 1,\n    day: today.getDate(),\n  };\n}\n\nexport function cleanupValue(value: unknown): { value: IsoDate | ''; pointerDate: PointerDate; warning?: string } {\n  if (value === '') {\n    return { value, pointerDate: todayAsPointerDate() };\n  }\n\n  if (typeof value !== 'string' || !isValidIsoDate(value)) {\n    return {\n      value: '',\n      pointerDate: todayAsPointerDate(),\n      warning: `The specified value '${value}' does not conform to the required format, \"yyyy-MM-dd\".`,\n    };\n  }\n\n  return { value, pointerDate: toPointerDate(value) };\n}\n"]}

package/dist/collection/components/six-date/six-date.css

@@ -0,0 +1,168 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: border-box;
+}
+
+/* Hides content visually while still making it available to screen readers */
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+:host {
+  display: block;
+  font-family: var(--six-font-family);
+}
+
+.container {
+  position: relative;
+}
+
+/**
+ * PANEL
+ */
+.positioner {
+  position: fixed;
+  z-index: var(--six-z-index-date);
+  background-color: transparent;
+}
+
+.panel {
+  width: 25rem;
+  pointer-events: none;
+  padding: var(--six-spacing-small);
+  padding-bottom: var(--six-spacing-x-large);
+  border: 1px solid var(--six-color-web-rock-300);
+  box-shadow: var(--six-shadow-small);
+  background-color: var(--six-color-white);
+  opacity: 0;
+  transform: scale(0.9);
+  transition: transform var(--six-transition-fast), opacity var(--six-transition-fast);
+}
+
+.popover-visible .panel {
+  opacity: 1;
+  transform: scale(1);
+  pointer-events: all;
+}
+
+/**
+ * PANEL HEADER
+ */
+header {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--six-color-web-rock-400);
+  padding: var(--six-spacing-x-small);
+  margin-bottom: var(--six-spacing-medium);
+  user-select: none;
+}
+header six-icon-button.previous {
+  margin-right: auto;
+  margin-left: calc(-1 * var(--six-spacing-x-small));
+}
+header six-icon-button.next {
+  margin-left: auto;
+  margin-right: calc(-1 * var(--six-spacing-x-small));
+}
+header .selector {
+  display: flex;
+  cursor: pointer;
+  padding: var(--six-spacing-x-small);
+}
+header .selector:hover {
+  background-color: var(--six-color-web-rock-100);
+}
+
+/**
+ * SELECTION CELL
+ */
+.cell {
+  cursor: pointer;
+  text-align: center;
+  padding: var(--six-spacing-x-small);
+}
+.cell:hover {
+  background-color: var(--six-color-web-rock-200);
+}
+
+.cell--header {
+  padding: var(--six-spacing-x-small);
+  text-align: center;
+  font-weight: var(--six-font-weight-bold);
+}
+
+.cell--today .label {
+  padding: var(--six-spacing-xxx-small);
+  border-bottom: 2px solid var(--six-color-web-rock-900);
+}
+
+.cell--selected.cell--today .label {
+  border-bottom: 2px solid var(--six-color-white);
+}
+
+.cell--selected {
+  background-color: var(--six-color-red);
+  color: var(--six-color-white);
+}
+.cell--selected:hover {
+  background-color: var(--six-color-danger-900);
+}
+
+.cell--disabled {
+  cursor: not-allowed;
+  color: var(--six-color-web-rock-400);
+}
+.cell--disabled:hover {
+  background: none;
+}
+
+.cell--selected.cell--disabled {
+  color: var(--six-color-web-rock-500);
+}
+.cell--selected.cell--disabled:hover {
+  background-color: var(--six-color-red);
+}
+
+.cell--outdated {
+  color: var(--six-color-web-rock-400);
+}
+
+.cell--today.cell--disabled .label {
+  border-bottom: 2px solid var(--six-color-web-rock-400);
+}
+
+/**
+ *  DAY SELECTION
+ */
+.day-selection {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: var(--six-spacing-xx-small);
+}
+
+/**
+ *  MONTH SELECTION
+ */
+.month-selection {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--six-spacing-xx-small);
+}
+
+/**
+ *  YEAR SELECTION
+ */
+.year-selection {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--six-spacing-xx-small);
+}