ontotext-reusable-ui-components
Version:
Unified reusable UI components designed for the Ontotext ecosystem.
1,983 lines • 111 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common'), require('@angular/forms'), require('rxjs/operators'), require('@angular/material/autocomplete'), require('@angular/cdk/keycodes'), require('@angular/material/input'), require('@angular/platform-browser/animations'), require('@angular/material/core'), require('@angular/material/select'), require('@angular/material/chips'), require('@angular/material/icon'), require('@angular/material/button'), require('@ngneat/transloco'), require('@angular/cdk/drag-drop'), require('@angular/cdk/table'), require('@angular/material/table'), require('@angular/material/sort'), require('@angular/material/paginator'), require('@w11k/ngx-componentdestroyed'), require('@angular/material/checkbox'), require('@angular/material/form-field'), require('@angular/material/datepicker'), require('moment'), require('@angular/cdk/portal'), require('@angular/material-moment-adapter'), require('@angular/material/slide-toggle'), require('@angular/material/slider')) :
typeof define === 'function' && define.amd ? define('onto-search', ['exports', '@angular/core', 'rxjs', '@angular/common', '@angular/forms', 'rxjs/operators', '@angular/material/autocomplete', '@angular/cdk/keycodes', '@angular/material/input', '@angular/platform-browser/animations', '@angular/material/core', '@angular/material/select', '@angular/material/chips', '@angular/material/icon', '@angular/material/button', '@ngneat/transloco', '@angular/cdk/drag-drop', '@angular/cdk/table', '@angular/material/table', '@angular/material/sort', '@angular/material/paginator', '@w11k/ngx-componentdestroyed', '@angular/material/checkbox', '@angular/material/form-field', '@angular/material/datepicker', 'moment', '@angular/cdk/portal', '@angular/material-moment-adapter', '@angular/material/slide-toggle', '@angular/material/slider'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['onto-search'] = {}, global.ng.core, global.rxjs, global.ng.common, global.ng.forms, global.rxjs.operators, global.ng.material.autocomplete, global.ng.cdk.keycodes, global.ng.material.input, global.ng.platformBrowser.animations, global.ng.material.core, global.ng.material.select, global.ng.material.chips, global.ng.material.icon, global.ng.material.button, global.transloco, global.ng.cdk.dragDrop, global.ng.cdk.table, global.ng.material.table, global.ng.material.sort, global.ng.material.paginator, global.ngxComponentdestroyed, global.ng.material.checkbox, global.ng.material.formField, global.ng.material.datepicker, global.moment, global.ng.cdk.portal, global.ng.materialMomentAdapter, global.ng.material.slideToggle, global.ng.material.slider));
}(this, (function (exports, core, rxjs, common, forms, operators, autocomplete, keycodes, input, animations, core$1, select, chips, icon, button, transloco, dragDrop, table, table$1, sort, paginator, ngxComponentdestroyed, checkbox, formField, datepicker, moment, portal, materialMomentAdapter, slideToggle, slider) { 'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
var OntoSearchFieldComponent = /** @class */ (function () {
function OntoSearchFieldComponent() {
/**
* Emits selected search phrases on search button press.
*/
this.onSearch = new core.EventEmitter();
/**
* On key press event emitter.
*/
this.onKeyPress = new core.EventEmitter();
}
OntoSearchFieldComponent.prototype.ngOnInit = function () {
this.states = this.autocompleteData || rxjs.of([]);
};
OntoSearchFieldComponent.prototype.onSearchEvent = function ($event) {
this.onSearch.emit($event);
};
OntoSearchFieldComponent.prototype.onKeyPressEvent = function ($event) {
this.onKeyPress.emit($event);
};
return OntoSearchFieldComponent;
}());
OntoSearchFieldComponent.decorators = [
{ type: core.Component, args: [{
selector: 'onto-search-field',
template: "<app-search\n [states]=\"states\"\n [autocompleteOptionTemplate]=\"customTemplate || defaultTemplate\"\n [preselectedStatesList]=\"selectedList || []\"\n [enableInnerAutocompleteFiltration]=\"enableInnerAutocompleteFiltration\"\n [searchResultMappingFunction]=\"searchResultMappingFunction\"\n (onSearch)=\"onSearchEvent($event)\"\n (onKeyPress)=\"onKeyPressEvent($event)\"></app-search>\n\n <ng-template #defaultTemplate let-item>\n <span [attr.appCypressData]=\"'state-label-' + item.index\" class=\"state-label\">{{item.state.label}}</span>\n <span [attr.appCypressData]=\"'state-type-' + item.index\" class=\"state-type\">{{item.state.type}}</span> <br/>\n <span [attr.appCypressData]=\"'state-labels-' + item.index\" class=\"state-labels\"><small>{{item.state.labels}}</small></span>\n</ng-template>\n",
styles: [".state-type{float:right}.state-labels{line-height:1em;white-space:normal}::ng-deep .state-suggestion{background-color:#add8e6!important;color:#000!important}"]
},] }
];
OntoSearchFieldComponent.propDecorators = {
customTemplate: [{ type: core.Input }],
selectedList: [{ type: core.Input }],
autocompleteData: [{ type: core.Input }],
enableInnerAutocompleteFiltration: [{ type: core.Input }],
searchResultMappingFunction: [{ type: core.Input }],
onSearch: [{ type: core.Output }],
onKeyPress: [{ type: core.Output }]
};
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b)
if (Object.prototype.hasOwnProperty.call(b, p))
d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); };
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try {
step(generator.next(value));
}
catch (e) {
reject(e);
} }
function rejected(value) { try {
step(generator["throw"](value));
}
catch (e) {
reject(e);
} }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function () { if (t[0] & 1)
throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f)
throw new TypeError("Generator is already executing.");
while (_)
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
return t;
if (y = 0, t)
op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return { value: op[1], done: false };
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2])
_.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
}
catch (e) {
op = [6, e];
y = 0;
}
finally {
f = t = 0;
}
if (op[0] & 5)
throw op[1];
return { value: op[0] ? op[1] : void 0, done: true };
}
}
var __createBinding = Object.create ? (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
}) : (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
o[k2] = m[k];
});
function __exportStar(m, o) {
for (var p in m)
if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
__createBinding(o, m, p);
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m)
return m.call(o);
if (o && typeof o.length === "number")
return {
next: function () {
if (o && i >= o.length)
o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++)
s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
;
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n])
i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try {
step(g[n](v));
}
catch (e) {
settle(q[0][3], e);
} }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length)
resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) {
Object.defineProperty(cooked, "raw", { value: raw });
}
else {
cooked.raw = raw;
}
return cooked;
}
;
var __setModuleDefault = Object.create ? (function (o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function (o, v) {
o["default"] = v;
};
function __importStar(mod) {
if (mod && mod.__esModule)
return mod;
var result = {};
if (mod != null)
for (var k in mod)
if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
__createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, privateMap) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to get private field on non-instance");
}
return privateMap.get(receiver);
}
function __classPrivateFieldSet(receiver, privateMap, value) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to set private field on non-instance");
}
privateMap.set(receiver, value);
return value;
}
/**
* Configuration of the search input and mat-chip integration.
*/
var SearchFieldConfiguration = /** @class */ (function () {
function SearchFieldConfiguration() {
}
return SearchFieldConfiguration;
}());
/**
* Determines whether a selected phrase can be selected
*/
SearchFieldConfiguration.selectable = true;
/**
* Determines whether a selected phrase can be deleted from list
*/
SearchFieldConfiguration.removable = true;
/**
* A list of characters that can be used as a phrase separator
*/
SearchFieldConfiguration.separatorKeysCodes = [keycodes.ENTER, keycodes.COMMA];
var SearchComponent = /** @class */ (function () {
function SearchComponent() {
/**
* On search event emitter.
*/
this.onSearch = new core.EventEmitter();
/**
* On key press emitter.
*/
this.onKeyPress = new core.EventEmitter();
this.stateCtrl = new forms.FormControl();
this.selectable = SearchFieldConfiguration.selectable;
this.removable = SearchFieldConfiguration.removable;
this.separatorKeysCodes = SearchFieldConfiguration.separatorKeysCodes;
this.defaultSearchResultMappingFunction = function (data) { return data; };
}
SearchComponent.prototype.ngOnInit = function () {
var _this = this;
this.states.subscribe(function (states) {
_this._states = states;
});
this.subscribeAutocompleteFilter();
this.currentTemplate = this.autocompleteOptionTemplate;
this.searchResultMappingFunction = this.searchResultMappingFunction || this.defaultSearchResultMappingFunction;
};
SearchComponent.prototype.ngOnChanges = function (changes) {
var _a;
if ((_a = changes === null || changes === void 0 ? void 0 : changes.preselectedStatesList) === null || _a === void 0 ? void 0 : _a.currentValue) {
this.statesList = new Set(__spread(this.preselectedStatesList));
}
};
SearchComponent.prototype.subscribeAutocompleteFilter = function () {
var _this = this;
var enableAutocomplete = this.enableInnerAutocompleteFiltration || false;
if (enableAutocomplete) {
this.filteredStates = this.stateCtrl.valueChanges
.pipe(operators.startWith(''), operators.map(function (state) { return state ? _this.filterStates(state) : []; }));
}
else {
this.filteredStates = this.states;
}
};
SearchComponent.prototype.filterStates = function (value) {
var filterValue = typeof value === 'string' ? value.toLowerCase() : value;
return this._states.filter(function (state) { return state.label.toLowerCase().indexOf(filterValue) === 0; });
};
SearchComponent.prototype.add = function (event) {
var input = event.input;
var value = (event.value || '').trim();
if (value) {
this.statesList.add(value);
}
if (input) {
input.value = '';
}
this.stateCtrl.setValue(null);
this.autocomplete.closePanel();
};
SearchComponent.prototype.remove = function (state) {
this.statesList.delete(state);
this.stateCtrl.setValue(null);
};
SearchComponent.prototype.selected = function (event) {
this.statesList.add(event.option.value);
this.statesInput.nativeElement.value = '';
this.stateCtrl.setValue(null);
};
SearchComponent.prototype.search = function () {
var _this = this;
this.onSearch.emit(__spread(this.statesList).map(function (state) {
if (state.label) {
return _this.searchResultMappingFunction(state);
}
return state;
}));
};
SearchComponent.prototype.onInputChange = function (value) {
this.onKeyPress.emit(value);
};
return SearchComponent;
}());
SearchComponent.decorators = [
{ type: core.Component, args: [{
selector: 'app-search',
template: "<div class=\"search-field-component\" appCypressData=\"search-field-component\">\n <div class=\"selection-list\">\n <mat-form-field class=\"state-selection-list\">\n <mat-chip-list #selectionList aria-label=\"Search selection\" appCypressData=\"search-field-selection\">\n <mat-chip\n *ngFor=\"let state of statesList; let index = index\"\n [selectable]=\"selectable\"\n [removable]=\"removable\"\n (removed)=\"remove(state)\"\n [ngClass]=\"state.label ? 'state-suggestion' : 'state-free-text'\"\n [attr.appCypressData]=\"'state-selection-' + index\">\n {{state.label || state}}\n <mat-icon matChipRemove *ngIf=\"removable\" [attr.appCypressData]=\"'state-cancel-' + index\">cancel</mat-icon>\n </mat-chip>\n <input\n placeholder=\"{{'ONTO_SEARCH.SEARCH_PLACEHOLDER' | transloco}}\"\n #statesInput\n [formControl]=\"stateCtrl\"\n [matAutocomplete]=\"auto\"\n [matChipInputFor]=\"selectionList\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n (matChipInputTokenEnd)=\"add($event)\"\n (input)=\"onInputChange($event.target.value)\"\n appCypressData=\"search-field-input\">\n </mat-chip-list>\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n <mat-option class=\"state-option\" *ngFor=\"let state of filteredStates | async; let index = index\" [value]=\"state\">\n <ng-container *ngTemplateOutlet=\"currentTemplate; context: {$implicit: {state: state, index: index}}\">\n </ng-container>\n </mat-option>\n </mat-autocomplete>\n </mat-form-field>\n </div>\n <button class=\"search-field-button\" mat-raised-button (click)=\"search()\"\n appCypressData=\"search-field-button\">{{'ONTO_SEARCH.BUTTON.SEARCH' | transloco}}</button>\n</div>\n",
styles: [".search-field-component{align-items:center;box-sizing:border-box;display:flex;flex-direction:row;height:100%;place-content:center space-between;width:100%}.search-field-component .selection-list{box-sizing:border-box;flex:1 1 100%;max-width:100%}.search-field-component .state-selection-list{display:inherit}button.search-field-button{margin-left:1em}.state-option{height:auto;line-height:1.5em;padding:1em 0;word-wrap:break-word}"]
},] }
];
SearchComponent.propDecorators = {
states: [{ type: core.Input }],
preselectedStatesList: [{ type: core.Input }],
autocompleteOptionTemplate: [{ type: core.Input }],
enableInnerAutocompleteFiltration: [{ type: core.Input }],
searchResultMappingFunction: [{ type: core.Input }],
onSearch: [{ type: core.Output }],
onKeyPress: [{ type: core.Output }],
statesInput: [{ type: core.ViewChild, args: ['statesInput',] }],
autocomplete: [{ type: core.ViewChild, args: [autocomplete.MatAutocompleteTrigger,] }]
};
var ONTO_SEARCH = {
BUTTON: {
SEARCH: "Search"
},
SEARCH_PLACEHOLDER: "Search..."
};
var en = {
ONTO_SEARCH: ONTO_SEARCH
};
var CypressDataDirective = /** @class */ (function () {
function CypressDataDirective(el, renderer) {
this.el = el;
this.renderer = renderer;
if (!core.isDevMode()) {
renderer.removeAttribute(el.nativeElement, 'appCypressData');
}
}
return CypressDataDirective;
}());
CypressDataDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[appCypressData]',
},] }
];
CypressDataDirective.ctorParameters = function () { return [
{ type: core.ElementRef },
{ type: core.Renderer2 }
]; };
var DirectivesModule = /** @class */ (function () {
function DirectivesModule() {
}
return DirectivesModule;
}());
DirectivesModule.decorators = [
{ type: core.NgModule, args: [{
imports: [],
declarations: [
CypressDataDirective,
],
exports: [
CypressDataDirective,
],
},] }
];
var translocoConfiguration = {
availableLangs: ['en'],
fallbackLang: ['en'],
defaultLang: 'en',
prodMode: true,
reRenderOnLangChange: true,
missingHandler: {
useFallbackTranslation: true,
logMissingKey: true,
},
};
var ɵ0 = translocoConfiguration;
var OntoSearchFieldModule = /** @class */ (function () {
function OntoSearchFieldModule(translocoService) {
this.translocoService = translocoService;
this.translocoService.setTranslation(en, 'en');
}
return OntoSearchFieldModule;
}());
OntoSearchFieldModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [OntoSearchFieldComponent, SearchComponent],
exports: [
OntoSearchFieldComponent,
],
imports: [
common.CommonModule,
forms.ReactiveFormsModule,
autocomplete.MatAutocompleteModule,
input.MatInputModule,
forms.FormsModule,
animations.BrowserAnimationsModule,
core$1.MatOptionModule,
select.MatSelectModule,
chips.MatChipsModule,
icon.MatIconModule,
button.MatButtonModule,
transloco.TranslocoModule,
DirectivesModule,
],
providers: [
{
provide: transloco.TRANSLOCO_CONFIG,
useValue: ɵ0,
},
],
},] }
];
OntoSearchFieldModule.ctorParameters = function () { return [
{ type: transloco.TranslocoService }
]; };
var OntoSearchResultsComponent = /** @class */ (function () {
function OntoSearchResultsComponent() {
/**
* Fired whenever there is change in sorting column or direction.
* Sends a {@link Sort} object
*/
this.sortData = new core.EventEmitter();
this.initialSort = true;
}
OntoSearchResultsComponent.prototype.ngOnChanges = function (changes) {
if (changes.config && changes.config.currentValue) {
if (this.initialSort) {
this.sortColumnConfigurations();
this.initialSort = false;
}
this.setDisplayColumns(__spread(this.getVisibleColumnNames()));
}
};
OntoSearchResultsComponent.prototype.reorderColumns = function (event) {
dragDrop.moveItemInArray(this.config.columnConfigurations, this.findColumnConfigIndexByName(this.displayColumns[event.previousIndex]), this.findColumnConfigIndexByName(this.displayColumns[event.currentIndex]));
this.setDisplayColumns(this.getVisibleColumnNames());
};
OntoSearchResultsComponent.prototype.findColumnConfigIndexByName = function (name) {
return this.config.columnConfigurations.findIndex(function (columnConfig) { return columnConfig.name === name; });
};
/**
* Sorts the column configurations by permanent columns first
*/
OntoSearchResultsComponent.prototype.sortColumnConfigurations = function () {
var permanentCC = this.getFilteredColumnConfigs(function (column) { return column.permanent; });
var dynamicCC = this.getFilteredColumnConfigs(function (column) { return !column.permanent; });
this.config.columnConfigurations = __spread(permanentCC, dynamicCC);
};
OntoSearchResultsComponent.prototype.setDisplayColumns = function (columnNamesArray) {
this.displayColumns = columnNamesArray;
};
OntoSearchResultsComponent.prototype.getFilteredColumnConfigs = function (filterPredicate) {
return this.config.columnConfigurations.filter(filterPredicate);
};
OntoSearchResultsComponent.prototype.getVisibleColumnNames = function () {
return this.getFilteredColumnConfigs(function (column) { return column.permanent || !column.hidden; })
.map(function (column) { return column.name; });
};
return OntoSearchResultsComponent;
}());
OntoSearchResultsComponent.decorators = [
{ type: core.Component, args: [{
selector: 'onto-search-results',
template: "<div class=\"table-component\" [ngClass]=\"componentClass\" appCypressData=\"table-component\">\n <table *ngIf=\"config\" cdk-table [dataSource]=\"datasource\"\n matSort (matSortChange)=\"sortData.next($event)\"\n [matSortDisabled]=\"!config.enableSort\" [matSortDisableClear]=\"true\"\n [matSortActive]=\"sort?.active\" [matSortDirection]=\"sort?.direction\"\n class=\"onto-table onto-table-fixed-layout\" appCypressData=\"onto-table\"\n cdkDropList cdkDropListLockAxis=\"x\" cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"reorderColumns($event)\">\n <ng-container *ngFor=\"let columnConfig of config.columnConfigurations; let i=index;\"\n cdkColumnDef=\"{{columnConfig.name}}\">\n <th cdk-header-cell id=\"{{columnConfig.name}}\"\n class=\"onto-table-header-cell {{'onto-table-column-' + columnConfig.name}}\"\n *cdkHeaderCellDef appCypressData=\"onto-table-header-cell\"\n mat-sort-header [disabled]=\"!columnConfig.enableSort\"\n cdkDrag cdkDragLockAxis=\"x\">\n <div>{{columnConfig.label}}</div>\n </th>\n <td cdk-cell class=\"onto-table-cell {{'onto-table-column-' + columnConfig.name}}\"\n *cdkCellDef=\"let row\" appCypressData=\"onto-table-cell\">\n <div>\n <ng-container *ngIf=\"columnConfig.dataFunction; else cellTemplate\">\n {{columnConfig.dataFunction(row)}}\n </ng-container>\n <ng-template #cellTemplate [ngTemplateOutlet]=\"columnConfig.dataTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: row}\"></ng-template>\n </div>\n </td>\n <ng-container *ngIf=\"config.showFooter\">\n <td cdk-footer-cell\n class=\"onto-table-footer-cell {{'onto-table-column-' + columnConfig.name}}\"\n *cdkFooterCellDef appCypressData=\"onto-table-footer-cell\">\n <div>{{columnConfig.footerFunction(datasource, columnConfig)}}</div>\n </td>\n </ng-container>\n </ng-container>\n\n <tr cdk-header-row class=\"onto-table-header-row\" appCypressData=\"onto-table-header-row\"\n *cdkHeaderRowDef=\"displayColumns\"></tr>\n <tr cdk-row class=\"onto-table-row\" appCypressData=\"onto-table-row\"\n *cdkRowDef=\"let row; columns: displayColumns\"></tr>\n <ng-container *ngIf=\"config.showFooter\">\n <tr cdk-footer-row class=\"onto-table-footer-row\" appCypressData=\"onto-table-footer-row\"\n *cdkFooterRowDef=\"displayColumns\"></tr>\n </ng-container>\n </table>\n</div>\n",
styles: [":host{width:100%}.onto-table-fixed-layout{table-layout:fixed}.onto-table{background:#fff;border-spacing:0;display:table;font-family:Roboto,sans-serif;width:100%}.onto-table-footer-row,.onto-table-header-row,.onto-table-row{align-items:center;border-style:solid;border-width:0 0 1px;box-sizing:border-box;display:flex}.onto-table-header-row{height:56px}.onto-table-footer-row,.onto-table-row{min-height:48px}.onto-table-cell,.onto-table-footer-cell,.onto-table-header-cell{align-items:center;border-bottom-color:#000;display:flex;flex:1;font-size:16px;font-weight:400;height:100%;min-height:inherit;overflow:hidden;padding:0;word-wrap:break-word}.onto-table-cell div,.onto-table-footer-cell div,.onto-table-header-cell div{padding:0}.onto-table-cell div:first-of-type,.onto-table-footer-cell div:first-of-type,.onto-table-header-cell div:first-of-type{padding-left:24px}.onto-table-cell div:last-of-type,.onto-table-footer-cell div:last-of-type,.onto-table-header-cell div:last-of-type{padding-right:24px}.onto-table-header-cell{text-align:left}.onto-table-cell,.onto-table-footer-cell{font-size:14px}.cdk-drag-preview{box-sizing:border-box;position:relative}.cdk-drag-preview:after{border:1px solid rgba(0,0,0,.4);border-radius:4px;bottom:0;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);content:\"\";left:5px;position:absolute;right:5px;top:0}.cdk-drag-placeholder{color:transparent;position:relative;transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-placeholder:after{background:rgba(0,0,0,.1);border:1px dashed rgba(0,0,0,.4);border-radius:4px;bottom:0;content:\"\";left:5px;position:absolute;right:5px;top:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}"]
},] }
];
OntoSearchResultsComponent.propDecorators = {
datasource: [{ type: core.Input }],
config: [{ type: core.Input }],
sort: [{ type: core.Input }],
componentClass: [{ type: core.Input }],
sortData: [{ type: core.Output }]
};
var OntoSearchResultsModule = /** @class */ (function () {
function OntoSearchResultsModule() {
}
return OntoSearchResultsModule;
}());
OntoSearchResultsModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [OntoSearchResultsComponent],
exports: [OntoSearchResultsComponent],
imports: [
table.CdkTableModule,
common.CommonModule,
DirectivesModule,
table$1.MatTableModule,
sort.MatSortModule,
dragDrop.DragDropModule
],
},] }
];
var OntoSearchPaginatorComponent = /** @class */ (function () {
function OntoSearchPaginatorComponent(keyValueDiffer) {
this.keyValueDiffer = keyValueDiffer;
/**
* Fires when there is a change to page or page size.
* Emits an {@link PaginatorData} object
*/
this.pageChanged = new core.EventEmitter();
// Default and initial values
this.length = 0;
this.pageSize = 10;
this.pageSizeOptions = [5, 10, 20];
this.pageIndex = 0;
}
/**
* Takes care of change detection in pageOptions properties
*/
OntoSearchPaginatorComponent.prototype.ngDoCheck = function () {
if (this.paginatorDataDiff) {
var changes = this.paginatorDataDiff.diff(this.paginatorData);
if (changes) {
this.configurationChanged(changes);
}
}
};
/**
* Monitors changes to inputs and sets corresponding internal properties
* @param changes - input changes
*/
OntoSearchPaginatorComponent.prototype.ngOnChanges = function (changes) {
if (changes.paginatorData && changes.paginatorData.currentValue) {
this.paginatorDataDiff = this.keyValueDiffer.find(this.paginatorData).create();
this.setInternalPaginatorDataProperties(this.paginatorData);
}
if (changes.pageOptions && changes.pageOptions.currentValue) {
this.pageSizeOptions = changes.pageOptions.currentValue;
}
};
OntoSearchPaginatorComponent.prototype.onPageChanged = function (pageEvent) {
var pageData = {
pageIndex: pageEvent.pageIndex,
pageSize: pageEvent.pageSize,
length: pageEvent.length
};
this.pageChanged.next(pageData);
};
/**
* Applies changes from pageOption to internal properties
* @param changes - contains changes of pageOption properties
*/
OntoSearchPaginatorComponent.prototype.configurationChanged = function (changes) {
var _this = this;
changes.forEachChangedItem(function (change) {
_this.setClassProperty(change.key, change.currentValue);
});
};
OntoSearchPaginatorComponent.prototype.setInternalPaginatorDataProperties = function (paginatorData) {
var _this = this;
Object.keys(paginatorData).forEach(function (key) {
_this.setClassProperty(key, paginatorData[key]);
});
};
OntoSearchPaginatorComponent.prototype.setClassProperty = function (key, value) {
this[key] = value;
};
return OntoSearchPaginatorComponent;
}());
OntoSearchPaginatorComponent.decorators = [
{ type: core.Component, args: [{
selector: 'onto-search-paginator',
template: "<div class=\"paginator-component\" appCypressData=\"paginator-component\">\n <mat-paginator [length]=\"length\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [pageIndex]=\"pageIndex\"\n [showFirstLastButtons]=\"true\"\n (page)=\"onPageChanged($event)\" appCypressData=\"onto-paginator\"></mat-paginator>\n</div>\n",
styles: [":host{width:100%}"]
},] }
];
OntoSearchPaginatorComponent.ctorParameters = function () { return [
{ type: core.KeyValueDiffers }
]; };
OntoSearchPaginatorComponent.propDecorators = {
paginatorData: [{ type: core.Input }],
pageOptions: [{ type: core.Input }],
pageChanged: [{ type: core.Output }]
};
var OntoSearchPaginatorModule = /** @class */ (function () {
function OntoSearchPaginatorModule() {
}
return OntoSearchPaginatorModule;
}());
OntoSearchPaginatorModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [OntoSearchPaginatorComponent],
exports: [OntoSearchPaginatorComponent],
imports: [
common.CommonModule,
DirectivesModule,
paginator.MatPaginatorModule,
],
},] }
];
/**
* List of supported facet types
*/
(function (SearchFacetType) {
SearchFacetType[SearchFacetType["CHECKBOX"] = 0] = "CHECKBOX";
SearchFacetType[SearchFacetType["DATE_RANGE"] = 1] = "DATE_RANGE";
SearchFacetType[SearchFacetType["TOGGLE"] = 2] = "TOGGLE";
SearchFacetType[SearchFacetType["RANGE"] = 3] = "RANGE";
SearchFacetType[SearchFacetType["DROPDOWN_MULTI_SELECT"] = 4] = "DROPDOWN_MULTI_SELECT";
})(exports.SearchFacetType || (exports.SearchFacetType = {}));
var OntoSearchFacetComponent = /** @class */ (function (_super) {
__extends(OntoSearchFacetComponent, _super);
function OntoSearchFacetComponent() {
var _this = _super.apply(this, __spread(arguments)) || this;
/**
* Emits selected search facets on selection change.
*/
_this.onSelectionChange = new core.EventEmitter();
_this.CHECKBOX = exports.SearchFacetType.CHECKBOX;
_this.DATEPICKER = exports.SearchFacetType.DATE_RANGE;
_this.TOGGLE = exports.SearchFacetType.TOGGLE;
_this.RANGE = exports.SearchFacetType.RANGE;
_this.DROPDOWN_MULTI_SELECT = exports.SearchFacetType.DROPDOWN_MULTI_SELECT;
return _this;
}
OntoSearchFacetComponent.prototype.ngOnChanges = function (changes) {
if (changes.data && changes.data.currentValue) {
this.facetGroupName = this.data.facetGroupName;
this.facetGroup = this.data.facetGroupData;
this.selected = this.data.selected;
}
};
OntoSearchFacetComponent.prototype.onSelectionEvent = function ($event) {
this.onSelectionChange.emit($event);
};
return OntoSearchFacetComponent;
}(ngxComponentdestroyed.OnDestroyMixin));
OntoSearchFacetComponent.decorators = [
{ type: core.Component, args: [{
selector: 'onto-search-facet',
template: "<div *ngIf=\"type === CHECKBOX\">\n <onto-checkbox-facet\n [data]=\"data\"\n [type]=\"type\"\n [facetTitleTemplate]=\"facetTitleTemplate\"\n [facetTemplate]=\"facetTemplate\"\n (onSelectionChange)=\"onSelectionEvent($event)\">\n </onto-checkbox-facet>\n</div>\n\n<div *ngIf=\"type === DATEPICKER\">\n <onto-daterange-facet\n [data]=\"data\"\n [type]=\"type\"\n [facetTitleTemplate]=\"facetTitleTemplate\"\n [facetTemplate]=\"facetTemplate\"\n (onSelectionChange)=\"onSelectionEvent($event)\">>\n </onto-daterange-facet>\n</div>\n\n<div *ngIf=\"type === TOGGLE\">\n <onto-toggle-facet\n [data]=\"data\"\n [type]=\"type\"\n [facetTitleTemplate]=\"facetTitleTemplate\"\n [facetTemplate]=\"facetTemplate\"\n (onSelectionChange)=\"onSelectionEvent($event)\">>\n </onto-toggle-facet>\n</div>\n\n<div *ngIf=\"type === RANGE\">\n <onto-range-facet\n [data]=\"data\"\n [type]=\"type\"\n [facetTitleTemplate]=\"facetTitleTemplate\"\n [facetTemplate]=\"facetTemplate\"\n (onSelectionChange)=\"onSelectionEvent($event)\">>\n </onto-range-facet>\n</div>\n\n<div *ngIf=\"type === DROPDOWN_MULTI_SELECT\">\n <onto-dropdown-multi-select-facet\n [data]=\"data\"\n [type]=\"type\"\n [facetTitleTemplate]=\"facetTitleTemplate\"\n [facetTemplate]=\"facetTemplate\"\n (onSelectionChange)=\"onSelectionEvent($event)\">>\n </onto-dropdown-multi-select-facet>\n</div>\n",
styles: [".checkbox-facet-title{font-size:large}"]
},] }
];
OntoSearchFacetComponent.propDecorators = {
data: [{ type: core.Input }],
type: [{ type: core.Input }],
facetTemplate: [{ type: core.Input }],
facetTitleTemplate: [{ type: core.Input }],
onSelectionChange: [{ type: core.Output }]
};
var CheckboxFacetComponent = /** @class */ (function (_super) {
__extends(CheckboxFacetComponent, _super);
function CheckboxFacetComponent() {
return _super !== null && _super.apply(this, arguments) || this;
}
CheckboxFacetComponent.prototype.ngOnChanges = function (changes) {
var _this = this;
_super.prototype.ngOnChanges.call(this, changes);
this.facetGroup.forEach(function (facet) { return facet.selected = _this.selected.includes(facet); });
};
CheckboxFacetComponent.prototype.updateAllSelected = function (facet) {
var index = this.selected && this.selected.indexOf(facet);
if (index > -1) {
this.selected.splice(index, 1);
facet.selected = false;
}
else {
this.selected.push(facet);
facet.selected = true;
}
var count = this.selected.map(function (selectedItem) { return selectedItem.count; })
.reduce(function (totalCount, itemCount) { return totalCount + itemCount; }, 0);
this.onSelectionChange.emit({ name: this.facetGroupName, selected: this.selected, count: count });
};
return CheckboxFacetComponent;
}(OntoSearchFacetComponent));
CheckboxFacetComponent.decorators = [
{ type: core.Component, args: [{
selector: 'onto-checkbox-facet',
template: "<div class=\"checkbox-facet\">\n <div appCypressData=\"checkbox-facet-title\">\n <ng-container *ngTemplateOutlet=\"facetTitleTemplate; context: {$implicit: facetGroupName}\">\n </ng-container>\n </div>\n <div class=\"checkbox-facet-list\" appCypressData=\"checkbox-facet-list\">\n <div *ngFor=\"let facet of facetGroup; let index = index\">\n <mat-checkbox\n [checked]=\"facet.selected\"\n (change)=\"updateAllSelected(facet)\"\n [attr.appCypressData]=\"'checkbox-facet-' + index\">\n <ng-container *ngTemplateOutlet=\"facetTemplate; context: {$implicit: facet}\">\n </ng-container>\n </mat-checkbox>\n </div>\n </div>\n</div>\n"
},] }
];
CheckboxFacetComponent.propDecorators = {
facetTemplate: [{ type: core.Input }],
facetTitleTemplate: [{ type: core.Input }],
type: [{ type: core.Input }]
};
var DATE_PATTERNS = {
YEAR: 'YYYY',
MONTH: 'MMMM YYYY',
DAY: 'MMMM D, YYYY'
};
var DateRangeFacetComponent = /** @class */ (function (_super) {
__extends(DateRangeFacetComponent, _super);
function DateRangeFacetComponent(renderer, _viewContainerRef, componentFactoryResolver, applicationRef, injector) {
var _this = _super.call(this) || this;
_this.renderer = renderer;
_this._viewContainerRef = _viewContainerRef;
_this.componentFactoryResolver = componentFactoryResolver;
_this.applicationRef = applicationRef;
_this.injector = injector;
_this.onSelectionChange = new core.EventEmitter();
_this.dateRangeGroup = new forms.FormGroup({
start: new forms.FormControl(),
end: new forms.FormControl()
});
_this.daysMap = new Map();
_this.monthsMap = new Map();
_this.yearsMap = new Map();
_this.buttonUnsubscribeFns = [];
return _this;
}
DateRangeFacetComponent.prototype.ngOnChanges = function (changes) {
_super.prototype.ngOnChanges.call(this, changes);
this.mapFacetDates(this.data.facetGroupData);
this.datePickerPlaceholder = this.data.placeholder;
this.setSelectedRange(this.data.selectedRange);
};
DateRangeFacetComponent.prototype.ngOnDestroy = function () {
_super.prototype.ngOnDestroy.call(this);
this.unsubscribeBtnListeners();
};
DateRangeFacetComponent.prototype.calendarOpened = function () {
var _this = this;
// Add to event loop queue to execute after angular has finished working on the dom
setTimeout(function () {
_this.unsubscribeBtnListeners();
var buttons = _this.getCalendarPanelButtons();
_this.subscribeToBtnListeners(buttons);
_this.updateDayStyles();
});
};
DateRangeFacetComponent.prototype.calendarClosed = function () {
this.unsubscribeBtnListeners();
if (this.dateRangeGroup.get('end').value && this.dateRangeGroup.get('start').value) {
this.data.selectedRange = this.getSearchDateFacetRange();
this.onSelectionChange.emit(this.data.selectedRange);
}
};
DateRangeFacetComponent.prototype.inputChange = function (picker) {
if (!picker.opened) {
this.calendarClosed();
}
};
DateRangeFacetComponent.prototype.mapFacetDates = function (facetGroupData) {
var e_1, _a;
try {
for (var facetGroupData_1 = __values(facetGroupData), facetGroupData_1_1 = facetGroupData_1.next(); !facetGroupData_1_1.done; facetGroupData_1_1 = facetGroupData_1.next()) {
var facet = facetGroupData_1_1.value;
var monthDate = moment__default['default'](facet.facetData).startOf('month').toISOString();
var yearDate = moment__default['default'](facet.facetData).startOf('year').toISOString();
this.daysMap.set(moment__default['default'](facet.facetData).toISOString(), +facet.count);
var existingMonth = this.monthsMap.get(monthDate) || 0;
this.monthsMap.set(monthDate, existingMonth + +facet.count);
var existingYear = this.yearsMap.get(yearDate) || 0;
this.yearsMap.set(yearDate, existingYear + +facet.count);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (facetGroupData_1_1 && !facetGroupData_1_1.done && (_a = facetGroupData_1.return)) _a.call(facetGroupData_1);
}
finally { if (e_1) throw e_1.error; }
}
};
DateRangeFacetComponent.prototype.updateDayStyles = function () {
if (document.querySelector('mat-month-view')) {
this.addTooltipsToCalendarCells('mat-month-view', this.daysMap, DATE_PATTERNS.DAY);
}
else if (document.querySelector('mat-multi-year-view')) {
this.addTooltipsToCalendarCells('mat-multi-year-view', this.yearsMap, DATE_PATTERNS.YEAR);
}
else if (document.querySelector('mat-year-view')) {
this.addTooltipsToCalendarCells('mat-year-view', this.monthsMap, DATE_PATTERNS.MONTH);
}
};
DateRangeFacetComponent.prototype.addTooltipsToCalendarCells = function (view, datesMap, dateFormat) {
var _this = this;
var calendarCells = this.getCalendarCellsForView(view);
calendarCells.forEach(function (calendarCell) {
datesMap.forEach(function (count, dateString) {
var calendarCellDateString = moment__default['default'](calendarCell.getAttribute('aria-label'), dateFormat);
if (calendarCellDateString.isSame(dateString)) {
_this.createTooltipForCalendarCell(calendarCell, count);
}
});
});
};
/**
* Creates a portal outlet from the calendar cell div and attaches the tooltip template from view
* Applies "onto-date-range-facet-tooltip" class to calendar cell child div
*
* @param calendarCell - calendar cell to which the span is appended
* @param toolTipContext - context for the tooltip template
*/
DateRangeFacetComponent.prototype.createTooltipForCalendarCell = function (calendarCell, toolTipContext) {
var calendarCellContent = this.getCalendarCellContent(calendarCell);
var tooltipElements = this.getCalendarCellTooltipElements(calendarCell);
if (tooltipElements.length === 0) {
var template = new portal.TemplatePortal(this.toolTipTemplate, this._viewContainerRef);
template.context = { $implicit: toolTipContext };
var outlet = new portal.DomPortalOutlet(calendarCellContent, this.componentFactoryResolver, this.applicationRef, this.injector);
outlet.attachTemplatePortal(template);
calendarCellContent.classList.add('onto-date-range-facet-tooltip');
}
};
DateRangeFacetComponent.prototype.getCalendarPanelButtons = function () {
return document.querySelectorAll('mat-calendar .mat-calendar-body-cell, mat-calendar button, mat-calendar .mat-icon-button');
};
DateRangeFacetComponent.prototype.setSelectedRange = function (selectedRange) {
var momentDateRange;
if (selectedRange) {
momentDateRange = new datepicker.DateRange(moment__default['default'](selectedRange.selected.start), moment__default['default'](selectedRange.selected.end));
}
else {
momentDateRange = new datepicker.DateRange(null, null);
}
this.dateRangeGroup.setValue(momentDateRange);
this.dateRangeGroup.updateValueAndValidity();
this.data.selectedRange = selectedRange ? this.getSearchDateFacetRange() : null;
};
DateRangeFacetComponent.prototype.getSearchDateFacetRange = function () {
var start = this.dateRangeGroup.get('start').value;
var end = this.dateRangeGroup.get('end').value;
return {
name: this.facetGroupName,
selected: {
start: start.toDate(),
end: end.toDate()
},
count: this.getCountForRange(start, end)
};
};
DateRangeFacetComponent.prototype.getCountForRange = function (start, end) {
var _this = this;
var dayKeys = __spread(this.daysMap.keys());
return dayKeys.filter(function (day) { return start.isSameOrBefore(day) && end.isSameOrAfter(day); })
.map(function (key) { return _this.daysMap.get(key); })
.reduce(function (accumulator, count) { return accumulator + count; }, 0);
};
DateRangeFacetComponent.prototype.subscribeToBtnListeners = function (buttons) {
var _this = this;
var unsubscribeFns = [];
buttons.forEach(function (btn) {
var unsubscribe = _this.renderer.listen(btn, 'click', function () {
_this.calendarOpened();
});
unsubscribeFns.push(unsubscribe);
});
this.buttonUnsubscribeFns = __spread(unsubscribeFns);
};
DateRangeFacetComponent.prototype.unsubscribeBtnListeners = function () {
this.buttonUnsubscribeFns.forEach(function (unsubscribeFn) {
unsubscribeFn();
});
this.buttonUnsubscribeFns = [];
};
DateRangeFacetComponent.prototype.getCalendarCellsForView = function (view) {
var elements = document.querySelectorAll('.onto-date-range-picker ' + view);
return elements.length > 0 ? elements[0].querySelectorAll('.mat-calendar-body-cell') : [];
};
DateRangeFacetComponent.prototype.getCalendarCellContent = function (calendarCell) {
return calendarCell.querySelectorAll('div')[0];
};
DateRangeFacetComponent.prototype.getCalendarCellTooltipElements = function (calendarCell) {
return calendarCell.querySelectorAll('span.onto-date-range-facet-tooltiptext');
};
return DateRangeFacetComponent;
}(OntoSearchFacetComponent));
DateRangeFacetComponent.decorators = [
{ type: core.Component, args: [{
selector: 'onto-daterange-facet',
template: "<div class=\"onto-date-range-facet\" appCypressData=\"onto-date-range-facet\">\n <div appCypressData=\"onto-date-range-facet-title\">\n <ng-container *ngTemplateOutlet=\"facetTitleTemplate\">\n </ng-container>\n </div>\n <div class=\"onto-date-range-facet-picker\" appCypressData=\"onto-date-range-facet-picker\">\n <mat-form-field>\n <mat-label>{{datePickerPlaceholder}}</mat-label>\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"dateRangeGroup\">\n <input matInput matStartDate formControlName=\"start\" (dateChange)=\"inputChange(picker)\">\n <input matInput matEndDate formControlName=\"end\" (dateChange)=\"inputChange(picker)\">\n </mat-date-range-input>\n <mat-datepicker-toggle matSuffix [for]=\"picker\"\n appCypressData=\"onto-date-range-picker-toggle\"></mat-datepicker-toggle>\n <mat-date-range-picker panelClass=\"onto-date-range-picker\" #picker\n (closed)=\"calendarClosed()\"\n (opened)=\"calendarOpened()\"\n appCypressData=\"onto-date-range-picker\"></mat-date-range-picker>\n </mat-form-field>\n <ng-container *ngTemplateOutlet=\"facetTemplate; context: {$implicit: data.selectedRange}\">\n </ng-container>\n </div>\n</div>\n\n<ng-template #toolTipTemplate let-count>\n <span class=\"onto-date-range-facet-tooltiptext\">{{count}}</span>\n</ng-template>\n",
styles: ["::ng-deep .onto-date-range-facet-tooltip:not(.mat-calendar-body-selected):not(.mat-calendar-body-today){background-color:#f0f8ff;border-color:rgba(0,0,0,.38);border-style:dashed}::ng-deep .onto-date-range-facet-tooltip .onto-date-range-facet-tooltiptext{background-color:#000;border-radius:6px;bottom:120%;color:#fff;padding:8px;position:absolute;text-align:center;visibility:hidden;z-index:1}::ng-deep .onto-date-range-facet-tooltip:hover:after{border:8px solid transparent;border-top-color:#000;content:\"\";left:50%;margin-left:-8px;position:absolute;top:-25%}::ng-deep .onto-date-range-facet-tooltip:hover .onto-date-range-facet-tooltiptext{visibility:visible}"]
},] }
];
DateRangeFacetComponent.ctorParameters = function () { return [
{ type: core.Renderer2 },
{ type: core.ViewContainerRef },
{ type: core.ComponentFactoryResolver },
{ type: core.ApplicationRef },
{ type: core.Injector }
]; };
DateRangeFacetComponent.propDecorators = {
toolTipTemplate: [{ type: core.ViewChild, args: ['toolTipTemplate',] }],
data: [{ type: core.Input }],
onSelectionChange: [{ type: core.Output }]
};
var ToggleFacetComponent = /** @class */ (function (_super) {
__extends(ToggleFacetComponent, _super);
function ToggleFacetComponent() {
return _super !== null && _super.apply(this, arguments) || this;
}
ToggleFacetComponent.prototype.ngOnChanges = function (changes) {
var _a;
_super.prototype.ngOnChanges.call(this, changes);
if ((_a = changes === null || changes === void 0 ? void 0 : changes.data) === null || _a === void 0 ? void 0 : _a.currentValue) {
this.color = this.data.color;
this.facetGroup.sort(this.compareByLabel);
}
if (this.selected.length) {
var indexOfSelectedElement = this.facetGroup.map(function (item) { return item.label; }).indexOf(this.selected[0].label);
this.currentValueIndex = indexOfSelectedElement > 0 ? indexOfSelectedElement : 0;
this.currentValue = Boolean(this.currentValueIndex);
this.currentSelection = this.facetGroup[this.currentValueIndex];
if (this.facetGroup.length === 1 && indexOfSelectedElement === 0) {
this.currentValue = true;
}
}
else if (this.facetGroup.length === 1) {
this.currentSelection = this.facetGroup[0];
}
else {
this.currentSelection = null;
this.currentValue = null;
this.currentValueIndex = null;
}
};
ToggleFacetComponent.prototype.onToggle = function ($event) {
var _a;
var selection;
if (this.facetGroup.length === 1) {
this.facetGroup[0].selected = $event.checked;
selection = {
name: this.facetGroupName,
selected: [this.currentSelection],
count: (_a = this.currentSelection) === null || _a === void 0 ? void 0 : _a.count
};
}
else {
this.currentValueIndex = $event.checked ? 1 : 0;
this.currentSelection = this.facetGroup[this.currentValueIndex];
this.refreshSelection(this.currentValueIndex);
selection = {
name: this.facetGroupName,
selected: [this.currentSelection],
count: this.currentSelection.count
};
}
this.onSelectionChange.emit(selection);
};
ToggleFacetComponent.prototype.refreshSelection = function (indexOfSelected) {
this.facetGroup.forEach(function (value, index) { return value.selected = (index === indexOfSelected); });
};
ToggleFacetComponent.prototype.compareByLabel = function (item1, item2) {
if (item1.label > item2.label) {
return 1;
}
else if (item2.label > item1.label) {
return -1;
}
return 0;
};
return ToggleFacetComponent;
}(OntoSearchFacetComponent));
ToggleFacetComponent.decorators = [
{ type: core.Component, args: [{
selector: 'onto-toggle-facet',
template: "<div class=\"toggle-facet\" appCypressData=\"toggle-facet\">\n <div *ngIf=\"facetTitleTemplate\">\n <ng-container [ngTemplateOutlet]=\"facetTitleTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: facetGroupName}\"></ng-container>\n </div>\n <mat-slide-toggle appCypressData=\"toggle-facet-slide\" class=\"toggle-facet-slide\"\n [color]=\"color\"\n (change)=\"onToggle($event)\"\n [(ngModel)]=\"currentValue\">\n <ng-container [ngTemplateOutlet]=\"facetTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: currentSelection}\">\n </ng-container>\n </mat-slide-toggle>\n</div>\n"
},] }
];
ToggleFacetComponent.propDecorators = {
data: [{ type: core.Input }]
};
var RangeSliderComponent = /** @class */ (function () {
function RangeSliderComponent() {
this._selectionChange = new core.EventEmitter();
// Add debounce of 2 s, as the event is emitted on every input change (drag of slider)
this.selectionChange = this._selectionChange.pipe(operators.debounce(function () { return rxjs.interval(2000); }));
// Size of the circle range slider button.
// It is used so that the both circles can hit each other without overlapping.
this.rangeCircleSize = 14;
}
RangeSliderComponent.prototype.onResize = function () { };
RangeSliderComponent.prototype.ngOnInit = function () {
this.initializeData();
};
RangeSliderComponent.prototype.ngAfterViewInit = function () {
var _this = this;
this.minElement = this.minSlider.nativeElement;
this.maxElement = this.maxSlider.nativeElement;
this.init(this.selectedMin, this.selectedMax);
this.onResize = function () { return _this.update(_this.parseInt(_this.maxElement.getAttribute('max'))); };
};
RangeSliderComponent.prototype.ngOnChanges = function (changes) {
var _a;
if ((_a = changes === null || changes === void 0 ? void 0 : changes.data) === null || _a === void 0 ? void 0 : _a.currentValue) {
this.initializeData();
this.init(this.selectedMin, this.selectedMax);
}
};
RangeSliderComponent.prototype.initializeData = function () {
var _this = this;
var _a, _b;
this.facetData = __spread(this.data.facetGroupData);
this.facetData.sort(function (a, b) {
try {
return _this.parseInt(a.label) - _this.parseInt(b.label);
}
catch (e) {
throw new Error('Facet labels must represent numbers! ' + e.message);
}
});
this.minValue = this.facetData[0].label;
this.maxValue = this.facetData[this.facetData.length - 1].label;
this.selectedMin = ((_a = this.data.selectedRange) === null || _a === void 0 ? void 0 : _a.start) || this.minValue;
this.selectedMax = ((_b = this.data.selectedRange) === null || _b === void 0 ? void 0 : _b.end) || this.maxValue;
this.sum = this.sumRange();
};
RangeSliderComponent.prototype.draw = function (splitvalue) {
var thumbsize = this.parseInt(this.slider.nativeElement.getAttribute('data-thumbsize'));
var rangewidth = this.slider.nativeElement.clientWidth;
var rangemin = this.parseInt(this.slider.nativeElement.getAttribute('data-rangemin'));
var rangemax = this.parseInt(this.slider.nativeElement.getAttribute('data-rangemax'));
this.minElement.setAttribute('max', splitvalue);
this.maxElement.setAttribute('min', splitvalue);
this.minElement.style.width = this.parseInt(thumbsize + ((splitvalue - rangemin) / (rangemax - rangemin)) * (rangewidth - (2 * thumbsize))) + 'px';
this.maxElement.style.width = this.parseInt(thumbsize + ((rangemax - splitvalue) / (rangemax - rangemin)) * (rangewidth - (2 * thumbsize))) + 'px';
this.minElement.style.left = '0px';
this.maxElement.style.left = this.parseInt(this.minElement.style.width) + 'px';
// correct for 1 off at the end of the max slider
if (this.maxElement.value > (rangemax - 1)) {
this.maxElement.setAttribute('data-value', rangemax);
}
this.maxElement.value = this.maxElement.getAttribute('data-value');
this.minElement.value = this.minElement.getAttribute('data-value');
};
RangeSliderComponent.prototype.init = function (min, max) {
var _this = this;
if (!(this.minElement && this.maxElement)) {
return;
}
this.minElement.removeEventListener('input', function () { return _this.update; });
this.maxElement.removeEventListener('input', function () { return _this.update; });
var rangemin = this.parseInt(this.minValue);
var rangemax = this.parseInt(this.maxValue);
var selectedMin = this.parseInt(min) || rangemin;
var selectedMax = this.parseInt(max) || rangemax;
var avgvalue = (selectedMin + selectedMax) / 2;
this.minElement.setAttribute('data-value', selectedMin);
this.maxElement.setAttribute('data-value', selectedMax);
this.slider.nativeElement.setAttribute('data-rangemin', rangemin);
this.slider.nativeElement.setAttribute('data-rangemax', rangemax);
this.slider.nativeElement.setAttribute('data-thumbsize', this.rangeCircleSize);
this.slider.nativeElement.setAttribute('data-rangewidth', this.slider.nativeElement.offsetWidth);
this.draw(avgvalue);
this.minElement.addEventListener('input', function () { return _this.update(rangemax); });
this.maxElement.addEventListener('input', function () { return _this.update(rangemax); });
};
RangeSliderComponent.prototype.update = function (rangemax) {
// correction for min value calculation
var minvalue;
if (this.minElement.value > (rangemax - 1)) {
minvalue = Math.floor(this.minElement.value - 1);
}
else {
minvalue = Math.floor(this.minElement.value);
}
// correction for max value calculation
var maxvalue;
if (this.maxElement.value > (rangemax - 1)) {
maxvalue = Math.ceil(this.maxElement.value);
}
else {
maxvalue = Math.floor(this.maxElement.value);
}
this.minElement.setAttribute('data-value', minvalue);
this.maxElement.setAttribute('data-value', maxvalue);
this.selectedMin = minvalue;
this.selectedMax = maxvalue;
this.updateSelection();
this.sum = this.sumRange();
var avgvalue = Math.ceil((minvalue + maxvalue) / 2);
this.draw(avgvalue);
};
RangeSliderComponent.prototype.sumRange = function () {
var _this = this;
var sum = 0;
this.data.facetGroupData.forEach(function (facet) {
if (_this.isInRange(facet)) {
sum += facet.count;
}
});
return sum;
};
RangeSliderComponent.prototype.onSelectionChange = function () {
var selection = {
name: this.data.facetGroupName,
selected: this.data.selectedRange,
count: this.sumRange()
};
this._selectionChange.emit(selection);
};
RangeSliderComponent.prototype.updateSelection = function () {
this.data.selectedRange = {
start: this.selectedMin,
end: this.selectedMax
};
this.onSelectionChange();
};
RangeSliderComponent.prototype.isInRange = function (facet) {
var value = this.parseInt(facet.label);
return value >= this.parseInt(this.selectedMin) && value <= this.parseInt(this.selectedMax);
};
RangeSliderComponent.prototype.parseInt = function (value) {
try {
return parseInt(value);
}
catch (e) {
throw new Error("Parsing " + value + " to number failed! " + e.message);
}
};
RangeSliderComponent.prototype.ngOnDestroy = function () {
var _this = this;
this.onResize = function () { };
this.minElement.removeEventListener('input', function () { return _this.update; });
this.maxElement.removeEventListener('input', function () { return _this.update; });
};
return RangeSliderComponent;
}());
RangeSliderComponent.decorators = [
{ type: core.Component, args: [{
selector: 'onto-range-slider',
template: "<div class=\"range-slider-wrapper\">\n <div class=\"range-slider\">\n <div class=\"slider\" #slider>\n <input class=\"range-slider-range min-range\" type=\"range\" min=\"{{minValue}}\" max=\"{{maxValue}}\" #minSlider\n appCypressData=\"min-range\"/>\n <input class=\"range-slider-range max-range\" type=\"range\" min=\"{{minValue}}\" max=\"{{maxValue}}\" #maxSlider\n appCypressData=\"max-range\"/>\n </div>\n </div>\n <div class=\"range-values\">\n <div class=\"range-slider-value value-min\">{{minValue}}</div>\n <div class=\"range-slider-value value-max\">{{maxValue}}</div>\n </div>\n <div class=\"range-selecton\">\n <ng-container *ngTemplateOutlet=\"facetTemplate; context: {$implicit: data.selectedRange, sum: sumRange()}\">\n </ng-container>\n </div>\n</div>\n\n",
styles: [".range-slider{flex-direction:column;place-content:center space-around}.range-slider,.slider{align-items:center;cursor:pointer;display:flex;width:100%}.slider{flex-direction:row;max-height:100%;place-content:stretch center;text-align:center}.range-values{align-items:center;display:flex;flex-direction:row;place-content:space-between}.range-selecton,.range-values{margin-top:12px}.range-slider-range{-webkit-appearance:none;background:#d7dcdf;height:10px;margin:0;outline:none;padding:0;width:100%}.range-slider-range::-webkit-slider-thumb{-webkit-appearance:none;-webkit-transition:background .15s ease-in-out;appearance:none;background:#2c3e50;border-radius:50%;cursor:pointer;height:20px;transition:background .15s ease-in-out;width:20px}.range-slider-range::-webkit-slider-thumb:hover,.range-slider-range:active::-webkit-slider-thumb{background:#1abc9c}.range-slider-range::-moz-range-thumb{-moz-transition:background .15s ease-in-out;background:#2c3e50;border:0;border-radius:50%;cursor:pointer;height:20px;transition:background .15s ease-in-out;width:20px}.range-slider-range::-moz-range-thumb:hover,.range-slider-range:active::-moz-range-thumb{background:#1abc9c}.range-slider-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 3px #fff,0 0 0 6px #1abc9c}::-moz-range-track{background:#d7dcdf;border:0}input::-moz-focus-inner,input::-moz-focus-outer{border:0}"]
},] }
];
RangeSliderComponent.propDecorators = {
data: [{ type: core.Input }],
facetTemplate: [{ type: core.Input }],
slider: [{ type: core.ViewChild, args: ['slider',] }],
minSlider: [{ type: core.ViewChild, args: ['minSlider',] }],
maxSlider: [{ type: core.ViewChild, args: ['maxSlider',] }],
selectionChange: [{ type: core.Output }],
onResize: [{ type: core.HostListener, args: ['window:resize',] }]
};
var RangeFacetComponent = /** @class */ (function (_super) {
__extends(RangeFacetComponent, _super);
function RangeFacetComponent() {
return _super !== null && _super.apply(this, arguments) || this;
}
return RangeFacetComponent;
}(OntoSearchFacetComponent));
RangeFacetComponent.decorators = [
{ type: core.Component, args: [{
selector: 'onto-range-facet',
template: "<div class=\"onto-range-facet\" appCypressData=\"onto-range-facet\">\n <ng-container *ngTemplateOutlet=\"facetTitleTemplate; context: {$implicit: data.facetGroupName}\">\n </ng-container>\n<onto-range-histogram *ngIf=\"data.showHistogram\" [data]=\"data\"></onto-range-histogram>\n<onto-range-slider [data]=\"data\" [facetTemplate]=\"facetTemplate\" (selectionChange)=\"onSelectionEvent($event)\"></onto-range-slider>\n</div>\n",
styles: [".onto-range-facet{width:100%}"]
},] }
];
RangeFacetComponent.propDecorators = {
data: [{ type: core.Input }],
facetTemplate: [{ type: core.Input }]
};
var RangeHistogramComponent = /** @class */ (function () {
function RangeHistogramComponent() {
}
RangeHistogramComponent.prototype.ngAfterViewInit = function () {
var _this = this;
this.histogramModel = this.data.histogramConfiguration;
this.init();
// An observer that monitors the resizing of the canvas element, causing it to redraw on changes.
// @ts-ignore
var observer = new ResizeObserver(function () {
_this.init();
});
observer.observe(this.canvas.nativeElement);
};
RangeHistogramComponent.prototype.ngOnChanges = function (changes) {
var _a;
if ((_a = changes.data) === null || _a === void 0 ? void 0 : _a.currentValue) {
this.histogramModel = this.data.histogramConfiguration;
this.init();
}
};
RangeHistogramComponent.prototype.init = function () {
var _this = this;
if (!this.canvas) {
return;
}
this.fitToContainer(this.canvas.nativeElement);
this.ctx = this.canvas.nativeElement.getContext('2d');
var data = __spread(this.data.facetGroupData);
data.sort(function (a, b) {
return _this.parseInt(a.label) - _this.parseInt(b.label);
});
this.drawHistogram(this.fillEmptyValues(data));
};
RangeHistogramComponent.prototype.drawHistogram = function (data) {
var _a, _b, _c;
this.ctx.clearRect(0, 0, this.canvas.nativeElement.getBoundingClientRect().width, this.canvas.nativeElement.getBoundingClientRect().height);
this.ctx.save();
var canvasWidth = this.canvas.nativeElement.getBoundingClientRect().width;
var width = canvasWidth / data.length;
var scale = ((_a = this.histogramModel) === null || _a === void 0 ? void 0 : _a.scale) || 0.5;
var baseYPos = ((_b = this.histogramModel) === null || _b === void 0 ? void 0 : _b.baseYPos) || 100;
var fillStyle = ((_c = this.histogramModel) === null || _c === void 0 ? void 0 : _c.fillStyle) || 'rgba(200, 200, 200, 0.2)';
var posX = 0;
var posY = 0;
for (var i = 0; i < data.length; i++) {
if (data[i].count > 0) {
var height = this.parseInt(data[i].count) * scale;
posX = i * width;
posY = baseYPos - height;
this.ctx.beginPath();
this.ctx.arc(posX, posY, data[i].count * scale, 0, 2 * Math.PI);
this.ctx.fillStyle = fillStyle;
this.ctx.fill();
this.ctx.restore();
}
}
this.ctx.restore();
};
RangeHistogramComponent.prototype.fitToContainer = function (canvas) {
// Make it visually fill the positioned parent
canvas.style.width = '100%';
canvas.style.height = '100%';
// then set the internal size to match
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
};
RangeHistogramComponent.prototype.compare = function (a, b) {
var parsedA = this.parseInt(a.label);
var parsedB = this.parseInt(b.label);
if (parsedA < parsedB) {
return -1;
}
if (parsedA > parsedB) {
return 1;
}
return 0;
};
RangeHistogramComponent.prototype.fillEmptyValues = function (data) {
var _this = this;
var empty = { label: '0', count: 0 };
var filledArray = [];
data.forEach(function (value, index) {
filledArray.push(value);
if (data[index + 1]) {
var emptyValuesCount = _this.parseInt(data[index + 1].label) - _this.parseInt(data[index].label);
while (emptyValuesCount > 1) {
filledArray.push(empty);
emptyValuesCount--;
}
}
});
return filledArray;
};
RangeHistogramComponent.prototype.parseInt = function (value) {
try {
return parseInt(value);
}
catch (e) {
throw new Error("Parsing " + value + " to number failed! " + e.message);
}
};
return RangeHistogramComponent;
}());
RangeHistogramComponent.decorators = [
{ type: core.Component, args: [{
selector: 'onto-range-histogram',
template: "<div class=\"range-histogram\">\n <canvas id=\"range-histogram-canvas\" #rangeHistogramCanvas>\n {{\"ONTO_RANGE_FACET.NO_CANVAS_SUPPORT\" | transloco}}\n </canvas>\n</div>\n",
styles: [".range-histogram{align-items:center;display:flex;flex-direction:row;height:100px;margin-bottom:10px;place-content:center}"]
},] }
];
RangeHistogramComponent.propDecorators = {
data: [{ type: core.Input }],
canvas: [{ type: core.ViewChild, args: ['rangeHistogramCanvas',] }]
};
var RangeFacetModule = /** @class */ (function () {
function RangeFacetModule() {
}
return RangeFacetModule;
}());
RangeFacetModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [RangeFacetComponent, RangeSliderComponent, RangeHistogramComponent],
imports: [
common.CommonModule,
slider.MatSliderModule,
transloco.TranslocoModule,
DirectivesModule,
],
exports: [RangeFacetComponent]
},] }
];
var DropdownMultiSelectFacetComponent = /** @class */ (function (_super) {
__extends(DropdownMultiSelectFacetComponent, _super);
function DropdownMultiSelectFacetComponent() {
var _this = _super.apply(this, __spread(arguments)) || this;
/** control for the selected from multi-selection */
_this.selectedFormControl = new forms.FormControl();
/** control for the MatSelect filter keyword multi-selection */
_this.filteredFormControl = new forms.FormControl();
/** list of filtered by search keyword for multi-selection */
_this.filtered = new rxjs.ReplaySubject(1);
return _this;
}
DropdownMultiSelectFacetComponent.prototype.ngOnChanges = function (changes) {
_super.prototype.ngOnChanges.call(this, changes);
if (changes.data && changes.data.currentValue) {
this.selectedFormControl.setValue(this.selected);
this.init();
}
};
DropdownMultiSelectFacetComponent.prototype.init = function () {
var _this = this;
this.filtered.next(this.facetGroup.slice());
this.selectedFormControl.setValue(this.selected);
this.filteredFormControl.valueChanges
.pipe(ngxComponentdestroyed.untilComponentDestroyed(this))
.subscribe(function () {
_this.filter();
});
};
DropdownMultiSelectFacetComponent.prototype.filter = function () {
if (!Array.isArray(this.facetGroup)) {
return;
}
var search = this.filteredFormControl.value;
if (!search) {
this.filtered.next(this.facetGroup.slice());
return;
}
search = search.toLowerCase();
this.filtered.next(this.facetGroup.filter(function (item) { return item.label.toLowerCase().indexOf(search) > -1; }));
};
DropdownMultiSelectFacetComponent.prototype.onSelection = function ($event) {
var selection = $event.value;
selection.forEach(function (item) { return item.selected = true; });
this.facetGroup.filter(function (item) { return selection.indexOf(item) === -1; }).map(function (item) { return item.selected = false; });
this.selectedFacets = $event.value;
};
DropdownMultiSelectFacetComponent.prototype.onOpenedChange = function (isOpen) {
if (!isOpen) {
var selection = {
name: this.facetGroupName,
selected: this.selectedFacets,
count: this.countFacetResults()
};
this.onSelectionChange.emit(selection);
}
};
DropdownMultiSelectFacetComponent.prototype.countFacetResults = function () {
var sum = 0;
this.selectedFormControl.value.forEach(function (facet) { return sum += facet.count; });
return sum;
};
return DropdownMultiSelectFacetComponent;
}(OntoSearchFacetComponent));
DropdownMultiSelectFacetComponent.decorators = [
{ type: core.Component, args: [{
selector: 'onto-dropdown-multi-select-facet',
template: "<div class=\"dropdown-multi-select\" appCypressData=\"dropdown-multi-select\">\n <div appCypressData=\"facet-title\">\n <ng-container *ngTemplateOutlet=\"facetTitleTemplate; context: {$implicit: facetGroupName}\">\n </ng-container>\n </div>\n <mat-form-field>\n <mat-select [formControl]=\"selectedFormControl\" multiple @.disabled (selectionChange)=\"onSelection($event)\" (openedChange)=\"onOpenedChange($event)\">\n <mat-select-trigger appCypressData=\"dropdown-multi-select\">\n <span *ngFor=\"let facet of selectedFormControl.value; let index = index\" appCypressData=\"selected-facets\">\n {{facet.label}}<span *ngIf=\"index < selectedFormControl.value.length - 1\">{{'ONTO_DROPDOWN.DELIMITER' | transloco}}</span>\n </span>\n </mat-select-trigger>\n <onto-dropdown-multi-select [formControl]=\"filteredFormControl\"></onto-dropdown-multi-select>\n <mat-option *ngFor=\"let item of filtered | async\" [value]=\"item\">\n <ng-container *ngTemplateOutlet=\"facetTemplate; context: {$implicit: item}\">\n </ng-container>\n </mat-option>\n </mat-select>\n </mat-form-field>\n</div>\n",
styles: [".dropdown-multi-select,.dropdown-multi-select mat-form-field{width:100%}"]
},] }
];
var DropdownMultiSelectComponent = /** @class */ (function (_super) {
__extends(DropdownMultiSelectComponent, _super);
function DropdownMultiSelectComponent(matSelect) {
var _this = _super.call(this) || this;
_this.matSelect = matSelect;
_this.onChange = function () { };
_this.onTouched = function () { };
_this.change = new core.EventEmitter();
_this.ENTER = 'Enter';
return _this;
}
Object.defineProperty(DropdownMultiSelectComponent.prototype, "searchValue", {
/** Current search value */
get: function () {
return this.value;
},
enumerable: false,
configurable: true
});
DropdownMultiSelectComponent.prototype.ngOnInit = function () {
var _this = this;
this.matSelect.panelClass = 'mat-select-search-panel';
this.matSelect.openedChange
.pipe(ngxComponentdestroyed.untilComponentDestroyed(this))
.subscribe(function (opened) {
_this.options = _this.matSelect.options;
opened ? _this.focus() : _this.reset();
});
// Hack to prevent auto focus and Space or Enter interaction with mat options.
this.matSelect.typeaheadDebounceInterval = 31536000;
this.init();
};
DropdownMultiSelectComponent.prototype.initMultiSelectedValues = function () {
if (this.matSelect.multiple) {
this.previousSelectedValues = this.matSelect.options
.filter(function (option) { return option.selected; })
.map(function (option) { return option.value; });
}
};
/**
* Handles the key down event with MatSelect.
* Do not handles ENTER key press
* @param {KeyboardEvent} event
*/
DropdownMultiSelectComponent.prototype.handleKeydown = function (event) {
if (event.key === this.ENTER) {
event.stopPropagation();
}
};
DropdownMultiSelectComponent.prototype.writeValue = function (value) {
var valueChanged = value !== this.value;
if (valueChanged) {
this.value = value;
this.change.emit(value);
}
};
DropdownMultiSelectComponent.prototype.onInputChange = function (value) {
var valueChanged = value !== this.value;
if (valueChanged) {
this.initMultiSelectedValues();
this.value = value;
this.onChange(value);
this.change.emit(value);
}
};
DropdownMultiSelectComponent.prototype.onBlur = function (value) {
this.writeValue(value);
this.onTouched();
};
DropdownMultiSelectComponent.prototype.registerOnChange = function (fn) {
this.onChange = fn;
};
DropdownMultiSelectComponent.prototype.registerOnTouched = function (fn) {
this.onTouched = fn;
};
/**
* Focuses the search input field
*/
DropdownMultiSelectComponent.prototype.focus = function () {
var _this = this;
if (!this.searchSelectInput) {
return;
}
// Needed to trigger focus after angular digest. Otherwise focus may be lost
setTimeout(function () {
_this.searchSelectInput.nativeElement.focus();
}, 0);
};
/**
* Resets the current search value
* @param {boolean} focus whether to focus after resetting
*/
DropdownMultiSelectComponent.prototype.reset = function (focus) {
if (!this.searchSelectInput) {
return;
}
this.searchSelectInput.nativeElement.value = '';
this.onInputChange('');
if (focus) {
this.focus();
}
};
/**
* Initializes handling <mat-select [multiple]="true">
* Note: to improve this code, mat-select should be extended to allow disabling resetting the selection while filtering.
*/
DropdownMultiSelectComponent.prototype.init = function () {
var _this = this;
// if <mat-select [multiple]="true">
// store previously selected values and restore them when they are deselected
// because the option is not available while we are currently filtering
this.matSelect.valueChange
.pipe(ngxComponentdestroyed.untilComponentDestroyed(this))
.subscribe(function (values) {
if (_this.matSelect.multiple) {
var restoreSelectedValues_1 = false;
if (_this.value && _this.value.length && Array.isArray(_this.previousSelected)) {
if (!Array.isArray(values)) {
values = [];
}
var optionValues_1 = _this.matSelect.options.map(function (option) { return option.value; });
_this.previousSelected.forEach(function (previousValue) {
if (values.indexOf(previousValue) === -1 && optionValues_1.indexOf(previousValue) === -1) {
// if a value that was selected before is deselected and not found in the options, it was deselected
// due to the filtering, so we restore it.
values.push(previousValue);
restoreSelectedValues_1 = true;
}
});
}
if (restoreSelectedValues_1) {
_this.matSelect._onChange(values);
}
_this.previousSelected = values;
}
});
};
return DropdownMultiSelectComponent;
}(ngxComponentdestroyed.OnDestroyMixin));
DropdownMultiSelectComponent.decorators = [
{ type: core.Component, args: [{
selector: 'onto-dropdown-multi-select',
template: "<div class=\"mat-select-search-inner\">\n <input class=\"mat-select-search-input\" appCypressData=\"mat-select-search-input\"\n #searchSelectInput\n (keydown)=\"handleKeydown($event)\"\n (input)=\"onInputChange($event.target.value)\"\n (blur)=\"onBlur($event.target.value)\"\n placeholder=\"{{'ONTO_DROPDOWN.SEARCH_PLACEHOLDER' | transloco}}\"\n autocomplete=\"off\"/>\n <button mat-button *ngIf=\"searchValue\"\n mat-icon-button\n aria-label=\"Clear\"\n (click)=\"reset(true)\"\n class=\"mat-select-search-clear-button\">\n <mat-icon>close</mat-icon>\n </button>\n</div>\n\n<div *ngIf=\"searchValue && options?.length === 0\"\n class=\"mat-select-search-no-found\" appCypressData=\"mat-select-search-no-found\">\n {{'ONTO_DROPDOWN.NOT_FOUND' | transloco}}\n</div>\n",
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return DropdownMultiSelectComponent; }),
multi: true
}
],
encapsulation: core.ViewEncapsulation.None,
styles: [".mat-select-search-inner{background:#fff;border-bottom:1px solid #3f51b5;margin-right:16px;position:absolute;top:0;width:100%;z-index:100}input{border:0;font-family:Roboto,Helvetica Neue,sans-serif}input:focus{outline:none}.mat-select-search-panel{max-height:350px;min-width:100%!important;transform:none!important}.mat-select-search-input{box-sizing:border-box;padding:16px 36px 16px 16px;width:calc(100% - 42px)!important}.mat-select-search-no-found{font-family:Roboto,Helvetica Neue,sans-serif;padding:16px}.mat-select-search-clear-button{position:absolute;right:0;top:4px}.cdk-overlay-pane{animation:fadeIn .2s ease-in!important;margin-top:50px!important;opacity:1!important;padding-top:50px!important;transform:translateY(-15px)!important}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.mat-icon-button{margin-bottom:8px!important}"]
},] }
];
DropdownMultiSelectComponent.ctorParameters = function () { return [
{ type: select.MatSelect, decorators: [{ type: core.Inject, args: [select.MatSelect,] }] }
]; };
DropdownMultiSelectComponent.propDecorators = {
searchSelectInput: [{ type: core.ViewChild, args: ['searchSelectInput', { static: false, read: core.ElementRef },] }]
};
var ONTO_RANGE_FACET = {
SELECTED: "Selected: ",
NO_CANVAS_SUPPORT: "Your browser does not support canvas.",
SELECTED_MIN: "Selected min:",
SELECTED_MAX: "Selected max:"
};
var ONTO_DROPDOWN = {
SEARCH_PLACEHOLDER: "Search...",
NOT_FOUND: "No match found!",
DELIMITER: ","
};
var en$1 = {
ONTO_RANGE_FACET: ONTO_RANGE_FACET,
ONTO_DROPDOWN: ONTO_DROPDOWN
};
var CUSTOM_MAT_DATE_FORMATS = {
parse: {
dateInput: ['l', 'LL', 'DD/MM/YYYY', 'MM/DD/YYYY'],
},
display: {
dateInput: 'L',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
},
};
var translocoConfiguration$1 = {
availableLangs: ['en'],
fallbackLang: ['en'],
defaultLang: 'en',
prodMode: true,
reRenderOnLangChange: true,
missingHandler: {
useFallbackTranslation: true,
logMissingKey: true,
},
};
var ɵ0$1 = CUSTOM_MAT_DATE_FORMATS, ɵ1 = translocoConfiguration$1;
var OntoSearchFacetModule = /** @class */ (function () {
function OntoSearchFacetModule(translocoService) {
this.translocoService = translocoService;
this.translocoService.setTranslation(en$1, 'en');
}
return OntoSearchFacetModule;
}());
OntoSearchFacetModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [OntoSearchFacetComponent, CheckboxFacetComponent, DateRangeFacetComponent, ToggleFacetComponent, DropdownMultiSelectFacetComponent, DropdownMultiSelectComponent],
imports: [
common.CommonModule,
checkbox.MatCheckboxModule,
forms.FormsModule,
DirectivesModule,
formField.MatFormFieldModule,
input.MatInputModule,
datepicker.MatDatepickerModule,
materialMomentAdapter.MatMomentDateModule,
forms.ReactiveFormsModule,
slideToggle.MatSlideToggleModule,
transloco.TranslocoModule,
select.MatSelectModule,
icon.MatIconModule,
button.MatButtonModule,
animations.NoopAnimationsModule,
chips.MatChipsModule,
RangeFacetModule
],
exports: [OntoSearchFacetComponent],
providers: [
{
provide: core$1.MAT_DATE_FORMATS,
useValue: ɵ0$1
},
{
provide: transloco.TRANSLOCO_CONFIG,
useValue: ɵ1,
},
],
},] }
];
OntoSearchFacetModule.ctorParameters = function () { return [
{ type: transloco.TranslocoService }
]; };
/**
* Facet group data model for Date Range Facet
*
* @param {string} facetGroupName - Used as label for the facet
* @param {SearchDateFacetModel[]} facetGroupData - An array containing facet data
* @param {SearchFacetModel[]} selected - not used in Date Range Facet
* @param {string} [placeHolder] - placeholder for date picker
* @param {SearchDateFacetRange} selectedRange - used to pass date range to facet group and is emitted when there is a selection
*/
var SearchDateFacetGroupModel = /** @class */ (function () {
function SearchDateFacetGroupModel() {
}
return SearchDateFacetGroupModel;
}());
/**
* Facet data model for date range OntoSearchFaced
*
* @param {number} count - the 'hit' count for the facet
* @param {Date} facetData - date object for current facet
* @param {string} label - not used in Date Range Facet
* @param {boolean} selected - not used in Date Range Facet
*/
var SearchDateFacetModel = /** @class */ (function () {
function SearchDateFacetModel() {
}
return SearchDateFacetModel;
}());
/**
* Facet group data model for Range Facet
*
* @param {string} facetGroupName - Used as label for the facet
* @param {SearchFacetModel[]} facetGroupData - An array containing facet data
* @param {SearchFacetModel[]} selected - Not used in Range facet
* @param {SelectedRange} selectedRange - used to pass range and is emitted when there is a selection
* @param {boolean} showHistogram - Flag to render a facet count histogram. By default is set to false.
* @param {HistogramModel} histogramConfiguration - Used to define histogram configuration.
*/
var SearchRangeFacetGroupModel = /** @class */ (function () {
function SearchRangeFacetGroupModel() {
this.showHistogram = false;
}
return SearchRangeFacetGroupModel;
}());
var OntoSearchColumnSelector = /** @class */ (function () {
function OntoSearchColumnSelector() {
/**
* Fired when the dropdown panel is closed.
* Sends an array {@link SelectionColumn}
*/
this.selectionChanged = new core.EventEmitter();
this.selectCtrl = new forms.FormControl();
this.selection = [];
this.isSelectionChanged = false;
}
OntoSearchColumnSelector.prototype.ngOnChanges = function (changes) {
var _a, _b, _c;
var defaultColumns = (_a = changes === null || changes === void 0 ? void 0 : changes.defaultColumns) === null || _a === void 0 ? void 0 : _a.currentValue;
var selectedColumns = (_b = changes === null || changes === void 0 ? void 0 : changes.selectedColumns) === null || _b === void 0 ? void 0 : _b.currentValue;
var columnGroups = (_c = changes === null || changes === void 0 ? void 0 : changes.columnGroups) === null || _c === void 0 ? void 0 : _c.currentValue;
if (defaultColumns && defaultColumns.length > 0 && !this.selectedColumns) {
this.setFormColumnSelection(defaultColumns);
}
if (selectedColumns) {
this.setFormColumnSelection(selectedColumns);
}
if (columnGroups === null || columnGroups === void 0 ? void 0 : columnGroups.length) {
this.columnGroups.sort(this.compareColumnsByLabel);
}
};
OntoSearchColumnSelector.prototype.selectionChangedInternal = function ($event) {
this.isSelectionChanged = true;
this.selection = $event.value;
};
OntoSearchColumnSelector.prototype.onClosed = function () {
if (this.isSelectionChanged) {
this.isSelectionChanged = false;
this.selectionChanged.next(this.selection);
}
};
OntoSearchColumnSelector.prototype.compareColumnsLabels = function (columnA, columnB) {
return columnA.label === columnB.label;
};
OntoSearchColumnSelector.prototype.resetColumns = function () {
this.setFormColumnSelection(this.defaultColumns);
this.onClosed();
};
OntoSearchColumnSelector.prototype.setFormColumnSelection = function (columns) {
this.selectCtrl.setValue(__spread(columns));
this.selectCtrl.updateValueAndValidity();
this.selection = columns;
this.isSelectionChanged = true;
};
OntoSearchColumnSelector.prototype.compareColumnsByLabel = function (columnA, columnB) {
if (columnA.label > columnB.label) {
return 1;
}
else if (columnB.label > columnA.label) {
return -1;
}
return 0;
};
return OntoSearchColumnSelector;
}());
OntoSearchColumnSelector.decorators = [
{ type: core.Component, args: [{
selector: 'onto-search-column-selector',
template: "<div class=\"onto-column-selector-component\" appCypressData=\"onto-column-selector-component\">\n <button class=\"column-reset-button\" mat-raised-button appCypressData=\"column-reset-button\"\n color=\"primary\"\n (click)=\"resetColumns()\">{{'ONTO_COLUMN_SELECTOR.BUTTON.RESET' | transloco}}</button>\n <div class=\"column-select\">\n <mat-form-field class=\"form-field\">\n <mat-label>{{'ONTO_COLUMN_SELECTOR.COLUMN_SELECTOR_PLACEHOLDER' | transloco}}</mat-label>\n <mat-select multiple (selectionChange)=\"selectionChangedInternal($event)\"\n [formControl]=\"selectCtrl\" [compareWith]=\"compareColumnsLabels\"\n (closed)=\"onClosed()\" appCypressData=\"column-selection-dropdown\">\n <mat-optgroup *ngFor=\"let columnGroup of columnGroups, let index = index\"\n [label]=\"columnGroup.label\" [attr.appCypressData]=\"'column-group-' + index\">\n <mat-option *ngFor=\"let column of columnGroup.columns, let index = index\" [value]=\"column\"\n [attr.appCypressData]=\"'column-option-' + index\">\n {{column.label}}\n </mat-option>\n </mat-optgroup>\n </mat-select>\n </mat-form-field>\n </div>\n</div>\n",
styles: [".onto-column-selector-component{align-items:center;box-sizing:border-box;display:flex;flex-direction:row;height:100%;place-content:center flex-start;width:100%}.onto-column-selector-component .column-select{box-sizing:border-box;flex:1 1}.onto-column-selector-component .form-field{display:inherit}.onto-column-selector-component .column-reset-button{margin-right:1em}"]
},] }
];
OntoSearchColumnSelector.propDecorators = {
columnGroups: [{ type: core.Input }],
selectedColumns: [{ type: core.Input }],
defaultColumns: [{ type: core.Input }],
selectionChanged: [{ type: core.Output }]
};
var ONTO_COLUMN_SELECTOR = {
BUTTON: {
RESET: "Reset"
},
COLUMN_SELECTOR_PLACEHOLDER: "Search results columns"
};
var en$2 = {
ONTO_COLUMN_SELECTOR: ONTO_COLUMN_SELECTOR
};
var translocoConfiguration$2 = {
availableLangs: ['en'],
fallbackLang: ['en'],
defaultLang: 'en',
prodMode: true,
reRenderOnLangChange: true,
missingHandler: {
useFallbackTranslation: true,
logMissingKey: true,
},
};
var ɵ0$2 = translocoConfiguration$2;
var OntoSearchColumnSelectorModule = /** @class */ (function () {
function OntoSearchColumnSelectorModule(translocoService) {
this.translocoService = translocoService;
this.translocoService.setTranslation(en$2, 'en');
}
return OntoSearchColumnSelectorModule;
}());
OntoSearchColumnSelectorModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
DirectivesModule,
button.MatButtonModule,
formField.MatFormFieldModule,
select.MatSelectModule,
forms.ReactiveFormsModule,
transloco.TranslocoModule,
common.CommonModule
],
declarations: [OntoSearchColumnSelector],
providers: [
{
provide: transloco.TRANSLOCO_CONFIG,
useValue: ɵ0$2,
},
],
exports: [
OntoSearchColumnSelector
]
},] }
];
OntoSearchColumnSelectorModule.ctorParameters = function () { return [
{ type: transloco.TranslocoService }
]; };
/*
* Public API Surface of onto-search
*/
/**
* Generated bundle index. Do not edit.
*/
exports.OntoSearchColumnSelector = OntoSearchColumnSelector;
exports.OntoSearchColumnSelectorModule = OntoSearchColumnSelectorModule;
exports.OntoSearchFacetComponent = OntoSearchFacetComponent;
exports.OntoSearchFacetModule = OntoSearchFacetModule;
exports.OntoSearchFieldComponent = OntoSearchFieldComponent;
exports.OntoSearchFieldModule = OntoSearchFieldModule;
exports.OntoSearchPaginatorComponent = OntoSearchPaginatorComponent;
exports.OntoSearchPaginatorModule = OntoSearchPaginatorModule;
exports.OntoSearchResultsComponent = OntoSearchResultsComponent;
exports.OntoSearchResultsModule = OntoSearchResultsModule;
exports.SearchDateFacetGroupModel = SearchDateFacetGroupModel;
exports.SearchDateFacetModel = SearchDateFacetModel;
exports.SearchFieldConfiguration = SearchFieldConfiguration;
exports.SearchRangeFacetGroupModel = SearchRangeFacetGroupModel;
exports.ɵ0 = ɵ0;
exports.ɵ1 = ɵ1;
exports.ɵa = SearchComponent;
exports.ɵb = DirectivesModule;
exports.ɵc = CypressDataDirective;
exports.ɵd = CheckboxFacetComponent;
exports.ɵe = DateRangeFacetComponent;
exports.ɵf = ToggleFacetComponent;
exports.ɵg = DropdownMultiSelectFacetComponent;
exports.ɵh = DropdownMultiSelectComponent;
exports.ɵi = RangeFacetModule;
exports.ɵj = RangeFacetComponent;
exports.ɵk = RangeSliderComponent;
exports.ɵl = RangeHistogramComponent;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=onto-search.umd.js.map