-
{this.openSelectionBox();}}">
- ${this.selectedOption?.option}
-
+ ${this.label ? html`
${this.label}
` : html``}
- ${this.options.map(option => {
+ ${this.enableSearch && !this.opensToTop
+ ? html`
+
+
+
+ `
+ : null}
+ ${this.options.map((option) => {
return html`
-
{this.updateSelection(option);}}>${option.option}
- `
+
{
+ this.updateSelection(option);
+ }}
+ >
+ ${option.option}
+
+ `;
})}
+ ${this.enableSearch && this.opensToTop
+ ? html`
+
+
+
+ `
+ : null}
+
+
{
+ if (!this.isElevated) {
+ this.toggleSelectionBox();
+ } else {
+ this.updateSelection(this.selectedOption);
+ }
+ }}"
+ >
+ ${this.selectedOption?.option}
`;
}
firstUpdated() {
- this.selectedOption = this.options[0] || null;
+ this.selectedOption = this.selectedOption || this.options[0] || null;
}
public async updateSelection(selectedOption) {
this.selectedOption = selectedOption;
- this.dispatchEvent(new CustomEvent('selectedOption', {
- detail: selectedOption,
- bubbles: true
- }));
- this.openSelectionBox();
+ this.dispatchEvent(
+ new CustomEvent('selectedOption', {
+ detail: selectedOption,
+ bubbles: true,
+ })
+ );
+ if (this.isElevated) {
+ this.toggleSelectionBox();
+ }
this.changeSubject.next(this);
}
- public openSelectionBox() {
- this.shadowRoot.querySelector('.selectedBox').classList.toggle('show');
- this.shadowRoot.querySelector('.selectionBox').classList.toggle('show');
- }
-
- public closeSelectionBox() {
-
+ private isElevated: boolean = false;
+ private windowOverlay: DeesWindowLayer;
+ public async toggleSelectionBox() {
+ const domtoolsInstance = await this.domtoolsPromise;
+ const selectedBox: HTMLElement = this.shadowRoot.querySelector('.selectedBox');
+ const selectionBox: HTMLElement = this.shadowRoot.querySelector('.selectionBox');
+ if (!this.isElevated) {
+ this.windowOverlay = await DeesWindowLayer.createAndShow({
+ blur: false,
+ });
+ const elevatedDropdown = new DeesInputDropdown();
+ elevatedDropdown.isElevated = true;
+ elevatedDropdown.label = this.label;
+ elevatedDropdown.enableSearch = this.enableSearch;
+ elevatedDropdown.required = this.required;
+ elevatedDropdown.disabled = this.disabled;
+ elevatedDropdown.style.position = 'fixed';
+ elevatedDropdown.style.top = this.getBoundingClientRect().top + 'px';
+ elevatedDropdown.style.left = this.getBoundingClientRect().left + 'px';
+ elevatedDropdown.style.width = this.clientWidth + 'px';
+ elevatedDropdown.options = this.options;
+ elevatedDropdown.selectedOption = this.selectedOption;
+ console.log(elevatedDropdown.selectedOption);
+ this.windowOverlay.appendChild(elevatedDropdown);
+ await domtoolsInstance.convenience.smartdelay.delayFor(0);
+ elevatedDropdown.toggleSelectionBox();
+ const destroyOverlay = async () => {
+ (elevatedDropdown.shadowRoot.querySelector('.selectionBox') as HTMLElement).style.opacity =
+ '0';
+ elevatedDropdown.removeEventListener('selectedOption', handleSelection);
+ this.windowOverlay.removeEventListener('clicked', destroyOverlay);
+ this.windowOverlay.destroy();
+ };
+ const handleSelection = async (event) => {
+ await this.updateSelection(elevatedDropdown.selectedOption);
+ destroyOverlay();
+ };
+ elevatedDropdown.addEventListener('selectedOption', handleSelection);
+ this.windowOverlay.addEventListener('clicked', destroyOverlay);
+ } else {
+ if (!selectionBox.classList.contains('show')) {
+ selectionBox.style.width = selectedBox.clientWidth + 'px';
+ selectionBox.classList.add('show');
+ const spaceData = selectedBox.getBoundingClientRect();
+ if (300 > window.innerHeight - spaceData.bottom) {
+ this.opensToTop = true;
+ selectedBox.classList.add('accentTop');
+ selectionBox.style.bottom = selectedBox.clientHeight + 2 + 'px';
+ } else {
+ selectedBox.classList.add('accentBottom');
+ this.opensToTop = false;
+ const labelOffset = this.label ? 24 : 0;
+ selectionBox.style.top = selectedBox.clientHeight + labelOffset + 'px';
+ }
+ await domtoolsInstance.convenience.smartdelay.delayFor(0);
+ const searchInput = selectionBox.querySelector('input');
+ searchInput.focus();
+ } else {
+ selectedBox.style.pointerEvents = 'none';
+ selectionBox.classList.remove('show');
+ selectedBox.style.opacity = '0';
+ }
+ }
}
}
diff --git a/ts_web/elements/dees-input-text.ts b/ts_web/elements/dees-input-text.ts
index b031fa3..e416e32 100644
--- a/ts_web/elements/dees-input-text.ts
+++ b/ts_web/elements/dees-input-text.ts
@@ -143,6 +143,7 @@ export class DeesInputText extends DeesElement {
border-radius: 7px;
padding: 4px 0px;
width: 40px;
+ z-index: 3;
}
.showPassword:hover {
@@ -169,7 +170,7 @@ export class DeesInputText extends DeesElement {
return html`