@xplortech/apollo-core 2.4.3 → 2.5.0

package/dist/docs/xpl-choicelist/readme.md

@@ -0,0 +1,43 @@
+# xpl-choicelist
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute     | Description                                                                                                                                                                                                                                                 | Type       | Default     |
+| ------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ----------- |
+| `choices`     | --            | An array of choices to be displayed in the list. Each choice should be an object with keys: - `checked` [boolean] - whether to pre-check or not - `children` [Choice[]] - an array of child choices (recursive) - `description` [string] - `label` [string] | `Choice[]` | `undefined` |
+| `description` | `description` | Descriptive text to be displayed above the choice-list.                                                                                                                                                                                                     | `string`   | `undefined` |
+| `heading`     | `heading`     | The title text to be displayed above the choice-list.                                                                                                                                                                                                       | `string`   | `undefined` |
+| `multi`       | `multi`       | Whether the user can select more than one choice (true) or only a single choice (false). Corresponds to checkboxes vs. radio buttons.                                                                                                                       | `boolean`  | `undefined` |
+| `name`        | `name`        | The `name` to be associated with form data.                                                                                                                                                                                                                 | `string`   | `uuid()`    |
+| `styled`      | `styled`      | If `true`, will include borders around the list and between individual choices.                                                                                                                                                                             | `boolean`  | `undefined` |
+
+
+## Events
+
+| Event                   | Description                                                                                                                                                                                                                                                                                                               | Type                                                      |
+| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
+| `choicelistChange`      | An event that is emitted when the selected value changes. The event detail will be an array of booleans, where each boolean corresponds to the checked state of the choices.                                                                                                                                              | `CustomEvent<boolean[]>`                                  |
+| `choicelistValueChange` | An event that is emitted when the selected value changes. The event detail will be an array if the multi prop is true, otherwise it will be a single value. The value will be string if value is provided for choices, otherwise it will be a boolean.  NOTE: This will only be emitted if choices have a value property. | `CustomEvent<(string \| boolean)[] \| boolean \| string>` |
+
+
+## Dependencies
+
+### Depends on
+
+- [xpl-checkbox](../xpl-checkbox)
+- [xpl-radio](../xpl-radio)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-choicelist --> xpl-checkbox
+  xpl-choicelist --> xpl-radio
+  style xpl-choicelist fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-content-area/readme.md

@@ -0,0 +1,17 @@
+# xpl-content-area
+
+The `<xpl-content-area>` sets up the area for the main content of the page. This component renders a `<main>` element with an unnamed `<slot>`, and should not be combined with another `<main>` in the same page.
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description | Type                           | Default  |
+| -------- | --------- | ----------- | ------------------------------ | -------- |
+| `size`   | `size`    |             | `"full" \| "narrow" \| "wide"` | `'wide'` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-dashboard/readme.md

@@ -0,0 +1,10 @@
+# xpl-dashboard
+
+The XPL-Dashboard component is a code-only utility component for responsive layouts using the XPL-Data Card component. 
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-data-card/readme.md

