@limetech/lime-elements 40.23.0 → 40.24.0

package/dist/esm/limel-color-picker-palette.entry.js

@@ -101,10 +101,10 @@ const Palette = class {
     render() {
         const background = this.value ? { '--background': this.value } : {};
         return [
-            h("div", { key: 'c3cf7aef60a6c9ddd995fcd6f1a44e7633af41c6', class: "color-picker-palette", style: {
+            h("div", { key: '69d11a1f2b5515985edd256b9bccc757d68816b6', class: "color-picker-palette", style: {
                     '--color-picker-column-count': `${this.getColumnCount()}`,
                 } }, this.renderSwatches()),
-            h("div", { key: '821217eb21c42c54128d8b8b8ba7381dd74ced6d', class: "chosen-color-name" }, h("limel-input-field", { key: '11b030b4670b47c65d416daa7f2bbfc601d2e549', label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, invalid: this.invalid, placeholder: this.placeholder, disabled: !this.manualInput }), h("div", { key: '1c500725280dde72af4ce3c0b44a278a8b324ba7', class: "chosen-color-preview", style: background })),
+            h("div", { key: 'e1035bad5fff4c8c62e74c6e54040a6844302e62', class: "chosen-color-name" }, h("limel-input-field", { key: 'ec2ce0ae13a0d6da53a1632f9d8de40c44ab07e5', label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, invalid: this.invalid, placeholder: this.placeholder, disabled: !this.manualInput }), h("div", { key: '611d1c42636b277fa3bac83b842f786840486f03', class: "chosen-color-preview", style: background })),
         ];
     }
     getPalette() {

package/dist/esm/limel-color-picker.entry.js

@@ -76,7 +76,7 @@ const ColorPicker = class {
         (_a = this.contentElement) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (h(Host, { key: '2103fcb98a566b3263111a16ab303663a185074e' }, this.renderTooltip(), this.renderPickerPalette(), h("limel-input-field", { key: 'd86a999538d8e8d4656f6a1afd50d1c3b6fbb303', label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, readonly: this.readonly, disabled: this.disabled || !this.manualInput, invalid: this.invalid, placeholder: this.placeholder })));
+        return (h(Host, { key: '881853460bcb6da0b123b7fe67a7bd0d16bb3613' }, this.renderTooltip(), this.renderPickerPalette(), h("limel-input-field", { key: '0c1e832b5e4273228a1ac6c922c8a219ac9ca82c', label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, readonly: this.readonly, disabled: this.disabled || !this.manualInput, invalid: this.invalid, placeholder: this.placeholder })));
     }
 };
 ColorPicker.style = colorPickerCss();

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

@@ -1,15 +1,165 @@
 import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BU9IJqli.js';
+import { c as createLiveMessage } from './live-message-BKB4vu28.js';
 import { c as createRandomString } from './random-string-BrjD-ITe.js';
 import { i as isIOSDevice, a as isAndroidDevice } from './device-B-tmXAXV.js';
 import './sv-DpsDSi7k.js';
 import { m as moment } from './moment-_DadZLWp.js';
-import { a as getPrimarySubtag } from './language-VamkUr90.js';
+import { a as getPrimarySubtag, t as translations } from './translations--i932i_D.js';
 import { M as MDCTextField } from './component-CVihTrav.js';
+import './debounce-B67JMchz.js';
+import './isObject-BJQylLSL.js';
+import './toNumber-D6JYpQI9.js';
+import './isSymbol-ClAke5ga.js';
+import './isObjectLike-oiMYqRQ0.js';
 import './_commonjsHelpers-B85MJLTf.js';
 import './ponyfill-6YuZiAPi.js';
 import './component-CrjPGt1I.js';
 import './component-CyFeUQ0l.js';
 
+// Literals first, so an `l` inside `[...]` is not expanded. Then longest
+// first, since alternation takes the first match, not the longest.
+const LONG_DATE_FORMAT_TOKENS = /\[[^\][]*\]|LTS|LLLL|LLL|LL|LT|L|lts|llll|lll|ll|lt|l/g;
+// Literals, tokens (runs of one repeated letter) and separators.
+const FORMAT_PARTS = /\[[^\][]*\]|([a-zA-Z])\1*|[^a-zA-Z[]+/g;
+// Tokens moment parses leniently as one or two digits.
+const ONE_OR_TWO_DIGIT_TOKENS = /^([MDHhkmsWw])\1?$/;
+// Includes the narrow no-break space `Intl` puts before AM/PM.
+const WHITESPACE = /\s+/g;
+// ` - ` or `, ` between a date and a time. Separators inside a date, such
+// as `-` in `YYYY-MM-DD`, must still be typed as in the format.
+const DATE_TIME_JOINER = / ?, ?| - /g;
+const TIME_SEPARATOR = /([Hhk]{1,2}|m{1,2})([:.])(?=m{1,2}|s{1,2})/g;
+// Such as `[w]` in `[w] W GGGG`.
+const WEEK_PREFIX = /^\[[^\][]*\]\s*(?=[Ww])/;
+/**
+ * Expands localized tokens, e.g. `L` to `MM/DD/YYYY` for `en`.
+ * @param format - the moment format to expand, e.g. `L` or `L - LT`
+ * @param locale - the moment locale to expand it for
+ */
+function expandLongDateFormatTokens(format, locale) {
+    if (!format) {
+        return format;
+    }
+    const localeData = moment.localeData(locale);
+    return format.replaceAll(LONG_DATE_FORMAT_TOKENS, (token) => {
+        if (token.startsWith('[')) {
+            return token;
+        }
+        return (localeData.longDateFormat(token) ||
+            token);
+    });
+}
+/**
+ * Accepts fewer digits than the format has, e.g. `1/24/20` for
+ * `MM/DD/YYYY`, but rejects text that leaves part of the format unmatched.
+ * Moment's lenient mode alone accepts "01" as a complete date.
+ *
+ * Times and weeks are accepted in more forms than their format, e.g.
+ * `15.30` for `HH:mm` and `v. 4 26` for `[w] W GGGG`.
+ * @param date - the raw text to parse
+ * @param format - the moment format to parse it against
+ * @param locale - the moment locale to parse it in
+ */
+function parseComplete(date, format, locale) {
+    const text = normalizeSeparators(date);
+    const expandedFormat = normalizeSeparators(expandLongDateFormatTokens(format, locale));
+    for (const candidate of getTimeSeparatorVariants(expandedFormat)) {
+        const parsed = parseLeniently(text, candidate, locale);
+        if (parsed) {
+            return parsed;
+        }
+    }
+    return null;
+}
+function parseLeniently(date, format, locale) {
+    const [weekText, weekFormat] = dropWeekPrefix(date, format);
+    const text = pivotWeekYears(weekText, weekFormat);
+    const parsed = moment(text, weekFormat, locale, false);
+    if (!parsed.isValid()) {
+        return null;
+    }
+    const flags = parsed.parsingFlags();
+    if (flags.charsLeftOver > 0 ||
+        flags.unusedTokens.length > 0 ||
+        hasAmbiguousYear(text, weekFormat)) {
+        return null;
+    }
+    return parsed.toDate();
+}
+// Applied to both the text and the format, so they stay aligned.
+function normalizeSeparators(text) {
+    return text
+        .trim()
+        .replaceAll(WHITESPACE, ' ')
+        .replaceAll(DATE_TIME_JOINER, ' ');
+}
+function getTimeSeparatorVariants(format) {
+    const swapped = format.replaceAll(TIME_SEPARATOR, (_, part, separator) => part + (separator === ':' ? '.' : ':'));
+    return swapped === format ? [format] : [format, swapped];
+}
+// Accepts any prefix, e.g. `v.`, `w` or none, for `[w] W GGGG`.
+function dropWeekPrefix(date, format) {
+    if (!WEEK_PREFIX.test(format)) {
+        return [date, format];
+    }
+    return [date.replace(/^\D*/, ''), format.replace(WEEK_PREFIX, '')];
+}
+// Moment pivots a 2-digit `YYYY`, e.g. `26` to 2026, but not `GGGG`.
+function pivotWeekYears(date, format) {
+    const twoDigitWeekYears = findYears(date, format).filter(({ token, start, end }) => token === 'GGGG' && end - start === 2);
+    return twoDigitWeekYears.reduceRight((text, { start, end }) => text.slice(0, start) +
+        moment.parseTwoDigitYear(text.slice(start, end)) +
+        text.slice(end), date);
+}
+// Lenient parsing reads a half-typed year such as "1/24/2" as year 2.
+function hasAmbiguousYear(date, format) {
+    return findYears(date, format).some(({ start, end }) => {
+        const digitCount = end - start;
+        return digitCount !== 2 && digitCount !== 4;
+    });
+}
+function findYears(date, format) {
+    const formatParts = format.match(FORMAT_PARTS) || [];
+    const inputPattern = formatParts.map(formatPartToPattern).join('');
+    const match = new RegExp(`^${inputPattern}$`, 'd').exec(date);
+    if (!match) {
+        return [];
+    }
+    return formatParts.filter(isYearToken).map((token, index) => {
+        const [start, end] = match.indices[index + 1];
+        return { token: token, start: start, end: end };
+    });
+}
+function isYearToken(part) {
+    return part === 'YYYY' || part === 'GGGG';
+}
+/**
+ * Literals and separators are optional, since lenient parsing skips them
+ * when they are not typed, e.g. `01242026` for `MM/DD/YYYY`.
+ * @param part - a literal, token or separator of the format
+ */
+function formatPartToPattern(part) {
+    if (part.startsWith('[')) {
+        return optional(part.slice(1, -1));
+    }
+    if (isYearToken(part)) {
+        return String.raw `(\d{1,4})`;
+    }
+    if (ONE_OR_TWO_DIGIT_TOKENS.test(part)) {
+        return String.raw `\d{1,2}`;
+    }
+    if (/^[a-zA-Z]+$/.test(part)) {
+        return '.+?';
+    }
+    // Moment matches each separator character on its own.
+    return [...part].map(optional).join('');
+}
+function optional(text) {
+    return `(?:${escapeRegExp(text)})?`;
+}
+function escapeRegExp(text) {
+    return text.replaceAll(/[.*+?^${}()|[\]\\]/g, String.raw `\$&`);
+}
 class DateFormatter {
     constructor(language = 'en') {
         this.language = language;
@@ -22,7 +172,9 @@ class DateFormatter {
     }
     parseDate(date, dateFormat) {
         if (date) {
-            return moment(date, dateFormat).toDate();
+            // Importing the moment locales changes moment's global default
+            // locale, so tokens like `L` must be parsed with ours.
+            return parseComplete(date, dateFormat, this.getLanguage());
         }
         return null;
     }
@@ -46,7 +198,7 @@ class DateFormatter {
     }
 }
 
-const datePickerCss = () => `:host(limel-date-picker){position:relative}limel-input-field[disabled],limel-input-field[readonly]{pointer-events:none}`;
+const datePickerCss = () => `@charset "UTF-8";:host(limel-date-picker){position:relative}limel-input-field[disabled],limel-input-field[readonly]{pointer-events:none}.error-message{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap}`;
 
 // tslint:disable:no-duplicate-string
 const nativeTypeForConsumerType = {
@@ -73,6 +225,7 @@ const DatePicker = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.change = createEvent(this, "change", 7);
+        this.invalidInput = createEvent(this, "invalidInput", 7);
         /**
          * Set to `true` to disable the field.
          * Use `disabled` to indicate that the field can normally be interacted
@@ -88,7 +241,8 @@ const DatePicker = class {
         this.readonly = false;
         /**
          * Set to `true` to indicate that the current value of the date picker is
-         * invalid.
+         * invalid. Typed text that is not a valid date is flagged by the
+         * component itself, whatever this is set to.
          */
         this.invalid = false;
         /**
@@ -105,15 +259,85 @@ const DatePicker = class {
          */
         this.language = 'en';
         this.showPortal = false;
+        this.parseError = false;
+        this.isEditing = false;
         this.portalId = `date-picker-calendar-${createRandomString()}`;
+        // Screen readers don't announce a changed description of the focused
+        // field, so the error is spoken through a live region.
+        this.errorMessage = createLiveMessage(() => this.parseError ? this.getHelperText() : '');
         this.documentClickListener = (event) => {
             if (event.composedPath().includes(this.textField)) {
                 return;
             }
             const element = document.querySelector(`#${this.portalId}`);
-            if (!element.contains(event.target)) {
-                this.hideCalendar();
+            if (element.contains(event.target)) {
+                return;
+            }
+            // The input's own blur, which follows, closes the calendar with the
+            // final typed text.
+            if (this.textField.shadowRoot.activeElement === this.inputElement) {
+                return;
             }
+            this.hideCalendar();
+        };
+        this.handleKeyDown = (event) => {
+            var _a;
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            this.discardedText = undefined;
+            const handlers = {
+                ArrowDown: this.handleArrowDown,
+                Escape: this.handleEscape,
+                Enter: this.handleEnter,
+                Backspace: this.handleDelete,
+                Delete: this.handleDelete,
+            };
+            (_a = handlers[event.key]) === null || _a === void 0 ? void 0 : _a.call(handlers, event);
+        };
+        this.handleArrowDown = async (event) => {
+            var _a;
+            event.preventDefault();
+            if (!this.showPortal) {
+                this.showPortal = true;
+                return;
+            }
+            await ((_a = this.datePickerCalendar) === null || _a === void 0 ? void 0 : _a.focusDay());
+        };
+        // The first Escape discards typed text, the next closes the calendar.
+        // Stopping it keeps a surrounding dialog open.
+        this.handleEscape = (event) => {
+            if (this.hasTypedText()) {
+                this.discardTypedText();
+            }
+            else if (this.showPortal) {
+                this.showPortal = false;
+            }
+            else {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        // Reads the input, since the input field emits its text debounced.
+        this.handleEnter = () => {
+            var _a, _b;
+            if (!this.acceptsTypedInput()) {
+                return;
+            }
+            const currentText = (_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+            this.rawInputValue = currentText;
+            if (currentText !== '' && !this.parseText(currentText)) {
+                this.parseError = true;
+                return;
+            }
+            this.commitTypedText();
+        };
+        this.handleDelete = () => {
+            if (this.acceptsTypedInput() || !this.value) {
+                return;
+            }
+            this.clearValue();
         };
         this.formatValue = (value) => this.dateFormatter.formatDate(value, this.internalFormat);
         this.handleCalendarChange = this.handleCalendarChange.bind(this);
@@ -127,6 +351,8 @@ const DatePicker = class {
         this.nativeChangeHandler = this.nativeChangeHandler.bind(this);
         this.preventBlurFromCalendarContainer =
             this.preventBlurFromCalendarContainer.bind(this);
+        this.commitTypedText = this.commitTypedText.bind(this);
+        this.handleInputBlur = this.handleInputBlur.bind(this);
     }
     componentWillLoad() {
         this.useNative = !this.readonly && (isIOSDevice() || isAndroidDevice());
@@ -136,7 +362,28 @@ const DatePicker = class {
         this.updateInternalFormatAndType();
     }
     disconnectedCallback() {
+        var _a;
         this.removeDocumentListeners();
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('blur', this.handleInputBlur);
+        this.errorMessage.update.cancel();
+    }
+    // Consumers such as `limel-form` pass a new `Date` on every render.
+    watchValue(newValue, oldValue) {
+        if ((newValue === null || newValue === void 0 ? void 0 : newValue.getTime()) === (oldValue === null || oldValue === void 0 ? void 0 : oldValue.getTime())) {
+            return;
+        }
+        this.resetTypedText();
+    }
+    watchParseError() {
+        this.errorMessage.update();
+        this.invalidInput.emit(this.parseError ? this.getInvalidInputMessage() : null);
+    }
+    watchFormatInputs() {
+        this.resetTypedText();
+    }
+    watchLanguage() {
+        this.dateFormatter = new DateFormatter(this.language);
+        this.resetTypedText();
     }
     render() {
         const inputProps = {
@@ -145,24 +392,56 @@ const DatePicker = class {
         if (this.value && !this.readonly && !this.disabled) {
             inputProps.trailingIcon = 'clear_symbol';
         }
-        const helperText = this.disabled || this.readonly ? undefined : this.helperText;
+        const helperText = this.getHelperText();
         if (this.useNative) {
             return (h("limel-input-field", { disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, helperText: helperText, required: this.required, value: this.formatValue(this.value), type: this.nativeType, onChange: this.nativeChangeHandler }));
         }
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
         const formatter = this.formatter || this.formatValue;
         return [
-            h("limel-input-field", Object.assign({ disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, placeholder: this.placeholder, helperText: helperText, required: this.required, value: this.value ? formatter(this.value) : '', onFocus: this.showCalendar, onBlur: this.hideCalendar, onClick: this.onInputClick, onChange: this.handleInputElementChange, ref: (el) => (this.textField = el) }, inputProps)),
-            h("limel-portal", { containerId: this.portalId, visible: this.showPortal, containerStyle: { 'z-index': dropdownZIndex } }, h("limel-flatpickr-adapter", { format: this.internalFormat, language: this.language, type: this.type, value: this.value, ref: (el) => (this.datePickerCalendar = el), isOpen: this.showPortal, formatter: formatter, onChange: this.handleCalendarChange })),
+            h("limel-input-field", Object.assign({ disabled: this.disabled, readonly: this.readonly, invalid: this.invalid || this.parseError, label: this.label, placeholder: this.placeholder, helperText: helperText, required: this.required, value: this.getDisplayValue(formatter), onFocus: this.showCalendar, onBlur: this.hideCalendar, onClick: this.onInputClick, onChange: this.handleInputElementChange, onKeyDown: this.handleKeyDown, ref: (el) => (this.textField = el) }, inputProps)),
+            h("span", { class: "error-message", "aria-live": "polite", ref: this.errorMessage.setElement }),
+            h("limel-portal", { containerId: this.portalId, visible: this.showPortal, containerStyle: { 'z-index': dropdownZIndex } }, h("limel-flatpickr-adapter", { format: this.internalFormat, language: this.language, type: this.type, value: this.value, previewValue: this.previewValue, ref: (el) => (this.datePickerCalendar = el), isOpen: this.showPortal, onChange: this.handleCalendarChange })),
         ];
     }
+    getDisplayValue(formatter) {
+        if (this.rawInputValue !== undefined) {
+            return this.rawInputValue;
+        }
+        if (!this.value) {
+            return '';
+        }
+        return this.isEditing && this.acceptsTypedInput()
+            ? this.formatValue(this.value)
+            : formatter(this.value);
+    }
+    acceptsTypedInput() {
+        return !this.formatter || !!this.format;
+    }
+    getHelperText() {
+        if (this.parseError) {
+            return this.getInvalidInputMessage();
+        }
+        if (this.disabled || this.readonly) {
+            return undefined;
+        }
+        return this.helperText;
+    }
+    getInvalidInputMessage() {
+        const key = this.type === 'time'
+            ? 'date-picker.invalid-time-format'
+            : 'date-picker.invalid-format';
+        return translations.get(key, this.language, {
+            example: this.formatValue(new Date()),
+        });
+    }
     updateInternalFormatAndType() {
         this.nativeType = nativeTypeForConsumerType[this.type || 'default'];
         this.nativeFormat = nativeFormatForType[this.nativeType];
         if (this.useNative) {
             this.internalFormat = this.nativeFormat;
         }
-        else if (this.formatter || this.format) {
+        else if (this.format) {
             this.internalFormat = this.format;
         }
         else {
@@ -171,19 +450,27 @@ const DatePicker = class {
     }
     nativeChangeHandler(event) {
         event.stopPropagation();
-        const date = this.dateFormatter.parseDate(event.detail, this.internalFormat);
-        this.change.emit(date);
+        if (event.detail === '') {
+            this.clearValue();
+            return;
+        }
+        const date = this.parseText(event.detail);
+        if (date) {
+            this.change.emit(date);
+        }
     }
     showCalendar(event) {
         if (this.disabled || this.readonly) {
             event.stopPropagation();
             return;
         }
+        this.isEditing = true;
         this.showPortal = true;
-        const inputElement = this.textField.shadowRoot.querySelector('input');
-        setTimeout(() => {
-            this.datePickerCalendar.inputElement = inputElement;
-        }, 0);
+        this.setUpInputElement();
+        // Wait for the adapter to render. This creates the calendar.
+        queueMicrotask(() => {
+            this.datePickerCalendar.inputElement = this.inputElement;
+        });
         event.stopPropagation();
         document.addEventListener('mousedown', this.documentClickListener, {
             passive: true,
@@ -192,6 +479,25 @@ const DatePicker = class {
             capture: true,
         });
     }
+    // Tabbing to the clear icon doesn't blur the input field, only its
+    // input. Its `readonly` prop would also stop the calendar from opening.
+    setUpInputElement() {
+        this.inputElement = this.textField.shadowRoot.querySelector('input');
+        this.inputElement.readOnly = !this.acceptsTypedInput();
+        this.inputElement.addEventListener('blur', this.handleInputBlur);
+    }
+    handleInputBlur(event) {
+        const nextFocus = event.relatedTarget;
+        this.commitTypedText();
+        if (!nextFocus) {
+            return;
+        }
+        requestAnimationFrame(() => {
+            if (!nextFocus.isConnected) {
+                this.inputElement.focus();
+            }
+        });
+    }
     preventBlurFromCalendarContainer(event) {
         // We don't want the input element to lose focus when we pick
         // a date in the calendar container.
@@ -203,6 +509,8 @@ const DatePicker = class {
         }
     }
     hideCalendar() {
+        this.isEditing = false;
+        this.commitTypedText();
         setTimeout(() => {
             this.showPortal = false;
         }, 0);
@@ -225,15 +533,21 @@ const DatePicker = class {
         }
         const mdcTextField = new MDCTextField(root);
         mdcTextField.getDefaultFoundation().deactivateFocus();
-        mdcTextField.valid = !this.invalid;
+        mdcTextField.valid = !(this.invalid || this.parseError);
+        // Removes the listeners but keeps the classes set above.
+        mdcTextField.destroy();
     }
     handleCalendarChange(event) {
-        const date = event.detail;
+        var _a;
         event.stopPropagation();
+        // Reset before hiding, or text typed earlier is committed over the
+        // pick. Preview the pick until the consumer echoes it back.
+        this.resetTypedText();
+        this.previewValue = (_a = event.detail) !== null && _a !== void 0 ? _a : undefined;
         if (this.pickerIsAutoClosing()) {
             this.hideCalendar();
         }
-        this.change.emit(date);
+        this.change.emit(event.detail);
     }
     onInputClick(event) {
         if (this.disabled || this.readonly || this.showPortal) {
@@ -242,22 +556,119 @@ const DatePicker = class {
         this.showCalendar(event);
     }
     handleInputElementChange(event) {
-        if (this.disabled || this.readonly) {
-            event.stopPropagation();
+        event.stopPropagation();
+        if (this.disabled || this.readonly || !this.acceptsTypedInput()) {
             return;
         }
-        if (event.detail === '') {
-            this.clearValue();
+        const text = event.detail;
+        if (text === this.discardedText) {
+            return;
         }
-        event.stopPropagation();
+        const date = text === '' ? null : this.parseText(text);
+        this.rawInputValue = text;
+        this.previewValue = date !== null && date !== void 0 ? date : undefined;
+        // Half-typed text is only flagged on commit.
+        if (date || text === '') {
+            this.parseError = false;
+        }
+    }
+    hasTypedText() {
+        var _a;
+        return (this.rawInputValue !== undefined ||
+            ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) !== this.getCommittedText());
+    }
+    // The input field only rewrites its text when its `value` changes.
+    discardTypedText() {
+        var _a;
+        this.discardedText = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value;
+        this.resetTypedText();
+        if (this.inputElement) {
+            this.inputElement.value = this.getCommittedText();
+        }
+    }
+    getCommittedText() {
+        return this.getDisplayValue(this.formatter || this.formatValue);
+    }
+    commitTypedText() {
+        const text = this.rawInputValue;
+        if (text === undefined || text === this.committedText) {
+            return;
+        }
+        const currentText = this.value ? this.formatValue(this.value) : '';
+        if (text === currentText) {
+            this.resetTypedText();
+            return;
+        }
+        if (text === '') {
+            this.commitEmptyText();
+            return;
+        }
+        this.commitDate(text);
+    }
+    commitEmptyText() {
+        this.parseError = false;
+        if (this.value) {
+            this.emitCommitted('', null);
+        }
+        else {
+            this.rawInputValue = undefined;
+        }
+    }
+    commitDate(text) {
+        var _a;
+        const date = this.parseText(text);
+        if (!date) {
+            this.parseError = true;
+            return;
+        }
+        if (date.getTime() === ((_a = this.value) === null || _a === void 0 ? void 0 : _a.getTime())) {
+            this.resetTypedText();
+            return;
+        }
+        this.parseError = false;
+        this.emitCommitted(text, date);
+    }
+    // Keeps `rawInputValue` until `watchValue` resets it, or the old value
+    // flashes.
+    emitCommitted(text, date) {
+        this.committedText = text;
+        this.change.emit(date);
+    }
+    parseText(text) {
+        const date = this.dateFormatter.parseDate(text, this.internalFormat);
+        return date && !Number.isNaN(date.getTime()) ? date : null;
+    }
+    resetTypedText() {
+        this.parseError = false;
+        this.committedText = undefined;
+        this.rawInputValue = undefined;
+        this.previewValue = undefined;
     }
     pickerIsAutoClosing() {
         return this.type !== 'datetime' && this.type !== 'time';
     }
     clearValue() {
+        this.resetTypedText();
         this.change.emit(null);
     }
     get host() { return getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "watchValue": 0
+            }],
+        "parseError": [{
+                "watchParseError": 0
+            }],
+        "format": [{
+                "watchFormatInputs": 0
+            }],
+        "type": [{
+                "watchFormatInputs": 0
+            }],
+        "language": [{
+                "watchLanguage": 0
+            }]
+    }; }
 };
 DatePicker.style = datePickerCss();
 

package/dist/esm/limel-dialog.entry.js

@@ -1018,10 +1018,10 @@ const Dialog = class {
         this.mdcDialog.destroy();
     }
     render() {
-        return (h("div", { key: 'a9a3f26e3da86f1659487affe5a8758dca4cefb9', class: {
+        return (h("div", { key: '3e1a6defb45d3a7db6569742226cb0f6f417fb6e', class: {
                 'mdc-dialog': true,
                 'full-screen': !!this.fullscreen,
-            }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": 'limel-dialog-title-' + this.id, "aria-describedby": 'limel-dialog-content-' + this.id }, h("input", { key: '792d35f0b5c497bac447327c2aafdd74e3b8c0ee', hidden: true, id: "initialFocusEl" }), h("div", { key: 'a4331ee65f7ff242ee2af707281a1051f307a218', class: "mdc-dialog__container" }, h("div", { key: 'c4e1ef542e1078fe65bb6c299a890da6242c154e', class: "mdc-dialog__surface" }, h("input", { key: '626470072fbed50ef98ab29e32ad0d219018cb51', type: "button", id: "initialFocusElement" }), this.renderHeading(), h("div", { key: '8399fa33d6b6d342848f7051fc92b4bde9b02f8e', class: "mdc-dialog__content", id: 'limel-dialog-content-' + this.id }, h("slot", { key: '94f1d56d78fd5e5f0cc483c622b1138ed7148a2e' })), this.renderFooter())), h("div", { key: '22a1c2516049f8a8d444fbb60c0009cb96dffe9f', class: "mdc-dialog__scrim" })));
+            }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": 'limel-dialog-title-' + this.id, "aria-describedby": 'limel-dialog-content-' + this.id }, h("input", { key: '4a5f5cbd39cefc237854e87a3bd26c9a371d0703', hidden: true, id: "initialFocusEl" }), h("div", { key: 'cea96e7efebe5f92b65c36f9e9ff4b4814cf6245', class: "mdc-dialog__container" }, h("div", { key: '2002f463e8289d8e11974818e8339cd8506d9172', class: "mdc-dialog__surface" }, h("input", { key: 'ff0f029260dcd53f59f0ac7882b917e7fdff41a1', type: "button", id: "initialFocusElement" }), this.renderHeading(), h("div", { key: 'd2f23c68ef6fa558c7d40b7a729173bfc6c1e120', class: "mdc-dialog__content", id: 'limel-dialog-content-' + this.id }, h("slot", { key: '7b990ba91a610dad210627c1e6075b4db6ecd0c8' })), this.renderFooter())), h("div", { key: 'b878b47719571bac33c5f8f04e6271d11fd7bf69', class: "mdc-dialog__scrim" })));
     }
     watchHandler(newValue, oldValue) {
         if (oldValue === newValue || !this.mdcDialog) {