iobroker.mywebui 1.192.1 → 1.193.0

package/README.md

@@ -302,6 +302,13 @@ runtime.html?screenName=screen2
 	Placeholder for next versions:
 	### __WORK IN PROGRESS__
 -->
+### 1.193.0 (2026-10-16)
+* (runtime) **confirmed values — the screen shows what the device holds, not what was asked for.** While a write waits for the driver's ack, its echo (`ack: false`) reaches no binding or subscriber: every control bound to the state keeps the old value, and reads answer with it too. The driver's ack brings the new value. When no ack comes (timeout, refused, no right), the value shown before the write goes back to every subscriber — an input shows its old number, a switch its old position — and nothing is written back to ioBroker. Driver states and `alias.*` only; `0_userdata`, `local_` and system states behave as before. Tried on the live plant with modbus.0 down: `66` typed into *input_with_button* went back to `90` after the 3.0 s wait
+* (runtime) `IOB.whenWriteConfirmed(id)` — the outcome of the last write for scripts: `{ confirmed: true | false | null, status, reason, ackValue, ms, restored }`. *input_with_button* logs *confirmed* / *NOT confirmed* with it instead of "Value written" right after sending
+* (runtime) read quality marks a value written but never confirmed (`ack: false`, orange dashed `⋯`) — a page opened after such a write cannot know the value before it
+* (designer) Settings → Write feedback → *Not confirmed: show the old value again* (on), a *Restore* column per driver instance; `write-feedback-restore="off"` for one control or container; Read quality → *Mark values never confirmed*
+* (docs) bindings.md *Confirmed values* + *IOB.whenWriteConfirmed*; status-indicators (+az); custom-controls (+az) and npm-widgets checklists: a control keeping its own value must take every update, also one equal to the last
+
 ### 1.192.1 (2026-10-16)
 * (designer) an event bound as a template expression (`@click="[[IOB.setState(…)]]"`) is no longer taken for a script function name: double-clicking it wrote `export function [[IOB.setState(…)]](…)` into the screen script, and the whole script failed with a SyntaxError (`tests/write-feedback`). Such events are shown as *binding* (blue) and open the context menu instead
 * (runtime, designer) grid layout: a bare `fr` track is bounded (`1fr` → `minmax(0, 1fr)`), so a wide or tall element in a cell no longer grows its track past the screen. On a phone the `start` screen's `1fr 1fr` columns were 123 + 343 px on a 411 px display and its first row 2 347 px tall; now 202 + 202 px and equal rows. A screen inside a grid / flex cell of another screen scrolls inside its cell

package/default-controls/controls/input_controls/input_with_button.control

