<oscd-filtered-list>

This webcomponent follows the open-wc recommendation.

Installation

npm i @openscd/oscd-filtered-list

Usage

<script type="module">
  import 'oscd-filtered-list';
</script>

<oscd-filtered-list></oscd-filtered-list>

Linting and formatting

To scan the project for linting and formatting errors, run

npm run lint

To automatically fix linting and formatting errors, run

npm run format

Testing with Web Test Runner

To execute a single test run:

npm run test

To run the tests in interactive watch mode run:

npm run test:watch

Demoing with Storybook

To run a local instance of Storybook for your component, run

npm run storybook

To build a production version of Storybook, run

npm run storybook:build

Tooling configs

For most of the tools, the configuration is in the package.json to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

Icon font

Material Icons are being used for the icons. This font needs to be added in the html first. You can add it like so:

<link
  href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
  rel="stylesheet"
/>

Local Demo with web-dev-server

npm start

To run a local development server that serves the basic demo located in demo/index.html

src/OscdFilteredList.ts:

Exports

| Kind | Name | Declaration | Module | Package | | --------------------------- | -------------------- | ---------------- | -------------------------- | ------- | | custom-element-definition | oscd-filtered-list | OscdFilteredList | /src/oscd-filtered-list.js | | | js | OscdFilteredList | OscdFilteredList | src/OscdFilteredList.ts | |

src/oscd-filtered-list.ts:

class: OscdFilteredList, oscd-filtered-list

Superclass

| Name | Module | Package | | ------------ | ------ | ----------- | | LitElement | | lit-element |

Fields

| Name | Privacy | Type | Default | Description | Inherited From | | ------------------ | ------- | --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | | searchFieldLabel | | string \| undefined | | search mwc-textfield label property | | | disableCheckAll | | boolean | false | Whether the check all option (checkbox next to search text field) is activated | | | filter | | string \| undefined | | The current input value of the filter textbox | | | wrapFocus | | boolean | false | When `true`, pressing `up` on the keyboard when focused on the first item will focus the last item and `down` when focused on the last item will focus the first item. | | | multi | | boolean | false | When `true`, enables selection of multiple items. This will result in `index` being of type `Set<number>` and selected returning `ListItemBase[]`. | | | activatable | | boolean | false | Sets activated attribute on selected items which provides a focus-persistent highlight. | | | list | | List | | | | | selected | | | | Currently-selected list item(s). When `multi` is `true`, `selected` is of type `ListItemBase[]` and when `false`, `selected` is of type `ListItemBase`. `selected` is `null` when no item is selected. | | | index | | | | Index / indices of selected item(s). When `multi` is `true`, `index` is of type `number` and when `false`, `index` is of type `Set<number>`. Unset indicies are `-1` and empty `Set<number>` for single and multi selection respectively. | | | items | | Array<ListItem> | [] | All list items that are available for selection. Eligible items have the `[mwc-list-item]` attribute which `ListItemBase` applies automatically. | | | searchField | | TextField | | | |

Methods

| Name | Privacy | Description | Parameters | Return | Inherited From | | --------------- | ------- | ----------- | ---------- | ------ | -------------- | | onFilterInput | | | | void | |

Events

| Name | Type | Description | Inherited From | | ---------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- | | action | ActionEvent | Fired when a selection has been made via click or keyboard action. | | | selected | SelectedEvent | Fired when a selection has been made. `index` is the selected index (will be of type `Set<number>` if multi and `number` if single), and `diff` (of type `IndexDiff`\*\*) represents the diff of added and removed indices from previous selection. | |

Functions

| Name | Description | Parameters | Return | | ----------------- | ----------- | ----------------------------------- | ------ | | redispatchEvent | | element: LitElement, event: Event | |

Exports

| Kind | Name | Declaration | Module | Package | | ---- | ------------------ | ---------------- | ------------------------- | ------- | | js | redispatchEvent | redispatchEvent | src/oscd-filtered-list.ts | | | js | OscdFilteredList | OscdFilteredList | src/oscd-filtered-list.ts | |

© 2023 Alliander N.V.