@design.estate/dees-catalog 1.0.232 → 1.0.235

package/dist_watch/bundle.js

@@ -69617,6 +69617,7 @@ var DeesWindowLayer = class extends DeesElement {
         .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}">
@@ -70431,7 +70432,7 @@ var DeesInputText = class extends DeesElement {
     return x`
       <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"};
         }
@@ -70565,6 +70566,7 @@ DeesInputText.styles = [
         border-radius: 7px;
         padding: 4px 0px;
         width: 40px;
+        z-index: 3;
       }
 
       .showPassword:hover {
@@ -71624,9 +71626,22 @@ var demoFunc7 = () => x`
   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"
@@ -76096,6 +76111,22 @@ var demoFunc11 = () => x`
   { 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
@@ -76106,51 +76137,132 @@ var DeesInputDropdown = class extends DeesElement {
     this.changeSubject = new plugins.smartrx.rxjs.Subject();
     this.label = "Label";
     this.options = [];
-    this.selectedOption = {
-      key: null,
-      option: null,
-      payload: null
-    };
+    this.selectedOption = null;
     this.required = false;
+    this.enableSearch = true;
     this.disabled = false;
+    this.opensToTop = false;
+    this.isElevated = false;
   }
   render() {
     return x`
       <div class="maincontainer">
-        <div class="selectedBox show" @click="${(event) => {
-      this.openSelectionBox();
-    }}">
-          ${this.selectedOption?.option}
-        </div>
+        ${this.label ? x`<div class="label">${this.label}</div>` : x``}
         <div class="selectionBox">
+          ${this.enableSearch && !this.opensToTop ? x`
+                <div class="search">
+                  <input type="text" placeholder="Search" />
+                </div>
+              ` : null}
           ${this.options.map((option) => {
       return x`
-              <div class="option" @click=${() => {
+              <div
+                class="option"
+                @click=${() => {
         this.updateSelection(option);
-      }}>${option.option}</div>
+      }}
+              >
+                ${option.option}
+              </div>
             `;
     })}
+          ${this.enableSearch && this.opensToTop ? x`
+                <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;
   }
   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);
   }
-  openSelectionBox() {
-    this.shadowRoot.querySelector(".selectedBox").classList.toggle("show");
-    this.shadowRoot.querySelector(".selectionBox").classList.toggle("show");
-  }
-  closeSelectionBox() {
+  async toggleSelectionBox() {
+    const domtoolsInstance = await this.domtoolsPromise;
+    const selectedBox = this.shadowRoot.querySelector(".selectedBox");
+    const selectionBox = 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").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";
+      }
+    }
   }
 };
 DeesInputDropdown.demo = demoFunc11;
@@ -76158,80 +76270,107 @@ DeesInputDropdown.styles = [
   cssManager.defaultStyles,
   i`
       * {
-          box-sizing: border-box;
-        }
+        box-sizing: border-box;
+      }
 
-        :host {
-          position: relative;
-          display: block;
-          height: 40px;
-          color: ${cssManager.bdTheme("#222", "#fff")};
-        }
+      :host {
+        font-family: Roboto;
+        position: relative;
+        display: block;
+        color: ${cssManager.bdTheme("#222", "#fff")};
+        margin-bottom: 24px;
+      }
 
-        .maincontainer {
-          display: block;
-        }
+      .maincontainer {
+        display: block;
+      }
 
-        .label {
-          font-size: 14px;
-          margin-bottom: 15px;
-        }
+      .label {
+        font-size: 14px;
+        margin-bottom: 4px;
+      }
 
-        .selectedBox {
-          cursor: pointer;
-          position: relative;
-          max-width: 420px;
-          height: 40px;
-          line-height: 40px;
-          padding: 0px 8px;
-          z-index: 0px;
-          background: ${cssManager.bdTheme("#ffffff", "#333333")};
-          box-shadow: ${cssManager.bdTheme("0px 1px 4px rgba(0,0,0,0.3)", "none")};
-          border-radius: 3px;
-          border-top: 1px solid #CCCCCC00;
-          border-bottom: 1px solid #66666600;
-        }
+      .selectedBox {
+        user-select: none;
+        cursor: pointer;
+        position: relative;
+        max-width: 420px;
+        height: 40px;
+        line-height: 40px;
+        padding: 0px 8px;
+        background: ${cssManager.bdTheme("#fafafa", "#222")};
+        box-shadow: ${cssManager.bdTheme("0px 1px 4px rgba(0,0,0,0.3)", "none")};
+        border-radius: 3px;
+        border-top: ${cssManager.bdTheme("1px solid #CCC", "1px solid #444")};
+        border-bottom: ${cssManager.bdTheme("1px solid #CCC", "1px solid #333")};
+        transition: all 0.2s ease;
+      }
 
-        .selectedBox.show {
-          border-top: 1px solid ${cssManager.bdTheme("#ffffff", "#666666")};
-          border-bottom: 1px solid ${cssManager.bdTheme("#fafafa", "#222222")};
-        }
+      .accentTop {
+        border-top: 1px solid #e4002b;
+      }
 
-        .selectionBox {
-          will-change:transform;
-          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);
-        }
+      .accentBottom {
+        border-bottom: 1px solid #e4002b;
+      }
 
-        .selectionBox.show {
-          pointer-events: all;
-          opacity: 1;
-          transform: scale(1,1);
-        }
+      .selectionBox {
+        will-change: transform;
+        pointer-events: none;
+        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 {
-          transition: all 0.1s;
-          line-height: 40px;
-          padding: 0px 4px;
-          border-radius: 3px;
-        }
+      .selectionBox.show {
+        pointer-events: all;
+        opacity: 1;
+        transform: scale(1, 1);
+      }
 
-        .option:hover {
-          color: #fff;
-          padding-left: 8px;
-          background: #0277bd;
-        }
+      .option {
+        transition: all 0.1s;
+        line-height: 40px;
+        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;
+      }
     `
 ];
 __decorateClass([
@@ -76254,11 +76393,19 @@ __decorateClass([
     type: Boolean
   })
 ], DeesInputDropdown.prototype, "required", 2);
+__decorateClass([
+  n4({
+    type: Boolean
+  })
+], DeesInputDropdown.prototype, "enableSearch", 2);
 __decorateClass([
   n4({
     type: Boolean
   })
 ], DeesInputDropdown.prototype, "disabled", 2);
+__decorateClass([
+  r6()
+], DeesInputDropdown.prototype, "opensToTop", 2);
 DeesInputDropdown = __decorateClass([
   t4("dees-input-dropdown")
 ], DeesInputDropdown);