@haiilo/catalyst 10.8.0 → 10.9.0

package/dist/cjs/cat-alert_29.cjs.entry.js

@@ -1751,24 +1751,29 @@ const CatDateInline = class {
         const [minDate, maxDate] = this.getMinMaxDate();
         const dateGrid = this.dateGrid(this.viewDate.getFullYear(), this.viewDate.getMonth());
         const [dateStart, dateEnd] = this.getValue();
-        return (index.h(index.Host, { key: 'c48f887b0942699c3f319922df98b2d0f28851a0' }, index.h("div", { key: 'fb3eff378bb846effd327fb589d1e006cba78c87', class: { picker: true, 'picker-weeks': this.weeks } }, index.h("div", { key: '6b7b3c2d9ccbf8f5e247c4ddfa519e6e31a3a312', class: "picker-head" }, index.h("cat-button", { key: '755823de9dbee2dc7e52e1792d20ff3c56ccef8d', icon: "$cat:datepicker-year-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevYear, disabled: isSameYear(this.viewDate, minDate), onClick: () => this.navigate('prev', 'year'), "data-dropdown-no-close": true }), index.h("cat-button", { key: '90e7420d4bc9c474d322d303413bc7e0bc4ac33d', icon: "$cat:datepicker-month-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevMonth, disabled: isSameMonth(this.viewDate, minDate), onClick: () => this.navigate('prev', 'month'), "data-dropdown-no-close": true }), index.h("h3", { key: 'e6a39d6e56a360a14bd5db15d53d12b5743071fc' }, this.getHeadline()), index.h("cat-button", { key: '18bbfccbef72377967d96d1481196a0dfd1297fb', icon: "$cat:datepicker-month-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextMonth, disabled: isSameMonth(this.viewDate, maxDate), onClick: () => this.navigate('next', 'month'), "data-dropdown-no-close": true }), index.h("cat-button", { key: 'e0773fe064c5b70a59437b388e9c4877a4ff66cd', icon: "$cat:datepicker-year-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextYear, disabled: isSameYear(this.viewDate, maxDate), onClick: () => this.navigate('next', 'year'), "data-dropdown-no-close": true })), index.h("div", { key: 'f6d969e0cbfc0700f3db9931ab8087ea9cab9c30', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, index.h("div", { key: 'ecf39be602c6538f97ccbea7d5060c8e4b0b7f9f', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => (index.h("abbr", { title: this.locale.days.long[i] }, this.locale.days.short[i])))), this.weeks && (index.h("div", { class: "picker-grid-weeks" }, dateGrid
+        return (index.h(index.Host, { key: 'c48f887b0942699c3f319922df98b2d0f28851a0' }, index.h("div", { key: 'fb3eff378bb846effd327fb589d1e006cba78c87', class: { picker: true, 'picker-weeks': this.weeks } }, index.h("div", { key: '6b7b3c2d9ccbf8f5e247c4ddfa519e6e31a3a312', class: "picker-head" }, index.h("cat-button", { key: '755823de9dbee2dc7e52e1792d20ff3c56ccef8d', icon: "$cat:datepicker-year-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevYear, disabled: isSameYear(this.viewDate, minDate), onClick: () => this.navigate('prev', 'year'), "data-dropdown-no-close": true }), index.h("cat-button", { key: '90e7420d4bc9c474d322d303413bc7e0bc4ac33d', icon: "$cat:datepicker-month-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevMonth, disabled: isSameMonth(this.viewDate, minDate), onClick: () => this.navigate('prev', 'month'), "data-dropdown-no-close": true }), index.h("h3", { key: 'e6a39d6e56a360a14bd5db15d53d12b5743071fc' }, this.getHeadline()), index.h("cat-button", { key: '18bbfccbef72377967d96d1481196a0dfd1297fb', icon: "$cat:datepicker-month-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextMonth, disabled: isSameMonth(this.viewDate, maxDate), onClick: () => this.navigate('next', 'month'), "data-dropdown-no-close": true }), index.h("cat-button", { key: 'e0773fe064c5b70a59437b388e9c4877a4ff66cd', icon: "$cat:datepicker-year-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextYear, disabled: isSameYear(this.viewDate, maxDate), onClick: () => this.navigate('next', 'year'), "data-dropdown-no-close": true })), index.h("div", { key: 'f6d969e0cbfc0700f3db9931ab8087ea9cab9c30', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, index.h("div", { key: 'ecf39be602c6538f97ccbea7d5060c8e4b0b7f9f', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => {
+            const day = (i + this.locale.weekInfo.firstDay) % 7;
+            return index.h("abbr", { title: this.locale.days.long[day] }, this.locale.days.short[day]);
+        })), this.weeks && (index.h("div", { class: "picker-grid-weeks" }, dateGrid
             .filter((_, i) => i % 7 === 0)
-            .map(day => (index.h("div", null, this.getWeekNumber(day)))))), index.h("div", { key: '1a8ace7365879688d6952bd68eaefe73b81683de', class: "picker-grid-days" }, dateGrid.map(day => {
+            .map(day => (index.h("div", null, this.getWeekNumber(day)))))), index.h("div", { key: 'ce3f468736a76aa772bd2f16ea407a4a890fd02c', class: "picker-grid-days" }, dateGrid.map(day => {
             const isStartDate = isSameDay(dateStart, day);
             const isEndDate = isSameDay(dateEnd, day);
             const isRange = !!dateStart && !!dateEnd && day > dateStart && day < dateEnd;
             const isToday = isSameDay(this.locale.now(), day);
+            const isWeekend = this.locale.weekInfo.weekend.includes(day.getDay() || 7);
             return (index.h("cat-button", { class: {
                     'cat-date-item': true,
                     'date-other': !isSameMonth(this.viewDate, day),
                     'date-today': isToday,
+                    'date-weekend': isWeekend,
                     'date-start': this.range && isStartDate,
                     'date-range': this.range && isRange,
                     'date-end': this.range && isEndDate,
                     'date-focusable': this.canFocus(day),
                     'date-disabled': !this.canClick(day)
                 }, nativeAttributes: !this.canFocus(day) ? { tabindex: '-1' } : {}, variant: isStartDate || isEndDate ? 'filled' : isToday ? 'outlined' : 'text', a11yLabel: this.locale.toLocalStr(day), active: isStartDate || isEndDate || isRange, color: isStartDate || isEndDate || isToday ? 'primary' : 'secondary', disabled: !this.canClick(day), onClick: () => this.select(day), "data-date": this.locale.toLocalISO(day) }, day.getDate()));
-        }))), index.h("div", { key: '62d01f9063d213411a12315637d4835cedb975e3', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (index.h("cat-button", { size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && index.h("p", { class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (index.h("cat-button", { size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), index.h("p", { key: '5709adcbf7b1bb39ef9a2ae2525a28afc23c766d', class: "cursor-aria", "aria-live": "polite" })));
+        }))), index.h("div", { key: '3c542e87fed7a18360871f0bc9b96658c6e6cfeb', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (index.h("cat-button", { size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && index.h("p", { class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (index.h("cat-button", { size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), index.h("p", { key: 'f90c2947cdf67dc7a2bed883884133df2cc79380', class: "cursor-aria", "aria-live": "polite" })));
     }
     focus(date) {
         const [minDate, maxDate] = this.getMinMaxDate();
@@ -1796,10 +1801,10 @@ const CatDateInline = class {
         }
     }
     dateGrid(year, month) {
-        const firstDayOfWeek = new Date(year, month, 1).getDay();
+        const daysOffset = (new Date(year, month, 1).getDay() - this.locale.weekInfo.firstDay + 7) % 7;
         const daysInMonth = new Date(year, month + 1, 0).getDate();
         const days = [...Array(daysInMonth).keys()];
-        const daysBefore = [...Array(firstDayOfWeek).keys()].map(day => new Date(year, month, day - firstDayOfWeek).getDate());
+        const daysBefore = this.getLastDaysOfMonth(year, month, daysOffset);
         const daysAfter = [...Array(42 - days.length - daysBefore.length).keys()];
         return [
             ...daysBefore.map(day => new Date(year, month - 1, day + 1)),
@@ -1807,6 +1812,11 @@ const CatDateInline = class {
             ...daysAfter.map(day => new Date(year, month + 1, day + 1))
         ];
     }
+    getLastDaysOfMonth(year, month, x) {
+        const lastDayOfMonth = new Date(year, month, 0).getDate();
+        const daysOfMonth = Array.from({ length: lastDayOfMonth }, (_, index) => index);
+        return x ? daysOfMonth.slice(-x) : [];
+    }
     getHeadline() {
         return `${this.locale.months.long[this.viewDate.getMonth()]} ${this.viewDate.getFullYear()}`;
     }