@public-ui/components/dist/cjs/Collapsible-CdgPKZnW.js

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

/*!
 * KoliBri - The accessible HTML-Standard
 */
'use strict';

var tslib_es6 = require('./tslib.es6-Cm0ytgPY.js');
var index = require('./index-BrhW8s5h.js');
var componentNames = require('./component-names-5KS_pYRF.js');
var clsx = require('./clsx-Bm_HQUnh.js');
var dev_utils = require('./dev.utils-BeTuwcHU.js');
var Heading = require('./Heading-Zb8_ekSw.js');

const KolCollapsibleFc = (props, children) => {
    const { id, class: classNames, label, level = 1, disabled, open, onClick, HeadingProps = {}, HeadingButtonProps = {}, ContentProps = {} } = props, other = tslib_es6.__rest(props, ["id", "class", "label", "level", "disabled", "open", "onClick", "HeadingProps", "HeadingButtonProps", "ContentProps"]);
    const icon = open ? 'kolicon-chevron-down' : 'kolicon-chevron-right';
    const headingId = dev_utils.createRelatedUniqueId(id, 'heading');
    const controlId = dev_utils.createRelatedUniqueId(id, 'control');
    return (index.h("div", Object.assign({ id: id, class: clsx.clsx('collapsible', {
            'collapsible--disabled': disabled === true,
            'collapsible--open': open === true,
        }, classNames) }, other), index.h(Heading.KolHeadingFc, { ref: HeadingProps === null || HeadingProps === void 0 ? void 0 : HeadingProps.ref, level: level, class: clsx.clsx('collapsible__heading', HeadingProps === null || HeadingProps === void 0 ? void 0 : HeadingProps.class) }, index.h(componentNames.KolButtonWcTag, { class: clsx.clsx('collapsible__heading-button', HeadingButtonProps === null || HeadingButtonProps === void 0 ? void 0 : HeadingButtonProps.class), ref: HeadingButtonProps === null || HeadingButtonProps === void 0 ? void 0 : HeadingButtonProps.ref, slot: "expert", id: headingId, _ariaControls: controlId, _ariaExpanded: open, _disabled: disabled, _icons: (HeadingButtonProps === null || HeadingButtonProps === void 0 ? void 0 : HeadingButtonProps._icons) || `${icon}`, _label: label, _on: { onClick } })), index.h("div", { class: clsx.clsx('collapsible__wrapper', ContentProps === null || ContentProps === void 0 ? void 0 : ContentProps.wrapperClass) }, index.h("div", { class: clsx.clsx('collapsible__wrapper-animation', ContentProps === null || ContentProps === void 0 ? void 0 : ContentProps.animationClass) }, index.h("div", { "aria-hidden": open === false ? 'true' : undefined, "aria-labelledby": headingId, role: "region", class: clsx.clsx('collapsible__content', ContentProps === null || ContentProps === void 0 ? void 0 : ContentProps.class), id: controlId }, children)))));
};

exports.KolCollapsibleFc = KolCollapsibleFc;
//# sourceMappingURL=Collapsible-CdgPKZnW.js.map

//# sourceMappingURL=Collapsible-CdgPKZnW.js.map