@lion/ui 0.7.2 → 0.7.4

package/docs/components/listbox/use-cases.md

@@ -139,4 +139,4 @@ Navigation will skip over disabled options. Let's disable Artichoke and Brussel
 
 ## Validation
 
-A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/8fd9ec4df166dd45f230eb032e3b1c151fd6240d/docs/fundamentals/systems/form/validate.md).
+A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/15a9d70cb690d26e6a2af8a6b5dbdda7e7b0112e/docs/fundamentals/systems/form/validate.md).

package/docs/components/pagination/api-table.md

@@ -0,0 +1,33 @@
+# Pagination >> API Table ||90 
+
+## class: `LionPagination`, `lion-pagination`
+
+### Fields
+
+| Name      | Privacy | Type     | Default | Description | Inherited From |
+| --------- | ------- | -------- | ------- | ----------- | -------------- |
+| `current` | public  | `number` | `1`     |             |                |
+| `count`   | public  | `number` | `0`     |             |                |
+
+### Methods
+
+| Name                      | Privacy   | Description                                                                                                      | Parameters                                             | Return             | Inherited From |
+| ------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ------------------ | -------------- |
+| `next`                    | public    | Go next in pagination                                                                                            |                                                        |                    |                |
+| `first`                   | public    | Go to first page                                                                                                 |                                                        |                    |                |
+| `last`                    | public    | Go to the last page                                                                                              |                                                        |                    |                |
+| `goto`                    | public    | Go to the specific page                                                                                          | `pageNumber: number`                                   |                    |                |
+| `previous`                | public    | Go back in pagination                                                                                            |                                                        |                    |                |
+| `_prevNextIconTemplate`   | protected | Get previous or next button template.
This method can be overridden to apply customized template in wrapper. | `label: String`                                        | `TemplateResult`   |                |
+| `_prevNextButtonTemplate` | protected | Get next or previous button template.
This method can be overridden to apply customized template in wrapper. | `label: String, pageNumber: Number, namespace: String` | `TemplateResult`   |                |
+| `_disabledButtonTemplate` | protected | Get disabled button template.
This method can be overridden to apply customized template in wrapper.         | `label: String`                                        | `TemplateResult`   |                |
+| `_renderNavList`          | protected | Render navigation list                                                                                           |                                                        | `TemplateResult[]` |                |
+
+### Attributes
+
+| Name      | Field   | Inherited From |
+| --------- | ------- | -------------- |
+| `current` | current |                |
+| `count`   | count   |                |
+
+<hr/>

package/docs/components/progress-indicator/api-table.md

@@ -0,0 +1,36 @@
+# Progress Indicator >> API Table ||90 
+
+## class: `LionProgressIndicator`, `lion-progress-indicator`
+
+### Fields
+
+| Name                   | Privacy   | Type      | Default | Description                                                                                                                                                              | Inherited From |
+| ---------------------- | --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
+| `indeterminate`        | public    | `boolean` |         |                                                                                                                                                                          |                |
+| `_progressPercentage`  | protected |           |         | In case of a determinate progress-indicator it returns the progress percentage
based on value, min & max.
Could be used for styling inside the \_graphicTemplate |                |
+| `value`                | public    | `number`  | `0`     |                                                                                                                                                                          |                |
+| `min`                  | public    | `number`  | `0`     |                                                                                                                                                                          |                |
+| `max`                  | public    | `number`  | `100`   |                                                                                                                                                                          |                |
+| `_ariaLabel`           | public    | `string`  | `''`    |                                                                                                                                                                          |                |
+| `_ariaLabelledby`      | public    | `string`  | `''`    |                                                                                                                                                                          |                |
+| `__hasDefaultLabelSet` | protected | `boolean` | `false` |                                                                                                                                                                          |                |
+
+### Methods
+
+| Name                        | Privacy   | Description | Parameters | Return | Inherited From |
+| --------------------------- | --------- | ----------- | ---------- | ------ | -------------- |
+| `_graphicTemplate`          | protected |             |            |        |                |
+| `_resetAriaValueAttributes` | protected |             |            |        |                |
+| `_setDefaultLabel`          | protected |             |            |        |                |
+
+### Attributes
+
+| Name              | Field            | Inherited From |
+| ----------------- | ---------------- | -------------- |
+| `value`           | value            |                |
+| `min`             | min              |                |
+| `max`             | max              |                |
+| `aria-label`      | \_ariaLabel      |                |
+| `aria-labelledby` | \_ariaLabelledby |                |
+
+<hr/>

package/docs/components/progress-indicator/examples.md

@@ -51,15 +51,14 @@ By given the progress-indicator a value it becomes determinate.
 The min is automatically set to "0" and max to "100", but they can be set to your local needs.
 
 ```js preview-story
-export const progressBarDemo = () =>
-  html`
-    <my-determinate-progress-bar
-      aria-label="Interest rate"
-      name="my-bar"
-      value="50"
-    ></my-determinate-progress-bar>
-    <button @click="${changeProgress}">Randomize Value</button>
-  `;
+export const progressBarDemo = () => html`
+  <my-determinate-progress-bar
+    aria-label="Interest rate"
+    name="my-bar"
+    value="50"
+  ></my-determinate-progress-bar>
+  <button @click="${changeProgress}">Randomize Value</button>
+`;
 ```
 
 ## Styled progress spinner example
@@ -120,6 +119,7 @@ class MyIndeterminateProgressSpinner extends LionProgressIndicator {
 ```
 
 ```js preview-story
-export const main = () =>
-  html` <my-indeterminate-progress-spinner></my-indeterminate-progress-spinner> `;
+export const main = () => html`
+  <my-indeterminate-progress-spinner></my-indeterminate-progress-spinner>
+`;
 ```