@exmg/exm-date-picker 1.2.12

package/.rollup.cache/Users/tylerpepper/Development/@exmg/exm-web-components/packages/exm-date-picker/dist/styles/exm-date-picker-input-styles-css.js

@@ -0,0 +1,23 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    --md-menu-container-shape: 1rem;
+    --md-menu-container-elevation: 0;
+    --md-menu-top-space: 1.25rem;
+    --md-menu-bottom-space: 0.75rem;
+    --exm-date-picker-inline-padding: 0.75rem;
+
+    display: block;
+    width: 100%;
+    padding-inline: 0.75rem;
+  }
+
+  md-outlined-text-field {
+    width: 100%;
+  }
+
+  .icon {
+    cursor: pointer;
+  }
+`;
+//# sourceMappingURL=exm-date-picker-input-styles-css.js.map

package/.rollup.cache/Users/tylerpepper/Development/@exmg/exm-web-components/packages/exm-date-picker/dist/styles/exm-date-picker-styles-css.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

package/.rollup.cache/Users/tylerpepper/Development/@exmg/exm-web-components/packages/exm-date-picker/dist/styles/exm-date-picker-styles-css.js

@@ -0,0 +1,122 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    display: block;
+    padding-inline: var(--exm-date-picker-inline-padding, 0);
+  }
+
+  calendar-month {
+    width: calc(40px * 7);
+    margin: 0 auto;
+  }
+
+  .year,
+  .arrow {
+    color: var(--md-sys-color-on-surface);
+  }
+
+  .heading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    color: var(--md-sys-color-on-surface);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    text-transform: uppercase;
+  }
+
+  .month-year {
+    flex: 1;
+    margin-inline-start: 48px;
+    text-align: center;
+  }
+
+  calendar-month::part(heading) {
+    display: none;
+  }
+
+  calendar-month::part(day) {
+    color: var(--md-sys-color-on-surface-variant);
+    font-weight: bold;
+  }
+
+  calendar-month::part(button) {
+    box-sizing: border-box;
+    width: 40px;
+    height: 40px;
+    margin: 0;
+    border: 1px solid transparent;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--md-sys-color-on-surface);
+    font-weight: 400;
+  }
+
+  calendar-month::part(button):hover,
+  calendar-month::part(button):focus-visible {
+    background: var(--md-sys-color-surface-container-highest);
+  }
+
+  calendar-month::part(button):focus-visible {
+    outline: none;
+  }
+
+  calendar-month::part(today) {
+    color: var(--md-sys-color-on-surface);
+    border-color: var(--md-sys-color-primary);
+  }
+
+  calendar-month::part(selected) {
+    background: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+    border-color: transparent;
+  }
+
+  calendar-month::part(selected):hover {
+    background: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+  }
+
+  calendar-month::part(today selected) {
+    box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
+  }
+
+  calendar-month::part(outside) {
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  calendar-date::part(button) {
+    padding: 0.5rem;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+  }
+
+  calendar-date::part(button):hover {
+    background: var(--md-sys-color-surface-container-highest);
+  }
+
+  calendar-date::part(header) {
+    justify-content: flex-start;
+  }
+
+  calendar-date::part(heading) {
+    order: 1;
+  }
+
+  calendar-date::part(previous) {
+    order: 2;
+    margin-inline-start: auto;
+  }
+
+  calendar-date::part(next) {
+    order: 3;
+  }
+
+  .actions {
+    text-align: end;
+  }
+`;
+//# sourceMappingURL=exm-date-picker-styles-css.js.map

package/.rollup.cache/Users/tylerpepper/Development/@exmg/exm-web-components/packages/exm-date-picker/dist/styles/exm-date-picker-year-grid-styles-css.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

package/.rollup.cache/Users/tylerpepper/Development/@exmg/exm-web-components/packages/exm-date-picker/dist/styles/exm-date-picker-year-grid-styles-css.js

