|
| 1 | +/** |
| 2 | + * DO NOT EDIT |
| 3 | + * |
| 4 | + * This file was automatically generated by |
| 5 | + * https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations |
| 6 | + * |
| 7 | + * To modify these typings, edit the source file(s): |
| 8 | + * lib/elements/array-selector.js |
| 9 | + */ |
| 10 | + |
| 11 | + |
| 12 | +// tslint:disable:variable-name Describing an API that's defined elsewhere. |
| 13 | +// tslint:disable:no-any describes the API as best we are able today |
| 14 | + |
| 15 | +import {PolymerElement} from '../../polymer-element.js'; |
| 16 | + |
| 17 | +import {dedupingMixin} from '../utils/mixin.js'; |
| 18 | + |
| 19 | +import {calculateSplices} from '../utils/array-splice.js'; |
| 20 | + |
| 21 | +import {ElementMixin} from '../mixins/element-mixin.js'; |
| 22 | + |
| 23 | + |
| 24 | +/** |
| 25 | + * Element mixin for recording dynamic associations between item paths in a |
| 26 | + * master `items` array and a `selected` array such that path changes to the |
| 27 | + * master array (at the host) element or elsewhere via data-binding) are |
| 28 | + * correctly propagated to items in the selected array and vice-versa. |
| 29 | + * |
| 30 | + * The `items` property accepts an array of user data, and via the |
| 31 | + * `select(item)` and `deselect(item)` API, updates the `selected` property |
| 32 | + * which may be bound to other parts of the application, and any changes to |
| 33 | + * sub-fields of `selected` item(s) will be kept in sync with items in the |
| 34 | + * `items` array. When `multi` is false, `selected` is a property |
| 35 | + * representing the last selected item. When `multi` is true, `selected` |
| 36 | + * is an array of multiply selected items. |
| 37 | + */ |
| 38 | +declare function ArraySelectorMixin<T extends new (...args: any[]) => {}>(base: T): T & ArraySelectorMixinConstructor & ElementMixinConstructor & PropertyEffectsConstructor & TemplateStampConstructor & PropertyAccessorsConstructor & PropertiesChangedConstructor & PropertiesMixinConstructor; |
| 39 | + |
| 40 | +import {ElementMixinConstructor} from '../mixins/element-mixin.js'; |
| 41 | + |
| 42 | +import {PropertyEffectsConstructor, PropertyEffects} from '../mixins/property-effects.js'; |
| 43 | + |
| 44 | +import {TemplateStampConstructor, TemplateStamp} from '../mixins/template-stamp.js'; |
| 45 | + |
| 46 | +import {PropertyAccessorsConstructor, PropertyAccessors} from '../mixins/property-accessors.js'; |
| 47 | + |
| 48 | +import {PropertiesChangedConstructor, PropertiesChanged} from '../mixins/properties-changed.js'; |
| 49 | + |
| 50 | +import {PropertiesMixinConstructor, PropertiesMixin} from '../mixins/properties-mixin.js'; |
| 51 | + |
| 52 | +interface ArraySelectorMixinConstructor { |
| 53 | + new(...args: any[]): ArraySelectorMixin; |
| 54 | +} |
| 55 | + |
| 56 | +export {ArraySelectorMixinConstructor}; |
| 57 | + |
| 58 | +interface ArraySelectorMixin extends ElementMixin, PropertyEffects, TemplateStamp, PropertyAccessors, PropertiesChanged, PropertiesMixin { |
| 59 | + |
| 60 | + /** |
| 61 | + * An array containing items from which selection will be made. |
| 62 | + */ |
| 63 | + items: any[]|null|undefined; |
| 64 | + |
| 65 | + /** |
| 66 | + * When `true`, multiple items may be selected at once (in this case, |
| 67 | + * `selected` is an array of currently selected items). When `false`, |
| 68 | + * only one item may be selected at a time. |
| 69 | + */ |
| 70 | + multi: boolean|null|undefined; |
| 71 | + |
| 72 | + /** |
| 73 | + * When `multi` is true, this is an array that contains any selected. |
| 74 | + * When `multi` is false, this is the currently selected item, or `null` |
| 75 | + * if no item is selected. |
| 76 | + */ |
| 77 | + selected: object|object[]|null; |
| 78 | + |
| 79 | + /** |
| 80 | + * When `multi` is false, this is the currently selected item, or `null` |
| 81 | + * if no item is selected. |
| 82 | + */ |
| 83 | + selectedItem: object|null; |
| 84 | + |
| 85 | + /** |
| 86 | + * When `true`, calling `select` on an item that is already selected |
| 87 | + * will deselect the item. |
| 88 | + */ |
| 89 | + toggle: boolean|null|undefined; |
| 90 | + |
| 91 | + /** |
| 92 | + * Clears the selection state. |
| 93 | + */ |
| 94 | + clearSelection(): void; |
| 95 | + |
| 96 | + /** |
| 97 | + * Returns whether the item is currently selected. |
| 98 | + * |
| 99 | + * @param item Item from `items` array to test |
| 100 | + * @returns Whether the item is selected |
| 101 | + */ |
| 102 | + isSelected(item: any): boolean; |
| 103 | + |
| 104 | + /** |
| 105 | + * Returns whether the item is currently selected. |
| 106 | + * |
| 107 | + * @param idx Index from `items` array to test |
| 108 | + * @returns Whether the item is selected |
| 109 | + */ |
| 110 | + isIndexSelected(idx: number): boolean; |
| 111 | + |
| 112 | + /** |
| 113 | + * Deselects the given item if it is already selected. |
| 114 | + * |
| 115 | + * @param item Item from `items` array to deselect |
| 116 | + */ |
| 117 | + deselect(item: any): void; |
| 118 | + |
| 119 | + /** |
| 120 | + * Deselects the given index if it is already selected. |
| 121 | + * |
| 122 | + * @param idx Index from `items` array to deselect |
| 123 | + */ |
| 124 | + deselectIndex(idx: number): void; |
| 125 | + |
| 126 | + /** |
| 127 | + * Selects the given item. When `toggle` is true, this will automatically |
| 128 | + * deselect the item if already selected. |
| 129 | + * |
| 130 | + * @param item Item from `items` array to select |
| 131 | + */ |
| 132 | + select(item: any): void; |
| 133 | + |
| 134 | + /** |
| 135 | + * Selects the given index. When `toggle` is true, this will automatically |
| 136 | + * deselect the item if already selected. |
| 137 | + * |
| 138 | + * @param idx Index from `items` array to select |
| 139 | + */ |
| 140 | + selectIndex(idx: number): void; |
| 141 | +} |
| 142 | + |
| 143 | +export {ArraySelectorMixin}; |
| 144 | + |
| 145 | +/** |
| 146 | + * Element implementing the `ArraySelector` mixin, which records |
| 147 | + * dynamic associations between item paths in a master `items` array and a |
| 148 | + * `selected` array such that path changes to the master array (at the host) |
| 149 | + * element or elsewhere via data-binding) are correctly propagated to items |
| 150 | + * in the selected array and vice-versa. |
| 151 | + * |
| 152 | + * The `items` property accepts an array of user data, and via the |
| 153 | + * `select(item)` and `deselect(item)` API, updates the `selected` property |
| 154 | + * which may be bound to other parts of the application, and any changes to |
| 155 | + * sub-fields of `selected` item(s) will be kept in sync with items in the |
| 156 | + * `items` array. When `multi` is false, `selected` is a property |
| 157 | + * representing the last selected item. When `multi` is true, `selected` |
| 158 | + * is an array of multiply selected items. |
| 159 | + * |
| 160 | + * Example: |
| 161 | + * |
| 162 | + * ```js |
| 163 | + * import {PolymerElement} from '@polymer/polymer'; |
| 164 | + * import '@polymer/polymer/lib/elements/array-selector.js'; |
| 165 | + * |
| 166 | + * class EmployeeList extends PolymerElement { |
| 167 | + * static get _template() { |
| 168 | + * return html` |
| 169 | + * <div> Employee list: </div> |
| 170 | + * <dom-repeat id="employeeList" items="{{employees}}"> |
| 171 | + * <template> |
| 172 | + * <div>First name: <span>{{item.first}}</span></div> |
| 173 | + * <div>Last name: <span>{{item.last}}</span></div> |
| 174 | + * <button on-click="toggleSelection">Select</button> |
| 175 | + * </template> |
| 176 | + * </dom-repeat> |
| 177 | + * |
| 178 | + * <array-selector id="selector" |
| 179 | + * items="{{employees}}" |
| 180 | + * selected="{{selected}}" |
| 181 | + * multi toggle></array-selector> |
| 182 | + * |
| 183 | + * <div> Selected employees: </div> |
| 184 | + * <dom-repeat items="{{selected}}"> |
| 185 | + * <template> |
| 186 | + * <div>First name: <span>{{item.first}}</span></div> |
| 187 | + * <div>Last name: <span>{{item.last}}</span></div> |
| 188 | + * </template> |
| 189 | + * </dom-repeat>`; |
| 190 | + * } |
| 191 | + * static get is() { return 'employee-list'; } |
| 192 | + * static get properties() { |
| 193 | + * return { |
| 194 | + * employees: { |
| 195 | + * value() { |
| 196 | + * return [ |
| 197 | + * {first: 'Bob', last: 'Smith'}, |
| 198 | + * {first: 'Sally', last: 'Johnson'}, |
| 199 | + * ... |
| 200 | + * ]; |
| 201 | + * } |
| 202 | + * } |
| 203 | + * }; |
| 204 | + * } |
| 205 | + * toggleSelection(e) { |
| 206 | + * const item = this.$.employeeList.itemForElement(e.target); |
| 207 | + * this.$.selector.select(item); |
| 208 | + * } |
| 209 | + * } |
| 210 | + * ``` |
| 211 | + */ |
| 212 | +declare class ArraySelector extends |
| 213 | + ArraySelectorMixin( |
| 214 | + PolymerElement) { |
| 215 | +} |
| 216 | + |
| 217 | +declare global { |
| 218 | + |
| 219 | + interface HTMLElementTagNameMap { |
| 220 | + "array-selector": ArraySelector; |
| 221 | + } |
| 222 | +} |
| 223 | + |
| 224 | +export {ArraySelector}; |
0 commit comments