@leanix/components 0.2.72 → 0.2.76
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
@@ -2341,6 +2341,546 @@
|
|
2341
2341
|
args: ['createNewOptionTemplate']
|
2342
2342
|
}] } });
|
2343
2343
|
|
2344
|
+
// We can only use 'keyCode' because 'key' depends on the browser and does not work for IE11
|
2345
|
+
var BACKSPACE = 8;
|
2346
|
+
var TAB = 9;
|
2347
|
+
var ARROW_DOWN = 40;
|
2348
|
+
var ARROW_UP = 38;
|
2349
|
+
var ARROW_LEFT = 37;
|
2350
|
+
var ARROW_RIGHT = 39;
|
2351
|
+
var ENTER = 13;
|
2352
|
+
var ESCAPE = 27;
|
2353
|
+
var SPACE = 32;
|
2354
|
+
|
2355
|
+
var KeyboardActionSourceDirective = /** @class */ (function () {
|
2356
|
+
function KeyboardActionSourceDirective(element) {
|
2357
|
+
var _this = this;
|
2358
|
+
this.element = element;
|
2359
|
+
this.dontEmit = false;
|
2360
|
+
this.destroyed$ = new i6.Subject();
|
2361
|
+
this.keyboardActions$ = i6.fromEvent(this.element.nativeElement, 'keydown').pipe(operators.filter(function (_event) { return !_this.dontEmit; }), operators.map(function (event) {
|
2362
|
+
switch (event.keyCode) {
|
2363
|
+
case ARROW_UP:
|
2364
|
+
event.preventDefault();
|
2365
|
+
return exports.KeyboardSelectAction.PREV;
|
2366
|
+
case ARROW_DOWN:
|
2367
|
+
event.preventDefault();
|
2368
|
+
return exports.KeyboardSelectAction.NEXT;
|
2369
|
+
case ARROW_LEFT:
|
2370
|
+
event.preventDefault();
|
2371
|
+
return exports.KeyboardSelectAction.LEFT;
|
2372
|
+
case ARROW_RIGHT:
|
2373
|
+
event.preventDefault();
|
2374
|
+
return exports.KeyboardSelectAction.RIGHT;
|
2375
|
+
case ENTER:
|
2376
|
+
event.preventDefault();
|
2377
|
+
return exports.KeyboardSelectAction.EXECUTE;
|
2378
|
+
case ESCAPE:
|
2379
|
+
case TAB:
|
2380
|
+
return exports.KeyboardSelectAction.CLOSE;
|
2381
|
+
}
|
2382
|
+
}), operators.takeUntil(this.destroyed$));
|
2383
|
+
}
|
2384
|
+
KeyboardActionSourceDirective.prototype.blur = function () {
|
2385
|
+
this.element.nativeElement.blur();
|
2386
|
+
};
|
2387
|
+
KeyboardActionSourceDirective.prototype.ngOnDestroy = function () {
|
2388
|
+
this.destroyed$.next();
|
2389
|
+
};
|
2390
|
+
return KeyboardActionSourceDirective;
|
2391
|
+
}());
|
2392
|
+
KeyboardActionSourceDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: KeyboardActionSourceDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
|
2393
|
+
KeyboardActionSourceDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"], ngImport: i0__namespace });
|
2394
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: KeyboardActionSourceDirective, decorators: [{
|
2395
|
+
type: i0.Directive,
|
2396
|
+
args: [{
|
2397
|
+
exportAs: 'keyboardActionSource',
|
2398
|
+
selector: '[lxKeyboardActionSource]'
|
2399
|
+
}]
|
2400
|
+
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; } });
|
2401
|
+
|
2402
|
+
var OptionGroupComponent = /** @class */ (function () {
|
2403
|
+
function OptionGroupComponent() {
|
2404
|
+
/**
|
2405
|
+
* Is true when option children have a selected state.
|
2406
|
+
* In this case we want to align the padding of the group label with the lx-options'.
|
2407
|
+
*/
|
2408
|
+
this.hasSelectedState = true;
|
2409
|
+
this.select = new i0.EventEmitter();
|
2410
|
+
}
|
2411
|
+
OptionGroupComponent.prototype.selectOption = function (value) {
|
2412
|
+
this.select.emit(value);
|
2413
|
+
};
|
2414
|
+
return OptionGroupComponent;
|
2415
|
+
}());
|
2416
|
+
OptionGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: OptionGroupComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
2417
|
+
OptionGroupComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
2418
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: OptionGroupComponent, decorators: [{
|
2419
|
+
type: i0.Component,
|
2420
|
+
args: [{
|
2421
|
+
selector: 'lx-option-group',
|
2422
|
+
templateUrl: 'option-group.component.html',
|
2423
|
+
styleUrls: ['option-group.component.styl'],
|
2424
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
2425
|
+
}]
|
2426
|
+
}], propDecorators: { hasSelectedState: [{
|
2427
|
+
type: i0.Input
|
2428
|
+
}], label: [{
|
2429
|
+
type: i0.Input
|
2430
|
+
}], select: [{
|
2431
|
+
type: i0.Output
|
2432
|
+
}] } });
|
2433
|
+
|
2434
|
+
var OptionComponent = /** @class */ (function () {
|
2435
|
+
function OptionComponent(group, elementRef) {
|
2436
|
+
this.group = group;
|
2437
|
+
this.elementRef = elementRef;
|
2438
|
+
this.selected = false;
|
2439
|
+
this.isHighlighted = false;
|
2440
|
+
this.disabled = false;
|
2441
|
+
/**
|
2442
|
+
* Is true when option has a selection nature like sorting.
|
2443
|
+
* In this case we show a check icon on the left to indicate selection.
|
2444
|
+
*
|
2445
|
+
* Is false when option represents a one time action like printing.
|
2446
|
+
* Cannot have selectedState when Option has dropdown
|
2447
|
+
*/
|
2448
|
+
this.hasSelectedState = true;
|
2449
|
+
this.select = new i0.EventEmitter();
|
2450
|
+
this.highlight = new i0.EventEmitter();
|
2451
|
+
this.selectedClick = new i0.EventEmitter();
|
2452
|
+
this.hasSubdropdown = false;
|
2453
|
+
this.isSuboption = false;
|
2454
|
+
}
|
2455
|
+
OptionComponent.prototype.selectOption = function (event) {
|
2456
|
+
if (this.disabled || this.hasSubdropdown) {
|
2457
|
+
if (event) {
|
2458
|
+
event.stopImmediatePropagation();
|
2459
|
+
}
|
2460
|
+
}
|
2461
|
+
else {
|
2462
|
+
if (this.selected) {
|
2463
|
+
return this.selectedClick.emit();
|
2464
|
+
}
|
2465
|
+
if (this.group) {
|
2466
|
+
this.group.selectOption(this.value);
|
2467
|
+
}
|
2468
|
+
this.select.emit(this.value);
|
2469
|
+
}
|
2470
|
+
};
|
2471
|
+
OptionComponent.prototype.setSelected = function (value) {
|
2472
|
+
this.selected = value;
|
2473
|
+
};
|
2474
|
+
OptionComponent.prototype.setHighlighted = function (value) {
|
2475
|
+
this.isHighlighted = value;
|
2476
|
+
this.highlight.emit(this.isHighlighted);
|
2477
|
+
};
|
2478
|
+
return OptionComponent;
|
2479
|
+
}());
|
2480
|
+
OptionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: OptionComponent, deps: [{ token: i0.forwardRef(function () { return OptionGroupComponent; }), optional: true }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
2481
|
+
OptionComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
2482
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: OptionComponent, decorators: [{
|
2483
|
+
type: i0.Component,
|
2484
|
+
args: [{
|
2485
|
+
selector: 'lx-option',
|
2486
|
+
templateUrl: 'option.component.html',
|
2487
|
+
styleUrls: ['option.component.styl']
|
2488
|
+
}]
|
2489
|
+
}], ctorParameters: function () {
|
2490
|
+
return [{ type: OptionGroupComponent, decorators: [{
|
2491
|
+
type: i0.Optional
|
2492
|
+
}, {
|
2493
|
+
type: i0.Inject,
|
2494
|
+
args: [i0.forwardRef(function () { return OptionGroupComponent; })]
|
2495
|
+
}] }, { type: i0__namespace.ElementRef }];
|
2496
|
+
}, propDecorators: { selected: [{
|
2497
|
+
type: i0.Input
|
2498
|
+
}], isHighlighted: [{
|
2499
|
+
type: i0.Input
|
2500
|
+
}], disabled: [{
|
2501
|
+
type: i0.Input
|
2502
|
+
}], value: [{
|
2503
|
+
type: i0.Input
|
2504
|
+
}], hasSelectedState: [{
|
2505
|
+
type: i0.Input
|
2506
|
+
}], select: [{
|
2507
|
+
type: i0.Output
|
2508
|
+
}], highlight: [{
|
2509
|
+
type: i0.Output
|
2510
|
+
}], selectedClick: [{
|
2511
|
+
type: i0.Output
|
2512
|
+
}], selectOption: [{
|
2513
|
+
type: i0.HostListener,
|
2514
|
+
args: ['click', ['$event']]
|
2515
|
+
}] } });
|
2516
|
+
|
2517
|
+
var BOTTOM_LEFT_POSITION$1 = {
|
2518
|
+
originX: 'end',
|
2519
|
+
overlayX: 'end',
|
2520
|
+
originY: 'bottom',
|
2521
|
+
overlayY: 'top'
|
2522
|
+
};
|
2523
|
+
var BOTTOM_RIGHT_POSITION$1 = {
|
2524
|
+
originX: 'start',
|
2525
|
+
overlayX: 'start',
|
2526
|
+
originY: 'bottom',
|
2527
|
+
overlayY: 'top'
|
2528
|
+
};
|
2529
|
+
var TOP_LEFT_POSITION$1 = {
|
2530
|
+
originX: 'end',
|
2531
|
+
overlayX: 'end',
|
2532
|
+
originY: 'top',
|
2533
|
+
overlayY: 'bottom'
|
2534
|
+
};
|
2535
|
+
var TOP_RIGHT_POSITION$1 = {
|
2536
|
+
originX: 'start',
|
2537
|
+
overlayX: 'start',
|
2538
|
+
originY: 'top',
|
2539
|
+
overlayY: 'bottom'
|
2540
|
+
};
|
2541
|
+
var LEFT_ALIGN_POSITIONS$1 = [BOTTOM_LEFT_POSITION$1, TOP_LEFT_POSITION$1, BOTTOM_RIGHT_POSITION$1, TOP_RIGHT_POSITION$1];
|
2542
|
+
var RIGHT_ALIGN_POSITIONS$1 = [BOTTOM_RIGHT_POSITION$1, TOP_RIGHT_POSITION$1, BOTTOM_LEFT_POSITION$1, TOP_LEFT_POSITION$1];
|
2543
|
+
var CdkOptionsDropdownComponent = /** @class */ (function () {
|
2544
|
+
function CdkOptionsDropdownComponent(changeDetection) {
|
2545
|
+
this.changeDetection = changeDetection;
|
2546
|
+
this.align = 'right';
|
2547
|
+
this.closeOnScroll = false;
|
2548
|
+
this.disabled = false;
|
2549
|
+
this.maxHeight = 'none';
|
2550
|
+
this.highlightedOptionIndex$ = new i6.BehaviorSubject(0);
|
2551
|
+
this._open = false;
|
2552
|
+
this.isSubdropdownExpanded = false;
|
2553
|
+
this.destroyed$ = new i6.Subject();
|
2554
|
+
this.isPositionComputed = true;
|
2555
|
+
}
|
2556
|
+
Object.defineProperty(CdkOptionsDropdownComponent.prototype, "open", {
|
2557
|
+
get: function () {
|
2558
|
+
return this._open;
|
2559
|
+
},
|
2560
|
+
set: function (value) {
|
2561
|
+
if (this.disabled) {
|
2562
|
+
return;
|
2563
|
+
}
|
2564
|
+
this._open = value;
|
2565
|
+
if (this.trigger) {
|
2566
|
+
// Don't emit keyboard actions while the dropdown is not open yet.
|
2567
|
+
this.trigger.dontEmit = !this.open;
|
2568
|
+
}
|
2569
|
+
if (this.open) {
|
2570
|
+
this.isSubdropdownExpanded = false;
|
2571
|
+
this.setInitialHighlightingIndex();
|
2572
|
+
}
|
2573
|
+
this.reloadOverlayPosition(this.open);
|
2574
|
+
},
|
2575
|
+
enumerable: false,
|
2576
|
+
configurable: true
|
2577
|
+
});
|
2578
|
+
Object.defineProperty(CdkOptionsDropdownComponent.prototype, "options", {
|
2579
|
+
get: function () {
|
2580
|
+
return this._options.toArray();
|
2581
|
+
},
|
2582
|
+
enumerable: false,
|
2583
|
+
configurable: true
|
2584
|
+
});
|
2585
|
+
CdkOptionsDropdownComponent.prototype.ngAfterViewInit = function () {
|
2586
|
+
var _this = this;
|
2587
|
+
this.trigger.dontEmit = !this.open;
|
2588
|
+
this.overlay.positions = this.align === 'left' ? LEFT_ALIGN_POSITIONS$1 : RIGHT_ALIGN_POSITIONS$1;
|
2589
|
+
var optionsChanges$ = this._options.changes.pipe(operators.startWith(this._options), operators.map(function (options) { return options.toArray(); }));
|
2590
|
+
this.trigger.keyboardActions$
|
2591
|
+
.pipe(operators.filter(function (keyboardSelectAction) { return keyboardSelectAction === exports.KeyboardSelectAction.NEXT; }), operators.withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, function (_, index, options) { return _this.next(index, options); }))
|
2592
|
+
.subscribe(this.highlightedOptionIndex$);
|
2593
|
+
this.trigger.keyboardActions$
|
2594
|
+
.pipe(operators.filter(function (keyboardSelectAction) { return keyboardSelectAction === exports.KeyboardSelectAction.PREV; }), operators.withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, function (_, index, options) { return _this.prev(index, options); }))
|
2595
|
+
.subscribe(this.highlightedOptionIndex$);
|
2596
|
+
this.trigger.keyboardActions$
|
2597
|
+
.pipe(operators.filter(function (keyboardSelectAction) { return keyboardSelectAction === exports.KeyboardSelectAction.LEFT; }), operators.withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, function (_, index, options) { return _this.isSubdropdownExpanded ? _this.collapse(index, options) : _this.expand(index, options); }))
|
2598
|
+
.subscribe(this.highlightedOptionIndex$);
|
2599
|
+
this.trigger.keyboardActions$
|
2600
|
+
.pipe(operators.filter(function (keyboardSelectAction) { return keyboardSelectAction === exports.KeyboardSelectAction.RIGHT; }), operators.withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, function (_, index, options) { return _this.isSubdropdownExpanded ? _this.collapse(index, options) : _this.expand(index, options); }))
|
2601
|
+
.subscribe(this.highlightedOptionIndex$);
|
2602
|
+
this.trigger.keyboardActions$
|
2603
|
+
.pipe(operators.filter(function (keyboardSelectAction) { return keyboardSelectAction === exports.KeyboardSelectAction.CLOSE; }))
|
2604
|
+
.subscribe(function () { return _this.closeDropdown(); });
|
2605
|
+
this.trigger.keyboardActions$
|
2606
|
+
.pipe(operators.filter(function (keyboardSelectAction) { return keyboardSelectAction === exports.KeyboardSelectAction.EXECUTE; }), operators.withLatestFrom(this.highlightedOptionIndex$, function (_, index) { return index; }))
|
2607
|
+
.subscribe(function (index) {
|
2608
|
+
if (_this.options[index]) {
|
2609
|
+
_this.options[index].selectOption();
|
2610
|
+
}
|
2611
|
+
});
|
2612
|
+
/** Combined stream of all of the child options' select outputs. */
|
2613
|
+
this._options.changes
|
2614
|
+
.pipe(operators.startWith(this._options), operators.switchMap(function () { return i6.merge.apply(void 0, __spreadArray(__spreadArray([], __read(_this._options.map(function (option) { return option.select; }))), __read(_this._options.map(function (option) { return option.selectedClick; })))); }), operators.delay(0), operators.takeUntil(this.destroyed$))
|
2615
|
+
.subscribe(function (_value) {
|
2616
|
+
_this.closeDropdown();
|
2617
|
+
});
|
2618
|
+
i6.combineLatest([optionsChanges$, this.highlightedOptionIndex$])
|
2619
|
+
.pipe(operators.delay(0), operators.map(function (_a) {
|
2620
|
+
var _b = __read(_a, 2), options = _b[0], index = _b[1];
|
2621
|
+
return options[index];
|
2622
|
+
}), operators.distinctUntilChanged(), operators.takeUntil(this.destroyed$))
|
2623
|
+
.subscribe(function (optionToBeHighlighted) {
|
2624
|
+
_this.options.forEach(function (option) { return option.setHighlighted(optionToBeHighlighted === option); });
|
2625
|
+
_this.changeDetection.markForCheck();
|
2626
|
+
});
|
2627
|
+
if (this.closeOnScroll) {
|
2628
|
+
i6.fromEvent(window, 'scroll')
|
2629
|
+
.pipe(operators.debounceTime(100), operators.takeUntil(this.destroyed$))
|
2630
|
+
.subscribe(function () {
|
2631
|
+
_this.open = false;
|
2632
|
+
_this.trigger.blur();
|
2633
|
+
});
|
2634
|
+
}
|
2635
|
+
};
|
2636
|
+
CdkOptionsDropdownComponent.prototype.ngOnDestroy = function () {
|
2637
|
+
this.destroyed$.next();
|
2638
|
+
};
|
2639
|
+
CdkOptionsDropdownComponent.prototype.closeDropdown = function () {
|
2640
|
+
this.tooltips.toArray().forEach(function (tooltip) { return tooltip.hide(); });
|
2641
|
+
this.open = false;
|
2642
|
+
};
|
2643
|
+
CdkOptionsDropdownComponent.prototype.setInitialHighlightingIndex = function () {
|
2644
|
+
var _this = this;
|
2645
|
+
var firstAvailableIndex = this.options.map(function (option) { return !_this.optionIsHighlightable(option); }).indexOf(false, 0);
|
2646
|
+
this.highlightedOptionIndex$.next(firstAvailableIndex);
|
2647
|
+
};
|
2648
|
+
CdkOptionsDropdownComponent.prototype.prev = function (currentIndex, items) {
|
2649
|
+
var _this = this;
|
2650
|
+
if (currentIndex > 0) {
|
2651
|
+
var prevEnabledIndex = items.map(function (option) { return !_this.optionIsHighlightable(option); }).lastIndexOf(false, currentIndex - 1);
|
2652
|
+
return prevEnabledIndex !== -1 ? prevEnabledIndex : currentIndex;
|
2653
|
+
}
|
2654
|
+
else {
|
2655
|
+
return currentIndex;
|
2656
|
+
}
|
2657
|
+
};
|
2658
|
+
CdkOptionsDropdownComponent.prototype.next = function (currentIndex, items) {
|
2659
|
+
var _this = this;
|
2660
|
+
if (currentIndex < items.length) {
|
2661
|
+
var nextEnabledIndex = items.map(function (option) { return !_this.optionIsHighlightable(option); }).indexOf(false, currentIndex + 1);
|
2662
|
+
return nextEnabledIndex !== -1 ? nextEnabledIndex : currentIndex;
|
2663
|
+
}
|
2664
|
+
else {
|
2665
|
+
return currentIndex;
|
2666
|
+
}
|
2667
|
+
};
|
2668
|
+
CdkOptionsDropdownComponent.prototype.expand = function (currentIndex, items) {
|
2669
|
+
if (items[currentIndex].hasSubdropdown) {
|
2670
|
+
this.isSubdropdownExpanded = true;
|
2671
|
+
return this.next(currentIndex, items);
|
2672
|
+
}
|
2673
|
+
else {
|
2674
|
+
return currentIndex;
|
2675
|
+
}
|
2676
|
+
};
|
2677
|
+
CdkOptionsDropdownComponent.prototype.collapse = function (currentIndex, items) {
|
2678
|
+
if (this.isSubdropdownExpanded) {
|
2679
|
+
this.isSubdropdownExpanded = false;
|
2680
|
+
return this.prev(currentIndex, items);
|
2681
|
+
}
|
2682
|
+
else {
|
2683
|
+
return currentIndex;
|
2684
|
+
}
|
2685
|
+
};
|
2686
|
+
CdkOptionsDropdownComponent.prototype.optionIsHighlightable = function (option) {
|
2687
|
+
var isToplevelOptionAndAllowed = !option.isSuboption && !this.isSubdropdownExpanded;
|
2688
|
+
var isSecondlevelOptionAndAllowed = option.isSuboption && this.isSubdropdownExpanded;
|
2689
|
+
return !option.disabled && (isToplevelOptionAndAllowed || isSecondlevelOptionAndAllowed);
|
2690
|
+
};
|
2691
|
+
CdkOptionsDropdownComponent.prototype.reloadOverlayPosition = function (open) {
|
2692
|
+
var _this = this;
|
2693
|
+
if (open) {
|
2694
|
+
this.isPositionComputed = false;
|
2695
|
+
setTimeout(function () {
|
2696
|
+
var dropdownElement = _this.dropdownContainer.nativeElement;
|
2697
|
+
_this.overlay.overlayRef.updateSize({
|
2698
|
+
height: dropdownElement.offsetHeight,
|
2699
|
+
width: dropdownElement.offsetWidth
|
2700
|
+
});
|
2701
|
+
_this.overlay.overlayRef.updatePosition();
|
2702
|
+
_this.isPositionComputed = true;
|
2703
|
+
_this.changeDetection.markForCheck();
|
2704
|
+
}, 0);
|
2705
|
+
}
|
2706
|
+
else {
|
2707
|
+
this.changeDetection.markForCheck();
|
2708
|
+
}
|
2709
|
+
};
|
2710
|
+
return CdkOptionsDropdownComponent;
|
2711
|
+
}());
|
2712
|
+
CdkOptionsDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: CdkOptionsDropdownComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
2713
|
+
CdkOptionsDropdownComponent.ɵcmp = i0__namespace.ɵɵ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: i1.CdkConnectedOverlay, descendants: true }], ngImport: i0__namespace, 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__namespace.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i1__namespace.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__namespace.ChangeDetectionStrategy.OnPush });
|
2714
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: CdkOptionsDropdownComponent, decorators: [{
|
2715
|
+
type: i0.Component,
|
2716
|
+
args: [{
|
2717
|
+
selector: 'lx-cdk-options-dropdown',
|
2718
|
+
templateUrl: 'cdk-options-dropdown.component.html',
|
2719
|
+
styleUrls: ['cdk-options-dropdown.component.scss'],
|
2720
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
2721
|
+
}]
|
2722
|
+
}], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { dropdownContainer: [{
|
2723
|
+
type: i0.ViewChild,
|
2724
|
+
args: ['dropdown']
|
2725
|
+
}], align: [{
|
2726
|
+
type: i0.Input
|
2727
|
+
}], closeOnScroll: [{
|
2728
|
+
type: i0.Input
|
2729
|
+
}], disabled: [{
|
2730
|
+
type: i0.Input
|
2731
|
+
}], maxHeight: [{
|
2732
|
+
type: i0.Input
|
2733
|
+
}], trigger: [{
|
2734
|
+
type: i0.ContentChild,
|
2735
|
+
args: [KeyboardActionSourceDirective]
|
2736
|
+
}], overlay: [{
|
2737
|
+
type: i0.ViewChild,
|
2738
|
+
args: [i1.CdkConnectedOverlay]
|
2739
|
+
}], _options: [{
|
2740
|
+
type: i0.ContentChildren,
|
2741
|
+
args: [OptionComponent, { descendants: true }]
|
2742
|
+
}], tooltips: [{
|
2743
|
+
type: i0.ContentChildren,
|
2744
|
+
args: [TooltipDirective, { descendants: true }]
|
2745
|
+
}] } });
|
2746
|
+
|
2747
|
+
var BOTTOM_LEFT_POSITION = {
|
2748
|
+
originX: 'start',
|
2749
|
+
overlayX: 'end',
|
2750
|
+
originY: 'top',
|
2751
|
+
overlayY: 'top',
|
2752
|
+
offsetX: -4
|
2753
|
+
};
|
2754
|
+
var BOTTOM_RIGHT_POSITION = {
|
2755
|
+
originX: 'end',
|
2756
|
+
overlayX: 'start',
|
2757
|
+
originY: 'top',
|
2758
|
+
overlayY: 'top',
|
2759
|
+
offsetX: 4
|
2760
|
+
};
|
2761
|
+
var TOP_LEFT_POSITION = {
|
2762
|
+
originX: 'start',
|
2763
|
+
overlayX: 'end',
|
2764
|
+
originY: 'bottom',
|
2765
|
+
overlayY: 'bottom',
|
2766
|
+
offsetX: -4
|
2767
|
+
};
|
2768
|
+
var TOP_RIGHT_POSITION = {
|
2769
|
+
originX: 'end',
|
2770
|
+
overlayX: 'start',
|
2771
|
+
originY: 'bottom',
|
2772
|
+
overlayY: 'bottom',
|
2773
|
+
offsetX: 4
|
2774
|
+
};
|
2775
|
+
var LEFT_ALIGN_POSITIONS = [BOTTOM_LEFT_POSITION, TOP_LEFT_POSITION, BOTTOM_RIGHT_POSITION, TOP_RIGHT_POSITION];
|
2776
|
+
var RIGHT_ALIGN_POSITIONS = [BOTTOM_RIGHT_POSITION, TOP_RIGHT_POSITION, BOTTOM_LEFT_POSITION, TOP_LEFT_POSITION];
|
2777
|
+
var CdkOptionsSubDropdownComponent = /** @class */ (function () {
|
2778
|
+
function CdkOptionsSubDropdownComponent(changeDetection) {
|
2779
|
+
this.changeDetection = changeDetection;
|
2780
|
+
this.align = 'right';
|
2781
|
+
this.open = false;
|
2782
|
+
this.isPositionComputed = true;
|
2783
|
+
this.mouseInside$ = new i6.Subject();
|
2784
|
+
this.destroyed$ = new i6.Subject();
|
2785
|
+
}
|
2786
|
+
CdkOptionsSubDropdownComponent.prototype.mouseenter = function () {
|
2787
|
+
this.mouseInside$.next(true);
|
2788
|
+
};
|
2789
|
+
CdkOptionsSubDropdownComponent.prototype.mouseleave = function () {
|
2790
|
+
this.mouseInside$.next(false);
|
2791
|
+
};
|
2792
|
+
CdkOptionsSubDropdownComponent.prototype.ngOnDestroy = function () {
|
2793
|
+
this.destroyed$.next();
|
2794
|
+
};
|
2795
|
+
CdkOptionsSubDropdownComponent.prototype.ngAfterViewInit = function () {
|
2796
|
+
var _this = this;
|
2797
|
+
// To avoid `Expression has changed after it was checked`
|
2798
|
+
executeOnNextTick(function () {
|
2799
|
+
_this.trigger.hasSubdropdown = true;
|
2800
|
+
_this.overlay.positions = _this.align === 'left' ? LEFT_ALIGN_POSITIONS : RIGHT_ALIGN_POSITIONS;
|
2801
|
+
});
|
2802
|
+
i6.merge(this.showByMouse(), this.showByKeyboard())
|
2803
|
+
.pipe(operators.takeUntil(this.destroyed$), operators.distinctUntilChanged())
|
2804
|
+
.subscribe(function (show) {
|
2805
|
+
_this.open = show;
|
2806
|
+
_this.reloadOverlayPosition(_this.open);
|
2807
|
+
});
|
2808
|
+
this.options.changes
|
2809
|
+
.pipe(operators.startWith(this.options), operators.switchMap(function () { return i6.merge.apply(void 0, __spreadArray(__spreadArray([], __read(_this.options.map(function (option) { return option.select; }))), __read(_this.options.map(function (option) { return option.selectedClick; })))); }), operators.delay(0), operators.takeUntil(this.destroyed$))
|
2810
|
+
.subscribe(function () {
|
2811
|
+
_this.closeDropdown();
|
2812
|
+
});
|
2813
|
+
};
|
2814
|
+
CdkOptionsSubDropdownComponent.prototype.showByKeyboard = function () {
|
2815
|
+
var optionChange$ = this.options.changes.pipe(operators.startWith(this.options), operators.map(function (options) { return options.toArray(); }), operators.map(function (options) { return options.map(function (option) {
|
2816
|
+
option.isSuboption = true;
|
2817
|
+
return option;
|
2818
|
+
}); }));
|
2819
|
+
return i6.combineLatest([this.trigger.highlight.asObservable(), optionChange$]).pipe(operators.delay(0), // Need tick delay to get option highlighted and filter it out after
|
2820
|
+
operators.map(function (_a) {
|
2821
|
+
var _b = __read(_a, 2), isHighlighted = _b[0], options = _b[1];
|
2822
|
+
return isHighlighted || options.some(function (option) { return option.isHighlighted; });
|
2823
|
+
}));
|
2824
|
+
};
|
2825
|
+
CdkOptionsSubDropdownComponent.prototype.showByMouse = function () {
|
2826
|
+
var mouseEnterTrigger$ = i6.fromEvent(this.trigger.elementRef.nativeElement, 'mouseenter');
|
2827
|
+
var mouseLeaveTrigger$ = i6.fromEvent(this.trigger.elementRef.nativeElement, 'mouseleave');
|
2828
|
+
var showOnEnterMouse$ = mouseEnterTrigger$.pipe(operators.mapTo(true));
|
2829
|
+
var hideOnLeaveMouse$ = mouseLeaveTrigger$.pipe(operators.mapTo(false));
|
2830
|
+
// react to trigger mouse leave events, and mouse enter events in the sub-dropdown. We'll use a 300ms
|
2831
|
+
// debounce, so that while navigating from the trigger to the sub-dropdown, all the intermediate events
|
2832
|
+
// are ignored.
|
2833
|
+
var showSubdropdown$ = i6.merge(hideOnLeaveMouse$, this.mouseInside$).pipe(operators.debounceTime(300));
|
2834
|
+
var showOnEnterSubdropdown$ = mouseEnterTrigger$.pipe(operators.switchMap(function () { return showSubdropdown$; }));
|
2835
|
+
return i6.merge(showOnEnterMouse$, showOnEnterSubdropdown$);
|
2836
|
+
};
|
2837
|
+
CdkOptionsSubDropdownComponent.prototype.reloadOverlayPosition = function (open) {
|
2838
|
+
var _this = this;
|
2839
|
+
// force a rendering so that the dropdown container's dimensions are computed.
|
2840
|
+
this.changeDetection.markForCheck();
|
2841
|
+
if (open && this.dropdownContainer) {
|
2842
|
+
this.isPositionComputed = false;
|
2843
|
+
setTimeout(function () {
|
2844
|
+
var dropdownElement = _this.dropdownContainer.nativeElement;
|
2845
|
+
_this.overlay.overlayRef.updateSize({
|
2846
|
+
height: dropdownElement.offsetHeight,
|
2847
|
+
width: dropdownElement.offsetWidth
|
2848
|
+
});
|
2849
|
+
_this.overlay.overlayRef.updatePosition();
|
2850
|
+
_this.isPositionComputed = true;
|
2851
|
+
}, 0);
|
2852
|
+
}
|
2853
|
+
};
|
2854
|
+
CdkOptionsSubDropdownComponent.prototype.closeDropdown = function () {
|
2855
|
+
this.open = false;
|
2856
|
+
this.mouseInside$.next(false);
|
2857
|
+
};
|
2858
|
+
return CdkOptionsSubDropdownComponent;
|
2859
|
+
}());
|
2860
|
+
CdkOptionsSubDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: CdkOptionsSubDropdownComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
2861
|
+
CdkOptionsSubDropdownComponent.ɵcmp = i0__namespace.ɵɵ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: i1.CdkConnectedOverlay, descendants: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0__namespace, 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__namespace.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"] }] });
|
2862
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: CdkOptionsSubDropdownComponent, decorators: [{
|
2863
|
+
type: i0.Component,
|
2864
|
+
args: [{
|
2865
|
+
selector: 'lx-cdk-options-sub-dropdown',
|
2866
|
+
templateUrl: 'cdk-options-sub-dropdown.component.html',
|
2867
|
+
styleUrls: ['cdk-options-sub-dropdown.component.scss']
|
2868
|
+
}]
|
2869
|
+
}], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { trigger: [{
|
2870
|
+
type: i0.Input
|
2871
|
+
}], align: [{
|
2872
|
+
type: i0.Input
|
2873
|
+
}], options: [{
|
2874
|
+
type: i0.ContentChildren,
|
2875
|
+
args: [OptionComponent, { descendants: true }]
|
2876
|
+
}], overlay: [{
|
2877
|
+
type: i0.ViewChild,
|
2878
|
+
args: [i1.CdkConnectedOverlay]
|
2879
|
+
}], dropdownContainer: [{
|
2880
|
+
type: i0.ViewChild,
|
2881
|
+
args: ['dropdown']
|
2882
|
+
}] } });
|
2883
|
+
|
2344
2884
|
/**
|
2345
2885
|
* Observe creates an Observable stream and notifies the changes from an observed property.
|
2346
2886
|
*
|
@@ -3221,17 +3761,6 @@
|
|
3221
3761
|
}]
|
3222
3762
|
}] });
|
3223
3763
|
|
3224
|
-
// We can only use 'keyCode' because 'key' depends on the browser and does not work for IE11
|
3225
|
-
var BACKSPACE = 8;
|
3226
|
-
var TAB = 9;
|
3227
|
-
var ARROW_DOWN = 40;
|
3228
|
-
var ARROW_UP = 38;
|
3229
|
-
var ARROW_LEFT = 37;
|
3230
|
-
var ARROW_RIGHT = 39;
|
3231
|
-
var ENTER = 13;
|
3232
|
-
var ESCAPE = 27;
|
3233
|
-
var SPACE = 32;
|
3234
|
-
|
3235
3764
|
var BaseSelectDirective = /** @class */ (function () {
|
3236
3765
|
function BaseSelectDirective() {
|
3237
3766
|
this.disabled = false;
|
@@ -3889,168 +4418,6 @@
|
|
3889
4418
|
args: ['noResultsOptionTemplateRef']
|
3890
4419
|
}] } });
|
3891
4420
|
|
3892
|
-
var OptionGroupComponent = /** @class */ (function () {
|
3893
|
-
function OptionGroupComponent() {
|
3894
|
-
/**
|
3895
|
-
* Is true when option children have a selected state.
|
3896
|
-
* In this case we want to align the padding of the group label with the lx-options'.
|
3897
|
-
*/
|
3898
|
-
this.hasSelectedState = true;
|
3899
|
-
this.select = new i0.EventEmitter();
|
3900
|
-
}
|
3901
|
-
OptionGroupComponent.prototype.selectOption = function (value) {
|
3902
|
-
this.select.emit(value);
|
3903
|
-
};
|
3904
|
-
return OptionGroupComponent;
|
3905
|
-
}());
|
3906
|
-
OptionGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: OptionGroupComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
3907
|
-
OptionGroupComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
3908
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: OptionGroupComponent, decorators: [{
|
3909
|
-
type: i0.Component,
|
3910
|
-
args: [{
|
3911
|
-
selector: 'lx-option-group',
|
3912
|
-
templateUrl: 'option-group.component.html',
|
3913
|
-
styleUrls: ['option-group.component.styl'],
|
3914
|
-
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
3915
|
-
}]
|
3916
|
-
}], propDecorators: { hasSelectedState: [{
|
3917
|
-
type: i0.Input
|
3918
|
-
}], label: [{
|
3919
|
-
type: i0.Input
|
3920
|
-
}], select: [{
|
3921
|
-
type: i0.Output
|
3922
|
-
}] } });
|
3923
|
-
|
3924
|
-
var OptionComponent = /** @class */ (function () {
|
3925
|
-
function OptionComponent(group, elementRef) {
|
3926
|
-
this.group = group;
|
3927
|
-
this.elementRef = elementRef;
|
3928
|
-
this.selected = false;
|
3929
|
-
this.isHighlighted = false;
|
3930
|
-
this.disabled = false;
|
3931
|
-
/**
|
3932
|
-
* Is true when option has a selection nature like sorting.
|
3933
|
-
* In this case we show a check icon on the left to indicate selection.
|
3934
|
-
*
|
3935
|
-
* Is false when option represents a one time action like printing.
|
3936
|
-
* Cannot have selectedState when Option has dropdown
|
3937
|
-
*/
|
3938
|
-
this.hasSelectedState = true;
|
3939
|
-
this.select = new i0.EventEmitter();
|
3940
|
-
this.highlight = new i0.EventEmitter();
|
3941
|
-
this.selectedClick = new i0.EventEmitter();
|
3942
|
-
this.hasSubdropdown = false;
|
3943
|
-
this.isSuboption = false;
|
3944
|
-
}
|
3945
|
-
OptionComponent.prototype.selectOption = function (event) {
|
3946
|
-
if (this.disabled || this.hasSubdropdown) {
|
3947
|
-
if (event) {
|
3948
|
-
event.stopImmediatePropagation();
|
3949
|
-
}
|
3950
|
-
}
|
3951
|
-
else {
|
3952
|
-
if (this.selected) {
|
3953
|
-
return this.selectedClick.emit();
|
3954
|
-
}
|
3955
|
-
if (this.group) {
|
3956
|
-
this.group.selectOption(this.value);
|
3957
|
-
}
|
3958
|
-
this.select.emit(this.value);
|
3959
|
-
}
|
3960
|
-
};
|
3961
|
-
OptionComponent.prototype.setSelected = function (value) {
|
3962
|
-
this.selected = value;
|
3963
|
-
};
|
3964
|
-
OptionComponent.prototype.setHighlighted = function (value) {
|
3965
|
-
this.isHighlighted = value;
|
3966
|
-
this.highlight.emit(this.isHighlighted);
|
3967
|
-
};
|
3968
|
-
return OptionComponent;
|
3969
|
-
}());
|
3970
|
-
OptionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: OptionComponent, deps: [{ token: i0.forwardRef(function () { return OptionGroupComponent; }), optional: true }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
3971
|
-
OptionComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
3972
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: OptionComponent, decorators: [{
|
3973
|
-
type: i0.Component,
|
3974
|
-
args: [{
|
3975
|
-
selector: 'lx-option',
|
3976
|
-
templateUrl: 'option.component.html',
|
3977
|
-
styleUrls: ['option.component.styl']
|
3978
|
-
}]
|
3979
|
-
}], ctorParameters: function () {
|
3980
|
-
return [{ type: OptionGroupComponent, decorators: [{
|
3981
|
-
type: i0.Optional
|
3982
|
-
}, {
|
3983
|
-
type: i0.Inject,
|
3984
|
-
args: [i0.forwardRef(function () { return OptionGroupComponent; })]
|
3985
|
-
}] }, { type: i0__namespace.ElementRef }];
|
3986
|
-
}, propDecorators: { selected: [{
|
3987
|
-
type: i0.Input
|
3988
|
-
}], isHighlighted: [{
|
3989
|
-
type: i0.Input
|
3990
|
-
}], disabled: [{
|
3991
|
-
type: i0.Input
|
3992
|
-
}], value: [{
|
3993
|
-
type: i0.Input
|
3994
|
-
}], hasSelectedState: [{
|
3995
|
-
type: i0.Input
|
3996
|
-
}], select: [{
|
3997
|
-
type: i0.Output
|
3998
|
-
}], highlight: [{
|
3999
|
-
type: i0.Output
|
4000
|
-
}], selectedClick: [{
|
4001
|
-
type: i0.Output
|
4002
|
-
}], selectOption: [{
|
4003
|
-
type: i0.HostListener,
|
4004
|
-
args: ['click', ['$event']]
|
4005
|
-
}] } });
|
4006
|
-
|
4007
|
-
var KeyboardActionSourceDirective = /** @class */ (function () {
|
4008
|
-
function KeyboardActionSourceDirective(element) {
|
4009
|
-
var _this = this;
|
4010
|
-
this.element = element;
|
4011
|
-
this.dontEmit = false;
|
4012
|
-
this.destroyed$ = new i6.Subject();
|
4013
|
-
this.keyboardActions$ = i6.fromEvent(this.element.nativeElement, 'keydown').pipe(operators.filter(function (_event) { return !_this.dontEmit; }), operators.map(function (event) {
|
4014
|
-
switch (event.keyCode) {
|
4015
|
-
case ARROW_UP:
|
4016
|
-
event.preventDefault();
|
4017
|
-
return exports.KeyboardSelectAction.PREV;
|
4018
|
-
case ARROW_DOWN:
|
4019
|
-
event.preventDefault();
|
4020
|
-
return exports.KeyboardSelectAction.NEXT;
|
4021
|
-
case ARROW_LEFT:
|
4022
|
-
event.preventDefault();
|
4023
|
-
return exports.KeyboardSelectAction.LEFT;
|
4024
|
-
case ARROW_RIGHT:
|
4025
|
-
event.preventDefault();
|
4026
|
-
return exports.KeyboardSelectAction.RIGHT;
|
4027
|
-
case ENTER:
|
4028
|
-
event.preventDefault();
|
4029
|
-
return exports.KeyboardSelectAction.EXECUTE;
|
4030
|
-
case ESCAPE:
|
4031
|
-
case TAB:
|
4032
|
-
return exports.KeyboardSelectAction.CLOSE;
|
4033
|
-
}
|
4034
|
-
}), operators.takeUntil(this.destroyed$));
|
4035
|
-
}
|
4036
|
-
KeyboardActionSourceDirective.prototype.blur = function () {
|
4037
|
-
this.element.nativeElement.blur();
|
4038
|
-
};
|
4039
|
-
KeyboardActionSourceDirective.prototype.ngOnDestroy = function () {
|
4040
|
-
this.destroyed$.next();
|
4041
|
-
};
|
4042
|
-
return KeyboardActionSourceDirective;
|
4043
|
-
}());
|
4044
|
-
KeyboardActionSourceDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: KeyboardActionSourceDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
|
4045
|
-
KeyboardActionSourceDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"], ngImport: i0__namespace });
|
4046
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: KeyboardActionSourceDirective, decorators: [{
|
4047
|
-
type: i0.Directive,
|
4048
|
-
args: [{
|
4049
|
-
exportAs: 'keyboardActionSource',
|
4050
|
-
selector: '[lxKeyboardActionSource]'
|
4051
|
-
}]
|
4052
|
-
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; } });
|
4053
|
-
|
4054
4421
|
var OptionsDropdownComponent = /** @class */ (function () {
|
4055
4422
|
function OptionsDropdownComponent(changeDetection) {
|
4056
4423
|
this.changeDetection = changeDetection;
|
@@ -5391,6 +5758,8 @@
|
|
5391
5758
|
OptionGroupDropdownComponent,
|
5392
5759
|
OptionsDropdownComponent,
|
5393
5760
|
OptionsSubDropdownComponent,
|
5761
|
+
CdkOptionsDropdownComponent,
|
5762
|
+
CdkOptionsSubDropdownComponent,
|
5394
5763
|
PickerComponent,
|
5395
5764
|
PickerOptionComponent,
|
5396
5765
|
PickerTriggerDirective,
|
@@ -5410,6 +5779,7 @@
|
|
5410
5779
|
i3$2.FormsModule,
|
5411
5780
|
i3$2.ReactiveFormsModule, i1__namespace$2.TranslateModule, i1$3.DatepickerModule,
|
5412
5781
|
i3$1.InfiniteScrollModule,
|
5782
|
+
i1.OverlayModule,
|
5413
5783
|
LxCoreUiModule], exports: [BasicDropdownComponent,
|
5414
5784
|
BasicDropdownItemComponent,
|
5415
5785
|
CurrencyInputComponent,
|
@@ -5429,6 +5799,8 @@
|
|
5429
5799
|
OptionGroupDropdownComponent,
|
5430
5800
|
OptionsDropdownComponent,
|
5431
5801
|
OptionsSubDropdownComponent,
|
5802
|
+
CdkOptionsDropdownComponent,
|
5803
|
+
CdkOptionsSubDropdownComponent,
|
5432
5804
|
PickerComponent,
|
5433
5805
|
PickerOptionComponent,
|
5434
5806
|
PickerTriggerDirective,
|
@@ -5451,6 +5823,7 @@
|
|
5451
5823
|
i1$2.TranslateModule.forChild(),
|
5452
5824
|
i1$3.DatepickerModule,
|
5453
5825
|
i3$1.InfiniteScrollModule,
|
5826
|
+
i1.OverlayModule,
|
5454
5827
|
LxCoreUiModule
|
5455
5828
|
]] });
|
5456
5829
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxFormsModule, decorators: [{
|
@@ -5476,6 +5849,8 @@
|
|
5476
5849
|
OptionGroupDropdownComponent,
|
5477
5850
|
OptionsDropdownComponent,
|
5478
5851
|
OptionsSubDropdownComponent,
|
5852
|
+
CdkOptionsDropdownComponent,
|
5853
|
+
CdkOptionsSubDropdownComponent,
|
5479
5854
|
PickerComponent,
|
5480
5855
|
PickerOptionComponent,
|
5481
5856
|
PickerTriggerDirective,
|
@@ -5500,6 +5875,7 @@
|
|
5500
5875
|
i1$2.TranslateModule.forChild(),
|
5501
5876
|
i1$3.DatepickerModule,
|
5502
5877
|
i3$1.InfiniteScrollModule,
|
5878
|
+
i1.OverlayModule,
|
5503
5879
|
LxCoreUiModule
|
5504
5880
|
],
|
5505
5881
|
exports: [
|
@@ -5522,6 +5898,8 @@
|
|
5522
5898
|
OptionGroupDropdownComponent,
|
5523
5899
|
OptionsDropdownComponent,
|
5524
5900
|
OptionsSubDropdownComponent,
|
5901
|
+
CdkOptionsDropdownComponent,
|
5902
|
+
CdkOptionsSubDropdownComponent,
|
5525
5903
|
PickerComponent,
|
5526
5904
|
PickerOptionComponent,
|
5527
5905
|
PickerTriggerDirective,
|
@@ -6407,6 +6785,8 @@
|
|
6407
6785
|
exports.ButtonGroupComponent = ButtonGroupComponent;
|
6408
6786
|
exports.CURRENCY_SYMBOL_MAP = CURRENCY_SYMBOL_MAP;
|
6409
6787
|
exports.CardComponent = CardComponent;
|
6788
|
+
exports.CdkOptionsDropdownComponent = CdkOptionsDropdownComponent;
|
6789
|
+
exports.CdkOptionsSubDropdownComponent = CdkOptionsSubDropdownComponent;
|
6410
6790
|
exports.CollapsibleComponent = CollapsibleComponent;
|
6411
6791
|
exports.ColoredLabelComponent = ColoredLabelComponent;
|
6412
6792
|
exports.ContrastColorPipe = ContrastColorPipe;
|