@design.estate/dees-catalog 3.59.0 → 3.60.0

package/dist_watch/bundle.js

@@ -156362,7 +156362,67 @@ var demoFunc26 = /* @__PURE__ */ __name(() => b2`
         ></dees-input-list>
       </dees-panel>
 
-      <dees-panel .title=${"9. Empty State"} .subtitle=${"How the component looks with no items"}>
+      <dees-panel .title=${"9. Candidates with Tab Completion"} .subtitle=${"Terminal-style autocomplete \u2014 Tab accepts, Shift+Tab cycles"}>
+        <div class="grid-layout">
+          <dees-input-list
+            id="candidate-list"
+            .label=${"Assign Team Members"}
+            .placeholder=${"Type a name... (Tab to complete)"}
+            .candidates=${[
+  { viewKey: "Alice Smith", payload: { id: 1, role: "Engineer", department: "Frontend" } },
+  { viewKey: "Bob Johnson", payload: { id: 2, role: "Designer", department: "UX" } },
+  { viewKey: "Carol Williams", payload: { id: 3, role: "Product Manager", department: "Product" } },
+  { viewKey: "David Brown", payload: { id: 4, role: "Engineer", department: "Backend" } },
+  { viewKey: "Eve Davis", payload: { id: 5, role: "QA Engineer", department: "Quality" } },
+  { viewKey: "Frank Miller", payload: { id: 6, role: "DevOps", department: "Infrastructure" } },
+  { viewKey: "Grace Wilson", payload: { id: 7, role: "Designer", department: "UX" } },
+  { viewKey: "Henry Moore", payload: { id: 8, role: "Engineer", department: "Frontend" } }
+]}
+            .value=${["Alice Smith", "Carol Williams"]}
+            .maxItems=${5}
+            .description=${"Type to see ghost completion. Tab to accept, Shift+Tab to cycle, Enter to add."}
+            @change=${(e11) => {
+  const preview = document.querySelector("#candidate-json");
+  if (preview) {
+    const list5 = e11.target;
+    const candidates = list5.getAddedCandidates();
+    preview.textContent = JSON.stringify(candidates, null, 2);
+  }
+}}
+          ></dees-input-list>
+
+          <div>
+            <div style="font-size: 13px; font-weight: 500; margin-bottom: 8px; color: inherit;">Selected Candidates (with payloads)</div>
+            <div class="output-preview" id="candidate-json">[]</div>
+            <div class="feature-note">
+              Try typing "D" — ghost text shows "avid Brown". Press Shift+Tab to cycle to other D-matches. Tab accepts, Enter adds.
+            </div>
+          </div>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${"10. Technology Stack"} .subtitle=${"Larger candidate pool with Shift+Tab cycling"}>
+        <dees-input-list
+          .label=${"Select Technologies"}
+          .placeholder=${"Type to autocomplete..."}
+          .candidates=${[
+  { viewKey: "TypeScript", payload: { category: "language" } },
+  { viewKey: "React", payload: { category: "framework" } },
+  { viewKey: "Vue.js", payload: { category: "framework" } },
+  { viewKey: "Angular", payload: { category: "framework" } },
+  { viewKey: "Node.js", payload: { category: "runtime" } },
+  { viewKey: "Deno", payload: { category: "runtime" } },
+  { viewKey: "Docker", payload: { category: "devops" } },
+  { viewKey: "PostgreSQL", payload: { category: "database" } },
+  { viewKey: "MongoDB", payload: { category: "database" } },
+  { viewKey: "Redis", payload: { category: "database" } },
+  { viewKey: "Kubernetes", payload: { category: "devops" } }
+]}
+          .description=${'Try "D" \u2014 cycles through Deno/Docker. "R" \u2014 cycles through React/Redis.'}
+        ></dees-input-list>
+      </dees-panel>
+
+      <dees-panel .title=${"11. Empty State"} .subtitle=${"How the component looks with no items"}>
         <dees-input-list
           .label=${"Your Ideas"}
           .placeholder=${"Share your ideas..."}
@@ -156378,9 +156438,9 @@ var demoFunc26 = /* @__PURE__ */ __name(() => b2`
 init_dist_ts30();
 init_dees_icon();
 init_theme();
-var _itemHeight_dec, _targetIndex_dec, _dragCurrentY_dec, _dragStartY_dec, _dragOverIndex_dec, _draggedIndex_dec, _editingValue_dec, _editingIndex_dec, _inputValue_dec3, _validationText_dec3, _confirmDelete_dec, _sortable_dec, _allowDuplicates_dec, _minItems_dec, _maxItems_dec, _placeholder_dec4, _value_dec12, _a36, _DeesInputList_decorators, _init33, _value12, _placeholder4, _maxItems, _minItems, _allowDuplicates, _sortable, _confirmDelete, _validationText3, _inputValue3, _editingIndex, _editingValue, _draggedIndex, _dragOverIndex, _dragStartY, _dragCurrentY, _targetIndex, _itemHeight;
+var _itemHeight_dec, _targetIndex_dec, _dragCurrentY_dec, _dragStartY_dec, _dragOverIndex_dec, _draggedIndex_dec, _editingValue_dec, _editingIndex_dec, _currentCandidateIndex_dec, _ghostText_dec, _inputValue_dec3, _validationText_dec3, _candidates_dec, _confirmDelete_dec, _sortable_dec, _allowDuplicates_dec, _minItems_dec, _maxItems_dec, _placeholder_dec4, _value_dec12, _a36, _DeesInputList_decorators, _init33, _value12, _placeholder4, _maxItems, _minItems, _allowDuplicates, _sortable, _confirmDelete, _candidates, _validationText3, _inputValue3, _ghostText, _currentCandidateIndex, _editingIndex, _editingValue, _draggedIndex, _dragOverIndex, _dragStartY, _dragCurrentY, _targetIndex, _itemHeight;
 _DeesInputList_decorators = [customElement("dees-input-list")];
-var _DeesInputList = class _DeesInputList extends (_a36 = DeesInputBase, _value_dec12 = [n5({ type: Array })], _placeholder_dec4 = [n5({ type: String })], _maxItems_dec = [n5({ type: Number })], _minItems_dec = [n5({ type: Number })], _allowDuplicates_dec = [n5({ type: Boolean })], _sortable_dec = [n5({ type: Boolean })], _confirmDelete_dec = [n5({ type: Boolean })], _validationText_dec3 = [n5({ type: String })], _inputValue_dec3 = [r5()], _editingIndex_dec = [r5()], _editingValue_dec = [r5()], _draggedIndex_dec = [r5()], _dragOverIndex_dec = [r5()], _dragStartY_dec = [r5()], _dragCurrentY_dec = [r5()], _targetIndex_dec = [r5()], _itemHeight_dec = [r5()], _a36) {
+var _DeesInputList = class _DeesInputList extends (_a36 = DeesInputBase, _value_dec12 = [n5({ type: Array })], _placeholder_dec4 = [n5({ type: String })], _maxItems_dec = [n5({ type: Number })], _minItems_dec = [n5({ type: Number })], _allowDuplicates_dec = [n5({ type: Boolean })], _sortable_dec = [n5({ type: Boolean })], _confirmDelete_dec = [n5({ type: Boolean })], _candidates_dec = [n5({ type: Array })], _validationText_dec3 = [n5({ type: String })], _inputValue_dec3 = [r5()], _ghostText_dec = [r5()], _currentCandidateIndex_dec = [r5()], _editingIndex_dec = [r5()], _editingValue_dec = [r5()], _draggedIndex_dec = [r5()], _dragOverIndex_dec = [r5()], _dragStartY_dec = [r5()], _dragCurrentY_dec = [r5()], _targetIndex_dec = [r5()], _itemHeight_dec = [r5()], _a36) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _value12, __runInitializers(_init33, 8, this, [])), __runInitializers(_init33, 11, this);
@@ -156390,16 +156450,21 @@ var _DeesInputList = class _DeesInputList extends (_a36 = DeesInputBase, _value_
     __privateAdd(this, _allowDuplicates, __runInitializers(_init33, 24, this, false)), __runInitializers(_init33, 27, this);
     __privateAdd(this, _sortable, __runInitializers(_init33, 28, this, false)), __runInitializers(_init33, 31, this);
     __privateAdd(this, _confirmDelete, __runInitializers(_init33, 32, this, false)), __runInitializers(_init33, 35, this);
-    __privateAdd(this, _validationText3, __runInitializers(_init33, 36, this, "")), __runInitializers(_init33, 39, this);
-    __privateAdd(this, _inputValue3, __runInitializers(_init33, 40, this, "")), __runInitializers(_init33, 43, this);
-    __privateAdd(this, _editingIndex, __runInitializers(_init33, 44, this, -1)), __runInitializers(_init33, 47, this);
-    __privateAdd(this, _editingValue, __runInitializers(_init33, 48, this, "")), __runInitializers(_init33, 51, this);
-    __privateAdd(this, _draggedIndex, __runInitializers(_init33, 52, this, -1)), __runInitializers(_init33, 55, this);
-    __privateAdd(this, _dragOverIndex, __runInitializers(_init33, 56, this, -1)), __runInitializers(_init33, 59, this);
-    __privateAdd(this, _dragStartY, __runInitializers(_init33, 60, this, 0)), __runInitializers(_init33, 63, this);
-    __privateAdd(this, _dragCurrentY, __runInitializers(_init33, 64, this, 0)), __runInitializers(_init33, 67, this);
-    __privateAdd(this, _targetIndex, __runInitializers(_init33, 68, this, -1)), __runInitializers(_init33, 71, this);
-    __privateAdd(this, _itemHeight, __runInitializers(_init33, 72, this, 0)), __runInitializers(_init33, 75, this);
+    __privateAdd(this, _candidates, __runInitializers(_init33, 36, this, [])), __runInitializers(_init33, 39, this);
+    __privateAdd(this, _validationText3, __runInitializers(_init33, 40, this, "")), __runInitializers(_init33, 43, this);
+    __publicField(this, "addedCandidatesMap", /* @__PURE__ */ new Map());
+    __publicField(this, "matchingCandidates", []);
+    __privateAdd(this, _inputValue3, __runInitializers(_init33, 44, this, "")), __runInitializers(_init33, 47, this);
+    __privateAdd(this, _ghostText, __runInitializers(_init33, 48, this, "")), __runInitializers(_init33, 51, this);
+    __privateAdd(this, _currentCandidateIndex, __runInitializers(_init33, 52, this, -1)), __runInitializers(_init33, 55, this);
+    __privateAdd(this, _editingIndex, __runInitializers(_init33, 56, this, -1)), __runInitializers(_init33, 59, this);
+    __privateAdd(this, _editingValue, __runInitializers(_init33, 60, this, "")), __runInitializers(_init33, 63, this);
+    __privateAdd(this, _draggedIndex, __runInitializers(_init33, 64, this, -1)), __runInitializers(_init33, 67, this);
+    __privateAdd(this, _dragOverIndex, __runInitializers(_init33, 68, this, -1)), __runInitializers(_init33, 71, this);
+    __privateAdd(this, _dragStartY, __runInitializers(_init33, 72, this, 0)), __runInitializers(_init33, 75, this);
+    __privateAdd(this, _dragCurrentY, __runInitializers(_init33, 76, this, 0)), __runInitializers(_init33, 79, this);
+    __privateAdd(this, _targetIndex, __runInitializers(_init33, 80, this, -1)), __runInitializers(_init33, 83, this);
+    __privateAdd(this, _itemHeight, __runInitializers(_init33, 84, this, 0)), __runInitializers(_init33, 87, this);
     // Bound event handlers for cleanup
     __publicField(this, "boundHandleGlobalDragOver", null);
     __publicField(this, "boundHandleGlobalDragEnd", null);
@@ -156474,15 +156539,22 @@ var _DeesInputList = class _DeesInputList extends (_a36 = DeesInputBase, _value_
           
           ${!this.disabled && (!this.maxItems || this.value.length < this.maxItems) ? b2`
             <div class="add-item-container">
-              <input
-                type="text"
-                class="add-input"
-                .placeholder=${this.placeholder}
-                .value=${this.inputValue}
-                @input=${this.handleInput}
-                @keydown=${this.handleAddKeyDown}
-                ?disabled=${this.disabled}
-              />
+              <div class="autocomplete-wrapper">
+                ${this.ghostText ? b2`
+                  <span class="ghost-text">
+                    <span class="ghost-typed">${this.inputValue}</span><span class="ghost-completion">${this.ghostText}</span>
+                  </span>
+                ` : ""}
+                <input
+                  type="text"
+                  class="add-input"
+                  .placeholder=${this.placeholder}
+                  .value=${this.inputValue}
+                  @input=${this.handleInput}
+                  @keydown=${this.handleAddKeyDown}
+                  ?disabled=${this.disabled}
+                />
+              </div>
               <button
                 class="add-button"
                 @click=${this.addItem}
@@ -156506,10 +156578,62 @@ var _DeesInputList = class _DeesInputList extends (_a36 = DeesInputBase, _value_
   }
   handleInput(e11) {
     this.inputValue = e11.target.value;
+    this.updateGhostText();
+  }
+  updateGhostText() {
+    if (this.candidates.length === 0 || !this.inputValue) {
+      this.ghostText = "";
+      this.currentCandidateIndex = -1;
+      this.matchingCandidates = [];
+      return;
+    }
+    const search2 = this.inputValue.toLowerCase();
+    this.matchingCandidates = this.candidates.filter((c11) => {
+      if (this.value.includes(c11.viewKey)) return false;
+      return c11.viewKey.toLowerCase().startsWith(search2);
+    }).sort((a5, b5) => a5.viewKey.length - b5.viewKey.length);
+    if (this.matchingCandidates.length > 0) {
+      this.currentCandidateIndex = 0;
+      this.ghostText = this.matchingCandidates[0].viewKey.slice(this.inputValue.length);
+    } else {
+      this.currentCandidateIndex = -1;
+      this.ghostText = "";
+    }
   }
   handleAddKeyDown(e11) {
+    if (e11.key === "Tab" && this.candidates.length > 0 && this.inputValue) {
+      e11.preventDefault();
+      if (e11.shiftKey && this.matchingCandidates.length > 0) {
+        this.currentCandidateIndex = (this.currentCandidateIndex + 1) % this.matchingCandidates.length;
+        const candidate = this.matchingCandidates[this.currentCandidateIndex];
+        this.ghostText = candidate.viewKey.slice(this.inputValue.length);
+      } else if (!e11.shiftKey && this.ghostText && this.matchingCandidates.length > 0) {
+        const candidate = this.matchingCandidates[this.currentCandidateIndex];
+        this.inputValue = candidate.viewKey;
+        this.ghostText = "";
+        const input = this.shadowRoot?.querySelector(".add-input");
+        if (input) input.value = candidate.viewKey;
+      }
+      return;
+    }
+    if (e11.key === "Escape" && this.ghostText) {
+      e11.preventDefault();
+      this.ghostText = "";
+      this.currentCandidateIndex = -1;
+      this.matchingCandidates = [];
+      return;
+    }
     if (e11.key === "Enter" && this.inputValue.trim()) {
       e11.preventDefault();
+      if (this.candidates.length > 0) {
+        const match2 = this.candidates.find(
+          (c11) => c11.viewKey.toLowerCase() === this.inputValue.trim().toLowerCase()
+        );
+        if (match2) {
+          this.selectCandidate(match2);
+        }
+        return;
+      }
       this.addItem();
     }
   }
@@ -156522,6 +156646,44 @@ var _DeesInputList = class _DeesInputList extends (_a36 = DeesInputBase, _value_
       this.cancelEdit();
     }
   }
+  selectCandidate(candidate) {
+    if (this.maxItems && this.value.length >= this.maxItems) {
+      this.validationText = `Maximum ${this.maxItems} items allowed`;
+      setTimeout(() => this.validationText = "", 3e3);
+      return;
+    }
+    if (!this.allowDuplicates && this.value.includes(candidate.viewKey)) {
+      this.validationText = "This item already exists in the list";
+      setTimeout(() => this.validationText = "", 3e3);
+      return;
+    }
+    this.addedCandidatesMap.set(candidate.viewKey, candidate);
+    this.value = [...this.value, candidate.viewKey];
+    this.inputValue = "";
+    this.ghostText = "";
+    this.currentCandidateIndex = -1;
+    this.matchingCandidates = [];
+    this.validationText = "";
+    const input = this.shadowRoot?.querySelector(".add-input");
+    if (input) {
+      input.value = "";
+      input.focus();
+    }
+    this.emitChange();
+  }
+  /**
+   * Get the full candidate object for an item by its viewKey.
+   * Returns undefined if the item was added as a plain string.
+   */
+  getCandidateForItem(viewKey) {
+    return this.addedCandidatesMap.get(viewKey);
+  }
+  /**
+   * Get all added candidates with their payloads.
+   */
+  getAddedCandidates() {
+    return this.value.map((v5) => this.addedCandidatesMap.get(v5)).filter((c11) => c11 !== void 0);
+  }
   addItem() {
     const trimmedValue = this.inputValue.trim();
     if (!trimmedValue) return;
@@ -156584,6 +156746,8 @@ var _DeesInputList = class _DeesInputList extends (_a36 = DeesInputBase, _value_
       const confirmed = await this.showConfirmDialog(`Delete "${this.value[index3]}"?`);
       if (!confirmed) return;
     }
+    const removedKey = this.value[index3];
+    this.addedCandidatesMap.delete(removedKey);
     this.value = this.value.filter((_4, i11) => i11 !== index3);
     this.emitChange();
   }
@@ -156834,8 +156998,11 @@ _minItems = new WeakMap();
 _allowDuplicates = new WeakMap();
 _sortable = new WeakMap();
 _confirmDelete = new WeakMap();
+_candidates = new WeakMap();
 _validationText3 = new WeakMap();
 _inputValue3 = new WeakMap();
+_ghostText = new WeakMap();
+_currentCandidateIndex = new WeakMap();
 _editingIndex = new WeakMap();
 _editingValue = new WeakMap();
 _draggedIndex = new WeakMap();
@@ -156851,8 +157018,11 @@ __decorateElement(_init33, 4, "minItems", _minItems_dec, _DeesInputList, _minIte
 __decorateElement(_init33, 4, "allowDuplicates", _allowDuplicates_dec, _DeesInputList, _allowDuplicates);
 __decorateElement(_init33, 4, "sortable", _sortable_dec, _DeesInputList, _sortable);
 __decorateElement(_init33, 4, "confirmDelete", _confirmDelete_dec, _DeesInputList, _confirmDelete);
+__decorateElement(_init33, 4, "candidates", _candidates_dec, _DeesInputList, _candidates);
 __decorateElement(_init33, 4, "validationText", _validationText_dec3, _DeesInputList, _validationText3);
 __decorateElement(_init33, 4, "inputValue", _inputValue_dec3, _DeesInputList, _inputValue3);
+__decorateElement(_init33, 4, "ghostText", _ghostText_dec, _DeesInputList, _ghostText);
+__decorateElement(_init33, 4, "currentCandidateIndex", _currentCandidateIndex_dec, _DeesInputList, _currentCandidateIndex);
 __decorateElement(_init33, 4, "editingIndex", _editingIndex_dec, _DeesInputList, _editingIndex);
 __decorateElement(_init33, 4, "editingValue", _editingValue_dec, _DeesInputList, _editingValue);
 __decorateElement(_init33, 4, "draggedIndex", _draggedIndex_dec, _DeesInputList, _draggedIndex);
@@ -157056,7 +157226,7 @@ __publicField(_DeesInputList, "styles", [
       }
 
       .add-input {
-        flex: 1;
+        width: 100%;
         padding: 4px 8px;
         font-size: 13px;
         line-height: 18px;
@@ -157150,6 +157320,38 @@ __publicField(_DeesInputList, "styles", [
       .list-items.dropping .list-item {
         transition: none !important;
       }
+
+      /* ── Terminal-style inline autocomplete ── */
+      .autocomplete-wrapper {
+        position: relative;
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+      }
+
+      .ghost-text {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        padding: 4px 8px;
+        font-size: 13px;
+        line-height: 18px;
+        font-family: inherit;
+        white-space: nowrap;
+        pointer-events: none;
+        overflow: hidden;
+      }
+
+      .ghost-typed {
+        visibility: hidden;
+      }
+
+      .ghost-completion {
+        color: ${cssManager.bdTheme("hsl(0 0% 63.9%)", "hsl(0 0% 45.1%)")};
+        opacity: 0.5;
+      }
     `
 ]);
 __runInitializers(_init33, 1, _DeesInputList);