@design.estate/dees-catalog 3.60.0 → 3.61.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.60.0",
+  "version": "3.61.0",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "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: '3.60.0',
+  version: '3.61.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

package/ts_web/elements/00group-input/dees-input-list/dees-input-list.demo.ts

@@ -322,7 +322,25 @@ export const demoFunc = () => html`
         ></dees-input-list>
       </dees-panel>
 
-      <dees-panel .title=${'11. Empty State'} .subtitle=${'How the component looks with no items'}>
+      <dees-panel .title=${'11. Freeform + Candidates'} .subtitle=${'Allow adding items not in the candidate list (shown with a question mark)'}>
+        <dees-input-list
+          .label=${'Tags'}
+          .placeholder=${'Type a tag... (freeform allowed)'}
+          .allowFreeform=${true}
+          .candidates=${[
+            { viewKey: 'bug', payload: { color: 'red' } },
+            { viewKey: 'feature', payload: { color: 'blue' } },
+            { viewKey: 'docs', payload: { color: 'green' } },
+            { viewKey: 'refactor', payload: { color: 'purple' } },
+            { viewKey: 'performance', payload: { color: 'orange' } },
+            { viewKey: 'security', payload: { color: 'red' } },
+          ]}
+          .value=${['bug', 'my-custom-tag', 'feature']}
+          .description=${'Known tags get a checkmark, custom tags get a question mark. Tab to complete, Enter to add freeform.'}
+        ></dees-input-list>
+      </dees-panel>
+
+      <dees-panel .title=${'12. Empty State'} .subtitle=${'How the component looks with no items'}>
         <dees-input-list
           .label=${'Your Ideas'}
           .placeholder=${'Share your ideas...'}

package/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts

@@ -54,6 +54,9 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
   @property({ type: Array })
   accessor candidates: IListCandidate[] = [];
 
+  @property({ type: Boolean })
+  accessor allowFreeform: boolean = false;
+
   @property({ type: String })
   accessor validationText: string = '';
 
@@ -184,6 +187,20 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
       }
 
 
+      .candidate-check {
+        width: 14px;
+        height: 14px;
+        color: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
+        flex-shrink: 0;
+      }
+
+      .candidate-unknown {
+        width: 14px;
+        height: 14px;
+        color: ${cssManager.bdTheme('hsl(45 93% 47%)', 'hsl(45 93% 58%)')};
+        flex-shrink: 0;
+      }
+
       .drag-handle {
         display: flex;
         align-items: center;
@@ -442,6 +459,14 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
                   </div>
                 ` : ''}
                 
+                ${this.candidates.length > 0 ? html`
+                  ${this.candidates.some(c => c.viewKey === item) ? html`
+                    <dees-icon class="candidate-check" .icon=${'lucide:check'}></dees-icon>
+                  ` : html`
+                    <dees-icon class="candidate-unknown" .icon=${'lucide:helpCircle'}></dees-icon>
+                  `}
+                ` : ''}
+
                 <div class="item-content">
                   ${this.editingIndex === index ? html`
                     <input
@@ -589,12 +614,18 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
     if (e.key === 'Enter' && this.inputValue.trim()) {
       e.preventDefault();
       if (this.candidates.length > 0) {
-        // In candidate mode, only allow exact matches
+        // Try exact candidate match first
         const match = this.candidates.find(
           c => c.viewKey.toLowerCase() === this.inputValue.trim().toLowerCase()
         );
         if (match) {
           this.selectCandidate(match);
+        } else if (this.allowFreeform) {
+          // Allow freeform entry (won't have a candidate checkmark)
+          this.ghostText = '';
+          this.currentCandidateIndex = -1;
+          this.matchingCandidates = [];
+          this.addItem();
         }
         return;
       }