@design.estate/dees-catalog 3.76.0 → 3.77.0

package/dist_ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.js

@@ -12,12 +12,6 @@ export const demoFunc = () => html `
           margin: 0 auto;
         }
         
-        .input-group {
-          display: flex;
-          flex-direction: column;
-          gap: 16px;
-        }
-
         .horizontal-group {
           display: flex;
           gap: 24px;
@@ -44,7 +38,7 @@ export const demoFunc = () => html `
     
     <div class="demo-container">
       <dees-panel .title=${'Basic Type List'} .subtitle=${'Add and remove items from a list'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-typelist
             .label=${'Tags'}
             .infoText=${'Add tags by typing and pressing Enter'}
@@ -57,11 +51,11 @@ export const demoFunc = () => html `
             .infoText=${'Add email addresses of team members'}
             .value=${['alice@example.com', 'bob@example.com']}
           ></dees-input-typelist>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Skills & Keywords'} .subtitle=${'Manage lists of skills and keywords'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-typelist
             .label=${'Your Skills'}
             .infoText=${'List your professional skills'}
@@ -69,23 +63,23 @@ export const demoFunc = () => html `
           ></dees-input-typelist>
 
           <div class="horizontal-group">
-          <dees-input-typelist
-            .label=${'Categories'}
-            .layoutMode=${'horizontal'}
-            .value=${['Technology', 'Design', 'Business']}
-          ></dees-input-typelist>
-          
-          <dees-input-typelist
-            .label=${'Keywords'}
-            .layoutMode=${'horizontal'}
-            .value=${['innovation', 'startup', 'growth']}
-          ></dees-input-typelist>
-        </div>
-        </div>
+            <dees-input-typelist
+              .label=${'Categories'}
+              .layoutMode=${'horizontal'}
+              .value=${['Technology', 'Design', 'Business']}
+            ></dees-input-typelist>
+
+            <dees-input-typelist
+              .label=${'Keywords'}
+              .layoutMode=${'horizontal'}
+              .value=${['innovation', 'startup', 'growth']}
+            ></dees-input-typelist>
+          </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different input states for validation'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-typelist
             .label=${'Project Dependencies'}
             .infoText=${'List all required npm packages'}
@@ -99,7 +93,7 @@ export const demoFunc = () => html `
             .disabled=${true}
             .value=${['system', 'protected', 'readonly']}
           ></dees-input-typelist>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Article Publishing Form'} .subtitle=${'Complete form with tag management'}>
@@ -128,4 +122,4 @@ export const demoFunc = () => html `
     </div>
   </dees-demowrapper>
 `;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC10eXBlbGlzdC5kZW1vLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzLzAwZ3JvdXAtaW5wdXQvZGVlcy1pbnB1dC10eXBlbGlzdC9kZWVzLWlucHV0LXR5cGVsaXN0LmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUV4RCxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7UUFHMUIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O09BcUNKOzs7OzJCQUlvQixpQkFBaUIsY0FBYyxrQ0FBa0M7OztxQkFHdkUsTUFBTTt3QkFDSCx1Q0FBdUM7MkJBQ3BDLDhDQUE4QztxQkFDcEQsQ0FBQyxZQUFZLEVBQUUsWUFBWSxFQUFFLGdCQUFnQixDQUFDOzs7O3FCQUk5QyxjQUFjO3dCQUNYLHFDQUFxQztxQkFDeEMsQ0FBQyxtQkFBbUIsRUFBRSxpQkFBaUIsQ0FBQzs7Ozs7MkJBS2xDLG1CQUFtQixjQUFjLHFDQUFxQzs7O3FCQUc1RSxhQUFhO3dCQUNWLCtCQUErQjtxQkFDbEMsQ0FBQyxNQUFNLEVBQUUsS0FBSyxFQUFFLFlBQVksRUFBRSxTQUFTLEVBQUUsT0FBTyxDQUFDOzs7OztxQkFLakQsWUFBWTswQkFDUCxZQUFZO3FCQUNqQixDQUFDLFlBQVksRUFBRSxRQUFRLEVBQUUsVUFBVSxDQUFDOzs7O3FCQUlwQyxVQUFVOzBCQUNMLFlBQVk7cUJBQ2pCLENBQUMsWUFBWSxFQUFFLFNBQVMsRUFBRSxRQUFRLENBQUM7Ozs7OzsyQkFNN0IsNEJBQTRCLGNBQWMsdUNBQXVDOzs7cUJBR3ZGLHNCQUFzQjt3QkFDbkIsZ0NBQWdDO3dCQUNoQyxJQUFJO3FCQUNQLENBQUMsNkJBQTZCLEVBQUUsOEJBQThCLENBQUM7Ozs7cUJBSS9ELGFBQWE7d0JBQ1Ysc0NBQXNDO3dCQUN0QyxJQUFJO3FCQUNQLENBQUMsUUFBUSxFQUFFLFdBQVcsRUFBRSxVQUFVLENBQUM7Ozs7OzJCQUs3Qix5QkFBeUIsY0FBYyxtQ0FBbUM7O29DQUVqRSxlQUFlLGNBQWMsSUFBSTs7cUJBRWhELFNBQVM7eUJBQ0wsVUFBVTt3QkFDWCxrQ0FBa0M7OztxQkFHckMsTUFBTTt3QkFDSCw4Q0FBOEM7cUJBQ2pELENBQUMsVUFBVSxFQUFFLGlCQUFpQixDQUFDOzs7cUJBRy9CLFlBQVk7d0JBQ1QsbUNBQW1DOzs7Ozs7Ozs7O0NBVTFELENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC10eXBlbGlzdC5kZW1vLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzLzAwZ3JvdXAtaW5wdXQvZGVlcy1pbnB1dC10eXBlbGlzdC9kZWVzLWlucHV0LXR5cGVsaXN0LmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUV4RCxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7UUFHMUIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O09BK0JKOzs7OzJCQUlvQixpQkFBaUIsY0FBYyxrQ0FBa0M7OztxQkFHdkUsTUFBTTt3QkFDSCx1Q0FBdUM7MkJBQ3BDLDhDQUE4QztxQkFDcEQsQ0FBQyxZQUFZLEVBQUUsWUFBWSxFQUFFLGdCQUFnQixDQUFDOzs7O3FCQUk5QyxjQUFjO3dCQUNYLHFDQUFxQztxQkFDeEMsQ0FBQyxtQkFBbUIsRUFBRSxpQkFBaUIsQ0FBQzs7Ozs7MkJBS2xDLG1CQUFtQixjQUFjLHFDQUFxQzs7O3FCQUc1RSxhQUFhO3dCQUNWLCtCQUErQjtxQkFDbEMsQ0FBQyxNQUFNLEVBQUUsS0FBSyxFQUFFLFlBQVksRUFBRSxTQUFTLEVBQUUsT0FBTyxDQUFDOzs7Ozt1QkFLL0MsWUFBWTs0QkFDUCxZQUFZO3VCQUNqQixDQUFDLFlBQVksRUFBRSxRQUFRLEVBQUUsVUFBVSxDQUFDOzs7O3VCQUlwQyxVQUFVOzRCQUNMLFlBQVk7dUJBQ2pCLENBQUMsWUFBWSxFQUFFLFNBQVMsRUFBRSxRQUFRLENBQUM7Ozs7OzsyQkFNL0IsNEJBQTRCLGNBQWMsdUNBQXVDOzs7cUJBR3ZGLHNCQUFzQjt3QkFDbkIsZ0NBQWdDO3dCQUNoQyxJQUFJO3FCQUNQLENBQUMsNkJBQTZCLEVBQUUsOEJBQThCLENBQUM7Ozs7cUJBSS9ELGFBQWE7d0JBQ1Ysc0NBQXNDO3dCQUN0QyxJQUFJO3FCQUNQLENBQUMsUUFBUSxFQUFFLFdBQVcsRUFBRSxVQUFVLENBQUM7Ozs7OzJCQUs3Qix5QkFBeUIsY0FBYyxtQ0FBbUM7O29DQUVqRSxlQUFlLGNBQWMsSUFBSTs7cUJBRWhELFNBQVM7eUJBQ0wsVUFBVTt3QkFDWCxrQ0FBa0M7OztxQkFHckMsTUFBTTt3QkFDSCw4Q0FBOEM7cUJBQ2pELENBQUMsVUFBVSxFQUFFLGlCQUFpQixDQUFDOzs7cUJBRy9CLFlBQVk7d0JBQ1QsbUNBQW1DOzs7Ozs7Ozs7O0NBVTFELENBQUMifQ==