@triptease/tt-date-picker 6.3.8 → 6.3.10
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.
|
@@ -179,14 +179,7 @@ class TtDatePicker extends lit_1.LitElement {
|
|
|
179
179
|
}
|
|
180
180
|
}
|
|
181
181
|
exports.TtDatePicker = TtDatePicker;
|
|
182
|
-
TtDatePicker.styles =
|
|
183
|
-
styles_js_1.styles,
|
|
184
|
-
(0, lit_1.css) `
|
|
185
|
-
[part='controls'] {
|
|
186
|
-
min-width: 19.1ch;
|
|
187
|
-
}
|
|
188
|
-
`,
|
|
189
|
-
];
|
|
182
|
+
TtDatePicker.styles = styles_js_1.styles;
|
|
190
183
|
TtDatePicker.formAssociated = true;
|
|
191
184
|
TtDatePicker.shadowRootOptions = {
|
|
192
185
|
...lit_1.LitElement.shadowRootOptions,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TtDatePicker.js","sourceRoot":"","sources":["../../../src/TtDatePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { DateTime } from 'luxon';\nimport { Calendar } from '@triptease/tt-calendar';\nimport { calendarIcon } from '@triptease/icons';\nimport { TtDialog } from '@triptease/tt-dialog';\nimport { DateInput } from '@triptease/tt-date-input';\nimport { DateSelectionEvent } from '@triptease/tt-calendar/date-selection-context.js';\nimport { dateConverter } from './helpers.js';\nimport { styles } from './styles.js';\n\nexport class TtDatePicker extends LitElement {\n static styles = [\n styles,\n css`\n [part='controls'] {\n min-width: 19.1ch;\n }\n `,\n ];\n\n static formAssociated = true;\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @query('tt-calendar')\n calendar!: Calendar;\n\n @query('tt-dialog')\n dialog!: TtDialog;\n\n @property({ type: String })\n public value?: string;\n\n @property({\n type: Date,\n converter: dateConverter,\n })\n public minDate?: Date;\n\n @property({\n type: Date,\n converter: dateConverter,\n })\n public maxDate?: Date;\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 _valueDateTime(): DateTime | undefined {\n return this.value ? DateTime.fromISO(this.value) : undefined;\n }\n\n private get _minDateTime(): DateTime | undefined {\n return this.minDate ? DateTime.fromJSDate(this.minDate) : undefined;\n }\n\n private get _maxDateTime(): DateTime | undefined {\n return this.maxDate ? DateTime.fromJSDate(this.maxDate) : undefined;\n }\n\n @state()\n private _open: boolean = false;\n\n @query('tt-date-input')\n private dateInput!: DateInput;\n\n public internals: ReturnType<typeof this.attachInternals>;\n\n private get _formValue(): string {\n return this.value ?? '';\n }\n\n constructor() {\n super();\n this.internals = this.attachInternals();\n }\n\n onDateChange(e: Event) {\n if (DateSelectionEvent.is(e)) {\n this.value = e.detail;\n } else if (e.type === 'change') {\n this.value = (e.target as HTMLInputElement).value;\n }\n\n this.dispatchEvent(new InputEvent('change'));\n this.dialog.hide();\n }\n\n get form(): HTMLFormElement | null {\n return this.internals.form;\n }\n\n public updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n\n if (changedProperties.has('value')) {\n this.internals.setFormValue(this._formValue);\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 validate() {\n const wasValid = this.internals.validity.valid;\n const oldMessage = this.internals.validationMessage;\n this.internals.setValidity({});\n\n if (this._valueDateTime) {\n const minDateIsValid =\n !this._minDateTime || this._valueDateTime > this._minDateTime || this._valueDateTime.equals(this._minDateTime);\n if (!minDateIsValid) {\n this.internals.setValidity(\n { rangeUnderflow: true },\n `Date should be equal or after ${this._minDateTime?.toLocaleString({\n month: 'short',\n day: 'numeric',\n year: 'numeric',\n })}`\n );\n return;\n }\n const maxDateIsValid =\n !this._maxDateTime || this._valueDateTime.equals(this._maxDateTime) || this._valueDateTime < this._maxDateTime;\n if (!maxDateIsValid) {\n this.internals.setValidity(\n { rangeOverflow: true },\n `Date should be before or equal to ${this._maxDateTime?.toLocaleString({\n month: 'short',\n day: 'numeric',\n year: 'numeric',\n })}`\n );\n return;\n }\n }\n if (wasValid !== this.internals.validity.valid || oldMessage !== this.internals.validationMessage) {\n this.requestUpdate();\n }\n }\n\n public connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener('date-selection', this.onDateChange);\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 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 private _onFocus = () => {\n this.dateInput.focus();\n };\n\n public disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('date-selection', this.onDateChange);\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 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', '-192px');\n }\n } else {\n this.dialog.hide();\n }\n }\n\n render() {\n return html`\n <div part=\"controls\" aria-invalid=${!this.internals.validity.valid} aria-disabled=\"${this.disabled}\">\n <div name=\"container\" part=\"container\">\n <tt-date-input @change=${this.onDateChange} .value=${this.value} .disabled=${this.disabled}></tt-date-input>\n </div>\n <button\n name=\"Show calendar\"\n @click=${this.showCalendar}\n class=\"show-calendar\"\n aria-label=\"Choose date, ${this}\"\n ?disabled=${this.disabled}\n >\n ${unsafeSVG(calendarIcon)}\n </button>\n </div>\n <tt-dialog name=\"calendar\" aria-label=\"Choose date\" part=\"dialog\">\n <tt-calendar\n .value=\"${this.value}\"\n .minDate=${this.minDate}\n .maxDate=${this.maxDate}\n part=\"calendar\"\n ></tt-calendar>\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-picker': TtDatePicker;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"TtDatePicker.js","sourceRoot":"","sources":["../../../src/TtDatePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { DateTime } from 'luxon';\nimport { Calendar } from '@triptease/tt-calendar';\nimport { calendarIcon } from '@triptease/icons';\nimport { TtDialog } from '@triptease/tt-dialog';\nimport { DateInput } from '@triptease/tt-date-input';\nimport { DateSelectionEvent } from '@triptease/tt-calendar/date-selection-context.js';\nimport { dateConverter } from './helpers.js';\nimport { styles } from './styles.js';\n\nexport class TtDatePicker extends LitElement {\n static styles = styles;\n\n static formAssociated = true;\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @query('tt-calendar')\n calendar!: Calendar;\n\n @query('tt-dialog')\n dialog!: TtDialog;\n\n @property({ type: String })\n public value?: string;\n\n @property({\n type: Date,\n converter: dateConverter,\n })\n public minDate?: Date;\n\n @property({\n type: Date,\n converter: dateConverter,\n })\n public maxDate?: Date;\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 _valueDateTime(): DateTime | undefined {\n return this.value ? DateTime.fromISO(this.value) : undefined;\n }\n\n private get _minDateTime(): DateTime | undefined {\n return this.minDate ? DateTime.fromJSDate(this.minDate) : undefined;\n }\n\n private get _maxDateTime(): DateTime | undefined {\n return this.maxDate ? DateTime.fromJSDate(this.maxDate) : undefined;\n }\n\n @state()\n private _open: boolean = false;\n\n @query('tt-date-input')\n private dateInput!: DateInput;\n\n public internals: ReturnType<typeof this.attachInternals>;\n\n private get _formValue(): string {\n return this.value ?? '';\n }\n\n constructor() {\n super();\n this.internals = this.attachInternals();\n }\n\n onDateChange(e: Event) {\n if (DateSelectionEvent.is(e)) {\n this.value = e.detail;\n } else if (e.type === 'change') {\n this.value = (e.target as HTMLInputElement).value;\n }\n\n this.dispatchEvent(new InputEvent('change'));\n this.dialog.hide();\n }\n\n get form(): HTMLFormElement | null {\n return this.internals.form;\n }\n\n public updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n\n if (changedProperties.has('value')) {\n this.internals.setFormValue(this._formValue);\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 validate() {\n const wasValid = this.internals.validity.valid;\n const oldMessage = this.internals.validationMessage;\n this.internals.setValidity({});\n\n if (this._valueDateTime) {\n const minDateIsValid =\n !this._minDateTime || this._valueDateTime > this._minDateTime || this._valueDateTime.equals(this._minDateTime);\n if (!minDateIsValid) {\n this.internals.setValidity(\n { rangeUnderflow: true },\n `Date should be equal or after ${this._minDateTime?.toLocaleString({\n month: 'short',\n day: 'numeric',\n year: 'numeric',\n })}`\n );\n return;\n }\n const maxDateIsValid =\n !this._maxDateTime || this._valueDateTime.equals(this._maxDateTime) || this._valueDateTime < this._maxDateTime;\n if (!maxDateIsValid) {\n this.internals.setValidity(\n { rangeOverflow: true },\n `Date should be before or equal to ${this._maxDateTime?.toLocaleString({\n month: 'short',\n day: 'numeric',\n year: 'numeric',\n })}`\n );\n return;\n }\n }\n if (wasValid !== this.internals.validity.valid || oldMessage !== this.internals.validationMessage) {\n this.requestUpdate();\n }\n }\n\n public connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener('date-selection', this.onDateChange);\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 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 private _onFocus = () => {\n this.dateInput.focus();\n };\n\n public disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('date-selection', this.onDateChange);\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 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', '-192px');\n }\n } else {\n this.dialog.hide();\n }\n }\n\n render() {\n return html`\n <div part=\"controls\" aria-invalid=${!this.internals.validity.valid} aria-disabled=\"${this.disabled}\">\n <div name=\"container\" part=\"container\">\n <tt-date-input @change=${this.onDateChange} .value=${this.value} .disabled=${this.disabled}></tt-date-input>\n </div>\n <button\n name=\"Show calendar\"\n @click=${this.showCalendar}\n class=\"show-calendar\"\n aria-label=\"Choose date, ${this}\"\n ?disabled=${this.disabled}\n >\n ${unsafeSVG(calendarIcon)}\n </button>\n </div>\n <tt-dialog name=\"calendar\" aria-label=\"Choose date\" part=\"dialog\">\n <tt-calendar\n .value=\"${this.value}\"\n .minDate=${this.minDate}\n .maxDate=${this.maxDate}\n part=\"calendar\"\n ></tt-calendar>\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-picker': TtDatePicker;\n }\n}\n"]}
|
|
@@ -2,7 +2,7 @@ import { LitElement, PropertyValues } from 'lit';
|
|
|
2
2
|
import { Calendar } from '@triptease/tt-calendar';
|
|
3
3
|
import { TtDialog } from '@triptease/tt-dialog';
|
|
4
4
|
export declare class TtDatePicker extends LitElement {
|
|
5
|
-
static styles: import("lit").CSSResult
|
|
5
|
+
static styles: import("lit").CSSResult;
|
|
6
6
|
static formAssociated: boolean;
|
|
7
7
|
static shadowRootOptions: {
|
|
8
8
|
delegatesFocus: boolean;
|
|
@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
4
4
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
|
-
import {
|
|
7
|
+
import { html, LitElement, nothing } from 'lit';
|
|
8
8
|
import { property, query, state } from 'lit/decorators.js';
|
|
9
9
|
import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
|
|
10
10
|
import { DateTime } from 'luxon';
|
|
@@ -175,14 +175,7 @@ export class TtDatePicker extends LitElement {
|
|
|
175
175
|
`;
|
|
176
176
|
}
|
|
177
177
|
}
|
|
178
|
-
TtDatePicker.styles =
|
|
179
|
-
styles,
|
|
180
|
-
css `
|
|
181
|
-
[part='controls'] {
|
|
182
|
-
min-width: 19.1ch;
|
|
183
|
-
}
|
|
184
|
-
`,
|
|
185
|
-
];
|
|
178
|
+
TtDatePicker.styles = styles;
|
|
186
179
|
TtDatePicker.formAssociated = true;
|
|
187
180
|
TtDatePicker.shadowRootOptions = {
|
|
188
181
|
...LitElement.shadowRootOptions,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TtDatePicker.js","sourceRoot":"","sources":["../../../src/TtDatePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { DateTime } from 'luxon';\nimport { Calendar } from '@triptease/tt-calendar';\nimport { calendarIcon } from '@triptease/icons';\nimport { TtDialog } from '@triptease/tt-dialog';\nimport { DateInput } from '@triptease/tt-date-input';\nimport { DateSelectionEvent } from '@triptease/tt-calendar/date-selection-context.js';\nimport { dateConverter } from './helpers.js';\nimport { styles } from './styles.js';\n\nexport class TtDatePicker extends LitElement {\n static styles = [\n styles,\n css`\n [part='controls'] {\n min-width: 19.1ch;\n }\n `,\n ];\n\n static formAssociated = true;\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @query('tt-calendar')\n calendar!: Calendar;\n\n @query('tt-dialog')\n dialog!: TtDialog;\n\n @property({ type: String })\n public value?: string;\n\n @property({\n type: Date,\n converter: dateConverter,\n })\n public minDate?: Date;\n\n @property({\n type: Date,\n converter: dateConverter,\n })\n public maxDate?: Date;\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 _valueDateTime(): DateTime | undefined {\n return this.value ? DateTime.fromISO(this.value) : undefined;\n }\n\n private get _minDateTime(): DateTime | undefined {\n return this.minDate ? DateTime.fromJSDate(this.minDate) : undefined;\n }\n\n private get _maxDateTime(): DateTime | undefined {\n return this.maxDate ? DateTime.fromJSDate(this.maxDate) : undefined;\n }\n\n @state()\n private _open: boolean = false;\n\n @query('tt-date-input')\n private dateInput!: DateInput;\n\n public internals: ReturnType<typeof this.attachInternals>;\n\n private get _formValue(): string {\n return this.value ?? '';\n }\n\n constructor() {\n super();\n this.internals = this.attachInternals();\n }\n\n onDateChange(e: Event) {\n if (DateSelectionEvent.is(e)) {\n this.value = e.detail;\n } else if (e.type === 'change') {\n this.value = (e.target as HTMLInputElement).value;\n }\n\n this.dispatchEvent(new InputEvent('change'));\n this.dialog.hide();\n }\n\n get form(): HTMLFormElement | null {\n return this.internals.form;\n }\n\n public updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n\n if (changedProperties.has('value')) {\n this.internals.setFormValue(this._formValue);\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 validate() {\n const wasValid = this.internals.validity.valid;\n const oldMessage = this.internals.validationMessage;\n this.internals.setValidity({});\n\n if (this._valueDateTime) {\n const minDateIsValid =\n !this._minDateTime || this._valueDateTime > this._minDateTime || this._valueDateTime.equals(this._minDateTime);\n if (!minDateIsValid) {\n this.internals.setValidity(\n { rangeUnderflow: true },\n `Date should be equal or after ${this._minDateTime?.toLocaleString({\n month: 'short',\n day: 'numeric',\n year: 'numeric',\n })}`\n );\n return;\n }\n const maxDateIsValid =\n !this._maxDateTime || this._valueDateTime.equals(this._maxDateTime) || this._valueDateTime < this._maxDateTime;\n if (!maxDateIsValid) {\n this.internals.setValidity(\n { rangeOverflow: true },\n `Date should be before or equal to ${this._maxDateTime?.toLocaleString({\n month: 'short',\n day: 'numeric',\n year: 'numeric',\n })}`\n );\n return;\n }\n }\n if (wasValid !== this.internals.validity.valid || oldMessage !== this.internals.validationMessage) {\n this.requestUpdate();\n }\n }\n\n public connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener('date-selection', this.onDateChange);\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 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 private _onFocus = () => {\n this.dateInput.focus();\n };\n\n public disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('date-selection', this.onDateChange);\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 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', '-192px');\n }\n } else {\n this.dialog.hide();\n }\n }\n\n render() {\n return html`\n <div part=\"controls\" aria-invalid=${!this.internals.validity.valid} aria-disabled=\"${this.disabled}\">\n <div name=\"container\" part=\"container\">\n <tt-date-input @change=${this.onDateChange} .value=${this.value} .disabled=${this.disabled}></tt-date-input>\n </div>\n <button\n name=\"Show calendar\"\n @click=${this.showCalendar}\n class=\"show-calendar\"\n aria-label=\"Choose date, ${this}\"\n ?disabled=${this.disabled}\n >\n ${unsafeSVG(calendarIcon)}\n </button>\n </div>\n <tt-dialog name=\"calendar\" aria-label=\"Choose date\" part=\"dialog\">\n <tt-calendar\n .value=\"${this.value}\"\n .minDate=${this.minDate}\n .maxDate=${this.maxDate}\n part=\"calendar\"\n ></tt-calendar>\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-picker': TtDatePicker;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"TtDatePicker.js","sourceRoot":"","sources":["../../../src/TtDatePicker.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AACtF,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,OAAO,YAAa,SAAQ,UAAU;IAqC1C,gDAAgD;IAChD,IAAY,cAAc;QACxB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/D,CAAC;IAED,IAAY,YAAY;QACtB,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACtE,CAAC;IAED,IAAY,YAAY;QACtB,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACtE,CAAC;IAUD,IAAY,UAAU;QACpB,OAAO,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;IAC1B,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QA/BH,aAAQ,GAAG,KAAK,CAAC;QAGjB,aAAQ,GAAG,KAAK,CAAC;QAgBhB,UAAK,GAAY,KAAK,CAAC;QAoGvB,kBAAa,GAAG,GAAG,EAAE;YAC3B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QACpB,CAAC,CAAC;QAEM,mBAAc,GAAG,GAAG,EAAE;YAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;QAC7C,CAAC,CAAC;QAEK,eAAU,GAAG,CAAC,KAAiB,EAAE,EAAE;YACxC,IAAI,CAAC,IAAI,CAAC,KAAK;gBAAE,OAAO;YAExB,MAAM,MAAM,GAAG,CAAC,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,sBAAsB,CAAuB,CAAC;YAE3F,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACrB,CAAC;QACH,CAAC,CAAC;QAEM,aAAQ,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;QACzB,CAAC,CAAC;QA5GA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAC1C,CAAC;IAED,YAAY,CAAC,CAAQ;QACnB,IAAI,kBAAkB,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YAC7B,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC;QACxB,CAAC;aAAM,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC/B,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;QACpD,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC7C,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7B,CAAC;IAEM,OAAO,CAAC,iBAAiC;QAC9C,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC7C,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,CAAC;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YACtC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;gBAClC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;gBACtC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YACpB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;gBACzC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBAC7C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACrB,CAAC;QACH,CAAC;IACH,CAAC;IAEO,QAAQ;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC;QAC/C,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC;QACpD,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAE/B,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,MAAM,cAAc,GAClB,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YACjH,IAAI,CAAC,cAAc,EAAE,CAAC;gBACpB,IAAI,CAAC,SAAS,CAAC,WAAW,CACxB,EAAE,cAAc,EAAE,IAAI,EAAE,EACxB,iCAAiC,IAAI,CAAC,YAAY,EAAE,cAAc,CAAC;oBACjE,KAAK,EAAE,OAAO;oBACd,GAAG,EAAE,SAAS;oBACd,IAAI,EAAE,SAAS;iBAChB,CAAC,EAAE,CACL,CAAC;gBACF,OAAO;YACT,CAAC;YACD,MAAM,cAAc,GAClB,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC;YACjH,IAAI,CAAC,cAAc,EAAE,CAAC;gBACpB,IAAI,CAAC,SAAS,CAAC,WAAW,CACxB,EAAE,aAAa,EAAE,IAAI,EAAE,EACvB,qCAAqC,IAAI,CAAC,YAAY,EAAE,cAAc,CAAC;oBACrE,KAAK,EAAE,OAAO;oBACd,GAAG,EAAE,SAAS;oBACd,IAAI,EAAE,SAAS;iBAChB,CAAC,EAAE,CACL,CAAC;gBACF,OAAO;YACT,CAAC;QACH,CAAC;QACD,IAAI,QAAQ,KAAK,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,IAAI,UAAU,KAAK,IAAI,CAAC,SAAS,CAAC,iBAAiB,EAAE,CAAC;YAClG,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAEM,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC3D,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACzD,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAC3D,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACnD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChD,CAAC;IAyBM,oBAAoB;QACzB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC9D,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC5D,IAAI,CAAC,mBAAmB,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAC9D,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACtD,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IACnD,CAAC;IAED,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,MAAM,IAAI,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC1C,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;gBAClE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;YAC1C,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;YAC7C,CAAC;YAED,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YAEnB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,0BAA0B,EAAE,QAAQ,CAAC,CAAC;YAC/D,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;0CAC2B,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,mBAAmB,IAAI,CAAC,QAAQ;;mCAErE,IAAI,CAAC,YAAY,WAAW,IAAI,CAAC,KAAK,cAAc,IAAI,CAAC,QAAQ;;;;mBAIjF,IAAI,CAAC,YAAY;;qCAEC,IAAI;sBACnB,IAAI,CAAC,QAAQ;;YAEvB,SAAS,CAAC,YAAY,CAAC;;;;;oBAKf,IAAI,CAAC,KAAK;qBACT,IAAI,CAAC,OAAO;qBACZ,IAAI,CAAC,OAAO;;;;gDAIe,IAAI,CAAC,EAAE;UAC7C,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,iBAAiB;;KAE/E,CAAC;IACJ,CAAC;;AArOM,mBAAM,GAAG,MAAM,AAAT,CAAU;AAEhB,2BAAc,GAAG,IAAI,AAAP,CAAQ;AAEtB,8BAAiB,GAAG;IACzB,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHuB,CAGtB;AAGF;IADC,KAAK,CAAC,aAAa,CAAC;8CACD;AAGpB;IADC,KAAK,CAAC,WAAW,CAAC;4CACD;AAGX;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACL;AAMf;IAJN,QAAQ,CAAC;QACR,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,aAAa;KACzB,CAAC;6CACoB;AAMf;IAJN,QAAQ,CAAC;QACR,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,aAAa;KACzB,CAAC;6CACoB;AAGf;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;8CAC5B;AAGjB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACJ;AAgBhB;IADP,KAAK,EAAE;2CACuB;AAGvB;IADP,KAAK,CAAC,eAAe,CAAC;+CACO","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { DateTime } from 'luxon';\nimport { Calendar } from '@triptease/tt-calendar';\nimport { calendarIcon } from '@triptease/icons';\nimport { TtDialog } from '@triptease/tt-dialog';\nimport { DateInput } from '@triptease/tt-date-input';\nimport { DateSelectionEvent } from '@triptease/tt-calendar/date-selection-context.js';\nimport { dateConverter } from './helpers.js';\nimport { styles } from './styles.js';\n\nexport class TtDatePicker extends LitElement {\n static styles = styles;\n\n static formAssociated = true;\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @query('tt-calendar')\n calendar!: Calendar;\n\n @query('tt-dialog')\n dialog!: TtDialog;\n\n @property({ type: String })\n public value?: string;\n\n @property({\n type: Date,\n converter: dateConverter,\n })\n public minDate?: Date;\n\n @property({\n type: Date,\n converter: dateConverter,\n })\n public maxDate?: Date;\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 _valueDateTime(): DateTime | undefined {\n return this.value ? DateTime.fromISO(this.value) : undefined;\n }\n\n private get _minDateTime(): DateTime | undefined {\n return this.minDate ? DateTime.fromJSDate(this.minDate) : undefined;\n }\n\n private get _maxDateTime(): DateTime | undefined {\n return this.maxDate ? DateTime.fromJSDate(this.maxDate) : undefined;\n }\n\n @state()\n private _open: boolean = false;\n\n @query('tt-date-input')\n private dateInput!: DateInput;\n\n public internals: ReturnType<typeof this.attachInternals>;\n\n private get _formValue(): string {\n return this.value ?? '';\n }\n\n constructor() {\n super();\n this.internals = this.attachInternals();\n }\n\n onDateChange(e: Event) {\n if (DateSelectionEvent.is(e)) {\n this.value = e.detail;\n } else if (e.type === 'change') {\n this.value = (e.target as HTMLInputElement).value;\n }\n\n this.dispatchEvent(new InputEvent('change'));\n this.dialog.hide();\n }\n\n get form(): HTMLFormElement | null {\n return this.internals.form;\n }\n\n public updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n\n if (changedProperties.has('value')) {\n this.internals.setFormValue(this._formValue);\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 validate() {\n const wasValid = this.internals.validity.valid;\n const oldMessage = this.internals.validationMessage;\n this.internals.setValidity({});\n\n if (this._valueDateTime) {\n const minDateIsValid =\n !this._minDateTime || this._valueDateTime > this._minDateTime || this._valueDateTime.equals(this._minDateTime);\n if (!minDateIsValid) {\n this.internals.setValidity(\n { rangeUnderflow: true },\n `Date should be equal or after ${this._minDateTime?.toLocaleString({\n month: 'short',\n day: 'numeric',\n year: 'numeric',\n })}`\n );\n return;\n }\n const maxDateIsValid =\n !this._maxDateTime || this._valueDateTime.equals(this._maxDateTime) || this._valueDateTime < this._maxDateTime;\n if (!maxDateIsValid) {\n this.internals.setValidity(\n { rangeOverflow: true },\n `Date should be before or equal to ${this._maxDateTime?.toLocaleString({\n month: 'short',\n day: 'numeric',\n year: 'numeric',\n })}`\n );\n return;\n }\n }\n if (wasValid !== this.internals.validity.valid || oldMessage !== this.internals.validationMessage) {\n this.requestUpdate();\n }\n }\n\n public connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener('date-selection', this.onDateChange);\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 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 private _onFocus = () => {\n this.dateInput.focus();\n };\n\n public disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('date-selection', this.onDateChange);\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 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', '-192px');\n }\n } else {\n this.dialog.hide();\n }\n }\n\n render() {\n return html`\n <div part=\"controls\" aria-invalid=${!this.internals.validity.valid} aria-disabled=\"${this.disabled}\">\n <div name=\"container\" part=\"container\">\n <tt-date-input @change=${this.onDateChange} .value=${this.value} .disabled=${this.disabled}></tt-date-input>\n </div>\n <button\n name=\"Show calendar\"\n @click=${this.showCalendar}\n class=\"show-calendar\"\n aria-label=\"Choose date, ${this}\"\n ?disabled=${this.disabled}\n >\n ${unsafeSVG(calendarIcon)}\n </button>\n </div>\n <tt-dialog name=\"calendar\" aria-label=\"Choose date\" part=\"dialog\">\n <tt-calendar\n .value=\"${this.value}\"\n .minDate=${this.minDate}\n .maxDate=${this.maxDate}\n part=\"calendar\"\n ></tt-calendar>\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-picker': TtDatePicker;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent tt-date-picker following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "@triptease",
|
|
6
|
-
"version": "6.3.
|
|
6
|
+
"version": "6.3.10",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/esm/src/index.js",
|
|
9
9
|
"module": "dist/esm/src/index.js",
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@triptease/icons": "1.
|
|
41
|
-
"@triptease/tt-calendar": "6.4.
|
|
40
|
+
"@triptease/icons": "1.5.0",
|
|
41
|
+
"@triptease/tt-calendar": "6.4.4",
|
|
42
42
|
"@triptease/tt-date-input": "6.1.2",
|
|
43
43
|
"@triptease/tt-dialog": "5.2.2",
|
|
44
44
|
"@types/luxon": "^3.6.2",
|