${this.enableSearch && !this.opensToTop
? html`
`
: null}
- ${this.options.map((option) => {
+ ${this.filteredOptions.map((option, index) => {
+ const isHighlighted = this.highlightedIndex === index;
return html`
{
this.updateSelection(option);
}}
@@ -194,7 +211,7 @@ export class DeesInputDropdown extends DeesElement {
${this.enableSearch && this.opensToTop
? html`
-
+
`
: null}
@@ -217,6 +234,7 @@ export class DeesInputDropdown extends DeesElement {
firstUpdated() {
this.selectedOption = this.selectedOption || this.options[0] || null;
+ this.filteredOptions = this.options; // Initialize filteredOptions
}
public async updateSelection(selectedOption) {
@@ -237,6 +255,7 @@ export class DeesInputDropdown extends DeesElement {
private isElevated: boolean = false;
private windowOverlay: DeesWindowLayer;
public async toggleSelectionBox() {
+ this.isOpened = !this.isOpened;
const domtoolsInstance = await this.domtoolsPromise;
const selectedBox: HTMLElement = this.shadowRoot.querySelector('.selectedBox');
const selectionBox: HTMLElement = this.shadowRoot.querySelector('.selectionBox');
@@ -298,4 +317,32 @@ export class DeesInputDropdown extends DeesElement {
}
}
}
+
+ private handleSearch(event: Event): void {
+ const searchTerm = (event.target as HTMLInputElement).value.toLowerCase();
+ this.filteredOptions = this.options.filter((option) =>
+ option.option.toLowerCase().includes(searchTerm)
+ );
+ this.highlightedIndex = 0; // Reset highlighted index
+ }
+
+ private handleKeyDown(event: KeyboardEvent): void {
+ if (!this.isOpened) {
+ console.log('discarded key event. Check why this function is called.');
+ return;
+ }
+ const key = event.key;
+ const maxIndex = this.filteredOptions.length - 1;
+
+ if (key === 'ArrowDown') {
+ this.highlightedIndex = this.highlightedIndex + 1 > maxIndex ? 0 : this.highlightedIndex + 1;
+ event.preventDefault();
+ } else if (key === 'ArrowUp') {
+ this.highlightedIndex = this.highlightedIndex - 1 < 0 ? maxIndex : this.highlightedIndex - 1;
+ event.preventDefault();
+ } else if (key === 'Enter') {
+ this.updateSelection(this.filteredOptions[this.highlightedIndex]);
+ event.preventDefault();
+ }
+ }
}
diff --git a/ts_web/elements/dees-input-fileupload.ts b/ts_web/elements/dees-input-fileupload.ts
index b65f7a8..48790b6 100644
--- a/ts_web/elements/dees-input-fileupload.ts
+++ b/ts_web/elements/dees-input-fileupload.ts
@@ -88,7 +88,6 @@ export class DeesInputFileupload extends DeesElement {
.uploadButton {
position: relative;
- cursor: pointer;
padding: 8px;
max-width: 600px;
background: ${cssManager.bdTheme('#fafafa', '#333333')};
diff --git a/ts_web/elements/dees-input-quantityselector.ts b/ts_web/elements/dees-input-quantityselector.ts
index 96e46af..0801552 100644
--- a/ts_web/elements/dees-input-quantityselector.ts
+++ b/ts_web/elements/dees-input-quantityselector.ts
@@ -85,7 +85,6 @@ export class DeesInputQuantitySelector extends DeesElement {
}
.selector:hover {
- cursor: pointer;
}
.quantity {
diff --git a/ts_web/elements/dees-input-radio.ts b/ts_web/elements/dees-input-radio.ts
index 2c46fc9..c52b7fc 100644
--- a/ts_web/elements/dees-input-radio.ts
+++ b/ts_web/elements/dees-input-radio.ts
@@ -51,7 +51,6 @@ export class DeesInputRadio extends DeesElement {
display: block;
position: relative;
margin: 20px 0px;
- cursor: pointer;
}
.maincontainer {
diff --git a/ts_web/elements/dees-input-text.ts b/ts_web/elements/dees-input-text.ts
index e416e32..da124b6 100644
--- a/ts_web/elements/dees-input-text.ts
+++ b/ts_web/elements/dees-input-text.ts
@@ -147,7 +147,6 @@ export class DeesInputText extends DeesElement {
}
.showPassword:hover {
- cursor: pointer;
background: ${cssManager.bdTheme('#00000010', '#ffffff10')};
}
diff --git a/ts_web/elements/dees-mobilenavigation.ts b/ts_web/elements/dees-mobilenavigation.ts
index 22cfd69..809d5de 100644
--- a/ts_web/elements/dees-mobilenavigation.ts
+++ b/ts_web/elements/dees-mobilenavigation.ts
@@ -105,7 +105,6 @@ export class DeesMobilenavigation extends DeesElement {
padding: 8px;
margin-left: -8px;
margin-right: -8px;
- cursor: pointer;
border-radius: 3px;
}
.menuItem:hover {
diff --git a/ts_web/elements/dees-modal.ts b/ts_web/elements/dees-modal.ts
index eef8980..d71d98a 100644
--- a/ts_web/elements/dees-modal.ts
+++ b/ts_web/elements/dees-modal.ts
@@ -133,7 +133,6 @@ export class DeesModal extends DeesElement {
text-align: center;
font-size: 14px;
border-right: 1px solid #222;
- cursor: pointer;
}
.modal .bottomButtons .bottomButton:hover {
background: #222;
diff --git a/ts_web/elements/dees-speechbubble.ts b/ts_web/elements/dees-speechbubble.ts
index e5ae0c5..47269d2 100644
--- a/ts_web/elements/dees-speechbubble.ts
+++ b/ts_web/elements/dees-speechbubble.ts
@@ -52,7 +52,6 @@ export class DeesSpeechbubble extends DeesElement {
display: block;
box-sizing: border-box;
color: ${cssManager.bdTheme('#333', '#fff')};
- cursor: pointer;
user-select: none;
}
:host([hidden]) {
diff --git a/ts_web/elements/dees-stepper.ts b/ts_web/elements/dees-stepper.ts
index 75bc65a..c4c7c17 100644
--- a/ts_web/elements/dees-stepper.ts
+++ b/ts_web/elements/dees-stepper.ts
@@ -144,7 +144,6 @@ export class DeesStepper extends DeesElement {
font-size: 12px;
border-bottom-right-radius: 3px;
background: ${cssManager.bdTheme('#00000008', '#ffffff08')};
- cursor: pointer;
}
.step .goBack:hover {
diff --git a/ts_web/elements/dees-table.ts b/ts_web/elements/dees-table.ts
index 90713f8..54ea970 100644
--- a/ts_web/elements/dees-table.ts
+++ b/ts_web/elements/dees-table.ts
@@ -202,7 +202,6 @@ export class DeesTable
extends DeesElement {
.headerActions {
margin-left: auto;
- cursor: pointer;
}
.headerAction {
display: flex;
@@ -236,7 +235,7 @@ export class DeesTable extends DeesElement {
text-align: left;
}
tr:hover {
- cursor: pointer;
+
}
tr:hover td {
background: ${cssManager.bdTheme('#22222210', '#ffffff10')};
@@ -343,7 +342,6 @@ export class DeesTable extends DeesElement {
}
.footerActions .footerAction {
- cursor: pointer;
padding: 8px 16px;
display: flex;
}
diff --git a/ts_web/elements/dees-windowcontrols.ts b/ts_web/elements/dees-windowcontrols.ts
index d134799..8b575e0 100644
--- a/ts_web/elements/dees-windowcontrols.ts
+++ b/ts_web/elements/dees-windowcontrols.ts
@@ -19,18 +19,37 @@ declare global {
@customElement('dees-windowcontrols')
export class DeesWindowControls extends DeesElement {
+ // STATIC
public static demo = () => html``;
+ // Instance
+ @property({
+ reflect: true,
+ })
+ public type: 'mac' | 'linux' | 'windows' = 'mac';
+
+ @property({
+ reflect: true,
+ })
+ public position: 'left' | 'right' = 'left';
+
public static styles = [
cssManager.defaultStyles,
css`
+ :host {
+ position: relative;
+ display: block;
+ box-sizing: border-box;
+ padding-left: 16px;
+ padding-right: 16px;
+ }
+
.windowControls {
- position: absolute;
- top: 6px;
- left: 20px;
- width: 200px;
- display: grid;
- grid-template-columns: 24px 24px 24px;
+ height: 100%;
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
.windowControls div {
@@ -40,16 +59,17 @@ export class DeesWindowControls extends DeesElement {
border-radius: 50%;
margin: 0px;
padding: 0px;
- cursor: pointer;
background: #222222;
}
.windowControls div.close {
background: #ff5f57;
+ margin-right: 12px;
}
.windowControls div.toDock {
background: #ffbd2e;
+ margin-right: 12px;
}
.windowControls div.minMax {
@@ -64,11 +84,16 @@ export class DeesWindowControls extends DeesElement {
public render(): TemplateResult {
return html`
-
+ ${(this.type === 'mac' && this.position === 'left') ||
+ ((this.type === 'linux' || this.type === 'windows') && this.position === 'right')
+ ? html`
+
+ `
+ : html``}
`;
}
}