@triptease/tt-date-picker 6.0.17 → 6.0.19

package/src/FocusEvent.d.ts

@@ -1,13 +0,0 @@
-export {};
-
-declare global {
-  interface FocusEvent {
-    /**
-     * Adds the non-standard `explicitOriginalTarget` property to the `FocusEvent` interface. Firefox seems to populate this,
-     * but not relatedTarget in certain browsers
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/Event/explicitOriginalTarget
-     */
-    explicitOriginalTarget?: EventTarget | null;
-  }
-}

package/src/TtDatePicker.ts

@@ -1,249 +0,0 @@
-import { css, html, LitElement, nothing, PropertyValues } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
-import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-import { DateTime } from 'luxon';
-import { Calendar } from '@triptease/tt-calendar';
-import { calendarIcon } from '@triptease/icons';
-import { TtDialog } from '@triptease/tt-dialog';
-import { DateInput } from '@triptease/tt-date-input';
-import { DateSelectionEvent } from '@triptease/tt-calendar/date-selection-context.js';
-import { dateConverter } from './helpers.js';
-import { styles } from './styles.js';
-
-export class TtDatePicker extends LitElement {
-  static styles = [
-    styles,
-    css`
-      [part='controls'] {
-        min-width: 19.1ch;
-      }
-    `,
-  ];
-
-  static formAssociated = true;
-
-  static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-  };
-
-  @query('tt-calendar')
-  calendar!: Calendar;
-
-  @query('tt-dialog')
-  dialog!: TtDialog;
-
-  @property({ type: String })
-  public value?: string;
-
-  @property({
-    type: Date,
-    converter: dateConverter,
-  })
-  public minDate?: Date;
-
-  @property({
-    type: Date,
-    converter: dateConverter,
-  })
-  public maxDate?: Date;
-
-  @property({ type: Boolean, attribute: 'open-left' })
-  public openLeft = false;
-
-  @property({ type: Boolean })
-  public disabled = false;
-
-  // Internal DateTime properties for calculations
-  private get _valueDateTime(): DateTime | undefined {
-    return this.value ? DateTime.fromISO(this.value) : undefined;
-  }
-
-  private get _minDateTime(): DateTime | undefined {
-    return this.minDate ? DateTime.fromJSDate(this.minDate) : undefined;
-  }
-
-  private get _maxDateTime(): DateTime | undefined {
-    return this.maxDate ? DateTime.fromJSDate(this.maxDate) : undefined;
-  }
-
-  @state()
-  private _open: boolean = false;
-
-  @query('tt-date-input')
-  private dateInput!: DateInput;
-
-  public internals: ReturnType<typeof this.attachInternals>;
-
-  private get _formValue(): string {
-    return this.value ?? '';
-  }
-
-  constructor() {
-    super();
-    this.internals = this.attachInternals();
-  }
-
-  onDateChange(e: Event) {
-    if (DateSelectionEvent.is(e)) {
-      this.value = e.detail;
-    } else if (e.type === 'change') {
-      this.value = (e.target as HTMLInputElement).value;
-    }
-
-    this.dispatchEvent(new InputEvent('change'));
-    this.dialog.hide();
-  }
-
-  get form(): HTMLFormElement | null {
-    return this.internals.form;
-  }
-
-  public updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties);
-
-    if (changedProperties.has('value')) {
-      this.internals.setFormValue(this._formValue);
-      this.validate();
-    }
-
-    if (changedProperties.has('disabled')) {
-      if (this.disabled) {
-        this.internals.setFormValue(null);
-        this.internals.states.add('disabled');
-        this.inert = true;
-      } else {
-        this.internals.states.delete('disabled');
-        this.internals.setFormValue(this._formValue);
-        this.inert = false;
-      }
-    }
-  }
-
-  private validate() {
-    const wasValid = this.internals.validity.valid;
-    const oldMessage = this.internals.validationMessage;
-    this.internals.setValidity({});
-
-    if (this._valueDateTime) {
-      const minDateIsValid =
-        !this._minDateTime || this._valueDateTime > this._minDateTime || this._valueDateTime.equals(this._minDateTime);
-      if (!minDateIsValid) {
-        this.internals.setValidity(
-          { rangeUnderflow: true },
-          `Date should be equal or after ${this._minDateTime?.toLocaleString({
-            month: 'short',
-            day: 'numeric',
-            year: 'numeric',
-          })}`
-        );
-        return;
-      }
-      const maxDateIsValid =
-        !this._maxDateTime || this._valueDateTime.equals(this._maxDateTime) || this._valueDateTime < this._maxDateTime;
-      if (!maxDateIsValid) {
-        this.internals.setValidity(
-          { rangeOverflow: true },
-          `Date should be before or equal to ${this._maxDateTime?.toLocaleString({
-            month: 'short',
-            day: 'numeric',
-            year: 'numeric',
-          })}`
-        );
-        return;
-      }
-    }
-    if (wasValid !== this.internals.validity.valid || oldMessage !== this.internals.validationMessage) {
-      this.requestUpdate();
-    }
-  }
-
-  public connectedCallback() {
-    super.connectedCallback();
-
-    this.addEventListener('date-selection', this.onDateChange);
-    this.addEventListener('dialog-open', this._onDialogOpen);
-    this.addEventListener('dialog-close', this._onDialogClose);
-    this.addEventListener('focusout', this.onFocusOut);
-    this.addEventListener('focus', this._onFocus);
-  }
-
-  private _onDialogOpen = () => {
-    this._open = true;
-  };
-
-  private _onDialogClose = () => {
-    this._open = false;
-  };
-
-  public onFocusOut = (event: FocusEvent) => {
-    if (!this._open) return;
-
-    const target = (event.relatedTarget ?? event.explicitOriginalTarget) as HTMLElement | null;
-
-    if (!this.contains(target)) {
-      this.dialog.hide();
-    }
-  };
-
-  private _onFocus = () => {
-    this.dateInput.focus();
-  };
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener('date-selection', this.onDateChange);
-    this.removeEventListener('dialog-open', this._onDialogOpen);
-    this.removeEventListener('dialog-close', this._onDialogClose);
-    this.removeEventListener('focusout', this.onFocusOut);
-    this.removeEventListener('focus', this._onFocus);
-  }
-
-  showCalendar() {
-    if (!this._open) {
-      this.dialog.show();
-
-      if (this.openLeft) {
-        this.style.setProperty('--calendar-left-distance', '-192px');
-      }
-    } else {
-      this.dialog.hide();
-    }
-  }
-
-  render() {
-    return html`
-      <div part="controls" aria-invalid=${!this.internals.validity.valid} aria-disabled="${this.disabled}">
-        <div name="container" part="container">
-          <tt-date-input @change=${this.onDateChange} .value=${this.value} .disabled=${this.disabled}></tt-date-input>
-        </div>
-        <button
-          name="Show calendar"
-          @click=${this.showCalendar}
-          class="show-calendar"
-          aria-label="Choose date, ${this}"
-          ?disabled=${this.disabled}
-        >
-          ${unsafeSVG(calendarIcon)}
-        </button>
-      </div>
-      <tt-dialog name="calendar" aria-label="Choose date" part="dialog">
-        <tt-calendar
-          .value="${this.value}"
-          .minDate=${this.minDate}
-          .maxDate=${this.maxDate}
-          part="calendar"
-        ></tt-calendar>
-      </tt-dialog>
-      <div class="errormessage" id="error-msg-${this.id}" role="alert" aria-atomic="true" part="error">
-        ${this.internals.validity.valid ? nothing : this.internals.validationMessage}
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'tt-date-picker': TtDatePicker;
-  }
-}

package/src/helpers.ts

@@ -1,7 +0,0 @@
-import { DateTime } from 'luxon';
-
-export const dateConverter = (value: string | null): Date | undefined =>
-  value ? DateTime.fromISO(value).toJSDate() : undefined;
-
-export const dateTimeConverter = (value: string | null): DateTime | undefined =>
-  value ? DateTime.fromISO(value) : undefined;

package/src/index.ts

@@ -1 +0,0 @@
-export { TtDatePicker } from './tt-date-picker.js';

package/src/styles.ts

@@ -1,67 +0,0 @@
-import { css } from 'lit';
-
-export const styles = css`
-  :host {
-    position: relative;
-  }
-
-  :host(:state(disabled)) {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-
-  tt-side-panel::part(side-panel) {
-    border-right: 1px solid var(--color-border-200);
-  }
-
-  tt-side-panel:empty {
-    display: none;
-  }
-
-  [part='container'] {
-    padding: var(--space-scale-1) var(--space-scale-1-5);
-    gap: var(--space-scale-1);
-  }
-
-  [part='controls'] {
-    display: flex;
-    border: 1px solid var(--color-border-200);
-    border-radius: var(--border-radius);
-    width: fit-content;
-    height: var(--date-picker-height, fit-content);
-    background-color: var(--color-surface-100);
-    font-size: var(--font-size-200);
-    color: var(--color-text-400);
-    align-items: stretch;
-    justify-content: space-around;
-    padding: 0;
-
-    &[aria-invalid='true'] {
-      outline: 2px solid var(--color-alert-300, red);
-    }
-
-    button {
-      border: 0;
-      padding-inline: var(--space-scale-1);
-      background-color: transparent;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      align-self: stretch;
-      border-left: 1px solid var(--color-border-200);
-      box-sizing: border-box;
-      color: var(--color-text-400);
-    }
-
-    &:has(+ tt-dialog[open]) .show-calendar svg,
-    .show-calendar:hover svg {
-      color: var(--color-primary-400);
-    }
-  }
-
-  [part='dialog']::part(dialog) {
-    margin-top: var(--space-scale-1);
-    flex-direction: row-reverse;
-  }
-`;

package/src/tt-date-picker.ts

@@ -1,23 +0,0 @@
-import { Calendar } from '@triptease/tt-calendar/tt-calendar.js';
-import { DateInput } from '@triptease/tt-date-input/tt-date-input.js';
-import { TtDialog } from '@triptease/tt-dialog/tt-dialog.js';
-import { TtDatePicker } from './TtDatePicker.js';
-
-if (typeof window !== 'undefined') {
-  if (!window.customElements.get('tt-calendar')) {
-    window.customElements.define('tt-calendar', Calendar);
-  }
-  if (!window.customElements.get('tt-date-input')) {
-    window.customElements.define('tt-date-input', DateInput);
-  }
-
-  if (!window.customElements.get('tt-dialog')) {
-    window.customElements.define('tt-dialog', TtDialog);
-  }
-
-  if (!window.customElements.get('tt-date-picker')) {
-    window.customElements.define('tt-date-picker', TtDatePicker);
-  }
-}
-
-export { TtDatePicker };

package/test/date-picker.test.ts

@@ -1,78 +0,0 @@
-import { elementUpdated, expect, fixture, oneDefaultPreventedEvent, oneEvent } from '@open-wc/testing';
-import { html } from 'lit';
-import { Settings } from 'luxon';
-import { TtDialog } from '@triptease/tt-dialog';
-import '../src/index.js'; // This handles the registration
-import { TtDatePicker } from '../src/index.js';
-
-describe('TtDatePicker', () => {
-  afterEach(() => {
-    Settings.defaultZone = 'system';
-  });
-
-  ['Australia/Brisbane', 'America/New_York', 'Europe/London', 'Asia/Tokyo', 'Etc/UTC'].forEach((timezone) => {
-    it('should include date value in form submission data', async () => {
-      Settings.defaultZone = timezone;
-      const form = await fixture<HTMLFormElement>(html`
-        <form method="post" action="#">
-          <input type="text" name="other_field" value="test_value" />
-          <tt-date-picker name="booking_date" value="2025-04-16"></tt-date-picker>
-          <button type="submit">Submit</button>
-        </form>
-      `);
-
-      const datePicker = form.querySelector('tt-date-picker') as TtDatePicker;
-      expect(datePicker).to.exist;
-
-      await elementUpdated(datePicker);
-
-      setTimeout(() => form.querySelector('button')!.click());
-      await oneDefaultPreventedEvent(form, 'submit');
-
-      const formData = new FormData(form);
-      const dateValue = formData.get('booking_date');
-      const expectedDate = `2025-04-16`;
-
-      expect(dateValue).to.equal(expectedDate);
-    });
-
-    it(`should emit change event on date selection for ${timezone}`, async () => {
-      Settings.defaultZone = timezone;
-      const datePicker = await fixture<TtDatePicker>(html` <tt-date-picker value="2025-05-01"></tt-date-picker> `);
-
-      const showCalendarButton = datePicker.shadowRoot!.querySelector('[name="Show calendar"]') as HTMLButtonElement;
-      showCalendarButton.click();
-      await elementUpdated(datePicker);
-
-      const changeEventPromise = oneEvent(datePicker, 'change');
-
-      const calendar = datePicker.shadowRoot!.querySelector('tt-calendar')!;
-      const desiredDate = calendar.shadowRoot!.querySelector(
-        '[role="gridcell"][data-date="2025-05-02"]'
-      ) as HTMLLIElement;
-      desiredDate.click();
-      await elementUpdated(datePicker);
-
-      const event = await changeEventPromise;
-      const eventValue = (event.target as TtDatePicker).value;
-
-      const expectedEndDate = '2025-05-02';
-
-      expect(eventValue).to.equal(expectedEndDate);
-    });
-  });
-
-  it('should disable the date picker when disabled attribute is set', async () => {
-    const datePicker = await fixture<TtDatePicker>(html`
-      <tt-date-picker value="2025-05-01" disabled></tt-date-picker>
-    `);
-
-    expect(datePicker.inert).to.be.true;
-
-    const showCalendarButton = datePicker.shadowRoot!.querySelector('button.show-calendar') as HTMLButtonElement;
-    showCalendarButton.click();
-
-    const dialog = datePicker.shadowRoot!.querySelector('tt-dialog') as TtDialog;
-    expect(dialog.open).to.be.false;
-  });
-});

package/tsconfig.json

@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2021",
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "noEmitOnError": true,
-    "lib": ["es2021", "dom", "DOM.Iterable"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": ".",
-    "declaration": true,
-    "incremental": true,
-    "skipLibCheck": true
-  },
-  "include": ["src/**/*.ts", "stories/**/*.ts", "test/**/*.ts"]
-}

package/web-dev-server.config.js

@@ -1,27 +0,0 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  open: '/demo/',
-  /** Use regular watch mode if HMR is not enabled. */
-  watch: !hmr,
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.lit] }),
-  ],
-
-  // See documentation for all available options
-});

package/web-test-runner.config.js

@@ -1,41 +0,0 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-
-const filteredLogs = ['Running in dev mode', 'Lit is in dev mode'];
-
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
-  files: 'dist/test/**/*.test.js',
-
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some((l) => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
-});