@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.
- package/bundles/leanix-components.umd.js +554 -174
- 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/core-ui/tooltip/tooltip.component.js +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 +526 -171
- 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';
|
@@ -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
|