@leanix/components 0.2.73 → 0.2.77
Sign up to get free protection for your applications and to get access to all the features.
- package/bundles/leanix-components.umd.js +553 -173
- package/bundles/leanix-components.umd.js.map +1 -1
- package/esm2015/index.js +2 -0
- package/esm2015/index.js.map +1 -1
- package/esm2015/lib/forms-ui/components/cdk-options-dropdown/cdk-options-dropdown.component.js +223 -0
- package/esm2015/lib/forms-ui/components/cdk-options-dropdown/cdk-options-dropdown.component.js.map +1 -0
- package/esm2015/lib/forms-ui/components/cdk-options-sub-dropdown/cdk-options-sub-dropdown.component.js +140 -0
- package/esm2015/lib/forms-ui/components/cdk-options-sub-dropdown/cdk-options-sub-dropdown.component.js.map +1 -0
- package/esm2015/lib/forms-ui/forms-ui.module.js +14 -0
- package/esm2015/lib/forms-ui/forms-ui.module.js.map +1 -1
- package/fesm2015/leanix-components.js +525 -170
- package/fesm2015/leanix-components.js.map +1 -1
- package/index.d.ts +2 -0
- package/lib/forms-ui/components/cdk-options-dropdown/cdk-options-dropdown.component.d.ts +39 -0
- package/lib/forms-ui/components/cdk-options-sub-dropdown/cdk-options-sub-dropdown.component.d.ts +28 -0
- package/lib/forms-ui/forms-ui.module.d.ts +26 -23
- package/package.json +1 -1
@@ -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,
|
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';
|
@@ -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
|