@sekiui/elements 0.0.61 → 0.0.63

package/dist/collection/components/calendar/seki-calendar.js

@@ -0,0 +1,567 @@
+import { h } from "@stencil/core";
+import { getCalendarDays, getWeekDays, getMonthLabel, getYearLabel, getPreviousMonth, getNextMonth, navigateDay, navigateWeek, isSameDay, startOfMonth, } from "../../utils/calendar/date-utils";
+/**
+ * seki-calendar: A calendar component for date selection
+ *
+ * @component Calendar
+ * @example
+ * <seki-calendar></seki-calendar>
+ * <seki-calendar mode="range"></seki-calendar>
+ */
+export class SekiCalendar {
+    constructor() {
+        /**
+         * Selection mode: single date or date range
+         * @default 'single'
+         */
+        this.mode = 'single';
+        /**
+         * Day the week starts on (0 = Sunday, 1 = Monday, etc.)
+         * @default 0
+         */
+        this.weekStartsOn = 0;
+        /**
+         * Number of months to display
+         * @default 1
+         */
+        this.numberOfMonths = 1;
+        /**
+         * Whether to show days outside the current month
+         * @default true
+         */
+        this.showOutsideDays = true;
+        /**
+         * Whether to fix the number of weeks displayed
+         * @default false
+         */
+        this.fixedWeeks = false;
+        /**
+         * The currently displayed month
+         */
+        this.displayMonth = new Date();
+        /**
+         * The currently focused date for keyboard navigation
+         */
+        this.focusedDate = null;
+        this.weekDays = [];
+        this.handlePreviousMonth = () => {
+            this.displayMonth = getPreviousMonth(this.displayMonth);
+            this.sekiMonthChange.emit(this.displayMonth);
+        };
+        this.handleNextMonth = () => {
+            this.displayMonth = getNextMonth(this.displayMonth);
+            this.sekiMonthChange.emit(this.displayMonth);
+        };
+        this.handleDayClick = (day) => {
+            if (day.isDisabled)
+                return;
+            if (this.mode === 'single') {
+                this.selected = day.date;
+                this.sekiSelect.emit(day.date);
+            }
+            else {
+                // Range mode
+                const rangeStart = this.parseDate(this.rangeFrom);
+                const rangeEnd = this.parseDate(this.rangeTo);
+                if (!rangeStart || (rangeStart && rangeEnd)) {
+                    // Start new range
+                    this.rangeFrom = day.date;
+                    this.rangeTo = undefined;
+                    this.sekiRangeSelect.emit({ from: day.date, to: null });
+                }
+                else {
+                    // Complete the range
+                    this.rangeTo = day.date;
+                    this.sekiRangeSelect.emit({ from: rangeStart, to: day.date });
+                }
+            }
+        };
+        this.handleKeyDown = (event) => {
+            const selectedDate = this.parseDate(this.selected) ||
+                this.parseDate(this.rangeFrom) ||
+                this.focusedDate ||
+                new Date();
+            let newDate = null;
+            switch (event.key) {
+                case 'ArrowLeft':
+                    newDate = navigateDay(selectedDate, 'prev');
+                    break;
+                case 'ArrowRight':
+                    newDate = navigateDay(selectedDate, 'next');
+                    break;
+                case 'ArrowUp':
+                    newDate = navigateWeek(selectedDate, 'prev');
+                    break;
+                case 'ArrowDown':
+                    newDate = navigateWeek(selectedDate, 'next');
+                    break;
+                case 'Enter':
+                case ' ':
+                    if (this.focusedDate) {
+                        event.preventDefault();
+                        this.handleDayClick({
+                            date: this.focusedDate,
+                            dayOfMonth: this.focusedDate.getDate(),
+                            isCurrentMonth: true,
+                            isToday: false,
+                            isSelected: false,
+                            isInRange: false,
+                            isRangeStart: false,
+                            isRangeEnd: false,
+                            isDisabled: false,
+                        });
+                    }
+                    return;
+                default:
+                    return;
+            }
+            if (newDate) {
+                event.preventDefault();
+                this.focusedDate = newDate;
+                // Update display month if navigating outside current view
+                const newMonth = startOfMonth(newDate);
+                if (newMonth.getTime() !== this.displayMonth.getTime()) {
+                    this.displayMonth = newMonth;
+                    this.sekiMonthChange.emit(this.displayMonth);
+                }
+            }
+        };
+    }
+    updateWeekDays() {
+        this.weekDays = getWeekDays(this.weekStartsOn);
+    }
+    componentWillLoad() {
+        this.weekDays = getWeekDays(this.weekStartsOn);
+        // Set initial display month based on selected date or range
+        const initialDate = this.parseDate(this.selected) ||
+            this.parseDate(this.rangeFrom) ||
+            new Date();
+        this.displayMonth = startOfMonth(initialDate);
+    }
+    parseDate(value) {
+        if (!value)
+            return null;
+        if (value instanceof Date)
+            return value;
+        const parsed = new Date(value);
+        return isNaN(parsed.getTime()) ? null : parsed;
+    }
+    parseDateArray(dates) {
+        if (!dates)
+            return [];
+        return dates.map(d => this.parseDate(d)).filter((d) => d !== null);
+    }
+    getDayClasses(day) {
+        const classes = ['seki-calendar__day'];
+        if (!day.isCurrentMonth) {
+            classes.push('seki-calendar__day--outside');
+            if (!this.showOutsideDays) {
+                classes.push('seki-calendar__day--hidden');
+            }
+        }
+        if (day.isToday) {
+            classes.push('seki-calendar__day--today');
+        }
+        if (day.isSelected) {
+            classes.push('seki-calendar__day--selected');
+        }
+        if (day.isInRange) {
+            classes.push('seki-calendar__day--in-range');
+        }
+        if (day.isRangeStart) {
+            classes.push('seki-calendar__day--range-start');
+        }
+        if (day.isRangeEnd) {
+            classes.push('seki-calendar__day--range-end');
+        }
+        if (day.isDisabled) {
+            classes.push('seki-calendar__day--disabled');
+        }
+        if (this.focusedDate && isSameDay(day.date, this.focusedDate)) {
+            classes.push('seki-calendar__day--focused');
+        }
+        return classes.join(' ');
+    }
+    render() {
+        const selectedDate = this.parseDate(this.selected);
+        const rangeStart = this.parseDate(this.rangeFrom);
+        const rangeEnd = this.parseDate(this.rangeTo);
+        const minDate = this.parseDate(this.minDate);
+        const maxDate = this.parseDate(this.maxDate);
+        const disabledDates = this.parseDateArray(this.disabledDates);
+        const weeks = getCalendarDays(this.displayMonth, {
+            weekStartsOn: this.weekStartsOn,
+            selectedDate,
+            rangeStart,
+            rangeEnd,
+            minDate,
+            maxDate,
+            disabledDates,
+        });
+        const monthLabel = getMonthLabel(this.displayMonth);
+        const yearLabel = getYearLabel(this.displayMonth);
+        return (h("div", { key: '903b4587e54354f1b51a261dea310ba2254d4de1', class: "seki-calendar", role: "application", "aria-label": "Calendar", onKeyDown: this.handleKeyDown }, h("div", { key: '6b6002c0233214d00da57fee48b20557a60bd16c', class: "seki-calendar__header" }, h("button", { key: '029599517a3c3628d3ce38633942681ad9d721b4', type: "button", class: "seki-calendar__nav-button", "aria-label": "Go to previous month", onClick: this.handlePreviousMonth }, h("svg", { key: '8393cf189dc8e6b11b6b3beac79a5111c58a8aab', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: '5a9ff4669f2d6afb41f9aba9c618b00decc85e6c', d: "m15 18-6-6 6-6" }))), h("div", { key: 'eb0f6e91aced59ffa76de321237a85ba9c2ef9de', class: "seki-calendar__heading" }, h("span", { key: 'cc68f622d4169d5133132711dfe94be336a12497', class: "seki-calendar__month" }, monthLabel), h("span", { key: '90707dd4285d146b4b732d584fb1eb092362d8e7', class: "seki-calendar__year" }, yearLabel)), h("button", { key: '8058724972a6071cb58462c950735d30b6a755ba', type: "button", class: "seki-calendar__nav-button", "aria-label": "Go to next month", onClick: this.handleNextMonth }, h("svg", { key: 'b1395ddb85a3073f58bf8a2eb83a98bdd4057719', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: 'fe81b15ab03ee5c76d6f67f9752077ca1e7cb1b4', d: "m9 18 6-6-6-6" })))), h("table", { key: 'f0f3e1a8c82bec20c2631d7952d36e6916d4d3eb', class: "seki-calendar__table", role: "grid", "aria-label": `${monthLabel} ${yearLabel}` }, h("thead", { key: '049ac75f909b30b7830ad5f6382f41ea2fa27006' }, h("tr", { key: 'eafb0f4744fc74c6bd3ce5ac2a9c98d217880667', class: "seki-calendar__weekdays" }, this.weekDays.map(day => (h("th", { class: "seki-calendar__weekday", scope: "col", "aria-label": day }, day.slice(0, 2)))))), h("tbody", { key: '3a3a817792a1cf6c5f07f23ca50f524e95e423f0' }, weeks.map((week, weekIndex) => (h("tr", { key: weekIndex, class: "seki-calendar__week" }, week.map((day, dayIndex) => (h("td", { key: dayIndex, class: "seki-calendar__cell", role: "gridcell", "aria-selected": day.isSelected || day.isRangeStart || day.isRangeEnd, "aria-disabled": day.isDisabled }, h("button", { type: "button", class: this.getDayClasses(day), tabIndex: day.isSelected || day.isToday ? 0 : -1, disabled: day.isDisabled, onClick: () => this.handleDayClick(day), "aria-label": day.date.toDateString() }, day.dayOfMonth)))))))))));
+    }
+    static get is() { return "seki-calendar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-calendar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-calendar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CalendarMode",
+                    "resolved": "\"range\" | \"single\"",
+                    "references": {
+                        "CalendarMode": {
+                            "location": "local",
+                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/calendar/seki-calendar.tsx",
+                            "id": "src/components/calendar/seki-calendar.tsx::CalendarMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'single'"
+                        }],
+                    "text": "Selection mode: single date or date range"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode",
+                "defaultValue": "'single'"
+            },
+            "selected": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "Date | string",
+                    "resolved": "Date | string | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected date (for single mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected"
+            },
+            "rangeFrom": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "Date | string",
+                    "resolved": "Date | string | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Start of date range (for range mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "range-from"
+            },
+            "rangeTo": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "Date | string",
+                    "resolved": "Date | string | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "End of date range (for range mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "range-to"
+            },
+            "minDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date | string",
+                    "resolved": "Date | string | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum selectable date"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-date"
+            },
+            "maxDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date | string",
+                    "resolved": "Date | string | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum selectable date"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-date"
+            },
+            "disabledDates": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date[] | string[]",
+                    "resolved": "Date[] | string[] | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Dates that are disabled"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "weekStartsOn": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "WeekStartsOn",
+                    "resolved": "0 | 1 | 2 | 3 | 4 | 5 | 6",
+                    "references": {
+                        "WeekStartsOn": {
+                            "location": "import",
+                            "path": "../../utils/calendar/date-utils",
+                            "id": "src/utils/calendar/date-utils.ts::WeekStartsOn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "0"
+                        }],
+                    "text": "Day the week starts on (0 = Sunday, 1 = Monday, etc.)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "week-starts-on",
+                "defaultValue": "0"
+            },
+            "numberOfMonths": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "1"
+                        }],
+                    "text": "Number of months to display"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "number-of-months",
+                "defaultValue": "1"
+            },
+            "showOutsideDays": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Whether to show days outside the current month"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-outside-days",
+                "defaultValue": "true"
+            },
+            "fixedWeeks": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether to fix the number of weeks displayed"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fixed-weeks",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "displayMonth": {},
+            "focusedDate": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sekiSelect",
+                "name": "sekiSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a date is selected"
+                },
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }, {
+                "method": "sekiRangeSelect",
+                "name": "sekiRangeSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a date range is selected"
+                },
+                "complexType": {
+                    "original": "DateRange",
+                    "resolved": "DateRange",
+                    "references": {
+                        "DateRange": {
+                            "location": "local",
+                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/calendar/seki-calendar.tsx",
+                            "id": "src/components/calendar/seki-calendar.tsx::DateRange"
+                        }
+                    }
+                }
+            }, {
+                "method": "sekiMonthChange",
+                "name": "sekiMonthChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the displayed month changes"
+                },
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "weekStartsOn",
+                "methodName": "updateWeekDays"
+            }];
+    }
+}

