@antha/gamepad-type 0.1.0

package/dist/default-models.js

@@ -0,0 +1,46 @@
+import { PredefinedGamepadBrand, PredefinedGamepadModel, } from './gamepad-model.js';
+/**
+ * Gamepad mappings of gamepad ids / names to GamepadModel defined by the
+ * [gamepad-type](https://www.npmjs.com/package/gamepad-type) package.
+ *
+ * @category Defaults
+ */
+export const defaultGamepadModelMap = {
+    /** Safari detected OEM Switch Pro gamepad name. */
+    'Pro Controller Extended Gamepad': PredefinedGamepadModel.SwitchPro,
+    /** Safari detected OEM Xbox Wireless gamepad name. */
+    'Xbox Wireless Controller Extended Gamepad': PredefinedGamepadModel.XboxWireless,
+    /** Safari detected OEM DualSense gamepad name. */
+    'DualSense Wireless Controller Extended Gamepad': PredefinedGamepadModel.PlaystationDualSense,
+    /** Safari detected OEM DualSense gamepad name. (Yes, another one.) */
+    'Wireless Controller Extended Gamepad': PredefinedGamepadModel.PlaystationDualSense,
+    /** Firefox detected OEM DualSense gamepad name. */
+    '54c-ce6-Wireless Controller': PredefinedGamepadModel.PlaystationDualSense,
+    /** Firefox detected OEM Xbox Wireless gamepad name. */
+    '45e-b13-Xbox Wireless Controller': PredefinedGamepadModel.XboxWireless,
+    /** Chrome detected OEM Switch Pro gamepad name. */
+    'Pro Controller (STANDARD GAMEPAD Vendor: 057e Product: 2009)': PredefinedGamepadModel.SwitchPro,
+    /** Chrome detected OEM DualSense gamepad name. */
+    'Wireless Controller (STANDARD GAMEPAD Vendor: 054c Product: 0ce6)': PredefinedGamepadModel.PlaystationDualSense,
+    /** Chrome detected OEM Xbox Wireless gamepad name. */
+    'Xbox Series X Controller (STANDARD GAMEPAD Vendor: 045e Product: 0b12)': PredefinedGamepadModel.XboxWireless,
+    /** Inputs from external users. */
+    'DUALSHOCK 4 Wireless Controller Extended Gamepad': PredefinedGamepadModel.PlaystationDualShock4, // e9ed532bca264299849b10d076040798
+    'DUALSHOCK 4 Wireless Controller (STANDARD GAMEPAD Vendor: 054c Product: 09cc)': PredefinedGamepadModel.PlaystationDualShock4, // 9e8343773463416683ac7501d766e682
+    '54c-9cc-DUALSHOCK 4 Wireless Controller': PredefinedGamepadModel.PlaystationDualShock4, // 25024a8747044b43b71608ffa13c18c7
+    'HID-compliant game controller (STANDARD GAMEPAD Vendor: 045e Product: 0b13)': PredefinedGamepadModel.XboxWireless, // issues #6578763126
+};
+/**
+ * PredefinedGamepadBrand for each PredefinedGamepadModel.
+ *
+ * @category Defaults
+ */
+export const defaultGamepadBrandMap = {
+    [PredefinedGamepadModel.SwitchPro]: PredefinedGamepadBrand.Nintendo,
+    [PredefinedGamepadModel.Xbox360]: PredefinedGamepadBrand.Microsoft,
+    [PredefinedGamepadModel.XboxWireless]: PredefinedGamepadBrand.Microsoft,
+    [PredefinedGamepadModel.PlaystationDualSense]: PredefinedGamepadBrand.Sony,
+    [PredefinedGamepadModel.PlaystationDualShock]: PredefinedGamepadBrand.Sony,
+    [PredefinedGamepadModel.PlaystationDualShock4]: PredefinedGamepadBrand.Sony,
+    [PredefinedGamepadModel.SteamDeck]: PredefinedGamepadBrand.Valve,
+};

package/dist/demo/elements/gamepad/vir-gamepad-axe.element.d.ts

@@ -0,0 +1,7 @@
+import { type GamepadInputDetails } from 'input-device-handler';
+import { type GamepadLayout } from '../../../index.js';
+export declare const VirGamepadAxe: import("element-vir").DeclarativeElementDefinition<"vir-gamepad-axe", {
+    gamepadInput: Readonly<GamepadInputDetails>;
+    gamepadBrand: string | undefined;
+    gamepadLayout: Readonly<GamepadLayout> | undefined;
+}, {}, {}, "vir-gamepad-axe-", "vir-gamepad-axe-color", readonly [], readonly []>;

