@polymer/iron-selector - npm Package Compare versions

Comparing version 3.0.0-pre.21 to 3.0.0-pre.22

iron-multi-selectable.js

 /**
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
 */
 import '@polymer/polymer/polymer-legacy.js';
 
-import { IronSelectableBehavior } from './iron-selectable.js';
+import {IronSelectableBehavior} from './iron-selectable.js';
 
 /**
- * @polymerBehavior Polymer.IronMultiSelectableBehavior
+ * @polymerBehavior IronMultiSelectableBehavior
  */
@@ -164,2 +165,3 @@ export const IronMultiSelectableBehaviorImpl = {
 /** @polymerBehavior */
-export const IronMultiSelectableBehavior = [IronSelectableBehavior, IronMultiSelectableBehaviorImpl];
+export const IronMultiSelectableBehavior =
+    [IronSelectableBehavior, IronMultiSelectableBehaviorImpl];

iron-selectable.js

 /**
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
 */
 import '@polymer/polymer/polymer-legacy.js';
 
-import { IronSelection } from './iron-selection.js';
-import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
-import { dashToCamelCase } from '@polymer/polymer/lib/utils/case-map.js';
+import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';
+import {dashToCamelCase} from '@polymer/polymer/lib/utils/case-map.js';
 
+import {IronSelection} from './iron-selection.js';
+
 /**
- * @polymerBehavior Polymer.IronSelectableBehavior
+ * @polymerBehavior
  */
@@ -146,4 +148,3 @@ export const IronSelectableBehavior = {
     this._bindFilterItem = this._filterItem.bind(this);
-    this._selection =
-        new IronSelection(this._applySelection.bind(this));
+    this._selection = new IronSelection(this._applySelection.bind(this));
   },
@@ -235,8 +236,8 @@
     if (this._observer && typeof this._observer.flush === 'function') {
-      // NOTE(bicknellr): `Polymer.dom.flush` above is no longer sufficient to
-      // trigger `observeNodes` callbacks. Polymer 2.x returns an object from
-      // `observeNodes` with a `flush` that synchronously gives the callback
-      // any pending MutationRecords (retrieved with `takeRecords`). Any case
-      // where ShadyDOM flushes were expected to synchronously trigger item
-      // updates will now require calling `forceSynchronousItemUpdate`.
+      // NOTE(bicknellr): `dom.flush` above is no longer sufficient to trigger
+      // `observeNodes` callbacks. Polymer 2.x returns an object from
+      // `observeNodes` with a `flush` that synchronously gives the callback any
+      // pending MutationRecords (retrieved with `takeRecords`). Any case where
+      // ShadyDOM flushes were expected to synchronously trigger item updates
+      // will now require calling `forceSynchronousItemUpdate`.
       this._observer.flush();
@@ -271,4 +272,3 @@ } else {
   _updateItems: function() {
-    var nodes =
-        dom(this).queryDistributedElements(this.selectable || '*');
+    var nodes = dom(this).queryDistributedElements(this.selectable || '*');
     nodes = Array.prototype.filter.call(nodes, this._bindFilterItem);
@@ -275,0 +275,0 @@ this._setItems(nodes);

iron-selection.js

 /**
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
 */
 import '@polymer/polymer/polymer-legacy.js';
 
-/**
- * @param {!Function} selectCallback
- * @constructor
- * @suppress {missingProvide}
- */
-export const IronSelection = function(selectCallback) {
-  this.selection = [];
-  this.selectCallback = selectCallback;
-};
+export class IronSelection {
+  /**
+   * @param {!Function} selectCallback
+   * @suppress {missingProvide}
+   */
+  constructor(selectCallback) {
+    this.selection = [];
+    this.selectCallback = selectCallback;
+  }
 
-IronSelection.prototype = {
-
   /**
    * Retrieves the selected item(s).
    *
-   * @method get
    * @returns Returns the selected item(s). If the multi property is true,
@@ -32,5 +30,5 @@ * `get` will return an array, otherwise it will return
    */
-  get: function() {
+  get() {
     return this.multi ? this.selection.slice() : this.selection[0];
-  },
+  }
 
@@ -40,6 +38,5 @@ /**
    *
-   * @method clear
    * @param {Array} excludes items to be excluded.
    */
-  clear: function(excludes) {
+  clear(excludes) {
     this.selection.slice().forEach(function(item) {
@@ -50,3 +47,3 @@ if (!excludes || excludes.indexOf(item) < 0) {
     }, this);
-  },
+  }
 
@@ -56,9 +53,8 @@ /**
    *
-   * @method isSelected
    * @param {*} item The item whose selection state should be checked.
-   * @returns Returns true if `item` is selected.
+   * @return {boolean} Returns true if `item` is selected.
    */
-  isSelected: function(item) {
+  isSelected(item) {
     return this.selection.indexOf(item) >= 0;
-  },
+  }
 
@@ -68,7 +64,6 @@ /**
    *
-   * @method setItemSelected
    * @param {*} item The item to select.
    * @param {boolean} isSelected True for selected, false for deselected.
    */
-  setItemSelected: function(item, isSelected) {
+  setItemSelected(item, isSelected) {
     if (item != null) {
@@ -91,3 +86,3 @@ if (isSelected !== this.isSelected(item)) {
     }
-  },
+  }
 
@@ -99,6 +94,5 @@ /**
    *
-   * @method select
    * @param {*} item The item to select.
    */
-  select: function(item) {
+  select(item) {
     if (this.multi) {
@@ -110,3 +104,3 @@ this.toggle(item);
     }
-  },
+  }
 
@@ -116,9 +110,7 @@ /**
    *
-   * @method toggle
    * @param {*} item The item to toggle.
    */
-  toggle: function(item) {
+  toggle(item) {
     this.setItemSelected(item, !this.isSelected(item));
   }
-
 };

iron-selector.js

 /**
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
 */
 import '@polymer/polymer/polymer-legacy.js';
 
-import { IronMultiSelectableBehavior } from './iron-multi-selectable.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
+
+import {IronMultiSelectableBehavior} from './iron-multi-selectable.js';
+
 /**
@@ -15,0 +18,0 @@ `iron-selector` is an element which can be used to manage a list of elements

package.json

@@ -16,24 +16,16 @@ {
   "devDependencies": {
-    "@polymer/gen-typescript-declarations": "^1.2.2",
-    "bower": "^1.8.0",
     "webmat": "^0.2.0",
-    "@polymer/iron-component-page": "^3.0.0-pre.21",
-    "@polymer/iron-demo-helpers": "^3.0.0-pre.21",
-    "@polymer/iron-test-helpers": "^3.0.0-pre.21",
-    "@polymer/paper-styles": "^3.0.0-pre.21",
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.20",
+    "@polymer/iron-test-helpers": "^3.0.0-pre.20",
+    "@polymer/paper-styles": "^3.0.0-pre.20",
     "wct-browser-legacy": "^1.0.1",
-    "@webcomponents/webcomponentsjs": "^2.0.0"
+    "@webcomponents/webcomponentsjs": "^2.0.0",
+    "@polymer/gen-typescript-declarations": "^1.5.0"
   },
   "scripts": {
-    "update-types": "bower install && gen-typescript-declarations --deleteExisting --outDir .",
-    "format": "webmat && npm run update-types"
+    "format": "webmat",
+    "generate-types": "gen-typescript-declarations --deleteExisting --outDir .",
+    "prepack": "npm run generate-types"
   },
-  "version": "3.0.0-pre.21",
-  "resolutions": {
-    "inherits": "2.0.3",
-    "samsam": "1.1.3",
-    "supports-color": "3.1.2",
-    "type-detect": "1.0.0",
-    "@webcomponents/webcomponentsjs": "2.0.0-beta.2"
-  },
+  "version": "3.0.0-pre.22",
   "author": "The Polymer Authors",
@@ -40,0 +32,0 @@ "dependencies": {

README.md

@@ -0,102 +1,116 @@
+[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-selector.svg)](https://www.npmjs.com/package/@polymer/iron-selector)
 [![Build status](https://travis-ci.org/PolymerElements/iron-selector.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-selector)
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/PolymerElements/iron-selector)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-selector)
 
-_[Demo and API docs](https://elements.polymer-project.org/elements/iron-selector)_
+## <iron-selector>, `IronSelectableBehavior`, `IronMultiSelectableBehavior`
 
+`iron-selector` is an element which can be used to manage a list of elements
+that can be selected. Tapping on the item will make the item selected. The
+`selected` indicates which item is being selected. The default is to use the
+index of the item. `iron-selector`'s functionality is entirely defined by
+`IronMultiSelectableBehavior`.
 
-## <iron-selector>
+`IronSelectableBehavior` gives an element the concept of a selected child
+element. By default, the element will select one of its selectable children
+when a ['tap'
+event](https://www.polymer-project.org/3.0/docs/devguide/gesture-events#gesture-event-types)
+(synthesized by Polymer, roughly 'click') is dispatched to it.
 
-  `iron-selector` is an element which can be used to manage a list of elements
-  that can be selected.  Tapping on the item will make the item selected.  The `selected` indicates
-  which item is being selected.  The default is to use the index of the item.
+`IronSelectableBehavior` lets you ...
 
-  Example:
+  - decide which children should be considered selectable (`selectable`),
+  - retrieve the currently selected element (`selectedItem`) and all elements
+    in the selectable set (`items`),
+  - change the selection (`select`, `selectNext`, etc.),
+  - decide how selected elements are modified to indicate their selected state
+    (`selectedClass`, `selectedAttribute`),
 
-```html
-  <iron-selector selected="0">
-    <div>Item 1</div>
-    <div>Item 2</div>
-    <div>Item 3</div>
-  </iron-selector>
-```
+... among other things.
 
-  If you want to use the attribute value of an element for `selected` instead of the index,
-  set `attrForSelected` to the name of the attribute.  For example, if you want to select item by
-  `name`, set `attrForSelected` to `name`.
+`IronMultiSelectableBehavior` includes all the features of
+`IronSelectableBehavior` as well as a `multi` property, which can be set to
+`true` to indicate that the element can have multiple selected child elements.
+It also includes the `selectedItems` and `selectedValues` properties for
+working with arrays of selectable elements and their corresponding values
+(`multi` is `true`) - similar to the single-item versions provided by
+`IronSelectableBehavior`: `selectedItem` and `selected`.
 
-  Example:
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-selector),
+  [Demo](https://www.webcomponents.org/element/@polymer/iron-selector/demo/demo/index.html).
 
-```html
-  <iron-selector attr-for-selected="name" selected="foo">
-    <div name="foo">Foo</div>
-    <div name="bar">Bar</div>
-    <div name="zot">Zot</div>
-  </iron-selector>
+## Usage
+
+### Installation
+
 ```
+npm install --save @polymer/iron-selector
+```
 
-  You can specify a default fallback with `fallbackSelection` in case the `selected` attribute does
-  not match the `attrForSelected` attribute of any elements.
+### In an HTML file
 
-  Example:
-
 ```html
-    <iron-selector attr-for-selected="name" selected="non-existing"
-                   fallback-selection="default">
-      <div name="foo">Foo</div>
-      <div name="bar">Bar</div>
-      <div name="default">Default</div>
+<html>
+  <head>
+    <script type="module">
+      import '@polymer/iron-selector/iron-selector.js';
+    </script>
+  </head>
+  <body>
+    <iron-selector selected="0">
+      <div>Item 1</div>
+      <div>Item 2</div>
+      <div>Item 3</div>
     </iron-selector>
+  </body>
+</html>
 ```
 
-  Note: When the selector is multi, the selection will set to `fallbackSelection` iff
-  the number of matching elements is zero.
+### In a Polymer 3 element
 
-  `iron-selector` is not styled. Use the `iron-selected` CSS class to style the selected element.
+```js
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
 
-  Example:
+import '@polymer/iron-selector/iron-selector.js';
 
-```html
-  <style>
-    .iron-selected {
-      background: #eee;
-    }
-  </style>
+class ExampleElement extends PolymerElement {
+  static get template() {
+    return html`
+      <iron-selector selected="0">
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+      </iron-selector>
+    `;
+  }
+}
 
-  ...
-
-  <iron-selector selected="0">
-    <div>Item 1</div>
-    <div>Item 2</div>
-    <div>Item 3</div>
-  </iron-selector>
+customElements.define('example-element', ExampleElement);
 ```
 
-### Notable breaking changes between 1.x and 2.x (hybrid):
+## Contributing
 
-#### IronSelectableBehavior
+If you want to send a PR to this element, here are the instructions for running
+the tests and demo locally:
 
-- IronSelectableBehavior no longer updates its list of items synchronously
-  when it is connected to avoid triggering a situation introduced in the
-  Custom Elements v1 spec that might cause custom element reactions to be
-  called later than expected.
+### Installation
 
-  If you are using an element with IronSelectableBehavior and ...
-  1. are reading or writing properties of the element that depend on its
-     items (`items`, `selectedItems`, etc.)
-  1. are performing these accesses after the element is created or connected
-    (attached) either **synchronously** or **after a timeout**
+```sh
+git clone https://github.com/PolymerElements/iron-selector
+cd iron-selector
+npm install
+npm install -g polymer-cli
+```
 
-  ... you should wait for the element to dispatch an `iron-items-changed`
-  event instead.
-- `Polymer.dom.flush()` no longer triggers the observer used by
-  IronSelectableBehavior to watch for changes to its items. You can call
-  `forceSynchronousItemUpdate` instead or, preferably, listen for the
-  `iron-items-changed` event.
+### Running the demo locally
 
-#### IronMultiSelectableBehavior
+```sh
+polymer serve --npm
+open http://127.0.0.1:<port>/demo/
+```
 
-- All breaking changes to IronSelectableBehavior listed above apply to
-  IronMultiSelectableBehavior.
-- `selectedValues` and `selectedItems` now have empty arrays as default
-  values. This may cause bindings or observers of these properties to
-  trigger at start up when they previously had not.
+### Running the tests
+
+```sh
+polymer test --npm
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

7

decreased by-22.22%

Lines of code

1000

increased by22.25%

Number of lines in readme file

117

increased by13.59%

Worsened metrics

Total package byte prevSize

43205

decreased by-57.95%

Number of package files

13

decreased by-53.57%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes