{ // Demonstrate basic text input functionality const inputs = elementArg.querySelectorAll('dees-input-text'); inputs.forEach((input: DeesInputText) => { input.addEventListener('changeSubject', ((event: CustomEvent) => { console.log(`Input "${input.label}" changed to:`, input.getValue()); }) as EventListener); input.addEventListener('blur', () => { console.log(`Input "${input.label}" lost focus`); }); }); // Show password visibility toggle const passwordInput = elementArg.querySelector('dees-input-text[key="password"]') as DeesInputText; if (passwordInput) { console.log('Password input includes visibility toggle'); } }}>

{ // Demonstrate horizontal layout behavior const horizontalInputs = elementArg.querySelectorAll('dees-input-text'); // Check that inputs are properly spaced horizontally horizontalInputs.forEach((input: DeesInputText) => { const computedStyle = window.getComputedStyle(input); console.log(`Horizontal input "${input.label}" display:`, computedStyle.display); }); // Track value changes const firstNameInput = elementArg.querySelector('dees-input-text[key="firstName"]'); const lastNameInput = elementArg.querySelector('dees-input-text[key="lastName"]'); if (firstNameInput && lastNameInput) { const updateFullName = () => { const firstName = (firstNameInput as DeesInputText).getValue(); const lastName = (lastNameInput as DeesInputText).getValue(); console.log(`Full name: ${firstName} ${lastName}`); }; firstNameInput.addEventListener('changeSubject', updateFullName); lastNameInput.addEventListener('changeSubject', updateFullName); } }}>

{ // Demonstrate different label positions const inputs = elementArg.querySelectorAll('dees-input-text'); inputs.forEach((input: DeesInputText) => { const position = input.labelPosition; console.log(`Input "${input.label}" has label position: ${position}`); }); // Show how label position affects layout const leftLabelInputs = elementArg.querySelectorAll('dees-input-text[labelPosition="left"]'); if (leftLabelInputs.length > 0) { console.log(`${leftLabelInputs.length} inputs have left-aligned labels for inline layout`); } }}>

{ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (emailRegex.test(value)) { return { valid: true, message: 'Email address is valid' }; } return { valid: false, message: 'Please enter a valid email address' }; }} >

{ // Track password visibility toggles const passwordInputs = elementArg.querySelectorAll('dees-input-text[isPasswordBool]'); passwordInputs.forEach((_input) => { const input = _input as DeesInputText; // Monitor for toggle button clicks within shadow DOM const checkToggle = () => { const inputEl = input.shadowRoot?.querySelector('input'); if (inputEl) { console.log(`Password field "${input.label}" type:`, inputEl.type); } }; // Use MutationObserver to detect changes if (input.shadowRoot) { const observer = new MutationObserver(checkToggle); const inputEl = input.shadowRoot.querySelector('input'); if (inputEl) { observer.observe(inputEl, { attributes: true, attributeFilter: ['type'] }); } } }); }}>

{ // Set up interactive example const dynamicInput = elementArg.querySelector('dees-input-text'); const output = elementArg.querySelector('#text-input-output'); if (dynamicInput && output) { // Update output on every change dynamicInput.addEventListener('changeSubject', ((event: CustomEvent) => { const value = (event.detail as DeesInputText).getValue(); output.textContent = `Current value: "${value}"`; }) as EventListener); // Also track focus/blur events dynamicInput.addEventListener('focus', () => { console.log('Input focused'); }); dynamicInput.addEventListener('blur', () => { console.log('Input blurred'); }); // Track keypress events let keypressCount = 0; dynamicInput.addEventListener('keydown', () => { keypressCount++; console.log(`Keypress count: ${keypressCount}`); }); } }}>

Current value: ""