@triptease/tt-date-range-picker 6.5.10 → 6.5.11
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.
|
@@ -204,7 +204,14 @@ TtDateRangePicker.shadowRootOptions = {
|
|
|
204
204
|
...lit_1.LitElement.shadowRootOptions,
|
|
205
205
|
delegatesFocus: true,
|
|
206
206
|
};
|
|
207
|
-
TtDateRangePicker.styles =
|
|
207
|
+
TtDateRangePicker.styles = [
|
|
208
|
+
styles_js_1.styles,
|
|
209
|
+
(0, lit_1.css) `
|
|
210
|
+
[part='controls'] {
|
|
211
|
+
min-width: 30ch;
|
|
212
|
+
}
|
|
213
|
+
`,
|
|
214
|
+
];
|
|
208
215
|
__decorate([
|
|
209
216
|
(0, decorators_js_1.query)('tt-calendar')
|
|
210
217
|
], TtDateRangePicker.prototype, "calendar", void 0);
|
|
@@ -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 { 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 = styles\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 if (!this._open) {\n const rect = this.getBoundingClientRect();\n if (!this.openLeft && rect.top > window.innerHeight - rect.bottom) {\n this.internals.states.add('open-above');\n } else {\n this.internals.states.delete('open-above');\n }\n\n this.dialog.show();\n\n if (this.openLeft) {\n this.style.setProperty('--calendar-left-distance', '-146px');\n }\n } else {\n this.dialog.hide();\n }\n }\n\n private _onDialogOpen = () => {\n this._open = true;\n };\n\n private _onDialogClose = () => {\n this._open = false;\n this.internals.states.delete('open-above');\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: 30ch;\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 if (!this._open) {\n const rect = this.getBoundingClientRect();\n if (!this.openLeft && rect.top > window.innerHeight - rect.bottom) {\n this.internals.states.add('open-above');\n } else {\n this.internals.states.delete('open-above');\n }\n\n this.dialog.show();\n\n if (this.openLeft) {\n this.style.setProperty('--calendar-left-distance', '-146px');\n }\n } else {\n this.dialog.hide();\n }\n }\n\n private _onDialogOpen = () => {\n this._open = true;\n };\n\n private _onDialogClose = () => {\n this._open = false;\n this.internals.states.delete('open-above');\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"]}
|
|
@@ -17,7 +17,7 @@ export declare class TtDateRangePicker extends LitElement {
|
|
|
17
17
|
customElements?: CustomElementRegistry;
|
|
18
18
|
registry?: CustomElementRegistry;
|
|
19
19
|
};
|
|
20
|
-
static styles: import("lit").CSSResult;
|
|
20
|
+
static styles: import("lit").CSSResult[];
|
|
21
21
|
calendar: Calendar;
|
|
22
22
|
dialog: TtDialog;
|
|
23
23
|
start?: string;
|
|
@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
7
|
import { property, query, state } from 'lit/decorators.js';
|
|
8
|
-
import { html, LitElement, nothing } from 'lit';
|
|
8
|
+
import { css, html, LitElement, nothing } from 'lit';
|
|
9
9
|
import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
|
|
10
10
|
import { DateTime } from 'luxon';
|
|
11
11
|
import { DateRangeSelectionEvent } from '@triptease/tt-calendar/date-selection-context.js';
|
|
@@ -200,7 +200,14 @@ TtDateRangePicker.shadowRootOptions = {
|
|
|
200
200
|
...LitElement.shadowRootOptions,
|
|
201
201
|
delegatesFocus: true,
|
|
202
202
|
};
|
|
203
|
-
TtDateRangePicker.styles =
|
|
203
|
+
TtDateRangePicker.styles = [
|
|
204
|
+
styles,
|
|
205
|
+
css `
|
|
206
|
+
[part='controls'] {
|
|
207
|
+
min-width: 30ch;
|
|
208
|
+
}
|
|
209
|
+
`,
|
|
210
|
+
];
|
|
204
211
|
__decorate([
|
|
205
212
|
query('tt-calendar')
|
|
206
213
|
], TtDateRangePicker.prototype, "calendar", void 0);
|
|
@@ -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 { 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 = styles\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 if (!this._open) {\n const rect = this.getBoundingClientRect();\n if (!this.openLeft && rect.top > window.innerHeight - rect.bottom) {\n this.internals.states.add('open-above');\n } else {\n this.internals.states.delete('open-above');\n }\n\n this.dialog.show();\n\n if (this.openLeft) {\n this.style.setProperty('--calendar-left-distance', '-146px');\n }\n } else {\n this.dialog.hide();\n }\n }\n\n private _onDialogOpen = () => {\n this._open = true;\n };\n\n private _onDialogClose = () => {\n this._open = false;\n this.internals.states.delete('open-above');\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: 30ch;\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 if (!this._open) {\n const rect = this.getBoundingClientRect();\n if (!this.openLeft && rect.top > window.innerHeight - rect.bottom) {\n this.internals.states.add('open-above');\n } else {\n this.internals.states.delete('open-above');\n }\n\n this.dialog.show();\n\n if (this.openLeft) {\n this.style.setProperty('--calendar-left-distance', '-146px');\n }\n } else {\n this.dialog.hide();\n }\n }\n\n private _onDialogOpen = () => {\n this._open = true;\n };\n\n private _onDialogClose = () => {\n this._open = false;\n this.internals.states.delete('open-above');\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"]}
|