@expressivecss/expressive 0.11.0 → 0.13.1

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

@@ -0,0 +1,21 @@
+import { InitElements, InitElement } from '../core/component';
+import { LineChart, LineChartOptions } from './lineChart';
+export type ColumnChartOptions = LineChartOptions;
+/**
+ * Column chart. It reads its <table>, scales, labels and tooltip like
+ * LineChart, but draws each row as a group of columns from zero, or one
+ * column of segments with `stacked`. Columns are HTML clipped to their
+ * value, so their rounded corners keep their shape at any size.
+ *
+ * Re-run `ColumnChart.init(el)` after changing the table.
+ */
+export declare class ColumnChart extends LineChart {
+    protected get _type(): string;
+    protected get _key(): string;
+    protected get _fromZero(): boolean;
+    protected get _points(): boolean;
+    static init(el: HTMLElement, options?: Partial<ColumnChartOptions>): ColumnChart;
+    static init(els: InitElements<InitElement>, options?: Partial<ColumnChartOptions>): ColumnChart[];
+    static getInstance(el: HTMLElement): ColumnChart;
+    protected _draw(drawn?: import("./lineChart").Series[]): Element;
+}

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

@@ -0,0 +1,96 @@
+import { Component, BaseOptions, InitElements, InitElement, Openable } from '../core/component';
+export interface CommandPaletteOptions extends BaseOptions {
+    /**
+     * Letter that toggles the palette together with Command on Apple platforms
+     * or Ctrl elsewhere. A key event the page has already handled is left
+     * alone. `null` turns the shortcut off. `data-shortcut` on the dialog sets
+     * it; an empty `data-shortcut` turns it off.
+     * @default 'k'
+     */
+    shortcut: string | null;
+    /**
+     * If true, the palette closes after a command runs.
+     * @default true
+     */
+    closeOnRun: boolean;
+}
+/**
+ * A command palette: a native modal <dialog class="command-palette"> holding
+ * a search input and a list of commands. Typing filters the list; the arrow
+ * keys move through what is left and Enter runs it, while focus stays in the
+ * input. The dialog owns modality, Escape and returning focus.
+ *
+ * The input is a combobox and the list a listbox of options, with the active
+ * option reported through aria-activedescendant. A command is the link or
+ * button inside an option; running it clicks that element, so a page wires
+ * commands with ordinary hrefs and click handlers.
+ */
+export declare class CommandPalette extends Component<CommandPaletteOptions> implements Openable {
+    el: HTMLDialogElement;
+    /** The search input. */
+    input: HTMLInputElement;
+    /** The list of commands. */
+    list: HTMLElement;
+    private _active;
+    private _generatedIds;
+    /** Wires and refilters commands the page adds or removes later. */
+    private _observer;
+    constructor(el: HTMLDialogElement, options: Partial<CommandPaletteOptions>);
+    static get defaults(): CommandPaletteOptions;
+    /**
+     * Initializes instance of CommandPalette.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<CommandPaletteOptions>): CommandPalette;
+    /**
+     * Initializes instances of CommandPalette.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<InitElement>, options?: Partial<CommandPaletteOptions>): CommandPalette[];
+    static getInstance(el: HTMLElement): CommandPalette;
+    /** If the palette is open. */
+    get isOpen(): boolean;
+    /** Opens the palette as a modal dialog with the search input focused. */
+    open: () => void;
+    /** Closes the palette. The dialog returns focus to where it was. */
+    close: () => void;
+    destroy(): void;
+    private _items;
+    private _labels;
+    private _empty;
+    private _action;
+    private _ensureId;
+    private _setupAccessibility;
+    /** Every command, including ones added since the last pass, is an option. */
+    private _wireItems;
+    /** Commands on screen: neither hidden by the page nor filtered out. */
+    private _shown;
+    /** Shown commands the arrows and Enter can reach: disabled ones are skipped. */
+    private _visible;
+    /** A disabled link or button cannot run, so its option says so. */
+    private _isDisabled;
+    private _setActive;
+    /**
+     * Shows the commands matching the query. Filtering marks rows with
+     * data-filtered rather than hidden, so a command the page hides stays
+     * hidden. `keepActive` holds the active command while it is still
+     * reachable, for list changes the user did not make.
+     */
+    private _filter;
+    private _move;
+    /** Runs a command by clicking its link or button; the click handler closes. */
+    private _run;
+    _handleInput: () => void;
+    _handleKeydown: (e: KeyboardEvent) => void;
+    _handleListClick: (e: MouseEvent) => void;
+    _handlePointerMove: (e: PointerEvent) => void;
+    /**
+     * Each opening starts from the full list. The close event is queued, so a
+     * palette reopened straight away may already be open again; its new search
+     * is left alone.
+     */
+    _handleClose: () => void;
+    _handleShortcut: (e: KeyboardEvent) => void;
+}

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

@@ -18,6 +18,8 @@ export interface DatepickerOptions extends BaseOptions {
     format: string | ((d: Date) => string);
     /**
      * Used to create date object from current input string.
+     * Receives the format string, or an empty string when format is a function.
+     * Not called for blank input.
      * @default null
      */
     parse: ((value: string, format: string) => Date) | null;
@@ -123,9 +125,9 @@ export interface DatepickerOptions extends BaseOptions {
     showClearBtn: boolean;
     /**
      *  Autosubmit calendar day select to input field
-     *  @default false
+     *  @default true
      */
-    autoSubmit: true;
+    autoSubmit: boolean;
     /**
      * Internationalization options.
      */
@@ -244,6 +246,7 @@ export declare class Datepicker extends Component<DatepickerOptions> {
     static _escape(value: unknown): string;
     static _isDate(obj: any): boolean;
     private static _parseDate;
+    private _parseInput;
     static _isWeekend(date: any): boolean;
     /**
      * @deprecated as this function has no effect without any return statement or global parameter setter.

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

@@ -0,0 +1,49 @@
+import { InitElements, InitElement } from '../core/component';
+import { LineChart, LineChartOptions } from './lineChart';
+export type HeatmapChartOptions = LineChartOptions;
+/**
+ * Heatmap chart. It reads its <table> like LineChart, but draws every cell
+ * as a square of the grid, shaded from the lowest value to the highest, with
+ * the row headers beside it and the column headers below. A `data-label` on
+ * a header cell replaces its text on the grid; an empty one hides it. The
+ * tooltip shows one cell, and the arrow keys move round the grid.
+ *
+ * Re-run `HeatmapChart.init(el)` after changing the table.
+ */
+export declare class HeatmapChart extends LineChart {
+    /** Every cell, row by row. */
+    private _cells;
+    /** Each cell's shade from 0 to 1, or null for a gap. */
+    private _levels;
+    /** The text of the lowest and highest cells, for the legend. */
+    private _ends;
+    /** The shades of the lowest and highest cells, where the legend's gradient runs. */
+    private _endLevels;
+    protected get _type(): string;
+    protected get _key(): string;
+    static init(el: HTMLElement, options?: Partial<HeatmapChartOptions>): HeatmapChart;
+    static init(els: InitElements<InitElement>, options?: Partial<HeatmapChartOptions>): HeatmapChart[];
+    static getInstance(el: HTMLElement): HeatmapChart;
+    /** Highlights one cell, numbered row by row. Pass -1 to hide the tooltip. */
+    show(index: number): void;
+    /** Arrows move the way they point, so left and right swap in RTL. */
+    protected _keyTarget(key: string): number | undefined;
+    /**
+     * The cell under the pointer by its position, or -1 off the grid. A touch
+     * keeps its first target while it drags, so the target cannot be used. The
+     * cells and gaps are even, so each band's edge falls in a gap and a gap
+     * counts as the nearer cell.
+     */
+    protected _indexAt(e: PointerEvent): number;
+    /**
+     * The legend: a gradient from the lowest cell's shade to the highest's,
+     * labelled with their text. A fixed scale wider than the data shows only
+     * the part the data uses.
+     */
+    protected _guides(): Element[];
+    /**
+     * A grid of the row headers and cells, row by row, with the column headers
+     * below. Each cell's --level shades it in CSS.
+     */
+    protected _draw(): Element;
+}

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

@@ -7,8 +7,20 @@ export { ExpandingCard } from "./expandingCard";
 export { Carousel } from "./carousel";
 export { CharacterCounter } from "./characterCounter";
 export { Chips } from "./chips";
+export { CommandPalette } from "./commandPalette";
+export { Questionnaire } from "./questionnaire";
+export { LineChart } from "./lineChart";
+export { ColumnChart } from "./columnChart";
+export { BarChart } from "./barChart";
+export { PieChart } from "./pieChart";
+export { HeatmapChart } from "./heatmapChart";
+export { RadarChart } from "./radarChart";
+export { RadialChart } from "./radialChart";
+export { MixedChart } from "./mixedChart";
 export { Datepicker } from "./datepicker";
 export { Menu } from "./menu";
+export { MessageScroller } from "./messageScroller";
+export { RichTextEditor } from "./richTextEditor";
 export { Lightbox } from "./lightbox";
 export { Slider } from "./slider";
 export { ScrollSpy } from "./scrollspy";

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

@@ -0,0 +1,134 @@
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+export interface LineChartOptions extends BaseOptions {
+    /**
+     * Lowest value on the y axis. Defaults to the data minimum less 10% of
+     * the range; a stacked chart starts at zero or its lowest total, and a
+     * column chart always includes zero. Overridden by `data-min` on the chart.
+     */
+    min: number | null;
+    /**
+     * Highest value on the y axis. Defaults to the data maximum plus 10% of
+     * the range. Overridden by `data-max` on the chart.
+     */
+    max: number | null;
+}
+export declare const COLORS = 4;
+/** An SVG element with its attributes. */
+export declare function svgNode(name: string, attributes?: Record<string, string>): SVGElement;
+export interface Series {
+    name: string;
+    /** Header cell classes, such as `dashed`. */
+    className: string;
+    /** Cell text, shown in the tooltip as the author formatted it. */
+    text: string[];
+    values: (number | null)[];
+    /**
+     * Where each value is drawn: the value, or in a stacked chart the running
+     * total, which is unknown (null) above a gap.
+     */
+    tops: (number | null)[];
+    /** In a stacked chart, the total of the series below, which this area fills down to. */
+    base?: (number | null)[];
+    /** The series' y scale: a value's distance down the plot, in percent. */
+    y: (value: number) => number;
+}
+/**
+ * Line chart. The data is the chart's <table>; this class draws it as an SVG
+ * with x labels, a legend for more than one series, and a cursor and tooltip
+ * that follow the pointer or the arrow keys. Styling is CSS.
+ *
+ * Re-run `LineChart.init(el)` after changing the table.
+ */
+export declare class LineChart extends Component<LineChartOptions> {
+    /** The values' x positions and series, read from the table. */
+    labels: string[];
+    series: Series[];
+    /** The highlighted row, or -1. */
+    activeIndex: number;
+    private _generated;
+    /** The table's header cells and body rows, as read. */
+    protected _header: HTMLTableCellElement[];
+    protected _rows: HTMLTableRowElement[];
+    protected _plot: HTMLElement;
+    protected _cursor: HTMLElement;
+    protected _tooltip: HTMLElement;
+    protected _y: (value: number) => number;
+    /**
+     * Whether the rows run right to left: a horizontal row axis in a
+     * right-to-left context, like the labels. Bar chart rows keep their order.
+     */
+    protected _reversed: boolean;
+    /** The class prefix of the generated parts; ColumnChart reuses this class. */
+    protected get _type(): string;
+    /** Whether the y axis always includes zero, as columns grow from it. */
+    protected get _fromZero(): boolean;
+    /**
+     * Whether the rows run down the plot and the values across it, as in a
+     * bar chart. The rows then keep their order in a right-to-left context.
+     */
+    protected get _horizontal(): boolean;
+    /**
+     * Whether the rows go round a circle, as in a pie or radar chart. The
+     * arrows then step round it, wrapping from the last row to the first.
+     */
+    protected get _circular(): boolean;
+    /** Whether the cursor marks each series with a point. */
+    protected get _points(): boolean;
+    protected get _key(): string;
+    constructor(el: HTMLElement, options: Partial<LineChartOptions>);
+    static get defaults(): LineChartOptions;
+    static init(el: HTMLElement, options?: Partial<LineChartOptions>): LineChart;
+    static init(els: InitElements<InitElement>, options?: Partial<LineChartOptions>): LineChart[];
+    static getInstance(el: HTMLElement): LineChart;
+    destroy(): void;
+    /**
+     * Highlights one row: moves the cursor and fills the tooltip.
+     * Pass -1 to hide them. Does nothing for a chart without data.
+     */
+    show(index: number): void;
+    /**
+     * Moves the filled cursor and tooltip to a row: beside its band, with the
+     * tooltip opening back over the plot past the middle.
+     */
+    protected _place(index: number): void;
+    private _read;
+    /** A number from one of the chart's data attributes, or null. */
+    protected _number(name: string): number;
+    /**
+     * Fits a y scale to the series' tops, between `min` and `max` where they
+     * are set, and gives it to each series.
+     */
+    protected _scale(series: Series[], min: number | null, max: number | null, fromZero?: boolean): (value: number) => number;
+    /** Each row sits in the middle of an equal band, beside its label. */
+    private _x;
+    private _render;
+    /**
+     * The <tfoot> row as a total to show over the plot, its value over its
+     * label, or null without one.
+     */
+    protected _total(className: string): HTMLElement | null;
+    /** The parts below the plot: the row labels and the legend. */
+    protected _guides(): Element[];
+    /** The series legend, for more than one series. */
+    protected _legend(): Element[];
+    /** Draws the series, which fill the plot. */
+    protected _draw(drawn?: Series[]): Element;
+    private _onPointerMove;
+    /** The row under the pointer, or -1. */
+    protected _indexAt(e: PointerEvent): number;
+    /**
+     * For a circular chart, the pointer's position from the plot's middle: a
+     * fraction of a turn clockwise from the top, and its distance as a share
+     * of the plot's width.
+     */
+    protected _polarAt(e: PointerEvent): [turn: number, distance: number];
+    /** The keys that move to the next row and to the one before. */
+    protected get _arrows(): [string[], string[]];
+    private _onFocus;
+    private _onLeave;
+    /** The browser took the touch to scroll the page. */
+    private _onCancel;
+    /** The index a key moves to, or undefined for a key the chart ignores. */
+    protected _keyTarget(key: string): number | undefined;
+    private _onKeyDown;
+}

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

@@ -40,6 +40,13 @@ export interface MenuOptions extends BaseOptions {
      * @default false
      */
     hover: boolean;
+    /**
+     * If true, the trigger is a region and the menu is its context menu: it
+     * opens at the pointer on right-click, long-press or the keyboard context
+     * menu key instead of on click. `data-context-menu` on the trigger sets it.
+     * @default false
+     */
+    contextMenu: boolean;
     /**
      * The duration of the transition enter in milliseconds.
      * @default 150
@@ -94,6 +101,15 @@ export declare class Menu extends Component<MenuOptions> implements Openable {
     private _pendingTimers;
     private _transition;
     private _originalInert;
+    private _menuClickTargets;
+    /**
+     * Viewport point the open context menu belongs to. Null outside a
+     * right-click, so a keyboard or programmatic open uses the region's corner
+     * rather than an old pointer position.
+     */
+    private _contextPoint;
+    /** What had focus when a context menu opened; focus goes back there. */
+    private _contextReturn;
     constructor(el: HTMLElement, options: Partial<MenuOptions>);
     static get defaults(): MenuOptions;
     /**
@@ -114,6 +130,8 @@ export declare class Menu extends Component<MenuOptions> implements Openable {
     _removeEventHandlers(): void;
     _setupTemporaryEventHandlers(): void;
     _removeTemporaryEventHandlers(): void;
+    _handleContextMenu: (e: MouseEvent) => void;
+    _handleDocumentContextMenu: (e: MouseEvent) => void;
     _handleClick: (e: MouseEvent) => void;
     _handleMouseEnter: () => void;
     _handleMouseLeave: (e: MouseEvent) => void;
@@ -156,6 +174,20 @@ export declare class Menu extends Component<MenuOptions> implements Openable {
     _animateOut(): void;
     private _getClosestAncestor;
     _placeMenu(): void;
+    /** Where a context menu opens without a pointer: the region's start corner. */
+    private _regionCorner;
+    /**
+     * Places a context menu with its start corner on the point, flipping to
+     * the other side of the point where it would not fit. The bounds are the
+     * viewport, narrowed to a scrolling or clipping ancestor the menu sits in;
+     * a menu taller than them gets their height and scrolls.
+     *
+     * The menu rests at left/top 0 of its containing block, so its rect is the
+     * offset to subtract - the same trick _getMenuPosition uses. It is measured
+     * without the entry animation's scale, which a second right-click can catch.
+     */
+    private _placeMenuAtPoint;
+    private _setExpanded;
     /**
      * Open menu.
      */

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

@@ -0,0 +1,111 @@
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
+export interface MessageScrollerOptions extends BaseOptions {
+    /**
+     * If true, the viewport follows new content while the reader is at the
+     * end, and a newly appended scroll anchor is brought to the top.
+     * @default true
+     */
+    autoScroll: boolean;
+    /**
+     * Where the transcript opens: `'end'`, `'start'`, or `'last-anchor'`, the
+     * start of the last anchored turn. `'last-anchor'` opens at the end when
+     * that turn already fits in the viewport.
+     * @default 'end'
+     */
+    defaultScrollPosition: 'start' | 'end' | 'last-anchor';
+    /**
+     * Pixels of the previous message left visible above an anchored turn or a
+     * message reached with `scrollToMessage()`.
+     * @default 64
+     */
+    peek: number;
+}
+/**
+ * A chat scroll container: a `.message-scroller` frame holding a scrolling
+ * `.message-scroller-viewport` of messages and an optional
+ * `.message-scroller-button`. Every child of the viewport is one message.
+ *
+ * While the reader is at the end, the viewport follows streamed output.
+ * Scrolling toward the start releases it; reaching the end again, or the
+ * button, resumes it. An appended message marked `data-scroll-anchor` starts a
+ * turn and is scrolled to the top, with blank space below it until the reply
+ * fills the viewport. Messages added above keep the reader's place.
+ */
+export declare class MessageScroller extends Component<MessageScrollerOptions> {
+    /** The scrolling element. */
+    viewport: HTMLElement;
+    /** The scroll-to-latest button, if present. */
+    button: HTMLButtonElement | null;
+    private _opened;
+    private _following;
+    /** A press is down: it may be a tap or a scrollbar drag. */
+    private _holding;
+    private _lastTop;
+    /** Where a programmatic scroll is heading; null when none is running. */
+    private _target;
+    /** Distance left to the target at the last scroll event. */
+    private _distance;
+    /** The first visible message and its offset from the viewport top. */
+    private _ref;
+    private _refOffset;
+    /** The latest anchored turn, which the spacer lets reach the top. */
+    private _anchor;
+    private _spacer;
+    private _last;
+    private _resizeObserver;
+    private _mutationObserver;
+    constructor(el: HTMLElement, options: Partial<MessageScrollerOptions>);
+    static get defaults(): MessageScrollerOptions;
+    /**
+     * Initializes instance of MessageScroller.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLElement, options?: Partial<MessageScrollerOptions>): MessageScroller;
+    /**
+     * Initializes instances of MessageScroller.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<InitElement>, options?: Partial<MessageScrollerOptions>): MessageScroller[];
+    static getInstance(el: HTMLElement): MessageScroller;
+    destroy(): void;
+    /** Scrolls to the latest message and resumes following. */
+    scrollToEnd(): void;
+    /** Scrolls to the first message. */
+    scrollToStart(): void;
+    /**
+     * Scrolls the element with this id to the top of the viewport, below the
+     * peek, and stops following.
+     * @returns false when no such element is inside the viewport.
+     */
+    scrollToMessage(id: string): boolean;
+    private _open;
+    /**
+     * Records where the reader is once no programmatic scroll is running.
+     * Content can grow between a scroll and the resize that re-pins the end,
+     * so only moving toward the start releases following.
+     */
+    private _settle;
+    private _handleScroll;
+    private _handleUserScroll;
+    private _handleRelease;
+    private _handleButtonClick;
+    private _handleMutations;
+    private _handleResize;
+    private _scrollTo;
+    private _resolve;
+    private _atEnd;
+    /** Offset of an element from the top of the scrolled content. */
+    private _top;
+    /** Bottom of the content without the spacer, padding included. */
+    private _contentEnd;
+    /** Remembers the first visible message so prepends can keep it in place. */
+    private _capture;
+    /** Moves the remembered message back to where the reader last saw it. */
+    private _restore;
+    /** Sizes the blank space that lets the latest anchored turn reach the top. */
+    private _updateSpacer;
+    /** The button is inert while there is nothing below. */
+    private _sync;
+}

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

@@ -0,0 +1,25 @@
+import { InitElements, InitElement } from '../core/component';
+import { ColumnChart } from './columnChart';
+import { LineChartOptions, Series } from './lineChart';
+export type MixedChartOptions = LineChartOptions;
+/**
+ * Mixed chart. It reads its <table> like LineChart, and draws each series
+ * by its header cell's class: `column` as columns from zero, `area` as a
+ * line with a fill under it, and anything else as a line. Series with
+ * `end` are drawn against a second scale, set by `data-end-min` and
+ * `data-end-max`, so values of different sizes or units share the plot.
+ *
+ * Re-run `MixedChart.init(el)` after changing the table.
+ */
+export declare class MixedChart extends ColumnChart {
+    protected get _type(): string;
+    protected get _key(): string;
+    protected get _points(): boolean;
+    static init(el: HTMLElement, options?: Partial<MixedChartOptions>): MixedChart;
+    static init(els: InitElements<InitElement>, options?: Partial<MixedChartOptions>): MixedChart[];
+    static getInstance(el: HTMLElement): MixedChart;
+    /** The start scale, then the end scale; each includes zero if it has columns. */
+    protected _scale(series: Series[], min: number | null, max: number | null): (value: number) => number;
+    /** Columns behind, then the lines and areas over them. */
+    protected _draw(): Element;
+}

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

@@ -0,0 +1,40 @@
+import { InitElements, InitElement } from '../core/component';
+import { LineChart, LineChartOptions } from './lineChart';
+export type PieChartOptions = LineChartOptions;
+/**
+ * Pie chart. It reads its <table> like LineChart, but draws each row of the
+ * first value column as a slice of the whole, clockwise from the top, with
+ * a legend of every row and its share. With `.donut`, a <tfoot> row is the
+ * total in the middle. Further columns show in the tooltip.
+ *
+ * Re-run `PieChart.init(el)` after changing the table.
+ */
+export declare class PieChart extends LineChart {
+    /** Each row's start and end, as fractions of a turn clockwise from the top. */
+    private _turns;
+    /** Each row's color, or undefined for a row with no slice. */
+    private _colors;
+    private _slices;
+    protected get _type(): string;
+    protected get _key(): string;
+    protected get _points(): boolean;
+    protected get _circular(): boolean;
+    static init(el: HTMLElement, options?: Partial<PieChartOptions>): PieChart;
+    static init(els: InitElements<InitElement>, options?: Partial<PieChartOptions>): PieChart[];
+    static getInstance(el: HTMLElement): PieChart;
+    show(index: number): void;
+    /** CSS places the tooltip on the slice's middle from --turn. */
+    protected _place(index: number): void;
+    /** The row's share of the whole as a percentage, or '' for none. */
+    private _share;
+    /** The legend: every row with its color, its cell and its share. */
+    protected _guides(): Element[];
+    /** The row under the pointer by its angle from the middle, or -1 off the slices. */
+    protected _indexAt(e: PointerEvent): number;
+    /**
+     * An SVG of slices in a -50 to 50 box, under a mask that cuts the gaps
+     * between them and the donut's hole, which CSS sizes. The values and the
+     * total are HTML over it.
+     */
+    protected _draw(): Element;
+}