@spectric/ui 0.0.7 → 0.0.9

package/dist/custom-elements.json

@@ -79,7 +79,7 @@
     },
     {
       "name": "spectric-button",
-      "description": "Events:\n\n  * `click` {`CustomEvent<MouseEvent>`} - \n\nAttributes:\n\n  * `variant` {`\"text\" | \"primary\" | \"secondary\"`} - Is this the principal call to action on the page?\n\n  * `backgroundColor` {`string | undefined`} - What background color to use\n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - How large should the button be?\n\n  * `label` {`string | undefined`} - \n\n  * `disabled` {`boolean`} - \n\n  * `danger` {`boolean`} - \n\nProperties:\n\n  * `styles` {`CSSResultGroup | undefined`} - \n\n  * `_onClick` - \n\n  * `variant` {`\"text\" | \"primary\" | \"secondary\"`} - Is this the principal call to action on the page?\n\n  * `backgroundColor` {`string | undefined`} - What background color to use\n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - How large should the button be?\n\n  * `label` {`string | undefined`} - \n\n  * `disabled` {`boolean`} - \n\n  * `danger` {`boolean`} - ",
+      "description": "Events:\n\n  * `click` {`CustomEvent<MouseEvent>`} - \n\nAttributes:\n\n  * `variant` {`\"text\" | \"primary\" | \"secondary\"`} - Is this the principal call to action on the page?\n\n  * `backgroundColor` {`string | undefined`} - What background color to use\n\n  * `size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - How large should the button be?\n\n  * `label` {`string | undefined`} - \n\n  * `disabled` {`boolean`} - \n\n  * `danger` {`boolean`} - \n\n  * `icon` {`boolean`} - \n\n  * `tooltip` {`DomRenderable | undefined`} - \n\n  * `tooltipPosition` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\" | undefined`} - \n\nProperties:\n\n  * `styles` {`CSSResultGroup | undefined`} - \n\n  * `_onClick` - \n\n  * `variant` {`\"text\" | \"primary\" | \"secondary\"`} - Is this the principal call to action on the page?\n\n  * `backgroundColor` {`string | undefined`} - What background color to use\n\n  * `size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - How large should the button be?\n\n  * `label` {`string | undefined`} - \n\n  * `disabled` {`boolean`} - \n\n  * `danger` {`boolean`} - \n\n  * `icon` {`boolean`} - \n\n  * `tooltip` {`DomRenderable | undefined`} - \n\n  * `tooltipPosition` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\" | undefined`} - ",
       "attributes": [
         {
           "name": "variant",
@@ -103,16 +103,25 @@
         },
         {
           "name": "size",
-          "description": "`size` {`\"small\" | \"medium\" | \"large\"`} - How large should the button be?\n\nProperty: size\n\nDefault: large",
+          "description": "`size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - How large should the button be?\n\nProperty: size\n\nDefault: small",
           "values": [
             {
-              "name": "small"
+              "name": "large"
             },
             {
               "name": "medium"
             },
             {
-              "name": "large"
+              "name": "small"
+            },
+            {
+              "name": "xsmall"
+            },
+            {
+              "name": "xxsmall"
+            },
+            {
+              "name": "tiny"
             }
           ]
         },
@@ -131,6 +140,37 @@
           "description": "`danger` {`boolean`} - \n\nProperty: danger\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "icon",
+          "description": "`icon` {`boolean`} - \n\nProperty: icon\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "tooltip",
+          "description": "`tooltip` {`DomRenderable | undefined`} - \n\nProperty: tooltip",
+          "values": []
+        },
+        {
+          "name": "tooltipPosition",
+          "description": "`tooltipPosition` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\" | undefined`} - \n\nProperty: tooltipPosition\n\nDefault: right",
+          "values": [
+            {
+              "name": "top"
+            },
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "mouse"
+            }
+          ]
+        },
         {
           "name": "onclick",
           "description": "`click` {`CustomEvent<MouseEvent>`} - "
@@ -392,8 +432,13 @@
     },
     {
       "name": "spectric-input",
-      "description": "Events:\n\n  * `change` {`Event`} - \n\nAttributes:\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\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\"`} - 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>`} - 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  * `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\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\"`} - 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>`} - 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\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\"`} - 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>`} - 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  * `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\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\"`} - 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>`} - 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.",
       "attributes": [
+        {
+          "name": "checked",
+          "description": "`checked` {`boolean | undefined`} - \n\nProperty: checked",
+          "values": []
+        },
         {
           "name": "hidePasswordLabel",
           "description": "`hidePasswordLabel` {`string`} - \"Hide password\" tooltip text on password visibility toggle\n\nProperty: hidePasswordLabel\n\nDefault: Hide"
@@ -409,7 +454,7 @@
         },
         {
           "name": "variant",
-          "description": "`variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\"`} - Input type\n\nProperty: variant\n\nDefault: text",
+          "description": "`variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\"`} - Input type\n\nProperty: variant\n\nDefault: text",
           "values": [
             {
               "name": "number"
@@ -440,6 +485,9 @@
             },
             {
               "name": "password"
+            },
+            {
+              "name": "checkbox"
             }
           ]
         },
@@ -1814,6 +1862,57 @@
         }
       ]
     },
