@firestitch/filter
Version:
191 lines • 14.8 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { ChangeDetectorRef, Component, Input, IterableDiffers, Inject, HostListener } from '@angular/core';
import { FILTER_DRAWER_DATA } from '../../injectors/filter-drawer-data';
import { OverlayRef } from '@angular/cdk/overlay';
import { FILTER_DRAWER_OVERLAY } from '../../injectors/filter-drawer-overlay';
var FilterDrawerComponent = /** @class */ (function () {
function FilterDrawerComponent(_differs, _cd, overlayRef, data) {
this._differs = _differs;
this._cd = _cd;
this.overlayRef = overlayRef;
this.data = data;
this.items = [];
this.sortBy = null;
this.sortDirection = null;
this.inline = false;
this.windowDesktop = false;
this.items = data.items;
this.showSortBy = data.showSortBy;
this.sortBy = data.sortBy;
this.sortDirection = data.sortDirection;
this._clear = data.clear;
this._done = data.done;
this._search = data.search;
this._filterChanged = data.filterChanged;
this._click = data.click;
this._differ = this._differs.find(this.items).create((/**
* @param {?} index
* @param {?} item
* @return {?}
*/
function (index, item) {
return item.model;
}));
this.updateWindowWidth();
}
/**
* @return {?}
*/
FilterDrawerComponent.prototype.updateWindowWidth = /**
* @return {?}
*/
function () {
this.windowDesktop = window.innerWidth > 1200;
};
/**
* @return {?}
*/
FilterDrawerComponent.prototype.ngDoCheck = /**
* @return {?}
*/
function () {
if (this._differ) {
/** @type {?} */
var changes = this._differ.diff(this.items);
if (changes) {
this._cd.detectChanges();
}
}
};
/**
* @return {?}
*/
FilterDrawerComponent.prototype.clear = /**
* @return {?}
*/
function () {
this._clear();
this.overlayRef.detach();
};
/**
* @return {?}
*/
FilterDrawerComponent.prototype.done = /**
* @return {?}
*/
function () {
this._done();
this.overlayRef.detach();
};
/**
* @param {?} event
* @return {?}
*/
FilterDrawerComponent.prototype.filterChanged = /**
* @param {?} event
* @return {?}
*/
function (event) {
this._filterChanged(event);
};
/**
* @return {?}
*/
FilterDrawerComponent.prototype.backdropClick = /**
* @return {?}
*/
function () {
this.done();
};
FilterDrawerComponent.decorators = [
{ type: Component, args: [{
template: "<div class=\"filters\">\n <div class=\"filters-wrap\">\n\n <div class=\"filter-by\">\n <mat-icon>filter_list</mat-icon>\n <span class=\"text\">Filter By</span>\n </div>\n\n <div class=\"filter-items\">\n <filter-item *ngFor=\"let filterItem of items\"\n class=\"filter-group\"\n [item]=\"filterItem\"\n (itemChanged)=\"filterChanged($event)\">\n </filter-item>\n\n <ng-container *ngIf=\"sortBy && sortBy.values && sortBy.values.length > 0 && showSortBy\">\n <filter-item class=\"filter-group sort\"\n [item]=\"sortBy\"\n (itemChanged)=\"filterChanged($event)\">\n </filter-item>\n <filter-item class=\"filter-group sort\"\n [item]=\"sortDirection\"\n (itemChanged)=\"filterChanged($event)\">\n </filter-item>\n </ng-container>\n </div>\n\n <div class=\"filter-actions\">\n <button type=\"button\" mat-button color=\"primary\" (click)=\"done()\">Done</button>\n <button type=\"button\" mat-button (click)=\"clear()\">Clear</button>\n </div>\n </div>\n</div>\n<div class=\"backdrop\" *ngIf=\"!windowDesktop\" (click)=\"backdropClick()\"></div>\n",
styles: [":host ::ng-deep mat-form-field{width:100%}.filter-by{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:30px 30px 10px}.filter-by mat-icon{margin-right:8px}.filter-by .text{font-weight:400;font-size:19px}.filter-actions{box-sizing:border-box;padding:18px 13px}.filter-actions button{margin-right:6px}.filter-actions button:last-child{margin-right:0}.filters{position:fixed;display:block;top:0;right:0;z-index:1002;bottom:0}.filters .filters-wrap{background:#fff;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);width:85vw;max-width:350px;display:flex;flex-direction:column;height:100%}.filters .filters-wrap .filter-items{overflow-y:auto;padding:10px 30px 0;box-sizing:border-box}.filters .filter-group{margin:10px 0 0}.filters .filter-group:first-child{margin:0}.filters .filter label{white-space:nowrap;color:rgba(0,0,0,.54)}.filters .filter .interface.interface-range,.filters .filter .interface.interface-range .mat-input-wrapper,.filters .filter .interface.interface-range input{text-align:center}.filters .filter .interface.interface-datetime fs-datetime.has-time .md-input{width:100%}.filters .filter .interface fs-datetime-range input{text-align:center}.filters .filter .filter-label{width:1%;white-space:nowrap;vertical-align:middle;padding-right:15px}.filters md-autocomplete-container md-input-container{margin:0}.filters .isolate{margin-top:-12px}.filters .isolate .interface{line-height:20px;padding-bottom:1.25em}.filters .isolate md-checkbox{margin:0 0 0 2px}.backdrop{position:fixed;top:0;bottom:0;left:0;right:0;z-index:900;outline:0}"]
}] }
];
/** @nocollapse */
FilterDrawerComponent.ctorParameters = function () { return [
{ type: IterableDiffers },
{ type: ChangeDetectorRef },
{ type: OverlayRef, decorators: [{ type: Inject, args: [FILTER_DRAWER_OVERLAY,] }] },
{ type: undefined, decorators: [{ type: Inject, args: [FILTER_DRAWER_DATA,] }] }
]; };
FilterDrawerComponent.propDecorators = {
updateWindowWidth: [{ type: HostListener, args: ['window:resize',] }],
items: [{ type: Input }],
showSortBy: [{ type: Input }],
sortBy: [{ type: Input }],
sortDirection: [{ type: Input }],
inline: [{ type: Input }]
};
return FilterDrawerComponent;
}());
export { FilterDrawerComponent };
if (false) {
/** @type {?} */
FilterDrawerComponent.prototype.items;
/** @type {?} */
FilterDrawerComponent.prototype.showSortBy;
/** @type {?} */
FilterDrawerComponent.prototype.sortBy;
/** @type {?} */
FilterDrawerComponent.prototype.sortDirection;
/** @type {?} */
FilterDrawerComponent.prototype.inline;
/**
* @type {?}
* @protected
*/
FilterDrawerComponent.prototype._differ;
/**
* @type {?}
* @protected
*/
FilterDrawerComponent.prototype._clear;
/**
* @type {?}
* @protected
*/
FilterDrawerComponent.prototype._done;
/**
* @type {?}
* @protected
*/
FilterDrawerComponent.prototype._search;
/**
* @type {?}
* @protected
*/
FilterDrawerComponent.prototype._filterChanged;
/**
* @type {?}
* @protected
*/
FilterDrawerComponent.prototype._click;
/** @type {?} */
FilterDrawerComponent.prototype.windowDesktop;
/**
* @type {?}
* @protected
*/
FilterDrawerComponent.prototype._differs;
/**
* @type {?}
* @protected
*/
FilterDrawerComponent.prototype._cd;
/**
* @type {?}
* @private
*/
FilterDrawerComponent.prototype.overlayRef;
/**
* @type {?}
* @private
*/
FilterDrawerComponent.prototype.data;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsdGVyLWRyYXdlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AZmlyZXN0aXRjaC9maWx0ZXIvIiwic291cmNlcyI6WyJhcHAvY29tcG9uZW50cy9maWx0ZXItZHJhd2VyL2ZpbHRlci1kcmF3ZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBRUwsaUJBQWlCLEVBQ2pCLFNBQVMsRUFFVCxLQUFLLEVBRUwsZUFBZSxFQUNmLE1BQU0sRUFDTixZQUFZLEVBQ2IsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFDeEUsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQ2xELE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHVDQUF1QyxDQUFDO0FBRzlFO0lBMkJFLCtCQUFzQixRQUF5QixFQUN6QixHQUFzQixFQUNPLFVBQXNCLEVBQ3pCLElBQUk7UUFIOUIsYUFBUSxHQUFSLFFBQVEsQ0FBaUI7UUFDekIsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUFDTyxlQUFVLEdBQVYsVUFBVSxDQUFZO1FBQ3pCLFNBQUksR0FBSixJQUFJLENBQUE7UUFqQnBDLFVBQUssR0FBeUIsRUFBRSxDQUFDO1FBRWpDLFdBQU0sR0FBRyxJQUFJLENBQUM7UUFDZCxrQkFBYSxHQUFHLElBQUksQ0FBQztRQUNyQixXQUFNLEdBQUcsS0FBSyxDQUFDO1FBUXhCLGtCQUFhLEdBQUcsS0FBSyxDQUFDO1FBTTNCLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQztRQUN4QixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUM7UUFDbEMsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDO1FBQzFCLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQztRQUN4QyxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUM7UUFDekIsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQztRQUMzQixJQUFJLENBQUMsY0FBYyxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUM7UUFDekMsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDO1FBQ3pCLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLE1BQU07Ozs7O1FBQXFCLFVBQUMsS0FBSyxFQUFFLElBQUk7WUFDbkYsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDO1FBQ3BCLENBQUMsRUFBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLGlCQUFpQixFQUFFLENBQUM7SUFDM0IsQ0FBQzs7OztJQXBDRCxpREFBaUI7OztJQURqQjtRQUVFLElBQUksQ0FBQyxhQUFhLEdBQUcsTUFBTSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUM7SUFDaEQsQ0FBQzs7OztJQW9DTSx5Q0FBUzs7O0lBQWhCO1FBQ0UsSUFBSSxJQUFJLENBQUMsT0FBTyxFQUFFOztnQkFDVixPQUFPLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQztZQUU3QyxJQUFJLE9BQU8sRUFBRTtnQkFDWCxJQUFJLENBQUMsR0FBRyxDQUFDLGFBQWEsRUFBRSxDQUFDO2FBQzFCO1NBQ0Y7SUFDSCxDQUFDOzs7O0lBRU0scUNBQUs7OztJQUFaO1FBQ0UsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBQ2QsSUFBSSxDQUFDLFVBQVUsQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUMzQixDQUFDOzs7O0lBRU0sb0NBQUk7OztJQUFYO1FBQ0UsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ2IsSUFBSSxDQUFDLFVBQVUsQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUMzQixDQUFDOzs7OztJQUVNLDZDQUFhOzs7O0lBQXBCLFVBQXFCLEtBQUs7UUFDeEIsSUFBSSxDQUFDLGNBQWMsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM3QixDQUFDOzs7O0lBRU0sNkNBQWE7OztJQUFwQjtRQUNFLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUNkLENBQUM7O2dCQXpFRixTQUFTLFNBQUM7b0JBQ1QsNnZDQUE2Qzs7aUJBSTlDOzs7O2dCQWZDLGVBQWU7Z0JBTGYsaUJBQWlCO2dCQVdWLFVBQVUsdUJBaUNKLE1BQU0sU0FBQyxxQkFBcUI7Z0RBQzVCLE1BQU0sU0FBQyxrQkFBa0I7OztvQ0F0QnJDLFlBQVksU0FBQyxlQUFlO3dCQUs1QixLQUFLOzZCQUNMLEtBQUs7eUJBQ0wsS0FBSztnQ0FDTCxLQUFLO3lCQUNMLEtBQUs7O0lBeURSLDRCQUFDO0NBQUEsQUExRUQsSUEwRUM7U0FwRVkscUJBQXFCOzs7SUFPaEMsc0NBQWlEOztJQUNqRCwyQ0FBMkI7O0lBQzNCLHVDQUE4Qjs7SUFDOUIsOENBQXFDOztJQUNyQyx1Q0FBK0I7Ozs7O0lBRS9CLHdDQUFzRDs7Ozs7SUFDdEQsdUNBQTJCOzs7OztJQUMzQixzQ0FBMEI7Ozs7O0lBQzFCLHdDQUE0Qjs7Ozs7SUFDNUIsK0NBQW1DOzs7OztJQUNuQyx1Q0FBMkI7O0lBQzNCLDhDQUE2Qjs7Ozs7SUFFakIseUNBQW1DOzs7OztJQUNuQyxvQ0FBZ0M7Ozs7O0lBQ2hDLDJDQUE2RDs7Ozs7SUFDN0QscUNBQXdDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIERvQ2hlY2ssXG4gIElucHV0LFxuICBJdGVyYWJsZURpZmZlcixcbiAgSXRlcmFibGVEaWZmZXJzLFxuICBJbmplY3QsXG4gIEhvc3RMaXN0ZW5lclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZzRmlsdGVyQ29uZmlnSXRlbSB9IGZyb20gJy4uLy4uL21vZGVscy9maWx0ZXItaXRlbSc7XG5pbXBvcnQgeyBGSUxURVJfRFJBV0VSX0RBVEEgfSBmcm9tICcuLi8uLi9pbmplY3RvcnMvZmlsdGVyLWRyYXdlci1kYXRhJztcbmltcG9ydCB7IE92ZXJsYXlSZWYgfSBmcm9tICdAYW5ndWxhci9jZGsvb3ZlcmxheSc7XG5pbXBvcnQgeyBGSUxURVJfRFJBV0VSX09WRVJMQVkgfSBmcm9tICcuLi8uLi9pbmplY3RvcnMvZmlsdGVyLWRyYXdlci1vdmVybGF5JztcblxuXG5AQ29tcG9uZW50KHtcbiAgdGVtcGxhdGVVcmw6ICcuL2ZpbHRlci1kcmF3ZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnZmlsdGVyLWRyYXdlci5jb21wb25lbnQuc2NzcyddXG4gIC8vQ29tbWVudGVkIG91dCBiZWNhdXNlIGZpbHRlciBpdGVtcyBhcmUgbm90IHVwZGF0aW5nIHdpdGggYSBkZWxheWVkIG9ic2VydmFibGUuIE5lZWQgdG8gZmlndXJlIHRoaXMgb3V0LlxuICAvL2NoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBGaWx0ZXJEcmF3ZXJDb21wb25lbnQgaW1wbGVtZW50cyBEb0NoZWNrIHtcblxuICBASG9zdExpc3RlbmVyKCd3aW5kb3c6cmVzaXplJylcbiAgdXBkYXRlV2luZG93V2lkdGgoKSB7XG4gICAgdGhpcy53aW5kb3dEZXNrdG9wID0gd2luZG93LmlubmVyV2lkdGggPiAxMjAwO1xuICB9XG5cbiAgQElucHV0KCkgcHVibGljIGl0ZW1zOiBGc0ZpbHRlckNvbmZpZ0l0ZW1bXSA9IFtdO1xuICBASW5wdXQoKSBwdWJsaWMgc2hvd1NvcnRCeTtcbiAgQElucHV0KCkgcHVibGljIHNvcnRCeSA9IG51bGw7XG4gIEBJbnB1dCgpIHB1YmxpYyBzb3J0RGlyZWN0aW9uID0gbnVsbDtcbiAgQElucHV0KCkgcHVibGljIGlubGluZSA9IGZhbHNlO1xuXG4gIHByb3RlY3RlZCBfZGlmZmVyOiBJdGVyYWJsZURpZmZlcjxGc0ZpbHRlckNvbmZpZ0l0ZW0+O1xuICBwcm90ZWN0ZWQgX2NsZWFyOiBGdW5jdGlvbjtcbiAgcHJvdGVjdGVkIF9kb25lOiBGdW5jdGlvbjtcbiAgcHJvdGVjdGVkIF9zZWFyY2g6IEZ1bmN0aW9uO1xuICBwcm90ZWN0ZWQgX2ZpbHRlckNoYW5nZWQ6IEZ1bmN0aW9uO1xuICBwcm90ZWN0ZWQgX2NsaWNrOiBGdW5jdGlvbjtcbiAgcHVibGljIHdpbmRvd0Rlc2t0b3AgPSBmYWxzZTtcblxuICBjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgX2RpZmZlcnM6IEl0ZXJhYmxlRGlmZmVycyxcbiAgICAgICAgICAgICAgcHJvdGVjdGVkIF9jZDogQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gICAgICAgICAgICAgIEBJbmplY3QoRklMVEVSX0RSQVdFUl9PVkVSTEFZKSBwcml2YXRlIG92ZXJsYXlSZWY6IE92ZXJsYXlSZWYsXG4gICAgICAgICAgICAgIEBJbmplY3QoRklMVEVSX0RSQVdFUl9EQVRBKSBwcml2YXRlIGRhdGEpIHtcbiAgICB0aGlzLml0ZW1zID0gZGF0YS5pdGVtcztcbiAgICB0aGlzLnNob3dTb3J0QnkgPSBkYXRhLnNob3dTb3J0Qnk7XG4gICAgdGhpcy5zb3J0QnkgPSBkYXRhLnNvcnRCeTtcbiAgICB0aGlzLnNvcnREaXJlY3Rpb24gPSBkYXRhLnNvcnREaXJlY3Rpb247XG4gICAgdGhpcy5fY2xlYXIgPSBkYXRhLmNsZWFyO1xuICAgIHRoaXMuX2RvbmUgPSBkYXRhLmRvbmU7XG4gICAgdGhpcy5fc2VhcmNoID0gZGF0YS5zZWFyY2g7XG4gICAgdGhpcy5fZmlsdGVyQ2hhbmdlZCA9IGRhdGEuZmlsdGVyQ2hhbmdlZDtcbiAgICB0aGlzLl9jbGljayA9IGRhdGEuY2xpY2s7XG4gICAgdGhpcy5fZGlmZmVyID0gdGhpcy5fZGlmZmVycy5maW5kKHRoaXMuaXRlbXMpLmNyZWF0ZTxGc0ZpbHRlckNvbmZpZ0l0ZW0+KChpbmRleCwgaXRlbSkgPT4ge1xuICAgICAgcmV0dXJuIGl0ZW0ubW9kZWw7XG4gICAgfSk7XG5cbiAgICB0aGlzLnVwZGF0ZVdpbmRvd1dpZHRoKCk7XG4gIH1cblxuICBwdWJsaWMgbmdEb0NoZWNrKCkge1xuICAgIGlmICh0aGlzLl9kaWZmZXIpIHtcbiAgICAgIGNvbnN0IGNoYW5nZXMgPSB0aGlzLl9kaWZmZXIuZGlmZih0aGlzLml0ZW1zKTtcblxuICAgICAgaWYgKGNoYW5nZXMpIHtcbiAgICAgICAgdGhpcy5fY2QuZGV0ZWN0Q2hhbmdlcygpO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyBjbGVhcigpIHtcbiAgICB0aGlzLl9jbGVhcigpO1xuICAgIHRoaXMub3ZlcmxheVJlZi5kZXRhY2goKTtcbiAgfVxuXG4gIHB1YmxpYyBkb25lKCkge1xuICAgIHRoaXMuX2RvbmUoKTtcbiAgICB0aGlzLm92ZXJsYXlSZWYuZGV0YWNoKCk7XG4gIH1cblxuICBwdWJsaWMgZmlsdGVyQ2hhbmdlZChldmVudCkge1xuICAgIHRoaXMuX2ZpbHRlckNoYW5nZWQoZXZlbnQpO1xuICB9XG5cbiAgcHVibGljIGJhY2tkcm9wQ2xpY2soKSB7XG4gICAgdGhpcy5kb25lKCk7XG4gIH1cbn1cbiJdfQ==