import { h } from "@stencil/core";
import { BEM } from "../../../utils/bem";
export const DotControl = ({ value, items, containerId, onControlChange }) => {
    const block = BEM.block('swiper');
    const controls = block.element('controls');
    const onChange = (ev) => {
        let selectedValue = ev.detail - 1;
        if (selectedValue < 0) {
            selectedValue = 0;
        }
        if (selectedValue >= items.length) {
            selectedValue = items.length - 1;
        }
        onControlChange(items[selectedValue]);
    };
    return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('dots').class()) }, h("bal-pagination", { "aria-controls": containerId, interface: "small", value: value + 1, totalPages: items.length, onBalChange: onChange })));
};
