update dees-tags

ts_web/pages/zindex-showcase.ts

@@ -8,6 +8,7 @@ import '../elements/dees-form.js';
 import '../elements/dees-panel.js';
 import '../elements/dees-input-text.js';
 import '../elements/dees-input-radiogroup.js';
+import '../elements/dees-input-tags.js';
 import '../elements/dees-appui-profiledropdown.js';
 
 export const showcasePage = () => html`
@@ -512,6 +513,13 @@ export const showcasePage = () => html`
                   .label=${'Additional Field'}
                   .placeholder=${'Just to show form context'}
                 ></dees-input-text>
+                
+                <dees-input-tags
+                  .label=${'Tags'}
+                  .placeholder=${'Add tags...'}
+                  .suggestions=${['urgent', 'bug', 'feature', 'documentation', 'testing']}
+                  .description=${'Add relevant tags'}
+                ></dees-input-tags>
               </dees-form>
               <p style="margin-top: 16px; color: ${cssManager.bdTheme('#666', '#999')}">
                 You can also right-click anywhere in this modal to test context menus.
@@ -642,6 +650,47 @@ export const showcasePage = () => html`
             }}>Show Multiple Toasts</dees-button>
           </div>
 
+          <div class="demo-card">
+            <h4>Modal with Tags Input</h4>
+            <dees-button @click=${async () => {
+              await DeesModal.createAndShow({
+                heading: 'Tags Input Test',
+                width: 'medium',
+                content: html`
+                  <p>Test the tags input component in a modal:</p>
+                  <dees-form>
+                    <dees-input-tags
+                      .label=${'Search Terms'}
+                      .placeholder=${'Enter search terms...'}
+                      .value=${['typescript', 'modal']}
+                      .suggestions=${[
+                        'javascript', 'typescript', 'css', 'html',
+                        'react', 'vue', 'angular', 'svelte',
+                        'modal', 'dropdown', 'form', 'input'
+                      ]}
+                      .description=${'Add search terms to filter results'}
+                    ></dees-input-tags>
+                    
+                    <dees-input-tags
+                      .label=${'Categories'}
+                      .placeholder=${'Add categories...'}
+                      .required=${true}
+                      .maxTags=${3}
+                      .description=${'Select up to 3 categories'}
+                    ></dees-input-tags>
+                  </dees-form>
+                `,
+                menuOptions: [
+                  { name: 'Cancel', action: async (modal) => modal.destroy() },
+                  { name: 'Apply', action: async (modal) => {
+                    DeesToast.createAndShow({ message: 'Tags applied!', type: 'success' });
+                    modal.destroy();
+                  }}
+                ]
+              });
+            }}>Test Tags in Modal</dees-button>
+          </div>
+
           <div class="demo-card">
             <h4>Fullscreen Modal</h4>
             <dees-button @click=${async () => {