@genesislcap/foundation-ui 14.447.1 → 14.448.0-canary.wealth

package/dist/esm/date-picker/date-picker.js

@@ -6,9 +6,11 @@ import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import localeData from 'dayjs/plugin/localeData';
 import LocalizedFormat from 'dayjs/plugin/localizedFormat';
+import { wasClickOutsideElement } from '../utils';
 import Calendar from './calendar';
 import { foundationDatePickerStyles as styles } from './date-picker.styles';
 import { foundationDatePickerTemplate as template } from './date-picker.template';
+import { DATE_PICKER_VALUE_FORMAT, formatToPlaceholder, getBrowserLocale, getDisplayFormatForLang, hasDateValue, parseDatePickerValue, } from './date-picker.util';
 import Day from './day';
 import { getNextEnabledDay } from './day.util';
 export const foundationDatePickerShadowOptions = undefined;
@@ -31,7 +33,7 @@ export class DatePicker extends FoundationElement {
          *  </rapid-date-picker>
          * ```
          */
-        this.format = 'MM-DD-YYYY';
+        this.format = DATE_PICKER_VALUE_FORMAT;
         this.lang = 'en-US';
         this.visible = false;
         /**
@@ -56,53 +58,284 @@ export class DatePicker extends FoundationElement {
          * ```
          */
         this.disabledDaysOfWeek = [];
+        this.suppressValueChanged = false;
+        this.cachedFormat = DATE_PICKER_VALUE_FORMAT;
+        this.clickOutside = (e) => this.handleClickOutside(e);
+        this.keydownOutside = (e) => this.handleKeydownOutside(e);
     }
     formatChanged(oldValue, newValue) {
-        if (newValue && this.calendar) {
+        if (!this.useLocaleFormat && newValue) {
+            this.cacheUserFormat(newValue);
+        }
+        if (newValue && this.calendar && hasDateValue(this.value)) {
             this.formatDate = dayjs(this.currentDate.Date).format(newValue);
         }
     }
+    langChanged() {
+        this.applyEffectiveLangChange();
+    }
+    useLocaleFormatChanged(oldValue, newValue) {
+        // Pre-mount: format/useLocaleFormat may be set in any order; let connectedCallback do the
+        // initial cache so we don't snapshot the default format before the `format` attribute is parsed.
+        if (!this.calendar) {
+            return;
+        }
+        if (newValue && !oldValue) {
+            this.cacheUserFormat(this.format);
+        }
+        else if (!newValue && oldValue) {
+            this.restoreUserFormat();
+        }
+        this.applyEffectiveLangChange();
+    }
     inlineCalendarChanged() {
+        if (this.inlineCalendar) {
+            document.removeEventListener('mousedown', this.clickOutside);
+            document.removeEventListener('keydown', this.keydownOutside);
+        }
+        else if (this.visible) {
+            document.addEventListener('mousedown', this.clickOutside);
+            document.addEventListener('keydown', this.keydownOutside);
+        }
         this.toggleVisibility();
     }
     hideWeekendsCalendarChanged() {
         this.toggleVisibility();
     }
     valueChanged(oldValue, newValue) {
-        if (newValue && this.calendar) {
-            const localeFormat = dayjs().localeData().longDateFormat('L');
-            this.currentDate = new Day(dayjs(newValue, localeFormat).toDate(), this.lang);
-            this.calendar.goToDate(this.currentDate.monthNumber, this.currentDate.year);
-            this.formatDate = dayjs(this.currentDate.Date).format(this.format);
-            this.updateHeaderText();
-            this.monthList = this.getMonthDaysGrid();
+        if (this.suppressValueChanged) {
+            return;
+        }
+        if (!this.calendar) {
+            return;
+        }
+        if (!hasDateValue(newValue)) {
+            if (this.allowEmpty) {
+                this.clearToEmpty(false);
+            }
+            else {
+                this.resetToDefaultDate();
+            }
+            return;
         }
+        this.applyValue(newValue);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousedown', this.clickOutside);
+        document.removeEventListener('keydown', this.keydownOutside);
+        super.disconnectedCallback();
     }
     connectedCallback() {
-        var _a;
         super.connectedCallback();
         dayjs.extend(customParseFormat);
         dayjs.extend(LocalizedFormat);
         dayjs.extend(localeData);
         this.substringNumber = 3;
+        if (this.useLocaleFormat) {
+            this.cacheUserFormat(this.format);
+            this.applyLocaleFormat();
+        }
         const dateString = this.value;
-        const dayjsDate = dateString ? dayjs(dateString, 'MM-DD-YYYY') : dayjs();
-        let currentDate = new Day(dayjsDate.toDate(), this.lang);
+        if (this.allowEmpty && !hasDateValue(dateString)) {
+            this.initializeEmpty();
+            return;
+        }
+        if (hasDateValue(dateString)) {
+            this.applyValue(dateString);
+            return;
+        }
+        this.initializeWithDefaultDate();
+    }
+    /**
+     * Clears the selected date (only when `allow-empty` is enabled).
+     * @public
+     */
+    clear() {
+        if (!this.allowEmpty) {
+            return;
+        }
+        this.clearToEmpty(true);
+    }
+    /**
+     * @internal
+     */
+    get inputValue() {
+        return hasDateValue(this.value) ? this.formatDate : '';
+    }
+    /**
+     * @internal
+     */
+    get inputPlaceholder() {
+        var _a;
+        if (!this.allowEmpty || hasDateValue(this.value)) {
+            return '';
+        }
+        return ((_a = this.placeholder) === null || _a === void 0 ? void 0 : _a.trim()) || formatToPlaceholder(this.format);
+    }
+    /**
+     * Locale for display format and calendar labels: explicit `lang`, or browser when using locale format.
+     * @internal
+     */
+    get effectiveLang() {
+        if (this.useLocaleFormat && !this.hasAttribute('lang')) {
+            return getBrowserLocale();
+        }
+        return this.lang;
+    }
+    applyLocaleFormat() {
+        this.format = getDisplayFormatForLang(this.effectiveLang);
+    }
+    cacheUserFormat(format) {
+        const trimmed = format === null || format === void 0 ? void 0 : format.trim();
+        if (trimmed) {
+            this.cachedFormat = trimmed;
+        }
+    }
+    restoreUserFormat() {
+        this.format = this.cachedFormat;
+    }
+    applyEffectiveLangChange() {
+        var _a, _b;
+        if (!this.calendar) {
+            return;
+        }
+        if (this.useLocaleFormat) {
+            this.applyLocaleFormat();
+        }
+        const viewYear = this.calendar.year;
+        const viewMonth = this.calendar.month.number;
+        const selectedDate = (_b = (_a = this.currentDate) === null || _a === void 0 ? void 0 : _a.Date) !== null && _b !== void 0 ? _b : dayjs().toDate();
+        this.currentDate = new Day(selectedDate, this.effectiveLang);
+        this.calendar = new Calendar(viewYear, viewMonth, this.effectiveLang);
+        if (hasDateValue(this.value)) {
+            this.formatDate = dayjs(this.currentDate.Date).format(this.format);
+        }
+        this.updateHeaderText();
+        this.monthList = this.getMonthDaysGrid();
+    }
+    syncValueAttribute(value) {
+        this.suppressValueChanged = true;
+        this.value = value;
+        this.suppressValueChanged = false;
+    }
+    initializeEmpty() {
+        const viewDate = dayjs();
+        this.currentDate = new Day(viewDate.toDate(), this.effectiveLang);
+        this.calendar = new Calendar(this.currentDate.year, this.currentDate.monthNumber, this.effectiveLang);
+        this.formatDate = '';
+        this.syncValueAttribute('');
+        this.currentMonth = this.calendar.month.name;
+        this.currentYear = this.calendar.year;
+        this.monthList = this.getMonthDaysGrid();
+    }
+    initializeWithDefaultDate() {
+        this.resetToDefaultDate(true);
+    }
+    resetToDefaultDate(createCalendar = false) {
+        var _a;
+        let currentDate = new Day(dayjs().toDate(), this.effectiveLang);
         if ((_a = this.disabledDaysOfWeek) === null || _a === void 0 ? void 0 : _a.length) {
-            currentDate = getNextEnabledDay(this.disabledDaysOfWeek, currentDate, this.lang);
+            currentDate = getNextEnabledDay(this.disabledDaysOfWeek, currentDate, this.effectiveLang);
         }
         this.currentDate = currentDate;
-        this.calendar = new Calendar(this.currentDate.year, this.currentDate.monthNumber, this.lang);
-        this.value = dayjs(this.currentDate.Date).format('MM-DD-YYYY');
+        if (createCalendar || !this.calendar) {
+            this.calendar = new Calendar(this.currentDate.year, this.currentDate.monthNumber, this.effectiveLang);
+        }
+        else {
+            this.calendar.goToDate(this.currentDate.monthNumber, this.currentDate.year);
+        }
+        this.formatDate = dayjs(this.currentDate.Date).format(this.format);
+        this.syncValueAttribute(dayjs(this.currentDate.Date).format(DATE_PICKER_VALUE_FORMAT));
         this.currentMonth = this.calendar.month.name;
         this.currentYear = this.calendar.year;
+        this.monthList = this.getMonthDaysGrid();
+    }
+    applyValue(dateString) {
+        const parsed = parseDatePickerValue(dateString, this.format);
+        if (!parsed) {
+            if (this.allowEmpty) {
+                this.clearToEmpty(false);
+            }
+            else {
+                this.resetToDefaultDate();
+            }
+            return;
+        }
+        // Honor the host's value verbatim. Disabled-day roll-forward only applies to the
+        // default "today" fallback (see `resetToDefaultDate`); programmatic writes should not
+        // be silently shifted, and user clicks on disabled day cells are blocked in the template.
+        this.currentDate = new Day(parsed.toDate(), this.effectiveLang);
+        if (!this.calendar) {
+            this.calendar = new Calendar(this.currentDate.year, this.currentDate.monthNumber, this.effectiveLang);
+        }
+        else {
+            this.calendar.goToDate(this.currentDate.monthNumber, this.currentDate.year);
+        }
         this.formatDate = dayjs(this.currentDate.Date).format(this.format);
+        this.syncValueAttribute(dayjs(this.currentDate.Date).format(DATE_PICKER_VALUE_FORMAT));
+        this.updateHeaderText();
         this.monthList = this.getMonthDaysGrid();
     }
+    /**
+     * Resets to the empty/cleared view.
+     * @param emitEvent - emit `value-changed` for user-driven clears (public `clear()`); skip for
+     *   host-driven attribute writes since the host is the source of the change.
+     */
+    clearToEmpty(emitEvent) {
+        const viewDate = dayjs();
+        this.currentDate = new Day(viewDate.toDate(), this.effectiveLang);
+        if (this.calendar) {
+            this.calendar.goToDate(this.currentDate.monthNumber, this.currentDate.year);
+            this.updateHeaderText();
+            this.monthList = this.getMonthDaysGrid();
+        }
+        this.formatDate = '';
+        this.syncValueAttribute('');
+        if (emitEvent) {
+            this.$emit('value-changed', undefined);
+        }
+    }
     updateHeaderText() {
         this.currentMonth = this.calendar.month.name;
         this.currentYear = this.calendar.year;
     }
+    visibleChanged(_prev, next) {
+        if (this.inlineCalendar) {
+            return;
+        }
+        if (next) {
+            document.addEventListener('mousedown', this.clickOutside);
+            document.addEventListener('keydown', this.keydownOutside);
+        }
+        else {
+            document.removeEventListener('mousedown', this.clickOutside);
+            document.removeEventListener('keydown', this.keydownOutside);
+        }
+    }
+    handleKeydownOutside(event) {
+        if (this.inlineCalendar || !this.visible) {
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.closeCalendar();
+        }
+    }
+    handleClickOutside(event) {
+        if (this.inlineCalendar || !this.visible) {
+            return;
+        }
+        if (wasClickOutsideElement(event, this)) {
+            this.closeCalendar();
+        }
+    }
+    closeCalendar() {
+        if (!this.visible) {
+            return;
+        }
+        this.visible = false;
+        this.toggleVisibility();
+    }
     toggleCalendar() {
         this.visible = !this.visible;
         this.toggleVisibility();
@@ -115,6 +348,9 @@ export class DatePicker extends FoundationElement {
         this.calendarDropdownClasses = classNames(['visible', this.visible], this.position, ['inline', this.inlineCalendar], ['hide-weekends', this.hideWeekends]);
     }
     isSelectedDate(date) {
+        if (this.allowEmpty && !hasDateValue(this.value)) {
+            return false;
+        }
         return dayjs(date.Date).isSame(this.currentDate.Date, 'day');
     }
     isCurrentCalendarMonth() {
@@ -135,14 +371,16 @@ export class DatePicker extends FoundationElement {
         this.monthList = this.getMonthDaysGrid();
     }
     selectDay(day) {
-        if (dayjs(day.Date).isSame(this.currentDate.Date))
+        const sameDayAsCurrent = dayjs(day.Date).isSame(this.currentDate.Date, 'day');
+        if (sameDayAsCurrent && hasDateValue(this.value)) {
             return;
+        }
         this.currentDate = day;
         if (day.monthNumber !== this.calendar.month.number) {
             this.prevMonth();
         }
         this.formatDate = dayjs(this.currentDate.Date).format(this.format);
-        this.value = dayjs(day.Date).format('MM-DD-YYYY');
+        this.syncValueAttribute(dayjs(day.Date).format(DATE_PICKER_VALUE_FORMAT));
         this.$emit('value-changed', this.value);
         this.toggleCalendar();
     }
@@ -168,6 +406,9 @@ __decorate([
 __decorate([
     attr
 ], DatePicker.prototype, "lang", void 0);
+__decorate([
+    attr({ attribute: 'use-locale-format', mode: 'boolean' })
+], DatePicker.prototype, "useLocaleFormat", void 0);
 __decorate([
     attr
 ], DatePicker.prototype, "visible", void 0);
@@ -183,6 +424,12 @@ __decorate([
 __decorate([
     attr
 ], DatePicker.prototype, "label", void 0);
+__decorate([
+    attr({ attribute: 'allow-empty', mode: 'boolean' })
+], DatePicker.prototype, "allowEmpty", void 0);
+__decorate([
+    attr
+], DatePicker.prototype, "placeholder", void 0);
 __decorate([
     attr
 ], DatePicker.prototype, "value", void 0);

package/dist/esm/date-picker/date-picker.template.js

@@ -5,7 +5,15 @@ const SUNDAY_INDEX = 1;
 const SATURDAY_INDEX = 7;
 const WEEKEND_DAY_INDICES = [SUNDAY_INDEX, SATURDAY_INDEX];
 export const getPrefixedDatePicker = (prefix) => html `
-  <${prefix}-text-field data-test-id="date-picker" readonly :value="${(x) => x.formatDate}" part="date-toggle" class="date-toggle" @click="${(x) => x.toggleCalendar()}">
+  <${prefix}-text-field
+    data-test-id="date-picker"
+    readonly
+    :value="${(x) => x.inputValue}"
+    placeholder="${(x) => x.inputPlaceholder}"
+    part="date-toggle"
+    class="date-toggle"
+    @click="${(x) => x.toggleCalendar()}"
+  >
     ${(x) => x.label}
     <div class="input-icon-container" part="input-icon-container" slot="end"><${prefix}-icon variant="regular" name="calendar-alt" size="sm"></${prefix}-icon></div>
   </${prefix}-text-field>

package/dist/esm/date-picker/date-picker.util.js

@@ -0,0 +1,92 @@
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import localeData from 'dayjs/plugin/localeData';
+import LocalizedFormat from 'dayjs/plugin/localizedFormat';
+import 'dayjs/locale/en-gb';
+dayjs.extend(customParseFormat);
+dayjs.extend(localeData);
+dayjs.extend(LocalizedFormat);
+/**
+ * Maps BCP-47 tags to dayjs locale ids (lowercase, e.g. `fr-FR` → `fr-fr`).
+ * English variants map to dayjs bundles: `en-US` → `en`, `en-GB` → `en-gb`.
+ * @public
+ */
+export function resolveDayjsLocale(lang) {
+    const normalized = ((lang === null || lang === void 0 ? void 0 : lang.trim()) || 'en').toLowerCase().replace(/_/g, '-');
+    if (normalized === 'en-us' || normalized === 'en') {
+        return 'en';
+    }
+    if (normalized === 'en-gb') {
+        return 'en-gb';
+    }
+    return normalized;
+}
+function dayjsLocaleWasApplied(requested, applied) {
+    if (requested === applied) {
+        return true;
+    }
+    const language = requested.split('-')[0];
+    return applied === language;
+}
+/**
+ * Browser BCP-47 locale (e.g. `en-GB`), or `en` when unavailable (SSR/tests).
+ * @public
+ */
+export function getBrowserLocale() {
+    if (typeof navigator !== 'undefined' && navigator.language) {
+        return navigator.language;
+    }
+    return 'en';
+}
+/**
+ * Display format from dayjs locale `L` (e.g. en / en-US → MM/DD/YYYY, en-gb → DD/MM/YYYY).
+ * Falls back to `en` when the locale is not loaded in dayjs (import the matching `dayjs/locale/*` bundle).
+ * @public
+ */
+export function getDisplayFormatForLang(lang = 'en') {
+    const locale = resolveDayjsLocale(lang);
+    const instance = dayjs().locale(locale);
+    const appliedLocale = instance.locale();
+    if (!dayjsLocaleWasApplied(locale, appliedLocale)) {
+        return dayjs().locale('en').localeData().longDateFormat('L') || 'MM/DD/YYYY';
+    }
+    return instance.localeData().longDateFormat('L') || 'MM/DD/YYYY';
+}
+/**
+ * Maps a dayjs-style display format to a lowercase placeholder hint (e.g. DD/MM/YYYY → dd/mm/yyyy).
+ * @public
+ */
+export function formatToPlaceholder(format) {
+    return format
+        .replace(/YYYY/g, 'yyyy')
+        .replace(/YY(?!Y)/g, 'yy')
+        .replace(/DD/g, 'dd')
+        .replace(/D(?!D)/g, 'd')
+        .replace(/MM/g, 'mm')
+        .replace(/M(?!M)/g, 'm');
+}
+export function hasDateValue(value) {
+    return value !== null && value !== undefined && String(value).trim() !== '';
+}
+/**
+ * Internal wire format for the date picker's `value` attribute.
+ * Display formatting is independent (see `format` / `getDisplayFormatForLang`).
+ * @public
+ */
+export const DATE_PICKER_VALUE_FORMAT = 'MM-DD-YYYY';
+/**
+ * Strictly parses a date picker value (`displayFormat` or internal `DATE_PICKER_VALUE_FORMAT`). Returns null when invalid.
+ * @public
+ */
+export function parseDatePickerValue(dateString, displayFormat) {
+    const trimmed = String(dateString).trim();
+    const display = dayjs(trimmed, displayFormat, true);
+    if (display.isValid()) {
+        return display;
+    }
+    const internal = dayjs(trimmed, DATE_PICKER_VALUE_FORMAT, true);
+    if (internal.isValid()) {
+        return internal;
+    }
+    return null;
+}

package/dist/esm/date-picker/index.js

@@ -1,3 +1,4 @@
 export * from './date-picker.styles';
 export * from './date-picker.template';
 export * from './date-picker';
+export * from './date-picker.util';

package/dist/esm/search-bar/search-bar-combobox.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { Combobox } from '@microsoft/fast-components';
-import { attr } from '@microsoft/fast-element';
+import { attr, observable } from '@microsoft/fast-element';
 import { foundationSearchBarComboboxStyles } from './search-bar-combobox.styles';
 import { foundationSearchBarComboboxTemplate } from './search-bar-combobox.template';
 import { COMBO_INPUT_MIN_LENGTH } from './search-bar.types';
@@ -10,6 +10,18 @@ import { COMBO_INPUT_MIN_LENGTH } from './search-bar.types';
  * @fires change - Fired when the combobox value changes
  * @fires inputdeleted - Fired when the input is cleared by the user
  */
+const INPUT_LOCK_ALLOWED_KEYS = new Set([
+    'Backspace',
+    'Delete',
+    'Tab',
+    'Escape',
+    'ArrowUp',
+    'ArrowDown',
+    'ArrowLeft',
+    'ArrowRight',
+    'Home',
+    'End',
+]);
 export class SearchBarCombobox extends Combobox {
     constructor() {
         super(...arguments);
@@ -70,6 +82,14 @@ export class SearchBarCombobox extends Combobox {
     }
     keydownHandler(e) {
         const key = e.key;
+        if (this.inputLocked) {
+            const isModifier = e.ctrlKey || e.metaKey || e.altKey;
+            const isAllowed = INPUT_LOCK_ALLOWED_KEYS.has(key) || isModifier;
+            if (!isAllowed) {
+                e.preventDefault();
+                return false;
+            }
+        }
         switch (key) {
             case 'ArrowUp':
             case 'ArrowDown': {
@@ -103,6 +123,13 @@ export class SearchBarCombobox extends Combobox {
         }
     }
     inputHandler(e) {
+        if (this.inputLocked) {
+            this.control.value = '';
+            this.value = '';
+            this.open = false;
+            e.stopImmediatePropagation();
+            return;
+        }
         if (this.control.value.length >= this.minlength) {
             this.open = true;
         }
@@ -128,6 +155,9 @@ export class SearchBarCombobox extends Combobox {
 __decorate([
     attr
 ], SearchBarCombobox.prototype, "minlength", void 0);
+__decorate([
+    observable
+], SearchBarCombobox.prototype, "inputLocked", void 0);
 export const foundationSearchBarComboboxShadowOptions = {
     delegatesFocus: true,
     mode: 'open',

package/dist/esm/search-bar/search-bar-combobox.styles.js

@@ -23,4 +23,19 @@ export const foundationSearchBarComboboxStyles = (context, definition) => css `
     min-width: 150px;
     max-width: 169px;
   }
+
+  .input-locked .control,
+  :host(.input-locked) .control {
+    width: 0;
+    min-width: 0;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    flex: 0;
+  }
+
+  .input-locked .selected-value,
+  :host(.input-locked) .selected-value {
+    display: none;
+  }
 `;

package/dist/esm/search-bar/search-bar-combobox.template.js

@@ -4,7 +4,7 @@ export const foundationSearchBarComboboxTemplate = (context, definition) => html
   <template
     aria-disabled="${(x) => x.ariaDisabled}"
     autocomplete="${(x) => x.autocomplete}"
-    class="${(x) => (x.open ? 'open' : '')} ${(x) => (x.disabled ? 'disabled' : '')} ${(x) => x.position} body"
+    class="${(x) => (x.open ? 'open' : '')} ${(x) => (x.disabled ? 'disabled' : '')} ${(x) => x.position} ${(x) => (x.inputLocked ? 'input-locked' : '')} body"
     ?open="${(x) => x.open}"
     tabindex="${(x) => (!x.disabled ? '0' : null)}"
     @click="${(x, c) => x.clickHandler(c.event)}"