@leanix/components 0.2.75 → 0.2.79

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,14 +5,14 @@ import { Component, Input, HostBinding, HostListener, EventEmitter, ChangeDetect
5
5
  import * as i3$3 from '@angular/cdk/portal';
6
6
  import { ComponentPortal, CdkPortal, PortalModule } from '@angular/cdk/portal';
7
7
  import * as i1 from '@angular/cdk/overlay';
8
- import { OverlayModule } from '@angular/cdk/overlay';
8
+ import { OverlayModule, CdkConnectedOverlay } from '@angular/cdk/overlay';
9
9
  import { trimEnd, escape, sortBy, get, isEqual, toLower, some, padCharsStart, toString, isNaN as isNaN$1, toNumber, includes, last, findIndex, filter as filter$1, isObject, find, uniqueId } from 'lodash/fp';
10
10
  import * as i1$2 from '@ngx-translate/core';
11
11
  import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
12
12
  import * as i1$1 from '@angular/platform-browser';
13
13
  import * as i6 from 'rxjs';
14
14
  import { merge, Subject, fromEvent, Observable, BehaviorSubject, combineLatest, ReplaySubject, of } from 'rxjs';
15
- import { takeUntil, first, startWith, withLatestFrom, filter, delay, map, distinctUntilChanged, skipWhile, tap, switchMap, debounceTime } from 'rxjs/operators';
15
+ import { takeUntil, first, startWith, withLatestFrom, filter, delay, map, distinctUntilChanged, switchMap, debounceTime, mapTo, skipWhile, tap } from 'rxjs/operators';
16
16
  import * as Color from 'color';
17
17
  import { format, distanceInWords } from 'date-fns';
18
18
  import * as _ from 'lodash';
@@ -352,7 +352,7 @@ class TooltipComponent {
352
352
  }
353
353
  }
354
354
  TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
