"use strict";
var __webpack_require__ = {};
(()=>{
    __webpack_require__.n = (module)=>{
        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
        __webpack_require__.d(getter, {
            a: getter
        });
        return getter;
    };
})();
(()=>{
    __webpack_require__.d = (exports1, definition)=>{
        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
            enumerable: true,
            get: definition[key]
        });
    };
})();
(()=>{
    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
})();
(()=>{
    __webpack_require__.r = (exports1)=>{
        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
            value: 'Module'
        });
        Object.defineProperty(exports1, '__esModule', {
            value: true
        });
    };
})();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
    renderCarousel: ()=>renderCarousel
});
const external_lit_namespaceObject = require("lit");
const map_js_namespaceObject = require("lit/directives/map.js");
const arrow_right_cjs_namespaceObject = require("../../images/arrow-right.cjs");
var arrow_right_cjs_default = /*#__PURE__*/ __webpack_require__.n(arrow_right_cjs_namespaceObject);
require("./atomic-icon/atomic-icon.cjs");
const external_button_cjs_namespaceObject = require("./button.cjs");
const commonPaginationClasses = 'w-10 h-10 grid justify-center items-center absolute top-1/2 -translate-y-1/2 z-1 shadow-lg group';
const commonArrowClasses = 'w-3.5 align-middle text-on-background group-hover:text-primary group-focus:text-primary-light';
const renderPreviousButton = (numberOfPages, previousPage, bindings)=>{
    if (numberOfPages <= 1) return external_lit_namespaceObject.nothing;
    const buttonProps = {
        style: 'outline-primary',
        part: 'previous-button',
        class: `${commonPaginationClasses} -translate-x-1/2`,
        onClick: previousPage,
        ariaLabel: bindings.i18n.t('previous')
    };
    return (0, external_button_cjs_namespaceObject.renderButton)({
        props: buttonProps
    })((0, external_lit_namespaceObject.html)`<atomic-icon
      part="previous-icon"
      class=${`${commonArrowClasses} rotate-180`}
      icon=${arrow_right_cjs_default()}
    ></atomic-icon>`);
};
const renderNextButton = (numberOfPages, nextPage, bindings)=>{
    if (numberOfPages <= 1) return external_lit_namespaceObject.nothing;
    const buttonProps = {
        style: 'outline-primary',
        part: 'next-button',
        class: `${commonPaginationClasses} right-0 translate-x-1/2`,
        onClick: nextPage,
        ariaLabel: bindings.i18n.t('next')
    };
    return (0, external_button_cjs_namespaceObject.renderButton)({
        props: buttonProps
    })((0, external_lit_namespaceObject.html)`<atomic-icon
      part="next-icon"
      class=${commonArrowClasses}
      icon=${arrow_right_cjs_default()}
    ></atomic-icon>`);
};
const renderIndicators = (numberOfPages, currentPage)=>{
    if (numberOfPages <= 1) return external_lit_namespaceObject.nothing;
    return (0, external_lit_namespaceObject.html)`
    <ul part="indicators" class="mt-6 flex justify-center gap-2">
      ${(0, map_js_namespaceObject.map)(Array.from({
        length: numberOfPages
    }), (_, index)=>{
        const isActive = index === currentPage % numberOfPages;
        return (0, external_lit_namespaceObject.html)`
          <li
            part=${`indicator${isActive ? ' active-indicator' : ''}`}
            class=${`h-1 w-12 rounded-md ${isActive ? 'bg-primary' : 'bg-neutral'} `}
          ></li>
        `;
    })}
    </ul>
  `;
};
const renderCarousel = ({ props })=>(children)=>{
        if (!children || children === external_lit_namespaceObject.nothing) return (0, external_lit_namespaceObject.html)``;
        const { previousPage, nextPage, numberOfPages, currentPage } = props;
        return (0, external_lit_namespaceObject.html)`
      <div
        class="relative"
        part="carousel"
        role="region"
        aria-roledescription="carousel"
        aria-label=${props.ariaLabel}
      >
        <div class="carousel-inner relative">
          <div class="carousel-controls">
            ${renderPreviousButton(numberOfPages, previousPage, props.bindings)}
            ${renderNextButton(numberOfPages, nextPage, props.bindings)}
          </div>
          <div class="carousel-items" aria-live="polite" aria-atomic="false">
            ${children}
          </div>
        </div>
        ${renderIndicators(numberOfPages, currentPage)}
      </div>
    `;
    };
exports.renderCarousel = __webpack_exports__.renderCarousel;
for(var __rspack_i in __webpack_exports__)if (-1 === [
    "renderCarousel"
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
Object.defineProperty(exports, '__esModule', {
    value: true
});
