Content to render when condition is true.
\n * ```\n *\n * Simple form with expanded syntax:\n *\n * ```\n * Content to render when condition is\n * true.
Content to render when condition is true.
\n * {{value}}
\n * \n * ...\n *
\n *\n * Loading...
\n * \n * ...\n *
\n * Loading...
\n * \n *
`\n * })\n * // Get the current date and time as a date-time value.\n * export class DatePipeComponent {\n * today: number = Date.now();\n * }\n * ```\n *\n * @publicApi\n */\n// clang-format on\nclass DatePipe {\n constructor(locale, defaultTimezone, defaultOptions) {\n this.locale = locale;\n this.defaultTimezone = defaultTimezone;\n this.defaultOptions = defaultOptions;\n }\n transform(value, format, timezone, locale) {\n if (value == null || value === '' || value !== value)\n return null;\n try {\n const _format = format ?? this.defaultOptions?.dateFormat ?? DEFAULT_DATE_FORMAT;\n const _timezone = timezone ?? this.defaultOptions?.timezone ?? this.defaultTimezone ?? undefined;\n return formatDate(value, _format, locale || this.locale, _timezone);\n }\n catch (error) {\n throw invalidPipeArgumentError(DatePipe, error.message);\n }\n }\n}\nDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.9\", ngImport: i0, type: DatePipe, deps: [{ token: LOCALE_ID }, { token: DATE_PIPE_DEFAULT_TIMEZONE, optional: true }, { token: DATE_PIPE_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });\nDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: \"14.0.0\", version: \"15.2.9\", ngImport: i0, type: DatePipe, isStandalone: true, name: \"date\" });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.9\", ngImport: i0, type: DatePipe, decorators: [{\n type: Pipe,\n args: [{\n name: 'date',\n pure: true,\n standalone: true,\n }]\n }], ctorParameters: function () { return [{ type: undefined, decorators: [{\n type: Inject,\n args: [LOCALE_ID]\n }] }, { type: undefined, decorators: [{\n type: Inject,\n args: [DATE_PIPE_DEFAULT_TIMEZONE]\n }, {\n type: Optional\n }] }, { type: undefined, decorators: [{\n type: Inject,\n args: [DATE_PIPE_DEFAULT_OPTIONS]\n }, {\n type: Optional\n }] }]; } });\n\nconst _INTERPOLATION_REGEXP = /#/g;\n/**\n * @ngModule CommonModule\n * @description\n *\n * Maps a value to a string that pluralizes the value according to locale rules.\n *\n * @usageNotes\n *\n * ### Example\n *\n * {@example common/pipes/ts/i18n_pipe.ts region='I18nPluralPipeComponent'}\n *\n * @publicApi\n */\nclass I18nPluralPipe {\n constructor(_localization) {\n this._localization = _localization;\n }\n /**\n * @param value the number to be formatted\n * @param pluralMap an object that mimics the ICU format, see\n * https://unicode-org.github.io/icu/userguide/format_parse/messages/.\n * @param locale a `string` defining the locale to use (uses the current {@link LOCALE_ID} by\n * default).\n */\n transform(value, pluralMap, locale) {\n if (value == null)\n return '';\n if (typeof pluralMap !== 'object' || pluralMap === null) {\n throw invalidPipeArgumentError(I18nPluralPipe, pluralMap);\n }\n const key = getPluralCategory(value, Object.keys(pluralMap), this._localization, locale);\n return pluralMap[key].replace(_INTERPOLATION_REGEXP, value.toString());\n }\n}\nI18nPluralPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.9\", ngImport: i0, type: I18nPluralPipe, deps: [{ token: NgLocalization }], target: i0.ɵɵFactoryTarget.Pipe });\nI18nPluralPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: \"14.0.0\", version: \"15.2.9\", ngImport: i0, type: I18nPluralPipe, isStandalone: true, name: \"i18nPlural\" });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.9\", ngImport: i0, type: I18nPluralPipe, decorators: [{\n type: Pipe,\n args: [{\n name: 'i18nPlural',\n pure: true,\n standalone: true,\n }]\n }], ctorParameters: function () { return [{ type: NgLocalization }]; } });\n\n/**\n * @ngModule CommonModule\n * @description\n *\n * Generic selector that displays the string that matches the current value.\n *\n * If none of the keys of the `mapping` match the `value`, then the content\n * of the `other` key is returned when present, otherwise an empty string is returned.\n *\n * @usageNotes\n *\n * ### Example\n *\n * {@example common/pipes/ts/i18n_pipe.ts region='I18nSelectPipeComponent'}\n *\n * @publicApi\n */\nclass I18nSelectPipe {\n /**\n * @param value a string to be internationalized.\n * @param mapping an object that indicates the text that should be displayed\n * for different values of the provided `value`.\n */\n transform(value, mapping) {\n if (value == null)\n return '';\n if (typeof mapping !== 'object' || typeof value !== 'string') {\n throw invalidPipeArgumentError(I18nSelectPipe, mapping);\n }\n if (mapping.hasOwnProperty(value)) {\n return mapping[value];\n }\n if (mapping.hasOwnProperty('other')) {\n return mapping['other'];\n }\n return '';\n }\n}\nI18nSelectPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.9\", ngImport: i0, type: I18nSelectPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });\nI18nSelectPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: \"14.0.0\", version: \"15.2.9\", ngImport: i0, type: I18nSelectPipe, isStandalone: true, name: \"i18nSelect\" });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.9\", ngImport: i0, type: I18nSelectPipe, decorators: [{\n type: Pipe,\n args: [{\n name: 'i18nSelect',\n pure: true,\n standalone: true,\n }]\n }] });\n\n/**\n * @ngModule CommonModule\n * @description\n *\n * Converts a value into its JSON-format representation. Useful for debugging.\n *\n * @usageNotes\n *\n * The following component uses a JSON pipe to convert an object\n * to JSON format, and displays the string in both formats for comparison.\n *\n * {@example common/pipes/ts/json_pipe.ts region='JsonPipe'}\n *\n * @publicApi\n */\nclass JsonPipe {\n /**\n * @param value A value of any type to convert into a JSON-format string.\n */\n transform(value) {\n return JSON.stringify(value, null, 2);\n }\n}\nJsonPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.9\", ngImport: i0, type: JsonPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });\nJsonPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: \"14.0.0\", version: \"15.2.9\", ngImport: i0, type: JsonPipe, isStandalone: true, name: \"json\", pure: false });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.9\", ngImport: i0, type: JsonPipe, decorators: [{\n type: Pipe,\n args: [{\n name: 'json',\n pure: false,\n standalone: true,\n }]\n }] });\n\nfunction makeKeyValuePair(key, value) {\n return { key: key, value: value };\n}\n/**\n * @ngModule CommonModule\n * @description\n *\n * Transforms Object or Map into an array of key value pairs.\n *\n * The output array will be ordered by keys.\n * By default the comparator will be by Unicode point value.\n * You can optionally pass a compareFn if your keys are complex types.\n *\n * @usageNotes\n * ### Examples\n *\n * This examples show how an Object or a Map can be iterated by ngFor with the use of this\n * keyvalue pipe.\n *\n * {@example common/pipes/ts/keyvalue_pipe.ts region='KeyValuePipe'}\n *\n * @publicApi\n */\nclass KeyValuePipe {\n constructor(differs) {\n this.differs = differs;\n this.keyValues = [];\n this.compareFn = defaultComparator;\n }\n transform(input, compareFn = defaultComparator) {\n if (!input || (!(input instanceof Map) && typeof input !== 'object')) {\n return null;\n }\n if (!this.differ) {\n // make a differ for whatever type we've been passed in\n this.differ = this.differs.find(input).create();\n }\n const differChanges = this.differ.diff(input);\n const compareFnChanged = compareFn !== this.compareFn;\n if (differChanges) {\n this.keyValues = [];\n differChanges.forEachItem((r) => {\n this.keyValues.push(makeKeyValuePair(r.key, r.currentValue));\n });\n }\n if (differChanges || compareFnChanged) {\n this.keyValues.sort(compareFn);\n this.compareFn = compareFn;\n }\n return this.keyValues;\n }\n}\nKeyValuePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.9\", ngImport: i0, type: KeyValuePipe, deps: [{ token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Pipe });\nKeyValuePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: \"14.0.0\", version: \"15.2.9\", ngImport: i0, type: KeyValuePipe, isStandalone: true, name: \"keyvalue\", pure: false });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.9\", ngImport: i0, type: KeyValuePipe, decorators: [{\n type: Pipe,\n args: [{\n name: 'keyvalue',\n pure: false,\n standalone: true,\n }]\n }], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }]; } });\nfunction defaultComparator(keyValueA, keyValueB) {\n const a = keyValueA.key;\n const b = keyValueB.key;\n // if same exit with 0;\n if (a === b)\n return 0;\n // make sure that undefined are at the end of the sort.\n if (a === undefined)\n return 1;\n if (b === undefined)\n return -1;\n // make sure that nulls are at the end of the sort.\n if (a === null)\n return 1;\n if (b === null)\n return -1;\n if (typeof a == 'string' && typeof b == 'string') {\n return a < b ? -1 : 1;\n }\n if (typeof a == 'number' && typeof b == 'number') {\n return a - b;\n }\n if (typeof a == 'boolean' && typeof b == 'boolean') {\n return a < b ? -1 : 1;\n }\n // `a` and `b` are of different types. Compare their string values.\n const aString = String(a);\n const bString = String(b);\n return aString == bString ? 0 : aString < bString ? -1 : 1;\n}\n\n/**\n * @ngModule CommonModule\n * @description\n *\n * Formats a value according to digit options and locale rules.\n * Locale determines group sizing and separator,\n * decimal point character, and other locale-specific configurations.\n *\n * @see `formatNumber()`\n *\n * @usageNotes\n *\n * ### digitsInfo\n *\n * The value's decimal representation is specified by the `digitsInfo`\n * parameter, written in the following format:Today is {{today | date}}
\n *Or if you prefer, {{today | date:'fullDate'}}
\n *The time is {{today | date:'h:mm a z'}}
\n *\n *\n * ```\n * {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}\n * ```\n *\n * - `minIntegerDigits`:\n * The minimum number of integer digits before the decimal point.\n * Default is 1.\n *\n * - `minFractionDigits`:\n * The minimum number of digits after the decimal point.\n * Default is 0.\n *\n * - `maxFractionDigits`:\n * The maximum number of digits after the decimal point.\n * Default is 3.\n *\n * If the formatted value is truncated it will be rounded using the \"to-nearest\" method:\n *\n * ```\n * {{3.6 | number: '1.0-0'}}\n * \n *\n * {{-3.6 | number:'1.0-0'}}\n * \n * ```\n *\n * ### locale\n *\n * `locale` will format a value according to locale rules.\n * Locale determines group sizing and separator,\n * decimal point character, and other locale-specific configurations.\n *\n * When not supplied, uses the value of `LOCALE_ID`, which is `en-US` by default.\n *\n * See [Setting your app locale](guide/i18n-common-locale-id).\n *\n * ### Example\n *\n * The following code shows how the pipe transforms values\n * according to various format specifications,\n * where the caller's default locale is `en-US`.\n *\n *
\n *
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.\n * - `minIntegerDigits`: The minimum number of integer digits before the decimal point.\n * Default is `1`.\n * - `minFractionDigits`: The minimum number of digits after the decimal point.\n * Default is `0`.\n * - `maxFractionDigits`: The maximum number of digits after the decimal point.\n * Default is `0`.\n * @param locale A locale code for the locale format rules to use.\n * When not supplied, uses the value of `LOCALE_ID`, which is `en-US` by default.\n * See [Setting your app locale](guide/i18n-common-locale-id).\n */\n transform(value, digitsInfo, locale) {\n if (!isValue(value))\n return null;\n locale = locale || this._locale;\n try {\n const num = strToNumber(value);\n return formatPercent(num, locale, digitsInfo);\n }\n catch (error) {\n throw invalidPipeArgumentError(PercentPipe, error.message);\n }\n }\n}\nPercentPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.9\", ngImport: i0, type: PercentPipe, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Pipe });\nPercentPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: \"14.0.0\", version: \"15.2.9\", ngImport: i0, type: PercentPipe, isStandalone: true, name: \"percent\" });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.9\", ngImport: i0, type: PercentPipe, decorators: [{\n type: Pipe,\n args: [{\n name: 'percent',\n standalone: true,\n }]\n }], ctorParameters: function () { return [{ type: undefined, decorators: [{\n type: Inject,\n args: [LOCALE_ID]\n }] }]; } });\n/**\n * @ngModule CommonModule\n * @description\n *\n * Transforms a number to a currency string, formatted according to locale rules\n * that determine group sizing and separator, decimal-point character,\n * and other locale-specific configurations.\n *\n *\n * @see `getCurrencySymbol()`\n * @see `formatCurrency()`\n *\n * @usageNotes\n * The following code shows how the pipe transforms numbers\n * into text strings, according to various format specifications,\n * where the caller's default locale is `en-US`.\n *\n * \n *
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.\n * - `minIntegerDigits`: The minimum number of integer digits before the decimal point.\n * Default is `1`.\n * - `minFractionDigits`: The minimum number of digits after the decimal point.\n * Default is `2`.\n * - `maxFractionDigits`: The maximum number of digits after the decimal point.\n * Default is `2`.\n * If not provided, the number will be formatted with the proper amount of digits,\n * depending on what the [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) specifies.\n * For example, the Canadian dollar has 2 digits, whereas the Chilean peso has none.\n * @param locale A locale code for the locale format rules to use.\n * When not supplied, uses the value of `LOCALE_ID`, which is `en-US` by default.\n * See [Setting your app locale](guide/i18n-common-locale-id).\n */\n transform(value, currencyCode = this._defaultCurrencyCode, display = 'symbol', digitsInfo, locale) {\n if (!isValue(value))\n return null;\n locale = locale || this._locale;\n if (typeof display === 'boolean') {\n if ((typeof ngDevMode === 'undefined' || ngDevMode) && console && console.warn) {\n console.warn(`Warning: the currency pipe has been changed in Angular v5. The symbolDisplay option (third parameter) is now a string instead of a boolean. The accepted values are \"code\", \"symbol\" or \"symbol-narrow\".`);\n }\n display = display ? 'symbol' : 'code';\n }\n let currency = currencyCode || this._defaultCurrencyCode;\n if (display !== 'code') {\n if (display === 'symbol' || display === 'symbol-narrow') {\n currency = getCurrencySymbol(currency, display === 'symbol' ? 'wide' : 'narrow', locale);\n }\n else {\n currency = display;\n }\n }\n try {\n const num = strToNumber(value);\n return formatCurrency(num, locale, currency, currencyCode, digitsInfo);\n }\n catch (error) {\n throw invalidPipeArgumentError(CurrencyPipe, error.message);\n }\n }\n}\nCurrencyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.9\", ngImport: i0, type: CurrencyPipe, deps: [{ token: LOCALE_ID }, { token: DEFAULT_CURRENCY_CODE }], target: i0.ɵɵFactoryTarget.Pipe });\nCurrencyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: \"14.0.0\", version: \"15.2.9\", ngImport: i0, type: CurrencyPipe, isStandalone: true, name: \"currency\" });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.9\", ngImport: i0, type: CurrencyPipe, decorators: [{\n type: Pipe,\n args: [{\n name: 'currency',\n standalone: true,\n }]\n }], ctorParameters: function () { return [{ type: undefined, decorators: [{\n type: Inject,\n args: [LOCALE_ID]\n }] }, { type: undefined, decorators: [{\n type: Inject,\n args: [DEFAULT_CURRENCY_CODE]\n }] }]; } });\nfunction isValue(value) {\n return !(value == null || value === '' || value !== value);\n}\n/**\n * Transforms a string into a number (if needed).\n */\nfunction strToNumber(value) {\n // Convert strings to numbers\n if (typeof value === 'string' && !isNaN(Number(value) - parseFloat(value))) {\n return Number(value);\n }\n if (typeof value !== 'number') {\n throw new Error(`${value} is not a number`);\n }\n return value;\n}\n\n/**\n * @ngModule CommonModule\n * @description\n *\n * Creates a new `Array` or `String` containing a subset (slice) of the elements.\n *\n * @usageNotes\n *\n * All behavior is based on the expected behavior of the JavaScript API `Array.prototype.slice()`\n * and `String.prototype.slice()`.\n *\n * When operating on an `Array`, the returned `Array` is always a copy even when all\n * the elements are being returned.\n *\n * When operating on a blank value, the pipe returns the blank value.\n *\n * ### List Example\n *\n * This `ngFor` example:\n *\n * {@example common/pipes/ts/slice_pipe.ts region='SlicePipe_list'}\n *\n * produces the following:\n *\n * ```html\n * \n * {{item.field}}\n *
\n * \n * {{item.field}}\n *
\n * \\n
\\n\", dependencies: [{ kind: \"directive\", type: i1$1.NgIf, selector: \"[ngIf]\", inputs: [\"ngIf\", \"ngIfThen\", \"ngIfElse\"] }, { kind: \"directive\", type: IgxToggleDirective, selector: \"[igxToggle]\", inputs: [\"id\"], outputs: [\"opened\", \"opening\", \"closed\", \"closing\", \"appended\"], exportAs: [\"toggle\"] }] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxDropDownComponent, decorators: [{\n type: Component,\n args: [{ selector: 'igx-drop-down', providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxDropDownComponent }], template: \"\\n \\n \\n
\\n\\n
\\n\" }]\n }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [DisplayDensityToken]\n }] }]; }, propDecorators: { children: [{\n type: ContentChildren,\n args: [forwardRef(() => IgxDropDownItemComponent), { descendants: true }]\n }], opening: [{\n type: Output\n }], opened: [{\n type: Output\n }], closing: [{\n type: Output\n }], closed: [{\n type: Output\n }], allowItemsFocus: [{\n type: Input\n }], labelledBy: [{\n type: Input\n }], virtDir: [{\n type: ContentChild,\n args: [IgxForOfDirective, { read: IgxForOfDirective }]\n }], toggleDirective: [{\n type: ViewChild,\n args: [IgxToggleDirective, { static: true }]\n }], scrollContainerRef: [{\n type: ViewChild,\n args: ['scrollContainer', { static: true }]\n }] } });\n\n/**\n * Navigation Directive that handles keyboard events on its host and controls a targeted IgxDropDownBaseDirective component\n */\nclass IgxDropDownItemNavigationDirective {\n constructor(dropdown) {\n this.dropdown = dropdown;\n this._target = null;\n }\n /**\n * Gets the target of the navigation directive;\n *\n * ```typescript\n * // Get\n * export class MyComponent {\n * ...\n * @ContentChild(IgxDropDownNavigationDirective)\n * navDirective: IgxDropDownNavigationDirective = null\n * ...\n * const navTarget: IgxDropDownBaseDirective = navDirective.navTarget\n * }\n * ```\n */\n get target() {\n return this._target;\n }\n /**\n * Sets the target of the navigation directive;\n * If no valid target is passed, it falls back to the drop down context\n *\n * ```html\n * \n * \n * ...\n * \\n \\n \\n
\\n\\n
\\n\\n\\n
\\n\\n\\n \\n \\n\\n
\\n\\n
\\n\\n \\n
\\n \\n
\\n\\n \\n\\n \\n
\\n\\n \\n \\n
\\n\\n
\\n\\n\\n \\n
\\n\\n \\n
\\n\\n \\n \\n
\\n\\n
\\n\\n \\n
\\n \\n
\\n\\n\\n
\\n\\n\\n \\n \\n\\n
\\n\\n
\\n\\n \\n
\\n \\n
\\n\\n \\n\\n \\n
\\n\\n \\n \\n
\\n\\n
\\n\\n\\n \\n
\\n\\n \\n
\\n\\n \\n \\n
\\n\\n
\\n\\n \\n
\\n \n * Drag Me!\n *
\n * ```\n *\n * @memberof IgxDragDirective\n */\n set ghostOffsetX(value) {\n this._offsetX = parseInt(value, 10);\n }\n get ghostOffsetX() {\n return this._offsetX !== undefined ? this._offsetX : this._defaultOffsetX;\n }\n /**\n * An @Input property that specifies the offset of the dragged element relative to the mouse in pixels.\n * By default it's taking the relative position to the mouse when the drag started and keeps it the same.\n * ```html\n * \n * \n * Drag Me!\n *
\n * ```\n *\n * @memberof IgxDragDirective\n */\n set ghostOffsetY(value) {\n this._offsetY = parseInt(value, 10);\n }\n get ghostOffsetY() {\n return this._offsetY !== undefined ? this._offsetY : this._defaultOffsetY;\n }\n constructor(cdr, element, viewContainer, zone, renderer, platformUtil) {\n this.cdr = cdr;\n this.element = element;\n this.viewContainer = viewContainer;\n this.zone = zone;\n this.renderer = renderer;\n this.platformUtil = platformUtil;\n /**\n * An @Input property that indicates when the drag should start.\n * By default the drag starts after the draggable element is moved by 5px.\n * ```html\n * \n * Drag Me!\n *
\n * ```\n *\n * @memberof IgxDragDirective\n */\n this.dragTolerance = 5;\n /**\n * An @Input property that indicates the directions that the element can be dragged.\n * By default it is set to both horizontal and vertical directions.\n * ```html\n * \n * Drag Me!\n *
\n * ```\n * ```typescript\n * public dragDir = DragDirection.HORIZONTAL;\n * ```\n *\n * @memberof IgxDragDirective\n */\n this.dragDirection = DragDirection.BOTH;\n /**\n * An @Input property that specifies if the base element should not be moved and a ghost element should be rendered that represents it.\n * By default it is set to `true`.\n * If it is set to `false` when dragging the base element is moved instead and no ghost elements are rendered.\n * ```html\n * \n * Drag Me!\n *
\n * ```\n *\n * @memberof IgxDragDirective\n */\n this.ghost = true;\n /**\n * Sets a custom class that will be added to the `ghostElement` element.\n * ```html\n * \n * Drag Me!\n *
\n * ```\n *\n * @memberof IgxDragDirective\n */\n this.ghostClass = '';\n /**\n * An @Input assigning a scroll container to the dragged element. By default its the window.\n */\n this.scrollContainer = null;\n /**\n * Event triggered when the draggable element drag starts.\n * ```html\n * \n * Drag Me!\n *
\n * ```\n * ```typescript\n * public onDragStart(){\n * alert(\"The drag has stared!\");\n * }\n * ```\n *\n * @memberof IgxDragDirective\n */\n this.dragStart = new EventEmitter();\n /**\n * Event triggered when the draggable element has been moved.\n * ```html\n * \n * Drag Me!\n *
\n * ```\n * ```typescript\n * public onDragMove(){\n * alert(\"The element has moved!\");\n * }\n * ```\n *\n * @memberof IgxDragDirective\n */\n this.dragMove = new EventEmitter();\n /**\n * Event triggered when the draggable element is released.\n * ```html\n * \n * Drag Me!\n *
\n * ```\n * ```typescript\n * public onDragEnd(){\n * alert(\"The drag has ended!\");\n * }\n * ```\n *\n * @memberof IgxDragDirective\n */\n this.dragEnd = new EventEmitter();\n /**\n * Event triggered when the draggable element is clicked.\n * ```html\n * \n * Drag Me!\n *
\n * ```\n * ```typescript\n * public onDragClick(){\n * alert(\"The element has been clicked!\");\n * }\n * ```\n *\n * @memberof IgxDragDirective\n */\n this.dragClick = new EventEmitter();\n /**\n * Event triggered when the drag ghost element is created.\n * ```html\n * \n * Drag Me!\n *
\n * ```\n * ```typescript\n * public ghostCreated(){\n * alert(\"The ghost has been created!\");\n * }\n * ```\n *\n * @memberof IgxDragDirective\n */\n this.ghostCreate = new EventEmitter();\n /**\n * Event triggered when the drag ghost element is created.\n * ```html\n * \n * Drag Me!\n *
\n * ```\n * ```typescript\n * public ghostDestroyed(){\n * alert(\"The ghost has been destroyed!\");\n * }\n * ```\n *\n * @memberof IgxDragDirective\n */\n this.ghostDestroy = new EventEmitter();\n /**\n * Event triggered after the draggable element is released and after its animation has finished.\n * ```html\n * \n * Drag Me!\n *
\n * ```\n * ```typescript\n * public onMoveEnd(){\n * alert(\"The move has ended!\");\n * }\n * ```\n *\n * @memberof IgxDragDirective\n */\n this.transitioned = new EventEmitter();\n /**\n * @hidden\n */\n this.baseClass = true;\n /**\n * @hidden\n */\n this.selectDisabled = false;\n /**\n * @hidden\n */\n this.defaultReturnDuration = '0.5s';\n /**\n * @hidden\n */\n this.animInProgress = false;\n this.ghostContext = null;\n this._startX = 0;\n this._startY = 0;\n this._lastX = 0;\n this._lastY = 0;\n this._dragStarted = false;\n this._ghostHostX = 0;\n this._ghostHostY = 0;\n this._pointerDownId = null;\n this._clicked = false;\n this._lastDropArea = null;\n this._destroy = new Subject();\n this._removeOnDestroy = true;\n this._scrollContainer = null;\n this._originalScrollContainerWidth = 0;\n this._originalScrollContainerHeight = 0;\n this._scrollContainerStep = 5;\n this._scrollContainerStepMs = 10;\n this._scrollContainerThreshold = 25;\n this._containerScrollIntervalId = null;\n }\n /**\n * @hidden\n */\n ngAfterContentInit() {\n if (!this.dragHandles || !this.dragHandles.length) {\n // Set user select none to the whole draggable element if no drag handles are defined.\n this.selectDisabled = true;\n }\n // Bind events\n this.zone.runOutsideAngular(() => {\n if (!this.platformUtil.isBrowser) {\n return;\n }\n const targetElements = this.dragHandles && this.dragHandles.length ?\n this.dragHandles.map((item) => item.element.nativeElement) : [this.element.nativeElement];\n targetElements.forEach((element) => {\n if (this.pointerEventsEnabled) {\n fromEvent(element, 'pointerdown').pipe(takeUntil(this._destroy))\n .subscribe((res) => this.onPointerDown(res));\n fromEvent(element, 'pointermove').pipe(throttle(() => interval(0, animationFrameScheduler)), takeUntil(this._destroy)).subscribe((res) => this.onPointerMove(res));\n fromEvent(element, 'pointerup').pipe(takeUntil(this._destroy))\n .subscribe((res) => this.onPointerUp(res));\n if (!this.ghost) {\n // Do not bind `lostpointercapture` to the target, because we will bind it on the ghost later.\n fromEvent(element, 'lostpointercapture').pipe(takeUntil(this._destroy))\n .subscribe((res) => this.onPointerLost(res));\n }\n }\n else if (this.touchEventsEnabled) {\n fromEvent(element, 'touchstart').pipe(takeUntil(this._destroy))\n .subscribe((res) => this.onPointerDown(res));\n }\n else {\n // We don't have pointer events and touch events. Use then mouse events.\n fromEvent(element, 'mousedown').pipe(takeUntil(this._destroy))\n .subscribe((res) => this.onPointerDown(res));\n }\n });\n // We should bind to document events only once when there are no pointer events.\n if (!this.pointerEventsEnabled && this.touchEventsEnabled) {\n fromEvent(document.defaultView, 'touchmove').pipe(throttle(() => interval(0, animationFrameScheduler)), takeUntil(this._destroy)).subscribe((res) => this.onPointerMove(res));\n fromEvent(document.defaultView, 'touchend').pipe(takeUntil(this._destroy))\n .subscribe((res) => this.onPointerUp(res));\n }\n else if (!this.pointerEventsEnabled) {\n fromEvent(document.defaultView, 'mousemove').pipe(throttle(() => interval(0, animationFrameScheduler)), takeUntil(this._destroy)).subscribe((res) => this.onPointerMove(res));\n fromEvent(document.defaultView, 'mouseup').pipe(takeUntil(this._destroy))\n .subscribe((res) => this.onPointerUp(res));\n }\n this.element.nativeElement.addEventListener('transitionend', (args) => {\n this.onTransitionEnd(args);\n });\n });\n // Set transition duration to 0s. This also helps with setting `visibility: hidden` to the base to not lag.\n this.element.nativeElement.style.transitionDuration = '0.0s';\n }\n /**\n * @hidden\n */\n ngOnDestroy() {\n this._destroy.next(true);\n this._destroy.complete();\n if (this.ghost && this.ghostElement && this._removeOnDestroy) {\n this.ghostElement.parentNode.removeChild(this.ghostElement);\n this.ghostElement = null;\n if (this._dynamicGhostRef) {\n this._dynamicGhostRef.destroy();\n this._dynamicGhostRef = null;\n }\n }\n if (this._containerScrollIntervalId) {\n clearInterval(this._containerScrollIntervalId);\n this._containerScrollIntervalId = null;\n }\n }\n /**\n * Sets desired location of the base element or ghost element if rended relative to the document.\n *\n * @param newLocation New location that should be applied. It is advised to get new location using getBoundingClientRects() + scroll.\n */\n setLocation(newLocation) {\n // We do not subtract marginLeft and marginTop here because here we calculate deltas.\n if (this.ghost && this.ghostElement) {\n const offsetHostX = this.ghostHost ? this.ghostHostOffsetLeft(this.ghostHost) : 0;\n const offsetHostY = this.ghostHost ? this.ghostHostOffsetTop(this.ghostHost) : 0;\n this.ghostLeft = newLocation.pageX - offsetHostX + this.windowScrollLeft;\n this.ghostTop = newLocation.pageY - offsetHostY + this.windowScrollTop;\n }\n else if (!this.ghost) {\n const deltaX = newLocation.pageX - this.pageX;\n const deltaY = newLocation.pageY - this.pageY;\n const transformX = this.getTransformX(this.element.nativeElement);\n const transformY = this.getTransformY(this.element.nativeElement);\n this.setTransformXY(transformX + deltaX, transformY + deltaY);\n }\n this._startX = this.baseLeft;\n this._startY = this.baseTop;\n }\n /**\n * Animates the base or ghost element depending on the `ghost` input to its initial location.\n * If `ghost` is true but there is not ghost rendered, it will be created and animated.\n * If the base element has changed its DOM position its initial location will be changed accordingly.\n *\n * @param customAnimArgs Custom transition properties that will be applied when performing the transition.\n * @param startLocation Start location from where the transition should start.\n */\n transitionToOrigin(customAnimArgs, startLocation) {\n if ((!!startLocation && startLocation.pageX === this.baseOriginLeft && startLocation.pageY === this.baseOriginLeft) ||\n (!startLocation && this.ghost && !this.ghostElement)) {\n return;\n }\n if (!!startLocation && startLocation.pageX !== this.pageX && startLocation.pageY !== this.pageY) {\n if (this.ghost && !this.ghostElement) {\n this._startX = startLocation.pageX;\n this._startY = startLocation.pageY;\n this._ghostStartX = this._startX;\n this._ghostStartY = this._startY;\n this.createGhost(this._startX, this._startY);\n }\n this.setLocation(startLocation);\n }\n this.animInProgress = true;\n // Use setTimeout because we need to be sure that the element is positioned first correctly if there is start location.\n setTimeout(() => {\n if (this.ghost) {\n this.ghostElement.style.transitionProperty = 'top, left';\n this.ghostElement.style.transitionDuration =\n customAnimArgs && customAnimArgs.duration ? customAnimArgs.duration + 's' : this.defaultReturnDuration;\n this.ghostElement.style.transitionTimingFunction =\n customAnimArgs && customAnimArgs.timingFunction ? customAnimArgs.timingFunction : '';\n this.ghostElement.style.transitionDelay = customAnimArgs && customAnimArgs.delay ? customAnimArgs.delay + 's' : '';\n this.setLocation(new IgxDragLocation(this.baseLeft, this.baseTop));\n }\n else if (!this.ghost) {\n this.element.nativeElement.style.transitionProperty = 'transform';\n this.element.nativeElement.style.transitionDuration =\n customAnimArgs && customAnimArgs.duration ? customAnimArgs.duration + 's' : this.defaultReturnDuration;\n this.element.nativeElement.style.transitionTimingFunction =\n customAnimArgs && customAnimArgs.timingFunction ? customAnimArgs.timingFunction : '';\n this.element.nativeElement.style.transitionDelay = customAnimArgs && customAnimArgs.delay ? customAnimArgs.delay + 's' : '';\n this._startX = this.baseLeft;\n this._startY = this.baseTop;\n this.setTransformXY(0, 0);\n }\n }, 0);\n }\n /**\n * Animates the base or ghost element to a specific target location or other element using transition.\n * If `ghost` is true but there is not ghost rendered, it will be created and animated.\n * It is recommended to use 'getBoundingClientRects() + pageScroll' when determining desired location.\n *\n * @param target Target that the base or ghost will transition to. It can be either location in the page or another HTML element.\n * @param customAnimArgs Custom transition properties that will be applied when performing the transition.\n * @param startLocation Start location from where the transition should start.\n */\n transitionTo(target, customAnimArgs, startLocation) {\n if (!!startLocation && this.ghost && !this.ghostElement) {\n this._startX = startLocation.pageX;\n this._startY = startLocation.pageY;\n this._ghostStartX = this._startX;\n this._ghostStartY = this._startY;\n }\n else if (!!startLocation && (!this.ghost || this.ghostElement)) {\n this.setLocation(startLocation);\n }\n else if (this.ghost && !this.ghostElement) {\n this._startX = this.baseLeft;\n this._startY = this.baseTop;\n this._ghostStartX = this._startX + this.windowScrollLeft;\n this._ghostStartY = this._startY + this.windowScrollTop;\n }\n if (this.ghost && !this.ghostElement) {\n this.createGhost(this._startX, this._startY);\n }\n this.animInProgress = true;\n // Use setTimeout because we need to be sure that the element is positioned first correctly if there is start location.\n setTimeout(() => {\n const movedElem = this.ghost ? this.ghostElement : this.element.nativeElement;\n movedElem.style.transitionProperty = this.ghost && this.ghostElement ? 'left, top' : 'transform';\n movedElem.style.transitionDuration =\n customAnimArgs && customAnimArgs.duration ? customAnimArgs.duration + 's' : this.defaultReturnDuration;\n movedElem.style.transitionTimingFunction =\n customAnimArgs && customAnimArgs.timingFunction ? customAnimArgs.timingFunction : '';\n movedElem.style.transitionDelay = customAnimArgs && customAnimArgs.delay ? customAnimArgs.delay + 's' : '';\n if (target instanceof IgxDragLocation) {\n this.setLocation(new IgxDragLocation(target.pageX, target.pageY));\n }\n else {\n const targetRects = target.nativeElement.getBoundingClientRect();\n this.setLocation(new IgxDragLocation(targetRects.left - this.windowScrollLeft, targetRects.top - this.windowScrollTop));\n }\n }, 0);\n }\n /**\n * @hidden\n * Method bound to the PointerDown event of the base element igxDrag is initialized.\n * @param event PointerDown event captured\n */\n onPointerDown(event) {\n const ignoredElement = this.dragIgnoredElems.find(elem => elem.element.nativeElement === event.target);\n if (ignoredElement) {\n return;\n }\n this._clicked = true;\n this._pointerDownId = event.pointerId;\n // Set pointer capture so we detect pointermove even if mouse is out of bounds until ghostElement is created.\n const handleFound = this.dragHandles.find(handle => handle.element.nativeElement === event.currentTarget);\n const targetElement = handleFound ? handleFound.element.nativeElement : this.element.nativeElement;\n if (this.pointerEventsEnabled) {\n targetElement.setPointerCapture(this._pointerDownId);\n }\n else {\n targetElement.focus();\n event.preventDefault();\n }\n if (this.pointerEventsEnabled || !this.touchEventsEnabled) {\n // Check first for pointer events or non touch, because we can have pointer events and touch events at once.\n this._startX = event.pageX;\n this._startY = event.pageY;\n }\n else if (this.touchEventsEnabled) {\n this._startX = event.touches[0].pageX;\n this._startY = event.touches[0].pageY;\n }\n this._defaultOffsetX = this.baseLeft - this._startX + this.windowScrollLeft;\n this._defaultOffsetY = this.baseTop - this._startY + this.windowScrollTop;\n this._ghostStartX = this._startX + this.ghostOffsetX;\n this._ghostStartY = this._startY + this.ghostOffsetY;\n this._lastX = this._startX;\n this._lastY = this._startY;\n }\n /**\n * @hidden\n * Perform drag move logic when dragging and dispatching events if there is igxDrop under the pointer.\n * This method is bound at first at the base element.\n * If dragging starts and after the ghostElement is rendered the pointerId is reassigned it. Then this method is bound to it.\n * @param event PointerMove event captured\n */\n onPointerMove(event) {\n if (this._clicked) {\n let pageX;\n let pageY;\n if (this.pointerEventsEnabled || !this.touchEventsEnabled) {\n // Check first for pointer events or non touch, because we can have pointer events and touch events at once.\n pageX = event.pageX;\n pageY = event.pageY;\n }\n else if (this.touchEventsEnabled) {\n pageX = event.touches[0].pageX;\n pageY = event.touches[0].pageY;\n // Prevent scrolling on touch while dragging\n event.preventDefault();\n }\n const totalMovedX = pageX - this._startX;\n const totalMovedY = pageY - this._startY;\n if (!this._dragStarted &&\n (Math.abs(totalMovedX) > this.dragTolerance || Math.abs(totalMovedY) > this.dragTolerance)) {\n const dragStartArgs = {\n originalEvent: event,\n owner: this,\n startX: pageX - totalMovedX,\n startY: pageY - totalMovedY,\n pageX,\n pageY,\n cancel: false\n };\n this.zone.run(() => {\n this.dragStart.emit(dragStartArgs);\n });\n if (!dragStartArgs.cancel) {\n this._dragStarted = true;\n if (this.ghost) {\n // We moved enough so ghostElement can be rendered and actual dragging to start.\n // When creating it will take into account any offset set by the user by default.\n this.createGhost(pageX, pageY);\n }\n else if (this._offsetX !== undefined || this._offsetY !== undefined) {\n // There is no need for ghost, but we will need to position initially the base element to reflect any offset.\n const transformX = (this._offsetX !== undefined ? this._offsetX - this._defaultOffsetX : 0) +\n this.getTransformX(this.element.nativeElement);\n const transformY = (this._offsetY !== undefined ? this._offsetY - this._defaultOffsetY : 0) +\n this.getTransformY(this.element.nativeElement);\n this.setTransformXY(transformX, transformY);\n }\n }\n else {\n return;\n }\n }\n else if (!this._dragStarted) {\n return;\n }\n const moveArgs = {\n originalEvent: event,\n owner: this,\n startX: this._startX,\n startY: this._startY,\n pageX: this._lastX,\n pageY: this._lastY,\n nextPageX: pageX,\n nextPageY: pageY,\n cancel: false\n };\n this.dragMove.emit(moveArgs);\n const setPageX = moveArgs.nextPageX;\n const setPageY = moveArgs.nextPageY;\n if (!moveArgs.cancel) {\n // Scroll root container if the user reaches its boundaries.\n this.onScrollContainer();\n // Move the actual element around\n if (this.ghost) {\n const updatedTotalMovedX = this.dragDirection === DragDirection.VERTICAL ? 0 : setPageX - this._startX;\n const updatedTotalMovedY = this.dragDirection === DragDirection.HORIZONTAL ? 0 : setPageY - this._startY;\n this.ghostLeft = this._ghostStartX + updatedTotalMovedX;\n this.ghostTop = this._ghostStartY + updatedTotalMovedY;\n }\n else {\n const lastMovedX = this.dragDirection === DragDirection.VERTICAL ? 0 : setPageX - this._lastX;\n const lastMovedY = this.dragDirection === DragDirection.HORIZONTAL ? 0 : setPageY - this._lastY;\n const translateX = this.getTransformX(this.element.nativeElement) + lastMovedX;\n const translateY = this.getTransformY(this.element.nativeElement) + lastMovedY;\n this.setTransformXY(translateX, translateY);\n }\n this.dispatchDragEvents(pageX, pageY, event);\n }\n this._lastX = setPageX;\n this._lastY = setPageY;\n }\n }\n /**\n * @hidden\n * Perform drag end logic when releasing the ghostElement and dispatching drop event if igxDrop is under the pointer.\n * This method is bound at first at the base element.\n * If dragging starts and after the ghostElement is rendered the pointerId is reassigned to it. Then this method is bound to it.\n * @param event PointerUp event captured\n */\n onPointerUp(event) {\n if (!this._clicked) {\n return;\n }\n let pageX;\n let pageY;\n if (this.pointerEventsEnabled || !this.touchEventsEnabled) {\n // Check first for pointer events or non touch, because we can have pointer events and touch events at once.\n pageX = event.pageX;\n pageY = event.pageY;\n }\n else if (this.touchEventsEnabled) {\n pageX = event.touches[0].pageX;\n pageY = event.touches[0].pageY;\n // Prevent scrolling on touch while dragging\n event.preventDefault();\n }\n const eventArgs = {\n originalEvent: event,\n owner: this,\n startX: this._startX,\n startY: this._startY,\n pageX,\n pageY\n };\n this._pointerDownId = null;\n this._clicked = false;\n if (this._dragStarted) {\n if (this._lastDropArea && this._lastDropArea !== this.element.nativeElement) {\n this.dispatchDropEvent(event.pageX, event.pageY, event);\n }\n this.zone.run(() => {\n this.dragEnd.emit(eventArgs);\n });\n if (!this.animInProgress) {\n this.onTransitionEnd(null);\n }\n }\n else {\n // Trigger our own click event because when there is no ghost, native click cannot be prevented when dragging.\n this.zone.run(() => {\n this.dragClick.emit(eventArgs);\n });\n }\n if (this._containerScrollIntervalId) {\n clearInterval(this._containerScrollIntervalId);\n this._containerScrollIntervalId = null;\n }\n }\n /**\n * @hidden\n * Execute this method whe the pointer capture has been lost.\n * This means that during dragging the user has performed other action like right clicking and then clicking somewhere else.\n * This method will ensure that the drag state is being reset in this case as if the user released the dragged element.\n * @param event Event captured\n */\n onPointerLost(event) {\n if (!this._clicked) {\n return;\n }\n const eventArgs = {\n originalEvent: event,\n owner: this,\n startX: this._startX,\n startY: this._startY,\n pageX: event.pageX,\n pageY: event.pageY\n };\n this._pointerDownId = null;\n this._clicked = false;\n if (this._dragStarted) {\n this.zone.run(() => {\n this.dragEnd.emit(eventArgs);\n });\n if (!this.animInProgress) {\n this.onTransitionEnd(null);\n }\n }\n }\n /**\n * @hidden\n */\n onTransitionEnd(event) {\n if ((!this._dragStarted && !this.animInProgress) || this._clicked) {\n // Return if no dragging started and there is no animation in progress.\n return;\n }\n if (this.ghost && this.ghostElement) {\n this._ghostStartX = this.baseLeft + this.windowScrollLeft;\n this._ghostStartY = this.baseTop + this.windowScrollTop;\n const ghostDestroyArgs = {\n owner: this,\n ghostElement: this.ghostElement,\n cancel: false\n };\n this.ghostDestroy.emit(ghostDestroyArgs);\n if (ghostDestroyArgs.cancel) {\n return;\n }\n this.ghostElement.remove();\n this.ghostElement = null;\n if (this._dynamicGhostRef) {\n this._dynamicGhostRef.destroy();\n this._dynamicGhostRef = null;\n }\n }\n else if (!this.ghost) {\n this.element.nativeElement.style.transitionProperty = '';\n this.element.nativeElement.style.transitionDuration = '0.0s';\n this.element.nativeElement.style.transitionTimingFunction = '';\n this.element.nativeElement.style.transitionDelay = '';\n }\n this.animInProgress = false;\n this._dragStarted = false;\n // Execute transitioned after everything is reset so if the user sets new location on the base now it would work as expected.\n this.zone.run(() => {\n this.transitioned.emit({\n originalEvent: event,\n owner: this,\n startX: this._startX,\n startY: this._startY,\n pageX: this._startX,\n pageY: this._startY\n });\n });\n }\n /**\n * @hidden\n * Create ghost element - if a Node object is provided it creates a clone of that node,\n * otherwise it clones the host element.\n * Bind all needed events.\n * @param pageX Latest pointer position on the X axis relative to the page.\n * @param pageY Latest pointer position on the Y axis relative to the page.\n * @param node The Node object to be cloned.\n */\n createGhost(pageX, pageY, node = null) {\n if (!this.ghost) {\n return;\n }\n if (this.ghostTemplate) {\n this._dynamicGhostRef = this.viewContainer.createEmbeddedView(this.ghostTemplate, this.ghostContext);\n this.ghostElement = this._dynamicGhostRef.rootNodes[0];\n }\n else {\n this.ghostElement = node ? node.cloneNode(true) : this.element.nativeElement.cloneNode(true);\n }\n const totalMovedX = pageX - this._startX;\n const totalMovedY = pageY - this._startY;\n this._ghostHostX = this.ghostHost ? this.ghostHostOffsetLeft(this.ghostHost) : 0;\n this._ghostHostY = this.ghostHost ? this.ghostHostOffsetTop(this.ghostHost) : 0;\n this.ghostElement.style.transitionDuration = '0.0s';\n this.ghostElement.style.position = 'absolute';\n if (this.ghostClass) {\n this.renderer.addClass(this.ghostElement, this.ghostClass);\n }\n const createEventArgs = {\n owner: this,\n ghostElement: this.ghostElement,\n cancel: false\n };\n this.ghostCreate.emit(createEventArgs);\n if (createEventArgs.cancel) {\n this.ghostElement = null;\n if (this.ghostTemplate && this._dynamicGhostRef) {\n this._dynamicGhostRef.destroy();\n }\n return;\n }\n if (this.ghostHost) {\n this.ghostHost.appendChild(this.ghostElement);\n }\n else {\n document.body.appendChild(this.ghostElement);\n }\n const ghostMarginLeft = parseInt(document.defaultView.getComputedStyle(this.ghostElement)['margin-left'], 10);\n const ghostMarginTop = parseInt(document.defaultView.getComputedStyle(this.ghostElement)['margin-top'], 10);\n this.ghostElement.style.left = (this._ghostStartX - ghostMarginLeft + totalMovedX - this._ghostHostX) + 'px';\n this.ghostElement.style.top = (this._ghostStartY - ghostMarginTop + totalMovedY - this._ghostHostY) + 'px';\n if (this.pointerEventsEnabled) {\n // The ghostElement takes control for moving and dragging after it has been rendered.\n if (this._pointerDownId !== null) {\n this.ghostElement.setPointerCapture(this._pointerDownId);\n }\n this.ghostElement.addEventListener('pointermove', (args) => {\n this.onPointerMove(args);\n });\n this.ghostElement.addEventListener('pointerup', (args) => {\n this.onPointerUp(args);\n });\n this.ghostElement.addEventListener('lostpointercapture', (args) => {\n this.onPointerLost(args);\n });\n }\n // Transition animation when the ghostElement is released and it returns to it's original position.\n this.ghostElement.addEventListener('transitionend', (args) => {\n this.onTransitionEnd(args);\n });\n this.cdr.detectChanges();\n }\n /**\n * @hidden\n * Dispatch custom igxDragEnter/igxDragLeave events based on current pointer position and if drop area is under.\n */\n dispatchDragEvents(pageX, pageY, originalEvent) {\n let topDropArea;\n const customEventArgs = {\n startX: this._startX,\n startY: this._startY,\n pageX,\n pageY,\n owner: this,\n originalEvent\n };\n const elementsFromPoint = this.getElementsAtPoint(pageX, pageY);\n let targetElements = [];\n // Check for shadowRoot instance and use it if present\n for (const elFromPoint of elementsFromPoint) {\n if (!!elFromPoint?.shadowRoot) {\n targetElements = targetElements.concat(this.getFromShadowRoot(elFromPoint, pageX, pageY, elementsFromPoint));\n }\n else if (targetElements.indexOf(elFromPoint) === -1) {\n targetElements.push(elFromPoint);\n }\n }\n for (const element of targetElements) {\n if (element.getAttribute('droppable') === 'true' &&\n element !== this.ghostElement && element !== this.element.nativeElement) {\n topDropArea = element;\n break;\n }\n }\n if (topDropArea &&\n (!this._lastDropArea || (this._lastDropArea && this._lastDropArea !== topDropArea))) {\n if (this._lastDropArea) {\n this.dispatchEvent(this._lastDropArea, 'igxDragLeave', customEventArgs);\n }\n this._lastDropArea = topDropArea;\n this.dispatchEvent(this._lastDropArea, 'igxDragEnter', customEventArgs);\n }\n else if (!topDropArea && this._lastDropArea) {\n this.dispatchEvent(this._lastDropArea, 'igxDragLeave', customEventArgs);\n this._lastDropArea = null;\n return;\n }\n if (topDropArea) {\n this.dispatchEvent(topDropArea, 'igxDragOver', customEventArgs);\n }\n }\n /**\n * @hidden\n * Traverse shadow dom in depth.\n */\n getFromShadowRoot(elem, pageX, pageY, parentDomElems) {\n const elementsFromPoint = elem.shadowRoot.elementsFromPoint(pageX, pageY);\n const shadowElements = elementsFromPoint.filter(cur => parentDomElems.indexOf(cur) === -1);\n let res = [];\n for (const elFromPoint of shadowElements) {\n if (!!elFromPoint?.shadowRoot && elFromPoint.shadowRoot !== elem.shadowRoot) {\n res = res.concat(this.getFromShadowRoot(elFromPoint, pageX, pageY, elementsFromPoint));\n }\n res.push(elFromPoint);\n }\n return res;\n }\n /**\n * @hidden\n * Dispatch custom igxDrop event based on current pointer position if there is last recorder drop area under the pointer.\n * Last recorder drop area is updated in @dispatchDragEvents method.\n */\n dispatchDropEvent(pageX, pageY, originalEvent) {\n const eventArgs = {\n startX: this._startX,\n startY: this._startY,\n pageX,\n pageY,\n owner: this,\n originalEvent\n };\n this.dispatchEvent(this._lastDropArea, 'igxDrop', eventArgs);\n this.dispatchEvent(this._lastDropArea, 'igxDragLeave', eventArgs);\n this._lastDropArea = null;\n }\n /**\n * @hidden\n */\n getElementsAtPoint(pageX, pageY) {\n // correct the coordinates with the current scroll position, because\n // document.elementsFromPoint consider position within the current viewport\n // window.pageXOffset == window.scrollX; // always true\n // using window.pageXOffset for IE9 compatibility\n const viewPortX = pageX - window.pageXOffset;\n const viewPortY = pageY - window.pageYOffset;\n if (document['msElementsFromPoint']) {\n // Edge and IE special snowflakes\n const elements = document['msElementsFromPoint'](viewPortX, viewPortY);\n return elements === null ? [] : elements;\n }\n else {\n // Other browsers like Chrome, Firefox, Opera\n return document.elementsFromPoint(viewPortX, viewPortY);\n }\n }\n /**\n * @hidden\n */\n dispatchEvent(target, eventName, eventArgs) {\n // This way is IE11 compatible.\n const dragLeaveEvent = document.createEvent('CustomEvent');\n dragLeaveEvent.initCustomEvent(eventName, false, false, eventArgs);\n target.dispatchEvent(dragLeaveEvent);\n // Otherwise can be used `target.dispatchEvent(new CustomEvent(eventName, eventArgs));`\n }\n getTransformX(elem) {\n let posX = 0;\n if (elem.style.transform) {\n const matrix = elem.style.transform;\n const values = matrix ? matrix.match(/-?[\\d\\.]+/g) : undefined;\n posX = values ? Number(values[1]) : 0;\n }\n return posX;\n }\n getTransformY(elem) {\n let posY = 0;\n if (elem.style.transform) {\n const matrix = elem.style.transform;\n const values = matrix ? matrix.match(/-?[\\d\\.]+/g) : undefined;\n posY = values ? Number(values[2]) : 0;\n }\n return posY;\n }\n /** Method setting transformation to the base draggable element. */\n setTransformXY(x, y) {\n this.element.nativeElement.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0px)';\n }\n ghostHostOffsetLeft(ghostHost) {\n const ghostPosition = document.defaultView.getComputedStyle(ghostHost).getPropertyValue('position');\n if (ghostPosition === 'static' && ghostHost.offsetParent && ghostHost.offsetParent === document.body) {\n return 0;\n }\n else if (ghostPosition === 'static' && ghostHost.offsetParent) {\n return ghostHost.offsetParent.getBoundingClientRect().left - this.windowScrollLeft;\n }\n return ghostHost.getBoundingClientRect().left - this.windowScrollLeft;\n }\n ghostHostOffsetTop(ghostHost) {\n const ghostPosition = document.defaultView.getComputedStyle(ghostHost).getPropertyValue('position');\n if (ghostPosition === 'static' && ghostHost.offsetParent && ghostHost.offsetParent === document.body) {\n return 0;\n }\n else if (ghostPosition === 'static' && ghostHost.offsetParent) {\n return ghostHost.offsetParent.getBoundingClientRect().top - this.windowScrollTop;\n }\n return ghostHost.getBoundingClientRect().top - this.windowScrollTop;\n }\n getContainerScrollDirection() {\n const containerBounds = this.scrollContainer ? this.scrollContainer.getBoundingClientRect() : null;\n const scrolledX = !this.scrollContainer ? this.windowScrollLeft > 0 : this.scrollContainer.scrollLeft > 0;\n const scrolledY = !this.scrollContainer ? this.windowScrollTop > 0 : this.scrollContainer.scrollTop > 0;\n // Take into account window scroll top because we do not use fixed positioning to the window.\n const topBorder = (!this.scrollContainer ? 0 : containerBounds.top) + this.windowScrollTop + this._scrollContainerThreshold;\n // Subtract the element height because we position it from top left corner.\n const elementHeight = this.ghost && this.ghostElement ? this.ghostElement.offsetHeight : this.element.nativeElement.offsetHeight;\n const bottomBorder = (!this.scrollContainer ? window.innerHeight : containerBounds.bottom) +\n this.windowScrollTop - this._scrollContainerThreshold - elementHeight;\n // Same for window scroll left\n const leftBorder = (!this.scrollContainer ? 0 : containerBounds.left) + this.windowScrollLeft + this._scrollContainerThreshold;\n // Subtract the element width again because we position it from top left corner.\n const elementWidth = this.ghost && this.ghostElement ? this.ghostElement.offsetWidth : this.element.nativeElement.offsetWidth;\n const rightBorder = (!this.scrollContainer ? window.innerWidth : containerBounds.right) +\n this.windowScrollLeft - this._scrollContainerThreshold - elementWidth;\n if (this.pageY <= topBorder && scrolledY) {\n return DragScrollDirection$1.UP;\n }\n else if (this.pageY > bottomBorder) {\n return DragScrollDirection$1.DOWN;\n }\n else if (this.pageX < leftBorder && scrolledX) {\n return DragScrollDirection$1.LEFT;\n }\n else if (this.pageX > rightBorder) {\n return DragScrollDirection$1.RIGHT;\n }\n return null;\n }\n onScrollContainerStep(scrollDir) {\n animationFrameScheduler.schedule(() => {\n let xDir = scrollDir == DragScrollDirection$1.LEFT ? -1 : (scrollDir == DragScrollDirection$1.RIGHT ? 1 : 0);\n let yDir = scrollDir == DragScrollDirection$1.UP ? -1 : (scrollDir == DragScrollDirection$1.DOWN ? 1 : 0);\n if (!this.scrollContainer) {\n // Cap scrolling so we don't scroll past the window max scroll position.\n const maxScrollX = this._originalScrollContainerWidth - document.documentElement.clientWidth;\n const maxScrollY = this._originalScrollContainerHeight - document.documentElement.clientHeight;\n xDir = (this.windowScrollLeft <= 0 && xDir < 0) || (this.windowScrollLeft >= maxScrollX && xDir > 0) ? 0 : xDir;\n yDir = (this.windowScrollTop <= 0 && yDir < 0) || (this.windowScrollTop >= maxScrollY && yDir > 0) ? 0 : yDir;\n }\n else {\n // Cap scrolling so we don't scroll past the container max scroll position.\n const maxScrollX = this._originalScrollContainerWidth - this.scrollContainer.clientWidth;\n const maxScrollY = this._originalScrollContainerHeight - this.scrollContainer.clientHeight;\n xDir = (this.scrollContainer.scrollLeft <= 0 && xDir < 0) || (this.scrollContainer.scrollLeft >= maxScrollX && xDir > 0) ? 0 : xDir;\n yDir = (this.scrollContainer.scrollTop <= 0 && yDir < 0) || (this.scrollContainer.scrollTop >= maxScrollY && yDir > 0) ? 0 : yDir;\n }\n const scrollByX = xDir * this._scrollContainerStep;\n const scrollByY = yDir * this._scrollContainerStep;\n // Scroll the corresponding window or container.\n if (!this.scrollContainer) {\n window.scrollBy(scrollByX, scrollByY);\n }\n else {\n this.scrollContainer.scrollLeft += scrollByX;\n this.scrollContainer.scrollTop += scrollByY;\n }\n if (this.ghost && !this.scrollContainer) {\n // Scroll the ghost only when there is no container specifies.\n // If it has container the ghost pretty much stays in the same position while the container is scrolled since e use top/left position.\n // Otherwise increase the position the same amount we have scrolled the window\n this.ghostLeft += scrollByX;\n this.ghostTop += scrollByY;\n }\n else if (!this.ghost) {\n // Move the base element the same amount we moved the window/container because we use transformations.\n const translateX = this.getTransformX(this.element.nativeElement) + scrollByX;\n const translateY = this.getTransformY(this.element.nativeElement) + scrollByY;\n this.setTransformXY(translateX, translateY);\n if (!this.scrollContainer) {\n this._lastX += scrollByX;\n this._lastY += scrollByY;\n }\n }\n });\n }\n onScrollContainer() {\n const scrollDir = this.getContainerScrollDirection();\n if (scrollDir !== null && scrollDir !== undefined && !this._containerScrollIntervalId) {\n // Save original container sizes to ensure that we don't increase scroll sizes infinitely when out of bounds.\n this._originalScrollContainerWidth = this.scrollContainer ? this.scrollContainer.scrollWidth : this.windowScrollWidth;\n this._originalScrollContainerHeight = this.scrollContainer ? this.scrollContainer.scrollHeight : this.windowScrollHeight;\n this._containerScrollIntervalId = setInterval(() => this.onScrollContainerStep(scrollDir), this._scrollContainerStepMs);\n }\n else if ((scrollDir === null || scrollDir === undefined) && this._containerScrollIntervalId) {\n // We moved out of end bounds and there is interval started\n clearInterval(this._containerScrollIntervalId);\n this._containerScrollIntervalId = null;\n }\n }\n}\nIgxDragDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxDragDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Directive });\nIgxDragDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxDragDirective, selector: \"[igxDrag]\", inputs: { data: [\"igxDrag\", \"data\"], dragTolerance: \"dragTolerance\", dragDirection: \"dragDirection\", dragChannel: \"dragChannel\", ghost: \"ghost\", ghostClass: \"ghostClass\", ghostTemplate: \"ghostTemplate\", ghostHost: \"ghostHost\", scrollContainer: \"scrollContainer\", ghostOffsetX: \"ghostOffsetX\", ghostOffsetY: \"ghostOffsetY\" }, outputs: { dragStart: \"dragStart\", dragMove: \"dragMove\", dragEnd: \"dragEnd\", dragClick: \"dragClick\", ghostCreate: \"ghostCreate\", ghostDestroy: \"ghostDestroy\", transitioned: \"transitioned\" }, host: { properties: { \"class.igx-drag\": \"this.baseClass\", \"class.igx-drag--select-disabled\": \"this.selectDisabled\" } }, queries: [{ propertyName: \"dragHandles\", predicate: IgxDragHandleDirective, descendants: true }, { propertyName: \"dragIgnoredElems\", predicate: IgxDragIgnoreDirective, descendants: true }], exportAs: [\"drag\"], ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxDragDirective, decorators: [{\n type: Directive,\n args: [{\n exportAs: 'drag',\n selector: '[igxDrag]'\n }]\n }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: PlatformUtil }]; }, propDecorators: { data: [{\n type: Input,\n args: ['igxDrag']\n }], dragTolerance: [{\n type: Input\n }], dragDirection: [{\n type: Input\n }], dragChannel: [{\n type: Input\n }], ghost: [{\n type: Input\n }], ghostClass: [{\n type: Input\n }], ghostTemplate: [{\n type: Input\n }], ghostHost: [{\n type: Input\n }], scrollContainer: [{\n type: Input\n }], dragStart: [{\n type: Output\n }], dragMove: [{\n type: Output\n }], dragEnd: [{\n type: Output\n }], dragClick: [{\n type: Output\n }], ghostCreate: [{\n type: Output\n }], ghostDestroy: [{\n type: Output\n }], transitioned: [{\n type: Output\n }], dragHandles: [{\n type: ContentChildren,\n args: [IgxDragHandleDirective, { descendants: true }]\n }], dragIgnoredElems: [{\n type: ContentChildren,\n args: [IgxDragIgnoreDirective, { descendants: true }]\n }], baseClass: [{\n type: HostBinding,\n args: ['class.igx-drag']\n }], selectDisabled: [{\n type: HostBinding,\n args: ['class.igx-drag--select-disabled']\n }], ghostOffsetX: [{\n type: Input\n }], ghostOffsetY: [{\n type: Input\n }] } });\nclass IgxDropDirective {\n /**\n * - Save data inside the `igxDrop` directive. This can be set when instancing `igxDrop` on an element.\n * ```html\n * \n * ```\n *\n * @memberof IgxDropDirective\n */\n set data(v) {\n this._data = v;\n }\n get data() {\n return this._data;\n }\n /**\n * An @Input property that specifies a drop strategy type that will be executed when an `IgxDrag` element is released inside\n * the current drop area. The provided strategies are:\n * - IgxDefaultDropStrategy - This is the default base strategy and it doesn't perform any actions.\n * - IgxAppendDropStrategy - Appends the dropped element to last position as a direct child to the `igxDrop`.\n * - IgxPrependDropStrategy - Prepends the dropped element to first position as a direct child to the `igxDrop`.\n * - IgxInsertDropStrategy - If the dropped element is released above a child element of the `igxDrop`, it will be inserted\n * at that position. Otherwise the dropped element will be appended if released outside any child of the `igxDrop`.\n * ```html\n * \n * DragMe\n *
\n * \n * Numbers drop area!\n *
\n * ```\n * ```typescript\n * import { IgxAppendDropStrategy } from 'igniteui-angular';\n *\n * export class App {\n * public myDropStrategy = IgxAppendDropStrategy;\n * }\n * ```\n *\n * @memberof IgxDropDirective\n */\n set dropStrategy(classRef) {\n this._dropStrategy = new classRef(this._renderer);\n }\n get dropStrategy() {\n return this._dropStrategy;\n }\n constructor(element, _renderer, _zone) {\n this.element = element;\n this._renderer = _renderer;\n this._zone = _zone;\n /**\n * Event triggered when dragged element enters the area of the element.\n * ```html\n * \n *
\n * ```\n * ```typescript\n * public dragEnter(){\n * alert(\"A draggable element has entered the chip area!\");\n * }\n * ```\n *\n * @memberof IgxDropDirective\n */\n this.enter = new EventEmitter();\n /**\n * Event triggered when dragged element enters the area of the element.\n * ```html\n * \n *
\n * ```\n * ```typescript\n * public dragEnter(){\n * alert(\"A draggable element has entered the chip area!\");\n * }\n * ```\n *\n * @memberof IgxDropDirective\n */\n this.over = new EventEmitter();\n /**\n * Event triggered when dragged element leaves the area of the element.\n * ```html\n * \n *
\n * ```\n * ```typescript\n * public dragLeave(){\n * alert(\"A draggable element has left the chip area!\");\n * }\n * ```\n *\n * @memberof IgxDropDirective\n */\n this.leave = new EventEmitter();\n /**\n * Event triggered when dragged element is dropped in the area of the element.\n * Since the `igxDrop` has default logic that appends the dropped element as a child, it can be canceled here.\n * To cancel the default logic the `cancel` property of the event needs to be set to true.\n * ```html\n * \n *
\n * ```\n * ```typescript\n * public dragDrop(){\n * alert(\"A draggable element has been dropped in the chip area!\");\n * }\n * ```\n *\n * @memberof IgxDropDirective\n */\n this.dropped = new EventEmitter();\n /**\n * @hidden\n */\n this.droppable = true;\n /**\n * @hidden\n */\n this.dragover = false;\n /**\n * @hidden\n */\n this._destroy = new Subject();\n this._dropStrategy = new IgxDefaultDropStrategy();\n }\n /**\n * @hidden\n */\n onDragDrop(event) {\n if (!this.isDragLinked(event.detail.owner)) {\n return;\n }\n const elementPosX = this.element.nativeElement.getBoundingClientRect().left + this.getWindowScrollLeft();\n const elementPosY = this.element.nativeElement.getBoundingClientRect().top + this.getWindowScrollTop();\n const offsetX = event.detail.pageX - elementPosX;\n const offsetY = event.detail.pageY - elementPosY;\n const args = {\n owner: this,\n originalEvent: event.detail.originalEvent,\n drag: event.detail.owner,\n dragData: event.detail.owner.data,\n startX: event.detail.startX,\n startY: event.detail.startY,\n pageX: event.detail.pageX,\n pageY: event.detail.pageY,\n offsetX,\n offsetY,\n cancel: false\n };\n this._zone.run(() => {\n this.dropped.emit(args);\n });\n if (this._dropStrategy && !args.cancel) {\n const elementsAtPoint = event.detail.owner.getElementsAtPoint(event.detail.pageX, event.detail.pageY);\n const insertIndex = this.getInsertIndexAt(event.detail.owner, elementsAtPoint);\n this._dropStrategy.dropAction(event.detail.owner, this, insertIndex);\n }\n }\n /**\n * @hidden\n */\n ngOnInit() {\n this._zone.runOutsideAngular(() => {\n fromEvent(this.element.nativeElement, 'igxDragEnter').pipe(takeUntil(this._destroy))\n .subscribe((res) => this.onDragEnter(res));\n fromEvent(this.element.nativeElement, 'igxDragLeave').pipe(takeUntil(this._destroy)).subscribe((res) => this.onDragLeave(res));\n fromEvent(this.element.nativeElement, 'igxDragOver').pipe(takeUntil(this._destroy)).subscribe((res) => this.onDragOver(res));\n });\n }\n /**\n * @hidden\n */\n ngOnDestroy() {\n this._destroy.next(true);\n this._destroy.complete();\n }\n /**\n * @hidden\n */\n onDragOver(event) {\n const elementPosX = this.element.nativeElement.getBoundingClientRect().left + this.getWindowScrollLeft();\n const elementPosY = this.element.nativeElement.getBoundingClientRect().top + this.getWindowScrollTop();\n const offsetX = event.detail.pageX - elementPosX;\n const offsetY = event.detail.pageY - elementPosY;\n const eventArgs = {\n originalEvent: event.detail.originalEvent,\n owner: this,\n drag: event.detail.owner,\n dragData: event.detail.owner.data,\n startX: event.detail.startX,\n startY: event.detail.startY,\n pageX: event.detail.pageX,\n pageY: event.detail.pageY,\n offsetX,\n offsetY\n };\n this.over.emit(eventArgs);\n }\n /**\n * @hidden\n */\n onDragEnter(event) {\n if (!this.isDragLinked(event.detail.owner)) {\n return;\n }\n this.dragover = true;\n const elementPosX = this.element.nativeElement.getBoundingClientRect().left + this.getWindowScrollLeft();\n const elementPosY = this.element.nativeElement.getBoundingClientRect().top + this.getWindowScrollTop();\n const offsetX = event.detail.pageX - elementPosX;\n const offsetY = event.detail.pageY - elementPosY;\n const eventArgs = {\n originalEvent: event.detail.originalEvent,\n owner: this,\n drag: event.detail.owner,\n dragData: event.detail.owner.data,\n startX: event.detail.startX,\n startY: event.detail.startY,\n pageX: event.detail.pageX,\n pageY: event.detail.pageY,\n offsetX,\n offsetY\n };\n this._zone.run(() => {\n this.enter.emit(eventArgs);\n });\n }\n /**\n * @hidden\n */\n onDragLeave(event) {\n if (!this.isDragLinked(event.detail.owner)) {\n return;\n }\n this.dragover = false;\n const elementPosX = this.element.nativeElement.getBoundingClientRect().left + this.getWindowScrollLeft();\n const elementPosY = this.element.nativeElement.getBoundingClientRect().top + this.getWindowScrollTop();\n const offsetX = event.detail.pageX - elementPosX;\n const offsetY = event.detail.pageY - elementPosY;\n const eventArgs = {\n originalEvent: event.detail.originalEvent,\n owner: this,\n drag: event.detail.owner,\n dragData: event.detail.owner.data,\n startX: event.detail.startX,\n startY: event.detail.startY,\n pageX: event.detail.pageX,\n pageY: event.detail.pageY,\n offsetX,\n offsetY\n };\n this._zone.run(() => {\n this.leave.emit(eventArgs);\n });\n }\n getWindowScrollTop() {\n return window.scrollY ? window.scrollY : (window.pageYOffset ? window.pageYOffset : 0);\n }\n getWindowScrollLeft() {\n return window.scrollX ? window.scrollX : (window.pageXOffset ? window.pageXOffset : 0);\n }\n isDragLinked(drag) {\n const dragLinkArray = drag.dragChannel instanceof Array;\n const dropLinkArray = this.dropChannel instanceof Array;\n if (!dragLinkArray && !dropLinkArray) {\n return this.dropChannel === drag.dragChannel;\n }\n else if (!dragLinkArray && dropLinkArray) {\n const dropLinks = this.dropChannel;\n for (const link of dropLinks) {\n if (link === drag.dragChannel) {\n return true;\n }\n }\n }\n else if (dragLinkArray && !dropLinkArray) {\n const dragLinks = drag.dragChannel;\n for (const link of dragLinks) {\n if (link === this.dropChannel) {\n return true;\n }\n }\n }\n else {\n const dragLinks = drag.dragChannel;\n const dropLinks = this.dropChannel;\n for (const draglink of dragLinks) {\n for (const droplink of dropLinks) {\n if (draglink === droplink) {\n return true;\n }\n }\n }\n }\n return false;\n }\n getInsertIndexAt(draggedDir, elementsAtPoint) {\n let insertIndex = -1;\n const dropChildren = Array.prototype.slice.call(this.element.nativeElement.children);\n if (!dropChildren.length) {\n return insertIndex;\n }\n let i = 0;\n let childUnder = null;\n while (!childUnder && i < elementsAtPoint.length) {\n if (elementsAtPoint[i].parentElement === this.element.nativeElement) {\n childUnder = elementsAtPoint[i];\n }\n i++;\n }\n const draggedElemIndex = dropChildren.indexOf(draggedDir.element.nativeElement);\n insertIndex = dropChildren.indexOf(childUnder);\n if (draggedElemIndex !== -1 && draggedElemIndex < insertIndex) {\n insertIndex++;\n }\n return insertIndex;\n }\n}\nIgxDropDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxDropDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });\nIgxDropDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxDropDirective, selector: \"[igxDrop]\", inputs: { data: [\"igxDrop\", \"data\"], dropChannel: \"dropChannel\", dropStrategy: \"dropStrategy\" }, outputs: { enter: \"enter\", over: \"over\", leave: \"leave\", dropped: \"dropped\" }, host: { listeners: { \"igxDrop\": \"onDragDrop($event)\" }, properties: { \"attr.droppable\": \"this.droppable\", \"class.dragOver\": \"this.dragover\" } }, exportAs: [\"drop\"], ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxDropDirective, decorators: [{\n type: Directive,\n args: [{\n exportAs: 'drop',\n selector: '[igxDrop]'\n }]\n }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { data: [{\n type: Input,\n args: ['igxDrop']\n }], dropChannel: [{\n type: Input\n }], dropStrategy: [{\n type: Input\n }], enter: [{\n type: Output\n }], over: [{\n type: Output\n }], leave: [{\n type: Output\n }], dropped: [{\n type: Output\n }], droppable: [{\n type: HostBinding,\n args: ['attr.droppable']\n }], dragover: [{\n type: HostBinding,\n args: ['class.dragOver']\n }], onDragDrop: [{\n type: HostListener,\n args: ['igxDrop', ['$event']]\n }] } });\n/**\n * @hidden\n */\nclass IgxDragDropModule {\n}\nIgxDragDropModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxDragDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });\nIgxDragDropModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: \"14.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxDragDropModule, declarations: [IgxDragDirective, IgxDropDirective, IgxDragHandleDirective, IgxDragIgnoreDirective], exports: [IgxDragDirective, IgxDropDirective, IgxDragHandleDirective, IgxDragIgnoreDirective] });\nIgxDragDropModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxDragDropModule });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxDragDropModule, decorators: [{\n type: NgModule,\n args: [{\n declarations: [IgxDragDirective, IgxDropDirective, IgxDragHandleDirective, IgxDragIgnoreDirective],\n exports: [IgxDragDirective, IgxDropDirective, IgxDragHandleDirective, IgxDragIgnoreDirective]\n }]\n }] });\n\nclass IgxFilterOptions {\n constructor() {\n // Input text value that will be used as a filtering pattern (matching condition is based on it)\n this.inputValue = '';\n }\n // Function - get value to be tested from the item\n // item - single item of the list to be filtered\n // key - property name of item, which value should be tested\n // Default behavior - returns \"key\"- named property value of item if key is provided,\n // otherwise textContent of the item's html element\n get_value(item, key) {\n let result = '';\n if (key && item[key]) {\n result = item[key].toString();\n }\n else if (item.element) {\n if (item.element.nativeElement) {\n result = item.element.nativeElement.textContent.trim();\n // Check if element doesn't return the DOM element directly\n }\n else if (item.element.textContent) {\n result = item.element.textContent.trim();\n }\n }\n return result;\n }\n // Function - formats the original text before matching process\n // Default behavior - returns text to lower case\n formatter(valueToTest) {\n return valueToTest.toLowerCase();\n }\n // Function - determines whether the item met the condition\n // valueToTest - text value that should be tested\n // inputValue - text value from input that condition is based on\n // Default behavior - \"contains\"\n matchFn(valueToTest, inputValue) {\n return valueToTest.indexOf(inputValue && inputValue.toLowerCase() || '') > -1;\n }\n // Function - executed after matching test for every matched item\n // Default behavior - shows the item\n metConditionFn(item) {\n if (item.hasOwnProperty('hidden')) {\n item.hidden = false;\n }\n }\n // Function - executed for every NOT matched item after matching test\n // Default behavior - hides the item\n overdueConditionFn(item) {\n if (item.hasOwnProperty('hidden')) {\n item.hidden = true;\n }\n }\n}\nclass IgxFilterDirective {\n constructor(element) {\n this.element = element;\n this.filtering = new EventEmitter(false); // synchronous event emitter\n this.filtered = new EventEmitter();\n }\n ngOnChanges(changes) {\n // Detect only changes of input value\n if (changes.filterOptions &&\n changes.filterOptions.currentValue &&\n changes.filterOptions.currentValue.inputValue !== undefined &&\n changes.filterOptions.previousValue &&\n changes.filterOptions.currentValue.inputValue !== changes.filterOptions.previousValue.inputValue) {\n this.filter();\n }\n }\n filter() {\n if (!this.filterOptions.items) {\n return;\n }\n const args = { cancel: false, items: this.filterOptions.items };\n this.filtering.emit(args);\n if (args.cancel) {\n return;\n }\n const pipe = new IgxFilterPipe();\n const filtered = pipe.transform(this.filterOptions.items, this.filterOptions);\n this.filtered.emit({ filteredItems: filtered });\n }\n}\nIgxFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxFilterDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });\nIgxFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxFilterDirective, selector: \"[igxFilter]\", inputs: { filterOptions: [\"igxFilter\", \"filterOptions\"] }, outputs: { filtering: \"filtering\", filtered: \"filtered\" }, usesOnChanges: true, ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxFilterDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxFilter]'\n }]\n }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { filtering: [{\n type: Output\n }], filtered: [{\n type: Output\n }], filterOptions: [{\n type: Input,\n args: ['igxFilter']\n }] } });\nclass IgxFilterPipe {\n findMatchByKey(item, options, key) {\n const match = options.matchFn(options.formatter(options.get_value(item, key)), options.inputValue);\n if (match) {\n if (options.metConditionFn) {\n options.metConditionFn(item);\n }\n }\n else {\n if (options.overdueConditionFn) {\n options.overdueConditionFn(item);\n }\n }\n return match;\n }\n transform(items, \n // options - initial settings of filter functionality\n options) {\n let result = [];\n if (!items || !items.length || !options) {\n return;\n }\n if (options.items) {\n items = options.items;\n }\n result = items.filter((item) => {\n if (!Array.isArray(options.key)) {\n return this.findMatchByKey(item, options, options.key);\n }\n else {\n let isMatch = false;\n options.key.forEach(key => {\n if (this.findMatchByKey(item, options, key)) {\n isMatch = true;\n }\n });\n return isMatch;\n }\n });\n return result;\n }\n}\nIgxFilterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });\nIgxFilterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: \"14.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxFilterPipe, name: \"igxFilter\", pure: false });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxFilterPipe, decorators: [{\n type: Pipe,\n args: [{\n name: 'igxFilter',\n pure: false\n }]\n }] });\n/**\n * @hidden\n */\nclass IgxFilterModule {\n}\nIgxFilterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });\nIgxFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: \"14.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxFilterModule, declarations: [IgxFilterDirective, IgxFilterPipe], imports: [CommonModule], exports: [IgxFilterDirective, IgxFilterPipe] });\nIgxFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxFilterModule, imports: [CommonModule] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxFilterModule, decorators: [{\n type: NgModule,\n args: [{\n declarations: [IgxFilterDirective, IgxFilterPipe],\n exports: [IgxFilterDirective, IgxFilterPipe],\n imports: [CommonModule]\n }]\n }] });\n\n/**\n * Injection token is used to inject the EditorProvider token into components\n *\n * @hidden @internal\n */\nconst EDITOR_PROVIDER = new InjectionToken('EditorProvider');\n\nclass IgxFocusDirective {\n /**\n * Returns the state of the igxFocus.\n * ```typescript\n * @ViewChild('focusContainer', {read: IgxFocusDirective})\n * public igxFocus: IgxFocusDirective;\n * let isFocusOn = this.igxFocus.focused;\n * ```\n *\n * @memberof IgxFocusDirective\n */\n get focused() {\n return this.focusState;\n }\n /**\n * Sets the state of the igxFocus.\n * ```html\n * 1
\n * 2
\n * 3
\n * \n * ```\n */\n this.dir = 'row';\n /**\n * Defines the direction flex children are placed in the flex container.\n *\n * When set to `true`, the `rows` direction goes right to left and `columns` goes bottom to top.\n *\n * ```html\n * 1
\n * 2
\n * 3
\n * \n * ```\n */\n this.reverse = false;\n /**\n * By default the immediate children will all try to fit onto one line.\n *\n * The default value `nowrap` sets this behavior.\n *\n * Other accepted values are `wrap` and `wrap-reverse`.\n *\n * ```html\n * 1
\n * 2
\n * 3
\n * \n * ```\n */\n this.wrap = 'nowrap';\n /**\n * Defines the alignment along the main axis.\n *\n * Defaults to `flex-start` which packs the children toward the start line.\n *\n * Other possible values are `flex-end`, `center`, `space-between`, `space-around`.\n *\n * ```html\n * 1
\n * 2
\n * 3
\n * \n * ```\n */\n this.justify = 'flex-start';\n /**\n * Defines the default behavior for how children are laid out along the corss axis of the current line.\n *\n * Defaults to `flex-start`.\n *\n * Other possible values are `flex-end`, `center`, `baseline`, and `stretch`.\n *\n * ```html\n * 1
\n * 2
\n * 3
\n * \n * ```\n */\n this.itemAlign = 'stretch';\n /**\n * @hidden\n */\n this.display = 'flex';\n }\n /**\n * @hidden\n */\n get flexwrap() {\n return this.wrap;\n }\n /**\n * @hidden\n */\n get justifycontent() {\n return this.justify;\n }\n /**\n * @hidden\n */\n get align() {\n return this.itemAlign;\n }\n /**\n * @hidden\n */\n get direction() {\n if (this.reverse) {\n return (this.dir === 'row') ? 'row-reverse' : 'column-reverse';\n }\n return (this.dir === 'row') ? 'row' : 'column';\n }\n}\nIgxLayoutDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxLayoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });\nIgxLayoutDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxLayoutDirective, selector: \"[igxLayout]\", inputs: { dir: [\"igxLayoutDir\", \"dir\"], reverse: [\"igxLayoutReverse\", \"reverse\"], wrap: [\"igxLayoutWrap\", \"wrap\"], justify: [\"igxLayoutJustify\", \"justify\"], itemAlign: [\"igxLayoutItemAlign\", \"itemAlign\"] }, host: { properties: { \"style.display\": \"this.display\", \"style.flex-wrap\": \"this.flexwrap\", \"style.justify-content\": \"this.justifycontent\", \"style.align-items\": \"this.align\", \"style.flex-direction\": \"this.direction\" } }, ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxLayoutDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxLayout]'\n }]\n }], propDecorators: { dir: [{\n type: Input,\n args: ['igxLayoutDir']\n }], reverse: [{\n type: Input,\n args: ['igxLayoutReverse']\n }], wrap: [{\n type: Input,\n args: ['igxLayoutWrap']\n }], justify: [{\n type: Input,\n args: ['igxLayoutJustify']\n }], itemAlign: [{\n type: Input,\n args: ['igxLayoutItemAlign']\n }], display: [{\n type: HostBinding,\n args: ['style.display']\n }], flexwrap: [{\n type: HostBinding,\n args: ['style.flex-wrap']\n }], justifycontent: [{\n type: HostBinding,\n args: ['style.justify-content']\n }], align: [{\n type: HostBinding,\n args: ['style.align-items']\n }], direction: [{\n type: HostBinding,\n args: ['style.flex-direction']\n }] } });\nclass IgxFlexDirective {\n constructor() {\n /**\n * Applies the `grow` attribute to an element that uses the directive.\n *\n * Default value is `1`.\n *\n * ```html\n * \n *
\n * ```\n */\n this.grow = 1;\n /**\n * Applies the `shrink` attribute to an element that uses the directive.\n *\n * Default value is `1`.\n *\n * ```html\n * Content1
\n * Content2
\n * Content3
\n * \n *
\n * ```\n */\n this.shrink = 1;\n /**\n * Applies the directive to an element.\n *\n * Possible values include `igxFlexGrow`, `igxFlexShrink`, `igxFlexOrder`, `igxFlexBasis`.\n *\n * ```html\n * Content1
\n * Content2
\n * Content3
\n * Content
\n * ```\n */\n this.flex = '';\n /**\n * Applies the `order` attribute to an element that uses the directive.\n *\n * Default value is `0`.\n *\n * ```html\n * \n *
\n * ```\n */\n this.order = 0;\n /**\n * Applies the `flex-basis` attribute to an element that uses the directive.\n *\n * Default value is `auto`.\n *\n * Other possible values include `content`, `max-content`, `min-content`, `fit-content`.\n *\n * ```html\n * Content1
\n * Content2
\n * Content3
\n * Content
\n * ```\n */\n this.basis = 'auto';\n }\n /**\n * @hidden\n */\n get style() {\n if (this.flex) {\n return `${this.flex}`;\n }\n return `${this.grow} ${this.shrink} ${this.basis}`;\n }\n /**\n * @hidden\n */\n get itemorder() {\n return this.order || 0;\n }\n}\nIgxFlexDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxFlexDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });\nIgxFlexDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxFlexDirective, selector: \"[igxFlex]\", inputs: { grow: [\"igxFlexGrow\", \"grow\"], shrink: [\"igxFlexShrink\", \"shrink\"], flex: [\"igxFlex\", \"flex\"], order: [\"igxFlexOrder\", \"order\"], basis: [\"igxFlexBasis\", \"basis\"] }, host: { properties: { \"style.flex\": \"this.style\", \"style.order\": \"this.itemorder\" } }, ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxFlexDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxFlex]'\n }]\n }], propDecorators: { grow: [{\n type: Input,\n args: ['igxFlexGrow']\n }], shrink: [{\n type: Input,\n args: ['igxFlexShrink']\n }], flex: [{\n type: Input,\n args: ['igxFlex']\n }], order: [{\n type: Input,\n args: ['igxFlexOrder']\n }], basis: [{\n type: Input,\n args: ['igxFlexBasis']\n }], style: [{\n type: HostBinding,\n args: ['style.flex']\n }], itemorder: [{\n type: HostBinding,\n args: ['style.order']\n }] } });\n/**\n * @hidden\n */\nclass IgxLayoutModule {\n}\nIgxLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });\nIgxLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: \"14.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxLayoutModule, declarations: [IgxFlexDirective, IgxLayoutDirective], exports: [IgxFlexDirective, IgxLayoutDirective] });\nIgxLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxLayoutModule });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxLayoutModule, decorators: [{\n type: NgModule,\n args: [{\n declarations: [IgxFlexDirective, IgxLayoutDirective],\n exports: [IgxFlexDirective, IgxLayoutDirective]\n }]\n }] });\n\nconst FLAGS = new Set('aACL09#&?');\nconst REGEX = new Map([\n ['C', /(?!^$)/u],\n ['&', /[^\\p{Separator}]/u],\n ['a', /[\\p{Letter}\\d\\p{Separator}]/u],\n ['A', /[\\p{Letter}\\d]/u],\n ['?', /[\\p{Letter}\\p{Separator}]/u],\n ['L', /\\p{Letter}/u],\n ['0', /\\d/],\n ['9', /[\\d\\p{Separator}]/u],\n ['#', /[\\d\\-+]/], // Numeric and sign\n]);\n;\nconst replaceCharAt = (string, idx, char) => `${string.substring(0, idx)}${char}${string.substring(idx + 1)}`;\nfunction parseMask(format) {\n const literals = new Map();\n let mask = format;\n for (let i = 0, j = 0; i < format.length; i++, j++) {\n const [current, next] = [format.charAt(i), format.charAt(i + 1)];\n if (current === '\\\\' && FLAGS.has(next)) {\n mask = replaceCharAt(mask, j, '');\n literals.set(j, next);\n i++;\n }\n else {\n if (!FLAGS.has(current)) {\n literals.set(j, current);\n }\n }\n }\n return { literals, mask };\n}\n/** @hidden */\nclass MaskParsingService {\n applyMask(inputVal, maskOptions, pos = 0) {\n let outputVal = '';\n let value = '';\n const { literals, mask } = parseMask(maskOptions.format);\n const literalKeys = Array.from(literals.keys());\n const nonLiteralIndices = this.getNonLiteralIndices(mask, literalKeys);\n const literalValues = Array.from(literals.values());\n if (inputVal != null) {\n value = inputVal.toString();\n }\n for (const _maskSym of mask) {\n outputVal += maskOptions.promptChar;\n }\n literals.forEach((val, key) => {\n outputVal = replaceCharAt(outputVal, key, val);\n });\n if (!value) {\n return outputVal;\n }\n const nonLiteralValues = this.getNonLiteralValues(value, literalValues);\n for (let i = 0; i < nonLiteralValues.length; i++) {\n const char = nonLiteralValues[i];\n const isCharValid = this.validateCharOnPosition(char, nonLiteralIndices[i], mask);\n if (!isCharValid && char !== maskOptions.promptChar) {\n nonLiteralValues[i] = maskOptions.promptChar;\n }\n }\n if (nonLiteralValues.length > nonLiteralIndices.length) {\n nonLiteralValues.splice(nonLiteralIndices.length);\n }\n for (const nonLiteralValue of nonLiteralValues) {\n const char = nonLiteralValue;\n outputVal = replaceCharAt(outputVal, nonLiteralIndices[pos++], char);\n }\n return outputVal;\n }\n parseValueFromMask(maskedValue, maskOptions) {\n let outputVal = '';\n const literalValues = Array.from(parseMask(maskOptions.format).literals.values());\n for (const val of maskedValue) {\n if (literalValues.indexOf(val) === -1) {\n if (val !== maskOptions.promptChar) {\n outputVal += val;\n }\n }\n }\n return outputVal;\n }\n replaceInMask(maskedValue, value, maskOptions, start, end) {\n const { literals, mask } = parseMask(maskOptions.format);\n const literalsPositions = Array.from(literals.keys());\n value = this.replaceIMENumbers(value);\n const chars = Array.from(value);\n let cursor = start;\n end = Math.min(end, maskedValue.length);\n let initialMaskedValue = maskedValue;\n for (let i = start; i < end || (chars.length && i < maskedValue.length); i++) {\n if (literalsPositions.indexOf(i) !== -1) {\n if (chars[0] === maskedValue[i]) {\n cursor = i + 1;\n chars.shift();\n }\n continue;\n }\n if (chars[0]\n && !this.validateCharOnPosition(chars[0], i, mask)\n && chars[0] !== maskOptions.promptChar) {\n break;\n }\n let char = maskOptions.promptChar;\n if (chars.length) {\n cursor = i + 1;\n char = chars.shift();\n }\n maskedValue = replaceCharAt(maskedValue, i, char);\n }\n if (value.length <= 1) {\n let isDelete = false;\n cursor = start;\n for (let i = 0; i < literalsPositions.length; i++) {\n if (value === '') {\n // on `delete` the cursor should move forward\n cursor = Math.max(cursor, end);\n isDelete = true;\n }\n else if (cursor === literalsPositions[i]) {\n cursor = literalsPositions[i] + 1;\n }\n }\n if (!isDelete && initialMaskedValue !== maskedValue) {\n cursor++;\n }\n }\n return { value: maskedValue, end: cursor };\n }\n /** Validates only non literal positions. */\n validateCharOnPosition(inputChar, position, mask) {\n const regex = REGEX.get(mask.charAt(position));\n return regex ? regex.test(inputChar) : false;\n }\n getNonLiteralIndices(mask, literalKeys) {\n const nonLiteralsIndices = new Array();\n for (let i = 0; i < mask.length; i++) {\n if (literalKeys.indexOf(i) === -1) {\n nonLiteralsIndices.push(i);\n }\n }\n return nonLiteralsIndices;\n }\n getNonLiteralValues(value, literalValues) {\n const nonLiteralValues = new Array();\n for (const val of value) {\n if (literalValues.indexOf(val) === -1) {\n nonLiteralValues.push(val);\n }\n }\n return nonLiteralValues;\n }\n replaceIMENumbers(value) {\n return value.replace(/[０１２３４５６７８９]/g, (num) => ({\n '１': '1', '２': '2', '３': '3', '４': '4', '５': '5',\n '６': '6', '７': '7', '８': '8', '９': '9', '０': '0'\n }[num]));\n }\n}\nMaskParsingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: MaskParsingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });\nMaskParsingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: MaskParsingService, providedIn: 'root' });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: MaskParsingService, decorators: [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }] });\n\nclass IgxMaskDirective {\n /**\n * Sets the input mask.\n * ```html\n * \n * ```\n */\n get mask() {\n return this._mask || this.defaultMask;\n }\n set mask(val) {\n // B.P. 9th June 2021 #7490\n if (val !== this._mask) {\n const cleanInputValue = this.maskParser.parseValueFromMask(this.inputValue, this.maskOptions);\n this.setPlaceholder(val);\n this._mask = val;\n this.updateInputValue(cleanInputValue);\n }\n }\n /** @hidden */\n get nativeElement() {\n return this.elementRef.nativeElement;\n }\n /** @hidden @internal; */\n get inputValue() {\n return this.nativeElement.value;\n }\n /** @hidden @internal */\n set inputValue(val) {\n this.nativeElement.value = val;\n }\n /** @hidden */\n get maskOptions() {\n const format = this.mask || this.defaultMask;\n const promptChar = this.promptChar && this.promptChar.substring(0, 1);\n return { format, promptChar };\n }\n /** @hidden */\n get selectionStart() {\n // Edge(classic) and FF don't select text on drop\n return this.nativeElement.selectionStart === this.nativeElement.selectionEnd && this._hasDropAction ?\n this.nativeElement.selectionEnd - this._droppedData.length :\n this.nativeElement.selectionStart;\n }\n /** @hidden */\n get selectionEnd() {\n return this.nativeElement.selectionEnd;\n }\n /** @hidden */\n get start() {\n return this._start;\n }\n /** @hidden */\n get end() {\n return this._end;\n }\n constructor(elementRef, maskParser, renderer, platform) {\n this.elementRef = elementRef;\n this.maskParser = maskParser;\n this.renderer = renderer;\n this.platform = platform;\n /**\n * Sets the character representing a fillable spot in the input mask.\n * Default value is \"'_'\".\n * ```html\n * \n * ```\n */\n this.promptChar = '_';\n /**\n * Emits an event each time the value changes.\n * Provides `rawValue: string` and `formattedValue: string` as event arguments.\n * ```html\n * \n * ```\n */\n this.valueChanged = new EventEmitter();\n this._end = 0;\n this._start = 0;\n this._oldText = '';\n this._dataValue = '';\n this._focused = false;\n this.defaultMask = 'CCCCCCCCCC';\n this._onTouchedCallback = noop;\n this._onChangeCallback = noop;\n }\n /** @hidden */\n onKeyDown(event) {\n const key = event.key;\n if (!key) {\n return;\n }\n if ((event.ctrlKey && (key === this.platform.KEYMAP.Z || key === this.platform.KEYMAP.Y))) {\n event.preventDefault();\n }\n this._key = key;\n this._start = this.selectionStart;\n this._end = this.selectionEnd;\n }\n /** @hidden @internal */\n onCompositionStart() {\n if (!this._composing) {\n this._compositionStartIndex = this._start;\n this._composing = true;\n }\n }\n /** @hidden @internal */\n onCompositionEnd() {\n this._start = this._compositionStartIndex;\n const end = this.selectionEnd;\n const valueToParse = this.inputValue.substring(this._start, end);\n this.updateInput(valueToParse);\n this._end = this.selectionEnd;\n this._compositionValue = this.inputValue;\n }\n /** @hidden @internal */\n onInputChanged(event) {\n /**\n * '!this._focused' is a fix for #8165\n * On page load IE triggers input events before focus events and\n * it does so for every single input on the page.\n * The mask needs to be prevented from doing anything while this is happening because\n * the end user will be unable to blur the input.\n * https://stackoverflow.com/questions/21406138/input-event-triggered-on-internet-explorer-when-placeholder-changed\n */\n if (this._composing) {\n if (this.inputValue.length < this._oldText.length) {\n // software keyboard input delete\n this._key = this.platform.KEYMAP.BACKSPACE;\n }\n return;\n }\n // After the compositionend event Chromium triggers input events of type 'deleteContentBackward' and\n // we need to adjust the start and end indexes to include mask literals\n if (event.inputType === 'deleteContentBackward' && this._key !== this.platform.KEYMAP.BACKSPACE) {\n const isInputComplete = this._compositionStartIndex === 0 && this._end === this.mask.length;\n let numberOfMaskLiterals = 0;\n const literalPos = parseMask(this.maskOptions.format).literals.keys();\n for (const index of literalPos) {\n if (index >= this._compositionStartIndex && index <= this._end) {\n numberOfMaskLiterals++;\n }\n }\n this.inputValue = isInputComplete ?\n this.inputValue.substring(0, this.selectionEnd - numberOfMaskLiterals) + this.inputValue.substring(this.selectionEnd)\n : this._compositionValue?.substring(0, this._compositionStartIndex) || this.inputValue;\n if (this._compositionValue) {\n this._start = this.selectionStart;\n this._end = this.selectionEnd;\n this.nativeElement.selectionStart = isInputComplete ? this._start - numberOfMaskLiterals : this._compositionStartIndex;\n this.nativeElement.selectionEnd = this._end - numberOfMaskLiterals;\n this.nativeElement.selectionEnd = this._end;\n this._start = this.selectionStart;\n this._end = this.selectionEnd;\n }\n }\n if (this._hasDropAction) {\n this._start = this.selectionStart;\n }\n let valueToParse = '';\n switch (this._key) {\n case this.platform.KEYMAP.DELETE:\n this._end = this._start === this._end ? ++this._end : this._end;\n break;\n case this.platform.KEYMAP.BACKSPACE:\n this._start = this.selectionStart;\n break;\n default:\n valueToParse = this.inputValue.substring(this._start, this.selectionEnd);\n break;\n }\n this.updateInput(valueToParse);\n }\n /** @hidden */\n onPaste() {\n this._oldText = this.inputValue;\n this._start = this.selectionStart;\n }\n /** @hidden */\n onFocus() {\n if (this.nativeElement.readOnly) {\n return;\n }\n this._focused = true;\n this.showMask(this.inputValue);\n }\n /** @hidden */\n onBlur(value) {\n this._focused = false;\n this.showDisplayValue(value);\n this._onTouchedCallback();\n }\n /** @hidden */\n onDragEnter() {\n if (!this._focused && !this._dataValue) {\n this.showMask(this._dataValue);\n }\n }\n /** @hidden */\n onDragLeave() {\n if (!this._focused) {\n this.showDisplayValue(this.inputValue);\n }\n }\n /** @hidden */\n onDrop(event) {\n this._hasDropAction = true;\n this._droppedData = event.dataTransfer.getData('text');\n }\n /** @hidden */\n ngOnInit() {\n this.setPlaceholder(this.maskOptions.format);\n }\n /**\n * TODO: Remove after date/time picker integration refactor\n *\n * @hidden\n */\n ngAfterViewChecked() {\n if (this._composing) {\n return;\n }\n this._oldText = this.inputValue;\n }\n /** @hidden */\n writeValue(value) {\n if (this.promptChar && this.promptChar.length > 1) {\n this.maskOptions.promptChar = this.promptChar.substring(0, 1);\n }\n this.inputValue = value ? this.maskParser.applyMask(value, this.maskOptions) : '';\n if (this.displayValuePipe) {\n this.inputValue = this.displayValuePipe.transform(this.inputValue);\n }\n this._dataValue = this.includeLiterals ? this.inputValue : value;\n this.valueChanged.emit({ rawValue: value, formattedValue: this.inputValue });\n }\n /** @hidden */\n registerOnChange(fn) {\n this._onChangeCallback = fn;\n }\n /** @hidden */\n registerOnTouched(fn) {\n this._onTouchedCallback = fn;\n }\n /** @hidden */\n showMask(value) {\n if (this.focusedValuePipe) {\n // TODO(D.P.): focusedValuePipe should be deprecated or force-checked to match mask format\n this.inputValue = this.focusedValuePipe.transform(value);\n }\n else {\n this.inputValue = this.maskParser.applyMask(value, this.maskOptions);\n }\n this._oldText = this.inputValue;\n }\n /** @hidden */\n setSelectionRange(start, end = start) {\n this.nativeElement.setSelectionRange(start, end);\n }\n /** @hidden */\n afterInput() {\n this._oldText = this.inputValue;\n this._hasDropAction = false;\n this._start = 0;\n this._end = 0;\n this._key = null;\n this._composing = false;\n }\n /** @hidden */\n setPlaceholder(value) {\n const placeholder = this.nativeElement.placeholder;\n if (!placeholder || placeholder === this.mask) {\n this.renderer.setAttribute(this.nativeElement, 'placeholder', parseMask(value ?? '').mask || this.defaultMask);\n }\n }\n updateInputValue(value) {\n if (this._focused) {\n this.showMask(value);\n }\n else if (!this.displayValuePipe) {\n this.inputValue = this.inputValue ? this.maskParser.applyMask(value, this.maskOptions) : '';\n }\n }\n updateInput(valueToParse) {\n const replacedData = this.maskParser.replaceInMask(this._oldText, valueToParse, this.maskOptions, this._start, this._end);\n this.inputValue = replacedData.value;\n if (this._key === this.platform.KEYMAP.BACKSPACE) {\n replacedData.end = this._start;\n }\n ;\n this.setSelectionRange(replacedData.end);\n const rawVal = this.maskParser.parseValueFromMask(this.inputValue, this.maskOptions);\n this._dataValue = this.includeLiterals ? this.inputValue : rawVal;\n this._onChangeCallback(this._dataValue);\n this.valueChanged.emit({ rawValue: rawVal, formattedValue: this.inputValue });\n this.afterInput();\n }\n showDisplayValue(value) {\n if (this.displayValuePipe) {\n this.inputValue = this.displayValuePipe.transform(value);\n }\n else if (value === this.maskParser.applyMask(null, this.maskOptions)) {\n this.inputValue = '';\n }\n }\n}\nIgxMaskDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxMaskDirective, deps: [{ token: i0.ElementRef }, { token: MaskParsingService }, { token: i0.Renderer2 }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Directive });\nIgxMaskDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxMaskDirective, selector: \"[igxMask]\", inputs: { mask: [\"igxMask\", \"mask\"], promptChar: \"promptChar\", includeLiterals: \"includeLiterals\", displayValuePipe: \"displayValuePipe\", focusedValuePipe: \"focusedValuePipe\" }, outputs: { valueChanged: \"valueChanged\" }, host: { listeners: { \"keydown\": \"onKeyDown($event)\", \"compositionstart\": \"onCompositionStart()\", \"compositionend\": \"onCompositionEnd()\", \"input\": \"onInputChanged($event)\", \"paste\": \"onPaste()\", \"focus\": \"onFocus()\", \"blur\": \"onBlur($event.target.value)\", \"dragenter\": \"onDragEnter()\", \"dragleave\": \"onDragLeave()\", \"drop\": \"onDrop($event)\" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxMaskDirective, multi: true }], exportAs: [\"igxMask\"], ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxMaskDirective, decorators: [{\n type: Directive,\n args: [{\n providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxMaskDirective, multi: true }],\n selector: '[igxMask]',\n exportAs: 'igxMask'\n }]\n }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: MaskParsingService }, { type: i0.Renderer2 }, { type: PlatformUtil }]; }, propDecorators: { mask: [{\n type: Input,\n args: ['igxMask']\n }], promptChar: [{\n type: Input\n }], includeLiterals: [{\n type: Input\n }], displayValuePipe: [{\n type: Input\n }], focusedValuePipe: [{\n type: Input\n }], valueChanged: [{\n type: Output\n }], onKeyDown: [{\n type: HostListener,\n args: ['keydown', ['$event']]\n }], onCompositionStart: [{\n type: HostListener,\n args: ['compositionstart']\n }], onCompositionEnd: [{\n type: HostListener,\n args: ['compositionend']\n }], onInputChanged: [{\n type: HostListener,\n args: ['input', ['$event']]\n }], onPaste: [{\n type: HostListener,\n args: ['paste']\n }], onFocus: [{\n type: HostListener,\n args: ['focus']\n }], onBlur: [{\n type: HostListener,\n args: ['blur', ['$event.target.value']]\n }], onDragEnter: [{\n type: HostListener,\n args: ['dragenter']\n }], onDragLeave: [{\n type: HostListener,\n args: ['dragleave']\n }], onDrop: [{\n type: HostListener,\n args: ['drop', ['$event']]\n }] } });\n/** @hidden */\nclass IgxMaskModule {\n}\nIgxMaskModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxMaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });\nIgxMaskModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: \"14.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxMaskModule, declarations: [IgxMaskDirective], imports: [CommonModule], exports: [IgxMaskDirective] });\nIgxMaskModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxMaskModule, imports: [CommonModule] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxMaskModule, decorators: [{\n type: NgModule,\n args: [{\n declarations: [IgxMaskDirective],\n exports: [IgxMaskDirective],\n imports: [CommonModule]\n }]\n }] });\n\nclass IgxRippleDirective {\n /**\n * Enables/disables the ripple to be centered.\n * ```html\n * \n * ```\n *\n * @memberof IgxRippleDirective\n */\n set centered(value) {\n this._centered = value || this.centered;\n }\n get nativeElement() {\n return this.elementRef.nativeElement;\n }\n constructor(builder, elementRef, renderer, zone) {\n this.builder = builder;\n this.elementRef = elementRef;\n this.renderer = renderer;\n this.zone = zone;\n /**\n * Sets/gets the ripple target.\n * ```html\n * \n * ```\n * ```typescript\n * @ViewChild('rippleContainer', {read: IgxRippleDirective})\n * public ripple: IgxRippleDirective;\n * let rippleTarget = this.ripple.rippleTarget;\n * ```\n * Can set the ripple to activate on a child element inside the parent where igxRipple is defined.\n * ```html\n * \n * \n *
\n * ```\n *\n * @memberof IgxRippleDirective\n */\n this.rippleTarget = '';\n /**\n * Sets/gets the ripple duration(in milliseconds).\n * Default value is `600`.\n * ```html\n * \n * ```\n * ```typescript\n * @ViewChild('rippleContainer', {read: IgxRippleDirective})\n * public ripple: IgxRippleDirective;\n * let rippleDuration = this.ripple.rippleDuration;\n * ```\n *\n * @memberof IgxRippleDirective\n */\n this.rippleDuration = 600;\n /**\n * Sets/gets whether the ripple is disabled.\n * Default value is `false`.\n * ```html\n * \n * ```\n * ```typescript\n * @ViewChild('rippleContainer', {read: IgxRippleDirective})\n * public ripple: IgxRippleDirective;\n * let isRippleDisabled = this.ripple.rippleDisabled;\n * ```\n *\n * @memberof IgxRippleDirective\n */\n this.rippleDisabled = false;\n this.rippleElementClass = 'igx-ripple__inner';\n this.rippleHostClass = 'igx-ripple';\n this._centered = false;\n this.animationQueue = [];\n }\n /**\n * @hidden\n */\n onMouseDown(event) {\n this.zone.runOutsideAngular(() => this._ripple(event));\n }\n setStyles(rippleElement, styleParams) {\n this.renderer.addClass(rippleElement, this.rippleElementClass);\n this.renderer.setStyle(rippleElement, 'width', `${styleParams.radius}px`);\n this.renderer.setStyle(rippleElement, 'height', `${styleParams.radius}px`);\n this.renderer.setStyle(rippleElement, 'top', `${styleParams.top}px`);\n this.renderer.setStyle(rippleElement, 'left', `${styleParams.left}px`);\n if (this.rippleColor) {\n this.renderer.setStyle(rippleElement, 'background', this.rippleColor);\n }\n }\n _ripple(event) {\n if (this.rippleDisabled) {\n return;\n }\n const target = (this.rippleTarget ? this.nativeElement.querySelector(this.rippleTarget) || this.nativeElement : this.nativeElement);\n const rectBounds = target.getBoundingClientRect();\n const radius = Math.max(rectBounds.width, rectBounds.height);\n let left = Math.round(event.clientX - rectBounds.left - radius / 2);\n let top = Math.round(event.clientY - rectBounds.top - radius / 2);\n if (this._centered) {\n left = top = 0;\n }\n const dimensions = {\n radius,\n top,\n left\n };\n const rippleElement = this.renderer.createElement('span');\n this.setStyles(rippleElement, dimensions);\n this.renderer.addClass(target, this.rippleHostClass);\n this.renderer.appendChild(target, rippleElement);\n const animation = this.builder.build([\n style({ opacity: 0.5, transform: 'scale(.3)' }),\n animate(this.rippleDuration, style({ opacity: 0, transform: 'scale(2)' }))\n ]).create(rippleElement);\n this.animationQueue.push(animation);\n animation.onDone(() => {\n this.animationQueue.splice(this.animationQueue.indexOf(animation), 1);\n target.removeChild(rippleElement);\n if (this.animationQueue.length < 1) {\n this.renderer.removeClass(target, this.rippleHostClass);\n }\n });\n animation.play();\n }\n}\nIgxRippleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxRippleDirective, deps: [{ token: i1.AnimationBuilder }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });\nIgxRippleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxRippleDirective, selector: \"[igxRipple]\", inputs: { rippleTarget: [\"igxRippleTarget\", \"rippleTarget\"], rippleColor: [\"igxRipple\", \"rippleColor\"], rippleDuration: [\"igxRippleDuration\", \"rippleDuration\"], centered: [\"igxRippleCentered\", \"centered\"], rippleDisabled: [\"igxRippleDisabled\", \"rippleDisabled\"] }, host: { listeners: { \"mousedown\": \"onMouseDown($event)\" } }, ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxRippleDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxRipple]'\n }]\n }], ctorParameters: function () { return [{ type: i1.AnimationBuilder }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { rippleTarget: [{\n type: Input,\n args: ['igxRippleTarget']\n }], rippleColor: [{\n type: Input,\n args: ['igxRipple']\n }], rippleDuration: [{\n type: Input,\n args: ['igxRippleDuration']\n }], centered: [{\n type: Input,\n args: ['igxRippleCentered']\n }], rippleDisabled: [{\n type: Input,\n args: ['igxRippleDisabled']\n }], onMouseDown: [{\n type: HostListener,\n args: ['mousedown', ['$event']]\n }] } });\n/**\n * @hidden\n */\nclass IgxRippleModule {\n}\nIgxRippleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxRippleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });\nIgxRippleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: \"14.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxRippleModule, declarations: [IgxRippleDirective], exports: [IgxRippleDirective] });\nIgxRippleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxRippleModule });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxRippleModule, decorators: [{\n type: NgModule,\n args: [{\n declarations: [IgxRippleDirective],\n exports: [IgxRippleDirective]\n }]\n }] });\n\nconst RadioLabelPosition = mkenum({\n BEFORE: 'before',\n AFTER: 'after'\n});\nlet nextId$3 = 0;\n/**\n * **Ignite UI for Angular Radio Button** -\n * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/radio_button.html)\n *\n * The Ignite UI Radio Button allows the user to select a single option from an available set of options that are listed side by side.\n *\n * Example:\n * ```html\n * \\n {{iconName}} \\n {{iconName}} \\n \\n
\\n \\n {{iconName}} \\n {{iconName}} \\n \\n
\\n \\n 0\\\">\\n \\n more_vert \\n \\n \\n \\n \\n \\n
\\n\", dependencies: [{ kind: \"directive\", type: i1$1.NgForOf, selector: \"[ngFor][ngForOf]\", inputs: [\"ngForOf\", \"ngForTrackBy\", \"ngForTemplate\"] }, { kind: \"directive\", type: i1$1.NgIf, selector: \"[ngIf]\", inputs: [\"ngIf\", \"ngIfThen\", \"ngIfElse\"] }, { kind: \"directive\", type: i1$1.NgTemplateOutlet, selector: \"[ngTemplateOutlet]\", inputs: [\"ngTemplateOutletContext\", \"ngTemplateOutlet\", \"ngTemplateOutletInjector\"] }, { kind: \"component\", type: IgxDropDownComponent, selector: \"igx-drop-down\", inputs: [\"allowItemsFocus\", \"labelledBy\"], outputs: [\"opening\", \"opened\", \"closing\", \"closed\"] }, { kind: \"component\", type: IgxDropDownItemComponent, selector: \"igx-drop-down-item\" }, { kind: \"directive\", type: IgxDropDownItemNavigationDirective, selector: \"[igxDropDownItemNavigation]\", inputs: [\"igxDropDownItemNavigation\"] }, { kind: \"directive\", type: IgxToggleActionDirective, selector: \"[igxToggleAction]\", inputs: [\"overlaySettings\", \"igxToggleOutlet\", \"igxToggleAction\"], exportAs: [\"toggle-action\"] }, { kind: \"directive\", type: IgxButtonDirective, selector: \"[igxButton]\", inputs: [\"selected\", \"igxButton\", \"igxButtonColor\", \"igxButtonBackground\", \"igxLabel\", \"disabled\"], outputs: [\"buttonClick\", \"buttonSelected\"] }, { kind: \"component\", type: IgxIconComponent, selector: \"igx-icon\", inputs: [\"family\", \"active\", \"name\"] }, { kind: \"directive\", type: IgxRippleDirective, selector: \"[igxRipple]\", inputs: [\"igxRippleTarget\", \"igxRipple\", \"igxRippleDuration\", \"igxRippleCentered\", \"igxRippleDisabled\"] }] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxActionStripComponent, decorators: [{\n type: Component,\n args: [{ selector: 'igx-action-strip', template: \"\\n \\n
\\n \\n \\n 0\\\">\\n \\n more_vert \\n \\n \\n \\n \\n \\n
\\n\" }]\n }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [DisplayDensityToken]\n }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { context: [{\n type: Input\n }], _menuItems: [{\n type: ContentChildren,\n args: [IgxActionStripMenuItemDirective]\n }], actionButtons: [{\n type: ContentChildren,\n args: [IgxGridActionsBaseDirective]\n }], hidden: [{\n type: Input\n }], resourceStrings: [{\n type: Input\n }], menu: [{\n type: ViewChild,\n args: ['dropdown']\n }], display: [{\n type: HostBinding,\n args: ['style.display']\n }], hostClasses: [{\n type: HostBinding,\n args: ['class']\n }] } });\n\n/**\n * @hidden\n */\nclass IgxActionStripModule {\n}\nIgxActionStripModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxActionStripModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });\nIgxActionStripModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: \"14.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxActionStripModule, declarations: [IgxActionStripComponent,\n IgxActionStripMenuItemDirective,\n IgxGridPinningActionsComponent,\n IgxGridEditingActionsComponent,\n IgxGridActionsBaseDirective,\n IgxGridActionButtonComponent], imports: [CommonModule, IgxDropDownModule, IgxToggleModule, IgxButtonModule, IgxIconModule, IgxRippleModule], exports: [IgxActionStripComponent,\n IgxActionStripMenuItemDirective,\n IgxGridPinningActionsComponent,\n IgxGridEditingActionsComponent,\n IgxGridActionsBaseDirective,\n IgxGridActionButtonComponent] });\nIgxActionStripModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxActionStripModule, imports: [CommonModule, IgxDropDownModule, IgxToggleModule, IgxButtonModule, IgxIconModule, IgxRippleModule] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxActionStripModule, decorators: [{\n type: NgModule,\n args: [{\n declarations: [\n IgxActionStripComponent,\n IgxActionStripMenuItemDirective,\n IgxGridPinningActionsComponent,\n IgxGridEditingActionsComponent,\n IgxGridActionsBaseDirective,\n IgxGridActionButtonComponent\n ],\n exports: [\n IgxActionStripComponent,\n IgxActionStripMenuItemDirective,\n IgxGridPinningActionsComponent,\n IgxGridEditingActionsComponent,\n IgxGridActionsBaseDirective,\n IgxGridActionButtonComponent\n ],\n imports: [CommonModule, IgxDropDownModule, IgxToggleModule, IgxButtonModule, IgxIconModule, IgxRippleModule]\n }]\n }] });\n\nlet NEXT_ID$p = 0;\nconst IgxAvatarSize = mkenum({\n SMALL: 'small',\n MEDIUM: 'medium',\n LARGE: 'large'\n});\nconst IgxAvatarType = mkenum({\n INITIALS: 'initials',\n IMAGE: 'image',\n ICON: 'icon',\n CUSTOM: 'custom'\n});\n/**\n * Avatar provides a way to display an image, icon or initials to the user.\n *\n * @igxModule IgxAvatarModule\n *\n * @igxTheme igx-avatar-theme, igx-icon-theme\n *\n * @igxKeywords avatar, profile, picture, initials\n *\n * @igxGroup Layouts\n *\n * @remarks\n *\n * The Ignite UI Avatar provides an easy way to add an avatar icon to your application. This icon can be an\n * image, someone's initials or a material icon from the Google Material icon set.\n *\n * @example\n * ```html\n * \\n \\n
\\n \\n \\n
\\n\", dependencies: [{ kind: \"directive\", type: i1$1.NgIf, selector: \"[ngIf]\", inputs: [\"ngIf\", \"ngIfThen\", \"ngIfElse\"] }, { kind: \"component\", type: IgxIconComponent, selector: \"igx-icon\", inputs: [\"family\", \"active\", \"name\"] }] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxExpansionPanelHeaderComponent, decorators: [{\n type: Component,\n args: [{ selector: 'igx-expansion-panel-header', template: \"\\n
\\n \\n \\n {{panel.collapsed? 'expand_more':'expand_less'}}\\n \\n
\\n\\n
\\n\" }]\n }], ctorParameters: function () { return [{ type: undefined, decorators: [{\n type: Host\n }, {\n type: Inject,\n args: [IGX_EXPANSION_PANEL_COMPONENT]\n }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { iconTemplate: [{\n type: ContentChild,\n args: [IgxExpansionPanelIconDirective]\n }], lv: [{\n type: HostBinding,\n args: ['attr.aria-level']\n }, {\n type: Input\n }], role: [{\n type: HostBinding,\n args: ['attr.role']\n }, {\n type: Input\n }], iconPosition: [{\n type: Input\n }], interaction: [{\n type: Output\n }], cssClass: [{\n type: HostBinding,\n args: ['class.igx-expansion-panel__header']\n }], isExpanded: [{\n type: HostBinding,\n args: ['class.igx-expansion-panel__header--expanded']\n }], disabled: [{\n type: Input\n }, {\n type: HostBinding,\n args: ['class.igx-expansion-panel--disabled']\n }], customIconRef: [{\n type: ContentChild,\n args: [IgxExpansionPanelIconDirective, { read: ElementRef }]\n }], defaultIconRef: [{\n type: ViewChild,\n args: [IgxIconComponent, { read: ElementRef }]\n }], onAction: [{\n type: HostListener,\n args: ['keydown.Enter', ['$event']]\n }, {\n type: HostListener,\n args: ['keydown.Space', ['$event']]\n }, {\n type: HostListener,\n args: ['keydown.Spacebar', ['$event']]\n }, {\n type: HostListener,\n args: ['click', ['$event']]\n }], openPanel: [{\n type: HostListener,\n args: ['keydown.Alt.ArrowDown', ['$event']]\n }], closePanel: [{\n type: HostListener,\n args: ['keydown.Alt.ArrowUp', ['$event']]\n }] } });\n\n/** @hidden @internal */\nvar ANIMATION_TYPE;\n(function (ANIMATION_TYPE) {\n ANIMATION_TYPE[\"OPEN\"] = \"open\";\n ANIMATION_TYPE[\"CLOSE\"] = \"close\";\n})(ANIMATION_TYPE || (ANIMATION_TYPE = {}));\n/**@hidden @internal */\n// eslint-disable-next-line @angular-eslint/directive-class-suffix\nclass ToggleAnimationPlayer {\n get animationSettings() {\n return this._animationSettings;\n }\n set animationSettings(value) {\n this._animationSettings = value;\n }\n constructor(animationService) {\n this.animationService = animationService;\n /** @hidden @internal */\n this.openAnimationDone = new EventEmitter();\n /** @hidden @internal */\n this.closeAnimationDone = new EventEmitter();\n /** @hidden @internal */\n this.openAnimationStart = new EventEmitter();\n /** @hidden @internal */\n this.closeAnimationStart = new EventEmitter();\n /** @hidden @internal */\n this.openAnimationPlayer = null;\n /** @hidden @internal */\n this.closeAnimationPlayer = null;\n this.destroy$ = new Subject();\n this.players = new Map();\n this._animationSettings = {\n openAnimation: growVerIn,\n closeAnimation: growVerOut\n };\n this.closeInterrupted = false;\n this.openInterrupted = false;\n this._defaultClosedCallback = noop;\n this._defaultOpenedCallback = noop;\n this.onClosedCallback = this._defaultClosedCallback;\n this.onOpenedCallback = this._defaultOpenedCallback;\n }\n /** @hidden @internal */\n playOpenAnimation(targetElement, onDone) {\n this.startPlayer(ANIMATION_TYPE.OPEN, targetElement, onDone || this._defaultOpenedCallback);\n }\n /** @hidden @internal */\n playCloseAnimation(targetElement, onDone) {\n this.startPlayer(ANIMATION_TYPE.CLOSE, targetElement, onDone || this._defaultClosedCallback);\n }\n /** @hidden @internal */\n ngOnDestroy() {\n this.destroy$.next();\n this.destroy$.complete();\n }\n startPlayer(type, targetElement, callback) {\n if (!targetElement) { // if no element is passed, there is nothing to animate\n return;\n }\n let target = this.getPlayer(type);\n if (!target) {\n target = this.initializePlayer(type, targetElement, callback);\n }\n // V.S. Jun 28th, 2021 #9783: player will NOT be initialized w/ null settings\n // events will already be emitted\n if (!target || target.hasStarted()) {\n return;\n }\n const targetEmitter = type === ANIMATION_TYPE.OPEN ? this.openAnimationStart : this.closeAnimationStart;\n targetEmitter.emit();\n if (target) {\n target.play();\n }\n }\n initializePlayer(type, targetElement, callback) {\n const oppositeType = type === ANIMATION_TYPE.OPEN ? ANIMATION_TYPE.CLOSE : ANIMATION_TYPE.OPEN;\n // V.S. Jun 28th, 2021 #9783: Treat falsy animation settings as disabled animations\n const targetAnimationSettings = this.animationSettings || { closeAnimation: null, openAnimation: null };\n const animationSettings = type === ANIMATION_TYPE.OPEN ?\n targetAnimationSettings.openAnimation : targetAnimationSettings.closeAnimation;\n // V.S. Jun 28th, 2021 #9783: When no animation in target direction, emit start and done events and return\n if (!animationSettings) {\n this.setCallback(type, callback);\n const targetEmitter = type === ANIMATION_TYPE.OPEN ? this.openAnimationStart : this.closeAnimationStart;\n targetEmitter.emit();\n this.onDoneHandler(type);\n return;\n }\n const opposite = this.getPlayer(oppositeType);\n let oppositePosition = 1;\n if (opposite) {\n oppositePosition = opposite.position;\n this.cleanUpPlayer(oppositeType);\n }\n if (type === ANIMATION_TYPE.OPEN) {\n this.openAnimationPlayer = this.animationService.buildAnimation(animationSettings, targetElement.nativeElement);\n }\n else if (type === ANIMATION_TYPE.CLOSE) {\n this.closeAnimationPlayer = this.animationService.buildAnimation(animationSettings, targetElement.nativeElement);\n }\n const target = this.getPlayer(type);\n target.init();\n this.getPlayer(type).position = 1 - oppositePosition;\n this.setCallback(type, callback);\n target.animationEnd.pipe(takeUntil(this.destroy$)).subscribe(() => {\n this.onDoneHandler(type);\n });\n return target;\n }\n onDoneHandler(type) {\n const targetEmitter = type === ANIMATION_TYPE.OPEN ? this.openAnimationDone : this.closeAnimationDone;\n const targetCallback = type === ANIMATION_TYPE.OPEN ? this.onOpenedCallback : this.onClosedCallback;\n targetCallback();\n if (!(type === ANIMATION_TYPE.OPEN ? this.openInterrupted : this.closeInterrupted)) {\n targetEmitter.emit();\n }\n this.cleanUpPlayer(type);\n }\n setCallback(type, callback) {\n if (type === ANIMATION_TYPE.OPEN) {\n this.onOpenedCallback = callback;\n this.openInterrupted = false;\n }\n else if (type === ANIMATION_TYPE.CLOSE) {\n this.onClosedCallback = callback;\n this.closeInterrupted = false;\n }\n }\n cleanUpPlayer(target) {\n switch (target) {\n case ANIMATION_TYPE.CLOSE:\n if (this.closeAnimationPlayer != null) {\n this.closeAnimationPlayer.reset();\n this.closeAnimationPlayer.destroy();\n this.closeAnimationPlayer = null;\n }\n this.closeInterrupted = true;\n this.onClosedCallback = this._defaultClosedCallback;\n break;\n case ANIMATION_TYPE.OPEN:\n if (this.openAnimationPlayer != null) {\n this.openAnimationPlayer.reset();\n this.openAnimationPlayer.destroy();\n this.openAnimationPlayer = null;\n }\n this.openInterrupted = true;\n this.onOpenedCallback = this._defaultOpenedCallback;\n break;\n default:\n break;\n }\n }\n getPlayer(type) {\n switch (type) {\n case ANIMATION_TYPE.OPEN:\n return this.openAnimationPlayer;\n case ANIMATION_TYPE.CLOSE:\n return this.closeAnimationPlayer;\n default:\n return null;\n }\n }\n}\nToggleAnimationPlayer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: ToggleAnimationPlayer, deps: [{ token: IgxAngularAnimationService }], target: i0.ɵɵFactoryTarget.Directive });\nToggleAnimationPlayer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: ToggleAnimationPlayer, ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: ToggleAnimationPlayer, decorators: [{\n type: Directive\n }], ctorParameters: function () { return [{ type: undefined, decorators: [{\n type: Inject,\n args: [IgxAngularAnimationService]\n }] }]; } });\n\nlet NEXT_ID$o = 0;\nclass IgxExpansionPanelComponent extends ToggleAnimationPlayer {\n /**\n * Sets/gets the animation settings of the expansion panel component\n * Open and Close animation should be passed\n *\n * Get\n * ```typescript\n * const currentAnimations = this.panel.animationSettings;\n * ```\n * Set\n * ```typescript\n * import { slideInLeft, slideOutRight } from 'igniteui-angular';\n * ...\n * this.panel.animationsSettings = {\n * openAnimation: slideInLeft,\n * closeAnimation: slideOutRight\n * };\n * ```\n * or via template\n * ```typescript\n * import { slideInLeft, slideOutRight } from 'igniteui-angular';\n * ...\n * myCustomAnimationObject = {\n * openAnimation: slideInLeft,\n * closeAnimation: slideOutRight\n * };\n * ```html\n * \\n
\\n \\n \\n {{panel.collapsed? 'expand_more':'expand_less'}}\\n \\n
\\n\\n
\\n\\n\", dependencies: [{ kind: \"directive\", type: i1$1.NgForOf, selector: \"[ngFor][ngForOf]\", inputs: [\"ngForOf\", \"ngForTrackBy\", \"ngForTemplate\"] }, { kind: \"directive\", type: IgxCalendarMonthDirective, selector: \"[igxCalendarMonth]\", inputs: [\"igxCalendarMonth\", \"date\", \"index\"], outputs: [\"monthSelection\"] }, { kind: \"pipe\", type: i1$1.TitleCasePipe, name: \"titlecase\" }, { kind: \"pipe\", type: i1$1.DatePipe, name: \"date\" }] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxMonthsViewComponent, decorators: [{\n type: Component,\n args: [{ providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxMonthsViewComponent, multi: true }], selector: 'igx-months-view', template: \"\\n \\n {{ formattedMonth(month) | titlecase }}\\n \\n
\\n\\n
\\n\\n\" }]\n }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { id: [{\n type: HostBinding,\n args: ['attr.id']\n }, {\n type: Input\n }], date: [{\n type: Input\n }], monthFormat: [{\n type: Input\n }], locale: [{\n type: Input\n }], formatView: [{\n type: Input\n }], selected: [{\n type: Output\n }], styleClass: [{\n type: HostBinding,\n args: ['class.igx-calendar']\n }], monthsRef: [{\n type: ViewChildren,\n args: [IgxCalendarMonthDirective, { read: IgxCalendarMonthDirective }]\n }], onKeydownArrowUp: [{\n type: HostListener,\n args: ['keydown.arrowup', ['$event']]\n }], onKeydownArrowDown: [{\n type: HostListener,\n args: ['keydown.arrowdown', ['$event']]\n }], onKeydownArrowRight: [{\n type: HostListener,\n args: ['keydown.arrowright', ['$event']]\n }], onKeydownArrowLeft: [{\n type: HostListener,\n args: ['keydown.arrowleft', ['$event']]\n }], onKeydownHome: [{\n type: HostListener,\n args: ['keydown.home', ['$event']]\n }], onKeydownEnd: [{\n type: HostListener,\n args: ['keydown.end', ['$event']]\n }], onKeydownEnter: [{\n type: HostListener,\n args: ['keydown.enter', ['$event']]\n }], resetActiveMonth: [{\n type: HostListener,\n args: ['focusout']\n }] } });\n\nclass CalendarHammerConfig extends HammerGestureConfig {\n constructor() {\n super(...arguments);\n this.overrides = {\n pan: { direction: Hammer.DIRECTION_VERTICAL, threshold: 1 }\n };\n }\n}\nCalendarHammerConfig.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: CalendarHammerConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable });\nCalendarHammerConfig.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: CalendarHammerConfig });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: CalendarHammerConfig, decorators: [{\n type: Injectable\n }] });\nclass IgxYearsViewComponent {\n /**\n * Gets/sets the selected date of the years view.\n * By default it is the current date.\n * ```html\n * \\n \\n {{ formattedMonth(month) | titlecase }}\\n \\n
\\n\\n
\\n\", dependencies: [{ kind: \"directive\", type: i1$1.NgForOf, selector: \"[ngFor][ngForOf]\", inputs: [\"ngForOf\", \"ngForTrackBy\", \"ngForTemplate\"] }, { kind: \"directive\", type: IgxCalendarYearDirective, selector: \"[igxCalendarYear]\", inputs: [\"igxCalendarYear\", \"date\"], outputs: [\"yearSelection\"] }] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxYearsViewComponent, decorators: [{\n type: Component,\n args: [{ providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: IgxYearsViewComponent,\n multi: true\n },\n {\n provide: HAMMER_GESTURE_CONFIG,\n useClass: CalendarHammerConfig\n }\n ], selector: 'igx-years-view', template: \"\\n \\n\\n {{ formattedYear(year) }}\\n \\n
\\n\\n
\\n\" }]\n }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { formatView: [{\n type: Input\n }], selected: [{\n type: Output\n }], styleClass: [{\n type: HostBinding,\n args: ['class.igx-calendar']\n }], calendarDir: [{\n type: ViewChildren,\n args: [IgxCalendarYearDirective, { read: IgxCalendarYearDirective }]\n }], date: [{\n type: Input\n }], yearFormat: [{\n type: Input\n }], locale: [{\n type: Input\n }], onKeydownArrowDown: [{\n type: HostListener,\n args: ['keydown.arrowdown', ['$event']]\n }], onKeydownArrowUp: [{\n type: HostListener,\n args: ['keydown.arrowup', ['$event']]\n }], onKeydownEnter: [{\n type: HostListener,\n args: ['keydown.enter']\n }] } });\n\n/**\n * @hidden\n */\nclass IgxDayItemComponent {\n /**\n * Returns boolean indicating if the day is selected\n *\n */\n get selected() {\n return this._selected;\n }\n /**\n * Selects the day\n */\n set selected(value) {\n this._selected = value;\n }\n get isCurrentMonth() {\n return this.date.isCurrentMonth;\n }\n get isPreviousMonth() {\n return this.date.isPrevMonth;\n }\n get isNextMonth() {\n return this.date.isNextMonth;\n }\n get nativeElement() {\n return this.elementRef.nativeElement;\n }\n get isSelectedCSS() {\n return (!this.isDisabled && this.selected);\n }\n get isInactive() {\n return this.date.isNextMonth || this.date.isPrevMonth;\n }\n get isHidden() {\n return this.hideOutsideDays && this.isInactive;\n }\n get isToday() {\n const today = new Date(Date.now());\n const date = this.date.date;\n if (date.getDate() === today.getDate()) {\n this.nativeElement.setAttribute('aria-current', 'date');\n }\n return (date.getFullYear() === today.getFullYear() &&\n date.getMonth() === today.getMonth() &&\n date.getDate() === today.getDate());\n }\n get isWeekend() {\n const day = this.date.date.getDay();\n return day === 0 || day === 6;\n }\n get isDisabled() {\n if (this.disabledDates === null) {\n return false;\n }\n return isDateInRanges(this.date.date, this.disabledDates);\n }\n get isOutOfRange() {\n if (!this.outOfRangeDates) {\n return false;\n }\n return isDateInRanges(this.date.date, this.outOfRangeDates);\n }\n get isFocusable() {\n return this.isCurrentMonth && !this.isHidden && !this.isDisabled && !this.isOutOfRange;\n }\n get isWithinRangeCSS() {\n return !this.isSingleSelection && this.isWithinRange;\n }\n get isSpecial() {\n if (this.specialDates === null) {\n return false;\n }\n return isDateInRanges(this.date.date, this.specialDates);\n }\n get isDisabledCSS() {\n return this.isHidden || this.isDisabled || this.isOutOfRange;\n }\n get isSingleSelection() {\n return this.selection !== CalendarSelection.RANGE;\n }\n constructor(elementRef) {\n this.elementRef = elementRef;\n this.hideOutsideDays = false;\n this.isLastInRange = false;\n this.isFirstInRange = false;\n this.isWithinRange = false;\n this.dateSelection = new EventEmitter();\n this._selected = false;\n }\n onSelect(event) {\n event.stopPropagation();\n this.dateSelection.emit(this.date);\n }\n}\nIgxDayItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxDayItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });\nIgxDayItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxDayItemComponent, selector: \"igx-day-item\", inputs: { date: \"date\", selection: \"selection\", selected: \"selected\", disabledDates: \"disabledDates\", outOfRangeDates: \"outOfRangeDates\", specialDates: \"specialDates\", hideOutsideDays: \"hideOutsideDays\", isLastInRange: \"isLastInRange\", isFirstInRange: \"isFirstInRange\", isWithinRange: \"isWithinRange\" }, outputs: { dateSelection: \"dateSelection\" }, host: { listeners: { \"click\": \"onSelect($event)\", \"keydown.enter\": \"onSelect($event)\" }, properties: { \"class.igx-calendar__date--last\": \"this.isLastInRange\", \"class.igx-calendar__date--first\": \"this.isFirstInRange\", \"class.igx-calendar__date--selected\": \"this.isSelectedCSS\", \"class.igx-calendar__date--inactive\": \"this.isInactive\", \"class.igx-calendar__date--hidden\": \"this.isHidden\", \"class.igx-calendar__date--current\": \"this.isToday\", \"class.igx-calendar__date--weekend\": \"this.isWeekend\", \"class.igx-calendar__date--range\": \"this.isWithinRangeCSS\", \"class.igx-calendar__date--special\": \"this.isSpecial\", \"class.igx-calendar__date--disabled\": \"this.isDisabledCSS\", \"class.igx-calendar__date--single\": \"this.isSingleSelection\" } }, ngImport: i0, template: \"\\n \\n \\n\\n {{ formattedYear(year) }}\\n \\n
\\n\\n
\\n\\n\\n Wk\\n
\\n \\n {{ dayName | titlecase }}\\n \\n\\n\\n \\n {{ formattedDate(day.date) }}\\n \\n
\\n\\n\", dependencies: [{ kind: \"directive\", type: i1$1.NgForOf, selector: \"[ngFor][ngForOf]\", inputs: [\"ngForOf\", \"ngForTrackBy\", \"ngForTemplate\"] }, { kind: \"directive\", type: i1$1.NgIf, selector: \"[ngIf]\", inputs: [\"ngIf\", \"ngIfThen\", \"ngIfElse\"] }, { kind: \"component\", type: IgxDayItemComponent, selector: \"igx-day-item\", inputs: [\"date\", \"selection\", \"selected\", \"disabledDates\", \"outOfRangeDates\", \"specialDates\", \"hideOutsideDays\", \"isLastInRange\", \"isFirstInRange\", \"isWithinRange\"], outputs: [\"dateSelection\"] }, { kind: \"pipe\", type: i1$1.TitleCasePipe, name: \"titlecase\" }] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxDaysViewComponent, decorators: [{\n type: Component,\n args: [{ providers: [\n {\n multi: true,\n provide: NG_VALUE_ACCESSOR,\n useExisting: IgxDaysViewComponent\n },\n { provide: IgxDaysViewNavigationService, useClass: IgxDaysViewNavigationService }\n ], selector: 'igx-days-view', template: \"\\n\\n \\n {{getWeekNumber(week[0].date)}}\\n \\n\\n
\\n\\n \\n \\n
\\n\\n\\n Wk\\n
\\n \\n {{ dayName | titlecase }}\\n \\n\\n\\n \\n {{ formattedDate(day.date) }}\\n \\n
\\n\\n\" }]\n }], ctorParameters: function () { return [{ type: IgxDaysViewNavigationService }, { type: PlatformUtil }, { type: undefined, decorators: [{\n type: Inject,\n args: [LOCALE_ID]\n }] }]; }, propDecorators: { id: [{\n type: HostBinding,\n args: ['attr.id']\n }, {\n type: Input\n }], changeDaysView: [{\n type: Input\n }], showWeekNumbers: [{\n type: Input\n }], activeDate: [{\n type: Input\n }], dateSelection: [{\n type: Output\n }], viewChanging: [{\n type: Output\n }], activeDateChange: [{\n type: Output\n }], monthsViewBlur: [{\n type: Output\n }], dates: [{\n type: ViewChildren,\n args: [IgxDayItemComponent, { read: IgxDayItemComponent }]\n }], styleClass: [{\n type: HostBinding,\n args: ['class.igx-calendar']\n }], resetActiveMonth: [{\n type: HostListener,\n args: ['focusout']\n }], pointerDown: [{\n type: HostListener,\n args: ['keydown.pagedown']\n }, {\n type: HostListener,\n args: ['keydown.pageup']\n }, {\n type: HostListener,\n args: ['keydown.shift.pagedown']\n }, {\n type: HostListener,\n args: ['keydown.shift.pageup']\n }, {\n type: HostListener,\n args: ['pointerdown']\n }], onKeydownArrow: [{\n type: HostListener,\n args: ['keydown.arrowleft', ['$event']]\n }, {\n type: HostListener,\n args: ['keydown.arrowright', ['$event']]\n }, {\n type: HostListener,\n args: ['keydown.arrowup', ['$event']]\n }, {\n type: HostListener,\n args: ['keydown.arrowdown', ['$event']]\n }], onKeydownHome: [{\n type: HostListener,\n args: ['keydown.home', ['$event']]\n }], onKeydownEnd: [{\n type: HostListener,\n args: ['keydown.end', ['$event']]\n }] } });\n\nclass IgxMonthViewSlotsCalendar {\n transform(monthViews) {\n return new Array(monthViews);\n }\n}\nIgxMonthViewSlotsCalendar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxMonthViewSlotsCalendar, deps: [], target: i0.ɵɵFactoryTarget.Pipe });\nIgxMonthViewSlotsCalendar.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: \"14.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxMonthViewSlotsCalendar, name: \"IgxMonthViewSlots\" });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxMonthViewSlotsCalendar, decorators: [{\n type: Pipe,\n args: [{\n name: 'IgxMonthViewSlots'\n }]\n }] });\nclass IgxGetViewDateCalendar {\n constructor() {\n this.calendar = new Calendar();\n }\n transform(index, viewDate, wholeDate = true) {\n const date = this.calendar.timedelta(viewDate, 'month', index);\n return wholeDate ? date : date.getMonth();\n }\n}\nIgxGetViewDateCalendar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxGetViewDateCalendar, deps: [], target: i0.ɵɵFactoryTarget.Pipe });\nIgxGetViewDateCalendar.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: \"14.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxGetViewDateCalendar, name: \"IgxGetViewDate\" });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxGetViewDateCalendar, decorators: [{\n type: Pipe,\n args: [{\n name: 'IgxGetViewDate'\n }]\n }], ctorParameters: function () { return []; } });\n\nlet NEXT_ID$i = 0;\n/**\n * Calendar provides a way to display date information.\n *\n * @igxModule IgxCalendarModule\n *\n * @igxTheme igx-calendar-theme, igx-icon-theme\n *\n * @igxKeywords calendar, datepicker, schedule, date\n *\n * @igxGroup Scheduling\n *\n * @remarks\n * The Ignite UI Calendar provides an easy way to display a calendar and allow users to select dates using single, multiple\n * or range selection.\n *\n * @example:\n * ```html\n * \\n\\n \\n {{getWeekNumber(week[0].date)}}\\n \\n\\n
\\n\\n \\n \\n {{ formattedYear(headerDate) }}\\n
\\n\\n\\n \\n \\n
\\n\\n\\n\\n \\n \\n \\n {{ monthsViewNumber && monthsViewNumber > 1 ? resourceStrings.igx_calendar_multi_selection.replace('{0}', monthsViewNumber.toString()) : resourceStrings.igx_calendar_singular_multi_selection}}\\n \\n \\n {{ monthsViewNumber && monthsViewNumber > 1 ? resourceStrings.igx_calendar_range_selection.replace('{0}', monthsViewNumber.toString()) : resourceStrings.igx_calendar_singular_range_selection}}\\n \\n \\n {{ monthsViewNumber && monthsViewNumber > 1 ? resourceStrings.igx_calendar_single_selection.replace('{0}', monthsViewNumber.toString()) : resourceStrings.igx_calendar_singular_single_selection}}\\n \\n \\n \\n keyboard_arrow_left \\n
\\n \\n \\n \\n
\\n \\n {{ formattedYear(headerDate) }}\\n
\\n\\n\\n \\n \\n
\\n\\n\\n\\n \\n \\n \\n {{ monthsViewNumber && monthsViewNumber > 1 ? resourceStrings.igx_calendar_multi_selection.replace('{0}', monthsViewNumber.toString()) : resourceStrings.igx_calendar_singular_multi_selection}}\\n \\n \\n {{ monthsViewNumber && monthsViewNumber > 1 ? resourceStrings.igx_calendar_range_selection.replace('{0}', monthsViewNumber.toString()) : resourceStrings.igx_calendar_singular_range_selection}}\\n \\n \\n {{ monthsViewNumber && monthsViewNumber > 1 ? resourceStrings.igx_calendar_single_selection.replace('{0}', monthsViewNumber.toString()) : resourceStrings.igx_calendar_singular_single_selection}}\\n \\n \\n \\n keyboard_arrow_left \\n
\\n \\n \\n \\n
\\n \\n \\n keyboard_arrow_left \\n
\\n \\n \\n {{ formattedYear(viewDate) }}\\n \\n
\\n \\n \\n keyboard_arrow_left \\n
\\n \\n \\n {{ formattedYear(viewDate) }}\\n \\n
\\n \\n
\\n\\n\\n \\n \\n
\\n\\n\\n
\\n\\n\\n \\n \\n
\\n\\n{{title}}
\n *{{subtitle}}
\n *\\n
\\n\\n\\n
\\n\" });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxCardActionsComponent, decorators: [{\n type: Component,\n args: [{ selector: 'igx-card-actions', template: \"\\n
\\n\\n\\n
\\n\" }]\n }], ctorParameters: function () { return [{ type: IgxCardComponent, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [IgxCardComponent]\n }] }]; }, propDecorators: { layout: [{\n type: HostBinding,\n args: ['class.igx-card-actions']\n }, {\n type: Input\n }], vertical: [{\n type: HostBinding,\n args: ['class.igx-card-actions--vertical']\n }, {\n type: Input\n }], isJustifyLayout: [{\n type: HostBinding,\n args: ['class.igx-card-actions--justify']\n }], reverse: [{\n type: HostBinding,\n args: ['class.igx-card-actions--reverse']\n }, {\n type: Input\n }] } });\n/**\n * @hidden\n */\nclass IgxCardModule {\n}\nIgxCardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });\nIgxCardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: \"14.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxCardModule, declarations: [IgxCardComponent, IgxCardHeaderComponent, IgxCardMediaDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxCardFooterDirective, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardThumbnailDirective], imports: [CommonModule, IgxButtonModule], exports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardMediaDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxCardFooterDirective, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardThumbnailDirective] });\nIgxCardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxCardModule, imports: [CommonModule, IgxButtonModule] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxCardModule, decorators: [{\n type: NgModule,\n args: [{\n declarations: [\n IgxCardComponent,\n IgxCardHeaderComponent,\n IgxCardMediaDirective,\n IgxCardContentDirective,\n IgxCardActionsComponent,\n IgxCardFooterDirective,\n IgxCardHeaderTitleDirective,\n IgxCardHeaderSubtitleDirective,\n IgxCardThumbnailDirective,\n ],\n exports: [\n IgxCardComponent,\n IgxCardHeaderComponent,\n IgxCardMediaDirective,\n IgxCardContentDirective,\n IgxCardActionsComponent,\n IgxCardFooterDirective,\n IgxCardHeaderTitleDirective,\n IgxCardHeaderSubtitleDirective,\n IgxCardThumbnailDirective,\n ],\n imports: [CommonModule, IgxButtonModule]\n }]\n }] });\n\nvar Direction;\n(function (Direction) {\n Direction[Direction[\"NONE\"] = 0] = \"NONE\";\n Direction[Direction[\"NEXT\"] = 1] = \"NEXT\";\n Direction[Direction[\"PREV\"] = 2] = \"PREV\";\n})(Direction || (Direction = {}));\nconst HorizontalAnimationType = mkenum({\n none: 'none',\n slide: 'slide',\n fade: 'fade'\n});\n/** @hidden */\nlet IgxCarouselComponentBase = class IgxCarouselComponentBase {\n constructor(animationService, cdr) {\n this.animationService = animationService;\n this.cdr = cdr;\n /** @hidden */\n this.animationType = HorizontalAnimationType.slide;\n /** @hidden @internal */\n this.enterAnimationDone = new EventEmitter();\n /** @hidden @internal */\n this.leaveAnimationDone = new EventEmitter();\n /** @hidden */\n this.defaultAnimationDuration = 320;\n /** @hidden */\n this.animationPosition = 0;\n /** @hidden */\n this.newDuration = 0;\n }\n /** @hidden */\n triggerAnimations() {\n if (this.animationType !== HorizontalAnimationType.none) {\n if (this.animationStarted(this.leaveAnimationPlayer) || this.animationStarted(this.enterAnimationPlayer)) {\n requestAnimationFrame(() => {\n this.resetAnimations();\n this.playAnimations();\n });\n }\n else {\n this.playAnimations();\n }\n }\n }\n /** @hidden */\n animationStarted(animation) {\n return animation && animation.hasStarted();\n }\n /** @hidden */\n playAnimations() {\n this.playLeaveAnimation();\n this.playEnterAnimation();\n }\n resetAnimations() {\n if (this.animationStarted(this.leaveAnimationPlayer)) {\n this.leaveAnimationPlayer.reset();\n this.leaveAnimationDone.emit();\n }\n if (this.animationStarted(this.enterAnimationPlayer)) {\n this.enterAnimationPlayer.reset();\n this.enterAnimationDone.emit();\n this.cdr.markForCheck();\n }\n }\n getAnimation() {\n let duration;\n if (this.newDuration) {\n duration = this.animationPosition ? this.animationPosition * this.newDuration : this.newDuration;\n }\n else {\n duration = this.animationPosition ? this.animationPosition * this.defaultAnimationDuration : this.defaultAnimationDuration;\n }\n switch (this.animationType) {\n case HorizontalAnimationType.slide:\n const trans = this.animationPosition ? this.animationPosition * 100 : 100;\n return {\n enterAnimation: useAnimation(slideInLeft, {\n params: {\n delay: '0s',\n duration: `${duration}ms`,\n endOpacity: 1,\n startOpacity: 1,\n fromPosition: `translateX(${this.currentItem.direction === 1 ? trans : -trans}%)`,\n toPosition: 'translateX(0%)'\n }\n }),\n leaveAnimation: useAnimation(slideInLeft, {\n params: {\n delay: '0s',\n duration: `${duration}ms`,\n endOpacity: 1,\n startOpacity: 1,\n fromPosition: `translateX(0%)`,\n toPosition: `translateX(${this.currentItem.direction === 1 ? -trans : trans}%)`,\n }\n })\n };\n case HorizontalAnimationType.fade:\n return {\n enterAnimation: useAnimation(fadeIn, { params: { duration: `${duration}ms`, startOpacity: `${this.animationPosition}` } }),\n leaveAnimation: null\n };\n }\n return {\n enterAnimation: null,\n leaveAnimation: null\n };\n }\n playEnterAnimation() {\n const animation = this.getAnimation().enterAnimation;\n if (!animation) {\n return;\n }\n this.enterAnimationPlayer = this.animationService.buildAnimation(animation, this.getCurrentElement());\n this.enterAnimationPlayer.animationEnd.subscribe(() => {\n // TODO: animation may never end. Find better way to clean up the player\n if (this.enterAnimationPlayer) {\n this.enterAnimationPlayer.reset();\n this.enterAnimationPlayer = null;\n }\n this.animationPosition = 0;\n this.newDuration = 0;\n this.previousItem.previous = false;\n this.enterAnimationDone.emit();\n this.cdr.markForCheck();\n });\n this.previousItem.previous = true;\n this.enterAnimationPlayer.play();\n }\n playLeaveAnimation() {\n const animation = this.getAnimation().leaveAnimation;\n if (!animation) {\n return;\n }\n this.leaveAnimationPlayer = this.animationService.buildAnimation(animation, this.getPreviousElement());\n this.leaveAnimationPlayer.animationEnd.subscribe(() => {\n // TODO: animation may never end. Find better way to clean up the player\n if (this.leaveAnimationPlayer) {\n this.leaveAnimationPlayer.reset();\n this.leaveAnimationPlayer = null;\n }\n this.animationPosition = 0;\n this.newDuration = 0;\n this.leaveAnimationDone.emit();\n });\n this.leaveAnimationPlayer.play();\n }\n};\nIgxCarouselComponentBase = __decorate([\n __param(0, Inject(IgxAngularAnimationService))\n], IgxCarouselComponentBase);\n\nclass IgxCarouselIndicatorDirective {\n}\nIgxCarouselIndicatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxCarouselIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });\nIgxCarouselIndicatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxCarouselIndicatorDirective, selector: \"[igxCarouselIndicator]\", ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxCarouselIndicatorDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxCarouselIndicator]'\n }]\n }] });\nclass IgxCarouselNextButtonDirective {\n}\nIgxCarouselNextButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxCarouselNextButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });\nIgxCarouselNextButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxCarouselNextButtonDirective, selector: \"[igxCarouselNextButton]\", ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxCarouselNextButtonDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxCarouselNextButton]'\n }]\n }] });\nclass IgxCarouselPrevButtonDirective {\n}\nIgxCarouselPrevButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxCarouselPrevButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });\nIgxCarouselPrevButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxCarouselPrevButtonDirective, selector: \"[igxCarouselPrevButton]\", ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxCarouselPrevButtonDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxCarouselPrevButton]'\n }]\n }] });\n\n/**\n * A slide component that usually holds an image and/or a caption text.\n * IgxSlideComponent is usually a child component of an IgxCarouselComponent.\n *\n * ```\n * First Slide Header
\n *First slide Content
\n *Second Slide Header
\n *Second Slide Content
\n *\\n
\\n\\n
\\n\\n\\n
\\n\\n {{getCarouselLabel}}\\n
\\n\\n\\n
\\n\\n\\n
\\n\\n\\n
\\n\\n\\n\\n\", styles: [\":host{display:block;outline-style:none}\\n\"], dependencies: [{ kind: \"directive\", type: i1$1.NgClass, selector: \"[ngClass]\", inputs: [\"class\", \"ngClass\"] }, { kind: \"directive\", type: i1$1.NgForOf, selector: \"[ngFor][ngForOf]\", inputs: [\"ngForOf\", \"ngForTrackBy\", \"ngForTemplate\"] }, { kind: \"directive\", type: i1$1.NgIf, selector: \"[ngIf]\", inputs: [\"ngIf\", \"ngIfThen\", \"ngIfElse\"] }, { kind: \"directive\", type: i1$1.NgTemplateOutlet, selector: \"[ngTemplateOutlet]\", inputs: [\"ngTemplateOutletContext\", \"ngTemplateOutlet\", \"ngTemplateOutletInjector\"] }, { kind: \"component\", type: IgxIconComponent, selector: \"igx-icon\", inputs: [\"family\", \"active\", \"name\"] }] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxCarouselComponent, decorators: [{\n type: Component,\n args: [{ providers: [\n {\n provide: HAMMER_GESTURE_CONFIG,\n useClass: CarouselHammerConfig\n }\n ], selector: 'igx-carousel', template: \"\\n
\\n\\n
\\n\\n\\n
\\n\\n {{getCarouselLabel}}\\n
\\n\\n\\n
\\n\\n\\n
\\n\\n\\n
\\n\\n\\n\\n\", styles: [\":host{display:block;outline-style:none}\\n\"] }]\n }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: undefined, decorators: [{\n type: Inject,\n args: [IgxAngularAnimationService]\n }] }, { type: PlatformUtil }]; }, propDecorators: { id: [{\n type: HostBinding,\n args: ['attr.id']\n }, {\n type: Input\n }], role: [{\n type: HostBinding,\n args: ['attr.role']\n }], roleDescription: [{\n type: HostBinding,\n args: ['attr.aria-roledescription']\n }], labelId: [{\n type: HostBinding,\n args: ['attr.aria-labelledby']\n }], cssClass: [{\n type: HostBinding,\n args: ['class.igx-carousel']\n }], touchAction: [{\n type: HostBinding,\n args: ['style.touch-action']\n }], loop: [{\n type: Input\n }], pause: [{\n type: Input\n }], navigation: [{\n type: Input\n }], keyboardSupport: [{\n type: Input\n }], gesturesSupport: [{\n type: Input\n }], maximumIndicatorsCount: [{\n type: Input\n }], indicatorsOrientation: [{\n type: Input\n }], animationType: [{\n type: Input\n }], indicatorTemplate: [{\n type: ContentChild,\n args: [IgxCarouselIndicatorDirective, { read: TemplateRef, static: false }]\n }], nextButtonTemplate: [{\n type: ContentChild,\n args: [IgxCarouselNextButtonDirective, { read: TemplateRef, static: false }]\n }], prevButtonTemplate: [{\n type: ContentChild,\n args: [IgxCarouselPrevButtonDirective, { read: TemplateRef, static: false }]\n }], slides: [{\n type: ContentChildren,\n args: [IgxSlideComponent]\n }], slideChanged: [{\n type: Output\n }], slideAdded: [{\n type: Output\n }], slideRemoved: [{\n type: Output\n }], carouselPaused: [{\n type: Output\n }], carouselPlaying: [{\n type: Output\n }], defaultIndicator: [{\n type: ViewChild,\n args: ['defaultIndicator', { read: TemplateRef, static: true }]\n }], defaultNextButton: [{\n type: ViewChild,\n args: ['defaultNextButton', { read: TemplateRef, static: true }]\n }], defaultPrevButton: [{\n type: ViewChild,\n args: ['defaultPrevButton', { read: TemplateRef, static: true }]\n }], resourceStrings: [{\n type: Input\n }], interval: [{\n type: Input\n }], onKeydownArrowRight: [{\n type: HostListener,\n args: ['keydown.arrowright', ['$event']]\n }], onKeydownArrowLeft: [{\n type: HostListener,\n args: ['keydown.arrowleft', ['$event']]\n }], onTap: [{\n type: HostListener,\n args: ['tap', ['$event']]\n }], onKeydownHome: [{\n type: HostListener,\n args: ['keydown.home', ['$event']]\n }], onKeydownEnd: [{\n type: HostListener,\n args: ['keydown.end', ['$event']]\n }], onMouseEnter: [{\n type: HostListener,\n args: ['mouseenter']\n }], onMouseLeave: [{\n type: HostListener,\n args: ['mouseleave']\n }], onPanLeft: [{\n type: HostListener,\n args: ['panleft', ['$event']]\n }], onPanRight: [{\n type: HostListener,\n args: ['panright', ['$event']]\n }], onPanEnd: [{\n type: HostListener,\n args: ['panend', ['$event']]\n }] } });\n/**\n * @hidden\n */\nclass IgxCarouselModule {\n}\nIgxCarouselModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });\nIgxCarouselModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: \"14.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxCarouselModule, declarations: [IgxCarouselComponent, IgxSlideComponent,\n IgxCarouselIndicatorDirective,\n IgxCarouselNextButtonDirective,\n IgxCarouselPrevButtonDirective], imports: [CommonModule, IgxIconModule], exports: [IgxCarouselComponent, IgxSlideComponent,\n IgxCarouselIndicatorDirective,\n IgxCarouselNextButtonDirective,\n IgxCarouselPrevButtonDirective] });\nIgxCarouselModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxCarouselModule, imports: [CommonModule, IgxIconModule] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxCarouselModule, decorators: [{\n type: NgModule,\n args: [{\n declarations: [\n IgxCarouselComponent,\n IgxSlideComponent,\n IgxCarouselIndicatorDirective,\n IgxCarouselNextButtonDirective,\n IgxCarouselPrevButtonDirective\n ],\n exports: [\n IgxCarouselComponent,\n IgxSlideComponent,\n IgxCarouselIndicatorDirective,\n IgxCarouselNextButtonDirective,\n IgxCarouselPrevButtonDirective\n ],\n imports: [CommonModule, IgxIconModule]\n }]\n }] });\n\nlet CHIP_ID = 0;\n/**\n * Chip is compact visual component that displays information in an obround.\n *\n * @igxModule IgxChipsModule\n *\n * @igxTheme igx-chip-theme\n *\n * @igxKeywords chip\n *\n * @igxGroup display\n *\n * @remarks\n * The Ignite UI Chip can be templated, deleted, and selected.\n * Multiple chips can be reordered and visually connected to each other.\n * Chips reside in a container called chips area which is responsible for managing the interactions between the chips.\n *\n * @example\n * ```html\n * \\n\\n
\\n\\n\\n
\\n\\n \\n
\\n\\n \\n
\\n\\n\\n
\\n\\n\\n
\\n\\n \\n
\\n\\n \\n
\\nCustom header
\n * \n *\t\t\tState: {{ display[key] }}\n *\t \t\tRegion: {{ display.region }}\n *\t \t
\n *\t \n * There are no items to display\n *
\n * Group header for {{ item[key] }}
\n * \n *
\n * {{ item[key] }}
\n * {{ item.cost }}
\n * \n * This is a custom header\n *
\n * Group header for {{ item[key] }}
\n * \n * There are no items to display\n *
\n * \\n
\\n\", dependencies: [{ kind: \"directive\", type: i1$1.NgIf, selector: \"[ngIf]\", inputs: [\"ngIf\", \"ngIfThen\", \"ngIfElse\"] }, { kind: \"directive\", type: IgxToggleDirective, selector: \"[igxToggle]\", inputs: [\"id\"], outputs: [\"opened\", \"opening\", \"closed\", \"closing\", \"appended\"], exportAs: [\"toggle\"] }] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxComboDropDownComponent, decorators: [{\n type: Component,\n args: [{ selector: 'igx-combo-drop-down', providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }], template: \"\\n \\n \\n
\\n\\n
\\n\" }]\n }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: undefined, decorators: [{\n type: Inject,\n args: [IGX_COMBO_COMPONENT]\n }] }, { type: IgxComboAPIService }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [DisplayDensityToken]\n }] }]; }, propDecorators: { singleMode: [{\n type: Input\n }], children: [{\n type: ContentChildren,\n args: [IgxComboItemComponent, { descendants: true }]\n }] } });\n\n/** @hidden */\nclass IgxComboFilteringPipe {\n transform(collection, searchValue, displayKey, filteringOptions, filterFunction = defaultFilterFunction) {\n if (!collection) {\n return [];\n }\n if (!filteringOptions.filterable) {\n return collection;\n }\n filteringOptions.filteringKey = filteringOptions.filteringKey ?? displayKey;\n return filterFunction(collection, searchValue, filteringOptions);\n }\n}\nIgxComboFilteringPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxComboFilteringPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });\nIgxComboFilteringPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: \"14.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxComboFilteringPipe, name: \"comboFiltering\" });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxComboFilteringPipe, decorators: [{\n type: Pipe,\n args: [{ name: 'comboFiltering' }]\n }] });\n/** @hidden */\nclass IgxComboGroupingPipe {\n constructor(combo) {\n this.combo = combo;\n }\n transform(collection, groupKey, valueKey, sortingDirection) {\n // TODO: should filteredData be changed here?\n this.combo.filteredData = collection;\n if ((!groupKey && groupKey !== 0) || !collection.length) {\n return collection;\n }\n const sorted = DataUtil.sort(cloneArray(collection), [{\n fieldName: groupKey,\n dir: sortingDirection,\n ignoreCase: true,\n strategy: DefaultSortingStrategy.instance()\n }]);\n const data = cloneArray(sorted);\n let inserts = 0;\n let currentHeader = null;\n for (let i = 0; i < sorted.length; i++) {\n let insertFlag = 0;\n if (currentHeader !== sorted[i][groupKey]) {\n currentHeader = sorted[i][groupKey];\n insertFlag = 1;\n }\n if (insertFlag) {\n data.splice(i + inserts, 0, {\n [valueKey]: currentHeader,\n [groupKey]: currentHeader,\n isHeader: true\n });\n inserts++;\n }\n }\n return data;\n }\n}\nIgxComboGroupingPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxComboGroupingPipe, deps: [{ token: IGX_COMBO_COMPONENT }], target: i0.ɵɵFactoryTarget.Pipe });\nIgxComboGroupingPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: \"14.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxComboGroupingPipe, name: \"comboGrouping\" });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxComboGroupingPipe, decorators: [{\n type: Pipe,\n args: [{ name: 'comboGrouping' }]\n }], ctorParameters: function () { return [{ type: undefined, decorators: [{\n type: Inject,\n args: [IGX_COMBO_COMPONENT]\n }] }]; } });\nfunction defaultFilterFunction(collection, searchValue, filteringOptions) {\n if (!searchValue) {\n return collection;\n }\n const searchTerm = filteringOptions.caseSensitive ? searchValue : searchValue.toLowerCase();\n if (filteringOptions.filteringKey != null) {\n return collection.filter(e => filteringOptions.caseSensitive ?\n e[filteringOptions.filteringKey]?.includes(searchTerm) :\n e[filteringOptions.filteringKey]?.toString().toLowerCase().includes(searchTerm));\n }\n else {\n return collection.filter(e => filteringOptions.caseSensitive ?\n e?.includes(searchTerm) :\n e?.toString().toLowerCase().includes(searchTerm));\n }\n}\n\n/**\n * When called with sets A & B, returns A - B (as array);\n *\n * @hidden\n */\nconst diffInSets = (set1, set2) => {\n const results = [];\n set1.forEach(entry => {\n if (!set2.has(entry)) {\n results.push(entry);\n }\n });\n return results;\n};\n/**\n * Represents a drop-down list that provides editable functionalities, allowing users to choose an option from a predefined list.\n *\n * @igxModule IgxComboModule\n * @igxTheme igx-combo-theme\n * @igxKeywords combobox, combo selection\n * @igxGroup Grids & Lists\n *\n * @remarks\n * It provides the ability to filter items as well as perform selection with the provided data.\n * Additionally, it exposes keyboard navigation and custom styling capabilities.\n * @example\n * ```html\n * \\n \\n \\n
\\n\\n \\n \\n \\n \\n \\n \\n
\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n
\\n \\n \\n \\n \\n \\n
\\n \\n \\n \\n
\\n \\n \\n \\n \\n \\n \\n \\n
\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n
\\n \\n \\n \\n \\n \\n
\\n \\n \\n \\n
\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n
\\n\\n \\n \\n \\n \\n \\n
\\n \\n \\n \\n
\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n
\\n\\n \\n \\n \\n \\n \\n
\\n \\n \\n \\n
\\n \n * \n * \n * \n * \n *
\n * \n * \n * \n * \n * \n *
\n * \n * The `raised` type button is also a rectangle but has a shadow.
\n * The `fab` type button is a circle with a shadow.
\n * The default value is `flat`.\n * ```html\n *
\n * The `raised` type button is also a rectangle but has a shadow.
\n * The `fab` type button is a circle with a shadow.
\n * The default value is `flat`.\n * ```html\n *
\\n
\\n\", dependencies: [{ kind: \"directive\", type: i1$1.NgIf, selector: \"[ngIf]\", inputs: [\"ngIf\", \"ngIfThen\", \"ngIfElse\"] }, { kind: \"directive\", type: IgxToggleDirective, selector: \"[igxToggle]\", inputs: [\"id\"], outputs: [\"opened\", \"opening\", \"closed\", \"closing\", \"appended\"], exportAs: [\"toggle\"] }, { kind: \"directive\", type: IgxButtonDirective, selector: \"[igxButton]\", inputs: [\"selected\", \"igxButton\", \"igxButtonColor\", \"igxButtonBackground\", \"igxLabel\", \"disabled\"], outputs: [\"buttonClick\", \"buttonSelected\"] }, { kind: \"directive\", type: IgxRippleDirective, selector: \"[igxRipple]\", inputs: [\"igxRippleTarget\", \"igxRipple\", \"igxRippleDuration\", \"igxRippleCentered\", \"igxRippleDisabled\"] }, { kind: \"directive\", type: IgxFocusDirective, selector: \"[igxFocus]\", inputs: [\"igxFocus\"], exportAs: [\"igxFocus\"] }, { kind: \"directive\", type: IgxFocusTrapDirective, selector: \"[igxFocusTrap]\", inputs: [\"igxFocusTrap\"] }] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxDialogComponent, decorators: [{\n type: Component,\n args: [{ selector: 'igx-dialog', template: \"\\n\\n
\\n\\n {{ title }}\\n
\\n \\n \\n
\\n\\n \\n \\n \\n
\\n \\n
\\n\" }]\n }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: IgxNavigationService, decorators: [{\n type: Optional\n }] }]; }, propDecorators: { toggleRef: [{\n type: ViewChild,\n args: [IgxToggleDirective, { static: true }]\n }], id: [{\n type: HostBinding,\n args: ['attr.id']\n }, {\n type: Input\n }], isModal: [{\n type: Input\n }], closeOnEscape: [{\n type: Input\n }], focusTrap: [{\n type: Input\n }], title: [{\n type: Input\n }], message: [{\n type: Input\n }], leftButtonLabel: [{\n type: Input\n }], leftButtonType: [{\n type: Input\n }], leftButtonColor: [{\n type: Input\n }], leftButtonBackgroundColor: [{\n type: Input\n }], leftButtonRipple: [{\n type: Input\n }], rightButtonLabel: [{\n type: Input\n }], rightButtonType: [{\n type: Input\n }], rightButtonColor: [{\n type: Input\n }], rightButtonBackgroundColor: [{\n type: Input\n }], rightButtonRipple: [{\n type: Input\n }], closeOnOutsideSelect: [{\n type: Input\n }], positionSettings: [{\n type: Input\n }], tabindex: [{\n type: HostBinding,\n args: ['attr.tabindex']\n }], opening: [{\n type: Output\n }], opened: [{\n type: Output\n }], closing: [{\n type: Output\n }], closed: [{\n type: Output\n }], leftButtonSelect: [{\n type: Output\n }], rightButtonSelect: [{\n type: Output\n }], isOpenChange: [{\n type: Output\n }], isOpen: [{\n type: Input\n }], isCollapsed: [{\n type: HostBinding,\n args: ['class.igx-dialog--hidden']\n }], role: [{\n type: Input\n }], titleId: [{\n type: Input\n }] } });\n/**\n * @hidden\n */\nclass IgxDialogModule {\n}\nIgxDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });\nIgxDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: \"14.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxDialogModule, declarations: [IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective], imports: [CommonModule, IgxToggleModule, IgxButtonModule, IgxRippleModule, IgxFocusModule, IgxFocusTrapModule], exports: [IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective] });\nIgxDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxDialogModule, imports: [CommonModule, IgxToggleModule, IgxButtonModule, IgxRippleModule, IgxFocusModule, IgxFocusTrapModule] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxDialogModule, decorators: [{\n type: NgModule,\n args: [{\n declarations: [IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective],\n exports: [IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective],\n imports: [CommonModule, IgxToggleModule, IgxButtonModule, IgxRippleModule, IgxFocusModule, IgxFocusTrapModule]\n }]\n }] });\n\nclass BaseFilteringComponent {\n constructor(cdr, element, platform) {\n this.cdr = cdr;\n this.element = element;\n this.platform = platform;\n }\n}\nBaseFilteringComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: BaseFilteringComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Directive });\nBaseFilteringComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: BaseFilteringComponent, ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: BaseFilteringComponent, decorators: [{\n type: Directive\n }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: PlatformUtil }]; } });\n\n/**\n * A component used for presenting Excel style clear filters UI.\n */\nclass IgxExcelStyleClearFiltersComponent {\n constructor(esf, platform) {\n this.esf = esf;\n this.platform = platform;\n }\n /**\n * @hidden @internal\n */\n clearFilterClass() {\n if (this.esf.column.filteringExpressionsTree) {\n return 'igx-excel-filter__actions-clear';\n }\n return 'igx-excel-filter__actions-clear--disabled';\n }\n /**\n * @hidden @internal\n */\n clearFilter() {\n this.esf.grid.filteringService.clearFilter(this.esf.column.field);\n this.selectAllFilterItems();\n }\n /**\n * @hidden @internal\n */\n onClearFilterKeyDown(eventArgs) {\n if (eventArgs.key === this.platform.KEYMAP.ENTER) {\n this.clearFilter();\n }\n }\n selectAllFilterItems() {\n this.esf.listData.forEach(filterListItem => {\n filterListItem.isSelected = true;\n filterListItem.indeterminate = false;\n });\n this.esf.detectChanges();\n }\n}\nIgxExcelStyleClearFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxExcelStyleClearFiltersComponent, deps: [{ token: BaseFilteringComponent }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });\nIgxExcelStyleClearFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxExcelStyleClearFiltersComponent, selector: \"igx-excel-style-clear-filters\", ngImport: i0, template: \"\\n\\n
\\n\\n {{ title }}\\n
\\n \\n \\n
\\n\\n \\n \\n \\n
\\n \\n {{ esf.grid.resourceStrings.igx_grid_excel_filter_clear }}\\n clear \\n
\\n\", dependencies: [{ kind: \"directive\", type: i1$1.NgClass, selector: \"[ngClass]\", inputs: [\"class\", \"ngClass\"] }, { kind: \"directive\", type: i1$1.NgIf, selector: \"[ngIf]\", inputs: [\"ngIf\", \"ngIfThen\", \"ngIfElse\"] }, { kind: \"component\", type: IgxIconComponent, selector: \"igx-icon\", inputs: [\"family\", \"active\", \"name\"] }] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxExcelStyleClearFiltersComponent, decorators: [{\n type: Component,\n args: [{ selector: 'igx-excel-style-clear-filters', template: \"\\n {{ esf.grid.resourceStrings.igx_grid_excel_filter_clear }}\\n clear \\n
\\n\" }]\n }], ctorParameters: function () { return [{ type: BaseFilteringComponent }, { type: PlatformUtil }]; } });\n\nclass IgxSelectItemComponent extends IgxDropDownItemComponent {\n /**\n * An @Input property that gets/sets the item's text to be displayed in the select component's input when the item is selected.\n *\n * ```typescript\n * //get\n * let mySelectedItem = this.dropDown.selectedItem;\n * let selectedItemText = mySelectedItem.text;\n * ```\n *\n * ```html\n * // set\n * \n * This is a custom header\n *
\n * \\n\\n
\\n\", styles: [\":host{display:block}\\n\"], dependencies: [{ kind: \"directive\", type: i1$1.NgIf, selector: \"[ngIf]\", inputs: [\"ngIf\", \"ngIfThen\", \"ngIfElse\"] }, { kind: \"directive\", type: i1$1.NgTemplateOutlet, selector: \"[ngTemplateOutlet]\", inputs: [\"ngTemplateOutletContext\", \"ngTemplateOutlet\", \"ngTemplateOutletInjector\"] }, { kind: \"component\", type: IgxIconComponent, selector: \"igx-icon\", inputs: [\"family\", \"active\", \"name\"] }, { kind: \"component\", type: IgxInputGroupComponent, selector: \"igx-input-group\", inputs: [\"resourceStrings\", \"suppressInputAutofocus\", \"type\", \"theme\"] }, { kind: \"directive\", type: IgxInputDirective, selector: \"[igxInput]\", inputs: [\"value\", \"disabled\", \"required\"], exportAs: [\"igxInput\"] }, { kind: \"directive\", type: IgxSuffixDirective, selector: \"igx-suffix,[igxSuffix],[igxEnd]\" }, { kind: \"directive\", type: IgxToggleDirective, selector: \"[igxToggle]\", inputs: [\"id\"], outputs: [\"opened\", \"opening\", \"closed\", \"closing\", \"appended\"], exportAs: [\"toggle\"] }, { kind: \"directive\", type: IgxSelectItemNavigationDirective, selector: \"[igxSelectItemNavigation]\", inputs: [\"igxSelectItemNavigation\"] }] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxSelectComponent, decorators: [{\n type: Component,\n args: [{ selector: 'igx-select', providers: [\n { provide: NG_VALUE_ACCESSOR, useExisting: IgxSelectComponent, multi: true },\n { provide: IGX_DROPDOWN_BASE, useExisting: IgxSelectComponent }\n ], template: \"\\n
\\n\\n \\n \\n
\\n\\n \\n\\n\\n
\\n\", styles: [\":host{display:block}\\n\"] }]\n }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: IgxOverlayService, decorators: [{\n type: Inject,\n args: [IgxOverlayService]\n }] }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [DisplayDensityToken]\n }] }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [IGX_INPUT_GROUP_TYPE]\n }] }, { type: i0.Injector }]; }, propDecorators: { inputGroup: [{\n type: ViewChild,\n args: ['inputGroup', { read: IgxInputGroupComponent, static: true }]\n }], input: [{\n type: ViewChild,\n args: ['input', { read: IgxInputDirective, static: true }]\n }], children: [{\n type: ContentChildren,\n args: [forwardRef(() => IgxSelectItemComponent), { descendants: true }]\n }], prefixes: [{\n type: ContentChildren,\n args: [IgxPrefixDirective, { descendants: true }]\n }], suffixes: [{\n type: ContentChildren,\n args: [IgxSuffixDirective, { descendants: true }]\n }], label: [{\n type: ContentChild,\n args: [forwardRef(() => IgxLabelDirective), { static: true }]\n }], placeholder: [{\n type: Input\n }], disabled: [{\n type: Input\n }], overlaySettings: [{\n type: Input\n }], maxHeight: [{\n type: HostBinding,\n args: ['style.maxHeight']\n }], opening: [{\n type: Output\n }], opened: [{\n type: Output\n }], closing: [{\n type: Output\n }], closed: [{\n type: Output\n }], toggleIconTemplate: [{\n type: ContentChild,\n args: [IgxSelectToggleIconDirective, { read: TemplateRef }]\n }], headerTemplate: [{\n type: ContentChild,\n args: [IgxSelectHeaderDirective, { read: TemplateRef, static: false }]\n }], footerTemplate: [{\n type: ContentChild,\n args: [IgxSelectFooterDirective, { read: TemplateRef, static: false }]\n }], hintElement: [{\n type: ContentChild,\n args: [IgxHintDirective, { read: ElementRef }]\n }], value: [{\n type: Input\n }], type: [{\n type: Input\n }] } });\n\n/**\n * @hidden\n */\nclass IgxExcelStyleDefaultExpressionComponent {\n get isLast() {\n return this.expressionsList[this.expressionsList.length - 1] === this.expressionUI;\n }\n get isSingle() {\n return this.expressionsList.length === 1;\n }\n get conditionsPlaceholder() {\n return this.grid.resourceStrings['igx_grid_filter_condition_placeholder'];\n }\n get inputValuePlaceholder() {\n return this.grid.resourceStrings['igx_grid_filter_row_placeholder'];\n }\n get type() {\n switch (this.column.dataType) {\n case GridColumnDataType.Number:\n case GridColumnDataType.Currency:\n case GridColumnDataType.Percent:\n return 'number';\n default:\n return 'text';\n }\n }\n constructor(cdr, platform) {\n this.cdr = cdr;\n this.platform = platform;\n this.expressionRemoved = new EventEmitter();\n this.logicOperatorChanged = new EventEmitter();\n this.dropDownOverlaySettings = {\n scrollStrategy: new AbsoluteScrollStrategy(),\n modal: false,\n closeOnOutsideClick: true\n };\n }\n get conditions() {\n return this.column.filters.conditionList();\n }\n get inputValuesElement() {\n return this.inputValuesDirective.nativeElement;\n }\n ngAfterViewInit() {\n this.dropDownOverlaySettings.outlet = this.overlayOutlet;\n this.dropDownOverlaySettings.target = this.dropdownConditions.inputGroup.element.nativeElement;\n this.dropDownOverlaySettings.excludeFromOutsideClick = [this.dropdownConditions.inputGroup.element.nativeElement];\n this.dropDownOverlaySettings.positionStrategy = new ConnectedPositioningStrategy();\n }\n focus() {\n // use requestAnimationFrame to focus the values input because when initializing the component\n // datepicker's input group is not yet fully initialized\n requestAnimationFrame(() => this.inputValuesElement.focus());\n }\n translateCondition(value) {\n return this.grid.resourceStrings[`igx_grid_filter_${this.getCondition(value).name}`] || value;\n }\n getIconName() {\n if (this.column.dataType === GridColumnDataType.Boolean && this.expressionUI.expression.condition === null) {\n return this.getCondition(this.conditions[0]).iconName;\n }\n else if (!this.expressionUI.expression.condition) {\n return 'filter_list';\n }\n else {\n return this.expressionUI.expression.condition.iconName;\n }\n }\n isConditionSelected(conditionName) {\n return this.expressionUI.expression.condition && this.expressionUI.expression.condition.name === conditionName;\n }\n onConditionsChanged(eventArgs) {\n const value = eventArgs.newSelection.value;\n this.expressionUI.expression.condition = this.getCondition(value);\n this.focus();\n }\n getCondition(value) {\n return this.column.filters.condition(value);\n }\n getConditionFriendlyName(name) {\n return this.grid.resourceStrings[`igx_grid_filter_${name}`] || name;\n }\n onValuesInput(eventArgs) {\n this.expressionUI.expression.searchVal = DataUtil.parseValue(this.column.dataType, eventArgs.target.value);\n }\n onLogicOperatorButtonClicked(eventArgs, buttonIndex) {\n if (this.logicOperatorButtonGroup.selectedButtons.length === 0) {\n eventArgs.stopPropagation();\n this.logicOperatorButtonGroup.selectButton(buttonIndex);\n }\n else {\n this.logicOperatorChanged.emit({\n target: this.expressionUI,\n newValue: buttonIndex\n });\n }\n }\n onLogicOperatorKeyDown(eventArgs, buttonIndex) {\n if (eventArgs.key === this.platform.KEYMAP.ENTER) {\n this.logicOperatorButtonGroup.selectButton(buttonIndex);\n this.logicOperatorChanged.emit({\n target: this.expressionUI,\n newValue: buttonIndex\n });\n }\n }\n onRemoveButtonClick() {\n this.expressionRemoved.emit(this.expressionUI);\n }\n onOutletPointerDown(event) {\n event.preventDefault();\n }\n}\nIgxExcelStyleDefaultExpressionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxExcelStyleDefaultExpressionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });\nIgxExcelStyleDefaultExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxExcelStyleDefaultExpressionComponent, selector: \"igx-excel-style-default-expression\", inputs: { column: \"column\", expressionUI: \"expressionUI\", expressionsList: \"expressionsList\", grid: \"grid\", displayDensity: \"displayDensity\" }, outputs: { expressionRemoved: \"expressionRemoved\", logicOperatorChanged: \"logicOperatorChanged\" }, viewQueries: [{ propertyName: \"overlayOutlet\", first: true, predicate: [\"overlayOutlet\"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: \"dropdownConditions\", first: true, predicate: [\"dropdownConditions\"], descendants: true, read: IgxSelectComponent, static: true }, { propertyName: \"logicOperatorButtonGroup\", first: true, predicate: [\"logicOperatorButtonGroup\"], descendants: true, read: IgxButtonGroupComponent }, { propertyName: \"inputValuesDirective\", first: true, predicate: [\"inputValues\"], descendants: true, read: IgxInputDirective, static: true }], ngImport: i0, template: \"\\n
\\n\\n \\n \\n
\\n\\n \\n\\n
\\n \\n
\\n\", dependencies: [{ kind: \"directive\", type: i1$1.NgForOf, selector: \"[ngFor][ngForOf]\", inputs: [\"ngForOf\", \"ngForTrackBy\", \"ngForTemplate\"] }, { kind: \"directive\", type: i1$1.NgIf, selector: \"[ngIf]\", inputs: [\"ngIf\", \"ngIfThen\", \"ngIfElse\"] }, { kind: \"directive\", type: IgxButtonDirective, selector: \"[igxButton]\", inputs: [\"selected\", \"igxButton\", \"igxButtonColor\", \"igxButtonBackground\", \"igxLabel\", \"disabled\"], outputs: [\"buttonClick\", \"buttonSelected\"] }, { kind: \"component\", type: IgxButtonGroupComponent, selector: \"igx-buttongroup\", inputs: [\"id\", \"itemContentCssClass\", \"multiSelection\", \"values\", \"disabled\", \"alignment\"], outputs: [\"selected\", \"deselected\"] }, { kind: \"component\", type: IgxInputGroupComponent, selector: \"igx-input-group\", inputs: [\"resourceStrings\", \"suppressInputAutofocus\", \"type\", \"theme\"] }, { kind: \"directive\", type: IgxInputDirective, selector: \"[igxInput]\", inputs: [\"value\", \"disabled\", \"required\"], exportAs: [\"igxInput\"] }, { kind: \"directive\", type: IgxPrefixDirective, selector: \"igx-prefix,[igxPrefix],[igxStart]\" }, { kind: \"component\", type: IgxIconComponent, selector: \"igx-icon\", inputs: [\"family\", \"active\", \"name\"] }, { kind: \"directive\", type: IgxOverlayOutletDirective, selector: \"[igxOverlayOutlet]\", exportAs: [\"overlay-outlet\"] }, { kind: \"component\", type: IgxSelectComponent, selector: \"igx-select\", inputs: [\"placeholder\", \"disabled\", \"overlaySettings\", \"value\", \"type\"], outputs: [\"opening\", \"opened\", \"closing\", \"closed\"] }, { kind: \"component\", type: IgxSelectItemComponent, selector: \"igx-select-item\", inputs: [\"text\"] }] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxExcelStyleDefaultExpressionComponent, decorators: [{\n type: Component,\n args: [{ selector: 'igx-excel-style-default-expression', template: \"\\n
\\n \\n
\\n\" }]\n }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: PlatformUtil }]; }, propDecorators: { column: [{\n type: Input\n }], expressionUI: [{\n type: Input\n }], expressionsList: [{\n type: Input\n }], grid: [{\n type: Input\n }], displayDensity: [{\n type: Input\n }], expressionRemoved: [{\n type: Output\n }], logicOperatorChanged: [{\n type: Output\n }], overlayOutlet: [{\n type: ViewChild,\n args: ['overlayOutlet', { read: IgxOverlayOutletDirective, static: true }]\n }], dropdownConditions: [{\n type: ViewChild,\n args: ['dropdownConditions', { read: IgxSelectComponent, static: true }]\n }], logicOperatorButtonGroup: [{\n type: ViewChild,\n args: ['logicOperatorButtonGroup', { read: IgxButtonGroupComponent }]\n }], inputValuesDirective: [{\n type: ViewChild,\n args: ['inputValues', { read: IgxInputDirective, static: true }]\n }] } });\n\nconst EVENT_SUFFIX = 'precise';\n/**\n * Touch gestures manager based on Hammer.js\n * Use with caution, this will track references for single manager per element. Very TBD. Much TODO.\n *\n * @hidden\n */\nclass HammerGesturesManager {\n constructor(_zone, doc, platformUtil) {\n this._zone = _zone;\n this.doc = doc;\n this.platformUtil = platformUtil;\n /**\n * Event option defaults for each recognizer, see http://hammerjs.github.io/api/ for API listing.\n */\n this.hammerOptions = {};\n this._hammerManagers = [];\n this.platformBrowser = this.platformUtil.isBrowser;\n if (this.platformBrowser) {\n this.hammerOptions = {\n // D.P. #447 Force TouchInput due to PointerEventInput bug (https://github.com/hammerjs/hammer.js/issues/1065)\n // see https://github.com/IgniteUI/igniteui-angular/issues/447#issuecomment-324601803\n inputClass: Hammer.TouchInput,\n recognizers: [\n [Hammer.Pan, { threshold: 0 }],\n [Hammer.Swipe, { direction: Hammer.DIRECTION_HORIZONTAL }],\n [Hammer.Tap],\n [Hammer.Tap, { event: 'doubletap', taps: 2 }, ['tap']]\n ]\n };\n }\n }\n supports(eventName) {\n return eventName.toLowerCase().endsWith('.' + EVENT_SUFFIX);\n }\n /**\n * Add listener extended with options for Hammer.js. Will use defaults if none are provided.\n * Modeling after other event plugins for easy future modifications.\n */\n addEventListener(element, eventName, eventHandler, options = null) {\n if (!this.platformBrowser) {\n return;\n }\n // Creating the manager bind events, must be done outside of angular\n return this._zone.runOutsideAngular(() => {\n let mc = this.getManagerForElement(element);\n if (mc === null) {\n // new Hammer is a shortcut for Manager with defaults\n mc = new Hammer(element, Object.assign(this.hammerOptions, options));\n this.addManagerForElement(element, mc);\n }\n const handler = (eventObj) => this._zone.run(() => eventHandler(eventObj));\n mc.on(eventName, handler);\n return () => mc.off(eventName, handler);\n });\n }\n /**\n * Add listener extended with options for Hammer.js. Will use defaults if none are provided.\n * Modeling after other event plugins for easy future modifications.\n *\n * @param target Can be one of either window, body or document(fallback default).\n */\n addGlobalEventListener(target, eventName, eventHandler) {\n if (!this.platformBrowser) {\n return;\n }\n const element = this.getGlobalEventTarget(target);\n // Creating the manager bind events, must be done outside of angular\n return this.addEventListener(element, eventName, eventHandler);\n }\n /**\n * Exposes [Dom]Adapter.getGlobalEventTarget to get global event targets.\n * Supported: window, document, body. Defaults to document for invalid args.\n *\n * @param target Target name\n */\n getGlobalEventTarget(target) {\n return ɵgetDOM().getGlobalEventTarget(this.doc, target);\n }\n /**\n * Set HammerManager options.\n *\n * @param element The DOM element used to create the manager on.\n *\n * ### Example\n *\n * ```ts\n * manager.setManagerOption(myElem, \"pan\", { pointers: 1 });\n * ```\n */\n setManagerOption(element, event, options) {\n const manager = this.getManagerForElement(element);\n manager.get(event).set(options);\n }\n /**\n * Add an element and manager map to the internal collection.\n *\n * @param element The DOM element used to create the manager on.\n */\n addManagerForElement(element, manager) {\n this._hammerManagers.push({ element, manager });\n }\n /**\n * Get HammerManager for the element or null\n *\n * @param element The DOM element used to create the manager on.\n */\n getManagerForElement(element) {\n const result = this._hammerManagers.filter(value => value.element === element);\n return result.length ? result[0].manager : null;\n }\n /**\n * Destroys the HammerManager for the element, removing event listeners in the process.\n *\n * @param element The DOM element used to create the manager on.\n */\n removeManagerForElement(element) {\n let index = null;\n for (let i = 0; i < this._hammerManagers.length; i++) {\n if (element === this._hammerManagers[i].element) {\n index = i;\n break;\n }\n }\n if (index !== null) {\n const item = this._hammerManagers.splice(index, 1)[0];\n // destroy also\n item.manager.destroy();\n }\n }\n /** Destroys all internally tracked HammerManagers, removing event listeners in the process. */\n destroy() {\n for (const item of this._hammerManagers) {\n item.manager.destroy();\n }\n this._hammerManagers = [];\n }\n}\nHammerGesturesManager.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: HammerGesturesManager, deps: [{ token: i0.NgZone }, { token: DOCUMENT }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Injectable });\nHammerGesturesManager.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: HammerGesturesManager });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: HammerGesturesManager, decorators: [{\n type: Injectable\n }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: undefined, decorators: [{\n type: Inject,\n args: [DOCUMENT]\n }] }, { type: PlatformUtil }]; } });\n\n/** @hidden */\nconst IGX_TIME_PICKER_COMPONENT = 'IgxTimePickerComponentToken';\n\n/**\n * This file contains all the directives used by the @link IgxTimePickerComponent.\n * You should generally not use them directly.\n *\n * @preferred\n */\n/** @hidden */\nclass IgxItemListDirective {\n constructor(timePicker, elementRef, touchManager) {\n this.timePicker = timePicker;\n this.elementRef = elementRef;\n this.touchManager = touchManager;\n this.tabindex = 0;\n this.onPanMove = (event) => {\n const delta = event.deltaY < 0 ? -1 : event.deltaY > 0 ? 1 : 0;\n if (delta !== 0) {\n this.nextItem(delta);\n }\n };\n }\n get defaultCSS() {\n return true;\n }\n get hourCSS() {\n return this.type === 'hourList';\n }\n get minuteCSS() {\n return this.type === 'minuteList';\n }\n get secondsCSS() {\n return this.type === 'secondsList';\n }\n get ampmCSS() {\n return this.type === 'ampmList';\n }\n onFocus() {\n this.isActive = true;\n }\n onBlur() {\n this.isActive = false;\n }\n /**\n * @hidden\n */\n onKeydownArrowDown(event) {\n event.preventDefault();\n this.nextItem(1);\n }\n /**\n * @hidden\n */\n onKeydownArrowUp(event) {\n event.preventDefault();\n this.nextItem(-1);\n }\n /**\n * @hidden\n */\n onKeydownArrowRight(event) {\n event.preventDefault();\n const listName = event.target.className;\n if (listName.indexOf('hourList') !== -1 && this.timePicker.minuteList) {\n this.timePicker.minuteList.nativeElement.focus();\n }\n else if ((listName.indexOf('hourList') !== -1 || listName.indexOf('minuteList') !== -1) && this.timePicker.secondsList) {\n this.timePicker.secondsList.nativeElement.focus();\n }\n else if ((listName.indexOf('hourList') !== -1 || listName.indexOf('minuteList') !== -1 ||\n listName.indexOf('secondsList') !== -1) && this.timePicker.ampmList) {\n this.timePicker.ampmList.nativeElement.focus();\n }\n }\n /**\n * @hidden\n */\n onKeydownArrowLeft(event) {\n event.preventDefault();\n const listName = event.target.className;\n if (listName.indexOf('ampmList') !== -1 && this.timePicker.secondsList) {\n this.timePicker.secondsList.nativeElement.focus();\n }\n else if (listName.indexOf('secondsList') !== -1 && this.timePicker.secondsList\n && listName.indexOf('minutesList') && this.timePicker.minuteList) {\n this.timePicker.minuteList.nativeElement.focus();\n }\n else if (listName.indexOf('ampmList') !== -1 && this.timePicker.minuteList) {\n this.timePicker.minuteList.nativeElement.focus();\n }\n else if ((listName.indexOf('ampmList') !== -1 || listName.indexOf('secondsList') !== -1 ||\n listName.indexOf('minuteList') !== -1) && this.timePicker.hourList) {\n this.timePicker.hourList.nativeElement.focus();\n }\n }\n /**\n * @hidden\n */\n onKeydownEnter(event) {\n event.preventDefault();\n this.timePicker.okButtonClick();\n }\n /**\n * @hidden\n */\n onKeydownEscape(event) {\n event.preventDefault();\n this.timePicker.cancelButtonClick();\n }\n /**\n * @hidden\n */\n onHover() {\n this.elementRef.nativeElement.focus();\n }\n /**\n * @hidden\n */\n onScroll(event) {\n event.preventDefault();\n event.stopPropagation();\n const delta = event.deltaY;\n if (delta !== 0) {\n this.nextItem(delta);\n }\n }\n /**\n * @hidden @internal\n */\n ngOnInit() {\n const hammerOptions = { recognizers: [[Hammer.Pan, { direction: Hammer.DIRECTION_VERTICAL, threshold: 10 }]] };\n this.touchManager.addEventListener(this.elementRef.nativeElement, 'pan', this.onPanMove, hammerOptions);\n }\n /**\n * @hidden @internal\n */\n ngOnDestroy() {\n this.touchManager.destroy();\n }\n nextItem(delta) {\n switch (this.type) {\n case 'hourList': {\n this.timePicker.nextHour(delta);\n break;\n }\n case 'minuteList': {\n this.timePicker.nextMinute(delta);\n break;\n }\n case 'secondsList': {\n this.timePicker.nextSeconds(delta);\n break;\n }\n case 'ampmList': {\n this.timePicker.nextAmPm(delta);\n break;\n }\n }\n }\n}\nIgxItemListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxItemListDirective, deps: [{ token: IGX_TIME_PICKER_COMPONENT }, { token: i0.ElementRef }, { token: HammerGesturesManager }], target: i0.ɵɵFactoryTarget.Directive });\nIgxItemListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxItemListDirective, selector: \"[igxItemList]\", inputs: { type: [\"igxItemList\", \"type\"] }, host: { listeners: { \"focus\": \"onFocus()\", \"blur\": \"onBlur()\", \"keydown.arrowdown\": \"onKeydownArrowDown($event)\", \"keydown.arrowup\": \"onKeydownArrowUp($event)\", \"keydown.arrowright\": \"onKeydownArrowRight($event)\", \"keydown.arrowleft\": \"onKeydownArrowLeft($event)\", \"keydown.enter\": \"onKeydownEnter($event)\", \"keydown.escape\": \"onKeydownEscape($event)\", \"mouseover\": \"onHover()\", \"wheel\": \"onScroll($event)\" }, properties: { \"attr.tabindex\": \"this.tabindex\", \"class.igx-time-picker__column\": \"this.defaultCSS\", \"class.igx-time-picker__hourList\": \"this.hourCSS\", \"class.igx-time-picker__minuteList\": \"this.minuteCSS\", \"class.igx-time-picker__secondsList\": \"this.secondsCSS\", \"class.igx-time-picker__ampmList\": \"this.ampmCSS\" } }, providers: [HammerGesturesManager], ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxItemListDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxItemList]',\n providers: [HammerGesturesManager]\n }]\n }], ctorParameters: function () { return [{ type: undefined, decorators: [{\n type: Inject,\n args: [IGX_TIME_PICKER_COMPONENT]\n }] }, { type: i0.ElementRef }, { type: HammerGesturesManager }]; }, propDecorators: { tabindex: [{\n type: HostBinding,\n args: ['attr.tabindex']\n }], type: [{\n type: Input,\n args: ['igxItemList']\n }], defaultCSS: [{\n type: HostBinding,\n args: ['class.igx-time-picker__column']\n }], hourCSS: [{\n type: HostBinding,\n args: ['class.igx-time-picker__hourList']\n }], minuteCSS: [{\n type: HostBinding,\n args: ['class.igx-time-picker__minuteList']\n }], secondsCSS: [{\n type: HostBinding,\n args: ['class.igx-time-picker__secondsList']\n }], ampmCSS: [{\n type: HostBinding,\n args: ['class.igx-time-picker__ampmList']\n }], onFocus: [{\n type: HostListener,\n args: ['focus']\n }], onBlur: [{\n type: HostListener,\n args: ['blur']\n }], onKeydownArrowDown: [{\n type: HostListener,\n args: ['keydown.arrowdown', ['$event']]\n }], onKeydownArrowUp: [{\n type: HostListener,\n args: ['keydown.arrowup', ['$event']]\n }], onKeydownArrowRight: [{\n type: HostListener,\n args: ['keydown.arrowright', ['$event']]\n }], onKeydownArrowLeft: [{\n type: HostListener,\n args: ['keydown.arrowleft', ['$event']]\n }], onKeydownEnter: [{\n type: HostListener,\n args: ['keydown.enter', ['$event']]\n }], onKeydownEscape: [{\n type: HostListener,\n args: ['keydown.escape', ['$event']]\n }], onHover: [{\n type: HostListener,\n args: ['mouseover']\n }], onScroll: [{\n type: HostListener,\n args: ['wheel', ['$event']]\n }] } });\n/**\n * @hidden\n */\nclass IgxTimeItemDirective {\n get defaultCSS() {\n return true;\n }\n get selectedCSS() {\n return this.isSelectedTime;\n }\n get activeCSS() {\n return this.isSelectedTime && this.itemList.isActive;\n }\n get isSelectedTime() {\n const currentValue = this.value.length < 2 ? `0${this.value}` : this.value;\n const dateType = this.itemList.type;\n const inputDateParts = DateTimeUtil.parseDateTimeFormat(this.timePicker.inputFormat);\n switch (dateType) {\n case 'hourList':\n const hourPart = inputDateParts.find(element => element.type === 'hours');\n return DateTimeUtil.getPartValue(this.timePicker.selectedDate, hourPart, hourPart.format.length) === currentValue;\n case 'minuteList':\n const minutePart = inputDateParts.find(element => element.type === 'minutes');\n return DateTimeUtil.getPartValue(this.timePicker.selectedDate, minutePart, minutePart.format.length) === currentValue;\n case 'secondsList':\n const secondsPart = inputDateParts.find(element => element.type === 'seconds');\n return DateTimeUtil.getPartValue(this.timePicker.selectedDate, secondsPart, secondsPart.format.length) === currentValue;\n case 'ampmList':\n const ampmPart = inputDateParts.find(element => element.format === 'tt');\n return DateTimeUtil.getPartValue(this.timePicker.selectedDate, ampmPart, ampmPart.format.length) === this.value;\n }\n }\n get minValue() {\n const dateType = this.itemList.type;\n const inputDateParts = DateTimeUtil.parseDateTimeFormat(this.timePicker.inputFormat);\n switch (dateType) {\n case 'hourList':\n return this.getHourPart(this.timePicker.minDropdownValue);\n case 'minuteList':\n if (this.timePicker.selectedDate.getHours() === this.timePicker.minDropdownValue.getHours()) {\n const minutePart = inputDateParts.find(element => element.type === 'minutes');\n return DateTimeUtil.getPartValue(this.timePicker.minDropdownValue, minutePart, minutePart.format.length);\n }\n return '00';\n case 'secondsList':\n const date = new Date(this.timePicker.selectedDate);\n const min = new Date(this.timePicker.minDropdownValue);\n date.setSeconds(0);\n min.setSeconds(0);\n if (date.getTime() === min.getTime()) {\n const secondsPart = inputDateParts.find(element => element.type === 'seconds');\n return DateTimeUtil.getPartValue(this.timePicker.minDropdownValue, secondsPart, secondsPart.format.length);\n }\n return '00';\n case 'ampmList':\n const ampmPart = inputDateParts.find(element => element.format === 'tt');\n return DateTimeUtil.getPartValue(this.timePicker.minDropdownValue, ampmPart, ampmPart.format.length);\n }\n }\n get maxValue() {\n const dateType = this.itemList.type;\n const inputDateParts = DateTimeUtil.parseDateTimeFormat(this.timePicker.inputFormat);\n switch (dateType) {\n case 'hourList':\n return this.getHourPart(this.timePicker.maxDropdownValue);\n case 'minuteList':\n if (this.timePicker.selectedDate.getHours() === this.timePicker.maxDropdownValue.getHours()) {\n const minutePart = inputDateParts.find(element => element.type === 'minutes');\n return DateTimeUtil.getPartValue(this.timePicker.maxDropdownValue, minutePart, minutePart.format.length);\n }\n else {\n const currentTime = new Date(this.timePicker.selectedDate);\n const minDelta = this.timePicker.itemsDelta.minutes;\n const remainder = 60 % minDelta;\n const delta = remainder === 0 ? 60 - minDelta : 60 - remainder;\n currentTime.setMinutes(delta);\n const minutePart = inputDateParts.find(element => element.type === 'minutes');\n return DateTimeUtil.getPartValue(currentTime, minutePart, minutePart.format.length);\n }\n case 'secondsList':\n const date = new Date(this.timePicker.selectedDate);\n const max = new Date(this.timePicker.maxDropdownValue);\n date.setSeconds(0);\n max.setSeconds(0);\n if (date.getTime() === max.getTime()) {\n const secondsPart = inputDateParts.find(element => element.type === 'seconds');\n return DateTimeUtil.getPartValue(this.timePicker.maxDropdownValue, secondsPart, secondsPart.format.length);\n }\n else {\n const secDelta = this.timePicker.itemsDelta.seconds;\n const remainder = 60 % secDelta;\n const delta = remainder === 0 ? 60 - secDelta : 60 - remainder;\n date.setSeconds(delta);\n const secondsPart = inputDateParts.find(element => element.type === 'seconds');\n return DateTimeUtil.getPartValue(date, secondsPart, secondsPart.format.length);\n }\n case 'ampmList':\n const ampmPart = inputDateParts.find(element => element.format === 'tt');\n return DateTimeUtil.getPartValue(this.timePicker.maxDropdownValue, ampmPart, ampmPart.format.length);\n }\n }\n get hourValue() {\n return this.getHourPart(this.timePicker.selectedDate);\n }\n constructor(timePicker, itemList) {\n this.timePicker = timePicker;\n this.itemList = itemList;\n }\n onClick(item) {\n if (item !== '') {\n const dateType = this.itemList.type;\n this.timePicker.onItemClick(item, dateType);\n }\n }\n getHourPart(date) {\n const inputDateParts = DateTimeUtil.parseDateTimeFormat(this.timePicker.inputFormat);\n const hourPart = inputDateParts.find(element => element.type === 'hours');\n const ampmPart = inputDateParts.find(element => element.format === 'tt');\n const hour = DateTimeUtil.getPartValue(date, hourPart, hourPart.format.length);\n if (ampmPart) {\n const ampm = DateTimeUtil.getPartValue(date, ampmPart, ampmPart.format.length);\n return `${hour} ${ampm}`;\n }\n return hour;\n }\n}\nIgxTimeItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxTimeItemDirective, deps: [{ token: IGX_TIME_PICKER_COMPONENT }, { token: IgxItemListDirective }], target: i0.ɵɵFactoryTarget.Directive });\nIgxTimeItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxTimeItemDirective, selector: \"[igxTimeItem]\", inputs: { value: [\"igxTimeItem\", \"value\"] }, host: { listeners: { \"click\": \"onClick(value)\" }, properties: { \"class.igx-time-picker__item\": \"this.defaultCSS\", \"class.igx-time-picker__item--selected\": \"this.selectedCSS\", \"class.igx-time-picker__item--active\": \"this.activeCSS\" } }, exportAs: [\"timeItem\"], ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxTimeItemDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxTimeItem]',\n exportAs: 'timeItem'\n }]\n }], ctorParameters: function () { return [{ type: undefined, decorators: [{\n type: Inject,\n args: [IGX_TIME_PICKER_COMPONENT]\n }] }, { type: IgxItemListDirective }]; }, propDecorators: { value: [{\n type: Input,\n args: ['igxTimeItem']\n }], defaultCSS: [{\n type: HostBinding,\n args: ['class.igx-time-picker__item']\n }], selectedCSS: [{\n type: HostBinding,\n args: ['class.igx-time-picker__item--selected']\n }], activeCSS: [{\n type: HostBinding,\n args: ['class.igx-time-picker__item--active']\n }], onClick: [{\n type: HostListener,\n args: ['click', ['value']]\n }] } });\n/**\n * This directive should be used to mark which ng-template will be used from IgxTimePicker when re-templating its input group.\n */\nclass IgxTimePickerTemplateDirective {\n constructor(template) {\n this.template = template;\n }\n}\nIgxTimePickerTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxTimePickerTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });\nIgxTimePickerTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxTimePickerTemplateDirective, selector: \"[igxTimePickerTemplate]\", ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxTimePickerTemplateDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxTimePickerTemplate]'\n }]\n }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });\n/**\n * This directive can be used to add custom action buttons to the dropdown/dialog.\n */\nclass IgxTimePickerActionsDirective {\n constructor(template) {\n this.template = template;\n }\n}\nIgxTimePickerActionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxTimePickerActionsDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });\nIgxTimePickerActionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxTimePickerActionsDirective, selector: \"[igxTimePickerActions]\", ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxTimePickerActionsDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxTimePickerActions]'\n }]\n }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });\n\nconst ITEMS_COUNT = 7;\nclass TimeFormatPipe {\n constructor(timePicker) {\n this.timePicker = timePicker;\n }\n transform(value) {\n const format = this.timePicker.inputFormat.replace('tt', 'aa');\n const datePipe = new DatePipe(this.timePicker.locale);\n return datePipe.transform(value, format);\n }\n}\nTimeFormatPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: TimeFormatPipe, deps: [{ token: IGX_TIME_PICKER_COMPONENT }], target: i0.ɵɵFactoryTarget.Pipe });\nTimeFormatPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: \"14.0.0\", version: \"15.2.0\", ngImport: i0, type: TimeFormatPipe, name: \"timeFormatPipe\" });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: TimeFormatPipe, decorators: [{\n type: Pipe,\n args: [{\n name: 'timeFormatPipe'\n }]\n }], ctorParameters: function () { return [{ type: undefined, decorators: [{\n type: Inject,\n args: [IGX_TIME_PICKER_COMPONENT]\n }] }]; } });\nclass TimeItemPipe {\n constructor(timePicker) {\n this.timePicker = timePicker;\n }\n transform(_collection, timePart, selectedDate, min, max) {\n let list;\n let part;\n switch (timePart) {\n case 'hour':\n list = this.generateHours(min, max);\n const hours = this.timePicker.isTwelveHourFormat ? this.toTwelveHourFormat(selectedDate.getHours())\n : selectedDate.getHours();\n list = this.scrollListItem(hours, list);\n part = DatePart.Hours;\n break;\n case 'minutes':\n list = this.generateMinutes(selectedDate, min, max);\n list = this.scrollListItem(selectedDate.getMinutes(), list);\n part = DatePart.Minutes;\n break;\n case 'seconds':\n list = this.generateSeconds(selectedDate, min, max);\n list = this.scrollListItem(selectedDate.getSeconds(), list);\n part = DatePart.Seconds;\n break;\n case 'ampm':\n list = this.generateAmPm(min, max);\n const selectedAmPm = this.timePicker.getPartValue(selectedDate, 'ampm');\n list = this.scrollListItem(selectedAmPm, list);\n part = DatePart.AmPm;\n break;\n }\n return this.getListView(list, part);\n }\n getListView(view, dateType) {\n for (let i = 0; i < view.length; i++) {\n view[i] = this.getItemView(view[i], dateType);\n }\n return view;\n }\n getItemView(item, dateType) {\n if (item === null) {\n item = '';\n }\n else if (dateType && typeof (item) !== 'string') {\n const leadZeroHour = (item < 10 && (this.timePicker.inputFormat.indexOf('hh') !== -1\n || this.timePicker.inputFormat.indexOf('HH') !== -1));\n const leadZeroMinute = (item < 10 && this.timePicker.inputFormat.indexOf('mm') !== -1);\n const leadZeroSeconds = (item < 10 && this.timePicker.inputFormat.indexOf('ss') !== -1);\n const leadZero = {\n hours: leadZeroHour,\n minutes: leadZeroMinute,\n seconds: leadZeroSeconds\n }[dateType];\n item = (leadZero) ? '0' + item : `${item}`;\n }\n return item;\n }\n scrollListItem(item, items) {\n const itemsCount = items.length;\n let view;\n if (items) {\n const index = items.indexOf(item);\n if (index < 3) {\n view = items.slice(itemsCount - (3 - index), itemsCount);\n view = view.concat(items.slice(0, index + 4));\n }\n else if (index + 4 > itemsCount) {\n view = items.slice(index - 3, itemsCount);\n view = view.concat(items.slice(0, index + 4 - itemsCount));\n }\n else {\n view = items.slice(index - 3, index + 4);\n }\n }\n return view;\n }\n generateHours(min, max) {\n const hourItems = [];\n let hoursCount = this.timePicker.isTwelveHourFormat ? 13 : 24;\n hoursCount /= this.timePicker.itemsDelta.hours;\n const minHours = min.getHours();\n const maxHours = max.getHours();\n if (hoursCount > 1) {\n for (let hourIndex = 0; hourIndex < 24; hourIndex++) {\n let hours = hourIndex * this.timePicker.itemsDelta.hours;\n if (hours >= minHours && hours <= maxHours) {\n hours = this.timePicker.isTwelveHourFormat ? this.toTwelveHourFormat(hours) : hours;\n if (!hourItems.find((element => element === hours))) {\n hourItems.push(hours);\n }\n }\n }\n }\n else {\n hourItems.push(0);\n }\n if (hourItems.length < ITEMS_COUNT || hoursCount < ITEMS_COUNT || !this.timePicker.spinLoop) {\n const index = !this.timePicker.spinLoop || (hourItems.length < ITEMS_COUNT && hoursCount < ITEMS_COUNT) ? 6 : 3;\n for (let i = 0; i < index; i++) {\n hourItems.push(null);\n }\n }\n return hourItems;\n }\n generateMinutes(time, min, max) {\n const minuteItems = [];\n const minuteItemsCount = 60 / this.timePicker.itemsDelta.minutes;\n time = new Date(time);\n for (let i = 0; i < minuteItemsCount; i++) {\n const minutes = i * this.timePicker.itemsDelta.minutes;\n time.setMinutes(minutes);\n if (time >= min && time <= max) {\n minuteItems.push(i * this.timePicker.itemsDelta.minutes);\n }\n }\n if (minuteItems.length < ITEMS_COUNT || minuteItemsCount < ITEMS_COUNT || !this.timePicker.spinLoop) {\n const index = !this.timePicker.spinLoop || (minuteItems.length < ITEMS_COUNT && minuteItemsCount < ITEMS_COUNT) ? 6 : 3;\n for (let i = 0; i < index; i++) {\n minuteItems.push(null);\n }\n }\n return minuteItems;\n }\n generateSeconds(time, min, max) {\n const secondsItems = [];\n const secondsItemsCount = 60 / this.timePicker.itemsDelta.seconds;\n time = new Date(time);\n for (let i = 0; i < secondsItemsCount; i++) {\n const seconds = i * this.timePicker.itemsDelta.seconds;\n time.setSeconds(seconds);\n if (time.getTime() >= min.getTime()\n && time.getTime() <= max.getTime()) {\n secondsItems.push(i * this.timePicker.itemsDelta.seconds);\n }\n }\n if (secondsItems.length < ITEMS_COUNT || secondsItemsCount < ITEMS_COUNT || !this.timePicker.spinLoop) {\n const index = !this.timePicker.spinLoop || (secondsItems.length < ITEMS_COUNT && secondsItemsCount < ITEMS_COUNT) ? 6 : 3;\n for (let i = 0; i < index; i++) {\n secondsItems.push(null);\n }\n }\n return secondsItems;\n }\n generateAmPm(min, max) {\n const ampmItems = [];\n const minHour = min.getHours();\n const maxHour = max.getHours();\n if (minHour < 12) {\n ampmItems.push('AM');\n }\n if (minHour >= 12 || maxHour >= 12) {\n ampmItems.push('PM');\n }\n for (let i = 0; i < 5; i++) {\n ampmItems.push(null);\n }\n return ampmItems;\n }\n toTwelveHourFormat(hour) {\n if (hour > 12) {\n hour -= 12;\n }\n else if (hour === 0) {\n hour = 12;\n }\n return hour;\n }\n}\nTimeItemPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: TimeItemPipe, deps: [{ token: IGX_TIME_PICKER_COMPONENT }], target: i0.ɵɵFactoryTarget.Pipe });\nTimeItemPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: \"14.0.0\", version: \"15.2.0\", ngImport: i0, type: TimeItemPipe, name: \"timeItemPipe\" });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: TimeItemPipe, decorators: [{\n type: Pipe,\n args: [{\n name: 'timeItemPipe'\n }]\n }], ctorParameters: function () { return [{ type: undefined, decorators: [{\n type: Inject,\n args: [IGX_TIME_PICKER_COMPONENT]\n }] }]; } });\n\nlet NEXT_ID$c = 0;\nclass IgxTimePickerComponent extends PickerBaseDirective {\n /**\n * The minimum value the picker will accept.\n *\n * @remarks\n * If a `string` value is passed in, it must be in ISO format.\n *\n * @example\n * ```html\n * \\n
\\n\", styles: [\":host{display:block}\\n\"], dependencies: [{ kind: \"directive\", type: i0.forwardRef(function () { return i1$1.NgClass; }), selector: \"[ngClass]\", inputs: [\"class\", \"ngClass\"] }, { kind: \"directive\", type: i0.forwardRef(function () { return i1$1.NgForOf; }), selector: \"[ngFor][ngForOf]\", inputs: [\"ngForOf\", \"ngForTrackBy\", \"ngForTemplate\"] }, { kind: \"directive\", type: i0.forwardRef(function () { return i1$1.NgIf; }), selector: \"[ngIf]\", inputs: [\"ngIf\", \"ngIfThen\", \"ngIfElse\"] }, { kind: \"directive\", type: i0.forwardRef(function () { return i1$1.NgTemplateOutlet; }), selector: \"[ngTemplateOutlet]\", inputs: [\"ngTemplateOutletContext\", \"ngTemplateOutlet\", \"ngTemplateOutletInjector\"] }, { kind: \"directive\", type: i0.forwardRef(function () { return IgxDateTimeEditorDirective; }), selector: \"[igxDateTimeEditor]\", inputs: [\"locale\", \"minValue\", \"maxValue\", \"spinLoop\", \"displayFormat\", \"igxDateTimeEditor\", \"value\", \"spinDelta\"], outputs: [\"valueChange\", \"validationFailed\"], exportAs: [\"igxDateTimeEditor\"] }, { kind: \"component\", type: i0.forwardRef(function () { return IgxInputGroupComponent; }), selector: \"igx-input-group\", inputs: [\"resourceStrings\", \"suppressInputAutofocus\", \"type\", \"theme\"] }, { kind: \"directive\", type: i0.forwardRef(function () { return IgxInputDirective; }), selector: \"[igxInput]\", inputs: [\"value\", \"disabled\", \"required\"], exportAs: [\"igxInput\"] }, { kind: \"directive\", type: i0.forwardRef(function () { return IgxPrefixDirective; }), selector: \"igx-prefix,[igxPrefix],[igxStart]\" }, { kind: \"directive\", type: i0.forwardRef(function () { return IgxSuffixDirective; }), selector: \"igx-suffix,[igxSuffix],[igxEnd]\" }, { kind: \"directive\", type: i0.forwardRef(function () { return IgxButtonDirective; }), selector: \"[igxButton]\", inputs: [\"selected\", \"igxButton\", \"igxButtonColor\", \"igxButtonBackground\", \"igxLabel\", \"disabled\"], outputs: [\"buttonClick\", \"buttonSelected\"] }, { kind: \"component\", type: i0.forwardRef(function () { return IgxIconComponent; }), selector: \"igx-icon\", inputs: [\"family\", \"active\", \"name\"] }, { kind: \"directive\", type: i0.forwardRef(function () { return IgxToggleDirective; }), selector: \"[igxToggle]\", inputs: [\"id\"], outputs: [\"opened\", \"opening\", \"closed\", \"closing\", \"appended\"], exportAs: [\"toggle\"] }, { kind: \"directive\", type: i0.forwardRef(function () { return IgxTextSelectionDirective; }), selector: \"[igxTextSelection]\", inputs: [\"igxTextSelection\"], exportAs: [\"igxTextSelection\"] }, { kind: \"directive\", type: i0.forwardRef(function () { return IgxItemListDirective; }), selector: \"[igxItemList]\", inputs: [\"igxItemList\"] }, { kind: \"directive\", type: i0.forwardRef(function () { return IgxTimeItemDirective; }), selector: \"[igxTimeItem]\", inputs: [\"igxTimeItem\"], exportAs: [\"timeItem\"] }, { kind: \"pipe\", type: i0.forwardRef(function () { return TimeFormatPipe; }), name: \"timeFormatPipe\" }, { kind: \"pipe\", type: i0.forwardRef(function () { return TimeItemPipe; }), name: \"timeItemPipe\" }] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxTimePickerComponent, decorators: [{\n type: Component,\n args: [{ providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: IgxTimePickerComponent,\n multi: true\n },\n {\n provide: IGX_TIME_PICKER_COMPONENT,\n useExisting: IgxTimePickerComponent\n },\n {\n provide: NG_VALIDATORS,\n useExisting: IgxTimePickerComponent,\n multi: true\n }\n ], selector: 'igx-time-picker', template: \"\\n
\\n \\n {{ this.selectedDate | timeFormatPipe }}\\n
\\n\\n \\n \\n
\\n\\n
\\n \\n {{ hour }}\\n
\\n \\n {{ minute }}\\n
\\n \\n {{ seconds }}\\n
\\n \\n {{ ampm }}\\n
\\n \\n
\\n\", styles: [\":host{display:block}\\n\"] }]\n }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{\n type: Inject,\n args: [LOCALE_ID]\n }] }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [DisplayDensityToken]\n }] }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [IGX_INPUT_GROUP_TYPE]\n }] }, { type: i0.Injector }, { type: PlatformUtil }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{\n type: HostBinding,\n args: ['attr.id']\n }, {\n type: Input\n }], displayFormat: [{\n type: Input\n }], inputFormat: [{\n type: Input\n }], mode: [{\n type: Input\n }], minValue: [{\n type: Input\n }], maxValue: [{\n type: Input\n }], spinLoop: [{\n type: Input\n }], formatter: [{\n type: Input\n }], headerOrientation: [{\n type: Input\n }], readOnly: [{\n type: Input\n }], selected: [{\n type: Output\n }], valueChange: [{\n type: Output\n }], validationFailed: [{\n type: Output\n }], hourList: [{\n type: ViewChild,\n args: ['hourList']\n }], minuteList: [{\n type: ViewChild,\n args: ['minuteList']\n }], secondsList: [{\n type: ViewChild,\n args: ['secondsList']\n }], ampmList: [{\n type: ViewChild,\n args: ['ampmList']\n }], clearComponents: [{\n type: ContentChildren,\n args: [IgxPickerClearComponent]\n }], label: [{\n type: ContentChild,\n args: [IgxLabelDirective]\n }], timePickerActionsDirective: [{\n type: ContentChild,\n args: [IgxTimePickerActionsDirective]\n }], inputDirective: [{\n type: ViewChild,\n args: [IgxInputDirective, { read: IgxInputDirective }]\n }], _inputGroup: [{\n type: ViewChild,\n args: [IgxInputGroupComponent]\n }], dateTimeEditor: [{\n type: ViewChild,\n args: [IgxDateTimeEditorDirective, { static: true }]\n }], toggleRef: [{\n type: ViewChild,\n args: [IgxToggleDirective]\n }], value: [{\n type: Input\n }], resourceStrings: [{\n type: Input\n }], okButtonLabel: [{\n type: Input\n }], cancelButtonLabel: [{\n type: Input\n }], itemsDelta: [{\n type: Input\n }], onKeyDown: [{\n type: HostListener,\n args: ['keydown', ['$event']]\n }] } });\n/**\n * @hidden\n */\nclass IgxTimePickerModule {\n}\nIgxTimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });\nIgxTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: \"14.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxTimePickerModule, declarations: [IgxTimePickerComponent, IgxItemListDirective,\n IgxTimeItemDirective,\n IgxTimePickerTemplateDirective,\n IgxTimePickerActionsDirective,\n TimeFormatPipe,\n TimeItemPipe], imports: [CommonModule,\n IgxDateTimeEditorModule,\n IgxInputGroupModule,\n IgxIconModule,\n IgxButtonModule,\n IgxMaskModule,\n IgxToggleModule,\n IgxTextSelectionModule], exports: [IgxTimePickerComponent, IgxTimePickerTemplateDirective,\n IgxTimePickerActionsDirective,\n IgxPickersCommonModule,\n IgxInputGroupModule] });\nIgxTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxTimePickerModule, imports: [CommonModule,\n IgxDateTimeEditorModule,\n IgxInputGroupModule,\n IgxIconModule,\n IgxButtonModule,\n IgxMaskModule,\n IgxToggleModule,\n IgxTextSelectionModule, IgxPickersCommonModule,\n IgxInputGroupModule] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxTimePickerModule, decorators: [{\n type: NgModule,\n args: [{\n declarations: [\n IgxTimePickerComponent,\n IgxItemListDirective,\n IgxTimeItemDirective,\n IgxTimePickerTemplateDirective,\n IgxTimePickerActionsDirective,\n TimeFormatPipe,\n TimeItemPipe\n ],\n exports: [\n IgxTimePickerComponent,\n IgxTimePickerTemplateDirective,\n IgxTimePickerActionsDirective,\n IgxPickersCommonModule,\n IgxInputGroupModule\n ],\n imports: [\n CommonModule,\n IgxDateTimeEditorModule,\n IgxInputGroupModule,\n IgxIconModule,\n IgxButtonModule,\n IgxMaskModule,\n IgxToggleModule,\n IgxTextSelectionModule\n ],\n providers: []\n }]\n }] });\n\n/**\n * @hidden\n */\nclass IgxExcelStyleDateExpressionComponent extends IgxExcelStyleDefaultExpressionComponent {\n get inputValuesElement() {\n return this.picker?.getEditElement() || this.input?.nativeElement;\n }\n get inputDatePlaceholder() {\n return this.grid.resourceStrings['igx_grid_filter_row_date_placeholder'];\n }\n get inputTimePlaceholder() {\n return this.grid.resourceStrings['igx_grid_filter_row_time_placeholder'];\n }\n get weekStart() {\n return getLocaleFirstDayOfWeek(this.grid.locale);\n }\n}\nIgxExcelStyleDateExpressionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });\nIgxExcelStyleDateExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxExcelStyleDateExpressionComponent, selector: \"igx-excel-style-date-expression\", viewQueries: [{ propertyName: \"input\", first: true, predicate: [\"input\"], descendants: true, read: IgxInputDirective }, { propertyName: \"picker\", first: true, predicate: [\"picker\"], descendants: true }], usesInheritance: true, ngImport: i0, template: \"\\n
\\n \\n {{ this.selectedDate | timeFormatPipe }}\\n
\\n\\n \\n \\n
\\n\\n
\\n \\n {{ hour }}\\n
\\n \\n {{ minute }}\\n
\\n \\n {{ seconds }}\\n
\\n \\n {{ ampm }}\\n
\\n \\n
\\n\", dependencies: [{ kind: \"directive\", type: i1$1.NgForOf, selector: \"[ngFor][ngForOf]\", inputs: [\"ngForOf\", \"ngForTrackBy\", \"ngForTemplate\"] }, { kind: \"directive\", type: i1$1.NgIf, selector: \"[ngIf]\", inputs: [\"ngIf\", \"ngIfThen\", \"ngIfElse\"] }, { kind: \"directive\", type: i5.DefaultValueAccessor, selector: \"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]\" }, { kind: \"directive\", type: i5.NgControlStatus, selector: \"[formControlName],[ngModel],[formControl]\" }, { kind: \"directive\", type: i5.NgModel, selector: \"[ngModel]:not([formControlName]):not([formControl])\", inputs: [\"name\", \"disabled\", \"ngModel\", \"ngModelOptions\"], outputs: [\"ngModelChange\"], exportAs: [\"ngModel\"] }, { kind: \"directive\", type: IgxButtonDirective, selector: \"[igxButton]\", inputs: [\"selected\", \"igxButton\", \"igxButtonColor\", \"igxButtonBackground\", \"igxLabel\", \"disabled\"], outputs: [\"buttonClick\", \"buttonSelected\"] }, { kind: \"component\", type: IgxButtonGroupComponent, selector: \"igx-buttongroup\", inputs: [\"id\", \"itemContentCssClass\", \"multiSelection\", \"values\", \"disabled\", \"alignment\"], outputs: [\"selected\", \"deselected\"] }, { kind: \"component\", type: IgxDatePickerComponent, selector: \"igx-date-picker\", inputs: [\"hideOutsideDays\", \"displayMonthsCount\", \"showWeekNumbers\", \"formatter\", \"headerOrientation\", \"todayButtonLabel\", \"cancelButtonLabel\", \"spinLoop\", \"spinDelta\", \"outlet\", \"id\", \"formatViews\", \"disabledDates\", \"specialDates\", \"calendarFormat\", \"value\", \"minValue\", \"maxValue\", \"resourceStrings\", \"readOnly\"], outputs: [\"valueChange\", \"validationFailed\"] }, { kind: \"component\", type: IgxPickerToggleComponent, selector: \"igx-picker-toggle\", outputs: [\"clicked\"] }, { kind: \"component\", type: IgxPickerClearComponent, selector: \"igx-picker-clear\" }, { kind: \"component\", type: IgxInputGroupComponent, selector: \"igx-input-group\", inputs: [\"resourceStrings\", \"suppressInputAutofocus\", \"type\", \"theme\"] }, { kind: \"directive\", type: IgxInputDirective, selector: \"[igxInput]\", inputs: [\"value\", \"disabled\", \"required\"], exportAs: [\"igxInput\"] }, { kind: \"directive\", type: IgxPrefixDirective, selector: \"igx-prefix,[igxPrefix],[igxStart]\" }, { kind: \"component\", type: IgxIconComponent, selector: \"igx-icon\", inputs: [\"family\", \"active\", \"name\"] }, { kind: \"component\", type: IgxTimePickerComponent, selector: \"igx-time-picker\", inputs: [\"id\", \"displayFormat\", \"inputFormat\", \"mode\", \"minValue\", \"maxValue\", \"spinLoop\", \"formatter\", \"headerOrientation\", \"readOnly\", \"value\", \"resourceStrings\", \"okButtonLabel\", \"cancelButtonLabel\", \"itemsDelta\"], outputs: [\"selected\", \"valueChange\", \"validationFailed\"] }, { kind: \"directive\", type: IgxOverlayOutletDirective, selector: \"[igxOverlayOutlet]\", exportAs: [\"overlay-outlet\"] }, { kind: \"component\", type: IgxSelectComponent, selector: \"igx-select\", inputs: [\"placeholder\", \"disabled\", \"overlaySettings\", \"value\", \"type\"], outputs: [\"opening\", \"opened\", \"closing\", \"closed\"] }, { kind: \"component\", type: IgxSelectItemComponent, selector: \"igx-select-item\", inputs: [\"text\"] }, { kind: \"directive\", type: IgxDateTimeEditorDirective, selector: \"[igxDateTimeEditor]\", inputs: [\"locale\", \"minValue\", \"maxValue\", \"spinLoop\", \"displayFormat\", \"igxDateTimeEditor\", \"value\", \"spinDelta\"], outputs: [\"valueChange\", \"validationFailed\"], exportAs: [\"igxDateTimeEditor\"] }] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, decorators: [{\n type: Component,\n args: [{ selector: 'igx-excel-style-date-expression', template: \"\\n
\\n\" }]\n }], propDecorators: { input: [{\n type: ViewChild,\n args: ['input', { read: IgxInputDirective, static: false }]\n }], picker: [{\n type: ViewChild,\n args: ['picker']\n }] } });\n\n/**\n * @hidden @internal\n */\nclass FilterListItem {\n constructor() {\n this.isSpecial = false;\n this.isBlanks = false;\n }\n}\n/**\n * @hidden\n */\nclass ExpressionUI {\n constructor() {\n this.isSelected = false;\n this.isVisible = true;\n }\n}\nfunction generateExpressionsList(expressions, operator, expressionsUIs) {\n generateExpressionsListRecursive(expressions, operator, expressionsUIs);\n // The beforeOperator of the first expression and the afterOperator of the last expression should be null\n if (expressionsUIs.length) {\n expressionsUIs[expressionsUIs.length - 1].afterOperator = null;\n }\n}\nfunction generateExpressionsListRecursive(expressions, operator, expressionsUIs) {\n if (!expressions) {\n return;\n }\n if (expressions instanceof FilteringExpressionsTree) {\n const expressionsTree = expressions;\n for (const operand of expressionsTree.filteringOperands) {\n generateExpressionsListRecursive(operand, expressionsTree.operator, expressionsUIs);\n }\n if (expressionsUIs.length) {\n expressionsUIs[expressionsUIs.length - 1].afterOperator = operator;\n }\n }\n else {\n const exprUI = new ExpressionUI();\n exprUI.expression = expressions;\n exprUI.afterOperator = operator;\n const prevExprUI = expressionsUIs[expressionsUIs.length - 1];\n if (prevExprUI) {\n exprUI.beforeOperator = prevExprUI.afterOperator;\n }\n expressionsUIs.push(exprUI);\n }\n}\n\n/**\n * @hidden\n */\nclass IgxExcelStyleCustomDialogComponent {\n constructor(overlayService, cdr, platform) {\n this.overlayService = overlayService;\n this.cdr = cdr;\n this.platform = platform;\n this.expressionsList = new Array();\n this._customDialogPositionSettings = {\n verticalDirection: VerticalAlignment.Middle,\n horizontalDirection: HorizontalAlignment.Center,\n horizontalStartPoint: HorizontalAlignment.Center,\n verticalStartPoint: VerticalAlignment.Middle\n };\n this._customDialogOverlaySettings = {\n closeOnOutsideClick: true,\n modal: false,\n positionStrategy: new AutoPositionStrategy(this._customDialogPositionSettings),\n scrollStrategy: new AbsoluteScrollStrategy()\n };\n }\n ngAfterViewInit() {\n this._customDialogOverlaySettings.outlet = this.grid.outlet;\n }\n get template() {\n if (this.column.dataType === GridColumnDataType.Date) {\n return this.dateExpressionTemplate;\n }\n return this.defaultExpressionTemplate;\n }\n get grid() {\n return this.filteringService.grid;\n }\n onCustomDialogOpening() {\n if (this.selectedOperator) {\n this.createInitialExpressionUIElement();\n }\n }\n onCustomDialogOpened() {\n if (this.expressionComponents.first) {\n this.expressionComponents.first.focus();\n }\n }\n open(esf) {\n this._customDialogOverlaySettings.target =\n this.overlayComponentId ?\n this.grid.rootGrid ? this.grid.rootGrid.nativeElement : this.grid.nativeElement :\n esf;\n this.toggle.open(this._customDialogOverlaySettings);\n this.overlayComponentId = this.toggle.overlayId;\n }\n onClearButtonClick() {\n this.filteringService.clearFilter(this.column.field);\n this.createInitialExpressionUIElement();\n this.cdr.detectChanges();\n }\n closeDialog() {\n if (this.overlayComponentId) {\n this.overlayService.hide(this.overlayComponentId);\n this.overlayComponentId = null;\n }\n else {\n this.toggle.close();\n }\n }\n onApplyButtonClick() {\n this.expressionsList = this.expressionsList.filter(element => element.expression.condition &&\n (element.expression.searchVal || element.expression.searchVal === 0 || element.expression.condition.isUnary));\n if (this.expressionsList.length > 0) {\n this.expressionsList[0].beforeOperator = null;\n this.expressionsList[this.expressionsList.length - 1].afterOperator = null;\n }\n this.filteringService.filterInternal(this.column.field, this.expressionsList);\n this.closeDialog();\n }\n onAddButtonClick() {\n const exprUI = new ExpressionUI();\n exprUI.expression = {\n condition: null,\n fieldName: this.column.field,\n ignoreCase: this.column.filteringIgnoreCase,\n searchVal: null\n };\n this.expressionsList[this.expressionsList.length - 1].afterOperator = FilteringLogic.And;\n exprUI.beforeOperator = this.expressionsList[this.expressionsList.length - 1].afterOperator;\n this.expressionsList.push(exprUI);\n this.markChildrenForCheck();\n this.scrollToBottom();\n }\n onExpressionRemoved(event) {\n const indexToRemove = this.expressionsList.indexOf(event);\n if (indexToRemove === 0 && this.expressionsList.length > 1) {\n this.expressionsList[1].beforeOperator = null;\n }\n else if (indexToRemove === this.expressionsList.length - 1) {\n this.expressionsList[indexToRemove - 1].afterOperator = null;\n }\n else {\n this.expressionsList[indexToRemove - 1].afterOperator = this.expressionsList[indexToRemove + 1].beforeOperator;\n this.expressionsList[0].beforeOperator = null;\n this.expressionsList[this.expressionsList.length - 1].afterOperator = null;\n }\n this.expressionsList.splice(indexToRemove, 1);\n this.cdr.detectChanges();\n this.markChildrenForCheck();\n }\n onLogicOperatorChanged(event) {\n const index = this.expressionsList.indexOf(event.target);\n event.target.afterOperator = event.newValue;\n if (index + 1 < this.expressionsList.length) {\n this.expressionsList[index + 1].beforeOperator = event.newValue;\n }\n }\n onKeyDown(eventArgs) {\n eventArgs.stopPropagation();\n }\n onApplyButtonKeyDown(eventArgs) {\n if (eventArgs.key === this.platform.KEYMAP.TAB && !eventArgs.shiftKey) {\n eventArgs.stopPropagation();\n eventArgs.preventDefault();\n }\n }\n createCondition(conditionName) {\n switch (this.column.dataType) {\n case GridColumnDataType.Boolean:\n return IgxBooleanFilteringOperand.instance().condition(conditionName);\n case GridColumnDataType.Number:\n case GridColumnDataType.Currency:\n case GridColumnDataType.Percent:\n return IgxNumberFilteringOperand.instance().condition(conditionName);\n case GridColumnDataType.Date:\n return IgxDateFilteringOperand.instance().condition(conditionName);\n case GridColumnDataType.Time:\n return IgxTimeFilteringOperand.instance().condition(conditionName);\n case GridColumnDataType.DateTime:\n return IgxDateTimeFilteringOperand.instance().condition(conditionName);\n default:\n return IgxStringFilteringOperand.instance().condition(conditionName);\n }\n }\n markChildrenForCheck() {\n this.expressionComponents.forEach(x => x.cdr.markForCheck());\n this.expressionDateComponents.forEach(x => x.cdr.markForCheck());\n }\n createInitialExpressionUIElement() {\n this.expressionsList = [];\n const firstExprUI = new ExpressionUI();\n firstExprUI.expression = {\n condition: this.createCondition(this.selectedOperator),\n fieldName: this.column.field,\n ignoreCase: this.column.filteringIgnoreCase,\n searchVal: null\n };\n firstExprUI.afterOperator = FilteringLogic.And;\n this.expressionsList.push(firstExprUI);\n const secondExprUI = new ExpressionUI();\n secondExprUI.expression = {\n condition: null,\n fieldName: this.column.field,\n ignoreCase: this.column.filteringIgnoreCase,\n searchVal: null\n };\n secondExprUI.beforeOperator = FilteringLogic.And;\n this.expressionsList.push(secondExprUI);\n }\n scrollToBottom() {\n requestAnimationFrame(() => {\n this.expressionsContainer.nativeElement.scrollTop = this.expressionsContainer.nativeElement.scrollHeight;\n });\n }\n}\nIgxExcelStyleCustomDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, deps: [{ token: IgxOverlayService }, { token: i0.ChangeDetectorRef }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });\nIgxExcelStyleCustomDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxExcelStyleCustomDialogComponent, selector: \"igx-excel-style-custom-dialog\", inputs: { expressionsList: \"expressionsList\", column: \"column\", selectedOperator: \"selectedOperator\", filteringService: \"filteringService\", overlayComponentId: \"overlayComponentId\", displayDensity: \"displayDensity\" }, viewQueries: [{ propertyName: \"toggle\", first: true, predicate: [\"toggle\"], descendants: true, read: IgxToggleDirective, static: true }, { propertyName: \"defaultExpressionTemplate\", first: true, predicate: [\"defaultExpressionTemplate\"], descendants: true, read: TemplateRef }, { propertyName: \"dateExpressionTemplate\", first: true, predicate: [\"dateExpressionTemplate\"], descendants: true, read: TemplateRef }, { propertyName: \"expressionsContainer\", first: true, predicate: [\"expressionsContainer\"], descendants: true, static: true }, { propertyName: \"expressionComponents\", predicate: IgxExcelStyleDefaultExpressionComponent, descendants: true }, { propertyName: \"expressionDateComponents\", predicate: IgxExcelStyleDateExpressionComponent, descendants: true }], ngImport: i0, template: \"\\n {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}\\n
\\n\\n {{ subMenuText }}\\n keyboard_arrow_right \\n
\\n\\n \\n \\n \\n \\n
\\n \\n\\n \\n
\\n \\n \\n filter_list \\n {{ esf.grid.resourceStrings.igx_grid_excel_custom_filter }}\\n
\\n \\n {{ subMenuText }}\\n keyboard_arrow_right \\n
\\n\\n \\n \\n \\n \\n
\\n \\n\\n \\n
\\n \\n \\n filter_list \\n {{ esf.grid.resourceStrings.igx_grid_excel_custom_filter }}\\n
\\n {{ esf.column.header || esf.column.field }}
\\n \\n{{ esf.column.header || esf.column.field }}
\\n \\n\\n {{ esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide }}\\n {{ esf.column.hidden ? 'visibility' : 'visibility_off' }} \\n
\\n\", dependencies: [{ kind: \"directive\", type: i1$1.NgIf, selector: \"[ngIf]\", inputs: [\"ngIf\", \"ngIfThen\", \"ngIfElse\"] }, { kind: \"component\", type: IgxIconComponent, selector: \"igx-icon\", inputs: [\"family\", \"active\", \"name\"] }] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxExcelStyleHidingComponent, decorators: [{\n type: Component,\n args: [{ selector: 'igx-excel-style-hiding', template: \"\\n {{ esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide }}\\n {{ esf.column.hidden ? 'visibility' : 'visibility_off' }} \\n
\\n\" }]\n }], ctorParameters: function () { return [{ type: BaseFilteringComponent }]; } });\n\n/**\n * A component used for presenting Excel style column moving UI.\n */\nclass IgxExcelStyleMovingComponent {\n constructor(esf) {\n this.esf = esf;\n /**\n * @hidden @internal\n */\n this.defaultClass = true;\n }\n get visibleColumns() {\n return this.esf.grid.visibleColumns.filter(col => !col.columnGroup);\n }\n /**\n * @hidden @internal\n */\n get canNotMoveLeft() {\n return this.esf.column.visibleIndex === 0 ||\n (this.esf.grid.unpinnedColumns.indexOf(this.esf.column) === 0 && this.esf.column.disablePinning) ||\n (this.esf.column.level !== 0 && !this.findColumn(0, this.visibleColumns));\n }\n /**\n * @hidden @internal\n */\n get canNotMoveRight() {\n return this.esf.column.visibleIndex === this.visibleColumns.length - 1 ||\n (this.esf.column.level !== 0 && !this.findColumn(1, this.visibleColumns));\n }\n /**\n * @hidden @internal\n */\n onMoveButtonClicked(moveDirection) {\n let targetColumn;\n if (this.esf.column.pinned) {\n if (this.esf.column.isLastPinned && moveDirection === 1 && this.esf.grid.isPinningToStart) {\n targetColumn = this.esf.grid.unpinnedColumns[0];\n moveDirection = 0;\n }\n else if (this.esf.column.isFirstPinned && moveDirection === 0 && !this.esf.grid.isPinningToStart) {\n targetColumn = this.esf.grid.unpinnedColumns[this.esf.grid.unpinnedColumns.length - 1];\n moveDirection = 1;\n }\n else {\n targetColumn = this.findColumn(moveDirection, this.esf.grid.pinnedColumns);\n }\n }\n else if (this.esf.grid.unpinnedColumns.indexOf(this.esf.column) === 0 && moveDirection === 0 &&\n this.esf.grid.isPinningToStart) {\n targetColumn = this.esf.grid.pinnedColumns[this.esf.grid.pinnedColumns.length - 1];\n if (targetColumn.parent) {\n targetColumn = targetColumn.topLevelParent;\n }\n moveDirection = 1;\n }\n else if (this.esf.grid.unpinnedColumns.indexOf(this.esf.column) === this.esf.grid.unpinnedColumns.length - 1 &&\n moveDirection === 1 && !this.esf.grid.isPinningToStart) {\n targetColumn = this.esf.grid.pinnedColumns[0];\n moveDirection = 0;\n }\n else {\n targetColumn = this.findColumn(moveDirection, this.esf.grid.unpinnedColumns);\n }\n this.esf.grid.moveColumn(this.esf.column, targetColumn, moveDirection);\n }\n findColumn(moveDirection, columns) {\n let index = columns.indexOf(this.esf.column);\n if (moveDirection === 0) {\n while (index > 0) {\n index--;\n if (columns[index].level === this.esf.column.level && columns[index].parent === this.esf.column.parent) {\n return columns[index];\n }\n }\n return columns[0];\n }\n else {\n while (index < columns.length - 1) {\n index++;\n if (columns[index].level === this.esf.column.level && columns[index].parent === this.esf.column.parent) {\n return columns[index];\n }\n }\n }\n }\n}\nIgxExcelStyleMovingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxExcelStyleMovingComponent, deps: [{ token: BaseFilteringComponent }], target: i0.ɵɵFactoryTarget.Component });\nIgxExcelStyleMovingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxExcelStyleMovingComponent, selector: \"igx-excel-style-moving\", host: { properties: { \"class.igx-excel-filter__move\": \"this.defaultClass\" } }, ngImport: i0, template: \"\\n {{ esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin }}\\n
\\n\", dependencies: [{ kind: \"directive\", type: i1$1.NgClass, selector: \"[ngClass]\", inputs: [\"class\", \"ngClass\"] }, { kind: \"directive\", type: i1$1.NgIf, selector: \"[ngIf]\", inputs: [\"ngIf\", \"ngIfThen\", \"ngIfElse\"] }, { kind: \"component\", type: IgxIconComponent, selector: \"igx-icon\", inputs: [\"family\", \"active\", \"name\"] }] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxExcelStylePinningComponent, decorators: [{\n type: Component,\n args: [{ selector: 'igx-excel-style-pinning', template: \"\\n {{ esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin }}\\n
\\n\" }]\n }], ctorParameters: function () { return [{ type: BaseFilteringComponent }]; } });\n\n/** @hidden */\nclass IgxListBaseDirective extends DisplayDensityBase {\n constructor(_displayDensityOptions) {\n super(_displayDensityOptions);\n this._displayDensityOptions = _displayDensityOptions;\n }\n}\nIgxListBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxListBaseDirective, deps: [{ token: DisplayDensityToken, optional: true }], target: i0.ɵɵFactoryTarget.Directive });\nIgxListBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxListBaseDirective, selector: \"[igxListBase]\", usesInheritance: true, ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxListBaseDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxListBase]'\n }]\n }], ctorParameters: function () { return [{ type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [DisplayDensityToken]\n }] }]; } });\nvar IgxListPanState;\n(function (IgxListPanState) {\n IgxListPanState[IgxListPanState[\"NONE\"] = 0] = \"NONE\";\n IgxListPanState[IgxListPanState[\"LEFT\"] = 1] = \"LEFT\";\n IgxListPanState[IgxListPanState[\"RIGHT\"] = 2] = \"RIGHT\";\n})(IgxListPanState || (IgxListPanState = {}));\nclass IgxEmptyListTemplateDirective {\n constructor(template) {\n this.template = template;\n }\n}\nIgxEmptyListTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxEmptyListTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });\nIgxEmptyListTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxEmptyListTemplateDirective, selector: \"[igxEmptyList]\", ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxEmptyListTemplateDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxEmptyList]'\n }]\n }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });\nclass IgxDataLoadingTemplateDirective {\n constructor(template) {\n this.template = template;\n }\n}\nIgxDataLoadingTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxDataLoadingTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });\nIgxDataLoadingTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxDataLoadingTemplateDirective, selector: \"[igxDataLoading]\", ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxDataLoadingTemplateDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxDataLoading]'\n }]\n }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });\nclass IgxListItemLeftPanningTemplateDirective {\n constructor(template) {\n this.template = template;\n }\n}\nIgxListItemLeftPanningTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxListItemLeftPanningTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });\nIgxListItemLeftPanningTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxListItemLeftPanningTemplateDirective, selector: \"[igxListItemLeftPanning]\", ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxListItemLeftPanningTemplateDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxListItemLeftPanning]'\n }]\n }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });\nclass IgxListItemRightPanningTemplateDirective {\n constructor(template) {\n this.template = template;\n }\n}\nIgxListItemRightPanningTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxListItemRightPanningTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });\nIgxListItemRightPanningTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxListItemRightPanningTemplateDirective, selector: \"[igxListItemRightPanning]\", ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxListItemRightPanningTemplateDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxListItemRightPanning]'\n }]\n }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });\n\n/**\n * The Ignite UI List Item component is a container intended for row items in the Ignite UI for Angular List component.\n *\n * Example:\n * ```html\n * \\n \\n \\n
\\n\\n\\n \\n \\n
\\n\\n\\n
\\n\\n
\\n\\n
\\n\\n
\\n\\n \\n \\n
\\n\\n\\n \\n \\n
\\n\\n\\n
\\n\\n
\\n\\n
\\n\\n
\\n\\n
\\n\\n\\n\\n
\\n\\n \\n \\n \\n
\\n\\n \\n \\n \\n\\n \\n \\n \\n \\n
\\n\\n \\n \\n
\\n \\n \\n \\n \\n
\\n\\n
\\n\\n
\\n\\n\\n\\n
\\n\\n \\n \\n \\n
\\n\\n \\n \\n \\n\\n \\n \\n \\n \\n
\\n\\n \\n \\n
\\n \\n \\n \\n \\n
\\n\\n
\\n\\n
\\n\" });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxTreeComponent, decorators: [{\n type: Component,\n args: [{ selector: 'igx-tree', providers: [\n IgxTreeService,\n IgxTreeSelectionService,\n IgxTreeNavigationService,\n { provide: IGX_TREE_COMPONENT, useExisting: IgxTreeComponent },\n ], template: \"\\n
\\n\" }]\n }], ctorParameters: function () { return [{ type: IgxTreeNavigationService }, { type: IgxTreeSelectionService }, { type: IgxTreeService }, { type: i0.ElementRef }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [DisplayDensityToken]\n }] }]; }, propDecorators: { cssClass: [{\n type: HostBinding,\n args: ['class.igx-tree']\n }], selection: [{\n type: Input\n }], singleBranchExpand: [{\n type: Input\n }], animationSettings: [{\n type: Input\n }], nodeSelection: [{\n type: Output\n }], nodeExpanding: [{\n type: Output\n }], nodeExpanded: [{\n type: Output\n }], nodeCollapsing: [{\n type: Output\n }], nodeCollapsed: [{\n type: Output\n }], activeNodeChanged: [{\n type: Output\n }], expandIndicator: [{\n type: ContentChild,\n args: [IgxTreeExpandIndicatorDirective, { read: TemplateRef }]\n }], nodes: [{\n type: ContentChildren,\n args: [IgxTreeNodeComponent, { descendants: true }]\n }] } });\n/**\n * @hidden\n *\n * NgModule defining the components and directives needed for `igx-tree`\n */\nclass IgxTreeModule {\n}\nIgxTreeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });\nIgxTreeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: \"14.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxTreeModule, declarations: [IgxTreeSelectMarkerDirective, IgxTreeExpandIndicatorDirective, IgxTreeNodeLinkDirective, IgxTreeComponent, IgxTreeNodeComponent], imports: [CommonModule,\n FormsModule,\n IgxIconModule,\n IgxInputGroupModule,\n IgxCheckboxModule,\n IgxProgressBarModule], exports: [IgxTreeSelectMarkerDirective, IgxTreeExpandIndicatorDirective, IgxTreeNodeLinkDirective, IgxTreeComponent, IgxTreeNodeComponent,\n IgxIconModule,\n IgxInputGroupModule,\n IgxCheckboxModule,\n IgxExpansionPanelModule] });\nIgxTreeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxTreeModule, imports: [CommonModule,\n FormsModule,\n IgxIconModule,\n IgxInputGroupModule,\n IgxCheckboxModule,\n IgxProgressBarModule, IgxIconModule,\n IgxInputGroupModule,\n IgxCheckboxModule,\n IgxExpansionPanelModule] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxTreeModule, decorators: [{\n type: NgModule,\n args: [{\n declarations: [\n IgxTreeSelectMarkerDirective,\n IgxTreeExpandIndicatorDirective,\n IgxTreeNodeLinkDirective,\n IgxTreeComponent,\n IgxTreeNodeComponent\n ],\n imports: [\n CommonModule,\n FormsModule,\n IgxIconModule,\n IgxInputGroupModule,\n IgxCheckboxModule,\n IgxProgressBarModule\n ],\n exports: [\n IgxTreeSelectMarkerDirective,\n IgxTreeExpandIndicatorDirective,\n IgxTreeNodeLinkDirective,\n IgxTreeComponent,\n IgxTreeNodeComponent,\n IgxIconModule,\n IgxInputGroupModule,\n IgxCheckboxModule,\n IgxExpansionPanelModule\n ]\n }]\n }] });\n\nclass IgxExcelStyleLoadingValuesTemplateDirective {\n static ngTemplateContextGuard(_dir, ctx) {\n return true;\n }\n ;\n constructor(template) {\n this.template = template;\n }\n}\nIgxExcelStyleLoadingValuesTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxExcelStyleLoadingValuesTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });\nIgxExcelStyleLoadingValuesTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxExcelStyleLoadingValuesTemplateDirective, selector: \"[igxExcelStyleLoading]\", ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxExcelStyleLoadingValuesTemplateDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxExcelStyleLoading]'\n }]\n }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });\n/**\n * A component used for presenting Excel style search UI.\n */\nclass IgxExcelStyleSearchComponent {\n /**\n * @hidden @internal\n */\n get selectAllItem() {\n if (!this._selectAllItem) {\n const selectAllItem = {\n isSelected: false,\n isFiltered: false,\n indeterminate: false,\n isSpecial: true,\n isBlanks: false,\n value: this.esf.grid.resourceStrings.igx_grid_excel_select_all,\n label: this.esf.grid.resourceStrings.igx_grid_excel_select_all\n };\n this._selectAllItem = selectAllItem;\n }\n return this._selectAllItem;\n }\n /**\n * @hidden @internal\n */\n get addToCurrentFilterItem() {\n if (!this._addToCurrentFilterItem) {\n const addToCurrentFilterItem = {\n isSelected: false,\n isFiltered: false,\n indeterminate: false,\n isSpecial: true,\n isBlanks: false,\n value: this.esf.grid.resourceStrings.igx_grid_excel_add_to_filter,\n label: this.esf.grid.resourceStrings.igx_grid_excel_add_to_filter\n };\n this._addToCurrentFilterItem = addToCurrentFilterItem;\n }\n return this._addToCurrentFilterItem;\n }\n /**\n * @hidden @internal\n */\n get isLoading() {\n return this._isLoading;\n }\n /**\n * @hidden @internal\n */\n set isLoading(value) {\n this._isLoading = value;\n if (!this.cdr.destroyed) {\n this.cdr.detectChanges();\n }\n }\n /**\n * @hidden @internal\n */\n get valuesLoadingTemplate() {\n if (this.esf.grid?.excelStyleLoadingValuesTemplateDirective) {\n return this.esf.grid.excelStyleLoadingValuesTemplateDirective.template;\n }\n else {\n return this.defaultExcelStyleLoadingValuesTemplate;\n }\n }\n constructor(cdr, esf, platform) {\n this.cdr = cdr;\n this.esf = esf;\n this.platform = platform;\n /**\n * @hidden @internal\n */\n this.defaultClass = true;\n /**\n * @hidden @internal\n */\n this.displayedListData = [];\n this.destroy$ = new Subject();\n /**\n * @hidden @internal\n */\n this.refreshSize = () => {\n if (this.virtDir) {\n this.virtDir.igxForContainerSize = this.containerSize;\n this.virtDir.igxForItemSize = this.itemSize;\n this.virtDir.recalcUpdateSizes();\n this.cdr.detectChanges();\n }\n };\n esf.loadingStart.pipe(takeUntil(this.destroy$)).subscribe(() => {\n this.displayedListData = [];\n this.isLoading = true;\n });\n esf.loadingEnd.pipe(takeUntil(this.destroy$)).subscribe(() => {\n this.refreshSize();\n this.isLoading = false;\n });\n esf.initialized.pipe(takeUntil(this.destroy$)).subscribe(() => {\n requestAnimationFrame(() => {\n this.refreshSize();\n this.searchInput.nativeElement.focus();\n });\n });\n esf.columnChange.pipe(takeUntil(this.destroy$)).subscribe(() => {\n this.virtDir?.resetScrollPosition();\n });\n esf.listDataLoaded.pipe(takeUntil(this.destroy$)).subscribe(() => {\n this._selectAllItem = this.esf.listData[0];\n if (this.isHierarchical() && this.esf.listData[0].isSpecial) {\n this.esf.listData.splice(0, 1);\n }\n if (this.searchValue) {\n this.clearInput();\n }\n else {\n this.filterListData();\n }\n this.cdr.detectChanges();\n requestAnimationFrame(() => {\n this.refreshSize();\n this.searchInput.nativeElement.focus();\n });\n });\n }\n ngAfterViewInit() {\n requestAnimationFrame(this.refreshSize);\n }\n ngOnDestroy() {\n this.destroy$.next(true);\n this.destroy$.complete();\n }\n /**\n * @hidden @internal\n */\n clearInput() {\n this.searchValue = null;\n this.filterListData();\n }\n /**\n * @hidden @internal\n */\n onCheckboxChange(eventArgs) {\n const selectedIndex = this.displayedListData.indexOf(eventArgs.checkbox.value);\n const selectAllBtn = this.displayedListData[0];\n if (selectedIndex === 0) {\n this.displayedListData.forEach(element => {\n if (element === this.addToCurrentFilterItem) {\n return;\n }\n element.isSelected = eventArgs.checked;\n });\n selectAllBtn.indeterminate = false;\n }\n else {\n eventArgs.checkbox.value.isSelected = eventArgs.checked;\n const indexToStartSlicing = this.displayedListData.indexOf(this.addToCurrentFilterItem) > -1 ? 2 : 1;\n const slicedArray = this.displayedListData.slice(indexToStartSlicing, this.displayedListData.length);\n if (!slicedArray.find(el => el.isSelected === false)) {\n selectAllBtn.indeterminate = false;\n selectAllBtn.isSelected = true;\n }\n else if (!slicedArray.find(el => el.isSelected === true)) {\n selectAllBtn.indeterminate = false;\n selectAllBtn.isSelected = false;\n }\n else {\n selectAllBtn.indeterminate = true;\n }\n }\n eventArgs.checkbox.nativeCheckbox.nativeElement.blur();\n }\n /**\n * @hidden @internal\n */\n onSelectAllCheckboxChange(eventArgs) {\n this._selectAllItem.isSelected = eventArgs.checked;\n this._selectAllItem.indeterminate = false;\n const treeNodes = this.tree.nodes;\n treeNodes.forEach(node => node.data.isSelected = eventArgs.checked);\n }\n /**\n * @hidden @internal\n */\n onNodeSelectionChange(eventArgs) {\n eventArgs.added.forEach(node => {\n node.data.isSelected = true;\n });\n eventArgs.removed.forEach(node => {\n node.data.isSelected = false;\n });\n this._hierarchicalSelectedItems = eventArgs.newSelection.map(item => item.data);\n const selectAllBtn = this.selectAllItem;\n if (this._hierarchicalSelectedItems.length === 0) {\n selectAllBtn.indeterminate = false;\n selectAllBtn.isSelected = false;\n }\n else if (this._hierarchicalSelectedItems.length === this.tree.nodes.length) {\n selectAllBtn.indeterminate = false;\n selectAllBtn.isSelected = true;\n }\n else {\n selectAllBtn.indeterminate = true;\n selectAllBtn.isSelected = false;\n }\n }\n /**\n * @hidden @internal\n */\n get itemSize() {\n let itemSize = '40px';\n switch (this.esf.displayDensity) {\n case DisplayDensity.cosy:\n itemSize = '32px';\n break;\n case DisplayDensity.compact:\n itemSize = '24px';\n break;\n default: break;\n }\n return itemSize;\n }\n /**\n * @hidden @internal\n */\n get containerSize() {\n if (this.esf.listData.length) {\n return this.list?.element.nativeElement.offsetHeight;\n }\n // GE Nov 1st, 2021 #10355 Return a numeric value, so the chunk size is calculated properly.\n // If we skip this branch, on applying the filter the _calculateChunkSize() method off the ForOfDirective receives\n // an igxForContainerSize = undefined, thus assigns the chunkSize to the igxForOf.length which leads to performance issues.\n return 0;\n }\n /**\n * @hidden @internal\n */\n get applyButtonDisabled() {\n return (this._selectAllItem && !this._selectAllItem.isSelected && !this._selectAllItem.indeterminate) ||\n (this.displayedListData && this.displayedListData.length === 0);\n }\n /**\n * @hidden @internal\n */\n onInputKeyDown(event) {\n switch (event.key) {\n case this.platform.KEYMAP.ENTER:\n event.preventDefault();\n this.applyFilter();\n return;\n case this.platform.KEYMAP.ESCAPE:\n if (this.searchValue) {\n event.stopPropagation();\n this.clearInput();\n }\n return;\n }\n }\n /**\n * @hidden @internal\n */\n filterListData() {\n if (this.esf.column?.dataType === GridColumnDataType.Number ||\n this.esf.column?.dataType === GridColumnDataType.Currency ||\n this.esf.column?.dataType === GridColumnDataType.Percent) {\n this.rejectNonNumericalEntries();\n }\n if (!this.esf.listData || !this.esf.listData.length) {\n this.displayedListData = [];\n return;\n }\n let selectAllBtn;\n if (this._selectAllItem) {\n selectAllBtn = this._selectAllItem;\n }\n else {\n selectAllBtn = this.esf.listData[0];\n }\n if (!this.searchValue) {\n let anyFiltered = this.esf.listData.some(i => i.isFiltered);\n let anyUnfiltered = this.esf.listData.some(i => !i.isFiltered);\n selectAllBtn.indeterminate = anyFiltered && anyUnfiltered;\n if (this.isHierarchical() && this.tree) {\n this._hierarchicalSelectedItems = this.tree.nodes.map(n => n.data).filter(item => item.isFiltered);\n }\n this.esf.listData.forEach(i => i.isSelected = i.isFiltered);\n if (this.displayedListData !== this.esf.listData) {\n this.displayedListData = this.esf.listData;\n if (this.isHierarchical()) {\n this.cdr.detectChanges();\n this.tree.nodes.forEach(n => {\n const item = n.data;\n n.selected = item.isSelected || item.isFiltered;\n anyFiltered = anyFiltered || n.selected;\n anyUnfiltered = anyUnfiltered || !n.selected;\n });\n selectAllBtn.indeterminate = anyFiltered && anyUnfiltered;\n }\n }\n selectAllBtn.label = this.esf.grid.resourceStrings.igx_grid_excel_select_all;\n this.cdr.detectChanges();\n return;\n }\n const searchVal = this.searchValue.toLowerCase();\n if (this.isHierarchical()) {\n this._hierarchicalSelectedItems = [];\n this.esf.listData.forEach(i => i.isSelected = false);\n const matchedData = cloneHierarchicalArray(this.esf.listData, 'children');\n this.displayedListData = this.hierarchicalSelectMatches(matchedData, searchVal);\n this.cdr.detectChanges();\n this.tree.nodes.forEach(n => {\n n.selected = true;\n if (n.data.label.toString().toLowerCase().indexOf(searchVal) > -1) {\n this.expandAllParentNodes(n);\n }\n });\n }\n else {\n this.displayedListData = this.esf.listData.filter((it, i) => (i === 0 && it.isSpecial) ||\n (it.label !== null && it.label !== undefined) &&\n !it.isBlanks &&\n it.label.toString().toLowerCase().indexOf(searchVal) > -1);\n this.esf.listData.forEach(i => i.isSelected = false);\n this.displayedListData.forEach(i => i.isSelected = true);\n this.displayedListData.splice(1, 0, this.addToCurrentFilterItem);\n if (this.displayedListData.length === 2) {\n this.displayedListData = [];\n }\n }\n selectAllBtn.indeterminate = false;\n selectAllBtn.isSelected = true;\n selectAllBtn.label = this.esf.grid.resourceStrings.igx_grid_excel_select_all_search_results;\n this.cdr.detectChanges();\n }\n /**\n * @hidden @internal\n */\n applyFilter() {\n const filterTree = new FilteringExpressionsTree(FilteringLogic.Or, this.esf.column.field);\n let selectedItems = [];\n if (this.isHierarchical()) {\n if (this.addToCurrentFilterCheckbox && this.addToCurrentFilterCheckbox.checked) {\n this.addFilteredToSelectedItems(this.esf.listData);\n }\n selectedItems = this._hierarchicalSelectedItems;\n }\n else {\n const item = this.displayedListData[1];\n const addToCurrentFilterOptionVisible = item === this.addToCurrentFilterItem;\n selectedItems = addToCurrentFilterOptionVisible && item.isSelected ?\n this.esf.listData.slice(1, this.esf.listData.length).filter(el => el.isSelected || el.isFiltered) :\n this.esf.listData.slice(1, this.esf.listData.length).filter(el => el.isSelected);\n }\n let unselectedItem;\n if (this.isHierarchical()) {\n unselectedItem = this.esf.listData.find(el => el.isSelected === false);\n }\n else {\n unselectedItem = this.esf.listData.slice(1, this.esf.listData.length).find(el => el.isSelected === false);\n }\n if (unselectedItem) {\n if (selectedItems.length <= IgxExcelStyleSearchComponent.filterOptimizationThreshold) {\n selectedItems.forEach(element => {\n let condition = null;\n if (element.value !== null && element.value !== undefined) {\n if (this.esf.column.dataType === GridColumnDataType.Boolean) {\n condition = this.createCondition(element.value.toString());\n }\n else {\n const filterCondition = this.esf.column.dataType === GridColumnDataType.Time ? 'at' : 'equals';\n condition = this.createCondition(filterCondition);\n }\n }\n else {\n condition = this.createCondition('empty');\n }\n filterTree.filteringOperands.push({\n condition,\n fieldName: this.esf.column.field,\n ignoreCase: this.esf.column.filteringIgnoreCase,\n searchVal: element.value\n });\n });\n }\n else {\n const blanksItemIndex = selectedItems.findIndex(e => e.value === null || e.value === undefined);\n let blanksItem;\n if (blanksItemIndex >= 0) {\n blanksItem = selectedItems[blanksItemIndex];\n selectedItems.splice(blanksItemIndex, 1);\n }\n filterTree.filteringOperands.push({\n condition: this.createCondition('in'),\n fieldName: this.esf.column.field,\n ignoreCase: this.esf.column.filteringIgnoreCase,\n searchVal: new Set(this.esf.column.dataType === GridColumnDataType.Date ||\n this.esf.column.dataType === GridColumnDataType.DateTime ?\n selectedItems.map(d => d.value.toISOString()) : this.esf.column.dataType === GridColumnDataType.Time ?\n selectedItems.map(e => e.value.toLocaleTimeString()) :\n selectedItems.map(e => e.value))\n });\n if (blanksItem) {\n filterTree.filteringOperands.push({\n condition: this.createCondition('empty'),\n fieldName: this.esf.column.field,\n ignoreCase: this.esf.column.filteringIgnoreCase,\n searchVal: blanksItem.value\n });\n }\n }\n const grid = this.esf.grid;\n const col = this.esf.column;\n grid.filteringService.filterInternal(col.field, filterTree);\n this.esf.expressionsList = new Array();\n grid.filteringService.generateExpressionsList(col.filteringExpressionsTree, grid.filteringLogic, this.esf.expressionsList);\n }\n else {\n this.esf.grid.filteringService.clearFilter(this.esf.column.field);\n }\n this.esf.closeDropdown();\n }\n /**\n * @hidden @internal\n */\n isHierarchical() {\n return this.esf.isHierarchical;\n }\n /**\n * @hidden @internal\n */\n isTreeEmpty() {\n return this.esf.isHierarchical && this.displayedListData.length === 0;\n }\n hierarchicalSelectMatches(data, searchVal) {\n data.forEach(element => {\n element.indeterminate = false;\n element.isSelected = false;\n const node = this.tree.nodes.filter(n => n.data.label === element.label)[0];\n if (node) {\n node.expanded = false;\n }\n if (element.label.toString().toLowerCase().indexOf(searchVal) > -1) {\n element.isSelected = true;\n this.hierarchicalSelectAllChildren(element);\n this._hierarchicalSelectedItems.push(element);\n }\n else if (element.children.length > 0) {\n element.children = this.hierarchicalSelectMatches(element.children, searchVal);\n if (element.children.length > 0) {\n element.isSelected = true;\n if (node) {\n node.expanded = true;\n }\n }\n }\n });\n return data.filter(element => element.isSelected === true);\n }\n hierarchicalSelectAllChildren(element) {\n element.children.forEach(child => {\n child.indeterminate = false;\n child.isSelected = true;\n this._hierarchicalSelectedItems.push(child);\n if (child.children) {\n this.hierarchicalSelectAllChildren(child);\n }\n });\n }\n expandAllParentNodes(node) {\n if (node.parentNode) {\n node.parentNode.expanded = true;\n this.expandAllParentNodes(node.parentNode);\n }\n }\n addFilteredToSelectedItems(records) {\n records.forEach(record => {\n if (record.children) {\n this.addFilteredToSelectedItems(record.children);\n }\n if (record.isFiltered && this._hierarchicalSelectedItems.indexOf(record) < 0) {\n this._hierarchicalSelectedItems.push(record);\n }\n });\n }\n createCondition(conditionName) {\n switch (this.esf.column.dataType) {\n case GridColumnDataType.Boolean:\n return IgxBooleanFilteringOperand.instance().condition(conditionName);\n case GridColumnDataType.Number:\n case GridColumnDataType.Currency:\n case GridColumnDataType.Percent:\n return IgxNumberFilteringOperand.instance().condition(conditionName);\n case GridColumnDataType.Date:\n return IgxDateFilteringOperand.instance().condition(conditionName);\n case GridColumnDataType.Time:\n return IgxTimeFilteringOperand.instance().condition(conditionName);\n case GridColumnDataType.DateTime:\n return IgxDateTimeFilteringOperand.instance().condition(conditionName);\n default:\n return IgxStringFilteringOperand.instance().condition(conditionName);\n }\n }\n /**\n * @hidden @internal\n */\n rejectNonNumericalEntries() {\n const regExp = /[^0-9\\.,eE\\-]/g;\n if (this.searchValue && regExp.test(this.searchValue)) {\n this.searchInput.value = this.searchValue.replace(regExp, '');\n this.searchValue = this.searchInput.value;\n }\n }\n}\nIgxExcelStyleSearchComponent.filterOptimizationThreshold = 2;\nIgxExcelStyleSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxExcelStyleSearchComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: BaseFilteringComponent }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });\nIgxExcelStyleSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxExcelStyleSearchComponent, selector: \"igx-excel-style-search\", host: { properties: { \"class.igx-excel-filter__menu-main\": \"this.defaultClass\" } }, viewQueries: [{ propertyName: \"searchInput\", first: true, predicate: [\"input\"], descendants: true, read: IgxInputDirective, static: true }, { propertyName: \"list\", first: true, predicate: [\"list\"], descendants: true, read: IgxListComponent }, { propertyName: \"selectAllCheckbox\", first: true, predicate: [\"selectAllCheckbox\"], descendants: true, read: IgxCheckboxComponent }, { propertyName: \"addToCurrentFilterCheckbox\", first: true, predicate: [\"addToCurrentFilterCheckbox\"], descendants: true, read: IgxCheckboxComponent }, { propertyName: \"tree\", first: true, predicate: [\"tree\"], descendants: true, read: IgxTreeComponent }, { propertyName: \"virtDir\", first: true, predicate: IgxForOfDirective, descendants: true, static: true }, { propertyName: \"defaultExcelStyleLoadingValuesTemplate\", first: true, predicate: [\"defaultExcelStyleLoadingValuesTemplate\"], descendants: true, read: TemplateRef }], ngImport: i0, template: \"\\n \\n \\n {{ item.label }}\\n \\n \\n
\\n\\n \\n \\n \\n
\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n\\n \\n \\n\\n \\n \\n
\\n\\n\\n
\\n\\n \\n \\n {{ selectAllItem.label }}\\n \\n
\\n \\n \\n\\n {{ addToCurrentFilterItem.label }}\\n \\n
\\n {{item.label}}
\\n {{childLevel1.label}}
\\n {{childLevel2.label}}
\\n {{childLevel3.label}}
\\n {{childLevel4.label}}
\\n {{childLevel5.label}}
\\n {{childLevel6.label}}
\\n {{childLevel7.label}}
\\n {{childLevel8.label}}
\\n {{childLevel9.label}}
\\n \\n \\n \\n
\\n \\n {{esf.grid?.resourceStrings.igx_grid_excel_no_matches}}\\n
\\n\\n \\n \\n {{ item.label }}\\n \\n \\n
\\n\\n \\n \\n \\n
\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n\\n \\n \\n\\n \\n \\n
\\n\\n\\n
\\n\\n \\n \\n {{ selectAllItem.label }}\\n \\n
\\n \\n \\n\\n {{ addToCurrentFilterItem.label }}\\n \\n
\\n {{item.label}}
\\n {{childLevel1.label}}
\\n {{childLevel2.label}}
\\n {{childLevel3.label}}
\\n {{childLevel4.label}}
\\n {{childLevel5.label}}
\\n {{childLevel6.label}}
\\n {{childLevel7.label}}
\\n {{childLevel8.label}}
\\n {{childLevel9.label}}
\\n \\n \\n \\n
\\n \\n {{esf.grid?.resourceStrings.igx_grid_excel_no_matches}}\\n
\\n\\n {{esf.grid.resourceStrings.igx_grid_excel_select }}\\n done \\n
\\n\", dependencies: [{ kind: \"directive\", type: i1$1.NgClass, selector: \"[ngClass]\", inputs: [\"class\", \"ngClass\"] }, { kind: \"directive\", type: i1$1.NgIf, selector: \"[ngIf]\", inputs: [\"ngIf\", \"ngIfThen\", \"ngIfElse\"] }, { kind: \"component\", type: IgxIconComponent, selector: \"igx-icon\", inputs: [\"family\", \"active\", \"name\"] }] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxExcelStyleSelectingComponent, decorators: [{\n type: Component,\n args: [{ selector: 'igx-excel-style-selecting', template: \"\\n {{esf.grid.resourceStrings.igx_grid_excel_select }}\\n done \\n
\\n\" }]\n }], ctorParameters: function () { return [{ type: BaseFilteringComponent }]; } });\n\n/**\n * A component used for presenting Excel style column sorting UI.\n */\nclass IgxExcelStyleSortingComponent {\n constructor(esf, cdr) {\n this.esf = esf;\n this.cdr = cdr;\n /**\n * @hidden @internal\n */\n this.defaultClass = true;\n this.destroy$ = new Subject();\n this.esf.sortingChanged.pipe(takeUntil(this.destroy$)).subscribe(() => {\n this.updateSelectedButtons(this.esf.column.field);\n });\n }\n ngOnDestroy() {\n this.destroy$.next(true);\n this.destroy$.complete();\n }\n /**\n * @hidden @internal\n */\n onSortButtonClicked(sortDirection) {\n if (this.sortButtonGroup.selectedIndexes.length === 0) {\n if (this.esf.grid.isColumnGrouped(this.esf.column.field)) {\n this.sortButtonGroup.selectButton(sortDirection - 1);\n }\n else {\n this.esf.grid.clearSort(this.esf.column.field);\n }\n }\n else {\n this.esf.grid.sort({ fieldName: this.esf.column.field, dir: sortDirection, ignoreCase: true });\n }\n }\n updateSelectedButtons(fieldName) {\n const sortIndex = this.esf.grid.sortingExpressions.findIndex(s => s.fieldName === fieldName);\n this.cdr.detectChanges();\n this.sortButtonGroup.buttons.forEach((b, i) => {\n this.sortButtonGroup.deselectButton(i);\n });\n if (sortIndex !== -1) {\n const sortDirection = this.esf.grid.sortingExpressions[sortIndex].dir;\n this.sortButtonGroup.selectButton(sortDirection - 1);\n }\n }\n}\nIgxExcelStyleSortingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxExcelStyleSortingComponent, deps: [{ token: BaseFilteringComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });\nIgxExcelStyleSortingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxExcelStyleSortingComponent, selector: \"igx-excel-style-sorting\", host: { properties: { \"class.igx-excel-filter__sort\": \"this.defaultClass\" } }, viewQueries: [{ propertyName: \"sortButtonGroup\", first: true, predicate: [\"sortButtonGroup\"], descendants: true, read: IgxButtonGroupComponent }], ngImport: i0, template: \"{{ summaryResults[0].label }}: {{ summaryResults[0].summaryResult }}
\n *{{ summaryResults[1].label }}: {{ summaryResults[1].summaryResult }}
\n *\n * {{val}} \n *
\n * \n * {{column.field}}\n *
\n * \n * This name is forbidden.\n *
\n * \\n\\n {{ translateSummary(summary) }}\\n \\n {{\\n formatSummaryResult(summary)\\n }}\\n \\n
\\n \\n\\n {{ translateSummary(summary) }}\\n \\n {{\\n formatSummaryResult(summary)\\n }}\\n \\n
\\n \\n
\\n\", dependencies: [{ kind: \"directive\", type: IgxColumnResizerDirective, selector: \"[igxResizer]\", inputs: [\"restrictHResizeMin\", \"restrictHResizeMax\", \"restrictResizerTop\"], outputs: [\"resizeEnd\", \"resizeStart\", \"resize\"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxGridColumnResizerComponent, decorators: [{\n type: Component,\n args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-column-resizer', template: \"\\n
\\n\" }]\n }], ctorParameters: function () { return [{ type: IgxColumnResizingService }]; }, propDecorators: { restrictResizerTop: [{\n type: Input\n }], resizer: [{\n type: ViewChild,\n args: [IgxColumnResizerDirective, { static: true }]\n }] } });\n\n/**\n * @hidden\n * @internal\n */\nclass IgxColumnMovingDragDirective extends IgxDragDirective {\n get draggable() {\n return this.column && (this.column.grid.moving || (this.column.groupable && !this.column.columnGroup));\n }\n get icon() {\n return this.cms.icon;\n }\n constructor(element, viewContainer, zone, renderer, cdr, cms, _platformUtil) {\n super(cdr, element, viewContainer, zone, renderer, _platformUtil);\n this.cms = cms;\n this._ghostClass = 'igx-grid__drag-ghost-image';\n this.ghostImgIconClass = 'igx-grid__drag-ghost-image-icon';\n this.ghostImgIconGroupClass = 'igx-grid__drag-ghost-image-icon-group';\n this.columnSelectedClass = 'igx-grid-th--selected';\n }\n ngOnDestroy() {\n this._unsubscribe();\n super.ngOnDestroy();\n }\n onEscape(event) {\n this.cms.cancelDrop = true;\n this.onPointerUp(event);\n }\n onPointerDown(event) {\n if (!this.draggable || event.target.getAttribute('draggable') === 'false') {\n return;\n }\n event.preventDefault();\n event.stopPropagation();\n this._removeOnDestroy = false;\n this.cms.column = this.column;\n this.ghostClass = this._ghostClass;\n super.onPointerDown(event);\n this.column.grid.cdr.detectChanges();\n const args = {\n source: this.column\n };\n this.column.grid.columnMovingStart.emit(args);\n this.subscription$ = fromEvent(this.column.grid.document.defaultView, 'keydown').subscribe((ev) => {\n if (ev.key === this.platformUtil.KEYMAP.ESCAPE) {\n this.onEscape(ev);\n }\n });\n }\n onPointerMove(event) {\n event.preventDefault();\n super.onPointerMove(event);\n if (this._dragStarted && this.ghostElement && !this.cms.column) {\n this.cms.column = this.column;\n this.column.grid.cdr.detectChanges();\n }\n if (this.cms.column) {\n const args = {\n source: this.column,\n cancel: false\n };\n this.column.grid.columnMoving.emit(args);\n if (args.cancel) {\n this.onEscape(event);\n }\n }\n }\n onPointerUp(event) {\n // Run it explicitly inside the zone because sometimes onPointerUp executes after the code below.\n this.zone.run(() => {\n super.onPointerUp(event);\n this.cms.column = null;\n this.column.grid.cdr.detectChanges();\n });\n this._unsubscribe();\n }\n createGhost(pageX, pageY) {\n super.createGhost(pageX, pageY);\n this.ghostElement.style.height = null;\n this.ghostElement.style.minWidth = null;\n this.ghostElement.style.flexBasis = null;\n this.ghostElement.style.position = null;\n this.renderer.removeClass(this.ghostElement, this.columnSelectedClass);\n const icon = document.createElement('i');\n const text = document.createTextNode('block');\n icon.appendChild(text);\n icon.classList.add('material-icons');\n this.cms.icon = icon;\n if (!this.column.columnGroup) {\n this.renderer.addClass(icon, this.ghostImgIconClass);\n this.ghostElement.insertBefore(icon, this.ghostElement.firstElementChild);\n this.ghostLeft = this._ghostStartX = pageX - ((this.ghostElement.getBoundingClientRect().width / 3) * 2);\n this.ghostTop = this._ghostStartY = pageY - ((this.ghostElement.getBoundingClientRect().height / 3) * 2);\n }\n else {\n this.ghostElement.insertBefore(icon, this.ghostElement.childNodes[0]);\n this.renderer.addClass(icon, this.ghostImgIconGroupClass);\n this.ghostElement.children[0].style.paddingLeft = '0px';\n this.ghostLeft = this._ghostStartX = pageX - ((this.ghostElement.getBoundingClientRect().width / 3) * 2);\n this.ghostTop = this._ghostStartY = pageY - ((this.ghostElement.getBoundingClientRect().height / 3) * 2);\n }\n }\n _unsubscribe() {\n if (this.subscription$) {\n this.subscription$.unsubscribe();\n this.subscription$ = null;\n }\n }\n}\nIgxColumnMovingDragDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxColumnMovingDragDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: IgxColumnMovingService }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Directive });\nIgxColumnMovingDragDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxColumnMovingDragDirective, selector: \"[igxColumnMovingDrag]\", inputs: { column: [\"igxColumnMovingDrag\", \"column\"] }, usesInheritance: true, ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxColumnMovingDragDirective, decorators: [{\n type: Directive,\n args: [{ selector: '[igxColumnMovingDrag]' }]\n }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: IgxColumnMovingService }, { type: PlatformUtil }]; }, propDecorators: { column: [{\n type: Input,\n args: ['igxColumnMovingDrag']\n }] } });\n\n/**\n * An internal component representing a base group-by drop area.\n *\n * @hidden @internal\n */\nclass IgxGroupByAreaDirective {\n get cosyStyle() {\n return this.density === 'cosy';\n }\n get compactStyle() {\n return this.density === 'compact';\n }\n /**\n * The group-by expressions provided by the parent grid.\n */\n get expressions() {\n return this._expressions;\n }\n set expressions(value) {\n this._expressions = value;\n this.chipExpressions = this._expressions;\n this.expressionsChanged();\n this.expressionsChange.emit(this._expressions);\n }\n /**\n * The default message for the default drop area template.\n * Obviously, if another template is provided, this is ignored.\n */\n get dropAreaMessage() {\n return this._dropAreaMessage ?? this.grid.resourceStrings.igx_grid_groupByArea_message;\n }\n set dropAreaMessage(value) {\n this._dropAreaMessage = value;\n }\n /** The native DOM element. Used in sizing calculations. */\n get nativeElement() {\n return this.ref.nativeElement;\n }\n constructor(ref, platform) {\n this.ref = ref;\n this.platform = platform;\n this.density = DisplayDensity.comfortable;\n this.defaultClass = true;\n this.expressionsChange = new EventEmitter();\n this._expressions = [];\n }\n get dropAreaVisible() {\n return (this.grid.columnInDrag && this.grid.columnInDrag.groupable) ||\n !this.expressions.length;\n }\n handleKeyDown(id, event) {\n if (this.platform.isActivationKey(event)) {\n this.updateGroupSorting(id);\n }\n }\n handleClick(id) {\n if (!this.grid.getColumnByName(id).groupable) {\n return;\n }\n this.updateGroupSorting(id);\n }\n onDragDrop(event) {\n const drag = event.detail.owner;\n if (drag instanceof IgxColumnMovingDragDirective) {\n const column = drag.column;\n if (!this.grid.columns.find(c => c === column)) {\n return;\n }\n const isGrouped = this.expressions.findIndex((item) => item.fieldName === column.field) !== -1;\n if (column.groupable && !isGrouped && !column.columnGroup && !!column.field) {\n const groupingExpression = {\n fieldName: column.field,\n dir: this.grid.sortingExpressions.find(expr => expr.fieldName === column.field)?.dir || SortingDirection.Asc,\n ignoreCase: column.sortingIgnoreCase,\n strategy: column.sortStrategy,\n groupingComparer: column.groupingComparer\n };\n this.groupBy(groupingExpression);\n }\n }\n }\n getReorderedExpressions(chipsArray) {\n const newExpressions = [];\n chipsArray.forEach(chip => {\n const expr = this.expressions.find(item => item.fieldName === chip.id);\n // disallow changing order if there are columns with groupable: false\n if (!this.grid.getColumnByName(expr.fieldName)?.groupable) {\n return;\n }\n newExpressions.push(expr);\n });\n return newExpressions;\n }\n updateGroupSorting(id) {\n const expr = this.expressions.find(e => e.fieldName === id);\n expr.dir = 3 - expr.dir;\n const expressionsChangeEvent = this.grid.groupingExpressionsChange || this.expressionsChange;\n expressionsChangeEvent.emit(this.expressions);\n this.grid.pipeTrigger++;\n this.grid.notifyChanges();\n }\n expressionsChanged() {\n }\n}\nIgxGroupByAreaDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxGroupByAreaDirective, deps: [{ token: i0.ElementRef }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Directive });\nIgxGroupByAreaDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxGroupByAreaDirective, inputs: { dropAreaTemplate: \"dropAreaTemplate\", density: \"density\", grid: \"grid\", expressions: \"expressions\", dropAreaMessage: \"dropAreaMessage\" }, outputs: { expressionsChange: \"expressionsChange\" }, host: { properties: { \"class.igx-grid-grouparea\": \"this.defaultClass\", \"class.igx-grid-grouparea--cosy\": \"this.cosyStyle\", \"class.igx-grid-grouparea--compact\": \"this.compactStyle\" } }, viewQueries: [{ propertyName: \"chips\", predicate: IgxChipComponent, descendants: true }], ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxGroupByAreaDirective, decorators: [{\n type: Directive\n }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: PlatformUtil }]; }, propDecorators: { dropAreaTemplate: [{\n type: Input\n }], density: [{\n type: Input\n }], defaultClass: [{\n type: HostBinding,\n args: ['class.igx-grid-grouparea']\n }], cosyStyle: [{\n type: HostBinding,\n args: ['class.igx-grid-grouparea--cosy']\n }], compactStyle: [{\n type: HostBinding,\n args: ['class.igx-grid-grouparea--compact']\n }], grid: [{\n type: Input\n }], expressions: [{\n type: Input\n }], dropAreaMessage: [{\n type: Input\n }], expressionsChange: [{\n type: Output\n }], chips: [{\n type: ViewChildren,\n args: [IgxChipComponent]\n }] } });\n/**\n * A pipe to circumvent the use of getters/methods just to get some additional\n * information from the grouping expression and pass it to the chip representing\n * that expression.\n *\n * @hidden @internal\n */\nclass IgxGroupByMetaPipe {\n transform(key, grid) {\n const column = grid.getColumnByName(key);\n return { groupable: !!column?.groupable, title: column?.header || key };\n }\n}\nIgxGroupByMetaPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxGroupByMetaPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });\nIgxGroupByMetaPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: \"14.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxGroupByMetaPipe, name: \"igxGroupByMeta\" });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxGroupByMetaPipe, decorators: [{\n type: Pipe,\n args: [{ name: 'igxGroupByMeta' }]\n }] });\n\n/**\n * @hidden\n */\nclass IgxGroupByRowTemplateDirective {\n static ngTemplateContextGuard(_dir, ctx) {\n return true;\n }\n ;\n constructor(template) {\n this.template = template;\n }\n}\nIgxGroupByRowTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxGroupByRowTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });\nIgxGroupByRowTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxGroupByRowTemplateDirective, selector: \"[igxGroupByRow]\", ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxGroupByRowTemplateDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxGroupByRow]'\n }]\n }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });\n/**\n * @hidden\n */\nclass IgxGridDetailTemplateDirective {\n static ngTemplateContextGuard(_dir, ctx) {\n return true;\n }\n ;\n}\nIgxGridDetailTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxGridDetailTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });\nIgxGridDetailTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxGridDetailTemplateDirective, selector: \"[igxGridDetail]\", ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxGridDetailTemplateDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxGridDetail]'\n }]\n }] });\n/**\n * @hidden\n */\nclass IgxRowExpandedIndicatorDirective {\n static ngTemplateContextGuard(_directive, context) {\n return true;\n }\n ;\n}\nIgxRowExpandedIndicatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxRowExpandedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });\nIgxRowExpandedIndicatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxRowExpandedIndicatorDirective, selector: \"[igxRowExpandedIndicator]\", ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxRowExpandedIndicatorDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxRowExpandedIndicator]'\n }]\n }] });\n/**\n * @hidden\n */\nclass IgxRowCollapsedIndicatorDirective {\n static ngTemplateContextGuard(_directive, context) {\n return true;\n }\n ;\n}\nIgxRowCollapsedIndicatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxRowCollapsedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });\nIgxRowCollapsedIndicatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxRowCollapsedIndicatorDirective, selector: \"[igxRowCollapsedIndicator]\", ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxRowCollapsedIndicatorDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxRowCollapsedIndicator]'\n }]\n }] });\n/**\n * @hidden\n */\nclass IgxHeaderExpandIndicatorDirective {\n static ngTemplateContextGuard(_directive, context) {\n return true;\n }\n ;\n}\nIgxHeaderExpandIndicatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxHeaderExpandIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });\nIgxHeaderExpandIndicatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxHeaderExpandIndicatorDirective, selector: \"[igxHeaderExpandedIndicator]\", ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxHeaderExpandIndicatorDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxHeaderExpandedIndicator]'\n }]\n }] });\n/**\n * @hidden\n */\nclass IgxHeaderCollapseIndicatorDirective {\n static ngTemplateContextGuard(_directive, context) {\n return true;\n }\n ;\n}\nIgxHeaderCollapseIndicatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxHeaderCollapseIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });\nIgxHeaderCollapseIndicatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxHeaderCollapseIndicatorDirective, selector: \"[igxHeaderCollapsedIndicator]\", ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxHeaderCollapseIndicatorDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxHeaderCollapsedIndicator]'\n }]\n }] });\n/**\n * @hidden\n */\nclass IgxExcelStyleHeaderIconDirective {\n static ngTemplateContextGuard(_directive, context) {\n return true;\n }\n ;\n}\nIgxExcelStyleHeaderIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxExcelStyleHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });\nIgxExcelStyleHeaderIconDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxExcelStyleHeaderIconDirective, selector: \"[igxExcelStyleHeaderIcon]\", ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxExcelStyleHeaderIconDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxExcelStyleHeaderIcon]'\n }]\n }] });\n/**\n * @hidden\n */\nclass IgxSortHeaderIconDirective {\n static ngTemplateContextGuard(_directive, context) {\n return true;\n }\n ;\n}\nIgxSortHeaderIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxSortHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });\nIgxSortHeaderIconDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxSortHeaderIconDirective, selector: \"[igxSortHeaderIcon]\", ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxSortHeaderIconDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxSortHeaderIcon]'\n }]\n }] });\n/**\n * @hidden\n */\nclass IgxSortAscendingHeaderIconDirective {\n static ngTemplateContextGuard(_directive, context) {\n return true;\n }\n ;\n}\nIgxSortAscendingHeaderIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxSortAscendingHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });\nIgxSortAscendingHeaderIconDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxSortAscendingHeaderIconDirective, selector: \"[igxSortAscendingHeaderIcon]\", ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxSortAscendingHeaderIconDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxSortAscendingHeaderIcon]'\n }]\n }] });\n/**\n * @hidden\n */\nclass IgxSortDescendingHeaderIconDirective {\n static ngTemplateContextGuard(_directive, context) {\n return true;\n }\n ;\n}\nIgxSortDescendingHeaderIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxSortDescendingHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });\nIgxSortDescendingHeaderIconDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxSortDescendingHeaderIconDirective, selector: \"[igxSortDescendingHeaderIcon]\", ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxSortDescendingHeaderIconDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxSortDescendingHeaderIcon]'\n }]\n }] });\n/**\n * @hidden\n */\nclass IgxGroupAreaDropDirective extends IgxDropDirective {\n constructor(groupArea, elementRef, renderer, zone) {\n super(elementRef, renderer, zone);\n this.groupArea = groupArea;\n this.elementRef = elementRef;\n this.hovered = false;\n }\n onDragEnter(event) {\n const drag = event.detail.owner;\n const column = drag.column;\n if (!this.columnBelongsToGrid(column)) {\n return;\n }\n const isGrouped = this.groupArea.expressions\n ? this.groupArea.expressions.findIndex((item) => item.fieldName === column.field) !== -1\n : false;\n if (column.groupable && !isGrouped && !column.columnGroup && !!column.field) {\n drag.icon.innerText = 'group_work';\n this.hovered = true;\n }\n else {\n drag.icon.innerText = 'block';\n this.hovered = false;\n }\n }\n onDragLeave(event) {\n const drag = event.detail.owner;\n const column = drag.column;\n if (!this.columnBelongsToGrid(column)) {\n return;\n }\n event.detail.owner.icon.innerText = 'block';\n this.hovered = false;\n }\n closestParentByAttr(elem, attr) {\n return elem.hasAttribute(attr) ?\n elem :\n this.closestParentByAttr(elem.parentElement, attr);\n }\n columnBelongsToGrid(column) {\n const elem = this.elementRef.nativeElement;\n const closestGridID = this.closestParentByAttr(elem, 'igxGroupAreaDrop').getAttribute('gridId');\n if (!column) {\n return false;\n }\n else {\n const grid = column.grid;\n if (!grid || grid.id !== closestGridID) {\n return false;\n }\n return true;\n }\n }\n}\nIgxGroupAreaDropDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxGroupAreaDropDirective, deps: [{ token: IgxGroupByAreaDirective }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });\nIgxGroupAreaDropDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0\", type: IgxGroupAreaDropDirective, selector: \"[igxGroupAreaDrop]\", host: { properties: { \"class.igx-drop-area--hover\": \"this.hovered\" } }, usesInheritance: true, ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxGroupAreaDropDirective, decorators: [{\n type: Directive,\n args: [{\n selector: '[igxGroupAreaDrop]'\n }]\n }], ctorParameters: function () { return [{ type: IgxGroupByAreaDirective }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { hovered: [{\n type: HostBinding,\n args: ['class.igx-drop-area--hover']\n }] } });\n\nclass IgxQueryBuilderHeaderComponent {\n constructor() {\n this._resourceStrings = CurrentResourceStrings.QueryBuilderResStrings;\n /**\n * An @Input property to show/hide the legend.\n *\n * @example\n * ```html\n * \\n
\\n\", dependencies: [{ kind: \"directive\", type: i1$1.NgIf, selector: \"[ngIf]\", inputs: [\"ngIf\", \"ngIfThen\", \"ngIfElse\"] }] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxQueryBuilderHeaderComponent, decorators: [{\n type: Component,\n args: [{ selector: 'igx-query-builder-header', template: \"\\n {{ title }}\\n
\\n \\n
\\n\\n {{this.resourceStrings.igx_query_builder_and_label}}\\n
\\n \\n {{this.resourceStrings.igx_query_builder_or_label}}\\n
\\n \\n
\\n\" }]\n }], propDecorators: { title: [{\n type: Input\n }], showLegend: [{\n type: Input\n }], resourceStrings: [{\n type: Input\n }] } });\n\nconst DEFAULT_PIPE_DATE_FORMAT = 'mediumDate';\nconst DEFAULT_PIPE_TIME_FORMAT = 'mediumTime';\nconst DEFAULT_PIPE_DATE_TIME_FORMAT = 'medium';\nconst DEFAULT_PIPE_DIGITS_INFO = '1.0-3';\nconst DEFAULT_DATE_TIME_FORMAT = 'dd/MM/yyyy HH:mm:ss tt';\nconst DEFAULT_TIME_FORMAT = 'hh:mm:ss tt';\nclass IgxFieldFormatterPipe {\n transform(value, formatter, rowData, fieldData) {\n return formatter(value, rowData, fieldData);\n }\n}\nIgxFieldFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxFieldFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });\nIgxFieldFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: \"14.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxFieldFormatterPipe, name: \"fieldFormatter\" });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0\", ngImport: i0, type: IgxFieldFormatterPipe, decorators: [{\n type: Pipe,\n args: [{ name: 'fieldFormatter' }]\n }] });\n/**\n * @hidden @internal\n */\nclass ExpressionItem {\n constructor(parent) {\n this.parent = parent;\n }\n}\n/**\n * @hidden @internal\n */\nclass ExpressionGroupItem extends ExpressionItem {\n constructor(operator, parent) {\n super(parent);\n this.operator = operator;\n this.children = [];\n }\n}\n/**\n * @hidden @internal\n */\nclass ExpressionOperandItem extends ExpressionItem {\n constructor(expression, parent) {\n super(parent);\n this.expression = expression;\n }\n}\n/**\n * A component used for operating with complex filters by creating or editing conditions\n * and grouping them using AND/OR logic.\n * It is used internally in the Advanced Filtering of the Grid.\n *\n * @example\n * ```html\n * \\n {{ title }}\\n
\\n \\n
\\n\\n {{this.resourceStrings.igx_query_builder_and_label}}\\n
\\n \\n {{this.resourceStrings.igx_query_builder_or_label}}\\n
\\n \\n
\\n \\n {{ this.resourceStrings.igx_query_builder_initial_text }}\\n
\\n\\n \\n \\n {{\\n getConditionFriendlyName(condition)\\n }}\\n
\\n \\n \\n\\n \\n \\n check \\n \\n \\n close \\n \\n
\\n \\n\\n \\n
\\n\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n {{\\n this.resourceStrings.igx_query_builder_end_group\\n }}\\n \\n
\\n \\n \\n \\n
\\n \\n {{ this.resourceStrings.igx_query_builder_initial_text }}\\n
\\n\\n \\n \\n {{\\n getConditionFriendlyName(condition)\\n }}\\n
\\n \\n \\n\\n \\n \\n check \\n \\n \\n close \\n \\n
\\n \\n\\n \\n
\\n\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n {{\\n this.resourceStrings.igx_query_builder_end_group\\n }}\\n \\n
\\n \\n \\n \n * \n * Message sent\n * \n *
\n * ```\n */\nclass IgxSnackbarComponent extends IgxNotificationsDirective {\n constructor() {\n super(...arguments);\n /**\n * Sets/gets the `id` of the snackbar.\n * If not set, the `id` of the first snackbar component will be `\"igx-snackbar-0\"`;\n * ```html\n *