@fluid-topics/ft-select 1.1.43 → 1.1.44
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/build/ft-select.d.ts +0 -1
- package/build/ft-select.js +9 -10
- package/build/ft-select.light.js +74 -78
- package/build/ft-select.min.js +168 -172
- package/build/ft-select.styles.js +0 -4
- package/package.json +7 -7
package/build/ft-select.d.ts
CHANGED
|
@@ -33,7 +33,6 @@ export declare class FtSelect extends FtLitElement implements FtSelectProperties
|
|
|
33
33
|
protected render(): import("lit").TemplateResult<1>;
|
|
34
34
|
private renderOption;
|
|
35
35
|
protected update(props: PropertyValues): void;
|
|
36
|
-
private positionOptionsMenu;
|
|
37
36
|
protected contentAvailableCallback(props: PropertyValues): void;
|
|
38
37
|
private get hasOptionsMenuOpen();
|
|
39
38
|
private get hasOptions();
|
package/build/ft-select.js
CHANGED
|
@@ -14,6 +14,7 @@ import { FtInputLabel } from "@fluid-topics/ft-input-label";
|
|
|
14
14
|
import { FtRipple } from "@fluid-topics/ft-ripple";
|
|
15
15
|
import { FtIcon } from "@fluid-topics/ft-icon";
|
|
16
16
|
import { styles } from "./ft-select.styles";
|
|
17
|
+
import { computeOffsetPosition } from "@fluid-topics/ft-wc-utils/build/floating";
|
|
17
18
|
class FtSelectOption extends FtLitElement {
|
|
18
19
|
constructor() {
|
|
19
20
|
super(...arguments);
|
|
@@ -140,16 +141,6 @@ class FtSelect extends FtLitElement {
|
|
|
140
141
|
if (props.has("selectedOption")) {
|
|
141
142
|
this.optionsDisplayed = false;
|
|
142
143
|
}
|
|
143
|
-
if (props.has("optionsDisplayed")) {
|
|
144
|
-
if (this.fixedMenuPosition && this.hasOptionsMenuOpen) {
|
|
145
|
-
this.positionOptionsMenu();
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
positionOptionsMenu() {
|
|
150
|
-
this.optionsMenu.style.top = this.mainPanel.getBoundingClientRect().top + this.mainPanel.getBoundingClientRect().height + "px";
|
|
151
|
-
this.optionsMenu.style.left = this.mainPanel.getBoundingClientRect().left + "px";
|
|
152
|
-
this.optionsMenu.style.width = this.mainPanel.getBoundingClientRect().width + "px";
|
|
153
144
|
}
|
|
154
145
|
contentAvailableCallback(props) {
|
|
155
146
|
var _a, _b;
|
|
@@ -158,6 +149,14 @@ class FtSelect extends FtLitElement {
|
|
|
158
149
|
(_b = ((_a = this.selectedOptionElement) !== null && _a !== void 0 ? _a : this.firstOption)) === null || _b === void 0 ? void 0 : _b.focus();
|
|
159
150
|
this.focusOptions = false;
|
|
160
151
|
}
|
|
152
|
+
if (props.has("optionsDisplayed") && this.hasOptionsMenuOpen) {
|
|
153
|
+
this.optionsMenu.style.width = this.mainPanel.getBoundingClientRect().width + "px";
|
|
154
|
+
computeOffsetPosition(this.mainPanel, this.optionsMenu, "bottom")
|
|
155
|
+
.then(({ x, y }) => {
|
|
156
|
+
this.optionsMenu.style.left = `${x}px`;
|
|
157
|
+
this.optionsMenu.style.top = `${y}px`;
|
|
158
|
+
});
|
|
159
|
+
}
|
|
161
160
|
}
|
|
162
161
|
get hasOptionsMenuOpen() {
|
|
163
162
|
return !this.disabled && this.optionsDisplayed && this.hasOptions;
|