New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

multiselect-combo-box

Package Overview
Dependencies
Maintainers
1
Versions
50
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

multiselect-combo-box - npm Package Compare versions

Comparing version

2.4.2
to
2.5.0-alpha

2

package.json

@@ -15,3 +15,3 @@ {

"name": "multiselect-combo-box",
"version": "2.4.2",
"version": "2.5.0-alpha",
"main": "multiselect-combo-box.js",

@@ -18,0 +18,0 @@ "directories": {

4

README.md

@@ -1,2 +0,2 @@

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/gatanaso/multiselect-combo-box)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/multiselect-combo-box)
[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/gatanasomultiselect-combo-box)

@@ -32,3 +32,3 @@ [![Build Status](https://travis-ci.org/gatanaso/multiselect-combo-box.svg?branch=master)](https://travis-ci.org/gatanaso/multiselect-combo-box)

```
bower install --save gatanaso/multiselect-combo-box
bower install --save gatanaso/multiselect-combo-box#1.1.0
```

@@ -35,0 +35,0 @@ Once installed, import in your applicaiton:

2

src/multiselect-combo-box-input.js

@@ -33,3 +33,3 @@ import {PolymerElement} from '@polymer/polymer/polymer-element.js';

<div part="token-label">[[_getItemDisplayValue(item, itemLabelPath)]]</div>
<div part="token-remove-button" title="remove" role="button" on-click="_removeToken"></div>
<div part="token-remove-button" role="button" on-click="_removeToken"></div>
</div>

@@ -36,0 +36,0 @@ </template>

16

src/multiselect-combo-box-mixin.js

@@ -50,2 +50,10 @@ /**

/**
* Custom function for rendering the display value when in compact mode.
*
* This function receives the array of selected items and should return
* a string value that will be used as the display value.
*/
compactModeValueRenderer: Function,
/**
* The item property to be used as the `label` in combo-box.

@@ -106,5 +114,9 @@ */

_getCompactModeDisplayValue(items) {
const suffix = (items.length === 0 || items.length > 1) ? 'values' : 'value';
return `${items.length} ${suffix}`;
if (this.compactModeValueRenderer && typeof this.compactModeValueRenderer === 'function') {
return this.compactModeValueRenderer(items);
} else {
const suffix = (items.length === 0 || items.length > 1) ? 'values' : 'value';
return `${items.length} ${suffix}`;
}
}
};

3

src/multiselect-combo-box.js

@@ -112,2 +112,3 @@ import {PolymerElement} from '@polymer/polymer/polymer-element.js';

compact-mode="[[compactMode]]"
compact-mode-value-renderer="[[compactModeValueRenderer]]"
on-item-removed="_handleItemRemoved"

@@ -313,3 +314,3 @@ on-remove-all-items="_handleRemoveAllItems"

this._setTitle(this._getDisplayValue(selectedItems, this.itemLabelPath, ', '));
this.compactMode ? this._setTitle(this._getDisplayValue(selectedItems, this.itemLabelPath, ', ')) : this._setTitle('');

@@ -316,0 +317,0 @@ // manually force a render

3

theme/lumo/multiselect-combo-box-input-styles.js

@@ -37,3 +37,4 @@ import '@vaadin/vaadin-lumo-styles/typography.js';

margin: var(--lumo-space-s);
color: var(--lumo-contrast-70pct);
color: var(--lumo-body-text-color);
font-weight: 500;
cursor: default;

@@ -40,0 +41,0 @@ }

2

theme/material/multiselect-combo-box-input-styles.js

@@ -79,2 +79,4 @@ import '@vaadin/vaadin-material-styles/typography.js';

margin: var(--material-space-s);
color: var(--material-body-text-color);
font-size: var(--material-body-font-size);
cursor: default;

@@ -81,0 +83,0 @@ }