@spectric/ui 0.0.21 → 0.0.22

package/dist/components/dialog/dialog.d.ts

@@ -13,6 +13,7 @@ interface DialogProps {
 /**
  * Dialog Element
  * @slot title - sets the title of the dialog attribute/property can also be use for setting the title to a string
+ * @slot footer - Space at the bottom of the dialog that you can put buttons or other tools
  */
 export declare class DialogElement extends LitElement implements DialogProps {
     static styles: CSSResultGroup;

package/dist/components/pagination/pagination.d.ts

@@ -34,7 +34,7 @@ export declare class PaginationElement extends LitElement implements PaginationP
     protected render(): unknown;
 }
 interface PaginationEvents {
-    'change': (event: CustomEvent<PaginationChangeProps>) => void;
+    change: (event: CustomEvent<PaginationChangeProps>) => void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/query_bar/QueryBar.d.ts

@@ -7,16 +7,16 @@ import * as kuery from "./querylanguage/kuery";
 export type FieldTypes = {
     name: string;
     type: "string" | "number" | "boolean" | "integer" | "object";
-    format?: "date-time";
+    format?: "date-time" | "geojson";
 };
-type SuggestionType = 'conjunction' | "field" | 'operator' | 'value';
+type SuggestionType = "conjunction" | "field" | "operator" | "value" | "geo_value";
 type Suggestion = {
     fieldName: string;
     end: number;
     prefix: string;
     start: number;
     suffix: string;
-    suggestionTypes: (SuggestionType)[];
+    suggestionTypes: SuggestionType[];
     text: string;
     type: "cursor";
 };
@@ -28,7 +28,7 @@ export declare enum SupportedLanguages {
 }
 type SupportedLanguagesTypes = `${SupportedLanguages}`;
 interface QueryEventMap {
-    "change": (event: CustomEvent<string | kuery.KueryNode | JsonObject>) => void;
+    change: (event: CustomEvent<string | kuery.KueryNode | JsonObject>) => void;
 }
 export interface IQueryProps {
     /**
@@ -46,23 +46,34 @@ export interface IQueryProps {
     /**
      * Callback that will provide values for specific fields
      */
-    getValuesForField?: (field: string, text: string) => Promise<string[]>;
+    getValuesForField?: (field: string, text: string) => Promise<LabelValuesOrStrings>;
     /**
      * Input placeholder
      */
     placeholder?: string;
 }
+type LabelValue = {
+    label?: string;
+    value: string;
+};
+export type LabelValueOrString = LabelValue | string;
+export type LabelValuesOrStrings = (LabelValue | string)[];
+export declare const toLabelValue: (value: LabelValueOrString) => {
+    label: string;
+    value: string;
+};
 /**
  * The Query component will take Opensearch Dashboard Query language and transform it into various outputs
  */
 export declare class SpectricQuery extends LitElement implements IQueryProps {
     private uuid;
     placeholder: string;
+    valueHelper: any;
     constructor();
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     /**
-    * The internal value.
-    */
+     * The internal value.
+     */
     protected _value: string;
     private suggestion?;
     /**
@@ -74,13 +85,22 @@ export declare class SpectricQuery extends LitElement implements IQueryProps {
     private completionIndex;
     fields: FieldTypes[];
     _autocomplete?: PopoverElement;
+    _valueHelper?: PopoverElement;
     _asyncAutocomplete: Promise<HTMLDivElement>;
     /**
-    * The underlying input element
-    */
+     * The underlying input element
+     */
     protected _input: SpectricInput;
+    _checkClickLocation: (e: MouseEvent) => Promise<void>;
+    _setValue: (value: string | undefined, suggestion: Suggestion) => void;
+    /**
+     * Value helper is a popover above the query bar that will help users set/change/clear the value if it is complex (like date time or geoshape)
+     * @param suggestion
+     */
+    _showValueHelper: (suggestion: Suggestion) => Promise<void>;
+    _getSuggestion: () => Suggestion;
     _parseQuery: (e?: InputEvent | undefined) => void;
-    getValuesForField: (field: string, text: string) => Promise<string[]>;
+    getValuesForField: (field: string, text: string) => Promise<LabelValuesOrStrings>;
     autoComplete(suggestion: Suggestion): Promise<void>;
     protected updated(changed: PropertyValues): void;
     _selectCompletion: () => Promise<void>;

package/dist/components/query_bar/dateTimePopup.d.ts

@@ -0,0 +1,2 @@
+import { LabelValuesOrStrings } from './QueryBar';
+export declare const DateTimePopup: (values: LabelValuesOrStrings) => Promise<string | undefined>;

package/dist/components/query_bar/geojsonPopup.d.ts

@@ -0,0 +1,2 @@
+import { LabelValuesOrStrings } from './QueryBar';
+export declare const GeoJSONPopup: (values: LabelValuesOrStrings) => Promise<string | undefined>;

package/dist/components/query_bar/querylanguage/kuery/functions/geospatial.d.ts

@@ -0,0 +1,19 @@
+import { KueryNode } from '../types';
+export declare function toOpenSearchQuery(node: KueryNode): {
+    bool: {
+        must: ({
+            exists: {
+                field: any;
+            };
+            geo_shape?: undefined;
+        } | {
+            geo_shape: {
+                [x: number]: {
+                    relation: any;
+                    shape: import('geojson').GeoJSON;
+                };
+            };
+            exists?: undefined;
+        })[];
+    };
+};

package/dist/components/query_bar/querylanguage/outputTypes/toCQL.d.ts

@@ -1,7 +1,7 @@
 import { FieldTypes, KueryNode } from '../..';
 export declare const KQL_WILDCARD_SYMBOL = "@kuery-wildcard@";
 export declare const KQL_NODE_TYPE_WILDCARD = "wildcard";
-export type FunctionName = 'is' | 'and' | 'or' | 'not' | 'range' | 'exists' | 'nested';
+export type FunctionName = "is" | "and" | "or" | "not" | "range" | "exists" | "nested";
 export declare const functions: {
     is: (node: KueryNode, fields?: FieldTypes[]) => string;
     and: (node: KueryNode, fields?: FieldTypes[]) => string;
@@ -10,5 +10,6 @@ export declare const functions: {
     range: (node: KueryNode) => string;
     exists: (node: KueryNode) => string;
     nested: (node: KueryNode) => string;
+    geospatial: (node: KueryNode) => string;
 };
 export declare const toCql: (node: KueryNode, fields?: FieldTypes[]) => string;

package/dist/components/query_bar/querylanguage/outputTypes/toMongo.d.ts

@@ -1,7 +1,7 @@
 import { FieldTypes, KueryNode } from '../..';
 export declare const KQL_WILDCARD_SYMBOL = "@kuery-wildcard@";
 export declare const KQL_NODE_TYPE_WILDCARD = "wildcard";
-export type FunctionName = 'is' | 'and' | 'or' | 'not' | 'range' | 'exists' | 'nested';
+export type FunctionName = "is" | "and" | "or" | "not" | "range" | "exists" | "nested";
 export declare const functions: {
     is: (node: KueryNode) => any;
     and: (node: KueryNode) => any;
@@ -16,5 +16,10 @@ export declare const functions: {
         };
     };
     nested: (node: KueryNode) => string;
+    geospatial: (node: KueryNode) => {
+        [x: number]: {
+            $geoWithin: import('geojson').GeoJSON;
+        };
+    } | undefined;
 };
 export declare const toMongo: (node: KueryNode, fields?: FieldTypes[]) => string;

package/dist/components/symbols.d.ts

@@ -0,0 +1,6 @@
+export declare const EDIT = "\uD83D\uDD89";
+export declare const DELETE = "\uD83D\uDDD1";
+export declare const ARROW_LEFT = "\uD83E\uDC08";
+export declare const ARROW_RIGHT = "\uD83E\uDC0A";
+export declare const ARROW_UP = "\uD83E\uDC09";
+export declare const ARROW_DOWN = "\uD83E\uDC0B";

package/dist/components/table/cell.d.ts

@@ -30,7 +30,7 @@ export declare class TableCellElement<T> extends LitElement implements CellProps
     _emitFilter(filter: FilterEvent<T>): void;
     _handleFilterOut: () => void;
     _handleFilterFor: () => void;
-    _displayTooltip: () => void;
+    _displayOverflowTooltip: () => void;
     getRenderedValue(): any;
     protected render(): unknown;
 }

package/dist/components/table/table.d.ts

@@ -33,6 +33,7 @@ export type ColumnSettings<T> = {
     sortable?: boolean;
     sortDirection?: TableSortDirectionTypes;
     filterable?: boolean;
+    disableCellOverflowTooltip?: boolean;
     title?: DomRenderable | ((table: SpectricTableElement<T>) => DomRenderable);
     /**
      * Key to used for getting data from an object for a cell
@@ -92,10 +93,13 @@ export declare class SpectricTableElement<T = any> extends LitElement implements
     private __DO_NOT_USE_filter;
     private selected;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
-    forceRefreshofSelectionColumn(): void;
+    private forceRefreshofSelectionColumn;
     setSelected(selected: T[]): void;
+    getSelected(): T[];
     deselectAll(): void;
     selectAll(): void;
+    scrollToRow(row: T | number): Promise<void>;
+    _getRowHeight: () => number;
     _handleSelectAllChange: (e: DomEvent<HTMLInputElement>) => void;
     private selectColumnConfig;
     protected update(changedProperties: PropertyValues): void;

package/dist/custom-elements.json

@@ -432,7 +432,7 @@
     },
     {
       "name": "spectric-dialog",
-      "description": "Dialog Element\n\nEvents:\n\n  * `close` {`CustomEvent<unknown>`} - \n\nSlots:\n\n  * `title` {} - sets the title of the dialog attribute/property can also be use for setting the title to a string\n\nAttributes:\n\n  * `open` {`boolean`} - \n\n  * `dismissable` {`boolean`} - \n\n  * `hideBackdrop` {`boolean`} - \n\n  * `title` {`string`} - \n\n  * `closeOnEscape` {`boolean`} - \n\n  * `closeOnOutsideClick` {`boolean`} - \n\nProperties:\n\n  * `styles` {`CSSResultGroup`} - \n\n  * `dialogElement` {`Promise<HTMLDialogElement>`} - \n\n  * `clickHandler` - \n\n  * `_handleKeyDown` - \n\n  * `_onClose` - \n\n  * `open` {`boolean`} - \n\n  * `dismissable` {`boolean`} - \n\n  * `hideBackdrop` {`boolean`} - \n\n  * `title` {`string`} - \n\n  * `closeOnEscape` {`boolean`} - \n\n  * `closeOnOutsideClick` {`boolean`} - ",
+      "description": "Dialog Element\n\nEvents:\n\n  * `close` {`CustomEvent<unknown>`} - \n\nSlots:\n\n  * `title` {} - sets the title of the dialog attribute/property can also be use for setting the title to a string\n\n  * `footer` {} - Space at the bottom of the dialog that you can put buttons or other tools\n\nAttributes:\n\n  * `open` {`boolean`} - \n\n  * `dismissable` {`boolean`} - \n\n  * `hideBackdrop` {`boolean`} - \n\n  * `title` {`string`} - \n\n  * `closeOnEscape` {`boolean`} - \n\n  * `closeOnOutsideClick` {`boolean`} - \n\nProperties:\n\n  * `styles` {`CSSResultGroup`} - \n\n  * `dialogElement` {`Promise<HTMLDialogElement>`} - \n\n  * `clickHandler` - \n\n  * `_handleKeyDown` - \n\n  * `_onClose` - \n\n  * `open` {`boolean`} - \n\n  * `dismissable` {`boolean`} - \n\n  * `hideBackdrop` {`boolean`} - \n\n  * `title` {`string`} - \n\n  * `closeOnEscape` {`boolean`} - \n\n  * `closeOnOutsideClick` {`boolean`} - ",
       "attributes": [
         {
           "name": "open",
@@ -475,7 +475,7 @@
       "attributes": [
         {
           "name": "checked",
-          "description": "`checked` {`boolean | undefined`} - \n\nProperty: checked",
+          "description": "`checked` {`boolean | undefined`} - \n\nProperty: checked\n\nDefault: false",
           "values": []
         },
         {
@@ -1960,7 +1960,7 @@
     },
     {
       "name": "spectric-query",
-      "description": "The Query component will take Opensearch Dashboard Query language and transform it into various outputs\n\nEvents:\n\n  * `change` {`CustomEvent<any>`} - \n\nAttributes:\n\n  * `outputLanguage` {`\"toMongo\" | \"toCql\" | \"toDSL\" | \"AST\"`} - The output of the query in a specific format\n\n  * `value` {`string`} - The value of the input.\n\n  * `fields` {`FieldTypes[]`} - Fields that are used for the auto complete\n\n  * `placeholder` {`string`} - Input placeholder\n\nProperties:\n\n  * `_value` {`string`} - The internal value.\n\n  * `suggestion` {`Suggestion | undefined`} - \n\n  * `completions` {`Completion[]`} - \n\n  * `completionIndex` {`number`} - \n\n  * `_autocomplete` {`PopoverElement | undefined`} - \n\n  * `_asyncAutocomplete` {`Promise<HTMLDivElement>`} - \n\n  * `_input` {`SpectricInput`} - The underlying input element\n\n  * `_parseQuery` - \n\n  * `_selectCompletion` - \n\n  * `_handleArrows` - \n\n  * `uuid` {`string`} - \n\n  * `outputLanguage` {`\"toMongo\" | \"toCql\" | \"toDSL\" | \"AST\"`} - The output of the query in a specific format\n\n  * `value` {`string`} - The value of the input.\n\n  * `fields` {`FieldTypes[]`} - Fields that are used for the auto complete\n\n  * `getValuesForField` - Callback that will provide values for specific fields\n\n  * `placeholder` {`string`} - Input placeholder",
+      "description": "The Query component will take Opensearch Dashboard Query language and transform it into various outputs\n\nEvents:\n\n  * `change` {`CustomEvent<any>`} - \n\nAttributes:\n\n  * `outputLanguage` {`\"toMongo\" | \"toCql\" | \"toDSL\" | \"AST\"`} - The output of the query in a specific format\n\n  * `value` {`string`} - The value of the input.\n\n  * `fields` {`FieldTypes[]`} - Fields that are used for the auto complete\n\n  * `placeholder` {`string`} - Input placeholder\n\nProperties:\n\n  * `valueHelper` - \n\n  * `_value` {`string`} - The internal value.\n\n  * `suggestion` {`Suggestion | undefined`} - \n\n  * `completions` {`Completion[]`} - \n\n  * `completionIndex` {`number`} - \n\n  * `_autocomplete` {`PopoverElement | undefined`} - \n\n  * `_valueHelper` {`PopoverElement | undefined`} - \n\n  * `_asyncAutocomplete` {`Promise<HTMLDivElement>`} - \n\n  * `_input` {`SpectricInput`} - The underlying input element\n\n  * `_checkClickLocation` - \n\n  * `_setValue` - \n\n  * `_showValueHelper` - Value helper is a popover above the query bar that will help users set/change/clear the value if it is complex (like date time or geoshape)\n\n  * `_getSuggestion` - \n\n  * `_parseQuery` - \n\n  * `_selectCompletion` - \n\n  * `_handleArrows` - \n\n  * `uuid` {`string`} - \n\n  * `outputLanguage` {`\"toMongo\" | \"toCql\" | \"toDSL\" | \"AST\"`} - The output of the query in a specific format\n\n  * `value` {`string`} - The value of the input.\n\n  * `fields` {`FieldTypes[]`} - Fields that are used for the auto complete\n\n  * `getValuesForField` - Callback that will provide values for specific fields\n\n  * `placeholder` {`string`} - Input placeholder",
       "attributes": [
         {
           "name": "outputLanguage",
@@ -2050,7 +2050,7 @@
     },
     {
       "name": "spectric-table-cell",
-      "description": "Pagination Element\n\nEvents:\n\n  * `filter` {`CustomEvent<FilterEvent<T>>`} - \n\nProperties:\n\n  * `index` {`number`} - \n\n  * `columns` {`ColumnSettings<T>[]`} - \n\n  * `table` {`SpectricTableElement<T>`} - \n\n  * `overflow` {`DomRenderable`} - \n\n  * `td` {`HTMLTableCellElement`} - \n\n  * `styleRules` {`StyleInfo`} - \n\n  * `_handleFilterOut` - \n\n  * `_handleFilterFor` - \n\n  * `_displayTooltip` - \n\n  * `column` {`ColumnSettings<T>`} - \n\n  * `row` {`T`} - ",
+      "description": "Pagination Element\n\nEvents:\n\n  * `filter` {`CustomEvent<FilterEvent<T>>`} - \n\nProperties:\n\n  * `index` {`number`} - \n\n  * `columns` {`ColumnSettings<T>[]`} - \n\n  * `table` {`SpectricTableElement<T>`} - \n\n  * `overflow` {`DomRenderable`} - \n\n  * `td` {`HTMLTableCellElement`} - \n\n  * `styleRules` {`StyleInfo`} - \n\n  * `_handleFilterOut` - \n\n  * `_handleFilterFor` - \n\n  * `_displayOverflowTooltip` - \n\n  * `column` {`ColumnSettings<T>`} - \n\n  * `row` {`T`} - ",
       "attributes": [
         {
           "name": "onfilter",
@@ -2074,7 +2074,7 @@
     },
     {
       "name": "spectric-table",
-      "description": "React example\n<iframe  width=\"100%\" height=\"400px\" src=\"https://stackblitz.com/edit/react-ts-2ue7azag?ctl=1&embed=1&file=App.tsx&hideExplorer=1&hideNavigation=1\"/>\n\nEvents:\n\n  * `paginationChange` {`CustomEvent<PaginationChangeProps>`} - \n\n  * `change` {`CustomEvent<TableDataOptions<T>>`} - \n\n  * `filter` {`CustomEvent<FilterEvent<T>>`} - \n\n  * `sortChange` {`CustomEvent<ColumnSettings<T>>`} - \n\n  * `selected` {`CustomEvent<T[]>`} - \n\nAttributes:\n\n  * `fontSize` {`number`} - Needed for virtualization\n\n  * `select` {`\"none\" | \"multi\" | \"single\"`} - \n\n  * `sort` {`\"multi\" | \"single\"`} - \n\n  * `rowHeight` {`number`} - Needed for virtualization\n\n  * `sortOrder` {`string[]`} - \n\nProperties:\n\n  * `fontSize` {`number`} - Needed for virtualization\n\n  * `_handlePaginationChange` - \n\n  * `_handleSortChange` - \n\n  * `_handleColumnResize` - \n\n  * `_emitChange` - \n\n  * `__DO_NOT_USE_filter` - \n\n  * `selected` {`T[]`} - \n\n  * `_handleSelectAllChange` - \n\n  * `selectColumnConfig` {`ColumnSettings<T>`} - \n\n  * `data` {`T[]`} - \n\n  * `select` {`\"none\" | \"multi\" | \"single\"`} - \n\n  * `sort` {`\"multi\" | \"single\"`} - \n\n  * `rowHeight` {`number`} - Needed for virtualization\n\n  * `pagination` {`PaginationProps | undefined`} - \n\n  * `columns` {`ColumnSettings<T>[]`} - \n\n  * `sortOrder` {`string[]`} - ",
+      "description": "React example\n<iframe  width=\"100%\" height=\"400px\" src=\"https://stackblitz.com/edit/react-ts-2ue7azag?ctl=1&embed=1&file=App.tsx&hideExplorer=1&hideNavigation=1\"/>\n\nEvents:\n\n  * `paginationChange` {`CustomEvent<PaginationChangeProps>`} - \n\n  * `change` {`CustomEvent<TableDataOptions<T>>`} - \n\n  * `filter` {`CustomEvent<FilterEvent<T>>`} - \n\n  * `sortChange` {`CustomEvent<ColumnSettings<T>>`} - \n\n  * `selected` {`CustomEvent<T[]>`} - \n\nAttributes:\n\n  * `fontSize` {`number`} - Needed for virtualization\n\n  * `select` {`\"none\" | \"multi\" | \"single\"`} - \n\n  * `sort` {`\"multi\" | \"single\"`} - \n\n  * `rowHeight` {`number`} - Needed for virtualization\n\n  * `sortOrder` {`string[]`} - \n\nProperties:\n\n  * `fontSize` {`number`} - Needed for virtualization\n\n  * `_handlePaginationChange` - \n\n  * `_handleSortChange` - \n\n  * `_handleColumnResize` - \n\n  * `_emitChange` - \n\n  * `__DO_NOT_USE_filter` - \n\n  * `selected` {`T[]`} - \n\n  * `_getRowHeight` - \n\n  * `_handleSelectAllChange` - \n\n  * `selectColumnConfig` {`ColumnSettings<T>`} - \n\n  * `data` {`T[]`} - \n\n  * `select` {`\"none\" | \"multi\" | \"single\"`} - \n\n  * `sort` {`\"multi\" | \"single\"`} - \n\n  * `rowHeight` {`number`} - Needed for virtualization\n\n  * `pagination` {`PaginationProps | undefined`} - \n\n  * `columns` {`ColumnSettings<T>[]`} - \n\n  * `sortOrder` {`string[]`} - ",
       "attributes": [
         {
           "name": "fontSize",

package/dist/index.d.ts

@@ -19,6 +19,10 @@ declare const module: {
     InputVariants: typeof components.InputVariants;
     SpectricInput: typeof components.SpectricInput;
     SupportedLanguages: typeof components.SupportedLanguages;
+    toLabelValue: (value: components.LabelValueOrString) => {
+        label: string;
+        value: string;
+    };
     SpectricQuery: typeof components.SpectricQuery;
     nodeTypes: import('./components/query_bar/querylanguage/kuery').NodeTypes;
     SpectricPanel: typeof components.SpectricPanel;