@@ -0,0 +1,54 @@
+# xpl-data-card
+
+The `icon` and `smallStatIcon` properties accept icon names as strings. See [xpl-icon available icons](../xpl-icon/ICONS.md) for the complete list.
+
+---
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property               | Attribute                 | Description                                                                                                                                                                                                                                                                                                                                      | Type                                    | Default     |
+| ---------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------- | ----------- |
+| `detail`               | `detail`                  | An optional field that typically describes or modifies the small stat                                                                                                                                                                                                                                                                            | `string`                                | `undefined` |
+| `icon`                 | `icon`                    | An optional icon leading the header. Uses <xpl-icon /> components and should reinforce the understanding of the smallStat metric shown.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.                                                                                                                              | `string`                                | `undefined` |
+| `leadingIcon`          | `leading-icon`            | Whether to display the icon or not.                                                                                                                                                                                                                                                                                                              | `boolean`                               | `true`      |
+| `link`                 | `link`                    | Whether the card is a link                                                                                                                                                                                                                                                                                                                       | `boolean`                               | `undefined` |
+| `name`                 | `name`                    | Name Term                                                                                                                                                                                                                                                                                                                                        | `string`                                | `undefined` |
+| `shortStat`            | `short-stat`              | Detail, stat, or value to be displayed in short format. Will be rendered when card is smaller than 441px.                                                                                                                                                                                                                                        | `string`                                | `undefined` |
+| `smallStat`            | `small-stat`              | An Optional stat further enhancing the main metric of the card.                                                                                                                                                                                                                                                                                  | `string`                                | `undefined` |
+| `smallStatIcon`        | `small-stat-icon`         | An optional icon leading the small stat. Uses <xpl-icon> components and should reinforce the understanding of the smallStat metric shown.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.                                                                                                                            | `string`                                | `undefined` |
+| `smallStatVariant`     | `small-stat-variant`      | set a variant that changes the color of the small stat based on the following rules:   If trend is positive and greater than 0.5% color is green and up-right arrow is used   If the trend is between -0.5% and 0.5% then its neutral the color is gray   If the trend is negative less than -0.5% the color is red and down right arrow is used | `"negative" \| "neutral" \| "positive"` | `undefined` |
+| `stat`                 | `stat`                    | Detail, stat, or value to be displayed. Will be rendered when card is larger than 441px. Will also appear in the tooltip when shortStat is shown.                                                                                                                                                                                                | `string`                                | `undefined` |
+| `tooltipTextSmallStat` | `tooltip-text-small-stat` | An optional field for tooltip text of small stat                                                                                                                                                                                                                                                                                                 | `string`                                | `''`        |
+| `tooltipTextStat`      | `tooltip-text-stat`       | An optional field for tooltip text of stat                                                                                                                                                                                                                                                                                                       | `string`                                | `''`        |
+| `variant`              | `variant`                 | Color variant. Used to set the icon color and background.                                                                                                                                                                                                                                                                                        | `"primary" \| "secondary"`              | `undefined` |
+
+
+## Slots
+
+| Slot              | Description                                                                                                                                |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `"graph-content"` | Content that is shown on the right-side of the card. Generally used for supplemental data visualizations for the data-card                 |
+| `"title"`         | The title for the card. This slot should be used as a replacement for the name field. Used to define a title and tooltip for the data-card |
+
+
+## Dependencies
+
+### Depends on
+
+- [xpl-icon](../xpl-icon)
+- [xpl-tooltip](../xpl-tooltip)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-data-card --> xpl-icon
+  xpl-data-card --> xpl-tooltip
+  style xpl-data-card fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-divider/readme.md

@@ -0,0 +1,30 @@
+# xpl-divider
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description                                                                                                                             | Type     | Default     |
+| -------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------- |
+| `tier`   | `tier`    | The tier should be an integer between 0 and 3. Tier 0 dividers do not display text, and 1-3 increase in size with each increasing tier. | `number` | `undefined` |
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-slideout](../xpl-slideout)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-slideout --> xpl-divider
+  style xpl-divider fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-dropdown/readme.md

@@ -0,0 +1,80 @@
+# xpl-dropdown
+
+A Dropdown is a menu with a list of actions a user can take. Use a dropdown when you want to present a list of actions in a limited space. Dropdowns are single-select ***actions***, can be presented in groups, and can be triggered by other elements such as a button, icon, text etc. 
+A selection within a dropdown does not change the parent trigger.
+
+***If you want to present a list of **options** a user can select, or multi-select options, please use [XPL-Select](https://xplor-apollo.herokuapp.com/?path=/story/components-select--select).***
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property          | Attribute           | Description                                                                         | Type                                                           | Default     |
+| ----------------- | ------------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------- | ----------- |
+| `anchorToTrigger` | `anchor-to-trigger` | whether to anchor the dropdown to the trigger element, requires triggerId to be set | `boolean`                                                      | `false`     |
+| `closeOnSelect`   | `close-on-select`   | options that are listed                                                             | `boolean`                                                      | `true`      |
+| `isOpen`          | `open`              | text to display as heading                                                          | `boolean`                                                      | `false`     |
+| `mode`            | `mode`              | constant representing number of options that can be selected                        | `"multi" \| "single"`                                          | `'single'`  |
+| `options`         | --                  | options that are listed                                                             | `Partial<DropdownOption & DropdownOptionGroup>[]`              | `undefined` |
+| `selectOnFocus`   | `select-on-focus`   | whether selection should be made when focusing on interactive element               | `boolean`                                                      | `false`     |
+| `selectedValues`  | `selected-values`   | The currently selected value(s) in the dropdown.                                    | `string \| string[]`                                           | `undefined` |
+| `triggerId`       | `trigger-id`        | the id for the element that triggers the open state                                 | `string`                                                       | `undefined` |
+| `update`          | --                  | call back function invoked when a selection is made                                 | `(e: any, { component }: { component: XplDropdown; }) => void` | `undefined` |
+
+
+## Events
+
+| Event          | Description                                          | Type                   |
+| -------------- | ---------------------------------------------------- | ---------------------- |
+| `isOpenChange` | Emitted when the open state of the dropdown changes. | `CustomEvent<boolean>` |
+
+
+## Methods
+
+### `handleSelect(e: any, { component }: { component: XplDropdownOption; }) => Promise<void>`
+
+called on dropdown option click and keydown events to update isSelected states
+
+#### Parameters
+
+| Name  | Type                                | Description |
+| ----- | ----------------------------------- | ----------- |
+| `e`   | `any`                               |             |
+| `__1` | `{ component: XplDropdownOption; }` |             |
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-input-time](../xpl-input/xpl-input-time)
+ - [xpl-select](../xpl-select)
+
+### Depends on
+
+- [xpl-dropdown-group](xpl-dropdown-group)
+- [xpl-dropdown-option](xpl-dropdown-option)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-dropdown --> xpl-dropdown-group
+  xpl-dropdown --> xpl-dropdown-option
+  xpl-dropdown-group --> xpl-dropdown-group
+  xpl-dropdown-group --> xpl-dropdown-option
+  xpl-dropdown-group --> xpl-dropdown-heading
+  xpl-input-time --> xpl-dropdown
+  xpl-select --> xpl-dropdown
+  style xpl-dropdown fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-dropdown/xpl-dropdown-group/readme.md

