1.0.236

package.json

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

ts_web/00_commitinfo_data.ts

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

ts_web/elements/dees-dataview-codebox.ts

@@ -69,41 +69,7 @@ export class DeesDataviewCodebox extends DeesElement {
           line-height: 24px;
         }
 
-        .appbar .macControls {
+        
-          position: absolute;
-          top: 6px;
-          left: 20px;
-          width: 200px;
-          display: grid;
-          grid-template-columns: 24px 24px 24px;
-        }
-
-        .appbar .macControls div {
-          width: 12px;
-          height: 12px;
-          display: inline-block;
-          border-radius: 50%;
-          margin: 0px;
-          padding: 0px;
-          cursor: pointer;
-          background: #222222;
-        }
-
-        .appbar .macControls div.close {
-          background: #ff5f57;
-        }
-
-        .appbar .macControls div.toDock {
-          background: #ffbd2e;
-        }
-
-        .appbar .macControls div.minMax {
-          background: #27c93f;
-        }
-
-        .appbar .macControls div:hover {
-          background: #333333;
-        }
 
         .appbar .fileName {
           text-align: center;
@@ -209,11 +175,7 @@ export class DeesDataviewCodebox extends DeesElement {
         }}"
       >
         <div class="appbar">
-          <div class="macControls">
+          <dees-windowcontrols></dees-windowcontrols>
-            <div class="close"></div>
-            <div class="toDock"></div>
-            <div class="minMax"></div>
-          </div>
           <div class="fileName">index.ts</div>
         </div>
         <div class="codegrid">

ts_web/elements/dees-form.demo.ts

@@ -20,9 +20,22 @@ export const demoFunc = () => html`
         form.setStatus('success', 'authenticated!');
       }}
     >
+      <dees-input-dropdown
+        .label=${'title'}
+        .options=${[
+          { option: 'option 1', key: 'option1' },
+          { option: 'option 2', key: 'option2' },
+          { option: 'option 3', key: 'option3' },
+        ]}
+      ></dees-input-dropdown>
       <dees-input-text .required="${true}" key="hello1" label="a text"></dees-input-text>
       <dees-input-text .required="${true}" key="hello2" label="also a text"></dees-input-text>
-      <dees-input-text .required="${true}" key="hello3" label="a password" isPasswordBool></dees-input-text>
+      <dees-input-text
+        .required="${true}"
+        key="hello3"
+        label="a password"
+        isPasswordBool
+      ></dees-input-text>
       <dees-input-checkbox
         .required="${true}"
         key="hello3"

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

@@ -8,4 +8,20 @@ export const demoFunc = () => html`
     {option: 'option 3', key: 'option3'}
   ]}
 ></dees-input-dropdown>
+<dees-input-dropdown
+  .enableSearch=${false}
+  .options=${[
+    {option: 'option 1', key: 'option1'},
+    {option: 'option 2', key: 'option2'},
+    {option: 'option 3', key: 'option3'}
+  ]}
+></dees-input-dropdown>
+<div style="height: 300px"></div>
+<dees-input-dropdown
+  .options=${[
+    {option: 'option 1', key: 'option1'},
+    {option: 'option 2', key: 'option2'},
+    {option: 'option 3', key: 'option3'}
+  ]}
+></dees-input-dropdown>
 `

ts_web/elements/dees-input-dropdown.ts

@@ -1,6 +1,17 @@
-import { customElement, DeesElement, type TemplateResult, property, html, css, cssManager, type CSSResult, } from '@design.estate/dees-element';
+import {
+  customElement,
+  DeesElement,
+  type TemplateResult,
+  property,
+  state,
+  html,
+  css,
+  cssManager,
+  type CSSResult,
+} from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 import { demoFunc } from './dees-input-dropdown.demo.js';
+import { DeesWindowLayer } from './dees-windowlayer.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -10,7 +21,7 @@ declare global {
 
 @customElement('dees-input-dropdown')
 export class DeesInputDropdown extends DeesElement {
-  public static demo = demoFunc
+  public static demo = demoFunc;
 
   // INSTANCE
   public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
@@ -25,144 +36,266 @@ export class DeesInputDropdown extends DeesElement {
   public key: string;
 
   @property()
-  public options: {option: string, key: string, payload?: any}[] = [];
+  public options: { option: string; key: string; payload?: any }[] = [];
 
   @property()
-  public selectedOption: {option: string, key: string, payload?: any} = {
+  public selectedOption: { option: string; key: string; payload?: any } = null;
-    key: null,
-    option: null,
-    payload: null
-  };
 
   @property({
-    type: Boolean
+    type: Boolean,
   })
   public required: boolean = false;
 
   @property({
-    type: Boolean
+    type: Boolean,
+  })
+  public enableSearch: boolean = true;
+
+  @property({
+    type: Boolean,
   })
   public disabled: boolean = false;
 
+  @state()
+  public opensToTop: boolean = false;
+
   public static styles = [
     cssManager.defaultStyles,
     css`
       * {
-          box-sizing: border-box;
+        box-sizing: border-box;
-        }
+      }
 