package/dist/demo/elements/gamepad/vir-gamepad-axe.element.js

@@ -0,0 +1,61 @@
+import { css, defineElement, html } from 'element-vir';
+import { noNativeSpacing } from 'vira';
+import { getGamepadBrandColor } from '../../gamepad-brand-color.js';
+export const VirGamepadAxe = defineElement()({
+    tagName: 'vir-gamepad-axe',
+    cssVars: {
+        'vir-gamepad-axe-color': getGamepadBrandColor(undefined),
+    },
+    styles: ({ cssVars }) => {
+        return css `
+            :host {
+                display: block;
+                width: 200px;
+                border: 2px solid ${cssVars['vir-gamepad-axe-color'].value};
+                text-align: center;
+                position: relative;
+                background-color: white;
+            }
+
+            .progress {
+                z-index: 1;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 50%;
+                right: 50%;
+                border: 1px solid ${cssVars['vir-gamepad-axe-color'].value};
+                background-color: ${cssVars['vir-gamepad-axe-color'].value};
+            }
+
+            p {
+                ${noNativeSpacing};
+                position: relative;
+                z-index: 10;
+            }
+        `;
+    },
+    render({ inputs, host }) {
+        host.style.setProperty('--vir-gamepad-axe-color', getGamepadBrandColor(inputs.gamepadBrand));
+        const progressPercents = inputs.gamepadInput.value >= 0
+            ? {
+                left: 50,
+                right: 50 - inputs.gamepadInput.value * 50,
+            }
+            : {
+                left: 50 + inputs.gamepadInput.value * 50,
+                right: 50,
+            };
+        const progressStyle = css `
+            left: ${progressPercents.left}%;
+            right: ${progressPercents.right}%;
+        `;
+        const inputName = inputs.gamepadLayout?.inputMappings[inputs.gamepadInput.inputName] ||
+            inputs.gamepadInput.inputName;
+        return html `
+            <div class="progress" style=${progressStyle}></div>
+            <p class="axe-words">${inputName}</p>
+            <p>${inputs.gamepadInput.value.toFixed(1)}</p>
+        `;
+    },
+});

package/dist/demo/elements/gamepad/vir-gamepad-button.element.d.ts

@@ -0,0 +1,7 @@
+import { type GamepadInputDetails } from 'input-device-handler';
+import { type GamepadLayout } from '../../../index.js';
+export declare const VirGamepadButton: import("element-vir").DeclarativeElementDefinition<"vir-gamepad-button", {
+    gamepadInput: Readonly<GamepadInputDetails>;
+    gamepadBrand: string | undefined;
+    gamepadLayout: Readonly<GamepadLayout> | undefined;
+}, {}, {}, "vir-gamepad-button-", "vir-gamepad-button-button-size" | "vir-gamepad-button-color", readonly [], readonly []>;

package/dist/demo/elements/gamepad/vir-gamepad-button.element.js

