@per-diem-calculator/vanilla 1.0.0

package/src/ts/components/LocationDate/LocationDate.ts

@@ -0,0 +1,366 @@
+// Types
+import type { DateRaw } from '../../types/dates';
+
+// Utils
+import { applyStyles, removeStyles } from '../../utils/styles';
+import {
+    isDateRawType,
+    offsetDateString,
+    INPUT_DATE_MIN,
+    INPUT_DATE_MAX,
+    YEAR_MIN_REGEX,
+    YEAR_MAX_REGEX,
+    YEAR_INCOMPLETE_REGEX,
+} from '../../utils/dates';
+
+// HTML/CSS
+import templateHTML from './template.html?raw';
+
+// Template for this Custom Element
+const template = document.createElement('template');
+
+// Custom Element
+export class PdcLocationDate extends HTMLElement {
+    /* SETUP
+     */
+    static observedAttributes = ['bg'];
+    #attrName: 'start' | 'end';
+    #valid = false;
+    #styled = false;
+    #enabled = false;
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.#attrName = this.getAttribute('pdc') === 'start' ? 'start' : 'end';
+        this.#styled = this.getAttribute('styled') === 'true';
+
+        if (this.#styled) {
+            template.innerHTML = templateHTML;
+            applyStyles(this.#shadowRoot);
+        } else template.innerHTML = removeStyles(templateHTML);
+        this.#shadowRoot.appendChild(template.content.cloneNode(true));
+
+        this.#label.setAttribute(
+            'text',
+            this.#attrName.charAt(0).toUpperCase() + this.#attrName.slice(1),
+        );
+        if (this.#attrName === 'start') this.restrictStartInput();
+        else this.restrictEndInput();
+
+        this.enableTabIndex(false);
+        this.#styleEl();
+        this.#addEventListeners();
+    }
+
+    /* EVENTS
+     */
+    attributeChangedCallback(
+        _name: string,
+        _oldValue: string,
+        newValue: string,
+    ) {
+        if (!this.#styled) return;
+        this.#styleEl(`bg-${newValue === 'white' ? 'white' : 'neutral-50'}`);
+    }
+
+    #addEventListeners() {
+        this.#input.addEventListener('change', e => {
+            const target = e.target;
+            if (!(target instanceof HTMLInputElement)) return;
+            if (YEAR_INCOMPLETE_REGEX.test(target.value)) return;
+            this.handleInputChange(target.value);
+        });
+    }
+
+    /* GET ELS
+     */
+    get #label() {
+        const el = this.#shadowRoot.querySelector('pdc-label');
+        if (!el)
+            throw new Error(`Failed to render label in Date custom element`);
+        return el;
+    }
+
+    get #input() {
+        const el = this.#shadowRoot.querySelector('input');
+        if (!el)
+            throw new Error(`Failed to render input in Date custom element`);
+        return el;
+    }
+
+    get #shadowRoot() {
+        if (!this.shadowRoot)
+            throw new Error(
+                `Failed to render shadowRoot in Category custom element`,
+            );
+        return this.shadowRoot;
+    }
+
+    get #row() {
+        const el = this.closest<HTMLElement>('[data-pdc="location-row"]');
+        if (!el) throw new Error(`Failed to get row from Date custom element`);
+        return el;
+    }
+
+    get #prevRow() {
+        const el = this.#row.previousElementSibling;
+        const startDate =
+            el?.querySelector<PdcLocationDate>('[pdc="start"]')?.pdcValue;
+        const endEl = el?.querySelector<PdcLocationDate>('[pdc="end"]');
+        const endDate = endEl?.pdcValue;
+        return { el, startDate, endEl, endDate };
+    }
+
+    get #nextRow() {
+        const el = this.#row.nextElementSibling;
+        const startEl = el?.querySelector<PdcLocationDate>('[pdc="start"]');
+        const startDate = startEl?.pdcValue;
+        const endDate =
+            el?.querySelector<PdcLocationDate>('[pdc="end"]')?.pdcValue;
+        return { el, startEl, startDate, endDate };
+    }
+
+    get #startEl() {
+        const el = this.#row.querySelector<PdcLocationDate>('[pdc="start"]');
+        if (!el)
+            throw new Error(
+                `Failed to get row startDateEl from Date custom element`,
+            );
+        return el;
+    }
+
+    get #endEl() {
+        const el = this.#row.querySelector<PdcLocationDate>('[pdc="end"]');
+        if (!el)
+            throw new Error(
+                `Failed to get row endDateEl from Date custom element`,
+            );
+        return el;
+    }
+
+    get #errorEl() {
+        const el = this.closest('#locations-container')?.querySelector(
+            '#error',
+        );
+        if (!el)
+            throw new Error(
+                `Failed to get View's error element from Category custom element`,
+            );
+        return el;
+    }
+
+    /* VISUAL METHODS
+     */
+    #styleEl(bgColor: 'bg-white' | 'bg-neutral-50' | null = null) {
+        if (!this.#styled) return;
+        const div = this.#shadowRoot.querySelector('div');
+        div?.classList.remove(`bg-white`, `bg-neutral-50`);
+        div?.classList.add(bgColor ? bgColor : `bg-${this.getAttribute('bg')}`);
+    }
+
+    focusEl() {
+        this.#input.focus();
+    }
+
+    /* UPDATE METHODS
+     */
+    enableTabIndex(enable: boolean) {
+        this.#input.setAttribute('tabindex', enable ? '0' : '-1');
+    }
+
+    enable(enable: boolean) {
+        if (enable) this.#input.removeAttribute('disabled');
+        else this.#input.setAttribute('disabled', 'true');
+        this.enableTabIndex(enable);
+        this.#enabled = enable;
+    }
+
+    #setMin(value: DateRaw | null = null) {
+        this.#input.setAttribute('min', value ? value : INPUT_DATE_MIN);
+    }
+
+    #setMax(value: DateRaw | null = null) {
+        this.#input.setAttribute('max', value ? value : INPUT_DATE_MAX);
+    }
+
+    #setAttr(value: DateRaw | null = null) {
+        if (value) this.setAttribute(this.#attrName, value);
+        else this.removeAttribute(this.#attrName);
+    }
+
+    #setInputValue(value: DateRaw | null = null) {
+        this.#input.value = value ? value : '';
+    }
+
+    #reset() {
+        this.#setInputValue();
+        this.#setAttr();
+        this.focusEl();
+    }
+
+    #resetEnd() {
+        this.#endEl.#setInputValue();
+        this.#endEl.#setAttr();
+        this.#endEl.restrictEndInput();
+    }
+
+    async handleInputChange(date: string | null = null) {
+        if (this.#styled) this.#input.classList.remove('success');
+        if (!this.#isValidInput(date) || !date) return;
+        if (!(await this.#isStartBeforeEnd()) || !isDateRawType(date)) return;
+        this.#setInputValue(date);
+        this.#setAttr(date);
+        await this.#startEl.restrictStartInput();
+        this.#endEl.restrictEndInput();
+        if (this.#styled) {
+            this.#input.classList.remove('error');
+            this.#input.classList.add('success');
+            this.renderError(false);
+        }
+    }
+
+    #updateStartBasedOnPrevEnd() {
+        if (!this.#prevRow.endDate) return;
+        const correctStart = offsetDateString(this.#prevRow.endDate, 1);
+        if (this.#startDateInputVal === correctStart) return;
+        this.enable(false);
+        this.#setMin(correctStart);
+        this.#setInputValue(correctStart);
+        this.#setAttr(correctStart);
+        this.#input.classList.add('success');
+        this.#prevRow.endEl?.enable(false);
+    }
+
+    #updateEndBasedOnNextStart() {
+        if (!this.#nextRow.startDate) return;
+        this.enable(false);
+        const correctEnd = offsetDateString(this.#nextRow.startDate, -1);
+        if (this.#endDateInputVal === correctEnd) return;
+        this.#setMax(correctEnd);
+        this.#setInputValue(correctEnd);
+        this.#setAttr(correctEnd);
+        this.#input.classList.add('success');
+        this.#nextRow.startEl?.enable(false);
+    }
+
+    /* VALIDATION
+     */
+    renderError(
+        enable: boolean,
+        msg = `Enter a valid ${this.#attrName} date.`,
+    ) {
+        if (enable) {
+            if (this.#styled) {
+                this.#input.classList.add('error');
+                this.#errorEl.classList.add('active');
+            }
+            this.#errorEl.textContent = msg;
+            return;
+        }
+        if (!this.#styled) return;
+        this.#errorEl.classList.remove('active');
+    }
+
+    #isValidInput(date: string | null = null) {
+        if (
+            !date ||
+            YEAR_MIN_REGEX.test(date) ||
+            YEAR_MAX_REGEX.test(date) ||
+            YEAR_INCOMPLETE_REGEX.test(date) ||
+            !isDateRawType(date)
+        ) {
+            this.#reset();
+            if (this.#attrName === 'start') this.#resetEnd();
+            if (!date) return false;
+            if (YEAR_MIN_REGEX.test(date))
+                this.renderError(true, `Date must be after 2020`);
+            if (YEAR_MAX_REGEX.test(date))
+                this.renderError(true, `Date must be before 2041`);
+            if (YEAR_INCOMPLETE_REGEX.test(date))
+                this.renderError(true, `Enter a valid date.`);
+            return false;
+        }
+        return true;
+    }
+
+    async #isStartBeforeEnd() {
+        if (!this.#startDateInputVal) return false;
+        if (!this.#endDateInputVal) return true;
+        if (
+            Date.parse(this.#startDateInputVal) >
+            Date.parse(this.#endDateInputVal)
+        ) {
+            await this.#startEl.restrictStartInput();
+            this.#resetEnd();
+            this.#endEl.renderError(true, 'End date must be after start date.');
+            return false;
+        }
+        return true;
+    }
+
+    async restrictStartInput() {
+        if (!this.#endEl.pdcValue && !this.#prevRow.el) {
+            this.enable(true);
+            this.#setMax();
+            this.#setMin();
+            return;
+        }
+        if (!this.#prevRow.el) this.enable(true);
+        if (this.#endEl.pdcValue) this.#setMax(this.#endEl.pdcValue);
+        this.#updateStartBasedOnPrevEnd();
+    }
+
+    restrictEndInput() {
+        if (!this.#startEl.pdcValue) {
+            this.enable(false);
+            this.#setMin();
+            this.#setMax();
+            return;
+        } else {
+            this.enable(true);
+            this.#setMin(this.#startEl.pdcValue);
+        }
+        this.#updateEndBasedOnNextStart();
+    }
+
+    validate() {
+        this.#valid = false;
+        const attr = this.getAttribute(this.#attrName);
+        if (!(attr && isDateRawType(attr))) {
+            this.renderError(true);
+            return this.#valid;
+        }
+        this.#valid = true;
+        return this.#valid;
+    }
+
+    /* GET DATA METHODS
+     */
+    get inputValue() {
+        return this.#input.value;
+    }
+
+    get #startDateInputVal() {
+        return (
+                this.#startEl.inputValue &&
+                    isDateRawType(this.#startEl.inputValue)
+            ) ?
+                this.#startEl.inputValue
+            :   null;
+    }
+
+    get #endDateInputVal() {
+        return this.#endEl.inputValue && isDateRawType(this.#endEl.inputValue) ?
+                this.#endEl.inputValue
+            :   null;
+    }
+
+    get isEnabled() {
+        return this.#enabled;
+    }
+
+    get pdcValue() {
+        const value = this.getAttribute(this.#attrName);
+        return !!value && isDateRawType(value) ? value : null;
+    }
+}

package/src/ts/components/LocationDate/template.html

@@ -0,0 +1,27 @@
+<div
+    class="group flex items-center justify-between border-b border-b-neutral-100
+        px-3"
+>
+    <pdc-label styled="true"></pdc-label>
+    <input
+        tabindex="0"
+        disabled
+        type="date"
+        id="date"
+        min="2021-01-01"
+        max="2040-12-31"
+        required
+        class="[.error]:border-r-error-400 [.success]:border-r-success-400
+            focus-within:after:border-b-primary-800
+            webkit-calendar-picker-indicator
+            [&::-webkit-calendar-picker-indicator:focus]:border-b-primary-800
+            relative my-3 w-[68%] border-r-3 border-r-transparent bg-transparent
+            py-3 pr-3 text-neutral-800 opacity-100
+            transition-[border-color_opacity] after:absolute after:left-0
+            after:mt-1.5 after:w-full after:max-w-[95%] after:border-b-3
+            after:border-b-transparent after:transition-colors
+            after:content-['_'] focus:outline-none disabled:cursor-not-allowed
+            disabled:border-r-transparent disabled:!text-neutral-800/30
+            sm:w-[75%]"
+    />
+</div>

package/src/ts/components/LocationSelect/LocationSelect.ts

@@ -0,0 +1,299 @@
+// Types
+import type { Location } from '../../types/locations';
+
+// Utils
+import { applyStyles, removeStyles } from '../../utils/styles';
+import { debounce, handlePointerDown, handlePointerUp } from '../../utils/misc';
+import TomSelect from 'tom-select';
+
+// HTML/CSS
+import templateHTML from './template.html?raw';
+
+// Template for this Custom Element
+const template = document.createElement('template');
+
+// Custom Element
+export class PdcLocationSelect extends HTMLElement {
+    /* SETUP
+     */
+    static observedAttributes = ['bg'];
+    #attrName: 'country' | 'city';
+    #valid = false;
+    #styled = false;
+    #enabled = false;
+    #tomSelect: TomSelect;
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.#attrName =
+            this.getAttribute('pdc') === 'country' ? 'country' : 'city';
+        this.#styled = this.getAttribute('styled') === 'true';
+        this.#tomSelect = this.#render();
+    }
+
+    #render() {
+        this.removeAttribute(this.#attrName);
+        this.#shadowRoot.innerHTML = '';
+        if (this.#styled) {
+            template.innerHTML = templateHTML;
+            applyStyles(this.#shadowRoot);
+        } else template.innerHTML = removeStyles(templateHTML);
+        this.#shadowRoot.appendChild(template.content.cloneNode(true));
+        this.#label.setAttribute(
+            'text',
+            this.#attrName === 'country' ? 'State' : 'City',
+        );
+        return this.#createTomSelect();
+    }
+
+    /* EVENTS
+     */
+    attributeChangedCallback(
+        _name: string,
+        _oldValue: string,
+        newValue: string,
+    ) {
+        if (!this.#styled) return;
+        this.#styleEl(`bg-${newValue === 'white' ? 'white' : 'neutral-50'}`);
+    }
+
+    #addEventListeners() {
+        // Mouse, touch events
+        let pointerStartX = 0;
+        let pointerStartY = 0;
+        this.#tomSelect.control.addEventListener(
+            'pointerdown',
+            (e: PointerEvent) => {
+                const result = handlePointerDown(e);
+                pointerStartX = result.pointerStartX;
+                pointerStartY = result.pointerStartY;
+            },
+        );
+        this.#container.addEventListener('pointerup', (e: PointerEvent) => {
+            const result = handlePointerUp(
+                e,
+                this.#handleClicks.bind(this),
+                pointerStartX,
+                pointerStartY,
+            );
+            pointerStartX = result.pointerStartX;
+            pointerStartY = result.pointerStartY;
+        });
+
+        // Keyboard events
+        this.#container.addEventListener('keydown', (e: KeyboardEvent) => {
+            if (!(e.key === 'Enter' || e.key === ' ')) return;
+            this.#handleClicks(e);
+        });
+
+        this.#tomSelect.on('change', () => {
+            const value = this.#tomSelect.getValue();
+            if (Array.isArray(value)) return; // Ensures string value as TomSelect can return string[] if multiple selection enabled
+            this.setAttribute(this.#attrName, value);
+
+            if (this.#styled) {
+                this.#renderError(false);
+                this.#tomSelect.control.classList.remove('error');
+                this.#tomSelect.control.classList.add('success');
+            }
+            this.#tomSelect.control.setAttribute('tabindex', '-1');
+        });
+    }
+
+    #handleClicks = (e: Event) => {
+        const target = e.target;
+        if (
+            !(
+                target instanceof HTMLElement &&
+                (target.closest('.ts-control') || target.closest('button'))
+            )
+        )
+            return;
+        const handler = debounce(() => {
+            this.#tomSelect.open();
+        });
+        handler();
+    };
+
+    /* Get Els
+     */
+
+    get #container() {
+        const el = this.#shadowRoot.querySelector('div');
+        if (!el)
+            throw new Error(
+                `Failed to get container for Select custom element`,
+            );
+        return el;
+    }
+
+    get #select() {
+        const el = this.#shadowRoot.querySelector('select');
+        if (!el)
+            throw new Error(`Failed to get select for Select custom element`);
+        return el;
+    }
+
+    get #button() {
+        const el = this.#shadowRoot.querySelector('button');
+        if (!el)
+            throw new Error(`Failed to get button for Select custom element`);
+        return el;
+    }
+
+    get #label() {
+        const el = this.#shadowRoot.querySelector('pdc-label');
+        if (!el)
+            throw new Error(`Failed to get label for Select custom element`);
+        return el;
+    }
+
+    get #loadingSpinner() {
+        const el = this.#shadowRoot.querySelector('#loading-spinner');
+        if (!el)
+            throw new Error(
+                `Failed to get loading spinner element for Select custom element`,
+            );
+        return el;
+    }
+
+    get #errorEl() {
+        const el = this.closest('#locations-container')?.querySelector(
+            '#error',
+        );
+        if (!el)
+            throw new Error(
+                `Failed to get View's error element from Category custom element`,
+            );
+        return el;
+    }
+
+    get #shadowRoot() {
+        if (!this.shadowRoot)
+            throw new Error(
+                `Failed to render shadowRoot in Select custom element`,
+            );
+        return this.shadowRoot;
+    }
+
+    /* VISUAL METHODS
+     */
+    #styleEl(bgColor: 'bg-white' | 'bg-neutral-50' | null = null) {
+        if (!this.#styled) return;
+        const div = this.#shadowRoot.querySelector('div');
+        div?.classList.remove(`bg-white`, `bg-neutral-50`);
+        div?.classList.add(bgColor ? bgColor : `bg-${this.getAttribute('bg')}`);
+    }
+
+    showLoadingSpinner(enabled: boolean) {
+        if (!this.#styled) return;
+        if (enabled) this.#loadingSpinner.classList.add('active');
+        else this.#loadingSpinner.classList.remove('active');
+    }
+
+    focusEl() {
+        this.#tomSelect.control.focus();
+    }
+
+    /* UPDATE METHODS
+     */
+    enableTabIndex(enable: boolean) {
+        this.#button.setAttribute('tabindex', enable ? '0' : '-1');
+    }
+
+    enable(enable: boolean) {
+        this.#render();
+        if (enable) {
+            this.#tomSelect.enable();
+            this.#container.classList.add('active');
+        } else {
+            this.#tomSelect.disable();
+            this.#container.classList.remove('active');
+        }
+        this.enableTabIndex(enable);
+        this.#enabled = enable;
+    }
+
+    setOptions(locations: Location[]) {
+        locations.forEach(location => {
+            const value =
+                this.#attrName === 'country' ? location.country : location.city;
+            if (!location.label || !value)
+                throw new Error(
+                    `Failed to get label when creating the options for ${location}.`,
+                );
+            const option = document.createElement('option');
+            option.setAttribute('value', value);
+            option.textContent = location.label;
+            this.#select.appendChild(option);
+            this.#tomSelect.sync();
+        });
+    }
+
+    #createTomSelect() {
+        const noResultsText =
+            this.#attrName === 'city' ?
+                `No results
+        found.<br><br>Choose the first available option.<br><br>E.g. Standard Rate, [OTHER], etc.`
+            :   `No results found.`;
+        const tomSelect = new TomSelect(this.#select, {
+            placeholder: `Select ${this.#attrName === 'country' ? 'state' : 'city'}`,
+            maxItems: 1,
+            plugins: ['dropdown_input'],
+            selectOnTab: true,
+            openOnFocus: false,
+            render: {
+                no_results: () => {
+                    return /* HTML */ ` <div class="no-results">
+                        ${noResultsText}
+                    </div>`;
+                },
+            },
+        });
+        this.#tomSelect = tomSelect;
+        this.#tomSelect.disable();
+        this.#tomSelect.tabIndex = -1;
+        this.enableTabIndex(false);
+        this.#addEventListeners();
+        this.#styleEl();
+        return tomSelect;
+    }
+
+    /* VALIDATION
+     */
+    #renderError(enable: boolean) {
+        if (enable) {
+            if (this.#styled) {
+                this.#tomSelect.control.classList.add('error');
+                this.#errorEl.classList.add('active');
+            }
+            this.#errorEl.textContent =
+                this.#attrName === 'country' ? `Select state.` : `Select city.`;
+            return;
+        }
+        if (!this.#styled) return;
+        this.#tomSelect.control.classList.remove('error');
+        this.#errorEl.classList.remove('active');
+    }
+
+    validate() {
+        this.#valid = false;
+        if (!this.hasAttribute(this.#attrName)) {
+            if (this.#styled) this.#renderError(true);
+            return this.#valid;
+        }
+        this.#valid = true;
+        return this.#valid;
+    }
+
+    /* GET DATA METHODS
+     */
+    get isEnabled() {
+        return this.#enabled;
+    }
+
+    get pdcValue() {
+        const value = this.getAttribute(this.#attrName);
+        return value ? value : null;
+    }
+}