fix(demo-inputs): wrap input component demos in dees-form containers for consistent form integration
This commit is contained in:
@@ -1,5 +1,12 @@
|
|||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
|
## 2026-04-12 - 3.76.1 - fix(demo-inputs)
|
||||||
|
wrap input component demos in dees-form containers for consistent form integration
|
||||||
|
|
||||||
|
- Adds dees-form wrappers across multiple input demo pages including checkbox, dropdown, file upload, iban, list, multitoggle, phone, quantity selector, radio group, tags, text, toggle, and typelist demos
|
||||||
|
- Keeps horizontal and grid example layouts intact while nesting them inside form containers
|
||||||
|
- Cleans up file upload and text demo markup to better match expected dees-form structure
|
||||||
|
|
||||||
## 2026-04-12 - 3.76.0 - feat(input)
|
## 2026-04-12 - 3.76.0 - feat(input)
|
||||||
separate label info tooltips from description text across input components
|
separate label info tooltips from description text across input components
|
||||||
|
|
||||||
|
|||||||
@@ -3,6 +3,6 @@
|
|||||||
*/
|
*/
|
||||||
export const commitinfo = {
|
export const commitinfo = {
|
||||||
name: '@design.estate/dees-catalog',
|
name: '@design.estate/dees-catalog',
|
||||||
version: '3.76.0',
|
version: '3.76.1',
|
||||||
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
|
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -111,90 +111,92 @@ export const demoFunc = () => html`
|
|||||||
|
|
||||||
<div class="demo-container">
|
<div class="demo-container">
|
||||||
<dees-panel .title=${'Basic Checkboxes'} .subtitle=${'Simple checkbox examples with various labels'}>
|
<dees-panel .title=${'Basic Checkboxes'} .subtitle=${'Simple checkbox examples with various labels'}>
|
||||||
<div class="checkbox-group">
|
<dees-form>
|
||||||
<dees-input-checkbox
|
<dees-input-checkbox
|
||||||
.label=${'I agree to the Terms and Conditions'}
|
.label=${'I agree to the Terms and Conditions'}
|
||||||
.value=${true}
|
.value=${true}
|
||||||
.key=${'terms'}
|
.key=${'terms'}
|
||||||
></dees-input-checkbox>
|
></dees-input-checkbox>
|
||||||
|
|
||||||
<dees-input-checkbox
|
<dees-input-checkbox
|
||||||
.label=${'Subscribe to newsletter'}
|
.label=${'Subscribe to newsletter'}
|
||||||
.value=${false}
|
.value=${false}
|
||||||
.key=${'newsletter'}
|
.key=${'newsletter'}
|
||||||
></dees-input-checkbox>
|
></dees-input-checkbox>
|
||||||
|
|
||||||
<dees-input-checkbox
|
<dees-input-checkbox
|
||||||
.label=${'Enable notifications'}
|
.label=${'Enable notifications'}
|
||||||
.value=${false}
|
.value=${false}
|
||||||
.description=${'Receive email updates about your account'}
|
.description=${'Receive email updates about your account'}
|
||||||
.key=${'notifications'}
|
.key=${'notifications'}
|
||||||
></dees-input-checkbox>
|
></dees-input-checkbox>
|
||||||
</div>
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'Checkbox States'} .subtitle=${'Different checkbox states and configurations'}>
|
<dees-panel .title=${'Checkbox States'} .subtitle=${'Different checkbox states and configurations'}>
|
||||||
<div class="checkbox-group">
|
<dees-form>
|
||||||
<dees-input-checkbox
|
<dees-input-checkbox
|
||||||
.label=${'Default state'}
|
.label=${'Default state'}
|
||||||
.value=${false}
|
.value=${false}
|
||||||
></dees-input-checkbox>
|
></dees-input-checkbox>
|
||||||
|
|
||||||
<dees-input-checkbox
|
<dees-input-checkbox
|
||||||
.label=${'Checked state'}
|
.label=${'Checked state'}
|
||||||
.value=${true}
|
.value=${true}
|
||||||
></dees-input-checkbox>
|
></dees-input-checkbox>
|
||||||
|
|
||||||
<dees-input-checkbox
|
<dees-input-checkbox
|
||||||
.label=${'Disabled unchecked'}
|
.label=${'Disabled unchecked'}
|
||||||
.value=${false}
|
.value=${false}
|
||||||
.disabled=${true}
|
.disabled=${true}
|
||||||
></dees-input-checkbox>
|
></dees-input-checkbox>
|
||||||
|
|
||||||
<dees-input-checkbox
|
<dees-input-checkbox
|
||||||
.label=${'Disabled checked'}
|
.label=${'Disabled checked'}
|
||||||
.value=${true}
|
.value=${true}
|
||||||
.disabled=${true}
|
.disabled=${true}
|
||||||
></dees-input-checkbox>
|
></dees-input-checkbox>
|
||||||
|
|
||||||
<dees-input-checkbox
|
<dees-input-checkbox
|
||||||
.label=${'Required checkbox'}
|
.label=${'Required checkbox'}
|
||||||
.required=${true}
|
.required=${true}
|
||||||
.key=${'required'}
|
.key=${'required'}
|
||||||
></dees-input-checkbox>
|
></dees-input-checkbox>
|
||||||
</div>
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'Horizontal Layout'} .subtitle=${'Checkboxes arranged horizontally for compact forms'}>
|
<dees-panel .title=${'Horizontal Layout'} .subtitle=${'Checkboxes arranged horizontally for compact forms'}>
|
||||||
<div class="horizontal-checkboxes">
|
<dees-form>
|
||||||
<dees-input-checkbox
|
<div class="horizontal-checkboxes">
|
||||||
.label=${'Option A'}
|
<dees-input-checkbox
|
||||||
.value=${false}
|
.label=${'Option A'}
|
||||||
.layoutMode=${'horizontal'}
|
.value=${false}
|
||||||
.key=${'optionA'}
|
.layoutMode=${'horizontal'}
|
||||||
></dees-input-checkbox>
|
.key=${'optionA'}
|
||||||
|
></dees-input-checkbox>
|
||||||
<dees-input-checkbox
|
|
||||||
.label=${'Option B'}
|
<dees-input-checkbox
|
||||||
.value=${true}
|
.label=${'Option B'}
|
||||||
.layoutMode=${'horizontal'}
|
.value=${true}
|
||||||
.key=${'optionB'}
|
.layoutMode=${'horizontal'}
|
||||||
></dees-input-checkbox>
|
.key=${'optionB'}
|
||||||
|
></dees-input-checkbox>
|
||||||
<dees-input-checkbox
|
|
||||||
.label=${'Option C'}
|
<dees-input-checkbox
|
||||||
.value=${false}
|
.label=${'Option C'}
|
||||||
.layoutMode=${'horizontal'}
|
.value=${false}
|
||||||
.key=${'optionC'}
|
.layoutMode=${'horizontal'}
|
||||||
></dees-input-checkbox>
|
.key=${'optionC'}
|
||||||
|
></dees-input-checkbox>
|
||||||
<dees-input-checkbox
|
|
||||||
.label=${'Option D'}
|
<dees-input-checkbox
|
||||||
.value=${true}
|
.label=${'Option D'}
|
||||||
.layoutMode=${'horizontal'}
|
.value=${true}
|
||||||
.key=${'optionD'}
|
.layoutMode=${'horizontal'}
|
||||||
></dees-input-checkbox>
|
.key=${'optionD'}
|
||||||
</div>
|
></dees-input-checkbox>
|
||||||
|
</div>
|
||||||
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'Feature Selection Example'} .subtitle=${'Common use case for feature toggles with batch operations'}>
|
<dees-panel .title=${'Feature Selection Example'} .subtitle=${'Common use case for feature toggles with batch operations'}>
|
||||||
@@ -204,76 +206,76 @@ export const demoFunc = () => html`
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="feature-list">
|
<div class="feature-list">
|
||||||
<div class="checkbox-group">
|
<dees-form>
|
||||||
<dees-input-checkbox
|
<dees-input-checkbox
|
||||||
.label=${'Dark Mode Support'}
|
.label=${'Dark Mode Support'}
|
||||||
.value=${true}
|
.value=${true}
|
||||||
.key=${'feature1'}
|
.key=${'feature1'}
|
||||||
></dees-input-checkbox>
|
></dees-input-checkbox>
|
||||||
|
|
||||||
<dees-input-checkbox
|
<dees-input-checkbox
|
||||||
.label=${'Email Notifications'}
|
.label=${'Email Notifications'}
|
||||||
.value=${true}
|
.value=${true}
|
||||||
.key=${'feature2'}
|
.key=${'feature2'}
|
||||||
></dees-input-checkbox>
|
></dees-input-checkbox>
|
||||||
|
|
||||||
<dees-input-checkbox
|
<dees-input-checkbox
|
||||||
.label=${'Two-Factor Authentication'}
|
.label=${'Two-Factor Authentication'}
|
||||||
.value=${false}
|
.value=${false}
|
||||||
.key=${'feature3'}
|
.key=${'feature3'}
|
||||||
></dees-input-checkbox>
|
></dees-input-checkbox>
|
||||||
|
|
||||||
<dees-input-checkbox
|
<dees-input-checkbox
|
||||||
.label=${'API Access'}
|
.label=${'API Access'}
|
||||||
.value=${true}
|
.value=${true}
|
||||||
.key=${'feature4'}
|
.key=${'feature4'}
|
||||||
></dees-input-checkbox>
|
></dees-input-checkbox>
|
||||||
|
|
||||||
<dees-input-checkbox
|
<dees-input-checkbox
|
||||||
.label=${'Advanced Analytics'}
|
.label=${'Advanced Analytics'}
|
||||||
.value=${false}
|
.value=${false}
|
||||||
.key=${'feature5'}
|
.key=${'feature5'}
|
||||||
></dees-input-checkbox>
|
></dees-input-checkbox>
|
||||||
</div>
|
</dees-form>
|
||||||
</div>
|
</div>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'Privacy Settings Example'} .subtitle=${'Checkboxes in a typical form context'}>
|
<dees-panel .title=${'Privacy Settings Example'} .subtitle=${'Checkboxes in a typical form context'}>
|
||||||
<div class="form-section">
|
<div class="form-section">
|
||||||
<h4 class="section-title">Privacy Preferences</h4>
|
<h4 class="section-title">Privacy Preferences</h4>
|
||||||
|
|
||||||
<div class="checkbox-group">
|
<dees-form>
|
||||||
<dees-input-checkbox
|
<dees-input-checkbox
|
||||||
.label=${'Share analytics data'}
|
.label=${'Share analytics data'}
|
||||||
.value=${true}
|
.value=${true}
|
||||||
.description=${'Help us improve by sharing anonymous usage data'}
|
.description=${'Help us improve by sharing anonymous usage data'}
|
||||||
></dees-input-checkbox>
|
></dees-input-checkbox>
|
||||||
|
|
||||||
<dees-input-checkbox
|
<dees-input-checkbox
|
||||||
.label=${'Personalized recommendations'}
|
.label=${'Personalized recommendations'}
|
||||||
.value=${true}
|
.value=${true}
|
||||||
.description=${'Get suggestions based on your activity'}
|
.description=${'Get suggestions based on your activity'}
|
||||||
></dees-input-checkbox>
|
></dees-input-checkbox>
|
||||||
|
|
||||||
<dees-input-checkbox
|
<dees-input-checkbox
|
||||||
.label=${'Marketing communications'}
|
.label=${'Marketing communications'}
|
||||||
.value=${false}
|
.value=${false}
|
||||||
.description=${'Receive promotional emails and special offers'}
|
.description=${'Receive promotional emails and special offers'}
|
||||||
></dees-input-checkbox>
|
></dees-input-checkbox>
|
||||||
|
|
||||||
<dees-input-checkbox
|
<dees-input-checkbox
|
||||||
.label=${'Third-party integrations'}
|
.label=${'Third-party integrations'}
|
||||||
.value=${false}
|
.value=${false}
|
||||||
.description=${'Allow approved partners to access your data'}
|
.description=${'Allow approved partners to access your data'}
|
||||||
></dees-input-checkbox>
|
></dees-input-checkbox>
|
||||||
</div>
|
</dees-form>
|
||||||
</div>
|
</div>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'Interactive Example'} .subtitle=${'Click checkboxes to see value changes'}>
|
<dees-panel .title=${'Interactive Example'} .subtitle=${'Click checkboxes to see value changes'}>
|
||||||
<div class="checkbox-group">
|
<dees-form>
|
||||||
<dees-input-checkbox
|
<dees-input-checkbox
|
||||||
.label=${'Feature toggle'}
|
.label=${'Feature toggle'}
|
||||||
.value=${false}
|
.value=${false}
|
||||||
@changeSubject=${(event: CustomEvent) => {
|
@changeSubject=${(event: CustomEvent) => {
|
||||||
const output = document.querySelector('#checkbox-output');
|
const output = document.querySelector('#checkbox-output');
|
||||||
@@ -283,9 +285,9 @@ export const demoFunc = () => html`
|
|||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
></dees-input-checkbox>
|
></dees-input-checkbox>
|
||||||
|
|
||||||
<dees-input-checkbox
|
<dees-input-checkbox
|
||||||
.label=${'Debug mode'}
|
.label=${'Debug mode'}
|
||||||
.value=${false}
|
.value=${false}
|
||||||
@changeSubject=${(event: CustomEvent) => {
|
@changeSubject=${(event: CustomEvent) => {
|
||||||
const output = document.querySelector('#debug-output');
|
const output = document.querySelector('#debug-output');
|
||||||
@@ -295,8 +297,8 @@ export const demoFunc = () => html`
|
|||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
></dees-input-checkbox>
|
></dees-input-checkbox>
|
||||||
</div>
|
</dees-form>
|
||||||
|
|
||||||
<div class="interactive-section">
|
<div class="interactive-section">
|
||||||
<div id="checkbox-output" class="output-text">Feature is disabled</div>
|
<div id="checkbox-output" class="output-text">Feature is disabled</div>
|
||||||
<div id="debug-output" class="output-text" style="margin-top: 8px;">Debug mode: OFF</div>
|
<div id="debug-output" class="output-text" style="margin-top: 8px;">Debug mode: OFF</div>
|
||||||
|
|||||||
@@ -69,7 +69,7 @@ export const demoFunc = () => html`
|
|||||||
}
|
}
|
||||||
}}>
|
}}>
|
||||||
<dees-panel .title=${'1. Basic Dropdowns'} .subtitle=${'Standard dropdown with search functionality and various options'}>
|
<dees-panel .title=${'1. Basic Dropdowns'} .subtitle=${'Standard dropdown with search functionality and various options'}>
|
||||||
<div class="input-group">
|
<dees-form>
|
||||||
<dees-input-dropdown
|
<dees-input-dropdown
|
||||||
.label=${'Select Country'}
|
.label=${'Select Country'}
|
||||||
.description=${'Choose the country where your business is registered'}
|
.description=${'Choose the country where your business is registered'}
|
||||||
@@ -95,7 +95,7 @@ export const demoFunc = () => html`
|
|||||||
{ option: 'Guest', key: 'guest' }
|
{ option: 'Guest', key: 'guest' }
|
||||||
]}
|
]}
|
||||||
></dees-input-dropdown>
|
></dees-input-dropdown>
|
||||||
</div>
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
</dees-demowrapper>
|
</dees-demowrapper>
|
||||||
|
|
||||||
@@ -136,40 +136,42 @@ export const demoFunc = () => html`
|
|||||||
});
|
});
|
||||||
}}>
|
}}>
|
||||||
<dees-panel .title=${'3. Horizontal Layout'} .subtitle=${'Multiple dropdowns in a horizontal layout for compact forms'}>
|
<dees-panel .title=${'3. Horizontal Layout'} .subtitle=${'Multiple dropdowns in a horizontal layout for compact forms'}>
|
||||||
<div class="horizontal-group">
|
<dees-form>
|
||||||
<dees-input-dropdown
|
<div class="horizontal-group">
|
||||||
.label=${'Department'}
|
<dees-input-dropdown
|
||||||
.layoutMode=${'horizontal'}
|
.label=${'Department'}
|
||||||
.options=${[
|
.layoutMode=${'horizontal'}
|
||||||
{ option: 'Engineering', key: 'eng' },
|
.options=${[
|
||||||
{ option: 'Design', key: 'design' },
|
{ option: 'Engineering', key: 'eng' },
|
||||||
{ option: 'Marketing', key: 'marketing' },
|
{ option: 'Design', key: 'design' },
|
||||||
{ option: 'Sales', key: 'sales' }
|
{ option: 'Marketing', key: 'marketing' },
|
||||||
]}
|
{ option: 'Sales', key: 'sales' }
|
||||||
></dees-input-dropdown>
|
]}
|
||||||
|
></dees-input-dropdown>
|
||||||
<dees-input-dropdown
|
|
||||||
.label=${'Team Size'}
|
<dees-input-dropdown
|
||||||
.layoutMode=${'horizontal'}
|
.label=${'Team Size'}
|
||||||
.enableSearch=${false}
|
.layoutMode=${'horizontal'}
|
||||||
.options=${[
|
.enableSearch=${false}
|
||||||
{ option: '1-5', key: 'small' },
|
.options=${[
|
||||||
{ option: '6-20', key: 'medium' },
|
{ option: '1-5', key: 'small' },
|
||||||
{ option: '21-50', key: 'large' },
|
{ option: '6-20', key: 'medium' },
|
||||||
{ option: '50+', key: 'xlarge' }
|
{ option: '21-50', key: 'large' },
|
||||||
]}
|
{ option: '50+', key: 'xlarge' }
|
||||||
></dees-input-dropdown>
|
]}
|
||||||
|
></dees-input-dropdown>
|
||||||
<dees-input-dropdown
|
|
||||||
.label=${'Location'}
|
<dees-input-dropdown
|
||||||
.layoutMode=${'horizontal'}
|
.label=${'Location'}
|
||||||
.options=${[
|
.layoutMode=${'horizontal'}
|
||||||
{ option: 'Remote', key: 'remote' },
|
.options=${[
|
||||||
{ option: 'On-site', key: 'onsite' },
|
{ option: 'Remote', key: 'remote' },
|
||||||
{ option: 'Hybrid', key: 'hybrid' }
|
{ option: 'On-site', key: 'onsite' },
|
||||||
]}
|
{ option: 'Hybrid', key: 'hybrid' }
|
||||||
></dees-input-dropdown>
|
]}
|
||||||
</div>
|
></dees-input-dropdown>
|
||||||
|
</div>
|
||||||
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
</dees-demowrapper>
|
</dees-demowrapper>
|
||||||
|
|
||||||
@@ -185,7 +187,7 @@ export const demoFunc = () => html`
|
|||||||
}
|
}
|
||||||
}}>
|
}}>
|
||||||
<dees-panel .title=${'4. States'} .subtitle=${'Different states and configurations'}>
|
<dees-panel .title=${'4. States'} .subtitle=${'Different states and configurations'}>
|
||||||
<div class="input-group">
|
<dees-form>
|
||||||
<dees-input-dropdown
|
<dees-input-dropdown
|
||||||
.label=${'Required Field'}
|
.label=${'Required Field'}
|
||||||
.required=${true}
|
.required=${true}
|
||||||
@@ -204,7 +206,7 @@ export const demoFunc = () => html`
|
|||||||
]}
|
]}
|
||||||
.selectedOption=${{ option: 'Cannot Select', key: 'disabled' }}
|
.selectedOption=${{ option: 'Cannot Select', key: 'disabled' }}
|
||||||
></dees-input-dropdown>
|
></dees-input-dropdown>
|
||||||
</div>
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
</dees-demowrapper>
|
</dees-demowrapper>
|
||||||
|
|
||||||
|
|||||||
@@ -55,41 +55,43 @@ export const demoFunc = () => html`
|
|||||||
.title=${'Modern file uploader'}
|
.title=${'Modern file uploader'}
|
||||||
.subtitle=${'Shadcn-inspired layout with drag & drop, previews and validation'}
|
.subtitle=${'Shadcn-inspired layout with drag & drop, previews and validation'}
|
||||||
>
|
>
|
||||||
<div class="demo-grid demo-grid--two">
|
<dees-form>
|
||||||
<div class="demo-stack">
|
<div class="demo-grid demo-grid--two">
|
||||||
<dees-input-fileupload
|
<div class="demo-stack">
|
||||||
.label=${'Attachments'}
|
<dees-input-fileupload
|
||||||
.infoText=${'Upload supporting documents for your request'}
|
.label=${'Attachments'}
|
||||||
.description=${'Accepted formats: images, PDF, and ZIP archives up to 10MB'}
|
.infoText=${'Upload supporting documents for your request'}
|
||||||
.accept=${'image/*,.pdf,.zip'}
|
.description=${'Accepted formats: images, PDF, and ZIP archives up to 10MB'}
|
||||||
.maxSize=${10 * 1024 * 1024}
|
.accept=${'image/*,.pdf,.zip'}
|
||||||
></dees-input-fileupload>
|
.maxSize=${10 * 1024 * 1024}
|
||||||
|
></dees-input-fileupload>
|
||||||
|
|
||||||
<dees-input-fileupload
|
<dees-input-fileupload
|
||||||
.label=${'Brand assets'}
|
.label=${'Brand assets'}
|
||||||
.infoText=${'Upload high-resolution imagery (JPG/PNG)'}
|
.infoText=${'Upload high-resolution imagery (JPG/PNG)'}
|
||||||
.accept=${'image/jpeg,image/png'}
|
.accept=${'image/jpeg,image/png'}
|
||||||
.multiple=${false}
|
.multiple=${false}
|
||||||
.maxSize=${5 * 1024 * 1024}
|
.maxSize=${5 * 1024 * 1024}
|
||||||
.buttonText=${'Select cover image'}
|
.buttonText=${'Select cover image'}
|
||||||
></dees-input-fileupload>
|
></dees-input-fileupload>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="demo-stack">
|
||||||
|
<dees-input-fileupload
|
||||||
|
.label=${'Audio uploads'}
|
||||||
|
.infoText=${'Share podcast drafts (MP3/WAV, max 25MB each)'}
|
||||||
|
.accept=${'audio/*'}
|
||||||
|
.maxSize=${25 * 1024 * 1024}
|
||||||
|
></dees-input-fileupload>
|
||||||
|
|
||||||
|
<dees-input-fileupload
|
||||||
|
.label=${'Disabled example'}
|
||||||
|
.infoText=${'Uploader is disabled while moderation is pending'}
|
||||||
|
.disabled=${true}
|
||||||
|
></dees-input-fileupload>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</dees-form>
|
||||||
<div class="demo-stack">
|
|
||||||
<dees-input-fileupload
|
|
||||||
.label=${'Audio uploads'}
|
|
||||||
.infoText=${'Share podcast drafts (MP3/WAV, max 25MB each)'}
|
|
||||||
.accept=${'audio/*'}
|
|
||||||
.maxSize=${25 * 1024 * 1024}
|
|
||||||
></dees-input-fileupload>
|
|
||||||
|
|
||||||
<dees-input-fileupload
|
|
||||||
.label=${'Disabled example'}
|
|
||||||
.infoText=${'Uploader is disabled while moderation is pending'}
|
|
||||||
.disabled=${true}
|
|
||||||
></dees-input-fileupload>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel
|
<dees-panel
|
||||||
@@ -98,7 +100,6 @@ export const demoFunc = () => html`
|
|||||||
>
|
>
|
||||||
<div class="demo-grid">
|
<div class="demo-grid">
|
||||||
<dees-form>
|
<dees-form>
|
||||||
<div class="demo-stack">
|
|
||||||
<dees-input-text
|
<dees-input-text
|
||||||
.label=${'Project name'}
|
.label=${'Project name'}
|
||||||
.infoText=${'How should we refer to this project internally?'}
|
.infoText=${'How should we refer to this project internally?'}
|
||||||
@@ -140,7 +141,6 @@ export const demoFunc = () => html`
|
|||||||
></dees-input-text>
|
></dees-input-text>
|
||||||
|
|
||||||
<dees-form-submit .text=${'Submit briefing'}></dees-form-submit>
|
<dees-form-submit .text=${'Submit briefing'}></dees-form-submit>
|
||||||
</div>
|
|
||||||
</dees-form>
|
</dees-form>
|
||||||
|
|
||||||
<div class="demo-note">
|
<div class="demo-note">
|
||||||
|
|||||||
@@ -30,7 +30,7 @@ export const demoFunc = () => html`
|
|||||||
|
|
||||||
<div class="demo-container">
|
<div class="demo-container">
|
||||||
<dees-panel .title=${'Basic IBAN Input'} .subtitle=${'International Bank Account Number with automatic formatting'}>
|
<dees-panel .title=${'Basic IBAN Input'} .subtitle=${'International Bank Account Number with automatic formatting'}>
|
||||||
<div class="input-group">
|
<dees-form>
|
||||||
<dees-input-iban
|
<dees-input-iban
|
||||||
.label=${'Bank Account IBAN'}
|
.label=${'Bank Account IBAN'}
|
||||||
.infoText=${'Enter your International Bank Account Number'}
|
.infoText=${'Enter your International Bank Account Number'}
|
||||||
@@ -42,27 +42,29 @@ export const demoFunc = () => html`
|
|||||||
.infoText=${'This IBAN has been verified'}
|
.infoText=${'This IBAN has been verified'}
|
||||||
.value=${'DE89370400440532013000'}
|
.value=${'DE89370400440532013000'}
|
||||||
></dees-input-iban>
|
></dees-input-iban>
|
||||||
</div>
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'Payment Information'} .subtitle=${'IBAN input with horizontal layout for payment forms'}>
|
<dees-panel .title=${'Payment Information'} .subtitle=${'IBAN input with horizontal layout for payment forms'}>
|
||||||
<div class="payment-group">
|
<dees-form>
|
||||||
<dees-input-text
|
<div class="payment-group">
|
||||||
.label=${'Account Holder'}
|
<dees-input-text
|
||||||
.layoutMode=${'horizontal'}
|
.label=${'Account Holder'}
|
||||||
.value=${'John Doe'}
|
.layoutMode=${'horizontal'}
|
||||||
></dees-input-text>
|
.value=${'John Doe'}
|
||||||
|
></dees-input-text>
|
||||||
<dees-input-iban
|
|
||||||
.label=${'IBAN'}
|
<dees-input-iban
|
||||||
.layoutMode=${'horizontal'}
|
.label=${'IBAN'}
|
||||||
.value=${'GB82WEST12345698765432'}
|
.layoutMode=${'horizontal'}
|
||||||
></dees-input-iban>
|
.value=${'GB82WEST12345698765432'}
|
||||||
</div>
|
></dees-input-iban>
|
||||||
|
</div>
|
||||||
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'Validation & States'} .subtitle=${'Required fields and disabled states'}>
|
<dees-panel .title=${'Validation & States'} .subtitle=${'Required fields and disabled states'}>
|
||||||
<div class="input-group">
|
<dees-form>
|
||||||
<dees-input-iban
|
<dees-input-iban
|
||||||
.label=${'Payment Account'}
|
.label=${'Payment Account'}
|
||||||
.infoText=${'Required for processing payments'}
|
.infoText=${'Required for processing payments'}
|
||||||
@@ -75,7 +77,7 @@ export const demoFunc = () => html`
|
|||||||
.value=${'FR1420041010050500013M02606'}
|
.value=${'FR1420041010050500013M02606'}
|
||||||
.disabled=${true}
|
.disabled=${true}
|
||||||
></dees-input-iban>
|
></dees-input-iban>
|
||||||
</div>
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'Bank Transfer Form'} .subtitle=${'Complete form example with IBAN validation'}>
|
<dees-panel .title=${'Bank Transfer Form'} .subtitle=${'Complete form example with IBAN validation'}>
|
||||||
|
|||||||
@@ -109,25 +109,27 @@ export const demoFunc = () => html`
|
|||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'3. Validation & Constraints'} .subtitle=${'Lists with minimum/maximum items and duplicate prevention'}>
|
<dees-panel .title=${'3. Validation & Constraints'} .subtitle=${'Lists with minimum/maximum items and duplicate prevention'}>
|
||||||
<div class="grid-layout">
|
<dees-form>
|
||||||
<dees-input-list
|
<div class="grid-layout">
|
||||||
.label=${'Team Members (Min 2, Max 5)'}
|
<dees-input-list
|
||||||
.placeholder=${'Add team member...'}
|
.label=${'Team Members (Min 2, Max 5)'}
|
||||||
.minItems=${2}
|
.placeholder=${'Add team member...'}
|
||||||
.maxItems=${5}
|
.minItems=${2}
|
||||||
.value=${['Alice', 'Bob']}
|
.maxItems=${5}
|
||||||
.required=${true}
|
.value=${['Alice', 'Bob']}
|
||||||
.description=${'Add 2-5 team members'}
|
.required=${true}
|
||||||
></dees-input-list>
|
.description=${'Add 2-5 team members'}
|
||||||
|
></dees-input-list>
|
||||||
<dees-input-list
|
|
||||||
.label=${'Unique Tags (No Duplicates)'}
|
<dees-input-list
|
||||||
.placeholder=${'Add unique tag...'}
|
.label=${'Unique Tags (No Duplicates)'}
|
||||||
.allowDuplicates=${false}
|
.placeholder=${'Add unique tag...'}
|
||||||
.value=${['frontend', 'backend', 'database']}
|
.allowDuplicates=${false}
|
||||||
.description=${'Duplicate items are not allowed'}
|
.value=${['frontend', 'backend', 'database']}
|
||||||
></dees-input-list>
|
.description=${'Duplicate items are not allowed'}
|
||||||
</div>
|
></dees-input-list>
|
||||||
|
</div>
|
||||||
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'4. Delete Confirmation'} .subtitle=${'Require confirmation before deleting items'}>
|
<dees-panel .title=${'4. Delete Confirmation'} .subtitle=${'Require confirmation before deleting items'}>
|
||||||
|
|||||||
@@ -52,81 +52,83 @@ export const demoFunc = () => html`
|
|||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-title">Multi-Option Toggle</div>
|
<div class="section-title">Multi-Option Toggle</div>
|
||||||
<div class="section-description">Select from multiple options with a smooth sliding indicator animation.</div>
|
<div class="section-description">Select from multiple options with a smooth sliding indicator animation.</div>
|
||||||
|
|
||||||
<dees-input-multitoggle
|
<dees-form>
|
||||||
.label=${'Display Mode'}
|
<dees-input-multitoggle
|
||||||
.infoText=${'Choose how content is displayed'}
|
.label=${'Display Mode'}
|
||||||
.description=${'This setting affects how items appear on your dashboard'}
|
.infoText=${'Choose how content is displayed'}
|
||||||
.options=${['List View', 'Grid View', 'Compact']}
|
.description=${'This setting affects how items appear on your dashboard'}
|
||||||
.selectedOption=${'Grid View'}
|
.options=${['List View', 'Grid View', 'Compact']}
|
||||||
></dees-input-multitoggle>
|
.selectedOption=${'Grid View'}
|
||||||
|
></dees-input-multitoggle>
|
||||||
<br><br>
|
|
||||||
|
<dees-input-multitoggle
|
||||||
<dees-input-multitoggle
|
.label=${'T-Shirt Size'}
|
||||||
.label=${'T-Shirt Size'}
|
.infoText=${'Select your preferred size'}
|
||||||
.infoText=${'Select your preferred size'}
|
.options=${['XS', 'S', 'M', 'L', 'XL', 'XXL']}
|
||||||
.options=${['XS', 'S', 'M', 'L', 'XL', 'XXL']}
|
.selectedOption=${'M'}
|
||||||
.selectedOption=${'M'}
|
></dees-input-multitoggle>
|
||||||
></dees-input-multitoggle>
|
</dees-form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-title">Boolean Toggle</div>
|
<div class="section-title">Boolean Toggle</div>
|
||||||
<div class="section-description">Simple on/off switches with customizable labels for clearer context.</div>
|
<div class="section-description">Simple on/off switches with customizable labels for clearer context.</div>
|
||||||
|
|
||||||
<dees-input-multitoggle
|
<dees-form>
|
||||||
.label=${'Notifications'}
|
<dees-input-multitoggle
|
||||||
.infoText=${'Enable or disable push notifications'}
|
.label=${'Notifications'}
|
||||||
.type=${'boolean'}
|
.infoText=${'Enable or disable push notifications'}
|
||||||
.selectedOption=${'true'}
|
.type=${'boolean'}
|
||||||
></dees-input-multitoggle>
|
.selectedOption=${'true'}
|
||||||
|
></dees-input-multitoggle>
|
||||||
<br><br>
|
|
||||||
|
<dees-input-multitoggle
|
||||||
<dees-input-multitoggle
|
.label=${'Theme Mode'}
|
||||||
.label=${'Theme Mode'}
|
.infoText=${'Switch between light and dark theme'}
|
||||||
.infoText=${'Switch between light and dark theme'}
|
.type=${'boolean'}
|
||||||
.type=${'boolean'}
|
.booleanTrueName=${'Dark'}
|
||||||
.booleanTrueName=${'Dark'}
|
.booleanFalseName=${'Light'}
|
||||||
.booleanFalseName=${'Light'}
|
.selectedOption=${'Dark'}
|
||||||
.selectedOption=${'Dark'}
|
></dees-input-multitoggle>
|
||||||
></dees-input-multitoggle>
|
</dees-form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-title">Settings Grid</div>
|
<div class="section-title">Settings Grid</div>
|
||||||
<div class="section-description">Configuration options arranged in a responsive grid layout.</div>
|
<div class="section-description">Configuration options arranged in a responsive grid layout.</div>
|
||||||
|
|
||||||
<div class="settings-grid">
|
<dees-form>
|
||||||
<dees-input-multitoggle
|
<div class="settings-grid">
|
||||||
.label=${'Auto-Save'}
|
<dees-input-multitoggle
|
||||||
.type=${'boolean'}
|
.label=${'Auto-Save'}
|
||||||
.booleanTrueName=${'Enabled'}
|
.type=${'boolean'}
|
||||||
.booleanFalseName=${'Disabled'}
|
.booleanTrueName=${'Enabled'}
|
||||||
.selectedOption=${'Enabled'}
|
.booleanFalseName=${'Disabled'}
|
||||||
></dees-input-multitoggle>
|
.selectedOption=${'Enabled'}
|
||||||
|
></dees-input-multitoggle>
|
||||||
<dees-input-multitoggle
|
|
||||||
.label=${'Language'}
|
<dees-input-multitoggle
|
||||||
.options=${['English', 'German', 'French', 'Spanish']}
|
.label=${'Language'}
|
||||||
.selectedOption=${'English'}
|
.options=${['English', 'German', 'French', 'Spanish']}
|
||||||
></dees-input-multitoggle>
|
.selectedOption=${'English'}
|
||||||
|
></dees-input-multitoggle>
|
||||||
<dees-input-multitoggle
|
|
||||||
.label=${'Quality'}
|
<dees-input-multitoggle
|
||||||
.options=${['Low', 'Medium', 'High', 'Ultra']}
|
.label=${'Quality'}
|
||||||
.selectedOption=${'High'}
|
.options=${['Low', 'Medium', 'High', 'Ultra']}
|
||||||
></dees-input-multitoggle>
|
.selectedOption=${'High'}
|
||||||
|
></dees-input-multitoggle>
|
||||||
<dees-input-multitoggle
|
|
||||||
.label=${'Privacy'}
|
<dees-input-multitoggle
|
||||||
.type=${'boolean'}
|
.label=${'Privacy'}
|
||||||
.booleanTrueName=${'Private'}
|
.type=${'boolean'}
|
||||||
.booleanFalseName=${'Public'}
|
.booleanTrueName=${'Private'}
|
||||||
.selectedOption=${'Private'}
|
.booleanFalseName=${'Public'}
|
||||||
></dees-input-multitoggle>
|
.selectedOption=${'Private'}
|
||||||
</div>
|
></dees-input-multitoggle>
|
||||||
|
</div>
|
||||||
|
</dees-form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
|
|||||||
@@ -30,7 +30,7 @@ export const demoFunc = () => html`
|
|||||||
|
|
||||||
<div class="demo-container">
|
<div class="demo-container">
|
||||||
<dees-panel .title=${'Basic Phone Input'} .subtitle=${'Automatic formatting for phone numbers'}>
|
<dees-panel .title=${'Basic Phone Input'} .subtitle=${'Automatic formatting for phone numbers'}>
|
||||||
<div class="input-group">
|
<dees-form>
|
||||||
<dees-input-phone
|
<dees-input-phone
|
||||||
.label=${'Phone Number'}
|
.label=${'Phone Number'}
|
||||||
.infoText=${'Enter your phone number with country code'}
|
.infoText=${'Enter your phone number with country code'}
|
||||||
@@ -44,27 +44,29 @@ export const demoFunc = () => html`
|
|||||||
.required=${true}
|
.required=${true}
|
||||||
.placeholder=${'+1 (555) 000-0000'}
|
.placeholder=${'+1 (555) 000-0000'}
|
||||||
></dees-input-phone>
|
></dees-input-phone>
|
||||||
</div>
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'Horizontal Layout'} .subtitle=${'Phone inputs arranged horizontally'}>
|
<dees-panel .title=${'Horizontal Layout'} .subtitle=${'Phone inputs arranged horizontally'}>
|
||||||
<div class="horizontal-group">
|
<dees-form>
|
||||||
<dees-input-phone
|
<div class="horizontal-group">
|
||||||
.label=${'Mobile'}
|
<dees-input-phone
|
||||||
.layoutMode=${'horizontal'}
|
.label=${'Mobile'}
|
||||||
.value=${'4155551234'}
|
.layoutMode=${'horizontal'}
|
||||||
></dees-input-phone>
|
.value=${'4155551234'}
|
||||||
|
></dees-input-phone>
|
||||||
<dees-input-phone
|
|
||||||
.label=${'Office'}
|
<dees-input-phone
|
||||||
.layoutMode=${'horizontal'}
|
.label=${'Office'}
|
||||||
.placeholder=${'+1 (800) 555-0000'}
|
.layoutMode=${'horizontal'}
|
||||||
></dees-input-phone>
|
.placeholder=${'+1 (800) 555-0000'}
|
||||||
</div>
|
></dees-input-phone>
|
||||||
|
</div>
|
||||||
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'International Numbers'} .subtitle=${'Supports formatting for numbers with country codes'}>
|
<dees-panel .title=${'International Numbers'} .subtitle=${'Supports formatting for numbers with country codes'}>
|
||||||
<div class="input-group">
|
<dees-form>
|
||||||
<dees-input-phone
|
<dees-input-phone
|
||||||
.label=${'International Contact'}
|
.label=${'International Contact'}
|
||||||
.infoText=${'Automatically formats international numbers'}
|
.infoText=${'Automatically formats international numbers'}
|
||||||
@@ -76,7 +78,7 @@ export const demoFunc = () => html`
|
|||||||
.value=${'911'}
|
.value=${'911'}
|
||||||
.disabled=${true}
|
.disabled=${true}
|
||||||
></dees-input-phone>
|
></dees-input-phone>
|
||||||
</div>
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'Form Integration'} .subtitle=${'Phone input as part of a contact form'}>
|
<dees-panel .title=${'Form Integration'} .subtitle=${'Phone input as part of a contact form'}>
|
||||||
|
|||||||
@@ -66,7 +66,7 @@ export const demoFunc = () => html`
|
|||||||
|
|
||||||
<div class="demo-container">
|
<div class="demo-container">
|
||||||
<dees-panel .title=${'Basic Quantity Selector'} .subtitle=${'Simple quantity input with increment/decrement buttons'}>
|
<dees-panel .title=${'Basic Quantity Selector'} .subtitle=${'Simple quantity input with increment/decrement buttons'}>
|
||||||
<div class="input-group">
|
<dees-form>
|
||||||
<dees-input-quantityselector
|
<dees-input-quantityselector
|
||||||
.label=${'Quantity'}
|
.label=${'Quantity'}
|
||||||
.infoText=${'Select the desired quantity'}
|
.infoText=${'Select the desired quantity'}
|
||||||
@@ -79,7 +79,7 @@ export const demoFunc = () => html`
|
|||||||
.infoText=${'Adjust the quantity of items'}
|
.infoText=${'Adjust the quantity of items'}
|
||||||
.value=${3}
|
.value=${3}
|
||||||
></dees-input-quantityselector>
|
></dees-input-quantityselector>
|
||||||
</div>
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'Shopping Cart'} .subtitle=${'Modern e-commerce product cards with interactive quantity selectors'} .runAfterRender=${async (elementArg: HTMLElement) => {
|
<dees-panel .title=${'Shopping Cart'} .subtitle=${'Modern e-commerce product cards with interactive quantity selectors'} .runAfterRender=${async (elementArg: HTMLElement) => {
|
||||||
@@ -178,7 +178,7 @@ export const demoFunc = () => html`
|
|||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different states for validation and restrictions'}>
|
<dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different states for validation and restrictions'}>
|
||||||
<div class="input-group">
|
<dees-form>
|
||||||
<dees-input-quantityselector
|
<dees-input-quantityselector
|
||||||
.label=${'Number of Licenses'}
|
.label=${'Number of Licenses'}
|
||||||
.infoText=${'Select how many licenses you need'}
|
.infoText=${'Select how many licenses you need'}
|
||||||
@@ -192,7 +192,7 @@ export const demoFunc = () => html`
|
|||||||
.disabled=${true}
|
.disabled=${true}
|
||||||
.value=${5}
|
.value=${5}
|
||||||
></dees-input-quantityselector>
|
></dees-input-quantityselector>
|
||||||
</div>
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'Order Form'} .subtitle=${'Complete order form with quantity selection'}>
|
<dees-panel .title=${'Order Form'} .subtitle=${'Complete order form with quantity selection'}>
|
||||||
|
|||||||
@@ -48,25 +48,27 @@ export const demoFunc = () => html`
|
|||||||
|
|
||||||
<div class="demo-container">
|
<div class="demo-container">
|
||||||
<dees-panel .title=${'1. Basic Radio Groups'} .subtitle=${'Simple string options for common use cases'}>
|
<dees-panel .title=${'1. Basic Radio Groups'} .subtitle=${'Simple string options for common use cases'}>
|
||||||
<div class="demo-grid">
|
<dees-form>
|
||||||
<dees-input-radiogroup
|
<div class="demo-grid">
|
||||||
.label=${'Subscription Plan'}
|
<dees-input-radiogroup
|
||||||
.options=${['Basic - $9/month', 'Pro - $29/month', 'Enterprise - $99/month']}
|
.label=${'Subscription Plan'}
|
||||||
.selectedOption=${'Pro - $29/month'}
|
.options=${['Basic - $9/month', 'Pro - $29/month', 'Enterprise - $99/month']}
|
||||||
.description=${'Choose your subscription tier'}
|
.selectedOption=${'Pro - $29/month'}
|
||||||
></dees-input-radiogroup>
|
.description=${'Choose your subscription tier'}
|
||||||
|
></dees-input-radiogroup>
|
||||||
<dees-input-radiogroup
|
|
||||||
.label=${'Priority Level'}
|
<dees-input-radiogroup
|
||||||
.options=${['High', 'Medium', 'Low']}
|
.label=${'Priority Level'}
|
||||||
.selectedOption=${'Medium'}
|
.options=${['High', 'Medium', 'Low']}
|
||||||
.required=${true}
|
.selectedOption=${'Medium'}
|
||||||
></dees-input-radiogroup>
|
.required=${true}
|
||||||
</div>
|
></dees-input-radiogroup>
|
||||||
|
</div>
|
||||||
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'2. Horizontal Layout'} .subtitle=${'Radio groups with horizontal arrangement'}>
|
<dees-panel .title=${'2. Horizontal Layout'} .subtitle=${'Radio groups with horizontal arrangement'}>
|
||||||
<div class="input-group">
|
<dees-form>
|
||||||
<dees-input-radiogroup
|
<dees-input-radiogroup
|
||||||
.label=${'Do you agree with the terms?'}
|
.label=${'Do you agree with the terms?'}
|
||||||
.options=${['Yes', 'No', 'Maybe']}
|
.options=${['Yes', 'No', 'Maybe']}
|
||||||
@@ -81,7 +83,7 @@ export const demoFunc = () => html`
|
|||||||
.selectedOption=${'Intermediate'}
|
.selectedOption=${'Intermediate'}
|
||||||
.description=${'Select your experience level with web development'}
|
.description=${'Select your experience level with web development'}
|
||||||
></dees-input-radiogroup>
|
></dees-input-radiogroup>
|
||||||
</div>
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'3. Advanced Options'} .subtitle=${'Using object format with keys and payloads'}>
|
<dees-panel .title=${'3. Advanced Options'} .subtitle=${'Using object format with keys and payloads'}>
|
||||||
@@ -106,41 +108,45 @@ export const demoFunc = () => html`
|
|||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'4. Survey Example'} .subtitle=${'Multiple radio groups for surveys and forms'}>
|
<dees-panel .title=${'4. Survey Example'} .subtitle=${'Multiple radio groups for surveys and forms'}>
|
||||||
<div class="demo-grid">
|
<dees-form>
|
||||||
<dees-input-radiogroup
|
<div class="demo-grid">
|
||||||
.label=${'How satisfied are you?'}
|
<dees-input-radiogroup
|
||||||
.options=${['Very Satisfied', 'Satisfied', 'Neutral', 'Dissatisfied', 'Very Dissatisfied']}
|
.label=${'How satisfied are you?'}
|
||||||
.selectedOption=${'Satisfied'}
|
.options=${['Very Satisfied', 'Satisfied', 'Neutral', 'Dissatisfied', 'Very Dissatisfied']}
|
||||||
></dees-input-radiogroup>
|
.selectedOption=${'Satisfied'}
|
||||||
|
></dees-input-radiogroup>
|
||||||
<dees-input-radiogroup
|
|
||||||
.label=${'Would you recommend us?'}
|
<dees-input-radiogroup
|
||||||
.options=${['Definitely', 'Probably', 'Not Sure', 'Probably Not', 'Definitely Not']}
|
.label=${'Would you recommend us?'}
|
||||||
.selectedOption=${'Probably'}
|
.options=${['Definitely', 'Probably', 'Not Sure', 'Probably Not', 'Definitely Not']}
|
||||||
></dees-input-radiogroup>
|
.selectedOption=${'Probably'}
|
||||||
</div>
|
></dees-input-radiogroup>
|
||||||
|
</div>
|
||||||
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'5. States & Validation'} .subtitle=${'Different states and validation examples'}>
|
<dees-panel .title=${'5. States & Validation'} .subtitle=${'Different states and validation examples'}>
|
||||||
<div class="demo-grid">
|
<dees-form>
|
||||||
<dees-input-radiogroup
|
<div class="demo-grid">
|
||||||
.label=${'Required Selection'}
|
<dees-input-radiogroup
|
||||||
.options=${['Option A', 'Option B', 'Option C']}
|
.label=${'Required Selection'}
|
||||||
.required=${true}
|
.options=${['Option A', 'Option B', 'Option C']}
|
||||||
.description=${'This field is required'}
|
.required=${true}
|
||||||
></dees-input-radiogroup>
|
.description=${'This field is required'}
|
||||||
|
></dees-input-radiogroup>
|
||||||
<dees-input-radiogroup
|
|
||||||
.label=${'Disabled State'}
|
<dees-input-radiogroup
|
||||||
.options=${['Disabled Option 1', 'Disabled Option 2', 'Disabled Option 3']}
|
.label=${'Disabled State'}
|
||||||
.selectedOption=${'Disabled Option 2'}
|
.options=${['Disabled Option 1', 'Disabled Option 2', 'Disabled Option 3']}
|
||||||
.disabled=${true}
|
.selectedOption=${'Disabled Option 2'}
|
||||||
></dees-input-radiogroup>
|
.disabled=${true}
|
||||||
</div>
|
></dees-input-radiogroup>
|
||||||
|
</div>
|
||||||
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'6. Settings Example'} .subtitle=${'Common patterns in application settings'}>
|
<dees-panel .title=${'6. Settings Example'} .subtitle=${'Common patterns in application settings'}>
|
||||||
<div class="input-group">
|
<dees-form>
|
||||||
<dees-input-radiogroup
|
<dees-input-radiogroup
|
||||||
.label=${'Theme Preference'}
|
.label=${'Theme Preference'}
|
||||||
.options=${[
|
.options=${[
|
||||||
@@ -165,7 +171,7 @@ export const demoFunc = () => html`
|
|||||||
.selectedOption=${'English'}
|
.selectedOption=${'English'}
|
||||||
.direction=${'horizontal'}
|
.direction=${'horizontal'}
|
||||||
></dees-input-radiogroup>
|
></dees-input-radiogroup>
|
||||||
</div>
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'7. Form Integration'} .subtitle=${'Works seamlessly with dees-form'}>
|
<dees-panel .title=${'7. Form Integration'} .subtitle=${'Works seamlessly with dees-form'}>
|
||||||
|
|||||||
@@ -115,24 +115,26 @@ export const demoFunc = () => html`
|
|||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'3. Limited Tags'} .subtitle=${'Restrict the number of tags users can add'}>
|
<dees-panel .title=${'3. Limited Tags'} .subtitle=${'Restrict the number of tags users can add'}>
|
||||||
<div class="grid-layout">
|
<dees-form>
|
||||||
<dees-input-tags
|
<div class="grid-layout">
|
||||||
.label=${'Top 3 Skills'}
|
<dees-input-tags
|
||||||
.placeholder=${'Add up to 3 skills...'}
|
.label=${'Top 3 Skills'}
|
||||||
.maxTags=${3}
|
.placeholder=${'Add up to 3 skills...'}
|
||||||
.value=${['Design', 'Development']}
|
.maxTags=${3}
|
||||||
.description=${'Maximum 3 tags allowed'}
|
.value=${['Design', 'Development']}
|
||||||
></dees-input-tags>
|
.description=${'Maximum 3 tags allowed'}
|
||||||
|
></dees-input-tags>
|
||||||
<dees-input-tags
|
|
||||||
.label=${'Categories (Max 5)'}
|
<dees-input-tags
|
||||||
.placeholder=${'Select categories...'}
|
.label=${'Categories (Max 5)'}
|
||||||
.maxTags=${5}
|
.placeholder=${'Select categories...'}
|
||||||
.suggestions=${['Blog', 'Tutorial', 'News', 'Review', 'Guide', 'Case Study', 'Interview']}
|
.maxTags=${5}
|
||||||
.value=${['Tutorial', 'Guide']}
|
.suggestions=${['Blog', 'Tutorial', 'News', 'Review', 'Guide', 'Case Study', 'Interview']}
|
||||||
.description=${'Choose up to 5 categories'}
|
.value=${['Tutorial', 'Guide']}
|
||||||
></dees-input-tags>
|
.description=${'Choose up to 5 categories'}
|
||||||
</div>
|
></dees-input-tags>
|
||||||
|
</div>
|
||||||
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'4. Required & Validation'} .subtitle=${'Tags input with validation requirements'}>
|
<dees-panel .title=${'4. Required & Validation'} .subtitle=${'Tags input with validation requirements'}>
|
||||||
|
|||||||
@@ -89,7 +89,7 @@ export const demoFunc = () => html`
|
|||||||
}
|
}
|
||||||
}}>
|
}}>
|
||||||
<dees-panel .title=${'Basic Text Inputs'} .subtitle=${'Standard text inputs with labels and descriptions'}>
|
<dees-panel .title=${'Basic Text Inputs'} .subtitle=${'Standard text inputs with labels and descriptions'}>
|
||||||
<div class="input-group">
|
<dees-form>
|
||||||
<dees-input-text
|
<dees-input-text
|
||||||
.label=${'Username'}
|
.label=${'Username'}
|
||||||
.value=${'johndoe'}
|
.value=${'johndoe'}
|
||||||
@@ -110,7 +110,7 @@ export const demoFunc = () => html`
|
|||||||
.value=${'secret123'}
|
.value=${'secret123'}
|
||||||
.key=${'password'}
|
.key=${'password'}
|
||||||
></dees-input-text>
|
></dees-input-text>
|
||||||
</div>
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
</dees-demowrapper>
|
</dees-demowrapper>
|
||||||
|
|
||||||
@@ -140,28 +140,30 @@ export const demoFunc = () => html`
|
|||||||
}
|
}
|
||||||
}}>
|
}}>
|
||||||
<dees-panel .title=${'Horizontal Layout'} .subtitle=${'Multiple inputs arranged horizontally for compact forms'}>
|
<dees-panel .title=${'Horizontal Layout'} .subtitle=${'Multiple inputs arranged horizontally for compact forms'}>
|
||||||
<div class="horizontal-group">
|
<dees-form>
|
||||||
<dees-input-text
|
<div class="horizontal-group">
|
||||||
.label=${'First Name'}
|
<dees-input-text
|
||||||
.value=${'John'}
|
.label=${'First Name'}
|
||||||
.layoutMode=${'horizontal'}
|
.value=${'John'}
|
||||||
.key=${'firstName'}
|
.layoutMode=${'horizontal'}
|
||||||
></dees-input-text>
|
.key=${'firstName'}
|
||||||
|
></dees-input-text>
|
||||||
<dees-input-text
|
|
||||||
.label=${'Last Name'}
|
<dees-input-text
|
||||||
.value=${'Doe'}
|
.label=${'Last Name'}
|
||||||
.layoutMode=${'horizontal'}
|
.value=${'Doe'}
|
||||||
.key=${'lastName'}
|
.layoutMode=${'horizontal'}
|
||||||
></dees-input-text>
|
.key=${'lastName'}
|
||||||
|
></dees-input-text>
|
||||||
<dees-input-text
|
|
||||||
.label=${'Age'}
|
<dees-input-text
|
||||||
.value=${'28'}
|
.label=${'Age'}
|
||||||
.layoutMode=${'horizontal'}
|
.value=${'28'}
|
||||||
.key=${'age'}
|
.layoutMode=${'horizontal'}
|
||||||
></dees-input-text>
|
.key=${'age'}
|
||||||
</div>
|
></dees-input-text>
|
||||||
|
</div>
|
||||||
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
</dees-demowrapper>
|
</dees-demowrapper>
|
||||||
|
|
||||||
@@ -181,7 +183,7 @@ export const demoFunc = () => html`
|
|||||||
}
|
}
|
||||||
}}>
|
}}>
|
||||||
<dees-panel .title=${'Label Positions'} .subtitle=${'Different label positioning options for various layouts'}>
|
<dees-panel .title=${'Label Positions'} .subtitle=${'Different label positioning options for various layouts'}>
|
||||||
<div class="input-group">
|
<dees-form>
|
||||||
<dees-input-text
|
<dees-input-text
|
||||||
.label=${'Label on Top (Default)'}
|
.label=${'Label on Top (Default)'}
|
||||||
.value=${'Standard layout'}
|
.value=${'Standard layout'}
|
||||||
@@ -195,25 +197,25 @@ export const demoFunc = () => html`
|
|||||||
></dees-input-text>
|
></dees-input-text>
|
||||||
|
|
||||||
<div class="grid-layout">
|
<div class="grid-layout">
|
||||||
<dees-input-text
|
<dees-input-text
|
||||||
.label=${'City'}
|
.label=${'City'}
|
||||||
.value=${'New York'}
|
.value=${'New York'}
|
||||||
.labelPosition=${'left'}
|
.labelPosition=${'left'}
|
||||||
></dees-input-text>
|
></dees-input-text>
|
||||||
|
|
||||||
<dees-input-text
|
<dees-input-text
|
||||||
.label=${'ZIP Code'}
|
.label=${'ZIP Code'}
|
||||||
.value=${'10001'}
|
.value=${'10001'}
|
||||||
.labelPosition=${'left'}
|
.labelPosition=${'left'}
|
||||||
></dees-input-text>
|
></dees-input-text>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
</dees-demowrapper>
|
</dees-demowrapper>
|
||||||
|
|
||||||
<dees-demowrapper>
|
<dees-demowrapper>
|
||||||
<dees-panel .title=${'Validation & States'} .subtitle=${'Different validation states and input configurations'}>
|
<dees-panel .title=${'Validation & States'} .subtitle=${'Different validation states and input configurations'}>
|
||||||
<div class="input-group">
|
<dees-form>
|
||||||
<dees-input-text
|
<dees-input-text
|
||||||
.label=${'Required Field'}
|
.label=${'Required Field'}
|
||||||
.required=${true}
|
.required=${true}
|
||||||
@@ -237,7 +239,7 @@ export const demoFunc = () => html`
|
|||||||
return { valid: false, message: 'Please enter a valid email address' };
|
return { valid: false, message: 'Please enter a valid email address' };
|
||||||
}}
|
}}
|
||||||
></dees-input-text>
|
></dees-input-text>
|
||||||
</div>
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
</dees-demowrapper>
|
</dees-demowrapper>
|
||||||
|
|
||||||
@@ -266,7 +268,7 @@ export const demoFunc = () => html`
|
|||||||
});
|
});
|
||||||
}}>
|
}}>
|
||||||
<dees-panel .title=${'Advanced Features'} .subtitle=${'Password visibility toggle and other advanced features'}>
|
<dees-panel .title=${'Advanced Features'} .subtitle=${'Password visibility toggle and other advanced features'}>
|
||||||
<div class="input-group">
|
<dees-form>
|
||||||
<dees-input-text
|
<dees-input-text
|
||||||
.label=${'Password with Toggle'}
|
.label=${'Password with Toggle'}
|
||||||
.isPasswordBool=${true}
|
.isPasswordBool=${true}
|
||||||
@@ -280,7 +282,7 @@ export const demoFunc = () => html`
|
|||||||
.value=${'sk-1234567890abcdef'}
|
.value=${'sk-1234567890abcdef'}
|
||||||
.infoText=${'Keep this key secure and never share it'}
|
.infoText=${'Keep this key secure and never share it'}
|
||||||
></dees-input-text>
|
></dees-input-text>
|
||||||
</div>
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
</dees-demowrapper>
|
</dees-demowrapper>
|
||||||
|
|
||||||
|
|||||||
@@ -116,7 +116,7 @@ export const demoFunc = () => html`
|
|||||||
|
|
||||||
<div class="demo-container">
|
<div class="demo-container">
|
||||||
<dees-panel .title=${'Basic Toggle'} .subtitle=${'Simple on/off toggle switch with drag support'}>
|
<dees-panel .title=${'Basic Toggle'} .subtitle=${'Simple on/off toggle switch with drag support'}>
|
||||||
<div class="toggle-group">
|
<dees-form>
|
||||||
<dees-input-toggle
|
<dees-input-toggle
|
||||||
.label=${'Enable feature'}
|
.label=${'Enable feature'}
|
||||||
.value=${false}
|
.value=${false}
|
||||||
@@ -135,12 +135,12 @@ export const demoFunc = () => html`
|
|||||||
.description=${'This toggle has additional helper text explaining its purpose'}
|
.description=${'This toggle has additional helper text explaining its purpose'}
|
||||||
.key=${'withDesc'}
|
.key=${'withDesc'}
|
||||||
></dees-input-toggle>
|
></dees-input-toggle>
|
||||||
</div>
|
</dees-form>
|
||||||
<p class="drag-hint">Tip: You can drag the toggle knob to switch states</p>
|
<p class="drag-hint">Tip: You can drag the toggle knob to switch states</p>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'Toggle States'} .subtitle=${'Different toggle states and configurations'}>
|
<dees-panel .title=${'Toggle States'} .subtitle=${'Different toggle states and configurations'}>
|
||||||
<div class="toggle-group">
|
<dees-form>
|
||||||
<dees-input-toggle
|
<dees-input-toggle
|
||||||
.label=${'Default (off)'}
|
.label=${'Default (off)'}
|
||||||
.value=${false}
|
.value=${false}
|
||||||
@@ -169,42 +169,44 @@ export const demoFunc = () => html`
|
|||||||
.required=${true}
|
.required=${true}
|
||||||
.description=${'This toggle cannot be turned off'}
|
.description=${'This toggle cannot be turned off'}
|
||||||
></dees-input-toggle>
|
></dees-input-toggle>
|
||||||
</div>
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'Horizontal Layout'} .subtitle=${'Toggles arranged horizontally for compact interfaces'}>
|
<dees-panel .title=${'Horizontal Layout'} .subtitle=${'Toggles arranged horizontally for compact interfaces'}>
|
||||||
<div class="horizontal-toggles">
|
<dees-form>
|
||||||
<dees-input-toggle
|
<div class="horizontal-toggles">
|
||||||
.label=${'WiFi'}
|
<dees-input-toggle
|
||||||
.value=${true}
|
.label=${'WiFi'}
|
||||||
.layoutMode=${'horizontal'}
|
.value=${true}
|
||||||
></dees-input-toggle>
|
.layoutMode=${'horizontal'}
|
||||||
|
></dees-input-toggle>
|
||||||
|
|
||||||
<dees-input-toggle
|
<dees-input-toggle
|
||||||
.label=${'Bluetooth'}
|
.label=${'Bluetooth'}
|
||||||
.value=${false}
|
.value=${false}
|
||||||
.layoutMode=${'horizontal'}
|
.layoutMode=${'horizontal'}
|
||||||
></dees-input-toggle>
|
></dees-input-toggle>
|
||||||
|
|
||||||
<dees-input-toggle
|
<dees-input-toggle
|
||||||
.label=${'GPS'}
|
.label=${'GPS'}
|
||||||
.value=${true}
|
.value=${true}
|
||||||
.layoutMode=${'horizontal'}
|
.layoutMode=${'horizontal'}
|
||||||
></dees-input-toggle>
|
></dees-input-toggle>
|
||||||
|
|
||||||
<dees-input-toggle
|
<dees-input-toggle
|
||||||
.label=${'NFC'}
|
.label=${'NFC'}
|
||||||
.value=${false}
|
.value=${false}
|
||||||
.layoutMode=${'horizontal'}
|
.layoutMode=${'horizontal'}
|
||||||
></dees-input-toggle>
|
></dees-input-toggle>
|
||||||
</div>
|
</div>
|
||||||
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'Settings Example'} .subtitle=${'Toggles in a typical settings context'}>
|
<dees-panel .title=${'Settings Example'} .subtitle=${'Toggles in a typical settings context'}>
|
||||||
<div class="settings-section">
|
<div class="settings-section">
|
||||||
<h4 class="section-title">Notification Settings</h4>
|
<h4 class="section-title">Notification Settings</h4>
|
||||||
|
|
||||||
<div class="toggle-group">
|
<dees-form>
|
||||||
<dees-input-toggle
|
<dees-input-toggle
|
||||||
.label=${'Push notifications'}
|
.label=${'Push notifications'}
|
||||||
.value=${true}
|
.value=${true}
|
||||||
@@ -232,7 +234,7 @@ export const demoFunc = () => html`
|
|||||||
.description=${'Vibrate for notifications'}
|
.description=${'Vibrate for notifications'}
|
||||||
.key=${'vibration'}
|
.key=${'vibration'}
|
||||||
></dees-input-toggle>
|
></dees-input-toggle>
|
||||||
</div>
|
</dees-form>
|
||||||
</div>
|
</div>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
@@ -243,7 +245,7 @@ export const demoFunc = () => html`
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="feature-toggles">
|
<div class="feature-toggles">
|
||||||
<div class="toggle-group">
|
<dees-form>
|
||||||
<dees-input-toggle
|
<dees-input-toggle
|
||||||
.label=${'Dark Mode'}
|
.label=${'Dark Mode'}
|
||||||
.value=${true}
|
.value=${true}
|
||||||
@@ -273,12 +275,12 @@ export const demoFunc = () => html`
|
|||||||
.value=${false}
|
.value=${false}
|
||||||
.key=${'beta'}
|
.key=${'beta'}
|
||||||
></dees-input-toggle>
|
></dees-input-toggle>
|
||||||
</div>
|
</dees-form>
|
||||||
</div>
|
</div>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'Interactive Example'} .subtitle=${'Toggle to see value changes in real-time'}>
|
<dees-panel .title=${'Interactive Example'} .subtitle=${'Toggle to see value changes in real-time'}>
|
||||||
<div class="toggle-group">
|
<dees-form>
|
||||||
<dees-input-toggle
|
<dees-input-toggle
|
||||||
.label=${'Airplane mode'}
|
.label=${'Airplane mode'}
|
||||||
.value=${false}
|
.value=${false}
|
||||||
@@ -300,7 +302,7 @@ export const demoFunc = () => html`
|
|||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
></dees-input-toggle>
|
></dees-input-toggle>
|
||||||
</div>
|
</dees-form>
|
||||||
|
|
||||||
<div class="interactive-section">
|
<div class="interactive-section">
|
||||||
<div id="airplane-output" class="output-text">Airplane mode: OFF</div>
|
<div id="airplane-output" class="output-text">Airplane mode: OFF</div>
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ export const demoFunc = () => html`
|
|||||||
|
|
||||||
<div class="demo-container">
|
<div class="demo-container">
|
||||||
<dees-panel .title=${'Basic Type List'} .subtitle=${'Add and remove items from a list'}>
|
<dees-panel .title=${'Basic Type List'} .subtitle=${'Add and remove items from a list'}>
|
||||||
<div class="input-group">
|
<dees-form>
|
||||||
<dees-input-typelist
|
<dees-input-typelist
|
||||||
.label=${'Tags'}
|
.label=${'Tags'}
|
||||||
.infoText=${'Add tags by typing and pressing Enter'}
|
.infoText=${'Add tags by typing and pressing Enter'}
|
||||||
@@ -58,11 +58,11 @@ export const demoFunc = () => html`
|
|||||||
.infoText=${'Add email addresses of team members'}
|
.infoText=${'Add email addresses of team members'}
|
||||||
.value=${['alice@example.com', 'bob@example.com']}
|
.value=${['alice@example.com', 'bob@example.com']}
|
||||||
></dees-input-typelist>
|
></dees-input-typelist>
|
||||||
</div>
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'Skills & Keywords'} .subtitle=${'Manage lists of skills and keywords'}>
|
<dees-panel .title=${'Skills & Keywords'} .subtitle=${'Manage lists of skills and keywords'}>
|
||||||
<div class="input-group">
|
<dees-form>
|
||||||
<dees-input-typelist
|
<dees-input-typelist
|
||||||
.label=${'Your Skills'}
|
.label=${'Your Skills'}
|
||||||
.infoText=${'List your professional skills'}
|
.infoText=${'List your professional skills'}
|
||||||
@@ -70,23 +70,23 @@ export const demoFunc = () => html`
|
|||||||
></dees-input-typelist>
|
></dees-input-typelist>
|
||||||
|
|
||||||
<div class="horizontal-group">
|
<div class="horizontal-group">
|
||||||
<dees-input-typelist
|
<dees-input-typelist
|
||||||
.label=${'Categories'}
|
.label=${'Categories'}
|
||||||
.layoutMode=${'horizontal'}
|
.layoutMode=${'horizontal'}
|
||||||
.value=${['Technology', 'Design', 'Business']}
|
.value=${['Technology', 'Design', 'Business']}
|
||||||
></dees-input-typelist>
|
></dees-input-typelist>
|
||||||
|
|
||||||
<dees-input-typelist
|
<dees-input-typelist
|
||||||
.label=${'Keywords'}
|
.label=${'Keywords'}
|
||||||
.layoutMode=${'horizontal'}
|
.layoutMode=${'horizontal'}
|
||||||
.value=${['innovation', 'startup', 'growth']}
|
.value=${['innovation', 'startup', 'growth']}
|
||||||
></dees-input-typelist>
|
></dees-input-typelist>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different input states for validation'}>
|
<dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different input states for validation'}>
|
||||||
<div class="input-group">
|
<dees-form>
|
||||||
<dees-input-typelist
|
<dees-input-typelist
|
||||||
.label=${'Project Dependencies'}
|
.label=${'Project Dependencies'}
|
||||||
.infoText=${'List all required npm packages'}
|
.infoText=${'List all required npm packages'}
|
||||||
@@ -100,7 +100,7 @@ export const demoFunc = () => html`
|
|||||||
.disabled=${true}
|
.disabled=${true}
|
||||||
.value=${['system', 'protected', 'readonly']}
|
.value=${['system', 'protected', 'readonly']}
|
||||||
></dees-input-typelist>
|
></dees-input-typelist>
|
||||||
</div>
|
</dees-form>
|
||||||
</dees-panel>
|
</dees-panel>
|
||||||
|
|
||||||
<dees-panel .title=${'Article Publishing Form'} .subtitle=${'Complete form with tag management'}>
|
<dees-panel .title=${'Article Publishing Form'} .subtitle=${'Complete form with tag management'}>
|
||||||
|
|||||||
Reference in New Issue
Block a user