355
- TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: TooltipComponent, selector: "lx-tooltip", inputs: { content: "content", isHtmlContent: "isHtmlContent", position: "position" }, ngImport: i0, template: "<div *ngIf=\"!isHtmlContent; else htmlTooltip\" [ngClass]=\"['x-' + position.x, 'y-' + position.y]\">{{ content }}</div>\n<ng-template #htmlTooltip>\n <div [innerHtml]=\"content\" [ngClass]=\"['x-' + position.x, 'y-' + position.y]\"></div>\n</ng-template>\n", styles: [":host{display:block}div{background-color:#292929;color:#fff;border:0 solid transparent;border-radius:5px;opacity:1;font-size:11px;font-weight:400;text-shadow:0 1px #000;text-align:left;word-wrap:break-word;line-height:16px;max-width:280px;min-width:50px;padding:6px 10px;overflow:hidden}.x-left:after,.x-right:after,.y-bottom:after,.y-top:after{content:\" \";position:absolute;border:5px solid transparent;border-top-color:#292929}.y-top:after{top:100%;margin-left:-5px}.y-bottom:after{top:0;margin-left:-5px;transform-origin:center top;transform:rotate(180deg)}.y-center:after{top:50%;margin-left:-5px;margin-top:-10px}.y-bottom.x-center:after,.y-top.x-center:after{left:50%}.y-bottom.x-left:after,.y-top.x-left:after{right:10px}.y-bottom.x-right:after,.y-top.x-right:after{left:10px}.y-center.x-right:after{left:0;transform-origin:left center;transform:rotate(90deg)}.y-center.x-left:after{left:100%;transform-origin:right center;transform:rotate(-90deg)}"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
355
+ TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: TooltipComponent, selector: "lx-tooltip", inputs: { content: "content", isHtmlContent: "isHtmlContent", position: "position" }, ngImport: i0, template: "<div *ngIf=\"!isHtmlContent; else htmlTooltip\" [ngClass]=\"['x-' + position.x, 'y-' + position.y]\">{{ content }}</div>\n<ng-template #htmlTooltip>\n <div [innerHtml]=\"content\" [ngClass]=\"['x-' + position.x, 'y-' + position.y]\"></div>\n</ng-template>\n", styles: [":host{display:block;position:relative;margin:5px}div{background-color:#292929;color:#fff;border:0 solid transparent;border-radius:5px;opacity:1;font-size:11px;font-weight:400;text-shadow:0 1px #000;text-align:left;word-wrap:break-word;line-height:16px;max-width:280px;min-width:50px;padding:6px 10px;overflow:hidden}.x-left:after,.x-right:after,.y-bottom:after,.y-top:after{content:\" \";position:absolute;border:5px solid transparent;border-top-color:#292929}.y-top:after{top:100%;margin-left:-5px}.y-bottom:after{top:0;margin-left:-5px;transform-origin:center top;transform:rotate(180deg)}.y-center:after{top:50%;margin-left:-5px;margin-top:-10px}.y-bottom.x-center:after,.y-top.x-center:after{left:50%}.y-bottom.x-left:after,.y-top.x-left:after{right:10px}.y-bottom.x-right:after,.y-top.x-right:after{left:10px}.y-center.x-right:after{left:0;transform-origin:left center;transform:rotate(90deg)}.y-center.x-left:after{left:100%;transform-origin:right center;transform:rotate(-90deg)}"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
356
356
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: TooltipComponent, decorators: [{
357
357
  type: Component,
358
358
  args: [{
@@ -1872,6 +1872,517 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
1872
1872
  args: ['createNewOptionTemplate']
1873
1873
  }] } });
1874
1874
 
1875
+ // We can only use 'keyCode' because 'key' depends on the browser and does not work for IE11
1876
+ const BACKSPACE = 8;
1877
+ const TAB = 9;
1878
+ const ARROW_DOWN = 40;
1879
+ const ARROW_UP = 38;
1880
+ const ARROW_LEFT = 37;
1881
+ const ARROW_RIGHT = 39;
1882
+ const ENTER = 13;
1883
+ const ESCAPE = 27;
1884
+ const SPACE = 32;
1885
+
1886
+ class KeyboardActionSourceDirective {
1887
+ constructor(element) {
1888
+ this.element = element;
1889
+ this.dontEmit = false;
1890
+ this.destroyed$ = new Subject();
1891
+ this.keyboardActions$ = fromEvent(this.element.nativeElement, 'keydown').pipe(filter((_event) => !this.dontEmit), map((event) => {
1892
+ switch (event.keyCode) {
1893
+ case ARROW_UP:
1894
+ event.preventDefault();
1895
+ return KeyboardSelectAction.PREV;
1896
+ case ARROW_DOWN:
1897
+ event.preventDefault();
1898
+ return KeyboardSelectAction.NEXT;
1899
+ case ARROW_LEFT:
1900
+ event.preventDefault();
1901
+ return KeyboardSelectAction.LEFT;
1902
+ case ARROW_RIGHT:
1903
+ event.preventDefault();
1904
+ return KeyboardSelectAction.RIGHT;
1905
+ case ENTER:
1906
+ event.preventDefault();
1907
+ return KeyboardSelectAction.EXECUTE;
1908
+ case ESCAPE:
1909
+ case TAB:
1910
+ return KeyboardSelectAction.CLOSE;
1911
+ }
1912
+ }), takeUntil(this.destroyed$));
1913
+ }
1914
+ blur() {
1915
+ this.element.nativeElement.blur();
1916
+ }
1917
+ ngOnDestroy() {
1918
+ this.destroyed$.next();
1919
+ }
1920
+ }
1921
+ KeyboardActionSourceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: KeyboardActionSourceDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
1922
+ KeyboardActionSourceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"], ngImport: i0 });
1923
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: KeyboardActionSourceDirective, decorators: [{
1924
+ type: Directive,
1925
+ args: [{
1926
+ exportAs: 'keyboardActionSource',
1927
+ selector: '[lxKeyboardActionSource]'
1928
+ }]
1929
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
1930
+
1931
+ class OptionGroupComponent {
1932
+ constructor() {
1933
+ /**
1934
+ * Is true when option children have a selected state.
1935
+ * In this case we want to align the padding of the group label with the lx-options'.
1936
+ */
1937
+ this.hasSelectedState = true;
1938
+ this.select = new EventEmitter();
1939
+ }
1940
+ selectOption(value) {
1941
+ this.select.emit(value);
1942
+ }
1943
+ }
1944
+ OptionGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1945
+ OptionGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: OptionGroupComponent, selector: "lx-option-group", inputs: { hasSelectedState: "hasSelectedState", label: "label" }, outputs: { select: "select" }, ngImport: i0, template: "<li>\n <span *ngIf=\"label\" class=\"groupLabel\" [class.selectedState]=\"hasSelectedState\">{{ label }}</span>\n <ul>\n <ng-content></ng-content>\n </ul>\n</li>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{display:block}:host:not(:first-child){border-top:1px solid #eaedf1}ul{list-style:none;margin:0;padding-left:0}.groupLabel{display:block;line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase}.groupLabel.selectedState{padding-left:28px}"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1946
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionGroupComponent, decorators: [{
1947
+ type: Component,
1948
+ args: [{
1949
+ selector: 'lx-option-group',
1950
+ templateUrl: 'option-group.component.html',
1951
+ styleUrls: ['option-group.component.styl'],
1952
+ changeDetection: ChangeDetectionStrategy.OnPush
1953
+ }]
1954
+ }], propDecorators: { hasSelectedState: [{
1955
+ type: Input
1956
+ }], label: [{
1957
+ type: Input
1958
+ }], select: [{
1959
+ type: Output
1960
+ }] } });
1961
+
1962
+ class OptionComponent {
1963
+ constructor(group, elementRef) {
1964
+ this.group = group;
1965
+ this.elementRef = elementRef;
1966
+ this.selected = false;
1967
+ this.isHighlighted = false;
1968
+ this.disabled = false;
1969
+ /**
1970
+ * Is true when option has a selection nature like sorting.
1971
+ * In this case we show a check icon on the left to indicate selection.
1972
+ *
1973
+ * Is false when option represents a one time action like printing.
1974
+ * Cannot have selectedState when Option has dropdown
1975
+ */
1976
+ this.hasSelectedState = true;
1977
+ this.select = new EventEmitter();
1978
+ this.highlight = new EventEmitter();
1979
+ this.selectedClick = new EventEmitter();
1980
+ this.hasSubdropdown = false;
1981
+ this.isSuboption = false;
1982
+ }
1983
+ selectOption(event) {
1984
+ if (this.disabled || this.hasSubdropdown) {
1985
+ if (event) {
1986
+ event.stopImmediatePropagation();
1987
+ }
1988
+ }
1989
+ else {
1990
+ if (this.selected) {
1991
+ return this.selectedClick.emit();
1992
+ }
1993
+ if (this.group) {
1994
+ this.group.selectOption(this.value);
1995
+ }
1996
+ this.select.emit(this.value);
1997
+ }
1998
+ }
1999
+ setSelected(value) {
2000
+ this.selected = value;
2001
+ }
2002
+ setHighlighted(value) {
2003
+ this.isHighlighted = value;
2004
+ this.highlight.emit(this.isHighlighted);
2005
+ }
2006
+ }
2007
+ OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionComponent, deps: [{ token: forwardRef(() => OptionGroupComponent), optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
2008
+ OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: OptionComponent, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick" }, host: { listeners: { "click": "selectOption($event)" } }, ngImport: i0, template: "<li\n class=\"option\"\n [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n [class.highlighted]=\"isHighlighted\"\n [class.selected]=\"selected\"\n [class.disabled]=\"disabled\"\n [class.hasSubdropdown]=\"hasSubdropdown\"\n>\n <i *ngIf=\"hasSelectedState && selected\" class=\"far fa-check\"></i>\n <ng-content></ng-content>\n <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{display:block}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.fa-check{left:8px}.fa-check,.fa-chevron-right{line-height:23px;position:absolute}.fa-chevron-right{right:8px;font-size:8px}"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2009
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionComponent, decorators: [{
2010
+ type: Component,
2011
+ args: [{
2012
+ selector: 'lx-option',
2013
+ templateUrl: 'option.component.html',
2014
+ styleUrls: ['option.component.styl']
2015
+ }]
2016
+ }], ctorParameters: function () { return [{ type: OptionGroupComponent, decorators: [{
2017
+ type: Optional
2018
+ }, {
2019
+ type: Inject,
2020
+ args: [forwardRef(() => OptionGroupComponent)]
2021
+ }] }, { type: i0.ElementRef }]; }, propDecorators: { selected: [{
2022
+ type: Input
2023
+ }], isHighlighted: [{
2024
+ type: Input
2025
+ }], disabled: [{
2026
+ type: Input
2027
+ }], value: [{
2028
+ type: Input
2029
+ }], hasSelectedState: [{
2030
+ type: Input
2031
+ }], select: [{
2032
+ type: Output
2033
+ }], highlight: [{
2034
+ type: Output
2035
+ }], selectedClick: [{
2036
+ type: Output
2037
+ }], selectOption: [{
2038
+ type: HostListener,
2039
+ args: ['click', ['$event']]
2040
+ }] } });
2041
+
2042
+ const BOTTOM_LEFT_POSITION$1 = {
2043
+ originX: 'end',
2044
+ overlayX: 'end',
2045
+ originY: 'bottom',
2046
+ overlayY: 'top'
2047
+ };
2048
+ const BOTTOM_RIGHT_POSITION$1 = {
2049
+ originX: 'start',
2050
+ overlayX: 'start',
2051
+ originY: 'bottom',
2052
+ overlayY: 'top'
2053
+ };
2054
+ const TOP_LEFT_POSITION$1 = {
2055
+ originX: 'end',
2056
+ overlayX: 'end',
2057
+ originY: 'top',
2058
+ overlayY: 'bottom'
2059
+ };
2060
+ const TOP_RIGHT_POSITION$1 = {
2061
+ originX: 'start',
2062
+ overlayX: 'start',
2063
+ originY: 'top',
2064
+ overlayY: 'bottom'
2065
+ };
2066
+ const LEFT_ALIGN_POSITIONS$1 = [BOTTOM_LEFT_POSITION$1, TOP_LEFT_POSITION$1, BOTTOM_RIGHT_POSITION$1, TOP_RIGHT_POSITION$1];
2067
+ const RIGHT_ALIGN_POSITIONS$1 = [BOTTOM_RIGHT_POSITION$1, TOP_RIGHT_POSITION$1, BOTTOM_LEFT_POSITION$1, TOP_LEFT_POSITION$1];
2068
+ class CdkOptionsDropdownComponent {
2069
+ constructor(changeDetection) {
2070
+ this.changeDetection = changeDetection;
2071
+ this.align = 'right';
2072
+ this.closeOnScroll = false;
2073
+ this.disabled = false;
2074
+ this.maxHeight = 'none';
2075
+ this.highlightedOptionIndex$ = new BehaviorSubject(0);
2076
+ this._open = false;
2077
+ this.isSubdropdownExpanded = false;
2078
+ this.destroyed$ = new Subject();
2079
+ this.isPositionComputed = true;
2080
+ }
2081
+ set open(value) {
2082
+ if (this.disabled) {
2083
+ return;
2084
+ }
2085
+ this._open = value;
2086
+ if (this.trigger) {
2087
+ // Don't emit keyboard actions while the dropdown is not open yet.
2088
+ this.trigger.dontEmit = !this.open;
2089
+ }
2090
+ if (this.open) {
2091
+ this.isSubdropdownExpanded = false;
2092
+ this.setInitialHighlightingIndex();
2093
+ }
2094
+ this.reloadOverlayPosition(this.open);
2095
+ }
2096
+ get open() {
2097
+ return this._open;
2098
+ }
2099
+ get options() {
2100
+ return this._options.toArray();
2101
+ }
2102
+ ngAfterViewInit() {
2103
+ this.trigger.dontEmit = !this.open;
2104
+ this.overlay.positions = this.align === 'left' ? LEFT_ALIGN_POSITIONS$1 : RIGHT_ALIGN_POSITIONS$1;
2105
+ const optionsChanges$ = this._options.changes.pipe(startWith(this._options), map((options) => options.toArray()));
2106
+ this.trigger.keyboardActions$
2107
+ .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.NEXT), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, index, options) => this.next(index, options)))
2108
+ .subscribe(this.highlightedOptionIndex$);
2109
+ this.trigger.keyboardActions$
2110
+ .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.PREV), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, index, options) => this.prev(index, options)))
2111
+ .subscribe(this.highlightedOptionIndex$);
2112
+ this.trigger.keyboardActions$
2113
+ .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.LEFT), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, index, options) => this.isSubdropdownExpanded ? this.collapse(index, options) : this.expand(index, options)))
2114
+ .subscribe(this.highlightedOptionIndex$);
2115
+ this.trigger.keyboardActions$
2116
+ .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.RIGHT), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, index, options) => this.isSubdropdownExpanded ? this.collapse(index, options) : this.expand(index, options)))
2117
+ .subscribe(this.highlightedOptionIndex$);
2118
+ this.trigger.keyboardActions$
2119
+ .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.CLOSE))
2120
+ .subscribe(() => this.closeDropdown());
2121
+ this.trigger.keyboardActions$
2122
+ .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.EXECUTE), withLatestFrom(this.highlightedOptionIndex$, (_, index) => index))
2123
+ .subscribe((index) => {
2124
+ if (this.options[index]) {
2125
+ this.options[index].selectOption();
2126
+ }
2127
+ });
2128
+ /** Combined stream of all of the child options' select outputs. */
2129
+ this._options.changes
2130
+ .pipe(startWith(this._options), switchMap(() => merge(...this._options.map((option) => option.select), ...this._options.map((option) => option.selectedClick))), delay(0), takeUntil(this.destroyed$))
2131
+ .subscribe((_value) => {
2132
+ this.closeDropdown();
2133
+ });
2134
+ combineLatest([optionsChanges$, this.highlightedOptionIndex$])
2135
+ .pipe(delay(0), map(([options, index]) => options[index]), distinctUntilChanged(), takeUntil(this.destroyed$))
2136
+ .subscribe((optionToBeHighlighted) => {
2137
+ this.options.forEach((option) => option.setHighlighted(optionToBeHighlighted === option));
2138
+ this.changeDetection.markForCheck();
2139
+ });
2140
+ if (this.closeOnScroll) {
2141
+ fromEvent(window, 'scroll')
2142
+ .pipe(debounceTime(100), takeUntil(this.destroyed$))
2143
+ .subscribe(() => {
2144
+ this.open = false;
2145
+ this.trigger.blur();
2146
+ });
2147
+ }
2148
+ }
2149
+ ngOnDestroy() {
2150
+ this.destroyed$.next();
2151
+ }
2152
+ closeDropdown() {
2153
+ this.tooltips.toArray().forEach((tooltip) => tooltip.hide());
2154
+ this.open = false;
2155
+ }
2156
+ setInitialHighlightingIndex() {
2157
+ const firstAvailableIndex = this.options.map((option) => !this.optionIsHighlightable(option)).indexOf(false, 0);
2158
+ this.highlightedOptionIndex$.next(firstAvailableIndex);
2159
+ }
2160
+ prev(currentIndex, items) {
2161
+ if (currentIndex > 0) {
2162
+ const prevEnabledIndex = items.map((option) => !this.optionIsHighlightable(option)).lastIndexOf(false, currentIndex - 1);
2163
+ return prevEnabledIndex !== -1 ? prevEnabledIndex : currentIndex;
2164
+ }
2165
+ else {
2166
+ return currentIndex;
2167
+ }
2168
+ }
2169
+ next(currentIndex, items) {
2170
+ if (currentIndex < items.length) {
2171
+ const nextEnabledIndex = items.map((option) => !this.optionIsHighlightable(option)).indexOf(false, currentIndex + 1);
2172
+ return nextEnabledIndex !== -1 ? nextEnabledIndex : currentIndex;
2173
+ }
2174
+ else {
2175
+ return currentIndex;
2176
+ }
2177
+ }
2178
+ expand(currentIndex, items) {
2179
+ if (items[currentIndex].hasSubdropdown) {
2180
+ this.isSubdropdownExpanded = true;
2181
+ return this.next(currentIndex, items);
2182
+ }
2183
+ else {
2184
+ return currentIndex;
2185
+ }
2186
+ }
2187
+ collapse(currentIndex, items) {
2188
+ if (this.isSubdropdownExpanded) {
2189
+ this.isSubdropdownExpanded = false;
2190
+ return this.prev(currentIndex, items);
2191
+ }
2192
+ else {
2193
+ return currentIndex;
2194
+ }
2195
+ }
2196
+ optionIsHighlightable(option) {
2197
+ const isToplevelOptionAndAllowed = !option.isSuboption && !this.isSubdropdownExpanded;
2198
+ const isSecondlevelOptionAndAllowed = option.isSuboption && this.isSubdropdownExpanded;
2199
+ return !option.disabled && (isToplevelOptionAndAllowed || isSecondlevelOptionAndAllowed);
2200
+ }
2201
+ reloadOverlayPosition(open) {
2202
+ if (open) {
2203
+ this.isPositionComputed = false;
2204
+ setTimeout(() => {
2205
+ const dropdownElement = this.dropdownContainer.nativeElement;
2206
+ this.overlay.overlayRef.updateSize({
2207
+ height: dropdownElement.offsetHeight,
2208
+ width: dropdownElement.offsetWidth
2209
+ });
2210
+ this.overlay.overlayRef.updatePosition();
2211
+ this.isPositionComputed = true;
2212
+ this.changeDetection.markForCheck();
2213
+ }, 0);
2214
+ }
2215
+ else {
2216
+ this.changeDetection.markForCheck();
2217
+ }
2218
+ }
2219
+ }
2220
+ CdkOptionsDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: CdkOptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2221
+ CdkOptionsDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: CdkOptionsDropdownComponent, selector: "lx-cdk-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight" }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }, { propertyName: "tooltips", predicate: TooltipDirective, descendants: true }], viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }], ngImport: i0, template: "<div (click)=\"open = !open\" class=\"triggerContainer\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</div>\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"open\"\n (overlayOutsideClick)=\"closeDropdown()\"\n>\n <ul\n #dropdown\n [class.showScrollbar]=\"maxHeight !== 'none'\"\n [style.max-height]=\"maxHeight\"\n [style.visibility]=\"isPositionComputed ? null : 'hidden'\"\n >\n <ng-content></ng-content>\n </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px rgba(0,0,0,.15);border:1px solid #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}"], directives: [{ type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayPositions", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayTransformOriginOn"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2222
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: CdkOptionsDropdownComponent, decorators: [{
2223
+ type: Component,
2224
+ args: [{
2225
+ selector: 'lx-cdk-options-dropdown',
2226
+ templateUrl: 'cdk-options-dropdown.component.html',
2227
+ styleUrls: ['cdk-options-dropdown.component.scss'],
2228
+ changeDetection: ChangeDetectionStrategy.OnPush
2229
+ }]
2230
+ }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { dropdownContainer: [{
2231
+ type: ViewChild,
2232
+ args: ['dropdown']
2233
+ }], align: [{
2234
+ type: Input
2235
+ }], closeOnScroll: [{
2236
+ type: Input
2237
+ }], disabled: [{
2238
+ type: Input
2239
+ }], maxHeight: [{
2240
+ type: Input
2241
+ }], trigger: [{
2242
+ type: ContentChild,
2243
+ args: [KeyboardActionSourceDirective]
2244
+ }], overlay: [{
2245
+ type: ViewChild,
2246
+ args: [CdkConnectedOverlay]
2247
+ }], _options: [{
2248
+ type: ContentChildren,
2249
+ args: [OptionComponent, { descendants: true }]
2250
+ }], tooltips: [{
2251
+ type: ContentChildren,
2252
+ args: [TooltipDirective, { descendants: true }]
2253
+ }] } });
2254
+
2255
+ const BOTTOM_LEFT_POSITION = {
2256
+ originX: 'start',
2257
+ overlayX: 'end',
2258
+ originY: 'top',
2259
+ overlayY: 'top',
2260
+ offsetX: -4
2261
+ };
2262
+ const BOTTOM_RIGHT_POSITION = {
2263
+ originX: 'end',
2264
+ overlayX: 'start',
2265
+ originY: 'top',
2266
+ overlayY: 'top',
2267
+ offsetX: 4
2268
+ };
2269
+ const TOP_LEFT_POSITION = {
2270
+ originX: 'start',
2271
+ overlayX: 'end',
2272
+ originY: 'bottom',
2273
+ overlayY: 'bottom',
2274
+ offsetX: -4
2275
+ };
2276
+ const TOP_RIGHT_POSITION = {
2277
+ originX: 'end',
2278
+ overlayX: 'start',
2279
+ originY: 'bottom',
2280
+ overlayY: 'bottom',
2281
+ offsetX: 4
2282
+ };
2283
+ const LEFT_ALIGN_POSITIONS = [BOTTOM_LEFT_POSITION, TOP_LEFT_POSITION, BOTTOM_RIGHT_POSITION, TOP_RIGHT_POSITION];
2284
+ const RIGHT_ALIGN_POSITIONS = [BOTTOM_RIGHT_POSITION, TOP_RIGHT_POSITION, BOTTOM_LEFT_POSITION, TOP_LEFT_POSITION];
2285
+ class CdkOptionsSubDropdownComponent {
2286
+ constructor(changeDetection) {
2287
+ this.changeDetection = changeDetection;
2288
+ this.align = 'right';
2289
+ this.open = false;
2290
+ this.isPositionComputed = true;
2291
+ this.mouseInside$ = new Subject();
2292
+ this.destroyed$ = new Subject();
2293
+ }
2294
+ mouseenter() {
2295
+ this.mouseInside$.next(true);
2296
+ }
2297
+ mouseleave() {
2298
+ this.mouseInside$.next(false);
2299
+ }
2300
+ ngOnDestroy() {
2301
+ this.destroyed$.next();
2302
+ }
2303
+ ngAfterViewInit() {
2304
+ // To avoid `Expression has changed after it was checked`
2305
+ executeOnNextTick(() => {
2306
+ this.trigger.hasSubdropdown = true;
2307
+ this.overlay.positions = this.align === 'left' ? LEFT_ALIGN_POSITIONS : RIGHT_ALIGN_POSITIONS;
2308
+ });
2309
+ merge(this.showByMouse(), this.showByKeyboard())
2310
+ .pipe(takeUntil(this.destroyed$), distinctUntilChanged())
2311
+ .subscribe((show) => {
2312
+ this.open = show;
2313
+ this.reloadOverlayPosition(this.open);
2314
+ });
2315
+ this.options.changes
2316
+ .pipe(startWith(this.options), switchMap(() => merge(...this.options.map((option) => option.select), ...this.options.map((option) => option.selectedClick))), delay(0), takeUntil(this.destroyed$))
2317
+ .subscribe(() => {
2318
+ this.closeDropdown();
2319
+ });
2320
+ }
2321
+ showByKeyboard() {
2322
+ const optionChange$ = this.options.changes.pipe(startWith(this.options), map((options) => options.toArray()), map((options) => options.map((option) => {
2323
+ option.isSuboption = true;
2324
+ return option;
2325
+ })));
2326
+ return combineLatest([this.trigger.highlight.asObservable(), optionChange$]).pipe(delay(0), // Need tick delay to get option highlighted and filter it out after
2327
+ map(([isHighlighted, options]) => isHighlighted || options.some((option) => option.isHighlighted)));
2328
+ }
2329
+ showByMouse() {
2330
+ const mouseEnterTrigger$ = fromEvent(this.trigger.elementRef.nativeElement, 'mouseenter');
2331
+ const mouseLeaveTrigger$ = fromEvent(this.trigger.elementRef.nativeElement, 'mouseleave');
2332
+ const showOnEnterMouse$ = mouseEnterTrigger$.pipe(mapTo(true));
2333
+ const hideOnLeaveMouse$ = mouseLeaveTrigger$.pipe(mapTo(false));
2334
+ // react to trigger mouse leave events, and mouse enter events in the sub-dropdown. We'll use a 300ms
2335
+ // debounce, so that while navigating from the trigger to the sub-dropdown, all the intermediate events
2336
+ // are ignored.
2337
+ const showSubdropdown$ = merge(hideOnLeaveMouse$, this.mouseInside$).pipe(debounceTime(300));
2338
+ const showOnEnterSubdropdown$ = mouseEnterTrigger$.pipe(switchMap(() => showSubdropdown$));
2339
+ return merge(showOnEnterMouse$, showOnEnterSubdropdown$);
2340
+ }
2341
+ reloadOverlayPosition(open) {
2342
+ // force a rendering so that the dropdown container's dimensions are computed.
2343
+ this.changeDetection.markForCheck();
2344
+ if (open && this.dropdownContainer) {
2345
+ this.isPositionComputed = false;
2346
+ setTimeout(() => {
2347
+ const dropdownElement = this.dropdownContainer.nativeElement;
2348
+ this.overlay.overlayRef.updateSize({
2349
+ height: dropdownElement.offsetHeight,
2350
+ width: dropdownElement.offsetWidth
2351
+ });
2352
+ this.overlay.overlayRef.updatePosition();
2353
+ this.isPositionComputed = true;
2354
+ }, 0);
2355
+ }
2356
+ }
2357
+ closeDropdown() {
2358
+ this.open = false;
2359
+ this.mouseInside$.next(false);
2360
+ }
2361
+ }
2362
+ CdkOptionsSubDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: CdkOptionsSubDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2363
+ CdkOptionsSubDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: CdkOptionsSubDropdownComponent, selector: "lx-cdk-options-sub-dropdown", inputs: { trigger: "trigger", align: "align" }, queries: [{ propertyName: "options", predicate: OptionComponent, descendants: true }], viewQueries: [{ propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"open\">\n <ul\n (mouseenter)=\"mouseenter()\"\n (mouseleave)=\"mouseleave()\"\n class=\"sub-dropdown\"\n [style.visibility]=\"isPositionComputed ? '' : 'hidden'\"\n lxAutoclose\n (autoclose)=\"closeDropdown()\"\n #dropdown\n >\n <ng-content></ng-content>\n </ul>\n</ng-template>\n", styles: [".sub-dropdown{height:100%;padding:0;margin:0;background-color:#fff;border:1px solid #e1e5eb;border-radius:3px;box-shadow:0 8px 12px 2px rgba(0,0,0,.15);text-align:left;list-style:none}"], directives: [{ type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayPositions", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayTransformOriginOn"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }] });
2364
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: CdkOptionsSubDropdownComponent, decorators: [{
2365
+ type: Component,
2366
+ args: [{
2367
+ selector: 'lx-cdk-options-sub-dropdown',
2368
+ templateUrl: 'cdk-options-sub-dropdown.component.html',
2369
+ styleUrls: ['cdk-options-sub-dropdown.component.scss']
2370
+ }]
2371
+ }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { trigger: [{
2372
+ type: Input
2373
+ }], align: [{
2374
+ type: Input
2375
+ }], options: [{
2376
+ type: ContentChildren,
2377
+ args: [OptionComponent, { descendants: true }]
2378
+ }], overlay: [{
2379
+ type: ViewChild,
2380
+ args: [CdkConnectedOverlay]
2381
+ }], dropdownContainer: [{
2382
+ type: ViewChild,
2383
+ args: ['dropdown']
2384
+ }] } });
2385
+
1875
2386
  /**
1876
2387
  * Observe creates an Observable stream and notifies the changes from an observed property.
1877
2388
  *
@@ -2719,17 +3230,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
2719
3230
  }]
2720
3231
  }] });
2721
3232
 
2722
- // We can only use 'keyCode' because 'key' depends on the browser and does not work for IE11
2723
- const BACKSPACE = 8;
2724
- const TAB = 9;
2725
- const ARROW_DOWN = 40;
2726
- const ARROW_UP = 38;
2727
- const ARROW_LEFT = 37;
2728
- const ARROW_RIGHT = 39;
2729
- const ENTER = 13;
2730
- const ESCAPE = 27;
2731
- const SPACE = 32;
2732
-
2733
3233
  class BaseSelectDirective {
2734
3234
  constructor() {
2735
3235
  this.disabled = false;
@@ -3362,162 +3862,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
3362
3862
  args: ['noResultsOptionTemplateRef']
3363
3863
  }] } });
3364
3864
 
3365
- class OptionGroupComponent {
3366
- constructor() {
3367
- /**
3368
- * Is true when option children have a selected state.
3369
- * In this case we want to align the padding of the group label with the lx-options'.
3370
- */
3371
- this.hasSelectedState = true;
3372
- this.select = new EventEmitter();
3373
- }
3374
- selectOption(value) {
3375
- this.select.emit(value);
3376
- }
3377
- }
3378
- OptionGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3379
- OptionGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: OptionGroupComponent, selector: "lx-option-group", inputs: { hasSelectedState: "hasSelectedState", label: "label" }, outputs: { select: "select" }, ngImport: i0, template: "<li>\n <span *ngIf=\"label\" class=\"groupLabel\" [class.selectedState]=\"hasSelectedState\">{{ label }}</span>\n <ul>\n <ng-content></ng-content>\n </ul>\n</li>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{display:block}:host:not(:first-child){border-top:1px solid #eaedf1}ul{list-style:none;margin:0;padding-left:0}.groupLabel{display:block;line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase}.groupLabel.selectedState{padding-left:28px}"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3380
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionGroupComponent, decorators: [{
3381
- type: Component,
3382
- args: [{
3383
- selector: 'lx-option-group',
3384
- templateUrl: 'option-group.component.html',
3385
- styleUrls: ['option-group.component.styl'],
3386
- changeDetection: ChangeDetectionStrategy.OnPush
3387
- }]
3388
- }], propDecorators: { hasSelectedState: [{
3389
- type: Input
3390
- }], label: [{
3391
- type: Input
3392
- }], select: [{
3393
- type: Output
3394
- }] } });
3395
-
3396
- class OptionComponent {
3397
- constructor(group, elementRef) {
3398
- this.group = group;
3399
- this.elementRef = elementRef;
3400
- this.selected = false;
3401
- this.isHighlighted = false;
3402
- this.disabled = false;
3403
- /**
3404
- * Is true when option has a selection nature like sorting.
3405
- * In this case we show a check icon on the left to indicate selection.
3406
- *
3407
- * Is false when option represents a one time action like printing.
3408
- * Cannot have selectedState when Option has dropdown
3409
- */
3410
- this.hasSelectedState = true;
3411
- this.select = new EventEmitter();
3412
- this.highlight = new EventEmitter();
3413
- this.selectedClick = new EventEmitter();
3414
- this.hasSubdropdown = false;
3415
- this.isSuboption = false;
3416
- }
3417
- selectOption(event) {
3418
- if (this.disabled || this.hasSubdropdown) {
3419
- if (event) {
3420
- event.stopImmediatePropagation();
3421
- }
3422
- }
3423
- else {
3424
- if (this.selected) {
3425
- return this.selectedClick.emit();
3426
- }
3427
- if (this.group) {
3428
- this.group.selectOption(this.value);
3429
- }
3430
- this.select.emit(this.value);
3431
- }
3432
- }
3433
- setSelected(value) {
3434
- this.selected = value;
3435
- }
3436
- setHighlighted(value) {
3437
- this.isHighlighted = value;
3438
- this.highlight.emit(this.isHighlighted);
3439
- }
3440
- }
3441
- OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionComponent, deps: [{ token: forwardRef(() => OptionGroupComponent), optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
3442
- OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: OptionComponent, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick" }, host: { listeners: { "click": "selectOption($event)" } }, ngImport: i0, template: "<li\n class=\"option\"\n [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n [class.highlighted]=\"isHighlighted\"\n [class.selected]=\"selected\"\n [class.disabled]=\"disabled\"\n [class.hasSubdropdown]=\"hasSubdropdown\"\n>\n <i *ngIf=\"hasSelectedState && selected\" class=\"far fa-check\"></i>\n <ng-content></ng-content>\n <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{display:block}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.fa-check{left:8px}.fa-check,.fa-chevron-right{line-height:23px;position:absolute}.fa-chevron-right{right:8px;font-size:8px}"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
3443
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionComponent, decorators: [{
3444
- type: Component,
3445
- args: [{
3446
- selector: 'lx-option',
3447
- templateUrl: 'option.component.html',
3448
- styleUrls: ['option.component.styl']
3449
- }]
3450
- }], ctorParameters: function () { return [{ type: OptionGroupComponent, decorators: [{
3451
- type: Optional
3452
- }, {
3453
- type: Inject,
3454
- args: [forwardRef(() => OptionGroupComponent)]
3455
- }] }, { type: i0.ElementRef }]; }, propDecorators: { selected: [{
3456
- type: Input
3457
- }], isHighlighted: [{
3458
- type: Input
3459
- }], disabled: [{
3460
- type: Input
3461
- }], value: [{
3462
- type: Input
3463
- }], hasSelectedState: [{
3464
- type: Input
3465
- }], select: [{
3466
- type: Output
3467
- }], highlight: [{
3468
- type: Output
3469
- }], selectedClick: [{
3470
- type: Output
3471
- }], selectOption: [{
3472
- type: HostListener,
3473
- args: ['click', ['$event']]
3474
- }] } });
3475
-
3476
- class KeyboardActionSourceDirective {
3477
- constructor(element) {
3478
- this.element = element;
3479
- this.dontEmit = false;
3480
- this.destroyed$ = new Subject();
3481
- this.keyboardActions$ = fromEvent(this.element.nativeElement, 'keydown').pipe(filter((_event) => !this.dontEmit), map((event) => {
3482
- switch (event.keyCode) {
3483
- case ARROW_UP:
3484
- event.preventDefault();
3485
- return KeyboardSelectAction.PREV;
3486
- case ARROW_DOWN:
3487
- event.preventDefault();
3488
- return KeyboardSelectAction.NEXT;
3489
- case ARROW_LEFT:
3490
- event.preventDefault();
3491
- return KeyboardSelectAction.LEFT;
3492
- case ARROW_RIGHT:
3493
- event.preventDefault();
3494
- return KeyboardSelectAction.RIGHT;
3495
- case ENTER:
3496
- event.preventDefault();
3497
- return KeyboardSelectAction.EXECUTE;
3498
- case ESCAPE:
3499
- case TAB:
3500
- return KeyboardSelectAction.CLOSE;
3501
- }
3502
- }), takeUntil(this.destroyed$));
3503
- }
3504
- blur() {
3505
- this.element.nativeElement.blur();
3506
- }
3507
- ngOnDestroy() {
3508
- this.destroyed$.next();
3509
- }
3510
- }
3511
- KeyboardActionSourceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: KeyboardActionSourceDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
3512
- KeyboardActionSourceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"], ngImport: i0 });
3513
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: KeyboardActionSourceDirective, decorators: [{
3514
- type: Directive,
3515
- args: [{
3516
- exportAs: 'keyboardActionSource',
3517
- selector: '[lxKeyboardActionSource]'
3518
- }]
3519
- }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
3520
-
3521
3865
  class OptionsDropdownComponent {
3522
3866
  constructor(changeDetection) {
3523
3867
  this.changeDetection = changeDetection;
@@ -4748,6 +5092,8 @@ LxFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
4748
5092
  OptionGroupDropdownComponent,
4749
5093
  OptionsDropdownComponent,
4750
5094
  OptionsSubDropdownComponent,
5095
+ CdkOptionsDropdownComponent,
5096
+ CdkOptionsSubDropdownComponent,
4751
5097
  PickerComponent,
4752
5098
  PickerOptionComponent,
4753
5099
  PickerTriggerDirective,
@@ -4767,6 +5113,7 @@ LxFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
4767
5113
  FormsModule,
4768
5114
  ReactiveFormsModule, i1$2.TranslateModule, DatepickerModule,
4769
5115
  InfiniteScrollModule,
5116
+ OverlayModule,
4770
5117
  LxCoreUiModule], exports: [BasicDropdownComponent,
4771
5118
  BasicDropdownItemComponent,
4772
5119
  CurrencyInputComponent,
@@ -4786,6 +5133,8 @@ LxFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
4786
5133
  OptionGroupDropdownComponent,
4787
5134
  OptionsDropdownComponent,
4788
5135
  OptionsSubDropdownComponent,
5136
+ CdkOptionsDropdownComponent,
5137
+ CdkOptionsSubDropdownComponent,
4789
5138
  PickerComponent,
4790
5139
  PickerOptionComponent,
4791
5140
  PickerTriggerDirective,
@@ -4808,6 +5157,7 @@ LxFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
4808
5157
  TranslateModule.forChild(),
4809
5158
  DatepickerModule,
4810
5159
  InfiniteScrollModule,
5160
+ OverlayModule,
4811
5161
  LxCoreUiModule
4812
5162
  ]] });
