@leanix/components 0.4.93 → 0.4.94
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/esm2022/lib/forms-ui/components/breadcrumb/breadcrumb.component.mjs +1 -1
- package/esm2022/lib/forms-ui/components/option/option.component.mjs +19 -4
- package/esm2022/lib/forms-ui/components/options-dropdown/options-dropdown.component.mjs +83 -18
- package/esm2022/lib/forms-ui/components/sorting-dropdown/sorting-dropdown.component.mjs +2 -2
- package/esm2022/lib/forms-ui/directives/keyboard-action-source.directive.mjs +12 -3
- package/esm2022/lib/forms-ui/helpers/key-codes.constants.mjs +3 -1
- package/fesm2022/leanix-components.mjs +114 -25
- package/fesm2022/leanix-components.mjs.map +1 -1
- package/lib/forms-ui/components/option/option.component.d.ts +5 -1
- package/lib/forms-ui/components/options-dropdown/options-dropdown.component.d.ts +12 -2
- package/lib/forms-ui/directives/keyboard-action-source.directive.d.ts +2 -1
- package/lib/forms-ui/helpers/key-codes.constants.d.ts +2 -0
- package/package.json +1 -1
|
@@ -8,4 +8,6 @@ export const ARROW_RIGHT = 39;
|
|
|
8
8
|
export const ENTER = 13;
|
|
9
9
|
export const ESCAPE = 27;
|
|
10
10
|
export const SPACE = 32;
|
|
11
|
-
|
|
11
|
+
export const HOME = 36;
|
|
12
|
+
export const END = 35;
|
|
13
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2V5LWNvZGVzLmNvbnN0YW50cy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9zcmMvbGliL2Zvcm1zLXVpL2hlbHBlcnMva2V5LWNvZGVzLmNvbnN0YW50cy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxpRUFBaUU7QUFDakUsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFHLENBQUMsQ0FBQztBQUMzQixNQUFNLENBQUMsTUFBTSxHQUFHLEdBQUcsQ0FBQyxDQUFDO0FBQ3JCLE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRyxFQUFFLENBQUM7QUFDN0IsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEVBQUUsQ0FBQztBQUMzQixNQUFNLENBQUMsTUFBTSxVQUFVLEdBQUcsRUFBRSxDQUFDO0FBQzdCLE1BQU0sQ0FBQyxNQUFNLFdBQVcsR0FBRyxFQUFFLENBQUM7QUFDOUIsTUFBTSxDQUFDLE1BQU0sS0FBSyxHQUFHLEVBQUUsQ0FBQztBQUN4QixNQUFNLENBQUMsTUFBTSxNQUFNLEdBQUcsRUFBRSxDQUFDO0FBQ3pCLE1BQU0sQ0FBQyxNQUFNLEtBQUssR0FBRyxFQUFFLENBQUM7QUFDeEIsTUFBTSxDQUFDLE1BQU0sSUFBSSxHQUFHLEVBQUUsQ0FBQztBQUN2QixNQUFNLENBQUMsTUFBTSxHQUFHLEdBQUcsRUFBRSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLy8gV2UgY2FuIG9ubHkgdXNlICdrZXlDb2RlJyBiZWNhdXNlICdrZXknIGRlcGVuZHMgb24gdGhlIGJyb3dzZXJcbmV4cG9ydCBjb25zdCBCQUNLU1BBQ0UgPSA4O1xuZXhwb3J0IGNvbnN0IFRBQiA9IDk7XG5leHBvcnQgY29uc3QgQVJST1dfRE9XTiA9IDQwO1xuZXhwb3J0IGNvbnN0IEFSUk9XX1VQID0gMzg7XG5leHBvcnQgY29uc3QgQVJST1dfTEVGVCA9IDM3O1xuZXhwb3J0IGNvbnN0IEFSUk9XX1JJR0hUID0gMzk7XG5leHBvcnQgY29uc3QgRU5URVIgPSAxMztcbmV4cG9ydCBjb25zdCBFU0NBUEUgPSAyNztcbmV4cG9ydCBjb25zdCBTUEFDRSA9IDMyO1xuZXhwb3J0IGNvbnN0IEhPTUUgPSAzNjtcbmV4cG9ydCBjb25zdCBFTkQgPSAzNTtcbiJdfQ==
|
|
@@ -8,14 +8,14 @@ import { ComponentPortal, CdkPortal, PortalModule } from '@angular/cdk/portal';
|
|
|
8
8
|
import * as i1 from '@angular/cdk/overlay';
|
|
9
9
|
import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
|
|
10
10
|
import { __decorate } from 'tslib';
|
|
11
|
-
import { escape, trimEnd, sortBy, get, toLower, isEqual as isEqual$1, some, toString, padCharsStart, toNumber, isNaN as isNaN$1, includes, last, findIndex, filter as filter$1, isObject, find, uniqueId } from 'lodash/fp';
|
|
11
|
+
import { escape, trimEnd, sortBy, get, toLower, isEqual as isEqual$1, some, toString, padCharsStart, toNumber, isNaN as isNaN$1, includes, last, findIndex, filter as filter$1, isObject, find, uniqueId as uniqueId$1 } from 'lodash/fp';
|
|
12
12
|
import * as i5 from 'rxjs';
|
|
13
13
|
import { BehaviorSubject, timer, Subject, combineLatest, concat, merge, fromEvent, ReplaySubject, Observable, of, map as map$1 } from 'rxjs';
|
|
14
14
|
import { skipWhile, map, switchMap, startWith, pairwise, filter, withLatestFrom, take, debounceTime, skip, distinctUntilChanged, takeUntil, delay, tap } from 'rxjs/operators';
|
|
15
15
|
import Color from 'color';
|
|
16
16
|
import { format, distanceInWords, startOfDay } from 'date-fns';
|
|
17
17
|
import DOMPurify from 'dompurify';
|
|
18
|
-
import { isArray, isEqual, split, isString, intersection, isNil, curry } from 'lodash-es';
|
|
18
|
+
import { isArray, isEqual, split, uniqueId, isString, pick, intersection, isNil, curry } from 'lodash-es';
|
|
19
19
|
import { Renderer, marked } from 'marked';
|
|
20
20
|
import * as i1$3 from '@angular/cdk/clipboard';
|
|
21
21
|
import { ClipboardModule } from '@angular/cdk/clipboard';
|
|
@@ -2427,6 +2427,8 @@ const ARROW_RIGHT = 39;
|
|
|
2427
2427
|
const ENTER = 13;
|
|
2428
2428
|
const ESCAPE = 27;
|
|
2429
2429
|
const SPACE = 32;
|
|
2430
|
+
const HOME = 36;
|
|
2431
|
+
const END = 35;
|
|
2430
2432
|
|
|
2431
2433
|
class KeyboardActionSourceDirective {
|
|
2432
2434
|
constructor(element) {
|
|
@@ -2447,6 +2449,12 @@ class KeyboardActionSourceDirective {
|
|
|
2447
2449
|
case ARROW_RIGHT:
|
|
2448
2450
|
event.preventDefault();
|
|
2449
2451
|
return KeyboardSelectAction.RIGHT;
|
|
2452
|
+
case HOME:
|
|
2453
|
+
event.preventDefault();
|
|
2454
|
+
return KeyboardSelectAction.FIRST;
|
|
2455
|
+
case END:
|
|
2456
|
+
event.preventDefault();
|
|
2457
|
+
return KeyboardSelectAction.LAST;
|
|
2450
2458
|
case ENTER:
|
|
2451
2459
|
event.preventDefault();
|
|
2452
2460
|
return KeyboardSelectAction.EXECUTE;
|
|
@@ -2464,6 +2472,9 @@ class KeyboardActionSourceDirective {
|
|
|
2464
2472
|
ngOnDestroy() {
|
|
2465
2473
|
this.destroyed$.next();
|
|
2466
2474
|
}
|
|
2475
|
+
nativeElement() {
|
|
2476
|
+
return this.element?.nativeElement;
|
|
2477
|
+
}
|
|
2467
2478
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: KeyboardActionSourceDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2468
2479
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: KeyboardActionSourceDirective, isStandalone: true, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"], ngImport: i0 }); }
|
|
2469
2480
|
}
|
|
@@ -2537,8 +2548,10 @@ class OptionComponent {
|
|
|
2537
2548
|
this.select = new EventEmitter();
|
|
2538
2549
|
this.highlight = new EventEmitter();
|
|
2539
2550
|
this.selectedClick = new EventEmitter();
|
|
2551
|
+
this.keyDownAction = new EventEmitter();
|
|
2540
2552
|
this.hasSubdropdown = false;
|
|
2541
2553
|
this.isSuboption = false;
|
|
2554
|
+
this.optionId = uniqueId('option');
|
|
2542
2555
|
}
|
|
2543
2556
|
setSelected(value) {
|
|
2544
2557
|
this.selected = value;
|
|
@@ -2546,13 +2559,20 @@ class OptionComponent {
|
|
|
2546
2559
|
setHighlighted(value) {
|
|
2547
2560
|
this.isHighlighted = value;
|
|
2548
2561
|
this.highlight.emit(this.isHighlighted);
|
|
2562
|
+
if (value) {
|
|
2563
|
+
this.option?.nativeElement?.focus();
|
|
2564
|
+
}
|
|
2565
|
+
}
|
|
2566
|
+
handleKeyDown(event) {
|
|
2567
|
+
event.preventDefault();
|
|
2568
|
+
this.keyDownAction.emit(event);
|
|
2549
2569
|
}
|
|
2550
2570
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: OptionComponent, deps: [{ token: forwardRef(() => OptionGroupComponent), optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2551
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: OptionComponent, isStandalone: true, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState", selectIcon: "selectIcon" }, 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 <ng-container *ngIf=\"hasSelectedState\">\n <ng-container [ngSwitch]=\"selectIcon\">\n <ng-container *ngSwitchCase=\"'check'\">\n <i *ngIf=\"selected\" class=\"far fa-check\"></i>\n </ng-container>\n <ng-container *ngSwitchCase=\"'circle'\">\n <i class=\"fal fa-circle\"></i>\n <i *ngIf=\"selected\" class=\"fas fa-circle\"></i>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-content></ng-content>\n <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":host{display:block}:host.flexLi li.option{display:flex}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d;position:relative}.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}.option i{line-height:23px;position:absolute;top:calc(50% - 11.5px)}.fa-check{left:8px}.fa-circle{left:6px;font-size:16px;width:16px;text-align:center}.fas.fa-circle{font-size:8px;color:inherit}.fa-chevron-right{right:8px;font-size:8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] }); }
|
|
2571
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: OptionComponent, isStandalone: true, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState", selectIcon: "selectIcon" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick", keyDownAction: "keyDownAction" }, host: { listeners: { "click": "selectOption($event)" } }, viewQueries: [{ propertyName: "option", first: true, predicate: ["option"], descendants: true }], ngImport: i0, template: "<li\n #option\n class=\"option\"\n role=\"option\"\n tabindex=\"-1\"\n [attr.id]=\"optionId\"\n [attr.aria-selected]=\"selected\"\n [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n [class.highlighted]=\"isHighlighted\"\n [class.selected]=\"selected\"\n [class.disabled]=\"disabled\"\n [class.hasSubdropdown]=\"hasSubdropdown\"\n (keydown)=\"handleKeyDown($event)\"\n>\n <ng-container *ngIf=\"hasSelectedState\">\n <ng-container [ngSwitch]=\"selectIcon\">\n <ng-container *ngSwitchCase=\"'check'\">\n <i *ngIf=\"selected\" class=\"far fa-check\"></i>\n </ng-container>\n <ng-container *ngSwitchCase=\"'circle'\">\n <i class=\"fal fa-circle\"></i>\n <i *ngIf=\"selected\" class=\"fas fa-circle\"></i>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-content></ng-content>\n <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":host{display:block}:host.flexLi li.option{display:flex}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d;position:relative}.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}.option i{line-height:23px;position:absolute;top:calc(50% - 11.5px)}.fa-check{left:8px}.fa-circle{left:6px;font-size:16px;width:16px;text-align:center}.fas.fa-circle{font-size:8px;color:inherit}.fa-chevron-right{right:8px;font-size:8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] }); }
|
|
2552
2572
|
}
|
|
2553
2573
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: OptionComponent, decorators: [{
|
|
2554
2574
|
type: Component,
|
|
2555
|
-
args: [{ selector: 'lx-option', standalone: true, imports: [NgIf, NgSwitch, NgSwitchCase], 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 <ng-container *ngIf=\"hasSelectedState\">\n <ng-container [ngSwitch]=\"selectIcon\">\n <ng-container *ngSwitchCase=\"'check'\">\n <i *ngIf=\"selected\" class=\"far fa-check\"></i>\n </ng-container>\n <ng-container *ngSwitchCase=\"'circle'\">\n <i class=\"fal fa-circle\"></i>\n <i *ngIf=\"selected\" class=\"fas fa-circle\"></i>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-content></ng-content>\n <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":host{display:block}:host.flexLi li.option{display:flex}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d;position:relative}.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}.option i{line-height:23px;position:absolute;top:calc(50% - 11.5px)}.fa-check{left:8px}.fa-circle{left:6px;font-size:16px;width:16px;text-align:center}.fas.fa-circle{font-size:8px;color:inherit}.fa-chevron-right{right:8px;font-size:8px}\n"] }]
|
|
2575
|
+
args: [{ selector: 'lx-option', standalone: true, imports: [NgIf, NgSwitch, NgSwitchCase], template: "<li\n #option\n class=\"option\"\n role=\"option\"\n tabindex=\"-1\"\n [attr.id]=\"optionId\"\n [attr.aria-selected]=\"selected\"\n [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n [class.highlighted]=\"isHighlighted\"\n [class.selected]=\"selected\"\n [class.disabled]=\"disabled\"\n [class.hasSubdropdown]=\"hasSubdropdown\"\n (keydown)=\"handleKeyDown($event)\"\n>\n <ng-container *ngIf=\"hasSelectedState\">\n <ng-container [ngSwitch]=\"selectIcon\">\n <ng-container *ngSwitchCase=\"'check'\">\n <i *ngIf=\"selected\" class=\"far fa-check\"></i>\n </ng-container>\n <ng-container *ngSwitchCase=\"'circle'\">\n <i class=\"fal fa-circle\"></i>\n <i *ngIf=\"selected\" class=\"fas fa-circle\"></i>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-content></ng-content>\n <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":host{display:block}:host.flexLi li.option{display:flex}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d;position:relative}.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}.option i{line-height:23px;position:absolute;top:calc(50% - 11.5px)}.fa-check{left:8px}.fa-circle{left:6px;font-size:16px;width:16px;text-align:center}.fas.fa-circle{font-size:8px;color:inherit}.fa-chevron-right{right:8px;font-size:8px}\n"] }]
|
|
2556
2576
|
}], ctorParameters: () => [{ type: OptionGroupComponent, decorators: [{
|
|
2557
2577
|
type: Optional
|
|
2558
2578
|
}, {
|
|
@@ -2576,6 +2596,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
|
|
|
2576
2596
|
type: Output
|
|
2577
2597
|
}], selectedClick: [{
|
|
2578
2598
|
type: Output
|
|
2599
|
+
}], keyDownAction: [{
|
|
2600
|
+
type: Output
|
|
2601
|
+
}], option: [{
|
|
2602
|
+
type: ViewChild,
|
|
2603
|
+
args: ['option']
|
|
2579
2604
|
}], selectOption: [{
|
|
2580
2605
|
type: HostListener,
|
|
2581
2606
|
args: ['click', ['$event']]
|
|
@@ -2819,7 +2844,7 @@ class BreadcrumbComponent {
|
|
|
2819
2844
|
return !!breadcrumb.breadcrumbs;
|
|
2820
2845
|
}
|
|
2821
2846
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2822
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: BreadcrumbComponent, isStandalone: true, selector: "lx-breadcrumb", inputs: { breadcrumbs: "breadcrumbs" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"breadcrumbs\">\n <ng-container *ngFor=\"let breadcrumb of viewBreadcrumbs\">\n <ng-container *ngIf=\"isEllipsedBreadcrumb(breadcrumb)\">\n <lx-cdk-options-dropdown [align]=\"'right'\" class=\"dropdownContainer\">\n <a class=\"step\" href=\"\" lxKeyboardActionSource (click)=\"(false)\">...</a>\n <lx-option\n *ngFor=\"let ellipsedBreadcrumbs of breadcrumb.breadcrumbs\"\n [hasSelectedState]=\"false\"\n (select)=\"ellipsedBreadcrumbs.onClick?.(ellipsedBreadcrumbs)\"\n >\n {{ ellipsedBreadcrumbs.label }}\n </lx-option>\n </lx-cdk-options-dropdown>\n <span class=\"arrow\">></span>\n </ng-container>\n <ng-container *ngIf=\"!isEllipsedBreadcrumb(breadcrumb)\">\n <a class=\"step\" href=\"\" (click)=\"breadcrumb.onClick?.(breadcrumb); (false)\">{{ breadcrumb.label }}</a>\n <span class=\"arrow\">></span>\n </ng-container>\n </ng-container>\n</div>\n", styles: [".breadcrumbs{line-height:20px;font-weight:500}.breadcrumbs .step{color:var(--01-ui-colors-dark-gray);cursor:pointer}.breadcrumbs .arrow{margin:0 12px;color:var(--01-ui-colors-dark-gray)}.breadcrumbs .arrow:last-child{display:none}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CdkOptionsDropdownComponent, selector: "lx-cdk-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick"] }] }); }
|
|
2847
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: BreadcrumbComponent, isStandalone: true, selector: "lx-breadcrumb", inputs: { breadcrumbs: "breadcrumbs" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"breadcrumbs\">\n <ng-container *ngFor=\"let breadcrumb of viewBreadcrumbs\">\n <ng-container *ngIf=\"isEllipsedBreadcrumb(breadcrumb)\">\n <lx-cdk-options-dropdown [align]=\"'right'\" class=\"dropdownContainer\">\n <a class=\"step\" href=\"\" lxKeyboardActionSource (click)=\"(false)\">...</a>\n <lx-option\n *ngFor=\"let ellipsedBreadcrumbs of breadcrumb.breadcrumbs\"\n [hasSelectedState]=\"false\"\n (select)=\"ellipsedBreadcrumbs.onClick?.(ellipsedBreadcrumbs)\"\n >\n {{ ellipsedBreadcrumbs.label }}\n </lx-option>\n </lx-cdk-options-dropdown>\n <span class=\"arrow\">></span>\n </ng-container>\n <ng-container *ngIf=\"!isEllipsedBreadcrumb(breadcrumb)\">\n <a class=\"step\" href=\"\" (click)=\"breadcrumb.onClick?.(breadcrumb); (false)\">{{ breadcrumb.label }}</a>\n <span class=\"arrow\">></span>\n </ng-container>\n </ng-container>\n</div>\n", styles: [".breadcrumbs{line-height:20px;font-weight:500}.breadcrumbs .step{color:var(--01-ui-colors-dark-gray);cursor:pointer}.breadcrumbs .arrow{margin:0 12px;color:var(--01-ui-colors-dark-gray)}.breadcrumbs .arrow:last-child{display:none}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CdkOptionsDropdownComponent, selector: "lx-cdk-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction"] }] }); }
|
|
2823
2848
|
}
|
|
2824
2849
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
2825
2850
|
type: Component,
|
|
@@ -5898,6 +5923,9 @@ class OptionsDropdownComponent {
|
|
|
5898
5923
|
return;
|
|
5899
5924
|
}
|
|
5900
5925
|
this._open = value;
|
|
5926
|
+
if (this.lxButton) {
|
|
5927
|
+
this.renderer.setAttribute(this.lxButton, 'aria-expanded', this._open.toString());
|
|
5928
|
+
}
|
|
5901
5929
|
if (this.trigger) {
|
|
5902
5930
|
// Don't emit keyboard actions while the dropdown is not open yet.
|
|
5903
5931
|
this.trigger.dontEmit = !this.open;
|
|
@@ -5912,11 +5940,18 @@ class OptionsDropdownComponent {
|
|
|
5912
5940
|
return this._open;
|
|
5913
5941
|
}
|
|
5914
5942
|
get options() {
|
|
5915
|
-
return this._options
|
|
5943
|
+
return this._options?.toArray() || [];
|
|
5944
|
+
}
|
|
5945
|
+
get optionIds() {
|
|
5946
|
+
return this.options.map((o) => o.optionId);
|
|
5916
5947
|
}
|
|
5917
|
-
|
|
5948
|
+
get lxButton() {
|
|
5949
|
+
return this.trigger?.nativeElement();
|
|
5950
|
+
}
|
|
5951
|
+
constructor(changeDetection, scrollStrategies, renderer) {
|
|
5918
5952
|
this.changeDetection = changeDetection;
|
|
5919
5953
|
this.scrollStrategies = scrollStrategies;
|
|
5954
|
+
this.renderer = renderer;
|
|
5920
5955
|
this.NAME = 'OptionsDropdownComponent';
|
|
5921
5956
|
this.align = 'right';
|
|
5922
5957
|
this.closeOnScroll = false;
|
|
@@ -5929,29 +5964,40 @@ class OptionsDropdownComponent {
|
|
|
5929
5964
|
this._open = false;
|
|
5930
5965
|
this.isSubdropdownExpanded = false;
|
|
5931
5966
|
this.destroyed$ = new Subject();
|
|
5967
|
+
this.listboxId = uniqueId('listbox');
|
|
5932
5968
|
}
|
|
5933
5969
|
ngAfterViewInit() {
|
|
5934
5970
|
this.trigger.dontEmit = !this.open;
|
|
5935
5971
|
const optionsChanges$ = this._options.changes.pipe(startWith(this._options), map((options) => options.toArray()));
|
|
5936
5972
|
this.trigger.keyboardActions$
|
|
5937
|
-
.pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.NEXT), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, index, options) => this.next(index, options)))
|
|
5973
|
+
.pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.NEXT), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, index, options) => this.next(index, options)), takeUntil(this.destroyed$))
|
|
5938
5974
|
.subscribe(this.highlightedOptionIndex$);
|
|
5939
5975
|
this.trigger.keyboardActions$
|
|
5940
|
-
.pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.PREV), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, index, options) => this.prev(index, options)))
|
|
5976
|
+
.pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.PREV), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, index, options) => this.prev(index, options)), takeUntil(this.destroyed$))
|
|
5941
5977
|
.subscribe(this.highlightedOptionIndex$);
|
|
5942
5978
|
this.trigger.keyboardActions$
|
|
5943
|
-
.pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.
|
|
5979
|
+
.pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.FIRST), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, _index, _options) => 0), takeUntil(this.destroyed$))
|
|
5944
5980
|
.subscribe(this.highlightedOptionIndex$);
|
|
5945
5981
|
this.trigger.keyboardActions$
|
|
5946
|
-
.pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.
|
|
5982
|
+
.pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.LAST), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, _index, _options) => this.options.length - 1), takeUntil(this.destroyed$))
|
|
5947
5983
|
.subscribe(this.highlightedOptionIndex$);
|
|
5948
5984
|
this.trigger.keyboardActions$
|
|
5949
|
-
.pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.
|
|
5950
|
-
.subscribe(
|
|
5985
|
+
.pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.LEFT), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, index, options) => this.isSubdropdownExpanded ? this.collapse(index, options) : this.expand(index, options)), takeUntil(this.destroyed$))
|
|
5986
|
+
.subscribe(this.highlightedOptionIndex$);
|
|
5951
5987
|
this.trigger.keyboardActions$
|
|
5952
|
-
.pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.
|
|
5988
|
+
.pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.RIGHT), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, index, options) => this.isSubdropdownExpanded ? this.collapse(index, options) : this.expand(index, options)), takeUntil(this.destroyed$))
|
|
5989
|
+
.subscribe(this.highlightedOptionIndex$);
|
|
5990
|
+
this.trigger.keyboardActions$
|
|
5991
|
+
.pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.CLOSE), takeUntil(this.destroyed$))
|
|
5992
|
+
.subscribe(() => {
|
|
5993
|
+
this.closeDropdown();
|
|
5994
|
+
this.lxButton?.focus();
|
|
5995
|
+
});
|
|
5996
|
+
this.trigger.keyboardActions$
|
|
5997
|
+
.pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.EXECUTE), withLatestFrom(this.highlightedOptionIndex$, (_, index) => index), takeUntil(this.destroyed$))
|
|
5953
5998
|
.subscribe((index) => {
|
|
5954
5999
|
this.options[index]?.selectOption();
|
|
6000
|
+
this.lxButton?.focus();
|
|
5955
6001
|
});
|
|
5956
6002
|
/** Combined stream of all of the child options' select outputs. */
|
|
5957
6003
|
this._options.changes
|
|
@@ -5959,7 +6005,12 @@ class OptionsDropdownComponent {
|
|
|
5959
6005
|
.subscribe((_value) => {
|
|
5960
6006
|
this.closeDropdown();
|
|
5961
6007
|
});
|
|
5962
|
-
|
|
6008
|
+
this._options.changes
|
|
6009
|
+
.pipe(startWith(this._options), switchMap(() => merge(...this._options.map((option) => option.keyDownAction))), takeUntil(this.destroyed$))
|
|
6010
|
+
.subscribe((event) => {
|
|
6011
|
+
this.handleOptionKeyDown(event);
|
|
6012
|
+
});
|
|
6013
|
+
combineLatest([optionsChanges$, this.highlightedOptionIndex$])
|
|
5963
6014
|
.pipe(delay(0), map(([options, index]) => options[index]), distinctUntilChanged(), takeUntil(this.destroyed$))
|
|
5964
6015
|
.subscribe((optionToBeHighlighted) => {
|
|
5965
6016
|
this.options.forEach((option) => option.setHighlighted(optionToBeHighlighted === option));
|
|
@@ -5973,16 +6024,21 @@ class OptionsDropdownComponent {
|
|
|
5973
6024
|
this.trigger.blur();
|
|
5974
6025
|
});
|
|
5975
6026
|
}
|
|
6027
|
+
this.setInitialAccessibilityAttributes();
|
|
5976
6028
|
}
|
|
5977
6029
|
ngOnDestroy() {
|
|
5978
6030
|
this.destroyed$.next();
|
|
6031
|
+
this.destroyed$.complete();
|
|
5979
6032
|
}
|
|
5980
6033
|
closeDropdown() {
|
|
5981
6034
|
this.open = false;
|
|
5982
6035
|
}
|
|
5983
6036
|
setInitialHighlightingIndex() {
|
|
5984
|
-
|
|
5985
|
-
|
|
6037
|
+
let initialIndex = this.options.findIndex((option) => option.selected && this.optionIsHighlightable(option));
|
|
6038
|
+
if (initialIndex === -1) {
|
|
6039
|
+
initialIndex = this.options.findIndex((option) => this.optionIsHighlightable(option));
|
|
6040
|
+
}
|
|
6041
|
+
this.highlightedOptionIndex$.next(initialIndex);
|
|
5986
6042
|
}
|
|
5987
6043
|
prev(currentIndex, items) {
|
|
5988
6044
|
if (currentIndex > 0) {
|
|
@@ -6025,13 +6081,46 @@ class OptionsDropdownComponent {
|
|
|
6025
6081
|
const isSecondlevelOptionAndAllowed = option.isSuboption && this.isSubdropdownExpanded;
|
|
6026
6082
|
return !option.disabled && (isToplevelOptionAndAllowed || isSecondlevelOptionAndAllowed);
|
|
6027
6083
|
}
|
|
6028
|
-
|
|
6029
|
-
|
|
6084
|
+
/**
|
|
6085
|
+
* Programmatically sets initial accessibility attributes on the trigger button so that we
|
|
6086
|
+
* don't have to do it manually every time we declare a new instance of this component
|
|
6087
|
+
*/
|
|
6088
|
+
setInitialAccessibilityAttributes() {
|
|
6089
|
+
if (!this.lxButton) {
|
|
6090
|
+
return;
|
|
6091
|
+
}
|
|
6092
|
+
this.renderer.setAttribute(this.lxButton, 'role', 'combobox');
|
|
6093
|
+
this.renderer.setAttribute(this.lxButton, 'aria-haspopup', 'listbox');
|
|
6094
|
+
this.renderer.setAttribute(this.lxButton, 'tabindex', '0');
|
|
6095
|
+
this.renderer.setAttribute(this.lxButton, 'aria-control', this.listboxId);
|
|
6096
|
+
this.renderer.setAttribute(this.lxButton, 'aria-expanded', 'false');
|
|
6097
|
+
}
|
|
6098
|
+
handleOptionKeyDown(event) {
|
|
6099
|
+
// In order to keep the centralized keyboard event management logic from `KeyboardActionSourceDirective`
|
|
6100
|
+
// we duplicate the option event here and trigger it again from lxButton.
|
|
6101
|
+
const newEventOptions = pick(event, [
|
|
6102
|
+
'isTrusted',
|
|
6103
|
+
'altKey',
|
|
6104
|
+
'bubbles',
|
|
6105
|
+
'charCode',
|
|
6106
|
+
'cancelable',
|
|
6107
|
+
'composed',
|
|
6108
|
+
'key',
|
|
6109
|
+
'ctrlKey',
|
|
6110
|
+
'defaultPrevented',
|
|
6111
|
+
'keyCode',
|
|
6112
|
+
'code'
|
|
6113
|
+
]);
|
|
6114
|
+
const newEvent = new KeyboardEvent(event.type, newEventOptions);
|
|
6115
|
+
this.lxButton?.dispatchEvent(newEvent);
|
|
6116
|
+
}
|
|
6117
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: OptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ScrollStrategyOptions }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6118
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: OptionsDropdownComponent, isStandalone: true, selector: "lx-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight", closeOnSelect: "closeOnSelect", overlayPositioning: "overlayPositioning" }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!overlayPositioning\">\n <div class=\"triggerContainer\" (click)=\"open = !open\">\n <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n </div>\n <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"overlayPositioning\">\n <div class=\"overlayOrigin triggerContainer\" (click)=\"open = !open\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n </div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n [cdkConnectedOverlayOpen]=\"open\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n >\n <div class=\"overlayDropdown\">\n <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n </div>\n </ng-template>\n</ng-container>\n\n<ng-template #triggerTemplate>\n <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n <ul\n *ngIf=\"open\"\n [id]=\"listboxId\"\n [class.left]=\"align === 'left'\"\n [class.showScrollbar]=\"maxHeight !== 'none'\"\n [style.max-height]=\"maxHeight\"\n lxAutoclose\n (autoclose)=\"closeDropdown()\"\n role=\"listbox\"\n tabindex=\"-1\"\n [attr.aria-owns]=\"optionIds.join(' ')\"\n >\n <ng-content></ng-content>\n </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}.overlayDropdown ul{position:static}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #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}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6030
6119
|
}
|
|
6031
6120
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: OptionsDropdownComponent, decorators: [{
|
|
6032
6121
|
type: Component,
|
|
6033
|
-
args: [{ selector: 'lx-options-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, NgTemplateOutlet, CdkOverlayOrigin, CdkConnectedOverlay, AutocloseDirective], template: "<ng-
|
|
6034
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.ScrollStrategyOptions }], propDecorators: { align: [{
|
|
6122
|
+
args: [{ selector: 'lx-options-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, NgTemplateOutlet, CdkOverlayOrigin, CdkConnectedOverlay, AutocloseDirective], template: "<ng-container *ngIf=\"!overlayPositioning\">\n <div class=\"triggerContainer\" (click)=\"open = !open\">\n <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n </div>\n <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"overlayPositioning\">\n <div class=\"overlayOrigin triggerContainer\" (click)=\"open = !open\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n </div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n [cdkConnectedOverlayOpen]=\"open\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n >\n <div class=\"overlayDropdown\">\n <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n </div>\n </ng-template>\n</ng-container>\n\n<ng-template #triggerTemplate>\n <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n <ul\n *ngIf=\"open\"\n [id]=\"listboxId\"\n [class.left]=\"align === 'left'\"\n [class.showScrollbar]=\"maxHeight !== 'none'\"\n [style.max-height]=\"maxHeight\"\n lxAutoclose\n (autoclose)=\"closeDropdown()\"\n role=\"listbox\"\n tabindex=\"-1\"\n [attr.aria-owns]=\"optionIds.join(' ')\"\n >\n <ng-content></ng-content>\n </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}.overlayDropdown ul{position:static}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #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}\n"] }]
|
|
6123
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.ScrollStrategyOptions }, { type: i0.Renderer2 }], propDecorators: { align: [{
|
|
6035
6124
|
type: Input
|
|
6036
6125
|
}], closeOnScroll: [{
|
|
6037
6126
|
type: Input
|
|
@@ -7140,7 +7229,7 @@ class SortingDropdownComponent {
|
|
|
7140
7229
|
return key ? `sorting.${key}.label` : '';
|
|
7141
7230
|
}
|
|
7142
7231
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SortingDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7143
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: SortingDropdownComponent, isStandalone: true, selector: "lx-sorting-dropdown", inputs: { currentSorting: "currentSorting", sortingOptions: "sortingOptions", showDirectionOptions: "showDirectionOptions" }, outputs: { apply: "apply" }, ngImport: i0, template: "<lx-options-dropdown *ngIf=\"currentSorting\">\n <lx-sorting-dropdown-trigger\n lxKeyboardActionSource\n [label]=\"NAME + '.sortBy' | translate\"\n [currentSortingLabel]=\"getSortLabel(currentSorting.key) | translate\"\n >\n </lx-sorting-dropdown-trigger>\n <lx-option-group (select)=\"applySortingMode($event)\">\n <lx-option *ngFor=\"let option of sortingOptions\" [value]=\"option\" [selected]=\"option.key === currentSorting.key\">\n {{ getSortLabel(option?.key) | translate }}\n </lx-option>\n </lx-option-group>\n <lx-option-group *ngIf=\"showDirectionOptions\" (select)=\"applySortingDirection($event)\">\n <lx-option *ngFor=\"let sortDirection of sortingDirections\" [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting.order\">\n {{ 'sorting.' + currentSorting.key + '.' + sortDirection | translate }}\n </lx-option>\n </lx-option-group>\n</lx-options-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect", "overlayPositioning"] }, { kind: "component", type: SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: ["label", "currentSortingLabel", "disabled"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
|
|
7232
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: SortingDropdownComponent, isStandalone: true, selector: "lx-sorting-dropdown", inputs: { currentSorting: "currentSorting", sortingOptions: "sortingOptions", showDirectionOptions: "showDirectionOptions" }, outputs: { apply: "apply" }, ngImport: i0, template: "<lx-options-dropdown *ngIf=\"currentSorting\">\n <lx-sorting-dropdown-trigger\n lxKeyboardActionSource\n [label]=\"NAME + '.sortBy' | translate\"\n [currentSortingLabel]=\"getSortLabel(currentSorting.key) | translate\"\n >\n </lx-sorting-dropdown-trigger>\n <lx-option-group (select)=\"applySortingMode($event)\">\n <lx-option *ngFor=\"let option of sortingOptions\" [value]=\"option\" [selected]=\"option.key === currentSorting.key\">\n {{ getSortLabel(option?.key) | translate }}\n </lx-option>\n </lx-option-group>\n <lx-option-group *ngIf=\"showDirectionOptions\" (select)=\"applySortingDirection($event)\">\n <lx-option *ngFor=\"let sortDirection of sortingDirections\" [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting.order\">\n {{ 'sorting.' + currentSorting.key + '.' + sortDirection | translate }}\n </lx-option>\n </lx-option-group>\n</lx-options-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect", "overlayPositioning"] }, { kind: "component", type: SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: ["label", "currentSortingLabel", "disabled"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
|
|
7144
7233
|
}
|
|
7145
7234
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SortingDropdownComponent, decorators: [{
|
|
7146
7235
|
type: Component,
|
|
@@ -8517,8 +8606,8 @@ class TabComponent {
|
|
|
8517
8606
|
this.switch = new EventEmitter();
|
|
8518
8607
|
this.keyDownAction = new EventEmitter();
|
|
8519
8608
|
this._isActive = false;
|
|
8520
|
-
this.tabPanelId = uniqueId('panelId');
|
|
8521
|
-
this.tabId = uniqueId('tab');
|
|
8609
|
+
this.tabPanelId = uniqueId$1('panelId');
|
|
8610
|
+
this.tabId = uniqueId$1('tab');
|
|
8522
8611
|
}
|
|
8523
8612
|
select() {
|
|
8524
8613
|
if (this.tabLink) {
|
|
@@ -8744,5 +8833,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
|
|
|
8744
8833
|
* Generated bundle index. Do not edit.
|
|
8745
8834
|
*/
|
|
8746
8835
|
|
|
8747
|
-
export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AfterViewInitDirective, AutocloseDirective, AutocloseGroupService, AutofocusDirective, BACKSPACE, BadgeComponent, BannerComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ColoredLabelComponent, ContenteditableDirective, ContrastColorPipe, CopyButtonComponent, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATE_FN_LOCALE, DATE_FORMATS, DateInputComponent, DragAndDropListComponent, DragAndDropListItemComponent, ENTER, ESCAPE, EllipsisComponent, ErrorMessageComponent, ExpandedDropdownComponent, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FileDownloadButtonComponent, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HighlightRangePipe, HighlightTermPipe, IconComponent, IconScaleComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, LOCALE_FN, LX_ELLIPSIS_DEBOUNCE_ON_RESIZE, LxCoreUiModule, LxDragAndDropListModule, LxFormsModule, LxIsUuidPipe, LxLinkifyPipe, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTranslatePipe, LxUnlinkifyPipe, MODAL_CLOSE, MarkInvalidDirective, MarkdownPipe, ModalCloseClickLocation, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, RELEVANCE_SORTING_KEY, Required, ResizeObserverService, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectListComponent, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SliderToggleComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, ValidateStringNotInArray, ValidateStringNotInArrayAsync, getContrastColor, getTranslationParts, highlightText, isValidHexColor, isValidX, isValidY, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle };
|
|
8836
|
+
export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AfterViewInitDirective, AutocloseDirective, AutocloseGroupService, AutofocusDirective, BACKSPACE, BadgeComponent, BannerComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ColoredLabelComponent, ContenteditableDirective, ContrastColorPipe, CopyButtonComponent, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATE_FN_LOCALE, DATE_FORMATS, DateInputComponent, DragAndDropListComponent, DragAndDropListItemComponent, END, ENTER, ESCAPE, EllipsisComponent, ErrorMessageComponent, ExpandedDropdownComponent, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FileDownloadButtonComponent, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HOME, HighlightRangePipe, HighlightTermPipe, IconComponent, IconScaleComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, LOCALE_FN, LX_ELLIPSIS_DEBOUNCE_ON_RESIZE, LxCoreUiModule, LxDragAndDropListModule, LxFormsModule, LxIsUuidPipe, LxLinkifyPipe, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTranslatePipe, LxUnlinkifyPipe, MODAL_CLOSE, MarkInvalidDirective, MarkdownPipe, ModalCloseClickLocation, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, RELEVANCE_SORTING_KEY, Required, ResizeObserverService, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectListComponent, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SliderToggleComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, ValidateStringNotInArray, ValidateStringNotInArrayAsync, getContrastColor, getTranslationParts, highlightText, isValidHexColor, isValidX, isValidY, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle };
|
|
8748
8837
|
//# sourceMappingURL=leanix-components.mjs.map
|