@kubit-ui-web/react-components/dist/cjs/components/accordion/accordionStandAlone.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AccordionStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const text_1 = require("../../components/text/text");
const component_1 = require("../../components/text/types/component");
const useId_1 = require("../../hooks/useId/useId");
const type_1 = require("../button/types/type");
const elementOrIcon_1 = require("../elementOrIcon/elementOrIcon");
const accordion_styled_1 = require("./accordion.styled");
const ACCORDION_BASE_ID = 'AccordionComponent';
const AccordionStandAloneComponent = ({ dataTestId = 'accordion', hasHeaderLineSeparator = true, open = false, ...props }, ref) => {
    const BASE_ID = (0, useId_1.useId)(ACCORDION_BASE_ID);
    const TRIGGER_ID = `${BASE_ID}-trigger`;
    const HEADER_ID = `${BASE_ID}-header`;
    const PANEL_ID = `${BASE_ID}-panel`;
    const getDataTestId = (uniqueId = '') => `${dataTestId}-${uniqueId}`;
    return ((0, jsx_runtime_1.jsxs)(accordion_styled_1.AccordionContainerStyled, { ref: ref, "data-testid": dataTestId, id: BASE_ID, styles: props.styles.container, children: [(0, jsx_runtime_1.jsx)(accordion_styled_1.AccordionDecorativeBackgroundStyled, { styles: props.styles.decorative }), (0, jsx_runtime_1.jsx)(accordion_styled_1.AccordionHeaderExternalContainerStyled, { styles: props.styles.headerExternalContainer, children: (0, jsx_runtime_1.jsxs)(accordion_styled_1.AccordionHeaderInternalContainerStyled, { "data-testid": getDataTestId('header'), id: HEADER_ID, styles: props.styles.headerInternalContainer, children: [(0, jsx_runtime_1.jsxs)(accordion_styled_1.AccordionHeaderMainContainerStyled, { styles: props.styles.headerMainContainer, children: [(0, jsx_runtime_1.jsx)(accordion_styled_1.AccordionHeaderTitleHeadlineStyled, { as: props.triggerComponent, styles: props.styles.titleHeaderMainContainer, children: (0, jsx_runtime_1.jsxs)(accordion_styled_1.AccordionTriggerStyled, { "aria-controls": PANEL_ID, "aria-expanded": open, "data-testid": getDataTestId('trigger-button'), id: TRIGGER_ID, styles: props.styles[typeof props.title?.content !== 'string' ? 'link' : 'trigger'], type: type_1.ButtonType.BUTTON, ...props.triggerButton, children: [(0, jsx_runtime_1.jsx)(accordion_styled_1.AccordionTriggerIconContainerStyled, { "$rotate": open, "data-testid": `${dataTestId}-trigger-icon-wrapper`, styles: props.styles.triggerIconContainer, children: (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { customIconStyles: props.styles.triggerIcon, ...props.triggerIcon }) }), (0, jsx_runtime_1.jsxs)(accordion_styled_1.AccordionTitleStyled, { styles: props.styles.titleContainer, children: [props.titleIcon && ((0, jsx_runtime_1.jsx)(accordion_styled_1.AccordionTitleIconWrapper, { styles: props.styles.titleIconContainer, children: (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { customIconStyles: props.styles.titleIcon, ...props.titleIcon }) })), (0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.SPAN, customTypography: props.styles.title, ...props.title, children: props.title?.content })] })] }) }), props.headerRightContent && ((0, jsx_runtime_1.jsx)(accordion_styled_1.AccordionHeaderRightContentStyled, { "data-testid": `${dataTestId}-right-content`, styles: props.styles.headerRightContentContainer, children: props.headerRightContent }))] }), props.subHeaderContent && ((0, jsx_runtime_1.jsx)(accordion_styled_1.AccordionSubHeaderContainerStyled, { "data-testid": `${dataTestId}-subheader`, styles: props.styles.subHeader, children: props.subHeaderContent }))] }) }), (0, jsx_runtime_1.jsxs)(accordion_styled_1.AccordionContentStyled, { "aria-labelledby": TRIGGER_ID, displayOption: !open ? 'none' : 'block', id: PANEL_ID, styles: props.styles.content, children: [hasHeaderLineSeparator && props.styles.lineSeparatorContainer && ((0, jsx_runtime_1.jsx)(accordion_styled_1.LineSeparatorContainerStyled, { lineSeparatorLineStyles: props.lineSeparatorLineStyles, styles: props.styles.lineSeparatorContainer })), (0, jsx_runtime_1.jsx)(accordion_styled_1.AccordionPanelStyled, { "data-testid": getDataTestId('panel'), styles: props.styles.panel, children: props.children }), props.footerContent && ((0, jsx_runtime_1.jsx)(accordion_styled_1.AccordionFooterStyled, { "data-testid": getDataTestId('footer'), styles: props.styles.footer, children: props.footerContent }))] })] }));
};
exports.AccordionStandAlone = react_1.default.forwardRef(AccordionStandAloneComponent);
//# sourceMappingURL=accordionStandAlone.js.map