\\n
\";\n return template;\n };\n DefaultRecommendationTemplate.prototype.instantiateToElement = function (object) {\n var _this = this;\n return new Promise(function (resolve, reject) {\n var div = document.createElement('div');\n div.innerHTML = _this.instantiateToString(object);\n resolve(div);\n });\n };\n return DefaultRecommendationTemplate;\n}(Template_1.Template));\nexports.DefaultRecommendationTemplate = DefaultRecommendationTemplate;\n\n\n/***/ }),\n\n/***/ 472:\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nvar __generator = (this && this.__generator) || function (thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (_) try {\n if (f = 1, y && (t = y[op[0] & 2 ? \"return\" : op[0] ? \"throw\" : \"next\"]) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [0, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Core_1 = __webpack_require__(20);\nvar ResultList_1 = __webpack_require__(92);\nvar underscore_1 = __webpack_require__(0);\nvar Dom_1 = __webpack_require__(1);\nvar Logger_1 = __webpack_require__(9);\nvar TemplateToHtml = /** @class */ (function () {\n function TemplateToHtml(args) {\n this.args = args;\n }\n TemplateToHtml.prototype.buildResults = function (results, layout, currentlyDisplayedResults) {\n return __awaiter(this, void 0, void 0, function () {\n var _this = this;\n var res, resultsPromises;\n return __generator(this, function (_a) {\n res = [];\n resultsPromises = underscore_1.map(results.results, function (result, index) {\n return _this.buildResult(result, layout, currentlyDisplayedResults).then(function (resultElement) {\n if (resultElement != null) {\n res.push({ elem: resultElement, idx: index });\n }\n ResultList_1.ResultList.resultCurrentlyBeingRendered = null;\n return resultElement;\n });\n });\n // We need to sort by the original index order, because in lazy loading mode, it's possible that results does not gets rendered\n // in the correct order returned by the index, depending on the time it takes to load all the results component for a given result template\n return [2 /*return*/, Promise.all(resultsPromises).then(function () {\n return underscore_1.pluck(underscore_1.sortBy(res, 'idx'), 'elem');\n })];\n });\n });\n };\n TemplateToHtml.prototype.buildResult = function (result, layout, currentlyDisplayedResults) {\n return __awaiter(this, void 0, void 0, function () {\n var resultElement;\n return __generator(this, function (_a) {\n switch (_a.label) {\n case 0:\n Core_1.Assert.exists(result);\n Core_1.QueryUtils.setStateObjectOnQueryResult(this.args.queryStateModel.get(), result);\n Core_1.QueryUtils.setSearchInterfaceObjectOnQueryResult(this.args.searchInterface, result);\n ResultList_1.ResultList.resultCurrentlyBeingRendered = result;\n return [4 /*yield*/, this.createHtmlElement(result, layout)];\n case 1:\n resultElement = _a.sent();\n if (resultElement != null) {\n Core_1.Component.bindResultToElement(resultElement, result);\n }\n currentlyDisplayedResults.push(result);\n return [4 /*yield*/, this.autoCreateComponentsInsideResult(resultElement, result).initResult];\n case 2:\n _a.sent();\n this.verifyChildren(resultElement);\n return [2 /*return*/, resultElement];\n }\n });\n });\n };\n TemplateToHtml.prototype.autoCreateComponentsInsideResult = function (element, result) {\n Core_1.Assert.exists(element);\n return Core_1.Initialization.automaticallyCreateComponentsInsideResult(element, result);\n };\n TemplateToHtml.prototype.createHtmlElement = function (result, layout) {\n return this.args.resultTemplate.instantiateToElement(result, {\n wrapInDiv: true,\n checkCondition: true,\n currentLayout: layout,\n responsiveComponents: this.args.searchInterface.responsiveComponents\n });\n };\n TemplateToHtml.prototype.verifyChildren = function (element) {\n var containsResultLink = !!Dom_1.$$(element).find('.CoveoResultLink');\n if (containsResultLink) {\n return;\n }\n var msg = \"Result does not contain a \\\"CoveoResultLink\\\" component, please verify the result template\";\n new Logger_1.Logger(element).warn(msg, this.args.resultTemplate);\n };\n return TemplateToHtml;\n}());\nexports.TemplateToHtml = TemplateToHtml;\n\n\n/***/ }),\n\n/***/ 473:\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\nvar __assign = (this && this.__assign) || Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar TemplateHelpers_1 = __webpack_require__(121);\nvar HighlightUtils_1 = __webpack_require__(69);\nvar DateUtils_1 = __webpack_require__(33);\nvar CurrencyUtils_1 = __webpack_require__(134);\nvar HtmlUtils_1 = __webpack_require__(179);\nvar Utils_1 = __webpack_require__(4);\nvar StringUtils_1 = __webpack_require__(22);\nvar TimeSpanUtils_1 = __webpack_require__(73);\nvar EmailUtils_1 = __webpack_require__(178);\nvar QueryUtils_1 = __webpack_require__(21);\nvar DeviceUtils_1 = __webpack_require__(24);\nvar Dom_1 = __webpack_require__(1);\nvar SearchEndpoint_1 = __webpack_require__(53);\nvar StreamHighlightUtils_1 = __webpack_require__(119);\nvar FacetUtils_1 = __webpack_require__(40);\nvar Globalize = __webpack_require__(23);\nvar _ = __webpack_require__(0);\nvar Component_1 = __webpack_require__(7);\nvar TemplateCache_1 = __webpack_require__(68);\nvar CoreHelpers = /** @class */ (function () {\n function CoreHelpers() {\n }\n /**\n * For backward compatibility reason, the \"global\" template helper should be available under the\n * coveo namespace.\n * @param scope\n */\n CoreHelpers.exportAllHelpersGlobally = function (scope) {\n _.each(TemplateHelpers_1.TemplateHelpers.getHelpers(), function (helper, name) {\n if (scope[name] == undefined) {\n scope[name] = helper;\n }\n });\n };\n return CoreHelpers;\n}());\nexports.CoreHelpers = CoreHelpers;\nTemplateHelpers_1.TemplateHelpers.registerFieldHelper('javascriptEncode', function (value) {\n return Utils_1.Utils.exists(value) ? StringUtils_1.StringUtils.javascriptEncode(value) : undefined;\n});\nvar executeShorten = function (content, options) {\n var strAndHoles = HighlightUtils_1.StringAndHoles.shortenString(content, options.length, '...');\n if (Utils_1.Utils.exists(options.highlights)) {\n return HighlightUtils_1.HighlightUtils.highlightString(strAndHoles.value, options.highlights, strAndHoles.holes, options.cssClass || 'highlight');\n }\n else {\n return strAndHoles.value;\n }\n};\nTemplateHelpers_1.TemplateHelpers.registerTemplateHelper('shorten', function (content, length, highlights, cssClass) {\n return executeShorten(content, {\n length: length,\n highlights: highlights,\n cssClass: cssClass\n });\n});\nTemplateHelpers_1.TemplateHelpers.registerTemplateHelper('shortenv2', function (content, options) {\n return executeShorten(content, options);\n});\nvar executeShortenPath = function (content, options) {\n var strAndHoles = HighlightUtils_1.StringAndHoles.shortenPath(content, options.length);\n if (Utils_1.Utils.exists(options.highlights)) {\n return HighlightUtils_1.HighlightUtils.highlightString(strAndHoles.value, options.highlights, strAndHoles.holes, options.cssClass || 'highlight');\n }\n else {\n return strAndHoles.value;\n }\n};\nTemplateHelpers_1.TemplateHelpers.registerTemplateHelper('shortenPath', function (content, length, highlights, cssClass) {\n return executeShortenPath(content, {\n length: length,\n highlights: highlights,\n cssClass: cssClass\n });\n});\nTemplateHelpers_1.TemplateHelpers.registerFieldHelper('shortenPathv2', function (content, options) {\n return executeShortenPath(content, options);\n});\nvar executeShortenUri = function (content, options) {\n var strAndHoles = HighlightUtils_1.StringAndHoles.shortenUri(content, options.length);\n if (Utils_1.Utils.exists(options.highlights)) {\n return HighlightUtils_1.HighlightUtils.highlightString(strAndHoles.value, options.highlights, strAndHoles.holes, options.cssClass || 'highlight');\n }\n else {\n return strAndHoles.value;\n }\n};\nTemplateHelpers_1.TemplateHelpers.registerTemplateHelper('shortenUri', function (content, length, highlights, cssClass) {\n return executeShortenUri(content, {\n length: length,\n highlights: highlights,\n cssClass: cssClass\n });\n});\nTemplateHelpers_1.TemplateHelpers.registerTemplateHelper('shortenUriv2', function (content, options) {\n return executeShortenUri(content, options);\n});\nvar executeHighlight = function (content, options) {\n if (Utils_1.Utils.exists(content)) {\n if (Utils_1.Utils.exists(options.highlights)) {\n return HighlightUtils_1.HighlightUtils.highlightString(content, options.highlights, null, options.cssClass || 'highlight');\n }\n else {\n return content;\n }\n }\n else {\n return undefined;\n }\n};\nTemplateHelpers_1.TemplateHelpers.registerTemplateHelper('highlight', function (content, highlights, cssClass) {\n return executeHighlight(content, {\n highlights: highlights,\n cssClass: cssClass\n });\n});\nTemplateHelpers_1.TemplateHelpers.registerTemplateHelper('highlightv2', function (content, options) {\n return executeHighlight(content, options);\n});\nvar executeHighlightStreamText = function (content, options) {\n if (Utils_1.Utils.exists(content) && Utils_1.Utils.exists(options.termsToHighlight) && Utils_1.Utils.exists(options.phrasesToHighlight)) {\n if (termsToHighlightAreDefined(options.termsToHighlight, options.phrasesToHighlight)) {\n return StreamHighlightUtils_1.StreamHighlightUtils.highlightStreamText(content, options.termsToHighlight, options.phrasesToHighlight, options.opts);\n }\n else {\n return content;\n }\n }\n else {\n return undefined;\n }\n};\nTemplateHelpers_1.TemplateHelpers.registerTemplateHelper('highlightStreamText', function (content, termsToHighlight, phrasesToHighlight, opts) {\n if (termsToHighlight === void 0) { termsToHighlight = resolveTermsToHighlight(); }\n if (phrasesToHighlight === void 0) { phrasesToHighlight = resolvePhrasesToHighlight(); }\n return executeHighlightStreamText(content, {\n termsToHighlight: termsToHighlight,\n phrasesToHighlight: phrasesToHighlight,\n opts: opts\n });\n});\nTemplateHelpers_1.TemplateHelpers.registerTemplateHelper('highlightStreamTextv2', function (content, options) {\n var mergedOptions = __assign({ termsToHighlight: resolveTermsToHighlight(), phrasesToHighlight: resolvePhrasesToHighlight() }, options);\n return executeHighlightStreamText(content, mergedOptions);\n});\nvar executeHighlightStreamHTML = function (content, options) {\n if (Utils_1.Utils.exists(content) && Utils_1.Utils.exists(options.termsToHighlight) && Utils_1.Utils.exists(options.phrasesToHighlight)) {\n if (termsToHighlightAreDefined(options.termsToHighlight, options.phrasesToHighlight)) {\n return StreamHighlightUtils_1.StreamHighlightUtils.highlightStreamHTML(content, options.termsToHighlight, options.phrasesToHighlight, options.opts);\n }\n else {\n return content;\n }\n }\n else {\n return undefined;\n }\n};\nTemplateHelpers_1.TemplateHelpers.registerTemplateHelper('highlightStreamHTML', function (content, termsToHighlight, phrasesToHighlight, opts) {\n if (termsToHighlight === void 0) { termsToHighlight = resolveTermsToHighlight(); }\n if (phrasesToHighlight === void 0) { phrasesToHighlight = resolvePhrasesToHighlight(); }\n return executeHighlightStreamHTML(content, {\n termsToHighlight: termsToHighlight,\n phrasesToHighlight: phrasesToHighlight,\n opts: opts\n });\n});\nTemplateHelpers_1.TemplateHelpers.registerTemplateHelper('highlightStreamHTMLv2', function (content, options) {\n var mergedOptions = __assign({ termsToHighlight: resolveTermsToHighlight(), phrasesToHighlight: resolvePhrasesToHighlight() }, options);\n return executeHighlightStreamHTML(content, mergedOptions);\n});\nTemplateHelpers_1.TemplateHelpers.registerFieldHelper('number', function (value, options) {\n if (!Utils_1.Utils.exists(value)) {\n return undefined;\n }\n var numberValue = Number(value);\n var format = _.isString(options) ? options : options && options.format;\n if (!format) {\n return StringUtils_1.StringUtils.htmlEncode(numberValue.toString());\n }\n return StringUtils_1.StringUtils.htmlEncode(Globalize.format(numberValue, format));\n});\nTemplateHelpers_1.TemplateHelpers.registerFieldHelper('date', function (value, options) {\n return DateUtils_1.DateUtils.dateToString(DateUtils_1.DateUtils.convertFromJsonDateIfNeeded(value), options);\n});\nTemplateHelpers_1.TemplateHelpers.registerFieldHelper('time', function (value, options) {\n return DateUtils_1.DateUtils.timeToString(DateUtils_1.DateUtils.convertFromJsonDateIfNeeded(value), options);\n});\nTemplateHelpers_1.TemplateHelpers.registerFieldHelper('dateTime', function (value, options) {\n return DateUtils_1.DateUtils.dateTimeToString(DateUtils_1.DateUtils.convertFromJsonDateIfNeeded(value), options);\n});\nTemplateHelpers_1.TemplateHelpers.registerFieldHelper('emailDateTime', function (value, options) {\n var defaultOptions = {};\n defaultOptions.includeTimeIfThisWeek = true;\n var optionsToUse = _.extend(options, defaultOptions);\n return value ? DateUtils_1.DateUtils.dateTimeToString(DateUtils_1.DateUtils.convertFromJsonDateIfNeeded(value), optionsToUse) : undefined;\n});\nTemplateHelpers_1.TemplateHelpers.registerFieldHelper('currency', function (value, options) {\n return CurrencyUtils_1.CurrencyUtils.currencyToString(value, options);\n});\nTemplateHelpers_1.TemplateHelpers.registerFieldHelper('timeSpan', function (value, options) {\n if (options === void 0) { options = { isMilliseconds: false }; }\n return new TimeSpanUtils_1.TimeSpan(value, options.isMilliseconds).getHHMMSS();\n});\nTemplateHelpers_1.TemplateHelpers.registerFieldHelper('email', function (value) {\n var args = [];\n for (var _i = 1; _i < arguments.length; _i++) {\n args[_i - 1] = arguments[_i];\n }\n // support old arguments (value: any, companyDomain: string, me: string, lengthLimit = 2, truncateName = false)\n var companyDomain;\n var me;\n var lengthLimit;\n var truncateName;\n if (_.isObject(args[0])) {\n companyDomain = args[0]['companyDomain'];\n me = args[0]['me'];\n lengthLimit = args[0]['lengthLimit'];\n truncateName = args[0]['truncateName'];\n }\n else {\n companyDomain = args[0];\n me = args[1];\n lengthLimit = args[2];\n truncateName = args[3];\n }\n if (lengthLimit == undefined) {\n lengthLimit = 2;\n }\n if (truncateName == undefined) {\n truncateName = false;\n }\n if (_.isString(value)) {\n var listOfAddresses = EmailUtils_1.EmailUtils.splitSemicolonSeparatedListOfEmailAddresses(value);\n return EmailUtils_1.EmailUtils.emailAddressesToHyperlinks(listOfAddresses, companyDomain, me, lengthLimit, truncateName);\n }\n else if (_.isArray(value)) {\n return EmailUtils_1.EmailUtils.emailAddressesToHyperlinks(value, companyDomain, me, lengthLimit, truncateName);\n }\n else {\n return undefined;\n }\n});\nTemplateHelpers_1.TemplateHelpers.registerTemplateHelper('excessEmailToggle', function (target) {\n Dom_1.$$(target).removeClass('coveo-active');\n if (Dom_1.$$(target).hasClass('coveo-emails-excess-collapsed')) {\n _.each(Dom_1.$$(target).siblings('.coveo-emails-excess-expanded'), function (sibling) {\n Dom_1.$$(sibling).addClass('coveo-active');\n });\n }\n else if (Dom_1.$$(target).hasClass('coveo-hide-expanded')) {\n Dom_1.$$(target.parentElement).addClass('coveo-inactive');\n _.each(Dom_1.$$(target.parentElement).siblings('.coveo-emails-excess-collapsed'), function (sibling) {\n Dom_1.$$(sibling).addClass('coveo-active');\n });\n }\n return undefined;\n});\nTemplateHelpers_1.TemplateHelpers.registerFieldHelper('anchor', function (href, options) {\n return HtmlUtils_1.AnchorUtils.buildAnchor(href, options);\n});\nTemplateHelpers_1.TemplateHelpers.registerFieldHelper('image', function (src, options, result) {\n if (result === void 0) { result = resolveQueryResult(); }\n if (options && options.srcTemplate) {\n return HtmlUtils_1.ImageUtils.buildImage(StringUtils_1.StringUtils.buildStringTemplateFromResult(options.srcTemplate, result), {\n alt: options.alt,\n height: options.height,\n width: options.width\n });\n }\n return HtmlUtils_1.ImageUtils.buildImage(src, options);\n});\nTemplateHelpers_1.TemplateHelpers.registerTemplateHelper('thumbnail', function (result, endpoint, options) {\n if (result === void 0) { result = resolveQueryResult(); }\n if (endpoint === void 0) { endpoint = 'default'; }\n if (QueryUtils_1.QueryUtils.hasThumbnail(result)) {\n return HtmlUtils_1.ImageUtils.buildImageFromResult(result, SearchEndpoint_1.SearchEndpoint.endpoints[endpoint], options);\n }\n});\nTemplateHelpers_1.TemplateHelpers.registerTemplateHelper('fromFileTypeToIcon', function (result, options) {\n if (result === void 0) { result = resolveQueryResult(); }\n if (options === void 0) { options = {}; }\n var icon = Component_1.Component.getComponentRef('Icon');\n if (icon) {\n return icon.createIcon(result, options).outerHTML;\n }\n});\nTemplateHelpers_1.TemplateHelpers.registerTemplateHelper('attrEncode', function (value) {\n return ('' + value) /* Forces the conversion to string. */\n .replace(/&/g, '&') /* This MUST be the 1st replacement. */\n .replace(/'/g, ''') /* The 4 other predefined entities, required. */\n .replace(/'/g, '"')\n .replace(//g, '>');\n});\nTemplateHelpers_1.TemplateHelpers.registerTemplateHelper('loadTemplates', function (templatesToLoad, once) {\n if (once === void 0) { once = true; }\n var ret = '';\n var data = resolveQueryResult();\n var atLeastOneWasLoaded = false;\n var toLoad = templatesToLoad;\n var defaultTmpl;\n _.each(templatesToLoad, function (value, key, obj) {\n if (value == 'default') {\n defaultTmpl = key;\n }\n });\n if (defaultTmpl != undefined) {\n toLoad = _.omit(templatesToLoad, defaultTmpl);\n }\n _.each(toLoad, function (condition, id, obj) {\n if (!atLeastOneWasLoaded || !once) {\n atLeastOneWasLoaded = atLeastOneWasLoaded || condition;\n ret += TemplateHelpers_1.TemplateHelpers.getHelper('loadTemplate')(id, condition, data);\n }\n });\n if (!atLeastOneWasLoaded && defaultTmpl != undefined) {\n ret += TemplateHelpers_1.TemplateHelpers.getHelper('loadTemplate')(defaultTmpl, true, data);\n }\n return ret;\n});\nvar byteMeasure = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'];\nTemplateHelpers_1.TemplateHelpers.registerFieldHelper('size', function (value, options) {\n var size = parseInt(value, 10);\n var precision = options != null && options.precision != null ? options.precision : 2;\n var base = options != null && options.base != null ? options.base : 0;\n while (size > 1024 && base + 1 < byteMeasure.length) {\n size /= 1024;\n base++;\n }\n size = Math.floor(size * Math.pow(10, precision)) / Math.pow(10, precision);\n return size + ' ' + byteMeasure[base];\n});\nTemplateHelpers_1.TemplateHelpers.registerFieldHelper('translatedCaption', function (value) {\n return FacetUtils_1.FacetUtils.tryToGetTranslatedCaption('@filetype', value);\n});\nTemplateHelpers_1.TemplateHelpers.registerTemplateHelper('loadTemplate', function (id, condition, data) {\n if (condition === void 0) { condition = true; }\n if (Utils_1.Utils.isNullOrUndefined(data)) {\n data = resolveQueryResult();\n }\n if (condition) {\n return TemplateCache_1.TemplateCache.getTemplate(id).instantiateToString(data, {\n checkCondition: false\n });\n }\n return '';\n});\nTemplateHelpers_1.TemplateHelpers.registerTemplateHelper('encodeCarriageReturn', function (data) {\n if (Utils_1.Utils.isNullOrUndefined(data)) {\n return undefined;\n }\n else {\n return StringUtils_1.StringUtils.encodeCarriageReturn(data);\n }\n});\nTemplateHelpers_1.TemplateHelpers.registerTemplateHelper('isMobileDevice', function () {\n return DeviceUtils_1.DeviceUtils.isMobileDevice() ? DeviceUtils_1.DeviceUtils.getDeviceName() : null;\n});\nTemplateHelpers_1.TemplateHelpers.registerTemplateHelper('pluralHelper', function (count, options) {\n return count > 1 ? options.plural : options.singular;\n});\nfunction resolveQueryResult() {\n var found;\n var resultList = Component_1.Component.getComponentRef('ResultList');\n if (resultList) {\n found = resultList.resultCurrentlyBeingRendered;\n }\n if (!found) {\n var quickview = Component_1.Component.getComponentRef('Quickview');\n if (quickview) {\n found = quickview.resultCurrentlyBeingRendered;\n }\n }\n return found;\n}\nfunction resolveTermsToHighlight() {\n var currentQueryResult = resolveQueryResult();\n if (currentQueryResult) {\n return currentQueryResult.termsToHighlight;\n }\n}\nfunction resolvePhrasesToHighlight() {\n var currentQueryResult = resolveQueryResult();\n if (currentQueryResult) {\n return currentQueryResult.phrasesToHighlight;\n }\n}\nfunction termsToHighlightAreDefined(termsToHighlight, phrasesToHighlight) {\n return Utils_1.Utils.isNonEmptyArray(_.keys(termsToHighlight)) || Utils_1.Utils.isNonEmptyArray(_.keys(phrasesToHighlight));\n}\n\n\n/***/ }),\n\n/***/ 475:\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", { value: true });\n/**\n * The possible values for the [allowedValuesPatternType]{@link IGroupByRequest.allowedValuesPatternType} property of the `IGroupByRequest` interface.\n */\nvar AllowedValuesPatternType;\n(function (AllowedValuesPatternType) {\n /**\n * Only supports trailing wildcards in the pattern.\n */\n AllowedValuesPatternType[\"Legacy\"] = \"legacy\";\n /**\n * Fully supports wildcards.\n */\n AllowedValuesPatternType[\"Wildcards\"] = \"wildcards\";\n /**\n * Supports regular expression as the pattern.\n */\n AllowedValuesPatternType[\"Regex\"] = \"regex\";\n /**\n *Applies the Edit Distance algorithm to match values that are close to the specified pattern.\n */\n AllowedValuesPatternType[\"EditDistance\"] = \"editdistance\";\n /**\n *Applies a phonetic algorithm to match values that are phonetically similar to the specified pattern.\n */\n AllowedValuesPatternType[\"Phonetic\"] = \"phonetic\";\n})(AllowedValuesPatternType = exports.AllowedValuesPatternType || (exports.AllowedValuesPatternType = {}));\n\n\n/***/ }),\n\n/***/ 476:\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar ValueElementRenderer_1 = __webpack_require__(477);\nvar Utils_1 = __webpack_require__(4);\nvar AnalyticsActionListMeta_1 = __webpack_require__(10);\nvar Dom_1 = __webpack_require__(1);\nvar KeyboardUtils_1 = __webpack_require__(25);\nvar ValueElement = /** @class */ (function () {\n function ValueElement(facet, facetValue, onSelect, onExclude) {\n this.facet = facet;\n this.facetValue = facetValue;\n this.onSelect = onSelect;\n this.onExclude = onExclude;\n }\n ValueElement.prototype.build = function () {\n this.renderer = new ValueElementRenderer_1.ValueElementRenderer(this.facet, this.facetValue).build();\n this.bindEvent({ displayNextTime: true, pinFacet: this.facet.options.preservePosition });\n return this;\n };\n ValueElement.prototype.bindEvent = function (eventBindings) {\n if (!Utils_1.Utils.isNullOrUndefined(eventBindings.omniboxObject)) {\n this.isOmnibox = true;\n }\n else {\n this.isOmnibox = false;\n }\n this.handleEventForCheckboxChange(eventBindings);\n if (this.facetValue.excluded) {\n this.handleEventForExcludedValueElement(eventBindings);\n }\n else {\n this.handleEventForValueElement(eventBindings);\n }\n };\n ValueElement.prototype.select = function () {\n this.facetValue.selected = true;\n this.facetValue.excluded = false;\n this.renderer.setCssClassOnListValueElement();\n };\n ValueElement.prototype.unselect = function () {\n this.facetValue.selected = false;\n this.facetValue.excluded = false;\n this.renderer.setCssClassOnListValueElement();\n };\n ValueElement.prototype.exclude = function () {\n this.facetValue.selected = false;\n this.facetValue.excluded = true;\n this.renderer.setCssClassOnListValueElement();\n };\n ValueElement.prototype.unexclude = function () {\n this.facetValue.selected = false;\n this.facetValue.excluded = false;\n this.renderer.setCssClassOnListValueElement();\n };\n ValueElement.prototype.toggleExcludeWithUA = function () {\n var _this = this;\n var actionCause;\n if (this.facetValue.excluded) {\n actionCause = this.isOmnibox ? AnalyticsActionListMeta_1.analyticsActionCauseList.omniboxFacetUnexclude : AnalyticsActionListMeta_1.analyticsActionCauseList.facetUnexclude;\n }\n else {\n actionCause = this.isOmnibox ? AnalyticsActionListMeta_1.analyticsActionCauseList.omniboxFacetExclude : AnalyticsActionListMeta_1.analyticsActionCauseList.facetExclude;\n }\n this.facet.toggleExcludeValue(this.facetValue);\n if (this.onExclude) {\n this.facet.triggerNewQuery(function () { return _this.onExclude(_this, actionCause); });\n }\n else {\n this.facet.triggerNewQuery(function () {\n return _this.facet.usageAnalytics.logSearchEvent(actionCause, _this.getAnalyticsFacetMeta());\n });\n }\n };\n ValueElement.prototype.handleSelectValue = function (eventBindings) {\n var _this = this;\n this.facet.keepDisplayedValuesNextTime = eventBindings.displayNextTime && !this.facet.options.useAnd;\n var actionCause;\n if (this.facetValue.excluded) {\n actionCause = this.isOmnibox ? AnalyticsActionListMeta_1.analyticsActionCauseList.omniboxFacetUnexclude : AnalyticsActionListMeta_1.analyticsActionCauseList.facetUnexclude;\n this.facet.unexcludeValue(this.facetValue);\n }\n else {\n if (this.facetValue.selected) {\n actionCause = this.isOmnibox ? AnalyticsActionListMeta_1.analyticsActionCauseList.omniboxFacetDeselect : AnalyticsActionListMeta_1.analyticsActionCauseList.facetDeselect;\n }\n else {\n actionCause = this.isOmnibox ? AnalyticsActionListMeta_1.analyticsActionCauseList.omniboxFacetSelect : AnalyticsActionListMeta_1.analyticsActionCauseList.facetSelect;\n }\n this.facet.toggleSelectValue(this.facetValue);\n }\n if (this.onSelect) {\n this.facet.triggerNewQuery(function () { return _this.onSelect(_this, actionCause); });\n }\n else {\n this.facet.triggerNewQuery(function () {\n return _this.facet.usageAnalytics.logSearchEvent(actionCause, _this.getAnalyticsFacetMeta());\n });\n }\n };\n ValueElement.prototype.handleExcludeClick = function (eventBindings) {\n this.facet.keepDisplayedValuesNextTime = eventBindings.displayNextTime && !this.facet.options.useAnd;\n this.toggleExcludeWithUA();\n };\n ValueElement.prototype.handleSelectEventForExcludedValueElement = function (eventBindings) {\n var _this = this;\n var clickEvent = function () {\n if (eventBindings.pinFacet) {\n _this.facet.pinFacetPosition();\n }\n if (eventBindings.omniboxObject) {\n _this.omniboxCloseEvent(eventBindings.omniboxObject);\n }\n _this.handleSelectValue(eventBindings);\n _this.tryDismissSearchResults();\n return false;\n };\n Dom_1.$$(this.renderer.label).on('click', function (e) {\n e.stopPropagation();\n clickEvent();\n });\n Dom_1.$$(this.renderer.stylishCheckbox).on('keydown', KeyboardUtils_1.KeyboardUtils.keypressAction([KeyboardUtils_1.KEYBOARD.SPACEBAR, KeyboardUtils_1.KEYBOARD.ENTER], clickEvent));\n };\n ValueElement.prototype.handleExcludeEventForValueElement = function (eventBindings) {\n var _this = this;\n var excludeAction = function (event) {\n if (eventBindings.omniboxObject) {\n _this.omniboxCloseEvent(eventBindings.omniboxObject);\n }\n _this.handleExcludeClick(eventBindings);\n _this.tryDismissSearchResults();\n event.stopPropagation();\n event.preventDefault();\n };\n Dom_1.$$(this.renderer.excludeIcon).on('click', excludeAction);\n Dom_1.$$(this.renderer.excludeIcon).on('keydown', KeyboardUtils_1.KeyboardUtils.keypressAction([KeyboardUtils_1.KEYBOARD.SPACEBAR, KeyboardUtils_1.KEYBOARD.ENTER], excludeAction));\n };\n ValueElement.prototype.handleSelectEventForValueElement = function (eventBindings) {\n var _this = this;\n var selectAction = function (event) {\n if (eventBindings.pinFacet) {\n _this.facet.pinFacetPosition();\n }\n _this.tryDismissSearchResults();\n Dom_1.$$(_this.renderer.checkbox).trigger('change');\n event.preventDefault();\n };\n Dom_1.$$(this.renderer.label).on('click', selectAction);\n Dom_1.$$(this.renderer.stylishCheckbox).on('keydown', KeyboardUtils_1.KeyboardUtils.keypressAction([KeyboardUtils_1.KEYBOARD.SPACEBAR, KeyboardUtils_1.KEYBOARD.ENTER], selectAction));\n };\n ValueElement.prototype.handleEventForExcludedValueElement = function (eventBindings) {\n this.handleSelectEventForExcludedValueElement(eventBindings);\n this.handleExcludeEventForValueElement(eventBindings);\n };\n ValueElement.prototype.handleEventForValueElement = function (eventBindings) {\n this.handleSelectEventForValueElement(eventBindings);\n this.handleExcludeEventForValueElement(eventBindings);\n };\n ValueElement.prototype.handleEventForCheckboxChange = function (eventBindings) {\n var _this = this;\n Dom_1.$$(this.renderer.checkbox).on('change', function () {\n if (eventBindings.omniboxObject) {\n _this.omniboxCloseEvent(eventBindings.omniboxObject);\n }\n _this.handleSelectValue(eventBindings);\n });\n };\n ValueElement.prototype.omniboxCloseEvent = function (eventArg) {\n eventArg.closeOmnibox();\n eventArg.clear();\n };\n ValueElement.prototype.tryDismissSearchResults = function () {\n if (this.facet && this.facet.facetSearch && this.facet.facetSearch.dismissSearchResults) {\n this.facet.facetSearch.dismissSearchResults();\n }\n };\n ValueElement.prototype.getAnalyticsFacetMeta = function () {\n return {\n facetId: this.facet.options.id,\n facetField: this.facet.options.field.toString(),\n facetValue: this.facetValue.value,\n facetTitle: this.facet.options.title\n };\n };\n return ValueElement;\n}());\nexports.ValueElement = ValueElement;\n\n\n/***/ }),\n\n/***/ 477:\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Dom_1 = __webpack_require__(1);\nvar Utils_1 = __webpack_require__(4);\nvar Strings_1 = __webpack_require__(6);\nvar Component_1 = __webpack_require__(7);\nvar _ = __webpack_require__(0);\nvar SVGIcons_1 = __webpack_require__(12);\nvar SVGDom_1 = __webpack_require__(16);\nvar ValueElementRenderer = /** @class */ (function () {\n function ValueElementRenderer(facet, facetValue) {\n this.facet = facet;\n this.facetValue = facetValue;\n }\n ValueElementRenderer.prototype.withNo = function (element) {\n if (_.isArray(element)) {\n _.each(element, function (e) {\n if (e) {\n Dom_1.$$(e).detach();\n }\n });\n }\n else {\n if (element) {\n Dom_1.$$(element).detach();\n }\n }\n return this;\n };\n ValueElementRenderer.prototype.build = function () {\n this.buildListItem();\n this.initAndAppendLabel();\n this.initAndAppendExcludeIcon();\n this.setCssClassOnListValueElement();\n this.addAccessibilityAttributesToTargetElement();\n return this;\n };\n ValueElementRenderer.prototype.setCssClassOnListValueElement = function () {\n Dom_1.$$(this.listItem).toggleClass('coveo-selected', this.facetValue.selected);\n Dom_1.$$(this.listItem).toggleClass('coveo-excluded', this.facetValue.excluded);\n };\n Object.defineProperty(ValueElementRenderer.prototype, \"accessibleElement\", {\n get: function () {\n return this.stylishCheckbox;\n },\n enumerable: true,\n configurable: true\n });\n ValueElementRenderer.prototype.buildExcludeIcon = function () {\n var isExcluded = this.facetValue.excluded;\n var excludeIcon = Dom_1.$$('div', {\n ariaLabel: Strings_1.l('ExcludeValueWithResultCount', this.caption, Strings_1.l('ResultCount', this.count, parseInt(this.count, 10))),\n className: 'coveo-facet-value-exclude',\n tabindex: 0,\n role: 'button',\n ariaPressed: isExcluded.toString()\n }).el;\n this.addFocusAndBlurEventListeners(excludeIcon);\n excludeIcon.innerHTML = isExcluded ? SVGIcons_1.SVGIcons.icons.plus : SVGIcons_1.SVGIcons.icons.checkboxHookExclusionMore;\n SVGDom_1.SVGDom.addClassToSVGInContainer(excludeIcon, isExcluded ? 'coveo-facet-value-unexclude-svg' : 'coveo-facet-value-exclude-svg');\n SVGDom_1.SVGDom.addAttributesToSVGInContainer(excludeIcon, { 'aria-hidden': 'true' });\n return excludeIcon;\n };\n ValueElementRenderer.prototype.buildValueComputedField = function () {\n var computedField = this.facetValue.getFormattedComputedField(this.facet.options.computedFieldFormat);\n if (Utils_1.Utils.isNonEmptyString(computedField)) {\n var elem = Dom_1.$$('span', {\n className: 'coveo-facet-value-computed-field'\n }).el;\n Dom_1.$$(elem).text(computedField);\n return elem;\n }\n else {\n return undefined;\n }\n };\n ValueElementRenderer.prototype.buildValueCheckbox = function () {\n var checkbox = Dom_1.$$('input', {\n type: 'checkbox',\n ariaHidden: true,\n ariaLabel: this.ariaLabel\n }).el;\n this.facetValue.selected ? checkbox.setAttribute('checked', 'checked') : checkbox.removeAttribute('checked');\n this.facetValue.excluded ? checkbox.setAttribute('disabled', 'disabled') : checkbox.removeAttribute('disabled');\n Component_1.Component.pointElementsToDummyForm(checkbox);\n return checkbox;\n };\n ValueElementRenderer.prototype.buildValueStylishCheckbox = function () {\n var checkbox = Dom_1.$$('div', {\n className: 'coveo-facet-value-checkbox',\n tabindex: 0\n }).el;\n checkbox.innerHTML = SVGIcons_1.SVGIcons.icons.checkboxHookExclusionMore;\n SVGDom_1.SVGDom.addClassToSVGInContainer(checkbox, 'coveo-facet-value-checkbox-svg');\n this.addFocusAndBlurEventListeners(checkbox);\n return checkbox;\n };\n ValueElementRenderer.prototype.buildValueIcon = function () {\n var icon = this.getValueIcon();\n if (Utils_1.Utils.exists(icon)) {\n return Dom_1.$$('img', {\n className: 'coveo-facet-value-icon coveo-icon',\n src: this.getValueIcon()\n }).el;\n }\n else {\n return this.buildValueIconFromSprite();\n }\n };\n ValueElementRenderer.prototype.getValueIcon = function () {\n if (Utils_1.Utils.exists(this.facet.options.valueIcon)) {\n return this.facet.options.valueIcon(this.facetValue);\n }\n else {\n return undefined;\n }\n };\n ValueElementRenderer.prototype.buildValueIconFromSprite = function () {\n return Dom_1.$$('div', {\n className: 'coveo-facet-value-icon coveo-icon ' + this.facet.options.field.substr(1) + ' ' + this.facetValue.value\n }).el;\n };\n ValueElementRenderer.prototype.buildValueCaption = function () {\n var valueCaption = Dom_1.$$('span', {\n className: 'coveo-facet-value-caption',\n title: this.caption,\n 'data-original-value': this.facetValue.value\n }).el;\n Dom_1.$$(valueCaption).text(this.caption);\n return valueCaption;\n };\n ValueElementRenderer.prototype.buildValueCount = function () {\n if (Utils_1.Utils.isNonEmptyString(this.count)) {\n var countElement = Dom_1.$$('span', {\n className: 'coveo-facet-value-count'\n }).el;\n Dom_1.$$(countElement).text(this.count);\n return countElement;\n }\n else {\n return undefined;\n }\n };\n Object.defineProperty(ValueElementRenderer.prototype, \"caption\", {\n get: function () {\n return this.facet.getValueCaption(this.facetValue);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ValueElementRenderer.prototype, \"count\", {\n get: function () {\n return this.facetValue.getFormattedCount();\n },\n enumerable: true,\n configurable: true\n });\n ValueElementRenderer.prototype.addFocusAndBlurEventListeners = function (elem) {\n var _this = this;\n Dom_1.$$(elem).on('focus', function () { return Dom_1.$$(_this.listItem).addClass('coveo-focused'); });\n Dom_1.$$(elem).on('blur', function () { return Dom_1.$$(_this.listItem).removeClass('coveo-focused'); });\n };\n ValueElementRenderer.prototype.buildListItem = function () {\n this.listItem = Dom_1.$$('li', { className: 'coveo-facet-value coveo-facet-selectable', ariaLabel: this.ariaLabel }).el;\n if (!Dom_1.$$(this.listItem).canHandleEvent('touchstart')) {\n Dom_1.$$(this.listItem).addClass('coveo-with-hover');\n }\n this.listItem.setAttribute('data-value', this.facetValue.value);\n };\n ValueElementRenderer.prototype.initAndAppendLabel = function () {\n this.label = Dom_1.$$('label', { className: 'coveo-facet-value-label', role: 'group' }).el;\n this.tryToInitAndAppendComputedField();\n this.initAndAppendFacetValueLabelWrapper();\n this.listItem.appendChild(this.label);\n };\n ValueElementRenderer.prototype.initAndAppendExcludeIcon = function () {\n this.excludeIcon = this.buildExcludeIcon();\n this.attachExcludeIconEventHandlers();\n this.listItem.appendChild(this.excludeIcon);\n };\n ValueElementRenderer.prototype.attachExcludeIconEventHandlers = function () {\n var _this = this;\n Dom_1.$$(this.excludeIcon).on('mouseover', function () {\n Dom_1.$$(_this.listItem).addClass('coveo-facet-value-will-exclude');\n });\n Dom_1.$$(this.excludeIcon).on('mouseout', function () {\n Dom_1.$$(_this.listItem).removeClass('coveo-facet-value-will-exclude');\n });\n };\n ValueElementRenderer.prototype.tryToInitAndAppendComputedField = function () {\n if (!Utils_1.Utils.exists(this.facetValue.computedField)) {\n return;\n }\n this.computedField = this.buildValueComputedField();\n if (!this.computedField) {\n return;\n }\n this.label.appendChild(this.computedField);\n Dom_1.$$(this.label).addClass('coveo-with-computed-field');\n };\n ValueElementRenderer.prototype.initAndAppendFacetValueLabelWrapper = function () {\n this.facetValueLabelWrapper = Dom_1.$$('div', { className: 'coveo-facet-value-label-wrapper' }).el;\n this.initAndAppendCheckbox();\n this.initAndAppendStylishCheckbox();\n this.initAndAppendValueCaption();\n this.initAndAppendValueCount();\n this.label.appendChild(this.facetValueLabelWrapper);\n };\n ValueElementRenderer.prototype.initAndAppendCheckbox = function () {\n this.checkbox = this.buildValueCheckbox();\n this.facetValueLabelWrapper.appendChild(this.checkbox);\n };\n ValueElementRenderer.prototype.initAndAppendStylishCheckbox = function () {\n this.stylishCheckbox = this.buildValueStylishCheckbox();\n this.facetValueLabelWrapper.appendChild(this.stylishCheckbox);\n };\n ValueElementRenderer.prototype.initAndAppendValueCount = function () {\n this.valueCount = this.buildValueCount();\n if (!this.valueCount) {\n return;\n }\n this.facetValueLabelWrapper.appendChild(this.valueCount);\n };\n ValueElementRenderer.prototype.initAndAppendValueCaption = function () {\n this.valueCaption = this.buildValueCaption();\n this.facetValueLabelWrapper.appendChild(this.valueCaption);\n };\n ValueElementRenderer.prototype.addAccessibilityAttributesToTargetElement = function () {\n var el = this.accessibleElement;\n el.setAttribute('aria-label', this.ariaLabel);\n el.setAttribute('role', 'button');\n el.setAttribute('aria-pressed', this.ariaPressed);\n };\n Object.defineProperty(ValueElementRenderer.prototype, \"ariaLabel\", {\n get: function () {\n var resultCount = Strings_1.l('ResultCount', this.count, parseInt(this.count, 10));\n return \"\" + Strings_1.l('IncludeValueWithResultCount', this.caption, resultCount);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ValueElementRenderer.prototype, \"ariaPressed\", {\n get: function () {\n if (this.facetValue.excluded) {\n return 'mixed';\n }\n return this.facetValue.selected ? 'true' : 'false';\n },\n enumerable: true,\n configurable: true\n });\n return ValueElementRenderer;\n}());\nexports.ValueElementRenderer = ValueElementRenderer;\n\n\n/***/ }),\n\n/***/ 478:\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar StringUtils_1 = __webpack_require__(22);\nvar _ = __webpack_require__(0);\nvar FacetValuesOrder = /** @class */ (function () {\n function FacetValuesOrder(facet, facetSort) {\n this.facet = facet;\n this.facetSort = facetSort;\n }\n FacetValuesOrder.prototype.reorderValues = function (facetValues) {\n if (this.facetSort && this.facetSort.activeSort) {\n if (this.usingCustomSort) {\n return this.reorderValuesWithCustomOrder(facetValues);\n }\n if (this.usingAlphabeticalSort) {\n return this.reorderValuesWithCustomCaption(facetValues);\n }\n }\n return facetValues;\n };\n FacetValuesOrder.prototype.reorderValuesIfUsingCustomSort = function (values) {\n return this.usingCustomSort ? this.reorderValuesWithCustomOrder(values) : values;\n };\n FacetValuesOrder.prototype.reorderValuesIfUsingAlphabeticalSort = function (values) {\n return this.usingAlphabeticalSort ? this.reorderValuesWithCustomCaption(values) : values;\n };\n Object.defineProperty(FacetValuesOrder.prototype, \"usingCustomSort\", {\n get: function () {\n return this.facetSort.activeSort.name == 'custom' && this.facet.options.customSort != undefined;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(FacetValuesOrder.prototype, \"usingAlphabeticalSort\", {\n get: function () {\n return this.facetSort.activeSort.name.indexOf('alpha') != -1;\n },\n enumerable: true,\n configurable: true\n });\n FacetValuesOrder.prototype.reorderValuesWithCustomOrder = function (facetValues) {\n var customSortsLowercase = _.map(this.facet.options.customSort, function (customSort) { return customSort.toLowerCase(); });\n var valueIndexPair = _.map(facetValues, function (facetValue, i) {\n // Get the index of the current value in the custom sort array.\n // If it's not found, put it's index to it's original value + the length of customSort so that's always after the specified custom sort order.\n var index = _.findIndex(customSortsLowercase, function (customSort) {\n return (StringUtils_1.StringUtils.equalsCaseInsensitive(customSort, facetValue.value) ||\n (facetValue.lookupValue != null && StringUtils_1.StringUtils.equalsCaseInsensitive(customSort, facetValue.lookupValue)));\n });\n if (index == -1) {\n index = i + customSortsLowercase.length;\n }\n return { facetValue: facetValue, index: index };\n });\n var sorted = _.sortBy(valueIndexPair, 'index');\n sorted = this.facetSort.customSortDirection == 'ascending' ? sorted : sorted.reverse();\n return _.pluck(sorted, 'facetValue');\n };\n FacetValuesOrder.prototype.reorderValuesWithCustomCaption = function (facetValues) {\n var _this = this;\n var sorted = facetValues.sort(function (firstValue, secondValue) {\n return _this.facet.getValueCaption(firstValue).localeCompare(_this.facet.getValueCaption(secondValue), String['locale'], {\n sensitivity: 'base'\n });\n });\n if (this.facetSort.activeSort.name.indexOf('descending') != -1) {\n sorted = sorted.reverse();\n }\n return sorted;\n };\n return FacetValuesOrder;\n}());\nexports.FacetValuesOrder = FacetValuesOrder;\n\n\n/***/ }),\n\n/***/ 479:\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Dom_1 = __webpack_require__(1);\nvar SVGIcons_1 = __webpack_require__(12);\nvar SVGDom_1 = __webpack_require__(16);\nvar Component_1 = __webpack_require__(7);\nvar Strings_1 = __webpack_require__(6);\nvar EventsUtils_1 = __webpack_require__(137);\nvar FacetSearchUserInputHandler_1 = __webpack_require__(544);\nvar underscore_1 = __webpack_require__(0);\nvar SearchDropdownNavigatorFactory_1 = __webpack_require__(545);\nvar KeyboardUtils_1 = __webpack_require__(25);\nvar FacetSearchElement = /** @class */ (function () {\n function FacetSearchElement(facetSearch) {\n this.facetSearch = facetSearch;\n this.searchBarIsAnimating = false;\n this.triggeredScroll = false;\n this.facetSearchId = underscore_1.uniqueId('coveo-facet-search-results');\n this.facetValueNotFoundId = underscore_1.uniqueId('coveo-facet-value-not-found');\n this.facetSearchUserInputHandler = new FacetSearchUserInputHandler_1.FacetSearchUserInputHandler(this.facetSearch);\n this.initSearchResults();\n }\n FacetSearchElement.prototype.build = function (handleFacetSearchClear) {\n var _this = this;\n this.search = document.createElement('div');\n Dom_1.$$(this.search).addClass('coveo-facet-search');\n this.magnifier = this.buildMagnifierIcon();\n this.search.appendChild(this.magnifier);\n this.wait = this.buildWaitIcon();\n this.search.appendChild(this.wait);\n this.hideFacetSearchWaitingAnimation();\n this.clear = Dom_1.$$('div', { className: 'coveo-facet-search-clear', title: Strings_1.l('Clear', Strings_1.l('Search')) }, SVGIcons_1.SVGIcons.icons.clear).el;\n SVGDom_1.SVGDom.addClassToSVGInContainer(this.clear, 'coveo-facet-search-clear-svg');\n this.clear.style.display = 'none';\n this.search.appendChild(this.clear);\n this.combobox = this.buildCombobox();\n this.search.appendChild(this.combobox);\n this.input = this.buildInputElement();\n Component_1.Component.pointElementsToDummyForm(this.input);\n this.combobox.appendChild(this.input);\n Dom_1.$$(this.input).on('keyup', function (e) {\n _this.facetSearchUserInputHandler.handleKeyboardEvent(e);\n });\n Dom_1.$$(this.clear).on('click', function (e) {\n handleFacetSearchClear && handleFacetSearchClear();\n });\n Dom_1.$$(this.input).on('focus', function (e) {\n _this.handleFacetSearchFocus();\n });\n Dom_1.$$(this.input).on('blur', function (e) { return _this.onInputBlur(e); });\n this.detectSearchBarAnimation();\n this.initSearchDropdownNavigator();\n return this.search;\n };\n FacetSearchElement.prototype.initSearchResults = function () {\n var _this = this;\n this.searchResults = Dom_1.$$('ul', { id: this.facetSearchId, className: 'coveo-facet-search-results', role: 'listbox' }).el;\n Dom_1.$$(this.searchResults).on('scroll', function () { return _this.handleScrollEvent(); });\n Dom_1.$$(this.searchResults).on('keyup', function (e) {\n if (e.which === KeyboardUtils_1.KEYBOARD.ESCAPE) {\n _this.facetSearch.dismissSearchResults();\n }\n });\n Dom_1.$$(this.searchResults).on('focusout', function (event) { return _this.onSearchResultsFocusOut(event); });\n Dom_1.$$(this.searchResults).hide();\n };\n FacetSearchElement.prototype.onInputBlur = function (e) {\n var target = e.relatedTarget;\n var isUsingKeyboard = !!target;\n var focusedOnSearchResult = this.searchResults.contains(target);\n if (isUsingKeyboard && !focusedOnSearchResult) {\n this.facetSearch.dismissSearchResults();\n }\n };\n FacetSearchElement.prototype.onSearchResultsFocusOut = function (e) {\n var target = e.relatedTarget;\n var isUsingKeyboard = !!target;\n var focusedOnInput = this.input.contains(target);\n var focusedOnSearchResult = this.searchResults.contains(target);\n if (isUsingKeyboard && !focusedOnInput && !focusedOnSearchResult) {\n this.facetSearch.dismissSearchResults();\n }\n };\n FacetSearchElement.prototype.initSearchDropdownNavigator = function () {\n var _this = this;\n var config = {\n input: this.input,\n searchResults: this.searchResults,\n setScrollTrigger: function (val) { return (_this.triggeredScroll = val); }\n };\n this.searchDropdownNavigator = SearchDropdownNavigatorFactory_1.SearchDropdownNavigatorFactory(this.facetSearch, config);\n };\n FacetSearchElement.prototype.buildCombobox = function () {\n return Dom_1.$$('div', {\n className: 'coveo-facet-search-middle',\n ariaHaspopup: 'listbox',\n ariaExpanded: 'true'\n }).el;\n };\n FacetSearchElement.prototype.showFacetSearchWaitingAnimation = function () {\n this.magnifier && Dom_1.$$(this.magnifier).hide();\n Dom_1.$$(this.wait).show();\n };\n FacetSearchElement.prototype.getValueInInputForFacetSearch = function () {\n return this.input.value.trim();\n };\n FacetSearchElement.prototype.hideFacetSearchWaitingAnimation = function () {\n Dom_1.$$(this.magnifier).show();\n Dom_1.$$(this.wait).hide();\n };\n FacetSearchElement.prototype.detectSearchBarAnimation = function () {\n var _this = this;\n EventsUtils_1.EventsUtils.addPrefixedEvent(this.search, 'AnimationStart', function (event) {\n if (event.animationName == 'grow') {\n _this.searchBarIsAnimating = true;\n }\n });\n EventsUtils_1.EventsUtils.addPrefixedEvent(this.search, 'AnimationEnd', function (event) {\n if (event.animationName == 'grow') {\n _this.searchBarIsAnimating = false;\n }\n });\n };\n FacetSearchElement.prototype.positionSearchResults = function () {\n var _this = this;\n if (this.searchResults != null) {\n Dom_1.$$(this.searchResults).insertAfter(this.search);\n Dom_1.$$(this.searchResults).show();\n if (Dom_1.$$(this.searchResults).css('display') == 'none') {\n this.searchResults.style.display = '';\n }\n var searchBar = Dom_1.$$(this.search);\n if (searchBar.css('display') == 'none' || this.searchBarIsAnimating) {\n if (Dom_1.$$(this.searchResults).css('display') == 'none') {\n this.searchResults.style.display = '';\n }\n EventsUtils_1.EventsUtils.addPrefixedEvent(this.search, 'AnimationEnd', function () {\n EventsUtils_1.EventsUtils.removePrefixedEvent(_this.search, 'AnimationEnd', _this);\n });\n }\n }\n this.addAriaAttributes();\n };\n FacetSearchElement.prototype.setAsCurrentResult = function (toSet) {\n this.searchDropdownNavigator.setAsCurrentResult(toSet);\n };\n Object.defineProperty(FacetSearchElement.prototype, \"currentResult\", {\n get: function () {\n return this.searchDropdownNavigator.currentResult;\n },\n enumerable: true,\n configurable: true\n });\n FacetSearchElement.prototype.moveCurrentResultDown = function () {\n this.searchDropdownNavigator.focusNextElement();\n };\n FacetSearchElement.prototype.moveCurrentResultUp = function () {\n this.searchDropdownNavigator.focusPreviousElement();\n };\n FacetSearchElement.prototype.highlightCurrentQueryInSearchResults = function (regex) {\n var captions = this.facetSearch.getCaptions();\n captions.forEach(function (caption) {\n caption.innerHTML = Dom_1.$$(caption).text().replace(regex, '$1');\n });\n };\n FacetSearchElement.prototype.appendToSearchResults = function (el) {\n this.searchResults.appendChild(el);\n this.setupFacetSearchResultsEvents(el);\n };\n FacetSearchElement.prototype.emptyAndShowNoResults = function () {\n Dom_1.$$(this.searchResults).empty();\n this.searchResults.appendChild(Dom_1.$$('li', { id: this.facetValueNotFoundId, className: 'coveo-facet-value-not-found', role: 'option', ariaSelected: 'true', tabindex: 0 }, Strings_1.l('NoValuesFound')).el);\n this.input.setAttribute('aria-activedescendant', this.facetValueNotFoundId);\n };\n FacetSearchElement.prototype.updateAriaLiveWithResults = function (inputValue, numberOfResults, moreValuesToFetch) {\n var ariaLiveText = inputValue === ''\n ? Strings_1.l('ShowingResults', numberOfResults, inputValue, numberOfResults)\n : Strings_1.l('ShowingResultsWithQuery', numberOfResults, inputValue, numberOfResults);\n if (moreValuesToFetch) {\n ariaLiveText = ariaLiveText + \" (\" + Strings_1.l('MoreValuesAvailable') + \")\";\n }\n this.facetSearch.updateAriaLive(ariaLiveText);\n };\n FacetSearchElement.prototype.focus = function () {\n this.input.focus();\n this.handleFacetSearchFocus();\n };\n FacetSearchElement.prototype.handleFacetSearchFocus = function () {\n if (this.facetSearch.currentlyDisplayedResults == null) {\n this.facetSearch.displayNewValues();\n this.addAriaAttributes();\n }\n };\n FacetSearchElement.prototype.setupFacetSearchResultsEvents = function (el) {\n var _this = this;\n Dom_1.$$(el).on('mousemove', function () {\n _this.setAsCurrentResult(Dom_1.$$(el));\n });\n // Prevent closing the search results on the end of a touch drag\n var touchDragging = false;\n var mouseDragging = false;\n Dom_1.$$(el).on('mousedown', function () { return (mouseDragging = false); });\n Dom_1.$$(el).on('mousemove', function () { return (mouseDragging = true); });\n Dom_1.$$(el).on('touchmove', function () { return (touchDragging = true); });\n Dom_1.$$(el).on('mouseup touchend', function () {\n if (!touchDragging && !mouseDragging) {\n setTimeout(function () {\n _this.facetSearch.dismissSearchResults();\n }, 0); // setTimeout is to give time to trigger the click event before hiding the search menu.\n }\n touchDragging = false;\n mouseDragging = false;\n });\n };\n FacetSearchElement.prototype.hideSearchResultsElement = function () {\n this.removeAriaAttributes();\n Dom_1.$$(this.searchResults).hide();\n Dom_1.$$(this.searchResults).remove();\n };\n FacetSearchElement.prototype.clearSearchInput = function () {\n if (this.input) {\n this.input.value = '';\n }\n };\n FacetSearchElement.prototype.buildMagnifierIcon = function () {\n var magnifier = document.createElement('div');\n magnifier.innerHTML = SVGIcons_1.SVGIcons.icons.search;\n Dom_1.$$(magnifier).addClass('coveo-facet-search-magnifier');\n SVGDom_1.SVGDom.addClassToSVGInContainer(magnifier, 'coveo-facet-search-magnifier-svg');\n this.search.appendChild(magnifier);\n return magnifier;\n };\n FacetSearchElement.prototype.buildWaitIcon = function () {\n var wait = document.createElement('div');\n wait.innerHTML = SVGIcons_1.SVGIcons.icons.loading;\n Dom_1.$$(wait).addClass('coveo-facet-search-wait-animation');\n SVGDom_1.SVGDom.addClassToSVGInContainer(wait, 'coveo-facet-search-wait-animation-svg');\n return wait;\n };\n FacetSearchElement.prototype.buildInputElement = function () {\n return Dom_1.$$('input', {\n className: 'coveo-facet-search-input',\n type: 'text',\n autocapitalize: 'off',\n autocorrect: 'off',\n ariaLabel: Strings_1.l('SearchFacetResults', this.facetSearch.facetTitle),\n ariaHaspopup: 'true',\n ariaAutocomplete: 'list'\n }).el;\n };\n FacetSearchElement.prototype.handleScrollEvent = function () {\n if (this.triggeredScroll) {\n this.triggeredScroll = false;\n }\n else {\n this.facetSearchUserInputHandler.handleFacetSearchResultsScroll();\n }\n };\n FacetSearchElement.prototype.addAriaAttributes = function () {\n if (!this.input || !this.combobox) {\n return;\n }\n this.combobox.setAttribute('role', 'combobox');\n this.combobox.setAttribute('aria-owns', this.facetSearchId);\n this.input.setAttribute('aria-controls', this.facetSearchId);\n this.input.setAttribute('aria-expanded', 'true');\n this.facetSearch.setExpandedFacetSearchAccessibilityAttributes(this.searchResults);\n };\n FacetSearchElement.prototype.removeAriaAttributes = function () {\n if (!this.input || !this.combobox) {\n return;\n }\n this.combobox.removeAttribute('role');\n this.combobox.removeAttribute('aria-owns');\n this.input.removeAttribute('aria-controls');\n this.input.removeAttribute('aria-activedescendant');\n this.input.setAttribute('aria-expanded', 'false');\n this.facetSearch.setCollapsedFacetSearchAccessibilityAttributes();\n };\n return FacetSearchElement;\n}());\nexports.FacetSearchElement = FacetSearchElement;\n\n\n/***/ }),\n\n/***/ 480:\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar underscore_1 = __webpack_require__(0);\nvar Dom_1 = __webpack_require__(1);\nvar DefaultSearchDropdownNavigator = /** @class */ (function () {\n function DefaultSearchDropdownNavigator(config) {\n this.config = config;\n }\n DefaultSearchDropdownNavigator.prototype.setAsCurrentResult = function (toSet) {\n this.currentResult && this.currentResult.removeClass('coveo-facet-search-current-result');\n this.currentResult = toSet;\n toSet.addClass('coveo-facet-search-current-result');\n this.updateSelectedOption(toSet);\n };\n DefaultSearchDropdownNavigator.prototype.focusNextElement = function () {\n this.moveCurrentResultDown();\n };\n DefaultSearchDropdownNavigator.prototype.focusPreviousElement = function () {\n this.moveCurrentResultUp();\n };\n DefaultSearchDropdownNavigator.prototype.moveCurrentResultDown = function () {\n var nextResult = this.currentResult.el.nextElementSibling;\n if (!nextResult) {\n nextResult = underscore_1.first(this.searchResults.children);\n }\n this.setAsCurrentResult(Dom_1.$$(nextResult));\n this.highlightAndShowCurrentResultWithKeyboard();\n };\n DefaultSearchDropdownNavigator.prototype.moveCurrentResultUp = function () {\n var previousResult = this.currentResult.el.previousElementSibling;\n if (!previousResult) {\n previousResult = underscore_1.last(this.searchResults.children);\n }\n this.setAsCurrentResult(Dom_1.$$(previousResult));\n this.highlightAndShowCurrentResultWithKeyboard();\n };\n DefaultSearchDropdownNavigator.prototype.highlightAndShowCurrentResultWithKeyboard = function () {\n this.currentResult.addClass('coveo-facet-search-current-result');\n this.config.setScrollTrigger(true);\n this.searchResults.scrollTop = this.currentResult.el.offsetTop;\n };\n Object.defineProperty(DefaultSearchDropdownNavigator.prototype, \"searchResults\", {\n get: function () {\n return this.config.searchResults;\n },\n enumerable: true,\n configurable: true\n });\n DefaultSearchDropdownNavigator.prototype.updateSelectedOption = function (option) {\n this.config.input.setAttribute('aria-activedescendant', option.getAttribute('id'));\n var previouslySelectedOption = Dom_1.$$(this.searchResults).find('[aria-selected^=\"true\"]');\n previouslySelectedOption && previouslySelectedOption.setAttribute('aria-selected', 'false');\n option.setAttribute('aria-selected', 'true');\n };\n return DefaultSearchDropdownNavigator;\n}());\nexports.DefaultSearchDropdownNavigator = DefaultSearchDropdownNavigator;\n\n\n/***/ }),\n\n/***/ 481:\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar CategoryValue_1 = __webpack_require__(549);\nvar underscore_1 = __webpack_require__(0);\nvar CategoryChildrenValueRenderer = /** @class */ (function () {\n function CategoryChildrenValueRenderer(element, categoryFacetTemplates, categoryValue, categoryFacet) {\n this.element = element;\n this.categoryFacetTemplates = categoryFacetTemplates;\n this.categoryValue = categoryValue;\n this.categoryFacet = categoryFacet;\n this.children = [];\n }\n CategoryChildrenValueRenderer.prototype.clearChildren = function () {\n this.element.removeClass('coveo-active-category-facet-parent');\n this.children.forEach(function (child) {\n child.clear();\n });\n this.children = [];\n };\n CategoryChildrenValueRenderer.prototype.renderChildren = function (values) {\n var _this = this;\n underscore_1.each(values, function (value) {\n _this.renderValue(value, true).makeSelectable();\n });\n };\n CategoryChildrenValueRenderer.prototype.renderAsParent = function (value) {\n var categoryValue = this.renderValue(value, false);\n return categoryValue;\n };\n CategoryChildrenValueRenderer.prototype.renderValue = function (value, isChild) {\n var path = this.categoryValue.path.concat([value.value]);\n var categoryValueDescriptor = {\n value: value.value,\n count: value.numberOfResults,\n path: path\n };\n var categoryValue = new CategoryValue_1.CategoryValue(this.categoryValue.listRoot, categoryValueDescriptor, this.categoryFacetTemplates, this.categoryFacet);\n categoryValue.render(isChild);\n this.children.push(categoryValue);\n return categoryValue;\n };\n return CategoryChildrenValueRenderer;\n}());\nexports.CategoryChildrenValueRenderer = CategoryChildrenValueRenderer;\n\n\n/***/ }),\n\n/***/ 482:\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar popper_js_1 = __webpack_require__(97);\n__webpack_require__(558);\nvar underscore_1 = __webpack_require__(0);\nvar InitializationEvents_1 = __webpack_require__(17);\nvar QueryStateModel_1 = __webpack_require__(13);\nvar Strings_1 = __webpack_require__(6);\nvar AccessibleButton_1 = __webpack_require__(15);\nvar Dom_1 = __webpack_require__(1);\nvar KeyboardUtils_1 = __webpack_require__(25);\nvar LocalStorageUtils_1 = __webpack_require__(41);\nvar SVGDom_1 = __webpack_require__(16);\nvar SVGIcons_1 = __webpack_require__(12);\nvar Utils_1 = __webpack_require__(4);\nvar AnalyticsActionListMeta_1 = __webpack_require__(10);\nvar FacetSort_1 = __webpack_require__(483);\n/**\n * Handle the rendering of the {@link Facet} settings menu (typically the ... in the facet header).\n */\nvar FacetSettings = /** @class */ (function (_super) {\n __extends(FacetSettings, _super);\n function FacetSettings(sorts, facet) {\n var _this = _super.call(this, sorts, facet) || this;\n _this.sorts = sorts;\n _this.facet = facet;\n _this.customSortDirectionChange = false;\n _this.onDocumentClick = function () { return _this.close(); };\n _this.enabledSortsIgnoreRenderBecauseOfPairs = [];\n _this.filterDuplicateForRendering();\n return _this;\n }\n Object.defineProperty(FacetSettings.prototype, \"isExpanded\", {\n get: function () {\n return this.settingsButton && this.settingsButton.getAttribute('aria-expanded') === \"\" + true;\n },\n set: function (expanded) {\n this.settingsButton.setAttribute('aria-expanded', \"\" + expanded);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(FacetSettings.prototype, \"firstFocusablePopupElement\", {\n get: function () {\n return underscore_1.find(Dom_1.$$(this.settingsPopup).findAll('[tabindex]'), function (element) { return element.tabIndex >= 0; });\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Build the menu, hook click events.\n * @returns {HTMLElement}\n */\n FacetSettings.prototype.build = function () {\n var _this = this;\n this.buildSettingsButton();\n this.buildSettingsPopup();\n if (Utils_1.Utils.isNonEmptyArray(this.enabledSorts)) {\n this.sortSection = this.buildSortSection();\n if (this.enabledSortsAllowDirection()) {\n this.directionSection = this.buildDirectionSection();\n }\n }\n if (this.facet.options.enableSettingsFacetState) {\n this.saveStateSection = this.buildSaveStateSection();\n this.clearStateSection = this.buildClearStateSection();\n }\n if (this.facet.options.enableCollapse) {\n this.hideSection = this.buildHideSection();\n this.showSection = this.buildShowSection();\n }\n var appendCommon = function () {\n _this.appendIfNotUndefined(_this.saveStateSection);\n _this.appendIfNotUndefined(_this.clearStateSection);\n _this.appendIfNotUndefined(_this.hideSection);\n _this.appendIfNotUndefined(_this.showSection);\n };\n this.addOnDocumentClickHandler();\n this.addOnNukeHandler();\n if (Utils_1.Utils.isNonEmptyArray(this.enabledSorts)) {\n this.settingsPopup.appendChild(this.sortSection.element);\n underscore_1.each(this.directionSection, function (d) {\n _this.appendIfNotUndefined(d);\n });\n appendCommon();\n }\n else {\n appendCommon();\n }\n return this.settingsButton;\n };\n /**\n * Restore the facet state from local storage, and apply it in the query state model.\n */\n FacetSettings.prototype.loadSavedState = function () {\n if (this.facetStateLocalStorage) {\n // set the state from the settings only if there is nothing\n // in the query state model for the current facet\n var state = this.facetStateLocalStorage.load();\n var currentStateIncluded = this.facet.queryStateModel.get(this.includedStateAttribute);\n var currentStateExcluded = this.facet.queryStateModel.get(this.excludedStateAttribute);\n var currentStateOperator = this.facet.queryStateModel.get(this.operatorStateAttribute);\n if (!Utils_1.Utils.isNullOrUndefined(state) &&\n Utils_1.Utils.isEmptyArray(currentStateIncluded) &&\n Utils_1.Utils.isEmptyArray(currentStateExcluded) &&\n !Utils_1.Utils.isNonEmptyString(currentStateOperator)) {\n var toSet = {};\n toSet[this.includedStateAttribute] = state.included;\n toSet[this.excludedStateAttribute] = state.excluded;\n toSet[this.operatorStateAttribute] = state.operator;\n this.facet.queryStateModel.setMultiple(toSet);\n this.loadedFromSettings = toSet;\n }\n }\n else {\n this.facet.logger.info('Facet state local storage not enabled : See Facet.options.enableSettingsFacetState');\n }\n };\n /**\n * Take the current state of the facet and save it in the local storage.\n */\n FacetSettings.prototype.saveState = function () {\n if (this.facetStateLocalStorage) {\n this.facetStateLocalStorage.save({\n included: this.facet.queryStateModel.get(this.includedStateAttribute),\n excluded: this.facet.queryStateModel.get(this.excludedStateAttribute),\n operator: this.facet.queryStateModel.get(this.operatorStateAttribute)\n });\n }\n else {\n this.facet.logger.info('Facet state local storage not enabled : See Facet.options.enableSettingsFacetState');\n }\n };\n /**\n * Close the settings menu\n */\n FacetSettings.prototype.close = function () {\n if (!this.isExpanded) {\n return;\n }\n this.isExpanded = false;\n Dom_1.$$(this.settingsPopup).detach();\n };\n /**\n * Open the settings menu\n */\n FacetSettings.prototype.open = function () {\n var _this = this;\n Dom_1.$$(this.settingsPopup).insertAfter(this.settingsButton);\n new popper_js_1.default(this.settingsButton, this.settingsPopup);\n this.isExpanded = true;\n if (this.hideSection && this.showSection) {\n Dom_1.$$(this.hideSection).toggle(!Dom_1.$$(this.facet.element).hasClass('coveo-facet-collapsed'));\n Dom_1.$$(this.showSection).toggle(Dom_1.$$(this.facet.element).hasClass('coveo-facet-collapsed'));\n }\n if (this.facet.options.enableSettingsFacetState) {\n Dom_1.$$(this.clearStateSection).toggle(!Utils_1.Utils.isNullOrUndefined(this.facetStateLocalStorage.load()));\n }\n underscore_1.each(this.enabledSorts, function (criteria, i) {\n if (_this.activeSort.name == criteria.name.toLowerCase()) {\n _this.selectItem(_this.getSortItem(criteria.name));\n }\n else {\n _this.unselectItem(_this.getSortItem(criteria.name));\n }\n });\n var elementToFocus = this.firstFocusablePopupElement;\n if (elementToFocus) {\n elementToFocus.focus();\n }\n };\n FacetSettings.prototype.getSortItem = function (sortName) {\n return underscore_1.find(this.sortSection.sortItems, function (sortItem) {\n return Dom_1.$$(sortItem).getAttribute('data-sort-name').toLowerCase() == sortName.replace('ascending|descending', '').toLowerCase();\n });\n };\n Object.defineProperty(FacetSettings.prototype, \"button\", {\n get: function () {\n return this.settingsButton;\n },\n enumerable: true,\n configurable: true\n });\n FacetSettings.prototype.buildSettingsButton = function () {\n var _this = this;\n this.settingsButton = Dom_1.$$('div', { className: 'coveo-facet-header-settings', 'aria-haspopup': 'true' }).el;\n this.settingsButton.innerHTML = SVGIcons_1.SVGIcons.icons.more;\n SVGDom_1.SVGDom.addClassToSVGInContainer(this.settingsButton, 'coveo-facet-settings-more-svg');\n this.hideElementOnMouseEnterLeave(this.settingsButton);\n this.isExpanded = false;\n new AccessibleButton_1.AccessibleButton()\n .withElement(this.settingsButton)\n .withLabel(Strings_1.l('Settings'))\n .withClickAction(function (e) { return _this.handleSettingsButtonClick(e); })\n .withEnterKeyboardAction(function (e) { return _this.handleSettingsButtonClick(e); })\n .build();\n };\n FacetSettings.prototype.hideElementOnMouseEnterLeave = function (el) {\n var _this = this;\n var mouseLeave = function () { return (_this.closeTimeout = window.setTimeout(function () { return _this.close(); }, 300)); };\n var mouseEnter = function () { return clearTimeout(_this.closeTimeout); };\n Dom_1.$$(el).on('mouseleave', mouseLeave);\n Dom_1.$$(el).on('mouseenter', mouseEnter);\n Dom_1.$$(el).on('keyup', KeyboardUtils_1.KeyboardUtils.keypressAction(KeyboardUtils_1.KEYBOARD.ESCAPE, function () { return _this.handleKeyboardClose(); }));\n };\n FacetSettings.prototype.handleKeyboardClose = function () {\n this.close();\n this.settingsButton.focus();\n };\n FacetSettings.prototype.buildSettingsPopup = function () {\n var _this = this;\n this.settingsPopup = Dom_1.$$('div', { className: 'coveo-facet-settings-popup' }).el;\n this.hideElementOnMouseEnterLeave(this.settingsPopup);\n Dom_1.$$(this.settingsPopup).on('focusout', function (e) {\n if (e.relatedTarget && _this.settingsPopup.contains(e.relatedTarget)) {\n return;\n }\n _this.close();\n });\n };\n FacetSettings.prototype.buildSortSection = function () {\n var sortSection = this.buildSection('coveo-facet-settings-section-sort');\n var sortSectionIcon = this.buildIcon('coveo-facet-settings-section-sort-svg', SVGIcons_1.SVGIcons.icons.sort);\n var sortSectionItems = this.buildItems();\n var sortTitle = document.createElement('div');\n Dom_1.$$(sortTitle).addClass('coveo-facet-settings-section-sort-title');\n Dom_1.$$(sortTitle).text(Strings_1.l('SortBy') + ' :');\n sortSectionItems.appendChild(sortTitle);\n var sortItems = this.buildSortSectionItems();\n underscore_1.each(sortItems, function (s) {\n sortSectionItems.appendChild(s);\n });\n sortSection.appendChild(sortSectionIcon);\n sortSection.appendChild(sortSectionItems);\n return { element: sortSection, sortItems: sortItems };\n };\n FacetSettings.prototype.buildSortSectionItems = function () {\n var _this = this;\n var elems = underscore_1.map(this.enabledSorts, function (enabledSort) {\n if (underscore_1.contains(_this.enabledSortsIgnoreRenderBecauseOfPairs, enabledSort)) {\n return undefined;\n }\n else {\n var elem = _this.buildItem(Strings_1.l(enabledSort.label), enabledSort.description);\n Dom_1.$$(elem).setAttribute('data-sort-name', enabledSort.name.toLowerCase().replace('ascending|descending', ''));\n new AccessibleButton_1.AccessibleButton()\n .withElement(elem)\n .withSelectAction(function (e) { return _this.handleClickSortButton(e, enabledSort); })\n .withLabel(enabledSort.label)\n .build();\n return elem;\n }\n });\n elems = underscore_1.compact(elems);\n return elems;\n };\n FacetSettings.prototype.closePopupAndUpdateSort = function () {\n this.close();\n if (this.activeSort.name != 'custom') {\n this.facet.updateSort(this.activeSort.name);\n }\n else {\n this.facet.updateSort('nosort');\n if (this.customSortDirectionChange) {\n this.customSortDirectionChange = false;\n this.facet.queryController.executeQuery();\n }\n }\n };\n FacetSettings.prototype.enabledSortsAllowDirection = function () {\n var _this = this;\n var allEnabledSortsWithPossibleDirectionToggle = underscore_1.filter(this.enabledSorts, function (facetSortDescription) {\n return facetSortDescription.directionToggle;\n });\n var allowToggle = underscore_1.filter(allEnabledSortsWithPossibleDirectionToggle, function (possibleDirectionToggle) {\n return underscore_1.findWhere(_this.enabledSorts, { name: possibleDirectionToggle.relatedSort }) != undefined;\n });\n return allowToggle.length > 0;\n };\n FacetSettings.prototype.buildDirectionSection = function () {\n var _this = this;\n var directionAscendingSection = this.buildAscendingOrDescendingSection('Ascending');\n var iconAscending = this.buildIcon('coveo-facet-settings-section-direction-ascending-svg', SVGIcons_1.SVGIcons.icons.ascending);\n var iconDescending = this.buildIcon('coveo-facet-settings-section-direction-descending-svg', SVGIcons_1.SVGIcons.icons.descending);\n var directionItemsAscending = this.buildItems();\n var ascending = this.buildAscendingOrDescending('Ascending');\n directionItemsAscending.appendChild(ascending);\n directionAscendingSection.appendChild(iconAscending);\n directionAscendingSection.appendChild(directionItemsAscending);\n new AccessibleButton_1.AccessibleButton()\n .withElement(ascending)\n .withoutLabelOrTitle()\n .withSelectAction(function () { return _this.handleDirectionClick(ascending, 'ascending'); })\n .build();\n this.unselectSection(directionAscendingSection);\n var directionDescendingSection = this.buildAscendingOrDescendingSection('Descending');\n var directionItemsDescending = this.buildItems();\n var descending = this.buildAscendingOrDescending('Descending');\n directionItemsDescending.appendChild(descending);\n directionDescendingSection.appendChild(iconDescending);\n directionDescendingSection.appendChild(directionItemsDescending);\n new AccessibleButton_1.AccessibleButton()\n .withElement(descending)\n .withoutLabelOrTitle()\n .withSelectAction(function () { return _this.handleDirectionClick(descending, 'descending'); })\n .build();\n this.unselectSection(directionDescendingSection);\n if (!this.activeSort.directionToggle) {\n Dom_1.$$(directionAscendingSection).addClass('coveo-facet-settings-disabled');\n Dom_1.$$(directionDescendingSection).addClass('coveo-facet-settings-disabled');\n }\n else {\n this.selectItem(this.getItems(directionAscendingSection)[0]);\n }\n return [directionAscendingSection, directionDescendingSection];\n };\n FacetSettings.prototype.buildSaveStateSection = function () {\n var _this = this;\n var saveStateSection = this.buildSection('coveo-facet-settings-section-save-state');\n var icon = this.buildIcon('coveo-facet-settings-section-save-state-svg', SVGIcons_1.SVGIcons.icons.dropdownMore);\n var saveStateItems = this.buildItems();\n this.facetStateLocalStorage = new LocalStorageUtils_1.LocalStorageUtils('facet-state-' + this.facet.options.id);\n this.includedStateAttribute = QueryStateModel_1.QueryStateModel.getFacetId(this.facet.options.id);\n this.excludedStateAttribute = QueryStateModel_1.QueryStateModel.getFacetId(this.facet.options.id, false);\n this.operatorStateAttribute = QueryStateModel_1.QueryStateModel.getFacetOperator(this.facet.options.id);\n var saveStateItem = document.createElement('div');\n Dom_1.$$(saveStateItem).addClass('coveo-facet-settings-item');\n saveStateItem.setAttribute('title', Strings_1.l('SaveFacetState'));\n Dom_1.$$(saveStateItem).text(Strings_1.l('SaveFacetState'));\n saveStateItems.appendChild(saveStateItem);\n saveStateSection.appendChild(icon);\n saveStateSection.appendChild(saveStateItems);\n new AccessibleButton_1.AccessibleButton()\n .withElement(saveStateSection)\n .withSelectAction(function () { return _this.handleSaveStateClick(); })\n .withoutLabelOrTitle()\n .build();\n return saveStateSection;\n };\n FacetSettings.prototype.buildClearStateSection = function () {\n var _this = this;\n var clearStateSection = this.buildSection('coveo-facet-settings-section-clear-state');\n var icon = this.buildIcon('coveo-facet-settings-section-clear-state-svg', SVGIcons_1.SVGIcons.icons.dropdownLess);\n var clearStateItems = this.buildItems();\n var clearStateItem = this.buildItem(Strings_1.l('ClearFacetState'));\n clearStateItems.appendChild(clearStateItem);\n clearStateSection.appendChild(icon);\n clearStateSection.appendChild(clearStateItems);\n new AccessibleButton_1.AccessibleButton()\n .withElement(clearStateSection)\n .withSelectAction(function () { return _this.handleClearStateClick(); })\n .withoutLabelOrTitle()\n .build();\n return clearStateSection;\n };\n FacetSettings.prototype.buildHideSection = function () {\n var _this = this;\n var hideSection = this.buildSection('coveo-facet-settings-section-hide');\n var icon = this.buildIcon('coveo-facet-settings-section-hide-svg', SVGIcons_1.SVGIcons.icons.facetCollapse);\n var hideItems = this.buildItems();\n var hideItem = this.buildItem(Strings_1.l('Collapse'));\n hideItems.appendChild(hideItem);\n hideSection.appendChild(icon);\n hideSection.appendChild(hideItems);\n new AccessibleButton_1.AccessibleButton()\n .withElement(hideSection)\n .withSelectAction(function () {\n _this.facet.facetHeader.collapseFacet();\n _this.close();\n })\n .withLabel(Strings_1.l('CollapseFacet', this.facet.options.title))\n .build();\n return hideSection;\n };\n FacetSettings.prototype.buildShowSection = function () {\n var _this = this;\n var showSection = this.buildSection('coveo-facet-settings-section-show');\n var icon = this.buildIcon('coveo-facet-settings-section-show-svg', SVGIcons_1.SVGIcons.icons.facetExpand);\n var showItems = this.buildItems();\n var showItem = this.buildItem(Strings_1.l('Expand'));\n showItems.appendChild(showItem);\n showSection.appendChild(icon);\n showSection.appendChild(showItems);\n new AccessibleButton_1.AccessibleButton()\n .withElement(showSection)\n .withSelectAction(function () {\n _this.facet.facetHeader.expandFacet();\n _this.close();\n })\n .withLabel(Strings_1.l('ExpandFacet', this.facet.options.title))\n .build();\n return showSection;\n };\n FacetSettings.prototype.buildIcon = function (iconClass, svgIcon) {\n if (iconClass && svgIcon) {\n var icon = Dom_1.$$('div', { className: 'coveo-icon-container' }, svgIcon);\n SVGDom_1.SVGDom.addClassToSVGInContainer(icon.el, iconClass);\n return icon.el;\n }\n else {\n return Dom_1.$$('div', { className: 'coveo-icon' }).el;\n }\n };\n FacetSettings.prototype.buildAscendingOrDescending = function (direction) {\n var elem = this.buildItem(Strings_1.l(direction));\n elem.setAttribute('aria-disabled', 'true');\n elem.setAttribute('data-direction', direction.toLowerCase());\n return elem;\n };\n FacetSettings.prototype.buildAscendingOrDescendingSection = function (direction) {\n return this.buildSection('coveo-facet-settings-section-direction-' + direction.toLowerCase());\n };\n FacetSettings.prototype.buildItem = function (label, title) {\n if (title === void 0) { title = label; }\n return Dom_1.$$('div', {\n className: 'coveo-facet-settings-item',\n title: title\n }, underscore_1.escape(label)).el;\n };\n FacetSettings.prototype.buildItems = function () {\n var elem = document.createElement('div');\n Dom_1.$$(elem).addClass('coveo-facet-settings-items');\n return elem;\n };\n FacetSettings.prototype.buildSection = function (className) {\n var section = document.createElement('div');\n Dom_1.$$(section).addClass(['coveo-facet-settings-section', className]);\n return section;\n };\n FacetSettings.prototype.handleSettingsButtonClick = function (event) {\n event.stopPropagation();\n var settingsPopupIsOpen = !Utils_1.Utils.isNullOrUndefined(this.settingsPopup.parentElement);\n settingsPopupIsOpen ? this.close() : this.open();\n };\n FacetSettings.prototype.handleClickSortButton = function (e, enabledSort) {\n if (this.activeSort != enabledSort && this.activeSort.relatedSort != enabledSort.name) {\n this.activeSort = enabledSort;\n if (enabledSort.directionToggle && underscore_1.contains(this.enabledSorts, FacetSettings.availableSorts[this.activeSort.relatedSort])) {\n this.activateDirectionSection();\n }\n else {\n this.disableDirectionSection();\n }\n this.unselectSection(this.sortSection.element);\n this.selectItem(e.target);\n this.closePopupAndUpdateSort();\n }\n };\n FacetSettings.prototype.handleDirectionClick = function (item, direction) {\n var _this = this;\n if (item.getAttribute('aria-disabled') === 'false' && this.activeSort.name.indexOf(direction) === -1) {\n this.activeSort = FacetSettings.availableSorts[this.activeSort.relatedSort];\n underscore_1.each(this.directionSection, function (d) {\n _this.unselectSection(d);\n });\n this.selectItem(item);\n if (this.activeSort.name == 'custom' && this.customSortDirection != direction) {\n this.customSortDirection = direction;\n this.customSortDirectionChange = true;\n }\n this.closePopupAndUpdateSort();\n }\n };\n FacetSettings.prototype.handleSaveStateClick = function () {\n this.saveState();\n this.close();\n };\n FacetSettings.prototype.handleClearStateClick = function () {\n var _this = this;\n this.facetStateLocalStorage.remove();\n this.facet.reset();\n this.close();\n this.facet.triggerNewQuery(function () {\n return _this.facet.usageAnalytics.logSearchEvent(AnalyticsActionListMeta_1.analyticsActionCauseList.facetClearAll, {\n facetId: _this.facet.options.id,\n facetField: _this.facet.options.field.toString(),\n facetTitle: _this.facet.options.title\n });\n });\n };\n FacetSettings.prototype.addOnNukeHandler = function () {\n var _this = this;\n Dom_1.$$(this.facet.root).on(InitializationEvents_1.InitializationEvents.nuke, function () { return _this.handleNuke(); });\n };\n FacetSettings.prototype.addOnDocumentClickHandler = function () {\n var _this = this;\n document.addEventListener('click', function () { return _this.onDocumentClick(); });\n };\n FacetSettings.prototype.getCurrentDirectionItem = function (directionSection) {\n var _this = this;\n if (directionSection === void 0) { directionSection = this.directionSection; }\n var found;\n underscore_1.each(directionSection, function (direction) {\n if (!found) {\n found = underscore_1.find(_this.getItems(direction), function (direction) {\n return _this.activeSort.name.indexOf(direction.getAttribute('data-direction')) != -1;\n });\n }\n });\n if (!found) {\n found = directionSection[0];\n }\n return found;\n };\n FacetSettings.prototype.activateDirectionSection = function () {\n var _this = this;\n underscore_1.each(this.directionSection, function (direction) {\n Dom_1.$$(direction).removeClass('coveo-facet-settings-disabled');\n Dom_1.$$(direction).find('.coveo-facet-settings-item').setAttribute('aria-disabled', 'false');\n _this.unselectSection(direction);\n });\n this.selectItem(this.getCurrentDirectionItem());\n };\n FacetSettings.prototype.disableDirectionSection = function () {\n var _this = this;\n underscore_1.each(this.directionSection, function (direction) {\n Dom_1.$$(direction).addClass('coveo-facet-settings-disabled');\n Dom_1.$$(direction).find('.coveo-facet-settings-item').setAttribute('aria-disabled', 'true');\n _this.unselectSection(direction);\n });\n };\n FacetSettings.prototype.getItems = function (section) {\n return Dom_1.$$(section).findAll('.coveo-facet-settings-item');\n };\n FacetSettings.prototype.unselectSection = function (section) {\n var _this = this;\n underscore_1.each(this.getItems(section), function (i) { return _this.unselectItem(i); });\n };\n FacetSettings.prototype.selectItem = function (item) {\n if (item) {\n Dom_1.$$(item).addClass('coveo-selected');\n item.setAttribute('aria-pressed', 'true');\n }\n };\n FacetSettings.prototype.unselectItem = function (item) {\n if (item) {\n Dom_1.$$(item).removeClass('coveo-selected');\n item.setAttribute('aria-pressed', 'false');\n }\n };\n FacetSettings.prototype.filterDuplicateForRendering = function () {\n var _this = this;\n underscore_1.each(this.enabledSorts, function (enabledSort, i) {\n if (enabledSort.relatedSort != null) {\n for (var j = i + 1; j < _this.enabledSorts.length; j++) {\n if (_this.enabledSorts[j].name == enabledSort.relatedSort) {\n _this.enabledSortsIgnoreRenderBecauseOfPairs.push(_this.enabledSorts[j]);\n break;\n }\n }\n }\n });\n };\n FacetSettings.prototype.appendIfNotUndefined = function (toAppend) {\n if (!Utils_1.Utils.isNullOrUndefined(toAppend)) {\n this.settingsPopup.appendChild(toAppend);\n }\n };\n FacetSettings.prototype.handleNuke = function () {\n document.removeEventListener('click', this.onDocumentClick);\n };\n return FacetSettings;\n}(FacetSort_1.FacetSort));\nexports.FacetSettings = FacetSettings;\n\n\n/***/ }),\n\n/***/ 483:\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Strings_1 = __webpack_require__(6);\nvar FacetSettings_1 = __webpack_require__(482);\nvar Utils_1 = __webpack_require__(4);\nvar _ = __webpack_require__(0);\nvar FacetSort = /** @class */ (function () {\n function FacetSort(sorts, facet) {\n var _this = this;\n this.facet = facet;\n this.enabledSorts = [];\n this.customSortDirection = 'ascending';\n _.each(sorts, function (sortToActivate) {\n var newSortToEnable = FacetSettings_1.FacetSettings.availableSorts[sortToActivate.toLowerCase()];\n if (newSortToEnable != undefined) {\n _this.enabledSorts.push(newSortToEnable);\n }\n });\n this.removeEnabledSortsBasedOnFacetType();\n if (Utils_1.Utils.isNonEmptyArray(this.enabledSorts)) {\n if (this.facet.options.sortCriteria != undefined) {\n this.activeSort = _.find(this.enabledSorts, function (enabledSort) {\n return enabledSort.name == _this.facet.options.sortCriteria;\n });\n }\n if (!this.activeSort) {\n this.activeSort = this.enabledSorts[0];\n }\n }\n }\n FacetSort.prototype.removeEnabledSortsBasedOnFacetType = function () {\n if (Coveo.FacetRange && this.facet instanceof Coveo.FacetRange) {\n var facetRange = this.facet;\n if (facetRange.options['slider']) {\n this.enabledSorts = [];\n }\n }\n };\n FacetSort.availableSorts = {\n score: {\n label: Strings_1.l('Score'),\n directionToggle: false,\n description: Strings_1.l('ScoreDescription'),\n name: 'score'\n },\n occurrences: {\n label: Strings_1.l('Occurrences'),\n directionToggle: false,\n description: Strings_1.l('OccurrencesDescription'),\n name: 'occurrences'\n },\n alphaascending: {\n label: Strings_1.l('Label'),\n directionToggle: true,\n description: Strings_1.l('LabelDescription'),\n name: 'alphaascending',\n relatedSort: 'alphadescending'\n },\n alphadescending: {\n label: Strings_1.l('Label'),\n directionToggle: true,\n description: Strings_1.l('LabelDescription'),\n name: 'alphadescending',\n relatedSort: 'alphaascending'\n },\n computedfieldascending: {\n label: Strings_1.l('Value'),\n directionToggle: true,\n description: Strings_1.l('ValueDescription'),\n name: 'computedfieldascending',\n relatedSort: 'computedfielddescending'\n },\n computedfielddescending: {\n label: Strings_1.l('Value'),\n directionToggle: true,\n description: Strings_1.l('ValueDescription'),\n name: 'computedfielddescending',\n relatedSort: 'computedfieldascending'\n },\n chisquare: {\n label: Strings_1.l('RelativeFrequency'),\n directionToggle: false,\n description: Strings_1.l('RelativeFrequencyDescription'),\n name: 'chisquare'\n },\n nosort: {\n label: Strings_1.l('Nosort'),\n directionToggle: false,\n description: Strings_1.l('NosortDescription'),\n name: 'nosort'\n },\n custom: {\n label: Strings_1.l('Custom'),\n directionToggle: true,\n description: Strings_1.l('CustomDescription'),\n name: 'custom',\n relatedSort: 'custom'\n }\n };\n return FacetSort;\n}());\nexports.FacetSort = FacetSort;\n\n\n/***/ }),\n\n/***/ 484:\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Dom_1 = __webpack_require__(1);\nvar Strings_1 = __webpack_require__(6);\nvar AnalyticsActionListMeta_1 = __webpack_require__(10);\n__webpack_require__(538);\nvar SVGIcons_1 = __webpack_require__(12);\nvar SVGDom_1 = __webpack_require__(16);\nvar AccessibleButton_1 = __webpack_require__(15);\nvar FacetHeader = /** @class */ (function () {\n function FacetHeader(options) {\n this.options = options;\n this.element = document.createElement('div');\n Dom_1.$$(this.element).addClass('coveo-facet-header');\n }\n FacetHeader.prototype.build = function () {\n var titleSection = Dom_1.$$('div', {\n className: 'coveo-facet-header-title-section'\n });\n if (this.options.icon != undefined) {\n this.iconElement = this.buildIcon();\n titleSection.append(this.iconElement);\n }\n titleSection.append(this.buildTitle());\n this.waitElement = this.buildWaitAnimation();\n titleSection.append(this.waitElement);\n this.element.appendChild(titleSection.el);\n var settingsSection = Dom_1.$$('div', {\n className: 'coveo-facet-header-settings-section'\n });\n this.eraserElement = this.buildEraser();\n settingsSection.append(this.eraserElement);\n if (this.options.facet) {\n this.operatorElement = this.buildOperatorToggle();\n settingsSection.append(this.operatorElement);\n Dom_1.$$(this.operatorElement).toggle(this.options.facet.options.enableTogglingOperator);\n }\n if (this.options.settingsKlass) {\n this.sort = this.settings = new this.options.settingsKlass(this.options.availableSorts, this.options.facet);\n settingsSection.append(this.settings.build());\n }\n else if (this.options.sortKlass) {\n this.sort = new this.options.sortKlass(this.options.availableSorts, this.options.facet);\n }\n this.element.appendChild(settingsSection.el);\n return this.element;\n };\n FacetHeader.prototype.switchToAnd = function () {\n if (this.options.facet) {\n this.options.facet.options.useAnd = true;\n this.rebuildOperatorToggle();\n this.updateOperatorQueryStateModel();\n }\n };\n FacetHeader.prototype.switchToOr = function () {\n if (this.options.facet) {\n this.options.facet.options.useAnd = false;\n this.rebuildOperatorToggle();\n this.updateOperatorQueryStateModel();\n }\n };\n FacetHeader.prototype.collapseFacet = function () {\n if (this.collapseElement && this.expandElement) {\n Dom_1.$$(this.collapseElement).hide();\n Dom_1.$$(this.expandElement).show();\n }\n Dom_1.$$(this.options.facetElement).addClass('coveo-facet-collapsed');\n };\n FacetHeader.prototype.expandFacet = function () {\n if (this.collapseElement && this.expandElement) {\n Dom_1.$$(this.expandElement).hide();\n Dom_1.$$(this.collapseElement).show();\n }\n Dom_1.$$(this.options.facetElement).removeClass('coveo-facet-collapsed');\n };\n FacetHeader.prototype.updateOperatorQueryStateModel = function () {\n if (this.options.facet && this.options.facet.options.enableTogglingOperator) {\n var valueToSet = '';\n if (this.options.facet.getSelectedValues().length != 0 || this.options.facet.getExcludedValues().length != 0) {\n valueToSet = this.options.facet.options.useAnd ? 'and' : 'or';\n }\n this.options.facet.queryStateModel.set(this.options.facet.operatorAttributeId, valueToSet);\n }\n };\n FacetHeader.prototype.rebuildOperatorToggle = function () {\n var newElement = this.buildOperatorToggle();\n if (this.operatorElement) {\n Dom_1.$$(this.operatorElement).replaceWith(newElement);\n }\n this.operatorElement = newElement;\n };\n FacetHeader.prototype.buildIcon = function () {\n var cssClassForIcon;\n if (this.options.icon) {\n cssClassForIcon = 'coveo-icon-custom ' + this.options.icon;\n }\n else {\n cssClassForIcon = 'coveo-icon ' + this.options.field.substr(1);\n }\n this.iconElement = document.createElement('div');\n Dom_1.$$(this.iconElement).addClass(cssClassForIcon);\n return this.iconElement;\n };\n FacetHeader.prototype.buildWaitAnimation = function () {\n this.waitElement = Dom_1.$$('div', { className: 'coveo-facet-header-wait-animation' }, SVGIcons_1.SVGIcons.icons.loading).el;\n SVGDom_1.SVGDom.addClassToSVGInContainer(this.waitElement, 'coveo-facet-header-wait-animation-svg');\n this.waitElement.style.visibility = 'hidden';\n return this.waitElement;\n };\n FacetHeader.prototype.buildOperatorToggle = function () {\n var _this = this;\n var label = Strings_1.l('SwitchTo', this.options.facet.options.useAnd ? Strings_1.l('Or') : Strings_1.l('And'));\n var icon = Dom_1.$$('span', { className: 'coveo-' + (this.options.facet.options.useAnd ? 'and' : 'or') }, SVGIcons_1.SVGIcons.icons.orAnd);\n SVGDom_1.SVGDom.addClassToSVGInContainer(icon.el, 'coveo-or-and-svg');\n var toggle = Dom_1.$$('div', {\n className: 'coveo-facet-header-operator',\n title: label\n });\n toggle.append(icon.el);\n new AccessibleButton_1.AccessibleButton()\n .withElement(toggle)\n .withLabel(label)\n .withSelectAction(function () { return _this.handleOperatorClick(); })\n .build();\n return toggle.el;\n };\n FacetHeader.prototype.handleOperatorClick = function () {\n var _this = this;\n if (this.options.facet.options.useAnd) {\n this.options.facet.switchToOr();\n }\n else {\n this.options.facet.switchToAnd();\n }\n if (this.options.facet.getSelectedValues().length != 0) {\n var operatorNow_1 = this.options.facet.options.useAnd ? 'AND' : 'OR';\n var operatorBefore_1 = this.options.facet.options.useAnd ? 'OR' : 'AND';\n this.options.facet.triggerNewQuery(function () {\n return _this.options.facet.usageAnalytics.logSearchEvent(AnalyticsActionListMeta_1.analyticsActionCauseList.facetToggle, {\n facetId: _this.options.facet.options.id,\n facetField: _this.options.field.toString(),\n facetOperatorBefore: operatorBefore_1,\n facetOperatorAfter: operatorNow_1,\n facetTitle: _this.options.title\n });\n });\n }\n };\n FacetHeader.prototype.buildTitle = function () {\n var title = Dom_1.$$('div', { className: 'coveo-facet-header-title' });\n title.text(this.options.title);\n title.setAttribute('role', 'heading');\n title.setAttribute('aria-level', '2');\n title.setAttribute('aria-label', Strings_1.l('FacetTitle', this.options.title) + \".\");\n return title.el;\n };\n FacetHeader.prototype.buildEraser = function () {\n var _this = this;\n var eraser = Dom_1.$$('div', { className: 'coveo-facet-header-eraser' }, SVGIcons_1.SVGIcons.icons.mainClear);\n SVGDom_1.SVGDom.addClassToSVGInContainer(eraser.el, 'coveo-facet-header-eraser-svg');\n new AccessibleButton_1.AccessibleButton()\n .withElement(eraser.el)\n .withLabel(Strings_1.l('Clear', this.options.title))\n .withClickAction(function () { return _this.onEraserClick(); })\n .withEnterKeyboardAction(function () { return _this.onEraserClick(); })\n .build();\n return eraser.el;\n };\n FacetHeader.prototype.onEraserClick = function () {\n var cmp = this.options.facet || this.options.facetSlider;\n cmp.reset();\n cmp.usageAnalytics.logSearchEvent(AnalyticsActionListMeta_1.analyticsActionCauseList.facetClearAll, {\n facetId: cmp.options.id,\n facetField: cmp.options.field.toString(),\n facetTitle: cmp.options.title\n });\n cmp.queryController.executeQuery();\n };\n return FacetHeader;\n}());\nexports.FacetHeader = FacetHeader;\n\n\n/***/ }),\n\n/***/ 485:\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n/// \\n
\\n \\n \\n \\n
\\n \\n
\\n \\n
\\n \\n \\n
\\n ` and\n * `
` around the Facet container. The Facet adjusts the scroll amount of the page to\n * ensure that it does not move relatively to the mouse when the results are updated.\n *\n * In some cases, the facet also adds margins to the `scrollContainer`, if scrolling alone is not enough to\n * preserve position.\n *\n * See also the [`paddingContainer`]{@link Facet.options.paddingContainer}, and\n * [`scrollContainer`]{@link Facet.options.scrollContainer} options.\n *\n * Default value is `true`.\n */\n preservePosition: ComponentOptions_1.ComponentOptions.buildBooleanOption({ defaultValue: true }), \n /**\n * Specifies the parent container of the facets.\n *\n * Used by the [`preservePosition`]{@link Facet.options.preservePosition} option.\n *\n * Default value is `element.parentElement`.\n */\n paddingContainer: ComponentOptions_1.ComponentOptions.buildSelectorOption({\n defaultFunction: function (element) {\n var standardColumn = Dom_1.$$(element).parent('coveo-facet-column');\n if (standardColumn != null) {\n return standardColumn;\n }\n return element.parentElement;\n }\n }), \n /**\n * Specifies the HTML element (through a CSS selector) whose scroll amount the facet should adjust to preserve its\n * position when results are updated.\n *\n * Used by the [`preservePosition`]{@link Facet.options.preservePosition} option.\n *\n * Default value is `document.body`.\n */\n scrollContainer: ComponentOptions_1.ComponentOptions.buildSelectorOption({ defaultFunction: function (element) { return document.body; } }), \n /**\n * Specifies whether to enable the **More** and **Less** buttons in the Facet.\n *\n * See also the [`pageSize`]{@link Facet.options.pageSize} option.\n *\n * **Note:**\n * > The [`FacetRange`]{@link FacetRange} component does not support this option.\n *\n * Default value is `true`.\n */\n enableMoreLess: ComponentOptions_1.ComponentOptions.buildBooleanOption({ defaultValue: true }), \n /**\n * If the [`enableMoreLess`]{@link Facet.options.enableMoreLess} option is `true`, specifies the number of\n * additional results to fetch when clicking the **More** button.\n *\n * **Note:**\n * > The [`FacetRange`]{@link FacetRange} component does not support this option.\n *\n * Default value is `10`. Minimum value is `1`.\n */\n pageSize: ComponentOptions_1.ComponentOptions.buildNumberOption({ defaultValue: 10, min: 1, depend: 'enableMoreLess' }), \n /**\n * If the [`enableSettings`]{@link Facet.options.enableSettings} option is `true`, specifies whether the\n * **Collapse \\ Expand** menu option is available in the facet **Settings** menu.\n *\n * **Note:**\n * > The [`FacetRange`]{@link FacetRange} component does not support this option.\n *\n * Default value is `true`.\n */\n enableCollapse: ComponentOptions_1.ComponentOptions.buildBooleanOption({ defaultValue: true, depend: 'enableSettings' }), \n /**\n * Specifies an explicit list of [`allowedValues`]{@link IGroupByRequest.allowedValues} in the\n * [`GroupByRequest`]{@link IGroupByRequest}.\n *\n * If you specify a list of values for this option, the facet uses only these values (if they are available in\n * the current result set).\n *\n * **Example:**\n *\n * The following facet only uses the `Contact`, `Account`, and `File` values of the `@objecttype` field. Even if the\n * current result set contains other `@objecttype` values, such as `Message`, or `Product`, the facet does not use\n * those other values.\n *\n * ```html\n *\n * \n * ```\n *\n * Default value is `undefined`, and the facet uses all available values for its\n * [`field`]{@link Facet.options.field} in the current result set.\n */\n allowedValues: ComponentOptions_1.ComponentOptions.buildListOption(), \n /**\n * Specifies an additional query expression (query override) to add to each\n * [`GroupByRequest`]{@link IGroupByRequest} that this facet performs.\n *\n * Example: `@date>=2014/01/01`\n * @notSupportedIn salesforcefree\n */\n additionalFilter: ComponentOptions_1.ComponentOptions.buildQueryExpressionOption(), \n /**\n * Specifies whether this facet only appears when a value is selected in its \"parent\" facet.\n *\n * To specify the parent facet, use its [`id`]{@link Facet.options.id}.\n *\n * Remember that by default, a facet `id` value is the same as its [`field`]{@link Facet.options.field} option\n * value.\n *\n * **Examples:**\n *\n * First case: the \"parent\" facet has no custom `id`:\n * ```html\n * \n * \n *\n * \n * \n * ```\n *\n * Second case: the \"parent\" facet has a custom `id`:\n * ```html\n * \n * \n *\n * \n * \n * ```\n *\n * Default value is `undefined`\n */\n dependsOn: ComponentOptions_1.ComponentOptions.buildStringOption(), \n /**\n * A function that verifies whether the current state of the `dependsOn` facet allows the dependent facet to be displayed.\n *\n * If specified, the function receives a reference to the resolved `dependsOn` facet component instance as an argument, and must return a boolean.\n * The function's argument should typically be treated as read-only.\n *\n * By default, the dependent facet is displayed whenever one or more values are selected in its `dependsOn` facet.\n *\n * @externaldocs [Defining Dependent Facets](https://docs.coveo.com/3210/)\n */\n dependsOnCondition: ComponentOptions_1.ComponentOptions.buildCustomOption(function () {\n return null;\n }, { depend: 'dependsOn', section: 'CommonOptions' }), \n /**\n * Specifies a JSON object describing a mapping of facet values to their desired captions. See\n * [Normalizing Facet Value Captions](https://docs.coveo.com/en/368/).\n *\n * **Examples:**\n *\n * You can set the option in the ['init']{@link init} call:\n * ```javascript\n * var myValueCaptions = {\n * \"txt\" : \"Text files\",\n * \"html\" : \"Web page\",\n * [ ... ]\n * };\n *\n * Coveo.init(document.querySelector(\"#search\"), {\n * Facet : {\n * valueCaption : myValueCaptions\n * }\n * });\n * ```\n *\n * Or before the `init` call, using the ['options']{@link options} top-level function:\n * ```javascript\n * Coveo.options(document.querySelector(\"#search\"), {\n * Facet : {\n * valueCaption : myValueCaptions\n * }\n * });\n * ```\n *\n * Or directly in the markup:\n * ```html\n * \n * \n * ```\n *\n * **Note:**\n * > Using value captions will disable alphabetical sorts (see the [availableSorts]{@link Facet.options.availableSorts} option).\n */\n valueCaption: ComponentOptions_1.ComponentOptions.buildJsonOption() }, ResponsiveFacetOptions_1.ResponsiveFacetOptions);\n return Facet;\n}(Component_1.Component));\nexports.Facet = Facet;\nInitialization_1.Initialization.registerAutoCreateComponent(Facet);\nFacet.doExport();\n\n\n/***/ }),\n\n/***/ 85:\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar ComponentOptions_1 = __webpack_require__(8);\n/**\n * ResponsiveFacets options\n */\nexports.ResponsiveFacetOptions = {\n /**\n * Specifies whether to enable *responsive mode* for facets. Setting this options to `false` on any `Facet`, or\n * [`FacetSlider`]{@link FacetSlider} component in a search interface disables responsive mode for all other facets\n * in the search interface.\n *\n * Responsive mode displays all facets under a single dropdown button whenever the width of the HTML element which\n * the search interface is bound to reaches or falls behind a certain threshold (see\n * {@link SearchInterface.responsiveComponents}).\n *\n * See also the [`dropdownHeaderLabel`]{@link Facet.options.dropdownHeaderLabel} option.\n *\n * Default value is `true`.\n */\n enableResponsiveMode: ComponentOptions_1.ComponentOptions.buildBooleanOption({ defaultValue: true, section: 'ResponsiveOptions' }),\n responsiveBreakpoint: ComponentOptions_1.ComponentOptions.buildNumberOption({\n deprecated: 'This option is exposed for legacy reasons. It is not recommended to use this option. Instead, use `SearchInterface.options.responsiveMediumBreakpoint` options exposed on the `SearchInterface`.'\n }),\n /**\n * If the [`enableResponsiveMode`]{@link Facet.options.enableResponsiveMode} option is `true` for all facets and\n * {@link FacetSlider.options.enableResponsiveMode} is also `true` for all sliders, specifies the label of the\n * dropdown button that allows to display the facets when in responsive mode.\n *\n * If more than one `Facet` or {@link FacetSlider} component in the search interface specifies a value for this\n * option, the framework uses the first occurrence of the option.\n *\n * Default value is `Filters`.\n */\n dropdownHeaderLabel: ComponentOptions_1.ComponentOptions.buildLocalizedStringOption({ section: 'ResponsiveOptions' })\n};\n\n\n/***/ }),\n\n/***/ 86:\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Component_1 = __webpack_require__(7);\nvar ComponentOptions_1 = __webpack_require__(8);\nvar GlobalExports_1 = __webpack_require__(3);\nvar Core_1 = __webpack_require__(20);\nvar Initialization_1 = __webpack_require__(2);\n/**\n * This component lets you customize the mobile responsive behavior of facets in your search interface.\n *\n * **Notes:**\n * - You can include this component anywhere under the root element of your search interface.\n * - You should only include this component once in your search interface.\n */\nvar FacetsMobileMode = /** @class */ (function (_super) {\n __extends(FacetsMobileMode, _super);\n function FacetsMobileMode(element, options, bindings) {\n var _this = _super.call(this, element, FacetsMobileMode.ID, bindings) || this;\n _this.element = element;\n _this.options = ComponentOptions_1.ComponentOptions.initComponentOptions(element, FacetsMobileMode, options);\n if (_this.options.preventScrolling) {\n var scrollContainer = _this.options.scrollContainer || _this.searchInterface.element;\n _this.options.scrollContainer = ComponentOptions_1.ComponentOptions.findParentScrollLockable(scrollContainer);\n }\n return _this;\n }\n FacetsMobileMode.ID = 'FacetsMobileMode';\n /**\n * @componentOptions\n */\n FacetsMobileMode.options = {\n /**\n * The screen width (in number of pixels) at which facets should enter mobile responsive mode and be collapsed under a single button.\n *\n * **Default:** `800`\n */\n breakpoint: ComponentOptions_1.ComponentOptions.buildNumberOption(),\n /**\n * Whether to display the facets in a modal instead of a pop-up when the end user expands them in mobile responsive mode.\n * Set this option to `false` in order to keep the old behaviour.\n */\n isModal: ComponentOptions_1.ComponentOptions.buildBooleanOption({ defaultValue: true }),\n /**\n * Whether to display an overlay behind the facets when the end user expands them in mobile responsive mode.\n *\n * By default, the following behavior applies:\n * - `true` when [isModal]{@link FacetsMobileMode.options.isModal} is `false`\n * - `false` when [isModal]{@link FacetsMobileMode.options.isModal} is `true`\n */\n displayOverlayWhileOpen: ComponentOptions_1.ComponentOptions.buildBooleanOption({\n postProcessing: function (value, options) { return (Core_1.Utils.isNullOrUndefined(value) ? !options.isModal : value); }\n }),\n /**\n * Whether to disable vertical scrolling on the specified or resolved [`scrollContainer`]{@link FacetsMobileMode.options.scrollContainer} while facets are expanded in mobile responsive mode.\n *\n * By default, the following behavior applies:\n * - `true` when [isModal]{@link FacetsMobileMode.options.isModal} is `true`\n * - `false` when [isModal]{@link FacetsMobileMode.options.isModal} is `false`\n */\n preventScrolling: ComponentOptions_1.ComponentOptions.buildBooleanOption({\n postProcessing: function (value, options) { return (Core_1.Utils.isNullOrUndefined(value) ? options.isModal : value); }\n }),\n /**\n * The HTML element whose vertical scrolling should be locked while facets are expanded in mobile responsive mode.\n *\n * By default, the component tries to detect and use the first ancestor element whose CSS `overflow-y` attribute is set to `scroll`, starting from the `FacetsMobileMode`'s element itself. If no such element is found, the `document.body` element is used.\n *\n * Since this heuristic is not perfect, we strongly recommend that you manually set this option by explicitly specifying the desired CSS selector.\n *\n * **Example:** `data-scroll-container-selector='#someCssSelector'`\n */\n scrollContainer: ComponentOptions_1.ComponentOptions.buildChildHtmlElementOption({ depend: 'preventScrolling' })\n };\n FacetsMobileMode.doExport = function () {\n GlobalExports_1.exportGlobally({\n FacetsMobileMode: FacetsMobileMode\n });\n };\n return FacetsMobileMode;\n}(Component_1.Component));\nexports.FacetsMobileMode = FacetsMobileMode;\nInitialization_1.Initialization.registerAutoCreateComponent(FacetsMobileMode);\n\n\n/***/ }),\n\n/***/ 92:\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nvar __generator = (this && this.__generator) || function (thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (_) try {\n if (f = 1, y && (t = y[op[0] & 2 ? \"return\" : op[0] ? \"throw\" : \"next\"]) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [0, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\n__webpack_require__(527);\n__webpack_require__(528);\n__webpack_require__(529);\nvar underscore_1 = __webpack_require__(0);\nvar QueryEvents_1 = __webpack_require__(11);\nvar ResultLayoutEvents_1 = __webpack_require__(133);\nvar ResultListEvents_1 = __webpack_require__(29);\nvar GlobalExports_1 = __webpack_require__(3);\nvar Assert_1 = __webpack_require__(5);\nvar Defer_1 = __webpack_require__(31);\nvar Model_1 = __webpack_require__(18);\nvar QueryStateModel_1 = __webpack_require__(13);\nvar DeviceUtils_1 = __webpack_require__(24);\nvar Dom_1 = __webpack_require__(1);\nvar DomUtils_1 = __webpack_require__(96);\nvar Utils_1 = __webpack_require__(4);\nvar AnalyticsActionListMeta_1 = __webpack_require__(10);\nvar Component_1 = __webpack_require__(7);\nvar ComponentOptions_1 = __webpack_require__(8);\nvar Initialization_1 = __webpack_require__(2);\nvar InitializationPlaceholder_1 = __webpack_require__(177);\nvar TemplateComponentOptions_1 = __webpack_require__(63);\nvar ResponsiveDefaultResultTemplate_1 = __webpack_require__(530);\nvar CoreHelpers_1 = __webpack_require__(473);\nvar DefaultRecommendationTemplate_1 = __webpack_require__(471);\nvar DefaultResultTemplate_1 = __webpack_require__(122);\nvar TableTemplate_1 = __webpack_require__(469);\nvar TemplateCache_1 = __webpack_require__(68);\nvar TemplateList_1 = __webpack_require__(95);\nvar ResultContainer_1 = __webpack_require__(531);\nvar ResultListCardRenderer_1 = __webpack_require__(532);\nvar ResultListRenderer_1 = __webpack_require__(215);\nvar ResultListTableRenderer_1 = __webpack_require__(533);\nvar ResultListUtils_1 = __webpack_require__(117);\nvar TemplateToHtml_1 = __webpack_require__(472);\nCoreHelpers_1.CoreHelpers.exportAllHelpersGlobally(window['Coveo']);\n/**\n * The `ResultList` component is responsible for displaying query results by applying one or several result templates\n * (see [Result Templates](https://docs.coveo.com/en/413/)).\n *\n * It is possible to include multiple `ResultList` components along with a single `ResultLayout`\n * component in a search page to provide different result layouts (see\n * [Result Layouts](https://docs.coveo.com/en/360/)).\n *\n * This component supports infinite scrolling (see the\n * [`enableInfiniteScroll`]{@link ResultList.options.enableInfiniteScroll} option).\n */\nvar ResultList = /** @class */ (function (_super) {\n __extends(ResultList, _super);\n /**\n * Creates a new `ResultList` component. Binds various event related to queries (e.g., on querySuccess ->\n * renderResults). Binds scroll event if the [`enableInfiniteScroll`]{@link ResultList.options.enableInfiniteScroll}\n * option is `true`.\n * @param element The HTMLElement on which to instantiate the component.\n * @param options The options for the `ResultList` component.\n * @param bindings The bindings that the component requires to function normally. If not set, these will be\n * automatically resolved (with a slower execution time).\n * @param elementClassId The class that this component should instantiate. Components that extend the base ResultList\n * use this. Default value is `CoveoResultList`.\n */\n function ResultList(element, options, bindings, elementClassId) {\n if (elementClassId === void 0) { elementClassId = ResultList.ID; }\n var _this = _super.call(this, element, elementClassId, bindings) || this;\n _this.element = element;\n _this.options = options;\n _this.bindings = bindings;\n _this.currentlyDisplayedResults = [];\n _this.reachedTheEndOfResults = false;\n _this.disableLayoutChange = false;\n // This variable serves to block some setup where the framework fails to correctly identify the \"real\" scrolling container.\n // Since it's not technically feasible to correctly identify the scrolling container in every possible scenario without some very complex logic, we instead try to add some kind of mechanism to\n // block runaway requests where UI will keep asking more results in the index, eventually bringing the browser to it's knee.\n // Those successive request are needed in \"displayMoreResults\" to ensure we fill the scrolling container correctly.\n // Since the container is not identified correctly, it is never \"full\", so we keep asking for more.\n // It is reset every time the user actually scroll the container manually.\n _this.successiveScrollCount = 0;\n _this.options = ComponentOptions_1.ComponentOptions.initComponentOptions(element, ResultList, options);\n Assert_1.Assert.exists(element);\n Assert_1.Assert.exists(_this.options);\n Assert_1.Assert.exists(_this.options.resultTemplate);\n Assert_1.Assert.exists(_this.options.infiniteScrollContainer);\n _this.showOrHideElementsDependingOnState(false, false);\n _this.addListeners();\n _this.resultContainer = _this.initResultContainer();\n Assert_1.Assert.exists(_this.options.resultsContainer);\n _this.initWaitAnimationContainer();\n Assert_1.Assert.exists(_this.options.waitAnimationContainer);\n _this.setupTemplatesVersusLayouts();\n Dom_1.$$(_this.root).on(ResultLayoutEvents_1.ResultLayoutEvents.populateResultLayout, function (e, args) {\n return args.layouts.push(_this.options.layout);\n });\n _this.setupRenderer();\n _this.makeElementFocusable();\n _this.ensureHasId();\n return _this;\n }\n ResultList.getDefaultTemplate = function (e) {\n var template = ResultList.loadTemplatesFromCache();\n if (template != null) {\n return template;\n }\n var component = Component_1.Component.get(e);\n if (Coveo['Recommendation'] && component.searchInterface instanceof Coveo['Recommendation']) {\n return new DefaultRecommendationTemplate_1.DefaultRecommendationTemplate();\n }\n return new DefaultResultTemplate_1.DefaultResultTemplate();\n };\n ResultList.loadTemplatesFromCache = function () {\n var pageTemplateNames = TemplateCache_1.TemplateCache.getResultListTemplateNames();\n if (pageTemplateNames.length > 0) {\n return new TemplateList_1.TemplateList(underscore_1.compact(underscore_1.map(pageTemplateNames, function (templateName) { return TemplateCache_1.TemplateCache.getTemplate(templateName); })));\n }\n return null;\n };\n ResultList.prototype.addListeners = function () {\n var _this = this;\n this.bind.onRootElement(QueryEvents_1.QueryEvents.newQuery, function (args) { return _this.handleNewQuery(); });\n this.bind.onRootElement(QueryEvents_1.QueryEvents.buildingQuery, function (args) {\n return _this.handleBuildingQuery(args);\n });\n this.bind.onRootElement(QueryEvents_1.QueryEvents.querySuccess, function (args) {\n return _this.handleQuerySuccess(args);\n });\n this.bind.onRootElement(QueryEvents_1.QueryEvents.duringQuery, function (args) { return _this.handleDuringQuery(); });\n this.bind.onRootElement(QueryEvents_1.QueryEvents.queryError, function (args) { return _this.handleQueryError(); });\n Dom_1.$$(this.root).on(ResultListEvents_1.ResultListEvents.changeLayout, function (e, args) { return _this.handleChangeLayout(args); });\n if (this.options.enableInfiniteScroll) {\n this.addInfiniteScrollListeners();\n }\n else {\n this.addPagerListeners();\n }\n };\n ResultList.prototype.addInfiniteScrollListeners = function () {\n var _this = this;\n this.bind.on(this.options.infiniteScrollContainer, 'scroll', function () {\n _this.successiveScrollCount = 0;\n _this.handleScrollOfResultList();\n });\n this.bind.onRootElement(QueryEvents_1.QueryEvents.deferredQuerySuccess, function () {\n setTimeout(function () {\n _this.scrollToTopIfEnabled();\n }, 0);\n });\n };\n ResultList.prototype.addPagerListeners = function () {\n var _this = this;\n this.bind.onQueryState(Model_1.MODEL_EVENTS.CHANGE_ONE, QueryStateModel_1.QUERY_STATE_ATTRIBUTES.FIRST, function () {\n _this.bind.oneRootElement(QueryEvents_1.QueryEvents.deferredQuerySuccess, function () {\n setTimeout(function () {\n _this.scrollToTopIfEnabled();\n }, 0);\n });\n });\n };\n /**\n * Get the fields needed to be automatically included in the query for this result list.\n * @returns {string[]}\n */\n ResultList.prototype.getAutoSelectedFieldsToInclude = function () {\n return underscore_1.chain(this.options.resultTemplate.getFields()).concat(this.getMinimalFieldsToInclude()).compact().unique().value();\n };\n ResultList.prototype.setupTemplatesVersusLayouts = function () {\n var _this = this;\n var layoutClassToAdd = \"coveo-\" + this.options.layout + \"-layout-container\";\n this.resultContainer.addClass(layoutClassToAdd);\n if (this.options.layout === 'table') {\n this.options.resultTemplate = new TableTemplate_1.TableTemplate(this.options.resultTemplate.templates || []);\n }\n // A TemplateList is the scenario where the result template are directly embedded inside the ResultList\n // This is the typical scenario when a page gets created by the interface editor, for example.\n // In that case, we try to stick closely that what is actually configured inside the page, and do no \"special magic\".\n // Stick to the \"hardcoded\" configuration present in the page.\n // We only add the correct layout options if it has not been set manually.\n if (this.options.resultTemplate instanceof TemplateList_1.TemplateList) {\n underscore_1.each(this.options.resultTemplate.templates, function (tmpl) {\n if (!tmpl.layout) {\n tmpl.layout = _this.options.layout;\n }\n });\n }\n else if (this.options.resultTemplate instanceof DefaultResultTemplate_1.DefaultResultTemplate && this.options.layout == 'list') {\n ResponsiveDefaultResultTemplate_1.ResponsiveDefaultResultTemplate.init(this.root, this, {});\n }\n };\n /**\n * Empties the current result list content and appends the given array of HTMLElement.\n *\n * Can append to existing elements in the result list, or replace them.\n *\n * Triggers the `newResultsDisplayed` and `newResultDisplayed` events.\n * @param resultsElement\n * @param append\n */\n ResultList.prototype.renderResults = function (resultElements, append) {\n var _this = this;\n if (append === void 0) { append = false; }\n if (!append) {\n this.resultContainer.empty();\n }\n return this.renderer\n .renderResults(resultElements, append, this.triggerNewResultDisplayed.bind(this))\n .then(function () { return _this.triggerNewResultsDisplayed(); });\n };\n /**\n * Builds and returns an array of HTMLElement with the given result set.\n * @param results the result set to build an array of HTMLElement from.\n */\n ResultList.prototype.buildResults = function (results) {\n var layout = this.options.layout;\n return this.templateToHtml.buildResults(results, layout, this.currentlyDisplayedResults);\n };\n /**\n * Builds and returns an HTMLElement for the given result.\n * @param result the result to build an HTMLElement from.\n * @returns {HTMLElement}\n */\n ResultList.prototype.buildResult = function (result) {\n var layout = this.options.layout;\n return this.templateToHtml.buildResult(result, layout, this.currentlyDisplayedResults);\n };\n /**\n * Executes a query to fetch new results. After the query returns, renders the new results.\n *\n * Asserts that there are more results to display by verifying whether the last query has returned as many results as\n * requested.\n *\n * Asserts that the `ResultList` is not currently fetching results.\n * @param count The number of results to fetch and display.\n */\n ResultList.prototype.displayMoreResults = function (count) {\n Assert_1.Assert.isLargerOrEqualsThan(1, count);\n if (this.isCurrentlyFetchingMoreResults()) {\n this.logger.warn(\"Ignoring request to display more results since we're already doing so\");\n return;\n }\n if (!this.hasPotentiallyMoreResultsToDisplay()) {\n this.logger.warn(\"Ignoring request to display more results since we know there aren't more to display\");\n return;\n }\n if (this.options.enableInfiniteScrollWaitingAnimation) {\n this.showWaitingAnimationForInfiniteScrolling();\n }\n return this.fetchAndRenderMoreResults(count);\n };\n Object.defineProperty(ResultList.prototype, \"templateToHtml\", {\n get: function () {\n var templateToHtmlArgs = {\n resultTemplate: this.options.resultTemplate,\n searchInterface: this.searchInterface,\n queryStateModel: this.queryStateModel\n };\n return new TemplateToHtml_1.TemplateToHtml(templateToHtmlArgs);\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Gets the list of currently displayed result.\n * @returns {IQueryResult[]}\n */\n ResultList.prototype.getDisplayedResults = function () {\n return this.currentlyDisplayedResults;\n };\n /**\n * Gets the list of currently displayed result HTMLElement.\n * @returns {HTMLElement[]}\n */\n ResultList.prototype.getDisplayedResultsElements = function () {\n return this.resultContainer.getResultElements();\n };\n ResultList.prototype.enable = function () {\n this.disableLayoutChange = false;\n if (this.resultLayoutSelectors.length > 0) {\n this.enableBasedOnActiveLayouts();\n }\n else {\n _super.prototype.enable.call(this);\n Dom_1.$$(this.element).removeClass('coveo-hidden');\n }\n };\n ResultList.prototype.disable = function () {\n var _this = this;\n _super.prototype.disable.call(this);\n var otherLayoutsStillActive = underscore_1.map(this.otherResultLists, function (otherResultList) { return otherResultList.options.layout; });\n if (!underscore_1.contains(otherLayoutsStillActive, this.options.layout) && !this.disableLayoutChange) {\n underscore_1.each(this.resultLayoutSelectors, function (resultLayoutSelector) {\n resultLayoutSelector.disableLayouts([_this.options.layout]);\n });\n }\n this.disableLayoutChange = false;\n Dom_1.$$(this.element).addClass('coveo-hidden');\n };\n ResultList.prototype.autoCreateComponentsInsideResult = function (element, result) {\n return this.templateToHtml.autoCreateComponentsInsideResult(element, result);\n };\n ResultList.prototype.triggerNewResultDisplayed = function (result, resultElement) {\n var args = {\n result: result,\n item: resultElement\n };\n Dom_1.$$(this.element).trigger(ResultListEvents_1.ResultListEvents.newResultDisplayed, args);\n };\n ResultList.prototype.triggerNewResultsDisplayed = function () {\n var args = {\n isInfiniteScrollEnabled: this.options.enableInfiniteScroll\n };\n Dom_1.$$(this.element).trigger(ResultListEvents_1.ResultListEvents.newResultsDisplayed, args);\n };\n ResultList.prototype.fetchAndRenderMoreResults = function (count) {\n return __awaiter(this, void 0, void 0, function () {\n var data, e_1;\n return __generator(this, function (_a) {\n switch (_a.label) {\n case 0:\n this.fetchingMoreResults = this.queryController.fetchMore(count);\n _a.label = 1;\n case 1:\n _a.trys.push([1, 3, , 4]);\n return [4 /*yield*/, this.fetchingMoreResults];\n case 2:\n data = _a.sent();\n Assert_1.Assert.exists(data);\n this.usageAnalytics.logCustomEvent(AnalyticsActionListMeta_1.analyticsActionCauseList.pagerScrolling, {}, this.element);\n this.reachedTheEndOfResults = count > data.results.length;\n this.renderNewResults(data);\n this.resetStateAfterFetchingMoreResults();\n return [2 /*return*/, data];\n case 3:\n e_1 = _a.sent();\n this.resetStateAfterFetchingMoreResults();\n return [2 /*return*/, Promise.reject(e_1)];\n case 4: return [2 /*return*/];\n }\n });\n });\n };\n ResultList.prototype.renderNewResults = function (data) {\n return __awaiter(this, void 0, void 0, function () {\n var elements, _a;\n return __generator(this, function (_b) {\n switch (_b.label) {\n case 0: return [4 /*yield*/, this.buildResults(data)];\n case 1:\n elements = _b.sent();\n this.renderResults(elements, true);\n (_a = this.currentlyDisplayedResults).push.apply(_a, data.results);\n this.triggerNewResultsDisplayed();\n return [2 /*return*/];\n }\n });\n });\n };\n ResultList.prototype.resetStateAfterFetchingMoreResults = function () {\n var _this = this;\n this.hideWaitingAnimationForInfiniteScrolling();\n this.fetchingMoreResults = undefined;\n Defer_1.Defer.defer(function () {\n _this.successiveScrollCount++;\n if (_this.successiveScrollCount <= ResultList.MAX_AMOUNT_OF_SUCESSIVE_REQUESTS) {\n _this.handleScrollOfResultList();\n }\n else {\n _this.logger.info(\"Result list has triggered 5 consecutive queries to try and fill up the scrolling container, but it is still unable to do so.\\n Try explicitly setting the 'data-infinite-scroll-container-selector' option on the result list. See: https://coveo.github.io/search-ui/components/resultlist.html#options.infinitescrollcontainer\");\n }\n });\n };\n ResultList.prototype.handleDuringQuery = function () {\n this.logger.trace('Emptying the result container');\n this.cancelFetchingMoreResultsIfNeeded();\n this.showWaitingAnimation();\n this.showOrHideElementsDependingOnState(false, false);\n };\n ResultList.prototype.handleQueryError = function () {\n this.hideWaitingAnimation();\n this.resultContainer.empty();\n this.currentlyDisplayedResults = [];\n this.reachedTheEndOfResults = true;\n };\n ResultList.prototype.handleQuerySuccess = function (data) {\n var _this = this;\n Assert_1.Assert.exists(data);\n Assert_1.Assert.exists(data.results);\n var results = data.results;\n this.logger.trace('Received query results from new query', results);\n this.hideWaitingAnimation();\n ResultList.resultCurrentlyBeingRendered = undefined;\n this.reachedTheEndOfResults = data.query.numberOfResults > data.results.results.length;\n this.currentlyDisplayedResults = [];\n this.buildResults(data.results).then(function (elements) { return __awaiter(_this, void 0, void 0, function () {\n return __generator(this, function (_a) {\n switch (_a.label) {\n case 0: return [4 /*yield*/, this.renderResults(elements)];\n case 1:\n _a.sent();\n this.showOrHideElementsDependingOnState(true, this.currentlyDisplayedResults.length != 0);\n if (DeviceUtils_1.DeviceUtils.isMobileDevice() && this.options.mobileScrollContainer != undefined) {\n this.options.mobileScrollContainer.scrollTop = 0;\n }\n if (this.options.enableInfiniteScroll && results.results.length == data.queryBuilder.numberOfResults) {\n // This will check right away if we need to add more results to make the scroll container full & scrolling.\n this.scrollToTopIfEnabled();\n this.handleScrollOfResultList();\n }\n return [2 /*return*/];\n }\n });\n }); });\n };\n ResultList.prototype.handleScrollOfResultList = function () {\n if (this.isCurrentlyFetchingMoreResults() || !this.options.enableInfiniteScroll) {\n return;\n }\n if (this.isScrollingOfResultListAlmostAtTheBottom() && this.hasPotentiallyMoreResultsToDisplay()) {\n this.displayMoreResults(this.options.infiniteScrollPageSize);\n }\n };\n ResultList.prototype.scrollToTopIfEnabled = function () {\n if (!this.options.enableScrollToTop) {\n return;\n }\n ResultListUtils_1.ResultListUtils.scrollToTop(this.root);\n };\n ResultList.prototype.handleNewQuery = function () {\n Dom_1.$$(this.element).removeClass('coveo-hidden');\n ResultList.resultCurrentlyBeingRendered = undefined;\n };\n Object.defineProperty(ResultList.prototype, \"otherResultLists\", {\n get: function () {\n var allResultLists = this.searchInterface.getComponents(ResultList.ID);\n return underscore_1.without(allResultLists, this);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ResultList.prototype, \"resultLayoutSelectors\", {\n get: function () {\n return this.searchInterface.getComponents('ResultLayoutSelector');\n },\n enumerable: true,\n configurable: true\n });\n ResultList.prototype.handleBuildingQuery = function (args) {\n if (this.options.fieldsToInclude != null) {\n // remove the @\n args.queryBuilder.addFieldsToInclude(underscore_1.map(this.options.fieldsToInclude, function (field) { return field.substr(1); }));\n }\n if (this.options.autoSelectFieldsToInclude) {\n var otherFields = underscore_1.flatten(underscore_1.map(this.otherResultLists, function (otherResultList) {\n return otherResultList.getAutoSelectedFieldsToInclude();\n }));\n args.queryBuilder.addRequiredFields(underscore_1.unique(otherFields.concat(this.getAutoSelectedFieldsToInclude())));\n args.queryBuilder.includeRequiredFields = true;\n }\n };\n ResultList.prototype.handleChangeLayout = function (args) {\n var _this = this;\n if (args.layout === this.options.layout) {\n this.disableLayoutChange = false;\n this.enable();\n this.options.resultTemplate.layout = this.options.layout;\n if (args.results) {\n // Prevent flickering when switching to a new layout that is empty\n // add a temporary placeholder, the same that is used on initialization\n if (this.resultContainer.isEmpty()) {\n new InitializationPlaceholder_1.InitializationPlaceholder(this.root).withVisibleRootElement().withPlaceholderForResultList();\n }\n Defer_1.Defer.defer(function () { return __awaiter(_this, void 0, void 0, function () {\n var elements;\n return __generator(this, function (_a) {\n switch (_a.label) {\n case 0: return [4 /*yield*/, this.buildResults(args.results)];\n case 1:\n elements = _a.sent();\n this.renderResults(elements);\n this.showOrHideElementsDependingOnState(true, this.currentlyDisplayedResults.length !== 0);\n return [2 /*return*/];\n }\n });\n }); });\n }\n }\n else {\n this.disableLayoutChange = true;\n this.disable();\n this.resultContainer.empty();\n }\n };\n ResultList.prototype.isCurrentlyFetchingMoreResults = function () {\n return Utils_1.Utils.exists(this.fetchingMoreResults);\n };\n ResultList.prototype.getMinimalFieldsToInclude = function () {\n // these fields are needed for analytics click event\n return ['author', 'language', 'urihash', 'objecttype', 'collection', 'source', 'language', 'permanentid'];\n };\n ResultList.prototype.isScrollingOfResultListAlmostAtTheBottom = function () {\n // this is in a try catch because the unit test fail otherwise (Window does not exist for phantom js in the console)\n var isWindow;\n try {\n isWindow = this.options.infiniteScrollContainer instanceof Window;\n }\n catch (e) {\n isWindow = false;\n }\n return isWindow ? this.isScrollAtBottomForWindowElement() : this.isScrollAtBottomForHtmlElement();\n };\n ResultList.prototype.isScrollAtBottomForWindowElement = function () {\n var win = new Dom_1.Win(window);\n var windowHeight = win.height();\n var scrollTop = win.scrollY();\n var bodyHeight = new Dom_1.Doc(document).height();\n return bodyHeight - (windowHeight + scrollTop) < windowHeight / 2;\n };\n ResultList.prototype.isScrollAtBottomForHtmlElement = function () {\n var el = this.options.infiniteScrollContainer;\n var elementHeight = el.clientHeight;\n var scrollHeight = el.scrollHeight;\n var bottomPosition = el.scrollTop + elementHeight;\n return scrollHeight - bottomPosition < elementHeight / 2;\n };\n ResultList.prototype.hasPotentiallyMoreResultsToDisplay = function () {\n return this.currentlyDisplayedResults.length > 0 && !this.reachedTheEndOfResults;\n };\n ResultList.prototype.cancelFetchingMoreResultsIfNeeded = function () {\n if (this.isCurrentlyFetchingMoreResults()) {\n this.logger.trace('Cancelling fetching more results');\n Promise.reject(this.fetchingMoreResults);\n this.fetchingMoreResults = undefined;\n }\n };\n ResultList.prototype.showOrHideElementsDependingOnState = function (hasQuery, hasResults) {\n var showIfQuery = Dom_1.$$(this.element).findAll('.coveo-show-if-query');\n var showIfNoQuery = Dom_1.$$(this.element).findAll('.coveo-show-if-no-query');\n var showIfResults = Dom_1.$$(this.element).findAll('.coveo-show-if-results');\n var showIfNoResults = Dom_1.$$(this.element).findAll('.coveo-show-if-no-results');\n underscore_1.each(showIfQuery, function (s) {\n Dom_1.$$(s).toggle(hasQuery);\n });\n underscore_1.each(showIfNoQuery, function (s) {\n Dom_1.$$(s).toggle(!hasQuery);\n });\n underscore_1.each(showIfResults, function (s) {\n Dom_1.$$(s).toggle(hasQuery && hasResults);\n });\n underscore_1.each(showIfNoResults, function (s) {\n Dom_1.$$(s).toggle(hasQuery && !hasResults);\n });\n };\n Object.defineProperty(ResultList.prototype, \"waitAnimation\", {\n get: function () {\n return this.options.waitAnimation.toLowerCase();\n },\n enumerable: true,\n configurable: true\n });\n ResultList.prototype.showWaitingAnimation = function () {\n switch (this.waitAnimation) {\n case 'fade':\n Dom_1.$$(this.options.waitAnimationContainer).addClass('coveo-fade-out');\n break;\n case 'spinner':\n this.resultContainer.hideChildren();\n if (Dom_1.$$(this.options.waitAnimationContainer).find('.coveo-wait-animation') == undefined) {\n this.options.waitAnimationContainer.appendChild(DomUtils_1.DomUtils.getBasicLoadingAnimation());\n }\n break;\n }\n };\n ResultList.prototype.hideWaitingAnimation = function () {\n switch (this.waitAnimation) {\n case 'fade':\n Dom_1.$$(this.options.waitAnimationContainer).removeClass('coveo-fade-out');\n break;\n case 'spinner':\n var spinner = Dom_1.$$(this.options.waitAnimationContainer).find('.coveo-loading-spinner');\n if (spinner) {\n Dom_1.$$(spinner).detach();\n }\n break;\n }\n };\n ResultList.prototype.showWaitingAnimationForInfiniteScrolling = function () {\n var spinner = DomUtils_1.DomUtils.getLoadingSpinner();\n if (this.options.layout == 'card' && this.options.enableInfiniteScroll) {\n var previousSpinnerContainer = Dom_1.$$(this.options.waitAnimationContainer).findAll('.coveo-loading-spinner-container');\n underscore_1.each(previousSpinnerContainer, function (previousSpinner) { return Dom_1.$$(previousSpinner).remove(); });\n var spinnerContainer = Dom_1.$$('div', {\n className: 'coveo-loading-spinner-container'\n });\n spinnerContainer.append(spinner);\n this.options.waitAnimationContainer.appendChild(spinnerContainer.el);\n }\n else {\n this.options.waitAnimationContainer.appendChild(DomUtils_1.DomUtils.getLoadingSpinner());\n }\n };\n ResultList.prototype.hideWaitingAnimationForInfiniteScrolling = function () {\n var spinners = Dom_1.$$(this.options.waitAnimationContainer).findAll('.coveo-loading-spinner');\n var containers = Dom_1.$$(this.options.waitAnimationContainer).findAll('.coveo-loading-spinner-container');\n underscore_1.each(spinners, function (spinner) { return Dom_1.$$(spinner).remove(); });\n underscore_1.each(containers, function (container) { return Dom_1.$$(container).remove(); });\n };\n ResultList.prototype.initResultContainer = function () {\n if (!this.options.resultsContainer) {\n var elemType = this.options.layout === 'table' ? 'table' : 'div';\n this.options.resultsContainer = Dom_1.$$(elemType, { className: 'coveo-result-list-container' }).el;\n this.initResultContainerAddToDom();\n }\n return new ResultContainer_1.ResultContainer(this.options.resultsContainer, this.searchInterface);\n };\n ResultList.prototype.initResultContainerAddToDom = function () {\n this.element.appendChild(this.options.resultsContainer);\n };\n ResultList.prototype.initWaitAnimationContainer = function () {\n if (!this.options.waitAnimationContainer) {\n this.options.waitAnimationContainer = this.resultContainer.el;\n }\n };\n ResultList.prototype.setupRenderer = function () {\n var initParameters = {\n options: this.searchInterface.options.originalOptionsObject,\n bindings: this.bindings\n };\n var autoCreateComponentsFn = function (elem) { return Initialization_1.Initialization.automaticallyCreateComponentsInside(elem, initParameters); };\n switch (this.options.layout) {\n case 'card':\n this.renderer = new ResultListCardRenderer_1.ResultListCardRenderer(this.options, autoCreateComponentsFn);\n break;\n case 'table':\n this.renderer = new ResultListTableRenderer_1.ResultListTableRenderer(this.options, autoCreateComponentsFn);\n break;\n case 'list':\n default:\n this.renderer = new ResultListRenderer_1.ResultListRenderer(this.options, autoCreateComponentsFn);\n break;\n }\n };\n ResultList.prototype.makeElementFocusable = function () {\n Dom_1.$$(this.element).setAttribute('tabindex', '-1');\n };\n ResultList.prototype.ensureHasId = function () {\n var currentId = this.element.id;\n if (currentId === '') {\n this.element.id = underscore_1.uniqueId('coveo-result-list');\n }\n };\n ResultList.prototype.enableBasedOnActiveLayouts = function () {\n var _this = this;\n // We should try to enable a result list only when the result layout selector currently allow that result list layout to be displayed.\n underscore_1.each(this.resultLayoutSelectors, function (resultLayoutSelector) {\n var found = underscore_1.find(resultLayoutSelector.activeLayouts, function (activeLayout, activeLayoutKey) { return activeLayoutKey == _this.options.layout; });\n if (found) {\n _super.prototype.enable.call(_this);\n resultLayoutSelector.enableLayouts([_this.options.layout]);\n Dom_1.$$(_this.element).removeClass('coveo-hidden');\n }\n });\n };\n ResultList.ID = 'ResultList';\n ResultList.doExport = function () {\n GlobalExports_1.exportGlobally({\n ResultList: ResultList\n });\n };\n /**\n * The options for the ResultList\n * @componentOptions\n */\n ResultList.options = {\n /**\n * The element inside which to insert the rendered result templates.\n *\n * Performing a new query clears the content of this element.\n *\n * You can change the container by specifying its selector (e.g.,\n * `data-result-container-selector='#someCssSelector'`).\n *\n * If you specify no value for this option, a `div` element will be dynamically created and appended to the result\n * list. This element will then be used as a result container.\n */\n resultsContainer: ComponentOptions_1.ComponentOptions.buildChildHtmlElementOption({ alias: 'resultContainerSelector' }),\n resultTemplate: TemplateComponentOptions_1.TemplateComponentOptions.buildTemplateOption({ defaultFunction: ResultList.getDefaultTemplate }),\n /**\n * The type of animation to display while waiting for a query to return.\n *\n * The possible values are:\n * - `fade`: Fades out the current list of results while the query is executing.\n * - `spinner`: Shows a spinning animation while the query is executing.\n * - `none`: Use no animation during queries.\n *\n * See also the [`waitAnimationContainer`]{@link ResultList.options.waitAnimationContainer} option.\n *\n * @examples spinner\n */\n waitAnimation: ComponentOptions_1.ComponentOptions.buildStringOption({ defaultValue: 'none' }),\n /**\n * The element inside which to display the [`waitAnimation`]{@link ResultList.options.waitAnimation}.\n *\n * You can change this by specifying a CSS selector (e.g.,\n * `data-wait-animation-container-selector='#someCssSelector'`).\n *\n * Defaults to the value of the [`resultsContainer`]{@link ResultList.options.resultsContainer} option.\n */\n waitAnimationContainer: ComponentOptions_1.ComponentOptions.buildChildHtmlElementOption({\n postProcessing: function (value, options) { return value || options.resultsContainer; }\n }),\n /**\n * Whether to automatically retrieve an additional page of results and append it to the\n * results that the `ResultList` is currently displaying when the user scrolls down to the bottom of the\n * [`infiniteScrollContainer`]{@link ResultList.options.infiniteScrollContainer}.\n *\n * See also the [`infiniteScrollPageSize`]{@link ResultList.options.infiniteScrollPageSize} and\n * [`enableInfiniteScrollWaitingAnimation`]{@link ResultList.options.enableInfiniteScrollWaitingAnimation} options.\n *\n * It is important to specify the `infiniteScrollContainer` option manually if you want the scrolling element to be\n * something else than the default `window` element. Otherwise, you might find yourself in a strange state where the\n * framework rapidly triggers multiple successive query.\n */\n enableInfiniteScroll: ComponentOptions_1.ComponentOptions.buildBooleanOption({ defaultValue: false }),\n /**\n * The number of additional results to fetch when the user scrolls down to the bottom of the\n * [`infiniteScrollContainer`]{@link ResultList.options.infiniteScrollContainer}.\n *\n * @examples 5\n */\n infiniteScrollPageSize: ComponentOptions_1.ComponentOptions.buildNumberOption({\n defaultValue: 10,\n min: 1,\n depend: 'enableInfiniteScroll'\n }),\n /**\n * The element that triggers fetching additional results when the end user scrolls down to its bottom.\n *\n * You can change the container by specifying its selector (e.g.,\n * `data-infinite-scroll-container-selector='#someCssSelector'`).\n *\n * By default, the framework uses the first vertically scrollable parent element it finds, starting from the\n * `ResultList` element itself. A vertically scrollable element is an element whose CSS `overflow-y` attribute is\n * `scroll`.\n *\n * This implies that if the framework can find no scrollable parent, it uses the `window` itself as a scrollable\n * container.\n *\n * This heuristic is not perfect, for technical reasons. There are always some corner case CSS combination which the\n * framework will not be able to correctly detect as 'scrollable'.\n *\n * It is highly recommended that you manually set this option if you wish something else than the `window` to be the\n * scrollable element.\n */\n infiniteScrollContainer: ComponentOptions_1.ComponentOptions.buildChildHtmlElementOption({\n depend: 'enableInfiniteScroll',\n defaultFunction: function (element) { return ComponentOptions_1.ComponentOptions.findParentScrolling(element); }\n }),\n /**\n * Whether to display the [`waitingAnimation`]{@link ResultList.options.waitAnimation} while fetching additional\n * results.\n */\n enableInfiniteScrollWaitingAnimation: ComponentOptions_1.ComponentOptions.buildBooleanOption({\n depend: 'enableInfiniteScroll',\n defaultValue: true\n }),\n mobileScrollContainer: ComponentOptions_1.ComponentOptions.buildSelectorOption({\n defaultFunction: function () { return document.querySelector('.coveo-results-column'); }\n }),\n /**\n * Whether the `ResultList` should scan its result templates to discover which fields it must request to\n * be able to render all results.\n *\n * Setting this option to `true` ensures that the Coveo Search API does not return fields that are unnecessary for\n * the UI to function.\n *\n * If you set this option to `true`, the fields referenced in your result folding templates won't be automatically resolved.\n * In such a case, you must manually specify those fields using the [`fieldsToInclude`]{@link ResultList.options.fieldsToInclude} option.\n *\n * **Notes:**\n *\n * - Many interfaces created with the JavaScript Search Interface Editor explicitly set this option to `true`.\n * - You cannot set this option to `true` in the Coveo for Sitecore integration.\n */\n autoSelectFieldsToInclude: ComponentOptions_1.ComponentOptions.buildBooleanOption({ defaultValue: false }),\n /**\n * A list of fields to include in the query results.\n *\n * If you set the [`autoSelectFieldsToInclude`]{@link ResultList.options.autoSelectFieldsToInclude} option to\n * `true`, the Coveo Search API returns the fields you specify for this option (if those fields are available) in\n * addition to the fields which the `ResultList` automatically requests. Note that the `autoSelectFieldsToInclude`\n * option doesn't automatically request fields for folding templates; in such a case, you must manually specify\n * fields using this option to avoid empty results.\n *\n * If you set the [`autoSelectFieldsToInclude`]{@link ResultList.options.autoSelectFieldsToInclude} option to\n * `false`, the Coveo Search API only returns the fields you specify for this option (if those fields are\n * available).\n *\n * If you set the [`autoSelectFieldsToInclude`]{@link ResultList.options.autoSelectFieldsToInclude} option to\n * `false` and leave this option undefined, the Coveo Search API returns all available fields.\n */\n fieldsToInclude: ComponentOptions_1.ComponentOptions.buildFieldsOption({ includeInResults: true }),\n /**\n * Specifies the layout to use when displaying results in this `ResultList` (see\n * [Result Layouts](https://docs.coveo.com/en/360/)). Specifying a value for this option automatically\n * populates a [`ResultLayout`]{@link ResultLayout} component with a switcher for the layout.\n *\n * For example, if there are two `ResultList` components in the page, one with its `layout` set to `list` and the\n * other with the same option set to `card`, then the `ResultLayout` component will render two buttons respectively\n * entitled **List** and **Card**.\n *\n * See the [`ValidLayout`]{@link ValidLayout} type for the list of possible values.\n *\n * @examples card\n */\n layout: ComponentOptions_1.ComponentOptions.buildStringOption({\n defaultValue: 'list',\n required: true\n }),\n /**\n * Whether to scroll back to the top of the page when the end-user:\n * - interacts with a facet when [`infiniteScrollContainer`]{@link ResultList.options.infiniteScrollContainer} is set to `true`\n * - interacts with the [`Pager`]{@link Pager} component when [`infiniteScrollContainer`]{@link ResultList.options.infiniteScrollContainer} is set to `false`\n *\n * **Note:** Setting this option to `false` has no effect on dynamic facets. To disable this behavior on a `DynamicFacet` component, you must set its own [`enableScrollToTop`]{@link DynamicFacet.options.enableScrollToTop} option to `false`.\n *\n * @availablesince [July 2019 Release (v2.6459)](https://docs.coveo.com/en/2938/)\n */\n enableScrollToTop: ComponentOptions_1.ComponentOptions.buildBooleanOption({\n defaultValue: true\n })\n };\n ResultList.resultCurrentlyBeingRendered = null;\n ResultList.MAX_AMOUNT_OF_SUCESSIVE_REQUESTS = 5;\n return ResultList;\n}(Component_1.Component));\nexports.ResultList = ResultList;\nInitialization_1.Initialization.registerAutoCreateComponent(ResultList);\n\n\n/***/ }),\n\n/***/ 94:\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (this && this.__assign) || Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n};\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nvar __generator = (this && this.__generator) || function (thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (_) try {\n if (f = 1, y && (t = y[op[0] & 2 ? \"return\" : op[0] ? \"throw\" : \"next\"]) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [0, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Component_1 = __webpack_require__(7);\nvar Strings_1 = __webpack_require__(6);\nvar ComponentOptions_1 = __webpack_require__(8);\nvar Dom_1 = __webpack_require__(1);\nvar Initialization_1 = __webpack_require__(2);\nvar GlobalExports_1 = __webpack_require__(3);\nvar CategoryFacetTemplates_1 = __webpack_require__(547);\nvar CategoryValueRoot_1 = __webpack_require__(548);\nvar CategoryFacetQueryController_1 = __webpack_require__(550);\nvar SVGDom_1 = __webpack_require__(16);\nvar SVGIcons_1 = __webpack_require__(12);\nvar QueryStateModel_1 = __webpack_require__(13);\n__webpack_require__(551);\nvar Model_1 = __webpack_require__(18);\nvar Utils_1 = __webpack_require__(4);\nvar underscore_1 = __webpack_require__(0);\nvar Assert_1 = __webpack_require__(5);\nvar QueryEvents_1 = __webpack_require__(11);\nvar CategoryFacetSearch_1 = __webpack_require__(552);\nvar BreadcrumbEvents_1 = __webpack_require__(35);\nvar CategoryFacetBreadcrumb_1 = __webpack_require__(554);\nvar AnalyticsActionListMeta_1 = __webpack_require__(10);\nvar CategoryFacetDebug_1 = __webpack_require__(555);\nvar QueryBuilder_1 = __webpack_require__(49);\nvar ResponsiveFacets_1 = __webpack_require__(175);\nvar ResponsiveFacetOptions_1 = __webpack_require__(85);\nvar CategoryFacetHeader_1 = __webpack_require__(556);\nvar AccessibleButton_1 = __webpack_require__(15);\nvar DependsOnManager_1 = __webpack_require__(174);\nvar ResultListUtils_1 = __webpack_require__(117);\nvar CategoryFacetValuesTree_1 = __webpack_require__(557);\n/**\n * The `CategoryFacet` component is a facet that renders values in a hierarchical fashion. It determines the filter to apply depending on the\n * current selected path of values.\n *\n * The path is a sequence of values that leads to a specific value in the hierarchy.\n * It is an array listing all the parents of a file (e.g., `['c', 'folder1']` for the `c:\\folder1\\text1.txt` file).\n *\n * This facet requires a [`field`]{@link CategoryFacet.options.field} with a special format to work correctly (see [Using the Category Facet Component](https://docs.coveo.com/en/2667)).\n *\n * @notSupportedIn salesforcefree\n * @availablesince [January 2019 Release (v2.5395.12)](https://docs.coveo.com/en/3277/#january-2019-release-v2539512)\n */\nvar CategoryFacet = /** @class */ (function (_super) {\n __extends(CategoryFacet, _super);\n function CategoryFacet(element, options, bindings) {\n var _this = _super.call(this, element, 'CategoryFacet', bindings) || this;\n _this.element = element;\n _this.options = options;\n _this.listenToQueryStateChange = true;\n _this.isFieldValueCompatible = false;\n _this.moreValuesToFetch = true;\n _this.showingWaitAnimation = false;\n _this.numberOfChildValuesCurrentlyDisplayed = 0;\n _this.options = ComponentOptions_1.ComponentOptions.initComponentOptions(element, CategoryFacet, options);\n _this.categoryFacetQueryController = new CategoryFacetQueryController_1.CategoryFacetQueryController(_this);\n _this.categoryFacetTemplates = new CategoryFacetTemplates_1.CategoryFacetTemplates();\n _this.categoryValueRoot = new CategoryValueRoot_1.CategoryValueRoot(Dom_1.$$(_this.element), _this.categoryFacetTemplates, _this);\n _this.categoryValueRoot.path = _this.activePath;\n _this.currentPage = 0;\n _this.numberOfValues = _this.options.numberOfValues;\n _this.categoryFacetValuesTree = new CategoryFacetValuesTree_1.CategoryFacetValuesTree();\n _this.tryToInitFacetSearch();\n if (_this.options.debug) {\n new CategoryFacetDebug_1.CategoryFacetDebug(_this);\n }\n ResponsiveFacets_1.ResponsiveFacets.init(_this.root, _this, _this.options);\n _this.initDependsOnManager();\n _this.bind.onRootElement(QueryEvents_1.QueryEvents.buildingQuery, function (args) { return _this.handleBuildingQuery(args); });\n _this.bind.onRootElement(QueryEvents_1.QueryEvents.querySuccess, function (args) { return _this.handleQuerySuccess(args); });\n _this.bind.onRootElement(QueryEvents_1.QueryEvents.duringQuery, function () { return _this.addFading(); });\n _this.bind.onRootElement(QueryEvents_1.QueryEvents.deferredQuerySuccess, function () { return _this.handleDeferredQuerySuccess(); });\n _this.bind.onRootElement(BreadcrumbEvents_1.BreadcrumbEvents.populateBreadcrumb, function (args) { return _this.handlePopulateBreadCrumb(args); });\n _this.bind.onRootElement(BreadcrumbEvents_1.BreadcrumbEvents.clearBreadcrumb, function () { return _this.handleClearBreadcrumb(); });\n _this.buildFacetHeader();\n _this.initQueryStateEvents();\n return _this;\n }\n CategoryFacet.prototype.isCurrentlyDisplayed = function () {\n return Dom_1.$$(this.element).isVisible();\n };\n Object.defineProperty(CategoryFacet.prototype, \"activePath\", {\n get: function () {\n return this.queryStateModel.get(this.queryStateAttribute) || this.options.basePath;\n },\n set: function (newPath) {\n this.listenToQueryStateChange = false;\n this.queryStateModel.set(this.queryStateAttribute, newPath);\n this.listenToQueryStateChange = true;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(CategoryFacet.prototype, \"queryStateAttribute\", {\n get: function () {\n return QueryStateModel_1.QueryStateModel.getFacetId(this.options.id);\n },\n enumerable: true,\n configurable: true\n });\n CategoryFacet.prototype.handleBuildingQuery = function (args) {\n this.positionInQuery = this.categoryFacetQueryController.putCategoryFacetInQueryBuilder(args.queryBuilder, this.activePath, this.numberOfValues + 1);\n };\n CategoryFacet.prototype.scrollToTop = function () {\n ResultListUtils_1.ResultListUtils.scrollToTop(this.root);\n };\n CategoryFacet.prototype.tryToInitFacetSearch = function () {\n if (!this.isFacetSearchAvailable) {\n return this.logDisabledFacetSearchWarning();\n }\n this.categoryFacetSearch = new CategoryFacetSearch_1.CategoryFacetSearch(this, this.options.displaySearchButton);\n };\n CategoryFacet.prototype.logDisabledFacetSearchWarning = function () {\n if (this.isEnableFacetSearchFalsy) {\n return;\n }\n var valueCaptionAttributeName = this.getOptionAttributeName('valueCaption');\n var enableFacetSearchAttributeName = this.getOptionAttributeName('enableFacetSearch');\n var field = this.options.field;\n this.logger.warn(\"The search box is disabled on the \" + field + \" CategoryFacet. To hide this warning,\\n either remove the \" + valueCaptionAttributeName + \" option or set the \" + enableFacetSearchAttributeName + \" option to \\\"false\\\".\");\n };\n CategoryFacet.prototype.getOptionAttributeName = function (optionName) {\n return ComponentOptions_1.ComponentOptions.attrNameFromName(optionName);\n };\n Object.defineProperty(CategoryFacet.prototype, \"isFacetSearchAvailable\", {\n get: function () {\n if (this.areValueCaptionsSpecified) {\n return false;\n }\n if (this.isEnableFacetSearchFalsy) {\n return false;\n }\n return true;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(CategoryFacet.prototype, \"areValueCaptionsSpecified\", {\n get: function () {\n var valueCaptions = this.options.valueCaption;\n return underscore_1.keys(valueCaptions).length !== 0;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(CategoryFacet.prototype, \"isEnableFacetSearchFalsy\", {\n get: function () {\n return !this.options.enableFacetSearch;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(CategoryFacet.prototype, \"isCategoryEmpty\", {\n get: function () {\n return !this.categoryValueRoot.children.length;\n },\n enumerable: true,\n configurable: true\n });\n CategoryFacet.prototype.updateAppearance = function () {\n if (this.disabled || this.isCategoryEmpty) {\n return this.hide();\n }\n this.show();\n };\n CategoryFacet.prototype.handleQuerySuccess = function (args) {\n if (Utils_1.Utils.isNullOrUndefined(args.results.categoryFacets)) {\n return this.notImplementedError();\n }\n if (Utils_1.Utils.isNullOrUndefined(args.results.categoryFacets[this.positionInQuery])) {\n return;\n }\n var numberOfRequestedValues = args.query.categoryFacets[this.positionInQuery].maximumNumberOfValues;\n var categoryFacetResult = args.results.categoryFacets[this.positionInQuery];\n this.moreValuesToFetch = numberOfRequestedValues == categoryFacetResult.values.length;\n this.clear();\n if (categoryFacetResult.notImplemented) {\n return this.notImplementedError();\n }\n if (!categoryFacetResult.values.length && !categoryFacetResult.parentValues.length) {\n return;\n }\n this.renderValues(categoryFacetResult, numberOfRequestedValues);\n if (this.isFacetSearchAvailable) {\n var facetSearch = this.categoryFacetSearch.build();\n this.options.displaySearchOnTop\n ? Dom_1.$$(facetSearch).insertBefore(this.categoryValueRoot.listRoot.el)\n : Dom_1.$$(facetSearch).insertAfter(this.categoryValueRoot.listRoot.el);\n }\n this.moreLessContainer = Dom_1.$$('div', { className: 'coveo-category-facet-more-less-container' });\n Dom_1.$$(this.element).append(this.moreLessContainer.el);\n if (this.options.enableMoreLess) {\n this.renderMoreLess();\n }\n if (!this.isPristine()) {\n Dom_1.$$(this.element).addClass('coveo-category-facet-non-empty-path');\n }\n };\n /**\n * Changes the active path.\n *\n */\n CategoryFacet.prototype.changeActivePath = function (path) {\n this.activePath = path;\n };\n CategoryFacet.prototype.executeQuery = function () {\n return __awaiter(this, void 0, void 0, function () {\n return __generator(this, function (_a) {\n switch (_a.label) {\n case 0:\n this.showWaitingAnimation();\n _a.label = 1;\n case 1:\n _a.trys.push([1, , 3, 4]);\n return [4 /*yield*/, this.queryController.executeQuery()];\n case 2:\n _a.sent();\n return [3 /*break*/, 4];\n case 3:\n this.hideWaitingAnimation();\n return [7 /*endfinally*/];\n case 4: return [2 /*return*/];\n }\n });\n });\n };\n /**\n * Reloads the facet with the same path.\n */\n CategoryFacet.prototype.reload = function () {\n this.changeActivePath(this.activePath);\n this.logAnalyticsEvent(AnalyticsActionListMeta_1.analyticsActionCauseList.categoryFacetReload);\n this.executeQuery();\n };\n /**\n * Returns all the visible parent values.\n * @returns simple object with three fields: `value`, `count` and `path`.\n */\n CategoryFacet.prototype.getVisibleParentValues = function () {\n return this.getVisibleParentCategoryValues().map(function (categoryValue) { return categoryValue.getDescriptor(); });\n };\n CategoryFacet.prototype.getVisibleParentCategoryValues = function () {\n if (this.categoryValueRoot.children.length == 0 || this.categoryValueRoot.children[0].children.length == 0) {\n return [];\n }\n var currentParentvalue = this.categoryValueRoot.children[0];\n var parentValues = [currentParentvalue];\n while (currentParentvalue.children.length != 0 && !Utils_1.Utils.arrayEqual(currentParentvalue.path, this.activePath)) {\n currentParentvalue = currentParentvalue.children[0];\n parentValues.push(currentParentvalue);\n }\n return parentValues;\n };\n /**\n * Shows more values according to {@link CategoryFacet.options.pageSize}.\n *\n * See the [`enableMoreLess`]{@link CategoryFacet.options.enableMoreLess}, and\n * [`numberOfValues`]{@link CategoryFacet.options.numberOfValues} options.\n */\n CategoryFacet.prototype.showMore = function () {\n if (this.moreValuesToFetch) {\n this.currentPage++;\n this.numberOfValues = this.options.numberOfValues + this.currentPage * this.options.pageSize;\n this.reload();\n this.logAnalyticsFacetShowMoreLess(AnalyticsActionListMeta_1.analyticsActionCauseList.facetShowMore);\n }\n };\n /**\n * Shows less values, up to the original number of values.\n *\n * See the [`enableMoreLess`]{@link CategoryFacet.options.enableMoreLess}, and\n * [`numberOfValues`]{@link CategoryFacet.options.numberOfValues} options.\n */\n CategoryFacet.prototype.showLess = function () {\n if (this.currentPage > 0) {\n this.currentPage--;\n this.numberOfValues = this.options.numberOfValues + this.currentPage * this.options.pageSize;\n this.reload();\n this.logAnalyticsFacetShowMoreLess(AnalyticsActionListMeta_1.analyticsActionCauseList.facetShowLess);\n }\n };\n /**\n * Returns the values at the bottom of the hierarchy. These are the values that are not yet applied to the query.\n * @returns simple object with three fields: `value`, `count` and `path`.\n */\n CategoryFacet.prototype.getAvailableValues = function () {\n if (!this.activeCategoryValue) {\n return [];\n }\n return this.activeCategoryValue.children.map(function (categoryValue) {\n return {\n value: categoryValue.categoryValueDescriptor.value,\n count: categoryValue.categoryValueDescriptor.count,\n path: categoryValue.path\n };\n });\n };\n /**\n * Selects a value from the currently available values.\n * If the given value to select is not in the available values, it will throw an error.\n */\n CategoryFacet.prototype.selectValue = function (value) {\n Assert_1.Assert.check(underscore_1.contains(underscore_1.pluck(this.getAvailableValues(), 'value'), value), 'Failed while trying to select a value that is not available.');\n var newPath = this.activePath.slice(0);\n newPath.push(value);\n this.changeActivePath(newPath);\n this.logAnalyticsEvent(AnalyticsActionListMeta_1.analyticsActionCauseList.categoryFacetSelect);\n this.executeQuery();\n };\n /**\n * Deselects the last value in the hierarchy that is applied to the query. When at the top of the hierarchy, this method does nothing.\n */\n CategoryFacet.prototype.deselectCurrentValue = function () {\n if (this.activePath.length == 0) {\n return;\n }\n var newPath = this.activePath.slice(0);\n newPath.pop();\n this.changeActivePath(newPath);\n this.logAnalyticsEvent(AnalyticsActionListMeta_1.analyticsActionCauseList.categoryFacetSelect);\n this.executeQuery();\n };\n CategoryFacet.prototype.resetPath = function () {\n this.changeActivePath(this.options.basePath);\n };\n /**\n * Resets the facet to its initial state.\n */\n CategoryFacet.prototype.reset = function () {\n this.resetPath();\n this.logAnalyticsEvent(AnalyticsActionListMeta_1.analyticsActionCauseList.categoryFacetClear);\n this.executeQuery();\n };\n /**\n * Hides the component.\n */\n CategoryFacet.prototype.hide = function () {\n Dom_1.$$(this.element).addClass('coveo-hidden');\n };\n /**\n * Shows the component.\n */\n CategoryFacet.prototype.show = function () {\n Dom_1.$$(this.element).removeClass('coveo-hidden');\n };\n CategoryFacet.prototype.enable = function () {\n _super.prototype.enable.call(this);\n this.updateAppearance();\n };\n CategoryFacet.prototype.disable = function () {\n _super.prototype.disable.call(this);\n this.updateAppearance();\n };\n /**\n * Goes through any value that contains the value parameter, and verifies whether there are missing parents.\n * Issues are then logged in the console.\n * If you do not want to specify a value, you can simply enable {@link CategoryFacet.options.debug} and do an empty query.\n */\n CategoryFacet.prototype.debugValue = function (value) {\n return __awaiter(this, void 0, void 0, function () {\n var queryBuilder, queryResults;\n return __generator(this, function (_a) {\n switch (_a.label) {\n case 0:\n queryBuilder = new QueryBuilder_1.QueryBuilder();\n this.categoryFacetQueryController.addDebugGroupBy(queryBuilder, value);\n return [4 /*yield*/, this.queryController.getEndpoint().search(queryBuilder.build())];\n case 1:\n queryResults = _a.sent();\n CategoryFacetDebug_1.CategoryFacetDebug.analyzeResults(queryResults.groupByResults[0], this.options.delimitingCharacter);\n return [2 /*return*/];\n }\n });\n });\n };\n /**\n *\n * @param value The string to find a caption for.\n * Returns the caption for a value or the value itself if no caption is available.\n */\n CategoryFacet.prototype.getCaption = function (value) {\n var valueCaptions = this.options.valueCaption;\n var caption = valueCaptions[value];\n return caption ? caption : value;\n };\n CategoryFacet.prototype.showWaitingAnimation = function () {\n this.ensureDom();\n if (!this.showingWaitAnimation) {\n Dom_1.$$(this.headerElement).find('.coveo-category-facet-header-wait-animation').style.visibility = 'visible';\n this.showingWaitAnimation = true;\n }\n };\n CategoryFacet.prototype.hideWaitingAnimation = function () {\n this.ensureDom();\n if (this.showingWaitAnimation) {\n Dom_1.$$(this.headerElement).find('.coveo-category-facet-header-wait-animation').style.visibility = 'hidden';\n this.showingWaitAnimation = false;\n }\n };\n CategoryFacet.prototype.logAnalyticsEvent = function (eventName, path) {\n if (path === void 0) { path = this.activePath; }\n this.usageAnalytics.logSearchEvent(eventName, {\n categoryFacetId: this.options.id,\n categoryFacetField: this.options.field.toString(),\n categoryFacetPath: path,\n categoryFacetTitle: this.options.title\n });\n };\n CategoryFacet.prototype.getEndpoint = function () {\n return this.queryController.getEndpoint();\n };\n Object.defineProperty(CategoryFacet.prototype, \"children\", {\n get: function () {\n return this.categoryValueRoot.children;\n },\n enumerable: true,\n configurable: true\n });\n CategoryFacet.prototype.renderValues = function (categoryFacetResult, numberOfRequestedValues) {\n this.categoryFacetValuesTree.storeNewValues(categoryFacetResult);\n var sortedParentValues = this.sortParentValues(categoryFacetResult.parentValues);\n var currentParentValue = this.categoryValueRoot;\n var needToTruncate = false;\n var pathOfLastTruncatedParentValue;\n var numberOfItemsInFirstSlice = Math.floor(CategoryFacet.NUMBER_OF_VALUES_TO_KEEP_AFTER_TRUNCATING / 2);\n var numberOfItemsInSecondSlice = Math.ceil(CategoryFacet.NUMBER_OF_VALUES_TO_KEEP_AFTER_TRUNCATING / 2);\n sortedParentValues = this.hideBasePathInParentValues(sortedParentValues);\n if (this.shouldTruncate(sortedParentValues)) {\n pathOfLastTruncatedParentValue = this.findPathOfLastTruncatedParentValue(sortedParentValues, numberOfItemsInSecondSlice);\n needToTruncate = true;\n sortedParentValues = underscore_1.first(sortedParentValues, numberOfItemsInFirstSlice).concat(underscore_1.last(sortedParentValues, numberOfItemsInSecondSlice));\n }\n if (!this.isPristine()) {\n this.addAllCategoriesButton();\n }\n for (var i = 0; i < sortedParentValues.length; i++) {\n currentParentValue = currentParentValue.renderAsParent(sortedParentValues[i]);\n // We do not want to make the \"last\" parent selectable, as clicking it would be a noop (re-selecting the same filter)\n var isLastParent = i == sortedParentValues.length - 1;\n if (!isLastParent) {\n currentParentValue.makeSelectable().showCollapseArrow();\n }\n if (needToTruncate) {\n if (i == numberOfItemsInFirstSlice - 1) {\n this.addEllipsis();\n }\n if (i == numberOfItemsInFirstSlice) {\n currentParentValue.path = pathOfLastTruncatedParentValue.concat([sortedParentValues[i].value]);\n }\n }\n }\n var childrenValuesToRender = this.moreValuesToFetch\n ? categoryFacetResult.values.slice(0, numberOfRequestedValues - 1)\n : categoryFacetResult.values.slice(0, numberOfRequestedValues);\n this.numberOfChildValuesCurrentlyDisplayed = childrenValuesToRender.length;\n currentParentValue.renderChildren(childrenValuesToRender);\n this.activeCategoryValue = currentParentValue;\n };\n CategoryFacet.prototype.hideBasePathInParentValues = function (parentValues) {\n if (Utils_1.Utils.arrayEqual(underscore_1.first(this.activePath, this.options.basePath.length), this.options.basePath)) {\n parentValues = underscore_1.last(parentValues, parentValues.length - this.options.basePath.length);\n }\n return parentValues;\n };\n CategoryFacet.prototype.shouldTruncate = function (parentValues) {\n return parentValues.length > CategoryFacet.MAXIMUM_NUMBER_OF_VALUES_BEFORE_TRUNCATING;\n };\n CategoryFacet.prototype.addEllipsis = function () {\n this.categoryValueRoot.listRoot.append(this.categoryFacetTemplates.buildEllipsis().el);\n };\n CategoryFacet.prototype.findPathOfLastTruncatedParentValue = function (sortedParentValues, numberOfItemsInSecondSlice) {\n var indexOfLastTruncatedParentValue = sortedParentValues.length - numberOfItemsInSecondSlice - 1;\n return underscore_1.reduce(underscore_1.first(sortedParentValues, indexOfLastTruncatedParentValue + 1), function (path, parentValue) { return path.concat([parentValue.value]); }, []);\n };\n CategoryFacet.prototype.addAllCategoriesButton = function () {\n var _this = this;\n var allCategories = this.categoryFacetTemplates.buildAllCategoriesButton();\n new AccessibleButton_1.AccessibleButton()\n .withLabel(Strings_1.l('AllCategories'))\n .withElement(allCategories)\n .withSelectAction(function () {\n _this.reset();\n _this.scrollToTop();\n })\n .build();\n this.categoryValueRoot.listRoot.append(allCategories.el);\n };\n CategoryFacet.prototype.isPristine = function () {\n return Utils_1.Utils.arrayEqual(this.activePath, this.options.basePath);\n };\n CategoryFacet.prototype.buildFacetHeader = function () {\n var facetHeader = new CategoryFacetHeader_1.CategoryFacetHeader({ categoryFacet: this, title: this.options.title });\n this.headerElement = facetHeader.build();\n Dom_1.$$(this.element).prepend(this.headerElement);\n };\n CategoryFacet.prototype.handleQueryStateChanged = function (data) {\n if (this.listenToQueryStateChange) {\n var path = data.attributes[this.queryStateAttribute];\n if (!Utils_1.Utils.isNullOrUndefined(path) && underscore_1.isArray(path) && path.length != 0) {\n this.activePath = path;\n }\n }\n };\n CategoryFacet.prototype.initQueryStateEvents = function () {\n var _this = this;\n this.queryStateModel.registerNewAttribute(this.queryStateAttribute, this.options.basePath);\n this.bind.onQueryState(Model_1.MODEL_EVENTS.CHANGE, undefined, function (data) { return _this.handleQueryStateChanged(data); });\n };\n CategoryFacet.prototype.initDependsOnManager = function () {\n var _this = this;\n var facetInfo = {\n reset: function () { return _this.dependsOnReset(); },\n ref: this\n };\n this.dependsOnManager = new DependsOnManager_1.DependsOnManager(facetInfo);\n };\n CategoryFacet.prototype.dependsOnReset = function () {\n this.changeActivePath(this.options.basePath);\n this.clear();\n };\n CategoryFacet.prototype.addFading = function () {\n Dom_1.$$(this.element).addClass('coveo-category-facet-values-fade');\n };\n CategoryFacet.prototype.handleDeferredQuerySuccess = function () {\n this.updateAppearance();\n this.removeFading();\n };\n CategoryFacet.prototype.removeFading = function () {\n Dom_1.$$(this.element).removeClass('coveo-category-facet-values-fade');\n };\n CategoryFacet.prototype.notImplementedError = function () {\n var errorMessage = 'Category Facets are not supported by your current search endpoint. Disabling this component.';\n this.logger.error(errorMessage);\n this.disable();\n };\n CategoryFacet.prototype.sortParentValues = function (parentValues) {\n if (this.activePath.length != parentValues.length) {\n this.logger.warn('Inconsistent CategoryFacet results: Number of parent values results does not equal length of active path');\n return parentValues;\n }\n var sortedParentvalues = [];\n var _loop_1 = function (pathElement) {\n var currentParentValue = underscore_1.find(parentValues, function (parentValue) { return parentValue.value.toLowerCase() == pathElement.toLowerCase(); });\n if (!currentParentValue) {\n this_1.logger.warn('Inconsistent CategoryFacet results: path not consistent with parent values results');\n return { value: parentValues };\n }\n sortedParentvalues.push(currentParentValue);\n };\n var this_1 = this;\n for (var _i = 0, _a = this.activePath; _i < _a.length; _i++) {\n var pathElement = _a[_i];\n var state_1 = _loop_1(pathElement);\n if (typeof state_1 === \"object\")\n return state_1.value;\n }\n return sortedParentvalues;\n };\n CategoryFacet.prototype.renderMoreLess = function () {\n if (this.numberOfChildValuesCurrentlyDisplayed > this.options.numberOfValues) {\n this.moreLessContainer.append(this.buildLessButton());\n }\n if (this.moreValuesToFetch) {\n this.moreLessContainer.append(this.buildMoreButton());\n }\n };\n CategoryFacet.prototype.clear = function () {\n this.categoryValueRoot.clear();\n if (this.isFacetSearchAvailable) {\n this.categoryFacetSearch.clear();\n }\n this.moreLessContainer && this.moreLessContainer.detach();\n Dom_1.$$(this.element).removeClass('coveo-category-facet-non-empty-path');\n };\n CategoryFacet.prototype.buildMoreButton = function () {\n var _this = this;\n var svgContainer = Dom_1.$$('span', { className: 'coveo-facet-more-icon' }, SVGIcons_1.SVGIcons.icons.arrowDown).el;\n SVGDom_1.SVGDom.addClassToSVGInContainer(svgContainer, 'coveo-facet-more-icon-svg');\n var more = Dom_1.$$('div', { className: 'coveo-category-facet-more' }, svgContainer);\n new AccessibleButton_1.AccessibleButton()\n .withElement(more)\n .withSelectAction(function () { return _this.showMore(); })\n .withLabel(Strings_1.l('ShowMoreFacetResults', this.options.title))\n .build();\n return more.el;\n };\n CategoryFacet.prototype.buildLessButton = function () {\n var _this = this;\n var svgContainer = Dom_1.$$('span', { className: 'coveo-facet-less-icon' }, SVGIcons_1.SVGIcons.icons.arrowUp).el;\n SVGDom_1.SVGDom.addClassToSVGInContainer(svgContainer, 'coveo-facet-less-icon-svg');\n var less = Dom_1.$$('div', { className: 'coveo-category-facet-less' }, svgContainer);\n new AccessibleButton_1.AccessibleButton()\n .withElement(less)\n .withSelectAction(function () { return _this.showLess(); })\n .withLabel(Strings_1.l('ShowLessFacetResults', this.options.title))\n .build();\n return less.el;\n };\n CategoryFacet.prototype.handlePopulateBreadCrumb = function (args) {\n var _this = this;\n if (this.isPristine()) {\n return;\n }\n var lastParentValue = this.categoryFacetValuesTree.getValueForLastPartInPath(this.activePath);\n var descriptor = {\n path: this.activePath,\n count: lastParentValue.numberOfResults,\n value: lastParentValue.value\n };\n var resetFacet = function () {\n _this.logAnalyticsEvent(AnalyticsActionListMeta_1.analyticsActionCauseList.breadcrumbFacet);\n _this.reset();\n };\n var categoryFacetBreadcrumbBuilder = new CategoryFacetBreadcrumb_1.CategoryFacetBreadcrumb(this, resetFacet, descriptor, { headingLevel: args.headingLevel });\n args.breadcrumbs.push({ element: categoryFacetBreadcrumbBuilder.build() });\n };\n CategoryFacet.prototype.handleClearBreadcrumb = function () {\n this.changeActivePath(this.options.basePath);\n };\n CategoryFacet.prototype.logAnalyticsFacetShowMoreLess = function (cause) {\n this.usageAnalytics.logCustomEvent(cause, {\n facetId: this.options.id,\n facetField: this.options.field.toString(),\n facetTitle: this.options.title\n }, this.element);\n };\n CategoryFacet.doExport = function () {\n GlobalExports_1.exportGlobally({\n CategoryFacet: CategoryFacet\n });\n };\n CategoryFacet.ID = 'CategoryFacet';\n /**\n * The options for the component\n * @componentOptions\n */\n CategoryFacet.options = __assign({ \n /**\n * The index field whose values the facet should use. The field values should have the form:\n * `the; the|path; the|path|to; the|path|to|given; the|path|to|given|item;`\n * where the delimiting character is `|`. This default delimiting character can be changed using the [delimitingCharacter]{@link CategoryFacet.options.delimitingCharacter} option.\n *\n * To help you verify whether your fields are setup correctly, see the {@link CategoryFacet.options.debug} option\n * and the {@link CategoryFacet.debugValue} method.\n *\n * See [Using the Category Facet Component](https://docs.coveo.com/en/2667).\n */\n field: ComponentOptions_1.ComponentOptions.buildFieldOption({ required: true }), \n /**\n * The title to display at the top of the facet.\n *\n * Default value is the localized string for `NoTitle`.\n */\n title: ComponentOptions_1.ComponentOptions.buildLocalizedStringOption({\n localizedString: function () { return Strings_1.l('NoTitle'); }\n }), \n /**\n * The maximum number of field values to display by default in the facet before the user\n * clicks the arrow to show more.\n *\n * See also the [`enableMoreLess`]{@link CategoryFacet.options.enableMoreLess} option.\n */\n numberOfValues: ComponentOptions_1.ComponentOptions.buildNumberOption({ defaultValue: 5, min: 0, section: 'CommonOptions' }), \n /**\n * Whether to display a search box at the bottom of the facet for searching among the available facet\n * [`field`]{@link CategoryFacet.options.field} values.\n *\n * See also the [`facetSearchDelay`]{@link CategoryFacet.options.facetSearchDelay}, and\n * [`numberOfResultsInFacetSearch`]{@link CategoryFacet.options.numberOfResultsInFacetSearch} options.\n *\n *\n * Default value is `true`.\n */\n enableFacetSearch: ComponentOptions_1.ComponentOptions.buildBooleanOption({ defaultValue: true }), \n /**\n * A unique identifier for the facet. Among other things, this identifier serves the purpose of saving\n * the facet state in the URL hash.\n *\n * If you have two facets with the same field on the same page, you should specify an `id` value for at least one of\n * those two facets. This `id` must be unique among the facets.\n *\n * Default value is the [`field`]{@link CategoryFacet.options.field} option value.\n */\n id: ComponentOptions_1.ComponentOptions.buildStringOption({\n postProcessing: function (value, options) { return value || options.field; }\n }), \n /**\n * The *injection depth* to use.\n *\n * The injection depth determines how many results to scan in the index to ensure that the category facet lists all potential\n * facet values. Increasing this value enhances the accuracy of the listed values at the cost of performance.\n *\n * Default value is `1000`. Minimum value is `1000`.\n * @notSupportedIn salesforcefree\n *\n * @examples 1500\n */\n injectionDepth: ComponentOptions_1.ComponentOptions.buildNumberOption({ defaultValue: 1000, min: 1000 }), \n /**\n * If the [`enableFacetSearch`]{@link CategoryFacet.options.enableFacetSearch} option is `true`, specifies the number of\n * values to display in the facet search results popup.\n *\n * Default value is `15`. Minimum value is `1`.\n */\n numberOfResultsInFacetSearch: ComponentOptions_1.ComponentOptions.buildNumberOption({ defaultValue: 15, min: 1 }), \n /**\n * If the [`enableFacetSearch`]{@link CategoryFacet.options.enableFacetSearch} option is `true`, specifies the delay (in\n * milliseconds) before sending a search request to the server when the user starts typing in the category facet search box.\n *\n * Specifying a smaller value makes results appear faster. However, chances of having to cancel many requests\n * sent to the server increase as the user keeps on typing new characters.\n *\n * Default value is `100`. Minimum value is `0`.\n */\n facetSearchDelay: ComponentOptions_1.ComponentOptions.buildNumberOption({ defaultValue: 100, min: 0 }), \n /**\n * Whether to enable the **More** and **Less** buttons in the Facet.\n *\n * See also the [`pageSize`]{@link CategoryFacet.options.pageSize} option.\n *\n * Default value is `true`.\n */\n enableMoreLess: ComponentOptions_1.ComponentOptions.buildBooleanOption({ defaultValue: true }), \n /**\n * If the [`enableMoreLess`]{@link CategoryFacet.options.enableMoreLess} option is `true`, specifies the number of\n * additional results to fetch when clicking the **More** button.\n *\n * Default value is `10`. Minimum value is `1`.\n */\n pageSize: ComponentOptions_1.ComponentOptions.buildNumberOption({ defaultValue: 10, min: 1, depend: 'enableMoreLess' }), \n /**\n * The character that specifies the hierarchical dependency.\n *\n * **Example:**\n *\n * If your field has the following values:\n *\n * `@field: c; c>folder2; c>folder2>folder3;`\n *\n * The delimiting character is `>`.\n *\n * Default value is `|`.\n */\n delimitingCharacter: ComponentOptions_1.ComponentOptions.buildStringOption({ defaultValue: '|' }), \n /**\n * The path to use as the path prefix for every query.\n *\n * **Example:**\n *\n * You have the following files indexed on a file system:\n * ```\n * c:\\\n * folder1\\\n * text1.txt\n * folder2\\\n * folder3\\\n * text2.txt\n * ```\n * Setting the `basePath` to `c` would display `folder1` and `folder2` in the `CategoryFacet`, but omit `c`.\n *\n * This options accepts an array of values. To specify a \"deeper\" starting path in your tree, you need to use comma-separated values.\n *\n * For example, setting `data-base-path=\"c,folder1\"` on the component markup would display `folder3` in the `CategoryFacet`, but omit `c` and `folder1`.\n *\n */\n basePath: ComponentOptions_1.ComponentOptions.buildListOption({ defaultValue: [] }), \n /**\n * The maximum number of levels to traverse in the hierarchy.\n * This option does not count the length of the base path. The depth depends on what is shown in the interface.\n *\n * Default value is `Number.MAX_VALUE`.\n */\n maximumDepth: ComponentOptions_1.ComponentOptions.buildNumberOption({ min: 1, defaultValue: Number.MAX_VALUE }), \n /**\n * Whether to activate field format debugging.\n * This options logs messages in the console for any potential encountered issues.\n * This option can have negative effects on performance, and should only be activated when debugging.\n */\n debug: ComponentOptions_1.ComponentOptions.buildBooleanOption({ defaultValue: false }), \n /**\n * Specifies a JSON object describing a mapping of facet values to their desired captions. See\n * [Normalizing Facet Value Captions](https://developers.coveo.com/x/jBsvAg).\n *\n * **Note:**\n * If this option is specified, the facet search box will be unavailable.\n *\n * **Examples:**\n *\n * You can set the option in the ['init']{@link init} call:\n * ```javascript\n * var myValueCaptions = {\n * \"txt\" : \"Text files\",\n * \"html\" : \"Web page\",\n * [ ... ]\n * };\n *\n * Coveo.init(document.querySelector(\"#search\"), {\n * Facet : {\n * valueCaption : myValueCaptions\n * }\n * });\n * ```\n *\n * Or before the `init` call, using the ['options']{@link options} top-level function:\n * ```javascript\n * Coveo.options(document.querySelector(\"#search\"), {\n * Facet : {\n * valueCaption : myValueCaptions\n * }\n * });\n * ```\n *\n * Or directly in the markup:\n * ```html\n * \n * \n * ```\n */\n valueCaption: ComponentOptions_1.ComponentOptions.buildJsonOption({ defaultValue: {} }), \n /**\n * The [id](@link Facet.options.id) of another facet in which at least one value must be selected in order\n * for the dependent category facet to be visible.\n *\n * **Default:** `undefined` and the category facet does not depend on any other facet to be displayed.\n *\n * @availablesince [September 2019 Release (v2.7023)](https://docs.coveo.com/en/2990/)\n */\n dependsOn: ComponentOptions_1.ComponentOptions.buildStringOption(), \n /**\n * A function that verifies whether the current state of the `dependsOn` facet allows the dependent facet to be displayed.\n *\n * If specified, the function receives a reference to the resolved `dependsOn` facet component instance as an argument, and must return a boolean.\n * The function's argument should typically be treated as read-only.\n *\n * By default, the dependent facet is displayed whenever one or more values are selected in its `dependsOn` facet.\n *\n * @externaldocs [Defining Dependent Facets](https://docs.coveo.com/3210/)\n */\n dependsOnCondition: ComponentOptions_1.ComponentOptions.buildCustomOption(function () {\n return null;\n }, { depend: 'dependsOn', section: 'CommonOptions' }), \n /**\n * Whether to display the facet search widget above the facet values instead of below them.\n *\n * @availablesince [July 2020 Release (v2.9373)](https://docs.coveo.com/3293/)\n */\n displaySearchOnTop: ComponentOptions_1.ComponentOptions.buildBooleanOption({ defaultValue: false }), \n /**\n * Whether to display the facet search widget as a button instead of a search bar.\n *\n * @availablesince [July 2020 Release (v2.9373)](https://docs.coveo.com/3293/)\n */\n displaySearchButton: ComponentOptions_1.ComponentOptions.buildBooleanOption({ defaultValue: true }) }, ResponsiveFacetOptions_1.ResponsiveFacetOptions);\n CategoryFacet.MAXIMUM_NUMBER_OF_VALUES_BEFORE_TRUNCATING = 15;\n CategoryFacet.NUMBER_OF_VALUES_TO_KEEP_AFTER_TRUNCATING = 10;\n CategoryFacet.WAIT_ELEMENT_CLASS = 'coveo-category-facet-header-wait-animation';\n return CategoryFacet;\n}(Component_1.Component));\nexports.CategoryFacet = CategoryFacet;\nInitialization_1.Initialization.registerAutoCreateComponent(CategoryFacet);\nCategoryFacet.doExport();\n\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// CategoryFacet.min__ff92a1d47dbcec2611e1.js","import { Component } from '../ui/Base/Component';\nimport { ResultList } from '../ui/ResultList/ResultList';\nimport { $$ } from './Dom';\nimport { find } from 'underscore';\nimport { Logger } from '../misc/Logger';\n\nexport class ResultListUtils {\n public static hideIfInfiniteScrollEnabled(cmp: Component) {\n const infiniteScrollEnabled = ResultListUtils.isInfiniteScrollEnabled(cmp.searchInterface.element);\n\n if (infiniteScrollEnabled) {\n cmp.disable();\n $$(cmp.element).hide();\n ResultListUtils.warnIfComponentNotNeeded(cmp);\n } else {\n cmp.enable();\n $$(cmp.element).unhide();\n }\n }\n\n public static isInfiniteScrollEnabled(root: HTMLElement) {\n const resultList = ResultListUtils.getMainResultList(root);\n return resultList ? !!resultList.options.enableInfiniteScroll : false;\n }\n\n public static scrollToTop(root: HTMLElement) {\n const resultList = ResultListUtils.getMainResultList(root);\n if (!resultList) {\n new Logger(this).warn('No active ResultList, scrolling to the top of the Window');\n return window.scrollTo(0, 0);\n }\n\n const searchInterfacePosition = resultList.searchInterface.element.getBoundingClientRect().top;\n if (searchInterfacePosition > 0) {\n return;\n }\n\n window.scrollTo(0, window.pageYOffset + searchInterfacePosition);\n }\n\n private static getMainResultList(root: HTMLElement) {\n const resultLists = ResultListUtils.getResultLists(root);\n return find(resultLists, resultList => {\n const isRecInterface = resultList.searchInterface.element.classList.contains('CoveoRecommendation');\n return !resultList.disabled && !isRecInterface;\n });\n }\n\n private static getResultLists(root: HTMLElement) {\n return $$(root)\n .findAll(`.${ResultListUtils.cssClass()}`)\n .map(el => Component.get(el, ResultList));\n }\n\n private static cssClass() {\n return Component.computeCssClassName(ResultList);\n }\n\n private static warnIfComponentNotNeeded(cmp: Component) {\n const root = cmp.searchInterface.root;\n const allListsUseInfiniteScroll = ResultListUtils.allResultListsUseInfiniteScroll(root);\n\n allListsUseInfiniteScroll && ResultListUtils.notNeededComponentWarning(cmp);\n }\n\n private static allResultListsUseInfiniteScroll(root: HTMLElement) {\n const listsWithInfiniteScrollDisabled = ResultListUtils.getResultLists(root).filter(\n resultList => !resultList.options.enableInfiniteScroll\n );\n\n return listsWithInfiniteScrollDisabled.length === 0;\n }\n\n private static notNeededComponentWarning(cmp: Component) {\n const cmpCssClass = Component.computeCssClassNameForType(cmp.type);\n const message = `The ${cmpCssClass} component is not needed because all ${ResultListUtils.cssClass()} components have enableInfiniteScroll set to 'true'.\n For the best performance, remove the ${cmpCssClass} component from your search page.`;\n\n new Logger(cmp).warn(message);\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/utils/ResultListUtils.ts","import { Assert } from '../../misc/Assert';\nimport { Utils } from '../../utils/Utils';\nimport { IGroupByValue } from '../../rest/GroupByValue';\nimport { IIndexFieldValue } from '../../rest/FieldValue';\nimport * as Globalize from 'globalize';\nimport { isString, isObject } from 'underscore';\n\n/**\n * A class which holds information and operation available on a single facet value returned by a {@link IGroupByRequest}.
\n * This class is used extensively in the {@link Facet} component.\n */\nexport class FacetValue {\n value: string;\n lookupValue: string;\n occurrences: number;\n computedField: number;\n delta: number;\n score: number;\n selected: boolean = false;\n excluded: boolean = false;\n waitingForDelta: boolean = false;\n\n reset() {\n this.selected = false;\n this.excluded = false;\n }\n\n updateCountsFromNewValue(newValue: FacetValue) {\n Assert.exists(newValue);\n this.occurrences = newValue.occurrences;\n this.delta = newValue.delta;\n this.computedField = newValue.computedField;\n }\n\n clone(): FacetValue {\n this.computedField = undefined;\n this.delta = undefined;\n return this;\n }\n\n cloneWithZeroOccurrences(): FacetValue {\n this.occurrences = 0;\n return this.clone();\n }\n\n cloneWithDelta(count: number, delta: number): FacetValue {\n Assert.isLargerOrEqualsThan(0, count);\n var clone = this.cloneWithZeroOccurrences();\n clone.delta = delta;\n clone.occurrences = count;\n return clone;\n }\n\n getFormattedCount() {\n var count: string = undefined;\n if (Utils.exists(this.delta) && this.delta > 0) {\n count = '+' + Globalize.format(this.delta, 'n0');\n } else {\n if (this.occurrences > 0) {\n count = Globalize.format(this.occurrences, 'n0');\n }\n }\n return count;\n }\n\n getFormattedComputedField(format: string) {\n if (this.computedField != 0) {\n return Globalize.format(this.computedField, format);\n } else {\n return undefined;\n }\n }\n\n static create(value: any): FacetValue {\n if (isString(value)) {\n return FacetValue.createFromValue(value);\n } else if (isObject(value)) {\n if ('computedFieldResults' in value) {\n return FacetValue.createFromGroupByValue(value);\n } else {\n return FacetValue.createFromFieldValue(value);\n }\n } else {\n throw new Error(\"Can't create value from \" + value);\n }\n }\n\n static createFromValue(value: string): FacetValue {\n Assert.isNonEmptyString(value);\n\n var facetValue = new FacetValue();\n facetValue.value = value;\n facetValue.lookupValue = value;\n\n return facetValue;\n }\n\n static createFromGroupByValue(groupByValue: IGroupByValue): FacetValue {\n Assert.exists(groupByValue);\n\n Assert.exists(groupByValue);\n\n var facetValue = new FacetValue();\n facetValue.value = groupByValue.value;\n facetValue.lookupValue = Utils.exists(groupByValue.lookupValue) ? groupByValue.lookupValue : groupByValue.value;\n facetValue.occurrences = groupByValue.numberOfResults;\n facetValue.computedField = Utils.isNonEmptyArray(groupByValue.computedFieldResults) ? groupByValue.computedFieldResults[0] : undefined;\n facetValue.score = groupByValue.score;\n\n return facetValue;\n }\n\n static createFromFieldValue(fieldValue: IIndexFieldValue): FacetValue {\n Assert.exists(fieldValue);\n\n var facetValue = new FacetValue();\n facetValue.value = fieldValue.value;\n facetValue.lookupValue = fieldValue.lookupValue;\n facetValue.occurrences = fieldValue.numberOfResults;\n\n return facetValue;\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Facet/FacetValue.ts","import { Dom } from '../../utils/Dom';\nimport { ResponsiveDropdownContent } from './ResponsiveDropdown/ResponsiveDropdownContent';\n\nexport class ResponsiveComponentsUtils {\n private static smallTabsClassName: string = 'coveo-small-tabs';\n private static smallFacetClassName: string = 'coveo-small-facets';\n private static smallRecommendationClassName: string = 'coveo-small-recommendation';\n\n static shouldDrawFacetSlider(root: Dom, facetSliderElement: Dom): boolean {\n return ResponsiveDropdownContent.isTargetInsideOpenedDropdown(facetSliderElement) || !this.isSmallFacetActivated(root);\n }\n\n static isSmallTabsActivated(root: Dom): boolean {\n return root.hasClass(this.smallTabsClassName);\n }\n\n static isSmallFacetActivated(root: Dom): boolean {\n return root.hasClass(this.smallFacetClassName);\n }\n\n static isSmallRecommendationActivated(root: Dom): boolean {\n return root.hasClass(this.smallRecommendationClassName);\n }\n\n static activateSmallTabs(root: Dom): void {\n root.addClass(this.smallTabsClassName);\n }\n\n static deactivateSmallTabs(root: Dom): void {\n root.removeClass(this.smallTabsClassName);\n }\n\n static activateSmallFacet(root: Dom): void {\n root.addClass(this.smallFacetClassName);\n }\n\n static deactivateSmallFacet(root: Dom): void {\n root.removeClass(this.smallFacetClassName);\n }\n\n static activateSmallRecommendation(root: Dom): void {\n root.addClass(this.smallRecommendationClassName);\n }\n\n static deactivateSmallRecommendation(root: Dom): void {\n root.removeClass(this.smallRecommendationClassName);\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/ResponsiveComponents/ResponsiveComponentsUtils.ts","///this.facet.options.field,\n sortCriteria: this.facet.options.sortCriteria || this.sortCriteria,\n injectionDepth: this.facet.options.injectionDepth\n };\n\n if (this.facet.options.lookupField) {\n request.lookupField = this.facet.options.lookupField;\n }\n\n if (this.facet.options.computedField) {\n request.computedFields = [\n {\n field: this.facet.options.computedField,\n operation: this.facet.options.computedFieldOperation\n }\n ];\n }\n return request;\n }\n\n public getQuery(): IQuery {\n let lastQuery = _.clone(this.facet.queryController.getLastQuery());\n if (!lastQuery) {\n // There should normally always be a last query available\n // If not, just create an empty one.\n lastQuery = new QueryBuilder().build();\n }\n // We want to always force query syntax to true for a facet search,\n // but arrange for the basic expression to adapt itself with no syntax block\n if (lastQuery.enableQuerySyntax) {\n lastQuery.q = this.facet.facetQueryController.basicExpressionToUseForFacetSearch;\n } else if (Utils.isNonEmptyString(this.facet.facetQueryController.basicExpressionToUseForFacetSearch)) {\n lastQuery.q = `<@- ${this.facet.facetQueryController.basicExpressionToUseForFacetSearch} -@>`;\n } else {\n lastQuery.q = '';\n }\n\n lastQuery.enableQuerySyntax = true;\n lastQuery.cq = this.facet.facetQueryController.constantExpressionToUseForFacetSearch;\n lastQuery.aq = this.facet.facetQueryController.advancedExpressionToUseForFacetSearch;\n lastQuery.enableDidYouMean = false;\n lastQuery.firstResult = 0;\n lastQuery.numberOfResults = 0;\n lastQuery.fieldsToInclude = [];\n lastQuery.groupBy = [this.getGroupByRequest()];\n return lastQuery;\n }\n\n private getCurrentlyShowedValueInSearch(searchResults: HTMLElement) {\n return _.map($$(searchResults).findAll('.coveo-facet-value-caption'), val => {\n return $$(val).getAttribute('data-original-value') || $$(val).text();\n });\n }\n\n private lowerCaseAll() {\n this.alwaysExclude = _.chain(this.alwaysExclude)\n .map(v => {\n return v.toLowerCase();\n })\n .uniq()\n .value();\n\n this.alwaysInclude = _.chain(this.alwaysInclude)\n .map(v => {\n return v.toLowerCase();\n })\n .uniq()\n .value();\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Facet/FacetSearchParameters.ts","import { isFunction } from 'underscore';\nimport { QueryStateModel, QueryEvents, Component } from '../Core';\nimport { ComponentsTypes } from './ComponentsTypes';\nimport { $$ } from './Dom';\nimport { InitializationEvents } from '../events/InitializationEvents';\n\nexport interface IDependsOnCompatibleFacetOptions {\n id?: string;\n dependsOn?: string;\n dependsOnCondition?: IDependentFacetCondition;\n}\n\nexport interface IDependsOnCompatibleFacet extends Component {\n options: IDependsOnCompatibleFacetOptions;\n}\n\nexport interface IDependentFacet {\n reset: () => void;\n ref: IDependsOnCompatibleFacet;\n}\n\nexport interface IDependentFacetCondition {\n (facet: IDependsOnCompatibleFacet): boolean;\n}\n\nexport class DependsOnManager {\n private parentFacetRef: IDependsOnCompatibleFacet;\n\n constructor(private facet: IDependentFacet) {\n $$(this.facet.ref.searchInterface.element).on(QueryEvents.buildingQuery, () => this.handleBuildingQuery());\n\n if (this.getDependsOn(this.facet.ref)) {\n this.facet.ref.bind.onRootElement(InitializationEvents.afterComponentsInitialization, () => this.setupDependentFacet());\n }\n }\n\n private setupDependentFacet() {\n $$(this.facet.ref.element).addClass('coveo-hidden-dependant-facet');\n this.parentFacetRef = this.getParentFacet(this.facet.ref);\n\n if (this.parentFacetRef) {\n $$(this.facet.ref.root).on('state:change', () => this.resetIfConditionUnfullfiled());\n }\n }\n\n private resetIfConditionUnfullfiled() {\n const condition = this.getDependsOnCondition(this.facet.ref);\n\n if (!condition(this.parentFacetRef)) {\n this.facet.reset();\n }\n }\n\n private getId(component: IDependsOnCompatibleFacet) {\n const id = component.options.id;\n return id ? `${id}` : null;\n }\n\n private getDependsOn(component: IDependsOnCompatibleFacet) {\n const dependsOn = component.options.dependsOn;\n return dependsOn ? `${dependsOn}` : null;\n }\n\n private getDependsOnCondition(component: IDependsOnCompatibleFacet): IDependentFacetCondition {\n const conditionOption = component.options.dependsOnCondition;\n return conditionOption && isFunction(conditionOption)\n ? conditionOption\n : () => this.parentHasSelectedValues(component) && this.parentIsEnabled(component);\n }\n\n private parentHasSelectedValues(component: IDependsOnCompatibleFacet) {\n const parent = this.getParentFacet(component);\n return parent && this.valuesExistForFacetWithId(this.getId(parent));\n }\n\n private parentIsEnabled(component: IDependsOnCompatibleFacet) {\n const parent = this.getParentFacet(component);\n return parent && !parent.disabled;\n }\n\n private valuesExistForFacetWithId(facetId: string) {\n const values = this.facet.ref.queryStateModel.get(QueryStateModel.getFacetId(facetId));\n return !!values && !!values.length;\n }\n\n private get allFacetsInInterface() {\n return ComponentsTypes.getAllFacetsFromSearchInterface(this.facet.ref.searchInterface) as IDependsOnCompatibleFacet[];\n }\n\n private getParentFacet(component: IDependsOnCompatibleFacet) {\n const parent = this.allFacetsInInterface.filter(\n potentialParentFacet => this.getId(potentialParentFacet) === this.getDependsOn(component)\n );\n\n if (!parent.length) {\n component.logger.warn('DependsOn reference does not exist', this.getDependsOn(this.facet.ref));\n return null;\n }\n\n return parent[0];\n }\n\n private get dependentFacets() {\n return this.allFacetsInInterface.filter(\n potentialDependentFacet => this.getId(this.facet.ref) === this.getDependsOn(potentialDependentFacet)\n );\n }\n\n private handleBuildingQuery() {\n this.dependentFacets.forEach(dependentFacet => {\n const condition = this.getDependsOnCondition(dependentFacet);\n if (condition(this.facet.ref)) {\n $$(dependentFacet.element).removeClass('coveo-hidden-dependant-facet');\n return dependentFacet.enable();\n }\n\n dependentFacet.disable();\n $$(dependentFacet.element).addClass('coveo-hidden-dependant-facet');\n });\n }\n\n public get hasDependentFacets() {\n return !!this.dependentFacets.length;\n }\n\n public get dependentFacetsHaveSelectedValues() {\n return this.dependentFacets.some(dependentFacet => this.valuesExistForFacetWithId(this.getId(dependentFacet)));\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/utils/DependsOnManager.ts","import { ResponsiveFacetColumn } from './ResponsiveFacetColumn';\nimport { IResponsiveComponentOptions } from './ResponsiveComponentsManager';\nimport { Facet } from '../Facet/Facet';\n\nexport class ResponsiveFacets extends ResponsiveFacetColumn {\n public static init(root: HTMLElement, component, options: IResponsiveComponentOptions) {\n ResponsiveFacetColumn.init(ResponsiveFacets, root, component, options, Facet.ID);\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/ResponsiveComponents/ResponsiveFacets.ts","import { IQueryResult } from '../../rest/QueryResult';\nimport { Component } from '../Base/Component';\nimport { IResultListOptions } from './ResultListOptions';\nimport _ = require('underscore');\n\nexport class ResultListRenderer {\n constructor(protected resultListOptions: IResultListOptions, protected autoCreateComponentsFn: Function) {}\n\n renderResults(\n resultElements: HTMLElement[],\n append = false,\n resultDisplayedCallback: (result: IQueryResult, resultElem: HTMLElement) => any\n ) {\n return Promise.all([this.getStartFragment(resultElements, append), this.getEndFragment(resultElements, append)]).then(\n ([startFrag, endFrag]) => {\n const resultsFragment = document.createDocumentFragment();\n if (startFrag) {\n resultsFragment.appendChild(startFrag);\n }\n _.each(resultElements, resultElement => {\n resultsFragment.appendChild(resultElement);\n resultDisplayedCallback(Component.getResult(resultElement), resultElement);\n });\n if (endFrag) {\n resultsFragment.appendChild(endFrag);\n }\n this.resultListOptions.resultsContainer.appendChild(resultsFragment);\n }\n );\n }\n\n protected getStartFragment(resultElements: HTMLElement[], append: boolean): Promise {\n return Promise.resolve(document.createDocumentFragment());\n }\n\n protected getEndFragment(resultElements: HTMLElement[], append: boolean): Promise {\n return Promise.resolve(document.createDocumentFragment());\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/ResultList/ResultListRenderer.ts","import 'styling/_ResponsiveFacets';\nimport { IQuerySuccessEventArgs, QueryEvents } from '../../events/QueryEvents';\nimport { Logger } from '../../misc/Logger';\nimport { l } from '../../strings/Strings';\nimport { $$, Dom } from '../../utils/Dom';\nimport { Utils } from '../../utils/Utils';\nimport { Component } from '../Base/Component';\nimport { SearchInterface } from '../SearchInterface/SearchInterface';\nimport { ResponsiveComponents } from './ResponsiveComponents';\nimport { IResponsiveComponent, IResponsiveComponentOptions, ResponsiveComponentsManager } from './ResponsiveComponentsManager';\nimport { ResponsiveComponentsUtils } from './ResponsiveComponentsUtils';\nimport { ResponsiveDropdown } from './ResponsiveDropdown/ResponsiveDropdown';\nimport { ResponsiveDropdownContent, IResponsiveDropdownContent } from './ResponsiveDropdown/ResponsiveDropdownContent';\nimport { ResponsiveDropdownHeader } from './ResponsiveDropdown/ResponsiveDropdownHeader';\nimport { each, debounce } from 'underscore';\nimport { ComponentsTypes } from '../../utils/ComponentsTypes';\nimport { ResponsiveDropdownModalContent } from './ResponsiveDropdown/ResponsiveDropdownModalContent';\nimport { FacetsMobileMode, IFacetsMobileModeOptions } from '../FacetsMobileMode/FacetsMobileMode';\nimport { FacetsMobileModeEvents } from '../../events/FacetsMobileModeEvents';\n\nexport class ResponsiveFacetColumn implements IResponsiveComponent {\n public static DEBOUNCE_SCROLL_WAIT = 250;\n\n private static logger = new Logger('ResponsiveFacets');\n private static DROPDOWN_MIN_WIDTH: number = 280;\n private static DROPDOWN_WIDTH_RATIO: number = 0.35; // Used to set the width relative to the coveo root.\n private static DROPDOWN_HEADER_LABEL_DEFAULT_VALUE = 'Filters';\n\n private searchInterface: SearchInterface;\n private componentsInFacetColumn: any[] = [];\n private preservePositionOriginalValues: boolean[] = [];\n private breakpoint: number;\n protected dropdown: ResponsiveDropdown;\n private dropdownHeaderLabel: string;\n\n public static init(responsiveComponentConstructor, root: HTMLElement, component, options: IResponsiveComponentOptions, ID: string) {\n const column = this.findColumn(root);\n if (!column) {\n return;\n }\n\n ResponsiveComponentsManager.register(ResponsiveFacetColumn, $$(root), 'ResponsiveFacetColumn', component, options);\n ResponsiveComponentsManager.register(responsiveComponentConstructor, $$(root), ID, component, options);\n }\n\n private static findColumn(root: HTMLElement) {\n const column = $$(root).find('.coveo-facet-column');\n if (!column) {\n this.logger.info('No element with class coveo-facet-column. Responsive facets cannot be enabled');\n }\n return column;\n }\n\n constructor(public coveoRoot: Dom, public ID: string, options: IResponsiveComponentOptions, responsiveDropdown?: ResponsiveDropdown) {\n this.searchInterface = Component.get(this.coveoRoot.el, SearchInterface, false);\n this.dropdownHeaderLabel = this.getDropdownHeaderLabel();\n this.dropdown = this.buildDropdown(responsiveDropdown);\n this.bindDropdownContentEvents();\n this.bindFacetsMobileModeEvents();\n this.registerOnCloseHandler();\n this.registerQueryEvents();\n this.initializeBreakpoint(options.responsiveBreakpoint);\n }\n\n private get facetsMobileModeComponent() {\n return this.searchInterface ? this.searchInterface.getComponents(FacetsMobileMode.ID)[0] : null;\n }\n\n private get facetsMobileModeOptions(): IFacetsMobileModeOptions {\n const facetsMobileModeComponent = this.facetsMobileModeComponent;\n if (!facetsMobileModeComponent) {\n ResponsiveFacetColumn.logger.warn('The \"FacetsMobileMode\" component did not load properly, disabling the ResponsiveFacets modal.');\n return {\n isModal: false,\n preventScrolling: false,\n displayOverlayWhileOpen: true\n };\n }\n\n return facetsMobileModeComponent.options;\n }\n\n public registerComponent(accept: Component) {\n this.componentsInFacetColumn.push(accept);\n this.preservePositionOriginalValues.push(accept.options.preservePosition);\n return true;\n }\n\n public needDropdownWrapper() {\n return this.needSmallMode();\n }\n\n public handleResizeEvent() {\n if (this.needSmallMode() && !ResponsiveComponentsUtils.isSmallFacetActivated(this.coveoRoot)) {\n this.changeToSmallMode();\n } else if (!this.needSmallMode() && ResponsiveComponentsUtils.isSmallFacetActivated(this.coveoRoot)) {\n this.changeToLargeMode();\n }\n if (this.dropdown.isOpened) {\n this.dropdown.dropdownContent.positionDropdown();\n }\n }\n\n public dismissFacetSearches() {\n each(this.componentsInFacetColumn, component => {\n if (component.facetSearch && component.facetSearch.currentlyDisplayedResults) {\n component.facetSearch.dismissSearchResults();\n }\n });\n }\n\n private needSmallMode(): boolean {\n if (!this.searchInterface) {\n return (\n this.coveoRoot.width() <=\n (Utils.isNullOrUndefined(this.breakpoint) ? new ResponsiveComponents().getMediumScreenWidth() : this.breakpoint)\n );\n }\n switch (this.searchInterface.responsiveComponents.getResponsiveMode()) {\n case 'small':\n case 'medium':\n return true;\n case 'auto':\n return (\n this.coveoRoot.width() <=\n (Utils.isNullOrUndefined(this.breakpoint) ? this.searchInterface.responsiveComponents.getMediumScreenWidth() : this.breakpoint)\n );\n default:\n return false;\n }\n }\n\n private changeToSmallMode() {\n this.dropdown.close();\n this.disableFacetPreservePosition();\n $$(this.coveoRoot.find(`.${ResponsiveComponentsManager.DROPDOWN_HEADER_WRAPPER_CSS_CLASS}`)).append(\n this.dropdown.dropdownHeader.element.el\n );\n ResponsiveComponentsUtils.activateSmallFacet(this.coveoRoot);\n }\n\n private changeToLargeMode() {\n this.restoreFacetPreservePositionValue();\n this.dropdown.cleanUp();\n ResponsiveComponentsUtils.deactivateSmallFacet(this.coveoRoot);\n }\n\n private buildDropdown(responsiveDropdown?: ResponsiveDropdown) {\n let dropdownContent = this.buildDropdownContent();\n let dropdownHeader = this.buildDropdownHeader();\n let dropdown = responsiveDropdown ? responsiveDropdown : new ResponsiveDropdown(dropdownContent, dropdownHeader, this.coveoRoot);\n if (!this.facetsMobileModeOptions.displayOverlayWhileOpen) {\n dropdown.disablePopupBackground();\n }\n if (this.facetsMobileModeOptions.preventScrolling) {\n dropdown.enableScrollLocking(this.facetsMobileModeOptions.scrollContainer);\n }\n return dropdown;\n }\n\n private buildDropdownContent(): IResponsiveDropdownContent {\n let dropdownContentElement = $$(this.coveoRoot.find('.coveo-facet-column'));\n let filterByContainer = $$('div', { className: 'coveo-facet-header-filter-by-container', style: 'display: none' });\n let filterBy = $$('div', { className: 'coveo-facet-header-filter-by' });\n filterBy.text(l('Filter by:'));\n filterByContainer.append(filterBy.el);\n dropdownContentElement.prepend(filterByContainer.el);\n if (this.facetsMobileModeOptions.isModal) {\n return new ResponsiveDropdownModalContent('facet', dropdownContentElement, l('CloseFiltersDropdown'), () => this.dropdown.close());\n }\n return new ResponsiveDropdownContent(\n 'facet',\n dropdownContentElement,\n this.coveoRoot,\n ResponsiveFacetColumn.DROPDOWN_MIN_WIDTH,\n ResponsiveFacetColumn.DROPDOWN_WIDTH_RATIO\n );\n }\n\n private buildDropdownHeader() {\n let dropdownHeaderElement = $$('a');\n let content = $$('p');\n content.text(this.dropdownHeaderLabel);\n dropdownHeaderElement.el.appendChild(content.el);\n let dropdownHeader = new ResponsiveDropdownHeader('facet', dropdownHeaderElement);\n return dropdownHeader;\n }\n\n private initializeBreakpoint(defaultBreakpoint: number) {\n const facetsMobileModeBreakpoint = this.facetsMobileModeOptions.breakpoint;\n this.breakpoint = Utils.isNullOrUndefined(facetsMobileModeBreakpoint) ? defaultBreakpoint : facetsMobileModeBreakpoint;\n }\n\n private registerOnCloseHandler() {\n this.dropdown.registerOnCloseHandler(this.dismissFacetSearches, this);\n }\n\n private registerQueryEvents() {\n this.coveoRoot.on(QueryEvents.noResults, () => this.handleNoResults());\n this.coveoRoot.on(QueryEvents.querySuccess, (e: Event, data: IQuerySuccessEventArgs) => this.handleQuerySuccess(data));\n this.coveoRoot.on(QueryEvents.queryError, () => this.handleQueryError());\n }\n\n private bindDropdownContentEvents() {\n this.dropdown.dropdownContent.element.on(\n 'scroll',\n debounce(() => {\n each(this.componentsInFacetColumn, component => {\n let facetSearch = component.facetSearch;\n if (facetSearch && facetSearch.currentlyDisplayedResults && !this.isFacetSearchScrolledIntoView(facetSearch.search)) {\n component.facetSearch.positionSearchResults(this.dropdown.dropdownContent.element.el);\n } else if (facetSearch && component.facetSearch.currentlyDisplayedResults) {\n component.facetSearch.positionSearchResults();\n }\n });\n }, ResponsiveFacetColumn.DEBOUNCE_SCROLL_WAIT)\n );\n }\n\n private bindFacetsMobileModeEvents() {\n const facetsMobileModeComponent = this.facetsMobileModeComponent;\n if (facetsMobileModeComponent) {\n this.dropdown.registerOnOpenHandler(\n () => $$(facetsMobileModeComponent.element).trigger(FacetsMobileModeEvents.popupOpened),\n facetsMobileModeComponent\n );\n this.dropdown.registerOnCloseHandler(\n () => $$(facetsMobileModeComponent.element).trigger(FacetsMobileModeEvents.popupClosed),\n facetsMobileModeComponent\n );\n }\n }\n\n private restoreFacetPreservePositionValue() {\n each(this.componentsInFacetColumn, (component, index) => {\n if (component.options) {\n component.options.preservePosition = this.preservePositionOriginalValues[index];\n }\n });\n }\n\n private disableFacetPreservePosition() {\n each(this.componentsInFacetColumn, component => {\n if (component.options) {\n component.options.preservePosition = false;\n }\n });\n }\n\n private isFacetSearchScrolledIntoView(facetSearchElement: HTMLElement) {\n let facetTop = facetSearchElement.getBoundingClientRect().top;\n let facetBottom = facetSearchElement.getBoundingClientRect().bottom;\n let dropdownTop = this.dropdown.dropdownContent.element.el.getBoundingClientRect().top;\n let dropdownBottom = this.dropdown.dropdownContent.element.el.getBoundingClientRect().bottom;\n\n dropdownTop = dropdownTop >= 0 ? dropdownTop : 0;\n\n return facetTop >= dropdownTop && facetBottom <= dropdownBottom;\n }\n\n private getDropdownHeaderLabel() {\n let dropdownHeaderLabel: string;\n ComponentsTypes.getAllFacetInstancesFromElement(this.coveoRoot.find('.coveo-facet-column')).forEach(facet => {\n const options = facet.options as IResponsiveComponentOptions;\n\n if (!dropdownHeaderLabel && options.dropdownHeaderLabel) {\n dropdownHeaderLabel = options.dropdownHeaderLabel;\n }\n });\n\n if (!dropdownHeaderLabel) {\n dropdownHeaderLabel = l(ResponsiveFacetColumn.DROPDOWN_HEADER_LABEL_DEFAULT_VALUE);\n }\n\n return dropdownHeaderLabel;\n }\n\n private handleNoResults() {\n this.dropdown.dropdownHeader.hide();\n }\n\n private handleQueryError() {\n this.dropdown.dropdownHeader.hide();\n }\n\n private handleQuerySuccess(data: IQuerySuccessEventArgs) {\n if (data.results.totalCount === 0) {\n this.dropdown.dropdownHeader.hide();\n } else {\n this.dropdown.dropdownHeader.show();\n }\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/ResponsiveComponents/ResponsiveFacetColumn.ts","/// ;\n\n constructor(public facet: Facet) {}\n\n /**\n * Reset the expression for the facet search, used when a new query is triggered\n */\n public prepareForNewQuery() {\n this.lastGroupByRequestIndex = undefined;\n this.expressionToUseForFacetSearch = undefined;\n this.constantExpressionToUseForFacetSearch = undefined;\n }\n\n /**\n * Compute the filter expression that the facet needs to output for the query\n * @returns {string}\n */\n public computeOurFilterExpression(): string {\n const builder = new ExpressionBuilder();\n const selected = this.facet.values.getSelected();\n if (selected.length > 0) {\n if (this.facet.options.useAnd) {\n _.each(selected, (value: FacetValue) => {\n builder.addFieldExpression(this.facet.options.field, '==', [value.value], true);\n });\n } else {\n builder.addFieldExpression(\n this.facet.options.field,\n '==',\n _.map(selected, (value: FacetValue) => value.value),\n true\n );\n }\n }\n const excluded = this.facet.values.getExcluded();\n if (excluded.length > 0) {\n builder.addFieldNotEqualExpression(\n this.facet.options.field,\n _.map(excluded, (value: FacetValue) => value.value),\n true\n );\n }\n if (Utils.isNonEmptyString(this.facet.options.additionalFilter)) {\n builder.add(this.facet.options.additionalFilter);\n }\n return builder.build();\n }\n\n /**\n * Build the group by request for the facet, and insert it in the query builder\n * @param queryBuilder\n */\n public putGroupByIntoQueryBuilder(queryBuilder: QueryBuilder) {\n Assert.exists(queryBuilder);\n\n const allowedValues = this.createGroupByAllowedValues();\n const groupByRequest = this.createBasicGroupByRequest(allowedValues);\n\n const queryOverrideObject = this.createGroupByQueryOverride(queryBuilder);\n if (!Utils.isNullOrUndefined(queryOverrideObject) || !QueryBuilderExpression.isEmpty(queryOverrideObject)) {\n groupByRequest.queryOverride = queryOverrideObject.basic;\n groupByRequest.advancedQueryOverride = queryOverrideObject.advanced;\n groupByRequest.constantQueryOverride = queryOverrideObject.constant;\n this.expressionToUseForFacetSearch = queryOverrideObject.withoutConstant;\n this.basicExpressionToUseForFacetSearch = queryOverrideObject.basic;\n this.advancedExpressionToUseForFacetSearch = queryOverrideObject.advanced;\n this.constantExpressionToUseForFacetSearch = queryOverrideObject.constant;\n } else {\n const parts = queryBuilder.computeCompleteExpressionParts();\n this.expressionToUseForFacetSearch = parts.withoutConstant == null ? '' : parts.withoutConstant;\n this.basicExpressionToUseForFacetSearch = parts.basic == null ? '' : parts.basic;\n this.advancedExpressionToUseForFacetSearch = parts.advanced;\n this.constantExpressionToUseForFacetSearch = parts.constant;\n }\n this.lastGroupByRequestIndex = queryBuilder.groupByRequests.length;\n this.lastGroupByRequest = groupByRequest;\n queryBuilder.groupByRequests.push(groupByRequest);\n }\n\n /**\n * Search inside the facet, using a group by request\n * @param params\n * @param oldLength Optional params, used by the search method to call itself recursively to fetch all required values\n * @returns {Promise|Promise}\n */\n public search(params: FacetSearchParameters, oldLength = params.nbResults): Promise {\n // For search, we want to retrieve the exact values we requested, and not additional ones\n params.completeFacetWithStandardValues = false;\n return new Promise((resolve, reject) => {\n const onResult = (fieldValues?: IIndexFieldValue[]) => {\n const newLength = fieldValues.length;\n fieldValues = this.checkForFacetSearchValuesToRemove(fieldValues, params.valueToSearch);\n if (FacetUtils.needAnotherFacetSearch(fieldValues.length, newLength, oldLength, 5)) {\n // This means that we removed enough values from the returned one that we need to perform a new search with more values requested.\n params.nbResults += 5;\n return this.search(params, fieldValues.length);\n } else {\n resolve(fieldValues);\n }\n };\n\n const searchPromise = this.facet.getEndpoint().search(params.getQuery());\n this.currentSearchPromise = searchPromise;\n\n searchPromise\n .then((queryResults: IQueryResults) => {\n if (this.currentSearchPromise == searchPromise) {\n // params.getQuery() will generate a query for all excluded values + some new values\n // there is no clean way to do a group by and remove some values\n // so instead we request more values than we need, and crop all the one we don't want\n const valuesCropped: IGroupByValue[] = [];\n if (queryResults.groupByResults && queryResults.groupByResults[0]) {\n _.each(queryResults.groupByResults[0].values, (v: IGroupByValue) => {\n if (v.lookupValue) {\n if (!_.contains(params.alwaysExclude, v.lookupValue.toLowerCase())) {\n valuesCropped.push(v);\n }\n } else {\n if (!_.contains(params.alwaysExclude, v.value.toLowerCase())) {\n valuesCropped.push(v);\n }\n }\n });\n }\n onResult(_.first(valuesCropped, params.nbResults));\n } else {\n reject();\n }\n })\n .catch((error: IEndpointError) => {\n reject(error);\n });\n });\n }\n\n public fetchMore(numberOfValuesToFetch: number): Promise {\n const params = new FacetSearchParameters(this.facet);\n params.alwaysInclude = this.facet.options.allowedValues || _.pluck(this.facet.values.getAll(), 'value');\n params.nbResults = numberOfValuesToFetch;\n return this.facet\n .getEndpoint()\n .search(params.getQuery())\n .then((results: IQueryResults) => {\n if (this.facet.options.allowedValues && results && results.groupByResults && results.groupByResults[0]) {\n results.groupByResults[0].values = this.filterByAllowedValueOption(results.groupByResults[0].values);\n }\n return results;\n });\n }\n\n public searchInFacetToUpdateDelta(facetValues: FacetValue[]): Promise {\n const params = new FacetSearchParameters(this.facet);\n const query = params.getQuery();\n query.aq = `${query.aq ? query.aq : ''} ${this.computeOurFilterExpression()}`;\n _.each(facetValues, (facetValue: FacetValue) => {\n facetValue.waitingForDelta = true;\n });\n query.groupBy = [this.createBasicGroupByRequest(_.map(facetValues, (facetValue: FacetValue) => facetValue.value))];\n query.groupBy[0].completeFacetWithStandardValues = false;\n return this.facet.getEndpoint().search(query);\n }\n\n protected createGroupByAllowedValues() {\n // if you want to keep displayed values next time, take all current values as allowed values\n // otherwise take only the selected value\n if (this.facet.options.allowedValues != undefined) {\n return this.facet.options.allowedValues;\n } else if (this.facet.options.customSort != undefined) {\n // If there is a custom sort, we still need to add selectedValues to the group by\n // Filter out duplicates with a lower case comparison on the value\n return this.getUnionWithCustomSortLowercase(this.facet.options.customSort, this.getAllowedValuesFromSelected());\n } else {\n return _.map(this.getAllowedValuesFromSelected(), (facetValue: FacetValue) => facetValue.value);\n }\n }\n\n protected createBasicGroupByRequest(allowedValues?: string[], addComputedField: boolean = true): IGroupByRequest {\n let nbOfRequestedValues = this.facet.numberOfValues;\n if (this.facet.options.customSort != null) {\n // If we have a custom sort, we need to make sure that we always request at least enough values to always receive them\n const usedValues = this.getUnionWithCustomSortLowercase(\n this.facet.options.customSort,\n this.facet.values.getSelected().concat(this.facet.values.getExcluded())\n );\n nbOfRequestedValues = Math.max(nbOfRequestedValues, usedValues.length);\n }\n const groupByRequest: IGroupByRequest = {\n field: this.facet.options.field,\n maximumNumberOfValues: nbOfRequestedValues + (this.facet.options.enableMoreLess ? 1 : 0),\n sortCriteria: this.facet.options.sortCriteria,\n injectionDepth: this.facet.options.injectionDepth,\n completeFacetWithStandardValues: this.facet.options.allowedValues == undefined ? true : false\n };\n if (this.facet.options.lookupField) {\n groupByRequest.lookupField = this.facet.options.lookupField;\n }\n if (allowedValues != null) {\n groupByRequest.allowedValues = allowedValues;\n }\n\n if (addComputedField && Utils.isNonEmptyString(this.facet.options.computedField)) {\n groupByRequest.computedFields = [\n {\n field: this.facet.options.computedField,\n operation: this.facet.options.computedFieldOperation\n }\n ];\n }\n return groupByRequest;\n }\n\n protected getAllowedValuesFromSelected() {\n let facetValues: FacetValue[] = [];\n if (this.facet.options.useAnd || !this.facet.keepDisplayedValuesNextTime) {\n const selected = this.facet.values.getSelected();\n if (selected.length == 0) {\n return undefined;\n }\n facetValues = this.facet.values.getSelected();\n } else {\n facetValues = this.facet.values.getAll();\n }\n return facetValues;\n }\n\n private get additionalFilter() {\n return this.facet.options.additionalFilter ? this.facet.options.additionalFilter : '';\n }\n\n private getUnionWithCustomSortLowercase(customSort: string[], facetValues: FacetValue[]) {\n // This will take the custom sort, compare it against the passed in facetValues\n // The comparison is lowercase.\n // The union of the 2 arrays with duplicated filtered out is returned.\n\n const toCompare = _.map(customSort, (val: string) => {\n return val.toLowerCase();\n });\n const filtered = _.chain(facetValues)\n .filter((facetValue: FacetValue) => {\n return !_.contains(toCompare, facetValue.value.toLowerCase());\n })\n .map((facetValue: FacetValue) => {\n return facetValue.value;\n })\n .value();\n return _.compact(customSort.concat(filtered));\n }\n\n private createGroupByQueryOverride(queryBuilder: QueryBuilder): QueryBuilderExpression {\n let queryBuilderExpression = queryBuilder.computeCompleteExpressionParts();\n\n if (this.queryOverrideIsNeededForMultiSelection()) {\n queryBuilderExpression = this.processQueryOverrideForMultiSelection(queryBuilder, queryBuilderExpression);\n } else {\n queryBuilderExpression.reset();\n }\n if (this.queryOverrideIsNeededForAdditionalFilter()) {\n queryBuilderExpression = this.processQueryOverrideForAdditionalFilter(queryBuilder, queryBuilderExpression);\n }\n\n queryBuilderExpression = this.processQueryOverrideForEmptyValues(queryBuilder, queryBuilderExpression);\n if (QueryBuilderExpression.isEmpty(queryBuilderExpression)) {\n return null;\n }\n return queryBuilderExpression;\n }\n\n private queryOverrideIsNeededForMultiSelection() {\n if (this.facet.options.useAnd) {\n return false;\n }\n if (this.facet.values.hasSelectedOrExcludedValues()) {\n return true;\n }\n return false;\n }\n\n private queryOverrideIsNeededForAdditionalFilter() {\n return Utils.isNonEmptyString(this.additionalFilter);\n }\n\n private processQueryOverrideForMultiSelection(queryBuilder: QueryBuilder, mergeWith: QueryBuilderExpression) {\n if (this.facet.values.hasSelectedOrExcludedValues()) {\n const ourExpression = this.computeOurFilterExpression();\n mergeWith = queryBuilder.computeCompleteExpressionPartsExcept(ourExpression);\n if (QueryBuilderExpression.isEmpty(mergeWith)) {\n mergeWith.advanced = '@uri';\n }\n }\n\n return mergeWith;\n }\n\n private processQueryOverrideForAdditionalFilter(queryBuilder: QueryBuilder, mergeWith: QueryBuilderExpression) {\n if (Utils.isEmptyString(mergeWith.basic)) {\n mergeWith.basic = queryBuilder.expression.build();\n }\n if (Utils.isEmptyString(mergeWith.constant)) {\n const addExistingConstantExpressionIfNotEmpty = queryBuilder.constantExpression.isEmpty()\n ? ''\n : queryBuilder.constantExpression.build() + ' ';\n mergeWith.constant = `${addExistingConstantExpressionIfNotEmpty}${this.additionalFilter}`;\n } else {\n mergeWith.constant = `${mergeWith.constant} ${this.additionalFilter}`;\n }\n\n if (!mergeWith.advanced) {\n mergeWith.advanced = this.getFilterExpressionWithoutOurFilterExpression(queryBuilder);\n }\n\n return mergeWith;\n }\n\n private getFilterExpressionWithoutOurFilterExpression(queryBuilder: QueryBuilder) {\n const expression = new ExpressionBuilder();\n const advancedExpressionParts = queryBuilder.advancedExpression.getParts();\n\n advancedExpressionParts.forEach(part => expression.add(part));\n\n const currentFacetAdvancedExpression = this.computeOurFilterExpression();\n expression.remove(currentFacetAdvancedExpression);\n\n return expression.build();\n }\n\n private processQueryOverrideForEmptyValues(queryBuilder: QueryBuilder, mergeWith: QueryBuilderExpression) {\n const withoutEmptyValues = _.chain(mergeWith)\n .keys()\n .each((key: string) => {\n if (Utils.isEmptyString(mergeWith[key]) || Utils.isNullOrUndefined(mergeWith[key])) {\n delete mergeWith[key];\n }\n })\n .value();\n\n if (_.keys(withoutEmptyValues).length == 0) {\n mergeWith = undefined;\n }\n\n return mergeWith;\n }\n\n private checkForFacetSearchValuesToRemove(fieldValues: IIndexFieldValue[], valueToCheckAgainst: string) {\n const regex = FacetUtils.getRegexToUseForFacetSearch(valueToCheckAgainst, this.facet.options.facetSearchIgnoreAccents);\n\n return _.filter(fieldValues, fieldValue => {\n const isAllowed = _.isEmpty(this.facet.options.allowedValues) || this.isValueAllowedByAllowedValueOption(fieldValue.value);\n const value = this.facet.getValueCaption(fieldValue);\n return isAllowed && regex.test(value);\n });\n }\n\n private filterByAllowedValueOption(values: IGroupByValue[]): IGroupByValue[] {\n return _.filter(values, (value: IGroupByValue) => this.isValueAllowedByAllowedValueOption(value.value));\n }\n\n private isValueAllowedByAllowedValueOption(value: string): boolean {\n return _.some(this.facet.options.allowedValues, allowedValue => {\n const regexContent = this.replaceWildcardsWithRegexEquivalent(this.escapeMostRegexCharacters(allowedValue));\n const regex = new RegExp(`^${regexContent}$`, 'gi');\n return regex.test(value);\n });\n }\n\n private escapeMostRegexCharacters(text: String) {\n // Regex taken from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions\n // `*` and `?` were removed because they are used for wildcards\n return text.replace(/[.+^${}()|[\\]\\\\]/g, '\\\\$&');\n }\n\n private replaceWildcardsWithRegexEquivalent(text: String) {\n // Allowed value option on the facet should support * (wildcard searches)\n // We need to filter values client side the index will completeWithStandardValues\n // Replace the wildcard (*) for a regex match (.*)\n // Also replace the (?) with \"any character once\" since it is also supported by the index\n return text.replace(/\\*/g, '.*').replace(/\\?/g, '.');\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/controllers/FacetQueryController.ts","/// ) {\n const returnValue = this.tryToGetTranslatedCaption(field, value, false);\n return valueCaption[value] || returnValue;\n }\n\n static getValuesToUseForSearchInFacet(original: string, facet: FacetModuleDefinition.Facet): string[] {\n let ret = [original];\n let regex = this.getRegexToUseForFacetSearch(original, facet.options.facetSearchIgnoreAccents);\n if (facet.options.valueCaption) {\n _.chain(facet.options.valueCaption)\n .pairs()\n .filter(pair => {\n return regex.test(pair[1]);\n })\n .each(match => {\n ret.push(match[0]);\n });\n if (\n QueryUtils.isStratusAgnosticField(facet.options.field, '@objecttype') ||\n QueryUtils.isStratusAgnosticField(facet.options.field, '@filetype')\n ) {\n _.each(FileTypes.getFileTypeCaptions(), (value: string, key: string) => {\n if (!(key in facet.options.valueCaption) && regex.test(value)) {\n ret.push(key);\n }\n });\n }\n } else if (\n QueryUtils.isStratusAgnosticField(facet.options.field, '@objecttype') ||\n QueryUtils.isStratusAgnosticField(facet.options.field, '@filetype')\n ) {\n _.each(\n _.filter(_.pairs(FileTypes.getFileTypeCaptions()), pair => {\n return regex.test(pair[1]);\n }),\n match => {\n ret.push(match[0]);\n }\n );\n } else if (QueryUtils.isStratusAgnosticField(facet.options.field, '@month')) {\n _.each(_.range(1, 13), month => {\n if (regex.test(DateUtils.monthToString(month - 1))) {\n ret.push(('0' + month.toString()).substr(-2));\n }\n });\n }\n return ret;\n }\n\n static buildFacetSearchPattern(values: string[]) {\n values = _.map(values, value => {\n return Utils.escapeRegexCharacter(value);\n });\n values[0] = '.*' + values[0] + '.*';\n return values.join('|');\n }\n\n static needAnotherFacetSearch(\n currentSearchLength: number,\n newSearchLength: number,\n oldSearchLength: number,\n desiredSearchLength: number\n ) {\n // Something was removed (currentSearch < newSearch)\n // && we might want to display more facet search result(currentSearch < desiredSearch)\n // && the new query returned more stuff than the old one so there's still more results(currentSearchLength > oldLength)\n return currentSearchLength < newSearchLength && currentSearchLength < desiredSearchLength && currentSearchLength > oldSearchLength;\n }\n\n static addNoStateCssClassToFacetValues(facet: FacetModuleDefinition.Facet, container: HTMLElement) {\n // This takes care of adding the correct css class on each facet value checkbox (empty white box) if at least one value is selected in that facet\n if (facet.values.getSelected().length != 0) {\n let noStates = $$(container).findAll('li:not(.coveo-selected)');\n _.each(noStates, noState => {\n $$(noState).addClass('coveo-no-state');\n });\n }\n }\n\n static tryToGetTranslatedCaption(field: string, value: string, fallbackOnLocalization = true) {\n let found: string;\n\n if (QueryUtils.isStratusAgnosticField(field.toLowerCase(), '@filetype')) {\n found = FileTypes.getFileType(value, fallbackOnLocalization).caption;\n } else if (QueryUtils.isStratusAgnosticField(field.toLowerCase(), '@objecttype')) {\n found = FileTypes.getObjectType(value, fallbackOnLocalization).caption;\n } else if (FacetUtils.isMonthFieldValue(field, value)) {\n const month = parseInt(value, 10);\n found = DateUtils.monthToString(month - 1);\n } else if (fallbackOnLocalization) {\n found = l(value);\n }\n return found != undefined && Utils.isNonEmptyString(found) ? found : value;\n }\n\n static isMonthFieldValue(field: string, value: string) {\n if (!QueryUtils.isStratusAgnosticField(field.toLowerCase(), '@month')) {\n return false;\n }\n\n const asInt = parseInt(value, 10);\n\n if (isNaN(asInt)) {\n return false;\n }\n\n if (asInt < 1 || asInt > 12) {\n return false;\n }\n\n return true;\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Facet/FacetUtils.ts","import { Template, TemplateRole } from './Template';\nimport { TemplateList } from './TemplateList';\nimport _ = require('underscore');\n\nexport class TableTemplate extends TemplateList {\n instantiateRoleToString(role: TemplateRole) {\n const roledTemplate = _.find(this.templates, t => t.role === role);\n if (roledTemplate) {\n return roledTemplate.instantiateToString(undefined, {});\n } else {\n return this.defaultRoledTemplates[role];\n }\n }\n instantiateRoleToElement(role: TemplateRole) {\n const roledTemplate = _.find(this.templates, t => t.role === role);\n if (roledTemplate) {\n return roledTemplate.instantiateToElement(undefined, {});\n } else {\n const tmpl = new Template(() => this.defaultRoledTemplates[role]);\n tmpl.layout = 'table';\n return tmpl.instantiateToElement(undefined);\n }\n }\n\n private defaultTemplate = `Link \n Excerpt \n Date `,\n 'table-footer': `Link \n Excerpt \n Date `\n };\n\n protected getFallbackTemplate(): Template {\n return new Template(() => this.defaultTemplate);\n }\n\n hasTemplateWithRole(role: TemplateRole) {\n return _.find(this.templates, t => t.role === role);\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Templates/TableTemplate.ts","import { Defer } from '../../misc/Defer';\nimport { without, chain } from 'underscore';\nimport { $$, Dom } from '../../utils/Dom';\n\nexport interface FocusTrapOptions {\n focusableSelector: string;\n}\n\nexport class FocusTrap {\n private focusInEvent: (e: FocusEvent) => void;\n private focusOutEvent: (e: FocusEvent) => void;\n private hiddenElements: HTMLElement[];\n private enabled: boolean;\n\n private get focusableElements(): HTMLElement[] {\n return chain(Dom.nodeListToArray(this.container.querySelectorAll(this.options.focusableSelector)))\n .filter(element => $$(element).isVisible())\n .sortBy(element => element.tabIndex)\n .value();\n }\n\n constructor(\n private container: HTMLElement,\n private options: FocusTrapOptions = {\n focusableSelector: '[tabindex], button'\n }\n ) {\n this.hiddenElements = [];\n this.enable();\n }\n\n public disable() {\n document.removeEventListener('focusin', this.focusInEvent);\n document.removeEventListener('focusout', this.focusOutEvent);\n this.showHiddenElements();\n this.enabled = false;\n }\n\n private enable() {\n document.addEventListener('focusin', (this.focusInEvent = e => this.onFocusIn(e)));\n document.addEventListener('focusout', (this.focusOutEvent = e => this.onFocusOut(e)));\n this.hideAllExcept(this.container);\n this.enabled = true;\n }\n\n private showHiddenElements() {\n while (this.hiddenElements.length) {\n this.hiddenElements.pop().removeAttribute('aria-hidden');\n }\n }\n\n private hideElement(element: HTMLElement) {\n if (element.getAttribute('aria-hidden')) {\n return;\n }\n this.hiddenElements.push(element);\n element.setAttribute('aria-hidden', `${true}`);\n }\n\n private hideSiblings(allowedElement: HTMLElement) {\n const parent = allowedElement.parentElement;\n if (parent) {\n without($$(parent).children(), allowedElement).forEach(elementToHide => {\n this.hideElement(elementToHide);\n });\n }\n }\n\n private hideAllExcept(allowedElement: HTMLElement) {\n this.hideSiblings(allowedElement);\n const parent = allowedElement.parentElement;\n if (parent && parent !== document.body) {\n this.hideAllExcept(parent);\n }\n }\n\n private getFocusableSibling(element: HTMLElement, previous = false) {\n const elements = this.focusableElements;\n const currentIndex = elements.indexOf(element);\n if (currentIndex === -1) {\n return null;\n }\n return elements[(currentIndex + (previous ? -1 : 1) + elements.length) % elements.length];\n }\n\n private focusSibling(element: HTMLElement, previous = false) {\n const sibling = this.getFocusableSibling(element, previous);\n if (sibling) {\n sibling.focus();\n }\n }\n\n private focusFirstElement() {\n const elements = this.focusableElements;\n if (elements.length) {\n elements[0].focus();\n }\n }\n\n private elementIsBefore(oldElement: HTMLElement, newElement: HTMLElement) {\n if (!newElement) {\n return false;\n }\n return oldElement.compareDocumentPosition(newElement) === Node.DOCUMENT_POSITION_PRECEDING;\n }\n\n private onLosingFocus(oldElement: HTMLElement, newElement: HTMLElement) {\n Defer.defer(() => {\n if (!this.enabled) {\n return;\n }\n this.enabled = false;\n if (oldElement && this.focusIsAllowed(oldElement)) {\n this.focusSibling(oldElement, this.elementIsBefore(oldElement, newElement));\n } else {\n this.focusFirstElement();\n }\n this.enabled = true;\n });\n }\n\n private focusIsAllowed(element: HTMLElement) {\n return this.container.contains(element);\n }\n\n private elementIsInPage(element: HTMLElement) {\n return element && element !== document.body.parentElement;\n }\n\n private onFocusIn(e: FocusEvent) {\n if (!this.enabled) {\n return;\n }\n const oldElement = e.relatedTarget as HTMLElement;\n const handledByFocusOut = this.elementIsInPage(oldElement);\n if (handledByFocusOut) {\n return;\n }\n const newElement = e.target as HTMLElement;\n if (!this.elementIsInPage(newElement)) {\n return;\n }\n if (!this.focusIsAllowed(newElement)) {\n this.onLosingFocus(null, newElement);\n }\n }\n\n private onFocusOut(e: FocusEvent) {\n if (!this.enabled) {\n return;\n }\n const newElement = e.relatedTarget as HTMLElement;\n if (!this.elementIsInPage(newElement)) {\n return;\n }\n if (!newElement || !this.focusIsAllowed(newElement)) {\n this.onLosingFocus(e.target as HTMLElement, newElement);\n }\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/FocusTrap/FocusTrap.ts","import { Template } from './Template';\nimport { IQueryResult } from '../../rest/QueryResult';\n\nexport class DefaultRecommendationTemplate extends Template {\n instantiateToString(object?: IQueryResult): string {\n var template = ` {\n return new Promise((resolve, reject) => {\n var div = document.createElement('div');\n div.innerHTML = this.instantiateToString(object);\n resolve(div);\n });\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Templates/DefaultRecommendationTemplate.ts","import { IQueryResults } from '../../rest/QueryResults';\nimport { IQueryResult } from '../../rest/QueryResult';\nimport { Assert, QueryUtils, Component, Initialization, QueryStateModel } from '../../Core';\nimport { IInitResult } from '../Base/Initialization';\nimport { Template } from './Template';\nimport { SearchInterface } from '../../ui/SearchInterface/SearchInterface';\nimport { ResultList } from '../ResultList/ResultList';\nimport { RendererValidLayout } from '../ResultLayoutSelector/ValidLayout';\nimport { pluck, sortBy, map } from 'underscore';\nimport { $$ } from '../../utils/Dom';\nimport { Logger } from '../../misc/Logger';\n\nexport interface ITemplateToHtml {\n resultTemplate: Template;\n queryStateModel: QueryStateModel;\n searchInterface: SearchInterface;\n}\n\nexport class TemplateToHtml {\n constructor(public args: ITemplateToHtml) {}\n\n public async buildResults(\n results: IQueryResults,\n layout: RendererValidLayout,\n currentlyDisplayedResults: IQueryResult[]\n ): Promise {\n const res: { elem: HTMLElement; idx: number }[] = [];\n const resultsPromises = map(results.results, (result: IQueryResult, index: number) => {\n return this.buildResult(result, layout, currentlyDisplayedResults).then((resultElement: HTMLElement) => {\n if (resultElement != null) {\n res.push({ elem: resultElement, idx: index });\n }\n ResultList.resultCurrentlyBeingRendered = null;\n return resultElement;\n });\n });\n\n // We need to sort by the original index order, because in lazy loading mode, it's possible that results does not gets rendered\n // in the correct order returned by the index, depending on the time it takes to load all the results component for a given result template\n return Promise.all(resultsPromises).then(() => {\n return pluck(sortBy(res, 'idx'), 'elem');\n });\n }\n\n public async buildResult(\n result: IQueryResult,\n layout: RendererValidLayout,\n currentlyDisplayedResults: IQueryResult[]\n ): Promise {\n Assert.exists(result);\n QueryUtils.setStateObjectOnQueryResult(this.args.queryStateModel.get(), result);\n QueryUtils.setSearchInterfaceObjectOnQueryResult(this.args.searchInterface, result);\n ResultList.resultCurrentlyBeingRendered = result;\n const resultElement = await this.createHtmlElement(result, layout);\n\n if (resultElement != null) {\n Component.bindResultToElement(resultElement, result);\n }\n currentlyDisplayedResults.push(result);\n\n await this.autoCreateComponentsInsideResult(resultElement, result).initResult;\n\n this.verifyChildren(resultElement);\n return resultElement;\n }\n\n public autoCreateComponentsInsideResult(element: HTMLElement, result: IQueryResult): IInitResult {\n Assert.exists(element);\n return Initialization.automaticallyCreateComponentsInsideResult(element, result);\n }\n\n private createHtmlElement(result: IQueryResult, layout: RendererValidLayout) {\n return this.args.resultTemplate.instantiateToElement(result, {\n wrapInDiv: true,\n checkCondition: true,\n currentLayout: layout,\n responsiveComponents: this.args.searchInterface.responsiveComponents\n });\n }\n\n private verifyChildren(element: HTMLElement) {\n const containsResultLink = !!$$(element).find('.CoveoResultLink');\n if (containsResultLink) {\n return;\n }\n\n const msg = `Result does not contain a \"CoveoResultLink\" component, please verify the result template`;\n new Logger(element).warn(msg, this.args.resultTemplate);\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Templates/TemplateToHtml.ts","import { TemplateHelpers, ITemplateHelperFunction } from './TemplateHelpers';\nimport { IHighlight, IHighlightPhrase, IHighlightTerm } from '../../rest/Highlight';\nimport { HighlightUtils, StringAndHoles } from '../../utils/HighlightUtils';\nimport { IStreamHighlightOptions } from '../../utils/StreamHighlightUtils';\nimport { IDateToStringOptions, DateUtils } from '../../utils/DateUtils';\nimport { ICurrencyToStringOptions, CurrencyUtils } from '../../utils/CurrencyUtils';\nimport { IAnchorUtilsOptions, IImageUtilsOptions, AnchorUtils, ImageUtils } from '../../utils/HtmlUtils';\nimport { IQueryResult } from '../../rest/QueryResult';\nimport { Utils } from '../../utils/Utils';\nimport { StringUtils } from '../../utils/StringUtils';\nimport { TimeSpan, ITimeSpanUtilsOptions } from '../../utils/TimeSpanUtils';\nimport { EmailUtils } from '../../utils/EmailUtils';\nimport { QueryUtils } from '../../utils/QueryUtils';\nimport { DeviceUtils } from '../../utils/DeviceUtils';\nimport { $$ } from '../../utils/Dom';\nimport { SearchEndpoint } from '../../rest/SearchEndpoint';\nimport { StreamHighlightUtils } from '../../utils/StreamHighlightUtils';\nimport { FacetUtils } from '../Facet/FacetUtils';\nimport * as Globalize from 'globalize';\nimport { IStringMap } from '../../rest/GenericParam';\nimport * as _ from 'underscore';\nimport { Component } from '../Base/Component';\nimport { TemplateCache } from './TemplateCache';\nimport { INumberFormatOptions } from '../../utils/NumberUtils';\n\n/**\n * The core template helpers provided by default.\n *\n * **Examples:**\n *\n * **HTML**\n *\n * ```html\n * \n * ```\n *\n * **Underscore**\n *\n * ```erb\n * <%= timeSpan(raw.videoduration, { isMilliseconds: false }) %>\n * ```\n */\nexport interface ICoreHelpers {\n /**\n * Shortens a string so that its length does not exceed a specific number of\n * characters. An ellipsis is appended to the string if it exceeds the\n * maximum length.\n *\n * - `content`: The string to shorten.\n * - `length`: The maximum length of the resulting string.\n * - `highlights`: Optional. If provided, the string will be highlighted\n * using this highlight information.\n * - `cssClass`: Optional. When highlighting, the name of the CSS class to use.\n */\n shorten: (content: string, length: number, highlights?: IHighlight[], cssClass?: string) => string;\n /**\n * Shortens a string using an algorithm suitable for file paths. The helper\n * will insert an ellipsis in the string where text has been removed when\n * the path exceeds the maximum length.\n *\n * - `content`: The path to shorten.\n * - `length`: The maximum length of the resulting string.\n * - `highlights`: Optional. If provided, the string will be highlighted using\n * this highlight information.\n * - `cssClass`: Optional. When highlighting, the name of the CSS class to use.\n */\n shortenPath: (content: string, length: number, highlights?: IHighlight[], cssClass?: string) => string;\n /**\n * Shortens a string using an algorithm suitable for URIs. The helper will\n * insert an ellipsis in the string where text has been removed when the URI\n * exceeds the maximum length.\n *\n * - `content`: The URI to shorten.\n * - `length`: The maximum length of the resulting string.\n * - `highlights`: Optional. If provided, the string will be highlighted\n * using this highlight information.\n * - `cssClass`: Optional. When highlighting, the name of the CSS class to use.\n */\n shortenUri: (content: string, length: number, highlights?: IHighlight[], cssClass?: string) => string;\n /**\n * Highlights a string using the provided highlight information.\n *\n * - `content`: The URI to shorten.\n * - `highlights`: Optional. The highlight information to use.\n * - `cssClass`: Optional. The name of the CSS class to use for highlighting.\n */\n highlight: (content: string, highlights?: IHighlight[], cssClass?: string) => string;\n /**\n * Highlights the provided terms in a given string.
\n * By default, the terms to highlight are the current query and the\n * associated stemming words from the index.\n * The only required parameter is the content, which specify the string that needs to be highlighted.\n * The other parameters will normally be automatically resolved for you from the current result object.\n *\n * - `content`: The string content to highlight\n * - `termsToHighlight`: The terms to highlight (see {@link IHighlightTerm})\n * - `phraseToHighlight`: The phrases to highlight (see {@link IHighlightPhrase})\n * - `options`: Optional. The options defined below as {@link IStreamHighlightOptions}\n *\n * **Note:**\n * > `highlightStreamText` should only be used for very particular/specific use cases (e.g., augmenting the result template with additional information rather than the typical excerpt/title), and is not a proper replacement for actually having the correct title and excerpt on your results.\n * >\n * > Using incorrect result titles or excerpts on your search interface also causes relevancy to suffer greatly, as the index uses the title and excerpt to find relevant results. Consequently, end users are more likely to see results whose titles do not match their query.\n * >\n * > Moreover, the recommended method to implement simple title and/or excerpt highlighting is to simply use the {@link Excerpt} and {@link ResultLink} components.\n */\n highlightStreamText: (\n content: string,\n termsToHighlight: IHighlightTerm,\n phrasesToHighlight: IHighlightPhrase,\n options?: IStreamHighlightOptions\n ) => string;\n /**\n * This helper operates exactly like the {@link highlightStreamText} helper, except\n * that it should be used to highlight HTML content. The helper takes care\n * of not highlighting the HTML markup.\n *\n * - `content`: The string content to highlight\n * - `termsToHighlight`: The terms to highlight (see {@link IHighlightTerm})\n * - `phraseToHighlight`: The phrases to highlight (see {@link IHighlightPhrase})\n * - `options`: Optional. The options defined below as {@link IStreamHighlightOptions}\n *\n * **Note:**\n * > `highlightStreamHTML` should only be used for very particular/specific use cases (e.g., augmenting the result template with additional information rather than the typical excerpt/title), and is not a proper replacement for actually having the correct title and excerpt on your results.\n * >\n * > Using incorrect result titles or excerpts on your search interface also causes relevancy to suffer greatly, as the index uses the title and excerpt to find relevant results. Consequently, end users are more likely to see results whose titles do not match their query.\n * >\n * > Moreover, the recommended method to implement simple title and/or excerpt highlighting is to simply use the {@link Excerpt} and {@link ResultLink} components.\n */\n highlightStreamHTML: (\n content: string,\n termsToHighlight: IHighlightTerm,\n phrasesToHighlight: IHighlightPhrase,\n options?: IStreamHighlightOptions\n ) => string;\n /**\n * Formats a numeric value using the format string.\n *\n * - `content`: The numeric value to format.\n * - `format` Optional. The string format to use. See the Globalize library for the list of available formats.\n *\n * When the helper is used in a [`FieldValue`]{@link FieldValue} component, this value is automatically retrieved from the specified [`field`]{@link FieldValue.options.field}.\n *\n * **Example:**\n *\n * ```html\n * \n * ```\n */\n number: (content: string, format: string | INumberFormatOptions) => string;\n /**\n * Formats a date value to a date-only string using the specified options.\n *\n * - `content`: The Date value to format.\n * - `options`: Optional. The options to use (see {@link IDateToStringOptions}).\n */\n date: (content: any, options?: IDateToStringOptions) => string;\n /**\n * Formats a date value to a time-only string using the specified options.\n *\n * - `content`: The Date value to format.\n * - `options`: Optional. The options to use (see {@link IDateToStringOptions}).\n */\n time: (content: any, options?: IDateToStringOptions) => string;\n /**\n * Formats a date value to a date and time string using the specified\n * options.\n *\n * - `content`: The Date value to format.\n * - `options`: Optional. The options to use (see {@link IDateToStringOptions}).\n */\n dateTime: (content: any, options?: IDateToStringOptions) => string;\n /**\n * Formats a currency value to a string using the specified options.\n *\n * - `content`: The number value to format.\n * - `options`: Optional. The options to use (see {@link ICurrencyToStringOptions}).\n */\n currency: (content: any, options?: ICurrencyToStringOptions) => string;\n /**\n * Formats a date value to a date and time string using options suitable for\n * email dates\n *\n * - `content`: The Date value to format.\n * - `options`: Optional. The options to use (see {@link IDateToStringOptions}).\n */\n emailDateTime: (content: any, options?: IDateToStringOptions) => string;\n /**\n * Renders one or several email values in `mailto:` hyperlinks.\n *\n * - `value`: The string or array of strings that contains a list of semicolon-separated email\n * values. When multiple values are passed, each value is displayed in a\n * separate hyperlink.\n * - `companyDomain`: Optional. The string that contains your own domain (e.g.:\n * coveo.com). When specified, this parameter allows email addresses\n * coming from your own domain to be displayed in a shortened format\n * (e.g.: Full Name), whereas email addresses coming from an external\n * domain will be displayed in an extended format (e.g.: Full Name\n * (domain.com)). If this parameter is not specified, then the shortened\n * format will automatically be used.\n * - `me`: Optional. The string that contains the current username. If it is\n * specified, then the email address containing the current username will\n * be replaced by the localized string 'Me'.\n * - `lengthLimit`: Optional. The number of email addresses that you want to display\n * before an ellipse is added (e.g.: 'From Joe, John and 5 others').
\n * The default value is 2.\n * - `truncateName`: Optional. When the username is available from the email address,\n * then you can specify if you want to truncate the full name. (e.g.:\n * 'John S.' instead of 'John Smith').
\n * The default value is `false`.\n */\n email: (value: string | string[], companyDomain?: string, me?: string, lengthLimit?: number, truncateName?: boolean) => string;\n /**\n * Formats a clickable HTML link (``).\n *\n * - `href`: The link URI\n * - `options`: Optional. The options to use (see {@link IAnchorUtilsOptions})\n */\n anchor: (href: string, options?: IAnchorUtilsOptions) => string;\n /**\n * Formats an HTML image tag (`![]()
`).\n *\n * - `src`: The image source URI\n * - `options`: Optional. The options to use (see {@link IImageUtilsOptions})\n */\n image: (src: string, options?: IImageUtilsOptions) => string;\n /**\n * Formats an HTML image tag (`![]()
`), and automatically uses the result\n * object to query the REST API to get the thumbnail for this result. For\n * example, this can be used to great effect when designing a template\n * showing users or previews of files.\n * - `result`: Optional. The current result object inside your template. In\n * underscore, it is referenced as `obj`. By default, the result\n * will be resolved automatically from your current template function (\n * Meaning the nearest result in the current call stack execution inside\n * your template)\n * - `endpoint`: Optional. The name of the endpoint to use for your\n * thumbnail. Default is default.\n * - `options`: Optional. The options to use (see {@link IImageUtilsOptions}).\n */\n thumbnail: (result?: IQueryResult, endpoint?: string, options?: IImageUtilsOptions) => string;\n /**\n * Generates an icon based on the file type of the current result. The icon\n * will be contained inside a `` element with the appropriate CSS\n * class.\n *\n * - `result`: Optional. The current result object inside your template. In\n * underscore, it is referenced as `obj`. By default, the result\n * will be resolved automatically from your current template function (\n * Meaning the nearest result in the current call stack execution inside\n * your template)\n * - `options`: Optional. The options to use (see {@link IIconOptions}).\n */\n fromFileTypeToIcon: (result?: IQueryResult, options?: any) => string;\n /**\n * Loads a partial template in the current template, by passing the ID of\n * the template to load, the condition for which this template should be\n * loaded, and the context object (the object that the loaded template will\n * use as its data). By default, the context object will be the same as the\n * template that called this helper function. So, for example, in a\n * ResultList Component, the contextObject would, by default, be the Query\n * Results.\n *\n * - `templateId`: The ID of the template to load.\n * - `condition`: Optional. The boolean condition to determine if this template should\n * load for this result set. Most of the time this would be a condition of\n * the type if raw.somefield == 'something'.\n * - `contextObject`: Optional. The object that should be used by the loaded template\n * as its contextObject.\n */\n loadTemplate: (templateId: string, condition?: boolean, contextObject?: any) => string;\n /**\n * Given a number, either in millisecond or second, convert to a HH:MM:SS format.\n *\n * **Examples**\n *\n * >`timeSpan(1, {isMilliseconds: false}) => '00:01'`\n * >\n * >`timeSpan(1000, {isMilliseconds: true}) => '00:01'`\n *\n * - `value`: The number to convert to a timespan\n * - `options` : The options to use (see {@link ITimeSpanUtilsOptions})\n */\n timeSpan: (value: number, options: ITimeSpanUtilsOptions) => string;\n /**\n * Formats a number, which represents a file size in bytes, into a logical unit size.\n *\n * **Examples:**\n *\n * >`size(1024) => 1024 B`\n * >\n * >`size(1025) => 1 KB`\n * >\n * >`size(10240) => 10 KB`\n *\n * **Examples:**\n *\n * >**HTML**\n * >\n * > ```html\n * > \n * > ```\n *\n * >**Underscore**\n * >\n * > ```erb\n * > <%= size(raw.size, {base: 0, precision: 2}) %>\n * > ```\n *\n * - `value`: The number to format\n * - `options` : The options to use (see {@link ISizeOptions})\n */\n size: (value: number, options?: ISizeOptions) => string;\n /**\n * Given a filetype value, try to return a translated and human readable version.\n *\n * If the filetype is known and recognized by the framework, a translated value will be returned.\n *\n * **Examples**\n *\n * >`translatedCaption('doc') => Document`\n * >\n * >`translatedCaption('xls') => Spreadsheet Document`\n *\n * - `value`: The string value to translate\n */\n translatedCaption: (value: string) => string;\n /**\n * Replace all carriage return in a string by a <br /> tag\n *\n * - `value`: The string value to replace the carriage returns in.\n */\n encodeCarriageReturn: (value: string) => string;\n /**\n * Detect if the results is being rendered in a mobile device.\n *\n * If it's not a mobile device, the helper return null ;\n *\n * If it's a mobile device, return the type of device (Android, iPhone, iPad) etc.\n */\n isMobileDevice: () => string;\n}\n\n/**\n * Available options for the size templateHelpers.\n *\n * Example:\n * \n */\nexport interface ISizeOptions {\n /**\n * The base into which to format the value.\n *\n * Formula: value * 10^(3 * base)\n *\n * **Examples:**\n * > **Base 0:**\n * >\n * > 1 => 1B\n * >\n * > 1000 => 1KB\n *\n * > **Base 1:**\n * >\n * > 1 => 1KB\n * >\n * > 1000 => 1MB\n */\n base?: number;\n /**\n * The precision to use to format the size (i.e., the number of digits to display after the decimal)\n *\n * **Examples:**\n * > **Precision 0:**\n * >\n * > 1.0 => 1\n * >\n * > 1.85 => 1\n *\n * > **Precision 1:**\n * >\n * > 1.0 => 1.0\n * >\n * > 1.85 => 1.8\n */\n\n precision?: number;\n}\n\nexport interface IShortenOptions {\n length: number;\n highlights?: IHighlight[];\n cssClass?: string;\n}\n\nexport interface IHighlightsOptions {\n highlights: IHighlight[];\n cssClass?: string;\n}\n\nexport interface IHelperStreamHighlightOptions {\n termsToHighlight: IHighlightTerm;\n phrasesToHighlight: IHighlightPhrase;\n opts?: IStreamHighlightOptions;\n}\n\nexport interface IPluralOptions {\n singular: string;\n plural: string;\n}\n\nexport class CoreHelpers {\n public constructor() {}\n\n /**\n * For backward compatibility reason, the \"global\" template helper should be available under the\n * coveo namespace.\n * @param scope\n */\n public static exportAllHelpersGlobally(scope: IStringMap) {\n _.each(TemplateHelpers.getHelpers(), (helper: ITemplateHelperFunction, name: string) => {\n if (scope[name] == undefined) {\n scope[name] = helper;\n }\n });\n }\n}\n\nTemplateHelpers.registerFieldHelper('javascriptEncode', (value: string) => {\n return Utils.exists(value) ? StringUtils.javascriptEncode(value) : undefined;\n});\n\nconst executeShorten = (content: string, options: IShortenOptions) => {\n const strAndHoles = StringAndHoles.shortenString(content, options.length, '...');\n if (Utils.exists(options.highlights)) {\n return HighlightUtils.highlightString(strAndHoles.value, options.highlights, strAndHoles.holes, options.cssClass || 'highlight');\n } else {\n return strAndHoles.value;\n }\n};\n\nTemplateHelpers.registerTemplateHelper('shorten', (content: string, length: number, highlights?: IHighlight[], cssClass?: string) => {\n return executeShorten(content, {\n length,\n highlights,\n cssClass\n });\n});\n\nTemplateHelpers.registerTemplateHelper('shortenv2', (content: string, options: IShortenOptions) => {\n return executeShorten(content, options);\n});\n\nconst executeShortenPath = (content: string, options: IShortenOptions) => {\n const strAndHoles = StringAndHoles.shortenPath(content, options.length);\n if (Utils.exists(options.highlights)) {\n return HighlightUtils.highlightString(strAndHoles.value, options.highlights, strAndHoles.holes, options.cssClass || 'highlight');\n } else {\n return strAndHoles.value;\n }\n};\n\nTemplateHelpers.registerTemplateHelper('shortenPath', (content: string, length: number, highlights?: IHighlight[], cssClass?: string) => {\n return executeShortenPath(content, {\n length,\n highlights,\n cssClass\n });\n});\n\nTemplateHelpers.registerFieldHelper('shortenPathv2', (content: string, options: IShortenOptions) => {\n return executeShortenPath(content, options);\n});\n\nconst executeShortenUri = (content: string, options: IShortenOptions) => {\n const strAndHoles = StringAndHoles.shortenUri(content, options.length);\n\n if (Utils.exists(options.highlights)) {\n return HighlightUtils.highlightString(strAndHoles.value, options.highlights, strAndHoles.holes, options.cssClass || 'highlight');\n } else {\n return strAndHoles.value;\n }\n};\n\nTemplateHelpers.registerTemplateHelper('shortenUri', (content: string, length: number, highlights?: IHighlight[], cssClass?: string) => {\n return executeShortenUri(content, {\n length,\n highlights,\n cssClass\n });\n});\n\nTemplateHelpers.registerTemplateHelper('shortenUriv2', (content: string, options: IShortenOptions) => {\n return executeShortenUri(content, options);\n});\n\nconst executeHighlight = (content: string, options: IHighlightsOptions) => {\n if (Utils.exists(content)) {\n if (Utils.exists(options.highlights)) {\n return HighlightUtils.highlightString(content, options.highlights, null, options.cssClass || 'highlight');\n } else {\n return content;\n }\n } else {\n return undefined;\n }\n};\n\nTemplateHelpers.registerTemplateHelper('highlight', (content: string, highlights: IHighlight[], cssClass?: string) => {\n return executeHighlight(content, {\n highlights,\n cssClass\n });\n});\n\nTemplateHelpers.registerTemplateHelper('highlightv2', (content: string, options: IHighlightsOptions) => {\n return executeHighlight(content, options);\n});\n\nconst executeHighlightStreamText = (content: string, options: IHelperStreamHighlightOptions) => {\n if (Utils.exists(content) && Utils.exists(options.termsToHighlight) && Utils.exists(options.phrasesToHighlight)) {\n if (termsToHighlightAreDefined(options.termsToHighlight, options.phrasesToHighlight)) {\n return StreamHighlightUtils.highlightStreamText(content, options.termsToHighlight, options.phrasesToHighlight, options.opts);\n } else {\n return content;\n }\n } else {\n return undefined;\n }\n};\n\nTemplateHelpers.registerTemplateHelper(\n 'highlightStreamText',\n (\n content: string,\n termsToHighlight = resolveTermsToHighlight(),\n phrasesToHighlight = resolvePhrasesToHighlight(),\n opts?: IStreamHighlightOptions\n ) => {\n return executeHighlightStreamText(content, {\n termsToHighlight,\n phrasesToHighlight,\n opts\n });\n }\n);\n\nTemplateHelpers.registerTemplateHelper('highlightStreamTextv2', (content: string, options: IHelperStreamHighlightOptions) => {\n const mergedOptions = {\n termsToHighlight: resolveTermsToHighlight(),\n phrasesToHighlight: resolvePhrasesToHighlight(),\n ...options\n };\n return executeHighlightStreamText(content, mergedOptions);\n});\n\nconst executeHighlightStreamHTML = (content: string, options: IHelperStreamHighlightOptions) => {\n if (Utils.exists(content) && Utils.exists(options.termsToHighlight) && Utils.exists(options.phrasesToHighlight)) {\n if (termsToHighlightAreDefined(options.termsToHighlight, options.phrasesToHighlight)) {\n return StreamHighlightUtils.highlightStreamHTML(content, options.termsToHighlight, options.phrasesToHighlight, options.opts);\n } else {\n return content;\n }\n } else {\n return undefined;\n }\n};\n\nTemplateHelpers.registerTemplateHelper(\n 'highlightStreamHTML',\n (\n content: string,\n termsToHighlight = resolveTermsToHighlight(),\n phrasesToHighlight = resolvePhrasesToHighlight(),\n opts?: IStreamHighlightOptions\n ) => {\n return executeHighlightStreamHTML(content, {\n termsToHighlight,\n phrasesToHighlight,\n opts\n });\n }\n);\n\nTemplateHelpers.registerTemplateHelper('highlightStreamHTMLv2', (content: string, options: IHelperStreamHighlightOptions) => {\n const mergedOptions = {\n termsToHighlight: resolveTermsToHighlight(),\n phrasesToHighlight: resolvePhrasesToHighlight(),\n ...options\n };\n return executeHighlightStreamHTML(content, mergedOptions);\n});\n\nTemplateHelpers.registerFieldHelper('number', (value: any, options?: INumberFormatOptions | string) => {\n if (!Utils.exists(value)) {\n return undefined;\n }\n\n const numberValue = Number(value);\n const format = _.isString(options) ? options : options && options.format;\n if (!format) {\n return StringUtils.htmlEncode(numberValue.toString());\n }\n\n return StringUtils.htmlEncode(Globalize.format(numberValue, format));\n});\n\nTemplateHelpers.registerFieldHelper('date', (value: any, options?: IDateToStringOptions) => {\n return DateUtils.dateToString(DateUtils.convertFromJsonDateIfNeeded(value), options);\n});\n\nTemplateHelpers.registerFieldHelper('time', (value: any, options?: IDateToStringOptions) => {\n return DateUtils.timeToString(DateUtils.convertFromJsonDateIfNeeded(value), options);\n});\n\nTemplateHelpers.registerFieldHelper('dateTime', (value: any, options?: IDateToStringOptions) => {\n return DateUtils.dateTimeToString(DateUtils.convertFromJsonDateIfNeeded(value), options);\n});\n\nTemplateHelpers.registerFieldHelper('emailDateTime', (value: any, options?: IDateToStringOptions) => {\n var defaultOptions = {};\n defaultOptions.includeTimeIfThisWeek = true;\n var optionsToUse = _.extend(options, defaultOptions);\n return value ? DateUtils.dateTimeToString(DateUtils.convertFromJsonDateIfNeeded(value), optionsToUse) : undefined;\n});\n\nTemplateHelpers.registerFieldHelper('currency', (value: any, options?: ICurrencyToStringOptions) => {\n return CurrencyUtils.currencyToString(value, options);\n});\n\nTemplateHelpers.registerFieldHelper('timeSpan', (value: any, options: ITimeSpanUtilsOptions = { isMilliseconds: false }) => {\n return new TimeSpan(value, options.isMilliseconds).getHHMMSS();\n});\n\nTemplateHelpers.registerFieldHelper('email', (value: string | string[], ...args: any[]) => {\n // support old arguments (value: any, companyDomain: string, me: string, lengthLimit = 2, truncateName = false)\n var companyDomain: string;\n var me: string;\n var lengthLimit: number;\n var truncateName: boolean;\n if (_.isObject(args[0])) {\n companyDomain = args[0]['companyDomain'];\n me = args[0]['me'];\n lengthLimit = args[0]['lengthLimit'];\n truncateName = args[0]['truncateName'];\n } else {\n companyDomain = args[0];\n me = args[1];\n lengthLimit = args[2];\n truncateName = args[3];\n }\n if (lengthLimit == undefined) {\n lengthLimit = 2;\n }\n if (truncateName == undefined) {\n truncateName = false;\n }\n if (_.isString(value)) {\n var listOfAddresses = EmailUtils.splitSemicolonSeparatedListOfEmailAddresses(value);\n return EmailUtils.emailAddressesToHyperlinks(listOfAddresses, companyDomain, me, lengthLimit, truncateName);\n } else if (_.isArray(value)) {\n return EmailUtils.emailAddressesToHyperlinks(value, companyDomain, me, lengthLimit, truncateName);\n } else {\n return undefined;\n }\n});\n\nTemplateHelpers.registerTemplateHelper('excessEmailToggle', (target: HTMLElement) => {\n $$(target).removeClass('coveo-active');\n if ($$(target).hasClass('coveo-emails-excess-collapsed')) {\n _.each($$(target).siblings('.coveo-emails-excess-expanded'), sibling => {\n $$(sibling).addClass('coveo-active');\n });\n } else if ($$(target).hasClass('coveo-hide-expanded')) {\n $$(target.parentElement).addClass('coveo-inactive');\n _.each($$(target.parentElement).siblings('.coveo-emails-excess-collapsed'), sibling => {\n $$(sibling).addClass('coveo-active');\n });\n }\n return undefined;\n});\n\nTemplateHelpers.registerFieldHelper('anchor', (href: string, options?: IAnchorUtilsOptions) => {\n return AnchorUtils.buildAnchor(href, options);\n});\n\nTemplateHelpers.registerFieldHelper('image', (src: string, options?: IImageUtilsOptions, result: IQueryResult = resolveQueryResult()) => {\n if (options && options.srcTemplate) {\n return ImageUtils.buildImage(StringUtils.buildStringTemplateFromResult(options.srcTemplate, result), {\n alt: options.alt,\n height: options.height,\n width: options.width\n });\n }\n return ImageUtils.buildImage(src, options);\n});\n\nTemplateHelpers.registerTemplateHelper(\n 'thumbnail',\n (result: IQueryResult = resolveQueryResult(), endpoint: string = 'default', options?: IImageUtilsOptions) => {\n if (QueryUtils.hasThumbnail(result)) {\n return ImageUtils.buildImageFromResult(result, SearchEndpoint.endpoints[endpoint], options);\n }\n }\n);\n\nTemplateHelpers.registerTemplateHelper('fromFileTypeToIcon', (result: IQueryResult = resolveQueryResult(), options = {}) => {\n let icon = Component.getComponentRef('Icon');\n if (icon) {\n return icon.createIcon(result, options).outerHTML;\n }\n});\n\nTemplateHelpers.registerTemplateHelper('attrEncode', (value: string) => {\n return ('' + value) /* Forces the conversion to string. */\n .replace(/&/g, '&') /* This MUST be the 1st replacement. */\n .replace(/'/g, ''') /* The 4 other predefined entities, required. */\n .replace(/'/g, '"')\n .replace(//g, '>');\n});\n\nTemplateHelpers.registerTemplateHelper('loadTemplates', (templatesToLoad: { [id: string]: any }, once = true) => {\n var ret = '';\n var data = resolveQueryResult();\n var atLeastOneWasLoaded = false;\n var toLoad = templatesToLoad;\n var defaultTmpl;\n _.each(templatesToLoad, (value, key?, obj?) => {\n if (value == 'default') {\n defaultTmpl = key;\n }\n });\n if (defaultTmpl != undefined) {\n toLoad = _.omit(templatesToLoad, defaultTmpl);\n }\n _.each(toLoad, (condition, id?, obj?) => {\n if (!atLeastOneWasLoaded || !once) {\n atLeastOneWasLoaded = atLeastOneWasLoaded || condition;\n ret += TemplateHelpers.getHelper('loadTemplate')(id, condition, data);\n }\n });\n if (!atLeastOneWasLoaded && defaultTmpl != undefined) {\n ret += TemplateHelpers.getHelper('loadTemplate')(defaultTmpl, true, data);\n }\n return ret;\n});\n\nconst byteMeasure = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'];\n\nTemplateHelpers.registerFieldHelper('size', (value: any, options?: ISizeOptions) => {\n var size = parseInt(value, 10);\n var precision = options != null && options.precision != null ? options.precision : 2;\n var base = options != null && options.base != null ? options.base : 0;\n while (size > 1024 && base + 1 < byteMeasure.length) {\n size /= 1024;\n base++;\n }\n size = Math.floor(size * Math.pow(10, precision)) / Math.pow(10, precision);\n return size + ' ' + byteMeasure[base];\n});\n\nTemplateHelpers.registerFieldHelper('translatedCaption', (value: string) => {\n return FacetUtils.tryToGetTranslatedCaption('@filetype', value);\n});\n\nTemplateHelpers.registerTemplateHelper('loadTemplate', (id: string, condition: boolean = true, data?: any) => {\n if (Utils.isNullOrUndefined(data)) {\n data = resolveQueryResult();\n }\n if (condition) {\n return TemplateCache.getTemplate(id).instantiateToString(data, {\n checkCondition: false\n });\n }\n return '';\n});\n\nTemplateHelpers.registerTemplateHelper('encodeCarriageReturn', (data: string) => {\n if (Utils.isNullOrUndefined(data)) {\n return undefined;\n } else {\n return StringUtils.encodeCarriageReturn(data);\n }\n});\n\nTemplateHelpers.registerTemplateHelper('isMobileDevice', () => {\n return DeviceUtils.isMobileDevice() ? DeviceUtils.getDeviceName() : null;\n});\n\nTemplateHelpers.registerTemplateHelper('pluralHelper', (count: number, options: IPluralOptions) =>\n count > 1 ? options.plural : options.singular\n);\n\nfunction resolveQueryResult(): IQueryResult {\n let found;\n let resultList = Component.getComponentRef('ResultList');\n if (resultList) {\n found = resultList.resultCurrentlyBeingRendered;\n }\n if (!found) {\n let quickview = Component.getComponentRef('Quickview');\n if (quickview) {\n found = quickview.resultCurrentlyBeingRendered;\n }\n }\n return found;\n}\n\nfunction resolveTermsToHighlight(): IHighlightTerm {\n let currentQueryResult = resolveQueryResult();\n if (currentQueryResult) {\n return currentQueryResult.termsToHighlight;\n }\n}\n\nfunction resolvePhrasesToHighlight(): IHighlightPhrase {\n let currentQueryResult = resolveQueryResult();\n if (currentQueryResult) {\n return currentQueryResult.phrasesToHighlight;\n }\n}\n\nfunction termsToHighlightAreDefined(termsToHighlight, phrasesToHighlight) {\n return Utils.isNonEmptyArray(_.keys(termsToHighlight)) || Utils.isNonEmptyArray(_.keys(phrasesToHighlight));\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Templates/CoreHelpers.ts","/**\n * The possible values for the [allowedValuesPatternType]{@link IGroupByRequest.allowedValuesPatternType} property of the `IGroupByRequest` interface.\n */\nexport enum AllowedValuesPatternType {\n /**\n * Only supports trailing wildcards in the pattern.\n */\n Legacy = 'legacy',\n /**\n * Fully supports wildcards.\n */\n Wildcards = 'wildcards',\n /**\n * Supports regular expression as the pattern.\n */\n Regex = 'regex',\n /**\n *Applies the Edit Distance algorithm to match values that are close to the specified pattern.\n */\n EditDistance = 'editdistance',\n /**\n *Applies a phonetic algorithm to match values that are phonetically similar to the specified pattern.\n */\n Phonetic = 'phonetic'\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/rest/AllowedValuesPatternType.ts","/// (actionCause, this.getAnalyticsFacetMeta())\n );\n }\n }\n\n protected handleSelectValue(eventBindings: IValueElementEventsBinding) {\n this.facet.keepDisplayedValuesNextTime = eventBindings.displayNextTime && !this.facet.options.useAnd;\n var actionCause: IAnalyticsActionCause;\n if (this.facetValue.excluded) {\n actionCause = this.isOmnibox ? analyticsActionCauseList.omniboxFacetUnexclude : analyticsActionCauseList.facetUnexclude;\n this.facet.unexcludeValue(this.facetValue);\n } else {\n if (this.facetValue.selected) {\n actionCause = this.isOmnibox ? analyticsActionCauseList.omniboxFacetDeselect : analyticsActionCauseList.facetDeselect;\n } else {\n actionCause = this.isOmnibox ? analyticsActionCauseList.omniboxFacetSelect : analyticsActionCauseList.facetSelect;\n }\n this.facet.toggleSelectValue(this.facetValue);\n }\n if (this.onSelect) {\n this.facet.triggerNewQuery(() => this.onSelect(this, actionCause));\n } else {\n this.facet.triggerNewQuery(() =>\n this.facet.usageAnalytics.logSearchEvent(actionCause, this.getAnalyticsFacetMeta())\n );\n }\n }\n\n protected handleExcludeClick(eventBindings: IValueElementEventsBinding) {\n this.facet.keepDisplayedValuesNextTime = eventBindings.displayNextTime && !this.facet.options.useAnd;\n this.toggleExcludeWithUA();\n }\n\n protected handleSelectEventForExcludedValueElement(eventBindings: IValueElementEventsBinding) {\n const clickEvent = () => {\n if (eventBindings.pinFacet) {\n this.facet.pinFacetPosition();\n }\n if (eventBindings.omniboxObject) {\n this.omniboxCloseEvent(eventBindings.omniboxObject);\n }\n this.handleSelectValue(eventBindings);\n this.tryDismissSearchResults();\n return false;\n };\n\n $$(this.renderer.label).on('click', e => {\n e.stopPropagation();\n clickEvent();\n });\n\n $$(this.renderer.stylishCheckbox).on('keydown', KeyboardUtils.keypressAction([KEYBOARD.SPACEBAR, KEYBOARD.ENTER], clickEvent));\n }\n\n protected handleExcludeEventForValueElement(eventBindings: IValueElementEventsBinding) {\n const excludeAction = (event: Event) => {\n if (eventBindings.omniboxObject) {\n this.omniboxCloseEvent(eventBindings.omniboxObject);\n }\n\n this.handleExcludeClick(eventBindings);\n\n this.tryDismissSearchResults();\n event.stopPropagation();\n event.preventDefault();\n };\n $$(this.renderer.excludeIcon).on('click', excludeAction);\n\n $$(this.renderer.excludeIcon).on('keydown', KeyboardUtils.keypressAction([KEYBOARD.SPACEBAR, KEYBOARD.ENTER], excludeAction));\n }\n\n protected handleSelectEventForValueElement(eventBindings: IValueElementEventsBinding) {\n const selectAction = (event: Event) => {\n if (eventBindings.pinFacet) {\n this.facet.pinFacetPosition();\n }\n\n this.tryDismissSearchResults();\n $$(this.renderer.checkbox).trigger('change');\n event.preventDefault();\n };\n\n $$(this.renderer.label).on('click', selectAction);\n\n $$(this.renderer.stylishCheckbox).on('keydown', KeyboardUtils.keypressAction([KEYBOARD.SPACEBAR, KEYBOARD.ENTER], selectAction));\n }\n\n protected handleEventForExcludedValueElement(eventBindings: IValueElementEventsBinding) {\n this.handleSelectEventForExcludedValueElement(eventBindings);\n this.handleExcludeEventForValueElement(eventBindings);\n }\n\n protected handleEventForValueElement(eventBindings: IValueElementEventsBinding) {\n this.handleSelectEventForValueElement(eventBindings);\n this.handleExcludeEventForValueElement(eventBindings);\n }\n\n protected handleEventForCheckboxChange(eventBindings: IValueElementEventsBinding) {\n $$(this.renderer.checkbox).on('change', () => {\n if (eventBindings.omniboxObject) {\n this.omniboxCloseEvent(eventBindings.omniboxObject);\n }\n this.handleSelectValue(eventBindings);\n });\n }\n\n protected omniboxCloseEvent(eventArg: IPopulateOmniboxObject) {\n eventArg.closeOmnibox();\n eventArg.clear();\n }\n\n private tryDismissSearchResults() {\n if (this.facet && this.facet.facetSearch && this.facet.facetSearch.dismissSearchResults) {\n this.facet.facetSearch.dismissSearchResults();\n }\n }\n\n private getAnalyticsFacetMeta(): IAnalyticsFacetMeta {\n return {\n facetId: this.facet.options.id,\n facetField: this.facet.options.field.toString(),\n facetValue: this.facetValue.value,\n facetTitle: this.facet.options.title\n };\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Facet/ValueElement.ts","import { Facet } from './Facet';\nimport { FacetValue } from './FacetValue';\nimport { $$ } from '../../utils/Dom';\nimport { Utils } from '../../utils/Utils';\nimport { l } from '../../strings/Strings';\nimport { Component } from '../Base/Component';\nimport * as _ from 'underscore';\nimport { SVGIcons } from '../../utils/SVGIcons';\nimport { SVGDom } from '../../utils/SVGDom';\n\nexport class ValueElementRenderer {\n public listItem: HTMLElement;\n public label: HTMLElement;\n public checkbox: HTMLElement;\n public stylishCheckbox: HTMLElement;\n public valueCaption: HTMLElement;\n public valueCount: HTMLElement;\n public icon: HTMLElement;\n public excludeIcon: HTMLElement;\n public computedField: HTMLElement;\n private facetValueLabelWrapper: HTMLElement;\n\n constructor(public facet: Facet, public facetValue: FacetValue) {}\n\n public withNo(element: HTMLElement[]): ValueElementRenderer;\n public withNo(element: HTMLElement): ValueElementRenderer;\n public withNo(element: any): ValueElementRenderer {\n if (_.isArray(element)) {\n _.each(element, (e: HTMLElement) => {\n if (e) {\n $$(e).detach();\n }\n });\n } else {\n if (element) {\n $$(element).detach();\n }\n }\n return this;\n }\n\n public build(): ValueElementRenderer {\n this.buildListItem();\n this.initAndAppendLabel();\n this.initAndAppendExcludeIcon();\n this.setCssClassOnListValueElement();\n this.addAccessibilityAttributesToTargetElement();\n return this;\n }\n\n public setCssClassOnListValueElement(): void {\n $$(this.listItem).toggleClass('coveo-selected', this.facetValue.selected);\n $$(this.listItem).toggleClass('coveo-excluded', this.facetValue.excluded);\n }\n\n public get accessibleElement() {\n return this.stylishCheckbox;\n }\n\n protected buildExcludeIcon(): HTMLElement {\n const isExcluded = this.facetValue.excluded;\n const excludeIcon = $$('div', {\n ariaLabel: l('ExcludeValueWithResultCount', this.caption, l('ResultCount', this.count, parseInt(this.count, 10))),\n className: 'coveo-facet-value-exclude',\n tabindex: 0,\n role: 'button',\n ariaPressed: isExcluded.toString()\n }).el;\n this.addFocusAndBlurEventListeners(excludeIcon);\n excludeIcon.innerHTML = isExcluded ? SVGIcons.icons.plus : SVGIcons.icons.checkboxHookExclusionMore;\n SVGDom.addClassToSVGInContainer(excludeIcon, isExcluded ? 'coveo-facet-value-unexclude-svg' : 'coveo-facet-value-exclude-svg');\n SVGDom.addAttributesToSVGInContainer(excludeIcon, { 'aria-hidden': 'true' });\n return excludeIcon;\n }\n\n protected buildValueComputedField(): HTMLElement {\n const computedField = this.facetValue.getFormattedComputedField(this.facet.options.computedFieldFormat);\n if (Utils.isNonEmptyString(computedField)) {\n const elem = $$('span', {\n className: 'coveo-facet-value-computed-field'\n }).el;\n $$(elem).text(computedField);\n return elem;\n } else {\n return undefined;\n }\n }\n\n protected buildValueCheckbox(): HTMLElement {\n const checkbox = $$('input', {\n type: 'checkbox',\n ariaHidden: true,\n ariaLabel: this.ariaLabel\n }).el;\n\n this.facetValue.selected ? checkbox.setAttribute('checked', 'checked') : checkbox.removeAttribute('checked');\n this.facetValue.excluded ? checkbox.setAttribute('disabled', 'disabled') : checkbox.removeAttribute('disabled');\n\n Component.pointElementsToDummyForm(checkbox);\n return checkbox;\n }\n\n protected buildValueStylishCheckbox(): HTMLElement {\n const checkbox = $$('div', {\n className: 'coveo-facet-value-checkbox',\n tabindex: 0\n }).el;\n checkbox.innerHTML = SVGIcons.icons.checkboxHookExclusionMore;\n SVGDom.addClassToSVGInContainer(checkbox, 'coveo-facet-value-checkbox-svg');\n this.addFocusAndBlurEventListeners(checkbox);\n return checkbox;\n }\n\n protected buildValueIcon(): HTMLElement {\n const icon = this.getValueIcon();\n if (Utils.exists(icon)) {\n return $$('img', {\n className: 'coveo-facet-value-icon coveo-icon',\n src: this.getValueIcon()\n }).el;\n } else {\n return this.buildValueIconFromSprite();\n }\n }\n\n protected getValueIcon(): string {\n if (Utils.exists(this.facet.options.valueIcon)) {\n return this.facet.options.valueIcon(this.facetValue);\n } else {\n return undefined;\n }\n }\n\n protected buildValueIconFromSprite(): HTMLElement {\n return $$('div', {\n className: 'coveo-facet-value-icon coveo-icon ' + this.facet.options.field.substr(1) + ' ' + this.facetValue.value\n }).el;\n }\n\n protected buildValueCaption(): HTMLElement {\n const valueCaption = $$('span', {\n className: 'coveo-facet-value-caption',\n title: this.caption,\n 'data-original-value': this.facetValue.value\n }).el;\n\n $$(valueCaption).text(this.caption);\n return valueCaption;\n }\n\n protected buildValueCount(): HTMLElement {\n if (Utils.isNonEmptyString(this.count)) {\n const countElement = $$('span', {\n className: 'coveo-facet-value-count'\n }).el;\n $$(countElement).text(this.count);\n return countElement;\n } else {\n return undefined;\n }\n }\n\n private get caption() {\n return this.facet.getValueCaption(this.facetValue);\n }\n\n private get count() {\n return this.facetValue.getFormattedCount();\n }\n\n private addFocusAndBlurEventListeners(elem: HTMLElement) {\n $$(elem).on('focus', () => $$(this.listItem).addClass('coveo-focused'));\n $$(elem).on('blur', () => $$(this.listItem).removeClass('coveo-focused'));\n }\n\n private buildListItem() {\n this.listItem = $$('li', { className: 'coveo-facet-value coveo-facet-selectable', ariaLabel: this.ariaLabel }).el;\n\n if (!$$(this.listItem).canHandleEvent('touchstart')) {\n $$(this.listItem).addClass('coveo-with-hover');\n }\n\n this.listItem.setAttribute('data-value', this.facetValue.value);\n }\n\n private initAndAppendLabel() {\n this.label = $$('label', { className: 'coveo-facet-value-label', role: 'group' }).el;\n this.tryToInitAndAppendComputedField();\n this.initAndAppendFacetValueLabelWrapper();\n this.listItem.appendChild(this.label);\n }\n\n private initAndAppendExcludeIcon() {\n this.excludeIcon = this.buildExcludeIcon();\n this.attachExcludeIconEventHandlers();\n this.listItem.appendChild(this.excludeIcon);\n }\n\n private attachExcludeIconEventHandlers() {\n $$(this.excludeIcon).on('mouseover', () => {\n $$(this.listItem).addClass('coveo-facet-value-will-exclude');\n });\n\n $$(this.excludeIcon).on('mouseout', () => {\n $$(this.listItem).removeClass('coveo-facet-value-will-exclude');\n });\n }\n\n private tryToInitAndAppendComputedField() {\n if (!Utils.exists(this.facetValue.computedField)) {\n return;\n }\n\n this.computedField = this.buildValueComputedField();\n\n if (!this.computedField) {\n return;\n }\n\n this.label.appendChild(this.computedField);\n $$(this.label).addClass('coveo-with-computed-field');\n }\n\n private initAndAppendFacetValueLabelWrapper() {\n this.facetValueLabelWrapper = $$('div', { className: 'coveo-facet-value-label-wrapper' }).el;\n\n this.initAndAppendCheckbox();\n this.initAndAppendStylishCheckbox();\n this.initAndAppendValueCaption();\n this.initAndAppendValueCount();\n\n this.label.appendChild(this.facetValueLabelWrapper);\n }\n\n private initAndAppendCheckbox() {\n this.checkbox = this.buildValueCheckbox();\n this.facetValueLabelWrapper.appendChild(this.checkbox);\n }\n\n private initAndAppendStylishCheckbox() {\n this.stylishCheckbox = this.buildValueStylishCheckbox();\n this.facetValueLabelWrapper.appendChild(this.stylishCheckbox);\n }\n\n private initAndAppendValueCount() {\n this.valueCount = this.buildValueCount();\n\n if (!this.valueCount) {\n return;\n }\n\n this.facetValueLabelWrapper.appendChild(this.valueCount);\n }\n\n private initAndAppendValueCaption() {\n this.valueCaption = this.buildValueCaption();\n this.facetValueLabelWrapper.appendChild(this.valueCaption);\n }\n\n private addAccessibilityAttributesToTargetElement() {\n const el = this.accessibleElement;\n el.setAttribute('aria-label', this.ariaLabel);\n el.setAttribute('role', 'button');\n el.setAttribute('aria-pressed', this.ariaPressed);\n }\n\n private get ariaLabel() {\n const resultCount = l('ResultCount', this.count, parseInt(this.count, 10));\n return `${l('IncludeValueWithResultCount', this.caption, resultCount)}`;\n }\n\n private get ariaPressed() {\n if (this.facetValue.excluded) {\n return 'mixed';\n }\n return this.facetValue.selected ? 'true' : 'false';\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Facet/ValueElementRenderer.ts","import { Facet } from './Facet';\nimport { FacetValue } from './FacetValue';\nimport { StringUtils } from '../../utils/StringUtils';\nimport { FacetSort } from './FacetSort';\nimport { IIndexFieldValue } from '../../rest/FieldValue';\nimport * as _ from 'underscore';\n\nexport class FacetValuesOrder {\n constructor(public facet: Facet, public facetSort: FacetSort) {}\n\n public reorderValues(facetValues: IIndexFieldValue[]): IIndexFieldValue[];\n public reorderValues(facetValues: FacetValue[]): FacetValue[];\n public reorderValues(facetValues: any[]): FacetValue[] | IIndexFieldValue[] {\n if (this.facetSort && this.facetSort.activeSort) {\n if (this.usingCustomSort) {\n return this.reorderValuesWithCustomOrder(facetValues);\n }\n\n if (this.usingAlphabeticalSort) {\n return this.reorderValuesWithCustomCaption(facetValues);\n }\n }\n return facetValues;\n }\n\n public reorderValuesIfUsingCustomSort(values: FacetValue[]) {\n return this.usingCustomSort ? this.reorderValuesWithCustomOrder(values) : values;\n }\n\n public reorderValuesIfUsingAlphabeticalSort(values: FacetValue[]) {\n return this.usingAlphabeticalSort ? this.reorderValuesWithCustomCaption(values) : values;\n }\n\n private get usingCustomSort() {\n return this.facetSort.activeSort.name == 'custom' && this.facet.options.customSort != undefined;\n }\n\n private get usingAlphabeticalSort() {\n return this.facetSort.activeSort.name.indexOf('alpha') != -1;\n }\n\n private reorderValuesWithCustomOrder(facetValues: FacetValue[]) {\n let customSortsLowercase = _.map(this.facet.options.customSort, customSort => customSort.toLowerCase());\n let valueIndexPair = _.map(facetValues, (facetValue, i) => {\n // Get the index of the current value in the custom sort array.\n // If it's not found, put it's index to it's original value + the length of customSort so that's always after the specified custom sort order.\n let index = _.findIndex(customSortsLowercase, customSort => {\n return (\n StringUtils.equalsCaseInsensitive(customSort, facetValue.value) ||\n (facetValue.lookupValue != null && StringUtils.equalsCaseInsensitive(customSort, facetValue.lookupValue))\n );\n });\n if (index == -1) {\n index = i + customSortsLowercase.length;\n }\n return { facetValue: facetValue, index: index };\n });\n let sorted = _.sortBy(valueIndexPair, 'index');\n sorted = this.facetSort.customSortDirection == 'ascending' ? sorted : sorted.reverse();\n return _.pluck(sorted, 'facetValue');\n }\n\n private reorderValuesWithCustomCaption(facetValues: FacetValue[]) {\n let sorted = facetValues.sort((firstValue, secondValue) => {\n return this.facet.getValueCaption(firstValue).localeCompare(this.facet.getValueCaption(secondValue), String['locale'], {\n sensitivity: 'base'\n });\n });\n if (this.facetSort.activeSort.name.indexOf('descending') != -1) {\n sorted = sorted.reverse();\n }\n return sorted;\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Facet/FacetValuesOrder.ts","import { $$, Dom } from '../../utils/Dom';\nimport { SVGIcons } from '../../utils/SVGIcons';\nimport { SVGDom } from '../../utils/SVGDom';\nimport { Component } from '../Base/Component';\nimport { l } from '../../strings/Strings';\nimport { EventsUtils } from '../../utils/EventsUtils';\nimport { IFacetSearch } from './IFacetSearch';\nimport { FacetSearchUserInputHandler } from './FacetSearchUserInputHandler';\nimport { uniqueId } from 'underscore';\nimport { ISearchDropdownNavigator, ISearchDropdownConfig } from './FacetSearchDropdownNavigation/DefaultSearchDropdownNavigator';\nimport { SearchDropdownNavigatorFactory } from './FacetSearchDropdownNavigation/SearchDropdownNavigatorFactory';\nimport { KEYBOARD } from '../../utils/KeyboardUtils';\n\nexport class FacetSearchElement {\n public search: HTMLElement | undefined;\n public magnifier: HTMLElement | undefined;\n public wait: HTMLElement | undefined;\n public clear: HTMLElement | undefined;\n public input: HTMLInputElement | undefined;\n public combobox: HTMLElement | undefined;\n public searchBarIsAnimating: boolean = false;\n public searchResults: HTMLElement;\n public facetSearchUserInputHandler: FacetSearchUserInputHandler;\n\n private triggeredScroll = false;\n private facetSearchId = uniqueId('coveo-facet-search-results');\n private facetValueNotFoundId = uniqueId('coveo-facet-value-not-found');\n private searchDropdownNavigator: ISearchDropdownNavigator;\n\n constructor(private facetSearch: IFacetSearch) {\n this.facetSearchUserInputHandler = new FacetSearchUserInputHandler(this.facetSearch);\n this.initSearchResults();\n }\n\n public build(handleFacetSearchClear?: () => void) {\n this.search = document.createElement('div');\n $$(this.search).addClass('coveo-facet-search');\n\n this.magnifier = this.buildMagnifierIcon();\n this.search.appendChild(this.magnifier);\n\n this.wait = this.buildWaitIcon();\n this.search.appendChild(this.wait);\n\n this.hideFacetSearchWaitingAnimation();\n\n this.clear = $$('div', { className: 'coveo-facet-search-clear', title: l('Clear', l('Search')) }, SVGIcons.icons.clear).el;\n SVGDom.addClassToSVGInContainer(this.clear, 'coveo-facet-search-clear-svg');\n this.clear.style.display = 'none';\n this.search.appendChild(this.clear);\n\n this.combobox = this.buildCombobox();\n this.search.appendChild(this.combobox);\n\n this.input = this.buildInputElement();\n Component.pointElementsToDummyForm(this.input);\n this.combobox.appendChild(this.input);\n\n $$(this.input).on('keyup', (e: KeyboardEvent) => {\n this.facetSearchUserInputHandler.handleKeyboardEvent(e);\n });\n $$(this.clear).on('click', (e: Event) => {\n handleFacetSearchClear && handleFacetSearchClear();\n });\n $$(this.input).on('focus', (e: Event) => {\n this.handleFacetSearchFocus();\n });\n $$(this.input).on('blur', (e: FocusEvent) => this.onInputBlur(e));\n\n this.detectSearchBarAnimation();\n this.initSearchDropdownNavigator();\n\n return this.search;\n }\n\n private initSearchResults() {\n this.searchResults = $$('ul', { id: this.facetSearchId, className: 'coveo-facet-search-results', role: 'listbox' }).el;\n $$(this.searchResults).on('scroll', () => this.handleScrollEvent());\n $$(this.searchResults).on('keyup', (e: KeyboardEvent) => {\n if (e.which === KEYBOARD.ESCAPE) {\n this.facetSearch.dismissSearchResults();\n }\n });\n $$(this.searchResults).on('focusout', (event: FocusEvent) => this.onSearchResultsFocusOut(event));\n $$(this.searchResults).hide();\n }\n\n private onInputBlur(e: FocusEvent) {\n const target = e.relatedTarget as HTMLElement;\n const isUsingKeyboard = !!target;\n const focusedOnSearchResult = this.searchResults.contains(target);\n\n if (isUsingKeyboard && !focusedOnSearchResult) {\n this.facetSearch.dismissSearchResults();\n }\n }\n\n private onSearchResultsFocusOut(e: FocusEvent) {\n const target = e.relatedTarget as HTMLElement;\n const isUsingKeyboard = !!target;\n const focusedOnInput = this.input.contains(target);\n const focusedOnSearchResult = this.searchResults.contains(target);\n\n if (isUsingKeyboard && !focusedOnInput && !focusedOnSearchResult) {\n this.facetSearch.dismissSearchResults();\n }\n }\n\n private initSearchDropdownNavigator() {\n const config: ISearchDropdownConfig = {\n input: this.input,\n searchResults: this.searchResults,\n setScrollTrigger: (val: boolean) => (this.triggeredScroll = val)\n };\n\n this.searchDropdownNavigator = SearchDropdownNavigatorFactory(this.facetSearch, config);\n }\n\n private buildCombobox() {\n return $$('div', {\n className: 'coveo-facet-search-middle',\n ariaHaspopup: 'listbox',\n ariaExpanded: 'true'\n }).el;\n }\n\n public showFacetSearchWaitingAnimation() {\n this.magnifier && $$(this.magnifier).hide();\n $$(this.wait).show();\n }\n\n public getValueInInputForFacetSearch() {\n return this.input.value.trim();\n }\n\n public hideFacetSearchWaitingAnimation() {\n $$(this.magnifier).show();\n $$(this.wait).hide();\n }\n\n public detectSearchBarAnimation() {\n EventsUtils.addPrefixedEvent(this.search, 'AnimationStart', event => {\n if (event.animationName == 'grow') {\n this.searchBarIsAnimating = true;\n }\n });\n\n EventsUtils.addPrefixedEvent(this.search, 'AnimationEnd', event => {\n if (event.animationName == 'grow') {\n this.searchBarIsAnimating = false;\n }\n });\n }\n\n public positionSearchResults() {\n if (this.searchResults != null) {\n $$(this.searchResults).insertAfter(this.search);\n $$(this.searchResults).show();\n\n if ($$(this.searchResults).css('display') == 'none') {\n this.searchResults.style.display = '';\n }\n let searchBar = $$(this.search);\n if (searchBar.css('display') == 'none' || this.searchBarIsAnimating) {\n if ($$(this.searchResults).css('display') == 'none') {\n this.searchResults.style.display = '';\n }\n EventsUtils.addPrefixedEvent(this.search, 'AnimationEnd', () => {\n EventsUtils.removePrefixedEvent(this.search, 'AnimationEnd', this);\n });\n }\n }\n this.addAriaAttributes();\n }\n\n public setAsCurrentResult(toSet: Dom) {\n this.searchDropdownNavigator.setAsCurrentResult(toSet);\n }\n\n public get currentResult() {\n return this.searchDropdownNavigator.currentResult;\n }\n\n public moveCurrentResultDown() {\n this.searchDropdownNavigator.focusNextElement();\n }\n\n public moveCurrentResultUp() {\n this.searchDropdownNavigator.focusPreviousElement();\n }\n\n public highlightCurrentQueryInSearchResults(regex: RegExp) {\n const captions = this.facetSearch.getCaptions();\n captions.forEach(caption => {\n caption.innerHTML = $$(caption).text().replace(regex, '$1');\n });\n }\n\n public appendToSearchResults(el: HTMLElement) {\n this.searchResults.appendChild(el);\n this.setupFacetSearchResultsEvents(el);\n }\n\n public emptyAndShowNoResults() {\n $$(this.searchResults).empty();\n this.searchResults.appendChild(\n $$(\n 'li',\n { id: this.facetValueNotFoundId, className: 'coveo-facet-value-not-found', role: 'option', ariaSelected: 'true', tabindex: 0 },\n l('NoValuesFound')\n ).el\n );\n this.input.setAttribute('aria-activedescendant', this.facetValueNotFoundId);\n }\n\n public updateAriaLiveWithResults(inputValue: string, numberOfResults: number, moreValuesToFetch: boolean) {\n let ariaLiveText =\n inputValue === ''\n ? l('ShowingResults', numberOfResults, inputValue, numberOfResults)\n : l('ShowingResultsWithQuery', numberOfResults, inputValue, numberOfResults);\n\n if (moreValuesToFetch) {\n ariaLiveText = `${ariaLiveText} (${l('MoreValuesAvailable')})`;\n }\n\n this.facetSearch.updateAriaLive(ariaLiveText);\n }\n\n public focus() {\n this.input.focus();\n this.handleFacetSearchFocus();\n }\n\n private handleFacetSearchFocus() {\n if (this.facetSearch.currentlyDisplayedResults == null) {\n this.facetSearch.displayNewValues();\n this.addAriaAttributes();\n }\n }\n\n private setupFacetSearchResultsEvents(el: HTMLElement) {\n $$(el).on('mousemove', () => {\n this.setAsCurrentResult($$(el));\n });\n\n // Prevent closing the search results on the end of a touch drag\n let touchDragging = false;\n let mouseDragging = false;\n $$(el).on('mousedown', () => (mouseDragging = false));\n $$(el).on('mousemove', () => (mouseDragging = true));\n $$(el).on('touchmove', () => (touchDragging = true));\n\n $$(el).on('mouseup touchend', () => {\n if (!touchDragging && !mouseDragging) {\n setTimeout(() => {\n this.facetSearch.dismissSearchResults();\n }, 0); // setTimeout is to give time to trigger the click event before hiding the search menu.\n }\n touchDragging = false;\n mouseDragging = false;\n });\n }\n\n public hideSearchResultsElement() {\n this.removeAriaAttributes();\n $$(this.searchResults).hide();\n $$(this.searchResults).remove();\n }\n\n public clearSearchInput() {\n if (this.input) {\n this.input.value = '';\n }\n }\n\n private buildMagnifierIcon() {\n const magnifier = document.createElement('div');\n magnifier.innerHTML = SVGIcons.icons.search;\n $$(magnifier).addClass('coveo-facet-search-magnifier');\n SVGDom.addClassToSVGInContainer(magnifier, 'coveo-facet-search-magnifier-svg');\n this.search.appendChild(magnifier);\n return magnifier;\n }\n\n private buildWaitIcon() {\n const wait = document.createElement('div');\n wait.innerHTML = SVGIcons.icons.loading;\n $$(wait).addClass('coveo-facet-search-wait-animation');\n SVGDom.addClassToSVGInContainer(wait, 'coveo-facet-search-wait-animation-svg');\n return wait;\n }\n\n private buildInputElement() {\n return $$('input', {\n className: 'coveo-facet-search-input',\n type: 'text',\n autocapitalize: 'off',\n autocorrect: 'off',\n ariaLabel: l('SearchFacetResults', this.facetSearch.facetTitle),\n ariaHaspopup: 'true',\n ariaAutocomplete: 'list'\n }).el;\n }\n\n private handleScrollEvent() {\n if (this.triggeredScroll) {\n this.triggeredScroll = false;\n } else {\n this.facetSearchUserInputHandler.handleFacetSearchResultsScroll();\n }\n }\n\n private addAriaAttributes() {\n if (!this.input || !this.combobox) {\n return;\n }\n\n this.combobox.setAttribute('role', 'combobox');\n this.combobox.setAttribute('aria-owns', this.facetSearchId);\n this.input.setAttribute('aria-controls', this.facetSearchId);\n this.input.setAttribute('aria-expanded', 'true');\n this.facetSearch.setExpandedFacetSearchAccessibilityAttributes(this.searchResults);\n }\n\n private removeAriaAttributes() {\n if (!this.input || !this.combobox) {\n return;\n }\n\n this.combobox.removeAttribute('role');\n this.combobox.removeAttribute('aria-owns');\n this.input.removeAttribute('aria-controls');\n this.input.removeAttribute('aria-activedescendant');\n this.input.setAttribute('aria-expanded', 'false');\n this.facetSearch.setCollapsedFacetSearchAccessibilityAttributes();\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Facet/FacetSearchElement.ts","import { first, last } from 'underscore';\nimport { $$, Dom } from '../../../utils/Dom';\n\nexport interface ISearchDropdownNavigator {\n focusNextElement: () => void;\n focusPreviousElement: () => void;\n currentResult: Dom;\n setAsCurrentResult: (el: Dom) => void;\n}\n\nexport interface ISearchDropdownConfig {\n input: HTMLInputElement;\n searchResults: HTMLElement;\n setScrollTrigger: (value: boolean) => void;\n}\n\nexport class DefaultSearchDropdownNavigator implements ISearchDropdownNavigator {\n public currentResult: Dom;\n\n constructor(private config: ISearchDropdownConfig) {}\n\n public setAsCurrentResult(toSet: Dom) {\n this.currentResult && this.currentResult.removeClass('coveo-facet-search-current-result');\n this.currentResult = toSet;\n toSet.addClass('coveo-facet-search-current-result');\n this.updateSelectedOption(toSet);\n }\n\n public focusNextElement() {\n this.moveCurrentResultDown();\n }\n\n public focusPreviousElement() {\n this.moveCurrentResultUp();\n }\n\n public moveCurrentResultDown() {\n let nextResult = this.currentResult.el.nextElementSibling;\n if (!nextResult) {\n nextResult = first(this.searchResults.children);\n }\n this.setAsCurrentResult($$(nextResult));\n this.highlightAndShowCurrentResultWithKeyboard();\n }\n\n public moveCurrentResultUp() {\n let previousResult = this.currentResult.el.previousElementSibling;\n if (!previousResult) {\n previousResult = last(this.searchResults.children);\n }\n this.setAsCurrentResult($$(previousResult));\n this.highlightAndShowCurrentResultWithKeyboard();\n }\n\n private highlightAndShowCurrentResultWithKeyboard() {\n this.currentResult.addClass('coveo-facet-search-current-result');\n this.config.setScrollTrigger(true);\n this.searchResults.scrollTop = this.currentResult.el.offsetTop;\n }\n\n private get searchResults() {\n return this.config.searchResults;\n }\n\n private updateSelectedOption(option: Dom) {\n this.config.input.setAttribute('aria-activedescendant', option.getAttribute('id'));\n\n const previouslySelectedOption = $$(this.searchResults).find('[aria-selected^=\"true\"]');\n previouslySelectedOption && previouslySelectedOption.setAttribute('aria-selected', 'false');\n\n option.setAttribute('aria-selected', 'true');\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Facet/FacetSearchDropdownNavigation/DefaultSearchDropdownNavigator.ts","import { Dom } from '../../utils/Dom';\nimport { CategoryFacetTemplates } from './CategoryFacetTemplates';\nimport { CategoryValue, CategoryValueParent } from './CategoryValue';\nimport { CategoryFacet } from './CategoryFacet';\nimport { ICategoryFacetValue } from '../../rest/CategoryFacetValue';\nimport { each } from 'underscore';\n\nexport class CategoryChildrenValueRenderer {\n public children: CategoryValue[] = [];\n\n constructor(\n private element: Dom,\n private categoryFacetTemplates: CategoryFacetTemplates,\n private categoryValue: CategoryValueParent,\n private categoryFacet: CategoryFacet\n ) {}\n\n public clearChildren() {\n this.element.removeClass('coveo-active-category-facet-parent');\n this.children.forEach(child => {\n child.clear();\n });\n this.children = [];\n }\n\n public renderChildren(values: ICategoryFacetValue[]) {\n each(values, value => {\n this.renderValue(value, true).makeSelectable();\n });\n }\n\n public renderAsParent(value: ICategoryFacetValue) {\n const categoryValue = this.renderValue(value, false);\n return categoryValue;\n }\n\n private renderValue(value: ICategoryFacetValue, isChild: boolean) {\n const path = this.categoryValue.path.concat([value.value]);\n const categoryValueDescriptor = {\n value: value.value,\n count: value.numberOfResults,\n path\n };\n const categoryValue = new CategoryValue(\n this.categoryValue.listRoot,\n categoryValueDescriptor,\n this.categoryFacetTemplates,\n this.categoryFacet\n );\n categoryValue.render(isChild);\n this.children.push(categoryValue);\n return categoryValue;\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/CategoryFacet/CategoryValueChildrenRenderer.ts","import Popper from 'popper.js';\nimport 'styling/_FacetSettings';\nimport { compact, contains, each, escape, filter, find, findWhere, map } from 'underscore';\nimport { InitializationEvents } from '../../events/InitializationEvents';\nimport { QueryStateModel } from '../../models/QueryStateModel';\nimport { l } from '../../strings/Strings';\nimport { AccessibleButton } from '../../utils/AccessibleButton';\nimport { $$ } from '../../utils/Dom';\nimport { KEYBOARD, KeyboardUtils } from '../../utils/KeyboardUtils';\nimport { LocalStorageUtils } from '../../utils/LocalStorageUtils';\nimport { SVGDom } from '../../utils/SVGDom';\nimport { SVGIcons } from '../../utils/SVGIcons';\nimport { Utils } from '../../utils/Utils';\nimport { analyticsActionCauseList, IAnalyticsFacetMeta } from '../Analytics/AnalyticsActionListMeta';\nimport { Facet } from './Facet';\nimport { FacetSort, IFacetSortDescription } from './FacetSort';\n\nexport interface IFacetSettingsKlass {\n new (sorts: string[], facet: Facet): FacetSettings;\n}\n\nexport interface IFacetState {\n included: string[];\n excluded: string[];\n operator: string;\n}\n\n/**\n * Handle the rendering of the {@link Facet} settings menu (typically the ... in the facet header).\n */\nexport class FacetSettings extends FacetSort {\n public loadedFromSettings: { [attribute: string]: any };\n public settingsButton: HTMLElement;\n public settingsPopup: HTMLElement;\n\n private facetStateLocalStorage: LocalStorageUtils;\n private includedStateAttribute: string;\n private excludedStateAttribute: string;\n private operatorStateAttribute: string;\n private directionSection: HTMLElement[];\n private saveStateSection: HTMLElement;\n private clearStateSection: HTMLElement;\n private hideSection: HTMLElement;\n private showSection: HTMLElement;\n private sortSection: { element: HTMLElement; sortItems: HTMLElement[] };\n private customSortDirectionChange = false;\n private onDocumentClick = () => this.close();\n private closeTimeout: number;\n private enabledSortsIgnoreRenderBecauseOfPairs: IFacetSortDescription[] = [];\n\n private get isExpanded() {\n return this.settingsButton && this.settingsButton.getAttribute('aria-expanded') === `${true}`;\n }\n\n private set isExpanded(expanded: boolean) {\n this.settingsButton.setAttribute('aria-expanded', `${expanded}`);\n }\n\n private get firstFocusablePopupElement() {\n return find($$(this.settingsPopup).findAll('[tabindex]'), element => element.tabIndex >= 0);\n }\n\n constructor(public sorts: string[], public facet: Facet) {\n super(sorts, facet);\n this.filterDuplicateForRendering();\n }\n\n /**\n * Build the menu, hook click events.\n * @returns {HTMLElement}\n */\n public build() {\n this.buildSettingsButton();\n this.buildSettingsPopup();\n\n if (Utils.isNonEmptyArray(this.enabledSorts)) {\n this.sortSection = this.buildSortSection();\n if (this.enabledSortsAllowDirection()) {\n this.directionSection = this.buildDirectionSection();\n }\n }\n if (this.facet.options.enableSettingsFacetState) {\n this.saveStateSection = this.buildSaveStateSection();\n this.clearStateSection = this.buildClearStateSection();\n }\n if (this.facet.options.enableCollapse) {\n this.hideSection = this.buildHideSection();\n this.showSection = this.buildShowSection();\n }\n\n const appendCommon = () => {\n this.appendIfNotUndefined(this.saveStateSection);\n this.appendIfNotUndefined(this.clearStateSection);\n this.appendIfNotUndefined(this.hideSection);\n this.appendIfNotUndefined(this.showSection);\n };\n\n this.addOnDocumentClickHandler();\n this.addOnNukeHandler();\n\n if (Utils.isNonEmptyArray(this.enabledSorts)) {\n this.settingsPopup.appendChild(this.sortSection.element);\n each(this.directionSection, d => {\n this.appendIfNotUndefined(d);\n });\n appendCommon();\n } else {\n appendCommon();\n }\n return this.settingsButton;\n }\n\n /**\n * Restore the facet state from local storage, and apply it in the query state model.\n */\n public loadSavedState() {\n if (this.facetStateLocalStorage) {\n // set the state from the settings only if there is nothing\n // in the query state model for the current facet\n const state = this.facetStateLocalStorage.load();\n const currentStateIncluded = this.facet.queryStateModel.get(this.includedStateAttribute);\n const currentStateExcluded = this.facet.queryStateModel.get(this.excludedStateAttribute);\n const currentStateOperator = this.facet.queryStateModel.get(this.operatorStateAttribute);\n if (\n !Utils.isNullOrUndefined(state) &&\n Utils.isEmptyArray(currentStateIncluded) &&\n Utils.isEmptyArray(currentStateExcluded) &&\n !Utils.isNonEmptyString(currentStateOperator)\n ) {\n const toSet: { [key: string]: any } = {};\n toSet[this.includedStateAttribute] = state.included;\n toSet[this.excludedStateAttribute] = state.excluded;\n toSet[this.operatorStateAttribute] = state.operator;\n this.facet.queryStateModel.setMultiple(toSet);\n this.loadedFromSettings = toSet;\n }\n } else {\n this.facet.logger.info('Facet state local storage not enabled : See Facet.options.enableSettingsFacetState');\n }\n }\n\n /**\n * Take the current state of the facet and save it in the local storage.\n */\n public saveState() {\n if (this.facetStateLocalStorage) {\n this.facetStateLocalStorage.save({\n included: this.facet.queryStateModel.get(this.includedStateAttribute),\n excluded: this.facet.queryStateModel.get(this.excludedStateAttribute),\n operator: this.facet.queryStateModel.get(this.operatorStateAttribute)\n });\n } else {\n this.facet.logger.info('Facet state local storage not enabled : See Facet.options.enableSettingsFacetState');\n }\n }\n\n /**\n * Close the settings menu\n */\n public close() {\n if (!this.isExpanded) {\n return;\n }\n this.isExpanded = false;\n $$(this.settingsPopup).detach();\n }\n\n /**\n * Open the settings menu\n */\n public open() {\n $$(this.settingsPopup).insertAfter(this.settingsButton);\n new Popper(this.settingsButton, this.settingsPopup);\n\n this.isExpanded = true;\n\n if (this.hideSection && this.showSection) {\n $$(this.hideSection).toggle(!$$(this.facet.element).hasClass('coveo-facet-collapsed'));\n $$(this.showSection).toggle($$(this.facet.element).hasClass('coveo-facet-collapsed'));\n }\n\n if (this.facet.options.enableSettingsFacetState) {\n $$(this.clearStateSection).toggle(!Utils.isNullOrUndefined(this.facetStateLocalStorage.load()));\n }\n\n each(this.enabledSorts, (criteria: IFacetSortDescription, i) => {\n if (this.activeSort.name == criteria.name.toLowerCase()) {\n this.selectItem(this.getSortItem(criteria.name));\n } else {\n this.unselectItem(this.getSortItem(criteria.name));\n }\n });\n\n const elementToFocus = this.firstFocusablePopupElement;\n if (elementToFocus) {\n elementToFocus.focus();\n }\n }\n\n public getSortItem(sortName: string): HTMLElement {\n return find(this.sortSection.sortItems, sortItem => {\n return $$(sortItem).getAttribute('data-sort-name').toLowerCase() == sortName.replace('ascending|descending', '').toLowerCase();\n });\n }\n\n public get button() {\n return this.settingsButton;\n }\n\n private buildSettingsButton() {\n this.settingsButton = $$('div', { className: 'coveo-facet-header-settings', 'aria-haspopup': 'true' }).el;\n this.settingsButton.innerHTML = SVGIcons.icons.more;\n SVGDom.addClassToSVGInContainer(this.settingsButton, 'coveo-facet-settings-more-svg');\n\n this.hideElementOnMouseEnterLeave(this.settingsButton);\n\n this.isExpanded = false;\n\n new AccessibleButton()\n .withElement(this.settingsButton)\n .withLabel(l('Settings'))\n .withClickAction(e => this.handleSettingsButtonClick(e))\n .withEnterKeyboardAction(e => this.handleSettingsButtonClick(e))\n .build();\n }\n\n private hideElementOnMouseEnterLeave(el: HTMLElement) {\n const mouseLeave = () => (this.closeTimeout = window.setTimeout(() => this.close(), 300));\n const mouseEnter = () => clearTimeout(this.closeTimeout);\n\n $$(el).on('mouseleave', mouseLeave);\n $$(el).on('mouseenter', mouseEnter);\n $$(el).on(\n 'keyup',\n KeyboardUtils.keypressAction(KEYBOARD.ESCAPE, () => this.handleKeyboardClose())\n );\n }\n\n private handleKeyboardClose() {\n this.close();\n this.settingsButton.focus();\n }\n\n private buildSettingsPopup() {\n this.settingsPopup = $$('div', { className: 'coveo-facet-settings-popup' }).el;\n this.hideElementOnMouseEnterLeave(this.settingsPopup);\n $$(this.settingsPopup).on('focusout', (e: FocusEvent) => {\n if (e.relatedTarget && this.settingsPopup.contains(e.relatedTarget as Node)) {\n return;\n }\n this.close();\n });\n }\n\n private buildSortSection() {\n const sortSection = this.buildSection('coveo-facet-settings-section-sort');\n const sortSectionIcon = this.buildIcon('coveo-facet-settings-section-sort-svg', SVGIcons.icons.sort);\n const sortSectionItems = this.buildItems();\n\n const sortTitle = document.createElement('div');\n $$(sortTitle).addClass('coveo-facet-settings-section-sort-title');\n $$(sortTitle).text(l('SortBy') + ' :');\n sortSectionItems.appendChild(sortTitle);\n\n const sortItems = this.buildSortSectionItems();\n each(sortItems, s => {\n sortSectionItems.appendChild(s);\n });\n sortSection.appendChild(sortSectionIcon);\n sortSection.appendChild(sortSectionItems);\n return { element: sortSection, sortItems: sortItems };\n }\n\n private buildSortSectionItems() {\n let elems = map(this.enabledSorts, enabledSort => {\n if (contains(this.enabledSortsIgnoreRenderBecauseOfPairs, enabledSort)) {\n return undefined;\n } else {\n const elem = this.buildItem(l(enabledSort.label), enabledSort.description);\n $$(elem).setAttribute('data-sort-name', enabledSort.name.toLowerCase().replace('ascending|descending', ''));\n\n new AccessibleButton()\n .withElement(elem)\n .withSelectAction((e: Event) => this.handleClickSortButton(e, enabledSort))\n .withLabel(enabledSort.label)\n .build();\n\n return elem;\n }\n });\n elems = compact(elems);\n return elems;\n }\n\n private closePopupAndUpdateSort() {\n this.close();\n if (this.activeSort.name != 'custom') {\n this.facet.updateSort(this.activeSort.name);\n } else {\n this.facet.updateSort('nosort');\n if (this.customSortDirectionChange) {\n this.customSortDirectionChange = false;\n this.facet.queryController.executeQuery();\n }\n }\n }\n\n private enabledSortsAllowDirection() {\n const allEnabledSortsWithPossibleDirectionToggle = filter(this.enabledSorts, (facetSortDescription: IFacetSortDescription) => {\n return facetSortDescription.directionToggle;\n });\n const allowToggle = filter(allEnabledSortsWithPossibleDirectionToggle, possibleDirectionToggle => {\n return findWhere(this.enabledSorts, { name: possibleDirectionToggle.relatedSort }) != undefined;\n });\n return allowToggle.length > 0;\n }\n\n private buildDirectionSection() {\n const directionAscendingSection = this.buildAscendingOrDescendingSection('Ascending');\n const iconAscending = this.buildIcon('coveo-facet-settings-section-direction-ascending-svg', SVGIcons.icons.ascending);\n const iconDescending = this.buildIcon('coveo-facet-settings-section-direction-descending-svg', SVGIcons.icons.descending);\n const directionItemsAscending = this.buildItems();\n const ascending = this.buildAscendingOrDescending('Ascending');\n\n directionItemsAscending.appendChild(ascending);\n directionAscendingSection.appendChild(iconAscending);\n directionAscendingSection.appendChild(directionItemsAscending);\n new AccessibleButton()\n .withElement(ascending)\n .withoutLabelOrTitle()\n .withSelectAction(() => this.handleDirectionClick(ascending, 'ascending'))\n .build();\n this.unselectSection(directionAscendingSection);\n\n const directionDescendingSection = this.buildAscendingOrDescendingSection('Descending');\n const directionItemsDescending = this.buildItems();\n const descending = this.buildAscendingOrDescending('Descending');\n\n directionItemsDescending.appendChild(descending);\n directionDescendingSection.appendChild(iconDescending);\n directionDescendingSection.appendChild(directionItemsDescending);\n new AccessibleButton()\n .withElement(descending)\n .withoutLabelOrTitle()\n .withSelectAction(() => this.handleDirectionClick(descending, 'descending'))\n .build();\n this.unselectSection(directionDescendingSection);\n\n if (!this.activeSort.directionToggle) {\n $$(directionAscendingSection).addClass('coveo-facet-settings-disabled');\n $$(directionDescendingSection).addClass('coveo-facet-settings-disabled');\n } else {\n this.selectItem(this.getItems(directionAscendingSection)[0]);\n }\n return [directionAscendingSection, directionDescendingSection];\n }\n\n private buildSaveStateSection() {\n const saveStateSection = this.buildSection('coveo-facet-settings-section-save-state');\n const icon = this.buildIcon('coveo-facet-settings-section-save-state-svg', SVGIcons.icons.dropdownMore);\n const saveStateItems = this.buildItems();\n\n this.facetStateLocalStorage = new LocalStorageUtils('facet-state-' + this.facet.options.id);\n this.includedStateAttribute = QueryStateModel.getFacetId(this.facet.options.id);\n this.excludedStateAttribute = QueryStateModel.getFacetId(this.facet.options.id, false);\n this.operatorStateAttribute = QueryStateModel.getFacetOperator(this.facet.options.id);\n\n const saveStateItem = document.createElement('div');\n $$(saveStateItem).addClass('coveo-facet-settings-item');\n saveStateItem.setAttribute('title', l('SaveFacetState'));\n $$(saveStateItem).text(l('SaveFacetState'));\n saveStateItems.appendChild(saveStateItem);\n\n saveStateSection.appendChild(icon);\n saveStateSection.appendChild(saveStateItems);\n new AccessibleButton()\n .withElement(saveStateSection)\n .withSelectAction(() => this.handleSaveStateClick())\n .withoutLabelOrTitle()\n .build();\n\n return saveStateSection;\n }\n\n private buildClearStateSection() {\n const clearStateSection = this.buildSection('coveo-facet-settings-section-clear-state');\n const icon = this.buildIcon('coveo-facet-settings-section-clear-state-svg', SVGIcons.icons.dropdownLess);\n const clearStateItems = this.buildItems();\n const clearStateItem = this.buildItem(l('ClearFacetState'));\n clearStateItems.appendChild(clearStateItem);\n clearStateSection.appendChild(icon);\n clearStateSection.appendChild(clearStateItems);\n new AccessibleButton()\n .withElement(clearStateSection)\n .withSelectAction(() => this.handleClearStateClick())\n .withoutLabelOrTitle()\n .build();\n\n return clearStateSection;\n }\n\n private buildHideSection() {\n const hideSection = this.buildSection('coveo-facet-settings-section-hide');\n const icon = this.buildIcon('coveo-facet-settings-section-hide-svg', SVGIcons.icons.facetCollapse);\n const hideItems = this.buildItems();\n const hideItem = this.buildItem(l('Collapse'));\n hideItems.appendChild(hideItem);\n\n hideSection.appendChild(icon);\n hideSection.appendChild(hideItems);\n new AccessibleButton()\n .withElement(hideSection)\n .withSelectAction(() => {\n this.facet.facetHeader.collapseFacet();\n this.close();\n })\n .withLabel(l('CollapseFacet', this.facet.options.title))\n .build();\n\n return hideSection;\n }\n\n private buildShowSection() {\n const showSection = this.buildSection('coveo-facet-settings-section-show');\n const icon = this.buildIcon('coveo-facet-settings-section-show-svg', SVGIcons.icons.facetExpand);\n const showItems = this.buildItems();\n const showItem = this.buildItem(l('Expand'));\n showItems.appendChild(showItem);\n\n showSection.appendChild(icon);\n showSection.appendChild(showItems);\n\n new AccessibleButton()\n .withElement(showSection)\n .withSelectAction(() => {\n this.facet.facetHeader.expandFacet();\n this.close();\n })\n .withLabel(l('ExpandFacet', this.facet.options.title))\n .build();\n\n return showSection;\n }\n\n private buildIcon(iconClass?: string, svgIcon?: string) {\n if (iconClass && svgIcon) {\n const icon = $$('div', { className: 'coveo-icon-container' }, svgIcon);\n SVGDom.addClassToSVGInContainer(icon.el, iconClass);\n return icon.el;\n } else {\n return $$('div', { className: 'coveo-icon' }).el;\n }\n }\n\n private buildAscendingOrDescending(direction: string) {\n const elem = this.buildItem(l(direction));\n elem.setAttribute('aria-disabled', 'true');\n elem.setAttribute('data-direction', direction.toLowerCase());\n return elem;\n }\n\n private buildAscendingOrDescendingSection(direction: string) {\n return this.buildSection('coveo-facet-settings-section-direction-' + direction.toLowerCase());\n }\n\n private buildItem(label: string, title = label) {\n return $$(\n 'div',\n {\n className: 'coveo-facet-settings-item',\n title: title\n },\n escape(label)\n ).el;\n }\n\n private buildItems() {\n const elem = document.createElement('div');\n $$(elem).addClass('coveo-facet-settings-items');\n return elem;\n }\n\n private buildSection(className: string) {\n const section = document.createElement('div');\n $$(section).addClass(['coveo-facet-settings-section', className]);\n return section;\n }\n\n private handleSettingsButtonClick(event: Event) {\n event.stopPropagation();\n const settingsPopupIsOpen = !Utils.isNullOrUndefined(this.settingsPopup.parentElement);\n settingsPopupIsOpen ? this.close() : this.open();\n }\n\n private handleClickSortButton(e: Event, enabledSort: IFacetSortDescription) {\n if (this.activeSort != enabledSort && this.activeSort.relatedSort != enabledSort.name) {\n this.activeSort = enabledSort;\n if (enabledSort.directionToggle && contains(this.enabledSorts, FacetSettings.availableSorts[this.activeSort.relatedSort])) {\n this.activateDirectionSection();\n } else {\n this.disableDirectionSection();\n }\n this.unselectSection(this.sortSection.element);\n this.selectItem(e.target);\n this.closePopupAndUpdateSort();\n }\n }\n\n private handleDirectionClick(item: HTMLElement, direction: string) {\n if (item.getAttribute('aria-disabled') === 'false' && this.activeSort.name.indexOf(direction) === -1) {\n this.activeSort = FacetSettings.availableSorts[this.activeSort.relatedSort];\n each(this.directionSection, d => {\n this.unselectSection(d);\n });\n this.selectItem(item);\n if (this.activeSort.name == 'custom' && this.customSortDirection != direction) {\n this.customSortDirection = direction;\n this.customSortDirectionChange = true;\n }\n this.closePopupAndUpdateSort();\n }\n }\n\n private handleSaveStateClick() {\n this.saveState();\n this.close();\n }\n\n private handleClearStateClick() {\n this.facetStateLocalStorage.remove();\n this.facet.reset();\n this.close();\n this.facet.triggerNewQuery(() =>\n this.facet.usageAnalytics.logSearchEvent(analyticsActionCauseList.facetClearAll, {\n facetId: this.facet.options.id,\n facetField: this.facet.options.field.toString(),\n facetTitle: this.facet.options.title\n })\n );\n }\n\n private addOnNukeHandler() {\n $$(this.facet.root).on(InitializationEvents.nuke, () => this.handleNuke());\n }\n\n private addOnDocumentClickHandler() {\n document.addEventListener('click', () => this.onDocumentClick());\n }\n\n public getCurrentDirectionItem(directionSection = this.directionSection) {\n let found: HTMLElement;\n each(directionSection, direction => {\n if (!found) {\n found = find(this.getItems(direction), (direction: HTMLElement) => {\n return this.activeSort.name.indexOf(direction.getAttribute('data-direction')) != -1;\n });\n }\n });\n if (!found) {\n found = directionSection[0];\n }\n return found;\n }\n\n private activateDirectionSection() {\n each(this.directionSection, direction => {\n $$(direction).removeClass('coveo-facet-settings-disabled');\n $$(direction).find('.coveo-facet-settings-item').setAttribute('aria-disabled', 'false');\n this.unselectSection(direction);\n });\n this.selectItem(this.getCurrentDirectionItem());\n }\n\n private disableDirectionSection() {\n each(this.directionSection, direction => {\n $$(direction).addClass('coveo-facet-settings-disabled');\n $$(direction).find('.coveo-facet-settings-item').setAttribute('aria-disabled', 'true');\n this.unselectSection(direction);\n });\n }\n\n private getItems(section: HTMLElement) {\n return $$(section).findAll('.coveo-facet-settings-item');\n }\n\n private unselectSection(section: HTMLElement) {\n each(this.getItems(section), i => this.unselectItem(i));\n }\n\n private selectItem(item: HTMLElement) {\n if (item) {\n $$(item).addClass('coveo-selected');\n item.setAttribute('aria-pressed', 'true');\n }\n }\n\n private unselectItem(item: HTMLElement) {\n if (item) {\n $$(item).removeClass('coveo-selected');\n item.setAttribute('aria-pressed', 'false');\n }\n }\n\n private filterDuplicateForRendering() {\n each(this.enabledSorts, (enabledSort: IFacetSortDescription, i: number) => {\n if (enabledSort.relatedSort != null) {\n for (let j = i + 1; j < this.enabledSorts.length; j++) {\n if (this.enabledSorts[j].name == enabledSort.relatedSort) {\n this.enabledSortsIgnoreRenderBecauseOfPairs.push(this.enabledSorts[j]);\n break;\n }\n }\n }\n });\n }\n\n private appendIfNotUndefined(toAppend: HTMLElement) {\n if (!Utils.isNullOrUndefined(toAppend)) {\n this.settingsPopup.appendChild(toAppend);\n }\n }\n\n private handleNuke() {\n document.removeEventListener('click', this.onDocumentClick);\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Facet/FacetSettings.ts","/// (this.enabledSorts, enabledSort => {\n return enabledSort.name == this.facet.options.sortCriteria;\n });\n }\n if (!this.activeSort) {\n this.activeSort = this.enabledSorts[0];\n }\n }\n }\n\n private removeEnabledSortsBasedOnFacetType() {\n if (Coveo.FacetRange && this.facet instanceof Coveo.FacetRange) {\n var facetRange = this.facet;\n if (facetRange.options['slider']) {\n this.enabledSorts = [];\n }\n }\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Facet/FacetSort.ts","import FacetSliderModuleDefinition = require('../FacetSlider/FacetSlider');\nimport FacetModuleDefinition = require('./Facet');\nimport { IFacetSettingsKlass, FacetSettings } from './FacetSettings';\nimport { IFacetSortKlass, FacetSort } from './FacetSort';\nimport { $$ } from '../../utils/Dom';\nimport { l } from '../../strings/Strings';\nimport { IAnalyticsFacetOperatorMeta, IAnalyticsFacetMeta, analyticsActionCauseList } from '../Analytics/AnalyticsActionListMeta';\nimport 'styling/_FacetHeader';\nimport { SVGIcons } from '../../utils/SVGIcons';\nimport { SVGDom } from '../../utils/SVGDom';\nimport { AccessibleButton } from '../../utils/AccessibleButton';\n\nexport interface IFacetHeaderOptions {\n facetElement: HTMLElement;\n facet?: FacetModuleDefinition.Facet;\n title: string;\n field: string;\n enableClearElement: boolean;\n enableCollapseElement: boolean;\n icon?: string;\n facetSlider?: FacetSliderModuleDefinition.FacetSlider;\n settingsKlass?: IFacetSettingsKlass;\n sortKlass?: IFacetSortKlass;\n availableSorts?: string[];\n}\n\nexport class FacetHeader {\n public element: HTMLElement;\n public iconElement: HTMLElement;\n public waitElement: HTMLElement;\n public collapseElement: HTMLElement;\n public expandElement: HTMLElement;\n public operatorElement: HTMLElement;\n public eraserElement: HTMLElement;\n public settings: FacetSettings;\n public sort: FacetSort;\n\n constructor(public options: IFacetHeaderOptions) {\n this.element = document.createElement('div');\n $$(this.element).addClass('coveo-facet-header');\n }\n\n public build(): HTMLElement {\n let titleSection = $$('div', {\n className: 'coveo-facet-header-title-section'\n });\n if (this.options.icon != undefined) {\n this.iconElement = this.buildIcon();\n titleSection.append(this.iconElement);\n }\n titleSection.append(this.buildTitle());\n this.waitElement = this.buildWaitAnimation();\n titleSection.append(this.waitElement);\n this.element.appendChild(titleSection.el);\n\n let settingsSection = $$('div', {\n className: 'coveo-facet-header-settings-section'\n });\n\n this.eraserElement = this.buildEraser();\n settingsSection.append(this.eraserElement);\n\n if (this.options.facet) {\n this.operatorElement = this.buildOperatorToggle();\n settingsSection.append(this.operatorElement);\n $$(this.operatorElement).toggle(this.options.facet.options.enableTogglingOperator);\n }\n\n if (this.options.settingsKlass) {\n this.sort = this.settings = new this.options.settingsKlass(this.options.availableSorts, this.options.facet);\n settingsSection.append(this.settings.build());\n } else if (this.options.sortKlass) {\n this.sort = new this.options.sortKlass(this.options.availableSorts, this.options.facet);\n }\n this.element.appendChild(settingsSection.el);\n\n return this.element;\n }\n\n public switchToAnd(): void {\n if (this.options.facet) {\n this.options.facet.options.useAnd = true;\n this.rebuildOperatorToggle();\n this.updateOperatorQueryStateModel();\n }\n }\n\n public switchToOr(): void {\n if (this.options.facet) {\n this.options.facet.options.useAnd = false;\n this.rebuildOperatorToggle();\n this.updateOperatorQueryStateModel();\n }\n }\n\n public collapseFacet(): void {\n if (this.collapseElement && this.expandElement) {\n $$(this.collapseElement).hide();\n $$(this.expandElement).show();\n }\n $$(this.options.facetElement).addClass('coveo-facet-collapsed');\n }\n\n public expandFacet(): void {\n if (this.collapseElement && this.expandElement) {\n $$(this.expandElement).hide();\n $$(this.collapseElement).show();\n }\n $$(this.options.facetElement).removeClass('coveo-facet-collapsed');\n }\n\n public updateOperatorQueryStateModel(): void {\n if (this.options.facet && this.options.facet.options.enableTogglingOperator) {\n let valueToSet = '';\n if (this.options.facet.getSelectedValues().length != 0 || this.options.facet.getExcludedValues().length != 0) {\n valueToSet = this.options.facet.options.useAnd ? 'and' : 'or';\n }\n this.options.facet.queryStateModel.set(this.options.facet.operatorAttributeId, valueToSet);\n }\n }\n\n private rebuildOperatorToggle(): void {\n const newElement = this.buildOperatorToggle();\n if (this.operatorElement) {\n $$(this.operatorElement).replaceWith(newElement);\n }\n this.operatorElement = newElement;\n }\n\n private buildIcon(): HTMLElement {\n let cssClassForIcon;\n if (this.options.icon) {\n cssClassForIcon = 'coveo-icon-custom ' + this.options.icon;\n } else {\n cssClassForIcon = 'coveo-icon ' + this.options.field.substr(1);\n }\n this.iconElement = document.createElement('div');\n $$(this.iconElement).addClass(cssClassForIcon);\n return this.iconElement;\n }\n\n private buildWaitAnimation(): HTMLElement {\n this.waitElement = $$('div', { className: 'coveo-facet-header-wait-animation' }, SVGIcons.icons.loading).el;\n SVGDom.addClassToSVGInContainer(this.waitElement, 'coveo-facet-header-wait-animation-svg');\n this.waitElement.style.visibility = 'hidden';\n return this.waitElement;\n }\n\n private buildOperatorToggle(): HTMLElement {\n const label = l('SwitchTo', this.options.facet.options.useAnd ? l('Or') : l('And'));\n const icon = $$('span', { className: 'coveo-' + (this.options.facet.options.useAnd ? 'and' : 'or') }, SVGIcons.icons.orAnd);\n SVGDom.addClassToSVGInContainer(icon.el, 'coveo-or-and-svg');\n const toggle = $$('div', {\n className: 'coveo-facet-header-operator',\n title: label\n });\n toggle.append(icon.el);\n\n new AccessibleButton()\n .withElement(toggle)\n .withLabel(label)\n .withSelectAction(() => this.handleOperatorClick())\n .build();\n\n return toggle.el;\n }\n\n private handleOperatorClick(): void {\n if (this.options.facet.options.useAnd) {\n this.options.facet.switchToOr();\n } else {\n this.options.facet.switchToAnd();\n }\n if (this.options.facet.getSelectedValues().length != 0) {\n const operatorNow = this.options.facet.options.useAnd ? 'AND' : 'OR';\n const operatorBefore = this.options.facet.options.useAnd ? 'OR' : 'AND';\n this.options.facet.triggerNewQuery(() =>\n this.options.facet.usageAnalytics.logSearchEvent(analyticsActionCauseList.facetToggle, {\n facetId: this.options.facet.options.id,\n facetField: this.options.field.toString(),\n facetOperatorBefore: operatorBefore,\n facetOperatorAfter: operatorNow,\n facetTitle: this.options.title\n })\n );\n }\n }\n\n private buildTitle(): HTMLElement {\n const title = $$('div', { className: 'coveo-facet-header-title' });\n title.text(this.options.title);\n title.setAttribute('role', 'heading');\n title.setAttribute('aria-level', '2');\n title.setAttribute('aria-label', `${l('FacetTitle', this.options.title)}.`);\n return title.el;\n }\n\n public buildEraser(): HTMLElement {\n const eraser = $$('div', { className: 'coveo-facet-header-eraser' }, SVGIcons.icons.mainClear);\n\n SVGDom.addClassToSVGInContainer(eraser.el, 'coveo-facet-header-eraser-svg');\n\n new AccessibleButton()\n .withElement(eraser.el)\n .withLabel(l('Clear', this.options.title))\n .withClickAction(() => this.onEraserClick())\n .withEnterKeyboardAction(() => this.onEraserClick())\n .build();\n\n return eraser.el;\n }\n\n private onEraserClick() {\n const cmp = this.options.facet || this.options.facetSlider;\n cmp.reset();\n cmp.usageAnalytics.logSearchEvent(analyticsActionCauseList.facetClearAll, {\n facetId: cmp.options.id,\n facetField: cmp.options.field.toString(),\n facetTitle: cmp.options.title\n });\n cmp.queryController.executeQuery();\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Facet/FacetHeader.ts","/// (analyticsActionCauseList.breadcrumbFacet, {\n facetId: this.facet.options.id,\n facetField: this.facet.options.field.toString(),\n facetValue: this.facetValue.value,\n facetTitle: this.facet.options.title\n })\n );\n\n this.focusOnContainer();\n }\n\n private focusOnContainer() {\n const breadcrumb = first(this.facet.searchInterface.getComponents('Breadcrumb'));\n breadcrumb ? breadcrumb.element.focus() : null;\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Facet/BreadcrumbValueElement.ts","import * as Globalize from 'globalize';\nimport { first, rest, filter } from 'underscore';\nimport { Assert } from '../../misc/Assert';\nimport { l } from '../../strings/Strings';\nimport { $$ } from '../../utils/Dom';\nimport { IBreadcrumbValueElementKlass } from './BreadcrumbValueElement';\nimport { Facet } from './Facet';\nimport { FacetValue } from './FacetValue';\nimport { AccessibleButton } from '../../utils/AccessibleButton';\nimport { getHeadingTag } from '../../utils/AccessibilityUtils';\n\nexport interface IBreadcrumbValueListOptions {\n headingLevel?: number;\n}\n\nexport class BreadcrumbValueList {\n private expanded: FacetValue[];\n private collapsed: FacetValue[];\n protected elem: HTMLElement;\n private valueContainer: HTMLElement;\n\n constructor(\n public facet: Facet,\n public facetValues: FacetValue[],\n public breadcrumbValueElementKlass: IBreadcrumbValueElementKlass,\n private readonly options?: IBreadcrumbValueListOptions\n ) {\n this.setExpandedAndCollapsed();\n this.elem = $$('div', {\n className: 'coveo-facet-breadcrumb'\n }).el;\n\n const title = $$(getHeadingTag(this.options && this.options.headingLevel, 'span'));\n title.addClass('coveo-facet-breadcrumb-title');\n title.text(this.facet.options.title + ':');\n this.elem.appendChild(title.el);\n\n this.valueContainer = $$('ul', {\n className: 'coveo-facet-breadcrumb-values'\n }).el;\n\n this.elem.appendChild(this.valueContainer);\n }\n\n public build(): HTMLElement {\n this.buildExpanded();\n if (this.collapsed.length != 0) {\n this.buildCollapsed();\n }\n return this.elem;\n }\n\n public buildAsString(): string {\n this.build();\n if (this.elem) {\n return (\n `${this.facet.options.title}: ` +\n $$(this.elem)\n .findAll('.coveo-facet-breadcrumb-value')\n .map((value: HTMLElement) => {\n return $$(value).text();\n })\n .join(', ')\n );\n }\n return '';\n }\n\n private buildExpanded() {\n this.expanded.forEach((value: FacetValue) => {\n const elementBreadcrumb = new this.breadcrumbValueElementKlass(this.facet, value).build();\n this.valueContainer.appendChild(elementBreadcrumb.el);\n });\n }\n\n private buildCollapsed() {\n const numberOfSelected = filter(this.collapsed, (value: FacetValue) => value.selected).length;\n const numberOfExcluded = filter(this.collapsed, (value: FacetValue) => value.excluded).length;\n Assert.check(numberOfSelected + numberOfExcluded == this.collapsed.length);\n\n const nMoreElement = $$(\n 'div',\n {\n className: 'coveo-facet-breadcrumb-value'\n },\n $$(\n 'span',\n {\n className: 'coveo-facet-breadcrumb-multi-count'\n },\n l('NMore', Globalize.format(numberOfSelected + numberOfExcluded, 'n0'))\n )\n );\n\n const nMoreContainer = $$(\n 'li',\n {\n className: 'coveo-facet-breadcrumb-value-list-item'\n },\n nMoreElement\n );\n\n const collapsedBreadcrumbs = this.collapsed.map((value: FacetValue) => new this.breadcrumbValueElementKlass(this.facet, value));\n const toolTip = collapsedBreadcrumbs.map(element => element.getBreadcrumbTooltip()).join('\\n');\n\n new AccessibleButton()\n .withElement(nMoreElement)\n .withTitle(toolTip)\n .withSelectAction(() => {\n nMoreElement.remove();\n collapsedBreadcrumbs.forEach(breadcrumb => {\n this.valueContainer.appendChild(breadcrumb.build().el);\n });\n })\n .build();\n\n this.valueContainer.appendChild(nMoreContainer.el);\n }\n\n private setExpandedAndCollapsed() {\n if (this.facetValues.length > this.facet.options.numberOfValuesInBreadcrumb) {\n this.collapsed = rest(this.facetValues, this.facet.options.numberOfValuesInBreadcrumb);\n this.expanded = first(this.facetValues, this.facet.options.numberOfValuesInBreadcrumb);\n } else {\n this.collapsed = [];\n this.expanded = this.facetValues;\n }\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Facet/BreadcrumbValuesList.ts","/// ;\n public moreValuesToFetch = true;\n\n private facetSearchTimeout: number;\n private onResize: (...args: any[]) => void;\n private onDocumentClick: (e: Event) => void;\n private lastSearchWasEmpty = true;\n\n constructor(public facet: Facet, public facetSearchValuesListKlass: IFacetSearchValuesListKlass, private root: HTMLElement) {\n this.facetSearchElement = new FacetSearchElement(this);\n this.onResize = debounce(() => {\n // Mitigate issues in UT where the window in phantom js might get resized in the scope of another test.\n // These would point to random instance of a test karma object, and not a real search interface.\n if (this.facet instanceof Facet && this.facet.searchInterface instanceof SearchInterface) {\n if (this.shouldPositionSearchResults()) {\n this.positionSearchResults();\n }\n }\n }, 250);\n this.onDocumentClick = (e: Event) => {\n this.handleClickElsewhere(e);\n };\n window.addEventListener('resize', this.onResize);\n document.addEventListener('click', (e: Event) => this.onDocumentClick(e));\n $$(facet.root).on(InitializationEvents.nuke, () => this.handleNuke());\n }\n\n public get facetType() {\n return Facet.ID;\n }\n\n public get facetTitle() {\n return this.facet.options.title || this.facet.options.field.toString();\n }\n\n /**\n * Build the search component and return an `HTMLElement` which can be appended to the {@link Facet}.\n * @returns {HTMLElement}\n */\n public build(): HTMLElement {\n return this.buildBaseSearch();\n }\n\n /**\n * Position the search results at the footer of the facet.\n */\n public positionSearchResults() {\n this.facetSearchElement.positionSearchResults();\n }\n\n public fetchMoreValues() {\n this.triggerNewFacetSearch(this.buildParamsForFetchingMore());\n }\n\n /**\n * Dismiss the search results\n */\n public dismissSearchResults() {\n this.cancelAnyPendingSearchOperation();\n this.facet.unfadeInactiveValuesInMainList();\n $$(this.searchResults).empty();\n this.moreValuesToFetch = true;\n $$(this.search).removeClass('coveo-facet-search-no-results');\n $$(this.facet.element).removeClass('coveo-facet-searching');\n this.facetSearchElement.hideSearchResultsElement();\n this.input.value = '';\n $$(this.clear).hide();\n this.currentlyDisplayedResults = undefined;\n }\n\n /**\n * Trigger a new facet search, and display the results.\n * @param params\n */\n public triggerNewFacetSearch(params: FacetSearchParameters) {\n this.cancelAnyPendingSearchOperation();\n this.facetSearchElement.showFacetSearchWaitingAnimation();\n\n this.facet.logger.info('Triggering new facet search');\n\n this.facetSearchPromise = this.facet.facetQueryController.search(params);\n\n if (this.facetSearchPromise) {\n this.facetSearchPromise\n .then((fieldValues: IIndexFieldValue[]) => {\n this.facet.usageAnalytics.logCustomEvent(\n analyticsActionCauseList.facetSearch,\n {\n facetId: this.facet.options.id,\n facetField: this.facet.options.field.toString(),\n facetTitle: this.facet.options.title\n },\n this.facet.root\n );\n this.facet.logger.debug('Received field values', fieldValues);\n this.processNewFacetSearchResults(fieldValues, params);\n this.facetSearchElement.hideFacetSearchWaitingAnimation();\n this.facetSearchPromise = undefined;\n })\n .catch((error: IEndpointError) => {\n // The request might be normally cancelled if another search is triggered.\n // In this case we do not hide the animation to prevent flicking.\n if (Utils.exists(error)) {\n this.facet.logger.error('Error while retrieving facet values', error);\n this.facetSearchElement.hideFacetSearchWaitingAnimation();\n }\n this.facetSearchPromise = undefined;\n return null;\n });\n }\n }\n\n /**\n * Trigger the event associated with the focus of the search input.\n */\n public focus(): void {\n this.facetSearchElement.focus();\n }\n\n public get searchResults() {\n return this.facetSearchElement.searchResults;\n }\n\n public get searchBarIsAnimating() {\n return this.facetSearchElement.searchBarIsAnimating;\n }\n\n public get search() {\n return this.facetSearchElement.search;\n }\n\n public setExpandedFacetSearchAccessibilityAttributes(searchResultsElement: HTMLElement) {\n this.facet.setExpandedFacetSearchAccessibilityAttributes(searchResultsElement);\n }\n\n public setCollapsedFacetSearchAccessibilityAttributes() {\n this.facet.setCollapsedFacetSearchAccessibilityAttributes();\n }\n\n public keyboardEventDefaultHandler() {\n this.moreValuesToFetch = true;\n this.highlightCurrentQueryWithinSearchResults();\n if (!this.inputIsEmpty()) {\n this.lastSearchWasEmpty = false;\n this.displayNewValues(this.buildParamsForNormalSearch());\n } else if (!this.lastSearchWasEmpty) {\n // This normally happen if a user delete the search box content to go back to \"empty\" state.\n this.currentlyDisplayedResults = undefined;\n $$(this.searchResults).empty();\n this.lastSearchWasEmpty = true;\n this.displayNewValues(this.buildParamsForFetchingMore());\n }\n }\n\n public keyboardNavigationEnterPressed(event: KeyboardEvent) {\n if (event.shiftKey) {\n this.triggerNewFacetSearch(this.buildParamsForNormalSearch());\n } else {\n if (this.searchResults.style.display != 'none') {\n this.performActionOnCurrentSearchResult();\n this.dismissSearchResults();\n } else if ($$(this.search).is('.coveo-facet-search-no-results')) {\n this.selectAllValuesMatchingSearch();\n }\n }\n }\n\n public keyboardNavigationDeletePressed(event: KeyboardEvent) {\n if (event.shiftKey) {\n this.performExcludeActionOnCurrentSearchResult();\n this.dismissSearchResults();\n this.input.value = '';\n }\n }\n\n public displayNewValues(params: FacetSearchParameters = this.buildParamsForExcludingCurrentlyDisplayedValues()) {\n this.cancelAnyPendingSearchOperation();\n this.facetSearchTimeout = window.setTimeout(() => {\n this.triggerNewFacetSearch(params);\n }, this.facet.options.facetSearchDelay);\n }\n\n public getCaptions() {\n return $$(this.searchResults).findAll('.coveo-facet-value-caption');\n }\n\n public getValueInInputForFacetSearch() {\n return this.facetSearchElement.getValueInInputForFacetSearch();\n }\n\n public updateAriaLive(text: string) {\n this.facet.searchInterface.ariaLive.updateText(text);\n }\n\n private get input() {\n return this.facetSearchElement.input;\n }\n\n private get clear() {\n return this.facetSearchElement.clear;\n }\n\n private shouldPositionSearchResults(): boolean {\n return !ResponsiveComponentsUtils.isSmallFacetActivated($$(this.root)) && $$(this.facet.element).hasClass('coveo-facet-searching');\n }\n\n private buildBaseSearch(): HTMLElement {\n this.facetSearchElement.build(() => this.handleFacetSearchClear());\n $$(this.facetSearchElement.input).on('keyup', () => this.showOrHideClearElement());\n return this.search;\n }\n\n private handleNuke() {\n window.removeEventListener('resize', this.onResize);\n document.removeEventListener('click', this.onDocumentClick);\n }\n\n private handleClickElsewhere(event: Event) {\n if (this.currentlyDisplayedResults && this.search != event.target && this.searchResults != event.target && this.input != event.target) {\n this.dismissSearchResults();\n }\n }\n\n private handleFacetSearchClear() {\n this.input.value = '';\n $$(this.clear).hide();\n this.dismissSearchResults();\n }\n\n private showOrHideClearElement() {\n if (!this.inputIsEmpty()) {\n $$(this.clear).show();\n } else {\n $$(this.clear).hide();\n $$(this.search).removeClass('coveo-facet-search-no-results');\n }\n }\n private cancelAnyPendingSearchOperation() {\n if (Utils.exists(this.facetSearchTimeout)) {\n clearTimeout(this.facetSearchTimeout);\n this.facetSearchTimeout = undefined;\n }\n if (Utils.exists(this.facetSearchPromise)) {\n Promise.reject(this.facetSearchPromise).catch(() => {});\n this.facetSearchPromise = undefined;\n }\n\n this.facetSearchElement.hideFacetSearchWaitingAnimation();\n }\n\n private inputIsEmpty() {\n return this.input.value.trim() == '';\n }\n\n private processNewFacetSearchResults(fieldValues: IIndexFieldValue[], facetSearchParameters: FacetSearchParameters) {\n Assert.exists(fieldValues);\n fieldValues = new FacetValuesOrder(this.facet, this.facet.facetSort).reorderValues(fieldValues);\n if (fieldValues.length > 0) {\n $$(this.search).removeClass('coveo-facet-search-no-results');\n this.facet.fadeInactiveValuesInMainList(this.facet.options.facetSearchDelay);\n this.rebuildSearchResults(fieldValues, facetSearchParameters);\n if (!facetSearchParameters.fetchMore) {\n this.showSearchResultsElement();\n }\n this.highlightCurrentQueryWithinSearchResults();\n this.makeFirstSearchResultTheCurrentOne();\n this.facetSearchElement.updateAriaLiveWithResults(this.input.value, this.currentlyDisplayedResults.length, this.moreValuesToFetch);\n } else {\n if (facetSearchParameters.fetchMore) {\n this.moreValuesToFetch = false;\n } else {\n $$(this.search).addClass('coveo-facet-search-no-results');\n this.showSearchResultsElement();\n this.facetSearchElement.emptyAndShowNoResults();\n }\n }\n }\n\n private rebuildSearchResults(fieldValues: IIndexFieldValue[], facetSearchParameters: FacetSearchParameters) {\n Assert.exists(fieldValues);\n if (!facetSearchParameters.fetchMore) {\n $$(this.searchResults).empty();\n }\n\n const facetSearchHasQuery = Utils.isNonEmptyString(facetSearchParameters.valueToSearch);\n\n if (facetSearchHasQuery) {\n this.appendSelectAllResultsButton();\n }\n\n let facetValues = map(fieldValues, fieldValue => {\n return FacetValue.create(fieldValue);\n });\n each(new this.facetSearchValuesListKlass(this.facet, FacetValueElement).build(facetValues), (listElement: HTMLElement) => {\n this.facetSearchElement.appendToSearchResults(listElement);\n });\n if (this.currentlyDisplayedResults) {\n this.currentlyDisplayedResults = this.currentlyDisplayedResults.concat(pluck(facetValues, 'value'));\n } else {\n this.currentlyDisplayedResults = pluck(facetValues, 'value');\n }\n\n each($$(this.searchResults).findAll('.coveo-facet-selectable'), (elem: HTMLElement, index: number) => {\n $$(elem).setAttribute('id', `coveo-facet-search-${this.facet.options.id}-suggestion-${index}`);\n $$(elem).setAttribute('role', 'option');\n $$(elem).setAttribute('aria-selected', 'false');\n $$(elem).addClass('coveo-facet-search-selectable');\n });\n }\n\n private appendSelectAllResultsButton() {\n const selectAll = document.createElement('li');\n $$(selectAll).addClass(['coveo-facet-selectable', 'coveo-facet-search-selectable', 'coveo-facet-search-select-all']);\n $$(selectAll).text(l('SelectAll'));\n $$(selectAll).on('click', () => this.selectAllValuesMatchingSearch());\n this.facetSearchElement.appendToSearchResults(selectAll);\n }\n\n private buildParamsForNormalSearch() {\n let params = new FacetSearchParameters(this.facet);\n params.setValueToSearch(this.getValueInInputForFacetSearch());\n params.fetchMore = false;\n return params;\n }\n\n private buildParamsForFetchingMore() {\n let params = this.buildParamsForExcludingCurrentlyDisplayedValues();\n params.fetchMore = true;\n return params;\n }\n\n protected buildParamsForExcludingCurrentlyDisplayedValues() {\n let params = new FacetSearchParameters(this.facet);\n params.excludeCurrentlyDisplayedValuesInSearch(this.searchResults);\n params.setValueToSearch(this.getValueInInputForFacetSearch());\n return params;\n }\n\n private showSearchResultsElement() {\n this.positionSearchResults();\n }\n\n private highlightCurrentQueryWithinSearchResults() {\n let search = this.getValueInInputForFacetSearch();\n let regex = new RegExp('(' + StringUtils.wildcardsToRegex(search, this.facet.options.facetSearchIgnoreAccents) + ')', 'ig');\n this.facetSearchElement.highlightCurrentQueryInSearchResults(regex);\n }\n\n private makeFirstSearchResultTheCurrentOne() {\n this.facetSearchElement.setAsCurrentResult($$(this.getSelectables()[0]));\n }\n\n private getSelectables(target = this.searchResults) {\n return $$(target).findAll('.coveo-facet-selectable');\n }\n\n private performActionOnCurrentSearchResult() {\n let current = $$(this.searchResults).find('.coveo-facet-search-current-result');\n Assert.check(current != undefined);\n\n const shouldExclude = $$(current).hasClass('coveo-facet-value-will-exclude');\n\n if (shouldExclude) {\n const excludeIcon = $$(current).find('.coveo-facet-value-exclude');\n excludeIcon.click();\n return;\n }\n\n const checkbox = $$(current).find('input[type=\"checkbox\"]');\n\n if (checkbox) {\n checkbox.checked = true;\n $$(checkbox).trigger('change');\n } else {\n current.click();\n }\n }\n\n private performExcludeActionOnCurrentSearchResult() {\n let current = $$(this.searchResults).find('.coveo-facet-search-current-result');\n Assert.check(current != null);\n let valueCaption = $$(current).find('.coveo-facet-value-caption');\n let valueElement = this.facet.facetValuesList.get($$(valueCaption).text());\n\n valueElement.toggleExcludeWithUA();\n }\n\n protected selectAllValuesMatchingSearch() {\n this.facet.showWaitingAnimation();\n\n let searchParameters = new FacetSearchParameters(this.facet);\n searchParameters.nbResults = 1000;\n searchParameters.setValueToSearch(this.getValueInInputForFacetSearch());\n this.facet.facetQueryController.search(searchParameters).then((fieldValues: IIndexFieldValue[]) => {\n this.dismissSearchResults();\n ModalBox.close(true);\n let facetValues = map(fieldValues, fieldValue => {\n let facetValue = this.facet.values.get(fieldValue.value);\n if (!Utils.exists(facetValue)) {\n facetValue = FacetValue.create(fieldValue);\n }\n facetValue.selected = true;\n facetValue.excluded = false;\n return facetValue;\n });\n this.facet.processFacetSearchAllResultsSelected(facetValues);\n });\n this.dismissSearchResults();\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Facet/FacetSearch.ts","/// (this.valueList);\n }\n\n public getAllFacetValue(): FacetValue[] {\n return _.map(this.getAll(), (v: ValueElement) => {\n return v.facetValue;\n });\n }\n\n public get(value: FacetValue | string): ValueElement {\n var getter;\n if (value instanceof FacetValue) {\n getter = value.value;\n } else {\n value = Utils.anyTypeToString(value);\n getter = value;\n }\n this.ensureFacetValueIsInList(value);\n return this.valueList[getter.toLowerCase()];\n }\n\n public select(value: FacetValue | string): ValueElement {\n var valueElement = this.get(value);\n valueElement.select();\n return valueElement;\n }\n\n public unselect(value: FacetValue | string): ValueElement {\n var valueElement = this.get(value);\n valueElement.unselect();\n return valueElement;\n }\n\n public exclude(value: FacetValue | string): ValueElement {\n var valueElement = this.get(value);\n valueElement.exclude();\n return valueElement;\n }\n\n public unExclude(value: FacetValue | string): ValueElement {\n var valueElement = this.get(value);\n valueElement.unexclude();\n return valueElement;\n }\n\n public toggleSelect(value: FacetValue | string): ValueElement {\n var valueElement = this.get(value);\n if (valueElement.facetValue.selected) {\n valueElement.unselect();\n } else {\n valueElement.select();\n }\n return valueElement;\n }\n\n public toggleExclude(value: FacetValue | string): ValueElement {\n var valueElement = this.get(value);\n if (valueElement.facetValue.excluded) {\n valueElement.unexclude();\n } else {\n valueElement.exclude();\n }\n return valueElement;\n }\n\n public rebuild(numberOfValues: number): void {\n $$(this.valueContainer).empty();\n this.currentlyDisplayed = [];\n var allValues = this.getValuesToBuildWith();\n var toCompare = numberOfValues;\n let docFragment = document.createDocumentFragment();\n _.each(allValues, (facetValue: FacetValue, index?: number, list?) => {\n if (this.facetValueShouldBeRemoved(facetValue)) {\n this.facet.values.remove(facetValue.value);\n toCompare += 1;\n } else if (index < toCompare) {\n var valueElement = new this.facetValueElementKlass(this.facet, facetValue, true);\n this.valueList[facetValue.value.toLowerCase()] = valueElement;\n var valueListElement = valueElement.build().renderer.listItem;\n docFragment.appendChild(valueListElement);\n this.currentlyDisplayed.push(valueElement);\n }\n });\n this.valueContainer.appendChild(docFragment);\n\n FacetUtils.addNoStateCssClassToFacetValues(this.facet, this.valueContainer);\n }\n\n protected getValuesToBuildWith() {\n return this.facet.values.getAll();\n }\n\n private facetValueShouldBeRemoved(facetValue: FacetValue): boolean {\n return (\n facetValue.occurrences == 0 &&\n (facetValue.delta == 0 || facetValue.delta == undefined) &&\n !facetValue.selected &&\n !facetValue.excluded &&\n !this.facet.keepDisplayedValuesNextTime\n );\n }\n\n private ensureFacetValueIsInList(value: any) {\n var facetValue: FacetValue;\n if (value instanceof FacetValue) {\n facetValue = this.facet.values.get((value).value);\n if (facetValue == null) {\n this.facet.values.add(value);\n facetValue = value;\n }\n } else {\n facetValue = this.facet.values.get(value);\n if (facetValue == null) {\n facetValue = FacetValue.createFromValue(value);\n this.facet.values.add(facetValue);\n }\n }\n\n var key = facetValue.value.toLowerCase();\n var found = this.valueList[key];\n if (found == undefined) {\n found = this.valueList[key] = new FacetValueElement(this.facet, facetValue, true);\n found.build();\n } else {\n found.facetValue = facetValue;\n }\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Facet/FacetValuesList.ts","/// (cause, {\n query: this.omniboxObject.completeQueryExpression.word,\n facetId: elem.facet.options.id,\n facetField: elem.facet.options.field.toString(),\n facetTitle: elem.facet.options.title,\n facetValue: elem.facetValue.value,\n suggestions: strippedFacetValues.join(';'),\n suggestionRanking: indexOf(strippedFacetValues, elem.facetValue.value)\n });\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Facet/OmniboxValuesList.ts","import { IResponsiveComponent, IResponsiveComponentOptions, ResponsiveComponentsManager } from './ResponsiveComponentsManager';\nimport { SearchInterface } from '../SearchInterface/SearchInterface';\nimport { ResultList } from '../ResultList/ResultList';\nimport { $$, Dom } from '../../utils/Dom';\nimport { Component } from '../Base/Component';\nimport { Logger } from '../../misc/Logger';\nimport { ResponsiveDropdown } from './ResponsiveDropdown/ResponsiveDropdown';\n\nexport class ResponsiveDefaultResultTemplate implements IResponsiveComponent {\n private searchInterface: SearchInterface;\n private resultList: ResultList;\n\n private currentMode: string;\n\n public static init(root: HTMLElement, component: ResultList, options: IResponsiveComponentOptions) {\n if (!$$(root).find(`.${Component.computeCssClassName(ResultList)}`)) {\n let logger = new Logger('ResponsiveDefaultResultTemplate');\n logger.trace('No ResultLayout component found : Cannot instantiate ResponsiveResultLayout');\n return;\n }\n ResponsiveComponentsManager.register(ResponsiveDefaultResultTemplate, $$(root), ResultList.ID, component, options);\n }\n\n constructor(public coveoRoot: Dom, public ID: string, options: IResponsiveComponentOptions, responsiveDropdown?: ResponsiveDropdown) {\n this.searchInterface = Component.get(this.coveoRoot.el, SearchInterface, false);\n this.currentMode = 'large';\n }\n\n public registerComponent(accept: ResultList) {\n if (accept instanceof ResultList) {\n this.resultList = accept;\n return true;\n }\n return false;\n }\n\n public handleResizeEvent() {\n let lastResults = this.resultList.queryController.getLastResults();\n if (this.needSmallMode()) {\n $$(this.resultList.options.resultsContainer).addClass('coveo-card-layout-container');\n $$(this.resultList.options.resultsContainer).removeClass(`coveo-list-layout-container`);\n if (this.currentMode != 'small') {\n if (lastResults) {\n this.resultList.buildResults(lastResults).then((elements: HTMLElement[]) => {\n this.resultList.renderResults(elements);\n });\n }\n this.currentMode = 'small';\n }\n } else {\n $$(this.resultList.options.resultsContainer).removeClass('coveo-card-layout-container');\n $$(this.resultList.options.resultsContainer).addClass(`coveo-list-layout-container`);\n if (this.currentMode != 'large') {\n if (lastResults) {\n this.resultList.buildResults(lastResults).then((elements: HTMLElement[]) => {\n this.resultList.renderResults(elements);\n });\n }\n this.currentMode = 'large';\n }\n }\n }\n\n private needSmallMode(): boolean {\n return this.coveoRoot.width() <= this.searchInterface.responsiveComponents.getSmallScreenWidth();\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/ResponsiveComponents/ResponsiveDefaultResultTemplate.ts","import { IQueryResult } from '../../rest/QueryResult';\nimport { $$, Dom } from '../../utils/Dom';\nimport { Component } from '../Base/Component';\nimport { SearchInterface } from '../SearchInterface/SearchInterface';\n\nexport interface ResultToRender {\n resultElement: HTMLElement;\n componentsInside: Component[];\n}\n\nexport class ResultContainer {\n public static resultCurrentlyBeingRendered: IQueryResult = null;\n\n public resultContainerElement: Dom;\n\n constructor(resultContainer: HTMLElement, private searchInterface: SearchInterface) {\n this.resultContainerElement = $$(resultContainer);\n }\n\n public empty() {\n this.searchInterface.detachComponentsInside(this.resultContainerElement.el);\n $$(this.resultContainerElement).empty();\n }\n\n public addClass(classToAdd: string) {\n this.resultContainerElement.addClass(classToAdd);\n }\n\n public isEmpty() {\n return this.resultContainerElement.isEmpty();\n }\n\n public hideChildren() {\n this.resultContainerElement.children().forEach(child => $$(child).hide());\n }\n\n public getResultElements() {\n return this.resultContainerElement.findAll('.CoveoResult');\n }\n\n public get el() {\n return this.resultContainerElement.el;\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/ResultList/ResultContainer.ts","import { ResultListRenderer } from './ResultListRenderer';\nimport { $$ } from '../../utils/Dom';\nimport _ = require('underscore');\n\nexport class ResultListCardRenderer extends ResultListRenderer {\n getEndFragment(resultElements: HTMLElement[]) {\n return new Promise(resolve => {\n if (!_.isEmpty(resultElements)) {\n // with infinite scrolling, we want the additional results to append at the end of the previous query.\n // For this, we need to remove the padding.\n if (this.resultListOptions.enableInfiniteScroll) {\n const needToBeRemoved = $$(this.resultListOptions.resultsContainer).findAll('.coveo-card-layout-padding');\n _.each(needToBeRemoved, toRemove => $$(toRemove).remove());\n }\n // Used to prevent last card from spanning the grid's whole width\n const emptyCards = document.createDocumentFragment();\n _.times(3, () => emptyCards.appendChild($$('div', { className: 'coveo-card-layout coveo-card-layout-padding' }).el));\n resolve(emptyCards);\n }\n resolve(null);\n });\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/ResultList/ResultListCardRenderer.ts","import { IResultListOptions } from './ResultListOptions';\nimport { ResultListRenderer } from './ResultListRenderer';\nimport { TemplateRole } from '../Templates/Template';\nimport { TableTemplate } from '../Templates/TableTemplate';\nimport { $$ } from '../../utils/Dom';\nimport _ = require('underscore');\n\nexport class ResultListTableRenderer extends ResultListRenderer {\n private shouldDisplayHeader: boolean = true;\n private shouldDisplayFooter: boolean = false;\n\n constructor(protected resultListOptions: IResultListOptions, protected autoCreateComponentsFn: Function) {\n super(resultListOptions, autoCreateComponentsFn);\n if (this.resultListOptions.resultTemplate instanceof TableTemplate) {\n if (this.resultListOptions.resultTemplate.hasTemplateWithRole('table-footer')) {\n this.shouldDisplayFooter = true;\n }\n // If custom templates are defined but no header template, do not display it.\n if (\n this.resultListOptions.resultTemplate.templates.length !== 0 &&\n !this.resultListOptions.resultTemplate.hasTemplateWithRole('table-header')\n ) {\n this.shouldDisplayHeader = false;\n }\n }\n }\n\n getStartFragment(resultElements: HTMLElement[], append: boolean): Promise {\n if (!append && !_.isEmpty(resultElements) && this.shouldDisplayHeader) {\n return this.renderRoledTemplate('table-header');\n }\n }\n\n getEndFragment(resultElements: HTMLElement[], append: boolean): Promise {\n if (!append && !_.isEmpty(resultElements) && this.shouldDisplayFooter) {\n return this.renderRoledTemplate('table-footer');\n }\n }\n\n private async renderRoledTemplate(role: TemplateRole) {\n const elem = await (this.resultListOptions.resultTemplate).instantiateRoleToElement(role);\n $$(elem).addClass(`coveo-result-list-${role}`);\n this.autoCreateComponentsFn(elem, undefined);\n const frag = document.createDocumentFragment();\n frag.appendChild(elem);\n return frag;\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/ResultList/ResultListTableRenderer.ts","import { IResponsiveDropdownContent, ResponsiveDropdownContent } from './ResponsiveDropdownContent';\nimport { Dom, $$, l } from '../../../Core';\nimport { SVGIcons } from '../../../utils/SVGIcons';\nimport { FocusTrap } from '../../FocusTrap/FocusTrap';\n\nexport class ResponsiveDropdownModalContent implements IResponsiveDropdownContent {\n private closeButton: Dom;\n private className: string;\n private focusTrap: FocusTrap;\n\n constructor(private componentName: string, public element: Dom, private closeButtonLabel: string, private close: () => void) {\n this.className = `coveo-${this.componentName}-dropdown-modal-content`;\n }\n\n private set hidden(shouldHide: boolean) {\n this.element.toggleClass('coveo-hidden', shouldHide);\n }\n\n public positionDropdown() {\n this.element.el.classList.add(this.className, ResponsiveDropdownContent.DEFAULT_CSS_CLASS_NAME);\n this.element.setAttribute('role', 'group');\n this.element.setAttribute('aria-label', l('FiltersDropdown'));\n this.hidden = false;\n this.ensureCloseButton();\n this.ensureFocusTrap();\n }\n\n public hideDropdown() {\n this.element.el.classList.remove(this.className, ResponsiveDropdownContent.DEFAULT_CSS_CLASS_NAME);\n this.element.setAttribute('role', null);\n this.element.setAttribute('aria-label', null);\n this.hidden = true;\n this.removeCloseButton();\n this.removeFocusTrap();\n }\n\n public cleanUp() {\n this.hidden = false;\n }\n\n private ensureCloseButton() {\n if (!this.closeButton) {\n this.closeButton = $$(\n 'button',\n {\n className: 'coveo-facet-modal-close-button',\n type: 'button',\n ariaLabel: this.closeButtonLabel\n },\n SVGIcons.icons.mainClear\n );\n this.closeButton.on('click', () => this.close());\n this.element.prepend(this.closeButton.el);\n }\n }\n\n private get focusableSelector() {\n const facetElements = '[data-field]:not(.coveo-facet-empty) [tabindex]';\n const dynamicFacetsElements = '[data-field]:not(.coveo-hidden) button';\n const modalButton = '.coveo-facet-modal-close-button';\n return [facetElements, dynamicFacetsElements, modalButton].join(' , ');\n }\n\n private ensureFocusTrap() {\n if (!this.focusTrap) {\n this.focusTrap = new FocusTrap(this.element.el, { focusableSelector: this.focusableSelector });\n }\n }\n\n private removeCloseButton() {\n if (this.closeButton) {\n this.closeButton.remove();\n this.closeButton = null;\n }\n }\n\n private removeFocusTrap() {\n if (this.focusTrap) {\n this.focusTrap.disable();\n this.focusTrap = null;\n }\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/ResponsiveComponents/ResponsiveDropdown/ResponsiveDropdownModalContent.ts","/**\n * The names of the events that can be triggered by the [FacetsMobileMode]{@link FacetsMobileMode} component.\n */\nexport class FacetsMobileModeEvents {\n /**\n * The name of the event that gets triggered when the facets pop-up (or modal) is opened in mobile mode.\n */\n public static popupOpened = 'popupOpened';\n /**\n * The name of the event that gets triggered when the facets pop-up (or modal) is closed in mobile mode.\n */\n public static popupClosed = 'popupClosed';\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/events/FacetsMobileModeEvents.ts","import { IFacetSearch } from './IFacetSearch';\nimport { KEYBOARD } from '../../utils/KeyboardUtils';\nexport class FacetSearchUserInputHandler {\n constructor(private facetSearch: IFacetSearch) {}\n\n public handleKeyboardEvent(event: KeyboardEvent) {\n switch (event.which) {\n case KEYBOARD.ENTER:\n this.facetSearch.keyboardNavigationEnterPressed(event);\n break;\n case KEYBOARD.DELETE:\n this.facetSearch.keyboardNavigationDeletePressed && this.facetSearch.keyboardNavigationDeletePressed(event);\n break;\n case KEYBOARD.ESCAPE:\n this.facetSearch.dismissSearchResults();\n break;\n case KEYBOARD.DOWN_ARROW:\n this.facetSearch.facetSearchElement.moveCurrentResultDown();\n break;\n case KEYBOARD.UP_ARROW:\n this.facetSearch.facetSearchElement.moveCurrentResultUp();\n break;\n default:\n this.facetSearch.keyboardEventDefaultHandler();\n }\n }\n\n public handleFacetSearchResultsScroll() {\n if (\n this.facetSearch.facetSearchPromise ||\n this.facetSearch.facetSearchElement.getValueInInputForFacetSearch() != '' ||\n !this.facetSearch.moreValuesToFetch\n ) {\n return;\n }\n\n let elementHeight = this.facetSearch.facetSearchElement.searchResults.clientHeight;\n let scrollHeight = this.facetSearch.facetSearchElement.searchResults.scrollHeight;\n let bottomPosition = this.facetSearch.facetSearchElement.searchResults.scrollTop + elementHeight;\n if (scrollHeight - bottomPosition < elementHeight / 2) {\n this.facetSearch.fetchMoreValues();\n }\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Facet/FacetSearchUserInputHandler.ts","import { ISearchDropdownNavigator, ISearchDropdownConfig, DefaultSearchDropdownNavigator } from './DefaultSearchDropdownNavigator';\nimport { FacetSearchDropdownNavigator } from './FacetSearchDropdownNavigator';\nimport { IFacetSearch } from '../IFacetSearch';\nimport { CategoryFacet } from '../../CategoryFacet/CategoryFacet';\nimport { Facet } from '../Facet';\n\nexport function SearchDropdownNavigatorFactory(facetSearch: IFacetSearch, config: ISearchDropdownConfig): ISearchDropdownNavigator {\n switch (facetSearch.facetType) {\n case Facet.ID:\n return new FacetSearchDropdownNavigator({ ...config, facetSearch });\n\n case CategoryFacet.ID:\n default:\n return new DefaultSearchDropdownNavigator(config);\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Facet/FacetSearchDropdownNavigation/SearchDropdownNavigatorFactory.ts","import { ISearchDropdownNavigator, DefaultSearchDropdownNavigator, ISearchDropdownConfig } from './DefaultSearchDropdownNavigator';\nimport { $$, Dom } from '../../../utils/Dom';\nimport { IFacetSearch } from '../IFacetSearch';\n\nexport interface IFacetSearchDropdownConfig extends ISearchDropdownConfig {\n facetSearch: IFacetSearch;\n}\n\nexport class FacetSearchDropdownNavigator implements ISearchDropdownNavigator {\n private defaultDropdownNavigator: DefaultSearchDropdownNavigator;\n\n constructor(private config: IFacetSearchDropdownConfig) {\n this.defaultDropdownNavigator = new DefaultSearchDropdownNavigator(config);\n }\n\n public setAsCurrentResult(dom: Dom) {\n this.defaultDropdownNavigator.setAsCurrentResult(dom);\n }\n\n public get currentResult() {\n return this.defaultDropdownNavigator.currentResult;\n }\n\n public focusNextElement() {\n this.toggleCanExcludeCurrentResult();\n\n if (this.willExcludeCurrentResult) {\n this.announceCurrentResultCanBeExcluded();\n return;\n }\n\n this.defaultDropdownNavigator.moveCurrentResultDown();\n }\n\n public focusPreviousElement() {\n if (this.willExcludeCurrentResult) {\n this.toggleCanExcludeCurrentResult();\n return;\n }\n\n this.moveResultUp();\n this.toggleCanExcludeCurrentResult();\n }\n\n private moveResultUp() {\n if (this.willExcludeCurrentResult) {\n this.toggleCanExcludeCurrentResult();\n return;\n }\n\n this.defaultDropdownNavigator.moveCurrentResultUp();\n this.toggleCanExcludeCurrentResult();\n }\n\n private get isCurrentResultNotAFacetValue() {\n return this.currentResult.hasClass('coveo-facet-search-select-all') || this.currentResult.hasClass('coveo-facet-value-not-found');\n }\n\n private get willExcludeCurrentResult() {\n return this.currentResult.hasClass('coveo-facet-value-will-exclude');\n }\n\n private toggleCanExcludeCurrentResult() {\n if (this.isCurrentResultNotAFacetValue) {\n return;\n }\n\n this.currentResult.toggleClass('coveo-facet-value-will-exclude', !this.willExcludeCurrentResult);\n }\n\n private announceCurrentResultCanBeExcluded() {\n if (this.isCurrentResultNotAFacetValue) {\n return;\n }\n\n const excludeIcon = $$(this.currentResult).find('.coveo-facet-value-exclude');\n this.config.facetSearch.updateAriaLive(excludeIcon.getAttribute('aria-label'));\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Facet/FacetSearchDropdownNavigation/FacetSearchDropdownNavigator.ts","import { $$, Dom } from '../../utils/Dom';\nimport { SVGIcons } from '../../utils/SVGIcons';\nimport { SVGDom } from '../../utils/SVGDom';\nimport { escape } from 'underscore';\nimport { l } from '../../strings/Strings';\nimport * as Globalize from 'globalize';\n\nexport interface CategoryFacetData {\n value: string;\n count: number;\n}\n\nexport class CategoryFacetTemplates {\n private listRoot: Dom;\n private collapseArrow: Dom;\n\n constructor() {\n this.listRoot = $$('ul', { className: 'coveo-category-facet-values' });\n this.collapseArrow = $$('span', { className: 'coveo-category-facet-collapse-children' }, SVGIcons.icons.arrowDown);\n SVGDom.addClassToSVGInContainer(this.collapseArrow.el, 'coveo-category-facet-collapse-children-svg');\n }\n\n public buildListRoot() {\n return this.listRoot.clone(true);\n }\n\n public buildListElement(data: CategoryFacetData) {\n const div = $$('div', {}, this.createListElement(data));\n return $$(div.el.firstChild as HTMLElement);\n }\n\n public buildAllCategoriesButton() {\n const allCategoriesCaption = $$('span', { className: 'coveo-category-facet-all-categories-caption' }, l('AllCategories'));\n const allCategories = $$(\n 'li',\n { className: 'coveo-category-facet-value coveo-category-facet-all-categories' },\n this.buildCollapseArrow(),\n allCategoriesCaption\n );\n return allCategories;\n }\n\n public buildEllipsis() {\n const ellipsisCaption = $$('span', { className: 'coveo-category-facet-ellipsis-caption' }, '[ ... ]');\n const ellipsis = $$('li', { className: 'coveo-category-facet-ellipsis' }, ellipsisCaption);\n return ellipsis;\n }\n\n public buildCollapseArrow() {\n return this.collapseArrow.clone(true);\n }\n\n private getFormattedCount(count: number) {\n return Globalize.format(count, 'n0');\n }\n\n private createListElement(data: CategoryFacetData) {\n return `\n \n `;\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/CategoryFacet/CategoryFacetTemplates.ts","import { CategoryFacetTemplates } from './CategoryFacetTemplates';\nimport { Dom } from '../../utils/Dom';\nimport { CategoryChildrenValueRenderer } from './CategoryValueChildrenRenderer';\nimport { CategoryFacet } from './CategoryFacet';\nimport { ICategoryFacetValue } from '../../rest/CategoryFacetValue';\nimport { CategoryValueParent, CategoryValue } from './CategoryValue';\n\nexport class CategoryValueRoot implements CategoryValueParent {\n public path = [];\n public categoryChildrenValueRenderer: CategoryChildrenValueRenderer;\n public listRoot: Dom;\n\n constructor(private element: Dom, categoryFacetTemplates: CategoryFacetTemplates, categoryFacet: CategoryFacet) {\n this.categoryChildrenValueRenderer = new CategoryChildrenValueRenderer(element, categoryFacetTemplates, this, categoryFacet);\n this.listRoot = categoryFacetTemplates.buildListRoot();\n this.appendListRoot();\n }\n\n public renderChildren(values: ICategoryFacetValue[]) {\n this.appendListRoot();\n this.categoryChildrenValueRenderer.renderChildren(values);\n }\n\n public renderAsParent(value: ICategoryFacetValue): CategoryValue {\n this.appendListRoot();\n return this.categoryChildrenValueRenderer.renderAsParent(value);\n }\n\n public get children(): CategoryValue[] {\n return this.categoryChildrenValueRenderer.children;\n }\n\n public clear() {\n this.listRoot.detach();\n this.listRoot.empty();\n this.categoryChildrenValueRenderer.clearChildren();\n }\n\n private appendListRoot() {\n this.element.append(this.listRoot.el);\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/CategoryFacet/CategoryValueRoot.ts","import { Dom, $$ } from '../../utils/Dom';\nimport { CategoryFacetTemplates } from './CategoryFacetTemplates';\nimport { CategoryChildrenValueRenderer } from './CategoryValueChildrenRenderer';\nimport { CategoryFacet, CategoryValueDescriptor } from './CategoryFacet';\nimport { ICategoryFacetValue } from '../../rest/CategoryFacetValue';\nimport { analyticsActionCauseList } from '../Analytics/AnalyticsActionListMeta';\nimport { AccessibleButton } from '../../utils/AccessibleButton';\nimport { l } from '../../strings/Strings';\n\nexport interface CategoryValueParent {\n listRoot: Dom;\n path: string[];\n categoryChildrenValueRenderer: CategoryChildrenValueRenderer;\n renderAsParent(categoryFacetValue: ICategoryFacetValue): CategoryValue;\n renderChildren(categoryFacetValues: ICategoryFacetValue[]): void;\n}\n\nexport class CategoryValue implements CategoryValueParent {\n private collapseArrow: Dom;\n\n public path: string[];\n public element: Dom;\n public isActive = false;\n public categoryChildrenValueRenderer: CategoryChildrenValueRenderer;\n\n constructor(\n public listRoot: Dom,\n public categoryValueDescriptor: CategoryValueDescriptor,\n private categoryFacetTemplates: CategoryFacetTemplates,\n private categoryFacet: CategoryFacet\n ) {\n this.element = this.categoryFacetTemplates.buildListElement({\n value: this.captionedValueDescriptorValue,\n count: this.categoryValueDescriptor.count\n });\n this.collapseArrow = this.categoryFacetTemplates.buildCollapseArrow();\n this.categoryChildrenValueRenderer = new CategoryChildrenValueRenderer(this.element, categoryFacetTemplates, this, this.categoryFacet);\n this.path = this.categoryValueDescriptor.path;\n }\n\n public render(isChild: boolean) {\n if (this.pastMaximumDepth()) {\n this.element.addClass('coveo-category-facet-last-value');\n }\n\n if (isChild) {\n this.element.addClass('coveo-category-facet-child-value');\n } else {\n this.element.addClass('coveo-category-facet-parent-value');\n }\n\n this.listRoot.append(this.element.el);\n }\n\n public getDescriptor() {\n return {\n value: this.categoryValueDescriptor.value,\n count: this.categoryValueDescriptor.count,\n path: this.path\n };\n }\n\n public clear() {\n this.element.detach();\n this.categoryChildrenValueRenderer.clearChildren();\n }\n\n public renderChildren(values: ICategoryFacetValue[]) {\n this.isActive = true;\n this.element.addClass('coveo-active-category-facet-parent');\n this.categoryChildrenValueRenderer.renderChildren(values);\n }\n\n public renderAsParent(value: ICategoryFacetValue) {\n return this.categoryChildrenValueRenderer.renderAsParent(value);\n }\n\n public get children() {\n return this.categoryChildrenValueRenderer.children;\n }\n\n public makeSelectable() {\n const element = $$(this.element.find('.coveo-category-facet-value-label'));\n element.addClass('coveo-selectable');\n\n const count = this.categoryValueDescriptor.count;\n const countLabel = l('ResultCount', count.toString(), count);\n const label = l('IncludeValueWithResultCount', this.captionedValueDescriptorValue, countLabel);\n\n new AccessibleButton()\n .withElement(element)\n .withSelectAction(() => this.onSelect())\n .withLabel(label)\n .build();\n\n return this;\n }\n\n public showCollapseArrow() {\n if (!this.collapseArrow.el.parentElement) {\n const label = this.element.find('label');\n $$(label).prepend(this.collapseArrow.el);\n }\n\n return this;\n }\n\n private get captionedValueDescriptorValue() {\n const value = this.categoryValueDescriptor.value;\n return this.categoryFacet.getCaption(value);\n }\n\n private onSelect() {\n if (!this.pastMaximumDepth()) {\n this.categoryFacet.logAnalyticsEvent(analyticsActionCauseList.categoryFacetSelect, this.path);\n this.categoryFacet.scrollToTop();\n this.categoryFacet.changeActivePath(this.path);\n this.categoryFacet.executeQuery();\n }\n }\n\n private pastMaximumDepth() {\n return this.path.length - this.categoryFacet.options.basePath.length >= this.categoryFacet.options.maximumDepth;\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/CategoryFacet/CategoryValue.ts","import { CategoryFacet } from '../ui/CategoryFacet/CategoryFacet';\nimport { QueryBuilder } from '../ui/Base/QueryBuilder';\nimport { ICategoryFacetRequest } from '../rest/CategoryFacetRequest';\nimport { IGroupByRequest } from '../rest/GroupByRequest';\nimport { AllowedValuesPatternType } from '../rest/AllowedValuesPatternType';\nimport { IGroupByValue } from '../rest/GroupByValue';\nimport { Utils } from '../utils/Utils';\n\nexport class CategoryFacetQueryController {\n constructor(private categoryFacet: CategoryFacet) {}\n\n public putCategoryFacetInQueryBuilder(queryBuilder: QueryBuilder, path: string[], maximumNumberOfValues: number): number {\n const positionInQuery = queryBuilder.categoryFacets.length;\n this.addQueryFilter(queryBuilder, path);\n this.addCategoryFacetRequest(queryBuilder, path, maximumNumberOfValues);\n return positionInQuery;\n }\n\n public async searchFacetValues(value: string, numberOfValues: number): Promise {\n const lastQuery = { ...this.categoryFacet.queryController.getLastQuery() };\n\n const groupByRequest: IGroupByRequest = {\n allowedValues: [this.getAllowedValuesPattern(value)],\n allowedValuesPatternType: AllowedValuesPatternType.Wildcards,\n maximumNumberOfValues: numberOfValues,\n field: this.categoryFacet.options.field as string,\n sortCriteria: 'occurrences',\n injectionDepth: this.categoryFacet.options.injectionDepth\n };\n\n lastQuery.groupBy = [groupByRequest];\n lastQuery.categoryFacets.splice(this.categoryFacet.positionInQuery, 1);\n const results = await this.categoryFacet.queryController.getEndpoint().search(lastQuery);\n\n const sortByNumberOfResultsThenPathLength = (firstGroupByValue: IGroupByValue, secondGroupByValue: IGroupByValue) => {\n if (firstGroupByValue.numberOfResults == secondGroupByValue.numberOfResults) {\n return firstGroupByValue.value.length - secondGroupByValue.value.length;\n }\n return secondGroupByValue.numberOfResults - firstGroupByValue.numberOfResults;\n };\n\n return results.groupByResults[0].values.sort(sortByNumberOfResultsThenPathLength);\n }\n\n public addDebugGroupBy(queryBuilder: QueryBuilder, value: string) {\n queryBuilder.groupByRequests.push({\n field: this.categoryFacet.options.field as string,\n allowedValues: [`.*${Utils.escapeRegexCharacter(value)}.*`],\n allowedValuesPatternType: AllowedValuesPatternType.Regex\n });\n }\n\n private shouldAddFilterToQuery(path: string[]) {\n return path.length != 0 && !Utils.arrayEqual(path, this.categoryFacet.options.basePath);\n }\n\n private addQueryFilter(queryBuilder: QueryBuilder, path: string[]) {\n if (this.shouldAddFilterToQuery(path)) {\n queryBuilder.advancedExpression.addFieldExpression(this.categoryFacet.options.field as string, '==', [\n path.join(this.categoryFacet.options.delimitingCharacter)\n ]);\n }\n }\n\n private addCategoryFacetRequest(queryBuilder: QueryBuilder, path: string[], maximumNumberOfValues: number) {\n const categoryFacetsRequest: ICategoryFacetRequest = {\n field: this.categoryFacet.options.field as string,\n path,\n injectionDepth: this.categoryFacet.options.injectionDepth,\n maximumNumberOfValues,\n delimitingCharacter: this.categoryFacet.options.delimitingCharacter\n };\n queryBuilder.categoryFacets.push(categoryFacetsRequest);\n }\n\n private getAllowedValuesPattern(value: string) {\n const basePath = this.categoryFacet.options.basePath;\n const delimiter = this.categoryFacet.options.delimitingCharacter;\n\n if (Utils.isNonEmptyArray(basePath)) {\n return `${basePath.join(delimiter)}${delimiter}*${value}*`;\n }\n return `*${value}*`;\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/controllers/CategoryFacetQueryController.ts","import { CategoryFacet } from './CategoryFacet';\nimport { FacetSearchElement } from '../Facet/FacetSearchElement';\nimport { pluck, debounce, last } from 'underscore';\nimport { $$, Dom } from '../../utils/Dom';\nimport { SVGDom } from '../../utils/SVGDom';\nimport { SVGIcons } from '../../utils/SVGIcons';\nimport { l } from '../../strings/Strings';\nimport { IGroupByValue } from '../../rest/GroupByValue';\nimport 'styling/_CategoryFacetSearch';\nimport { StringUtils } from '../../utils/StringUtils';\nimport { analyticsActionCauseList, IAnalyticsCategoryFacetMeta } from '../Analytics/AnalyticsActionListMeta';\nimport { IFacetSearch } from '../Facet/IFacetSearch';\nimport { IIndexFieldValue } from '../../rest/FieldValue';\nimport { AccessibleButton } from '../../utils/AccessibleButton';\nimport * as Globalize from 'globalize';\n\nexport class CategoryFacetSearch implements IFacetSearch {\n public container: Dom | undefined;\n public facetSearchElement: FacetSearchElement;\n public displayNewValues: () => void;\n public currentlyDisplayedResults: string[];\n public moreValuesToFetch = true;\n public facetSearchPromise: Promise;\n\n private numberOfValuesToFetch: number;\n\n constructor(private categoryFacet: CategoryFacet, private displayButton = true) {\n this.facetSearchElement = new FacetSearchElement(this);\n this.displayNewValues = debounce(this.getDisplayNewValuesFunction(), this.categoryFacet.options.facetSearchDelay);\n this.categoryFacet.root.addEventListener('click', (e: MouseEvent) => this.handleClickElsewhere(e));\n this.numberOfValuesToFetch = this.categoryFacet.options.numberOfResultsInFacetSearch;\n }\n\n public get facetType() {\n return CategoryFacet.ID;\n }\n\n public get facetTitle() {\n return this.categoryFacet.options.title || this.categoryFacet.options.field.toString();\n }\n\n public setExpandedFacetSearchAccessibilityAttributes(searchResultsElements: HTMLElement) {\n this.container.setAttribute('aria-expanded', 'true');\n }\n\n public setCollapsedFacetSearchAccessibilityAttributes() {\n this.container.setAttribute('aria-expanded', 'false');\n }\n\n public build() {\n this.container = $$('div', {\n className: 'coveo-category-facet-search-container',\n role: 'button'\n });\n this.container.toggleClass('coveo-category-facet-search-without-button', !this.displayButton);\n\n this.displayButton && this.buildButton();\n\n this.container.append(this.facetSearchElement.build());\n $$(this.facetSearchElement.search).toggleClass('without-animation', !this.displayButton);\n return this.container;\n }\n\n private buildButton() {\n new AccessibleButton()\n .withElement(this.container)\n .withSelectAction(() => {\n $$(this.categoryFacet.element).addClass('coveo-category-facet-searching');\n this.focus();\n })\n .withLabel(l('SearchFacetResults', this.facetTitle))\n .build();\n\n this.buildfacetSearchPlaceholder();\n }\n\n public focus() {\n this.facetSearchElement.focus();\n }\n\n public clear() {\n this.dismissSearchResults();\n this.container && this.container.detach();\n }\n\n public dismissSearchResults() {\n this.removeNoResultsCssClasses();\n $$(this.categoryFacet.element).removeClass('coveo-category-facet-searching');\n $$(this.facetSearchElement.searchResults).empty();\n this.facetSearchElement.clearSearchInput();\n this.facetSearchElement.hideSearchResultsElement();\n this.currentlyDisplayedResults = null;\n this.numberOfValuesToFetch = this.categoryFacet.options.numberOfResultsInFacetSearch;\n this.moreValuesToFetch = true;\n }\n\n public keyboardEventDefaultHandler() {\n this.moreValuesToFetch = true;\n this.displayNewValues();\n }\n\n public keyboardNavigationEnterPressed() {\n this.selectCurrentResult();\n }\n\n public fetchMoreValues() {\n this.numberOfValuesToFetch += this.categoryFacet.options.numberOfResultsInFacetSearch;\n this.displayNewValues();\n }\n\n public getCaptions() {\n const searchResults = $$(this.facetSearchElement.searchResults);\n const captions = searchResults\n .findAll('.coveo-category-facet-search-value-caption')\n .concat(searchResults.findAll('.coveo-category-facet-search-path-parents'))\n .concat(searchResults.findAll('.coveo-category-facet-search-path-last-value'));\n return captions;\n }\n\n public updateAriaLive(text: string) {\n this.categoryFacet.searchInterface.ariaLive.updateText(text);\n }\n\n private selectCurrentResult() {\n if (this.facetSearchElement.currentResult) {\n const currentResultPathData = this.facetSearchElement.currentResult.el.dataset.path;\n const delimiter = this.categoryFacet.options.delimitingCharacter;\n const path = currentResultPathData.split(delimiter);\n this.categoryFacet.changeActivePath(path);\n this.categoryFacet.logAnalyticsEvent(analyticsActionCauseList.categoryFacetSelect, path);\n this.categoryFacet.executeQuery();\n this.categoryFacet.scrollToTop();\n }\n }\n\n private handleClickElsewhere(e: MouseEvent) {\n const closestContainer = $$(e.target).closest('.coveo-category-facet-search-container');\n\n const isSelfContainer = this.container && closestContainer === this.container.el;\n if (!closestContainer || !isSelfContainer) {\n this.dismissSearchResults();\n }\n }\n\n private buildfacetSearchPlaceholder() {\n const placeholder = $$('div', { className: 'coveo-category-facet-search-placeholder' });\n\n const icon = $$('div', { className: 'coveo-category-facet-search-icon' }, SVGIcons.icons.checkboxHookExclusionMore);\n SVGDom.addClassToSVGInContainer(icon.el, 'coveo-category-facet-search-icon-svg');\n\n const label = $$('span', { className: 'coveo-category-facet-search-label' }, l('Search'));\n\n placeholder.append(icon.el);\n placeholder.append(label.el);\n this.container.append(placeholder.el);\n }\n\n private getDisplayNewValuesFunction() {\n return async () => {\n this.facetSearchElement.showFacetSearchWaitingAnimation();\n this.categoryFacet.logger.info('Triggering new Category Facet search');\n const categoryFacetValues = await this.categoryFacet.categoryFacetQueryController.searchFacetValues(\n this.facetSearchElement.input.value,\n this.numberOfValuesToFetch\n );\n this.logAnalyticsEvent();\n if (categoryFacetValues.length < this.numberOfValuesToFetch) {\n this.moreValuesToFetch = false;\n }\n if (categoryFacetValues.length == 0) {\n this.noFacetSearchResults();\n return;\n }\n this.removeNoResultsCssClasses();\n this.setFacetSearchResults(categoryFacetValues);\n\n if (this.shouldPositionSearchResults) {\n this.facetSearchElement.positionSearchResults();\n }\n\n this.facetSearchElement.hideFacetSearchWaitingAnimation();\n };\n }\n\n private setFacetSearchResults(categoryFacetValues: IGroupByValue[]) {\n $$(this.facetSearchElement.searchResults).empty();\n this.currentlyDisplayedResults = pluck(categoryFacetValues, 'value');\n for (let i = 0; i < categoryFacetValues.length; i++) {\n const searchResult = this.buildFacetSearchValue(categoryFacetValues[i], i);\n if (i == 0) {\n this.facetSearchElement.setAsCurrentResult(searchResult);\n }\n this.facetSearchElement.appendToSearchResults(searchResult.el);\n }\n this.highlightCurrentQueryWithinSearchResults();\n this.facetSearchElement.updateAriaLiveWithResults(\n this.facetSearchElement.input.value,\n this.currentlyDisplayedResults.length,\n this.moreValuesToFetch\n );\n }\n\n private getFormattedCount(count: number) {\n return Globalize.format(count, 'n0');\n }\n\n private buildFacetSearchValue(categoryFacetValue: IGroupByValue, index: number) {\n const path = categoryFacetValue.value.split(this.categoryFacet.options.delimitingCharacter);\n\n const pathParents = path.slice(0, -1).length != 0 ? `${path.slice(0, -1).join('/')}/` : '';\n\n const value = $$('span', { className: 'coveo-category-facet-search-value-caption' }, last(path));\n const number = $$(\n 'span',\n { className: 'coveo-category-facet-search-value-number' },\n this.getFormattedCount(categoryFacetValue.numberOfResults)\n );\n const pathParentsCaption = $$('span', { className: 'coveo-category-facet-search-path-parents' }, pathParents);\n\n const pathToValueCaption = $$('span', { className: 'coveo-category-facet-search-path' }, pathParentsCaption);\n\n const firstRow = $$('div', { className: 'coveo-category-facet-search-first-row' }, value, number);\n const secondRow = $$('div', { className: 'coveo-category-facet-search-second-row' }, pathToValueCaption);\n const item = $$(\n 'li',\n {\n id: `coveo-category-facet-search-suggestion-${index}`,\n role: 'option',\n ariaSelected: 'false',\n className: 'coveo-category-facet-search-value',\n title: path\n },\n firstRow,\n secondRow\n );\n item.el.dataset.path = categoryFacetValue.value;\n\n const countLabel = l('ResultCount', this.getFormattedCount(categoryFacetValue.numberOfResults), categoryFacetValue.numberOfResults);\n const label = l('IncludeValueWithResultCount', last(path), countLabel);\n\n new AccessibleButton()\n .withElement(item)\n .withSelectAction(() => {\n this.categoryFacet.changeActivePath(path);\n this.categoryFacet.scrollToTop();\n this.categoryFacet.logAnalyticsEvent(analyticsActionCauseList.categoryFacetSelect, path);\n this.categoryFacet.executeQuery();\n })\n .withLabel(label)\n .build();\n\n return item;\n }\n\n private noFacetSearchResults() {\n this.facetSearchElement.hideFacetSearchWaitingAnimation();\n this.facetSearchElement.emptyAndShowNoResults();\n $$(this.facetSearchElement.search).addClass('coveo-facet-search-no-results');\n $$(this.categoryFacet.element).addClass('coveo-no-results');\n }\n\n private removeNoResultsCssClasses() {\n this.facetSearchElement.search && $$(this.facetSearchElement.search).removeClass('coveo-facet-search-no-results');\n $$(this.categoryFacet.element).removeClass('coveo-no-results');\n }\n\n private highlightCurrentQueryWithinSearchResults() {\n const regex = new RegExp(`(${StringUtils.stringToRegex(this.facetSearchElement.input.value, true)})`, 'ig');\n this.facetSearchElement.highlightCurrentQueryInSearchResults(regex);\n }\n\n private logAnalyticsEvent() {\n this.categoryFacet.usageAnalytics.logCustomEvent(\n analyticsActionCauseList.categoryFacetSearch,\n {\n categoryFacetId: this.categoryFacet.options.id,\n categoryFacetField: this.categoryFacet.options.field.toString(),\n categoryFacetTitle: this.categoryFacet.options.title\n },\n this.categoryFacet.root\n );\n }\n\n private get shouldPositionSearchResults() {\n const searchResults = this.facetSearchElement.searchResults;\n return searchResults && !searchResults.parentElement;\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/CategoryFacet/CategoryFacetSearch.ts","import { $$ } from '../../utils/Dom';\nimport { SVGIcons } from '../../utils/SVGIcons';\nimport { CategoryValueDescriptor, CategoryFacet } from './CategoryFacet';\nimport { AccessibleButton } from '../../utils/AccessibleButton';\nimport { l } from '../../strings/Strings';\nimport { without } from 'underscore';\nimport { getHeadingTag } from '../../utils/AccessibilityUtils';\n\nexport interface ICategoryFacetBreadcrumbOptions {\n headingLevel?: number;\n}\n\nexport class CategoryFacetBreadcrumb {\n constructor(\n private categoryFacet: CategoryFacet,\n private onClickHandler: (e: MouseEvent) => void,\n private categoryValueDescriptor: CategoryValueDescriptor,\n private readonly options?: ICategoryFacetBreadcrumbOptions\n ) {}\n\n public build(): HTMLElement {\n const clear = $$(\n 'span',\n {\n className: 'coveo-facet-breadcrumb-clear'\n },\n SVGIcons.icons.mainClear\n );\n\n const pathToRender = without(this.categoryValueDescriptor.path, ...this.categoryFacet.options.basePath);\n const captionLabel = pathToRender.map(pathPart => this.categoryFacet.getCaption(pathPart)).join('/');\n\n const breadcrumbTitle = $$(\n getHeadingTag(this.options && this.options.headingLevel, 'span'),\n { className: 'coveo-category-facet-breadcrumb-title' },\n `${this.categoryFacet.options.title}:`\n );\n const valuesContainer = $$('span', { className: 'coveo-category-facet-breadcrumb-values' }, captionLabel, clear);\n\n new AccessibleButton()\n .withElement(valuesContainer)\n .withLabel(l('RemoveFilterOn', captionLabel))\n .withSelectAction(this.onClickHandler)\n .build();\n\n const breadcrumb = $$('span', { className: 'coveo-category-facet-breadcrumb' }, breadcrumbTitle, valuesContainer);\n return breadcrumb.el;\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/CategoryFacet/CategoryFacetBreadcrumb.ts","import { CategoryFacet } from './CategoryFacet';\nimport { IBuildingQueryEventArgs, QueryEvents, IQuerySuccessEventArgs } from '../../events/QueryEvents';\nimport { IGroupByResult } from '../../rest/GroupByResult';\nimport { QueryBuilder } from '../Base/QueryBuilder';\nimport { sortBy, chain } from 'underscore';\nimport { Logger } from '../../misc/Logger';\nimport { IGroupByValue } from '../../rest/GroupByValue';\n\nclass PathMap {\n get: (key: string) => PathMap;\n set: (key: string, value?: PathMap) => void;\n}\n\ntype DebugGroupByPositionInQuery = {\n start: number;\n end: number;\n};\n\nexport class CategoryFacetDebug {\n private static logger = new Logger(CategoryFacet);\n private positionInQuery: DebugGroupByPositionInQuery;\n constructor(private categoryFacet: CategoryFacet) {\n this.categoryFacet.bind.onRootElement(QueryEvents.buildingQuery, args => this.handleBuildingQuery(args));\n this.categoryFacet.bind.onRootElement(QueryEvents.querySuccess, args => {\n this.handleQuerySuccess(args);\n });\n }\n\n private handleBuildingQuery(args: IBuildingQueryEventArgs) {\n const firstPositionInQuery = args.queryBuilder.groupByRequests.length;\n if (this.categoryFacet.activePath.length == 0) {\n this.positionInQuery = { start: firstPositionInQuery, end: firstPositionInQuery + 1 };\n this.addGroupByForEmptyPath(args.queryBuilder);\n } else {\n const path = this.categoryFacet.activePath;\n this.positionInQuery = { start: firstPositionInQuery, end: firstPositionInQuery + path.length };\n this.addGroupByForEachPathElement(args.queryBuilder, path);\n }\n }\n\n private handleQuerySuccess(args: IQuerySuccessEventArgs) {\n args.results.groupByResults\n .slice(this.positionInQuery.start, this.positionInQuery.end)\n .forEach(groupByResult => CategoryFacetDebug.analyzeResults(groupByResult, this.categoryFacet.options.delimitingCharacter));\n }\n\n private addGroupByForEmptyPath(queryBuilder: QueryBuilder) {\n queryBuilder.groupByRequests.push({\n field: this.categoryFacet.options.field as string,\n injectionDepth: this.categoryFacet.options.injectionDepth\n });\n }\n\n private addGroupByForEachPathElement(queryBuilder: QueryBuilder, path: string[]) {\n path.forEach(pathElement => {\n this.categoryFacet.categoryFacetQueryController.addDebugGroupBy(queryBuilder, pathElement);\n });\n }\n\n public static analyzeResults(groupByResults: IGroupByResult, delimiter: string) {\n const treeRoot: PathMap = new Map();\n const orphans: string[] = [];\n\n let paths = this.buildPathsFromGroupByValues(groupByResults.values, delimiter);\n paths = sortBy(paths, value => value.length);\n\n paths.forEach(path => {\n if (path.length == 1) {\n this.addFirstNodeToTree(treeRoot, path);\n } else {\n let pathIsValid = true;\n const parentsOnly = path.slice(0, -1);\n let currentNode = treeRoot;\n for (const parent of parentsOnly) {\n currentNode = currentNode.get(parent);\n if (!currentNode) {\n this.processOrphan(orphans, path, delimiter);\n pathIsValid = false;\n break;\n }\n }\n if (pathIsValid) {\n this.addValidNodeToTree(currentNode, path);\n }\n }\n });\n return orphans;\n }\n\n private static buildPathsFromGroupByValues(values: IGroupByValue[], delimiter: string) {\n return chain(values)\n .pluck('value')\n .map((value: string) => value.split(delimiter))\n .sortBy(value => value.length)\n .value();\n }\n\n private static addFirstNodeToTree(treeRoot: PathMap, path: string[]) {\n treeRoot.set(path[0], new Map());\n }\n\n private static addValidNodeToTree(node: PathMap, path: string[]) {\n node.set(path.slice(-1)[0], new Map());\n }\n\n private static processOrphan(orphans: string[], path: string[], delimiter: string) {\n const formattedOrphan = path.join(delimiter);\n orphans.push(formattedOrphan);\n this.logger.error(`Value ${formattedOrphan} has no parent.`);\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/CategoryFacet/CategoryFacetDebug.ts","import { CategoryFacet } from './CategoryFacet';\nimport { $$ } from '../../utils/Dom';\nimport { l } from '../../strings/Strings';\nimport { SVGIcons } from '../../utils/SVGIcons';\nimport { SVGDom } from '../../utils/SVGDom';\nimport { AccessibleButton } from '../../utils/AccessibleButton';\n\nexport interface ICategoryFacetHeaderOptions {\n categoryFacet: CategoryFacet;\n title: string;\n}\n\nexport class CategoryFacetHeader {\n public element: HTMLElement;\n\n constructor(private options: ICategoryFacetHeaderOptions) {\n this.element = document.createElement('div');\n $$(this.element).addClass('coveo-facet-header');\n }\n\n public build(): HTMLElement {\n const waitElement = this.buildWaitAnimation();\n\n const titleSection = $$(\n 'div',\n {\n className: 'coveo-category-facet-title',\n role: 'heading',\n 'aria-level': '2',\n 'aria-label': `${l('FacetTitle', this.options.title)}.`\n },\n this.options.title\n );\n this.element = $$('div', { className: 'coveo-category-facet-header' }, titleSection).el;\n $$(this.element).append(waitElement);\n\n const eraserElement = this.buildEraser();\n $$(this.element).append(eraserElement);\n return this.element;\n }\n\n private buildWaitAnimation(): HTMLElement {\n const waitElement = $$('div', { className: CategoryFacet.WAIT_ELEMENT_CLASS }, SVGIcons.icons.loading).el;\n SVGDom.addClassToSVGInContainer(waitElement, 'coveo-category-facet-header-wait-animation-svg');\n waitElement.style.visibility = 'hidden';\n return waitElement;\n }\n\n private buildEraser() {\n const eraserElement = $$('div', { className: 'coveo-category-facet-header-eraser coveo-facet-header-eraser' }, SVGIcons.icons.mainClear)\n .el;\n\n SVGDom.addClassToSVGInContainer(eraserElement, 'coveo-facet-header-eraser-svg');\n\n const onClearClick = () => {\n this.options.categoryFacet.reset();\n this.options.categoryFacet.scrollToTop();\n };\n\n new AccessibleButton()\n .withElement(eraserElement)\n .withLabel(l('Clear', this.options.title))\n .withClickAction(onClearClick)\n .withEnterKeyboardAction(onClearClick)\n .build();\n\n return eraserElement;\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/CategoryFacet/CategoryFacetHeader.ts","import { ICategoryFacetValue } from '../../rest/CategoryFacetValue';\nimport { ICategoryFacetResult } from '../../rest/CategoryFacetResult';\nimport { find } from 'underscore';\n\nexport type ISeenValue = { result: ICategoryFacetValue; children: ISeenValue[] };\n\nexport class CategoryFacetValuesTree {\n public seenValues: ISeenValue[] = [];\n\n public getValueForLastPartInPath(path: string[]) {\n const nullCategoryFacetValue: ICategoryFacetValue = { value: '', numberOfResults: 0 };\n let currentNode: ISeenValue;\n\n for (const part of path) {\n const nodesToSearch = currentNode ? currentNode.children : this.seenValues;\n const node = this.findNodeWithValue(nodesToSearch, part);\n\n if (!node) {\n return nullCategoryFacetValue;\n }\n\n currentNode = node;\n }\n\n return currentNode ? currentNode.result : nullCategoryFacetValue;\n }\n\n public storeNewValues(categoryFacetResult: ICategoryFacetResult) {\n let currentNodes = this.seenValues;\n\n for (const parent of categoryFacetResult.parentValues) {\n const node = this.findNodeWithValue(currentNodes, parent.value);\n\n if (!node) {\n const newNode: ISeenValue = { result: parent, children: [] };\n currentNodes.push(newNode);\n }\n\n currentNodes = this.findNodeWithValue(currentNodes, parent.value).children;\n }\n\n categoryFacetResult.values\n .filter(result => !this.findNodeWithValue(currentNodes, result.value))\n .forEach(result => currentNodes.push({ result, children: [] }));\n }\n\n private findNodeWithValue(nodes: ISeenValue[], value: string) {\n return find(nodes, node => node.result.value === value);\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/CategoryFacet/CategoryFacetValuesTree.ts","import { Assert } from '../../misc/Assert';\nimport { Utils } from '../../utils/Utils';\nimport { IGroupByResult } from '../../rest/GroupByResult';\nimport { FacetValue } from './FacetValue';\nimport * as _ from 'underscore';\nimport { FacetValuesOrder } from './FacetValuesOrder';\n\nexport interface ISortFacetValuesOptions {\n facetValuesOrder: FacetValuesOrder;\n numberOfValues: number;\n}\n\nexport class FacetValues {\n private values: FacetValue[];\n\n constructor(groupByResult?: IGroupByResult) {\n if (Utils.exists(groupByResult)) {\n this.values = _.map(groupByResult.values, groupByValue => FacetValue.createFromGroupByValue(groupByValue));\n } else {\n this.values = [];\n }\n }\n\n add(facetValue: FacetValue) {\n Assert.exists(facetValue);\n Assert.check(!this.contains(facetValue.value));\n this.values.push(facetValue);\n }\n\n remove(value: string) {\n Assert.isNonEmptyString(value);\n value = value;\n this.values = _.filter(this.values, (elem: FacetValue) => elem.value != value);\n }\n\n size(): number {\n return this.values.length;\n }\n\n isEmpty(): boolean {\n return this.values.length == 0;\n }\n\n at(index: number): FacetValue {\n Assert.isLargerOrEqualsThan(0, index);\n Assert.isSmallerThan(this.values.length, index);\n return this.values[index];\n }\n\n get(value: string): FacetValue {\n return _.find(this.values, (elem: FacetValue) => elem.value.toLowerCase() == value.toLowerCase());\n }\n\n contains(value: string): boolean {\n return Utils.exists(this.get(value));\n }\n\n getAll(): FacetValue[] {\n return this.values;\n }\n\n getSelected(): FacetValue[] {\n return _.filter(this.values, (value: FacetValue) => value.selected);\n }\n\n getExcluded(): FacetValue[] {\n return _.filter(this.values, (value: FacetValue) => value.excluded);\n }\n\n hasSelectedOrExcludedValues(): boolean {\n return this.getSelected().length != 0 || this.getExcluded().length != 0;\n }\n\n hasSelectedAndExcludedValues(): boolean {\n return this.getSelected().length != 0 && this.getExcluded().length != 0;\n }\n\n hasOnlyExcludedValues(): boolean {\n return this.getSelected().length == 0 && this.getExcluded().length != 0;\n }\n\n hasOnlySelectedValues(): boolean {\n return this.getSelected().length != 0 && this.getExcluded().length == 0;\n }\n\n reset() {\n _.each(this.values, (elem: FacetValue) => elem.reset());\n }\n\n importActiveValuesFromOtherList(other: FacetValues) {\n Assert.exists(other);\n\n _.each(other.getSelected(), (otherValue: FacetValue) => {\n var myValue = this.get(otherValue.value);\n if (Utils.exists(myValue)) {\n myValue.selected = true;\n } else {\n this.values.push(otherValue.cloneWithZeroOccurrences());\n }\n });\n\n _.each(other.getExcluded(), (otherValue: FacetValue) => {\n var myValue = this.get(otherValue.value);\n if (Utils.exists(myValue)) {\n myValue.excluded = true;\n } else if (otherValue.occurrences != 0) {\n var occurrences = otherValue.occurrences;\n var clone = otherValue.cloneWithZeroOccurrences();\n clone.occurrences = occurrences;\n this.values.push(clone);\n } else {\n this.values.push(otherValue.cloneWithZeroOccurrences());\n }\n });\n }\n\n updateCountsFromNewValues(newValues: FacetValues) {\n Assert.exists(newValues);\n\n this.values = _.map(this.values, (myValue: FacetValue) => {\n var newValue = newValues.get(myValue.value);\n if (Utils.exists(newValue)) {\n myValue.updateCountsFromNewValue(newValue);\n return myValue;\n } else if (myValue.occurrences == null) {\n return myValue.cloneWithZeroOccurrences();\n }\n return myValue;\n });\n }\n\n updateDeltaWithFilteredFacetValues(filtered: FacetValues, isMultiValueField: boolean) {\n Assert.exists(filtered);\n _.each(this.values, (unfilteredValue: FacetValue) => {\n var filteredValue = filtered.get(unfilteredValue.value);\n unfilteredValue.waitingForDelta = false;\n if (Utils.exists(filteredValue)) {\n if (unfilteredValue.occurrences - filteredValue.occurrences > 0) {\n // When there are only exclusion in the facet, there should be no \"delta\"\n // The number of value for each facet will be what is selected, no addition.\n if (this.hasOnlyExcludedValues()) {\n unfilteredValue.delta = null;\n unfilteredValue.occurrences = filteredValue.occurrences;\n } else {\n unfilteredValue.delta = unfilteredValue.occurrences - filteredValue.occurrences;\n }\n } else {\n unfilteredValue.delta = null;\n }\n } else if (!unfilteredValue.selected && !unfilteredValue.excluded) {\n if (isMultiValueField && filtered.values.length == 0) {\n unfilteredValue.delta = null;\n unfilteredValue.occurrences = 0;\n } else {\n unfilteredValue.delta = unfilteredValue.occurrences;\n }\n }\n });\n }\n\n mergeWithUnfilteredFacetValues(unfiltered: FacetValues) {\n Assert.exists(unfiltered);\n\n var values: FacetValue[] = [];\n _.each(unfiltered.values, (unfilteredValue: FacetValue) => {\n var filteredValue = this.get(unfilteredValue.value);\n if (Utils.exists(filteredValue)) {\n if (filteredValue.occurrences == unfilteredValue.occurrences) {\n values.push(filteredValue);\n } else {\n values.push(unfilteredValue.cloneWithDelta(unfilteredValue.occurrences, unfilteredValue.occurrences - filteredValue.occurrences));\n }\n } else {\n values.push(unfilteredValue.cloneWithDelta(unfilteredValue.occurrences, unfilteredValue.occurrences));\n }\n });\n\n var index = 0;\n _.each(this.values, (value: FacetValue) => {\n var unfilteredValue = unfiltered.get(value.value);\n if (!Utils.exists(unfilteredValue)) {\n if (value.selected || value.excluded) {\n values.splice(index, 0, value);\n index++;\n }\n } else {\n for (var i = 0; i < values.length; i++) {\n if (values[i].value == value.value) {\n index = i + 1;\n break;\n }\n }\n }\n });\n this.values = values;\n }\n\n sort(options: ISortFacetValuesOptions) {\n const { facetValuesOrder, numberOfValues } = options;\n\n this.values = facetValuesOrder.reorderValuesIfUsingAlphabeticalSort(this.values);\n this.sortValuesDependingOnStatus(numberOfValues);\n this.values = facetValuesOrder.reorderValuesIfUsingCustomSort(this.values);\n }\n\n sortValuesDependingOnStatus(numOfDisplayedValues: number) {\n this.values = _.sortBy(this.values, (value: FacetValue) => {\n if (value.selected) {\n return 1;\n } else if (value.excluded) {\n return 3;\n } else {\n return 2;\n }\n });\n\n this.ensureExcludedValuesAreDisplayed(numOfDisplayedValues);\n }\n\n private ensureExcludedValuesAreDisplayed(numOfDisplayedValues: number) {\n if (numOfDisplayedValues != null && numOfDisplayedValues < this.values.length) {\n var nbExclude = this.getExcluded().length;\n var excludedValues = this.values.splice(this.values.length - nbExclude, nbExclude);\n this.values.splice(numOfDisplayedValues - nbExclude, 0, ...excludedValues);\n }\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Facet/FacetValues.ts","import 'styling/_Facet';\nimport 'styling/_FacetFooter';\nimport * as _ from 'underscore';\nimport { FacetQueryController } from '../../controllers/FacetQueryController';\nimport { BreadcrumbEvents, IClearBreadcrumbEventArgs, IPopulateBreadcrumbEventArgs } from '../../events/BreadcrumbEvents';\nimport { IPopulateOmniboxEventArgs, OmniboxEvents } from '../../events/OmniboxEvents';\nimport { IDoneBuildingQueryEventArgs, INewQueryEventArgs, IQuerySuccessEventArgs, QueryEvents } from '../../events/QueryEvents';\nimport { ISearchAlertsPopulateMessageEventArgs, SearchAlertsEvents } from '../../events/SearchAlertEvents';\nimport { exportGlobally } from '../../GlobalExports';\nimport { Assert } from '../../misc/Assert';\nimport { Defer } from '../../misc/Defer';\nimport { IAttributesChangedEventArg, MODEL_EVENTS } from '../../models/Model';\nimport { IQueryStateExcludedAttribute, IQueryStateIncludedAttribute, QueryStateModel } from '../../models/QueryStateModel';\nimport { IIndexFieldValue } from '../../rest/FieldValue';\nimport { IStringMap } from '../../rest/GenericParam';\nimport { IGroupByResult } from '../../rest/GroupByResult';\nimport { IGroupByValue } from '../../rest/GroupByValue';\nimport { IQueryResults } from '../../rest/QueryResults';\nimport { ISearchEndpoint } from '../../rest/SearchEndpointInterface';\nimport { l } from '../../strings/Strings';\nimport { AccessibleButton } from '../../utils/AccessibleButton';\nimport { ComponentsTypes } from '../../utils/ComponentsTypes';\nimport {\n DependsOnManager,\n IDependentFacet,\n IDependsOnCompatibleFacetOptions,\n IDependentFacetCondition\n} from '../../utils/DependsOnManager';\nimport { DeviceUtils } from '../../utils/DeviceUtils';\nimport { $$, Win } from '../../utils/Dom';\nimport { SVGDom } from '../../utils/SVGDom';\nimport { SVGIcons } from '../../utils/SVGIcons';\nimport { Utils } from '../../utils/Utils';\nimport {\n analyticsActionCauseList,\n IAnalyticsActionCause,\n IAnalyticsFacetMeta,\n IAnalyticsFacetSortMeta\n} from '../Analytics/AnalyticsActionListMeta';\nimport { Component } from '../Base/Component';\nimport { IComponentBindings } from '../Base/ComponentBindings';\nimport { ComponentOptions } from '../Base/ComponentOptions';\nimport { IFieldOption, IQueryExpression } from '../Base/IComponentOptions';\nimport { Initialization } from '../Base/Initialization';\nimport { IOmniboxDataRow } from '../Omnibox/OmniboxInterface';\nimport { IResponsiveComponentOptions } from '../ResponsiveComponents/ResponsiveComponentsManager';\nimport { ResponsiveFacetOptions } from '../ResponsiveComponents/ResponsiveFacetOptions';\nimport { ResponsiveFacets } from '../ResponsiveComponents/ResponsiveFacets';\nimport { BreadcrumbValueElement } from './BreadcrumbValueElement';\nimport { BreadcrumbValueList } from './BreadcrumbValuesList';\nimport { FacetHeader } from './FacetHeader';\nimport { FacetSearch } from './FacetSearch';\nimport { FacetSearchParameters } from './FacetSearchParameters';\nimport { FacetSearchValuesList } from './FacetSearchValuesList';\nimport { FacetSettings } from './FacetSettings';\nimport { FacetSort } from './FacetSort';\nimport { FacetSortCriterion } from './FacetSortCriterion';\nimport { FacetUtils } from './FacetUtils';\nimport { FacetValueElement } from './FacetValueElement';\nimport { FacetValue } from './FacetValue';\nimport { FacetValues, ISortFacetValuesOptions } from './FacetValues';\nimport { FacetValuesList } from './FacetValuesList';\nimport { FacetValuesOrder } from './FacetValuesOrder';\nimport { OmniboxValueElement } from './OmniboxValueElement';\nimport { OmniboxValuesList } from './OmniboxValuesList';\nimport { ValueElement } from './ValueElement';\nimport { ValueElementRenderer } from './ValueElementRenderer';\nimport { IFieldValueCompatibleFacet } from '../FieldValue/IFieldValueCompatibleFacet';\n\ntype ComputedFieldOperation = 'sum' | 'average' | 'minimum' | 'maximum';\ntype ComputedFieldFormat = 'c0' | 'n0' | 'n2';\n\nexport interface IFacetOptions extends IResponsiveComponentOptions, IDependsOnCompatibleFacetOptions {\n title?: string;\n field?: IFieldOption;\n isMultiValueField?: boolean;\n numberOfValues?: number;\n pageSize?: number;\n sortCriteria?: string;\n availableSorts?: string[];\n injectionDepth?: number;\n showIcon?: boolean;\n useAnd?: boolean;\n enableCollapse?: boolean;\n enableTogglingOperator?: boolean;\n enableMoreLess?: boolean;\n valueCaption?: any;\n lookupField?: IFieldOption;\n enableFacetSearch?: boolean;\n facetSearchDelay?: number;\n facetSearchIgnoreAccents?: boolean;\n numberOfValuesInFacetSearch?: number;\n includeInBreadcrumb?: boolean;\n includeInOmnibox?: boolean;\n numberOfValuesInOmnibox?: number;\n numberOfValuesInBreadcrumb?: number;\n computedField?: IFieldOption;\n computedFieldOperation?: string;\n computedFieldFormat?: string;\n computedFieldCaption?: string;\n preservePosition?: boolean;\n scrollContainer?: HTMLElement;\n paddingContainer?: HTMLElement;\n customSort?: string[];\n enableSettings?: boolean;\n enableSettingsFacetState?: boolean;\n allowedValues?: string[];\n headerIcon?: string;\n valueIcon?: (facetValue: FacetValue) => string;\n additionalFilter?: IQueryExpression;\n useWildcardsInFacetSearch?: boolean;\n}\n\n/**\n * The `Facet` component displays a *facet* of the results for the current query. A facet is a list of values for a\n * certain field occurring in the results, ordered using a configurable criteria (e.g., number of occurrences).\n *\n * The list of values is obtained using a [`GroupByRequest`]{@link IGroupByRequest} operation performed at the same time\n * as the main query.\n *\n * The `Facet` component allows the end user to drill down inside a result set by restricting the result to certain\n * field values. It also allows filtering out values from the facet itself, and can provide a search box to look for\n * specific values inside larger sets.\n *\n * This is probably the most complex component in the Coveo JavaScript Search Framework and as such, it allows for many\n * configuration options.\n *\n * See also the [`FacetRange`]{@link FacetRange} and [`TimespanFacet`]{@link TimespanFacet} components (which\n * extend this component), and the [`FacetSlider`]{@link FacetSlider} and [`CategoryFacet`]{@link CategoryFacet} components (which do not extend this\n * component, but are very similar).\n */\nexport class Facet extends Component implements IFieldValueCompatibleFacet {\n static ID = 'Facet';\n static omniboxIndex = 50;\n\n static doExport = () => {\n exportGlobally({\n Facet: Facet,\n FacetHeader: FacetHeader,\n FacetSearchValuesList: FacetSearchValuesList,\n FacetSettings: FacetSettings,\n FacetSort: FacetSort,\n FacetUtils: FacetUtils,\n FacetValueElement: FacetValueElement,\n FacetValue: FacetValue\n });\n };\n\n /**\n * The possible options for a facet\n * @componentOptions\n */\n static options: IFacetOptions = {\n /**\n * Specifies the title to display at the top of the facet.\n *\n * Default value is the localized string for `NoTitle`.\n */\n title: ComponentOptions.buildLocalizedStringOption({\n localizedString: () => l('NoTitle'),\n section: 'CommonOptions',\n priority: 10\n }),\n /**\n * Specifies the index field whose values the facet should use.\n *\n * The field must of the `string` type.\n *\n * This requires the given field to be configured correctly in the index as a *Facet field* (see\n * [Add or Edit Fields](https://docs.coveo.com/en/1982/)).\n *\n * Specifying a value for this option is required for the `Facet` component to work.\n */\n field: ComponentOptions.buildFieldOption({ required: true, groupByField: true, section: 'CommonOptions' }),\n headerIcon: ComponentOptions.buildStringOption({\n deprecated: 'This option is exposed for legacy reasons, and the recommendation is to not use this option.'\n }),\n /**\n * Specifies a unique identifier for the facet. Among other things, this identifier serves the purpose of saving\n * the facet state in the URL hash.\n *\n * If you have two facets with the same field on the same page, you should specify an `id` value for at least one of\n * those two facets. This `id` must be unique among the facets.\n *\n * Non-word characters except - @ $ _ . + ! * ' ( ) , , ( `^a-zA-Z0-9-@$_.+!*'(),,]+` ) are automatically removed from the `id` value.\n *\n * Default value is the [`field`]{@link Facet.options.field} option value.\n */\n id: ComponentOptions.buildStringOption({\n postProcessing: (value: string, options: IFacetOptions) => {\n if (value) {\n // All non-word characters, except @ (the default character that specifies a field in the index)\n // and characters that do no need to be encoded in the URL : - @ $ _ . + ! * ' ( ) , ,\n const modified = value.replace(/[^a-zA-Z0-9-@$_.+!*'(),,]+/g, '');\n if (Utils.isNullOrEmptyString(modified)) {\n return options.field as string;\n }\n return modified;\n }\n return options.field as string;\n }\n }),\n /**\n * Specifies whether the facet [`field`]{@link Facet.options.field} is configured in the index as a multi-value\n * field (semicolon separated values such as `abc;def;ghi`).\n *\n * Default value is `false`.\n */\n isMultiValueField: ComponentOptions.buildBooleanOption({ defaultValue: false, section: 'CommonOptions' }),\n /**\n * Specifies the field whose values the Facet should display.\n *\n * @deprecated This option is exposed for legacy reasons. It is not recommended to use this option.\n */\n lookupField: ComponentOptions.buildFieldOption({\n deprecated: 'This option is exposed for legacy reasons. It is not recommended to use this option.'\n }),\n /**\n * Specifies whether to display the facet **Settings** menu.\n *\n * See also the [`enableSettingsFacetState`]{@link Facet.options.enableSettingsFacetState},\n * [`availableSorts`]{@link Facet.options.availableSorts}, and\n * [`enableCollapse`]{@link Facet.options.enableCollapse} options.\n *\n * **Note:**\n * > The [`FacetRange`]{@link FacetRange} component does not support this option.\n *\n * Default value is `true`.\n */\n enableSettings: ComponentOptions.buildBooleanOption({ defaultValue: true, section: 'Sorting', priority: 9 }),\n /**\n * If the [`enableSettings`]{@link Facet.options.enableSettings} option is `true`, specifies whether the\n * **Save state** menu option is available in the facet **Settings** menu.\n *\n * **Note:**\n * > The [`FacetRange`]{@link FacetRange} component does not support this option.\n *\n * Default value is `false`.\n */\n enableSettingsFacetState: ComponentOptions.buildBooleanOption({ defaultValue: false, depend: 'enableSettings' }),\n /**\n * If the [`enableSettings`]{@link Facet.options.enableSettings} option is `true`, specifies the sort criteria\n * options to display in the facet **Settings** menu.\n *\n * Possible values are:\n * - `\"occurrences\"`\n * - `\"score\"`\n * - `\"alphaascending\"`\n * - `\"alphadescending\"`\n * - `\"computedfieldascending\"`\n * - `\"computedfielddescending\"`\n * - `\"custom\"`\n *\n * See {@link IGroupByRequest.sortCriteria} for a description of each possible value.\n *\n * **Notes:**\n * > * The [`FacetRange`]{@link FacetRange} component does not support this option.\n *\n * > * Using value captions will disable alphabetical sorts (see the [valueCaption]{@link Facet.options.valueCaption} option).\n *\n * Default value is `occurrences,score,alphaascending,alphadescending`.\n */\n availableSorts: ComponentOptions.buildListOption({\n defaultValue: ['occurrences', 'score', 'alphaascending', 'alphadescending'],\n section: 'Sorting',\n depend: 'enableSettings',\n values: [\n 'occurrences',\n 'score',\n 'alphaascending',\n 'alphadescending',\n 'computedfieldascending',\n 'computedfielddescending',\n 'chisquare',\n 'nosort'\n ]\n }),\n /**\n * Specifies the criteria to use to sort the facet values.\n *\n * See {@link IGroupByRequest.sortCriteria} for the list and description of possible values.\n *\n * Default value is the first sort criteria specified in the [`availableSorts`]{@link Facet.options.availableSorts}\n * option, or `occurrences` if no sort criteria is specified.\n */\n sortCriteria: ComponentOptions.buildStringOption({\n postProcessing: (value, options: IFacetOptions) =>\n value || (options.availableSorts.length > 0 ? (options.availableSorts[0] as FacetSortCriterion) : 'occurrences'),\n section: 'Sorting'\n }),\n /**\n * Specifies a custom order by which to sort the facet values.\n *\n * **Example:**\n *\n * You could use this option to specify a logical order for support tickets, such as:\n * ```html\n * \n * ```\n *\n * **Note:**\n * > The [`FacetRange`]{@link FacetRange} component does not support this option.\n */\n customSort: ComponentOptions.buildListOption({ section: 'Sorting' }),\n /**\n * Specifies the maximum number of field values to display by default in the facet before the user\n * clicks the arrow to show more.\n *\n * See also the [`enableMoreLess`]{@link Facet.options.enableMoreLess} option.\n */\n numberOfValues: ComponentOptions.buildNumberOption({ defaultValue: 5, min: 0, section: 'CommonOptions' }),\n /**\n * Specifies the *injection depth* to use for the [`GroupByRequest`]{@link IGroupByRequest} operation.\n *\n * The injection depth determines how many results to scan in the index to ensure that the facet lists all potential\n * facet values. Increasing this value enhances the accuracy of the listed values at the cost of performance.\n *\n * Default value is `1000`. Minimum value is `1000`.\n * @notSupportedIn salesforcefree\n *\n * @examples 1500\n */\n injectionDepth: ComponentOptions.buildNumberOption({ defaultValue: 1000, min: 1000 }),\n showIcon: ComponentOptions.buildBooleanOption({\n defaultValue: false,\n deprecated: 'This option is exposed for legacy reasons. It is not recommended to use this option.'\n }),\n /**\n * Specifies whether to use the `AND` operator in the resulting filter when multiple values are selected in the\n * facet.\n *\n * Setting this option to `true` means that items must have all of the selected values to match the resulting\n * query.\n *\n * Default value is `false`, which means that the filter uses the `OR` operator. Thus, by default, items must\n * have at least one of the selected values to match the query.\n */\n useAnd: ComponentOptions.buildBooleanOption({ defaultValue: false, section: 'Filtering' }),\n /**\n * Specifies whether to allow the user to toggle between the `OR` and `AND` modes in the facet.\n *\n * Setting this option to `true` displays an icon in the top right corner of the facet. The user can click this icon\n * to toggle between between the two modes.\n *\n * Default value is `false`.\n */\n enableTogglingOperator: ComponentOptions.buildBooleanOption({\n defaultValue: false,\n alias: 'allowTogglingOperator'\n }),\n /**\n * Specifies whether to display a search box at the bottom of the facet for searching among the available facet\n * [`field`]{@link Facet.options.field} values.\n *\n * See also the [`facetSearchDelay`]{@link Facet.options.facetSearchDelay},\n * [`facetSearchIgnoreAccents`]{@link Facet.options.facetSearchIgnoreAccents}, and\n * [`numberOfValuesInFacetSearch`]{@link Facet.options.numberOfValuesInFacetSearch} options.\n *\n * **Note:**\n * > The [`FacetRange`]{@link FacetRange} component does not support this option.\n *\n * Default value is `true`.\n */\n enableFacetSearch: ComponentOptions.buildBooleanOption({ defaultValue: true, section: 'FacetSearch', priority: 8 }),\n /**\n * If the [`enableFacetSearch`]{@link Facet.options.enableFacetSearch} option is `true`, specifies the delay (in\n * milliseconds) before sending a search request to the server when the user starts typing in the facet search box.\n *\n * Specifying a smaller value makes results appear faster. However, chances of having to cancel many requests\n * sent to the server increase as the user keeps on typing new characters.\n *\n * **Note:**\n * > The [`FacetRange`]{@link FacetRange} component does not support this option.\n *\n * Default value is `100`. Minimum value is `0`.\n */\n facetSearchDelay: ComponentOptions.buildNumberOption({ defaultValue: 100, min: 0, depend: 'enableFacetSearch' }),\n /**\n * If the [`enableFacetSearch`]{@link Facet.options.enableFacetSearch} option is `true`, specifies whether to ignore\n * accents in the facet search box.\n *\n * **Note:**\n * > The [`FacetRange`]{@link FacetRange} component does not support this option.\n *\n * Default value is `false`.\n */\n facetSearchIgnoreAccents: ComponentOptions.buildBooleanOption({ defaultValue: false, depend: 'enableFacetSearch' }),\n /**\n * If the [`enableFacetSearch`]{@link Facet.options.enableFacetSearch} option is `true`, specifies the number of v\n * alues to display in the facet search results popup.\n *\n * **Note:**\n * > The [`FacetRange`]{@link FacetRange} component does not support this option.\n *\n * Default value is `15`. Minimum value is `1`.\n */\n numberOfValuesInFacetSearch: ComponentOptions.buildNumberOption({ defaultValue: 15, min: 1, section: 'FacetSearch' }),\n /**\n * Specifies whether [wildcards]{@link AllowedValuesPatternType.wildcards} are used as the [allowedValuesPatternType]{@link IGroupByRequest.allowedValuesPatternType}\n * in the [groupBy]{@link IGroupByRequest} for the facet search.\n *\n * Enabling this option returns results that end with the entered value. For example, searching for `veo` would match with `Coveo`.\n *\n * **Note:**\n * > If you are experiencing slow facet search and/or timeouts when this option is set to `true`, consider enabling the **Use cache for nested queries**\n * > option on your facet [field]{@link Facet.options.field} in the Coveo Cloud Admninistration Console (see [Add or Edit Fields]{@link https://docs.coveo.com/en/1982/}).\n */\n useWildcardsInFacetSearch: ComponentOptions.buildBooleanOption({ defaultValue: false, section: 'FacetSearch' }),\n /**\n * Specifies whether the facet should push data to the [`Breadcrumb`]{@link Breadcrumb} component.\n *\n * See also the [`numberOfValuesInBreadcrumb`]{@link Facet.options.numberOfValuesInBreadcrumb} option.\n *\n * Default value is `true`.\n */\n includeInBreadcrumb: ComponentOptions.buildBooleanOption({ defaultValue: true }),\n /**\n * If the [`includeInBreadcrumb`]{@link Facet.options.includeInBreadcrumb} option is `true`, specifies the maximum\n * number of values that the facet should display in the [`Breadcrumb`]{@link Breadcrumb} before outputting a\n * **more...** button.\n *\n * Default value is `5` on a desktop computer and `3` on a mobile device. Minimum value is `0`.\n */\n numberOfValuesInBreadcrumb: ComponentOptions.buildNumberOption({\n defaultFunction: () => (DeviceUtils.isMobileDevice() ? 3 : 5),\n min: 0,\n depend: 'includeInBreadcrumb'\n }),\n /**\n * Specifies whether the Facet should push data to the {@link Omnibox} component.\n *\n * See also {@link Facet.options.numberOfValuesInOmnibox}.\n *\n * Default value is `false`.\n *\n * @deprecated This option is exposed for legacy reasons. It is not recommended to use this option.\n */\n includeInOmnibox: ComponentOptions.buildBooleanOption({\n defaultValue: false,\n deprecated: 'This option is exposed for legacy reasons. It is not recommended to use this option.'\n }),\n /**\n * When {@link Facet.options.includeInOmnibox} is `true`, specifies the number of values to populate the\n * {@link Breadcrumb} with.\n *\n * Default value is `5` on desktop computer and `3` on a mobile device. Minimum value is `0`.\n *\n * @deprecated This option is exposed for legacy reasons. It is not recommended to use this option.\n */\n numberOfValuesInOmnibox: ComponentOptions.buildNumberOption({\n defaultFunction: () => (DeviceUtils.isMobileDevice() ? 3 : 5),\n min: 0,\n depend: 'includeInOmnibox',\n deprecated: 'This option is exposed for legacy reasons. It is not recommended to use this option.'\n }),\n /**\n * Specifies the name of a field on which to execute an aggregate operation for all distinct values of the facet\n * [`field`]{@link Facet.options.field}.\n *\n * The facet displays the result of the operation along with the number of occurrences for each value.\n *\n * You can use this option to compute the sum of a field (like a money amount) for each listed facet value.\n *\n * Works in conjunction with the [`computedFieldOperation`]{@link Facet.options.computedFieldOperation},\n * [`computedFieldFormat`]{@link Facet.options.computedFieldFormat}, and\n * [`computedFieldCaption`]{@link Facet.options.computedFieldCaption} options.\n * @notSupportedIn salesforcefree\n */\n computedField: ComponentOptions.buildFieldOption({ priority: 7 }),\n /**\n * Specifies the type of aggregate operation to perform on the [`computedField`]{@link Facet.options.computedField}.\n *\n * The possible values are:\n * - `sum` - Computes the sum of the computed field values.\n * - `average` - Computes the average of the computed field values.\n * - `minimum` - Finds the minimum value of the computed field values.\n * - `maximum` - Finds the maximum value of the computed field values.\n *\n * Default value is `sum`.\n * @notSupportedIn salesforcefree\n */\n computedFieldOperation: ComponentOptions.buildStringOption({\n defaultValue: 'sum',\n section: 'ComputedField'\n }),\n /**\n * Specifies how to format the values resulting from a\n * [`computedFieldOperation`]{@link Facet.options.computedFieldOperation}.\n *\n * The Globalize library defines all available formats (see\n * [Globalize](https://github.com/klaaspieter/jquery-global#globalizeformat-value-format-culture-)).\n *\n * The most commonly used formats are:\n * - `c0` - Formats the value as a currency.\n * - `n0` - Formats the value as an integer.\n * - `n2` - Formats the value as a floating point with 2 decimal digits.\n *\n * Default value is `\"c0\"`.\n * @notSupportedIn salesforcefree\n */\n computedFieldFormat: ComponentOptions.buildStringOption({\n defaultValue: 'c0',\n section: 'ComputedField'\n }),\n /**\n * Specifies what the caption of the [`computedField`]{@link Facet.options.computedField} should be in the facet\n * **Settings** menu for sorting.\n *\n * For example, setting this option to `\"Money\"` will display `\"Money Ascending\"` for computed field ascending.\n *\n * **Note:**\n * > The [`FacetRange`]{@link FacetRange} component does not support this option.\n *\n * Default value is the localized string for `ComputedField`.\n * @notSupportedIn salesforcefree\n */\n computedFieldCaption: ComponentOptions.buildLocalizedStringOption({\n localizedString: () => l('ComputedField'),\n section: 'ComputedField'\n }),\n /**\n * Specifies whether the facet should remain stable in its current position in the viewport while the mouse cursor\n * is over it.\n *\n * Whenever the value selection changes in a facet, the search interface automatically performs a query. This new\n * query might cause other elements in the page to resize themselves (typically, other facets above or below the\n * one the user is interacting with).\n *\n * This option is responsible for adding the `
\n * This class is used extensively in the {@link Facet} component.\n */\nexport class FacetValue {\n value: string;\n lookupValue: string;\n occurrences: number;\n computedField: number;\n delta: number;\n score: number;\n selected: boolean = false;\n excluded: boolean = false;\n waitingForDelta: boolean = false;\n\n reset() {\n this.selected = false;\n this.excluded = false;\n }\n\n updateCountsFromNewValue(newValue: FacetValue) {\n Assert.exists(newValue);\n this.occurrences = newValue.occurrences;\n this.delta = newValue.delta;\n this.computedField = newValue.computedField;\n }\n\n clone(): FacetValue {\n this.computedField = undefined;\n this.delta = undefined;\n return this;\n }\n\n cloneWithZeroOccurrences(): FacetValue {\n this.occurrences = 0;\n return this.clone();\n }\n\n cloneWithDelta(count: number, delta: number): FacetValue {\n Assert.isLargerOrEqualsThan(0, count);\n var clone = this.cloneWithZeroOccurrences();\n clone.delta = delta;\n clone.occurrences = count;\n return clone;\n }\n\n getFormattedCount() {\n var count: string = undefined;\n if (Utils.exists(this.delta) && this.delta > 0) {\n count = '+' + Globalize.format(this.delta, 'n0');\n } else {\n if (this.occurrences > 0) {\n count = Globalize.format(this.occurrences, 'n0');\n }\n }\n return count;\n }\n\n getFormattedComputedField(format: string) {\n if (this.computedField != 0) {\n return Globalize.format(this.computedField, format);\n } else {\n return undefined;\n }\n }\n\n static create(value: any): FacetValue {\n if (isString(value)) {\n return FacetValue.createFromValue(value);\n } else if (isObject(value)) {\n if ('computedFieldResults' in value) {\n return FacetValue.createFromGroupByValue(value);\n } else {\n return FacetValue.createFromFieldValue(value);\n }\n } else {\n throw new Error(\"Can't create value from \" + value);\n }\n }\n\n static createFromValue(value: string): FacetValue {\n Assert.isNonEmptyString(value);\n\n var facetValue = new FacetValue();\n facetValue.value = value;\n facetValue.lookupValue = value;\n\n return facetValue;\n }\n\n static createFromGroupByValue(groupByValue: IGroupByValue): FacetValue {\n Assert.exists(groupByValue);\n\n Assert.exists(groupByValue);\n\n var facetValue = new FacetValue();\n facetValue.value = groupByValue.value;\n facetValue.lookupValue = Utils.exists(groupByValue.lookupValue) ? groupByValue.lookupValue : groupByValue.value;\n facetValue.occurrences = groupByValue.numberOfResults;\n facetValue.computedField = Utils.isNonEmptyArray(groupByValue.computedFieldResults) ? groupByValue.computedFieldResults[0] : undefined;\n facetValue.score = groupByValue.score;\n\n return facetValue;\n }\n\n static createFromFieldValue(fieldValue: IIndexFieldValue): FacetValue {\n Assert.exists(fieldValue);\n\n var facetValue = new FacetValue();\n facetValue.value = fieldValue.value;\n facetValue.lookupValue = fieldValue.lookupValue;\n facetValue.occurrences = fieldValue.numberOfResults;\n\n return facetValue;\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Facet/FacetValue.ts","import { Dom } from '../../utils/Dom';\nimport { ResponsiveDropdownContent } from './ResponsiveDropdown/ResponsiveDropdownContent';\n\nexport class ResponsiveComponentsUtils {\n private static smallTabsClassName: string = 'coveo-small-tabs';\n private static smallFacetClassName: string = 'coveo-small-facets';\n private static smallRecommendationClassName: string = 'coveo-small-recommendation';\n\n static shouldDrawFacetSlider(root: Dom, facetSliderElement: Dom): boolean {\n return ResponsiveDropdownContent.isTargetInsideOpenedDropdown(facetSliderElement) || !this.isSmallFacetActivated(root);\n }\n\n static isSmallTabsActivated(root: Dom): boolean {\n return root.hasClass(this.smallTabsClassName);\n }\n\n static isSmallFacetActivated(root: Dom): boolean {\n return root.hasClass(this.smallFacetClassName);\n }\n\n static isSmallRecommendationActivated(root: Dom): boolean {\n return root.hasClass(this.smallRecommendationClassName);\n }\n\n static activateSmallTabs(root: Dom): void {\n root.addClass(this.smallTabsClassName);\n }\n\n static deactivateSmallTabs(root: Dom): void {\n root.removeClass(this.smallTabsClassName);\n }\n\n static activateSmallFacet(root: Dom): void {\n root.addClass(this.smallFacetClassName);\n }\n\n static deactivateSmallFacet(root: Dom): void {\n root.removeClass(this.smallFacetClassName);\n }\n\n static activateSmallRecommendation(root: Dom): void {\n root.addClass(this.smallRecommendationClassName);\n }\n\n static deactivateSmallRecommendation(root: Dom): void {\n root.removeClass(this.smallRecommendationClassName);\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/ResponsiveComponents/ResponsiveComponentsUtils.ts","///
\n
`;\n return template;\n }\n\n instantiateToElement(object?: IQueryResult): Promise\n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n * By default, the terms to highlight are the current query and the\n * associated stemming words from the index.\n * The only required parameter is the content, which specify the string that needs to be highlighted.\n * The other parameters will normally be automatically resolved for you from the current result object.\n *\n * - `content`: The string content to highlight\n * - `termsToHighlight`: The terms to highlight (see {@link IHighlightTerm})\n * - `phraseToHighlight`: The phrases to highlight (see {@link IHighlightPhrase})\n * - `options`: Optional. The options defined below as {@link IStreamHighlightOptions}\n *\n * **Note:**\n * > `highlightStreamText` should only be used for very particular/specific use cases (e.g., augmenting the result template with additional information rather than the typical excerpt/title), and is not a proper replacement for actually having the correct title and excerpt on your results.\n * >\n * > Using incorrect result titles or excerpts on your search interface also causes relevancy to suffer greatly, as the index uses the title and excerpt to find relevant results. Consequently, end users are more likely to see results whose titles do not match their query.\n * >\n * > Moreover, the recommended method to implement simple title and/or excerpt highlighting is to simply use the {@link Excerpt} and {@link ResultLink} components.\n */\n highlightStreamText: (\n content: string,\n termsToHighlight: IHighlightTerm,\n phrasesToHighlight: IHighlightPhrase,\n options?: IStreamHighlightOptions\n ) => string;\n /**\n * This helper operates exactly like the {@link highlightStreamText} helper, except\n * that it should be used to highlight HTML content. The helper takes care\n * of not highlighting the HTML markup.\n *\n * - `content`: The string content to highlight\n * - `termsToHighlight`: The terms to highlight (see {@link IHighlightTerm})\n * - `phraseToHighlight`: The phrases to highlight (see {@link IHighlightPhrase})\n * - `options`: Optional. The options defined below as {@link IStreamHighlightOptions}\n *\n * **Note:**\n * > `highlightStreamHTML` should only be used for very particular/specific use cases (e.g., augmenting the result template with additional information rather than the typical excerpt/title), and is not a proper replacement for actually having the correct title and excerpt on your results.\n * >\n * > Using incorrect result titles or excerpts on your search interface also causes relevancy to suffer greatly, as the index uses the title and excerpt to find relevant results. Consequently, end users are more likely to see results whose titles do not match their query.\n * >\n * > Moreover, the recommended method to implement simple title and/or excerpt highlighting is to simply use the {@link Excerpt} and {@link ResultLink} components.\n */\n highlightStreamHTML: (\n content: string,\n termsToHighlight: IHighlightTerm,\n phrasesToHighlight: IHighlightPhrase,\n options?: IStreamHighlightOptions\n ) => string;\n /**\n * Formats a numeric value using the format string.\n *\n * - `content`: The numeric value to format.\n * - `format` Optional. The string format to use. See the Globalize library for the list of available formats.\n *\n * When the helper is used in a [`FieldValue`]{@link FieldValue} component, this value is automatically retrieved from the specified [`field`]{@link FieldValue.options.field}.\n *\n * **Example:**\n *\n * ```html\n * \n * ```\n */\n number: (content: string, format: string | INumberFormatOptions) => string;\n /**\n * Formats a date value to a date-only string using the specified options.\n *\n * - `content`: The Date value to format.\n * - `options`: Optional. The options to use (see {@link IDateToStringOptions}).\n */\n date: (content: any, options?: IDateToStringOptions) => string;\n /**\n * Formats a date value to a time-only string using the specified options.\n *\n * - `content`: The Date value to format.\n * - `options`: Optional. The options to use (see {@link IDateToStringOptions}).\n */\n time: (content: any, options?: IDateToStringOptions) => string;\n /**\n * Formats a date value to a date and time string using the specified\n * options.\n *\n * - `content`: The Date value to format.\n * - `options`: Optional. The options to use (see {@link IDateToStringOptions}).\n */\n dateTime: (content: any, options?: IDateToStringOptions) => string;\n /**\n * Formats a currency value to a string using the specified options.\n *\n * - `content`: The number value to format.\n * - `options`: Optional. The options to use (see {@link ICurrencyToStringOptions}).\n */\n currency: (content: any, options?: ICurrencyToStringOptions) => string;\n /**\n * Formats a date value to a date and time string using options suitable for\n * email dates\n *\n * - `content`: The Date value to format.\n * - `options`: Optional. The options to use (see {@link IDateToStringOptions}).\n */\n emailDateTime: (content: any, options?: IDateToStringOptions) => string;\n /**\n * Renders one or several email values in `mailto:` hyperlinks.\n *\n * - `value`: The string or array of strings that contains a list of semicolon-separated email\n * values. When multiple values are passed, each value is displayed in a\n * separate hyperlink.\n * - `companyDomain`: Optional. The string that contains your own domain (e.g.:\n * coveo.com). When specified, this parameter allows email addresses\n * coming from your own domain to be displayed in a shortened format\n * (e.g.: Full Name), whereas email addresses coming from an external\n * domain will be displayed in an extended format (e.g.: Full Name\n * (domain.com)). If this parameter is not specified, then the shortened\n * format will automatically be used.\n * - `me`: Optional. The string that contains the current username. If it is\n * specified, then the email address containing the current username will\n * be replaced by the localized string 'Me'.\n * - `lengthLimit`: Optional. The number of email addresses that you want to display\n * before an ellipse is added (e.g.: 'From Joe, John and 5 others').
\n * The default value is 2.\n * - `truncateName`: Optional. When the username is available from the email address,\n * then you can specify if you want to truncate the full name. (e.g.:\n * 'John S.' instead of 'John Smith').
\n * The default value is `false`.\n */\n email: (value: string | string[], companyDomain?: string, me?: string, lengthLimit?: number, truncateName?: boolean) => string;\n /**\n * Formats a clickable HTML link (``).\n *\n * - `href`: The link URI\n * - `options`: Optional. The options to use (see {@link IAnchorUtilsOptions})\n */\n anchor: (href: string, options?: IAnchorUtilsOptions) => string;\n /**\n * Formats an HTML image tag (`
` and\n * `
` around the Facet container. The Facet adjusts the scroll amount of the page to\n * ensure that it does not move relatively to the mouse when the results are updated.\n *\n * In some cases, the facet also adds margins to the `scrollContainer`, if scrolling alone is not enough to\n * preserve position.\n *\n * See also the [`paddingContainer`]{@link Facet.options.paddingContainer}, and\n * [`scrollContainer`]{@link Facet.options.scrollContainer} options.\n *\n * Default value is `true`.\n */\n preservePosition: ComponentOptions.buildBooleanOption({ defaultValue: true }),\n /**\n * Specifies the parent container of the facets.\n *\n * Used by the [`preservePosition`]{@link Facet.options.preservePosition} option.\n *\n * Default value is `element.parentElement`.\n */\n paddingContainer: ComponentOptions.buildSelectorOption({\n defaultFunction: element => {\n const standardColumn = $$(element).parent('coveo-facet-column');\n if (standardColumn != null) {\n return standardColumn;\n }\n return element.parentElement;\n }\n }),\n /**\n * Specifies the HTML element (through a CSS selector) whose scroll amount the facet should adjust to preserve its\n * position when results are updated.\n *\n * Used by the [`preservePosition`]{@link Facet.options.preservePosition} option.\n *\n * Default value is `document.body`.\n */\n scrollContainer: ComponentOptions.buildSelectorOption({ defaultFunction: element => document.body }),\n /**\n * Specifies whether to enable the **More** and **Less** buttons in the Facet.\n *\n * See also the [`pageSize`]{@link Facet.options.pageSize} option.\n *\n * **Note:**\n * > The [`FacetRange`]{@link FacetRange} component does not support this option.\n *\n * Default value is `true`.\n */\n enableMoreLess: ComponentOptions.buildBooleanOption({ defaultValue: true }),\n /**\n * If the [`enableMoreLess`]{@link Facet.options.enableMoreLess} option is `true`, specifies the number of\n * additional results to fetch when clicking the **More** button.\n *\n * **Note:**\n * > The [`FacetRange`]{@link FacetRange} component does not support this option.\n *\n * Default value is `10`. Minimum value is `1`.\n */\n pageSize: ComponentOptions.buildNumberOption({ defaultValue: 10, min: 1, depend: 'enableMoreLess' }),\n /**\n * If the [`enableSettings`]{@link Facet.options.enableSettings} option is `true`, specifies whether the\n * **Collapse \\ Expand** menu option is available in the facet **Settings** menu.\n *\n * **Note:**\n * > The [`FacetRange`]{@link FacetRange} component does not support this option.\n *\n * Default value is `true`.\n */\n enableCollapse: ComponentOptions.buildBooleanOption({ defaultValue: true, depend: 'enableSettings' }),\n /**\n * Specifies an explicit list of [`allowedValues`]{@link IGroupByRequest.allowedValues} in the\n * [`GroupByRequest`]{@link IGroupByRequest}.\n *\n * If you specify a list of values for this option, the facet uses only these values (if they are available in\n * the current result set).\n *\n * **Example:**\n *\n * The following facet only uses the `Contact`, `Account`, and `File` values of the `@objecttype` field. Even if the\n * current result set contains other `@objecttype` values, such as `Message`, or `Product`, the facet does not use\n * those other values.\n *\n * ```html\n *\n * \n * ```\n *\n * Default value is `undefined`, and the facet uses all available values for its\n * [`field`]{@link Facet.options.field} in the current result set.\n */\n allowedValues: ComponentOptions.buildListOption(),\n /**\n * Specifies an additional query expression (query override) to add to each\n * [`GroupByRequest`]{@link IGroupByRequest} that this facet performs.\n *\n * Example: `@date>=2014/01/01`\n * @notSupportedIn salesforcefree\n */\n additionalFilter: ComponentOptions.buildQueryExpressionOption(),\n /**\n * Specifies whether this facet only appears when a value is selected in its \"parent\" facet.\n *\n * To specify the parent facet, use its [`id`]{@link Facet.options.id}.\n *\n * Remember that by default, a facet `id` value is the same as its [`field`]{@link Facet.options.field} option\n * value.\n *\n * **Examples:**\n *\n * First case: the \"parent\" facet has no custom `id`:\n * ```html\n * \n * \n *\n * \n * \n * ```\n *\n * Second case: the \"parent\" facet has a custom `id`:\n * ```html\n * \n * \n *\n * \n * \n * ```\n *\n * Default value is `undefined`\n */\n dependsOn: ComponentOptions.buildStringOption(),\n /**\n * A function that verifies whether the current state of the `dependsOn` facet allows the dependent facet to be displayed.\n *\n * If specified, the function receives a reference to the resolved `dependsOn` facet component instance as an argument, and must return a boolean.\n * The function's argument should typically be treated as read-only.\n *\n * By default, the dependent facet is displayed whenever one or more values are selected in its `dependsOn` facet.\n *\n * @externaldocs [Defining Dependent Facets](https://docs.coveo.com/3210/)\n */\n dependsOnCondition: ComponentOptions.buildCustomOption(\n () => {\n return null;\n },\n { depend: 'dependsOn', section: 'CommonOptions' }\n ),\n /**\n * Specifies a JSON object describing a mapping of facet values to their desired captions. See\n * [Normalizing Facet Value Captions](https://docs.coveo.com/en/368/).\n *\n * **Examples:**\n *\n * You can set the option in the ['init']{@link init} call:\n * ```javascript\n * var myValueCaptions = {\n * \"txt\" : \"Text files\",\n * \"html\" : \"Web page\",\n * [ ... ]\n * };\n *\n * Coveo.init(document.querySelector(\"#search\"), {\n * Facet : {\n * valueCaption : myValueCaptions\n * }\n * });\n * ```\n *\n * Or before the `init` call, using the ['options']{@link options} top-level function:\n * ```javascript\n * Coveo.options(document.querySelector(\"#search\"), {\n * Facet : {\n * valueCaption : myValueCaptions\n * }\n * });\n * ```\n *\n * Or directly in the markup:\n * ```html\n * \n * \n * ```\n *\n * **Note:**\n * > Using value captions will disable alphabetical sorts (see the [availableSorts]{@link Facet.options.availableSorts} option).\n */\n valueCaption: ComponentOptions.buildJsonOption>(),\n ...ResponsiveFacetOptions\n };\n\n public facetQueryController: FacetQueryController;\n public keepDisplayedValuesNextTime: boolean = false;\n public values = new FacetValues();\n public currentPage: number = 0;\n public numberOfValues: number;\n public firstQuery = true;\n public operatorAttributeId: string;\n public isFieldValueCompatible = true;\n public isFieldValueHierarchical = false;\n\n /**\n * Renders and handles the facet **Search** part of the component.\n */\n public facetSearch: FacetSearch;\n\n /**\n * Renders and handles the facet **Settings** part of the component\n */\n public facetSettings: FacetSettings;\n public facetSort: FacetSort;\n public facetValuesList: FacetValuesList;\n public facetHeader: FacetHeader;\n public searchContainer: ValueElementRenderer;\n public dependsOnManager: DependsOnManager;\n\n protected omniboxZIndex;\n protected moreElement: HTMLElement;\n protected lessElement: HTMLElement;\n\n protected headerElement: HTMLElement;\n protected footerElement: HTMLElement;\n private canFetchMore: boolean = true;\n private nbAvailableValues: number;\n\n private showingWaitAnimation = false;\n private pinnedViewportPosition: number;\n private unpinnedViewportPosition: number;\n private pinnedTopSpace: HTMLElement;\n private pinnedBottomSpace: HTMLElement;\n\n private componentStateId: string;\n private includedAttributeId: string;\n private excludedAttributeId: string;\n private lookupValueAttributeId: string;\n private listenToQueryStateChange = true;\n\n /**\n * Creates a new `Facet` component. Binds multiple query events as well.\n * @param element The HTMLElement on which to instantiate the component.\n * @param options The options for the `Facet` component.\n * @param bindings The bindings that the component requires to function normally. If not set, these will be\n * automatically resolved (with a slower execution time).\n * @param facetClassId The ID to use for this facet (as `Facet` inherited from by other component\n * (e.g., [`FacetRange`]{@link FacetRange}). Default value is `Facet`.\n */\n constructor(public element: HTMLElement, public options: IFacetOptions, bindings?: IComponentBindings, facetClassId: string = Facet.ID) {\n super(element, facetClassId, bindings);\n this.options = ComponentOptions.initComponentOptions(element, Facet, options);\n\n if (this.options.valueCaption != null) {\n this.options.availableSorts = _.filter(this.options.availableSorts, (sort: string) => !/^alpha.*$/.test(sort));\n this.logger.warn(`Because the ${this.options.field} facet is using value captions, alphabetical sorts are disabled.`);\n }\n\n ResponsiveFacets.init(this.root, this, this.options);\n\n // Serves as a way to render facet in the omnibox in the order in which they are instantiated\n this.omniboxZIndex = Facet.omniboxIndex;\n Facet.omniboxIndex--;\n\n this.checkForComputedFieldAndSort();\n this.checkForValueCaptionType();\n this.checkForCustomSort();\n this.initDependsOnManager();\n this.initFacetQueryController();\n this.initQueryEvents();\n this.initQueryStateEvents();\n this.initComponentStateEvents();\n this.initOmniboxEvents();\n this.initBreadCrumbEvents();\n this.initSearchAlertEvents();\n this.updateNumberOfValues();\n\n this.bind.oneRootElement(QueryEvents.querySuccess, () => {\n this.firstQuery = false;\n });\n }\n\n public setExpandedFacetSearchAccessibilityAttributes(searchResultsElement: HTMLElement) {\n if (!this.searchContainer) {\n return;\n }\n Assert.exists(searchResultsElement);\n const { accessibleElement } = this.searchContainer;\n accessibleElement.setAttribute('aria-expanded', true.toString());\n }\n\n public setCollapsedFacetSearchAccessibilityAttributes() {\n if (!this.searchContainer) {\n return;\n }\n this.searchContainer.accessibleElement.setAttribute('aria-expanded', false.toString());\n }\n\n public isCurrentlyDisplayed() {\n if (!$$(this.element).isVisible()) {\n return false;\n }\n\n if ($$(this.element).hasClass('coveo-active')) {\n return true;\n }\n\n if ($$(this.element).hasClass('coveo-facet-empty')) {\n return false;\n }\n\n return true;\n }\n\n public createDom() {\n this.initBottomAndTopSpacer();\n this.buildFacetContent();\n this.updateAppearanceDependingOnState();\n // After the facet has been created (and before the first query is applied)\n // Try to load a state from the setting, if it's available\n // Execute only _.once (only the first query, or the first time the user switch to a tab that contains a newly set of active facet)\n if (this.facetSettings && this.options.enableSettingsFacetState) {\n const loadOnce = <(args: INewQueryEventArgs) => any>_.once(() => {\n this.facetSettings.loadSavedState.apply(this.facetSettings);\n });\n this.bind.onRootElement(QueryEvents.newQuery, loadOnce);\n }\n }\n\n /**\n * Selects a single value.\n *\n * Does not trigger a query automatically.\n *\n * @param value Can be a [`FacetValue`]{@link FacetValue} or a string (e.g., `selectValue('foobar')` or\n * `selectValue(new FacetValue('foobar'))`).\n */\n public selectValue(value: FacetValue | string): void {\n Assert.exists(value);\n this.ensureDom();\n this.logger.info('Selecting facet value', this.facetValuesList.select(value));\n this.facetValueHasChanged();\n }\n\n /**\n * Selects multiple values.\n *\n * Does not trigger a query automatically.\n *\n * @param values Can be an array of [`FacetValue`]{@link FacetValue} or an array of strings.\n */\n public selectMultipleValues(values: FacetValue[] | string[]): void {\n Assert.exists(values);\n this.ensureDom();\n _.each(values as FacetValue[], value => {\n this.logger.info('Selecting facet value', this.facetValuesList.select(value));\n });\n this.facetValueHasChanged();\n }\n\n /**\n * Deselects a single value.\n *\n * Does not trigger a query automatically.\n *\n * @param value Can be a [`FacetValue`]{@link FacetValue} or a string (e.g., `deselectValue('foobar')` or\n * `deselectValue(new FacetValue('foobar'))`).\n */\n public deselectValue(value: FacetValue | string): void {\n Assert.exists(value);\n this.ensureDom();\n this.logger.info('Deselecting facet value', this.facetValuesList.unselect(value));\n this.facetValueHasChanged();\n }\n\n /**\n * Deselects multiple values.\n *\n * Does not trigger a query automatically.\n *\n * @param values Can be an array of [`FacetValue`]{@link FacetValue} or an array of strings.\n */\n public deselectMultipleValues(values: FacetValue[] | string[]): void {\n Assert.exists(values);\n this.ensureDom();\n _.each(values as FacetValue[], value => {\n this.logger.info('Deselecting facet value', this.facetValuesList.unselect(value));\n });\n this.facetValueHasChanged();\n }\n\n /**\n * Excludes a single value.\n *\n * Does not trigger a query automatically.\n *\n * @param value Can be a [`FacetValue`]{@link FacetValue} or a string (e.g., `excludeValue('foobar')` or\n * `excludeValue(new FacetValue('foobar'))`).\n */\n public excludeValue(value: FacetValue | string): void {\n Assert.exists(value);\n this.ensureDom();\n this.logger.info('Excluding facet value', this.facetValuesList.exclude(value));\n this.facetValueHasChanged();\n }\n\n /**\n * Excludes multiple values.\n *\n * Does not trigger a query automatically.\n *\n * @param values Can be an array of [`FacetValue`]{@link FacetValue} or an array of strings.\n */\n public excludeMultipleValues(values: FacetValue[] | string[]): void {\n Assert.exists(values);\n this.ensureDom();\n _.each(values as FacetValue[], value => {\n this.logger.info('Excluding facet value', this.facetValuesList.exclude(value));\n });\n this.facetValueHasChanged();\n }\n\n /**\n * Unexcludes a single value.\n *\n * Does not trigger a query automatically.\n *\n * @param value Can be a [`FacetValue`]{@link FacetValue} or a string.\n */\n public unexcludeValue(value: FacetValue | string): void {\n Assert.exists(value);\n this.ensureDom();\n this.logger.info('Unexcluding facet value', this.facetValuesList.unExclude(value));\n this.facetValueHasChanged();\n }\n\n /**\n * Unexcludes multiple values.\n *\n * Does not trigger a query automatically.\n *\n * @param values Can be an array of [`FacetValue`]{@link FacetValue} or an array of strings.\n */\n public unexcludeMultipleValues(values: FacetValue[] | string[]): void {\n Assert.exists(values);\n this.ensureDom();\n _.each(values as FacetValue[], value => {\n this.logger.info('Unexcluding facet value', this.facetValuesList.unExclude(value));\n });\n this.facetValueHasChanged();\n }\n\n /**\n * Toggles the selection state of a single value (selects the value if it is not already selected; un-selects the\n * value if it is already selected).\n *\n * Does not trigger a query automatically.\n * @param value Can be a [`FacetValue`]{@link FacetValue} or a string.\n */\n public toggleSelectValue(value: FacetValue | string): void {\n Assert.exists(value);\n this.ensureDom();\n this.logger.info('Toggle select facet value', this.facetValuesList.toggleSelect(value));\n this.facetValueHasChanged();\n }\n\n /**\n * Toggles the exclusion state of a single value (excludes the value if it is not already excluded; un-excludes the\n * value if it is already excluded).\n *\n * Does not trigger a query automatically.\n *\n * @param value Can be a [`FacetValue`]{@link FacetValue} or a string.\n */\n public toggleExcludeValue(value: FacetValue | string): void {\n Assert.exists(value);\n this.ensureDom();\n this.logger.info('Toggle exclude facet value', this.facetValuesList.toggleExclude(value));\n this.facetValueHasChanged();\n }\n\n /**\n * Returns the currently displayed values as an array of strings.\n *\n * @returns {any[]} The currently displayed values.\n */\n public getDisplayedValues(): string[] {\n return _.pluck(this.getDisplayedFacetValues(), 'value');\n }\n\n /**\n * Returns the currently displayed values as an array of [`FacetValue`]{@link FacetValue}.\n *\n * @returns {T[]} The currently displayed values.\n */\n public getDisplayedFacetValues(): FacetValue[] {\n this.ensureDom();\n const displayed = this.facetValuesList.getAllCurrentlyDisplayed();\n return _.map(displayed, (value: ValueElement) => {\n return value.facetValue;\n });\n }\n\n /**\n * Returns the currently selected values as an array of strings.\n * @returns {string[]} The currently selected values.\n */\n public getSelectedValues(): string[] {\n this.ensureDom();\n return _.map(this.values.getSelected(), (value: FacetValue) => value.value);\n }\n\n /**\n * Determines whether the specified value is selected in the facet.\n * @param value The name of the facet value to verify.\n */\n public hasSelectedValue(value: string) {\n const facetValue = this.values.get(value);\n return facetValue && facetValue.selected;\n }\n\n /**\n * Returns the currently excluded values as an array of strings.\n * @returns {string[]} The currently excluded values.\n */\n public getExcludedValues(): string[] {\n this.ensureDom();\n return _.map(this.values.getExcluded(), (value: FacetValue) => value.value);\n }\n\n /**\n * Resets the facet by un-selecting all values, un-excluding all values, and redrawing the facet.\n */\n public reset(): void {\n this.ensureDom();\n this.values.reset();\n this.rebuildValueElements();\n this.updateAppearanceDependingOnState();\n this.updateQueryStateModel();\n }\n\n /**\n * Switches the facet to `AND` mode.\n *\n * See the [`useAnd`]{@link Facet.options.useAnd}, and\n * [`enableTogglingOperator`]{@link Facet.options.enableTogglingOperator} options.\n */\n public switchToAnd(): void {\n this.ensureDom();\n this.logger.info('Switching to AND');\n this.facetHeader.switchToAnd();\n }\n\n /**\n * Switches the facet to `OR` mode.\n *\n * See the [`useAnd`]{@link Facet.options.useAnd}, and\n * [`enableTogglingOperator`]{@link Facet.options.enableTogglingOperator} options.\n */\n public switchToOr(): void {\n this.ensureDom();\n this.logger.info('Switching to OR');\n this.facetHeader.switchToOr();\n }\n\n /**\n * Returns the endpoint for the facet.\n * @returns {ISearchEndpoint} The endpoint for the facet.\n */\n public getEndpoint(): ISearchEndpoint {\n return this.queryController.getEndpoint();\n }\n\n /**\n * Changes the sort parameter for the facet.\n *\n * See {@link Facet.options.availableSorts} for the list of possible values.\n *\n * Also triggers a new query.\n *\n * @param criteria The new sort parameter for the facet.\n */\n public updateSort(criteria: string): void {\n this.ensureDom();\n if (this.options.sortCriteria != criteria) {\n this.options.sortCriteria = criteria;\n this.usageAnalytics.logCustomEvent(\n analyticsActionCauseList.facetUpdateSort,\n {\n criteria,\n facetId: this.options.id,\n facetField: this.options.field.toString(),\n facetTitle: this.options.title\n },\n this.element\n );\n this.triggerNewQuery();\n }\n }\n\n public unfadeInactiveValuesInMainList(): void {\n $$(this.element).removeClass('coveo-facet-fade');\n }\n\n public fadeInactiveValuesInMainList(delay: number): void {\n $$(this.element).addClass('coveo-facet-fade');\n }\n\n /**\n * Shows a waiting animation in the facet header (a spinner).\n */\n public showWaitingAnimation() {\n this.ensureDom();\n if (!this.showingWaitAnimation) {\n $$(this.headerElement).find('.coveo-facet-header-wait-animation').style.visibility = 'visible';\n this.showingWaitAnimation = true;\n }\n }\n\n /**\n * Hides the waiting animation in the facet header.\n */\n public hideWaitingAnimation(): void {\n this.ensureDom();\n if (this.showingWaitAnimation) {\n $$(this.headerElement).find('.coveo-facet-header-wait-animation').style.visibility = 'hidden';\n this.showingWaitAnimation = false;\n }\n }\n\n public processFacetSearchAllResultsSelected(facetValues: FacetValue[]): void {\n const valuesForAnalytics = [];\n _.each(facetValues, facetValue => {\n this.ensureFacetValueIsInList(facetValue);\n valuesForAnalytics.push(facetValue.value);\n });\n // Calculate the correct number of values from the current selected/excluded values (those will stay no matter what next rendering)\n // add the new one that will be selected (and are not already selected in the facet)\n // The minimum number of values is the number of values set in the option\n const valuesThatStays = this.values.getSelected().concat(this.values.getExcluded());\n this.numberOfValues = valuesThatStays.length + _.difference(valuesThatStays, facetValues).length;\n this.numberOfValues = Math.max(this.numberOfValues, this.options.numberOfValues);\n\n this.updateQueryStateModel();\n this.triggerNewQuery(() =>\n this.usageAnalytics.logSearchEvent(analyticsActionCauseList.facetSelectAll, {\n facetId: this.options.id,\n facetField: this.options.field.toString(),\n facetTitle: this.options.title\n })\n );\n }\n\n public pinFacetPosition() {\n if (this.options.preservePosition) {\n this.pinnedViewportPosition = this.element.getBoundingClientRect().top;\n }\n }\n\n /**\n * Returns the configured caption for the given [`FacetValue`]{@link FacetValue}.\n *\n * @param facetValue The `FacetValue` whose caption the method should return.\n */\n public getValueCaption(facetValue: IIndexFieldValue | FacetValue | string): string {\n Assert.exists(facetValue);\n const lookupValue = typeof facetValue === 'string' ? facetValue : facetValue.lookupValue || facetValue.value;\n let ret = FacetUtils.tryToGetTranslatedCaption(this.options.field, lookupValue);\n\n if (Utils.exists(this.options.valueCaption)) {\n if (typeof this.options.valueCaption == 'object') {\n ret = this.options.valueCaption[lookupValue] || ret;\n }\n if (typeof this.options.valueCaption == 'function') {\n const fv = facetValue instanceof FacetValue ? facetValue : FacetValue.create(facetValue);\n const valueFromList = this.facetValuesList.get(fv).facetValue;\n ret = this.options.valueCaption.call(this, valueFromList);\n }\n }\n return ret;\n }\n\n /**\n * Returns the configured caption for a desired facet value.\n *\n * @param value The string facet value whose caption the method should return.\n */\n public getCaptionForStringValue(value: string) {\n Assert.exists(value);\n return this.getValueCaption(value);\n }\n\n /**\n * Shows the next page of results in the facet.\n *\n * See the [`enableMoreLess`]{@link Facet.options.enableMoreLess}, and [`pageSize`]{@link Facet.options.pageSize}\n * options.\n *\n * Triggers a query if needed, or displays the already available values.\n */\n public showMore() {\n this.currentPage = Math.floor((this.numberOfValues - this.options.numberOfValues) / this.options.pageSize) + 1;\n this.updateNumberOfValues();\n if (this.nbAvailableValues >= this.numberOfValues || !this.canFetchMore) {\n this.rebuildValueElements();\n } else {\n this.triggerMoreQuery();\n }\n }\n\n /**\n * Shows less elements in the Facet (up to the original number of values).\n *\n * See the [`enableMoreLess`]{@link Facet.options.enableMoreLess}, and\n * [`numberOfValues`]{@link Facet.options.numberOfValues} options.\n */\n public showLess() {\n $$(this.lessElement).removeClass('coveo-active');\n this.currentPage = 0;\n this.updateNumberOfValues();\n $$(this.moreElement).addClass('coveo-active');\n this.values.sortValuesDependingOnStatus(this.numberOfValues);\n this.rebuildValueElements();\n this.logAnalyticsFacetShowMoreLess(analyticsActionCauseList.facetShowLess);\n }\n\n /**\n * Collapses the facet.\n */\n public collapse() {\n this.ensureDom();\n if (this.facetHeader) {\n this.facetHeader.collapseFacet();\n }\n }\n\n /**\n * Expands the facet.\n */\n public expand() {\n this.ensureDom();\n if (this.facetHeader) {\n this.facetHeader.expandFacet();\n }\n }\n\n public triggerNewQuery(beforeExecuteQuery?: () => void) {\n if (!beforeExecuteQuery) {\n this.queryController.executeQuery({ ignoreWarningSearchEvent: true });\n } else {\n this.queryController.executeQuery({ beforeExecuteQuery });\n }\n this.showWaitingAnimation();\n }\n\n protected handleDeferredQuerySuccess(data: IQuerySuccessEventArgs) {\n Assert.exists(data);\n this.unfadeInactiveValuesInMainList();\n this.hideWaitingAnimation();\n const groupByResult = data.results.groupByResults[this.facetQueryController.lastGroupByRequestIndex];\n this.facetQueryController.lastGroupByResult = groupByResult;\n // Two corner case to handle regarding the \"sticky\" aspect of facets :\n // 1) The group by is empty (so there is nothing to \"sticky\")\n // 2) There is only one value displayed currently, so there is nothing to \"sticky\" either\n if (!groupByResult) {\n this.keepDisplayedValuesNextTime = false;\n }\n if (this.values.getAll().length == 1) {\n this.keepDisplayedValuesNextTime = false;\n }\n this.processNewGroupByResults(groupByResult);\n }\n\n protected handleQueryError() {\n this.updateValues(new FacetValues());\n this.updateAppearanceDependingOnState();\n this.hideWaitingAnimation();\n }\n\n protected handlePopulateBreadcrumb(args: IPopulateBreadcrumbEventArgs) {\n Assert.exists(args);\n\n if (this.values.hasSelectedOrExcludedValues()) {\n const element = new BreadcrumbValueList(this, this.values.getSelected().concat(this.values.getExcluded()), BreadcrumbValueElement, {\n headingLevel: args.headingLevel\n }).build();\n args.breadcrumbs.push({ element: element });\n }\n }\n\n protected handlePopulateSearchAlerts(args: ISearchAlertsPopulateMessageEventArgs) {\n if (this.values.hasSelectedOrExcludedValues()) {\n const excludedValues = this.values.getExcluded();\n const selectedValues = this.values.getSelected();\n\n if (!_.isEmpty(excludedValues)) {\n args.text.push({\n value: new BreadcrumbValueList(this, excludedValues, BreadcrumbValueElement).buildAsString(),\n lineThrough: true\n });\n }\n\n if (!_.isEmpty(selectedValues)) {\n args.text.push({\n value: new BreadcrumbValueList(this, selectedValues, BreadcrumbValueElement).buildAsString(),\n lineThrough: false\n });\n }\n }\n }\n\n protected initFacetQueryController() {\n this.facetQueryController = new FacetQueryController(this);\n }\n\n protected initFacetValuesList() {\n this.facetValuesList = new FacetValuesList(this, FacetValueElement);\n this.element.appendChild(this.facetValuesList.build());\n }\n\n protected initFacetSearch() {\n this.facetSearch = new FacetSearch(this, FacetSearchValuesList, this.root);\n this.element.appendChild(this.facetSearch.build());\n }\n\n protected facetValueHasChanged() {\n this.updateQueryStateModel();\n this.rebuildValueElements();\n Defer.defer(() => {\n this.updateAppearanceDependingOnState();\n });\n }\n\n protected updateAppearanceDependingOnState() {\n $$(this.element).toggleClass('coveo-active', this.values.hasSelectedOrExcludedValues());\n $$(this.element).toggleClass('coveo-facet-empty', !this.isAnyValueCurrentlyDisplayed());\n $$(this.facetHeader.eraserElement).toggleClass('coveo-facet-header-eraser-visible', this.values.hasSelectedOrExcludedValues());\n }\n\n protected initQueryEvents() {\n this.bind.onRootElement(QueryEvents.duringQuery, () => this.handleDuringQuery());\n this.bind.onRootElement(QueryEvents.buildingQuery, (args: IDoneBuildingQueryEventArgs) => this.handleBuildingQuery(args));\n this.bind.onRootElement(QueryEvents.doneBuildingQuery, (args: IDoneBuildingQueryEventArgs) => this.handleDoneBuildingQuery(args));\n this.bind.onRootElement(QueryEvents.deferredQuerySuccess, (args: IQuerySuccessEventArgs) => this.handleDeferredQuerySuccess(args));\n this.bind.onRootElement(QueryEvents.queryError, () => this.handleQueryError());\n }\n\n protected initQueryStateEvents() {\n this.includedAttributeId = QueryStateModel.getFacetId(this.options.id);\n this.excludedAttributeId = QueryStateModel.getFacetId(this.options.id, false);\n this.operatorAttributeId = QueryStateModel.getFacetOperator(this.options.id);\n this.lookupValueAttributeId = QueryStateModel.getFacetLookupValue(this.options.id);\n\n this.queryStateModel.registerNewAttribute(this.includedAttributeId, []);\n this.queryStateModel.registerNewAttribute(this.excludedAttributeId, []);\n this.queryStateModel.registerNewAttribute(this.operatorAttributeId, '');\n this.queryStateModel.registerNewAttribute(this.lookupValueAttributeId, {});\n\n this.bind.onQueryState(MODEL_EVENTS.CHANGE, undefined, (args: IAttributesChangedEventArg) => this.handleQueryStateChanged(args));\n }\n\n protected initComponentStateEvents() {\n this.componentStateId = QueryStateModel.getFacetId(this.options.id);\n this.componentStateModel.registerComponent(this.componentStateId, this);\n }\n\n protected initOmniboxEvents() {\n if (this.options.includeInOmnibox) {\n this.bind.onRootElement(OmniboxEvents.populateOmnibox, (args: IPopulateOmniboxEventArgs) => this.handlePopulateOmnibox(args));\n }\n }\n\n protected initBreadCrumbEvents() {\n if (this.options.includeInBreadcrumb) {\n this.bind.onRootElement(BreadcrumbEvents.populateBreadcrumb, (args: IPopulateBreadcrumbEventArgs) =>\n this.handlePopulateBreadcrumb(args)\n );\n this.bind.onRootElement(BreadcrumbEvents.clearBreadcrumb, (args: IClearBreadcrumbEventArgs) => this.handleClearBreadcrumb());\n }\n }\n\n protected initSearchAlertEvents() {\n this.bind.onRootElement(SearchAlertsEvents.searchAlertsPopulateMessage, (args: ISearchAlertsPopulateMessageEventArgs) =>\n this.handlePopulateSearchAlerts(args)\n );\n }\n\n protected handleOmniboxWithStaticValue(eventArg: IPopulateOmniboxEventArgs) {\n const regex = new RegExp('^' + eventArg.completeQueryExpression.regex.source, 'i');\n const match = _.first(\n _.filter(this.getDisplayedValues(), (displayedValue: string) => {\n const value = this.getValueCaption(this.facetValuesList.get(displayedValue).facetValue);\n return regex.test(value);\n }),\n this.options.numberOfValuesInOmnibox\n );\n const facetValues = _.map(match, (gotAMatch: string) => {\n return this.facetValuesList.get(gotAMatch).facetValue;\n });\n const element = new OmniboxValuesList(this, facetValues, eventArg, OmniboxValueElement).build();\n eventArg.rows.push({ element: element, zIndex: this.omniboxZIndex });\n }\n\n protected processNewGroupByResults(groupByResult: IGroupByResult) {\n this.logger.trace('Displaying group by results', groupByResult);\n if (groupByResult != undefined && groupByResult.values != undefined) {\n this.nbAvailableValues = groupByResult.values.length;\n }\n const newFacetValues = new FacetValues(groupByResult);\n this.updateValues(newFacetValues);\n this.canFetchMore = this.numberOfValues < this.nbAvailableValues;\n\n if (this.values.hasSelectedOrExcludedValues() && !this.options.useAnd && this.options.isMultiValueField) {\n this.triggerUpdateDeltaQuery(\n _.filter(this.values.getAll(), (facetValue: FacetValue) => {\n return !facetValue.selected && !facetValue.excluded;\n })\n );\n } else if (this.values.getSelected().length > 0 && !this.options.useAnd) {\n this.values.updateDeltaWithFilteredFacetValues(new FacetValues(), this.options.isMultiValueField);\n }\n if (!this.values.hasSelectedOrExcludedValues() || this.options.useAnd || !this.options.isMultiValueField) {\n this.rebuildValueElements();\n this.updateAppearanceDependingOnState();\n this.ensurePinnedFacetHasntMoved();\n }\n this.keepDisplayedValuesNextTime = false;\n }\n\n protected updateQueryStateModel() {\n this.listenToQueryStateChange = false;\n this.updateExcludedQueryStateModel();\n this.updateIncludedQueryStateModel();\n this.facetHeader.updateOperatorQueryStateModel();\n this.updateLookupValueQueryStateModel();\n this.listenToQueryStateChange = true;\n }\n\n protected rebuildValueElements() {\n this.updateNumberOfValues();\n this.facetValuesList.rebuild(this.numberOfValues);\n if (this.shouldRenderMoreLess()) {\n this.updateMoreLess();\n if (this.shouldRenderFacetSearch()) {\n this.updateSearchElement(this.nbAvailableValues > this.numberOfValues);\n }\n } else if (this.shouldRenderFacetSearch()) {\n this.updateSearchElement();\n }\n }\n\n protected updateSearchElement(moreValuesAvailable = true) {\n if (!moreValuesAvailable) {\n return;\n }\n\n const renderer = new ValueElementRenderer(this, FacetValue.create(l('Search')));\n this.searchContainer = renderer.build().withNo([renderer.excludeIcon, renderer.icon]);\n $$(this.searchContainer.listItem).addClass('coveo-facet-search-button');\n\n new AccessibleButton()\n .withElement(this.searchContainer.accessibleElement)\n .withLabel(l('SearchFacetResults', this.options.title))\n .withEnterKeyboardAction(e => this.toggleSearchMenu(e))\n .build();\n\n this.setCollapsedFacetSearchAccessibilityAttributes();\n\n // Mobile do not like label. Use click event\n if (DeviceUtils.isMobileDevice()) {\n $$(this.searchContainer.label).on('click', e => this.toggleSearchMenu(e));\n }\n\n $$(this.searchContainer.checkbox).on('change', () => {\n $$(this.element).addClass('coveo-facet-searching');\n this.facetSearch.focus();\n });\n this.facetValuesList.valueContainer.appendChild(this.searchContainer.listItem);\n }\n\n protected updateMoreLess(\n lessElementIsShown = this.getMinimumNumberOfValuesToDisplay() < this.numberOfValues,\n moreValuesAvailable = this.nbAvailableValues > this.numberOfValues\n ) {\n if (lessElementIsShown) {\n $$(this.lessElement).addClass('coveo-active');\n } else {\n $$(this.lessElement).removeClass('coveo-active');\n }\n\n if (moreValuesAvailable) {\n $$(this.moreElement).addClass('coveo-active');\n } else {\n $$(this.moreElement).removeClass('coveo-active');\n }\n\n if (lessElementIsShown || moreValuesAvailable) {\n $$(this.footerElement).removeClass('coveo-facet-empty');\n } else {\n $$(this.footerElement).addClass('coveo-facet-empty');\n }\n }\n\n protected handleClickMore(): void {\n this.showMore();\n }\n\n protected handleClickLess() {\n this.showLess();\n }\n\n private toggleSearchMenu(e: Event) {\n const searchButton = this.searchContainer;\n\n if (searchButton.checkbox.getAttribute('checked')) {\n searchButton.checkbox.removeAttribute('checked');\n } else {\n searchButton.checkbox.setAttribute('checked', 'checked');\n }\n\n $$(searchButton.checkbox).trigger('change');\n\n e.stopPropagation();\n e.preventDefault();\n }\n\n private checkForComputedFieldAndSort() {\n if (this.options.sortCriteria.toLowerCase().indexOf('computedfield') != -1 && Utils.isNullOrUndefined(this.options.computedField)) {\n this.logger.warn(\n 'Sort criteria is specified as ComputedField, but the facet uses no computed field. Facet will always be empty !',\n this\n );\n }\n }\n\n private checkForValueCaptionType() {\n if (this.options.valueCaption && typeof this.options.valueCaption == 'function') {\n this.options.enableFacetSearch = false;\n this.options.includeInOmnibox = false;\n this.logger.warn(\n 'Using a function as valueCaption is now deprecated. Use a json key value pair instead. Facet search and omnibox has been disabled for this facet',\n this\n );\n }\n }\n\n private checkForCustomSort() {\n if (this.options.customSort != undefined && !_.contains(this.options.availableSorts, 'custom')) {\n this.options.availableSorts.unshift('custom');\n }\n if (this.options.availableSorts[0] == 'custom') {\n this.options.sortCriteria = 'nosort';\n }\n }\n\n private initDependsOnManager() {\n const facetInfo: IDependentFacet = {\n reset: () => this.reset(),\n ref: this\n };\n this.dependsOnManager = new DependsOnManager(facetInfo);\n }\n\n private dependsOnUpdateParentDisplayValue() {\n if (!this.options.dependsOn) {\n return;\n }\n\n const masterFacetComponent = ComponentsTypes.getAllFacetInstancesFromElement(this.root).filter((cmp: Facet) => {\n const idFacet = cmp instanceof Facet;\n return idFacet && cmp.options.id === this.options.dependsOn;\n }) as Facet[];\n\n if (!masterFacetComponent.length) {\n this.logger.warn(\n `Unable to find a Facet with the id or field \"${this.options.dependsOn}\".`,\n `The master facet values can't be updated.`\n );\n return;\n }\n if (masterFacetComponent.length > 1) {\n this.logger.warn(\n `Multiple facets with id \"${this.options.dependsOn}\" found.`,\n `A given facet may only depend on a single other facet.`,\n `Ensure that each facet in your search interface has a unique id.`,\n `The master facet cannot be updated.`,\n masterFacetComponent\n );\n return;\n }\n const masterFacet = masterFacetComponent[0];\n masterFacet.keepDisplayedValuesNextTime = false;\n }\n\n private initBottomAndTopSpacer() {\n const bottomSpace = $$(this.options.paddingContainer).find('.coveo-bottomSpace');\n const topSpace = $$(this.options.paddingContainer).find('.coveo-topSpace');\n if (this.options.preservePosition) {\n $$(this.options.paddingContainer).on('mouseleave', () => this.unpinFacetPosition());\n\n this.pinnedTopSpace = topSpace;\n this.pinnedBottomSpace = bottomSpace;\n\n if (!this.pinnedTopSpace) {\n this.pinnedTopSpace = document.createElement('div');\n $$(this.pinnedTopSpace).addClass('coveo-topSpace');\n $$(this.pinnedTopSpace).insertBefore(this.options.paddingContainer.firstChild);\n }\n if (!this.pinnedBottomSpace) {\n this.pinnedBottomSpace = document.createElement('div');\n $$(this.pinnedBottomSpace).addClass('coveo-bottomSpace');\n this.options.paddingContainer.appendChild(this.pinnedBottomSpace);\n }\n }\n }\n\n private updateIncludedQueryStateModel() {\n const selectedValues: IQueryStateIncludedAttribute = { included: this.getSelectedValues(), title: this.includedAttributeId };\n this.queryStateModel.set(this.includedAttributeId, selectedValues.included);\n }\n\n private updateExcludedQueryStateModel() {\n const excludedValues: IQueryStateExcludedAttribute = { title: this.excludedAttributeId, excluded: this.getExcludedValues() };\n\n this.queryStateModel.set(this.excludedAttributeId, excludedValues.excluded);\n }\n\n private updateLookupValueQueryStateModel() {\n if (this.options.lookupField) {\n const valueToSet = {};\n _.each(this.values.getSelected().concat(this.values.getExcluded()), value => {\n valueToSet[value.value] = value.lookupValue;\n });\n this.queryStateModel.set(this.lookupValueAttributeId, valueToSet);\n }\n }\n\n private handleQueryStateChangedOperator(operator: string) {\n if (operator == 'and') {\n this.switchToAnd();\n } else if (operator == 'or') {\n this.switchToOr();\n }\n }\n\n private handleQueryStateChangedIncluded(includedChanged) {\n const toUnSelect = _.difference(this.getSelectedValues(), includedChanged);\n if (Utils.isNonEmptyArray(toUnSelect)) {\n this.deselectMultipleValues(toUnSelect);\n }\n if (!Utils.arrayEqual(this.getSelectedValues(), includedChanged, false)) {\n this.selectMultipleValues(includedChanged);\n }\n }\n\n private handleQueryStateChangedExcluded(excludedChanged) {\n const toUnExclude = _.difference(this.getExcludedValues(), excludedChanged);\n if (Utils.isNonEmptyArray(toUnExclude)) {\n this.unexcludeMultipleValues(toUnExclude);\n }\n if (!Utils.arrayEqual(this.getExcludedValues(), excludedChanged, false)) {\n this.excludeMultipleValues(excludedChanged);\n }\n }\n\n private handleLookupvalueChanged(lookupFieldChanged: { [value: string]: string }) {\n _.each(lookupFieldChanged, (lookupvalue, value) => {\n this.facetValuesList.get(decodeURIComponent(value)).facetValue.lookupValue = decodeURIComponent(lookupvalue);\n });\n }\n\n private handleQueryStateChanged(data: IAttributesChangedEventArg) {\n Assert.exists(data);\n this.ensureDom();\n this.dependsOnUpdateParentDisplayValue();\n const trimValuesFromModel = (values?: string[]) => {\n if (values) {\n values = _.map(values, value => value.trim());\n }\n return values;\n };\n\n const queryStateAttributes: IStringMap = data.attributes;\n let includedChanged: string[] = trimValuesFromModel(queryStateAttributes[this.includedAttributeId]);\n let excludedChanged: string[] = trimValuesFromModel(queryStateAttributes[this.excludedAttributeId]);\n const operator: string = queryStateAttributes[this.operatorAttributeId];\n const lookupValueChanged: IStringMap = queryStateAttributes[this.lookupValueAttributeId];\n\n if (this.listenToQueryStateChange) {\n if (!Utils.isNullOrEmptyString(operator)) {\n this.handleQueryStateChangedOperator(operator);\n }\n if (!Utils.isNullOrUndefined(includedChanged)) {\n this.handleQueryStateChangedIncluded(includedChanged);\n }\n if (!Utils.isNullOrUndefined(excludedChanged)) {\n this.handleQueryStateChangedExcluded(excludedChanged);\n }\n if (!Utils.isNullOrUndefined(lookupValueChanged)) {\n this.handleLookupvalueChanged(lookupValueChanged);\n }\n }\n }\n\n private handlePopulateOmnibox(data: IPopulateOmniboxEventArgs) {\n Assert.exists(data);\n Assert.exists(data.completeQueryExpression);\n\n // The omnibox calls can come in before a first query was executed (atypical, but\n // if no query is auto-triggered on initialization). To ensure that we've got the\n // proper filters, we ensure that at least a dumbshow query builder run occured\n // before proceeding.\n this.queryController.ensureCreatedQueryBuilder();\n\n if (this.canFetchMore) {\n this.handleOmniboxWithSearchInFacet(data);\n } else {\n this.handleOmniboxWithStaticValue(data);\n }\n }\n\n private handleOmniboxWithSearchInFacet(eventArg: IPopulateOmniboxEventArgs) {\n const regex = new RegExp('^' + eventArg.completeQueryExpression.regex.source, 'i');\n\n const promise = new Promise((resolve, reject) => {\n const searchParameters = new FacetSearchParameters(this);\n searchParameters.setValueToSearch(eventArg.completeQueryExpression.word);\n searchParameters.nbResults = this.options.numberOfValuesInOmnibox;\n this.facetQueryController\n .search(searchParameters)\n .then(fieldValues => {\n const facetValues = _.map(\n _.filter(fieldValues, (fieldValue: IIndexFieldValue) => {\n return regex.test(fieldValue.lookupValue);\n }),\n fieldValue => {\n return this.values.get(fieldValue.lookupValue) || FacetValue.create(fieldValue);\n }\n );\n const element = new OmniboxValuesList(this, facetValues, eventArg, OmniboxValueElement).build();\n resolve({ element: element, zIndex: this.omniboxZIndex });\n })\n .catch(() => {\n resolve({ element: undefined });\n });\n });\n eventArg.rows.push({ deferred: promise });\n }\n\n private handleDuringQuery() {\n this.ensureDom();\n if (!this.keepDisplayedValuesNextTime) {\n this.fadeInactiveValuesInMainList(this.options.facetSearchDelay);\n }\n }\n\n private handleBuildingQuery(data: IDoneBuildingQueryEventArgs) {\n Assert.exists(data);\n Assert.exists(data.queryBuilder);\n\n this.facetQueryController.prepareForNewQuery();\n if (this.values.hasSelectedOrExcludedValues()) {\n const expression = this.facetQueryController.computeOurFilterExpression();\n this.logger.trace('Putting filter in query', expression);\n data.queryBuilder.advancedExpression.add(expression);\n }\n }\n\n private handleDoneBuildingQuery(data: IDoneBuildingQueryEventArgs) {\n Assert.exists(data);\n Assert.exists(data.queryBuilder);\n const queryBuilder = data.queryBuilder;\n this.facetQueryController.putGroupByIntoQueryBuilder(queryBuilder);\n }\n\n private handleClearBreadcrumb() {\n this.reset();\n }\n\n private updateValues(facetValues: FacetValues) {\n Assert.exists(facetValues);\n if (this.keepDisplayedValuesNextTime) {\n this.values.updateCountsFromNewValues(facetValues);\n } else {\n this.values = this.consolidateAndSortNewFacetValues(facetValues);\n }\n\n this.updateNumberOfValues();\n }\n\n private consolidateAndSortNewFacetValues(newValues: FacetValues) {\n newValues.importActiveValuesFromOtherList(this.values);\n newValues.sort(this.optionsToSortFacetValues);\n return newValues;\n }\n\n private get optionsToSortFacetValues(): ISortFacetValuesOptions {\n return {\n facetValuesOrder: this.facetValuesOrder,\n numberOfValues: this.numberOfValues\n };\n }\n\n private get facetValuesOrder() {\n return new FacetValuesOrder(this, this.facetSort);\n }\n\n private ensureFacetValueIsInList(facetValue: FacetValue) {\n Assert.exists(facetValue);\n if (!this.values.contains(facetValue.value)) {\n this.values.add(facetValue);\n }\n }\n\n private isAnyValueCurrentlyDisplayed(): boolean {\n return !this.values.isEmpty();\n }\n\n private buildFacetContent() {\n this.headerElement = this.buildHeader();\n this.element.appendChild(this.headerElement);\n this.initFacetValuesList();\n if (this.shouldRenderFacetSearch()) {\n this.initFacetSearch();\n }\n if (this.shouldRenderMoreLess()) {\n this.moreElement = this.buildMore();\n this.lessElement = this.buildLess();\n }\n this.footerElement = this.buildFooter();\n this.element.appendChild(this.footerElement);\n if (this.lessElement && this.moreElement) {\n this.footerElement.appendChild(this.lessElement);\n this.footerElement.appendChild(this.moreElement);\n }\n }\n\n private buildHeader() {\n let icon = this.options.headerIcon;\n if (this.options.headerIcon == this.options.field) {\n icon = undefined;\n }\n this.facetHeader = new FacetHeader({\n facetElement: this.element,\n title: this.options.title,\n icon: icon,\n field: this.options.field,\n enableClearElement: true,\n enableCollapseElement: this.options.enableCollapse,\n facet: this,\n settingsKlass: this.options.enableSettings ? FacetSettings : undefined,\n sortKlass: FacetSort,\n availableSorts: this.options.availableSorts\n });\n const built = this.facetHeader.build();\n this.facetSettings = this.facetHeader.settings;\n this.facetSort = this.facetHeader.sort;\n return built;\n }\n\n private unpinFacetPosition() {\n if (this.shouldFacetUnpin() && this.options.preservePosition) {\n $$(this.pinnedTopSpace).addClass('coveo-with-animation');\n $$(this.pinnedBottomSpace).addClass('coveo-with-animation');\n this.pinnedTopSpace.style.height = '0px';\n this.pinnedBottomSpace.style.height = '0px';\n }\n this.unpinnedViewportPosition = undefined;\n this.pinnedViewportPosition = undefined;\n }\n\n private isFacetPinned(): boolean {\n return Utils.exists(this.pinnedViewportPosition);\n }\n\n private shouldFacetUnpin(): boolean {\n return Utils.exists(this.unpinnedViewportPosition);\n }\n\n private ensurePinnedFacetHasntMoved(): void {\n if (this.isFacetPinned()) {\n Assert.exists(this.pinnedViewportPosition);\n $$(this.pinnedTopSpace).removeClass('coveo-with-animation');\n $$(this.pinnedBottomSpace).removeClass('coveo-with-animation');\n this.pinnedTopSpace.style.height = '0px';\n this.pinnedBottomSpace.style.height = '0px';\n\n // Under firefox scrolling the body doesn't work, but window does\n // on all browser, so we substitute those here when needed.\n const elementToScroll: any = this.options.scrollContainer == document.body ? window : this.options.scrollContainer;\n let currentViewportPosition = this.element.getBoundingClientRect().top;\n let offset = currentViewportPosition - this.pinnedViewportPosition;\n const scrollToOffset = () => {\n if (elementToScroll instanceof Window) {\n window.scrollTo(0, new Win(elementToScroll).scrollY() + offset);\n } else {\n (elementToScroll).scrollTop = elementToScroll.scrollTop + offset;\n }\n };\n // First try to adjust position by scrolling the page\n scrollToOffset();\n currentViewportPosition = this.element.getBoundingClientRect().top;\n offset = currentViewportPosition - this.pinnedViewportPosition;\n // If scrolling has worked (offset == 0), we're good to go, nothing to do anymore.\n\n if (offset < 0) {\n // This means the facet element is scrolled up in the viewport,\n // scroll it down by adding space in the top container\n this.pinnedTopSpace.style.height = offset * -1 + 'px';\n }\n this.unpinnedViewportPosition = this.pinnedViewportPosition;\n this.pinnedViewportPosition = null;\n }\n }\n\n private buildFooter(): HTMLElement {\n return $$('div', { className: 'coveo-facet-footer' }).el;\n }\n\n private buildMore(): HTMLElement {\n const svgContainer = $$('span', { className: 'coveo-facet-more-icon' }, SVGIcons.icons.arrowDown).el;\n SVGDom.addClassToSVGInContainer(svgContainer, 'coveo-facet-more-icon-svg');\n const more = $$('div', { className: 'coveo-facet-more', tabindex: 0 }, svgContainer).el;\n\n new AccessibleButton()\n .withElement(more)\n .withLabel(l('ShowMoreFacetResults', this.options.title))\n .withSelectAction(() => this.handleClickMore())\n .build();\n\n return more;\n }\n\n private buildLess(): HTMLElement {\n const svgContainer = $$('span', { className: 'coveo-facet-less-icon' }, SVGIcons.icons.arrowUp).el;\n SVGDom.addClassToSVGInContainer(svgContainer, 'coveo-facet-less-icon-svg');\n const less = $$('div', { className: 'coveo-facet-less', tabindex: 0 }, svgContainer).el;\n\n new AccessibleButton()\n .withElement(less)\n .withLabel(l('ShowLessFacetResults', this.options.title))\n .withSelectAction(() => this.handleClickLess())\n .build();\n\n return less;\n }\n\n private triggerMoreQuery() {\n this.logger.info('Triggering new facet more query');\n this.showWaitingAnimation();\n // fetch 1 more value than we need, so we can see if there is more value to fetch still or if we have reached\n // the end of the availables values\n this.facetQueryController\n .fetchMore(this.numberOfValues + 1)\n .then((queryResults: IQueryResults) => {\n this.logAnalyticsFacetShowMoreLess(analyticsActionCauseList.facetShowMore);\n const facetValues = new FacetValues(queryResults.groupByResults[0]);\n this.values = this.consolidateAndSortNewFacetValues(facetValues);\n\n this.nbAvailableValues = this.values.size();\n\n this.updateNumberOfValues();\n this.canFetchMore = this.numberOfValues < this.nbAvailableValues;\n\n if (this.values.hasSelectedOrExcludedValues() && !this.options.useAnd && this.options.isMultiValueField) {\n this.triggerUpdateDeltaQuery(\n _.filter(this.values.getAll(), (facetValue: FacetValue) => !facetValue.selected && !facetValue.excluded)\n );\n } else if (this.values.hasSelectedOrExcludedValues() && !this.options.useAnd) {\n this.values.updateDeltaWithFilteredFacetValues(new FacetValues(), this.options.isMultiValueField);\n this.hideWaitingAnimation();\n } else {\n this.hideWaitingAnimation();\n }\n this.rebuildValueElements();\n })\n .catch(() => this.hideWaitingAnimation());\n }\n\n protected triggerUpdateDeltaQuery(facetValues: FacetValue[]): void {\n this.showWaitingAnimation();\n this.facetQueryController.searchInFacetToUpdateDelta(facetValues).then((queryResults?) => {\n const values: FacetValues = new FacetValues();\n _.each(queryResults.groupByResults, (groupByResult: IGroupByResult) => {\n _.each(groupByResult.values, (groupByValue: IGroupByValue) => {\n if (!values.contains(groupByValue.value)) {\n values.add(FacetValue.createFromGroupByValue(groupByValue));\n }\n });\n });\n this.values.updateDeltaWithFilteredFacetValues(values, this.options.isMultiValueField);\n this.cleanupDeltaValuesForMultiValueField();\n this.rebuildValueElements();\n this.hideWaitingAnimation();\n });\n }\n\n protected updateNumberOfValues() {\n if (this.keepDisplayedValuesNextTime) {\n return;\n }\n\n if (this.currentPage <= 0) {\n // We're on the first page, let's reset the number of values to a minimum.\n this.currentPage = 0;\n this.numberOfValues = 0;\n } else {\n // Calculate the number of value with the current page.\n this.numberOfValues = this.options.numberOfValues + this.currentPage * this.options.pageSize;\n }\n\n // Make sure we have at least the absolute minimum of value to display.\n this.numberOfValues = Math.max(this.numberOfValues, this.getMinimumNumberOfValuesToDisplay());\n }\n\n private getMinimumNumberOfValuesToDisplay() {\n // The min value is the number of used values.\n let minValue = this.values.getExcluded().length + this.values.getSelected().length;\n\n // When using a custom sort, we have to show all values between the selected ones.\n // Thus, we must find the last selected value after a reorder and use that value as the number of value.\n if (this.options.customSort != null && this.facetSort != null && this.options.customSort.length > 0) {\n let lastSelectedValueIndex = -1;\n new FacetValuesOrder(this, this.facetSort).reorderValues(this.values.getAll()).forEach((facetValue, index) => {\n if (facetValue.selected) {\n lastSelectedValueIndex = index;\n }\n });\n minValue = lastSelectedValueIndex + 1;\n }\n return Math.max(minValue, this.options.numberOfValues);\n }\n\n private cleanupDeltaValuesForMultiValueField() {\n // On a multi value field, it's possible to end up in a scenario where many of the current values are empty\n // Crop those out, and adjust the nbAvailable values for the \"search\" and \"show more\";\n if (this.options.isMultiValueField) {\n _.each(this.values.getAll(), v => {\n if (v.occurrences == 0 && !v.selected && !v.excluded) {\n this.values.remove(v.value);\n }\n });\n this.nbAvailableValues = this.values.getAll().length;\n }\n }\n\n private shouldRenderFacetSearch() {\n return this.options.enableFacetSearch;\n }\n\n private shouldRenderMoreLess() {\n return this.options.enableMoreLess;\n }\n\n public debugInfo() {\n const info: any = {};\n info[this['constructor']['ID']] = {\n component: this,\n groupByRequest: this.facetQueryController.lastGroupByRequest,\n groupByResult: this.facetQueryController.lastGroupByResult\n };\n return info;\n }\n\n private logAnalyticsFacetShowMoreLess(cause: IAnalyticsActionCause) {\n this.usageAnalytics.logCustomEvent(\n cause,\n {\n facetId: this.options.id,\n facetField: this.options.field.toString(),\n facetTitle: this.options.title\n },\n this.element\n );\n }\n}\n\nInitialization.registerAutoCreateComponent(Facet);\n\nFacet.doExport();\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/Facet/Facet.ts","import { ComponentOptions } from '../Base/ComponentOptions';\n\n/**\n * ResponsiveFacets options\n */\nexport const ResponsiveFacetOptions = {\n /**\n * Specifies whether to enable *responsive mode* for facets. Setting this options to `false` on any `Facet`, or\n * [`FacetSlider`]{@link FacetSlider} component in a search interface disables responsive mode for all other facets\n * in the search interface.\n *\n * Responsive mode displays all facets under a single dropdown button whenever the width of the HTML element which\n * the search interface is bound to reaches or falls behind a certain threshold (see\n * {@link SearchInterface.responsiveComponents}).\n *\n * See also the [`dropdownHeaderLabel`]{@link Facet.options.dropdownHeaderLabel} option.\n *\n * Default value is `true`.\n */\n enableResponsiveMode: ComponentOptions.buildBooleanOption({ defaultValue: true, section: 'ResponsiveOptions' }),\n responsiveBreakpoint: ComponentOptions.buildNumberOption({\n deprecated:\n 'This option is exposed for legacy reasons. It is not recommended to use this option. Instead, use `SearchInterface.options.responsiveMediumBreakpoint` options exposed on the `SearchInterface`.'\n }),\n /**\n * If the [`enableResponsiveMode`]{@link Facet.options.enableResponsiveMode} option is `true` for all facets and\n * {@link FacetSlider.options.enableResponsiveMode} is also `true` for all sliders, specifies the label of the\n * dropdown button that allows to display the facets when in responsive mode.\n *\n * If more than one `Facet` or {@link FacetSlider} component in the search interface specifies a value for this\n * option, the framework uses the first occurrence of the option.\n *\n * Default value is `Filters`.\n */\n dropdownHeaderLabel: ComponentOptions.buildLocalizedStringOption({ section: 'ResponsiveOptions' })\n};\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/ResponsiveComponents/ResponsiveFacetOptions.ts","import { Component } from '../Base/Component';\nimport { ComponentOptions } from '../Base/ComponentOptions';\nimport { IComponentBindings } from '../Base/ComponentBindings';\nimport { exportGlobally } from '../../GlobalExports';\nimport { Utils } from '../../Core';\nimport { Initialization } from '../Base/Initialization';\n\nexport interface IFacetsMobileModeConstructor {\n new (element: HTMLElement, options: IFacetsMobileModeOptions, bindings: IComponentBindings): FacetsMobileMode;\n}\n\nexport interface IFacetsMobileModeOptions {\n breakpoint?: number;\n isModal?: boolean;\n displayOverlayWhileOpen?: boolean;\n preventScrolling?: boolean;\n scrollContainer?: HTMLElement;\n}\n\n/**\n * This component lets you customize the mobile responsive behavior of facets in your search interface.\n *\n * **Notes:**\n * - You can include this component anywhere under the root element of your search interface.\n * - You should only include this component once in your search interface.\n */\nexport class FacetsMobileMode extends Component {\n static ID = 'FacetsMobileMode';\n\n /**\n * @componentOptions\n */\n static options: IFacetsMobileModeOptions = {\n /**\n * The screen width (in number of pixels) at which facets should enter mobile responsive mode and be collapsed under a single button.\n *\n * **Default:** `800`\n */\n breakpoint: ComponentOptions.buildNumberOption(),\n /**\n * Whether to display the facets in a modal instead of a pop-up when the end user expands them in mobile responsive mode.\n * Set this option to `false` in order to keep the old behaviour.\n */\n isModal: ComponentOptions.buildBooleanOption({ defaultValue: true }),\n /**\n * Whether to display an overlay behind the facets when the end user expands them in mobile responsive mode.\n *\n * By default, the following behavior applies:\n * - `true` when [isModal]{@link FacetsMobileMode.options.isModal} is `false`\n * - `false` when [isModal]{@link FacetsMobileMode.options.isModal} is `true`\n */\n displayOverlayWhileOpen: ComponentOptions.buildBooleanOption({\n postProcessing: (value, options: IFacetsMobileModeOptions) => (Utils.isNullOrUndefined(value) ? !options.isModal : value)\n }),\n /**\n * Whether to disable vertical scrolling on the specified or resolved [`scrollContainer`]{@link FacetsMobileMode.options.scrollContainer} while facets are expanded in mobile responsive mode.\n *\n * By default, the following behavior applies:\n * - `true` when [isModal]{@link FacetsMobileMode.options.isModal} is `true`\n * - `false` when [isModal]{@link FacetsMobileMode.options.isModal} is `false`\n */\n preventScrolling: ComponentOptions.buildBooleanOption({\n postProcessing: (value, options: IFacetsMobileModeOptions) => (Utils.isNullOrUndefined(value) ? options.isModal : value)\n }),\n /**\n * The HTML element whose vertical scrolling should be locked while facets are expanded in mobile responsive mode.\n *\n * By default, the component tries to detect and use the first ancestor element whose CSS `overflow-y` attribute is set to `scroll`, starting from the `FacetsMobileMode`'s element itself. If no such element is found, the `document.body` element is used.\n *\n * Since this heuristic is not perfect, we strongly recommend that you manually set this option by explicitly specifying the desired CSS selector.\n *\n * **Example:** `data-scroll-container-selector='#someCssSelector'`\n */\n scrollContainer: ComponentOptions.buildChildHtmlElementOption({ depend: 'preventScrolling' })\n };\n\n static doExport = () => {\n exportGlobally({\n FacetsMobileMode: FacetsMobileMode\n });\n };\n\n public options: IFacetsMobileModeOptions;\n\n constructor(public element: HTMLElement, options?: IFacetsMobileModeOptions, bindings?: IComponentBindings) {\n super(element, FacetsMobileMode.ID, bindings);\n\n this.options = ComponentOptions.initComponentOptions(element, FacetsMobileMode, options);\n if (this.options.preventScrolling) {\n const scrollContainer = this.options.scrollContainer || this.searchInterface.element;\n this.options.scrollContainer = ComponentOptions.findParentScrollLockable(scrollContainer);\n }\n }\n}\n\nInitialization.registerAutoCreateComponent(FacetsMobileMode);\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/FacetsMobileMode/FacetsMobileMode.ts","import 'styling/_Result';\nimport 'styling/_ResultFrame';\nimport 'styling/_ResultList';\nimport { chain, compact, contains, each, flatten, map, unique, without, uniqueId, find } from 'underscore';\nimport {\n IBuildingQueryEventArgs,\n IDuringQueryEventArgs,\n INewQueryEventArgs,\n IQueryErrorEventArgs,\n IQuerySuccessEventArgs,\n QueryEvents\n} from '../../events/QueryEvents';\nimport { IResultLayoutPopulateArgs, ResultLayoutEvents } from '../../events/ResultLayoutEvents';\nimport {\n IChangeLayoutEventArgs,\n IDisplayedNewResultEventArgs,\n IDisplayedNewResultsEventArgs,\n ResultListEvents\n} from '../../events/ResultListEvents';\nimport { exportGlobally } from '../../GlobalExports';\nimport { Assert } from '../../misc/Assert';\nimport { Defer } from '../../misc/Defer';\nimport { MODEL_EVENTS } from '../../models/Model';\nimport { QUERY_STATE_ATTRIBUTES } from '../../models/QueryStateModel';\nimport { IQueryResult } from '../../rest/QueryResult';\nimport { IQueryResults } from '../../rest/QueryResults';\nimport { DeviceUtils } from '../../utils/DeviceUtils';\nimport { $$, Doc, Win } from '../../utils/Dom';\nimport { DomUtils } from '../../utils/DomUtils';\nimport { Utils } from '../../utils/Utils';\nimport { analyticsActionCauseList, IAnalyticsNoMeta } from '../Analytics/AnalyticsActionListMeta';\nimport { Component } from '../Base/Component';\nimport { IComponentBindings } from '../Base/ComponentBindings';\nimport { ComponentOptions } from '../Base/ComponentOptions';\nimport { IInitializationParameters, IInitResult, Initialization } from '../Base/Initialization';\nimport { InitializationPlaceholder } from '../Base/InitializationPlaceholder';\nimport { TemplateComponentOptions } from '../Base/TemplateComponentOptions';\nimport { ResponsiveDefaultResultTemplate } from '../ResponsiveComponents/ResponsiveDefaultResultTemplate';\nimport { ValidLayout, RendererValidLayout } from '../ResultLayoutSelector/ValidLayout';\nimport { CoreHelpers } from '../Templates/CoreHelpers';\nimport { DefaultRecommendationTemplate } from '../Templates/DefaultRecommendationTemplate';\nimport { DefaultResultTemplate } from '../Templates/DefaultResultTemplate';\nimport { TableTemplate } from '../Templates/TableTemplate';\nimport { Template } from '../Templates/Template';\nimport { TemplateCache } from '../Templates/TemplateCache';\nimport { TemplateList } from '../Templates/TemplateList';\nimport { ResultContainer } from './ResultContainer';\nimport { ResultListCardRenderer } from './ResultListCardRenderer';\nimport { ResultListRenderer } from './ResultListRenderer';\nimport { ResultListTableRenderer } from './ResultListTableRenderer';\nimport ResultLayoutSelectorModule = require('../ResultLayoutSelector/ResultLayoutSelector');\nimport { IResultListOptions } from './ResultListOptions';\nimport { ResultListUtils } from '../../utils/ResultListUtils';\nimport { TemplateToHtml, ITemplateToHtml } from '../Templates/TemplateToHtml';\n\nCoreHelpers.exportAllHelpersGlobally(window['Coveo']);\n\ntype WaitAnimation = 'fade' | 'spinner' | 'none';\n\n/**\n * The `ResultList` component is responsible for displaying query results by applying one or several result templates\n * (see [Result Templates](https://docs.coveo.com/en/413/)).\n *\n * It is possible to include multiple `ResultList` components along with a single `ResultLayout`\n * component in a search page to provide different result layouts (see\n * [Result Layouts](https://docs.coveo.com/en/360/)).\n *\n * This component supports infinite scrolling (see the\n * [`enableInfiniteScroll`]{@link ResultList.options.enableInfiniteScroll} option).\n */\nexport class ResultList extends Component {\n private static getDefaultTemplate(e: HTMLElement): Template {\n const template = ResultList.loadTemplatesFromCache();\n if (template != null) {\n return template;\n }\n\n const component = Component.get(e);\n if (Coveo['Recommendation'] && component.searchInterface instanceof Coveo['Recommendation']) {\n return new DefaultRecommendationTemplate();\n }\n return new DefaultResultTemplate();\n }\n\n private static loadTemplatesFromCache(): Template {\n var pageTemplateNames = TemplateCache.getResultListTemplateNames();\n if (pageTemplateNames.length > 0) {\n return new TemplateList(compact(map(pageTemplateNames, templateName => TemplateCache.getTemplate(templateName))));\n }\n\n return null;\n }\n\n static ID = 'ResultList';\n\n static doExport = () => {\n exportGlobally({\n ResultList: ResultList\n });\n };\n\n /**\n * The options for the ResultList\n * @componentOptions\n */\n static options: IResultListOptions = {\n /**\n * The element inside which to insert the rendered result templates.\n *\n * Performing a new query clears the content of this element.\n *\n * You can change the container by specifying its selector (e.g.,\n * `data-result-container-selector='#someCssSelector'`).\n *\n * If you specify no value for this option, a `div` element will be dynamically created and appended to the result\n * list. This element will then be used as a result container.\n */\n resultsContainer: ComponentOptions.buildChildHtmlElementOption({ alias: 'resultContainerSelector' }),\n resultTemplate: TemplateComponentOptions.buildTemplateOption({ defaultFunction: ResultList.getDefaultTemplate }),\n\n /**\n * The type of animation to display while waiting for a query to return.\n *\n * The possible values are:\n * - `fade`: Fades out the current list of results while the query is executing.\n * - `spinner`: Shows a spinning animation while the query is executing.\n * - `none`: Use no animation during queries.\n *\n * See also the [`waitAnimationContainer`]{@link ResultList.options.waitAnimationContainer} option.\n *\n * @examples spinner\n */\n waitAnimation: ComponentOptions.buildStringOption({ defaultValue: 'none' }),\n\n /**\n * The element inside which to display the [`waitAnimation`]{@link ResultList.options.waitAnimation}.\n *\n * You can change this by specifying a CSS selector (e.g.,\n * `data-wait-animation-container-selector='#someCssSelector'`).\n *\n * Defaults to the value of the [`resultsContainer`]{@link ResultList.options.resultsContainer} option.\n */\n waitAnimationContainer: ComponentOptions.buildChildHtmlElementOption({\n postProcessing: (value, options: IResultListOptions) => value || options.resultsContainer\n }),\n\n /**\n * Whether to automatically retrieve an additional page of results and append it to the\n * results that the `ResultList` is currently displaying when the user scrolls down to the bottom of the\n * [`infiniteScrollContainer`]{@link ResultList.options.infiniteScrollContainer}.\n *\n * See also the [`infiniteScrollPageSize`]{@link ResultList.options.infiniteScrollPageSize} and\n * [`enableInfiniteScrollWaitingAnimation`]{@link ResultList.options.enableInfiniteScrollWaitingAnimation} options.\n *\n * It is important to specify the `infiniteScrollContainer` option manually if you want the scrolling element to be\n * something else than the default `window` element. Otherwise, you might find yourself in a strange state where the\n * framework rapidly triggers multiple successive query.\n */\n enableInfiniteScroll: ComponentOptions.buildBooleanOption({ defaultValue: false }),\n\n /**\n * The number of additional results to fetch when the user scrolls down to the bottom of the\n * [`infiniteScrollContainer`]{@link ResultList.options.infiniteScrollContainer}.\n *\n * @examples 5\n */\n infiniteScrollPageSize: ComponentOptions.buildNumberOption({\n defaultValue: 10,\n min: 1,\n depend: 'enableInfiniteScroll'\n }),\n\n /**\n * The element that triggers fetching additional results when the end user scrolls down to its bottom.\n *\n * You can change the container by specifying its selector (e.g.,\n * `data-infinite-scroll-container-selector='#someCssSelector'`).\n *\n * By default, the framework uses the first vertically scrollable parent element it finds, starting from the\n * `ResultList` element itself. A vertically scrollable element is an element whose CSS `overflow-y` attribute is\n * `scroll`.\n *\n * This implies that if the framework can find no scrollable parent, it uses the `window` itself as a scrollable\n * container.\n *\n * This heuristic is not perfect, for technical reasons. There are always some corner case CSS combination which the\n * framework will not be able to correctly detect as 'scrollable'.\n *\n * It is highly recommended that you manually set this option if you wish something else than the `window` to be the\n * scrollable element.\n */\n infiniteScrollContainer: ComponentOptions.buildChildHtmlElementOption({\n depend: 'enableInfiniteScroll',\n defaultFunction: element => ComponentOptions.findParentScrolling(element)\n }),\n\n /**\n * Whether to display the [`waitingAnimation`]{@link ResultList.options.waitAnimation} while fetching additional\n * results.\n */\n enableInfiniteScrollWaitingAnimation: ComponentOptions.buildBooleanOption({\n depend: 'enableInfiniteScroll',\n defaultValue: true\n }),\n mobileScrollContainer: ComponentOptions.buildSelectorOption({\n defaultFunction: () => document.querySelector('.coveo-results-column')\n }),\n\n /**\n * Whether the `ResultList` should scan its result templates to discover which fields it must request to\n * be able to render all results.\n *\n * Setting this option to `true` ensures that the Coveo Search API does not return fields that are unnecessary for\n * the UI to function.\n * \n * If you set this option to `true`, the fields referenced in your result folding templates won't be automatically resolved.\n * In such a case, you must manually specify those fields using the [`fieldsToInclude`]{@link ResultList.options.fieldsToInclude} option.\n *\n * **Notes:**\n *\n * - Many interfaces created with the JavaScript Search Interface Editor explicitly set this option to `true`. \n * - You cannot set this option to `true` in the Coveo for Sitecore integration.\n */\n autoSelectFieldsToInclude: ComponentOptions.buildBooleanOption({ defaultValue: false }),\n\n /**\n * A list of fields to include in the query results.\n *\n * If you set the [`autoSelectFieldsToInclude`]{@link ResultList.options.autoSelectFieldsToInclude} option to\n * `true`, the Coveo Search API returns the fields you specify for this option (if those fields are available) in\n * addition to the fields which the `ResultList` automatically requests. Note that the `autoSelectFieldsToInclude`\n * option doesn't automatically request fields for folding templates; in such a case, you must manually specify \n * fields using this option to avoid empty results.\n *\n * If you set the [`autoSelectFieldsToInclude`]{@link ResultList.options.autoSelectFieldsToInclude} option to\n * `false`, the Coveo Search API only returns the fields you specify for this option (if those fields are\n * available).\n * \n * If you set the [`autoSelectFieldsToInclude`]{@link ResultList.options.autoSelectFieldsToInclude} option to\n * `false` and leave this option undefined, the Coveo Search API returns all available fields.\n */\n fieldsToInclude: ComponentOptions.buildFieldsOption({ includeInResults: true }),\n\n /**\n * Specifies the layout to use when displaying results in this `ResultList` (see\n * [Result Layouts](https://docs.coveo.com/en/360/)). Specifying a value for this option automatically\n * populates a [`ResultLayout`]{@link ResultLayout} component with a switcher for the layout.\n *\n * For example, if there are two `ResultList` components in the page, one with its `layout` set to `list` and the\n * other with the same option set to `card`, then the `ResultLayout` component will render two buttons respectively\n * entitled **List** and **Card**.\n *\n * See the [`ValidLayout`]{@link ValidLayout} type for the list of possible values.\n *\n * @examples card\n */\n layout: ComponentOptions.buildStringOption({\n defaultValue: 'list',\n required: true\n }),\n\n /**\n * Whether to scroll back to the top of the page when the end-user:\n * - interacts with a facet when [`infiniteScrollContainer`]{@link ResultList.options.infiniteScrollContainer} is set to `true`\n * - interacts with the [`Pager`]{@link Pager} component when [`infiniteScrollContainer`]{@link ResultList.options.infiniteScrollContainer} is set to `false`\n *\n * **Note:** Setting this option to `false` has no effect on dynamic facets. To disable this behavior on a `DynamicFacet` component, you must set its own [`enableScrollToTop`]{@link DynamicFacet.options.enableScrollToTop} option to `false`.\n *\n * @availablesince [July 2019 Release (v2.6459)](https://docs.coveo.com/en/2938/)\n */\n enableScrollToTop: ComponentOptions.buildBooleanOption({\n defaultValue: true\n })\n };\n\n public static resultCurrentlyBeingRendered: IQueryResult = null;\n public currentlyDisplayedResults: IQueryResult[] = [];\n private fetchingMoreResults: Promise;\n private reachedTheEndOfResults = false;\n private disableLayoutChange = false;\n private renderer: ResultListRenderer;\n private resultContainer: ResultContainer;\n\n // This variable serves to block some setup where the framework fails to correctly identify the \"real\" scrolling container.\n // Since it's not technically feasible to correctly identify the scrolling container in every possible scenario without some very complex logic, we instead try to add some kind of mechanism to\n // block runaway requests where UI will keep asking more results in the index, eventually bringing the browser to it's knee.\n // Those successive request are needed in \"displayMoreResults\" to ensure we fill the scrolling container correctly.\n // Since the container is not identified correctly, it is never \"full\", so we keep asking for more.\n // It is reset every time the user actually scroll the container manually.\n private successiveScrollCount = 0;\n private static MAX_AMOUNT_OF_SUCESSIVE_REQUESTS = 5;\n\n /**\n * Creates a new `ResultList` component. Binds various event related to queries (e.g., on querySuccess ->\n * renderResults). Binds scroll event if the [`enableInfiniteScroll`]{@link ResultList.options.enableInfiniteScroll}\n * option is `true`.\n * @param element The HTMLElement on which to instantiate the component.\n * @param options The options for the `ResultList` component.\n * @param bindings The bindings that the component requires to function normally. If not set, these will be\n * automatically resolved (with a slower execution time).\n * @param elementClassId The class that this component should instantiate. Components that extend the base ResultList\n * use this. Default value is `CoveoResultList`.\n */\n constructor(\n public element: HTMLElement,\n public options?: IResultListOptions,\n public bindings?: IComponentBindings,\n elementClassId: string = ResultList.ID\n ) {\n super(element, elementClassId, bindings);\n this.options = ComponentOptions.initComponentOptions(element, ResultList, options);\n\n Assert.exists(element);\n Assert.exists(this.options);\n Assert.exists(this.options.resultTemplate);\n Assert.exists(this.options.infiniteScrollContainer);\n\n this.showOrHideElementsDependingOnState(false, false);\n\n this.addListeners();\n\n this.resultContainer = this.initResultContainer();\n Assert.exists(this.options.resultsContainer);\n\n this.initWaitAnimationContainer();\n Assert.exists(this.options.waitAnimationContainer);\n\n this.setupTemplatesVersusLayouts();\n $$(this.root).on(ResultLayoutEvents.populateResultLayout, (e, args: IResultLayoutPopulateArgs) =>\n args.layouts.push(this.options.layout)\n );\n this.setupRenderer();\n this.makeElementFocusable();\n this.ensureHasId();\n }\n\n private addListeners() {\n this.bind.onRootElement(QueryEvents.newQuery, (args: INewQueryEventArgs) => this.handleNewQuery());\n this.bind.onRootElement(QueryEvents.buildingQuery, (args: IBuildingQueryEventArgs) =>\n this.handleBuildingQuery(args)\n );\n this.bind.onRootElement(QueryEvents.querySuccess, (args: IQuerySuccessEventArgs) =>\n this.handleQuerySuccess(args)\n );\n this.bind.onRootElement(QueryEvents.duringQuery, (args: IDuringQueryEventArgs) => this.handleDuringQuery());\n this.bind.onRootElement(QueryEvents.queryError, (args: IQueryErrorEventArgs) => this.handleQueryError());\n $$(this.root).on(ResultListEvents.changeLayout, (e: Event, args: IChangeLayoutEventArgs) => this.handleChangeLayout(args));\n\n if (this.options.enableInfiniteScroll) {\n this.addInfiniteScrollListeners();\n } else {\n this.addPagerListeners();\n }\n }\n\n private addInfiniteScrollListeners() {\n this.bind.on(this.options.infiniteScrollContainer, 'scroll', () => {\n this.successiveScrollCount = 0;\n this.handleScrollOfResultList();\n });\n this.bind.onRootElement(QueryEvents.deferredQuerySuccess, () => {\n setTimeout(() => {\n this.scrollToTopIfEnabled();\n }, 0);\n });\n }\n\n private addPagerListeners() {\n this.bind.onQueryState(MODEL_EVENTS.CHANGE_ONE, QUERY_STATE_ATTRIBUTES.FIRST, () => {\n this.bind.oneRootElement(QueryEvents.deferredQuerySuccess, () => {\n setTimeout(() => {\n this.scrollToTopIfEnabled();\n }, 0);\n });\n });\n }\n\n /**\n * Get the fields needed to be automatically included in the query for this result list.\n * @returns {string[]}\n */\n public getAutoSelectedFieldsToInclude(): string[] {\n return chain(this.options.resultTemplate.getFields()).concat(this.getMinimalFieldsToInclude()).compact().unique().value();\n }\n\n private setupTemplatesVersusLayouts() {\n const layoutClassToAdd = `coveo-${this.options.layout}-layout-container`;\n this.resultContainer.addClass(layoutClassToAdd);\n\n if (this.options.layout === 'table') {\n this.options.resultTemplate = new TableTemplate((this.options.resultTemplate).templates || []);\n }\n\n // A TemplateList is the scenario where the result template are directly embedded inside the ResultList\n // This is the typical scenario when a page gets created by the interface editor, for example.\n // In that case, we try to stick closely that what is actually configured inside the page, and do no \"special magic\".\n // Stick to the \"hardcoded\" configuration present in the page.\n // We only add the correct layout options if it has not been set manually.\n if (this.options.resultTemplate instanceof TemplateList) {\n each((this.options.resultTemplate).templates, (tmpl: Template) => {\n if (!tmpl.layout) {\n tmpl.layout = this.options.layout;\n }\n });\n } else if (this.options.resultTemplate instanceof DefaultResultTemplate && this.options.layout == 'list') {\n ResponsiveDefaultResultTemplate.init(this.root, this, {});\n }\n }\n\n /**\n * Empties the current result list content and appends the given array of HTMLElement.\n *\n * Can append to existing elements in the result list, or replace them.\n *\n * Triggers the `newResultsDisplayed` and `newResultDisplayed` events.\n * @param resultsElement\n * @param append\n */\n public renderResults(resultElements: HTMLElement[], append = false): Promise {\n if (!append) {\n this.resultContainer.empty();\n }\n\n return this.renderer\n .renderResults(resultElements, append, this.triggerNewResultDisplayed.bind(this))\n .then(() => this.triggerNewResultsDisplayed());\n }\n\n /**\n * Builds and returns an array of HTMLElement with the given result set.\n * @param results the result set to build an array of HTMLElement from.\n */\n public buildResults(results: IQueryResults): Promise {\n const layout = this.options.layout;\n return this.templateToHtml.buildResults(results, layout, this.currentlyDisplayedResults);\n }\n\n /**\n * Builds and returns an HTMLElement for the given result.\n * @param result the result to build an HTMLElement from.\n * @returns {HTMLElement}\n */\n public buildResult(result: IQueryResult): Promise {\n const layout = this.options.layout;\n return this.templateToHtml.buildResult(result, layout, this.currentlyDisplayedResults);\n }\n\n /**\n * Executes a query to fetch new results. After the query returns, renders the new results.\n *\n * Asserts that there are more results to display by verifying whether the last query has returned as many results as\n * requested.\n *\n * Asserts that the `ResultList` is not currently fetching results.\n * @param count The number of results to fetch and display.\n */\n public displayMoreResults(count: number) {\n Assert.isLargerOrEqualsThan(1, count);\n\n if (this.isCurrentlyFetchingMoreResults()) {\n this.logger.warn(\"Ignoring request to display more results since we're already doing so\");\n return;\n }\n if (!this.hasPotentiallyMoreResultsToDisplay()) {\n this.logger.warn(\"Ignoring request to display more results since we know there aren't more to display\");\n return;\n }\n\n if (this.options.enableInfiniteScrollWaitingAnimation) {\n this.showWaitingAnimationForInfiniteScrolling();\n }\n\n return this.fetchAndRenderMoreResults(count);\n }\n\n public get templateToHtml() {\n const templateToHtmlArgs: ITemplateToHtml = {\n resultTemplate: this.options.resultTemplate,\n searchInterface: this.searchInterface,\n queryStateModel: this.queryStateModel\n };\n return new TemplateToHtml(templateToHtmlArgs);\n }\n\n /**\n * Gets the list of currently displayed result.\n * @returns {IQueryResult[]}\n */\n public getDisplayedResults(): IQueryResult[] {\n return this.currentlyDisplayedResults;\n }\n\n /**\n * Gets the list of currently displayed result HTMLElement.\n * @returns {HTMLElement[]}\n */\n public getDisplayedResultsElements(): HTMLElement[] {\n return this.resultContainer.getResultElements();\n }\n\n public enable(): void {\n this.disableLayoutChange = false;\n if (this.resultLayoutSelectors.length > 0) {\n this.enableBasedOnActiveLayouts();\n } else {\n super.enable();\n $$(this.element).removeClass('coveo-hidden');\n }\n }\n\n public disable(): void {\n super.disable();\n const otherLayoutsStillActive = map(this.otherResultLists, otherResultList => otherResultList.options.layout);\n if (!contains(otherLayoutsStillActive, this.options.layout) && !this.disableLayoutChange) {\n each(this.resultLayoutSelectors, resultLayoutSelector => {\n resultLayoutSelector.disableLayouts([this.options.layout] as ValidLayout[]);\n });\n }\n this.disableLayoutChange = false;\n $$(this.element).addClass('coveo-hidden');\n }\n\n protected autoCreateComponentsInsideResult(element: HTMLElement, result: IQueryResult): IInitResult {\n return this.templateToHtml.autoCreateComponentsInsideResult(element, result);\n }\n\n protected triggerNewResultDisplayed(result: IQueryResult, resultElement: HTMLElement) {\n const args: IDisplayedNewResultEventArgs = {\n result: result,\n item: resultElement\n };\n $$(this.element).trigger(ResultListEvents.newResultDisplayed, args);\n }\n\n protected triggerNewResultsDisplayed() {\n const args: IDisplayedNewResultsEventArgs = {\n isInfiniteScrollEnabled: this.options.enableInfiniteScroll\n };\n $$(this.element).trigger(ResultListEvents.newResultsDisplayed, args);\n }\n\n private async fetchAndRenderMoreResults(count: number): Promise {\n this.fetchingMoreResults = this.queryController.fetchMore(count);\n\n try {\n const data = await this.fetchingMoreResults;\n Assert.exists(data);\n this.usageAnalytics.logCustomEvent(analyticsActionCauseList.pagerScrolling, {}, this.element);\n\n this.reachedTheEndOfResults = count > data.results.length;\n this.renderNewResults(data);\n\n this.resetStateAfterFetchingMoreResults();\n\n return data;\n } catch (e) {\n this.resetStateAfterFetchingMoreResults();\n return Promise.reject(e);\n }\n }\n\n private async renderNewResults(data: IQueryResults) {\n const elements = await this.buildResults(data);\n this.renderResults(elements, true);\n this.currentlyDisplayedResults.push(...data.results);\n this.triggerNewResultsDisplayed();\n }\n\n private resetStateAfterFetchingMoreResults() {\n this.hideWaitingAnimationForInfiniteScrolling();\n this.fetchingMoreResults = undefined;\n Defer.defer(() => {\n this.successiveScrollCount++;\n if (this.successiveScrollCount <= ResultList.MAX_AMOUNT_OF_SUCESSIVE_REQUESTS) {\n this.handleScrollOfResultList();\n } else {\n this.logger.info(\n `Result list has triggered 5 consecutive queries to try and fill up the scrolling container, but it is still unable to do so.\n Try explicitly setting the 'data-infinite-scroll-container-selector' option on the result list. See: https://coveo.github.io/search-ui/components/resultlist.html#options.infinitescrollcontainer`\n );\n }\n });\n }\n\n private handleDuringQuery() {\n this.logger.trace('Emptying the result container');\n this.cancelFetchingMoreResultsIfNeeded();\n this.showWaitingAnimation();\n this.showOrHideElementsDependingOnState(false, false);\n }\n\n private handleQueryError() {\n this.hideWaitingAnimation();\n this.resultContainer.empty();\n this.currentlyDisplayedResults = [];\n this.reachedTheEndOfResults = true;\n }\n\n private handleQuerySuccess(data: IQuerySuccessEventArgs) {\n Assert.exists(data);\n Assert.exists(data.results);\n const results = data.results;\n this.logger.trace('Received query results from new query', results);\n this.hideWaitingAnimation();\n\n ResultList.resultCurrentlyBeingRendered = undefined;\n this.reachedTheEndOfResults = data.query.numberOfResults > data.results.results.length;\n\n this.currentlyDisplayedResults = [];\n this.buildResults(data.results).then(async (elements: HTMLElement[]) => {\n await this.renderResults(elements);\n\n this.showOrHideElementsDependingOnState(true, this.currentlyDisplayedResults.length != 0);\n\n if (DeviceUtils.isMobileDevice() && this.options.mobileScrollContainer != undefined) {\n this.options.mobileScrollContainer.scrollTop = 0;\n }\n\n if (this.options.enableInfiniteScroll && results.results.length == data.queryBuilder.numberOfResults) {\n // This will check right away if we need to add more results to make the scroll container full & scrolling.\n this.scrollToTopIfEnabled();\n this.handleScrollOfResultList();\n }\n });\n }\n\n private handleScrollOfResultList() {\n if (this.isCurrentlyFetchingMoreResults() || !this.options.enableInfiniteScroll) {\n return;\n }\n if (this.isScrollingOfResultListAlmostAtTheBottom() && this.hasPotentiallyMoreResultsToDisplay()) {\n this.displayMoreResults(this.options.infiniteScrollPageSize);\n }\n }\n\n private scrollToTopIfEnabled() {\n if (!this.options.enableScrollToTop) {\n return;\n }\n\n ResultListUtils.scrollToTop(this.root);\n }\n\n private handleNewQuery() {\n $$(this.element).removeClass('coveo-hidden');\n ResultList.resultCurrentlyBeingRendered = undefined;\n }\n\n private get otherResultLists() {\n const allResultLists = this.searchInterface.getComponents(ResultList.ID) as ResultList[];\n return without(allResultLists, this);\n }\n\n private get resultLayoutSelectors() {\n return this.searchInterface.getComponents('ResultLayoutSelector') as ResultLayoutSelectorModule.ResultLayoutSelector[];\n }\n\n protected handleBuildingQuery(args: IBuildingQueryEventArgs) {\n if (this.options.fieldsToInclude != null) {\n // remove the @\n args.queryBuilder.addFieldsToInclude(map(this.options.fieldsToInclude, field => field.substr(1)));\n }\n if (this.options.autoSelectFieldsToInclude) {\n const otherFields = flatten(\n map(this.otherResultLists, otherResultList => {\n return otherResultList.getAutoSelectedFieldsToInclude();\n })\n );\n\n args.queryBuilder.addRequiredFields(unique(otherFields.concat(this.getAutoSelectedFieldsToInclude())));\n args.queryBuilder.includeRequiredFields = true;\n }\n }\n\n protected handleChangeLayout(args: IChangeLayoutEventArgs) {\n if (args.layout === this.options.layout) {\n this.disableLayoutChange = false;\n this.enable();\n this.options.resultTemplate.layout = this.options.layout;\n if (args.results) {\n // Prevent flickering when switching to a new layout that is empty\n // add a temporary placeholder, the same that is used on initialization\n if (this.resultContainer.isEmpty()) {\n new InitializationPlaceholder(this.root).withVisibleRootElement().withPlaceholderForResultList();\n }\n Defer.defer(async () => {\n const elements = await this.buildResults(args.results);\n this.renderResults(elements);\n this.showOrHideElementsDependingOnState(true, this.currentlyDisplayedResults.length !== 0);\n });\n }\n } else {\n this.disableLayoutChange = true;\n this.disable();\n this.resultContainer.empty();\n }\n }\n\n private isCurrentlyFetchingMoreResults(): boolean {\n return Utils.exists(this.fetchingMoreResults);\n }\n\n private getMinimalFieldsToInclude() {\n // these fields are needed for analytics click event\n return ['author', 'language', 'urihash', 'objecttype', 'collection', 'source', 'language', 'permanentid'];\n }\n\n private isScrollingOfResultListAlmostAtTheBottom(): boolean {\n // this is in a try catch because the unit test fail otherwise (Window does not exist for phantom js in the console)\n let isWindow;\n try {\n isWindow = this.options.infiniteScrollContainer instanceof Window;\n } catch (e) {\n isWindow = false;\n }\n return isWindow ? this.isScrollAtBottomForWindowElement() : this.isScrollAtBottomForHtmlElement();\n }\n\n private isScrollAtBottomForWindowElement() {\n const win = new Win(window);\n const windowHeight = win.height();\n const scrollTop = win.scrollY();\n const bodyHeight = new Doc(document).height();\n return bodyHeight - (windowHeight + scrollTop) < windowHeight / 2;\n }\n\n private isScrollAtBottomForHtmlElement() {\n const el = this.options.infiniteScrollContainer;\n const elementHeight = el.clientHeight;\n const scrollHeight = el.scrollHeight;\n const bottomPosition = el.scrollTop + elementHeight;\n return scrollHeight - bottomPosition < elementHeight / 2;\n }\n\n public hasPotentiallyMoreResultsToDisplay(): boolean {\n return this.currentlyDisplayedResults.length > 0 && !this.reachedTheEndOfResults;\n }\n\n private cancelFetchingMoreResultsIfNeeded() {\n if (this.isCurrentlyFetchingMoreResults()) {\n this.logger.trace('Cancelling fetching more results');\n Promise.reject(this.fetchingMoreResults);\n this.fetchingMoreResults = undefined;\n }\n }\n\n private showOrHideElementsDependingOnState(hasQuery: boolean, hasResults: boolean) {\n const showIfQuery = $$(this.element).findAll('.coveo-show-if-query');\n const showIfNoQuery = $$(this.element).findAll('.coveo-show-if-no-query');\n const showIfResults = $$(this.element).findAll('.coveo-show-if-results');\n const showIfNoResults = $$(this.element).findAll('.coveo-show-if-no-results');\n\n each(showIfQuery, (s: HTMLElement) => {\n $$(s).toggle(hasQuery);\n });\n each(showIfNoQuery, (s: HTMLElement) => {\n $$(s).toggle(!hasQuery);\n });\n each(showIfResults, (s: HTMLElement) => {\n $$(s).toggle(hasQuery && hasResults);\n });\n each(showIfNoResults, (s: HTMLElement) => {\n $$(s).toggle(hasQuery && !hasResults);\n });\n }\n\n private get waitAnimation() {\n return this.options.waitAnimation.toLowerCase() as WaitAnimation;\n }\n\n private showWaitingAnimation() {\n switch (this.waitAnimation) {\n case 'fade':\n $$(this.options.waitAnimationContainer).addClass('coveo-fade-out');\n break;\n case 'spinner':\n this.resultContainer.hideChildren();\n if ($$(this.options.waitAnimationContainer).find('.coveo-wait-animation') == undefined) {\n this.options.waitAnimationContainer.appendChild(DomUtils.getBasicLoadingAnimation());\n }\n break;\n }\n }\n\n private hideWaitingAnimation() {\n switch (this.waitAnimation) {\n case 'fade':\n $$(this.options.waitAnimationContainer).removeClass('coveo-fade-out');\n break;\n case 'spinner':\n const spinner = $$(this.options.waitAnimationContainer).find('.coveo-loading-spinner');\n if (spinner) {\n $$(spinner).detach();\n }\n break;\n }\n }\n\n private showWaitingAnimationForInfiniteScrolling() {\n const spinner = DomUtils.getLoadingSpinner();\n if (this.options.layout == 'card' && this.options.enableInfiniteScroll) {\n const previousSpinnerContainer = $$(this.options.waitAnimationContainer).findAll('.coveo-loading-spinner-container');\n each(previousSpinnerContainer, previousSpinner => $$(previousSpinner).remove());\n const spinnerContainer = $$('div', {\n className: 'coveo-loading-spinner-container'\n });\n spinnerContainer.append(spinner);\n this.options.waitAnimationContainer.appendChild(spinnerContainer.el);\n } else {\n this.options.waitAnimationContainer.appendChild(DomUtils.getLoadingSpinner());\n }\n }\n\n private hideWaitingAnimationForInfiniteScrolling() {\n const spinners = $$(this.options.waitAnimationContainer).findAll('.coveo-loading-spinner');\n const containers = $$(this.options.waitAnimationContainer).findAll('.coveo-loading-spinner-container');\n each(spinners, spinner => $$(spinner).remove());\n each(containers, container => $$(container).remove());\n }\n\n private initResultContainer(): ResultContainer {\n if (!this.options.resultsContainer) {\n const elemType = this.options.layout === 'table' ? 'table' : 'div';\n this.options.resultsContainer = $$(elemType, { className: 'coveo-result-list-container' }).el;\n this.initResultContainerAddToDom();\n }\n return new ResultContainer(this.options.resultsContainer, this.searchInterface);\n }\n\n protected initResultContainerAddToDom() {\n this.element.appendChild(this.options.resultsContainer);\n }\n\n private initWaitAnimationContainer() {\n if (!this.options.waitAnimationContainer) {\n this.options.waitAnimationContainer = this.resultContainer.el;\n }\n }\n\n private setupRenderer() {\n const initParameters: IInitializationParameters = {\n options: this.searchInterface.options.originalOptionsObject,\n bindings: this.bindings\n };\n\n const autoCreateComponentsFn = (elem: HTMLElement) => Initialization.automaticallyCreateComponentsInside(elem, initParameters);\n\n switch (this.options.layout) {\n case 'card':\n this.renderer = new ResultListCardRenderer(this.options, autoCreateComponentsFn);\n break;\n case 'table':\n this.renderer = new ResultListTableRenderer(this.options, autoCreateComponentsFn);\n break;\n case 'list':\n default:\n this.renderer = new ResultListRenderer(this.options, autoCreateComponentsFn);\n break;\n }\n }\n\n private makeElementFocusable() {\n $$(this.element).setAttribute('tabindex', '-1');\n }\n\n private ensureHasId() {\n const currentId = this.element.id;\n if (currentId === '') {\n this.element.id = uniqueId('coveo-result-list');\n }\n }\n\n private enableBasedOnActiveLayouts() {\n // We should try to enable a result list only when the result layout selector currently allow that result list layout to be displayed.\n each(this.resultLayoutSelectors, resultLayoutSelector => {\n const found = find(resultLayoutSelector.activeLayouts, (activeLayout, activeLayoutKey) => activeLayoutKey == this.options.layout);\n if (found) {\n super.enable();\n resultLayoutSelector.enableLayouts([this.options.layout] as ValidLayout[]);\n $$(this.element).removeClass('coveo-hidden');\n }\n });\n }\n}\n\nInitialization.registerAutoCreateComponent(ResultList);\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/ResultList/ResultList.ts","import { Component } from '../Base/Component';\nimport { l } from '../../strings/Strings';\nimport { ComponentOptions } from '../Base/ComponentOptions';\nimport { IFieldOption } from '../Base/IComponentOptions';\nimport { IComponentBindings } from '../Base/ComponentBindings';\nimport { $$, Dom } from '../../utils/Dom';\nimport { Initialization } from '../Base/Initialization';\nimport { exportGlobally } from '../../GlobalExports';\nimport { CategoryFacetTemplates } from './CategoryFacetTemplates';\nimport { CategoryValueRoot } from './CategoryValueRoot';\nimport { CategoryFacetQueryController } from '../../controllers/CategoryFacetQueryController';\nimport { SVGDom } from '../../utils/SVGDom';\nimport { SVGIcons } from '../../utils/SVGIcons';\nimport { QueryStateModel } from '../../models/QueryStateModel';\nimport 'styling/_CategoryFacet';\nimport { IAttributesChangedEventArg, MODEL_EVENTS } from '../../models/Model';\nimport { Utils } from '../../utils/Utils';\nimport { CategoryValue, CategoryValueParent } from './CategoryValue';\nimport { pluck, reduce, find, first, last, contains, isArray, keys } from 'underscore';\nimport { Assert } from '../../misc/Assert';\nimport { QueryEvents, IBuildingQueryEventArgs, IQuerySuccessEventArgs } from '../../events/QueryEvents';\nimport { CategoryFacetSearch } from './CategoryFacetSearch';\nimport { ICategoryFacetResult } from '../../rest/CategoryFacetResult';\nimport { BreadcrumbEvents, IPopulateBreadcrumbEventArgs } from '../../events/BreadcrumbEvents';\nimport { CategoryFacetBreadcrumb } from './CategoryFacetBreadcrumb';\nimport { ICategoryFacetValue } from '../../rest/CategoryFacetValue';\nimport { ISearchEndpoint } from '../../rest/SearchEndpointInterface';\nimport {\n IAnalyticsCategoryFacetMeta,\n analyticsActionCauseList,\n IAnalyticsActionCause,\n IAnalyticsFacetMeta\n} from '../Analytics/AnalyticsActionListMeta';\nimport { CategoryFacetDebug } from './CategoryFacetDebug';\nimport { QueryBuilder } from '../Base/QueryBuilder';\nimport { IAutoLayoutAdjustableInsideFacetColumn } from '../SearchInterface/FacetColumnAutoLayoutAdjustment';\nimport { ResponsiveFacets } from '../ResponsiveComponents/ResponsiveFacets';\nimport { IResponsiveComponentOptions } from '../ResponsiveComponents/ResponsiveComponentsManager';\nimport { ResponsiveFacetOptions } from '../ResponsiveComponents/ResponsiveFacetOptions';\nimport { CategoryFacetHeader } from './CategoryFacetHeader';\nimport { AccessibleButton } from '../../utils/AccessibleButton';\nimport { IStringMap } from '../../rest/GenericParam';\nimport {\n DependsOnManager,\n IDependentFacet,\n IDependsOnCompatibleFacetOptions,\n IDependentFacetCondition\n} from '../../utils/DependsOnManager';\nimport { ResultListUtils } from '../../utils/ResultListUtils';\nimport { CategoryFacetValuesTree } from './CategoryFacetValuesTree';\n\nexport interface ICategoryFacetOptions extends IResponsiveComponentOptions, IDependsOnCompatibleFacetOptions {\n field: IFieldOption;\n title?: string;\n numberOfResultsInFacetSearch?: number;\n id?: string;\n enableFacetSearch?: boolean;\n facetSearchDelay?: number;\n numberOfValues?: number;\n injectionDepth?: number;\n enableMoreLess?: boolean;\n pageSize?: number;\n delimitingCharacter?: string;\n debug?: boolean;\n basePath?: string[];\n maximumDepth?: number;\n valueCaption?: IStringMap;\n dependsOn?: string;\n displaySearchOnTop?: boolean;\n displaySearchButton?: boolean;\n}\n\nexport type CategoryValueDescriptor = {\n value: string;\n count: number;\n path: string[];\n};\n\n/**\n * The `CategoryFacet` component is a facet that renders values in a hierarchical fashion. It determines the filter to apply depending on the\n * current selected path of values.\n *\n * The path is a sequence of values that leads to a specific value in the hierarchy.\n * It is an array listing all the parents of a file (e.g., `['c', 'folder1']` for the `c:\\folder1\\text1.txt` file).\n *\n * This facet requires a [`field`]{@link CategoryFacet.options.field} with a special format to work correctly (see [Using the Category Facet Component](https://docs.coveo.com/en/2667)).\n *\n * @notSupportedIn salesforcefree\n * @availablesince [January 2019 Release (v2.5395.12)](https://docs.coveo.com/en/3277/#january-2019-release-v2539512)\n */\nexport class CategoryFacet extends Component implements IAutoLayoutAdjustableInsideFacetColumn {\n static doExport = () => {\n exportGlobally({\n CategoryFacet\n });\n };\n\n static ID = 'CategoryFacet';\n\n /**\n * The options for the component\n * @componentOptions\n */\n static options: ICategoryFacetOptions = {\n /**\n * The index field whose values the facet should use. The field values should have the form:\n * `the; the|path; the|path|to; the|path|to|given; the|path|to|given|item;`\n * where the delimiting character is `|`. This default delimiting character can be changed using the [delimitingCharacter]{@link CategoryFacet.options.delimitingCharacter} option.\n *\n * To help you verify whether your fields are setup correctly, see the {@link CategoryFacet.options.debug} option\n * and the {@link CategoryFacet.debugValue} method.\n *\n * See [Using the Category Facet Component](https://docs.coveo.com/en/2667).\n */\n field: ComponentOptions.buildFieldOption({ required: true }),\n /**\n * The title to display at the top of the facet.\n *\n * Default value is the localized string for `NoTitle`.\n */\n title: ComponentOptions.buildLocalizedStringOption({\n localizedString: () => l('NoTitle')\n }),\n /**\n * The maximum number of field values to display by default in the facet before the user\n * clicks the arrow to show more.\n *\n * See also the [`enableMoreLess`]{@link CategoryFacet.options.enableMoreLess} option.\n */\n numberOfValues: ComponentOptions.buildNumberOption({ defaultValue: 5, min: 0, section: 'CommonOptions' }),\n /**\n * Whether to display a search box at the bottom of the facet for searching among the available facet\n * [`field`]{@link CategoryFacet.options.field} values.\n *\n * See also the [`facetSearchDelay`]{@link CategoryFacet.options.facetSearchDelay}, and\n * [`numberOfResultsInFacetSearch`]{@link CategoryFacet.options.numberOfResultsInFacetSearch} options.\n *\n *\n * Default value is `true`.\n */\n enableFacetSearch: ComponentOptions.buildBooleanOption({ defaultValue: true }),\n /**\n * A unique identifier for the facet. Among other things, this identifier serves the purpose of saving\n * the facet state in the URL hash.\n *\n * If you have two facets with the same field on the same page, you should specify an `id` value for at least one of\n * those two facets. This `id` must be unique among the facets.\n *\n * Default value is the [`field`]{@link CategoryFacet.options.field} option value.\n */\n id: ComponentOptions.buildStringOption({\n postProcessing: (value, options: ICategoryFacetOptions) => value || (options.field as string)\n }),\n /**\n * The *injection depth* to use.\n *\n * The injection depth determines how many results to scan in the index to ensure that the category facet lists all potential\n * facet values. Increasing this value enhances the accuracy of the listed values at the cost of performance.\n *\n * Default value is `1000`. Minimum value is `1000`.\n * @notSupportedIn salesforcefree\n *\n * @examples 1500\n */\n injectionDepth: ComponentOptions.buildNumberOption({ defaultValue: 1000, min: 1000 }),\n /**\n * If the [`enableFacetSearch`]{@link CategoryFacet.options.enableFacetSearch} option is `true`, specifies the number of\n * values to display in the facet search results popup.\n *\n * Default value is `15`. Minimum value is `1`.\n */\n numberOfResultsInFacetSearch: ComponentOptions.buildNumberOption({ defaultValue: 15, min: 1 }),\n /**\n * If the [`enableFacetSearch`]{@link CategoryFacet.options.enableFacetSearch} option is `true`, specifies the delay (in\n * milliseconds) before sending a search request to the server when the user starts typing in the category facet search box.\n *\n * Specifying a smaller value makes results appear faster. However, chances of having to cancel many requests\n * sent to the server increase as the user keeps on typing new characters.\n *\n * Default value is `100`. Minimum value is `0`.\n */\n facetSearchDelay: ComponentOptions.buildNumberOption({ defaultValue: 100, min: 0 }),\n /**\n * Whether to enable the **More** and **Less** buttons in the Facet.\n *\n * See also the [`pageSize`]{@link CategoryFacet.options.pageSize} option.\n *\n * Default value is `true`.\n */\n enableMoreLess: ComponentOptions.buildBooleanOption({ defaultValue: true }),\n /**\n * If the [`enableMoreLess`]{@link CategoryFacet.options.enableMoreLess} option is `true`, specifies the number of\n * additional results to fetch when clicking the **More** button.\n *\n * Default value is `10`. Minimum value is `1`.\n */\n pageSize: ComponentOptions.buildNumberOption({ defaultValue: 10, min: 1, depend: 'enableMoreLess' }),\n /**\n * The character that specifies the hierarchical dependency.\n *\n * **Example:**\n *\n * If your field has the following values:\n *\n * `@field: c; c>folder2; c>folder2>folder3;`\n *\n * The delimiting character is `>`.\n *\n * Default value is `|`.\n */\n delimitingCharacter: ComponentOptions.buildStringOption({ defaultValue: '|' }),\n /**\n * The path to use as the path prefix for every query.\n *\n * **Example:**\n *\n * You have the following files indexed on a file system:\n * ```\n * c:\\\n * folder1\\\n * text1.txt\n * folder2\\\n * folder3\\\n * text2.txt\n * ```\n * Setting the `basePath` to `c` would display `folder1` and `folder2` in the `CategoryFacet`, but omit `c`.\n *\n * This options accepts an array of values. To specify a \"deeper\" starting path in your tree, you need to use comma-separated values.\n *\n * For example, setting `data-base-path=\"c,folder1\"` on the component markup would display `folder3` in the `CategoryFacet`, but omit `c` and `folder1`.\n *\n */\n basePath: ComponentOptions.buildListOption({ defaultValue: [] }),\n /**\n * The maximum number of levels to traverse in the hierarchy.\n * This option does not count the length of the base path. The depth depends on what is shown in the interface.\n *\n * Default value is `Number.MAX_VALUE`.\n */\n maximumDepth: ComponentOptions.buildNumberOption({ min: 1, defaultValue: Number.MAX_VALUE }),\n /**\n * Whether to activate field format debugging.\n * This options logs messages in the console for any potential encountered issues.\n * This option can have negative effects on performance, and should only be activated when debugging.\n */\n debug: ComponentOptions.buildBooleanOption({ defaultValue: false }),\n /**\n * Specifies a JSON object describing a mapping of facet values to their desired captions. See\n * [Normalizing Facet Value Captions](https://developers.coveo.com/x/jBsvAg).\n *\n * **Note:**\n * If this option is specified, the facet search box will be unavailable.\n *\n * **Examples:**\n *\n * You can set the option in the ['init']{@link init} call:\n * ```javascript\n * var myValueCaptions = {\n * \"txt\" : \"Text files\",\n * \"html\" : \"Web page\",\n * [ ... ]\n * };\n *\n * Coveo.init(document.querySelector(\"#search\"), {\n * Facet : {\n * valueCaption : myValueCaptions\n * }\n * });\n * ```\n *\n * Or before the `init` call, using the ['options']{@link options} top-level function:\n * ```javascript\n * Coveo.options(document.querySelector(\"#search\"), {\n * Facet : {\n * valueCaption : myValueCaptions\n * }\n * });\n * ```\n *\n * Or directly in the markup:\n * ```html\n * \n * \n * ```\n */\n valueCaption: ComponentOptions.buildJsonOption>({ defaultValue: {} }),\n /**\n * The [id](@link Facet.options.id) of another facet in which at least one value must be selected in order\n * for the dependent category facet to be visible.\n *\n * **Default:** `undefined` and the category facet does not depend on any other facet to be displayed.\n *\n * @availablesince [September 2019 Release (v2.7023)](https://docs.coveo.com/en/2990/)\n */\n dependsOn: ComponentOptions.buildStringOption(),\n\n /**\n * A function that verifies whether the current state of the `dependsOn` facet allows the dependent facet to be displayed.\n *\n * If specified, the function receives a reference to the resolved `dependsOn` facet component instance as an argument, and must return a boolean.\n * The function's argument should typically be treated as read-only.\n *\n * By default, the dependent facet is displayed whenever one or more values are selected in its `dependsOn` facet.\n *\n * @externaldocs [Defining Dependent Facets](https://docs.coveo.com/3210/)\n */\n dependsOnCondition: ComponentOptions.buildCustomOption(\n () => {\n return null;\n },\n { depend: 'dependsOn', section: 'CommonOptions' }\n ),\n /**\n * Whether to display the facet search widget above the facet values instead of below them.\n *\n * @availablesince [July 2020 Release (v2.9373)](https://docs.coveo.com/3293/)\n */\n displaySearchOnTop: ComponentOptions.buildBooleanOption({ defaultValue: false }),\n /**\n * Whether to display the facet search widget as a button instead of a search bar.\n *\n * @availablesince [July 2020 Release (v2.9373)](https://docs.coveo.com/3293/)\n */\n displaySearchButton: ComponentOptions.buildBooleanOption({ defaultValue: true }),\n ...ResponsiveFacetOptions\n };\n\n public categoryFacetQueryController: CategoryFacetQueryController;\n public listenToQueryStateChange = true;\n public categoryFacetSearch: CategoryFacetSearch;\n public activeCategoryValue: CategoryValue | undefined;\n public positionInQuery: number;\n public dependsOnManager: DependsOnManager;\n public isFieldValueCompatible = false;\n public static MAXIMUM_NUMBER_OF_VALUES_BEFORE_TRUNCATING = 15;\n public static NUMBER_OF_VALUES_TO_KEEP_AFTER_TRUNCATING = 10;\n\n private categoryValueRoot: CategoryValueRoot;\n private categoryFacetTemplates: CategoryFacetTemplates;\n private headerElement: HTMLElement;\n private currentPage: number;\n private moreLessContainer: Dom;\n private moreValuesToFetch: boolean = true;\n private showingWaitAnimation = false;\n private numberOfChildValuesCurrentlyDisplayed = 0;\n private numberOfValues: number;\n private categoryFacetValuesTree: CategoryFacetValuesTree;\n\n public static WAIT_ELEMENT_CLASS = 'coveo-category-facet-header-wait-animation';\n\n constructor(public element: HTMLElement, public options: ICategoryFacetOptions, bindings?: IComponentBindings) {\n super(element, 'CategoryFacet', bindings);\n this.options = ComponentOptions.initComponentOptions(element, CategoryFacet, options);\n\n this.categoryFacetQueryController = new CategoryFacetQueryController(this);\n this.categoryFacetTemplates = new CategoryFacetTemplates();\n this.categoryValueRoot = new CategoryValueRoot($$(this.element), this.categoryFacetTemplates, this);\n this.categoryValueRoot.path = this.activePath;\n this.currentPage = 0;\n this.numberOfValues = this.options.numberOfValues;\n this.categoryFacetValuesTree = new CategoryFacetValuesTree();\n\n this.tryToInitFacetSearch();\n\n if (this.options.debug) {\n new CategoryFacetDebug(this);\n }\n\n ResponsiveFacets.init(this.root, this, this.options);\n this.initDependsOnManager();\n this.bind.onRootElement(QueryEvents.buildingQuery, args => this.handleBuildingQuery(args));\n this.bind.onRootElement(QueryEvents.querySuccess, args => this.handleQuerySuccess(args));\n this.bind.onRootElement(QueryEvents.duringQuery, () => this.addFading());\n this.bind.onRootElement(QueryEvents.deferredQuerySuccess, () => this.handleDeferredQuerySuccess());\n this.bind.onRootElement(BreadcrumbEvents.populateBreadcrumb, args => this.handlePopulateBreadCrumb(args));\n this.bind.onRootElement(BreadcrumbEvents.clearBreadcrumb, () => this.handleClearBreadcrumb());\n this.buildFacetHeader();\n this.initQueryStateEvents();\n }\n\n public isCurrentlyDisplayed() {\n return $$(this.element).isVisible();\n }\n\n public get activePath() {\n return this.queryStateModel.get(this.queryStateAttribute) || this.options.basePath;\n }\n\n public set activePath(newPath: string[]) {\n this.listenToQueryStateChange = false;\n this.queryStateModel.set(this.queryStateAttribute, newPath);\n this.listenToQueryStateChange = true;\n }\n\n public get queryStateAttribute() {\n return QueryStateModel.getFacetId(this.options.id);\n }\n\n public handleBuildingQuery(args: IBuildingQueryEventArgs) {\n this.positionInQuery = this.categoryFacetQueryController.putCategoryFacetInQueryBuilder(\n args.queryBuilder,\n this.activePath,\n this.numberOfValues + 1\n );\n }\n\n public scrollToTop() {\n ResultListUtils.scrollToTop(this.root);\n }\n\n private tryToInitFacetSearch() {\n if (!this.isFacetSearchAvailable) {\n return this.logDisabledFacetSearchWarning();\n }\n\n this.categoryFacetSearch = new CategoryFacetSearch(this, this.options.displaySearchButton);\n }\n\n private logDisabledFacetSearchWarning() {\n if (this.isEnableFacetSearchFalsy) {\n return;\n }\n\n const valueCaptionAttributeName = this.getOptionAttributeName('valueCaption');\n const enableFacetSearchAttributeName = this.getOptionAttributeName('enableFacetSearch');\n const field = this.options.field;\n\n this.logger.warn(`The search box is disabled on the ${field} CategoryFacet. To hide this warning,\n either remove the ${valueCaptionAttributeName} option or set the ${enableFacetSearchAttributeName} option to \"false\".`);\n }\n\n private getOptionAttributeName(optionName: keyof ICategoryFacetOptions) {\n return ComponentOptions.attrNameFromName(optionName);\n }\n\n private get isFacetSearchAvailable() {\n if (this.areValueCaptionsSpecified) {\n return false;\n }\n\n if (this.isEnableFacetSearchFalsy) {\n return false;\n }\n\n return true;\n }\n\n private get areValueCaptionsSpecified() {\n const valueCaptions = this.options.valueCaption;\n return keys(valueCaptions).length !== 0;\n }\n\n private get isEnableFacetSearchFalsy() {\n return !this.options.enableFacetSearch;\n }\n\n private get isCategoryEmpty() {\n return !this.categoryValueRoot.children.length;\n }\n\n private updateAppearance() {\n if (this.disabled || this.isCategoryEmpty) {\n return this.hide();\n }\n\n this.show();\n }\n\n public handleQuerySuccess(args: IQuerySuccessEventArgs) {\n if (Utils.isNullOrUndefined(args.results.categoryFacets)) {\n return this.notImplementedError();\n }\n\n if (Utils.isNullOrUndefined(args.results.categoryFacets[this.positionInQuery])) {\n return;\n }\n\n const numberOfRequestedValues = args.query.categoryFacets[this.positionInQuery].maximumNumberOfValues;\n const categoryFacetResult = args.results.categoryFacets[this.positionInQuery];\n this.moreValuesToFetch = numberOfRequestedValues == categoryFacetResult.values.length;\n this.clear();\n\n if (categoryFacetResult.notImplemented) {\n return this.notImplementedError();\n }\n\n if (!categoryFacetResult.values.length && !categoryFacetResult.parentValues.length) {\n return;\n }\n\n this.renderValues(categoryFacetResult, numberOfRequestedValues);\n if (this.isFacetSearchAvailable) {\n const facetSearch = this.categoryFacetSearch.build();\n this.options.displaySearchOnTop\n ? $$(facetSearch).insertBefore(this.categoryValueRoot.listRoot.el)\n : $$(facetSearch).insertAfter(this.categoryValueRoot.listRoot.el);\n }\n\n this.moreLessContainer = $$('div', { className: 'coveo-category-facet-more-less-container' });\n $$(this.element).append(this.moreLessContainer.el);\n\n if (this.options.enableMoreLess) {\n this.renderMoreLess();\n }\n\n if (!this.isPristine()) {\n $$(this.element).addClass('coveo-category-facet-non-empty-path');\n }\n }\n\n /**\n * Changes the active path.\n *\n */\n public changeActivePath(path: string[]) {\n this.activePath = path;\n }\n\n public async executeQuery() {\n this.showWaitingAnimation();\n try {\n await this.queryController.executeQuery();\n } finally {\n this.hideWaitingAnimation();\n }\n }\n\n /**\n * Reloads the facet with the same path.\n */\n public reload() {\n this.changeActivePath(this.activePath);\n this.logAnalyticsEvent(analyticsActionCauseList.categoryFacetReload);\n this.executeQuery();\n }\n\n /**\n * Returns all the visible parent values.\n * @returns simple object with three fields: `value`, `count` and `path`.\n */\n public getVisibleParentValues(): CategoryValueDescriptor[] {\n return this.getVisibleParentCategoryValues().map(categoryValue => categoryValue.getDescriptor());\n }\n\n private getVisibleParentCategoryValues() {\n if (this.categoryValueRoot.children.length == 0 || this.categoryValueRoot.children[0].children.length == 0) {\n return [];\n }\n let currentParentvalue = this.categoryValueRoot.children[0];\n const parentValues = [currentParentvalue];\n while (currentParentvalue.children.length != 0 && !Utils.arrayEqual(currentParentvalue.path, this.activePath)) {\n currentParentvalue = currentParentvalue.children[0];\n parentValues.push(currentParentvalue);\n }\n return parentValues;\n }\n\n /**\n * Shows more values according to {@link CategoryFacet.options.pageSize}.\n *\n * See the [`enableMoreLess`]{@link CategoryFacet.options.enableMoreLess}, and\n * [`numberOfValues`]{@link CategoryFacet.options.numberOfValues} options.\n */\n public showMore() {\n if (this.moreValuesToFetch) {\n this.currentPage++;\n this.numberOfValues = this.options.numberOfValues + this.currentPage * this.options.pageSize;\n this.reload();\n this.logAnalyticsFacetShowMoreLess(analyticsActionCauseList.facetShowMore);\n }\n }\n\n /**\n * Shows less values, up to the original number of values.\n *\n * See the [`enableMoreLess`]{@link CategoryFacet.options.enableMoreLess}, and\n * [`numberOfValues`]{@link CategoryFacet.options.numberOfValues} options.\n */\n public showLess() {\n if (this.currentPage > 0) {\n this.currentPage--;\n this.numberOfValues = this.options.numberOfValues + this.currentPage * this.options.pageSize;\n this.reload();\n this.logAnalyticsFacetShowMoreLess(analyticsActionCauseList.facetShowLess);\n }\n }\n\n /**\n * Returns the values at the bottom of the hierarchy. These are the values that are not yet applied to the query.\n * @returns simple object with three fields: `value`, `count` and `path`.\n */\n public getAvailableValues() {\n if (!this.activeCategoryValue) {\n return [];\n }\n return this.activeCategoryValue.children.map(categoryValue => {\n return {\n value: categoryValue.categoryValueDescriptor.value,\n count: categoryValue.categoryValueDescriptor.count,\n path: categoryValue.path\n };\n });\n }\n\n /**\n * Selects a value from the currently available values.\n * If the given value to select is not in the available values, it will throw an error.\n */\n public selectValue(value: string) {\n Assert.check(\n contains(pluck(this.getAvailableValues(), 'value'), value),\n 'Failed while trying to select a value that is not available.'\n );\n const newPath = this.activePath.slice(0);\n newPath.push(value);\n this.changeActivePath(newPath);\n this.logAnalyticsEvent(analyticsActionCauseList.categoryFacetSelect);\n this.executeQuery();\n }\n\n /**\n * Deselects the last value in the hierarchy that is applied to the query. When at the top of the hierarchy, this method does nothing.\n */\n public deselectCurrentValue() {\n if (this.activePath.length == 0) {\n return;\n }\n\n const newPath = this.activePath.slice(0);\n newPath.pop();\n this.changeActivePath(newPath);\n this.logAnalyticsEvent(analyticsActionCauseList.categoryFacetSelect);\n this.executeQuery();\n }\n\n private resetPath() {\n this.changeActivePath(this.options.basePath);\n }\n\n /**\n * Resets the facet to its initial state.\n */\n public reset() {\n this.resetPath();\n this.logAnalyticsEvent(analyticsActionCauseList.categoryFacetClear);\n this.executeQuery();\n }\n\n /**\n * Hides the component.\n */\n public hide() {\n $$(this.element).addClass('coveo-hidden');\n }\n\n /**\n * Shows the component.\n */\n public show() {\n $$(this.element).removeClass('coveo-hidden');\n }\n\n public enable() {\n super.enable();\n this.updateAppearance();\n }\n\n public disable() {\n super.disable();\n this.updateAppearance();\n }\n\n /**\n * Goes through any value that contains the value parameter, and verifies whether there are missing parents.\n * Issues are then logged in the console.\n * If you do not want to specify a value, you can simply enable {@link CategoryFacet.options.debug} and do an empty query.\n */\n public async debugValue(value: string) {\n const queryBuilder = new QueryBuilder();\n this.categoryFacetQueryController.addDebugGroupBy(queryBuilder, value);\n const queryResults = await this.queryController.getEndpoint().search(queryBuilder.build());\n CategoryFacetDebug.analyzeResults(queryResults.groupByResults[0], this.options.delimitingCharacter);\n }\n\n /**\n *\n * @param value The string to find a caption for.\n * Returns the caption for a value or the value itself if no caption is available.\n */\n public getCaption(value: string) {\n const valueCaptions = this.options.valueCaption;\n const caption = valueCaptions[value];\n return caption ? caption : value;\n }\n\n public showWaitingAnimation() {\n this.ensureDom();\n if (!this.showingWaitAnimation) {\n $$(this.headerElement).find('.coveo-category-facet-header-wait-animation').style.visibility = 'visible';\n this.showingWaitAnimation = true;\n }\n }\n\n public hideWaitingAnimation() {\n this.ensureDom();\n if (this.showingWaitAnimation) {\n $$(this.headerElement).find('.coveo-category-facet-header-wait-animation').style.visibility = 'hidden';\n this.showingWaitAnimation = false;\n }\n }\n\n public logAnalyticsEvent(eventName: IAnalyticsActionCause, path = this.activePath) {\n this.usageAnalytics.logSearchEvent(eventName, {\n categoryFacetId: this.options.id,\n categoryFacetField: this.options.field.toString(),\n categoryFacetPath: path,\n categoryFacetTitle: this.options.title\n });\n }\n\n public getEndpoint(): ISearchEndpoint {\n return this.queryController.getEndpoint();\n }\n\n get children(): CategoryValue[] {\n return this.categoryValueRoot.children;\n }\n\n private renderValues(categoryFacetResult: ICategoryFacetResult, numberOfRequestedValues: number) {\n this.categoryFacetValuesTree.storeNewValues(categoryFacetResult);\n let sortedParentValues = this.sortParentValues(categoryFacetResult.parentValues);\n let currentParentValue: CategoryValueParent = this.categoryValueRoot;\n let needToTruncate = false;\n let pathOfLastTruncatedParentValue: string[];\n\n const numberOfItemsInFirstSlice = Math.floor(CategoryFacet.NUMBER_OF_VALUES_TO_KEEP_AFTER_TRUNCATING / 2);\n const numberOfItemsInSecondSlice = Math.ceil(CategoryFacet.NUMBER_OF_VALUES_TO_KEEP_AFTER_TRUNCATING / 2);\n\n sortedParentValues = this.hideBasePathInParentValues(sortedParentValues);\n\n if (this.shouldTruncate(sortedParentValues)) {\n pathOfLastTruncatedParentValue = this.findPathOfLastTruncatedParentValue(sortedParentValues, numberOfItemsInSecondSlice);\n needToTruncate = true;\n sortedParentValues = first(sortedParentValues, numberOfItemsInFirstSlice).concat(\n last(sortedParentValues, numberOfItemsInSecondSlice)\n );\n }\n\n if (!this.isPristine()) {\n this.addAllCategoriesButton();\n }\n\n for (let i = 0; i < sortedParentValues.length; i++) {\n currentParentValue = currentParentValue.renderAsParent(sortedParentValues[i]);\n\n // We do not want to make the \"last\" parent selectable, as clicking it would be a noop (re-selecting the same filter)\n const isLastParent = i == sortedParentValues.length - 1;\n if (!isLastParent) {\n (currentParentValue as CategoryValue).makeSelectable().showCollapseArrow();\n }\n\n if (needToTruncate) {\n if (i == numberOfItemsInFirstSlice - 1) {\n this.addEllipsis();\n }\n\n if (i == numberOfItemsInFirstSlice) {\n currentParentValue.path = [...pathOfLastTruncatedParentValue, sortedParentValues[i].value];\n }\n }\n }\n\n const childrenValuesToRender = this.moreValuesToFetch\n ? categoryFacetResult.values.slice(0, numberOfRequestedValues - 1)\n : categoryFacetResult.values.slice(0, numberOfRequestedValues);\n\n this.numberOfChildValuesCurrentlyDisplayed = childrenValuesToRender.length;\n\n currentParentValue.renderChildren(childrenValuesToRender);\n this.activeCategoryValue = currentParentValue as CategoryValue;\n }\n\n private hideBasePathInParentValues(parentValues: ICategoryFacetValue[]) {\n if (Utils.arrayEqual(first(this.activePath, this.options.basePath.length), this.options.basePath)) {\n parentValues = last(parentValues, parentValues.length - this.options.basePath.length);\n }\n return parentValues;\n }\n\n private shouldTruncate(parentValues: ICategoryFacetValue[]) {\n return parentValues.length > CategoryFacet.MAXIMUM_NUMBER_OF_VALUES_BEFORE_TRUNCATING;\n }\n\n private addEllipsis() {\n this.categoryValueRoot.listRoot.append(this.categoryFacetTemplates.buildEllipsis().el);\n }\n\n private findPathOfLastTruncatedParentValue(sortedParentValues: ICategoryFacetValue[], numberOfItemsInSecondSlice: number) {\n const indexOfLastTruncatedParentValue = sortedParentValues.length - numberOfItemsInSecondSlice - 1;\n return reduce(first(sortedParentValues, indexOfLastTruncatedParentValue + 1), (path, parentValue) => [...path, parentValue.value], []);\n }\n\n private addAllCategoriesButton() {\n const allCategories = this.categoryFacetTemplates.buildAllCategoriesButton();\n new AccessibleButton()\n .withLabel(l('AllCategories'))\n .withElement(allCategories)\n .withSelectAction(() => {\n this.reset();\n this.scrollToTop();\n })\n .build();\n this.categoryValueRoot.listRoot.append(allCategories.el);\n }\n\n private isPristine() {\n return Utils.arrayEqual(this.activePath, this.options.basePath);\n }\n\n private buildFacetHeader() {\n const facetHeader = new CategoryFacetHeader({ categoryFacet: this, title: this.options.title });\n this.headerElement = facetHeader.build();\n $$(this.element).prepend(this.headerElement);\n }\n\n private handleQueryStateChanged(data: IAttributesChangedEventArg) {\n if (this.listenToQueryStateChange) {\n let path = data.attributes[this.queryStateAttribute];\n if (!Utils.isNullOrUndefined(path) && isArray(path) && path.length != 0) {\n this.activePath = path;\n }\n }\n }\n\n private initQueryStateEvents() {\n this.queryStateModel.registerNewAttribute(this.queryStateAttribute, this.options.basePath);\n this.bind.onQueryState(MODEL_EVENTS.CHANGE, undefined, data => this.handleQueryStateChanged(data));\n }\n\n private initDependsOnManager() {\n const facetInfo: IDependentFacet = {\n reset: () => this.dependsOnReset(),\n ref: this\n };\n this.dependsOnManager = new DependsOnManager(facetInfo);\n }\n\n private dependsOnReset() {\n this.changeActivePath(this.options.basePath);\n this.clear();\n }\n\n private addFading() {\n $$(this.element).addClass('coveo-category-facet-values-fade');\n }\n\n private handleDeferredQuerySuccess() {\n this.updateAppearance();\n this.removeFading();\n }\n\n private removeFading() {\n $$(this.element).removeClass('coveo-category-facet-values-fade');\n }\n\n private notImplementedError() {\n const errorMessage = 'Category Facets are not supported by your current search endpoint. Disabling this component.';\n this.logger.error(errorMessage);\n this.disable();\n }\n\n private sortParentValues(parentValues: ICategoryFacetValue[]) {\n if (this.activePath.length != parentValues.length) {\n this.logger.warn('Inconsistent CategoryFacet results: Number of parent values results does not equal length of active path');\n return parentValues;\n }\n\n const sortedParentvalues: ICategoryFacetValue[] = [];\n for (const pathElement of this.activePath) {\n const currentParentValue = find(parentValues, parentValue => parentValue.value.toLowerCase() == pathElement.toLowerCase());\n if (!currentParentValue) {\n this.logger.warn('Inconsistent CategoryFacet results: path not consistent with parent values results');\n return parentValues;\n }\n sortedParentvalues.push(currentParentValue);\n }\n return sortedParentvalues;\n }\n\n private renderMoreLess() {\n if (this.numberOfChildValuesCurrentlyDisplayed > this.options.numberOfValues) {\n this.moreLessContainer.append(this.buildLessButton());\n }\n\n if (this.moreValuesToFetch) {\n this.moreLessContainer.append(this.buildMoreButton());\n }\n }\n\n private clear() {\n this.categoryValueRoot.clear();\n if (this.isFacetSearchAvailable) {\n this.categoryFacetSearch.clear();\n }\n this.moreLessContainer && this.moreLessContainer.detach();\n $$(this.element).removeClass('coveo-category-facet-non-empty-path');\n }\n\n private buildMoreButton() {\n const svgContainer = $$('span', { className: 'coveo-facet-more-icon' }, SVGIcons.icons.arrowDown).el;\n SVGDom.addClassToSVGInContainer(svgContainer, 'coveo-facet-more-icon-svg');\n const more = $$('div', { className: 'coveo-category-facet-more' }, svgContainer);\n\n new AccessibleButton()\n .withElement(more)\n .withSelectAction(() => this.showMore())\n .withLabel(l('ShowMoreFacetResults', this.options.title))\n .build();\n\n return more.el;\n }\n\n private buildLessButton() {\n const svgContainer = $$('span', { className: 'coveo-facet-less-icon' }, SVGIcons.icons.arrowUp).el;\n SVGDom.addClassToSVGInContainer(svgContainer, 'coveo-facet-less-icon-svg');\n const less = $$('div', { className: 'coveo-category-facet-less' }, svgContainer);\n\n new AccessibleButton()\n .withElement(less)\n .withSelectAction(() => this.showLess())\n .withLabel(l('ShowLessFacetResults', this.options.title))\n .build();\n\n return less.el;\n }\n\n private handlePopulateBreadCrumb(args: IPopulateBreadcrumbEventArgs) {\n if (this.isPristine()) {\n return;\n }\n\n const lastParentValue = this.categoryFacetValuesTree.getValueForLastPartInPath(this.activePath);\n const descriptor: CategoryValueDescriptor = {\n path: this.activePath,\n count: lastParentValue.numberOfResults,\n value: lastParentValue.value\n };\n\n const resetFacet = () => {\n this.logAnalyticsEvent(analyticsActionCauseList.breadcrumbFacet);\n this.reset();\n };\n\n const categoryFacetBreadcrumbBuilder = new CategoryFacetBreadcrumb(this, resetFacet, descriptor, { headingLevel: args.headingLevel });\n\n args.breadcrumbs.push({ element: categoryFacetBreadcrumbBuilder.build() });\n }\n\n private handleClearBreadcrumb() {\n this.changeActivePath(this.options.basePath);\n }\n\n private logAnalyticsFacetShowMoreLess(cause: IAnalyticsActionCause) {\n this.usageAnalytics.logCustomEvent(\n cause,\n {\n facetId: this.options.id,\n facetField: this.options.field.toString(),\n facetTitle: this.options.title\n },\n this.element\n );\n }\n}\n\nInitialization.registerAutoCreateComponent(CategoryFacet);\nCategoryFacet.doExport();\n\n\n\n// WEBPACK FOOTER //\n// ./src/ui/CategoryFacet/CategoryFacet.ts"],"sourceRoot":""}