About
Renders the appropriate input widget for each property based on a type tag.
Supports types: string, email, date,
time, number, url, tel.
Fires ars-typed-property-editor:change with { properties } detail
on every input change. Supports readonly mode.
Contact Form (mixed types)
const editor = document.querySelector('ars-typed-property-editor');
editor.properties = { Name: 'Alice', Email: 'alice@example.com' };
editor.types = { Name: 'string', Email: 'email' };
All Supported Types
Readonly Mode
<ars-typed-property-editor readonly></ars-typed-property-editor>
editor.properties = { Name: 'Bob', Role: 'Admin' };
Empty State
Event Monitor
Listening for ars-typed-property-editor:change…
Theme Toggle
Usage
<ars-typed-property-editor id="editor"></ars-typed-property-editor>
<script type="module">
import { ArsTypedPropertyEditor } from 'ars-web-components';
const editor = document.getElementById('editor');
editor.properties = {
Name: 'Alice',
Email: 'alice@example.com',
Website: 'https://example.com',
Age: '30'
};
editor.types = {
Name: 'string',
Email: 'email',
Website: 'url',
Age: 'number'
};
editor.addEventListener('ars-typed-property-editor:change', (e) => {
console.log('Properties:', e.detail.properties);
});
</script>