Brunobkr/llama.cpp_AlgMor24_github

1import { getLocalTimeZone, isSameDay, isSameMonth, isToday, } from "@internationalized/date";2import { DEV } from "esm-env";3import { onMount, untrack } from "svelte";4import { attachRef, DOMContext, } from "svelte-toolbelt";5import { Context, watch } from "runed";6import { boolToStr, boolToStrTrueOrUndef, boolToEmptyStrOrUndef } from "../../internal/attrs.js";7import { useId } from "../../internal/use-id.js";8import { getAnnouncer } from "../../internal/date-time/announcer.js";9import { createFormatter } from "../../internal/date-time/formatter.js";10import { calendarAttrs, createAccessibleHeading, createMonths, getCalendarElementProps, getCalendarHeadingValue, getDateWithPreviousTime, getDefaultYears, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useEnsureNonDisabledPlaceholder, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../internal/date-time/calendar-helpers.svelte.js";11import { getDateValueType, isBefore, toDate } from "../../internal/date-time/utils.js";12export const CalendarRootContext = new Context("Calendar.Root | RangeCalender.Root");13export class CalendarRootState {14    static create(opts) {15        return CalendarRootContext.set(new CalendarRootState(opts));16    }17    opts;18    visibleMonths = $derived.by(() => this.months.map((month) => month.value));19    formatter;20    accessibleHeadingId = useId();21    domContext;22    attachment;23    months = $state([]);24    announcer;25    constructor(opts) {26        this.opts = opts;27        this.attachment = attachRef(this.opts.ref);28        this.domContext = new DOMContext(opts.ref);29        this.announcer = getAnnouncer(null);30        this.formatter = createFormatter({31            initialLocale: this.opts.locale.current,32            monthFormat: this.opts.monthFormat,33            yearFormat: this.opts.yearFormat,34        });35        this.setMonths = this.setMonths.bind(this);36        this.nextPage = this.nextPage.bind(this);37        this.prevPage = this.prevPage.bind(this);38        this.prevYear = this.prevYear.bind(this);39        this.nextYear = this.nextYear.bind(this);40        this.setYear = this.setYear.bind(this);41        this.setMonth = this.setMonth.bind(this);42        this.isOutsideVisibleMonths = this.isOutsideVisibleMonths.bind(this);43        this.isDateDisabled = this.isDateDisabled.bind(this);44        this.isDateSelected = this.isDateSelected.bind(this);45        this.shiftFocus = this.shiftFocus.bind(this);46        this.handleCellClick = this.handleCellClick.bind(this);47        this.handleMultipleUpdate = this.handleMultipleUpdate.bind(this);48        this.handleSingleUpdate = this.handleSingleUpdate.bind(this);49        this.onkeydown = this.onkeydown.bind(this);50        this.getBitsAttr = this.getBitsAttr.bind(this);51        onMount(() => {52            this.announcer = getAnnouncer(this.domContext.getDocument());53        });54        this.months = createMonths({55            dateObj: this.opts.placeholder.current,56            weekStartsOn: this.opts.weekStartsOn.current,57            locale: this.opts.locale.current,58            fixedWeeks: this.opts.fixedWeeks.current,59            numberOfMonths: this.opts.numberOfMonths.current,60        });61        this.#setupInitialFocusEffect();62        this.#setupAccessibleHeadingEffect();63        this.#setupFormatterEffect();64        /**65         * Updates the displayed months based on changes in the placeholder value.66         */67        useMonthViewPlaceholderSync({68            placeholder: this.opts.placeholder,69            getVisibleMonths: () => this.visibleMonths,70            weekStartsOn: this.opts.weekStartsOn,71            locale: this.opts.locale,72            fixedWeeks: this.opts.fixedWeeks,73            numberOfMonths: this.opts.numberOfMonths,74            setMonths: (months) => (this.months = months),75        });76        /**77         * Updates the displayed months based on changes in the options values,78         * which determines the month to show in the calendar.79         */80        useMonthViewOptionsSync({81            fixedWeeks: this.opts.fixedWeeks,82            locale: this.opts.locale,83            numberOfMonths: this.opts.numberOfMonths,84            placeholder: this.opts.placeholder,85            setMonths: this.setMonths,86            weekStartsOn: this.opts.weekStartsOn,87        });88        /**89         * Update the accessible heading's text content when the `fullCalendarLabel`90         * changes.91         */92        watch(() => this.fullCalendarLabel, (label) => {93            const node = this.domContext.getElementById(this.accessibleHeadingId);94            if (!node)95                return;96            node.textContent = label;97        });98        /**99         * Synchronize the placeholder value with the current value.100         */101        watch(() => this.opts.value.current, () => {102            const value = this.opts.value.current;103            if (Array.isArray(value) && value.length) {104                const lastValue = value[value.length - 1];105                if (lastValue && this.opts.placeholder.current !== lastValue) {106                    this.opts.placeholder.current = lastValue;107                }108            }109            else if (!Array.isArray(value) &&110                value &&111                this.opts.placeholder.current !== value) {112                this.opts.placeholder.current = value;113            }114        });115        useEnsureNonDisabledPlaceholder({116            placeholder: opts.placeholder,117            defaultPlaceholder: opts.defaultPlaceholder,118            isDateDisabled: opts.isDateDisabled,119            maxValue: opts.maxValue,120            minValue: opts.minValue,121            ref: opts.ref,122        });123    }124    setMonths(months) {125        this.months = months;126    }127    /**128     * This derived state holds an array of localized day names for the current129     * locale and calendar view. It dynamically syncs with the 'weekStartsOn' option,130     * updating its content when the option changes. Using this state to render the131     * calendar's days of the week is strongly recommended, as it guarantees that132     * the days are correctly formatted for the current locale and calendar view.133     */134    weekdays = $derived.by(() => {135        return getWeekdays({136            months: this.months,137            formatter: this.formatter,138            weekdayFormat: this.opts.weekdayFormat.current,139        });140    });141    initialPlaceholderYear = $derived.by(() => untrack(() => this.opts.placeholder.current.year));142    defaultYears = $derived.by(() => {143        return getDefaultYears({144            minValue: this.opts.minValue.current,145            maxValue: this.opts.maxValue.current,146            placeholderYear: this.initialPlaceholderYear,147        });148    });149    #setupInitialFocusEffect() {150        $effect(() => {151            const initialFocus = untrack(() => this.opts.initialFocus.current);152            if (initialFocus) {153                // focus the first `data-focused` day node154                const firstFocusedDay = this.opts.ref.current?.querySelector(`[data-focused]`);155                if (firstFocusedDay) {156                    firstFocusedDay.focus();157                }158            }159        });160    }161    #setupAccessibleHeadingEffect() {162        $effect(() => {163            if (!this.opts.ref.current)164                return;165            const removeHeading = createAccessibleHeading({166                calendarNode: this.opts.ref.current,167                label: this.fullCalendarLabel,168                accessibleHeadingId: this.accessibleHeadingId,169            });170            return removeHeading;171        });172    }173    #setupFormatterEffect() {174        $effect.pre(() => {175            if (this.formatter.getLocale() === this.opts.locale.current)176                return;177            this.formatter.setLocale(this.opts.locale.current);178        });179    }180    /**181     * Navigates to the next page of the calendar.182     */183    nextPage() {184        handleCalendarNextPage({185            fixedWeeks: this.opts.fixedWeeks.current,186            locale: this.opts.locale.current,187            numberOfMonths: this.opts.numberOfMonths.current,188            pagedNavigation: this.opts.pagedNavigation.current,189            setMonths: this.setMonths,190            setPlaceholder: (date) => (this.opts.placeholder.current = date),191            weekStartsOn: this.opts.weekStartsOn.current,192            months: this.months,193        });194    }195    /**196     * Navigates to the previous page of the calendar.197     */198    prevPage() {199        handleCalendarPrevPage({200            fixedWeeks: this.opts.fixedWeeks.current,201            locale: this.opts.locale.current,202            numberOfMonths: this.opts.numberOfMonths.current,203            pagedNavigation: this.opts.pagedNavigation.current,204            setMonths: this.setMonths,205            setPlaceholder: (date) => (this.opts.placeholder.current = date),206            weekStartsOn: this.opts.weekStartsOn.current,207            months: this.months,208        });209    }210    nextYear() {211        this.opts.placeholder.current = this.opts.placeholder.current.add({ years: 1 });212    }213    prevYear() {214        this.opts.placeholder.current = this.opts.placeholder.current.subtract({ years: 1 });215    }216    setYear(year) {217        this.opts.placeholder.current = this.opts.placeholder.current.set({ year });218    }219    setMonth(month) {220        this.opts.placeholder.current = this.opts.placeholder.current.set({ month });221    }222    isNextButtonDisabled = $derived.by(() => {223        return getIsNextButtonDisabled({224            maxValue: this.opts.maxValue.current,225            months: this.months,226            disabled: this.opts.disabled.current,227        });228    });229    isPrevButtonDisabled = $derived.by(() => {230        return getIsPrevButtonDisabled({231            minValue: this.opts.minValue.current,232            months: this.months,233            disabled: this.opts.disabled.current,234        });235    });236    isInvalid = $derived.by(() => {237        const value = this.opts.value.current;238        const isDateDisabled = this.opts.isDateDisabled.current;239        const isDateUnavailable = this.opts.isDateUnavailable.current;240        if (Array.isArray(value)) {241            if (!value.length)242                return false;243            for (const date of value) {244                if (isDateDisabled(date))245                    return true;246                if (isDateUnavailable(date))247                    return true;248            }249        }250        else {251            if (!value)252                return false;253            if (isDateDisabled(value))254                return true;255            if (isDateUnavailable(value))256                return true;257        }258        return false;259    });260    headingValue = $derived.by(() => {261        this.opts.monthFormat.current;262        this.opts.yearFormat.current;263        return getCalendarHeadingValue({264            months: this.months,265            formatter: this.formatter,266            locale: this.opts.locale.current,267        });268    });269    fullCalendarLabel = $derived.by(() => {270        return `${this.opts.calendarLabel.current} ${this.headingValue}`;271    });272    isOutsideVisibleMonths(date) {273        return !this.visibleMonths.some((month) => isSameMonth(date, month));274    }275    isDateDisabled(date) {276        if (this.opts.isDateDisabled.current(date) || this.opts.disabled.current)277            return true;278        const minValue = this.opts.minValue.current;279        const maxValue = this.opts.maxValue.current;280        if (minValue && isBefore(date, minValue))281            return true;282        if (maxValue && isBefore(maxValue, date))283            return true;284        return false;285    }286    isDateSelected(date) {287        const value = this.opts.value.current;288        if (Array.isArray(value)) {289            return value.some((d) => isSameDay(d, date));290        }291        else if (!value) {292            return false;293        }294        return isSameDay(value, date);295    }296    shiftFocus(node, add) {297        return shiftCalendarFocus({298            node,299            add,300            placeholder: this.opts.placeholder,301            calendarNode: this.opts.ref.current,302            isPrevButtonDisabled: this.isPrevButtonDisabled,303            isNextButtonDisabled: this.isNextButtonDisabled,304            months: this.months,305            numberOfMonths: this.opts.numberOfMonths.current,306        });307    }308    #isMultipleSelectionValid(selectedDates) {309        // only validate for multiple type and when maxDays is set310        if (this.opts.type.current !== "multiple")311            return true;312        if (!this.opts.maxDays.current)313            return true;314        const selectedCount = selectedDates.length;315        if (this.opts.maxDays.current && selectedCount > this.opts.maxDays.current)316            return false;317        return true;318    }319    handleCellClick(_, date) {320        if (this.opts.readonly.current ||321            this.opts.isDateDisabled.current?.(date) ||322            this.opts.isDateUnavailable.current?.(date)) {323            return;324        }325        const prev = this.opts.value.current;326        const multiple = this.opts.type.current === "multiple";327        if (multiple) {328            if (Array.isArray(prev) || prev === undefined) {329                this.opts.value.current = this.handleMultipleUpdate(prev, date);330            }331        }332        else if (!Array.isArray(prev)) {333            const next = this.handleSingleUpdate(prev, date);334            if (!next) {335                this.announcer.announce("Selected date is now empty.", "polite", 5000);336            }337            else {338                this.announcer.announce(`Selected Date: ${this.formatter.selectedDate(next, false)}`, "polite");339            }340            this.opts.value.current = getDateWithPreviousTime(next, prev);341            if (next !== undefined) {342                this.opts.onDateSelect?.current?.();343            }344        }345    }346    handleMultipleUpdate(prev, date) {347        if (!prev) {348            const newSelection = [date];349            return this.#isMultipleSelectionValid(newSelection) ? newSelection : [date];350        }351        if (!Array.isArray(prev)) {352            if (DEV)353                throw new Error("Invalid value for multiple prop.");354            return;355        }356        const index = prev.findIndex((d) => isSameDay(d, date));357        const preventDeselect = this.opts.preventDeselect.current;358        if (index === -1) {359            // adding a new date - check if it would be valid360            const newSelection = [...prev, date];361            if (this.#isMultipleSelectionValid(newSelection)) {362                return newSelection;363            }364            else {365                // reset to just the newly selected date when constraints are violated366                return [date];367            }368        }369        else if (preventDeselect) {370            return prev;371        }372        else {373            const next = prev.filter((d) => !isSameDay(d, date));374            if (!next.length) {375                this.opts.placeholder.current = date;376                return undefined;377            }378            return next;379        }380    }381    handleSingleUpdate(prev, date) {382        if (Array.isArray(prev)) {383            if (DEV)384                throw new Error("Invalid value for single prop.");385        }386        if (!prev)387            return date;388        const preventDeselect = this.opts.preventDeselect.current;389        if (!preventDeselect && isSameDay(prev, date)) {390            this.opts.placeholder.current = date;391            return undefined;392        }393        return date;394    }395    onkeydown(event) {396        handleCalendarKeydown({397            event,398            handleCellClick: this.handleCellClick,399            shiftFocus: this.shiftFocus,400            placeholderValue: this.opts.placeholder.current,401        });402    }403    snippetProps = $derived.by(() => ({404        months: this.months,405        weekdays: this.weekdays,406    }));407    getBitsAttr = (part) => {408        return calendarAttrs.getAttr(part);409    };410    props = $derived.by(() => ({411        ...getCalendarElementProps({412            fullCalendarLabel: this.fullCalendarLabel,413            id: this.opts.id.current,414            isInvalid: this.isInvalid,415            disabled: this.opts.disabled.current,416            readonly: this.opts.readonly.current,417        }),418        [this.getBitsAttr("root")]: "",419        //420        onkeydown: this.onkeydown,421        ...this.attachment,422    }));423}424export class CalendarHeadingState {425    static create(opts) {426        return new CalendarHeadingState(opts, CalendarRootContext.get());427    }428    opts;429    root;430    attachment;431    constructor(opts, root) {432        this.opts = opts;433        this.root = root;434        this.attachment = attachRef(this.opts.ref);435    }436    props = $derived.by(() => ({437        id: this.opts.id.current,438        "aria-hidden": boolToStrTrueOrUndef(true),439        "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),440        "data-readonly": boolToEmptyStrOrUndef(this.root.opts.readonly.current),441        [this.root.getBitsAttr("heading")]: "",442        ...this.attachment,443    }));444}445const CalendarCellContext = new Context("Calendar.Cell | RangeCalendar.Cell");446export class CalendarCellState {447    static create(opts) {448        return CalendarCellContext.set(new CalendarCellState(opts, CalendarRootContext.get()));449    }450    opts;451    root;452    cellDate = $derived.by(() => toDate(this.opts.date.current));453    isUnavailable = $derived.by(() => this.root.opts.isDateUnavailable.current(this.opts.date.current));454    isDateToday = $derived.by(() => isToday(this.opts.date.current, getLocalTimeZone()));455    isOutsideMonth = $derived.by(() => !isSameMonth(this.opts.date.current, this.opts.month.current));456    isOutsideVisibleMonths = $derived.by(() => this.root.isOutsideVisibleMonths(this.opts.date.current));457    isDisabled = $derived.by(() => this.root.isDateDisabled(this.opts.date.current) ||458        (this.isOutsideMonth && this.root.opts.disableDaysOutsideMonth.current));459    isFocusedDate = $derived.by(() => isSameDay(this.opts.date.current, this.root.opts.placeholder.current));460    isSelectedDate = $derived.by(() => this.root.isDateSelected(this.opts.date.current));461    labelText = $derived.by(() => this.root.formatter.custom(this.cellDate, {462        weekday: "long",463        month: "long",464        day: "numeric",465        year: "numeric",466    }));467    attachment;468    constructor(opts, root) {469        this.opts = opts;470        this.root = root;471        this.attachment = attachRef(this.opts.ref);472    }473    snippetProps = $derived.by(() => ({474        disabled: this.isDisabled,475        unavailable: this.isUnavailable,476        selected: this.isSelectedDate,477        day: `${this.opts.date.current.day}`,478    }));479    ariaDisabled = $derived.by(() => {480        return (this.isDisabled ||481            (this.isOutsideMonth && this.root.opts.disableDaysOutsideMonth.current) ||482            this.isUnavailable);483    });484    sharedDataAttrs = $derived.by(() => ({485        "data-unavailable": boolToEmptyStrOrUndef(this.isUnavailable),486        "data-today": this.isDateToday ? "" : undefined,487        "data-outside-month": this.isOutsideMonth ? "" : undefined,488        "data-outside-visible-months": this.isOutsideVisibleMonths ? "" : undefined,489        "data-focused": this.isFocusedDate ? "" : undefined,490        "data-selected": boolToEmptyStrOrUndef(this.isSelectedDate),491        "data-value": this.opts.date.current.toString(),492        "data-type": getDateValueType(this.opts.date.current),493        "data-disabled": boolToEmptyStrOrUndef(this.isDisabled ||494            (this.isOutsideMonth && this.root.opts.disableDaysOutsideMonth.current)),495    }));496    props = $derived.by(() => ({497        id: this.opts.id.current,498        role: "gridcell",499        "aria-selected": boolToStr(this.isSelectedDate),500        "aria-disabled": boolToStr(this.ariaDisabled),501        ...this.sharedDataAttrs,502        [this.root.getBitsAttr("cell")]: "",503        ...this.attachment,504    }));505}506export class CalendarDayState {507    static create(opts) {508        return new CalendarDayState(opts, CalendarCellContext.get());509    }510    opts;511    cell;512    attachment;513    constructor(opts, cell) {514        this.opts = opts;515        this.cell = cell;516        this.onclick = this.onclick.bind(this);517        this.attachment = attachRef(this.opts.ref);518    }519    #tabindex = $derived.by(() => (this.cell.isOutsideMonth && this.cell.root.opts.disableDaysOutsideMonth.current) ||520        this.cell.isDisabled521        ? undefined522        : this.cell.isFocusedDate523            ? 0524            : -1);525    onclick(e) {526        if (this.cell.isDisabled)527            return;528        this.cell.root.handleCellClick(e, this.cell.opts.date.current);529    }530    snippetProps = $derived.by(() => ({531        disabled: this.cell.isDisabled,532        unavailable: this.cell.isUnavailable,533        selected: this.cell.isSelectedDate,534        day: `${this.cell.opts.date.current.day}`,535    }));536    props = $derived.by(() => ({537        id: this.opts.id.current,538        role: "button",539        "aria-label": this.cell.labelText,540        "aria-disabled": boolToStr(this.cell.ariaDisabled),541        ...this.cell.sharedDataAttrs,542        tabindex: this.#tabindex,543        [this.cell.root.getBitsAttr("day")]: "",544        // Shared logic for range calendar and calendar545        "data-bits-day": "",546        //547        onclick: this.onclick,548        ...this.attachment,549    }));550}551export class CalendarNextButtonState {552    static create(opts) {553        return new CalendarNextButtonState(opts, CalendarRootContext.get());554    }555    opts;556    root;557    isDisabled = $derived.by(() => this.root.isNextButtonDisabled);558    attachment;559    constructor(opts, root) {560        this.opts = opts;561        this.root = root;562        this.onclick = this.onclick.bind(this);563        this.attachment = attachRef(this.opts.ref);564    }565    onclick(_) {566        if (this.isDisabled)567            return;568        this.root.nextPage();569    }570    props = $derived.by(() => ({571        id: this.opts.id.current,572        role: "button",573        type: "button",574        "aria-label": "Next",575        "aria-disabled": boolToStr(this.isDisabled),576        "data-disabled": boolToEmptyStrOrUndef(this.isDisabled),577        disabled: this.isDisabled,578        [this.root.getBitsAttr("next-button")]: "",579        //580        onclick: this.onclick,581        ...this.attachment,582    }));583}584export class CalendarPrevButtonState {585    static create(opts) {586        return new CalendarPrevButtonState(opts, CalendarRootContext.get());587    }588    opts;589    root;590    isDisabled = $derived.by(() => this.root.isPrevButtonDisabled);591    attachment;592    constructor(opts, root) {593        this.opts = opts;594        this.root = root;595        this.onclick = this.onclick.bind(this);596        this.attachment = attachRef(this.opts.ref);597    }598    onclick(_) {599        if (this.isDisabled)600            return;601        this.root.prevPage();602    }603    props = $derived.by(() => ({604        id: this.opts.id.current,605        role: "button",606        type: "button",607        "aria-label": "Previous",608        "aria-disabled": boolToStr(this.isDisabled),609        "data-disabled": boolToEmptyStrOrUndef(this.isDisabled),610        disabled: this.isDisabled,611        [this.root.getBitsAttr("prev-button")]: "",612        //613        onclick: this.onclick,614        ...this.attachment,615    }));616}617export class CalendarGridState {618    static create(opts) {619        return new CalendarGridState(opts, CalendarRootContext.get());620    }621    opts;622    root;623    attachment;624    constructor(opts, root) {625        this.opts = opts;626        this.root = root;627        this.attachment = attachRef(this.opts.ref);628    }629    props = $derived.by(() => ({630        id: this.opts.id.current,631        tabindex: -1,632        role: "grid",633        "aria-readonly": boolToStr(this.root.opts.readonly.current),634        "aria-disabled": boolToStr(this.root.opts.disabled.current),635        "data-readonly": boolToEmptyStrOrUndef(this.root.opts.readonly.current),636        "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),637        [this.root.getBitsAttr("grid")]: "",638        ...this.attachment,639    }));640}641export class CalendarGridBodyState {642    static create(opts) {643        return new CalendarGridBodyState(opts, CalendarRootContext.get());644    }645    opts;646    root;647    attachment;648    constructor(opts, root) {649        this.opts = opts;650        this.root = root;651        this.attachment = attachRef(this.opts.ref);652    }653    props = $derived.by(() => ({654        id: this.opts.id.current,655        "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),656        "data-readonly": boolToEmptyStrOrUndef(this.root.opts.readonly.current),657        [this.root.getBitsAttr("grid-body")]: "",658        ...this.attachment,659    }));660}661export class CalendarGridHeadState {662    static create(opts) {663        return new CalendarGridHeadState(opts, CalendarRootContext.get());664    }665    opts;666    root;667    attachment;668    constructor(opts, root) {669        this.opts = opts;670        this.root = root;671        this.attachment = attachRef(this.opts.ref);672    }673    props = $derived.by(() => ({674        id: this.opts.id.current,675        "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),676        "data-readonly": boolToEmptyStrOrUndef(this.root.opts.readonly.current),677        [this.root.getBitsAttr("grid-head")]: "",678        ...this.attachment,679    }));680}681export class CalendarGridRowState {682    static create(opts) {683        return new CalendarGridRowState(opts, CalendarRootContext.get());684    }685    opts;686    root;687    attachment;688    constructor(opts, root) {689        this.opts = opts;690        this.root = root;691        this.attachment = attachRef(this.opts.ref);692    }693    props = $derived.by(() => ({694        id: this.opts.id.current,695        "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),696        "data-readonly": boolToEmptyStrOrUndef(this.root.opts.readonly.current),697        [this.root.getBitsAttr("grid-row")]: "",698        ...this.attachment,699    }));700}701export class CalendarHeadCellState {702    static create(opts) {703        return new CalendarHeadCellState(opts, CalendarRootContext.get());704    }705    opts;706    root;707    attachment;708    constructor(opts, root) {709        this.opts = opts;710        this.root = root;711        this.attachment = attachRef(this.opts.ref);712    }713    props = $derived.by(() => ({714        id: this.opts.id.current,715        "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),716        "data-readonly": boolToEmptyStrOrUndef(this.root.opts.readonly.current),717        [this.root.getBitsAttr("head-cell")]: "",718        ...this.attachment,719    }));720}721export class CalendarHeaderState {722    static create(opts) {723        return new CalendarHeaderState(opts, CalendarRootContext.get());724    }725    opts;726    root;727    attachment;728    constructor(opts, root) {729        this.opts = opts;730        this.root = root;731        this.attachment = attachRef(this.opts.ref);732    }733    props = $derived.by(() => ({734        id: this.opts.id.current,735        "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),736        "data-readonly": boolToEmptyStrOrUndef(this.root.opts.readonly.current),737        [this.root.getBitsAttr("header")]: "",738        ...this.attachment,739    }));740}741export class CalendarMonthSelectState {742    static create(opts) {743        return new CalendarMonthSelectState(opts, CalendarRootContext.get());744    }745    opts;746    root;747    attachment;748    constructor(opts, root) {749        this.opts = opts;750        this.root = root;751        this.onchange = this.onchange.bind(this);752        this.attachment = attachRef(this.opts.ref);753    }754    monthItems = $derived.by(() => {755        this.root.opts.locale.current;756        const monthNumbers = this.opts.months.current;757        const monthFormat = this.opts.monthFormat.current;758        const months = [];759        for (const month of monthNumbers) {760            // create a date with the current year and the month to get localized name761            const date = this.root.opts.placeholder.current.set({ month });762            let label;763            if (typeof monthFormat === "function") {764                label = monthFormat(month);765            }766            else {767                label = this.root.formatter.custom(toDate(date), { month: monthFormat });768            }769            months.push({770                value: month,771                label,772            });773        }774        return months;775    });776    currentMonth = $derived.by(() => this.root.opts.placeholder.current.month);777    isDisabled = $derived.by(() => this.root.opts.disabled.current || this.opts.disabled.current);778    snippetProps = $derived.by(() => {779        return {780            monthItems: this.monthItems,781            selectedMonthItem: this.monthItems.find((month) => month.value === this.currentMonth),782        };783    });784    onchange(event) {785        if (this.isDisabled)786            return;787        const target = event.target;788        const month = parseInt(target.value, 10);789        if (!isNaN(month)) {790            this.root.opts.placeholder.current = this.root.opts.placeholder.current.set({ month });791        }792    }793    props = $derived.by(() => ({794        id: this.opts.id.current,795        value: this.currentMonth,796        disabled: this.isDisabled,797        "data-disabled": boolToEmptyStrOrUndef(this.isDisabled),798        [this.root.getBitsAttr("month-select")]: "",799        //800        onchange: this.onchange,801        ...this.attachment,802    }));803}804export class CalendarYearSelectState {805    static create(opts) {806        return new CalendarYearSelectState(opts, CalendarRootContext.get());807    }808    opts;809    root;810    attachment;811    constructor(opts, root) {812        this.opts = opts;813        this.root = root;814        this.onchange = this.onchange.bind(this);815        this.attachment = attachRef(this.opts.ref);816    }817    years = $derived.by(() => {818        if (this.opts.years.current && this.opts.years.current.length)819            return this.opts.years.current;820        return this.root.defaultYears;821    });822    yearItems = $derived.by(() => {823        this.root.opts.locale.current;824        const yearFormat = this.opts.yearFormat.current;825        const localYears = [];826        for (const year of this.years) {827            // create a date with the year to get localized formatting828            const date = this.root.opts.placeholder.current.set({ year });829            let label;830            if (typeof yearFormat === "function") {831                label = yearFormat(year);832            }833            else {834                label = this.root.formatter.custom(toDate(date), { year: yearFormat });835            }836            localYears.push({837                value: year,838                label,839            });840        }841        return localYears;842    });843    currentYear = $derived.by(() => this.root.opts.placeholder.current.year);844    isDisabled = $derived.by(() => this.root.opts.disabled.current || this.opts.disabled.current);845    snippetProps = $derived.by(() => {846        return {847            yearItems: this.yearItems,848            selectedYearItem: this.yearItems.find((year) => year.value === this.currentYear),849        };850    });851    onchange(event) {852        if (this.isDisabled)853            return;854        const target = event.target;855        const year = parseInt(target.value, 10);856        if (!isNaN(year)) {857            this.root.opts.placeholder.current = this.root.opts.placeholder.current.set({ year });858        }859    }860    props = $derived.by(() => ({861        id: this.opts.id.current,862        value: this.currentYear,863        disabled: this.isDisabled,864        "data-disabled": boolToEmptyStrOrUndef(this.isDisabled),865        [this.root.getBitsAttr("year-select")]: "",866        //867        onchange: this.onchange,868        ...this.attachment,869    }));870}871