@spectric/ui 0.0.25 → 0.0.26

package/dist/components/input.d.ts

@@ -64,6 +64,7 @@ export interface InputProps {
      * The sets the autocomplete for the input.
      */
     autocomplete?: HTMLInputElement["autocomplete"];
+    spellcheck?: HTMLInputElement["spellcheck"];
 }
 export declare class SpectricInput extends LitElement implements InputProps {
     checked?: boolean;
@@ -121,6 +122,10 @@ export declare class SpectricInput extends LitElement implements InputProps {
      * The sets the autocomplete for the input.
      */
     autocomplete: HTMLInputElement["autocomplete"];
+    /**
+     * The sets the autocomplete for the input.
+     */
+    spellcheck: HTMLInputElement["spellcheck"];
     get selectionStart(): number | null;
     /**
      * The value of the input.

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

@@ -27,7 +27,7 @@ export declare enum SupportedLanguages {
     AST = "AST"
 }
 type SupportedLanguagesTypes = `${SupportedLanguages}`;
-interface QueryEventMap {
+export interface QueryEventMap {
     change: (event: CustomEvent<string | kuery.KueryNode | JsonObject>) => void;
 }
 export interface IQueryProps {
@@ -82,10 +82,10 @@ export declare class SpectricQuery extends LitElement implements IQueryProps {
      * The value of the input.
      */
     value: string;
-    outputLanguage: SupportedLanguagesTypes;
+    outputLanguage?: SupportedLanguagesTypes;
     private completions;
     private completionIndex;
-    fields: FieldTypes[];
+    fields?: FieldTypes[];
     _autocomplete?: PopoverElement;
     _valueHelper?: PopoverElement;
     _asyncAutocomplete: Promise<HTMLDivElement>;
@@ -104,7 +104,7 @@ export declare class SpectricQuery extends LitElement implements IQueryProps {
     _parseQuery: (e?: InputEvent | undefined) => void;
     getValuesForField: (field: string, text: string) => Promise<LabelValuesOrStrings>;
     autoComplete(suggestion: Suggestion): Promise<void>;
-    protected updated(changed: PropertyValues): void;
+    protected update(changed: PropertyValues): void;
     _selectCompletion: () => Promise<void>;
     _handleArrows: (e: KeyboardEvent) => void;
     protected render(): import('lit-html').TemplateResult<1>;

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

@@ -5,7 +5,7 @@ import { FilterEvent } from './cell';
 import { ButtonSizesTypes } from '../Button';
 export declare const TableElementTag = "spectric-table";
 export type { TableProps, TableEvents };
-export type DomRenderable = HTMLElement | TemplateResult | string | number | null | undefined;
+export type DomRenderable = HTMLElement | TemplateResult | TemplateResult<any>[] | string | number | null | undefined;
 export declare enum TableSelectOptions {
     multi = "multi",
     single = "single",
@@ -92,6 +92,10 @@ export declare class SpectricTableElement<T = any> extends LitElement implements
      * Needed for virtualization
      */
     fontSize: number;
+    /**
+     * Function that allows you to set the row class name programatically
+     */
+    getRowClass: (_row: T, index: number) => "" | "odd";
     protected cellActionButtonSize: ButtonSizesTypes;
     getCellActionButtonSize(): "small" | "large" | "medium" | "xsmall" | "xxsmall" | "tiny";
     static getDefaultDataSorterAndPaginatior<T>(data: T[]): (props: TableDataOptions<T>) => T[];

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

@@ -1,3 +1,4 @@
+import { PropertyValues } from 'lit';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 import { ColumnSettings, SpectricTableElement } from './table';
 import { DisposableElement } from '../../classes/DisposibleElement';
@@ -18,7 +19,7 @@ export declare class TableVirtualBodyElement<T> extends DisposableElement implem
     table: SpectricTableElement<T>;
     columnsMeasured: boolean;
     constructor();
-    protected updated(): void;
+    protected update(changedProperties: PropertyValues): void;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     protected render(): unknown;
 }

package/dist/custom-elements.json

@@ -471,7 +471,7 @@
     },
     {
       "name": "spectric-input",
-      "description": "Events:\n\n  * `change` {`Event`} - \n\nAttributes:\n\n  * `checked` {`boolean | undefined`} - \n\n  * `hidePasswordLabel` {`string`} - \"Hide password\" tooltip text on password visibility toggle\n\n  * `showPasswordLabel` {`string`} - \"Show password\" tooltip text on password visibility toggle\n\n  * `value` {`string | number | boolean`} - The value of the input.\n\n  * `variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"popup-date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\" | \"range\"`} - Input type\n\n  * `label` {`string`} - Label to display above the input\n\n  * `placeholder` {`string`} - placeholder text to display\n\n  * `disabled` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `helperText` {`string`} - The helper text.\n\n  * `invalid` {`boolean`} - Specify if the currently value is invalid.\n\n  * `invalidText` {`string | TemplateResult<1> | undefined`} - Message which is displayed if the value is invalid.\n\n  * `maxCount` {`number`} - Max character count allowed for input. This is needed in order for enableCounter to display\n\n  * `required` {`boolean`} - Boolean property to set the required status\n\n  * `showPasswordVisibilityToggle` {`boolean`} - Boolean property to render password visibility toggle\n\n  * `name` {`string`} - Name for the input used for form data events //TODO make sure this works\n\n  * `pattern` {`string`} - Pattern to validate the input against for HTML validity checking\n\n  * `autocomplete` {`AutoFill`} - The sets the autocomplete for the input.\n\nProperties:\n\n  * `checked` {`boolean | undefined`} - \n\n  * `size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\" | undefined`} - \n\n  * `files` {`FileList | null`} - \n\n  * `hidePasswordLabel` {`string`} - \"Hide password\" tooltip text on password visibility toggle\n\n  * `showPasswordLabel` {`string`} - \"Show password\" tooltip text on password visibility toggle\n\n  * `_value` {`string | number | boolean`} - The internal value.\n\n  * `_showPassword` {`boolean`} - \n\n  * `selectionStart` {`number | null`} - \n\n  * `value` {`string | number | boolean`} - The value of the input.\n\n  * `_handleInput` - Handles `oninput` event on the `<input>`.\n\n  * `_input` {`HTMLInputElement | undefined`} - The underlying input element\n\n  * `handleTogglePasswordVisibility` - \n\n  * `variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"popup-date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\" | \"range\"`} - Input type\n\n  * `label` {`string`} - Label to display above the input\n\n  * `placeholder` {`string`} - placeholder text to display\n\n  * `disabled` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `helperText` {`string`} - The helper text.\n\n  * `invalid` {`boolean`} - Specify if the currently value is invalid.\n\n  * `invalidText` {`string | TemplateResult<1> | undefined`} - Message which is displayed if the value is invalid.\n\n  * `maxCount` {`number`} - Max character count allowed for input. This is needed in order for enableCounter to display\n\n  * `required` {`boolean`} - Boolean property to set the required status\n\n  * `showPasswordVisibilityToggle` {`boolean`} - Boolean property to render password visibility toggle\n\n  * `name` {`string`} - Name for the input used for form data events //TODO make sure this works\n\n  * `pattern` {`string`} - Pattern to validate the input against for HTML validity checking\n\n  * `autocomplete` {`AutoFill`} - The sets the autocomplete for the input.",
+      "description": "Events:\n\n  * `change` {`Event`} - \n\nAttributes:\n\n  * `checked` {`boolean | undefined`} - \n\n  * `hidePasswordLabel` {`string`} - \"Hide password\" tooltip text on password visibility toggle\n\n  * `showPasswordLabel` {`string`} - \"Show password\" tooltip text on password visibility toggle\n\n  * `value` {`string | number | boolean`} - The value of the input.\n\n  * `variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"popup-date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\" | \"range\"`} - Input type\n\n  * `label` {`string`} - Label to display above the input\n\n  * `placeholder` {`string`} - placeholder text to display\n\n  * `disabled` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `helperText` {`string`} - The helper text.\n\n  * `invalid` {`boolean`} - Specify if the currently value is invalid.\n\n  * `invalidText` {`string | TemplateResult<1> | undefined`} - Message which is displayed if the value is invalid.\n\n  * `maxCount` {`number`} - Max character count allowed for input. This is needed in order for enableCounter to display\n\n  * `required` {`boolean`} - Boolean property to set the required status\n\n  * `showPasswordVisibilityToggle` {`boolean`} - Boolean property to render password visibility toggle\n\n  * `name` {`string`} - Name for the input used for form data events //TODO make sure this works\n\n  * `pattern` {`string`} - Pattern to validate the input against for HTML validity checking\n\n  * `autocomplete` {`AutoFill`} - The sets the autocomplete for the input.\n\n  * `spellcheck` {`boolean`} - The sets the autocomplete for the input.\n\nProperties:\n\n  * `checked` {`boolean | undefined`} - \n\n  * `size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\" | undefined`} - \n\n  * `files` {`FileList | null`} - \n\n  * `hidePasswordLabel` {`string`} - \"Hide password\" tooltip text on password visibility toggle\n\n  * `showPasswordLabel` {`string`} - \"Show password\" tooltip text on password visibility toggle\n\n  * `_value` {`string | number | boolean`} - The internal value.\n\n  * `_showPassword` {`boolean`} - \n\n  * `selectionStart` {`number | null`} - \n\n  * `value` {`string | number | boolean`} - The value of the input.\n\n  * `_handleInput` - Handles `oninput` event on the `<input>`.\n\n  * `_input` {`HTMLInputElement | undefined`} - The underlying input element\n\n  * `handleTogglePasswordVisibility` - \n\n  * `variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"popup-date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\" | \"range\"`} - Input type\n\n  * `label` {`string`} - Label to display above the input\n\n  * `placeholder` {`string`} - placeholder text to display\n\n  * `disabled` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `helperText` {`string`} - The helper text.\n\n  * `invalid` {`boolean`} - Specify if the currently value is invalid.\n\n  * `invalidText` {`string | TemplateResult<1> | undefined`} - Message which is displayed if the value is invalid.\n\n  * `maxCount` {`number`} - Max character count allowed for input. This is needed in order for enableCounter to display\n\n  * `required` {`boolean`} - Boolean property to set the required status\n\n  * `showPasswordVisibilityToggle` {`boolean`} - Boolean property to render password visibility toggle\n\n  * `name` {`string`} - Name for the input used for form data events //TODO make sure this works\n\n  * `pattern` {`string`} - Pattern to validate the input against for HTML validity checking\n\n  * `autocomplete` {`AutoFill`} - The sets the autocomplete for the input.\n\n  * `spellcheck` {`boolean`} - The sets the autocomplete for the input.",
       "attributes": [
         {
           "name": "checked",
@@ -1901,6 +1901,11 @@
             }
           ]
         },
+        {
+          "name": "spellcheck",
+          "description": "`spellcheck` {`boolean`} - The sets the autocomplete for the input.\n\nProperty: spellcheck\n\nDefault: true",
+          "valueSet": "v"
+        },
         {
           "name": "onchange",
           "description": "`change` {`Event`} - "
@@ -1960,11 +1965,11 @@
     },
     {
       "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  * `valueHelper` - \n\n  * `highlightedSyntax` - \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",
+      "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\" | undefined`} - The output of the query in a specific format\n\n  * `value` {`string`} - The value of the input.\n\n  * `fields` {`FieldTypes[] | undefined`} - Fields that are used for the auto complete\n\n  * `placeholder` {`string`} - Input placeholder\n\nProperties:\n\n  * `valueHelper` - \n\n  * `highlightedSyntax` - \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\" | undefined`} - The output of the query in a specific format\n\n  * `value` {`string`} - The value of the input.\n\n  * `fields` {`FieldTypes[] | undefined`} - 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",
-          "description": "`outputLanguage` {`\"toMongo\" | \"toCql\" | \"toDSL\" | \"AST\"`} - The output of the query in a specific format\n\nProperty: outputLanguage\n\nDefault: AST",
+          "description": "`outputLanguage` {`\"toMongo\" | \"toCql\" | \"toDSL\" | \"AST\" | undefined`} - The output of the query in a specific format\n\nProperty: outputLanguage\n\nDefault: AST",
           "values": [
             {
               "name": "toMongo"
@@ -1986,7 +1991,8 @@
         },
         {
           "name": "fields",
-          "description": "`fields` {`FieldTypes[]`} - Fields that are used for the auto complete\n\nProperty: fields\n\nDefault: "
+          "description": "`fields` {`FieldTypes[] | undefined`} - Fields that are used for the auto complete\n\nProperty: fields\n\nDefault: ",
+          "values": []
         },
         {
           "name": "placeholder",
@@ -2074,7 +2080,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  * `cellActionButtonSize` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - \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[]`} - ",
+      "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  * `getRowClass` - Function that allows you to set the row class name programatically\n\n  * `cellActionButtonSize` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - \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",