@leanix/components 0.2.213 → 0.2.214
Sign up to get free protection for your applications and to get access to all the features.
- package/bundles/leanix-components.umd.js +15 -2
- package/bundles/leanix-components.umd.js.map +1 -1
- package/esm2015/lib/forms-ui/components/options-sub-dropdown/options-sub-dropdown.component.js +16 -2
- package/esm2015/lib/forms-ui/components/options-sub-dropdown/options-sub-dropdown.component.js.map +1 -1
- package/fesm2015/leanix-components.js +15 -2
- package/fesm2015/leanix-components.js.map +1 -1
- package/lib/forms-ui/components/options-sub-dropdown/options-sub-dropdown.component.d.ts +3 -1
- package/package.json +1 -1
package/esm2015/lib/forms-ui/components/options-sub-dropdown/options-sub-dropdown.component.js
CHANGED
@@ -5,6 +5,7 @@ import { executeOnNextTick } from '../../../shared/misc-helpers';
|
|
5
5
|
import { OptionComponent } from '../option/option.component';
|
6
6
|
import * as i0 from "@angular/core";
|
7
7
|
import * as i1 from "../../../core-ui/directives/autoclose.directive";
|
8
|
+
import * as i2 from "@angular/common";
|
8
9
|
export class OptionsSubDropdownComponent {
|
9
10
|
constructor(changeDetection) {
|
10
11
|
this.changeDetection = changeDetection;
|
@@ -12,6 +13,7 @@ export class OptionsSubDropdownComponent {
|
|
12
13
|
this.hidden = true;
|
13
14
|
this.mouseInside$ = new BehaviorSubject(false);
|
14
15
|
this.destroyed$ = new Subject();
|
16
|
+
this.maxHeight$ = new BehaviorSubject('none');
|
15
17
|
}
|
16
18
|
mouseenter() {
|
17
19
|
this.mouseInside$.next(true);
|
@@ -32,8 +34,20 @@ export class OptionsSubDropdownComponent {
|
|
32
34
|
.subscribe((show) => {
|
33
35
|
this.hidden = !show;
|
34
36
|
this.changeDetection.markForCheck();
|
37
|
+
if (show) {
|
38
|
+
this.updateMaxHeight(this.trigger.elementRef);
|
39
|
+
}
|
35
40
|
});
|
36
41
|
}
|
42
|
+
updateMaxHeight(elementRef) {
|
43
|
+
const marginBottom = 8;
|
44
|
+
const optionTopPosition = elementRef.nativeElement.getBoundingClientRect().top;
|
45
|
+
const screenHeight = window.innerHeight;
|
46
|
+
const maxHeight = `${screenHeight - optionTopPosition - marginBottom}px`;
|
47
|
+
if (this.maxHeight$.getValue() !== maxHeight) {
|
48
|
+
this.maxHeight$.next(maxHeight);
|
49
|
+
}
|
50
|
+
}
|
37
51
|
showByKeyboard() {
|
38
52
|
const optionChange$ = this.options.changes.pipe(startWith(this.options), map((options) => options.toArray()), map((options) => options.map((option) => {
|
39
53
|
option.isSuboption = true;
|
@@ -54,13 +68,13 @@ export class OptionsSubDropdownComponent {
|
|
54
68
|
}
|
55
69
|
}
|
56
70
|
OptionsSubDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionsSubDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
57
|
-
OptionsSubDropdownComponent.ɵcmp = i0.ɵɵ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, template: "<div class=\"spacingContainer\" [class.left]=\"align === 'left'\">\n <ul
|
71
|
+
OptionsSubDropdownComponent.ɵcmp = i0.ɵɵ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, 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: i1.AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], pipes: { "async": i2.AsyncPipe } });
|
58
72
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionsSubDropdownComponent, decorators: [{
|
59
73
|
type: Component,
|
60
74
|
args: [{
|
61
75
|
selector: 'lx-options-sub-dropdown',
|
62
76
|
templateUrl: 'options-sub-dropdown.component.html',
|
63
|
-
styleUrls: ['options-sub-dropdown.component.
|
77
|
+
styleUrls: ['options-sub-dropdown.component.scss']
|
64
78
|
}]
|
65
79
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { trigger: [{
|
66
80
|
type: Input
|
package/esm2015/lib/forms-ui/components/options-sub-dropdown/options-sub-dropdown.component.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"options-sub-dropdown.component.js","sourceRoot":"","sources":["options-sub-dropdown.component.ts","options-sub-dropdown.component.html"],"names":[],"mappings":"AAAA,OAAO,EAGL,SAAS,EACT,eAAe,
|
1
|
+
{"version":3,"file":"options-sub-dropdown.component.js","sourceRoot":"","sources":["options-sub-dropdown.component.ts","options-sub-dropdown.component.html"],"names":[],"mappings":"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"}
|
@@ -4043,6 +4043,7 @@ class OptionsSubDropdownComponent {
|
|
4043
4043
|
this.hidden = true;
|
4044
4044
|
this.mouseInside$ = new BehaviorSubject(false);
|
4045
4045
|
this.destroyed$ = new Subject();
|
4046
|
+
this.maxHeight$ = new BehaviorSubject('none');
|
4046
4047
|
}
|
4047
4048
|
mouseenter() {
|
4048
4049
|
this.mouseInside$.next(true);
|
@@ -4063,8 +4064,20 @@ class OptionsSubDropdownComponent {
|
|
4063
4064
|
.subscribe((show) => {
|
4064
4065
|
this.hidden = !show;
|
4065
4066
|
this.changeDetection.markForCheck();
|
4067
|
+
if (show) {
|
4068
|
+
this.updateMaxHeight(this.trigger.elementRef);
|
4069
|
+
}
|
4066
4070
|
});
|
4067
4071
|
}
|
4072
|
+
updateMaxHeight(elementRef) {
|
4073
|
+
const marginBottom = 8;
|
4074
|
+
const optionTopPosition = elementRef.nativeElement.getBoundingClientRect().top;
|
4075
|
+
const screenHeight = window.innerHeight;
|
4076
|
+
const maxHeight = `${screenHeight - optionTopPosition - marginBottom}px`;
|
4077
|
+
if (this.maxHeight$.getValue() !== maxHeight) {
|
4078
|
+
this.maxHeight$.next(maxHeight);
|
4079
|
+
}
|
4080
|
+
}
|
4068
4081
|
showByKeyboard() {
|
4069
4082
|
const optionChange$ = this.options.changes.pipe(startWith(this.options), map((options) => options.toArray()), map((options) => options.map((option) => {
|
4070
4083
|
option.isSuboption = true;
|
@@ -4085,13 +4098,13 @@ class OptionsSubDropdownComponent {
|
|
4085
4098
|
}
|
4086
4099
|
}
|
4087
4100
|
OptionsSubDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionsSubDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
4088
|
-
OptionsSubDropdownComponent.ɵcmp = i0.ɵɵ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, template: "<div class=\"spacingContainer\" [class.left]=\"align === 'left'\">\n <ul
|
4101
|
+
OptionsSubDropdownComponent.ɵcmp = i0.ɵɵ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, 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.AsyncPipe } });
|
4089
4102
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionsSubDropdownComponent, decorators: [{
|
4090
4103
|
type: Component,
|
4091
4104
|
args: [{
|
4092
4105
|
selector: 'lx-options-sub-dropdown',
|
4093
4106
|
templateUrl: 'options-sub-dropdown.component.html',
|
4094
|
-
styleUrls: ['options-sub-dropdown.component.
|
4107
|
+
styleUrls: ['options-sub-dropdown.component.scss']
|
4095
4108
|
}]
|
4096
4109
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { trigger: [{
|
4097
4110
|
type: Input
|