@@ -0,0 +1,87 @@
+import { classMap, css, defineElement, html } from 'element-vir';
+import { DeviceInputType } from 'input-device-handler';
+import { getGamepadBrandColor } from '../../gamepad-brand-color.js';
+export const VirGamepadButton = defineElement()({
+    tagName: 'vir-gamepad-button',
+    cssVars: {
+        'vir-gamepad-button-button-size': '75px',
+        'vir-gamepad-button-color': getGamepadBrandColor(undefined),
+    },
+    styles: ({ cssVars }) => {
+        return css `
+            :host {
+                display: flex;
+                position: relative;
+                height: ${cssVars['vir-gamepad-button-button-size'].value};
+                width: ${cssVars['vir-gamepad-button-button-size'].value};
+                border: 2px solid ${cssVars['vir-gamepad-button-color'].value};
+                box-sizing: border-box;
+                border-radius: 50%;
+            }
+
+            .button-fill-wrapper {
+                box-sizing: border-box;
+                position: absolute;
+                top: -1px;
+                left: -1px;
+                width: calc(100% + 2px);
+                height: calc(100% + 2px);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+
+            .button-fill {
+                box-sizing: border-box;
+                width: 0%;
+                height: 0%;
+                pointer-events: none;
+                opacity: 1;
+                border-radius: 50%;
+                background-color: ${cssVars['vir-gamepad-button-color'].value};
+                border: 2px solid ${cssVars['vir-gamepad-button-color'].value};
+                z-index: 1;
+            }
+
+            .no-fill {
+                opacity: 0;
+            }
+
+            .button-name {
+                z-index: 4;
+                width: 100%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                text-align: center;
+            }
+        `;
+    },
+    render({ inputs, host }) {
+        if (inputs.gamepadInput.inputType !== DeviceInputType.Button) {
+            throw new Error(`
+                Incorrect input type '${inputs.gamepadInput.inputType}': expected
+                '${DeviceInputType.Button}'.
+            `);
+        }
+        host.style.setProperty('--vir-gamepad-button-color', getGamepadBrandColor(inputs.gamepadBrand));
+        const buttonFillStyle = css `
+            width: ${inputs.gamepadInput.value * 100}%;
+            height: ${inputs.gamepadInput.value * 100}%;
+        `;
+        const inputName = inputs.gamepadLayout?.inputMappings[inputs.gamepadInput.inputName] ||
+            inputs.gamepadInput.inputName;
+        return html `
+            <div class="button-fill-wrapper">
+                <div
+                    class="button-fill ${classMap({
+            'no-fill': !inputs.gamepadInput.value,
+        })}"
+                    style=${buttonFillStyle}
+                ></div>
+            </div>
+            <div class="button-name">${inputName}</div>
+        `;
+    },
+});

package/dist/demo/elements/gamepad/vir-gamepad-input.element.d.ts

@@ -0,0 +1,7 @@
+import { type GamepadInputDetails } from 'input-device-handler';
+import { type GamepadLayout } from '../../../index.js';
+export declare const VirGamepadInput: import("element-vir").DeclarativeElementDefinition<"vir-gamepad-input", {
+    gamepadInput: Readonly<GamepadInputDetails>;
+    gamepadBrand: string | undefined;
+    gamepadLayout: Readonly<GamepadLayout> | undefined;
+}, {}, {}, "vir-gamepad-input-circle", "vir-gamepad-input-", readonly [], readonly []>;

package/dist/demo/elements/gamepad/vir-gamepad-input.element.js

@@ -0,0 +1,38 @@
+import { css, defineElement, html } from 'element-vir';
+import { DeviceInputType } from 'input-device-handler';
+import { VirGamepadAxe } from './vir-gamepad-axe.element.js';
+import { VirGamepadButton } from './vir-gamepad-button.element.js';
+export const VirGamepadInput = defineElement()({
+    tagName: 'vir-gamepad-input',
+    hostClasses: {
+        'vir-gamepad-input-circle': ({ inputs }) => {
+            return inputs.gamepadInput.inputType === DeviceInputType.Button;
+        },
+    },
+    styles: ({ hostClasses }) => {
+        return css `
+            :host {
+                display: flex;
+            }
+
+            ${hostClasses['vir-gamepad-input-circle'].selector} {
+                border-radius: 50%;
+            }
+        `;
+    },
+    render({ inputs }) {
+        if (inputs.gamepadInput.inputType === DeviceInputType.Axe) {
+            return html `
+                <${VirGamepadAxe.assign(inputs)}></${VirGamepadAxe}>
+            `;
+        }
+        else if (inputs.gamepadInput.inputType === DeviceInputType.Button) {
+            return html `
+                <${VirGamepadButton.assign(inputs)}></${VirGamepadButton}>
+            `;
+        }
+        else {
+            return `Invalid gamepad type received: ${inputs.gamepadInput.inputType}`;
+        }
+    },
+});

package/dist/demo/elements/gamepad/vir-gamepad-inputs.element.d.ts

@@ -0,0 +1,20 @@
+import { type GamepadDevice } from 'input-device-handler';
+import { type GamepadLayout, type GamepadModelMap } from '../../../index.js';
+export declare const VirGamepadInputs: import("element-vir").DeclarativeElementDefinition<"vir-gamepad-inputs", {
+    gamepad: Readonly<GamepadDevice>;
+    gamepadLayout: Readonly<GamepadLayout> | undefined;
+    gamepadModelMap: Readonly<GamepadModelMap>;
+}, {}, {
+    gamepadInputClick: import("element-vir").DefineEvent<Readonly<Readonly<{
+        deviceName: string;
+        deviceKey: import("input-device-handler").GamepadInputDeviceKey;
+        deviceType: import("input-device-handler").InputDeviceType;
+        inputName: string;
+        inputValue: number;
+        details: Readonly<Readonly<{
+            inputName: string;
+            value: number;
+            inputType: import("input-device-handler").DeviceInputType;
+        }>>;
+    }>>>;
+}, "vir-gamepad-inputs-", "vir-gamepad-inputs-", readonly [], readonly []>;