+    {
+      "name": "spectric-pagination",
+      "description": "Pagination Element\n\nEvents:\n\n  * `change` {`CustomEvent<PaginationChangeProps>`} - \n\nAttributes:\n\n  * `size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - Size of the pagination buttons\n\n  * `totalItems` {`number | undefined`} - \n\n  * `pageSizeOptions` {`number[]`} - \n\n  * `page` {`number`} - \n\n  * `pageSize` {`number`} - \n\nProperties:\n\n  * `_handlePageUp` - \n\n  * `_handlePageDown` - \n\n  * `_handleSizeChange` - \n\n  * `_emitChange` - \n\n  * `size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - Size of the pagination buttons\n\n  * `totalItems` {`number | undefined`} - \n\n  * `pageSizeOptions` {`number[]`} - \n\n  * `page` {`number`} - \n\n  * `pageSize` {`number`} - ",
+      "attributes": [
+        {
+          "name": "size",
+          "description": "`size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - Size of the pagination buttons\n\nProperty: size\n\nDefault: xsmall",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "xsmall"
+            },
+            {
+              "name": "xxsmall"
+            },
+            {
+              "name": "tiny"
+            }
+          ]
+        },
+        {
+          "name": "totalItems",
+          "description": "`totalItems` {`number | undefined`} - \n\nProperty: totalItems",
+          "values": []
+        },
+        {
+          "name": "pageSizeOptions",
+          "description": "`pageSizeOptions` {`number[]`} - \n\nProperty: pageSizeOptions\n\nDefault: 10,20,50,100,1000"
+        },
+        {
+          "name": "page",
+          "description": "`page` {`number`} - \n\nProperty: page\n\nDefault: 1"
+        },
+        {
+          "name": "pageSize",
+          "description": "`pageSize` {`number`} - \n\nProperty: pageSize\n\nDefault: 10"
+        },
+        {
+          "name": "onchange",
+          "description": "`change` {`CustomEvent<PaginationChangeProps>`} - "
+        }
+      ]
+    },
     {
       "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` {`HTMLDivElement | 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",
@@ -1899,9 +1998,104 @@
         }
       ]
     },