-        :host {
+      :host {
-          position: relative;
+        font-family: Roboto;
-          display: block;
+        position: relative;
-          height: 40px;
+        display: block;
-          color: ${cssManager.bdTheme('#222', '#fff')};
+        color: ${cssManager.bdTheme('#222', '#fff')};
-        }
+        margin-bottom: 24px;
+      }
 
-        .maincontainer {
+      .maincontainer {
-          display: block;
+        display: block;
-        }
+      }
 
-        .label {
+      .label {
-          font-size: 14px;
+        font-size: 14px;
-          margin-bottom: 15px;
+        margin-bottom: 4px;
-        }
+      }
 
-        .selectedBox {
+      .selectedBox {
-          cursor: pointer;
+        user-select: none;
-          position: relative;
+        cursor: pointer;
-          max-width: 420px;
+        position: relative;
-          height: 40px;
+        max-width: 420px;
-          line-height: 40px;
+        height: 40px;
-          padding: 0px 8px;
+        line-height: 40px;
-          z-index: 0px;
+        padding: 0px 8px;
-          background: ${cssManager.bdTheme('#ffffff', '#333333')};
+        background: ${cssManager.bdTheme('#fafafa', '#222')};
-          box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
+        box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
-          border-radius: 3px;
+        border-radius: 3px;
-          border-top: 1px solid #CCCCCC00;
+        border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')};
-          border-bottom: 1px solid #66666600;
+        border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #333')};
-        }
+        transition: all 0.2s ease;
+      }
 
-        .selectedBox.show {
+      .accentTop {
-          border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#666666')};
+        border-top: 1px solid #e4002b;
-          border-bottom: 1px solid ${cssManager.bdTheme('#fafafa', '#222222')};
+      }
-        }
 
-        .selectionBox {
+      .accentBottom {
-          will-change:transform;
+        border-bottom: 1px solid #e4002b;
-          pointer-events: none;
+      }
-          cursor: pointer;
-          transition: all 0.2s ease;
-          opacity: 0;
-          position: absolute;
-          background: ${cssManager.bdTheme('#ffffff', '#222222')};
-          max-width: 420px;
-          box-shadow: 0px 0px 5px  rgba(0,0,0,0.2);
-          min-height: 40px;
-          z-index: 100;
-          border-radius: 3px;
-          padding: 4px;
-          transform: scale(0.99,0.99);
-        }
 
-        .selectionBox.show {
+      .selectionBox {
-          pointer-events: all;
+        will-change: transform;
-          opacity: 1;
+        pointer-events: none;
-          transform: scale(1,1);
+        cursor: pointer;
-        }
+        transition: all 0.2s ease;
+        opacity: 0;
+        background: ${cssManager.bdTheme('#ffffff', '#222222')};
+        max-width: 420px;
+        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);
+        position: absolute;
+      }
 
-        .option {
+      .selectionBox.show {
-          transition: all 0.1s;
+        pointer-events: all;
-          line-height: 40px;
+        opacity: 1;
-          padding: 0px 4px;
+        transform: scale(1, 1);
-          border-radius: 3px;
+      }
-        }
 
-        .option:hover {
+      .option {
-          color: #fff;
+        transition: all 0.1s;
-          padding-left: 8px;
+        line-height: 40px;
-          background: #0277bd;
+        padding: 0px 4px;
-        }
+        border-radius: 3px;
-    `
+      }
-  ]
+
+      .option:hover {
+        color: #fff;
+        padding-left: 8px;
+        background: #0277bd;
+      }
+
+      .search {
+        padding: 8px;
+      }
+      .search input {
+        display: block;
+        width: 80%;
+        background: none;
+        border: none;
+        height: 24px;
+        color: inherit;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 600;
+        background: ${cssManager.bdTheme('#00000010', '#ffffff08')};
+        border-radius: 16px;
+        margin: auto;
+      }
+
+      .search input:focus {
+        border: none;
+        outline: none;
+      }
+    `,
+  ];
 
   public render(): TemplateResult {
     return html`
       <div class="maincontainer">
-        <div class="selectedBox show" @click="${event => {this.openSelectionBox();}}">
+        ${this.label ? html`<div class="label">${this.label}</div>` : html``}
-          ${this.selectedOption?.option}
-        </div>
         <div class="selectionBox">
-          ${this.options.map(option => {
+          ${this.enableSearch && !this.opensToTop
+            ? html`
+                <div class="search">
+                  <input type="text" placeholder="Search" />
+                </div>
+              `
+            : null}
+          ${this.options.map((option) => {
             return html`
-              <div class="option" @click=${() => {this.updateSelection(option);}}>${option.option}</div>
+              <div
-            `
+                class="option"
+                @click=${() => {
+                  this.updateSelection(option);
+                }}
+              >
+                ${option.option}
+              </div>
+            `;
           })}