package/dist/demo/elements/gamepad/vir-gamepad-inputs.element.js

@@ -0,0 +1,110 @@
+import { getObjectTypedKeys } from '@augment-vir/common';
+import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
+import { findMatchingGamepadModel, } from '../../../index.js';
+import { VirGamepadInput } from './vir-gamepad-input.element.js';
+export const VirGamepadInputs = defineElement()({
+    tagName: 'vir-gamepad-inputs',
+    events: {
+        gamepadInputClick: defineElementEvent(),
+    },
+    styles: css `
+        :host {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        .inputs {
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+
+        ${VirGamepadInput} {
+            cursor: pointer;
+            border: 1px solid transparent;
+        }
+
+        ${VirGamepadInput}:hover {
+            border-color: black;
+        }
+
+        .prefix.warning {
+            color: red;
+        }
+
+        .prefix {
+            font-weight: bold;
+        }
+
+        .prefix.info {
+            color: dodgerblue;
+        }
+    `,
+    render({ inputs, dispatch, events }) {
+        const { gamepadBrand } = findMatchingGamepadModel({
+            gamepad: inputs.gamepad.deviceName,
+            gamepadModelMap: inputs.gamepadModelMap,
+        });
+        const buttons = inputs.gamepad.deviceDetails.buttons.map((gamepadInput) => {
+            return html `
+                <${VirGamepadInput.assign({
+                gamepadBrand,
+                gamepadInput,
+                gamepadLayout: inputs.gamepadLayout,
+            })}
+                    ${listen('click', () => {
+                dispatch(new events.gamepadInputClick({
+                    details: gamepadInput,
+                    deviceKey: inputs.gamepad.deviceKey,
+                    deviceName: inputs.gamepad.deviceName,
+                    deviceType: inputs.gamepad.deviceType,
+                    inputName: gamepadInput.inputName,
+                    inputValue: gamepadInput.value,
+                }));
+            })}
+                ></${VirGamepadInput}>
+            `;
+        });
+        const axes = inputs.gamepad.deviceDetails.axes.map((gamepadInput) => {
+            return html `
+                <${VirGamepadInput.assign({
+                gamepadBrand,
+                gamepadInput,
+                gamepadLayout: inputs.gamepadLayout,
+            })}
+                    ${listen('click', () => {
+                dispatch(new events.gamepadInputClick({
+                    details: gamepadInput,
+                    deviceKey: inputs.gamepad.deviceKey,
+                    deviceName: inputs.gamepad.deviceName,
+                    deviceType: inputs.gamepad.deviceType,
+                    inputName: gamepadInput.inputName,
+                    inputValue: gamepadInput.value,
+                }));
+            })}
+                ></${VirGamepadInput}>
+            `;
+        });
+        const notesTemplate = inputs.gamepadLayout?.notes
+            ? getObjectTypedKeys(inputs.gamepadLayout.notes).map((noteType) => {
+                const note = inputs.gamepadLayout?.notes?.[noteType];
+                if (!note) {
+                    return '';
+                }
+                const prefix = noteType === 'info' ? 'Note' : 'WARNING';
+                return html `
+                      <p class="notes">
+                          <span class="prefix ${noteType}">${prefix}:</span>
+                          ${note}
+                      </p>
+                  `;
+            })
+            : '';
+        return html `
+            ${notesTemplate}
+            <div class="inputs">${buttons}</div>
+            <div class="inputs">${axes}</div>
+        `;
+    },
+});

package/dist/demo/elements/gamepad/vir-gamepad-name.element.d.ts