@@ -0,0 +1,31 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 8px 0;
+  }
+
+  md-text-button.selected {
+    background: var(--md-sys-color-primary);
+    --md-text-button-label-text-color: var(--md-sys-color-on-primary);
+
+    .year {
+      color: var(--md-sys-color-on-primary);
+    }
+  }
+
+  md-text-button.current {
+    border: 1px solid var(--md-sys-color-primary);
+  }
+
+  .year {
+    color: var(--md-sys-color-on-surface);
+  }
+`;
+//# sourceMappingURL=exm-date-picker-year-grid-styles-css.js.map

package/dist/exm-date-picker-base.d.ts

@@ -0,0 +1,31 @@
+import { ExmgElement } from '@exmg/lit-base';
+import 'cally';
+import '@material/web/icon/icon.js';
+import '@material/web/button/text-button.js';
+import './exm-date-picker-year-grid.js';
+export interface CalendarDateElement extends HTMLInputElement {
+    value: string;
+    focusedDate: string;
+    focus(options?: unknown): void;
+}
+export declare class ExmDatePickerBase extends ExmgElement {
+    locale?: string;
+    value: string;
+    min?: number;
+    max?: number;
+    confirmInput: boolean;
+    firstDayOfWeek: number;
+    showYears: boolean;
+    focusedDate: any;
+    yearPage: any;
+    calendarDate: CalendarDateElement;
+    handleFocusDay(event: CustomEvent<Date>): void;
+    handleYearChange(event: CustomEvent<number>): void;
+    handleDateChange(): void;
+    focusDate(): void;
+    handleYearsShift(event: Event, direction: 'next' | 'previous'): void;
+    handleYearToggle(): Promise<void>;
+    handleConfirmClick(): void;
+    handleCancelClick(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/exm-date-picker-base.js

@@ -0,0 +1,155 @@
+import { __decorate } from 'tslib';
+import { nothing, html } from 'lit';
+import { ExmgElement } from '@exmg/lit-base';
+import { property, state, query } from 'lit/decorators.js';
+import { DateTime } from 'luxon';
+import 'cally';
+import '@material/web/icon/icon.js';
+import '@material/web/button/text-button.js';
+import './exm-date-picker-year-grid.js';
+
+// TODO: Implement form association / validation
+class ExmDatePickerBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+        this.confirmInput = true;
+        this.firstDayOfWeek = 0;
+        this.showYears = false;
+        this.focusedDate = DateTime.now();
+        this.yearPage = this.focusedDate.year;
+    }
+    handleFocusDay(event) {
+        this.focusedDate = DateTime.fromJSDate(event.detail);
+    }
+    handleYearChange(event) {
+        this.focusedDate = this.focusedDate.set({
+            year: event.detail,
+            day: 1,
+        });
+        this.showYears = false;
+    }
+    handleDateChange() {
+        this.value = this.calendarDate.value;
+        if (!this.confirmInput) {
+            this.fire('date-change', this.value, true);
+        }
+    }
+    focusDate() {
+        const date = DateTime.fromISO(this.value);
+        if (!date.isValid) {
+            return;
+        }
+        this.focusedDate = date;
+        this.calendarDate.focusedDate = this.value;
+        this.calendarDate.focus({ target: 'day' });
+    }
+    handleYearsShift(event, direction) {
+        if (!this.showYears)
+            return;
+        event.stopPropagation();
+        this.yearPage += direction === 'next' ? 24 : -24;
+    }
+    async handleYearToggle() {
+        if (this.showYears) {
+            this.yearPage = this.focusedDate.year;
+        }
+        await this.updateComplete;
+        this.showYears = !this.showYears;
+    }
+    handleConfirmClick() {
+        this.fire('date-change', this.value, true);
+    }
+    handleCancelClick() {
+        this.fire('date-cancel', this.value, true);
+    }
+    render() {
+        const year = this.focusedDate.year;
+        const heading = this.focusedDate.setLocale(this.locale).toFormat('LLL yyyy');
+        const focusedDate = this.focusedDate.toISODate();
+        // Cally only supports ISO date string
+        const min = this.min ? DateTime.fromMillis(this.min).toISODate() : undefined;
+        const max = this.max ? DateTime.fromMillis(this.max).toISODate() : undefined;
+        return html `
+      <calendar-date
+        .locale=${this.locale}
+        .value=${this.value}
+        .focusedDate=${focusedDate}
+        .min=${min}
+        .max=${max}
+        @focusday=${this.handleFocusDay}
+        @change=${this.handleDateChange}
+        first-day-of-week=${this.firstDayOfWeek}
+        show-outside-days
+      >
+        <md-text-button slot="heading" @click=${this.handleYearToggle}>
+          <span class="heading">
+            ${heading}
+            <md-icon> ${this.showYears ? 'arrow_drop_up' : 'arrow_drop_down'} </md-icon>
+          </span>
+        </md-text-button>
+
+        <md-icon class="arrow" slot="previous" @click=${(event) => this.handleYearsShift(event, 'previous')}>
+          chevron_left
+        </md-icon>
+
+        <md-icon class="arrow" slot="next" @click=${(event) => this.handleYearsShift(event, 'next')}>
+          chevron_right
+        </md-icon>
+
+        ${this.showYears
+            ? html `
+              <exm-date-picker-year-grid
+                .year=${year}
+                .min=${this.min}
+                .max=${this.max}
+                .displayYear=${this.yearPage}
+                @year-change=${this.handleYearChange}
+              ></exm-date-picker-year-grid>
+            `
+            : html ` <calendar-month></calendar-month> `}
+        ${this.confirmInput
+            ? html `
+              <div class="actions">
+                <md-text-button @click="${this.handleCancelClick}">Cancel</md-text-button>
+                <md-text-button @click="${this.handleConfirmClick}">Ok</md-text-button>
+              </div>
+            `
+            : nothing}
+      </calendar-date>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], ExmDatePickerBase.prototype, "locale", void 0);
+__decorate([
+    property({ type: String })
+], ExmDatePickerBase.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], ExmDatePickerBase.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], ExmDatePickerBase.prototype, "max", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'confirm-input' })
+], ExmDatePickerBase.prototype, "confirmInput", void 0);
+__decorate([
+    property({ type: Number })
+], ExmDatePickerBase.prototype, "firstDayOfWeek", void 0);
+__decorate([
+    state()
+], ExmDatePickerBase.prototype, "showYears", void 0);
+__decorate([
+    state()
+], ExmDatePickerBase.prototype, "focusedDate", void 0);
+__decorate([
+    state()
+], ExmDatePickerBase.prototype, "yearPage", void 0);
+__decorate([
+    query('calendar-date')
+], ExmDatePickerBase.prototype, "calendarDate", void 0);
+
+export { ExmDatePickerBase };
+//# sourceMappingURL=exm-date-picker-base.js.map