package/dist/collection/components/card/seki-card-action.js

@@ -10,7 +10,7 @@ import { h } from "@stencil/core";
  */
 export class CardAction {
     render() {
-        return (h("div", { key: '9624fe74a63be86c764c0289c8794f8f53cab0d0', class: `card-action ${this.class || ''}`, role: "toolbar" }, h("slot", { key: '6c83e39d38c3794fa030ae023e473cbaebd89bf6' })));
+        return (h("div", { key: '0ef278fc8e115cf8c8f9f0d5609b8201b5f2ab1c', class: `card-action ${this.class || ''}`, role: "toolbar" }, h("slot", { key: '8f3340c820a1bc5789a6f0c774a27455dc64cd25' })));
     }
     static get is() { return "seki-card-action"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/seki-card-content.js

@@ -11,7 +11,7 @@ import { h } from "@stencil/core";
  */
 export class CardContent {
     render() {
-        return (h("div", { key: '6268ce1ecc77abd5fb65fd8602966f0428648770', class: `card-content ${this.class || ''}` }, h("slot", { key: '01c4ec17c1ad4d1880b60a5e0c2dac4c9cb2af35' })));
+        return (h("div", { key: 'e33c2d3f498fbd86ba04cb69c851373c4f7af690', class: `card-content ${this.class || ''}` }, h("slot", { key: '926a870d46dbdaeb55c325c64a7566556ed2fa9c' })));
     }
     static get is() { return "seki-card-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/seki-card-description.js

@@ -8,7 +8,7 @@ import { h } from "@stencil/core";
  */
 export class CardDescription {
     render() {
-        return (h("p", { key: '50fab4e16bf3eb6f7e15b9699c042e60e63ef82c', class: `card-description ${this.class || ''}` }, h("slot", { key: '604955c4e41d4401684b0b0cff7c298850670830' })));
+        return (h("p", { key: '97dd8731a1bce2a10164e7dc24919bf0352afbfe', class: `card-description ${this.class || ''}` }, h("slot", { key: '5090b3e4022729fb4fcda1508e153818fe5c5d95' })));
     }
     static get is() { return "seki-card-description"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/seki-card-footer.js

@@ -18,7 +18,7 @@ export class CardFooter {
         this.alignment = 'flex-start';
     }
     render() {
-        return (h("footer", { key: '2391b4b3f62ed8c63e887913b5c1040f5f17baa2', class: `card-footer ${this.class || ''}`, style: { justifyContent: this.alignment } }, h("slot", { key: 'a2ebbf322b5e332c682595f5bcbaf91de2e7b0a9' })));
+        return (h("footer", { key: '9783db8558ae190ae2454df9feeee1ecacbbbc60', class: `card-footer ${this.class || ''}`, style: { justifyContent: this.alignment } }, h("slot", { key: '7e029f52d42a2f82f2f3f35a15ddec8608e2c7cb' })));
     }
     static get is() { return "seki-card-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/seki-card-header.js

@@ -14,7 +14,7 @@ import { h } from "@stencil/core";
  */
 export class CardHeader {
     render() {
-        return (h("header", { key: 'bd96b2fed91554baab84bf0401ac4d02cef78581', class: `card-header ${this.class || ''}` }, h("slot", { key: '2f78099e1467bdcede557cdaf4e84d942fff682f' })));
+        return (h("header", { key: 'c7944129e0bdebbadb31398c4c470a6aec05f4c0', class: `card-header ${this.class || ''}` }, h("slot", { key: 'd34a614f53ce00ba9738dc19c779b2ec14c21a2a' })));
     }
     static get is() { return "seki-card-header"; }
     static get encapsulation() { return "shadow"; }