@limetech/lime-elements 40.23.0 → 40.24.0

package/dist/types/components.d.ts

@@ -1354,6 +1354,7 @@ export namespace Components {
      * @exampleComponent limel-example-date-picker-programmatic-change
      * @exampleComponent limel-example-date-picker-composite
      * @exampleComponent limel-example-date-picker-custom-formatter
+     * @exampleComponent limel-example-date-picker-typed-input
      */
     interface LimelDatePicker {
         /**
@@ -1366,15 +1367,15 @@ export namespace Components {
          */
         "format": string;
         /**
-          * Custom formatting function. Will be used for date formatting.  :::note overrides `format` and `language` :::
+          * Custom formatting function. Will be used for date formatting.  :::note overrides `format` and `language`. A date can only be typed into the field when `format` is set as well, to the pattern your `formatter` produces. Typed text is parsed with `format` and `language`, and the field shows the value in `format` while it is being edited. :::
          */
         "formatter"?: (date: Date) => string;
         /**
-          * Optional helper text to display below the input field when it has focus. Screen readers read it as the description of the field, so use it for what the user needs to know, such as the format of the value or a requirement.
+          * Optional helper text to display below the input field when it has focus. Screen readers read it as the description of the field, so use it for what the user needs to know, such as the format of the value or a requirement.  While the typed text is not a valid date, an error with an example of the expected format is shown instead.
          */
         "helperText": string;
         /**
-          * Set to `true` to indicate that the current value of the date picker is invalid.
+          * Set to `true` to indicate that the current value of the date picker is invalid. Typed text that is not a valid date is flagged by the component itself, whatever this is set to.
           * @default false
          */
         "invalid": boolean;
@@ -1847,13 +1848,17 @@ export namespace Components {
      * @private 
      */
     interface LimelFlatpickrAdapter {
+        /**
+          * Moves focus to the selected day, else today, else the first day of the month.
+          * @returns `false` when the calendar has no day grid
+         */
+        "focusDay": () => Promise<boolean>;
         /**
           * Format to display the selected date in.
          */
         "format": string;
-        "formatter": (date: Date) => string;
         /**
-          * The native input element to use with flatpickr.
+          * The input the user types into. Setting it creates the calendar.
          */
         "inputElement": HTMLElement;
         /**
@@ -1865,6 +1870,10 @@ export namespace Components {
           * @default 'en'
          */
         "language": Languages;
+        /**
+          * Shown as selected instead of `value` while set.
+         */
+        "previewValue"?: Date;
         /**
           * Type of date picker.
           * @default 'datetime'
@@ -5379,6 +5388,7 @@ declare global {
     };
     interface HTMLLimelDatePickerElementEventMap {
         "change": Date;
+        "invalidInput": string | null;
     }
     /**
      * @exampleComponent limel-example-date-picker-datetime
@@ -5392,6 +5402,7 @@ declare global {
      * @exampleComponent limel-example-date-picker-programmatic-change
      * @exampleComponent limel-example-date-picker-composite
      * @exampleComponent limel-example-date-picker-custom-formatter
+     * @exampleComponent limel-example-date-picker-typed-input
      */
     interface HTMLLimelDatePickerElement extends Components.LimelDatePicker, HTMLStencilElement {
         addEventListener<K extends keyof HTMLLimelDatePickerElementEventMap>(type: K, listener: (this: HTMLLimelDatePickerElement, ev: LimelDatePickerCustomEvent<HTMLLimelDatePickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -8652,6 +8663,7 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-date-picker-programmatic-change
      * @exampleComponent limel-example-date-picker-composite
      * @exampleComponent limel-example-date-picker-custom-formatter
+     * @exampleComponent limel-example-date-picker-typed-input
      */
     interface LimelDatePicker {
         /**
@@ -8664,15 +8676,15 @@ declare namespace LocalJSX {
          */
         "format"?: string;
         /**
-          * Custom formatting function. Will be used for date formatting.  :::note overrides `format` and `language` :::
+          * Custom formatting function. Will be used for date formatting.  :::note overrides `format` and `language`. A date can only be typed into the field when `format` is set as well, to the pattern your `formatter` produces. Typed text is parsed with `format` and `language`, and the field shows the value in `format` while it is being edited. :::
          */
         "formatter"?: (date: Date) => string;
         /**
-          * Optional helper text to display below the input field when it has focus. Screen readers read it as the description of the field, so use it for what the user needs to know, such as the format of the value or a requirement.
+          * Optional helper text to display below the input field when it has focus. Screen readers read it as the description of the field, so use it for what the user needs to know, such as the format of the value or a requirement.  While the typed text is not a valid date, an error with an example of the expected format is shown instead.
          */
         "helperText"?: string;
         /**
-          * Set to `true` to indicate that the current value of the date picker is invalid.
+          * Set to `true` to indicate that the current value of the date picker is invalid. Typed text that is not a valid date is flagged by the component itself, whatever this is set to.
           * @default false
          */
         "invalid"?: boolean;
@@ -8686,9 +8698,13 @@ declare namespace LocalJSX {
          */
         "language"?: Languages;
         /**
-          * Emitted when the date picker value is changed.
+          * Emitted when a typed date is committed (on blur or `Enter`), when a date is picked in the calendar, and with `null` when the field is cleared. Typed text that is not a valid date is not emitted, so `value` keeps the last valid date, and `invalidInput` is emitted instead.  A two-digit year is read as a full year, so `1/24/20` is 2020.
          */
         "onChange"?: (event: LimelDatePickerCustomEvent<Date>) => void;
+        /**
+          * Emitted with the error message when typed text that is not a valid date is committed, and with `null` when the field no longer holds such text.
+         */
+        "onInvalidInput"?: (event: LimelDatePickerCustomEvent<string | null>) => void;
         /**
           * A hint about what to type, such as an example or the format of the value. It is shown inside the field when the field is focused and empty, but not on iOS and Android, where the native date picker is used.  Do not use it instead of a `label`, and do not put anything in it that the user needs to know. It disappears when the user starts to type, and some screen readers do not read it. Use `helperText` for that.
          */
@@ -9214,9 +9230,8 @@ declare namespace LocalJSX {
           * Format to display the selected date in.
          */
         "format"?: string;
-        "formatter": (date: Date) => string;
         /**
-          * The native input element to use with flatpickr.
+          * The input the user types into. Setting it creates the calendar.
          */
         "inputElement"?: HTMLElement;
         /**
@@ -9232,6 +9247,10 @@ declare namespace LocalJSX {
           * Emitted when the date picker value is changed.
          */
         "onChange"?: (event: LimelFlatpickrAdapterCustomEvent<Date>) => void;
+        /**
+          * Shown as selected instead of `value` while set.
+         */
+        "previewValue"?: Date;
         /**
           * Type of date picker.
           * @default 'datetime'
@@ -13245,6 +13264,7 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-date-picker-programmatic-change
              * @exampleComponent limel-example-date-picker-composite
              * @exampleComponent limel-example-date-picker-custom-formatter
+             * @exampleComponent limel-example-date-picker-typed-input
              */
             "limel-date-picker": LocalJSX.IntrinsicElements["limel-date-picker"] & JSXBase.HTMLAttributes<HTMLLimelDatePickerElement>;
             /**

package/dist/types/translations/da.d.ts

@@ -27,6 +27,8 @@ declare const _default: {
     'date-picker.month.heading': string;
     'date-picker.quarter.heading': string;
     'date-picker.year.heading': string;
+    'date-picker.invalid-format': string;
+    'date-picker.invalid-time-format': string;
     'drag-handle.drag-handle': string;
     'drag-handle.drag-to-reorder': string;
     'resize-handle.resize': string;

package/dist/types/translations/de.d.ts

@@ -27,6 +27,8 @@ declare const _default: {
     'date-picker.month.heading': string;
     'date-picker.quarter.heading': string;
     'date-picker.year.heading': string;
+    'date-picker.invalid-format': string;
+    'date-picker.invalid-time-format': string;
     'drag-handle.drag-handle': string;
     'drag-handle.drag-to-reorder': string;
     'resize-handle.resize': string;

package/dist/types/translations/en.d.ts

@@ -27,6 +27,8 @@ declare const _default: {
     'date-picker.month.heading': string;
     'date-picker.quarter.heading': string;
     'date-picker.year.heading': string;
+    'date-picker.invalid-format': string;
+    'date-picker.invalid-time-format': string;
     'drag-handle.drag-handle': string;
     'drag-handle.drag-to-reorder': string;
     'resize-handle.resize': string;

package/dist/types/translations/fi.d.ts

@@ -27,6 +27,8 @@ declare const _default: {
     'date-picker.month.heading': string;
     'date-picker.quarter.heading': string;
     'date-picker.year.heading': string;
+    'date-picker.invalid-format': string;
+    'date-picker.invalid-time-format': string;
     'drag-handle.drag-handle': string;
     'drag-handle.drag-to-reorder': string;
     'resize-handle.resize': string;

package/dist/types/translations/fr.d.ts

@@ -27,6 +27,8 @@ declare const _default: {
     'date-picker.month.heading': string;
     'date-picker.quarter.heading': string;
     'date-picker.year.heading': string;
+    'date-picker.invalid-format': string;
+    'date-picker.invalid-time-format': string;
     'drag-handle.drag-handle': string;
     'drag-handle.drag-to-reorder': string;
     'resize-handle.resize': string;

package/dist/types/translations/nl.d.ts

@@ -27,6 +27,8 @@ declare const _default: {
     'date-picker.month.heading': string;
     'date-picker.quarter.heading': string;
     'date-picker.year.heading': string;
+    'date-picker.invalid-format': string;
+    'date-picker.invalid-time-format': string;
     'drag-handle.drag-handle': string;
     'drag-handle.drag-to-reorder': string;
     'resize-handle.resize': string;

package/dist/types/translations/no.d.ts

@@ -27,6 +27,8 @@ declare const _default: {
     'date-picker.month.heading': string;
     'date-picker.quarter.heading': string;
     'date-picker.year.heading': string;
+    'date-picker.invalid-format': string;
+    'date-picker.invalid-time-format': string;
     'drag-handle.drag-handle': string;
     'drag-handle.drag-to-reorder': string;
     'resize-handle.resize': string;

package/dist/types/translations/sv.d.ts

@@ -27,6 +27,8 @@ declare const _default: {
     'date-picker.month.heading': string;
     'date-picker.quarter.heading': string;
     'date-picker.year.heading': string;
+    'date-picker.invalid-format': string;
+    'date-picker.invalid-time-format': string;
     'drag-handle.drag-handle': string;
     'drag-handle.drag-to-reorder': string;
     'resize-handle.resize': string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "40.23.0",
+  "version": "40.24.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -55,7 +55,7 @@
     "@commitlint/cli": "^21.2.4",
     "@commitlint/config-conventional": "^21.2.4",
     "@limetech/eslint-config": "^5.0.3",
-    "@microsoft/api-extractor": "^7.60.0",
+    "@microsoft/api-extractor": "^7.60.1",
     "@playwright/test": "1.64.1",
     "@popperjs/core": "^2.11.8",
     "@rjsf/core": "^6.11.0",

package/dist/cjs/language-s0bKUCvO.js

@@ -1,58 +0,0 @@
-'use strict';
-
-/**
- * Reduce a language to the primary subtag that our language maps are keyed by.
- *
- * A `language` prop is typed, but a custom element takes whatever string an
- * attribute carries — commonly a full BCP 47 tag such as `nb-NO`, since a host
- * application often derives the language from `document.documentElement.lang`.
- * Anything that is not a string must resolve rather than throw, so that an
- * unexpected value can never break a component's render.
- *
- * Examples:
- *  - "nb" => "nb"
- *  - "nb-NO" => "nb"
- *  - "SV-SE" => "sv"
- *  - undefined => ""
- *
- * @param language - the language to reduce
- * @returns the lower-cased primary subtag, or an empty string
- */
-function getPrimarySubtag(language) {
-    if (typeof language !== 'string') {
-        return '';
-    }
-    return language.toLowerCase().split('-', 1)[0];
-}
-/**
- * The locale that `Intl` writes numbers and dates in for `language`, or
- * `undefined` when it cannot write in that language. `Intl` throws on a
- * tag it cannot read, such as `sv_SE`, and quietly uses the viewer's own
- * locale for one it does not know, such as `zz`. A component that writes in
- * its `language` while it renders checks it here, and falls back to English
- * when this gives `undefined`.
- *
- * Examples:
- *  - "sv" => "sv"
- *  - "SV-se" => "sv-SE"
- *  - "sv_SE" => undefined
- *  - "zz" => undefined
- *  - undefined => undefined
- *
- * @param language - the language to write in
- * @returns the locale, or `undefined`
- */
-function getSupportedLocale(language) {
-    if (typeof language !== 'string') {
-        return;
-    }
-    try {
-        return Intl.NumberFormat.supportedLocalesOf(language)[0];
-    }
-    catch (_a) {
-        return;
-    }
-}
-
-exports.getPrimarySubtag = getPrimarySubtag;
-exports.getSupportedLocale = getSupportedLocale;

package/dist/esm/language-VamkUr90.js

@@ -1,55 +0,0 @@
-/**
- * Reduce a language to the primary subtag that our language maps are keyed by.
- *
- * A `language` prop is typed, but a custom element takes whatever string an
- * attribute carries — commonly a full BCP 47 tag such as `nb-NO`, since a host
- * application often derives the language from `document.documentElement.lang`.
- * Anything that is not a string must resolve rather than throw, so that an
- * unexpected value can never break a component's render.
- *
- * Examples:
- *  - "nb" => "nb"
- *  - "nb-NO" => "nb"
- *  - "SV-SE" => "sv"
- *  - undefined => ""
- *
- * @param language - the language to reduce
- * @returns the lower-cased primary subtag, or an empty string
- */
-function getPrimarySubtag(language) {
-    if (typeof language !== 'string') {
-        return '';
-    }
-    return language.toLowerCase().split('-', 1)[0];
-}
-/**
- * The locale that `Intl` writes numbers and dates in for `language`, or
- * `undefined` when it cannot write in that language. `Intl` throws on a
- * tag it cannot read, such as `sv_SE`, and quietly uses the viewer's own
- * locale for one it does not know, such as `zz`. A component that writes in
- * its `language` while it renders checks it here, and falls back to English
- * when this gives `undefined`.
- *
- * Examples:
- *  - "sv" => "sv"
- *  - "SV-se" => "sv-SE"
- *  - "sv_SE" => undefined
- *  - "zz" => undefined
- *  - undefined => undefined
- *
- * @param language - the language to write in
- * @returns the locale, or `undefined`
- */
-function getSupportedLocale(language) {
-    if (typeof language !== 'string') {
-        return;
-    }
-    try {
-        return Intl.NumberFormat.supportedLocalesOf(language)[0];
-    }
-    catch (_a) {
-        return;
-    }
-}
-
-export { getPrimarySubtag as a, getSupportedLocale as g };