@leanix/components 0.2.212 → 0.2.215

package/bundles/leanix-components.umd.js

@@ -4621,6 +4621,7 @@
             this.hidden = true;
             this.mouseInside$ = new i6.BehaviorSubject(false);
             this.destroyed$ = new i6.Subject();
+            this.maxHeight$ = new i6.BehaviorSubject('none');
         }
         OptionsSubDropdownComponent.prototype.mouseenter = function () {
             this.mouseInside$.next(true);
@@ -4642,8 +4643,20 @@
                 .subscribe(function (show) {
                 _this.hidden = !show;
                 _this.changeDetection.markForCheck();
+                if (show) {
+                    _this.updateMaxHeight(_this.trigger.elementRef);
+                }
             });
         };
+        OptionsSubDropdownComponent.prototype.updateMaxHeight = function (elementRef) {
+            var marginBottom = 8;
+            var optionTopPosition = elementRef.nativeElement.getBoundingClientRect().top;
+            var screenHeight = window.innerHeight;
+            var maxHeight = screenHeight - optionTopPosition - marginBottom + "px";
+            if (this.maxHeight$.getValue() !== maxHeight) {
+                this.maxHeight$.next(maxHeight);
+            }
+        };
         OptionsSubDropdownComponent.prototype.showByKeyboard = function () {
             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) {
                 option.isSuboption = true;
@@ -4669,13 +4682,13 @@
         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: "<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"] }] });
+    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 #spacingContainer class=\"spacingContainer\" [class.left]=\"align === 'left'\">\n  <ul\n    #subDropdown\n    class=\"sub-dropdown\"\n    lxAutoclose\n    [class.showScrollbar]=\"(maxHeight$ | async) !== 'none'\"\n    [style.max-height]=\"(maxHeight$ | async) ?? 'none'\"\n    (autoclose)=\"closeDropdown()\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</div>\n", styles: [":host{display:block}: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{position:relative;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::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}.sub-dropdown::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}.sub-dropdown::-webkit-scrollbar-track-piece{background-color:transparent}.sub-dropdown.showScrollbar{overflow-y:auto}"], directives: [{ type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], pipes: { "async": i2__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: OptionsSubDropdownComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'lx-options-sub-dropdown',
                         templateUrl: 'options-sub-dropdown.component.html',
-                        styleUrls: ['options-sub-dropdown.component.styl']
+                        styleUrls: ['options-sub-dropdown.component.scss']
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { trigger: [{
                     type: i0.Input
@@ -6233,7 +6246,7 @@
                 });
             }
             else if (this.size === 'dialog-large') {
-                var positionStrategy = this.overlay.position().global().top('44px').centerHorizontally();
+                var positionStrategy = this.overlay.position().global().top('4vh').centerHorizontally();
                 this.overlayRef = this.overlay.create({
                     panelClass: this.size,
                     positionStrategy: positionStrategy,
@@ -6244,7 +6257,7 @@
             }
             else {
                 // size 'dialog'
-                var positionStrategy = this.overlay.position().global().top('88px').centerHorizontally();
+                var positionStrategy = this.overlay.position().global().top('8vh').centerHorizontally();
                 this.overlayRef = this.overlay.create({
                     panelClass: this.size,
                     minWidth: '600px',