+    {
+      "name": "spectric-table-body",
+      "description": "Table Body Element\n\nProperties:\n\n  * `table` {`TableElement<T>`} - \n\n  * `columns` {`ColumnSettings<T>[]`} - \n\n  * `data` {`T[]`} - ",
+      "attributes": []
+    },
+    {
+      "name": "spectric-table-cell",
+      "description": "Pagination Element\n\nEvents:\n\n  * `filter` {`CustomEvent<FilterEvent<T>>`} - \n\nProperties:\n\n  * `columns` {`ColumnSettings<T>[]`} - \n\n  * `table` {`TableElement<T>`} - \n\n  * `td` {`HTMLTableCellElement`} - \n\n  * `_handleFilterOut` - \n\n  * `_handleFilterFor` - \n\n  * `styleRules` {`CSSStyleDeclaration`} - \n\n  * `column` {`ColumnSettings<T>`} - \n\n  * `row` {`T`} - ",
+      "attributes": [
+        {
+          "name": "onfilter",
+          "description": "`filter` {`CustomEvent<FilterEvent<T>>`} - "
+        }
+      ]
+    },
+    {
+      "name": "spectric-table-header",
+      "description": "Pagination Element\n\nProperties:\n\n  * `columns` {`ColumnSettings<T>[]`} - ",
+      "attributes": []
+    },
+    {
+      "name": "spectric-table",
+      "description": "Table Element\n\nThe table element is a bit more complex and the column settings and data can only be set through the properties\n\n\nReact\n\n``` tsx\n<spectric-table data={[{col1:1}]} columns={[{key:\"col1\",}]} ></spectric-table>\n```\n\nJavascript\n\n``` js\ntable = document.createElement(\"spectric-table\")\ntable.data = [{col1:1}]\ntable.columns = [{key:\"col1\",}]\n```\n\nHTML \n\n``` html\n<spectric-table id=\"table\"></spectric-table>\n<script>\ndocument.querySelector(\"#table\")\ntable.data = [{col1:1}]\ntable.columns = [{key:\"col1\",}]\n</script>\n```\n\nEvents:\n\n  * `change` {`CustomEvent<{ pagination?: PaginationChangeProps | undefined; }>`} - \n\n  * `filter` {`CustomEvent<FilterEvent<T>>`} - \n\n  * `select` {`CustomEvent<T[]>`} - \n\nAttributes:\n\n  * `select` {`TableSelectOptions | undefined`} - \n\nProperties:\n\n  * `_handlePaginationChange` - \n\n  * `_emitChange` - \n\n  * `__DO_NOT_USE_filter` - \n\n  * `selected` {`T[]`} - \n\n  * `_handleSelectAllChange` - \n\n  * `pagination` {`PaginationProps | undefined`} - \n\n  * `columns` {`ColumnSettings<T>[]`} - \n\n  * `data` {`T[]`} - \n\n  * `select` {`TableSelectOptions | undefined`} - ",
+      "attributes": [
+        {
+          "name": "select",
+          "description": "`select` {`TableSelectOptions | undefined`} - \n\nProperty: select",
+          "values": [
+            {
+              "name": "multi"
+            },
+            {
+              "name": "single"
+            }
+          ]
+        },
+        {
+          "name": "onchange",
+          "description": "`change` {`CustomEvent<{ pagination?: PaginationChangeProps | undefined; }>`} - "
+        },
+        {
+          "name": "onfilter",
+          "description": "`filter` {`CustomEvent<FilterEvent<T>>`} - "
+        },
+        {
+          "name": "onselect",
+          "description": "`select` {`CustomEvent<T[]>`} - "
+        }
+      ]
+    },
+    {
+      "name": "spectric-tooltip",
+      "description": "Spectric tooltip will add a tooltip to any container\n\nAttributes:\n\n  * `delay` {`number`} - How long you need to hover before the tooltip displays\n\n  * `animationDuration` {`number`} - How long the fade in animation should run\n\n  * `text` {`DomRenderable`} - Tooltip contents\n\n  * `position` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\"`} - Where to anchor the tooltip\n\n  * `maxWidth` {`number | undefined`} - Sets a max width for the contents (default:300) you can disable this by setting to 0 or -1\n\nProperties:\n\n  * `portalElement` {`HTMLDivElement`} - \n\n  * `mouseLocation` {`{ left: number; top: number; } | undefined`} - \n\n  * `styles` {`CSSResultGroup | undefined`} - \n\n  * `timer` {`number | undefined`} - \n\n  * `open` {`boolean`} - \n\n  * `mouseframe` {`number | undefined`} - \n\n  * `target` {`HTMLElement | null`} - \n\n  * `_getMousePosition` - \n\n  * `_hideTooltip` - \n\n  * `showToolTip` - \n\n  * `applyStyle` - \n\n  * `positionTooltip` - \n\n  * `delay` {`number`} - How long you need to hover before the tooltip displays\n\n  * `animationDuration` {`number`} - How long the fade in animation should run\n\n  * `text` {`DomRenderable`} - Tooltip contents\n\n  * `position` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\"`} - Where to anchor the tooltip\n\n  * `maxWidth` {`number | undefined`} - Sets a max width for the contents (default:300) you can disable this by setting to 0 or -1\n\n  * `portalTarget` {`HTMLElement`} - Container the tool tip will be attached to. (default:document.body)\n\n  * `triggerTarget` {`HTMLElement | undefined`} - The element that triggers the tooltip. (default:node.parentElement) This is used for special cases like in the shadow dom if you want to target a host element instead of the immediate parent element",
+      "attributes": [
+        {
+          "name": "delay",
+          "description": "`delay` {`number`} - How long you need to hover before the tooltip displays\n\nProperty: delay\n\nDefault: 100"
+        },
+        {
+          "name": "animationDuration",
+          "description": "`animationDuration` {`number`} - How long the fade in animation should run\n\nProperty: animationDuration\n\nDefault: 0"
+        },
+        {
+          "name": "text",
+          "description": "`text` {`DomRenderable`} - Tooltip contents\n\nProperty: text\n\nDefault: ",
+          "values": []
+        },
+        {
+          "name": "position",
+          "description": "`position` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\"`} - Where to anchor the tooltip\n\nProperty: position\n\nDefault: right",
+          "values": [
+            {
+              "name": "top"
+            },
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "mouse"
+            }
+          ]
+        },
+        {
+          "name": "maxWidth",
+          "description": "`maxWidth` {`number | undefined`} - Sets a max width for the contents (default:300) you can disable this by setting to 0 or -1\n\nProperty: maxWidth\n\nDefault: 300",
+          "values": []
+        }
+      ]
+    },
     {
       "name": "spectric-storybook-example-content",
-      "description": "Attributes:\n\n  * `frameWidth` {`number`} - \n\nProperties:\n\n  * `frameWidth` {`number`} - \n\n  * `dialogOpen` {`boolean`} - ",
+      "description": "Attributes:\n\n  * `frameWidth` {`number`} - \n\nProperties:\n\n  * `frameWidth` {`number`} - \n\n  * `query` {`SpectricQuery`} - \n\n  * `dialogOpen` {`boolean`} - \n\n  * `tableData` {`TestData[]`} - \n\n  * `pagination` {`{ page: number; pageSize: number; size: string; totalItems: number; }`} - \n\n  * `_handleFilter` - \n\n  * `_handlePaginationChange` - ",
       "attributes": [
         {
           "name": "frameWidth",