Socket
Socket
Sign inDemoInstall

@brightspace-ui-labs/multi-select

Package Overview
Dependencies
3
Maintainers
3
Versions
55
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@brightspace-ui-labs/multi-select

Polymer-based web component for D2L multi select and related components


Version published
Maintainers
3
Weekly downloads
890
increased by9.34%

Weekly downloads

Readme

Source

d2l-labs-multi-select

NPM version

Note: this is a "labs" component. While functional, these tasks are prerequisites to promotion to BrightspaceUI "official" status:

Polymer/Lit-based web component collection for D2L multi-select, creating, editing, and listing tags/attributes. animated screenshot of attribute picker

Installation

npm install @brightspace-ui-labs/multi-select

Components

d2l-labs-multi-select-input-text

d2l-labs-multi-select-input-text includes a d2l-input-text that is hooked up to add items when 'Enter' is pressed. Usage:

<d2l-labs-multi-select-input-text>
	<d2l-labs-multi-select-list-item deletable text="Item 1"></d2l-labs-multi-select-list-item>
</d2l-labs-multi-select-input-text>

d2l-labs-multi-select-input

You can use your own input component instead by putting it as a child of d2l-labs-multi-select-input and setting slot="input" on your input element. To add items to the list, call addItem with the item text. Usage:

<d2l-labs-multi-select-input id="multi-select-input">
	<div slot="input">
		<input>
		<button>Add</button>
	</div>
</d2l-labs-multi-select-input>
button.addEventListener('click', () => {
	multiSelectInput.addItem(input.value)
})

d2l-labs-attribute-picker

An autocompleting dropdown to choose one or more new or pre-existing attributes inline. Usage:

<script type="module">
    import '@brightspace-ui-labs/multi-select/attribute-picker.js';
</script>
<d2l-labs-attribute-picker>My element</d2l-labs-attribute-picker>

Properties:

PropertyTypeDescription
allow-freeformBooleanWhen enabled, the user can manually type any attribute they wish. If false, they must select from the dropdown.
aria-labelStringRequired. When true, the autocomplete dropdown will not be displayed to the user.
attribute-listArrayAn array of string/value pairs representing the attributes currently selected in the picker (eg [{"name":"shown to user","value":"sent in event"}]). Only the values are sent in events and the string names are otherwise ignored.
assignable-attributesArrayAn array of string/value pairs, just like attribute-list, available in the dropdown list.
hide-dropdownBooleanWhen enabled, the autocomplete dropdown will not be displayed to the user.
limitNumberThe maximum length of attribute-list permitted.

Accessibility:

To make your usage of d2l-labs-attribute-picker accessible, use the following properties when applicable:

AttributeDescription
aria-labelThe label should provide context for the attribute picker, such as type of attribute.

Events: The d2l-labs-attribute-picker dispatches the d2l-attributes-changed event each time an attribute has been added or removed. It will return the updated list of attributes:

attributePicker.addEventListener('d2l-attributes-changed', (e) => {
  console.log(e.detail.attributeList.toString());
});

The d2l-labs-attribute-picker dispatches the d2l-attribute-limit-reached event when the user attempts to enter an attribute greater than the limit. This can be used to send feedback to the user.

Deprecated Components

The following components are deprecated. Use d2l-tag-list and d2l-tag-list-item in BrightspaceUI/core instead.

d2l-labs-multi-select-list-item

d2l-labs-multi-select-list-item is a compact representation of information.

A deletable property can be set to enable the option of deleting the item, although there is no wire-up.

<d2l-labs-multi-select-list-item deletable text="List item"></d2l-labs-multi-select-list-item>

A 'show-delete-hover-focus' property can be set to allow delete icon to show on hover or focus only.

<d2l-labs-multi-select-list-item deletable show-delete-hover-focus text="List item"></d2l-labs-multi-select-list-item>

Also the following css variables are exposed to clients and can be use to override some of the appearance of the list item.

--d2l-labs-multi-select-list-item-font
--d2l-labs-multi-select-list-item-padding
--d2l-labs-multi-select-list-item-padding-rtl
--d2l-labs-multi-select-list-item-padding-deletable
--d2l-labs-multi-select-list-item-padding-deletable-rtl

d2l-labs-multi-select-list

d2l-labs-multi-select-list wraps a list of items, and provides spacing between the items, as well as keyboard navigation (arrow keys) and handling of item deletion (backspace/delete).

Usage:

<d2l-labs-multi-select-list>
	<d2l-labs-multi-select-list-item text="List item 1"></d2l-labs-multi-select-list-item>
	<d2l-labs-multi-select-list-item text="List item 2"></d2l-labs-multi-select-list-item>
	...
</d2l-labs-multi-select-list>

You can opt for a condensed view by adding the collapsable attribute, which limits the element to the first line of items and provides a button for viewing the remaining items.

Events:

  • d2l-labs-multi-select-list-item-deleted: fired on item deletion

  • d2l-labs-multi-select-list-item-added: fired on item added to the d2l-labs-multi-select-list

Developing, Testing and Contributing

After cloning the repo, run npm install to install dependencies.

Start a @web/dev-server that hosts the demo pages:

npm run start

To lint:

npm run lint

To run unit tests locally:

npm run test:headless

To lint AND run local unit tests:

npm run test

Versioning and Releasing

This repo is configured to use semantic-release. Commits prefixed with fix: and feat: will trigger patch and minor releases when merged to main.

To learn how to create major releases and release from maintenance branches, refer to the semantic-release GitHub Action documentation.

FAQs

Last updated on 22 Jan 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc