@limetech/lime-elements 40.23.0 → 40.25.0

package/dist/types/components/chart/series.d.ts

@@ -0,0 +1,71 @@
+import { ChartItem, ChartSeries } from './chart.types';
+/**
+ * Series lined up by category, so that the items of each series that belong
+ * together are at the same place.
+ */
+export interface SeriesGrid {
+    /** The texts of the categories, in the order they first appear. */
+    categories: string[];
+    series: GridSeries[];
+}
+/**
+ * A series whose items are lined up by category.
+ */
+export interface GridSeries {
+    text: string;
+    color?: string;
+    /** The item of the series at each category, if it has one there. */
+    items: Array<ChartItem | undefined>;
+}
+/**
+ * Where an item is: the index of its series, and of its category. An item of
+ * a chart without series is in the first and only series.
+ */
+export interface ItemPosition {
+    series: number;
+    index: number;
+}
+/**
+ * Lines up the items of the series by their text, since items of different
+ * series that have the same text belong to the same category. When a series
+ * has several items with the same text, its second item with that text lines
+ * up with the second one of the other series, and so on.
+ * @param series - the series
+ */
+export declare function alignSeries(series: ChartSeries[]): SeriesGrid;
+/**
+ * The item at a position, if there is one.
+ * @param grid - the series
+ * @param position - where the item is
+ */
+export declare function getItemAt(grid: SeriesGrid, position: ItemPosition): ChartItem | undefined;
+/**
+ * The series that has an item at a place on the axis and is nearest to a
+ * series: the series itself when it has an item there, otherwise the closest
+ * one, and the earlier of two that are as close.
+ * @param grid - the series
+ * @param position - the place on the axis, and the series to start from
+ */
+export declare function getNearestSeries(grid: SeriesGrid, position: ItemPosition): number | undefined;
+/**
+ * The items of every series, in no particular order.
+ * @param grid - the series
+ */
+export declare function getAllItems(grid: SeriesGrid): ChartItem[];
+/**
+ * The items that the value axis has to reach: every item, or, when the
+ * series are stacked, the two ends of the stack at each place on the axis.
+ * Positive and negative values are stacked on their own side of zero, and a
+ * range adds its extent to the stack.
+ * @param grid - the series
+ * @param stacked - whether the series are stacked on each other
+ */
+export declare function getAxisItems(grid: SeriesGrid, stacked: boolean): ChartItem[];
+/**
+ * Whether the item at a position ends its stack, since no later series has
+ * an item on the same side of zero at that place on the axis.
+ * @param grid - the stacked series
+ * @param position - where the item is
+ */
+export declare function endsStack(grid: SeriesGrid, position: ItemPosition): boolean;
+//# sourceMappingURL=series.d.ts.map

package/dist/types/components/date-picker/date-formatter.d.ts

@@ -6,6 +6,18 @@ import 'moment/locale/nb';
 import 'moment/locale/nl';
 import 'moment/locale/sv';
 import { DateType } from './date.types';
