@rio-cloud/rio-uikit 2.1.0 → 2.2.0

package/components/tagManager/TagManagerItemList.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import a from "classnames";
+import a from "../../utils/classNames.js";
 import c from "../tag/TagList.js";
 import m from "../tag/Tag.js";
 const u = (r) => {

package/components/tagManager/TagManagerItemList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagManagerItemList.js","sources":["../../../src/components/tagManager/TagManagerItemList.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport TagList from '../tag/TagList';\nimport Tag from '../tag/Tag';\nimport type { TagManagerTag } from './TagManagerTag';\n\nexport type TagManagerItemListProps = {\n    tags: TagManagerTag[];\n    onRemoveFromTagList?: (tag: TagManagerTag) => void;\n};\n\nconst TagManagerItemList = (props: TagManagerItemListProps) => {\n    const { tags, onRemoveFromTagList = () => {} } = props;\n\n    return (\n        <TagList inline={false}>\n            {tags.map(tag => {\n                const tagClasses = classNames(\n                    tag.toAdd && 'border-color-success text-color-success',\n                    tag.toRemove && 'border-color-danger text-color-danger'\n                );\n\n                return (\n                    <Tag\n                        key={tag.label}\n                        className={tagClasses}\n                        deletable\n                        round={false}\n                        onClick={() => onRemoveFromTagList(tag)}\n                    >\n                        {tag.label}\n                    </Tag>\n                );\n            })}\n        </TagList>\n    );\n};\n\nexport default TagManagerItemList;\n"],"names":["TagManagerItemList","props","tags","onRemoveFromTagList","TagList","tag","tagClasses","classNames","jsx","Tag"],"mappings":";;;;AAWA,MAAMA,IAAqB,CAACC,MAAmC;AAC3D,QAAM,EAAE,MAAAC,GAAM,qBAAAC,IAAsB,MAAM;AAAA,EAAC,MAAMF;AAEjD,2BACKG,GAAA,EAAQ,QAAQ,IACZ,UAAAF,EAAK,IAAI,CAAAG,MAAO;AACb,UAAMC,IAAaC;AAAA,MACfF,EAAI,SAAS;AAAA,MACbA,EAAI,YAAY;AAAA,IAAA;AAGpB,WACI,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QAEG,WAAWH;AAAA,QACX,WAAS;AAAA,QACT,OAAO;AAAA,QACP,SAAS,MAAMH,EAAoBE,CAAG;AAAA,QAErC,UAAAA,EAAI;AAAA,MAAA;AAAA,MANAA,EAAI;AAAA,IAAA;AAAA,EASrB,CAAC,EAAA,CACL;AAER;"}
+{"version":3,"file":"TagManagerItemList.js","sources":["../../../src/components/tagManager/TagManagerItemList.tsx"],"sourcesContent":["import classNames from '../../utils/classNames';\nimport TagList from '../tag/TagList';\nimport Tag from '../tag/Tag';\nimport type { TagManagerTag } from './TagManager';\n\nexport type TagManagerItemListProps = {\n    tags: TagManagerTag[];\n    onRemoveFromTagList?: (tag: TagManagerTag) => void;\n};\n\nconst TagManagerItemList = (props: TagManagerItemListProps) => {\n    const { tags, onRemoveFromTagList = () => {} } = props;\n\n    return (\n        <TagList inline={false}>\n            {tags.map(tag => {\n                const tagClasses = classNames(\n                    tag.toAdd && 'border-color-success text-color-success',\n                    tag.toRemove && 'border-color-danger text-color-danger'\n                );\n\n                return (\n                    <Tag\n                        key={tag.label}\n                        className={tagClasses}\n                        deletable\n                        round={false}\n                        onClick={() => onRemoveFromTagList(tag)}\n                    >\n                        {tag.label}\n                    </Tag>\n                );\n            })}\n        </TagList>\n    );\n};\n\nexport default TagManagerItemList;\n"],"names":["TagManagerItemList","props","tags","onRemoveFromTagList","TagList","tag","tagClasses","classNames","jsx","Tag"],"mappings":";;;;AAUA,MAAMA,IAAqB,CAACC,MAAmC;AAC3D,QAAM,EAAE,MAAAC,GAAM,qBAAAC,IAAsB,MAAM;AAAA,EAAC,MAAMF;AAEjD,2BACKG,GAAA,EAAQ,QAAQ,IACZ,UAAAF,EAAK,IAAI,CAAAG,MAAO;AACb,UAAMC,IAAaC;AAAA,MACfF,EAAI,SAAS;AAAA,MACbA,EAAI,YAAY;AAAA,IAAA;AAGpB,WACI,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QAEG,WAAWH;AAAA,QACX,WAAS;AAAA,QACT,OAAO;AAAA,QACP,SAAS,MAAMH,EAAoBE,CAAG;AAAA,QAErC,UAAAA,EAAI;AAAA,MAAA;AAAA,MANAA,EAAI;AAAA,IAAA;AAAA,EASrB,CAAC,EAAA,CACL;AAER;"}

package/components/teaser/Teaser.js

@@ -1,6 +1,6 @@
 import { jsx as d, jsxs as s } from "react/jsx-runtime";
-import Q from "classnames";
 import { noop as i } from "es-toolkit/function";
+import Q from "../../utils/classNames.js";
 import o from "../button/Button.js";
 const O = (A) => {
   const { segmentation: g, verticalAlignment: M = "top" } = A, w = M === "center" ? "align-items-center-sm" : "";

package/components/teaser/Teaser.js.map

@@ -1 +1 @@
-{"version":3,"file":"Teaser.js","sources":["../../../src/components/teaser/Teaser.tsx"],"sourcesContent":["import type React from 'react';\nimport type { SyntheticEvent } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nimport Button, { type BUTTON_STYLE } from '../button/Button';\n\ntype TeaserButton = {\n    /**\n     * The text content for the button.\n     */\n    text?: string | React.ReactNode;\n\n    /**\n     * The button style.\n     *\n     * See the button styles definition for possible values.\n     *\n     * @default 'primary'\n     */\n    bsStyle?: BUTTON_STYLE;\n\n    /**\n     * Callback function for the button.\n     */\n    onClick?: (event: SyntheticEvent<HTMLButtonElement, MouseEvent>) => void;\n\n    /**\n     * Additional classes added to the button.\n     */\n    className?: string;\n};\n\ntype TeaserImage = {\n    /**\n     * The src URL for the image.\n     */\n    src: string;\n\n    /**\n     * The alternate text for the image.\n     */\n    alt?: string;\n\n    /**\n     * Defines whether the image is on the left or right side of the component.\n     *\n     * Possible values are: `'left'` and `'right'`.\n     */\n    align?: 'left' | 'right';\n\n    /**\n     * Callback function for the image.\n     */\n    onClick?: VoidFunction;\n\n    /**\n     * Ratio of the transparent image placeholder.\n     *\n     * Possible values are `'1:1'`, `'3:1'`, `'3:2'` and `'16:9'`.\n     */\n    aspectRatio?: '1:1' | '3:1' | '3:2' | '16:9';\n\n    /**\n     * Additional classes added to the image wrapper.\n     */\n    className?: string;\n};\n\nexport type TeaserProps = {\n    /**\n     * The headline for the teaser.\n     */\n    headline?: string | React.ReactNode;\n\n    /**\n     * The actual content to show e.g. some kind of text.\n     */\n    content?: string | React.ReactNode;\n\n    /**\n     * Defines an image to render.\n     */\n    image?: TeaserImage;\n\n    /**\n     * Defines a button to render with.\n     */\n    button?: TeaserButton;\n\n    /**\n     * Defines where the teaser content is aligned including headline and image.\n     *\n     * Possible values are: `'top'` and `'center'`.\n     *\n     * @default 'top'\n     */\n    verticalAlignment?: 'top' | 'center';\n\n    /**\n     * Defines how the teaser content is segmented.\n     *\n     * Possible values are: `'50'`, `'25:75'`, `'75:25'` and `'100'`.\n     */\n    segmentation?: '50' | '25:75' | '75:25' | '100';\n\n    /**\n     * Optional content for footer in case the prop \"button\" is not sufficient.\n     */\n    footer?: string | React.ReactNode;\n\n    /**\n     * Additional classes added to the wrapper.\n     */\n    className?: string;\n};\n\nconst Teaser = (props: TeaserProps) => {\n    const { segmentation, verticalAlignment = 'top' } = props;\n\n    const alignmentClass = verticalAlignment === 'center' ? 'align-items-center-sm' : '';\n\n    if (segmentation === '100') {\n        return <SingleColumnTeaser alignmentClass={alignmentClass} {...props} />;\n    }\n\n    // Thumbnail based layout for multiple segments or multiple teaser in a row\n    return <MultipleSegmentsOrRowsTeaser alignmentClass={alignmentClass} {...props} />;\n};\n\nexport default Teaser;\n\nconst SingleColumnTeaser = (props: TeaserProps & { alignmentClass: string }) => {\n    const { headline, content, footer, image, button, segmentation, className, alignmentClass } = props;\n\n    const wrapperClassNames = classNames(\n        'teaser panel panel-default panel-body padding-20 margin-bottom-20 text-center',\n        alignmentClass,\n        className\n    );\n\n    return (\n        <div className={wrapperClassNames}>\n            <TeaserHeadline headline={headline} segmentation={segmentation} />\n            <TeaserImageComp image={image} segmentation={segmentation} />\n            <TeaserContent content={content} segmentation={segmentation} />\n            <TeaserButtonComp button={button} />\n            <TeaserFooter footer={footer} />\n        </div>\n    );\n};\n\nconst MultipleSegmentsOrRowsTeaser = (props: TeaserProps & { alignmentClass: string }) => {\n    const { headline, content, footer, image, button, segmentation, className, alignmentClass } = props;\n\n    const wrapperClasses = classNames(\n        'teaser thumbnail display-flex-sm',\n        !segmentation && 'flex-column height-100pct-sm', // only for multiple teasers in a row\n        alignmentClass,\n        className\n    );\n\n    const captionClasses = classNames(\n        'caption',\n        image?.align === 'left' && 'flex-order-2-sm',\n        image?.align === 'right' && 'flex-order-1-sm',\n        segmentation === '50' && 'width-50pct-sm',\n        segmentation === '25:75' && 'width-50pct-sm width-25pct-lg',\n        segmentation === '75:25' && 'width-50pct-sm width-75pct-lg',\n        !segmentation && 'display-flex-sm flex-column-sm flex-1-0-sm'\n    );\n\n    return (\n        <div className={wrapperClasses}>\n            <TeaserImageComp image={image} segmentation={segmentation} />\n            {(headline || content || button) && (\n                <div className={captionClasses}>\n                    <TeaserHeadline headline={headline} segmentation={segmentation} />\n                    <TeaserContent content={content} segmentation={segmentation} />\n                    <TeaserButtonComp button={button} />\n                    <TeaserFooter footer={footer} />\n                </div>\n            )}\n        </div>\n    );\n};\n\nconst TeaserHeadline = ({ headline, segmentation }: Pick<TeaserProps, 'headline' | 'segmentation'>) => {\n    if (!headline) {\n        return null;\n    }\n\n    return <h2 className={segmentation === '100' ? 'margin-top-20 margin-bottom-25' : 'margin-top-5'}>{headline}</h2>;\n};\n\nconst TeaserContent = ({ content, segmentation }: Pick<TeaserProps, 'content' | 'segmentation'>) => {\n    if (!content) {\n        return null;\n    }\n\n    const classes = classNames(\n        'teaser-content-wrapper text-size-16',\n        segmentation === '100' ? 'padding-left-25-sm padding-right-25-sm' : 'flex-1-0-sm'\n    );\n    return <div className={classes}>{content}</div>;\n};\n\nconst TeaserFooter = ({ footer }: Pick<TeaserProps, 'footer'>) => {\n    if (!footer) {\n        return null;\n    }\n\n    return <div className='teaser-footer-wrapper'>{footer}</div>;\n};\n\nconst TeaserButtonComp = ({ button }: Pick<TeaserProps, 'button'>) => {\n    if (!button) {\n        return null;\n    }\n\n    return (\n        <span>\n            <Button bsStyle={button.bsStyle ?? 'primary'} className={button.className} onClick={button.onClick}>\n                {button.text}\n            </Button>\n        </span>\n    );\n};\n\n/* eslint-disable max-len */\nconst placeholderImage1by1 =\n    'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAPoCAQAAADnqhxvAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiCw8ODSFLsnJ3AAAPvUlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDgTLCM9BHrU/AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTExLTE1VDEzOjEzOjMzKzAxOjAwgedH5AAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0xMS0xNVQxMzoxMzozMyswMTowMPC6/1gAAAAASUVORK5CYII=';\n\nconst placeholderImage3by1 =\n    'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAFNCAQAAAA55I0bAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiCw8ODDQ/dKfdAAAFUUlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIO/GUDmajv5qgAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMTEtMTVUMTM6MTI6NTIrMDE6MDAOPS7pAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTExLTE1VDEzOjEyOjUyKzAxOjAwf2CWVQAAAABJRU5ErkJggg==';\n\nconst placeholderImage3by2 =\n    'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAKaCAQAAAAHN7sRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiCw8ODALwzjJEAAAKhUlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIOCbQGM8brNAQAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMTEtMTVUMTM6MTI6MDIrMDE6MDBG3SCNAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTExLTE1VDEzOjEyOjAyKzAxOjAwN4CYMQAAAABJRU5ErkJggg==';\n\nconst placeholderImage16by9 =\n    'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAIwCAQAAAC/sImZAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiDBwMBx70M0fPAAAI3UlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAg55rgVfT+Sm9AAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0xMi0yOFQxMTowNzozMCswMTowMOGwCPwAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMTItMjhUMTE6MDc6MzArMDE6MDCQ7bBAAAAAAElFTkSuQmCC';\n/* eslint-enable max-len */\n\nconst teaserPlaceholderImages = {\n    '1:1': placeholderImage1by1,\n    '3:1': placeholderImage3by1,\n    '3:2': placeholderImage3by2,\n    '16:9': placeholderImage16by9,\n} as const;\n\nconst TeaserImageComp = ({ image, segmentation }: Pick<TeaserProps, 'image' | 'segmentation'>) => {\n    if (!image) {\n        return null;\n    }\n\n    let specificClassNames;\n    if (segmentation !== '100') {\n        specificClassNames = classNames(\n            image.align === 'left' && 'flex-order-1-sm padding-left-20-sm',\n            image.align === 'right' && 'flex-order-2-sm padding-right-20-sm',\n            segmentation === '50' && 'width-50pct-sm',\n            segmentation === '25:75' && 'width-50pct-sm width-75pct-lg',\n            segmentation === '75:25' && 'width-50pct-sm width-25pct-lg',\n            segmentation && 'padding-top-20-sm padding-bottom-20-sm'\n        );\n    }\n\n    const imageWrapperClassNames = classNames(\n        'teaser-image-wrapper',\n        specificClassNames,\n        image.className && image.className\n    );\n\n    const callback = image?.onClick ?? noop;\n\n    return (\n        <div className={imageWrapperClassNames} onClick={callback}>\n            <img\n                className='img-responsive cover center'\n                src={teaserPlaceholderImages[image.aspectRatio!] ?? placeholderImage16by9}\n                alt={image.alt ?? ''}\n                style={{ backgroundImage: `url(${image.src})` }}\n            />\n        </div>\n    );\n};\n"],"names":["Teaser","props","segmentation","verticalAlignment","alignmentClass","jsx","SingleColumnTeaser","MultipleSegmentsOrRowsTeaser","headline","content","footer","image","button","className","wrapperClassNames","classNames","jsxs","TeaserHeadline","TeaserImageComp","TeaserContent","TeaserButtonComp","TeaserFooter","wrapperClasses","captionClasses","classes","Button","placeholderImage1by1","placeholderImage3by1","placeholderImage3by2","placeholderImage16by9","teaserPlaceholderImages","specificClassNames","imageWrapperClassNames","callback","noop"],"mappings":"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"}
+{"version":3,"file":"Teaser.js","sources":["../../../src/components/teaser/Teaser.tsx"],"sourcesContent":["import type React from 'react';\nimport type { SyntheticEvent } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport Button, { type BUTTON_STYLE } from '../button/Button';\n\ntype TeaserButton = {\n    /**\n     * The text content for the button.\n     */\n    text?: string | React.ReactNode;\n\n    /**\n     * The button style.\n     *\n     * See the button styles definition for possible values.\n     *\n     * @default 'primary'\n     */\n    bsStyle?: BUTTON_STYLE;\n\n    /**\n     * Callback function for the button.\n     */\n    onClick?: (event: SyntheticEvent<HTMLButtonElement, MouseEvent>) => void;\n\n    /**\n     * Additional classes added to the button.\n     */\n    className?: string;\n};\n\ntype TeaserImage = {\n    /**\n     * The src URL for the image.\n     */\n    src: string;\n\n    /**\n     * The alternate text for the image.\n     */\n    alt?: string;\n\n    /**\n     * Defines whether the image is on the left or right side of the component.\n     *\n     * Possible values are: `'left'` and `'right'`.\n     */\n    align?: 'left' | 'right';\n\n    /**\n     * Callback function for the image.\n     */\n    onClick?: VoidFunction;\n\n    /**\n     * Ratio of the transparent image placeholder.\n     *\n     * Possible values are `'1:1'`, `'3:1'`, `'3:2'` and `'16:9'`.\n     */\n    aspectRatio?: '1:1' | '3:1' | '3:2' | '16:9';\n\n    /**\n     * Additional classes added to the image wrapper.\n     */\n    className?: string;\n};\n\nexport type TeaserProps = {\n    /**\n     * The headline for the teaser.\n     */\n    headline?: string | React.ReactNode;\n\n    /**\n     * The actual content to show e.g. some kind of text.\n     */\n    content?: string | React.ReactNode;\n\n    /**\n     * Defines an image to render.\n     */\n    image?: TeaserImage;\n\n    /**\n     * Defines a button to render with.\n     */\n    button?: TeaserButton;\n\n    /**\n     * Defines where the teaser content is aligned including headline and image.\n     *\n     * Possible values are: `'top'` and `'center'`.\n     *\n     * @default 'top'\n     */\n    verticalAlignment?: 'top' | 'center';\n\n    /**\n     * Defines how the teaser content is segmented.\n     *\n     * Possible values are: `'50'`, `'25:75'`, `'75:25'` and `'100'`.\n     */\n    segmentation?: '50' | '25:75' | '75:25' | '100';\n\n    /**\n     * Optional content for footer in case the prop \"button\" is not sufficient.\n     */\n    footer?: string | React.ReactNode;\n\n    /**\n     * Additional classes added to the wrapper.\n     */\n    className?: string;\n};\n\nconst Teaser = (props: TeaserProps) => {\n    const { segmentation, verticalAlignment = 'top' } = props;\n\n    const alignmentClass = verticalAlignment === 'center' ? 'align-items-center-sm' : '';\n\n    if (segmentation === '100') {\n        return <SingleColumnTeaser alignmentClass={alignmentClass} {...props} />;\n    }\n\n    // Thumbnail based layout for multiple segments or multiple teaser in a row\n    return <MultipleSegmentsOrRowsTeaser alignmentClass={alignmentClass} {...props} />;\n};\n\nexport default Teaser;\n\nconst SingleColumnTeaser = (props: TeaserProps & { alignmentClass: string }) => {\n    const { headline, content, footer, image, button, segmentation, className, alignmentClass } = props;\n\n    const wrapperClassNames = classNames(\n        'teaser panel panel-default panel-body padding-20 margin-bottom-20 text-center',\n        alignmentClass,\n        className\n    );\n\n    return (\n        <div className={wrapperClassNames}>\n            <TeaserHeadline headline={headline} segmentation={segmentation} />\n            <TeaserImageComp image={image} segmentation={segmentation} />\n            <TeaserContent content={content} segmentation={segmentation} />\n            <TeaserButtonComp button={button} />\n            <TeaserFooter footer={footer} />\n        </div>\n    );\n};\n\nconst MultipleSegmentsOrRowsTeaser = (props: TeaserProps & { alignmentClass: string }) => {\n    const { headline, content, footer, image, button, segmentation, className, alignmentClass } = props;\n\n    const wrapperClasses = classNames(\n        'teaser thumbnail display-flex-sm',\n        !segmentation && 'flex-column height-100pct-sm', // only for multiple teasers in a row\n        alignmentClass,\n        className\n    );\n\n    const captionClasses = classNames(\n        'caption',\n        image?.align === 'left' && 'flex-order-2-sm',\n        image?.align === 'right' && 'flex-order-1-sm',\n        segmentation === '50' && 'width-50pct-sm',\n        segmentation === '25:75' && 'width-50pct-sm width-25pct-lg',\n        segmentation === '75:25' && 'width-50pct-sm width-75pct-lg',\n        !segmentation && 'display-flex-sm flex-column-sm flex-1-0-sm'\n    );\n\n    return (\n        <div className={wrapperClasses}>\n            <TeaserImageComp image={image} segmentation={segmentation} />\n            {(headline || content || button) && (\n                <div className={captionClasses}>\n                    <TeaserHeadline headline={headline} segmentation={segmentation} />\n                    <TeaserContent content={content} segmentation={segmentation} />\n                    <TeaserButtonComp button={button} />\n                    <TeaserFooter footer={footer} />\n                </div>\n            )}\n        </div>\n    );\n};\n\nconst TeaserHeadline = ({ headline, segmentation }: Pick<TeaserProps, 'headline' | 'segmentation'>) => {\n    if (!headline) {\n        return null;\n    }\n\n    return <h2 className={segmentation === '100' ? 'margin-top-20 margin-bottom-25' : 'margin-top-5'}>{headline}</h2>;\n};\n\nconst TeaserContent = ({ content, segmentation }: Pick<TeaserProps, 'content' | 'segmentation'>) => {\n    if (!content) {\n        return null;\n    }\n\n    const classes = classNames(\n        'teaser-content-wrapper text-size-16',\n        segmentation === '100' ? 'padding-left-25-sm padding-right-25-sm' : 'flex-1-0-sm'\n    );\n    return <div className={classes}>{content}</div>;\n};\n\nconst TeaserFooter = ({ footer }: Pick<TeaserProps, 'footer'>) => {\n    if (!footer) {\n        return null;\n    }\n\n    return <div className='teaser-footer-wrapper'>{footer}</div>;\n};\n\nconst TeaserButtonComp = ({ button }: Pick<TeaserProps, 'button'>) => {\n    if (!button) {\n        return null;\n    }\n\n    return (\n        <span>\n            <Button bsStyle={button.bsStyle ?? 'primary'} className={button.className} onClick={button.onClick}>\n                {button.text}\n            </Button>\n        </span>\n    );\n};\n\n/* eslint-disable max-len */\nconst placeholderImage1by1 =\n    'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAPoCAQAAADnqhxvAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiCw8ODSFLsnJ3AAAPvUlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDgTLCM9BHrU/AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTExLTE1VDEzOjEzOjMzKzAxOjAwgedH5AAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0xMS0xNVQxMzoxMzozMyswMTowMPC6/1gAAAAASUVORK5CYII=';\n\nconst placeholderImage3by1 =\n    'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAFNCAQAAAA55I0bAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiCw8ODDQ/dKfdAAAFUUlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIO/GUDmajv5qgAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMTEtMTVUMTM6MTI6NTIrMDE6MDAOPS7pAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTExLTE1VDEzOjEyOjUyKzAxOjAwf2CWVQAAAABJRU5ErkJggg==';\n\nconst placeholderImage3by2 =\n    'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAKaCAQAAAAHN7sRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiCw8ODALwzjJEAAAKhUlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIOCbQGM8brNAQAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMTEtMTVUMTM6MTI6MDIrMDE6MDBG3SCNAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTExLTE1VDEzOjEyOjAyKzAxOjAwN4CYMQAAAABJRU5ErkJggg==';\n\nconst placeholderImage16by9 =\n    'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAIwCAQAAAC/sImZAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiDBwMBx70M0fPAAAI3UlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAg55rgVfT+Sm9AAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0xMi0yOFQxMTowNzozMCswMTowMOGwCPwAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMTItMjhUMTE6MDc6MzArMDE6MDCQ7bBAAAAAAElFTkSuQmCC';\n/* eslint-enable max-len */\n\nconst teaserPlaceholderImages = {\n    '1:1': placeholderImage1by1,\n    '3:1': placeholderImage3by1,\n    '3:2': placeholderImage3by2,\n    '16:9': placeholderImage16by9,\n} as const;\n\nconst TeaserImageComp = ({ image, segmentation }: Pick<TeaserProps, 'image' | 'segmentation'>) => {\n    if (!image) {\n        return null;\n    }\n\n    let specificClassNames;\n    if (segmentation !== '100') {\n        specificClassNames = classNames(\n            image.align === 'left' && 'flex-order-1-sm padding-left-20-sm',\n            image.align === 'right' && 'flex-order-2-sm padding-right-20-sm',\n            segmentation === '50' && 'width-50pct-sm',\n            segmentation === '25:75' && 'width-50pct-sm width-75pct-lg',\n            segmentation === '75:25' && 'width-50pct-sm width-25pct-lg',\n            segmentation && 'padding-top-20-sm padding-bottom-20-sm'\n        );\n    }\n\n    const imageWrapperClassNames = classNames(\n        'teaser-image-wrapper',\n        specificClassNames,\n        image.className && image.className\n    );\n\n    const callback = image?.onClick ?? noop;\n\n    return (\n        <div className={imageWrapperClassNames} onClick={callback}>\n            <img\n                className='img-responsive cover center'\n                src={teaserPlaceholderImages[image.aspectRatio!] ?? placeholderImage16by9}\n                alt={image.alt ?? ''}\n                style={{ backgroundImage: `url(${image.src})` }}\n            />\n        </div>\n    );\n};\n"],"names":["Teaser","props","segmentation","verticalAlignment","alignmentClass","jsx","SingleColumnTeaser","MultipleSegmentsOrRowsTeaser","headline","content","footer","image","button","className","wrapperClassNames","classNames","jsxs","TeaserHeadline","TeaserImageComp","TeaserContent","TeaserButtonComp","TeaserFooter","wrapperClasses","captionClasses","classes","Button","placeholderImage1by1","placeholderImage3by1","placeholderImage3by2","placeholderImage16by9","teaserPlaceholderImages","specificClassNames","imageWrapperClassNames","callback","noop"],"mappings":"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"}

package/components/teaser/TeaserContainer.js

@@ -1,6 +1,6 @@
 import { jsx as c } from "react/jsx-runtime";
 import { Children as l } from "react";
-import a from "classnames";
+import a from "../../utils/classNames.js";
 const o = (s) => {
   switch (s) {
     case 1:

package/components/teaser/TeaserContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"TeaserContainer.js","sources":["../../../src/components/teaser/TeaserContainer.tsx"],"sourcesContent":["import { Children, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nconst getGridClasses = (amount: number) => {\n    switch (amount) {\n        case 1:\n            return 'col-12';\n        case 2:\n            return 'col-12 col-sm-6';\n        case 3:\n            return 'col-12 col-md-4';\n        case 4:\n            return 'col-12 col-md-6 col-lg-3';\n        case 6:\n            return 'col-12 col-sm-4 col-lg-2';\n        case 12:\n            return 'col-12 col-sm-1';\n        default:\n            return 'col-12';\n    }\n};\n\nexport type TeasersPerRow = 1 | 2 | 3 | 4 | 6 | 12;\n\nexport type TeaserContainerProps = {\n    /**\n     * Defines how many children are rendered into a row.\n     *\n     * If \"teaserPerRow\" is not defined, the container tries to put all children in a row with regard to the\n     * Bootstrap grid. This is done by dividing the amount of children by 12 in order  to figure out the col grid\n     * classes.\n     *\n     * It is recommended to define \"teasersPerRow\" when having more than 4 teasers.\n     *\n     * Possible values are: `1` `2` `3` `4` `6` `12`\n     */\n    teaserPerRow?: TeasersPerRow;\n\n    /**\n     * Optional string for additional classes added to each column of a child.\n     */\n    columnClassName?: string;\n\n    /**\n     * Optional string for additional classes added to the row.\n     */\n    className?: string;\n};\n\nconst TeaserContainer = (props: PropsWithChildren<TeaserContainerProps>) => {\n    const { className, teaserPerRow, children, columnClassName } = props;\n\n    const rowClassNames = classNames('teaser-container', 'row', 'display-flex-sm flex-wrap-sm', className);\n\n    const columnClassNames = teaserPerRow\n        ? getGridClasses(teaserPerRow)\n        : getGridClasses(Children.count(children) || 1);\n\n    const aggregatedColumnClassNames = classNames(columnClassNames, columnClassName);\n\n    return (\n        <div className={rowClassNames}>\n            {Children.map(children, child => {\n                return <div className={aggregatedColumnClassNames}>{child}</div>;\n            })}\n        </div>\n    );\n};\n\nexport default TeaserContainer;\n"],"names":["getGridClasses","amount","TeaserContainer","props","className","teaserPerRow","children","columnClassName","rowClassNames","classNames","columnClassNames","Children","aggregatedColumnClassNames","child","jsx"],"mappings":";;;AAGA,MAAMA,IAAiB,CAACC,MAAmB;AACvC,UAAQA,GAAA;AAAA,IACJ,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX;AACI,aAAO;AAAA,EAAA;AAEnB,GA6BMC,IAAkB,CAACC,MAAmD;AACxE,QAAM,EAAE,WAAAC,GAAW,cAAAC,GAAc,UAAAC,GAAU,iBAAAC,MAAoBJ,GAEzDK,IAAgBC,EAAW,oBAAoB,OAAO,gCAAgCL,CAAS,GAE/FM,IACAV,EADmBK,KAEJM,EAAS,MAAML,CAAQ,KAAK,CADhB,GAG3BM,IAA6BH,EAAWC,GAAkBH,CAAe;AAE/E,2BACK,OAAA,EAAI,WAAWC,GACX,UAAAG,EAAS,IAAIL,GAAU,CAAAO,MACb,gBAAAC,EAAC,OAAA,EAAI,WAAWF,GAA6B,UAAAC,GAAM,CAC7D,EAAA,CACL;AAER;"}
+{"version":3,"file":"TeaserContainer.js","sources":["../../../src/components/teaser/TeaserContainer.tsx"],"sourcesContent":["import { Children, type PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nconst getGridClasses = (amount: number) => {\n    switch (amount) {\n        case 1:\n            return 'col-12';\n        case 2:\n            return 'col-12 col-sm-6';\n        case 3:\n            return 'col-12 col-md-4';\n        case 4:\n            return 'col-12 col-md-6 col-lg-3';\n        case 6:\n            return 'col-12 col-sm-4 col-lg-2';\n        case 12:\n            return 'col-12 col-sm-1';\n        default:\n            return 'col-12';\n    }\n};\n\nexport type TeasersPerRow = 1 | 2 | 3 | 4 | 6 | 12;\n\nexport type TeaserContainerProps = {\n    /**\n     * Defines how many children are rendered into a row.\n     *\n     * If \"teaserPerRow\" is not defined, the container tries to put all children in a row with regard to the\n     * Bootstrap grid. This is done by dividing the amount of children by 12 in order  to figure out the col grid\n     * classes.\n     *\n     * It is recommended to define \"teasersPerRow\" when having more than 4 teasers.\n     *\n     * Possible values are: `1` `2` `3` `4` `6` `12`\n     */\n    teaserPerRow?: TeasersPerRow;\n\n    /**\n     * Optional string for additional classes added to each column of a child.\n     */\n    columnClassName?: string;\n\n    /**\n     * Optional string for additional classes added to the row.\n     */\n    className?: string;\n};\n\nconst TeaserContainer = (props: PropsWithChildren<TeaserContainerProps>) => {\n    const { className, teaserPerRow, children, columnClassName } = props;\n\n    const rowClassNames = classNames('teaser-container', 'row', 'display-flex-sm flex-wrap-sm', className);\n\n    const columnClassNames = teaserPerRow\n        ? getGridClasses(teaserPerRow)\n        : getGridClasses(Children.count(children) || 1);\n\n    const aggregatedColumnClassNames = classNames(columnClassNames, columnClassName);\n\n    return (\n        <div className={rowClassNames}>\n            {Children.map(children, child => {\n                return <div className={aggregatedColumnClassNames}>{child}</div>;\n            })}\n        </div>\n    );\n};\n\nexport default TeaserContainer;\n"],"names":["getGridClasses","amount","TeaserContainer","props","className","teaserPerRow","children","columnClassName","rowClassNames","classNames","columnClassNames","Children","aggregatedColumnClassNames","child","jsx"],"mappings":";;;AAIA,MAAMA,IAAiB,CAACC,MAAmB;AACvC,UAAQA,GAAA;AAAA,IACJ,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX;AACI,aAAO;AAAA,EAAA;AAEnB,GA6BMC,IAAkB,CAACC,MAAmD;AACxE,QAAM,EAAE,WAAAC,GAAW,cAAAC,GAAc,UAAAC,GAAU,iBAAAC,MAAoBJ,GAEzDK,IAAgBC,EAAW,oBAAoB,OAAO,gCAAgCL,CAAS,GAE/FM,IACAV,EADmBK,KAEJM,EAAS,MAAML,CAAQ,KAAK,CADhB,GAG3BM,IAA6BH,EAAWC,GAAkBH,CAAe;AAE/E,2BACK,OAAA,EAAI,WAAWC,GACX,UAAAG,EAAS,IAAIL,GAAU,CAAAO,MACb,gBAAAC,EAAC,OAAA,EAAI,WAAWF,GAA6B,UAAAC,GAAM,CAC7D,EAAA,CACL;AAER;"}

package/components/timepicker/TimePicker.d.ts

@@ -6,6 +6,7 @@ export type TimePickerProps = {
     value?: string;
     /**
      * Callback function when the value changes and is a valid time format.
+     * It also emits an empty string when the input is cleared.
      *
      * If not it handles the state internally until the time is valid and filled.
      */
@@ -22,6 +23,25 @@ export type TimePickerProps = {
      * @default false
      */
     showIcon?: boolean;
+    /**
+     * Defines whether to show a dropdown with pre-defined time values.
+     *
+     * @default false
+     */
+    dropdown?: boolean;
+    /**
+     * Defines the minute interval for time controls and dropdown values.
+     * Invalid values fallback to 15.
+     *
+     * @default 15
+     */
+    minuteOffset?: number;
+    /**
+     * Defines whether the component is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Input error message.
      */

package/components/timepicker/TimePicker.js

@@ -1,111 +1,165 @@
-import { jsxs as l, jsx as t, Fragment as A } from "react/jsx-runtime";
-import { useState as W, useEffect as j } from "react";
-import { IMaskInput as D, IMask as g } from "react-imask";
-import f from "classnames";
-import { noop as L } from "es-toolkit/compat";
-import { isNil as U } from "es-toolkit/predicate";
-import k from "moment";
-import z from "tiny-invariant";
-const p = 15, B = /^(?:\d|[01]\d|2[0-3]):[0-5]\d$/, N = (e) => e >= 10 ? `${e}` : `0${e}`, u = (e, o) => `${N(e)}:${N(o)}`, y = (e, o = p) => Math.floor(e.minutes() / o) * o, O = () => {
-  const e = /* @__PURE__ */ new Date(), o = e.getHours(), a = e.getMinutes();
-  return u(o, a);
-}, M = (e) => B.test(e), T = (e) => {
-  if (!!U(e))
+import { jsxs as d, jsx as n, Fragment as ee } from "react/jsx-runtime";
+import { useState as V, useRef as y, useEffect as P } from "react";
+import { IMaskInput as se, IMask as I } from "react-imask";
+import { noop as te } from "es-toolkit/compat";
+import { isNil as ne } from "es-toolkit/predicate";
+import O from "moment";
+import oe from "tiny-invariant";
+import re from "../selects/BaseSelectDropdown.js";
+import ae from "../../hooks/useClickOutside.js";
+import ie from "../../hooks/useMergeRefs.js";
+import T from "../../utils/classNames.js";
+const b = 15, ce = /^(?:\d|[01]\d|2[0-3]):[0-5]\d$/, C = (e) => e >= 10 ? `${e}` : `0${e}`, p = (e, t) => `${C(e)}:${C(t)}`, D = (e, t = b) => Math.floor(e.minutes() / t) * t, le = (e) => Number.isInteger(e) && e > 0 && e <= 60, me = (e) => le(e) ? e : b, de = (e) => {
+  const t = [];
+  for (let a = 0; a < 1440; a += e) {
+    const f = Math.floor(a / 60), i = a % 60;
+    t.push(p(f, i));
+  }
+  return t;
+}, ue = () => {
+  const e = /* @__PURE__ */ new Date(), t = e.getHours(), r = e.getMinutes();
+  return p(t, r);
+}, S = (e) => ce.test(e), R = (e) => {
+  if (!!ne(e))
     return !1;
-  const a = e === "" || M(e);
-  return a || z(!1, 'Wrong time format. Please pass in value with the following format: "hh:mm".'), a;
-}, Z = (e) => {
+  const r = e === "" || S(e);
+  return r || oe(!1, 'Wrong time format. Please pass in value with the following format: "hh:mm".'), r;
+}, be = (e) => {
   const {
-    value: o,
-    onChange: a = L,
-    alwaysShowMask: v = !0,
-    showIcon: x = !1,
-    errorMessage: m,
-    warningMessage: d,
-    messageWhiteSpace: w = "normal",
-    className: I = "",
-    inputProps: h = {},
-    ...V
-  } = e, P = T(o) ? o : O(), [i, c] = W(P);
-  j(() => {
-    T(o) && (c(o), a(o));
-  }, [o]);
-  const $ = (s) => {
-    const n = s.target;
-    (!n.value || n.value.startsWith("-")) && setTimeout(() => {
-      n.setSelectionRange(0, 0);
-    }, 0), h.onFocus?.(s);
-  }, b = (s, n) => {
-    c(s), n.masked.isComplete && a(s);
-  }, C = M(i), F = () => {
-    const s = k(`2020-01-01 ${i}`), n = y(s);
-    s.minute(n).second(0), s.add(p, "minutes");
-    const r = u(s.hours(), s.minutes());
-    c(r), a(r);
-  }, S = () => {
-    const s = k(`2020-01-01 ${i}`), n = y(s);
-    s.minute(n).second(0), s.subtract(p, "minutes");
-    const r = u(s.hours(), s.minutes());
-    c(r), a(r);
-  }, { className: E, ...H } = h, R = m || d;
-  return /* @__PURE__ */ l("div", { ...V, className: f("TimePicker", "input-group", I), children: [
-    x && /* @__PURE__ */ t("span", { className: "input-group-addon", children: /* @__PURE__ */ t("span", { className: "rioglyph rioglyph-time-alt" }) }),
-    /* @__PURE__ */ l("div", { className: "form-control-feedback-wrapper", children: [
-      /* @__PURE__ */ t(
-        D,
-        {
-          ...H,
-          className: f("TimePickerInput", "form-control", E),
-          mask: "HH:MM",
-          blocks: {
-            HH: {
-              mask: g.MaskedRange,
-              from: 0,
-              to: 23,
-              maxLength: 2
+    value: t,
+    onChange: r = te,
+    alwaysShowMask: a = !0,
+    showIcon: f = !1,
+    dropdown: i = !1,
+    minuteOffset: $ = b,
+    disabled: F = !1,
+    errorMessage: h,
+    warningMessage: g,
+    messageWhiteSpace: E = "normal",
+    className: H = "",
+    inputProps: k = {},
+    ...A
+  } = e, W = R(t) ? t : ue(), [c, l] = V(W), [x, N] = V(!1), m = me($), u = F || !!k.disabled, j = y(null), w = y(!1), M = y(!1), B = ae(() => {
+    i && N(!1);
+  }), L = ie(j, B);
+  P(() => {
+    R(t) && l(t);
+  }, [t]), P(() => (w.current = !0, () => {
+    w.current = !1;
+  }), []);
+  const U = (s) => {
+    const o = s.target;
+    (!o.value || o.value.startsWith("-")) && setTimeout(() => {
+      o.setSelectionRange(0, 0);
+    }, 0), k.onFocus?.(s), i && !u && N(!0);
+  }, z = (s, o) => {
+    if (M.current) {
+      M.current = !1;
+      return;
+    }
+    if (l(s), !!w.current) {
+      if (o.masked.isComplete) {
+        r(s);
+        return;
+      }
+      o.unmaskedValue === "" && r("");
+    }
+  }, _ = S(c), q = () => {
+    const s = O(`2020-01-01 ${c}`), o = D(s, m);
+    s.minute(o).second(0), s.add(m, "minutes");
+    const v = p(s.hours(), s.minutes());
+    l(v);
+  }, G = () => {
+    const s = O(`2020-01-01 ${c}`), o = D(s, m);
+    s.minute(o).second(0), s.subtract(m, "minutes");
+    const v = p(s.hours(), s.minutes());
+    l(v);
+  }, { className: J, ...K } = k, Q = de(m).map((s) => ({
+    id: s,
+    label: s,
+    selected: s === c
+  })), X = (s) => {
+    !s || u || (M.current = !0, l(s.id), r(s.id), N(!1));
+  }, Y = h || g, Z = T("TimePicker", i && "dropdown", x && "open", H);
+  return /* @__PURE__ */ d("div", { ...A, className: Z, ref: L, children: [
+    /* @__PURE__ */ d("div", { className: "input-group", children: [
+      f && /* @__PURE__ */ n("span", { className: "input-group-addon", children: /* @__PURE__ */ n("span", { className: "rioglyph rioglyph-time-alt" }) }),
+      /* @__PURE__ */ d("div", { className: "form-control-feedback-wrapper", children: [
+        /* @__PURE__ */ n(
+          se,
+          {
+            ...K,
+            className: T("TimePickerInput", "form-control", J),
+            disabled: u,
+            mask: "HH:MM",
+            blocks: {
+              HH: {
+                mask: I.MaskedRange,
+                from: 0,
+                to: 23,
+                maxLength: 2
+              },
+              MM: {
+                mask: I.MaskedRange,
+                from: 0,
+                to: 59,
+                maxLength: 2
+              }
             },
-            MM: {
-              mask: g.MaskedRange,
-              from: 0,
-              to: 59,
-              maxLength: 2
-            }
-          },
-          value: i,
-          onAccept: b,
-          onFocus: $,
-          lazy: !v,
-          placeholderChar: "-",
-          overwrite: !0
-        }
-      ),
-      R && /* @__PURE__ */ l(A, { children: [
-        m && /* @__PURE__ */ t("span", { className: "form-control-feedback rioglyph rioglyph-error-sign" }),
-        d && /* @__PURE__ */ t("span", { className: "form-control-feedback rioglyph rioglyph-warning-sign" }),
-        /* @__PURE__ */ t("span", { className: `help-block white-space-${w}`, children: /* @__PURE__ */ t("span", { children: m || d }) })
-      ] })
-    ] }),
-    C && /* @__PURE__ */ l("div", { className: "TimePickerIncreaseButton input-group-addon", children: [
-      /* @__PURE__ */ t(
+            value: c,
+            onAccept: z,
+            onFocus: U,
+            lazy: !a,
+            placeholderChar: "-",
+            overwrite: !0
+          }
+        ),
+        Y && /* @__PURE__ */ d(ee, { children: [
+          h && /* @__PURE__ */ n("span", { className: "form-control-feedback rioglyph rioglyph-error-sign" }),
+          g && /* @__PURE__ */ n("span", { className: "form-control-feedback rioglyph rioglyph-warning-sign" }),
+          /* @__PURE__ */ n("span", { className: `help-block white-space-${E}`, children: /* @__PURE__ */ n("span", { children: h || g }) })
+        ] })
+      ] }),
+      _ && /* @__PURE__ */ d(
         "div",
         {
-          className: "text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer",
-          onClick: S,
-          children: /* @__PURE__ */ t("div", { className: "rioglyph rioglyph-chevron-left scale-90" })
-        }
-      ),
-      /* @__PURE__ */ t(
-        "div",
-        {
-          className: "text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer",
-          onClick: F,
-          children: /* @__PURE__ */ t("div", { className: "rioglyph rioglyph-chevron-right scale-90" })
+          className: T(
+            "TimePickerIncreaseButton input-group-addon",
+            u && "pointer-events-none bg-lightest"
+          ),
+          children: [
+            /* @__PURE__ */ n(
+              "div",
+              {
+                className: "text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer",
+                onClick: G,
+                children: /* @__PURE__ */ n("div", { className: "rioglyph rioglyph-chevron-left scale-90" })
+              }
+            ),
+            /* @__PURE__ */ n(
+              "div",
+              {
+                className: "text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer",
+                onClick: q,
+                children: /* @__PURE__ */ n("div", { className: "rioglyph rioglyph-chevron-right scale-90" })
+              }
+            )
+          ]
         }
       )
-    ] })
+    ] }),
+    i && /* @__PURE__ */ n(
+      re,
+      {
+        isOpen: x,
+        options: Q,
+        onSelect: X,
+        dropdownClassName: "max-height-200 overflow-auto width-100pct"
+      }
+    )
   ] });
 };
 export {
-  Z as default
+  be as default
 };
 //# sourceMappingURL=TimePicker.js.map

package/components/timepicker/TimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.js","sources":["../../../src/components/timepicker/TimePicker.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useState } from 'react';\nimport { IMask, IMaskInput } from 'react-imask';\nimport type { InputMask } from 'imask';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/compat';\nimport { isNil } from 'es-toolkit/predicate';\nimport moment, { type Moment } from 'moment';\nimport invariant from 'tiny-invariant';\n\nconst MINUTES_OFFSET = 15;\n\nconst mask = '00:00';\nconst fullRegexp = /^(?:\\d|[01]\\d|2[0-3]):[0-5]\\d$/;\n\nconst getPadded = (value: number) => (value >= 10 ? `${value}` : `0${value}`);\nconst formatTimeString = (hours: number, minutes: number) => `${getPadded(hours)}:${getPadded(minutes)}`;\n\nconst roundedUp = (time: Moment, offset = MINUTES_OFFSET) => Math.floor(time.minutes() / offset) * offset;\n\nconst getInitialTime = () => {\n    const date = new Date();\n    const hours = date.getHours();\n    const minutes = date.getMinutes();\n    return formatTimeString(hours, minutes);\n};\n\nconst isTimeValid = (value: string) => fullRegexp.test(value);\n\nconst isControlledAndValid = (value: string | undefined): value is string => {\n    const hasExternalValue = !isNil(value);\n    if (!hasExternalValue) {\n        return false;\n    }\n\n    const isValid = value === '' || isTimeValid(value);\n    if (!isValid) {\n        invariant(false, 'Wrong time format. Please pass in value with the following format: \"hh:mm\".');\n    }\n    return isValid;\n};\n\nexport type TimePickerProps = {\n    /**\n     * Value of the time as string. Note, when value is given the component is treated as controlled.\n     */\n    value?: string;\n\n    /**\n     * Callback function when the value changes and is a valid time format.\n     *\n     * If not it handles the state internally until the time is valid and filled.\n     */\n    onChange?: (value: string) => void;\n\n    /**\n     * Defines whether to always show the input mask placeholder.\n     *\n     * @default true\n     */\n    alwaysShowMask?: boolean;\n\n    /**\n     * Defines whether to show the input icon.\n     *\n     * @default false\n     */\n    showIcon?: boolean;\n\n    /**\n     * Input error message.\n     */\n    errorMessage?: string | React.ReactNode;\n\n    /**\n     * Input warning message.\n     */\n    warningMessage?: string | React.ReactNode;\n\n    /**\n     * Feedback message width.\n     *\n     * @default 'normal'\n     */\n    messageWhiteSpace?: 'normal' | 'nowrap' | 'pre-line';\n\n    /**\n     * Additional properties to be set on the input element.\n     */\n    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\nconst TimePicker = (props: TimePickerProps) => {\n    const {\n        value,\n        onChange = noop,\n        alwaysShowMask = true,\n        showIcon = false,\n        errorMessage,\n        warningMessage,\n        messageWhiteSpace = 'normal',\n        className = '',\n        inputProps = {},\n        ...remainingProps\n    } = props;\n\n    const initialTime = isControlledAndValid(value) ? value : getInitialTime();\n\n    const [timeValue, setTimeValue] = useState(initialTime);\n\n    // Update internal time value from outside when used as a controlled component\n    useEffect(() => {\n        if (isControlledAndValid(value)) {\n            setTimeValue(value);\n            onChange(value);\n        }\n    }, [value]);\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        const input = event.target;\n        // Check if value is empty or partially filled\n        if (!input.value || input.value.startsWith('-')) {\n            // Move cursor to the first empty position (usually 0)\n            // Timeout needed to wait for IMask internal focus handling\n            setTimeout(() => {\n                input.setSelectionRange(0, 0);\n            }, 0);\n        }\n\n        // If you want to preserve custom onFocus from props\n        inputProps.onFocus?.(event);\n    };\n\n    const handleAcceptTime = (val: string, maskRef: InputMask<{ [x: string]: unknown }>) => {\n        setTimeValue(val);\n\n        if (maskRef.masked.isComplete) {\n            onChange(val);\n        }\n    };\n\n    const isValid = isTimeValid(timeValue);\n\n    const handleIncrease = () => {\n        const time = moment(`2020-01-01 ${timeValue}`);\n        const rounded = roundedUp(time);\n        time.minute(rounded).second(0);\n        time.add(MINUTES_OFFSET, 'minutes');\n        const updatedTimeValue = formatTimeString(time.hours(), time.minutes());\n\n        setTimeValue(updatedTimeValue);\n        onChange(updatedTimeValue);\n    };\n\n    const handleDecrease = () => {\n        const time = moment(`2020-01-01 ${timeValue}`);\n        const rounded = roundedUp(time);\n        time.minute(rounded).second(0);\n        time.subtract(MINUTES_OFFSET, 'minutes');\n        const updatedTimeValue = formatTimeString(time.hours(), time.minutes());\n\n        setTimeValue(updatedTimeValue);\n        onChange(updatedTimeValue);\n    };\n\n    const { className: inputClassName, ...otherInputProps } = inputProps;\n\n    const hasFeedback = errorMessage || warningMessage;\n\n    return (\n        <div {...remainingProps} className={classNames('TimePicker', 'input-group', className)}>\n            {showIcon && (\n                <span className='input-group-addon'>\n                    <span className='rioglyph rioglyph-time-alt' />\n                </span>\n            )}\n            <div className='form-control-feedback-wrapper'>\n                <IMaskInput\n                    {...otherInputProps}\n                    className={classNames('TimePickerInput', 'form-control', inputClassName)}\n                    // mask={mask}\n                    mask='HH:MM'\n                    blocks={{\n                        HH: {\n                            mask: IMask.MaskedRange,\n                            from: 0,\n                            to: 23,\n                            maxLength: 2,\n                        },\n                        MM: {\n                            mask: IMask.MaskedRange,\n                            from: 0,\n                            to: 59,\n                            maxLength: 2,\n                        },\n                    }}\n                    value={timeValue}\n                    onAccept={handleAcceptTime}\n                    onFocus={handleFocus}\n                    lazy={!alwaysShowMask}\n                    placeholderChar='-'\n                    overwrite\n                />\n                {hasFeedback && (\n                    <>\n                        {errorMessage && <span className='form-control-feedback rioglyph rioglyph-error-sign' />}\n                        {warningMessage && <span className='form-control-feedback rioglyph rioglyph-warning-sign' />}\n                        <span className={`help-block white-space-${messageWhiteSpace}`}>\n                            <span>{errorMessage || warningMessage}</span>\n                        </span>\n                    </>\n                )}\n            </div>\n            {isValid && (\n                <div className='TimePickerIncreaseButton input-group-addon'>\n                    <div\n                        className='text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer'\n                        onClick={handleDecrease}\n                    >\n                        <div className='rioglyph rioglyph-chevron-left scale-90' />\n                    </div>\n                    <div\n                        className='text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer'\n                        onClick={handleIncrease}\n                    >\n                        <div className='rioglyph rioglyph-chevron-right scale-90' />\n                    </div>\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default TimePicker;\n"],"names":["MINUTES_OFFSET","fullRegexp","getPadded","value","formatTimeString","hours","minutes","roundedUp","time","offset","getInitialTime","date","isTimeValid","isControlledAndValid","isNil","isValid","invariant","TimePicker","props","onChange","noop","alwaysShowMask","showIcon","errorMessage","warningMessage","messageWhiteSpace","className","inputProps","remainingProps","initialTime","timeValue","setTimeValue","useState","useEffect","handleFocus","event","input","handleAcceptTime","val","maskRef","handleIncrease","moment","rounded","updatedTimeValue","handleDecrease","inputClassName","otherInputProps","hasFeedback","jsxs","classNames","jsx","IMaskInput","IMask","Fragment"],"mappings":"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"}
+{"version":3,"file":"TimePicker.js","sources":["../../../src/components/timepicker/TimePicker.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport { IMask, IMaskInput } from 'react-imask';\nimport type { InputMask } from 'imask';\nimport { noop } from 'es-toolkit/compat';\nimport { isNil } from 'es-toolkit/predicate';\nimport moment, { type Moment } from 'moment';\nimport invariant from 'tiny-invariant';\n\nimport BaseSelectDropdown, { type SelectOption } from '../selects/BaseSelectDropdown';\nimport useClickOutside from '../../useClickOutside';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport classNames from '../../utils/classNames';\n\nconst MINUTES_OFFSET = 15;\n\nconst mask = '00:00';\nconst fullRegexp = /^(?:\\d|[01]\\d|2[0-3]):[0-5]\\d$/;\n\nconst getPadded = (value: number) => (value >= 10 ? `${value}` : `0${value}`);\nconst formatTimeString = (hours: number, minutes: number) => `${getPadded(hours)}:${getPadded(minutes)}`;\n\nconst roundedUp = (time: Moment, offset = MINUTES_OFFSET) => Math.floor(time.minutes() / offset) * offset;\nconst isValidMinuteOffset = (offset: number) => Number.isInteger(offset) && offset > 0 && offset <= 60;\nconst getEffectiveMinuteOffset = (offset: number) => (isValidMinuteOffset(offset) ? offset : MINUTES_OFFSET);\nconst getDropdownTimeValues = (offset: number) => {\n    const values: string[] = [];\n    const minutesPerDay = 24 * 60;\n    for (let totalMinutes = 0; totalMinutes < minutesPerDay; totalMinutes += offset) {\n        const hours = Math.floor(totalMinutes / 60);\n        const minutes = totalMinutes % 60;\n        values.push(formatTimeString(hours, minutes));\n    }\n    return values;\n};\n\nconst getInitialTime = () => {\n    const date = new Date();\n    const hours = date.getHours();\n    const minutes = date.getMinutes();\n    return formatTimeString(hours, minutes);\n};\n\nconst isTimeValid = (value: string) => fullRegexp.test(value);\n\nconst isControlledAndValid = (value: string | undefined): value is string => {\n    const hasExternalValue = !isNil(value);\n    if (!hasExternalValue) {\n        return false;\n    }\n\n    const isValid = value === '' || isTimeValid(value);\n    if (!isValid) {\n        invariant(false, 'Wrong time format. Please pass in value with the following format: \"hh:mm\".');\n    }\n    return isValid;\n};\n\nexport type TimePickerProps = {\n    /**\n     * Value of the time as string. Note, when value is given the component is treated as controlled.\n     */\n    value?: string;\n\n    /**\n     * Callback function when the value changes and is a valid time format.\n     * It also emits an empty string when the input is cleared.\n     *\n     * If not it handles the state internally until the time is valid and filled.\n     */\n    onChange?: (value: string) => void;\n\n    /**\n     * Defines whether to always show the input mask placeholder.\n     *\n     * @default true\n     */\n    alwaysShowMask?: boolean;\n\n    /**\n     * Defines whether to show the input icon.\n     *\n     * @default false\n     */\n    showIcon?: boolean;\n\n    /**\n     * Defines whether to show a dropdown with pre-defined time values.\n     *\n     * @default false\n     */\n    dropdown?: boolean;\n\n    /**\n     * Defines the minute interval for time controls and dropdown values.\n     * Invalid values fallback to 15.\n     *\n     * @default 15\n     */\n    minuteOffset?: number;\n\n    /**\n     * Defines whether the component is disabled.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Input error message.\n     */\n    errorMessage?: string | React.ReactNode;\n\n    /**\n     * Input warning message.\n     */\n    warningMessage?: string | React.ReactNode;\n\n    /**\n     * Feedback message width.\n     *\n     * @default 'normal'\n     */\n    messageWhiteSpace?: 'normal' | 'nowrap' | 'pre-line';\n\n    /**\n     * Additional properties to be set on the input element.\n     */\n    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\nconst TimePicker = (props: TimePickerProps) => {\n    const {\n        value,\n        onChange = noop,\n        alwaysShowMask = true,\n        showIcon = false,\n        dropdown = false,\n        minuteOffset = MINUTES_OFFSET,\n        disabled = false,\n        errorMessage,\n        warningMessage,\n        messageWhiteSpace = 'normal',\n        className = '',\n        inputProps = {},\n        ...remainingProps\n    } = props;\n\n    const initialTime = isControlledAndValid(value) ? value : getInitialTime();\n\n    const [timeValue, setTimeValue] = useState(initialTime);\n\n    const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n    const effectiveMinuteOffset = getEffectiveMinuteOffset(minuteOffset);\n\n    const isInputDisabled = disabled || !!inputProps.disabled;\n    const timePickerRef = useRef<HTMLDivElement>(null);\n    const hasMountedRef = useRef(false);\n    const suppressNextAcceptRef = useRef(false);\n\n    const clickOutsideRef = useClickOutside(() => {\n        if (dropdown) {\n            setIsDropdownOpen(false);\n        }\n    });\n\n    const mergedTimePickerRefs = useMergeRefs(timePickerRef, clickOutsideRef);\n\n    // Update internal time value from outside when used as a controlled component\n    useEffect(() => {\n        if (isControlledAndValid(value)) {\n            setTimeValue(value);\n        }\n    }, [value]);\n\n    useEffect(() => {\n        hasMountedRef.current = true;\n\n        return () => {\n            hasMountedRef.current = false;\n        };\n    }, []);\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        const input = event.target;\n        // Check if value is empty or partially filled\n        if (!input.value || input.value.startsWith('-')) {\n            // Move cursor to the first empty position (usually 0)\n            // Timeout needed to wait for IMask internal focus handling\n            setTimeout(() => {\n                input.setSelectionRange(0, 0);\n            }, 0);\n        }\n\n        // If you want to preserve custom onFocus from props\n        inputProps.onFocus?.(event);\n\n        if (dropdown && !isInputDisabled) {\n            setIsDropdownOpen(true);\n        }\n    };\n\n    const handleAcceptTime = (val: string, maskRef: InputMask<{ [x: string]: unknown }>) => {\n        if (suppressNextAcceptRef.current) {\n            suppressNextAcceptRef.current = false;\n            return;\n        }\n\n        setTimeValue(val);\n\n        if (!hasMountedRef.current) {\n            return;\n        }\n\n        if (maskRef.masked.isComplete) {\n            onChange(val);\n            return;\n        }\n\n        if (maskRef.unmaskedValue === '') {\n            onChange('');\n        }\n    };\n\n    const isValid = isTimeValid(timeValue);\n\n    const handleIncrease = () => {\n        const time = moment(`2020-01-01 ${timeValue}`);\n        const rounded = roundedUp(time, effectiveMinuteOffset);\n        time.minute(rounded).second(0);\n        time.add(effectiveMinuteOffset, 'minutes');\n        const updatedTimeValue = formatTimeString(time.hours(), time.minutes());\n\n        setTimeValue(updatedTimeValue);\n    };\n\n    const handleDecrease = () => {\n        const time = moment(`2020-01-01 ${timeValue}`);\n        const rounded = roundedUp(time, effectiveMinuteOffset);\n        time.minute(rounded).second(0);\n        time.subtract(effectiveMinuteOffset, 'minutes');\n        const updatedTimeValue = formatTimeString(time.hours(), time.minutes());\n\n        setTimeValue(updatedTimeValue);\n    };\n\n    const { className: inputClassName, ...otherInputProps } = inputProps;\n\n    const dropdownOptions: SelectOption[] = getDropdownTimeValues(effectiveMinuteOffset).map(option => ({\n        id: option,\n        label: option,\n        selected: option === timeValue,\n    }));\n\n    const handleSelectDropdownValue = (selectedItem: SelectOption | undefined) => {\n        if (!selectedItem || isInputDisabled) {\n            return;\n        }\n\n        suppressNextAcceptRef.current = true;\n        setTimeValue(selectedItem.id);\n        onChange(selectedItem.id);\n        setIsDropdownOpen(false);\n    };\n\n    const hasFeedback = errorMessage || warningMessage;\n\n    const wrapperClassName = classNames('TimePicker', dropdown && 'dropdown', isDropdownOpen && 'open', className);\n\n    return (\n        <div {...remainingProps} className={wrapperClassName} ref={mergedTimePickerRefs}>\n            <div className='input-group'>\n                {showIcon && (\n                    <span className='input-group-addon'>\n                        <span className='rioglyph rioglyph-time-alt' />\n                    </span>\n                )}\n                <div className='form-control-feedback-wrapper'>\n                    <IMaskInput\n                        {...otherInputProps}\n                        className={classNames('TimePickerInput', 'form-control', inputClassName)}\n                        disabled={isInputDisabled}\n                        mask='HH:MM'\n                        blocks={{\n                            HH: {\n                                mask: IMask.MaskedRange,\n                                from: 0,\n                                to: 23,\n                                maxLength: 2,\n                            },\n                            MM: {\n                                mask: IMask.MaskedRange,\n                                from: 0,\n                                to: 59,\n                                maxLength: 2,\n                            },\n                        }}\n                        value={timeValue}\n                        onAccept={handleAcceptTime}\n                        onFocus={handleFocus}\n                        lazy={!alwaysShowMask}\n                        placeholderChar='-'\n                        overwrite\n                    />\n                    {hasFeedback && (\n                        <>\n                            {errorMessage && <span className='form-control-feedback rioglyph rioglyph-error-sign' />}\n                            {warningMessage && (\n                                <span className='form-control-feedback rioglyph rioglyph-warning-sign' />\n                            )}\n                            <span className={`help-block white-space-${messageWhiteSpace}`}>\n                                <span>{errorMessage || warningMessage}</span>\n                            </span>\n                        </>\n                    )}\n                </div>\n                {isValid && (\n                    <div\n                        className={classNames(\n                            'TimePickerIncreaseButton input-group-addon',\n                            isInputDisabled && 'pointer-events-none bg-lightest'\n                        )}\n                    >\n                        <div\n                            className='text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer'\n                            onClick={handleDecrease}\n                        >\n                            <div className='rioglyph rioglyph-chevron-left scale-90' />\n                        </div>\n                        <div\n                            className='text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer'\n                            onClick={handleIncrease}\n                        >\n                            <div className='rioglyph rioglyph-chevron-right scale-90' />\n                        </div>\n                    </div>\n                )}\n            </div>\n            {dropdown && (\n                <BaseSelectDropdown\n                    isOpen={isDropdownOpen}\n                    options={dropdownOptions}\n                    onSelect={handleSelectDropdownValue}\n                    dropdownClassName='max-height-200 overflow-auto width-100pct'\n                />\n            )}\n        </div>\n    );\n};\n\nexport default TimePicker;\n"],"names":["MINUTES_OFFSET","fullRegexp","getPadded","value","formatTimeString","hours","minutes","roundedUp","time","offset","isValidMinuteOffset","getEffectiveMinuteOffset","getDropdownTimeValues","values","totalMinutes","getInitialTime","date","isTimeValid","isControlledAndValid","isNil","isValid","invariant","TimePicker","props","onChange","noop","alwaysShowMask","showIcon","dropdown","minuteOffset","disabled","errorMessage","warningMessage","messageWhiteSpace","className","inputProps","remainingProps","initialTime","timeValue","setTimeValue","useState","isDropdownOpen","setIsDropdownOpen","effectiveMinuteOffset","isInputDisabled","timePickerRef","useRef","hasMountedRef","suppressNextAcceptRef","clickOutsideRef","useClickOutside","mergedTimePickerRefs","useMergeRefs","useEffect","handleFocus","event","input","handleAcceptTime","val","maskRef","handleIncrease","moment","rounded","updatedTimeValue","handleDecrease","inputClassName","otherInputProps","dropdownOptions","option","handleSelectDropdownValue","selectedItem","hasFeedback","wrapperClassName","classNames","jsxs","jsx","IMaskInput","IMask","Fragment","BaseSelectDropdown"],"mappings":"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"}

package/components/tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 import { jsx as t, jsxs as M } from "react/jsx-runtime";
 import { forwardRef as I, useState as w, useEffect as G } from "react";
-import l from "classnames";
 import { omit as g } from "es-toolkit/compat";
+import l from "../../utils/classNames.js";
 import { isDesktop as h } from "../../utils/deviceUtils.js";
 import { PLACEMENT as x } from "../../values/Placement.js";
 import { TEXT_ALIGNMENT as o } from "../../values/TextAlignment.js";