angular-instantsearch
Version:
Lightning-fast search for Angular apps, by Algolia.
135 lines (132 loc) • 13.1 kB
JavaScript
import { Inject, Component, Input, forwardRef, Optional } from '@angular/core';
import { connectRange } from 'instantsearch.js/es/connectors';
import { TypedBaseWidget } from '../typed-base-widget';
import { NgAisInstantSearch } from '../instantsearch/instantsearch';
import { NgAisIndex } from '../index-widget/index-widget';
import { parseNumberInput, noop } from '../utils';
export class NgAisRangeInput extends TypedBaseWidget {
constructor(parentIndex, instantSearchInstance) {
super('RangeInput');
this.parentIndex = parentIndex;
this.instantSearchInstance = instantSearchInstance;
// rendering options
this.currency = '$';
this.separator = 'to';
this.submitLabel = 'Go';
this.precision = 0;
this.state = {
range: { min: undefined, max: undefined },
refine: noop,
start: [0, 0],
// TODO: use canRefine & format
canRefine: false,
format: {
from: () => '',
to: () => '',
},
sendEvent: undefined,
};
}
get step() {
const precision = parseNumberInput(this.precision);
return 1 / Math.pow(10, precision);
}
get canRefine() {
return this.state.range.min !== this.state.range.max;
}
ngOnInit() {
this.createWidget(connectRange, {
attribute: this.attribute,
max: parseNumberInput(this.max),
min: parseNumberInput(this.min),
precision: parseNumberInput(this.precision),
}, {
$$widgetType: 'ais.rangeInput',
});
super.ngOnInit();
}
handleChange(event, type) {
const value = parseNumberInput(event.target.value);
if (type === 'min') {
this.minInputValue = value;
}
else {
this.maxInputValue = value;
}
}
handleSubmit(event) {
event.preventDefault();
this.state.refine([this.minInputValue, this.maxInputValue]);
}
}
NgAisRangeInput.decorators = [
{ type: Component, args: [{
selector: 'ais-range-input',
template: `
<div [ngClass]="[
cx(),
!canRefine ? cx('', 'noRefinement') : ''
]">
<form
[class]="cx('form')"
(submit)="handleSubmit($event)"
novalidate
>
<label [class]="cx('label')">
<span [class]="cx('currency')">{{currency}}</span>
<input
[ngClass]="[
cx('input'),
cx('input', 'min')
]"
type="number"
[min]="state.range.min"
[max]="state.range.max"
[placeholder]="state.range.min"
[value]="minInputValue"
[step]="step"
(change)="handleChange($event, 'min')"
/>
</label>
<span [class]="cx('separator')">{{separator}}</span>
<label [class]="cx('label')">
<span [class]="cx('currency')">{{currency}}</span>
<input
[ngClass]="[
cx('input'),
cx('input', 'max')
]"
type="number"
[min]="state.range.min"
[max]="state.range.max"
[placeholder]="state.range.max"
[value]="maxInputValue"
[step]="step"
(change)="handleChange($event, 'max')"
/>
</label>
<button
[class]="cx('submit')"
(click)="handleSubmit($event)"
>
{{submitLabel}}
</button>
</form>
</div>
`
},] }
];
NgAisRangeInput.ctorParameters = () => [
{ type: NgAisIndex, decorators: [{ type: Inject, args: [forwardRef(() => NgAisIndex),] }, { type: Optional }] },
{ type: NgAisInstantSearch, decorators: [{ type: Inject, args: [forwardRef(() => NgAisInstantSearch),] }] }
];
NgAisRangeInput.propDecorators = {
currency: [{ type: Input }],
separator: [{ type: Input }],
submitLabel: [{ type: Input }],
attribute: [{ type: Input }],
min: [{ type: Input }],
max: [{ type: Input }],
precision: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFuZ2UtaW5wdXQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvcmFuZ2UtaW5wdXQvcmFuZ2UtaW5wdXQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFL0UsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBTzlELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUNwRSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDMUQsT0FBTyxFQUFFLGdCQUFnQixFQUFFLElBQUksRUFBRSxNQUFNLFVBQVUsQ0FBQztBQTREbEQsTUFBTSxPQUFPLGVBQWdCLFNBQVEsZUFHcEM7SUFzQ0MsWUFHUyxXQUF1QixFQUV2QixxQkFBeUM7UUFFaEQsS0FBSyxDQUFDLFlBQVksQ0FBQyxDQUFDO1FBSmIsZ0JBQVcsR0FBWCxXQUFXLENBQVk7UUFFdkIsMEJBQXFCLEdBQXJCLHFCQUFxQixDQUFvQjtRQTFDbEQsb0JBQW9CO1FBQ0osYUFBUSxHQUFXLEdBQUcsQ0FBQztRQUN2QixjQUFTLEdBQVcsSUFBSSxDQUFDO1FBQ3pCLGdCQUFXLEdBQVcsSUFBSSxDQUFDO1FBTTNCLGNBQVMsR0FBdUMsQ0FBQyxDQUFDO1FBZTNELFVBQUssR0FBcUI7WUFDL0IsS0FBSyxFQUFFLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBRSxHQUFHLEVBQUUsU0FBUyxFQUFFO1lBQ3pDLE1BQU0sRUFBRSxJQUFJO1lBQ1osS0FBSyxFQUFFLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQztZQUNiLCtCQUErQjtZQUMvQixTQUFTLEVBQUUsS0FBSztZQUNoQixNQUFNLEVBQUU7Z0JBQ04sSUFBSSxFQUFFLEdBQUcsRUFBRSxDQUFDLEVBQUU7Z0JBQ2QsRUFBRSxFQUFFLEdBQUcsRUFBRSxDQUFDLEVBQUU7YUFDYjtZQUNELFNBQVMsRUFBRSxTQUFTO1NBQ3JCLENBQUM7SUFVRixDQUFDO0lBOUJELElBQUksSUFBSTtRQUNOLE1BQU0sU0FBUyxHQUFHLGdCQUFnQixDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUNuRCxPQUFPLENBQUMsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsRUFBRSxTQUFTLENBQUMsQ0FBQztJQUNyQyxDQUFDO0lBRUQsSUFBSSxTQUFTO1FBQ1gsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxHQUFHLEtBQUssSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDO0lBQ3ZELENBQUM7SUF5Qk0sUUFBUTtRQUNiLElBQUksQ0FBQyxZQUFZLENBQ2YsWUFBWSxFQUNaO1lBQ0UsU0FBUyxFQUFFLElBQUksQ0FBQyxTQUFTO1lBQ3pCLEdBQUcsRUFBRSxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDO1lBQy9CLEdBQUcsRUFBRSxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDO1lBQy9CLFNBQVMsRUFBRSxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDO1NBQzVDLEVBQ0Q7WUFDRSxZQUFZLEVBQUUsZ0JBQWdCO1NBQy9CLENBQ0YsQ0FBQztRQUVGLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNuQixDQUFDO0lBRU0sWUFBWSxDQUFDLEtBQVUsRUFBRSxJQUFZO1FBQzFDLE1BQU0sS0FBSyxHQUFHLGdCQUFnQixDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFbkQsSUFBSSxJQUFJLEtBQUssS0FBSyxFQUFFO1lBQ2xCLElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDO1NBQzVCO2FBQU07WUFDTCxJQUFJLENBQUMsYUFBYSxHQUFHLEtBQUssQ0FBQztTQUM1QjtJQUNILENBQUM7SUFFTSxZQUFZLENBQUMsS0FBWTtRQUM5QixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDdkIsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxJQUFJLENBQUMsYUFBYSxFQUFFLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDO0lBQzlELENBQUM7OztZQTNJRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGlCQUFpQjtnQkFDM0IsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FzRFQ7YUFDRjs7O1lBNURRLFVBQVUsdUJBdUdkLE1BQU0sU0FBQyxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsVUFBVSxDQUFDLGNBQ25DLFFBQVE7WUF6R0osa0JBQWtCLHVCQTJHdEIsTUFBTSxTQUFDLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxrQkFBa0IsQ0FBQzs7O3VCQXhDN0MsS0FBSzt3QkFDTCxLQUFLOzBCQUNMLEtBQUs7d0JBR0wsS0FBSztrQkFDTCxLQUFLO2tCQUNMLEtBQUs7d0JBQ0wsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEluamVjdCwgQ29tcG9uZW50LCBJbnB1dCwgZm9yd2FyZFJlZiwgT3B0aW9uYWwgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgY29ubmVjdFJhbmdlIH0gZnJvbSAnaW5zdGFudHNlYXJjaC5qcy9lcy9jb25uZWN0b3JzJztcbmltcG9ydCB7XG4gIFJhbmdlQ29ubmVjdG9yUGFyYW1zLFxuICBSYW5nZVdpZGdldERlc2NyaXB0aW9uLFxuICBSYW5nZVJlbmRlclN0YXRlLFxufSBmcm9tICdpbnN0YW50c2VhcmNoLmpzL2VzL2Nvbm5lY3RvcnMvcmFuZ2UvY29ubmVjdFJhbmdlJztcblxuaW1wb3J0IHsgVHlwZWRCYXNlV2lkZ2V0IH0gZnJvbSAnLi4vdHlwZWQtYmFzZS13aWRnZXQnO1xuaW1wb3J0IHsgTmdBaXNJbnN0YW50U2VhcmNoIH0gZnJvbSAnLi4vaW5zdGFudHNlYXJjaC9pbnN0YW50c2VhcmNoJztcbmltcG9ydCB7IE5nQWlzSW5kZXggfSBmcm9tICcuLi9pbmRleC13aWRnZXQvaW5kZXgtd2lkZ2V0JztcbmltcG9ydCB7IHBhcnNlTnVtYmVySW5wdXQsIG5vb3AgfSBmcm9tICcuLi91dGlscyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2Fpcy1yYW5nZS1pbnB1dCcsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdiBbbmdDbGFzc109XCJbXG4gICAgICAgIGN4KCksXG4gICAgICAgICFjYW5SZWZpbmUgPyBjeCgnJywgJ25vUmVmaW5lbWVudCcpIDogJydcbiAgICAgIF1cIj5cbiAgICAgIDxmb3JtXG4gICAgICAgIFtjbGFzc109XCJjeCgnZm9ybScpXCJcbiAgICAgICAgKHN1Ym1pdCk9XCJoYW5kbGVTdWJtaXQoJGV2ZW50KVwiXG4gICAgICAgIG5vdmFsaWRhdGVcbiAgICAgID5cbiAgICAgICAgPGxhYmVsIFtjbGFzc109XCJjeCgnbGFiZWwnKVwiPlxuICAgICAgICAgIDxzcGFuIFtjbGFzc109XCJjeCgnY3VycmVuY3knKVwiPnt7Y3VycmVuY3l9fTwvc3Bhbj5cbiAgICAgICAgICA8aW5wdXRcbiAgICAgICAgICAgIFtuZ0NsYXNzXT1cIltcbiAgICAgICAgICAgICAgY3goJ2lucHV0JyksXG4gICAgICAgICAgICAgIGN4KCdpbnB1dCcsICdtaW4nKVxuICAgICAgICAgICAgXVwiXG4gICAgICAgICAgICB0eXBlPVwibnVtYmVyXCJcbiAgICAgICAgICAgIFttaW5dPVwic3RhdGUucmFuZ2UubWluXCJcbiAgICAgICAgICAgIFttYXhdPVwic3RhdGUucmFuZ2UubWF4XCJcbiAgICAgICAgICAgIFtwbGFjZWhvbGRlcl09XCJzdGF0ZS5yYW5nZS5taW5cIlxuICAgICAgICAgICAgW3ZhbHVlXT1cIm1pbklucHV0VmFsdWVcIlxuICAgICAgICAgICAgW3N0ZXBdPVwic3RlcFwiXG4gICAgICAgICAgICAoY2hhbmdlKT1cImhhbmRsZUNoYW5nZSgkZXZlbnQsICdtaW4nKVwiXG4gICAgICAgICAgLz5cbiAgICAgICAgPC9sYWJlbD5cblxuICAgICAgICA8c3BhbiBbY2xhc3NdPVwiY3goJ3NlcGFyYXRvcicpXCI+e3tzZXBhcmF0b3J9fTwvc3Bhbj5cblxuICAgICAgICA8bGFiZWwgW2NsYXNzXT1cImN4KCdsYWJlbCcpXCI+XG4gICAgICAgICAgPHNwYW4gW2NsYXNzXT1cImN4KCdjdXJyZW5jeScpXCI+e3tjdXJyZW5jeX19PC9zcGFuPlxuICAgICAgICAgIDxpbnB1dFxuICAgICAgICAgICAgW25nQ2xhc3NdPVwiW1xuICAgICAgICAgICAgICBjeCgnaW5wdXQnKSxcbiAgICAgICAgICAgICAgY3goJ2lucHV0JywgJ21heCcpXG4gICAgICAgICAgICBdXCJcbiAgICAgICAgICAgIHR5cGU9XCJudW1iZXJcIlxuICAgICAgICAgICAgW21pbl09XCJzdGF0ZS5yYW5nZS5taW5cIlxuICAgICAgICAgICAgW21heF09XCJzdGF0ZS5yYW5nZS5tYXhcIlxuICAgICAgICAgICAgW3BsYWNlaG9sZGVyXT1cInN0YXRlLnJhbmdlLm1heFwiXG4gICAgICAgICAgICBbdmFsdWVdPVwibWF4SW5wdXRWYWx1ZVwiXG4gICAgICAgICAgICBbc3RlcF09XCJzdGVwXCJcbiAgICAgICAgICAgIChjaGFuZ2UpPVwiaGFuZGxlQ2hhbmdlKCRldmVudCwgJ21heCcpXCJcbiAgICAgICAgICAvPlxuICAgICAgICA8L2xhYmVsPlxuXG4gICAgICAgIDxidXR0b25cbiAgICAgICAgICBbY2xhc3NdPVwiY3goJ3N1Ym1pdCcpXCJcbiAgICAgICAgICAoY2xpY2spPVwiaGFuZGxlU3VibWl0KCRldmVudClcIlxuICAgICAgICA+XG4gICAgICAgICAge3tzdWJtaXRMYWJlbH19XG4gICAgICAgIDwvYnV0dG9uPlxuICAgICAgPC9mb3JtPlxuICAgIDwvZGl2PlxuICBgLFxufSlcbmV4cG9ydCBjbGFzcyBOZ0Fpc1JhbmdlSW5wdXQgZXh0ZW5kcyBUeXBlZEJhc2VXaWRnZXQ8XG4gIFJhbmdlV2lkZ2V0RGVzY3JpcHRpb24sXG4gIFJhbmdlQ29ubmVjdG9yUGFyYW1zXG4+IHtcbiAgLy8gcmVuZGVyaW5nIG9wdGlvbnNcbiAgQElucHV0KCkgcHVibGljIGN1cnJlbmN5OiBzdHJpbmcgPSAnJCc7XG4gIEBJbnB1dCgpIHB1YmxpYyBzZXBhcmF0b3I6IHN0cmluZyA9ICd0byc7XG4gIEBJbnB1dCgpIHB1YmxpYyBzdWJtaXRMYWJlbDogc3RyaW5nID0gJ0dvJztcblxuICAvLyBpbnN0YW5jZSBvcHRpb25zXG4gIEBJbnB1dCgpIHB1YmxpYyBhdHRyaWJ1dGU6IFJhbmdlQ29ubmVjdG9yUGFyYW1zWydhdHRyaWJ1dGUnXTtcbiAgQElucHV0KCkgcHVibGljIG1pbj86IFJhbmdlQ29ubmVjdG9yUGFyYW1zWydtaW4nXTtcbiAgQElucHV0KCkgcHVibGljIG1heD86IFJhbmdlQ29ubmVjdG9yUGFyYW1zWydtYXgnXTtcbiAgQElucHV0KCkgcHVibGljIHByZWNpc2lvbj86IFJhbmdlQ29ubmVjdG9yUGFyYW1zWydwcmVjaXNpb24nXSA9IDA7XG5cbiAgLy8gaW5uZXIgc3RhdGVcbiAgcHVibGljIG1pbklucHV0VmFsdWU/OiBudW1iZXI7XG4gIHB1YmxpYyBtYXhJbnB1dFZhbHVlPzogbnVtYmVyO1xuXG4gIGdldCBzdGVwKCkge1xuICAgIGNvbnN0IHByZWNpc2lvbiA9IHBhcnNlTnVtYmVySW5wdXQodGhpcy5wcmVjaXNpb24pO1xuICAgIHJldHVybiAxIC8gTWF0aC5wb3coMTAsIHByZWNpc2lvbik7XG4gIH1cblxuICBnZXQgY2FuUmVmaW5lKCkge1xuICAgIHJldHVybiB0aGlzLnN0YXRlLnJhbmdlLm1pbiAhPT0gdGhpcy5zdGF0ZS5yYW5nZS5tYXg7XG4gIH1cblxuICBwdWJsaWMgc3RhdGU6IFJhbmdlUmVuZGVyU3RhdGUgPSB7XG4gICAgcmFuZ2U6IHsgbWluOiB1bmRlZmluZWQsIG1heDogdW5kZWZpbmVkIH0sXG4gICAgcmVmaW5lOiBub29wLFxuICAgIHN0YXJ0OiBbMCwgMF0sXG4gICAgLy8gVE9ETzogdXNlIGNhblJlZmluZSAmIGZvcm1hdFxuICAgIGNhblJlZmluZTogZmFsc2UsXG4gICAgZm9ybWF0OiB7XG4gICAgICBmcm9tOiAoKSA9PiAnJyxcbiAgICAgIHRvOiAoKSA9PiAnJyxcbiAgICB9LFxuICAgIHNlbmRFdmVudDogdW5kZWZpbmVkLFxuICB9O1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIEBJbmplY3QoZm9yd2FyZFJlZigoKSA9PiBOZ0Fpc0luZGV4KSlcbiAgICBAT3B0aW9uYWwoKVxuICAgIHB1YmxpYyBwYXJlbnRJbmRleDogTmdBaXNJbmRleCxcbiAgICBASW5qZWN0KGZvcndhcmRSZWYoKCkgPT4gTmdBaXNJbnN0YW50U2VhcmNoKSlcbiAgICBwdWJsaWMgaW5zdGFudFNlYXJjaEluc3RhbmNlOiBOZ0Fpc0luc3RhbnRTZWFyY2hcbiAgKSB7XG4gICAgc3VwZXIoJ1JhbmdlSW5wdXQnKTtcbiAgfVxuXG4gIHB1YmxpYyBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmNyZWF0ZVdpZGdldChcbiAgICAgIGNvbm5lY3RSYW5nZSxcbiAgICAgIHtcbiAgICAgICAgYXR0cmlidXRlOiB0aGlzLmF0dHJpYnV0ZSxcbiAgICAgICAgbWF4OiBwYXJzZU51bWJlcklucHV0KHRoaXMubWF4KSxcbiAgICAgICAgbWluOiBwYXJzZU51bWJlcklucHV0KHRoaXMubWluKSxcbiAgICAgICAgcHJlY2lzaW9uOiBwYXJzZU51bWJlcklucHV0KHRoaXMucHJlY2lzaW9uKSxcbiAgICAgIH0sXG4gICAgICB7XG4gICAgICAgICQkd2lkZ2V0VHlwZTogJ2Fpcy5yYW5nZUlucHV0JyxcbiAgICAgIH1cbiAgICApO1xuXG4gICAgc3VwZXIubmdPbkluaXQoKTtcbiAgfVxuXG4gIHB1YmxpYyBoYW5kbGVDaGFuZ2UoZXZlbnQ6IGFueSwgdHlwZTogc3RyaW5nKSB7XG4gICAgY29uc3QgdmFsdWUgPSBwYXJzZU51bWJlcklucHV0KGV2ZW50LnRhcmdldC52YWx1ZSk7XG5cbiAgICBpZiAodHlwZSA9PT0gJ21pbicpIHtcbiAgICAgIHRoaXMubWluSW5wdXRWYWx1ZSA9IHZhbHVlO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLm1heElucHV0VmFsdWUgPSB2YWx1ZTtcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgaGFuZGxlU3VibWl0KGV2ZW50OiBFdmVudCkge1xuICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgdGhpcy5zdGF0ZS5yZWZpbmUoW3RoaXMubWluSW5wdXRWYWx1ZSwgdGhpcy5tYXhJbnB1dFZhbHVlXSk7XG4gIH1cbn1cbiJdfQ==