Widget kinds

The widget is no longer only a calculator. The same loader (widget.js) builds three kinds of widget:

Kind	Markup	Embed page	What it shows
Calculator	`data-mo-tool="kdv"` or `<mo-calculator tool="kdv">`	`/{locale}/embed/{key}`	The form and result panel of one tool.
Search	`data-mo-search` or `<mo-search>`	`/{locale}/embed/kit/search`	A box that searches the tools.
Category	`data-mo-category="tax"` or `<mo-category category="tax">`	`/{locale}/embed/kit/category/{key}`	The list of tools in one category.

The options common to all three apply: data-locale, data-theme, data-header, data-height, data-accent, data-radius, data-density, data-title, data-lazy (Installation). The calculator-specific options (data-view, data-autorun, data-input-*, data-inputs) do not exist on search and category widgets.

<div data-mo-search data-locale="en" data-target="event" data-category="tax"></div>
<script src="https://api.mirac-ozdemir.com/widget.js" async></script>

Attribute	Values	Default	Description
`data-mo-search`	(no value)	required	Makes the container a search widget.
`data-target`	`_blank`, `event`	`_blank`	What happens when a result is picked (see below).
`data-category`	category key (`^[a-z0-9]+(-[a-z0-9]+)*$`, 2–64)	none	Limits the search to a category.

<div data-mo-category="tax" data-locale="en" data-density="compact"></div>
<script src="https://api.mirac-ozdemir.com/widget.js" async></script>

Attribute	Values	Default	Description
`data-mo-category`	category key	required	The category to list. Keys appear in the tool catalog.
`data-target`	`_blank`, `event`	`_blank`	What happens when a tool is picked.

An invalid key or value writes an English console.warn, as with the calculator, and the container is skipped.

`target`: what a pick does

Value	Behaviour
`_blank` (default)	The page of the picked tool (or category) opens in a new tab.
`event`	Nothing is opened; the widget only sends a `mo:select` event. You do the navigation (with your own router, a modal, opening the calculator on the same page, etc.).

`mo:select` event

When a tool or category is picked in a search or category widget, a bubbling CustomEvent arrives from the container:

interface SelectDetail {
  id: string;                       // instance id assigned by the loader
  kind: 'tool' | 'category';
  key: string;                      // key of the pick
  title: string;
  url: string;                      // full page address of the pick
}

With target="event" the widget sends only this event and leaves navigation to you. These widgets also dispatch mo:ready (with tool set to null), mo:resize and mo:error; mo:input and mo:result do not occur. Details: Events.

Example: open the picked tool as a calculator on the same page

<div id="search" data-mo-search data-target="event" data-locale="en"></div>
<div id="calc"></div>
<script src="https://api.mirac-ozdemir.com/widget.js" async></script>

<script>
  document.getElementById('search').addEventListener('mo:select', (event) => {
    const { kind, key } = event.detail;
    if (kind !== 'tool') return;

    const host = document.getElementById('calc');
    window.MiracOzdemirWidget.unmount(host);
    host.setAttribute('data-mo-tool', key);
    host.setAttribute('data-locale', 'en');
    window.MiracOzdemirWidget.mount(host);
  });
</script>

mo:select arrives only after the search widget has been built and the user has picked something, so window.MiracOzdemirWidget is defined at that point. Once the calculator container has been mounted, you can change the tool with update(host, { tool: key }) instead of unmount + mount.

Example: with a router in React

import { WidgetSearch } from '@mirac-ozdemir/widget/react';

export function Search() {
  return <WidgetSearch target="event" category="tax" onSelect={({ kind, key }) => kind === 'tool' && navigate(`/calculate/${key}`)} />;
}

(The SDK is not on npm yet; see Custom elements and SDK. With the raw loader you do the same with addEventListener('mo:select', …).)

Result-only view

data-view="result" hides the calculator’s input form and shows only the result panel. It is useful for a stand-alone result card, a payroll summary, or a pre-computed output such as “the current VAT amount” inside a news article. The result view needs prefilled inputs and implies autorun (you do not need to add data-autorun):

<div
  data-mo-tool="kdv"
  data-view="result"
  data-input-amount="1000"
  data-input-mode="exclusive"
  data-input-vat-rate-option="standard"
  data-header="false"
></div>
<script src="https://api.mirac-ozdemir.com/widget.js" async></script>

The plain-iframe equivalent: /{locale}/embed/{key}?view=result&i.amount=1000&…. view can be changed live (update(el, { view: 'full' })), so you can offer the user an “edit values” button.

Custom element
Plain iframe

<mo-calculator tool="kdv" view="result" input-amount="1000" input-mode="exclusive" header="false"></mo-calculator>

<iframe
  src="https://mirac-ozdemir.com/en/embed/kdv?view=result&i.amount=1000&i.mode=exclusive&header=0"
  title="VAT result"
  width="100%"
  height="320"
  style="border:0;display:block"
  sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
></iframe>

Customizing the appearance

Every kind accepts the same appearance options: data-accent (6 hex digits), data-radius (none, sm, md, lg), data-density (comfortable, compact), data-theme (including inherit). They are changed live with update; target, category and locale reload the iframe. To see the options in action, pick a kind from the Widget kind list in the configurator.

Widget kinds

Search box

Category list

target: what a pick does

mo:select event