+/**
+ * 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
+ */
+export declare function parseComplete(date: string, format: string, locale: string): Date | null;
 export declare class DateFormatter {
     private language;
     constructor(language?: string);

package/dist/types/components/date-picker/date-picker.d.ts

@@ -11,6 +11,7 @@ import { DateType, Languages } from '../date-picker/date.types';
  * @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
  */
 export declare class DatePicker {
     /**
@@ -28,7 +29,8 @@ export declare class DatePicker {
     readonly: boolean;
     /**
      * 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.
      */
     invalid: boolean;
     /**
@@ -50,6 +52,9 @@ export declare class DatePicker {
      * 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;
     /**
@@ -77,32 +82,69 @@ export declare class DatePicker {
      * Custom formatting function. Will be used for date formatting.
      *
      * :::note
-     * overrides `format` and `language`
+     * 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;
     /**
-     * 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.
      */
     private change;
+    /**
+     * 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.
+     */
+    private invalidInput;
     private host;
     private internalFormat;
     private showPortal;
+    private parseError;
+    private rawInputValue;
+    /**
+     * Shown as selected in the calendar instead of `value`: a valid typed
+     * date, or a pick the consumer has not echoed back yet.
+     */
+    private previewValue;
+    private isEditing;
+    private discardedText;
+    private committedText;
     private useNative;
     private nativeType;
     private nativeFormat;
     private textField;
+    private inputElement;
     private datePickerCalendar;
     private portalId;
     private dateFormatter;
+    private readonly errorMessage;
     constructor();
     componentWillLoad(): void;
     componentWillUpdate(): void;
     disconnectedCallback(): void;
+    protected watchValue(newValue?: Date, oldValue?: Date): void;
+    protected watchParseError(): void;
+    protected watchFormatInputs(): void;
+    protected watchLanguage(): void;
     render(): any;
+    private getDisplayValue;
+    private acceptsTypedInput;
+    private getHelperText;
+    private getInvalidInputMessage;
     private updateInternalFormatAndType;
     private nativeChangeHandler;
     private showCalendar;
+    private setUpInputElement;
+    private handleInputBlur;
     private preventBlurFromCalendarContainer;
     private hideCalendar;
     private removeDocumentListeners;
@@ -111,6 +153,20 @@ export declare class DatePicker {
     private handleCalendarChange;
     private onInputClick;
     private handleInputElementChange;
+    private handleKeyDown;
+    private handleArrowDown;
+    private handleEscape;
+    private hasTypedText;
+    private discardTypedText;
+    private getCommittedText;
+    private handleEnter;
+    private handleDelete;
+    private commitTypedText;
+    private commitEmptyText;
+    private commitDate;
+    private emitCommitted;
+    private parseText;
+    private resetTypedText;
     private pickerIsAutoClosing;
     private clearValue;
     private formatValue;

package/dist/types/components/date-picker/flatpickr-adapter/flatpickr-adapter.d.ts

@@ -12,6 +12,10 @@ export declare class DatePickerCalendar {
      * The value of the field.
      */
     value: Date;
+    /**
+     * Shown as selected instead of `value` while set.
+     */
+    previewValue?: Date;
     /**
      * Type of date picker.
      */
@@ -25,7 +29,7 @@ export declare class DatePickerCalendar {
      */
     isOpen: boolean;
     /**
-     * The native input element to use with flatpickr.
+     * The input the user types into. Setting it creates the calendar.
      */
     inputElement: HTMLElement;
     /**
@@ -33,7 +37,6 @@ export declare class DatePickerCalendar {
      * Property `format` customizes the localized date format.
      */
     language: Languages;
-    formatter: (date: Date) => string;
     /**
      * Emitted when the date picker value is changed.
      */
@@ -42,9 +45,17 @@ export declare class DatePickerCalendar {
     private flatPickrCreated;
     private deferredDestroy;
     private container;
+    private proxyInput;
     componentWillLoad(): void;
+    protected watchPreviewValue(): void;
     componentDidUpdate(): void;
     private createFlatpickr;
+    /**
+     * 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>;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): any;

package/dist/types/components/date-picker/pickers/month-picker.d.ts

@@ -11,6 +11,7 @@ export declare class MonthPicker extends Picker {
     getConfig(nativePicker: boolean): flatpickr.Options.Options;
     protected handleChange(selectedDates: any, dateString: any, fp: any): void;
     protected handleClose(selectedDates: any): Promise<void>;
+    protected redrawSelection(): void;
     private handleReady;
     private bootstrapMonthPicker;
     private renderHeading;

package/dist/types/components/date-picker/pickers/picker.d.ts

@@ -9,7 +9,7 @@ import 'moment/locale/nl';
 import 'moment/locale/sv';
 export declare abstract class Picker {
     protected change: EventEmitter<Date>;
-    formatter: (date: Date) => string;
+    private formatter;
     protected dateFormat: string;
     protected language: string;
     protected flatpickr: flatpickr.Instance;
@@ -17,6 +17,13 @@ export declare abstract class Picker {
     constructor(language: string, change: EventEmitter<Date>, dateFormat: string);
     init(element: HTMLElement, container: HTMLElement, value?: Date): void;
     setValue(value: Date): void;
+    /**
+     * A silent `setDate` fires no Flatpickr hooks, so a picker that marks
+     * its selection from hooks does it here instead.
+     */
+    protected redrawSelection(): void;
+    focusDay(): boolean;
+    private getDayToFocus;
     redraw(): void;
     destroy(): void;
     abstract getConfig(useNativePicker: boolean): flatpickr.Options.Options;

package/dist/types/components/date-picker/pickers/quarter-picker.d.ts

@@ -12,6 +12,7 @@ export declare class QuarterPicker extends Picker {
     getConfig(nativePicker: boolean): flatpickr.Options.Options;
     protected handleChange(selectedDates: any, dateString: any, fp: any): void;
     protected handleClose(selectedDates: any): Promise<void>;
+    protected redrawSelection(): void;
     private handleReady;
     private bootstrapQuarterPicker;
     private renderHeading;

package/dist/types/components/date-picker/pickers/week-picker.d.ts

@@ -4,5 +4,9 @@ import { Picker } from './picker';
 export declare class WeekPicker extends Picker {
     constructor(language: string, change: EventEmitter, dateFormat?: string);
     getConfig(nativePicker: boolean): flatpickr.Options.Options;
+    /**
+     * Marks the selected week the way the `weekSelect` plugin does.
+     */
+    protected redrawSelection(): void;
 }
 //# sourceMappingURL=week-picker.d.ts.map

package/dist/types/components/date-picker/pickers/year-picker.d.ts

@@ -17,6 +17,13 @@ export declare class YearPicker extends Picker {
     getConfig(nativePicker: boolean): flatpickr.Options.Options;
     protected handleChange(selectedDates: any, dateString: any): void;
     protected handleClose(selectedDates: any): Promise<void>;
+    protected redrawSelection(): void;
+    /**
+     * Moves the year window, which only the arrows move otherwise, so that
+     * `year` has a cell to highlight.
+     * @param year
+     */
+    private showYear;
     private handleReady;
     private bootstrapYearPicker;
     private renderHeading;

package/dist/types/components/form/fields/schema-field.d.ts

@@ -17,6 +17,8 @@ export declare class SchemaField extends React.Component<FieldProps> {
         modified: boolean;
     };
     constructor(props: any);
+    componentWillUnmount(): void;
+    private reportInvalidInput;
     private isInvalid;
     private getHelperText;
     private hasHeaderFromForm;

package/dist/types/components/form/form.d.ts

@@ -111,6 +111,7 @@ export declare class Form {
     private currentValue;
     private givenValue?;
     private root;
+    private readonly invalidInputErrors;
     private initialized;
     constructor();
     connectedCallback(): void;
@@ -144,6 +145,7 @@ export declare class Form {
      * @param schema - the schema to prepare
      */
     private prepareSchema;
+    private setInvalidInput;
     private hasExtraErrors;
     private emitValidationStatus;
     private mapErrors;

package/dist/types/components/form/form.test-schemas.d.ts

@@ -22,6 +22,7 @@ export declare const gridLayoutSchema: FormSchema;
 export declare const collapsibleSchema: FormSchema;
 export declare const collapsibleSchemaWithRequired: FormSchema;
 export declare const dateSchema: FormSchema;
+export declare const wrappedDateSchema: FormSchema;
 export declare const integerSchema: FormSchema;
 export declare const serverErrorsSchema: FormSchema;
 export declare const transformErrorsSchema: FormSchema;

package/dist/types/components/form/invalid-input.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Reports the error message of a field that holds input it can't turn
+ * into a value, or `null` when it no longer does.
+ */
+export type InvalidInputReporter = (message: string | null) => void;
+/**
+ * Listens for `invalidInput` from the element or from inside it, such as
+ * a `limel-date-picker` in a custom component's shadow root.
+ * @param element - the field's element
+ * @param report - called with each message
+ * @returns a function that stops listening
+ */
+export declare function listenForInvalidInput(element: HTMLElement, report: InvalidInputReporter): () => void;
+//# sourceMappingURL=invalid-input.d.ts.map

package/dist/types/components/form/widgets/date-picker.d.ts

@@ -13,6 +13,7 @@ export declare class DatePicker extends React.Component<DateWidgetProps> {
     };
     constructor(props: DateWidgetProps);
     render(): React.CElement<import("../adapters").WidgetAdapterProps, LimeElementsWidgetAdapter>;
+    private watchInvalidInput;
     private getValue;
     private handleChange;
 }