@@ -0,0 +1,39 @@
+# xpl-dropdown-group
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property    | Attribute | Description                | Type                                              | Default     |
+| ----------- | --------- | -------------------------- | ------------------------------------------------- | ----------- |
+| `groupName` | `label`   | text to display as heading | `string`                                          | `undefined` |
+| `options`   | --        | options that are listed    | `Partial<DropdownOption & DropdownOptionGroup>[]` | `undefined` |
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-dropdown](..)
+ - [xpl-dropdown-group](.)
+
+### Depends on
+
+- [xpl-dropdown-group](.)
+- [xpl-dropdown-option](../xpl-dropdown-option)
+- [xpl-dropdown-heading](../xpl-dropdown-heading)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-dropdown-group --> xpl-dropdown-group
+  xpl-dropdown --> xpl-dropdown-group
+  style xpl-dropdown-group fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-dropdown/xpl-dropdown-heading/readme.md

@@ -0,0 +1,30 @@
+# xpl-dropdown-heading
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description                | Type     | Default     |
+| -------- | --------- | -------------------------- | -------- | ----------- |
+| `label`  | `label`   | text to display as heading | `string` | `undefined` |
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-dropdown-group](../xpl-dropdown-group)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-dropdown-group --> xpl-dropdown-heading
+  style xpl-dropdown-heading fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-dropdown/xpl-dropdown-option/readme.md

@@ -0,0 +1,36 @@
+# xpl-dropdown-option
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property     | Attribute  | Description                                                                               | Type      | Default     |
+| ------------ | ---------- | ----------------------------------------------------------------------------------------- | --------- | ----------- |
+| `isDisabled` | `disabled` | whether option is disabled                                                                | `boolean` | `undefined` |
+| `isSelected` | `selected` | whether option is selected                                                                | `boolean` | `undefined` |
+| `label`      | `label`    | text to display for option                                                                | `string`  | `undefined` |
+| `subtitle`   | `subtitle` | optional subtitle text to display below label                                             | `string`  | `undefined` |
+| `value`      | `value`    | The selected options value to be submitted with the form, should this option be selected. | `string`  | `undefined` |
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-dropdown](..)
+ - [xpl-dropdown-group](../xpl-dropdown-group)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-dropdown --> xpl-dropdown-option
+  xpl-dropdown-group --> xpl-dropdown-option
+  style xpl-dropdown-option fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-dynamic-table/readme.md

@@ -0,0 +1,19 @@
+# xpl-dynamic-table
+
+> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.
+
+The Dynamic Table is a rich content table that can accommodate multiple types of data. 
+
+<!-- Auto Generated Below -->
+
+
+## Events
+
+| Event                     | Description                                        | Type                    |
+| ------------------------- | -------------------------------------------------- | ----------------------- |
+| `selectedItemCountChange` | Emitted when the number of selected items changes. | `CustomEvent<string[]>` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-dynamic-table-cell/readme.md

@@ -0,0 +1,18 @@
+# xpl-dynamic-table-cell
+
+> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute  | Description                                     | Type      | Default |
+| ---------- | ---------- | ----------------------------------------------- | --------- | ------- |
+| `disabled` | `disabled` | Whether the cell and its contents are disabled. | `boolean` | `false` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-dynamic-table-row/readme.md

@@ -0,0 +1,19 @@
+# xpl-dynamic-table-row
+
+> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute  | Description                                 | Type      | Default |
+| ---------- | ---------- | ------------------------------------------- | --------- | ------- |
+| `disabled` | `disabled` | Whether the row and its cells are disabled. | `boolean` | `false` |
+| `selected` | `selected` | Whether the row is selected.                | `boolean` | `false` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-grid/readme.md

@@ -0,0 +1,10 @@
+# xpl-grid
+
+XPL-Grid is a code only utility component to help with responsive layouts. 
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-grid-item/readme.md