@@ -1 +1 @@
-{"html": "<div id=\"main-container\" style=\"display:flex;gap:8px;align-items:stretch;width:100%;height:100%;font:&quot;Times New Roman&quot;, serif;\">\n    <!-- Input Container -->\n    <div id=\"input-container\" style=\"position:relative;flex:1;display:flex;align-items:center;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;background:rgb(240, 240, 240);padding:4px 8px;\">\n        <input id=\"text-input\" type=\"text\" placeholder style=\"flex:1;border:initial none initial;outline:none;padding:4px;color:var(--ui-text,#333);background:transparent;font:14px &quot;Times New Roman&quot;, serif;\">\n        <!-- Numberpad Icon (hidden by default) -->        <svg id=\"numberpad-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" title=\"Numberpad\" style=\"cursor:pointer;fill:#666;margin-left:4px;display:none;\">\n            <rect x=\"3\" y=\"3\" width=\"4\" height=\"4\" rx=\"1\"></rect>\n            <rect x=\"10\" y=\"3\" width=\"4\" height=\"4\" rx=\"1\"></rect>\n            <rect x=\"17\" y=\"3\" width=\"4\" height=\"4\" rx=\"1\"></rect>\n            <rect x=\"3\" y=\"10\" width=\"4\" height=\"4\" rx=\"1\"></rect>\n            <rect x=\"10\" y=\"10\" width=\"4\" height=\"4\" rx=\"1\"></rect>\n            <rect x=\"17\" y=\"10\" width=\"4\" height=\"4\" rx=\"1\"></rect>\n            <rect x=\"3\" y=\"17\" width=\"4\" height=\"4\" rx=\"1\"></rect>\n            <rect x=\"10\" y=\"17\" width=\"11\" height=\"4\" rx=\"1\"></rect>\n        </svg>\n    </div>\n    <!-- Button -->\n    <button id=\"submit-btn\" style=\"color:var(--ui-text,#fff);border:initial none initial;border-radius:4px;cursor:pointer;white-space:nowrap;min-width:80px;background:rgb(108, 117, 125);font:14px &quot;Times New Roman&quot;, serif;padding:8px 16px;\">\n<t-t>input_with_button.volume</t-t>\n    </button>\n</div>\n<!-- Numberpad Dialog -->\n<dialog id=\"numberpad-dialog\" style=\"border:2px solid var(--ui-surface,rgb(90, 122, 122));border-radius:8px;padding:0px;-webkit-backdrop-filter:var(--ui-backdrop,none);backdrop-filter:var(--ui-backdrop,none);background:var(--ui-input,rgb(255, 255, 255));\">\n    <div id=\"dialog-header\" style=\"color:var(--ui-text,#fff);padding:12px;display:flex;justify-content:space-between;align-items:center;background:var(--ui-surface,rgb(90, 122, 122));\">\n        <h3 id=\"dialog-title\" style=\"margin:0px;font:16px &quot;Times New Roman&quot;, serif;\">Numberpad</h3>\n        <button id=\"close-numberpad\" style=\"border:initial none initial;color:var(--ui-text,#fff);cursor:pointer;padding:0px;width:30px;height:30px;background:transparent;font:24px &quot;Times New Roman&quot;, serif;\">×</button>\n    </div>\n    <div id=\"numberpad-body\" style=\"padding:16px;\">\n        <!-- Display --><input id=\"numberpad-display\" type=\"text\" readonly style=\"width:100%;padding:2px;text-align:right;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;margin-bottom:12px;background:rgb(249, 249, 249);font:20px &quot;Times New Roman&quot;, serif;\"><!-- Numberpad Grid -->\n<div style=\"display:grid;grid-template-columns:repeat(3, 60px);gap:8px;\">\n            <button class=\"num-btn\" data-value=\"7\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;cursor:pointer;background:var(--ui-input,rgb(255, 255, 255));font:18px &quot;Times New Roman&quot;, serif;\">7</button>\n            <button class=\"num-btn\" data-value=\"8\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;cursor:pointer;background:var(--ui-input,rgb(255, 255, 255));font:18px &quot;Times New Roman&quot;, serif;\">8</button>\n            <button class=\"num-btn\" data-value=\"9\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;cursor:pointer;background:var(--ui-input,rgb(255, 255, 255));font:18px &quot;Times New Roman&quot;, serif;\">9</button>\n            <button class=\"num-btn\" data-value=\"4\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;cursor:pointer;background:var(--ui-input,rgb(255, 255, 255));font:18px &quot;Times New Roman&quot;, serif;\">4</button>\n            <button class=\"num-btn\" data-value=\"5\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;cursor:pointer;background:var(--ui-input,rgb(255, 255, 255));font:18px &quot;Times New Roman&quot;, serif;\">5</button>\n            <button class=\"num-btn\" data-value=\"6\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;cursor:pointer;background:var(--ui-input,rgb(255, 255, 255));font:18px &quot;Times New Roman&quot;, serif;\">6</button>\n            <button class=\"num-btn\" data-value=\"1\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;cursor:pointer;background:var(--ui-input,rgb(255, 255, 255));font:18px &quot;Times New Roman&quot;, serif;\">1</button>\n            <button class=\"num-btn\" data-value=\"2\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;cursor:pointer;background:var(--ui-input,rgb(255, 255, 255));font:18px &quot;Times New Roman&quot;, serif;\">2</button>\n            <button class=\"num-btn\" data-value=\"3\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;cursor:pointer;background:var(--ui-input,rgb(255, 255, 255));font:18px &quot;Times New Roman&quot;, serif;\">3</button>\n            <button class=\"num-btn\" data-value=\"0\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;cursor:pointer;grid-column:span 2;background:var(--ui-input,rgb(255, 255, 255));font:18px &quot;Times New Roman&quot;, serif;\">0</button>\n            <button class=\"num-btn\" data-value=\".\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;cursor:pointer;background:var(--ui-input,rgb(255, 255, 255));font:18px &quot;Times New Roman&quot;, serif;\">.</button>\n            <button id=\"num-clear\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;color:var(--ui-text,#fff);cursor:pointer;grid-column:span 2;background:rgb(255, 107, 107);font:14px &quot;Times New Roman&quot;, serif;\">\n<t-t>input_with_button.clear</t-t>\n            </button>\n            <button id=\"num-backspace\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;color:var(--ui-text,#fff);cursor:pointer;background:rgb(255, 165, 0);font:14px &quot;Times New Roman&quot;, serif;\">←</button>\n        </div>\n        <!-- OK Button --><button id=\"num-ok\" style=\"width:100%;padding:12px;margin-top:12px;border:initial none initial;border-radius:4px;color:var(--ui-text,#fff);cursor:pointer;background:var(--ui-surface,rgb(90, 122, 122));font:16px &quot;Times New Roman&quot;, serif;\">OK</button>\n    </div>\n</dialog>\n", "script": "export function init(instance) {\n    //instance._bindingsRefresh?.();\n\n    applyTheming(instance);\n    updateControl(instance);\n\n    instance._assignEvent('input-type-changed', () => updateControl(instance));\n    instance._assignEvent('button-text-changed', () => updateControl(instance));\n    instance._assignEvent('placeholder-changed', () => updateControl(instance));\n    instance._assignEvent('theme-changed', () => applyTheming(instance));\n    instance._assignEvent('state-id-changed', () => { });\n\n    const input = instance._getDomElement('text-input');\n    const submitBtn = instance._getDomElement('submit-btn');\n    const numberpadIcon = instance._getDomElement('numberpad-icon');\n    const numberpadDialog = instance._getDomElement('numberpad-dialog');\n    const numberpadDisplay = instance._getDomElement('numberpad-display');\n    const closeNumberpad = instance._getDomElement('close-numberpad');\n    const numOk = instance._getDomElement('num-ok');\n    const numClear = instance._getDomElement('num-clear');\n    const numBackspace = instance._getDomElement('num-backspace');\n\n    window.addEventListener('languageChanged', () => {\n        if (input) {\n            input.placeholder = t('input_with_button.addvalue');\n        }\n    });\n\n    // Subscribe to state changes\n    let stateSubscription = null;\n    function subscribeToState() {\n        // Unsubscribe from previous state\n        if (stateSubscription) {\n            window.IOB.unsubscribeState(stateSubscription);\n            stateSubscription = null;\n        }\n\n        // Subscribe to new state\n        const stateId = instance.stateId;\n        if (stateId) {\n            stateSubscription = window.IOB.subscribeState(stateId, (id, state) => {\n                const input = instance._getDomElement('text-input');\n                if (input && state && state.val !== undefined) {\n                    input.value = state.val;\n                }\n            });\n\n            // Load initial value\n            window.IOB.getState(stateId).then(state => {\n                const input = instance._getDomElement('text-input');\n                if (input && state && state.val !== undefined) {\n                    input.value = state.val;\n                }\n            });\n        }\n    }\n\n    subscribeToState();\n\n    // Submit function\n    async function submitValue() {\n        const value = input.value;\n        const stateId = instance.stateId;\n\n        if (!stateId) {\n            console.error('State ID not configured');\n            return;\n        }\n\n        try {\n            let finalValue = value;\n\n            // Convert based on input type\n            if (instance.inputType === 'number') {\n                finalValue = parseFloat(value);\n                if (isNaN(finalValue)) {\n                    console.error('Invalid number:', value);\n                    return;\n                }\n            } else if (instance.inputType === 'integer') {\n                finalValue = parseInt(value);\n                if (isNaN(finalValue)) {\n                    console.error('Invalid integer:', value);\n                    return;\n                }\n            }\n\n            await window.IOB.setState(stateId, finalValue);\n            console.log('Value written to state:', stateId, finalValue);\n\n            // Optional: Clear input after submit\n            if (instance.clearAfterSubmit === true) {\n                input.value = '';\n            }\n        } catch (err) {\n            console.error('Error writing to state:', err);\n        }\n    }\n\n    // Enter key handler\n    if (input) {\n        input.addEventListener('keypress', (e) => {\n            if (e.key === 'Enter') {\n                submitValue();\n            }\n        });\n    }\n\n    // Submit button handler\n    if (submitBtn) {\n        submitBtn.addEventListener('click', () => {\n            submitValue();\n        });\n    }\n\n    // Numberpad icon handler\n    if (numberpadIcon && numberpadDialog) {\n        numberpadIcon.addEventListener('click', () => {\n            numberpadDisplay.value = input.value || '';\n            numberpadDialog.showModal();\n        });\n    }\n    // Numberpad buttons\n    const numBtns = instance.shadowRoot.querySelectorAll('.num-btn');\n    numBtns.forEach(btn => {\n        btn.addEventListener('click', () => {\n            numberpadDisplay.value += btn.dataset.value;\n        });\n    });\n\n    // Numberpad clear\n    if (numClear) {\n        numClear.addEventListener('click', () => {\n            numberpadDisplay.value = '';\n        });\n    }\n\n    // Numberpad backspace\n    if (numBackspace) {\n        numBackspace.addEventListener('click', () => {\n            numberpadDisplay.value = numberpadDisplay.value.slice(0, -1);\n        });\n    }\n\n    // Numberpad OK\n    if (numOk) {\n        numOk.addEventListener('click', () => {\n            input.value = numberpadDisplay.value;\n            numberpadDialog.close();\n        });\n    }\n\n    // Close numberpad\n    if (closeNumberpad) {\n        closeNumberpad.addEventListener('click', () => {\n            numberpadDialog.close();\n        });\n    }\n\n    // Close dialog on outside click\n    if (numberpadDialog) {\n        numberpadDialog.addEventListener('click', (e) => {\n            const rect = numberpadDialog.getBoundingClientRect();\n            if (e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom) {\n                numberpadDialog.close();\n            }\n        });\n    }\n}\n\n\nfunction updateControl(instance) {\n    const input = instance._getDomElement('text-input');\n    const submitBtn = instance._getDomElement('submit-btn');\n    const numberpadIcon = instance._getDomElement('numberpad-icon');\n\n    // Update input type\n    if (input) {\n        const inputType = instance.inputType || 'string';\n\n        if (inputType === 'password') {\n            input.type = 'password';\n        } else if (inputType === 'number' || inputType === 'integer') {\n            input.type = 'text';\n        } else {\n            input.type = 'text';\n        }\n\n        //input.placeholder = instance.placeholder || 'Dəyər daxil edin';\n    }\n\n    // Show/hide numberpad icon\n    if (numberpadIcon) {\n        const showNumberpad = instance.inputType === 'number' || instance.inputType === 'integer';\n        numberpadIcon.style.display = showNumberpad ? 'block' : 'none';\n    }\n\n}\n\nfunction applyTheming(instance) {\n    const theme = instance.theme || 'default';\n\n    const themes = {\n        'default': { inputBg: 'var(--ui-input,#f0f0f0)', inputBorder: 'var(--ui-border,#ccc)', inputText: 'var(--ui-text,#333)', btnBg: 'var(--ui-surface-2,#6c757d)', btnText: 'var(--ui-text,#fff)', headerBg: 'var(--ui-surface,#5a7a7a)' },\n        'dark': { inputBg: '#2d3436', inputBorder: '#000', inputText: '#fff', btnBg: '#636e72', btnText: '#fff', headerBg: '#2d3436' },\n        'light': { inputBg: '#fff', inputBorder: '#dfe6e9', inputText: '#2d3436', btnBg: '#b2bec3', btnText: '#2d3436', headerBg: '#dfe6e9' },\n        'blue': { inputBg: '#dfe6e9', inputBorder: '#74b9ff', inputText: '#0984e3', btnBg: '#0984e3', btnText: '#fff', headerBg: '#0984e3' },\n        'green': { inputBg: '#d4f1e8', inputBorder: '#55efc4', inputText: '#00b894', btnBg: '#00b894', btnText: '#fff', headerBg: '#00b894' },\n        'red': { inputBg: '#ffcccc', inputBorder: '#ff7675', inputText: '#d63031', btnBg: '#d63031', btnText: '#fff', headerBg: '#d63031' },\n        'purple': { inputBg: '#e5dbff', inputBorder: '#a29bfe', inputText: '#6c5ce7', btnBg: '#6c5ce7', btnText: '#fff', headerBg: '#6c5ce7' }\n    };\n\n    const colors = themes[theme] || themes['default'];\n\n    // Input container\n    const inputContainer = instance._getDomElement('input-container');\n    if (inputContainer) {\n        inputContainer.style.background = colors.inputBg;\n        inputContainer.style.borderColor = colors.inputBorder;\n    }\n\n    // Input text\n    const input = instance._getDomElement('text-input');\n    if (input) {\n        input.style.color = colors.inputText;\n    }\n\n    // Numberpad icon\n    const numberpadIcon = instance._getDomElement('numberpad-icon');\n    if (numberpadIcon) {\n        numberpadIcon.style.fill = colors.inputText;\n    }\n\n    // Submit button\n    const submitBtn = instance._getDomElement('submit-btn');\n    if (submitBtn) {\n        submitBtn.style.background = colors.btnBg;\n        submitBtn.style.color = colors.btnText;\n    }\n\n    // Dialog header\n    const dialogHeader = instance._getDomElement('dialog-header');\n    if (dialogHeader) {\n        dialogHeader.style.background = colors.headerBg;\n    }\n\n    // Dialog\n    const dialog = instance._getDomElement('numberpad-dialog');\n    if (dialog) {\n        dialog.style.borderColor = colors.headerBg;\n    }\n\n    // OK button in numberpad\n    const numOk = instance._getDomElement('num-ok');\n    if (numOk) {\n        numOk.style.background = colors.headerBg;\n    }\n}", "properties": {"inputType": {"type": "enum", "default": "string", "values": ["string", "number", "integer", "password"]}, "placeholder": {"type": "string", "default": "Dəyər daxil edin"}, "stateId": {"type": "signal"}, "clearAfterSubmit": {"type": "boolean"}, "theme": {"type": "enum", "default": "default", "values": ["default", "dark", "light", "blue", "green", "red", "purple"]}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}, "translations": {"az": {"input_with_button": {"addvalue": "Dəyər daxil edin", "volume": "Həcm Yaz", "clear": "Təmizlə"}}, "ru": {"input_with_button": {"addvalue": "Введите значение", "volume": "Введите объём", "clear": "Очистить"}}, "de": {"input_with_button": {"addvalue": "Wert eingeben", "volume": "Volumen eingeben", "clear": "Löschen"}}, "en": {"input_with_button": {"addvalue": "Enter value", "volume": "Enter Volume", "clear": "Clear"}}, "tr": {"input_with_button": {"addvalue": "Değer girin", "volume": "Hacim Girin", "clear": "Temizle"}}}}
+{"html":"<div id=\"main-container\" style=\"display:flex;gap:8px;align-items:stretch;width:100%;height:100%;font:&quot;Times New Roman&quot;, serif;\">\n    <!-- Input Container -->\n    <div id=\"input-container\" style=\"position:relative;flex:1;display:flex;align-items:center;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;background:rgb(240, 240, 240);padding:4px 8px;\">\n        <input id=\"text-input\" type=\"text\" placeholder style=\"flex:1;border:initial none initial;outline:none;padding:4px;color:var(--ui-text,#333);background:transparent;font:14px &quot;Times New Roman&quot;, serif;\">\n        <!-- Numberpad Icon (hidden by default) -->        <svg id=\"numberpad-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" title=\"Numberpad\" style=\"cursor:pointer;fill:#666;margin-left:4px;display:none;\">\n            <rect x=\"3\" y=\"3\" width=\"4\" height=\"4\" rx=\"1\"></rect>\n            <rect x=\"10\" y=\"3\" width=\"4\" height=\"4\" rx=\"1\"></rect>\n            <rect x=\"17\" y=\"3\" width=\"4\" height=\"4\" rx=\"1\"></rect>\n            <rect x=\"3\" y=\"10\" width=\"4\" height=\"4\" rx=\"1\"></rect>\n            <rect x=\"10\" y=\"10\" width=\"4\" height=\"4\" rx=\"1\"></rect>\n            <rect x=\"17\" y=\"10\" width=\"4\" height=\"4\" rx=\"1\"></rect>\n            <rect x=\"3\" y=\"17\" width=\"4\" height=\"4\" rx=\"1\"></rect>\n            <rect x=\"10\" y=\"17\" width=\"11\" height=\"4\" rx=\"1\"></rect>\n        </svg>\n    </div>\n    <!-- Button -->\n    <button id=\"submit-btn\" style=\"color:var(--ui-text,#fff);border:initial none initial;border-radius:4px;cursor:pointer;white-space:nowrap;min-width:80px;background:rgb(108, 117, 125);font:14px &quot;Times New Roman&quot;, serif;padding:8px 16px;\">\n<t-t>input_with_button.volume</t-t>\n    </button>\n</div>\n<!-- Numberpad Dialog -->\n<dialog id=\"numberpad-dialog\" style=\"border:2px solid var(--ui-surface,rgb(90, 122, 122));border-radius:8px;padding:0px;-webkit-backdrop-filter:var(--ui-backdrop,none);backdrop-filter:var(--ui-backdrop,none);background:var(--ui-input,rgb(255, 255, 255));\">\n    <div id=\"dialog-header\" style=\"color:var(--ui-text,#fff);padding:12px;display:flex;justify-content:space-between;align-items:center;background:var(--ui-surface,rgb(90, 122, 122));\">\n        <h3 id=\"dialog-title\" style=\"margin:0px;font:16px &quot;Times New Roman&quot;, serif;\">Numberpad</h3>\n        <button id=\"close-numberpad\" style=\"border:initial none initial;color:var(--ui-text,#fff);cursor:pointer;padding:0px;width:30px;height:30px;background:transparent;font:24px &quot;Times New Roman&quot;, serif;\">×</button>\n    </div>\n    <div id=\"numberpad-body\" style=\"padding:16px;\">\n        <!-- Display --><input id=\"numberpad-display\" type=\"text\" readonly style=\"width:100%;padding:2px;text-align:right;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;margin-bottom:12px;background:rgb(249, 249, 249);font:20px &quot;Times New Roman&quot;, serif;\"><!-- Numberpad Grid -->\n<div style=\"display:grid;grid-template-columns:repeat(3, 60px);gap:8px;\">\n            <button class=\"num-btn\" data-value=\"7\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;cursor:pointer;background:var(--ui-input,rgb(255, 255, 255));font:18px &quot;Times New Roman&quot;, serif;\">7</button>\n            <button class=\"num-btn\" data-value=\"8\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;cursor:pointer;background:var(--ui-input,rgb(255, 255, 255));font:18px &quot;Times New Roman&quot;, serif;\">8</button>\n            <button class=\"num-btn\" data-value=\"9\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;cursor:pointer;background:var(--ui-input,rgb(255, 255, 255));font:18px &quot;Times New Roman&quot;, serif;\">9</button>\n            <button class=\"num-btn\" data-value=\"4\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;cursor:pointer;background:var(--ui-input,rgb(255, 255, 255));font:18px &quot;Times New Roman&quot;, serif;\">4</button>\n            <button class=\"num-btn\" data-value=\"5\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;cursor:pointer;background:var(--ui-input,rgb(255, 255, 255));font:18px &quot;Times New Roman&quot;, serif;\">5</button>\n            <button class=\"num-btn\" data-value=\"6\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;cursor:pointer;background:var(--ui-input,rgb(255, 255, 255));font:18px &quot;Times New Roman&quot;, serif;\">6</button>\n            <button class=\"num-btn\" data-value=\"1\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;cursor:pointer;background:var(--ui-input,rgb(255, 255, 255));font:18px &quot;Times New Roman&quot;, serif;\">1</button>\n            <button class=\"num-btn\" data-value=\"2\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;cursor:pointer;background:var(--ui-input,rgb(255, 255, 255));font:18px &quot;Times New Roman&quot;, serif;\">2</button>\n            <button class=\"num-btn\" data-value=\"3\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;cursor:pointer;background:var(--ui-input,rgb(255, 255, 255));font:18px &quot;Times New Roman&quot;, serif;\">3</button>\n            <button class=\"num-btn\" data-value=\"0\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;cursor:pointer;grid-column:span 2;background:var(--ui-input,rgb(255, 255, 255));font:18px &quot;Times New Roman&quot;, serif;\">0</button>\n            <button class=\"num-btn\" data-value=\".\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;cursor:pointer;background:var(--ui-input,rgb(255, 255, 255));font:18px &quot;Times New Roman&quot;, serif;\">.</button>\n            <button id=\"num-clear\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;color:var(--ui-text,#fff);cursor:pointer;grid-column:span 2;background:rgb(255, 107, 107);font:14px &quot;Times New Roman&quot;, serif;\">\n<t-t>input_with_button.clear</t-t>\n            </button>\n            <button id=\"num-backspace\" style=\"padding:16px;border:1px solid var(--ui-border,rgb(204, 204, 204));border-radius:4px;color:var(--ui-text,#fff);cursor:pointer;background:rgb(255, 165, 0);font:14px &quot;Times New Roman&quot;, serif;\">←</button>\n        </div>\n        <!-- OK Button --><button id=\"num-ok\" style=\"width:100%;padding:12px;margin-top:12px;border:initial none initial;border-radius:4px;color:var(--ui-text,#fff);cursor:pointer;background:var(--ui-surface,rgb(90, 122, 122));font:16px &quot;Times New Roman&quot;, serif;\">OK</button>\n    </div>\n</dialog>\n","script":"export function init(instance) {\n    //instance._bindingsRefresh?.();\n\n    applyTheming(instance);\n    updateControl(instance);\n\n    instance._assignEvent('input-type-changed', () => updateControl(instance));\n    instance._assignEvent('button-text-changed', () => updateControl(instance));\n    instance._assignEvent('placeholder-changed', () => updateControl(instance));\n    instance._assignEvent('theme-changed', () => applyTheming(instance));\n    instance._assignEvent('state-id-changed', () => { });\n\n    const input = instance._getDomElement('text-input');\n    const submitBtn = instance._getDomElement('submit-btn');\n    const numberpadIcon = instance._getDomElement('numberpad-icon');\n    const numberpadDialog = instance._getDomElement('numberpad-dialog');\n    const numberpadDisplay = instance._getDomElement('numberpad-display');\n    const closeNumberpad = instance._getDomElement('close-numberpad');\n    const numOk = instance._getDomElement('num-ok');\n    const numClear = instance._getDomElement('num-clear');\n    const numBackspace = instance._getDomElement('num-backspace');\n\n    window.addEventListener('languageChanged', () => {\n        if (input) {\n            input.placeholder = t('input_with_button.addvalue');\n        }\n    });\n\n    // Subscribe to state changes\n    let stateSubscription = null;\n    function subscribeToState() {\n        // Unsubscribe from previous state\n        if (stateSubscription) {\n            window.IOB.unsubscribeState(stateSubscription);\n            stateSubscription = null;\n        }\n\n        // Subscribe to new state\n        const stateId = instance.stateId;\n        if (stateId) {\n            stateSubscription = window.IOB.subscribeState(stateId, (id, state) => {\n                const input = instance._getDomElement('text-input');\n                if (input && state && state.val !== undefined) {\n                    input.value = state.val;\n                }\n            });\n\n            // Load initial value\n            window.IOB.getState(stateId).then(state => {\n                const input = instance._getDomElement('text-input');\n                if (input && state && state.val !== undefined) {\n                    input.value = state.val;\n                }\n            });\n        }\n    }\n\n    subscribeToState();\n\n    // Submit function\n    async function submitValue() {\n        const value = input.value;\n        const stateId = instance.stateId;\n\n        if (!stateId) {\n            console.error('State ID not configured');\n            return;\n        }\n\n        try {\n            let finalValue = value;\n\n            // Convert based on input type\n            if (instance.inputType === 'number') {\n                finalValue = parseFloat(value);\n                if (isNaN(finalValue)) {\n                    console.error('Invalid number:', value);\n                    return;\n                }\n            } else if (instance.inputType === 'integer') {\n                finalValue = parseInt(value);\n                if (isNaN(finalValue)) {\n                    console.error('Invalid integer:', value);\n                    return;\n                }\n            }\n\n            await window.IOB.setState(stateId, finalValue);\n            // sent is not done: the driver confirms (ack) or the old value comes back on screen\n            const r = await window.IOB.whenWriteConfirmed?.(stateId);\n            if (r?.confirmed === true)\n                console.log('Write confirmed by the driver:', stateId, r.ackValue ?? finalValue, Math.round(r.ms ?? 0) + ' ms');\n            else if (r?.confirmed === false)\n                console.warn('Write NOT confirmed:', stateId, finalValue, '—', r.reason, r.restored !== undefined ? '(the screen shows ' + r.restored + ' again)' : '');\n            else\n                console.log('Value written to state:', stateId, finalValue);\n\n            // Optional: Clear input after submit\n            if (instance.clearAfterSubmit === true) {\n                input.value = '';\n            }\n        } catch (err) {\n            console.error('Error writing to state:', err);\n        }\n    }\n\n    // Enter key handler\n    if (input) {\n        input.addEventListener('keypress', (e) => {\n            if (e.key === 'Enter') {\n                submitValue();\n            }\n        });\n    }\n\n    // Submit button handler\n    if (submitBtn) {\n        submitBtn.addEventListener('click', () => {\n            submitValue();\n        });\n    }\n\n    // Numberpad icon handler\n    if (numberpadIcon && numberpadDialog) {\n        numberpadIcon.addEventListener('click', () => {\n            numberpadDisplay.value = input.value || '';\n            numberpadDialog.showModal();\n        });\n    }\n    // Numberpad buttons\n    const numBtns = instance.shadowRoot.querySelectorAll('.num-btn');\n    numBtns.forEach(btn => {\n        btn.addEventListener('click', () => {\n            numberpadDisplay.value += btn.dataset.value;\n        });\n    });\n\n    // Numberpad clear\n    if (numClear) {\n        numClear.addEventListener('click', () => {\n            numberpadDisplay.value = '';\n        });\n    }\n\n    // Numberpad backspace\n    if (numBackspace) {\n        numBackspace.addEventListener('click', () => {\n            numberpadDisplay.value = numberpadDisplay.value.slice(0, -1);\n        });\n    }\n\n    // Numberpad OK\n    if (numOk) {\n        numOk.addEventListener('click', () => {\n            input.value = numberpadDisplay.value;\n            numberpadDialog.close();\n        });\n    }\n\n    // Close numberpad\n    if (closeNumberpad) {\n        closeNumberpad.addEventListener('click', () => {\n            numberpadDialog.close();\n        });\n    }\n\n    // Close dialog on outside click\n    if (numberpadDialog) {\n        numberpadDialog.addEventListener('click', (e) => {\n            const rect = numberpadDialog.getBoundingClientRect();\n            if (e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom) {\n                numberpadDialog.close();\n            }\n        });\n    }\n}\n\n\nfunction updateControl(instance) {\n    const input = instance._getDomElement('text-input');\n    const submitBtn = instance._getDomElement('submit-btn');\n    const numberpadIcon = instance._getDomElement('numberpad-icon');\n\n    // Update input type\n    if (input) {\n        const inputType = instance.inputType || 'string';\n\n        if (inputType === 'password') {\n            input.type = 'password';\n        } else if (inputType === 'number' || inputType === 'integer') {\n            input.type = 'text';\n        } else {\n            input.type = 'text';\n        }\n\n        //input.placeholder = instance.placeholder || 'Dəyər daxil edin';\n    }\n\n    // Show/hide numberpad icon\n    if (numberpadIcon) {\n        const showNumberpad = instance.inputType === 'number' || instance.inputType === 'integer';\n        numberpadIcon.style.display = showNumberpad ? 'block' : 'none';\n    }\n\n}\n\nfunction applyTheming(instance) {\n    const theme = instance.theme || 'default';\n\n    const themes = {\n        'default': { inputBg: 'var(--ui-input,#f0f0f0)', inputBorder: 'var(--ui-border,#ccc)', inputText: 'var(--ui-text,#333)', btnBg: 'var(--ui-surface-2,#6c757d)', btnText: 'var(--ui-text,#fff)', headerBg: 'var(--ui-surface,#5a7a7a)' },\n        'dark': { inputBg: '#2d3436', inputBorder: '#000', inputText: '#fff', btnBg: '#636e72', btnText: '#fff', headerBg: '#2d3436' },\n        'light': { inputBg: '#fff', inputBorder: '#dfe6e9', inputText: '#2d3436', btnBg: '#b2bec3', btnText: '#2d3436', headerBg: '#dfe6e9' },\n        'blue': { inputBg: '#dfe6e9', inputBorder: '#74b9ff', inputText: '#0984e3', btnBg: '#0984e3', btnText: '#fff', headerBg: '#0984e3' },\n        'green': { inputBg: '#d4f1e8', inputBorder: '#55efc4', inputText: '#00b894', btnBg: '#00b894', btnText: '#fff', headerBg: '#00b894' },\n        'red': { inputBg: '#ffcccc', inputBorder: '#ff7675', inputText: '#d63031', btnBg: '#d63031', btnText: '#fff', headerBg: '#d63031' },\n        'purple': { inputBg: '#e5dbff', inputBorder: '#a29bfe', inputText: '#6c5ce7', btnBg: '#6c5ce7', btnText: '#fff', headerBg: '#6c5ce7' }\n    };\n\n    const colors = themes[theme] || themes['default'];\n\n    // Input container\n    const inputContainer = instance._getDomElement('input-container');\n    if (inputContainer) {\n        inputContainer.style.background = colors.inputBg;\n        inputContainer.style.borderColor = colors.inputBorder;\n    }\n\n    // Input text\n    const input = instance._getDomElement('text-input');\n    if (input) {\n        input.style.color = colors.inputText;\n    }\n\n    // Numberpad icon\n    const numberpadIcon = instance._getDomElement('numberpad-icon');\n    if (numberpadIcon) {\n        numberpadIcon.style.fill = colors.inputText;\n    }\n\n    // Submit button\n    const submitBtn = instance._getDomElement('submit-btn');\n    if (submitBtn) {\n        submitBtn.style.background = colors.btnBg;\n        submitBtn.style.color = colors.btnText;\n    }\n\n    // Dialog header\n    const dialogHeader = instance._getDomElement('dialog-header');\n    if (dialogHeader) {\n        dialogHeader.style.background = colors.headerBg;\n    }\n\n    // Dialog\n    const dialog = instance._getDomElement('numberpad-dialog');\n    if (dialog) {\n        dialog.style.borderColor = colors.headerBg;\n    }\n\n    // OK button in numberpad\n    const numOk = instance._getDomElement('num-ok');\n    if (numOk) {\n        numOk.style.background = colors.headerBg;\n    }\n}","properties":{"inputType":{"type":"enum","default":"string","values":["string","number","integer","password"]},"placeholder":{"type":"string","default":"Dəyər daxil edin"},"stateId":{"type":"signal"},"clearAfterSubmit":{"type":"boolean"},"theme":{"type":"enum","default":"default","values":["default","dark","light","blue","green","red","purple"]}},"settings":{"visibilityEnabled":"false","visibilityGroups":"","visibilityAction":"hide","visibilityRedirectScreen":""},"translations":{"az":{"input_with_button":{"addvalue":"Dəyər daxil edin","volume":"Həcm Yaz","clear":"Təmizlə"}},"ru":{"input_with_button":{"addvalue":"Введите значение","volume":"Введите объём","clear":"Очистить"}},"de":{"input_with_button":{"addvalue":"Wert eingeben","volume":"Volumen eingeben","clear":"Löschen"}},"en":{"input_with_button":{"addvalue":"Enter value","volume":"Enter Volume","clear":"Clear"}},"tr":{"input_with_button":{"addvalue":"Değer girin","volume":"Hacim Girin","clear":"Temizle"}}}}