@leanix/components 0.2.96 → 0.2.100

package/bundles/leanix-components.umd.js

@@ -3808,7 +3808,7 @@
                 _this.selectFirstOption();
             });
             this.open
-                .pipe(operators.takeUntil(this.destroyed$), operators.distinctUntilChanged(), operators.filter(function () { return !_this.disabled; }))
+                .pipe(operators.filter(function () { return !_this.disabled; }), operators.distinctUntilChanged(), operators.takeUntil(this.destroyed$))
                 .subscribe(function (isOpen) {
                 _this.dropdownOpen = isOpen;
                 if (isOpen) {
@@ -4409,6 +4409,7 @@
             this.closeOnScroll = false;
             this.disabled = false;
             this.maxHeight = 'none';
+            this.closeOnSelect = true;
             this.highlightedOptionIndex$ = new i6.BehaviorSubject(0);
             this._open = false;
             this.isSubdropdownExpanded = false;
@@ -4471,7 +4472,7 @@
             });
             /** Combined stream of all of the child options' select outputs. */
             this._options.changes
-                .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$))
+                .pipe(operators.startWith(this._options), operators.filter(function () { return _this.closeOnSelect; }), 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$))
                 .subscribe(function (_value) {
                 _this.closeDropdown();
             });
@@ -4550,7 +4551,7 @@
         return OptionsDropdownComponent;
     }());
     OptionsDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: OptionsDropdownComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OptionsDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: OptionsDropdownComponent, selector: "lx-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 }], ngImport: i0__namespace, template: "<div (click)=\"open = !open\" class=\"triggerContainer\">\n  <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</div>\n<ul\n  *ngIf=\"open\"\n  [class.left]=\"align === 'left'\"\n  [class.showScrollbar]=\"maxHeight !== 'none'\"\n  [style.max-height]=\"maxHeight\"\n  lxAutoclose\n  (autoclose)=\"closeDropdown()\"\n>\n  <ng-content></ng-content>\n</ul>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}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}: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.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    OptionsDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight", closeOnSelect: "closeOnSelect" }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }], ngImport: i0__namespace, template: "<div (click)=\"open = !open\" class=\"triggerContainer\">\n  <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</div>\n<ul\n  *ngIf=\"open\"\n  [class.left]=\"align === 'left'\"\n  [class.showScrollbar]=\"maxHeight !== 'none'\"\n  [style.max-height]=\"maxHeight\"\n  lxAutoclose\n  (autoclose)=\"closeDropdown()\"\n>\n  <ng-content></ng-content>\n</ul>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}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}: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.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: OptionsDropdownComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4567,6 +4568,8 @@
                     type: i0.Input
                 }], maxHeight: [{
                     type: i0.Input
+                }], closeOnSelect: [{
+                    type: i0.Input
                 }], trigger: [{
                     type: i0.ContentChild,
                     args: [KeyboardActionSourceDirective]
@@ -4610,7 +4613,7 @@
                 option.isSuboption = true;
                 return option;
             }); }));
-            return i6.combineLatest(this.trigger.highlight.asObservable(), optionChange$).pipe(operators.delay(0), // Need tick delay to get option highlighted and filter it out after
+            return i6.combineLatest([this.trigger.highlight.asObservable(), optionChange$]).pipe(operators.delay(0), // Need tick delay to get option highlighted and filter it out after
             operators.map(function (_a) {
                 var _b = __read(_a, 2), isHighlighted = _b[0], options = _b[1];
                 return isHighlighted || options.some(function (option) { return option.isHighlighted; });
@@ -4621,7 +4624,7 @@
             var mouseEnterTrigger$ = i6.fromEvent(this.trigger.elementRef.nativeElement, 'mouseenter');
             var mouseLeaveTrigger$ = i6.fromEvent(this.trigger.elementRef.nativeElement, 'mouseleave');
             var showOnEnterMouse$ = mouseEnterTrigger$.pipe(operators.map(function () { return true; }));
-            var showOnEnterSubmenu$ = mouseEnterTrigger$.pipe(operators.switchMap(function () { return mouseLeaveTrigger$.pipe(operators.debounceTime(300)); }), operators.switchMap(function () { return _this.mouseInside$; }));
+            var showOnEnterSubmenu$ = mouseEnterTrigger$.pipe(operators.switchMap(function () { return mouseLeaveTrigger$; }), operators.switchMap(function () { return _this.mouseInside$; }));
             return i6.merge(showOnEnterMouse$, showOnEnterSubmenu$);
         };
         OptionsSubDropdownComponent.prototype.closeDropdown = function () {
@@ -4630,7 +4633,7 @@
         return OptionsSubDropdownComponent;
     }());
     OptionsSubDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: OptionsSubDropdownComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OptionsSubDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: OptionsSubDropdownComponent, selector: "lx-options-sub-dropdown", inputs: { trigger: "trigger", align: "align" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, properties: { "class.hidden": "this.hidden" } }, queries: [{ propertyName: "options", predicate: OptionComponent, descendants: true }], ngImport: i0__namespace, template: "<ul class=\"sub-dropdown\" [class.left]=\"align === 'left'\" lxAutoclose (autoclose)=\"closeDropdown()\">\n  <ng-content></ng-content>\n</ul>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host.hidden{display:none}.sub-dropdown{position:absolute;left:calc(100% + 4px);transform:translateY(-32px);padding: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}.sub-dropdown.left{left:auto;right:calc(100% + 4px)}"], directives: [{ type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }] });
+    OptionsSubDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: OptionsSubDropdownComponent, selector: "lx-options-sub-dropdown", inputs: { trigger: "trigger", align: "align" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, properties: { "class.hidden": "this.hidden" } }, queries: [{ propertyName: "options", predicate: OptionComponent, descendants: true }], ngImport: i0__namespace, template: "<div class=\"spacingContainer\" [class.left]=\"align === 'left'\">\n  <ul class=\"sub-dropdown\" lxAutoclose (autoclose)=\"closeDropdown()\">\n    <ng-content></ng-content>\n  </ul>\n</div>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host.hidden{display:none}.spacingContainer{position:absolute;left:100%;transform:translateY(-32px);padding:0 0 0 4px}.spacingContainer.left{left:auto;right:100%;padding:0 4px 0 0}.sub-dropdown{padding: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: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: OptionsSubDropdownComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5580,7 +5583,7 @@
         return SortingDropdownComponent;
     }());
     SortingDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: SortingDropdownComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SortingDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: SortingDropdownComponent, selector: "lx-sorting-dropdown", inputs: { currentSorting: "currentSorting", sortingOptions: "sortingOptions" }, outputs: { apply: "apply" }, ngImport: i0__namespace, 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 (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: [""], components: [{ type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight"] }, { type: SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: ["label", "currentSortingLabel", "disabled"] }, { type: OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState"], outputs: ["select", "highlight", "selectedClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1__namespace$2.TranslatePipe } });
+    SortingDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: SortingDropdownComponent, selector: "lx-sorting-dropdown", inputs: { currentSorting: "currentSorting", sortingOptions: "sortingOptions" }, outputs: { apply: "apply" }, ngImport: i0__namespace, 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 (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: [""], components: [{ type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect"] }, { type: SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: ["label", "currentSortingLabel", "disabled"] }, { type: OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState"], outputs: ["select", "highlight", "selectedClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1__namespace$2.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: SortingDropdownComponent, decorators: [{
                 type: i0.Component,
                 args: [{