@@ -0,0 +1,11 @@
+import { type GamepadDevice } from 'input-device-handler';
+import { type GamepadModelMap } from '../../../index.js';
+export declare const VirGamepadName: import("element-vir").DeclarativeElementDefinition<"vir-gamepad-name", {
+    gamepad: Readonly<GamepadDevice>;
+    gamepadIndex: number;
+    gamepadModelMap: Readonly<GamepadModelMap>;
+}, {}, {
+    editMappingsClick: import("element-vir").DefineEvent<void>;
+    gamepadModelOverride: import("element-vir").DefineEvent<string>;
+    createNewModel: import("element-vir").DefineEvent<void>;
+}, "vir-gamepad-name-", "vir-gamepad-name-gamepad-brand-color", readonly [], readonly []>;

package/dist/demo/elements/gamepad/vir-gamepad-name.element.js

@@ -0,0 +1,158 @@
+import { assert } from '@augment-vir/assert';
+import { getEnumValues, getObjectTypedValues } from '@augment-vir/common';
+import { css, defineElement, defineElementEvent, html, listen, onDomCreated } from 'element-vir';
+import { noNativeFormStyles, noNativeSpacing } from 'vira';
+import { PredefinedGamepadModel, findMatchingGamepadModel, } from '../../../index.js';
+import { getGamepadBrandColor } from '../../gamepad-brand-color.js';
+import { kebabCaseToNameCase } from '../../util/casing.js';
+const createNewGamepadModelValue = 'create new gamepad model';
+export const VirGamepadName = defineElement()({
+    tagName: 'vir-gamepad-name',
+    cssVars: {
+        'vir-gamepad-name-gamepad-brand-color': getGamepadBrandColor(undefined),
+    },
+    events: {
+        editMappingsClick: defineElementEvent(),
+        gamepadModelOverride: defineElementEvent(),
+        createNewModel: defineElementEvent(),
+    },
+    styles: ({ cssVars }) => {
+        return css `
+            :host {
+                border-radius: 24px;
+                padding: 32px;
+                gap: 16px;
+                display: flex;
+                flex-direction: column;
+                background-color: ${cssVars['vir-gamepad-name-gamepad-brand-color'].value};
+                border: 2px solid ${cssVars['vir-gamepad-name-gamepad-brand-color'].value};
+                background-image: linear-gradient(
+                    hsla(0, 0%, 100%, 0.8),
+                    hsla(0, 0%, 100%, 0) 75px,
+                    hsla(0, 0%, 0%, 0.01) 75px,
+                    hsla(0, 0%, 100%, 0)
+                );
+                text-shadow: 0 2px 4px hsla(0, 0%, 100%, 0.7);
+                box-shadow: inset 0 5px 20px hsla(0, 0%, 100%, 0.9);
+            }
+
+            h2,
+            p {
+                ${noNativeSpacing}
+            }
+
+            h2 {
+                font-size: 2em;
+                display: flex;
+                align-items: center;
+                gap: 8px;
+            }
+
+            .subtitle {
+                color: #575757;
+            }
+
+            .subtitle:hover {
+                color: black;
+            }
+
+            button {
+                ${noNativeFormStyles};
+                align-self: center;
+                transition: 100ms;
+                border: 1px solid ${cssVars['vir-gamepad-name-gamepad-brand-color'].value};
+                background-color: white;
+                padding: 4px 8px;
+                font: inherit;
+                border-radius: 8px;
+                cursor: pointer;
+                font-weight: bold;
+            }
+
+            button:hover,
+            button:active {
+                color: ${cssVars['vir-gamepad-name-gamepad-brand-color'].value};
+                background-color: black;
+            }
+
+            select {
+                ${noNativeFormStyles};
+                flex-grow: 1;
+                padding: 2px 4px;
+                cursor: pointer;
+                width: 0;
+                font: inherit;
+            }
+        `;
+    },
+    render({ inputs, host, dispatch, events }) {
+        const { gamepadBrand, gamepadModel, gamepadModelDescription } = findMatchingGamepadModel({
+            gamepad: inputs.gamepad,
+            gamepadModelMap: inputs.gamepadModelMap,
+        });
+        host.style.setProperty('--vir-gamepad-name-gamepad-brand-color', getGamepadBrandColor(gamepadBrand));
+        const gamepadModelOptions = Array.from(new Set([
+            ...getEnumValues(PredefinedGamepadModel),
+            ...getObjectTypedValues(inputs.gamepadModelMap),
+        ]));
+        const gamepadTypeSelectTemplate = html `
+            <select
+                ${onDomCreated((element) => {
+            /**
+             * For some Reason the `?selected` attribute on the below `<option>` elements
+             * doesn't work here on Firefox.
+             */
+            assert.instanceOf(element, HTMLSelectElement);
+            if (gamepadModel) {
+                element.value = gamepadModel;
+            }
+        })}
+                ${listen('change', (event) => {
+            const element = event.currentTarget;
+            assert.instanceOf(element, HTMLSelectElement);
+            const value = element.value;
+            if (value === createNewGamepadModelValue) {
+                dispatch(new events.createNewModel());
+                if (gamepadModel) {
+                    element.value = gamepadModel;
+                }
+                else {
+                    element.value = '';
+                }
+            }
+            else {
+                dispatch(new events.gamepadModelOverride(value));
+            }
+        })}
+            >
+                ${gamepadModelOptions.map((model) => {
+            return html `
+                        <option ?selected=${gamepadModel === model} value=${model}>
+                            ${kebabCaseToNameCase(model)}
+                        </option>
+                    `;
+        })}
+                <option value=${createNewGamepadModelValue}>&gt; Enter New Gamepad Model</option>
+            </select>
+        `;
+        return html `
+            <h2>
+                <span>${inputs.gamepadIndex}:</span>
+                ${gamepadTypeSelectTemplate}
+            </h2>
+            <p class="subtitle">
+                "${inputs.gamepad.deviceName}"
+                <br />
+                <br />
+                ${gamepadModelDescription}
+            </p>
+            <button
+                ${listen('click', () => {
+            dispatch(new events.editMappingsClick());
+        })}
+            >
+                Edit Mappings
+            </button>
+        `;
+    },
+});

