packages/web-components/src/index.html

<!DOCTYPE html>
<html dir="ltr" lang="en">
    <head>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
        />
        <title>Stencil Component Starter</title>

        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link
            href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;300;400&family=Roboto:wght@100;300;400;500;700;900&display=swap"
            rel="stylesheet"
        />
        <script type="module" src="/build/astro-web-components.esm.js"></script>
        <script nomodule src="/build/astro-web-components.js"></script>
        <link rel="stylesheet" href="/build/astro-web-components.css" />
        <style>
            section {
                padding: 2rem;
                display: flex;
                flex-direction: row;
                gap: 1rem;
            }
            .valspan {
                display: inline-block;
                margin-top: 0.5rem;
            }
        </style>
    </head>

    <body>
        <section>
            <h2 style="margin: 0">Control Group</h2>
            <span><input type="time" /><br /></span>
            <span><input type="datetime-local" /><br /></span>
        </section>
        <section>
            <rux-time-input label="12 Hour Time"></rux-time-input>
            <rux-time-input
                label="24 Hour Time"
                timeformat="24h"
                include-seconds
            ></rux-time-input>
            <rux-time-input timeformat="24h" disabled invalid></rux-time-input>
        </section>

        <script>
            //write value below input
            const spans = [...document.querySelectorAll('span')]
            spans.forEach((span) => {
                const input = span.querySelector('rux-input, input')
                const valspan = document.createElement('span')
                valspan.classList.add('valspan')
                valspan.textContent = 'Input Value:'
                span.appendChild(valspan)
                if (input.nodeName === 'RUX-INPUT') {
                    input.addEventListener('ruxinput', () => {
                        valspan.textContent = 'Input Value: ' + input.value
                    })
                    input.addEventListener('ruxchange', () => {
                        valspan.textContent = 'Input Value: ' + input.value
                    })
                } else {
                    input.addEventListener('input', () => {
                        valspan.textContent = 'Input Value: ' + input.value
                    })
                }
            })
            document.addEventListener('ruxchange', () =>
                console.log('RUXCHANGE')
            )
            document.addEventListener('ruxinput', () => console.log('RUXINPUT'))
        </script>
    </body>
</html>