package/dist/exm-date-picker-input-base.d.ts

@@ -0,0 +1,57 @@
+import { PropertyValues } from 'lit';
+import { ExmgElement } from '@exmg/lit-base';
+import '@material/web/textfield/outlined-text-field.js';
+import '@material/web/menu/menu.js';
+import '@material/web/icon/icon.js';
+export declare class ExmDatePickerInputBase extends ExmgElement {
+    static formAssociated: boolean;
+    private internals;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    label: string;
+    value?: number;
+    name?: string;
+    /**
+     * Display/input format.
+     */
+    format: string;
+    locale: string;
+    /**
+     * Timezone as IANA timezone string
+     */
+    timezone: string;
+    closeOnSelect: boolean;
+    disabled: boolean;
+    required: boolean;
+    supportingText: string;
+    min?: number;
+    max?: number;
+    private menu;
+    private input;
+    private datePickers;
+    get dateTime(): any;
+    get displayValue(): any;
+    get datePickerValue(): any;
+    constructor();
+    protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    validate(): void;
+    private updateFormValue;
+    private formatTimestamp;
+    private updateDatePickerValue;
+    private handleDatePickerToggle;
+    private handleDateChange;
+    private handleDateCancel;
+    private handleInputChange;
+    syncDatePicker(): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    private setValidity;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/exm-date-picker-input-base.js

@@ -0,0 +1,248 @@
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import { property, query, queryAssignedElements } from 'lit/decorators.js';
+import { ExmgElement } from '@exmg/lit-base';
+import { DateTime } from 'luxon';
+import '@material/web/textfield/outlined-text-field.js';
+import '@material/web/menu/menu.js';
+import '@material/web/icon/icon.js';
+
+class ExmDatePickerInputBase extends ExmgElement {
+    get dateTime() {
+        if (this.value === undefined) {
+            return undefined;
+        }
+        const date = DateTime.fromMillis(this.value, {
+            zone: this.timezone,
+            locale: this.locale,
+        });
+        return date.isValid ? date : undefined;
+    }
+    get displayValue() {
+        var _a, _b;
+        return (_b = (_a = this.dateTime) === null || _a === void 0 ? void 0 : _a.toFormat(this.format)) !== null && _b !== void 0 ? _b : '';
+    }
+    get datePickerValue() {
+        var _a, _b;
+        return (_b = (_a = this.dateTime) === null || _a === void 0 ? void 0 : _a.toISODate()) !== null && _b !== void 0 ? _b : '';
+    }
+    constructor() {
+        super();
+        this.internals = this.attachInternals();
+        this.label = 'Select Date';
+        /**
+         * Display/input format.
+         */
+        this.format = 'dd-MM-yyyy';
+        this.locale = 'en-US';
+        /**
+         * Timezone as IANA timezone string
+         */
+        this.timezone = 'local';
+        this.closeOnSelect = true;
+        this.disabled = false;
+        this.required = false;
+        this.supportingText = '';
+        this.addEventListener('invalid', (event) => {
+            // NOTE: Prevent browser ui
+            event.preventDefault();
+            this.input.error = true;
+            this.input.errorText = this.internals.validationMessage;
+        });
+    }
+    firstUpdated() {
+        this.syncDatePicker();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('value') || changedProperties.has('required')) {
+            this.updateFormValue();
+        }
+        if (changedProperties.has('value') || changedProperties.has('timezone')) {
+            this.updateDatePickerValue();
+        }
+    }
+    validate() {
+        if (this.required && this.value === undefined) {
+            this.setValidity({ valueMissing: true }, 'Please select a date');
+            return;
+        }
+        // Min validation
+        if (this.value !== undefined && this.min !== undefined && this.value < this.min) {
+            this.setValidity({ rangeUnderflow: true }, `Date must be on or after ${this.formatTimestamp(this.min)}`);
+            return;
+        }
+        // Max validation
+        if (this.value !== undefined && this.max !== undefined && this.value > this.max) {
+            this.setValidity({ rangeOverflow: true }, `Date must be on or before ${this.formatTimestamp(this.max)}`);
+            return;
+        }
+        this.setValidity();
+    }
+    updateFormValue() {
+        this.internals.setFormValue(this.value !== undefined ? String(this.value) : null);
+        this.validate();
+    }
+    formatTimestamp(timestamp) {
+        return DateTime.fromMillis(timestamp, {
+            zone: this.timezone,
+            locale: this.locale,
+        }).toFormat(this.format);
+    }
+    updateDatePickerValue() {
+        const picker = this.datePickers[0];
+        if (!picker) {
+            return;
+        }
+        const value = this.datePickerValue;
+        if (picker.value !== value) {
+            picker.value = value;
+            if (value) {
+                picker.focusDate();
+            }
+        }
+    }
+    handleDatePickerToggle(event) {
+        event.preventDefault();
+        if (this.disabled) {
+            return;
+        }
+        this.menu.open = !this.menu.open;
+    }
+    handleDateChange(event) {
+        const date = DateTime.fromISO(event.detail, {
+            zone: this.timezone,
+            locale: this.locale,
+        }).startOf('day');
+        if (!date.isValid) {
+            return;
+        }
+        this.value = date.toMillis();
+        if (this.closeOnSelect) {
+            this.menu.open = false;
+        }
+        this.fire('change', this.value);
+    }
+    handleDateCancel() {
+        this.menu.open = false;
+    }
+    handleInputChange(event) {
+        const input = event.currentTarget;
+        const date = DateTime.fromFormat(input.value, this.format, {
+            locale: this.locale,
+            zone: this.timezone,
+        }).startOf('day');
+        if (!date.isValid) {
+            return;
+        }
+        this.value = date.toMillis();
+        this.fire('change', this.value);
+    }
+    syncDatePicker() {
+        const picker = this.datePickers[0];
+        if (!picker) {
+            return;
+        }
+        picker.min = this.min;
+        picker.max = this.max;
+        picker.locale = this.locale;
+    }
+    checkValidity() {
+        const valid = this.internals.checkValidity();
+        return valid;
+    }
+    reportValidity() {
+        const valid = this.internals.reportValidity();
+        if (valid) {
+            this.input.error = false;
+            this.input.errorText = '';
+        }
+        return valid;
+    }
+    // NOTE: To sync validity with the input field
+    setValidity(flags = {}, message = '') {
+        this.internals.setValidity(flags, message);
+        if (!message) {
+            this.input.error = false;
+            this.input.errorText = '';
+            return;
+        }
+        if (this.input.error) {
+            this.input.errorText = message;
+        }
+    }
+    // TODO: Option for supporting different inputs
+    render() {
+        return html `
+      <md-outlined-text-field
+        id="date-input"
+        label=${this.label}
+        .value=${this.displayValue}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        @change=${this.handleInputChange}
+        supporting-text=${this.supportingText}
+      >
+        <md-icon class="icon" slot="trailing-icon" @click=${this.handleDatePickerToggle}>calendar_month</md-icon>
+      </md-outlined-text-field>
+
+      <!-- NOTE: Might need some position tweaking -->
+      <md-menu anchor="date-input" positioning="popover">
+        <slot @date-change=${this.handleDateChange} @date-cancel=${this.handleDateCancel}></slot>
+      </md-menu>
+    `;
+    }
+}
+ExmDatePickerInputBase.formAssociated = true;
+// NOTE: For an issue where the browser don't know what to focus on if invalid, might need another solution after testing
+ExmDatePickerInputBase.shadowRootOptions = {
+    ...ExmgElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+__decorate([
+    property({ type: String })
+], ExmDatePickerInputBase.prototype, "label", void 0);
+__decorate([
+    property({ type: Number })
+], ExmDatePickerInputBase.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], ExmDatePickerInputBase.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], ExmDatePickerInputBase.prototype, "format", void 0);
+__decorate([
+    property({ type: String })
+], ExmDatePickerInputBase.prototype, "locale", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], ExmDatePickerInputBase.prototype, "timezone", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'close-on-select' })
+], ExmDatePickerInputBase.prototype, "closeOnSelect", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ExmDatePickerInputBase.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmDatePickerInputBase.prototype, "required", void 0);
+__decorate([
+    property({ type: String, attribute: 'supporting-text' })
+], ExmDatePickerInputBase.prototype, "supportingText", void 0);
+__decorate([
+    property({ type: Number })
+], ExmDatePickerInputBase.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], ExmDatePickerInputBase.prototype, "max", void 0);
+__decorate([
+    query('md-menu')
+], ExmDatePickerInputBase.prototype, "menu", void 0);
+__decorate([
+    query('md-outlined-text-field')
+], ExmDatePickerInputBase.prototype, "input", void 0);
+__decorate([
+    queryAssignedElements({ selector: 'exm-date-picker' })
+], ExmDatePickerInputBase.prototype, "datePickers", void 0);
+
+export { ExmDatePickerInputBase };
+//# sourceMappingURL=exm-date-picker-input-base.js.map

package/dist/exm-date-picker-input.d.ts

@@ -0,0 +1,18 @@
+import '@material/web/progress/circular-progress.js';
+import { ExmDatePickerInputBase } from './exm-date-picker-input-base.js';
+/**
+ * exm-date-picker-input
+ *
+ * Material 3 styled date picker with input, form associated.
+ *
+ * @customElement exm-date-picker-input
+ * @extends ExmDatePickerInputBase
+ */
+export declare class ExmDatePickerInput extends ExmDatePickerInputBase {
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-date-picker-input': ExmDatePickerInput;
+    }
+}