@openscd/oscd-filtered-list NPM

\

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	Type	Default	Description
`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\` 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\`. Unset indicies are `-1` and empty `Set\` 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\` 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

@lit/localize @material/mwc-button @material/mwc-checkbox @material/mwc-dialog @material/mwc-formfield @material/mwc-icon @material/mwc-icon-button @material/mwc-list @material/mwc-textfield lit-element lit-html

@everything-registry/sub-chunk-690

1.1.1

8 months ago

1.1.0

10 months ago

1.0.1

1 year ago

\

Installation

Usage

Linting and formatting

Testing with Web Test Runner

Demoing with Storybook

Tooling configs

Icon font

Local Demo with web-dev-server

src/OscdFilteredList.ts:

Exports

src/oscd-filtered-list.ts:

class: OscdFilteredList, oscd-filtered-list

Superclass

Fields

Methods

Events

Functions

Exports

Local Demo with `web-dev-server`

`src/OscdFilteredList.ts`:

`src/oscd-filtered-list.ts`:

class: `OscdFilteredList`, `oscd-filtered-list`