@design.estate/dees-catalog 1.0.236 → 1.0.238

package/dist_watch/bundle.js

@@ -3871,11 +3871,11 @@ var require_define_data_property = __commonJS({
     var $SyntaxError = GetIntrinsic("%SyntaxError%");
     var $TypeError = GetIntrinsic("%TypeError%");
     var gopd = require_gopd();
-    module.exports = function defineDataProperty(obj, property3, value) {
+    module.exports = function defineDataProperty(obj, property2, value) {
       if (!obj || typeof obj !== "object" && typeof obj !== "function") {
         throw new $TypeError("`obj` must be an object or a function`");
       }
-      if (typeof property3 !== "string" && typeof property3 !== "symbol") {
+      if (typeof property2 !== "string" && typeof property2 !== "symbol") {
         throw new $TypeError("`property` must be a string or a symbol`");
       }
       if (arguments.length > 3 && typeof arguments[3] !== "boolean" && arguments[3] !== null) {
@@ -3894,16 +3894,16 @@ var require_define_data_property = __commonJS({
       var nonWritable = arguments.length > 4 ? arguments[4] : null;
       var nonConfigurable = arguments.length > 5 ? arguments[5] : null;
       var loose = arguments.length > 6 ? arguments[6] : false;
-      var desc = !!gopd && gopd(obj, property3);
+      var desc = !!gopd && gopd(obj, property2);
       if ($defineProperty) {
-        $defineProperty(obj, property3, {
+        $defineProperty(obj, property2, {
           configurable: nonConfigurable === null && desc ? desc.configurable : !nonConfigurable,
           enumerable: nonEnumerable === null && desc ? desc.enumerable : !nonEnumerable,
           value,
           writable: nonWritable === null && desc ? desc.writable : !nonWritable
         });
       } else if (loose || !nonEnumerable && !nonWritable && !nonConfigurable) {
-        obj[property3] = value;
+        obj[property2] = value;
       } else {
         throw new $SyntaxError("This environment does not support defining a property as non-configurable, non-writable, or non-enumerable.");
       }
@@ -68136,8 +68136,8 @@ var WccProperties = class WccProperties2 extends DeesElement {
         if (key === "goBright" || key === "domtools") {
           continue;
         }
-        const property3 = classProperties.get(key);
-        const propertyTypeString = await determinePropertyType(property3);
+        const property2 = classProperties.get(key);
+        const propertyTypeString = await determinePropertyType(property2);
         propertyArray.push(x`
             <div class="property">
               ${key} / ${propertyTypeString}<br />
@@ -68168,7 +68168,7 @@ var WccProperties = class WccProperties2 extends DeesElement {
               }}"
                     />`;
             case "Enum":
-              const enumValues = getEnumValues(property3);
+              const enumValues = getEnumValues(property2);
               return x`<select
                       @change="${(eventArg) => {
                 firstFoundInstantiatedElement[key] = eventArg.target.value;
@@ -69187,7 +69187,6 @@ DeesButton.styles = [
       }
 
       .button:hover {
-        cursor: pointer;
         background: #039be5;
         color: #ffffff;
         border: 1px solid #039be5;
@@ -69450,7 +69449,6 @@ DeesChips.styles = [
 
       .chip:hover {
         background: #666666;
-        cursor: pointer;
       }
 
       .chip.selected {
@@ -69799,12 +69797,10 @@ DeesContextmenu.styles = [
       }
 
       .mainbox .menuitem:hover {
-        cursor: pointer;
         background: ${cssManager.bdTheme("#00000010", "#ffffff10")};
       }
 
       .mainbox .menuitem:active {
-        cursor: pointer;
         background: #ffffff05;
       }
     `
@@ -69871,17 +69867,22 @@ var DeesDataviewCodebox = class 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;
         }
 
@@ -69985,8 +69986,9 @@ var DeesDataviewCodebox = class 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">
@@ -70151,7 +70153,6 @@ DeesDataviewStatusobject.styles = [
       }
 
       .copyMain {
-        cursor: pointer;
         font-size: 10px;
         font-weight: 600;
         text-transform: uppercase;
@@ -70231,7 +70232,6 @@ var DeesInputCheckbox = class extends DeesElement {
           display: block;
           position: relative;
           margin: 20px 0px;
-          cursor: pointer;
         }
 
         .maincontainer {
@@ -70533,7 +70533,6 @@ DeesInputText.styles = [
       }
 
       .showPassword:hover {
-        cursor: pointer;
         background: ${cssManager.bdTheme("#00000010", "#ffffff10")};
       }
 
@@ -70662,7 +70661,6 @@ var DeesInputQuantitySelector = class extends DeesElement {
         }
 
         .selector:hover {
-          cursor: pointer;
         }
 
         .quantity {
@@ -70746,7 +70744,6 @@ var DeesInputRadio = class extends DeesElement {
           display: block;
           position: relative;
           margin: 20px 0px;
-          cursor: pointer;
         }
 
         .maincontainer {
@@ -71343,7 +71340,6 @@ DeesTable.styles = [
 
       .headerActions {
         margin-left: auto;
-        cursor: pointer;
       }
       .headerAction {
         display: flex;
@@ -71377,7 +71373,7 @@ DeesTable.styles = [
         text-align: left;
       }
       tr:hover {
-        cursor: pointer;
+        
       }
       tr:hover td {
         background: ${cssManager.bdTheme("#22222210", "#ffffff10")};
@@ -71484,7 +71480,6 @@ DeesTable.styles = [
       }
 
       .footerActions .footerAction {
-        cursor: pointer;
         padding: 8px 16px;
         display: flex;
       }
@@ -76105,22 +76100,26 @@ var DeesInputDropdown = class extends DeesElement {
     this.enableSearch = true;
     this.disabled = false;
     this.opensToTop = false;
+    this.filteredOptions = [];
+    this.highlightedIndex = 0;
+    this.isOpened = false;
     this.isElevated = false;
   }
   render() {
     return x`
-      <div class="maincontainer">
+      <div class="maincontainer" @keydown="${this.isOpened ? this.handleKeyDown : void 0}">
         ${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" />
+                  <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 x`
               <div
-                class="option"
+                class="option ${isHighlighted ? "highlighted" : ""}"
                 @click=${() => {
         this.updateSelection(option);
       }}
@@ -76131,7 +76130,7 @@ var DeesInputDropdown = class extends DeesElement {
     })}
           ${this.enableSearch && this.opensToTop ? x`
                 <div class="search">
-                  <input type="text" placeholder="Search" />
+                  <input type="text" placeholder="Search" @input="${this.handleSearch}" />
                 </div>
               ` : null}
         </div>
@@ -76152,6 +76151,7 @@ var DeesInputDropdown = class extends DeesElement {
   }
   firstUpdated() {
     this.selectedOption = this.selectedOption || this.options[0] || null;
+    this.filteredOptions = this.options;
   }
   async updateSelection(selectedOption) {
     this.selectedOption = selectedOption;
@@ -76167,6 +76167,7 @@ var DeesInputDropdown = class extends DeesElement {
     this.changeSubject.next(this);
   }
   async toggleSelectionBox() {
+    this.isOpened = !this.isOpened;
     const domtoolsInstance = await this.domtoolsPromise;
     const selectedBox = this.shadowRoot.querySelector(".selectedBox");
     const selectionBox = this.shadowRoot.querySelector(".selectionBox");
@@ -76227,6 +76228,31 @@ var DeesInputDropdown = class extends DeesElement {
       }
     }
   }
+  handleSearch(event) {
+    const searchTerm = event.target.value.toLowerCase();
+    this.filteredOptions = this.options.filter(
+      (option) => option.option.toLowerCase().includes(searchTerm)
+    );
+    this.highlightedIndex = 0;
+  }
+  handleKeyDown(event) {
+    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();
+    }
+  }
 };
 DeesInputDropdown.demo = demoFunc11;
 DeesInputDropdown.styles = [
@@ -76255,7 +76281,6 @@ DeesInputDropdown.styles = [
 
       .selectedBox {
         user-select: none;
-        cursor: pointer;
         position: relative;
         max-width: 420px;
         height: 40px;
@@ -76269,18 +76294,17 @@ DeesInputDropdown.styles = [
         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")};
@@ -76288,22 +76312,31 @@ DeesInputDropdown.styles = [
         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 {
@@ -76369,6 +76402,15 @@ __decorateClass([
 __decorateClass([
   r6()
 ], DeesInputDropdown.prototype, "opensToTop", 2);
+__decorateClass([
+  r6()
+], DeesInputDropdown.prototype, "filteredOptions", 2);
+__decorateClass([
+  r6()
+], DeesInputDropdown.prototype, "highlightedIndex", 2);
+__decorateClass([
+  r6()
+], DeesInputDropdown.prototype, "isOpened", 2);
 DeesInputDropdown = __decorateClass([
   t4("dees-input-dropdown")
 ], DeesInputDropdown);
@@ -76478,7 +76520,6 @@ DeesInputFileupload.styles = [
 
       .uploadButton {
         position: relative;
-        cursor: pointer;
         padding: 8px;
         max-width: 600px;
         background: ${cssManager.bdTheme("#fafafa", "#333333")};
@@ -76708,7 +76749,6 @@ DeesMobilenavigation.styles = [
         padding: 8px;
         margin-left: -8px;
         margin-right: -8px;
-        cursor: pointer;
         border-radius: 3px;
       }
       .menuItem:hover {
@@ -76916,7 +76956,6 @@ DeesModal.styles = [
         text-align: center;
         font-size: 14px;
         border-right: 1px solid #222;
-        cursor: pointer;
       }
       .modal .bottomButtons .bottomButton:hover {
         background: #222;
@@ -77232,7 +77271,6 @@ DeesSpeechbubble.styles = [
         display: block;
         box-sizing: border-box;
         color: ${cssManager.bdTheme("#333", "#fff")};
-        cursor: pointer;
         user-select: none;
       }
       :host([hidden]) {
@@ -77628,7 +77666,6 @@ DeesStepper.styles = [
         font-size: 12px;
         border-bottom-right-radius: 3px;
         background: ${cssManager.bdTheme("#00000008", "#ffffff08")};
-        cursor: pointer;
       }
 
       .step .goBack:hover {
@@ -77764,27 +77801,42 @@ DeesUpdater = __decorateClass([
 
 // ts_web/elements/dees-windowcontrols.ts
 var DeesWindowControls = class extends DeesElement {
+  constructor() {
+    super(...arguments);
+    this.type = "mac";
+    this.position = "left";
+  }
   render() {
     return x`
-      <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" ? x`
+            <div class="windowControls">
+              <div class="close"></div>
+              <div class="toDock"></div>
+              <div class="minMax"></div>
+            </div>
+          ` : x``}
     `;
   }
 };
+// STATIC
 DeesWindowControls.demo = () => x`<dees-windowcontrols></dees-windowcontrols>`;
 DeesWindowControls.styles = [
   cssManager.defaultStyles,
   i`
+      :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 {
@@ -77794,16 +77846,17 @@ DeesWindowControls.styles = [
         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 {
@@ -77815,6 +77868,16 @@ DeesWindowControls.styles = [
       }
     `
 ];
+__decorateClass([
+  n4({
+    reflect: true
+  })
+], DeesWindowControls.prototype, "type", 2);
+__decorateClass([
+  n4({
+    reflect: true
+  })
+], DeesWindowControls.prototype, "position", 2);
 DeesWindowControls = __decorateClass([
   t4("dees-windowcontrols")
 ], DeesWindowControls);