@triptease/tt-date-range-picker 6.4.0 → 6.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/src/TtDateRangePicker.js +3 -0
- package/dist/cjs/src/TtDateRangePicker.js.map +1 -1
- package/dist/cjs/src/styles.js +1 -0
- package/dist/cjs/src/styles.js.map +1 -1
- package/dist/cjs/src/types.js.map +1 -1
- package/dist/esm/src/TtDateRangePicker.d.ts +1 -0
- package/dist/esm/src/TtDateRangePicker.js +3 -0
- package/dist/esm/src/TtDateRangePicker.js.map +1 -1
- package/dist/esm/src/styles.js +1 -0
- package/dist/esm/src/styles.js.map +1 -1
- package/dist/esm/src/types.d.ts +5 -2
- package/dist/esm/src/types.js.map +1 -1
- package/package.json +1 -1
|
@@ -68,6 +68,9 @@ class TtDateRangePicker extends lit_1.LitElement {
|
|
|
68
68
|
get _maxDateTime() {
|
|
69
69
|
return this.maxDate ? luxon_1.DateTime.fromISO(this.maxDate) : undefined;
|
|
70
70
|
}
|
|
71
|
+
get form() {
|
|
72
|
+
return this.internals.form;
|
|
73
|
+
}
|
|
71
74
|
get _formValue() {
|
|
72
75
|
return JSON.stringify({
|
|
73
76
|
startDate: this._startDateTime?.toISODate(),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TtDateRangePicker.js","sourceRoot":"","sources":["../../../src/TtDateRangePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { property, query, state } from 'lit/decorators.js';\nimport { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { DateTime } from 'luxon';\nimport { TtDialog } from '@triptease/tt-dialog';\nimport { Calendar } from '@triptease/tt-calendar';\nimport { DateRange, DateRangeSelectionEvent } from '@triptease/tt-calendar/date-selection-context.js';\nimport { calendarIcon } from '@triptease/icons';\nimport { DateRangeInput } from './DateRangeInput/DateRangeInput.js';\nimport { styles } from './styles.js';\n\nexport class TtDateRangePicker extends LitElement {\n public internals: ReturnType<typeof this.attachInternals>;\n\n constructor() {\n super();\n this.internals = this.attachInternals();\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener('date-range-selection', this.onChange);\n this.addEventListener('dialog-open', this._onDialogOpen);\n this.addEventListener('dialog-close', this._onDialogClose);\n this.addEventListener('focusout', this.onFocusOut);\n this.addEventListener('focus', this._onFocus);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('date-range-selection', this.onChange);\n this.removeEventListener('dialog-open', this._onDialogOpen);\n this.removeEventListener('dialog-close', this._onDialogClose);\n this.removeEventListener('focusout', this.onFocusOut);\n this.removeEventListener('focus', this._onFocus);\n }\n\n static formAssociated = true;\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n static styles = [\n styles,\n css`\n [part='controls'] {\n min-width: 35.3ch;\n }\n `,\n ];\n\n @query('tt-calendar')\n calendar!: Calendar;\n\n @query('tt-dialog')\n dialog!: TtDialog;\n\n @property({\n type: String,\n })\n public start?: string;\n\n @property({\n type: String,\n })\n public end?: string;\n\n @property({ type: Number })\n public minDays?: number;\n\n @property({ type: Number })\n public maxDays?: number;\n\n @property({\n type: String,\n })\n public minDate?: string;\n\n @property({\n type: String,\n })\n public maxDate?: string;\n\n @property({ type: Boolean, attribute: 'open-left' })\n public openLeft = false;\n\n @property({ type: Boolean })\n public disabled = false;\n\n // Internal DateTime properties for calculations\n private get _startDateTime(): DateTime | undefined {\n return this.start ? DateTime.fromISO(this.start) : undefined;\n }\n\n private get _endDateTime(): DateTime | undefined {\n return this.end ? DateTime.fromISO(this.end) : undefined;\n }\n\n private get _minDateTime(): DateTime | undefined {\n return this.minDate ? DateTime.fromISO(this.minDate) : undefined;\n }\n\n private get _maxDateTime(): DateTime | undefined {\n return this.maxDate ? DateTime.fromISO(this.maxDate) : undefined;\n }\n\n @state()\n private _open: boolean = false;\n\n @query('tt-date-range-input')\n dateRangeInput!: DateRangeInput;\n\n private get _formValue(): string | null {\n return JSON.stringify({\n startDate: this._startDateTime?.toISODate(),\n endDate: this._endDateTime?.toISODate(),\n });\n }\n\n public get value(): DateRange | undefined {\n return this.end || this.start ? { startDate: this.start, endDate: this.end } : undefined;\n }\n\n showCalendar() {\n this.dialog.toggleVisibility();\n if (this.openLeft) {\n this.style.setProperty('--calendar-left-distance', '-146px');\n }\n }\n\n private _onDialogOpen = () => {\n this._open = true;\n };\n\n private _onDialogClose = () => {\n this._open = false;\n };\n\n public onFocusOut = (event: FocusEvent) => {\n if (!this._open) return;\n\n const target = (event.relatedTarget ?? event.explicitOriginalTarget) as HTMLElement | null;\n\n if (!this.contains(target)) {\n this.dialog.hide();\n }\n };\n\n protected updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n if (changedProperties.has('start') || changedProperties.has('end')) {\n this.internals.setFormValue(this._formValue);\n }\n\n if (changedProperties.has('start') || changedProperties.has('end')) {\n this.validate();\n }\n\n if (changedProperties.has('disabled')) {\n if (this.disabled) {\n this.internals.setFormValue(null);\n this.internals.states.add('disabled');\n this.inert = true;\n } else {\n this.internals.states.delete('disabled');\n this.internals.setFormValue(this._formValue);\n this.inert = false;\n }\n }\n }\n\n private onChange(e: Event) {\n if (!DateRangeSelectionEvent.is(e) && e.type !== 'change') return;\n\n if (DateRangeSelectionEvent.is(e)) {\n this.start = e.detail.startDate!;\n this.end = e.detail.endDate!;\n } else if (e.type === 'change') {\n const { value } = e.target as DateRangeInput;\n this.start = value!.startDate ? value!.startDate : undefined;\n this.end = value!.endDate ? value!.endDate : undefined;\n }\n\n this.dispatchEvent(new InputEvent('change'));\n this.dialog.hide();\n }\n\n private _onFocus = () => {\n this.dateRangeInput.focus();\n };\n\n private validate() {\n const wasValid = this.internals.validity.valid;\n const oldMessage = this.internals.validationMessage;\n this.internals.setValidity({});\n\n if (this._endDateTime && this._startDateTime) {\n if (this._endDateTime < this._startDateTime) {\n this.internals.setValidity({ customError: true }, 'End date must be after start date');\n return;\n }\n\n const differenceInDays = this._endDateTime.diff(this._startDateTime!).as('days');\n const minDaysAreValid = !this.minDays || differenceInDays >= this.minDays;\n if (!minDaysAreValid) {\n this.internals.setValidity({ rangeUnderflow: true }, `Date range must be at least ${this.minDays} days`);\n return;\n }\n const maxDaysAreValid = !this.maxDays || differenceInDays <= this.maxDays;\n if (!maxDaysAreValid) {\n this.internals.setValidity({ rangeOverflow: true }, `Date range must be at most ${this.maxDays} days`);\n return;\n }\n const minDateIsValid =\n !this._minDateTime || this._startDateTime > this._minDateTime || this._startDateTime.equals(this._minDateTime);\n if (!minDateIsValid) {\n this.internals.setValidity(\n { rangeUnderflow: true },\n `Start date should be equal or after ${this._minDateTime?.toLocaleString({ month: 'short', day: 'numeric', year: 'numeric' })}`\n );\n return;\n }\n const maxDateIsValid =\n !this._maxDateTime || this._endDateTime.equals(this._maxDateTime) || this._endDateTime < this._maxDateTime;\n if (!maxDateIsValid) {\n this.internals.setValidity(\n { rangeOverflow: true },\n `End date should be before or equal to ${this._maxDateTime?.toLocaleString({ month: 'short', day: 'numeric', year: 'numeric' })}`\n );\n return;\n }\n }\n if (wasValid !== this.internals.validity.valid || oldMessage !== this.internals.validationMessage) {\n this.requestUpdate();\n }\n }\n\n render() {\n return html`\n <div part=\"controls\" aria-invalid=${!this.internals.validity.valid}>\n <tt-date-range-input @change=${this.onChange} .value=\"${this.value}\"></tt-date-range-input>\n <button name=\"show calendar\" @click=${this.showCalendar} class=\"show-calendar\">\n ${unsafeSVG(calendarIcon)}\n </button>\n </div>\n <tt-dialog name=\"calendar\" aria-label=\"Choose date range\" part=\"dialog\">\n <tt-calendar\n max-date=${this.maxDate}\n min-date=${this.minDate}\n max-days=${this.maxDays}\n @date-range-selection=${this.onChange}\n .value=\"${this.value}\"\n range\n part=\"calendar\"\n ></tt-calendar>\n <tt-side-panel>\n <slot name=\"preset\" slot=\"side-preset\"></slot>\n </tt-side-panel>\n </tt-dialog>\n <div class=\"errormessage\" id=\"error-msg-${this.id}\" role=\"alert\" aria-atomic=\"true\" part=\"error\">\n ${this.internals.validity.valid ? nothing : this.internals.validationMessage}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-date-range-picker': TtDateRangePicker;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"TtDateRangePicker.js","sourceRoot":"","sources":["../../../src/TtDateRangePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { property, query, state } from 'lit/decorators.js';\nimport { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { DateTime } from 'luxon';\nimport { TtDialog } from '@triptease/tt-dialog';\nimport { Calendar } from '@triptease/tt-calendar';\nimport { DateRange, DateRangeSelectionEvent } from '@triptease/tt-calendar/date-selection-context.js';\nimport { calendarIcon } from '@triptease/icons';\nimport { DateRangeInput } from './DateRangeInput/DateRangeInput.js';\nimport { styles } from './styles.js';\n\nexport class TtDateRangePicker extends LitElement {\n public internals: ReturnType<typeof this.attachInternals>;\n\n constructor() {\n super();\n this.internals = this.attachInternals();\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener('date-range-selection', this.onChange);\n this.addEventListener('dialog-open', this._onDialogOpen);\n this.addEventListener('dialog-close', this._onDialogClose);\n this.addEventListener('focusout', this.onFocusOut);\n this.addEventListener('focus', this._onFocus);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('date-range-selection', this.onChange);\n this.removeEventListener('dialog-open', this._onDialogOpen);\n this.removeEventListener('dialog-close', this._onDialogClose);\n this.removeEventListener('focusout', this.onFocusOut);\n this.removeEventListener('focus', this._onFocus);\n }\n\n static formAssociated = true;\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n static styles = [\n styles,\n css`\n [part='controls'] {\n min-width: 35.3ch;\n }\n `,\n ];\n\n @query('tt-calendar')\n calendar!: Calendar;\n\n @query('tt-dialog')\n dialog!: TtDialog;\n\n @property({\n type: String,\n })\n public start?: string;\n\n @property({\n type: String,\n })\n public end?: string;\n\n @property({ type: Number })\n public minDays?: number;\n\n @property({ type: Number })\n public maxDays?: number;\n\n @property({\n type: String,\n })\n public minDate?: string;\n\n @property({\n type: String,\n })\n public maxDate?: string;\n\n @property({ type: Boolean, attribute: 'open-left' })\n public openLeft = false;\n\n @property({ type: Boolean })\n public disabled = false;\n\n // Internal DateTime properties for calculations\n private get _startDateTime(): DateTime | undefined {\n return this.start ? DateTime.fromISO(this.start) : undefined;\n }\n\n private get _endDateTime(): DateTime | undefined {\n return this.end ? DateTime.fromISO(this.end) : undefined;\n }\n\n private get _minDateTime(): DateTime | undefined {\n return this.minDate ? DateTime.fromISO(this.minDate) : undefined;\n }\n\n private get _maxDateTime(): DateTime | undefined {\n return this.maxDate ? DateTime.fromISO(this.maxDate) : undefined;\n }\n\n @state()\n private _open: boolean = false;\n\n @query('tt-date-range-input')\n dateRangeInput!: DateRangeInput;\n\n get form(): HTMLFormElement | null {\n return this.internals.form;\n }\n\n private get _formValue(): string | null {\n return JSON.stringify({\n startDate: this._startDateTime?.toISODate(),\n endDate: this._endDateTime?.toISODate(),\n });\n }\n\n public get value(): DateRange | undefined {\n return this.end || this.start ? { startDate: this.start, endDate: this.end } : undefined;\n }\n\n showCalendar() {\n this.dialog.toggleVisibility();\n if (this.openLeft) {\n this.style.setProperty('--calendar-left-distance', '-146px');\n }\n }\n\n private _onDialogOpen = () => {\n this._open = true;\n };\n\n private _onDialogClose = () => {\n this._open = false;\n };\n\n public onFocusOut = (event: FocusEvent) => {\n if (!this._open) return;\n\n const target = (event.relatedTarget ?? event.explicitOriginalTarget) as HTMLElement | null;\n\n if (!this.contains(target)) {\n this.dialog.hide();\n }\n };\n\n protected updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n if (changedProperties.has('start') || changedProperties.has('end')) {\n this.internals.setFormValue(this._formValue);\n }\n\n if (changedProperties.has('start') || changedProperties.has('end')) {\n this.validate();\n }\n\n if (changedProperties.has('disabled')) {\n if (this.disabled) {\n this.internals.setFormValue(null);\n this.internals.states.add('disabled');\n this.inert = true;\n } else {\n this.internals.states.delete('disabled');\n this.internals.setFormValue(this._formValue);\n this.inert = false;\n }\n }\n }\n\n private onChange(e: Event) {\n if (!DateRangeSelectionEvent.is(e) && e.type !== 'change') return;\n\n if (DateRangeSelectionEvent.is(e)) {\n this.start = e.detail.startDate!;\n this.end = e.detail.endDate!;\n } else if (e.type === 'change') {\n const { value } = e.target as DateRangeInput;\n this.start = value!.startDate ? value!.startDate : undefined;\n this.end = value!.endDate ? value!.endDate : undefined;\n }\n\n this.dispatchEvent(new InputEvent('change'));\n this.dialog.hide();\n }\n\n private _onFocus = () => {\n this.dateRangeInput.focus();\n };\n\n private validate() {\n const wasValid = this.internals.validity.valid;\n const oldMessage = this.internals.validationMessage;\n this.internals.setValidity({});\n\n if (this._endDateTime && this._startDateTime) {\n if (this._endDateTime < this._startDateTime) {\n this.internals.setValidity({ customError: true }, 'End date must be after start date');\n return;\n }\n\n const differenceInDays = this._endDateTime.diff(this._startDateTime!).as('days');\n const minDaysAreValid = !this.minDays || differenceInDays >= this.minDays;\n if (!minDaysAreValid) {\n this.internals.setValidity({ rangeUnderflow: true }, `Date range must be at least ${this.minDays} days`);\n return;\n }\n const maxDaysAreValid = !this.maxDays || differenceInDays <= this.maxDays;\n if (!maxDaysAreValid) {\n this.internals.setValidity({ rangeOverflow: true }, `Date range must be at most ${this.maxDays} days`);\n return;\n }\n const minDateIsValid =\n !this._minDateTime || this._startDateTime > this._minDateTime || this._startDateTime.equals(this._minDateTime);\n if (!minDateIsValid) {\n this.internals.setValidity(\n { rangeUnderflow: true },\n `Start date should be equal or after ${this._minDateTime?.toLocaleString({ month: 'short', day: 'numeric', year: 'numeric' })}`\n );\n return;\n }\n const maxDateIsValid =\n !this._maxDateTime || this._endDateTime.equals(this._maxDateTime) || this._endDateTime < this._maxDateTime;\n if (!maxDateIsValid) {\n this.internals.setValidity(\n { rangeOverflow: true },\n `End date should be before or equal to ${this._maxDateTime?.toLocaleString({ month: 'short', day: 'numeric', year: 'numeric' })}`\n );\n return;\n }\n }\n if (wasValid !== this.internals.validity.valid || oldMessage !== this.internals.validationMessage) {\n this.requestUpdate();\n }\n }\n\n render() {\n return html`\n <div part=\"controls\" aria-invalid=${!this.internals.validity.valid}>\n <tt-date-range-input @change=${this.onChange} .value=\"${this.value}\"></tt-date-range-input>\n <button name=\"show calendar\" @click=${this.showCalendar} class=\"show-calendar\">\n ${unsafeSVG(calendarIcon)}\n </button>\n </div>\n <tt-dialog name=\"calendar\" aria-label=\"Choose date range\" part=\"dialog\">\n <tt-calendar\n max-date=${this.maxDate}\n min-date=${this.minDate}\n max-days=${this.maxDays}\n @date-range-selection=${this.onChange}\n .value=\"${this.value}\"\n range\n part=\"calendar\"\n ></tt-calendar>\n <tt-side-panel>\n <slot name=\"preset\" slot=\"side-preset\"></slot>\n </tt-side-panel>\n </tt-dialog>\n <div class=\"errormessage\" id=\"error-msg-${this.id}\" role=\"alert\" aria-atomic=\"true\" part=\"error\">\n ${this.internals.validity.valid ? nothing : this.internals.validationMessage}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-date-range-picker': TtDateRangePicker;\n }\n}\n"]}
|
package/dist/cjs/src/styles.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":";;;AAAA,6BAA0B;AAEb,QAAA,MAAM,GAAG,IAAA,SAAG,EAAA
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":";;;AAAA,6BAA0B;AAEb,QAAA,MAAM,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ExB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n position: relative;\n anchor-name: --date-range-picker;\n anchor-scope: --date-range-picker;\n }\n\n :host(:state(disabled)) {\n pointer-events: none;\n opacity: 0.5;\n }\n\n tt-side-panel::part(side-panel) {\n border-right: 1px solid var(--color-border-200);\n }\n\n tt-side-panel:empty {\n display: none;\n }\n\n [part='container'] {\n padding: var(--space-scale-1) var(--space-scale-1-5);\n gap: var(--space-scale-1);\n }\n\n [part='controls'] {\n display: flex;\n border: 1px solid var(--color-border-200);\n border-radius: var(--border-radius);\n width: fit-content;\n height: var(--date-picker-height, fit-content);\n background-color: var(--color-surface-100);\n font-size: var(--font-size-200);\n color: var(--color-text-400);\n align-items: stretch;\n justify-content: space-around;\n padding: 0;\n\n &[aria-invalid='true'] {\n outline: 2px solid var(--color-alert-strong);\n }\n\n button {\n border: 0;\n padding-inline: var(--space-scale-1);\n background-color: transparent;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n align-self: stretch;\n border-left: 1px solid var(--color-border-200);\n box-sizing: border-box;\n color: var(--color-text-400);\n }\n\n &:has(+ tt-dialog[open]) .show-calendar svg,\n .show-calendar:hover svg {\n color: var(--color-primary-400);\n }\n }\n\n [part='dialog']::part(dialog) {\n margin-top: var(--space-scale-1);\n flex-direction: row-reverse;\n }\n\n @supports (position-anchor: --date-range-picker) {\n [part='dialog'] {\n position-anchor: --date-range-picker;\n position: fixed;\n z-index: 1;\n }\n }\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtDateRangePicker } from './TtDateRangePicker.js';\nimport { PresetButton } from './SidePanel/PresetButton.js';\n\ninterface TtDateRangePickerExternalAttributes {\n id?: string;\n start?: string;\n end?: string;\n mindate?: string;\n maxdate?: string;\n mindays?: number;\n maxdays?: number;\n disabled?: boolean;\n 'open-left'?: boolean;\n name?: string;\n}\n\ninterface TtPresetButtonExternalAttributes {\n id?: string;\n slot?: string;\n preset?: string;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-date-range-picker': TtDateRangePicker;\n 'tt-preset-button': PresetButton;\n }\n\n namespace JSX {\n interface IntrinsicElements {\n 'tt-date-range-picker': TtDateRangePickerExternalAttributes & {\n style?: string;\n onChange?: (event:
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtDateRangePicker } from './TtDateRangePicker.js';\nimport { PresetButton } from './SidePanel/PresetButton.js';\n\ninterface TtDateRangePickerExternalAttributes {\n id?: string;\n start?: string;\n end?: string;\n mindate?: string;\n maxdate?: string;\n mindays?: number;\n maxdays?: number;\n disabled?: boolean;\n 'open-left'?: boolean;\n name?: string;\n}\n\ninterface TtPresetButtonExternalAttributes {\n id?: string;\n slot?: string;\n preset?: string;\n}\n\n// Copy of @triptease/react to not cause a circular dependency\ninterface ChangeEvent<T extends HTMLElement> extends Event {\n target: T | null;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-date-range-picker': TtDateRangePicker;\n 'tt-preset-button': PresetButton;\n }\n\n namespace JSX {\n interface IntrinsicElements {\n 'tt-date-range-picker': TtDateRangePickerExternalAttributes & {\n style?: string;\n onChange?: (event: ChangeEvent<TtDateRangePicker>) => void;\n };\n\n 'tt-preset-button': TtPresetButtonExternalAttributes;\n }\n }\n\n namespace React {\n namespace JSX {\n interface IntrinsicElements {\n 'tt-date-range-picker': TtDateRangePickerExternalAttributes & {\n ref?: React.Ref<unknown>;\n children?: React.ReactNode;\n style?: React.CSSProperties;\n onChange?: React.ChangeEventHandler<TtDateRangePicker>;\n };\n\n 'tt-preset-button': TtPresetButtonExternalAttributes & {\n ref?: React.Ref<unknown>;\n children?: React.ReactNode;\n };\n }\n }\n }\n}\n"]}
|
|
@@ -34,6 +34,7 @@ export declare class TtDateRangePicker extends LitElement {
|
|
|
34
34
|
private get _maxDateTime();
|
|
35
35
|
private _open;
|
|
36
36
|
dateRangeInput: DateRangeInput;
|
|
37
|
+
get form(): HTMLFormElement | null;
|
|
37
38
|
private get _formValue();
|
|
38
39
|
get value(): DateRange | undefined;
|
|
39
40
|
showCalendar(): void;
|
|
@@ -65,6 +65,9 @@ export class TtDateRangePicker extends LitElement {
|
|
|
65
65
|
get _maxDateTime() {
|
|
66
66
|
return this.maxDate ? DateTime.fromISO(this.maxDate) : undefined;
|
|
67
67
|
}
|
|
68
|
+
get form() {
|
|
69
|
+
return this.internals.form;
|
|
70
|
+
}
|
|
68
71
|
get _formValue() {
|
|
69
72
|
return JSON.stringify({
|
|
70
73
|
startDate: this._startDateTime?.toISODate(),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TtDateRangePicker.js","sourceRoot":"","sources":["../../../src/TtDateRangePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { property, query, state } from 'lit/decorators.js';\nimport { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { DateTime } from 'luxon';\nimport { TtDialog } from '@triptease/tt-dialog';\nimport { Calendar } from '@triptease/tt-calendar';\nimport { DateRange, DateRangeSelectionEvent } from '@triptease/tt-calendar/date-selection-context.js';\nimport { calendarIcon } from '@triptease/icons';\nimport { DateRangeInput } from './DateRangeInput/DateRangeInput.js';\nimport { styles } from './styles.js';\n\nexport class TtDateRangePicker extends LitElement {\n public internals: ReturnType<typeof this.attachInternals>;\n\n constructor() {\n super();\n this.internals = this.attachInternals();\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener('date-range-selection', this.onChange);\n this.addEventListener('dialog-open', this._onDialogOpen);\n this.addEventListener('dialog-close', this._onDialogClose);\n this.addEventListener('focusout', this.onFocusOut);\n this.addEventListener('focus', this._onFocus);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('date-range-selection', this.onChange);\n this.removeEventListener('dialog-open', this._onDialogOpen);\n this.removeEventListener('dialog-close', this._onDialogClose);\n this.removeEventListener('focusout', this.onFocusOut);\n this.removeEventListener('focus', this._onFocus);\n }\n\n static formAssociated = true;\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n static styles = [\n styles,\n css`\n [part='controls'] {\n min-width: 35.3ch;\n }\n `,\n ];\n\n @query('tt-calendar')\n calendar!: Calendar;\n\n @query('tt-dialog')\n dialog!: TtDialog;\n\n @property({\n type: String,\n })\n public start?: string;\n\n @property({\n type: String,\n })\n public end?: string;\n\n @property({ type: Number })\n public minDays?: number;\n\n @property({ type: Number })\n public maxDays?: number;\n\n @property({\n type: String,\n })\n public minDate?: string;\n\n @property({\n type: String,\n })\n public maxDate?: string;\n\n @property({ type: Boolean, attribute: 'open-left' })\n public openLeft = false;\n\n @property({ type: Boolean })\n public disabled = false;\n\n // Internal DateTime properties for calculations\n private get _startDateTime(): DateTime | undefined {\n return this.start ? DateTime.fromISO(this.start) : undefined;\n }\n\n private get _endDateTime(): DateTime | undefined {\n return this.end ? DateTime.fromISO(this.end) : undefined;\n }\n\n private get _minDateTime(): DateTime | undefined {\n return this.minDate ? DateTime.fromISO(this.minDate) : undefined;\n }\n\n private get _maxDateTime(): DateTime | undefined {\n return this.maxDate ? DateTime.fromISO(this.maxDate) : undefined;\n }\n\n @state()\n private _open: boolean = false;\n\n @query('tt-date-range-input')\n dateRangeInput!: DateRangeInput;\n\n private get _formValue(): string | null {\n return JSON.stringify({\n startDate: this._startDateTime?.toISODate(),\n endDate: this._endDateTime?.toISODate(),\n });\n }\n\n public get value(): DateRange | undefined {\n return this.end || this.start ? { startDate: this.start, endDate: this.end } : undefined;\n }\n\n showCalendar() {\n this.dialog.toggleVisibility();\n if (this.openLeft) {\n this.style.setProperty('--calendar-left-distance', '-146px');\n }\n }\n\n private _onDialogOpen = () => {\n this._open = true;\n };\n\n private _onDialogClose = () => {\n this._open = false;\n };\n\n public onFocusOut = (event: FocusEvent) => {\n if (!this._open) return;\n\n const target = (event.relatedTarget ?? event.explicitOriginalTarget) as HTMLElement | null;\n\n if (!this.contains(target)) {\n this.dialog.hide();\n }\n };\n\n protected updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n if (changedProperties.has('start') || changedProperties.has('end')) {\n this.internals.setFormValue(this._formValue);\n }\n\n if (changedProperties.has('start') || changedProperties.has('end')) {\n this.validate();\n }\n\n if (changedProperties.has('disabled')) {\n if (this.disabled) {\n this.internals.setFormValue(null);\n this.internals.states.add('disabled');\n this.inert = true;\n } else {\n this.internals.states.delete('disabled');\n this.internals.setFormValue(this._formValue);\n this.inert = false;\n }\n }\n }\n\n private onChange(e: Event) {\n if (!DateRangeSelectionEvent.is(e) && e.type !== 'change') return;\n\n if (DateRangeSelectionEvent.is(e)) {\n this.start = e.detail.startDate!;\n this.end = e.detail.endDate!;\n } else if (e.type === 'change') {\n const { value } = e.target as DateRangeInput;\n this.start = value!.startDate ? value!.startDate : undefined;\n this.end = value!.endDate ? value!.endDate : undefined;\n }\n\n this.dispatchEvent(new InputEvent('change'));\n this.dialog.hide();\n }\n\n private _onFocus = () => {\n this.dateRangeInput.focus();\n };\n\n private validate() {\n const wasValid = this.internals.validity.valid;\n const oldMessage = this.internals.validationMessage;\n this.internals.setValidity({});\n\n if (this._endDateTime && this._startDateTime) {\n if (this._endDateTime < this._startDateTime) {\n this.internals.setValidity({ customError: true }, 'End date must be after start date');\n return;\n }\n\n const differenceInDays = this._endDateTime.diff(this._startDateTime!).as('days');\n const minDaysAreValid = !this.minDays || differenceInDays >= this.minDays;\n if (!minDaysAreValid) {\n this.internals.setValidity({ rangeUnderflow: true }, `Date range must be at least ${this.minDays} days`);\n return;\n }\n const maxDaysAreValid = !this.maxDays || differenceInDays <= this.maxDays;\n if (!maxDaysAreValid) {\n this.internals.setValidity({ rangeOverflow: true }, `Date range must be at most ${this.maxDays} days`);\n return;\n }\n const minDateIsValid =\n !this._minDateTime || this._startDateTime > this._minDateTime || this._startDateTime.equals(this._minDateTime);\n if (!minDateIsValid) {\n this.internals.setValidity(\n { rangeUnderflow: true },\n `Start date should be equal or after ${this._minDateTime?.toLocaleString({ month: 'short', day: 'numeric', year: 'numeric' })}`\n );\n return;\n }\n const maxDateIsValid =\n !this._maxDateTime || this._endDateTime.equals(this._maxDateTime) || this._endDateTime < this._maxDateTime;\n if (!maxDateIsValid) {\n this.internals.setValidity(\n { rangeOverflow: true },\n `End date should be before or equal to ${this._maxDateTime?.toLocaleString({ month: 'short', day: 'numeric', year: 'numeric' })}`\n );\n return;\n }\n }\n if (wasValid !== this.internals.validity.valid || oldMessage !== this.internals.validationMessage) {\n this.requestUpdate();\n }\n }\n\n render() {\n return html`\n <div part=\"controls\" aria-invalid=${!this.internals.validity.valid}>\n <tt-date-range-input @change=${this.onChange} .value=\"${this.value}\"></tt-date-range-input>\n <button name=\"show calendar\" @click=${this.showCalendar} class=\"show-calendar\">\n ${unsafeSVG(calendarIcon)}\n </button>\n </div>\n <tt-dialog name=\"calendar\" aria-label=\"Choose date range\" part=\"dialog\">\n <tt-calendar\n max-date=${this.maxDate}\n min-date=${this.minDate}\n max-days=${this.maxDays}\n @date-range-selection=${this.onChange}\n .value=\"${this.value}\"\n range\n part=\"calendar\"\n ></tt-calendar>\n <tt-side-panel>\n <slot name=\"preset\" slot=\"side-preset\"></slot>\n </tt-side-panel>\n </tt-dialog>\n <div class=\"errormessage\" id=\"error-msg-${this.id}\" role=\"alert\" aria-atomic=\"true\" part=\"error\">\n ${this.internals.validity.valid ? nothing : this.internals.validationMessage}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-date-range-picker': TtDateRangePicker;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"TtDateRangePicker.js","sourceRoot":"","sources":["../../../src/TtDateRangePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { property, query, state } from 'lit/decorators.js';\nimport { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { DateTime } from 'luxon';\nimport { TtDialog } from '@triptease/tt-dialog';\nimport { Calendar } from '@triptease/tt-calendar';\nimport { DateRange, DateRangeSelectionEvent } from '@triptease/tt-calendar/date-selection-context.js';\nimport { calendarIcon } from '@triptease/icons';\nimport { DateRangeInput } from './DateRangeInput/DateRangeInput.js';\nimport { styles } from './styles.js';\n\nexport class TtDateRangePicker extends LitElement {\n public internals: ReturnType<typeof this.attachInternals>;\n\n constructor() {\n super();\n this.internals = this.attachInternals();\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener('date-range-selection', this.onChange);\n this.addEventListener('dialog-open', this._onDialogOpen);\n this.addEventListener('dialog-close', this._onDialogClose);\n this.addEventListener('focusout', this.onFocusOut);\n this.addEventListener('focus', this._onFocus);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('date-range-selection', this.onChange);\n this.removeEventListener('dialog-open', this._onDialogOpen);\n this.removeEventListener('dialog-close', this._onDialogClose);\n this.removeEventListener('focusout', this.onFocusOut);\n this.removeEventListener('focus', this._onFocus);\n }\n\n static formAssociated = true;\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n static styles = [\n styles,\n css`\n [part='controls'] {\n min-width: 35.3ch;\n }\n `,\n ];\n\n @query('tt-calendar')\n calendar!: Calendar;\n\n @query('tt-dialog')\n dialog!: TtDialog;\n\n @property({\n type: String,\n })\n public start?: string;\n\n @property({\n type: String,\n })\n public end?: string;\n\n @property({ type: Number })\n public minDays?: number;\n\n @property({ type: Number })\n public maxDays?: number;\n\n @property({\n type: String,\n })\n public minDate?: string;\n\n @property({\n type: String,\n })\n public maxDate?: string;\n\n @property({ type: Boolean, attribute: 'open-left' })\n public openLeft = false;\n\n @property({ type: Boolean })\n public disabled = false;\n\n // Internal DateTime properties for calculations\n private get _startDateTime(): DateTime | undefined {\n return this.start ? DateTime.fromISO(this.start) : undefined;\n }\n\n private get _endDateTime(): DateTime | undefined {\n return this.end ? DateTime.fromISO(this.end) : undefined;\n }\n\n private get _minDateTime(): DateTime | undefined {\n return this.minDate ? DateTime.fromISO(this.minDate) : undefined;\n }\n\n private get _maxDateTime(): DateTime | undefined {\n return this.maxDate ? DateTime.fromISO(this.maxDate) : undefined;\n }\n\n @state()\n private _open: boolean = false;\n\n @query('tt-date-range-input')\n dateRangeInput!: DateRangeInput;\n\n get form(): HTMLFormElement | null {\n return this.internals.form;\n }\n\n private get _formValue(): string | null {\n return JSON.stringify({\n startDate: this._startDateTime?.toISODate(),\n endDate: this._endDateTime?.toISODate(),\n });\n }\n\n public get value(): DateRange | undefined {\n return this.end || this.start ? { startDate: this.start, endDate: this.end } : undefined;\n }\n\n showCalendar() {\n this.dialog.toggleVisibility();\n if (this.openLeft) {\n this.style.setProperty('--calendar-left-distance', '-146px');\n }\n }\n\n private _onDialogOpen = () => {\n this._open = true;\n };\n\n private _onDialogClose = () => {\n this._open = false;\n };\n\n public onFocusOut = (event: FocusEvent) => {\n if (!this._open) return;\n\n const target = (event.relatedTarget ?? event.explicitOriginalTarget) as HTMLElement | null;\n\n if (!this.contains(target)) {\n this.dialog.hide();\n }\n };\n\n protected updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n if (changedProperties.has('start') || changedProperties.has('end')) {\n this.internals.setFormValue(this._formValue);\n }\n\n if (changedProperties.has('start') || changedProperties.has('end')) {\n this.validate();\n }\n\n if (changedProperties.has('disabled')) {\n if (this.disabled) {\n this.internals.setFormValue(null);\n this.internals.states.add('disabled');\n this.inert = true;\n } else {\n this.internals.states.delete('disabled');\n this.internals.setFormValue(this._formValue);\n this.inert = false;\n }\n }\n }\n\n private onChange(e: Event) {\n if (!DateRangeSelectionEvent.is(e) && e.type !== 'change') return;\n\n if (DateRangeSelectionEvent.is(e)) {\n this.start = e.detail.startDate!;\n this.end = e.detail.endDate!;\n } else if (e.type === 'change') {\n const { value } = e.target as DateRangeInput;\n this.start = value!.startDate ? value!.startDate : undefined;\n this.end = value!.endDate ? value!.endDate : undefined;\n }\n\n this.dispatchEvent(new InputEvent('change'));\n this.dialog.hide();\n }\n\n private _onFocus = () => {\n this.dateRangeInput.focus();\n };\n\n private validate() {\n const wasValid = this.internals.validity.valid;\n const oldMessage = this.internals.validationMessage;\n this.internals.setValidity({});\n\n if (this._endDateTime && this._startDateTime) {\n if (this._endDateTime < this._startDateTime) {\n this.internals.setValidity({ customError: true }, 'End date must be after start date');\n return;\n }\n\n const differenceInDays = this._endDateTime.diff(this._startDateTime!).as('days');\n const minDaysAreValid = !this.minDays || differenceInDays >= this.minDays;\n if (!minDaysAreValid) {\n this.internals.setValidity({ rangeUnderflow: true }, `Date range must be at least ${this.minDays} days`);\n return;\n }\n const maxDaysAreValid = !this.maxDays || differenceInDays <= this.maxDays;\n if (!maxDaysAreValid) {\n this.internals.setValidity({ rangeOverflow: true }, `Date range must be at most ${this.maxDays} days`);\n return;\n }\n const minDateIsValid =\n !this._minDateTime || this._startDateTime > this._minDateTime || this._startDateTime.equals(this._minDateTime);\n if (!minDateIsValid) {\n this.internals.setValidity(\n { rangeUnderflow: true },\n `Start date should be equal or after ${this._minDateTime?.toLocaleString({ month: 'short', day: 'numeric', year: 'numeric' })}`\n );\n return;\n }\n const maxDateIsValid =\n !this._maxDateTime || this._endDateTime.equals(this._maxDateTime) || this._endDateTime < this._maxDateTime;\n if (!maxDateIsValid) {\n this.internals.setValidity(\n { rangeOverflow: true },\n `End date should be before or equal to ${this._maxDateTime?.toLocaleString({ month: 'short', day: 'numeric', year: 'numeric' })}`\n );\n return;\n }\n }\n if (wasValid !== this.internals.validity.valid || oldMessage !== this.internals.validationMessage) {\n this.requestUpdate();\n }\n }\n\n render() {\n return html`\n <div part=\"controls\" aria-invalid=${!this.internals.validity.valid}>\n <tt-date-range-input @change=${this.onChange} .value=\"${this.value}\"></tt-date-range-input>\n <button name=\"show calendar\" @click=${this.showCalendar} class=\"show-calendar\">\n ${unsafeSVG(calendarIcon)}\n </button>\n </div>\n <tt-dialog name=\"calendar\" aria-label=\"Choose date range\" part=\"dialog\">\n <tt-calendar\n max-date=${this.maxDate}\n min-date=${this.minDate}\n max-days=${this.maxDays}\n @date-range-selection=${this.onChange}\n .value=\"${this.value}\"\n range\n part=\"calendar\"\n ></tt-calendar>\n <tt-side-panel>\n <slot name=\"preset\" slot=\"side-preset\"></slot>\n </tt-side-panel>\n </tt-dialog>\n <div class=\"errormessage\" id=\"error-msg-${this.id}\" role=\"alert\" aria-atomic=\"true\" part=\"error\">\n ${this.internals.validity.valid ? nothing : this.internals.validationMessage}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-date-range-picker': TtDateRangePicker;\n }\n}\n"]}
|
package/dist/esm/src/styles.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ExB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n position: relative;\n anchor-name: --date-range-picker;\n anchor-scope: --date-range-picker;\n }\n\n :host(:state(disabled)) {\n pointer-events: none;\n opacity: 0.5;\n }\n\n tt-side-panel::part(side-panel) {\n border-right: 1px solid var(--color-border-200);\n }\n\n tt-side-panel:empty {\n display: none;\n }\n\n [part='container'] {\n padding: var(--space-scale-1) var(--space-scale-1-5);\n gap: var(--space-scale-1);\n }\n\n [part='controls'] {\n display: flex;\n border: 1px solid var(--color-border-200);\n border-radius: var(--border-radius);\n width: fit-content;\n height: var(--date-picker-height, fit-content);\n background-color: var(--color-surface-100);\n font-size: var(--font-size-200);\n color: var(--color-text-400);\n align-items: stretch;\n justify-content: space-around;\n padding: 0;\n\n &[aria-invalid='true'] {\n outline: 2px solid var(--color-alert-strong);\n }\n\n button {\n border: 0;\n padding-inline: var(--space-scale-1);\n background-color: transparent;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n align-self: stretch;\n border-left: 1px solid var(--color-border-200);\n box-sizing: border-box;\n color: var(--color-text-400);\n }\n\n &:has(+ tt-dialog[open]) .show-calendar svg,\n .show-calendar:hover svg {\n color: var(--color-primary-400);\n }\n }\n\n [part='dialog']::part(dialog) {\n margin-top: var(--space-scale-1);\n flex-direction: row-reverse;\n }\n\n @supports (position-anchor: --date-range-picker) {\n [part='dialog'] {\n position-anchor: --date-range-picker;\n position: fixed;\n z-index: 1;\n }\n }\n`;\n"]}
|
package/dist/esm/src/types.d.ts
CHANGED
|
@@ -17,6 +17,9 @@ interface TtPresetButtonExternalAttributes {
|
|
|
17
17
|
slot?: string;
|
|
18
18
|
preset?: string;
|
|
19
19
|
}
|
|
20
|
+
interface ChangeEvent<T extends HTMLElement> extends Event {
|
|
21
|
+
target: T | null;
|
|
22
|
+
}
|
|
20
23
|
declare global {
|
|
21
24
|
interface HTMLElementTagNameMap {
|
|
22
25
|
'tt-date-range-picker': TtDateRangePicker;
|
|
@@ -26,7 +29,7 @@ declare global {
|
|
|
26
29
|
interface IntrinsicElements {
|
|
27
30
|
'tt-date-range-picker': TtDateRangePickerExternalAttributes & {
|
|
28
31
|
style?: string;
|
|
29
|
-
onChange?: (event:
|
|
32
|
+
onChange?: (event: ChangeEvent<TtDateRangePicker>) => void;
|
|
30
33
|
};
|
|
31
34
|
'tt-preset-button': TtPresetButtonExternalAttributes;
|
|
32
35
|
}
|
|
@@ -38,7 +41,7 @@ declare global {
|
|
|
38
41
|
ref?: React.Ref<unknown>;
|
|
39
42
|
children?: React.ReactNode;
|
|
40
43
|
style?: React.CSSProperties;
|
|
41
|
-
onChange?:
|
|
44
|
+
onChange?: React.ChangeEventHandler<TtDateRangePicker>;
|
|
42
45
|
};
|
|
43
46
|
'tt-preset-button': TtPresetButtonExternalAttributes & {
|
|
44
47
|
ref?: React.Ref<unknown>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtDateRangePicker } from './TtDateRangePicker.js';\nimport { PresetButton } from './SidePanel/PresetButton.js';\n\ninterface TtDateRangePickerExternalAttributes {\n id?: string;\n start?: string;\n end?: string;\n mindate?: string;\n maxdate?: string;\n mindays?: number;\n maxdays?: number;\n disabled?: boolean;\n 'open-left'?: boolean;\n name?: string;\n}\n\ninterface TtPresetButtonExternalAttributes {\n id?: string;\n slot?: string;\n preset?: string;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-date-range-picker': TtDateRangePicker;\n 'tt-preset-button': PresetButton;\n }\n\n namespace JSX {\n interface IntrinsicElements {\n 'tt-date-range-picker': TtDateRangePickerExternalAttributes & {\n style?: string;\n onChange?: (event:
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtDateRangePicker } from './TtDateRangePicker.js';\nimport { PresetButton } from './SidePanel/PresetButton.js';\n\ninterface TtDateRangePickerExternalAttributes {\n id?: string;\n start?: string;\n end?: string;\n mindate?: string;\n maxdate?: string;\n mindays?: number;\n maxdays?: number;\n disabled?: boolean;\n 'open-left'?: boolean;\n name?: string;\n}\n\ninterface TtPresetButtonExternalAttributes {\n id?: string;\n slot?: string;\n preset?: string;\n}\n\n// Copy of @triptease/react to not cause a circular dependency\ninterface ChangeEvent<T extends HTMLElement> extends Event {\n target: T | null;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-date-range-picker': TtDateRangePicker;\n 'tt-preset-button': PresetButton;\n }\n\n namespace JSX {\n interface IntrinsicElements {\n 'tt-date-range-picker': TtDateRangePickerExternalAttributes & {\n style?: string;\n onChange?: (event: ChangeEvent<TtDateRangePicker>) => void;\n };\n\n 'tt-preset-button': TtPresetButtonExternalAttributes;\n }\n }\n\n namespace React {\n namespace JSX {\n interface IntrinsicElements {\n 'tt-date-range-picker': TtDateRangePickerExternalAttributes & {\n ref?: React.Ref<unknown>;\n children?: React.ReactNode;\n style?: React.CSSProperties;\n onChange?: React.ChangeEventHandler<TtDateRangePicker>;\n };\n\n 'tt-preset-button': TtPresetButtonExternalAttributes & {\n ref?: React.Ref<unknown>;\n children?: React.ReactNode;\n };\n }\n }\n }\n}\n"]}
|