@kubit-ui-web/react-components/dist/esm/components/message/messageStandAlone.js

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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Button } from '../../components/button/button';
import { ElementOrIllustration } from '../../components/elementOrIllustration/elementOrIllustration';
import { Tag } from '../../components/tag/tag';
import { Text } from '../../components/text/text';
import { AriaLiveOptionType } from '../../types/ariaLiveOption/ariaLiveOption';
import { ElementOrIcon } from '../elementOrIcon/elementOrIcon';
import { Link } from '../link/link';
import { TextComponentType } from '../text/types/component';
import { TextDecorationType } from '../text/types/decoration';
// styles
import { ActioButtonWrapperStyled, ButtonSectionStyled, CloseButtonSectionStyled, ExtraActioButtonWrapperStyled, LinkContainerStyled, LinksContainerStyled, MessageContentStyled, MessageHeaderStyled, MessageStyled, MessageTextStyled, ParentContainerStyled, } from './message.styled';
const MessageStandAloneComponent = ({ dataTestId = 'message', maxContentLength = 246, ariaLive = AriaLiveOptionType.OFF, ...props }, ref) => {
    const isLargeMessage = (() => typeof props.content.content === 'string' &&
        props.content.content.length >= maxContentLength)();
    const buildIconOrIllustration = () => {
        if (props.illustration?.illustration) {
            return (_jsx(ElementOrIllustration, { customIllustrationStyles: props.styles.illustration, ...props.illustration }));
        }
        else if (props.infoIcon?.icon) {
            return _jsx(ElementOrIcon, { customIconStyles: props.styles.infoIcon, ...props.infoIcon });
        }
        return null;
    };
    const buildActionButton = () => props.actionButton?.content &&
        (props.styles.actionButton?.size || props.actionButton?.size) && (_jsx(ActioButtonWrapperStyled, { styles: props.styles, children: _jsx(Button, { size: props.styles.actionButton?.size, ...props.actionButton, children: props.actionButton?.content }) }));
    const buildTag = () => (_jsx(Tag, { option: '', status: '', variant: '', ...props.tag, children: props.tag?.content }));
    const buildExtraActionButton = () => props.extraActionButton?.content && (_jsx(ExtraActioButtonWrapperStyled, { styles: props.styles, children: _jsx(Button, { ...props.extraActionButton, children: props.extraActionButton?.content }) }));
    const buildContent = () => {
        return typeof props.content.content === 'string' ? (_jsx(Text, { component: TextComponentType.PARAGRAPH, customTypography: props.styles.description, ...props.content, children: props.content.content })) : (props.content.content);
    };
    const buildTitle = () => {
        return typeof props.title?.content === 'string' ? (_jsx(MessageTextStyled, { "aria-errormessage": props.ariaMessageId, extraPaddingGap: !!props.closeIcon, styles: props.styles.closeIcon, children: _jsx(Text, { component: TextComponentType.PARAGRAPH, customTypography: props.styles.title, ...props.title, children: props.title.content }) })) : (props.title?.content);
    };
    return (_jsx(ParentContainerStyled, { "aria-live": ariaLive, styles: props.styles, children: props.open && (_jsxs(MessageStyled, { ref: ref, as: props.messageContainerProps?.url ? props.linkComponent : 'div', "data-testid": dataTestId, id: props.id, role: props.role, styles: props.styles, target: props.messageContainerProps?.target, url: (props.messageContainerProps?.url || undefined), onClick: props.messageContainerProps?.onClick, children: [buildIconOrIllustration(), props.closeIcon && (_jsx(CloseButtonSectionStyled, { styles: props.styles, children: _jsx(ElementOrIcon, { customIconStyles: props.styles.closeIcon, ...props.closeIcon }) })), _jsxs(MessageHeaderStyled, { as: props.titleAndContentContainerProps?.url ? props.linkComponent : 'div', isLargeMessage: isLargeMessage, role: props.titleAndContentRole, styles: props.styles, target: props.titleAndContentContainerProps?.target, url: (props.titleAndContentContainerProps?.url || undefined), withIcon: !!props.closeIcon, onClick: props.titleAndContentContainerProps?.onClick, children: [props.title && buildTitle(), props.tag?.content && buildTag(), _jsxs(MessageContentStyled, { isLargeMessage: isLargeMessage, styles: props.styles, children: [buildContent(), props.inlineLink?.content && (_jsx(Link, { decoration: TextDecorationType.UNDERLINE, ...props.inlineLink, children: props.inlineLink.content }))] }), (props.extraActionButton || props.actionButton) && (_jsxs(ButtonSectionStyled, { styles: props.styles, children: [buildExtraActionButton(), buildActionButton()] })), props.link?.content && (_jsx(LinkContainerStyled, { styles: props.styles, children: _jsx(Link, { decoration: TextDecorationType.UNDERLINE, ...props.link, children: props.link.content }) })), props.links && props.links.length > 0 && (_jsx(LinksContainerStyled, { styles: props.styles, children: props.links.map((link, index) => link.content ? (_jsx(LinkContainerStyled, { styles: props.styles, children: _jsx(Link, { decoration: TextDecorationType.UNDERLINE, ...link, children: link.content }) }, index)) : null) }))] })] })) }));
};
export const MessageStandAlone = React.forwardRef(MessageStandAloneComponent);
//# sourceMappingURL=messageStandAlone.js.map