@@ -0,0 +1,20 @@
+# xpl-grid-item
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description                                                                                | Type     | Default |
+| -------- | --------- | ------------------------------------------------------------------------------------------ | -------- | ------- |
+| `lg`     | `lg`      | The number of columns the element should span  out of a 6 column grid on a  lg size screen | `number` | `6`     |
+| `md`     | `md`      | The number of columns the element should span  out of a 6 column grid on a  md size screen | `number` | `6`     |
+| `sm`     | `sm`      | The number of columns the element should span  out of a 6 column grid on a  sm size screen | `number` | `6`     |
+| `xs`     | `xs`      | The number of columns the element should span  out of a 6 column grid on a  xs size screen | `number` | `6`     |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-header-accordion/readme.md

@@ -0,0 +1,39 @@
+# xpl-header-accordion
+
+The toolbar component allows users to manipulate selections within the Dynamic Table.  It is only visible when a row or cell is in the selected state and bulk actions can be taken on that row or cell. 
+
+> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property          | Attribute          | Description                                                   | Type      | Default     |
+| ----------------- | ------------------ | ------------------------------------------------------------- | --------- | ----------- |
+| `contentId`       | `content-id`       | The id of the content region controlled by the accordion.     | `string`  | `undefined` |
+| `disabled`        | `disabled`         | Whether the accordion is disabled.                            | `boolean` | `false`     |
+| `hasCheckbox`     | `has-checkbox`     | Whether to display a parent checkbox in the accordion header. | `boolean` | `true`      |
+| `initialExpanded` | `initial-expanded` | Whether the accordion is expanded initially.                  | `boolean` | `false`     |
+| `selectedCount`   | `selected-count`   | The number of selected child items, or -1 to auto-calculate.  | `number`  | `-1`        |
+
+
+## Dependencies
+
+### Depends on
+
+- [xpl-checkbox](../xpl-checkbox)
+- [xpl-icon](../xpl-icon)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-header-accordion --> xpl-checkbox
+  xpl-header-accordion --> xpl-icon
+  style xpl-header-accordion fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-icon/readme.md

@@ -0,0 +1,80 @@
+# xpl-icon
+
+## Available Icons
+
+For a complete list of available icon names, see [ICONS.md](./ICONS.md) (164 icons).
+
+You can also browse icons visually in [Storybook](?path=/story/components-icons--icons) with search functionality.
+
+## Usage
+
+```html
+<xpl-icon icon="rocket" size="24"></xpl-icon>
+```
+
+The `icon` property accepts any icon name as a string. See the links above for the full list of available icons.
+
+---
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property            | Attribute          | Description              | Type     | Default     |
+| ------------------- | ------------------ | ------------------------ | -------- | ----------- |
+| `backgroundColor`   | `background-color` | Icon's background color. | `string` | `undefined` |
+| `icon` _(required)_ | `icon`             | Name of icon.            | `string` | `undefined` |
+| `size`              | `size`             | Size of icon             | `number` | `undefined` |
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-accordion](../xpl-accordion)
+ - [xpl-data-card](../xpl-data-card)
+ - [xpl-header-accordion](../xpl-header-accordion)
+ - [xpl-input](../xpl-input)
+ - [xpl-input-color](../xpl-input/xpl-input-color)
+ - [xpl-input-date](../xpl-input/xpl-input-date)
+ - [xpl-input-file](../xpl-input/xpl-input-file)
+ - [xpl-input-time](../xpl-input/xpl-input-time)
+ - [xpl-large-card](../xpl-large-card)
+ - [xpl-list](../xpl-list)
+ - [xpl-modal](../xpl-modal)
+ - [xpl-pagination](../xpl-pagination)
+ - [xpl-select](../xpl-select)
+ - [xpl-slideout](../xpl-slideout)
+ - [xpl-table](../xpl-table)
+ - [xpl-table-header-cell](../xpl-table-header-cell)
+ - [xpl-toast](../xpl-toast)
+ - [xpl-utility-bar](../xpl-utility-bar)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-accordion --> xpl-icon
+  xpl-data-card --> xpl-icon
+  xpl-header-accordion --> xpl-icon
+  xpl-input --> xpl-icon
+  xpl-input-color --> xpl-icon
+  xpl-input-date --> xpl-icon
+  xpl-input-file --> xpl-icon
+  xpl-input-time --> xpl-icon
+  xpl-large-card --> xpl-icon
+  xpl-list --> xpl-icon
+  xpl-modal --> xpl-icon
+  xpl-pagination --> xpl-icon
+  xpl-select --> xpl-icon
+  xpl-slideout --> xpl-icon
+  xpl-table --> xpl-icon
+  xpl-table-header-cell --> xpl-icon
+  xpl-toast --> xpl-icon
+  xpl-utility-bar --> xpl-icon
+  style xpl-icon fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*