@design.estate/dees-catalog 1.0.236 → 1.0.238

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.236",
+  "version": "1.0.238",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.236',
+  version: '1.0.238',
   description: 'website for lossless.com'
 }

package/ts_web/elements/dees-button.ts

@@ -93,7 +93,6 @@ export class DeesButton extends DeesElement {
       }
 
       .button:hover {
-        cursor: pointer;
         background: #039be5;
         color: #ffffff;
         border: 1px solid #039be5;

package/ts_web/elements/dees-chips.ts

@@ -81,7 +81,6 @@ export class DeesChips extends DeesElement {
 
       .chip:hover {
         background: #666666;
-        cursor: pointer;
       }
 
       .chip.selected {

package/ts_web/elements/dees-contextmenu.ts

@@ -130,12 +130,10 @@ export class DeesContextmenu extends DeesElement {
       }
 
       .mainbox .menuitem:hover {
-        cursor: pointer;
         background: ${cssManager.bdTheme('#00000010', '#ffffff10')};
       }
 
       .mainbox .menuitem:active {
-        cursor: pointer;
         background: #ffffff05;
       }
     `,

package/ts_web/elements/dees-dataview-codebox.ts

@@ -61,17 +61,22 @@ export class DeesDataviewCodebox extends DeesElement {
         }
 
         .appbar {
+          position: relative;
           color: ${cssManager.bdTheme('#333', '#ccc')};
           background: ${cssManager.bdTheme('#ffffff', '#161616')};
           border-bottom: 1px solid ${cssManager.bdTheme('#eeeeeb', '#222222')};
           height: 24px;
+          display: flex;
           font-size: 12px;
           line-height: 24px;
+          justify-content: center;
+          align-items: center;
         }
 
-        
-
         .appbar .fileName {
+          line-height: inherit;
+          position: relative;
+          flex: 1;
           text-align: center;
         }
 
@@ -175,8 +180,9 @@ export class DeesDataviewCodebox extends DeesElement {
         }}"
       >
         <div class="appbar">
-          <dees-windowcontrols></dees-windowcontrols>
+          <dees-windowcontrols type="mac" position="left"></dees-windowcontrols>
           <div class="fileName">index.ts</div>
+          <dees-windowcontrols type="mac" position="right"></dees-windowcontrols>
         </div>
         <div class="codegrid">
           <div class="lineNumbers">

package/ts_web/elements/dees-dataview-statusobject.ts

@@ -61,7 +61,6 @@ export class DeesDataviewStatusobject extends DeesElement {
       }
 
       .copyMain {
-        cursor: pointer;
         font-size: 10px;
         font-weight: 600;
         text-transform: uppercase;

package/ts_web/elements/dees-input-checkbox.ts

@@ -62,7 +62,6 @@ export class DeesInputCheckbox extends DeesElement {
           display: block;
           position: relative;
           margin: 20px 0px;
-          cursor: pointer;
         }
 
         .maincontainer {

package/ts_web/elements/dees-input-dropdown.ts

@@ -59,6 +59,15 @@ export class DeesInputDropdown extends DeesElement {
   @state()
   public opensToTop: boolean = false;
 
+  @state()
+  private filteredOptions: { option: string; key: string; payload?: any }[] = [];
+
+  @state()
+  private highlightedIndex: number = 0;
+
+  @state()
+  public isOpened = false;
+
   public static styles = [
     cssManager.defaultStyles,
     css`
@@ -85,7 +94,6 @@ export class DeesInputDropdown extends DeesElement {
 
       .selectedBox {
         user-select: none;
-        cursor: pointer;
         position: relative;
         max-width: 420px;
         height: 40px;
@@ -99,18 +107,17 @@ export class DeesInputDropdown extends DeesElement {
         transition: all 0.2s ease;
       }
 
-      .accentTop {
-        border-top: 1px solid #e4002b;
+      .accentBottom {
+        background: #ffffff10;
       }
 
-      .accentBottom {
-        border-bottom: 1px solid #e4002b;
+      .accentTop {
+        background: #ffffff10;
       }
 
       .selectionBox {
         will-change: transform;
         pointer-events: none;
-        cursor: pointer;
         transition: all 0.2s ease;
         opacity: 0;
         background: ${cssManager.bdTheme('#ffffff', '#222222')};
@@ -118,22 +125,31 @@ export class DeesInputDropdown extends DeesElement {
         box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
         min-height: 40px;
         border-radius: 3px;
-        padding: 4px;
-        transform: scale(0.99, 0.99);
+        padding: 4px 8px;
+        transform: scale(0.98, 0.98);
         position: absolute;
+        user-select: none;
       }
 
       .selectionBox.show {
         pointer-events: all;
         opacity: 1;
         transform: scale(1, 1);
+        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
       }
 
       .option {
         transition: all 0.1s;
-        line-height: 40px;
+        line-height: 32px;
         padding: 0px 4px;
         border-radius: 3px;
+        margin: 4px 0px;
+      }
+
+      .option.highlighted {
+        border-left: 2px solid #0277bd;
+        padding-left: 6px;
+        background: #ffffff20;
       }
 
       .option:hover {
@@ -169,20 +185,21 @@ export class DeesInputDropdown extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="maincontainer">
+      <div class="maincontainer" @keydown="${this.isOpened ? this.handleKeyDown : undefined}">
         ${this.label ? html`<div class="label">${this.label}</div>` : html``}
         <div class="selectionBox">
           ${this.enableSearch && !this.opensToTop
             ? html`
                 <div class="search">
-                  <input type="text" placeholder="Search" />
+                  <input type="text" placeholder="Search" @input="${this.handleSearch}" />
                 </div>
               `
             : null}
-          ${this.options.map((option) => {
+          ${this.filteredOptions.map((option, index) => {
+            const isHighlighted = this.highlightedIndex === index;
             return html`
               <div
-                class="option"
+                class="option ${isHighlighted ? 'highlighted' : ''}"
                 @click=${() => {
                   this.updateSelection(option);
                 }}
@@ -194,7 +211,7 @@ export class DeesInputDropdown extends DeesElement {
           ${this.enableSearch && this.opensToTop
             ? html`
                 <div class="search">
-                  <input type="text" placeholder="Search" />
+                  <input type="text" placeholder="Search" @input="${this.handleSearch}" />
                 </div>
               `
             : 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();
+    }
+  }
 }

package/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')};

package/ts_web/elements/dees-input-quantityselector.ts

@@ -85,7 +85,6 @@ export class DeesInputQuantitySelector extends DeesElement {
         }
 
         .selector:hover {
-          cursor: pointer;
         }
 
         .quantity {

package/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 {

package/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')};
       }
 

package/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 {

package/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;

package/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]) {

package/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 {

package/ts_web/elements/dees-table.ts

@@ -202,7 +202,6 @@ export class DeesTable<T> extends DeesElement {
 
       .headerActions {
         margin-left: auto;
-        cursor: pointer;
       }
       .headerAction {
         display: flex;
@@ -236,7 +235,7 @@ export class DeesTable<T> extends DeesElement {
         text-align: left;
       }
       tr:hover {
-        cursor: pointer;
+        
       }
       tr:hover td {
         background: ${cssManager.bdTheme('#22222210', '#ffffff10')};
@@ -343,7 +342,6 @@ export class DeesTable<T> extends DeesElement {
       }
 
       .footerActions .footerAction {
-        cursor: pointer;
         padding: 8px 16px;
         display: flex;
       }

package/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`<dees-windowcontrols></dees-windowcontrols>`;
 
+  // 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`
-      <div class="windowControls">
-        <div class="close"></div>
-        <div class="toDock"></div>
-        <div class="minMax"></div>
-      </div>
+      ${(this.type === 'mac' && this.position === 'left') ||
+      ((this.type === 'linux' || this.type === 'windows') && this.position === 'right')
+        ? html`
+            <div class="windowControls">
+              <div class="close"></div>
+              <div class="toDock"></div>
+              <div class="minMax"></div>
+            </div>
+          `
+        : html``}
     `;
   }
 }