@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
22 lines (21 loc) • 2.44 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { __rest } from "tslib";
import { h } from "@stencil/core";
import { KolButtonWcTag } from "../../core/component-names";
import clsx from "../../utils/clsx";
import { createRelatedUniqueId } from "../../utils/dev.utils";
import KolHeadingFc from "../Heading";
const KolCollapsibleFc = (props, children) => {
const { id, class: classNames, label, level = 1, disabled, open, onClick, HeadingProps = {}, HeadingButtonProps = {}, ContentProps = {} } = props, other = __rest(props, ["id", "class", "label", "level", "disabled", "open", "onClick", "HeadingProps", "HeadingButtonProps", "ContentProps"]);
const icon = open ? 'kolicon-chevron-down' : 'kolicon-chevron-right';
const headingId = createRelatedUniqueId(id, 'heading');
const controlId = createRelatedUniqueId(id, 'control');
return (h("div", Object.assign({ id: id, class: clsx('collapsible', {
'collapsible--disabled': disabled === true,
'collapsible--open': open === true,
}, classNames) }, other), h(KolHeadingFc, { ref: HeadingProps === null || HeadingProps === void 0 ? void 0 : HeadingProps.ref, level: level, class: clsx('collapsible__heading', HeadingProps === null || HeadingProps === void 0 ? void 0 : HeadingProps.class) }, h(KolButtonWcTag, { class: 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 } })), h("div", { class: clsx('collapsible__wrapper', ContentProps === null || ContentProps === void 0 ? void 0 : ContentProps.wrapperClass) }, h("div", { class: clsx('collapsible__wrapper-animation', ContentProps === null || ContentProps === void 0 ? void 0 : ContentProps.animationClass) }, h("div", { "aria-hidden": open === false ? 'true' : undefined, "aria-labelledby": headingId, role: "region", class: clsx('collapsible__content', ContentProps === null || ContentProps === void 0 ? void 0 : ContentProps.class), id: controlId }, children)))));
};
export default KolCollapsibleFc;
//# sourceMappingURL=Collapsible.js.map