@kubit-ui-web/react-components/dist/cjs/components/message/messageStandAlone.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.MessageStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const button_1 = require("../../components/button/button");
const elementOrIllustration_1 = require("../../components/elementOrIllustration/elementOrIllustration");
const tag_1 = require("../../components/tag/tag");
const text_1 = require("../../components/text/text");
const ariaLiveOption_1 = require("../../types/ariaLiveOption/ariaLiveOption");
const elementOrIcon_1 = require("../elementOrIcon/elementOrIcon");
const link_1 = require("../link/link");
const component_1 = require("../text/types/component");
const decoration_1 = require("../text/types/decoration");
// styles
const message_styled_1 = require("./message.styled");
const MessageStandAloneComponent = ({ dataTestId = 'message', maxContentLength = 246, ariaLive = ariaLiveOption_1.AriaLiveOptionType.OFF, ...props }, ref) => {
    const isLargeMessage = (() => typeof props.content.content === 'string' &&
        props.content.content.length >= maxContentLength)();
    const buildIconOrIllustration = () => {
        if (props.illustration?.illustration) {
            return ((0, jsx_runtime_1.jsx)(elementOrIllustration_1.ElementOrIllustration, { customIllustrationStyles: props.styles.illustration, ...props.illustration }));
        }
        else if (props.infoIcon?.icon) {
            return (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { customIconStyles: props.styles.infoIcon, ...props.infoIcon });
        }
        return null;
    };
    const buildActionButton = () => props.actionButton?.content &&
        (props.styles.actionButton?.size || props.actionButton?.size) && ((0, jsx_runtime_1.jsx)(message_styled_1.ActioButtonWrapperStyled, { styles: props.styles, children: (0, jsx_runtime_1.jsx)(button_1.Button, { size: props.styles.actionButton?.size, ...props.actionButton, children: props.actionButton?.content }) }));
    const buildTag = () => ((0, jsx_runtime_1.jsx)(tag_1.Tag, { option: '', status: '', variant: '', ...props.tag, children: props.tag?.content }));
    const buildExtraActionButton = () => props.extraActionButton?.content && ((0, jsx_runtime_1.jsx)(message_styled_1.ExtraActioButtonWrapperStyled, { styles: props.styles, children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...props.extraActionButton, children: props.extraActionButton?.content }) }));
    const buildContent = () => {
        return typeof props.content.content === 'string' ? ((0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.PARAGRAPH, customTypography: props.styles.description, ...props.content, children: props.content.content })) : (props.content.content);
    };
    const buildTitle = () => {
        return typeof props.title?.content === 'string' ? ((0, jsx_runtime_1.jsx)(message_styled_1.MessageTextStyled, { "aria-errormessage": props.ariaMessageId, extraPaddingGap: !!props.closeIcon, styles: props.styles.closeIcon, children: (0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.PARAGRAPH, customTypography: props.styles.title, ...props.title, children: props.title.content }) })) : (props.title?.content);
    };
    return ((0, jsx_runtime_1.jsx)(message_styled_1.ParentContainerStyled, { "aria-live": ariaLive, styles: props.styles, children: props.open && ((0, jsx_runtime_1.jsxs)(message_styled_1.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 && ((0, jsx_runtime_1.jsx)(message_styled_1.CloseButtonSectionStyled, { styles: props.styles, children: (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { customIconStyles: props.styles.closeIcon, ...props.closeIcon }) })), (0, jsx_runtime_1.jsxs)(message_styled_1.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(), (0, jsx_runtime_1.jsxs)(message_styled_1.MessageContentStyled, { isLargeMessage: isLargeMessage, styles: props.styles, children: [buildContent(), props.inlineLink?.content && ((0, jsx_runtime_1.jsx)(link_1.Link, { decoration: decoration_1.TextDecorationType.UNDERLINE, ...props.inlineLink, children: props.inlineLink.content }))] }), (props.extraActionButton || props.actionButton) && ((0, jsx_runtime_1.jsxs)(message_styled_1.ButtonSectionStyled, { styles: props.styles, children: [buildExtraActionButton(), buildActionButton()] })), props.link?.content && ((0, jsx_runtime_1.jsx)(message_styled_1.LinkContainerStyled, { styles: props.styles, children: (0, jsx_runtime_1.jsx)(link_1.Link, { decoration: decoration_1.TextDecorationType.UNDERLINE, ...props.link, children: props.link.content }) })), props.links && props.links.length > 0 && ((0, jsx_runtime_1.jsx)(message_styled_1.LinksContainerStyled, { styles: props.styles, children: props.links.map((link, index) => link.content ? ((0, jsx_runtime_1.jsx)(message_styled_1.LinkContainerStyled, { styles: props.styles, children: (0, jsx_runtime_1.jsx)(link_1.Link, { decoration: decoration_1.TextDecorationType.UNDERLINE, ...link, children: link.content }) }, index)) : null) }))] })] })) }));
};
exports.MessageStandAlone = react_1.default.forwardRef(MessageStandAloneComponent);
//# sourceMappingURL=messageStandAlone.js.map