4813
5163
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: LxFormsModule, decorators: [{
@@ -4833,6 +5183,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
4833
5183
  OptionGroupDropdownComponent,
4834
5184
  OptionsDropdownComponent,
4835
5185
  OptionsSubDropdownComponent,
5186
+ CdkOptionsDropdownComponent,
5187
+ CdkOptionsSubDropdownComponent,
4836
5188
  PickerComponent,
4837
5189
  PickerOptionComponent,
4838
5190
  PickerTriggerDirective,
@@ -4857,6 +5209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
4857
5209
  TranslateModule.forChild(),
4858
5210
  DatepickerModule,
4859
5211
  InfiniteScrollModule,
5212
+ OverlayModule,
4860
5213
  LxCoreUiModule
4861
5214
  ],
4862
5215
  exports: [
@@ -4879,6 +5232,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
4879
5232
  OptionGroupDropdownComponent,
4880
5233
  OptionsDropdownComponent,
4881
5234
  OptionsSubDropdownComponent,
5235
+ CdkOptionsDropdownComponent,
5236
+ CdkOptionsSubDropdownComponent,
4882
5237
  PickerComponent,
4883
5238
  PickerOptionComponent,
4884
5239
  PickerTriggerDirective,
@@ -5670,5 +6025,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
5670
6025
  * Generated bundle index. Do not edit.
5671
6026
  */
5672
6027
 
5673
- export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AfterViewInitDirective, AutocloseDirective, AutofocusDirective, BACKSPACE, BadgeComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, ButtonComponent, ButtonGroupComponent, CURRENCY_SYMBOL_MAP, CardComponent, CollapsibleComponent, ColoredLabelComponent, ContrastColorPipe, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATE_FN_LOCALE, DATE_FORMATS, DateInputComponent, DragAndDropListComponent, DragAndDropListItemComponent, ENTER, ESCAPE, EllipsisComponent, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HighlightRangePipe, HighlightTermPipe, HtmlDirective, IconComponent, IconScaleComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, LOCALE_FN, LxCoreUiModule, LxFormsModule, LxIsUuidPipe, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTooltipModule, LxTranslatePipe, MODAL_CLOSE, MarkInvalidDirective, MarkdownPipe, ModalComponent, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, Required, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SliderToggleComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, getContrastColor, getTranslationParts, isValidHexColor, isValidX, isValidY, shorthandHexHandle };
6028
+ export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AfterViewInitDirective, AutocloseDirective, AutofocusDirective, BACKSPACE, BadgeComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, ButtonComponent, ButtonGroupComponent, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ColoredLabelComponent, ContrastColorPipe, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATE_FN_LOCALE, DATE_FORMATS, DateInputComponent, DragAndDropListComponent, DragAndDropListItemComponent, ENTER, ESCAPE, EllipsisComponent, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HighlightRangePipe, HighlightTermPipe, HtmlDirective, IconComponent, IconScaleComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, LOCALE_FN, LxCoreUiModule, LxFormsModule, LxIsUuidPipe, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTooltipModule, LxTranslatePipe, MODAL_CLOSE, MarkInvalidDirective, MarkdownPipe, ModalComponent, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, Required, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SliderToggleComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, getContrastColor, getTranslationParts, isValidHexColor, isValidX, isValidY, shorthandHexHandle };
5674
6029
  //# sourceMappingURL=leanix-components.js.map