@xplor-education/core-stencil-components 2.0.0

package/dist/collection/components/xplor-inline-date-picker/xplor-inline-date-picker.js

@@ -0,0 +1,325 @@
+import { Host, h } from "@stencil/core";
+export class XplorInlineDatePicker {
+    constructor() {
+        /**
+         * Selected date (YYYY-MM-DD format)
+         */
+        this.selectedDate = '';
+        /**
+         * Minimum selectable date (YYYY-MM-DD format)
+         */
+        this.min = '';
+        /**
+         * Maximum selectable date (YYYY-MM-DD format)
+         */
+        this.max = '';
+        /**
+         * Whether the date picker is readonly
+         */
+        this.readonly = false;
+        /**
+         * Primary color
+         */
+        this.color = '#008480';
+        /**
+         * Whether to start week on Sunday (default: true)
+         */
+        this.startWeekOnSunday = true;
+        this.monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+        this.dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+        this.dayNamesStartMonday = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+        this.previousMonth = () => {
+            if (this.currentMonth === 0) {
+                this.currentMonth = 11;
+                this.currentYear--;
+            }
+            else {
+                this.currentMonth--;
+            }
+            this.viewDate = new Date(this.currentYear, this.currentMonth, 1);
+            this.monthChanged.emit({ year: this.currentYear, month: this.currentMonth });
+        };
+        this.nextMonth = () => {
+            if (this.currentMonth === 11) {
+                this.currentMonth = 0;
+                this.currentYear++;
+            }
+            else {
+                this.currentMonth++;
+            }
+            this.viewDate = new Date(this.currentYear, this.currentMonth, 1);
+            this.monthChanged.emit({ year: this.currentYear, month: this.currentMonth });
+        };
+        this.selectDate = (day) => {
+            if (this.readonly)
+                return;
+            const date = new Date(this.currentYear, this.currentMonth, day);
+            const dateString = this.formatDate(date);
+            if (this.isDateDisabled(date))
+                return;
+            this.selectedDate = dateString;
+            this.dateSelected.emit(dateString);
+        };
+        this.formatDate = (date) => {
+            const year = date.getFullYear();
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const day = String(date.getDate()).padStart(2, '0');
+            return `${year}-${month}-${day}`;
+        };
+        this.isDateDisabled = (date) => {
+            if (this.min) {
+                const minDate = new Date(this.min);
+                if (date < minDate)
+                    return true;
+            }
+            if (this.max) {
+                const maxDate = new Date(this.max);
+                if (date > maxDate)
+                    return true;
+            }
+            return false;
+        };
+        this.isToday = (day) => {
+            const today = new Date();
+            return (day === today.getDate() &&
+                this.currentMonth === today.getMonth() &&
+                this.currentYear === today.getFullYear());
+        };
+        this.isSelected = (day) => {
+            if (!this.selectedDate)
+                return false;
+            const selected = new Date(this.selectedDate);
+            return (day === selected.getDate() &&
+                this.currentMonth === selected.getMonth() &&
+                this.currentYear === selected.getFullYear());
+        };
+        this.getDaysInMonth = () => {
+            return new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
+        };
+        this.getFirstDayOfMonth = () => {
+            const firstDay = new Date(this.currentYear, this.currentMonth, 1).getDay();
+            return this.startWeekOnSunday ? firstDay : (firstDay === 0 ? 6 : firstDay - 1);
+        };
+        this.renderCalendarDays = () => {
+            const daysInMonth = this.getDaysInMonth();
+            const firstDay = this.getFirstDayOfMonth();
+            const days = [];
+            // Empty cells for days before the first of the month
+            for (let i = 0; i < firstDay; i++) {
+                days.push(h("div", { class: "xplor-inline-date-picker__day xplor-inline-date-picker__day--empty" }));
+            }
+            // Days of the month
+            for (let day = 1; day <= daysInMonth; day++) {
+                const date = new Date(this.currentYear, this.currentMonth, day);
+                const isDisabled = this.isDateDisabled(date);
+                const isToday = this.isToday(day);
+                const isSelected = this.isSelected(day);
+                days.push(h("div", { class: {
+                        'xplor-inline-date-picker__day': true,
+                        'xplor-inline-date-picker__day--today': isToday,
+                        'xplor-inline-date-picker__day--selected': isSelected,
+                        'xplor-inline-date-picker__day--disabled': isDisabled,
+                    }, onClick: () => !isDisabled && this.selectDate(day) }, day));
+            }
+            return days;
+        };
+        this.getSidebarDate = () => {
+            const date = this.selectedDate ? new Date(this.selectedDate) : new Date();
+            const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+            const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+            return {
+                year: date.getFullYear(),
+                day: dayNames[date.getDay()],
+                date: `${monthNames[date.getMonth()]} ${date.getDate()}`,
+            };
+        };
+    }
+    componentWillLoad() {
+        const date = this.selectedDate ? new Date(this.selectedDate) : new Date();
+        this.currentYear = date.getFullYear();
+        this.currentMonth = date.getMonth();
+        this.viewDate = new Date(this.currentYear, this.currentMonth, 1);
+    }
+    render() {
+        const sidebarDate = this.getSidebarDate();
+        const dayHeaders = this.startWeekOnSunday ? this.dayNames : this.dayNamesStartMonday;
+        return (h(Host, { key: 'ee263c09219ac46da344c5ded89d43ccead118c5' }, h("div", { key: 'b8ad22f96552be1dc7aee70031f710eaea50f48a', class: "xplor-inline-date-picker", style: { '--picker-color': this.color } }, h("div", { key: '7a4e2dbe6bb6200ba8a9e09294a28ca5884c1bcc', class: "xplor-inline-date-picker__sidebar" }, h("div", { key: '3772f7bf9333f0c1378933b8219ad89a31c48f02', class: "xplor-inline-date-picker__sidebar-year" }, sidebarDate.year), h("div", { key: '5e6030ad1997e6d9788de0b06a28250abceddca3', class: "xplor-inline-date-picker__sidebar-day" }, sidebarDate.day, ","), h("div", { key: '338021ddedaa98c48bb3a3fe9d66e9ebcc2844ea', class: "xplor-inline-date-picker__sidebar-date" }, sidebarDate.date)), h("div", { key: 'cae9df55ce178a5565cab9464c54acb3d920f0f2', class: "xplor-inline-date-picker__calendar" }, h("div", { key: '251870432d80a336351a22f2c27230fe69563908', class: "xplor-inline-date-picker__header" }, h("button", { key: '8e31cdb4556c2db31c702177559a9083aa86ece7', type: "button", class: "xplor-inline-date-picker__arrow", onClick: this.previousMonth, "aria-label": "Previous month" }, "\u2039"), h("div", { key: '5e6fdb54a49a6e029cc162025af534bc692bd1f6', class: "xplor-inline-date-picker__title" }, this.monthNames[this.currentMonth], " ", this.currentYear), h("button", { key: '548e7e277c53245a1f33f96fb77cc784917c84ff', type: "button", class: "xplor-inline-date-picker__arrow", onClick: this.nextMonth, "aria-label": "Next month" }, "\u203A")), h("div", { key: '9a21fe00132c860916720d827a1e867feb7db8c9', class: "xplor-inline-date-picker__weekdays" }, dayHeaders.map((day) => (h("div", { class: "xplor-inline-date-picker__weekday" }, day)))), h("div", { key: '85c840414639b471ba0b1cfb8f80fe7a61c25246', class: "xplor-inline-date-picker__days" }, this.renderCalendarDays())))));
+    }
+    static get is() { return "xplor-inline-date-picker"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-inline-date-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-inline-date-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selectedDate": {
+                "type": "string",
+                "attribute": "selected-date",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected date (YYYY-MM-DD format)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "min": {
+                "type": "string",
+                "attribute": "min",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum selectable date (YYYY-MM-DD format)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "max": {
+                "type": "string",
+                "attribute": "max",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum selectable date (YYYY-MM-DD format)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the date picker is readonly"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'#008480'"
+            },
+            "startWeekOnSunday": {
+                "type": "boolean",
+                "attribute": "start-week-on-sunday",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to start week on Sunday (default: true)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentYear": {},
+            "currentMonth": {},
+            "viewDate": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dateSelected",
+                "name": "dateSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Date selection event"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "monthChanged",
+                "name": "monthChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Month change event"
+                },
+                "complexType": {
+                    "original": "{ year: number; month: number }",
+                    "resolved": "{ year: number; month: number; }",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=xplor-inline-date-picker.js.map

package/dist/collection/components/xplor-inline-date-picker/xplor-inline-date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-inline-date-picker.js","sourceRoot":"","sources":["../../../src/components/xplor-inline-date-picker/xplor-inline-date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-inline-date-picker',\n  styleUrl: 'xplor-inline-date-picker.scss',\n  scoped: true,\n})\nexport class XplorInlineDatePicker {\n  /**\n   * Selected date (YYYY-MM-DD format)\n   */\n  @Prop({ mutable: true }) selectedDate: string = '';\n\n  /**\n   * Minimum selectable date (YYYY-MM-DD format)\n   */\n  @Prop() min: string = '';\n\n  /**\n   * Maximum selectable date (YYYY-MM-DD format)\n   */\n  @Prop() max: string = '';\n\n  /**\n   * Whether the date picker is readonly\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Primary color\n   */\n  @Prop() color: string = '#008480';\n\n  /**\n   * Whether to start week on Sunday (default: true)\n   */\n  @Prop() startWeekOnSunday: boolean = true;\n\n  /**\n   * Date selection event\n   */\n  @Event() dateSelected: EventEmitter<string>;\n\n  /**\n   * Month change event\n   */\n  @Event() monthChanged: EventEmitter<{ year: number; month: number }>;\n\n  @State() currentYear: number;\n  @State() currentMonth: number;\n  @State() viewDate: Date;\n\n  private monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n  private dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n  private dayNamesStartMonday = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];\n\n  componentWillLoad() {\n    const date = this.selectedDate ? new Date(this.selectedDate) : new Date();\n    this.currentYear = date.getFullYear();\n    this.currentMonth = date.getMonth();\n    this.viewDate = new Date(this.currentYear, this.currentMonth, 1);\n  }\n\n  private previousMonth = () => {\n    if (this.currentMonth === 0) {\n      this.currentMonth = 11;\n      this.currentYear--;\n    } else {\n      this.currentMonth--;\n    }\n    this.viewDate = new Date(this.currentYear, this.currentMonth, 1);\n    this.monthChanged.emit({ year: this.currentYear, month: this.currentMonth });\n  };\n\n  private nextMonth = () => {\n    if (this.currentMonth === 11) {\n      this.currentMonth = 0;\n      this.currentYear++;\n    } else {\n      this.currentMonth++;\n    }\n    this.viewDate = new Date(this.currentYear, this.currentMonth, 1);\n    this.monthChanged.emit({ year: this.currentYear, month: this.currentMonth });\n  };\n\n  private selectDate = (day: number) => {\n    if (this.readonly) return;\n\n    const date = new Date(this.currentYear, this.currentMonth, day);\n    const dateString = this.formatDate(date);\n\n    if (this.isDateDisabled(date)) return;\n\n    this.selectedDate = dateString;\n    this.dateSelected.emit(dateString);\n  };\n\n  private formatDate = (date: Date): string => {\n    const year = date.getFullYear();\n    const month = String(date.getMonth() + 1).padStart(2, '0');\n    const day = String(date.getDate()).padStart(2, '0');\n    return `${year}-${month}-${day}`;\n  };\n\n  private isDateDisabled = (date: Date): boolean => {\n    if (this.min) {\n      const minDate = new Date(this.min);\n      if (date < minDate) return true;\n    }\n    if (this.max) {\n      const maxDate = new Date(this.max);\n      if (date > maxDate) return true;\n    }\n    return false;\n  };\n\n  private isToday = (day: number): boolean => {\n    const today = new Date();\n    return (\n      day === today.getDate() &&\n      this.currentMonth === today.getMonth() &&\n      this.currentYear === today.getFullYear()\n    );\n  };\n\n  private isSelected = (day: number): boolean => {\n    if (!this.selectedDate) return false;\n    const selected = new Date(this.selectedDate);\n    return (\n      day === selected.getDate() &&\n      this.currentMonth === selected.getMonth() &&\n      this.currentYear === selected.getFullYear()\n    );\n  };\n\n  private getDaysInMonth = (): number => {\n    return new Date(this.currentYear, this.currentMonth + 1, 0).getDate();\n  };\n\n  private getFirstDayOfMonth = (): number => {\n    const firstDay = new Date(this.currentYear, this.currentMonth, 1).getDay();\n    return this.startWeekOnSunday ? firstDay : (firstDay === 0 ? 6 : firstDay - 1);\n  };\n\n  private renderCalendarDays = () => {\n    const daysInMonth = this.getDaysInMonth();\n    const firstDay = this.getFirstDayOfMonth();\n    const days = [];\n\n    // Empty cells for days before the first of the month\n    for (let i = 0; i < firstDay; i++) {\n      days.push(<div class=\"xplor-inline-date-picker__day xplor-inline-date-picker__day--empty\"></div>);\n    }\n\n    // Days of the month\n    for (let day = 1; day <= daysInMonth; day++) {\n      const date = new Date(this.currentYear, this.currentMonth, day);\n      const isDisabled = this.isDateDisabled(date);\n      const isToday = this.isToday(day);\n      const isSelected = this.isSelected(day);\n\n      days.push(\n        <div\n          class={{\n            'xplor-inline-date-picker__day': true,\n            'xplor-inline-date-picker__day--today': isToday,\n            'xplor-inline-date-picker__day--selected': isSelected,\n            'xplor-inline-date-picker__day--disabled': isDisabled,\n          }}\n          onClick={() => !isDisabled && this.selectDate(day)}\n        >\n          {day}\n        </div>\n      );\n    }\n\n    return days;\n  };\n\n  private getSidebarDate = () => {\n    const date = this.selectedDate ? new Date(this.selectedDate) : new Date();\n    const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n    const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n\n    return {\n      year: date.getFullYear(),\n      day: dayNames[date.getDay()],\n      date: `${monthNames[date.getMonth()]} ${date.getDate()}`,\n    };\n  };\n\n  render() {\n    const sidebarDate = this.getSidebarDate();\n    const dayHeaders = this.startWeekOnSunday ? this.dayNames : this.dayNamesStartMonday;\n\n    return (\n      <Host>\n        <div class=\"xplor-inline-date-picker\" style={{ '--picker-color': this.color }}>\n          <div class=\"xplor-inline-date-picker__sidebar\">\n            <div class=\"xplor-inline-date-picker__sidebar-year\">{sidebarDate.year}</div>\n            <div class=\"xplor-inline-date-picker__sidebar-day\">{sidebarDate.day},</div>\n            <div class=\"xplor-inline-date-picker__sidebar-date\">{sidebarDate.date}</div>\n          </div>\n\n          <div class=\"xplor-inline-date-picker__calendar\">\n            <div class=\"xplor-inline-date-picker__header\">\n              <button\n                type=\"button\"\n                class=\"xplor-inline-date-picker__arrow\"\n                onClick={this.previousMonth}\n                aria-label=\"Previous month\"\n              >\n                ‹\n              </button>\n              <div class=\"xplor-inline-date-picker__title\">\n                {this.monthNames[this.currentMonth]} {this.currentYear}\n              </div>\n              <button\n                type=\"button\"\n                class=\"xplor-inline-date-picker__arrow\"\n                onClick={this.nextMonth}\n                aria-label=\"Next month\"\n              >\n                ›\n              </button>\n            </div>\n\n            <div class=\"xplor-inline-date-picker__weekdays\">\n              {dayHeaders.map((day) => (\n                <div class=\"xplor-inline-date-picker__weekday\">{day}</div>\n              ))}\n            </div>\n\n            <div class=\"xplor-inline-date-picker__days\">{this.renderCalendarDays()}</div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}