@leanix/components 0.2.213 → 0.2.214
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/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
|