package/dist/demo/elements/gamepad/vir-gamepad.element.d.ts

@@ -0,0 +1,8 @@
+import { type GamepadDevice } from 'input-device-handler';
+import { type GamepadLayout, type GamepadModelMap } from '../../../index.js';
+export declare const VirGamepad: import("element-vir").DeclarativeElementDefinition<"vir-gamepad", {
+    gamepad: Readonly<GamepadDevice>;
+    gamepadIndex: number;
+    gamepadLayout: Readonly<GamepadLayout> | undefined;
+    gamepadModelMap: Readonly<GamepadModelMap>;
+}, {}, {}, "vir-gamepad-", "vir-gamepad-", readonly [], readonly []>;

package/dist/demo/elements/gamepad/vir-gamepad.element.js

@@ -0,0 +1,41 @@
+import { css, defineElement, html } from 'element-vir';
+import { VirGamepadInputs } from './vir-gamepad-inputs.element.js';
+import { VirGamepadName } from './vir-gamepad-name.element.js';
+export const VirGamepad = defineElement()({
+    tagName: 'vir-gamepad',
+    styles: css `
+        :host {
+            display: flex;
+            background-color: white;
+            color: black;
+            gap: 16px;
+            flex-wrap: wrap;
+            align-items: flex-start;
+        }
+
+        ${VirGamepadName} {
+            flex-grow: 1;
+            flex-basis: 600px;
+        }
+
+        ${VirGamepadInputs} {
+            flex-grow: 1000000;
+            flex-shrink: 1;
+            flex-basis: 300px;
+        }
+    `,
+    render({ inputs }) {
+        return html `
+            <${VirGamepadName.assign({
+            gamepad: inputs.gamepad,
+            gamepadIndex: inputs.gamepadIndex,
+            gamepadModelMap: inputs.gamepadModelMap,
+        })}></${VirGamepadName}>
+            <${VirGamepadInputs.assign({
+            gamepad: inputs.gamepad,
+            gamepadLayout: inputs.gamepadLayout,
+            gamepadModelMap: inputs.gamepadModelMap,
+        })}></${VirGamepadInputs}>
+        `;
+    },
+});

package/dist/demo/elements/modals/vir-create-new-type.modal.element.d.ts

@@ -0,0 +1,9 @@
+import { type GamepadDevice } from 'input-device-handler';
+export declare const VirCreateNewTypeModal: import("element-vir").DeclarativeElementDefinition<"vir-create-new-type-modal", {
+    gamepadDevices: ReadonlyArray<Readonly<GamepadDevice>>;
+    selectedGamepadIndex: number;
+}, {
+    newModelName: string;
+}, {
+    newModelCreate: import("element-vir").DefineEvent<string>;
+}, "vir-create-new-type-modal-", "vir-create-new-type-modal-", readonly [], readonly []>;