Компонент **«oda-calculator»** позволяет создать настраиваемый калькулятор, с помощью которого можно производить сложные вычисления и настраивать точность получаемых результатов.

Точность вычислений задается с помощью свойства **accuracy**, а высота кнопок калькулятора настраивается с помощью свойства **buttonHeight**.

Для использования этого компонента необходимо подключить к Вашему файлу JS-модуль **calculator.js**, добавить в HTML-код пользовательский тэг **oda-calculator**, а также задать необходимую модель клавиатуры калькулятора с помощью свойства **data**.

Свойство **data** представляет собой объект, который позволяет задать необходимые кнопки на клавиатуре калькулятора.

Все эти кнопки группируются на три функциональные области в свойстве **cols**:

1. Научная (science).
1. Цифровая (numpad).
1. Знаковая (sign).

Каждая из этих областей задается внутри объекта **cols** с помощью трех соответствующих объектов с именами: **science**, **numpad** и **sign**.

Эти объекты обязательно должны содержать в себе объект с именем **rows**, в котором задаются ряды кнопок калькулятора.

При необходимости в них можно добавить специальный объект **props** для задания общего стиля отображения кнопок данной области.

Объект с именем **rows** должен содержать в себе нумерацию рядов кнопок калькулятора. Эта нумерация должна начинается с 1 и идти последовательно друг за другом.

Каждый из этих рядов в свою очередь является объектом, в котором можно задать два вложенных объекта:

1. Объект **buttons** — для описания всех кнопок данного ряда.
2. Объект **props** — для задания общего стиля отображения кнопок в данном ряду.

Объект **buttons** содержит весь перечень кнопок данного ряда. Каждая кнопка в этом перечне задается отдельным свойством этого объекта. Ключ этого свойства определяет надпись, которая будет отображаться на кнопке, а значение этого ключа определяет объект с функциональными характеристиками этой кнопки. Эти характеристики определяются следующими свойствами:

1. **name** — значение, которое будет отображаться первым в поле ввода.
1. **expression** — выражение, которое будет будет выполняться при нахождении результата.
1. **hint** — подсказка, которая используется для вставки обязательного символа.
1. **key** — html-код, для отображения каких-то специальных конструкций.
1. **command** — действие, которое будет выполняться при нажатии на кнопку.

Всего есть 5 различных действий **command**:

1. **clear** – удаление всего содержимого строки ввода.
1. **back** – удаление последнего введенного символа.
1. **calc** – подсчет результата выражения.
1. **calcFactorial** – подсчет факториала числа.
1. **getAnswer** – получение предыдущего ответа.

Стили отображения каждого ряда кнопок или всех кнопок внутри определенной области можно изменить с помощью специального объекта **props**, у которого можно задать два свойства:

1. **class** — определяет имя CSS-класса отображения кнопок.
1. **style** — задает значение incline CSS-стиля отображения кнопок.

Эти два свойства можно использовать совместно друг с другом.

Например,

```javascript _run_line_edit_loadoda_[my-component.js]_h=260_eh=260_
import '/components/tools/calculator/calculator.js';
ODA({
    is: 'my-component',
    template: `
        <label> Размер кнопки <input type="number" ::value="height"></label>
        <label>Точность результата<select ::value="accuracy">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            </select>
        </label>
        <oda-calculator :accuracy :button-height="height" :data></oda-calculator>
    `,
    props: {
        height: 50,
        accuracy: 2,
        data: {
            cols: {
                science: {
                    rows: {
                        1: {
                            buttons: {
                                "x!": {command: "calcFactorial"},
                                "sin": {name: "sin(", expr: "Math.sin(", hint: ')'},
                                "ln": {name: "ln(", expr: "Math.log(", hint: ')'},
                            },
                        },
                        2: {
                            buttons: {
                                "π": {expr: '3.14159265359'},
                                "cos": {name: "cos(", expr: "Math.cos(", hint: ')'},
                                "log": {name: "log(", expr: "Math.log10(", hint: ')'},
                            },
                        },
                        3: {
                            buttons: {
                                "e": {expr: "2.71828182846"},
                                "tan": {name: "tan(", expr: "Math.tan(", hint: ')'},
                                "√": {name: "√(", expr: "Math.sqrt(", hint: ')'},
                            },
                        },
                        4: {
                            buttons: {
                                "Ans": {command: 'getAnswer'},
                                "EXP": {name: "E", expr: "*10**"},
                                "XY": {key:"<div>X<sup>y</sup></div>", name: "^", expr: "**"},
                            },
                        },
                    },
                    props: {
                            class: "layout",
                            style: 'flex-shrink: 10000000',
                        },
                },
                numpad: {
                    rows: {
                        1: {
                            buttons: {
                                "(": {hint: ')', expr: '('},
                                ")": {},
                            },

                        },
                        2: {
                            buttons: {
                                7: {},
                                8: {},
                                9: {},
                            },
                        },
                        3: {
                            buttons: {
                                4: {},
                                5: {},
                                6: {},
                            },
                        },
                        4: {
                            buttons:{
                                1: {},
                                2: {},
                                3: {},
                            },
                        },
                        5: {
                            buttons: {
                                0: {},
                                "00": {},
                                ".": {},
                            },
                        }
                    },
                },
                sign:{
                    rows:{
                        1: {
                            buttons:{
                                "AC": {command: 'clear'},
                                "⟵": {command: 'back'},
                            },
                        },
                        2: {
                            buttons: {
                                "÷": {name: ' ÷ ', expr: '/'},
                                "%": {expr: "*0.01"},
                            },
                        },
                        3:{
                            buttons: {
                                "X": {name: ' × ', expr: '*'},
                                "-": {name: ' - ', expr: '-'},
                            },
                        },
                        4: {
                            props:{
                                style: 'flex-grow: 1000000',
                            },
                            buttons:{
                                "+": {name: ' + ', expr: '+'},
                                "=": {command: 'calc'},
                            },
                        }
                    },
                },
            },
        },
    }
});
```