+          ${this.enableSearch && this.opensToTop
+            ? html`
+                <div class="search">
+                  <input type="text" placeholder="Search" />
+                </div>
+              `
+            : null}
+        </div>
+        <div
+          class="selectedBox"
+          @click="${(event) => {
+            if (!this.isElevated) {
+              this.toggleSelectionBox();
+            } else {
+              this.updateSelection(this.selectedOption);
+            }
+          }}"
+        >
+          ${this.selectedOption?.option}
         </div>
       </div>
     `;
   }
 
   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', {
+    this.dispatchEvent(
-      detail: selectedOption,
+      new CustomEvent('selectedOption', {
-      bubbles: true
+        detail: selectedOption,
-    }));
+        bubbles: true,
-    this.openSelectionBox();
+      })
+    );
+    if (this.isElevated) {
+      this.toggleSelectionBox();
+    }
     this.changeSubject.next(this);
   }
 
-  public openSelectionBox() {
+  private isElevated: boolean = false;
-    this.shadowRoot.querySelector('.selectedBox').classList.toggle('show');
+  private windowOverlay: DeesWindowLayer;
-    this.shadowRoot.querySelector('.selectionBox').classList.toggle('show');
+  public async toggleSelectionBox() {
-  }
+    const domtoolsInstance = await this.domtoolsPromise;
-
+    const selectedBox: HTMLElement = this.shadowRoot.querySelector('.selectedBox');
-  public closeSelectionBox() {
+    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';
+      }
+    }
   }
 }

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`
       <style>
         input {
-          font-family: ${this.isPasswordBool ? 'monospace' : 'Inter'};
+          font-family: ${this.isPasswordBool ? 'monospace' : 'Roboto'};
           letter-spacing: ${this.isPasswordBool ? '1px' : 'normal'};
           color: ${this.goBright ? '#333' : '#ccc'};
         }

ts_web/elements/dees-windowcontrols.ts

@@ -0,0 +1,74 @@
+import {
+  customElement,
+  DeesElement,
+  domtools,
+  type TemplateResult,
+  html,
+  property,
+  type CSSResult,
+  state,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-windowcontrols': DeesWindowControls;
+  }
+}
+
+@customElement('dees-windowcontrols')
+export class DeesWindowControls extends DeesElement {
+  public static demo = () => html`<dees-windowcontrols></dees-windowcontrols>`;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      .windowControls {
+        position: absolute;
+        top: 6px;
+        left: 20px;
+        width: 200px;
+        display: grid;
+        grid-template-columns: 24px 24px 24px;
+      }
+
+      .windowControls div {
+        width: 12px;
+        height: 12px;
+        display: inline-block;
+        border-radius: 50%;
+        margin: 0px;
+        padding: 0px;
+        cursor: pointer;
+        background: #222222;
+      }
+
+      .windowControls div.close {
+        background: #ff5f57;
+      }
+
+      .windowControls div.toDock {
+        background: #ffbd2e;
+      }
+
+      .windowControls div.minMax {
+        background: #27c93f;
+      }
+
+      .windowControls div:hover {
+        background: #333333;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="windowControls">
+        <div class="close"></div>
+        <div class="toDock"></div>
+        <div class="minMax"></div>
+      </div>
+    `;
+  }
+}

ts_web/elements/dees-windowlayer.ts

@@ -1,6 +1,4 @@
-import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, state, } from '@design.estate/dees-element';
+import { customElement, DeesElement, domtools, type TemplateResult, html, property, type CSSResult, state, } from '@design.estate/dees-element';
-
-import * as domtools from '@design.estate/dees-domtools';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -67,16 +65,19 @@ export class DeesWindowLayer extends DeesElement {
           z-index: 200;
         }
         .slotContent {
+          position: fixed;
           height: 100vh;
           width: 100vw;
           display: flex;
           justify-content: center;
           align-items: center;
+          z-index: 201;
         }
         
         .visible {
           background: rgba(0, 0, 0, 0.2);
           backdrop-filter: brightness(0.9) ${this.options.blur ? 'blur(2px)' : ''};
+          pointer-events: all;
         }
       </style>
       <div class="windowOverlay ${this.visible ? 'visible' : null}">

ts_web/elements/index.ts

@@ -27,4 +27,5 @@ export * from './dees-stepper.js';
 export * from './dees-table.js';
 export * from './dees-toast.js';
 export * from './dees-updater.js';
+export * from './dees-windowcontrols.js';
 export * from './dees-windowlayer.js';