@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/lib/es/src/components/tag/TagList.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const TagList = (props) => {
+    const { children, inline = true, autoTagWidth = false, tagsPerRow, ...remainingProps } = props;
+    const tagListClasses = (0, classnames_1.default)('taglist', !autoTagWidth && 'taglist-autowidth', !inline && 'taglist-vertical', tagsPerRow && 'row display-flex-sm flex-wrap-sm', props.className);
+    const wrappedChildren = (0, jsx_runtime_1.jsx)("div", { className: `tags-per-row-${tagsPerRow}`, children: children });
+    return ((0, jsx_runtime_1.jsx)("div", { ...remainingProps, className: tagListClasses, children: tagsPerRow ? wrappedChildren : children }));
+};
+exports.default = TagList;

package/lib/es/src/components/tagManager/CustomSuggestionItem.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type CustomSuggestionItemProps = {
+    value?: string | React.ReactNode;
+    placeholder?: string | React.ReactNode;
+};
+declare const CustomSuggestionItem: ({ value, placeholder }: CustomSuggestionItemProps) => import("react/jsx-runtime").JSX.Element;
+export default CustomSuggestionItem;

package/lib/es/src/components/tagManager/CustomSuggestionItem.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const CustomSuggestionItem = ({ value, placeholder }) => {
+    const wrapperClassNames = (0, classnames_1.default)('display-flex align-items-center padding-top-5 padding-bottom-5', !value && 'text-color-gray');
+    const iconClassNames = (0, classnames_1.default)('margin-left--5 margin-right-5 margin-top--1 rioglyph', value ? 'rioglyph-plus' : 'rioglyph-arrow-up');
+    return ((0, jsx_runtime_1.jsxs)("span", { className: wrapperClassNames, children: [(0, jsx_runtime_1.jsx)("span", { className: iconClassNames }), (0, jsx_runtime_1.jsx)("span", { className: 'text-italic', children: value || placeholder })] }));
+};
+exports.default = CustomSuggestionItem;

package/lib/es/src/components/tagManager/TagManager.d.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+import type { TagManagerTag } from './TagManagerTag';
+export type { TagManagerTag } from './TagManagerTag';
+export type TagManagerProps = {
+    /**
+     * The list of existing tags to be listed.
+     */
+    tagList: TagManagerTag[];
+    /**
+     * The list of tags used as suggestions for the built-in AutoSuggest.
+     */
+    tagSuggestions: TagManagerTag[];
+    /**
+     * Callback function triggered when the list of tags changes.
+     *
+     * For instance when a tag was added by the AutoSuggest or when a tag is marked to be deleted.
+     *
+     * This function returns the updated list of tags where tags may have additional properties indicating whether they
+     * have to be removed or added to your data.
+     *
+     * @param newTags The updated list of tags.
+     */
+    onTagListChange?: (newTags: TagManagerTag[]) => void;
+    /**
+     * The placeholder message for the AutoSuggest input.
+     */
+    placeholder?: string;
+    /**
+     * The placeholder message for custom tag in the AutoSuggest dropdown.
+     *
+     * This is only relevant when having custom tags enabled.
+     */
+    customTagPlaceholder?: string;
+    /**
+     * The header message for existing tags in the AutoSuggest dropdown.
+     *
+     * This is only relevant when having custom tags enabled.
+     */
+    dropdownSeparatorText?: string;
+    /**
+     * Enables or disabled to add custom tags from the AutoSuggest dropdown.
+     *
+     * @default true
+     */
+    useCustomTags?: boolean;
+    /**
+     * Define whether the input shall be shown and to allow to select tags.
+     *
+     * @default true
+     */
+    showInput?: boolean;
+    /**
+     * The message to be shown when no tag suggestion could be found for the entered value of the AutoSuggest.
+     */
+    noItemMessage?: string | React.ReactNode;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+declare const TagManager: (props: TagManagerProps) => import("react/jsx-runtime").JSX.Element;
+export default TagManager;

package/lib/es/src/components/tagManager/TagManager.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const isEqual_1 = tslib_1.__importDefault(require("lodash/fp/isEqual"));
+const compact_1 = tslib_1.__importDefault(require("lodash/fp/compact"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const AutoSuggest_1 = tslib_1.__importDefault(require("../autosuggest/AutoSuggest"));
+const CustomSuggestionItem_1 = tslib_1.__importDefault(require("./CustomSuggestionItem"));
+const TagManagerItemList_1 = tslib_1.__importDefault(require("./TagManagerItemList"));
+const getCustomSuggestion = (value, placeholder) => ({
+    customSuggestion: (0, jsx_runtime_1.jsx)(CustomSuggestionItem_1.default, { value: value, placeholder: placeholder }),
+    label: value,
+    disabled: (0, isEmpty_1.default)(value),
+});
+const getSuggestionSeparator = (dropdownSeparatorText) => ({
+    header: true,
+    label: dropdownSeparatorText,
+});
+const cleanupTagState = (tag) => {
+    delete tag.toAdd;
+    delete tag.toRemove;
+    return tag;
+};
+const hasTagAlreadySelected = (tags, newSuggestion) => !!tags.find(tag => tag.label === newSuggestion.label);
+const getNewSuggestion = (suggestion) => {
+    const newSuggestion = suggestion.customSuggestion ? { label: suggestion.label } : suggestion;
+    newSuggestion.toAdd = true;
+    return newSuggestion;
+};
+const buildSuggestions = (useCustomTags, customTagPlaceholder, dropdownSeparatorText) => (value, suggestions) => {
+    const cleanedSuggestions = suggestions.map(cleanupTagState).filter(item => item.label);
+    return (0, compact_1.default)([
+        useCustomTags && getCustomSuggestion(value, customTagPlaceholder),
+        useCustomTags &&
+            !(0, isEmpty_1.default)(cleanedSuggestions) &&
+            !(0, isEmpty_1.default)(dropdownSeparatorText) &&
+            getSuggestionSeparator(dropdownSeparatorText),
+        ...cleanedSuggestions,
+    ]);
+};
+const filterSuggestions = (suggestions, selectedTagNames, value = '') => suggestions.filter(suggestion => {
+    const label = suggestion.label;
+    if (!label) {
+        return false;
+    }
+    const lowerCaseLabel = label.toLowerCase();
+    const lowerCaseValue = value.toLowerCase();
+    return (lowerCaseLabel.includes(lowerCaseValue) &&
+        !selectedTagNames.includes(label) &&
+        !suggestion.header &&
+        !suggestion.customSuggestion);
+});
+const TagManager = (props) => {
+    const { tagList, tagSuggestions, placeholder, className, customTagPlaceholder, dropdownSeparatorText, onTagListChange = noop_1.default, useCustomTags = true, noItemMessage, showInput = true, ...remainingProps } = props;
+    const [tags, setTags] = (0, react_1.useState)(tagList);
+    const [inputValue, setInputValue] = (0, react_1.useState)('');
+    const [currentSuggestions, setCurrentSuggestions] = (0, react_1.useState)([]);
+    const getSuggestions = buildSuggestions(useCustomTags, customTagPlaceholder, dropdownSeparatorText);
+    // Update internal list of tags when they change from the outside i.e. when they have been saved,
+    // additionally, cleanup previous state for adding or removing tags
+    (0, react_1.useEffect)(() => setTags((0, compact_1.default)(tagList.map(cleanupTagState))), [tagList]);
+    // build suggestion when passed tag suggestions passed change i.e. when a tag got selected and removed from the list
+    (0, react_1.useEffect)(() => setCurrentSuggestions(getSuggestions(inputValue, tagSuggestions)), [tagSuggestions]);
+    // build suggestions when input value change as it should filter the list on suggestions
+    (0, react_1.useEffect)(() => {
+        const selectedTagNames = (0, compact_1.default)(tags.map(tag => tag.label));
+        const value = inputValue || '';
+        const filteredList = filterSuggestions(tagSuggestions, selectedTagNames, value);
+        setCurrentSuggestions(getSuggestions(value, filteredList));
+    }, [tags, inputValue, tagSuggestions]);
+    const updateTags = (updatedTags) => {
+        setTags(updatedTags);
+        // Notify outside component
+        console.log(updatedTags);
+        onTagListChange(updatedTags);
+    };
+    const handleSuggestionsChange = ({ value }) => setInputValue(value);
+    const handleSuggestionSelected = (_, { suggestion }) => {
+        setInputValue('');
+        const newSuggestion = getNewSuggestion(suggestion);
+        if (hasTagAlreadySelected(tags, newSuggestion)) {
+            updateTags([...tags]);
+            return;
+        }
+        updateTags([...tags, newSuggestion]);
+    };
+    const updateTagsWithSelectedTag = (tagItems, selectedTag) => {
+        return tagItems.map(tag => {
+            if ((0, isEqual_1.default)(tag.label, selectedTag.label)) {
+                // update tag and mark as "to remove"
+                if (tag.toRemove) {
+                    delete tag.toRemove;
+                }
+                else {
+                    tag.toRemove = true;
+                }
+            }
+            return tag;
+        });
+    };
+    const handleRemoveFromTagList = (selectedTag) => {
+        if (selectedTag.toAdd) {
+            updateTags(tags.filter(tag => !(0, isEqual_1.default)(tag, selectedTag)));
+        }
+        else {
+            updateTags(updateTagsWithSelectedTag(tags, selectedTag));
+        }
+    };
+    const inputProps = {
+        className: '',
+        placeholder: placeholder || 'Start typing ...',
+        value: inputValue,
+        tabIndex: 1,
+    };
+    const autoSuggestClasses = (0, classnames_1.default)(!(0, isEmpty_1.default)(tags) && 'margin-bottom-10');
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: (0, classnames_1.default)('TagManager', className), children: [showInput && ((0, jsx_runtime_1.jsx)(AutoSuggest_1.default, { className: autoSuggestClasses, inputProps: inputProps, suggestions: currentSuggestions, onSuggestionSelected: handleSuggestionSelected, onSuggestionsFetchRequested: handleSuggestionsChange, openOnFocus: true, noItemMessage: noItemMessage })), (0, jsx_runtime_1.jsx)(TagManagerItemList_1.default, { tags: tags, onRemoveFromTagList: handleRemoveFromTagList })] }));
+};
+exports.default = TagManager;

package/lib/es/src/components/tagManager/TagManagerItemList.d.ts

@@ -0,0 +1,7 @@
+import type { TagManagerTag } from './TagManagerTag';
+export type TagManagerItemListProps = {
+    tags: TagManagerTag[];
+    onRemoveFromTagList?: (tag: TagManagerTag) => void;
+};
+declare const TagManagerItemList: (props: TagManagerItemListProps) => import("react/jsx-runtime").JSX.Element;
+export default TagManagerItemList;

package/lib/es/src/components/tagManager/TagManagerItemList.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const TagList_1 = tslib_1.__importDefault(require("../tag/TagList"));
+const Tag_1 = tslib_1.__importDefault(require("../tag/Tag"));
+const TagManagerItemList = (props) => {
+    const { tags, onRemoveFromTagList = () => { } } = props;
+    return ((0, jsx_runtime_1.jsx)(TagList_1.default, { inline: false, children: tags.map(tag => {
+            const tagClasses = (0, classnames_1.default)(tag.toAdd && 'border-color-success text-color-success', tag.toRemove && 'border-color-danger text-color-danger');
+            return ((0, jsx_runtime_1.jsx)(Tag_1.default, { className: tagClasses, deletable: true, round: false, onClick: () => onRemoveFromTagList(tag), children: tag.label }, tag.label));
+        }) }));
+};
+exports.default = TagManagerItemList;

package/lib/es/src/components/tagManager/TagManagerTag.d.ts

@@ -0,0 +1,5 @@
+export type TagManagerTag = {
+    label?: string;
+    toAdd?: boolean;
+    toRemove?: boolean;
+};

package/lib/es/src/components/tagManager/TagManagerTag.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/es/src/components/teaser/Teaser.d.ts

@@ -0,0 +1,94 @@
+import React, { type SyntheticEvent } from 'react';
+import { type ButtonProps } from '../button/Button';
+export type TeaserProps = {
+    /**
+     * The headline for the teaser.
+     */
+    headline?: string | React.ReactNode;
+    /**
+     * The actual content to show e.g. some kind of text.
+     */
+    content?: string | React.ReactNode;
+    /**
+     * Defines an image to render.
+     */
+    image?: {
+        /**
+         * The src URL for the image.
+         */
+        src: string;
+        /**
+         * The alternate text for the image.
+         */
+        alt?: string;
+        /**
+         * Defines whether the image is on the left or right side of the component.
+         *
+         * Possible values are: 'left' and 'right'.
+         */
+        align?: 'left' | 'right';
+        /**
+         * Callback function for the image.
+         */
+        onClick?: VoidFunction;
+        /**
+         * Ratio of the transparent image placeholder.
+         *
+         * Possible values are "1:1", "3:1", "3:2" and "16:9".
+         */
+        aspectRatio?: '1:1' | '3:1' | '3:2' | '16:9';
+        /**
+         * Additional classes added to the image wrapper.
+         */
+        className?: string;
+    };
+    /**
+     * Defines a button to render with.
+     */
+    button?: {
+        /**
+         * The text content for the button.
+         */
+        text?: string | React.ReactNode;
+        /**
+         * The button style.
+         *
+         * See the {@link ButtonProps} definition for possible values.
+         *
+         * @default 'primary'
+         */
+        bsStyle?: ButtonProps['bsStyle'];
+        /**
+         * Callback function for the button.
+         */
+        onClick?: (event: SyntheticEvent<HTMLButtonElement, MouseEvent>) => void;
+        /**
+         * Additional classes added to the button.
+         */
+        className?: string;
+    };
+    /**
+     * Defines where the teaser content is aligned including headline and image.
+     *
+     * Possible values are: 'top' and 'center'.
+     *
+     * @default 'top'
+     */
+    verticalAlignment?: 'top' | 'center';
+    /**
+     * Defines how the teaser content is segmented.
+     *
+     * Possible values are: '50', '25:75', '75:25' and '100'.
+     */
+    segmentation?: '50' | '25:75' | '75:25' | '100';
+    /**
+     * Optional content for footer in case the prop "button" is not sufficient.
+     */
+    footer?: string | React.ReactNode;
+    /**
+     * Additional classes added to the wrapper.
+     */
+    className?: string;
+};
+declare const Teaser: (props: TeaserProps) => import("react/jsx-runtime").JSX.Element;
+export default Teaser;

package/lib/es/src/components/teaser/Teaser.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const Button_1 = tslib_1.__importDefault(require("../button/Button"));
+const Teaser = (props) => {
+    const { segmentation, verticalAlignment = 'top' } = props;
+    const alignmentClass = verticalAlignment === 'center' ? 'align-items-center-sm' : '';
+    if (segmentation === '100') {
+        return (0, jsx_runtime_1.jsx)(SingleColumnTeaser, { alignmentClass: alignmentClass, ...props });
+    }
+    // Thumbnail based layout for multiple segments or multiple teaser in a row
+    return (0, jsx_runtime_1.jsx)(MultipleSegmentsOrRowsTeaser, { alignmentClass: alignmentClass, ...props });
+};
+exports.default = Teaser;
+const SingleColumnTeaser = (props) => {
+    const { headline, content, footer, image, button, segmentation, className, alignmentClass } = props;
+    const wrapperClassNames = (0, classnames_1.default)('teaser panel panel-default panel-body padding-20 margin-bottom-20 text-center', alignmentClass, className);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: wrapperClassNames, children: [(0, jsx_runtime_1.jsx)(TeaserHeadline, { headline: headline, segmentation: segmentation }), (0, jsx_runtime_1.jsx)(TeaserImageComp, { image: image, segmentation: segmentation }), (0, jsx_runtime_1.jsx)(TeaserContent, { content: content, segmentation: segmentation }), (0, jsx_runtime_1.jsx)(TeaserButtonComp, { button: button }), (0, jsx_runtime_1.jsx)(TeaserFooter, { footer: footer })] }));
+};
+const MultipleSegmentsOrRowsTeaser = (props) => {
+    const { headline, content, footer, image, button, segmentation, className, alignmentClass } = props;
+    const wrapperClasses = (0, classnames_1.default)('teaser thumbnail display-flex-sm', !segmentation && 'flex-column height-100pct-sm', // only for multiple teasers in a row
+    alignmentClass, className);
+    const captionClasses = (0, classnames_1.default)('caption', image?.align === 'left' && 'flex-order-2-sm', image?.align === 'right' && 'flex-order-1-sm', segmentation === '50' && 'width-50pct-sm', segmentation === '25:75' && 'width-50pct-sm width-25pct-lg', segmentation === '75:25' && 'width-50pct-sm width-75pct-lg', !segmentation && 'display-flex-sm flex-column-sm flex-1-0-sm');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: wrapperClasses, children: [(0, jsx_runtime_1.jsx)(TeaserImageComp, { image: image, segmentation: segmentation }), (headline || content || button) && ((0, jsx_runtime_1.jsxs)("div", { className: captionClasses, children: [(0, jsx_runtime_1.jsx)(TeaserHeadline, { headline: headline, segmentation: segmentation }), (0, jsx_runtime_1.jsx)(TeaserContent, { content: content, segmentation: segmentation }), (0, jsx_runtime_1.jsx)(TeaserButtonComp, { button: button }), (0, jsx_runtime_1.jsx)(TeaserFooter, { footer: footer })] }))] }));
+};
+const TeaserHeadline = ({ headline, segmentation }) => {
+    if (!headline) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)("h2", { className: segmentation === '100' ? 'margin-top-20 margin-bottom-25' : 'margin-top-5', children: headline });
+};
+const TeaserContent = ({ content, segmentation }) => {
+    if (!content) {
+        return null;
+    }
+    const classes = (0, classnames_1.default)('teaser-content-wrapper text-size-16', segmentation === '100' ? 'padding-left-25-sm padding-right-25-sm' : 'flex-1-0-sm');
+    return (0, jsx_runtime_1.jsx)("div", { className: classes, children: content });
+};
+const TeaserFooter = ({ footer }) => {
+    if (!footer) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)("div", { className: 'teaser-footer-wrapper', children: footer });
+};
+const TeaserButtonComp = ({ button }) => {
+    if (!button) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: button.bsStyle ?? 'primary', className: button.className, onClick: button.onClick, children: button.text }) }));
+};
+/* eslint-disable max-len */
+const placeholderImage1by1 = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAPoCAQAAADnqhxvAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiCw8ODSFLsnJ3AAAPvUlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDgTLCM9BHrU/AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTExLTE1VDEzOjEzOjMzKzAxOjAwgedH5AAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0xMS0xNVQxMzoxMzozMyswMTowMPC6/1gAAAAASUVORK5CYII=';
+const placeholderImage3by1 = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAFNCAQAAAA55I0bAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiCw8ODDQ/dKfdAAAFUUlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIO/GUDmajv5qgAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMTEtMTVUMTM6MTI6NTIrMDE6MDAOPS7pAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTExLTE1VDEzOjEyOjUyKzAxOjAwf2CWVQAAAABJRU5ErkJggg==';
+const placeholderImage3by2 = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAKaCAQAAAAHN7sRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiCw8ODALwzjJEAAAKhUlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIOCbQGM8brNAQAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMTEtMTVUMTM6MTI6MDIrMDE6MDBG3SCNAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTExLTE1VDEzOjEyOjAyKzAxOjAwN4CYMQAAAABJRU5ErkJggg==';
+const placeholderImage16by9 = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAIwCAQAAAC/sImZAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiDBwMBx70M0fPAAAI3UlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAg55rgVfT+Sm9AAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0xMi0yOFQxMTowNzozMCswMTowMOGwCPwAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMTItMjhUMTE6MDc6MzArMDE6MDCQ7bBAAAAAAElFTkSuQmCC';
+/* eslint-enable max-len */
+const teaserPlaceholderImages = {
+    '1:1': placeholderImage1by1,
+    '3:1': placeholderImage3by1,
+    '3:2': placeholderImage3by2,
+    '16:9': placeholderImage16by9,
+};
+const TeaserImageComp = ({ image, segmentation }) => {
+    if (!image) {
+        return null;
+    }
+    let specificClassNames;
+    if (segmentation !== '100') {
+        specificClassNames = (0, classnames_1.default)(image.align === 'left' && 'flex-order-1-sm padding-left-20-sm', image.align === 'right' && 'flex-order-2-sm padding-right-20-sm', segmentation === '50' && 'width-50pct-sm', segmentation === '25:75' && 'width-50pct-sm width-75pct-lg', segmentation === '75:25' && 'width-50pct-sm width-25pct-lg', segmentation && 'padding-top-20-sm padding-bottom-20-sm');
+    }
+    const imageWrapperClassNames = (0, classnames_1.default)('teaser-image-wrapper', specificClassNames, image.className && image.className);
+    const callback = image?.onClick ?? noop_1.default;
+    return ((0, jsx_runtime_1.jsx)("div", { className: imageWrapperClassNames, onClick: callback, children: (0, jsx_runtime_1.jsx)("img", { className: 'img-responsive cover center', src: teaserPlaceholderImages[image.aspectRatio] ?? placeholderImage16by9, alt: image.alt ?? '', style: { backgroundImage: `url(${image.src})` } }) }));
+};

package/lib/es/src/components/teaser/TeaserContainer.d.ts

@@ -0,0 +1,26 @@
+import { type PropsWithChildren } from 'react';
+export type TeasersPerRow = 1 | 2 | 3 | 4 | 6 | 12;
+export type TeaserContainerProps = {
+    /**
+     * Defines how many children are rendered into a row.
+     *
+     * If "teaserPerRow" is not defined, the container tries to put all children in a row with regard to the
+     * Bootstrap grid. This is done by dividing the amount of children by 12 in order  to figure out the col grid
+     * classes.
+     *
+     * It is recommended to define "teasersPerRow" when having more than 4 teasers.
+     *
+     * Possible values are: 1, 2, 3, 4, 6, 12
+     */
+    teaserPerRow?: TeasersPerRow;
+    /**
+     * Optional string for additional classes added to each column of a child.
+     */
+    columnClassName?: string;
+    /**
+     * Optional string for additional classes added to the row.
+     */
+    className?: string;
+};
+declare const TeaserContainer: (props: PropsWithChildren<TeaserContainerProps>) => import("react/jsx-runtime").JSX.Element;
+export default TeaserContainer;

package/lib/es/src/components/teaser/TeaserContainer.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const getGridClasses = (amount) => {
+    switch (amount) {
+        case 1:
+            return 'col-12';
+        case 2:
+            return 'col-12 col-sm-6';
+        case 3:
+            return 'col-12 col-md-4';
+        case 4:
+            return 'col-12 col-md-6 col-lg-3';
+        case 6:
+            return 'col-12 col-sm-4 col-lg-2';
+        case 12:
+            return 'col-12 col-sm-1';
+        default:
+            return 'col-12';
+    }
+};
+const TeaserContainer = (props) => {
+    const { className, teaserPerRow, children, columnClassName } = props;
+    const rowClassNames = (0, classnames_1.default)('teaser-container', 'row', 'display-flex-sm flex-wrap-sm', className);
+    const columnClassNames = teaserPerRow
+        ? getGridClasses(teaserPerRow)
+        : getGridClasses(react_1.Children.count(children) || 1);
+    const aggregatedColumnClassNames = (0, classnames_1.default)(columnClassNames, columnClassName);
+    return ((0, jsx_runtime_1.jsx)("div", { className: rowClassNames, children: react_1.Children.map(children, child => {
+            return (0, jsx_runtime_1.jsx)("div", { className: aggregatedColumnClassNames, children: child });
+        }) }));
+};
+exports.default = TeaserContainer;

package/lib/es/src/components/timepicker/TimePicker.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+export type TimePickerProps = {
+    /**
+     * Value of the time as string. Note, when value is given the component is treated as controlled.
+     */
+    value?: string;
+    /**
+     * Callback function when the value changes and is a valid time format.
+     *
+     * If not it handles the state internally until the time is valid and filled.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Defines whether to always show the input mask placeholder.
+     *
+     * @default true
+     */
+    alwaysShowMask?: boolean;
+    /**
+     * Defines whether to show the input icon.
+     *
+     * @default false
+     */
+    showIcon?: boolean;
+    /**
+     * Input error message.
+     */
+    errorMessage?: string | React.ReactNode;
+    /**
+     * Input warning message.
+     */
+    warningMessage?: string | React.ReactNode;
+    /**
+     * Feedback message width.
+     *
+     * @default 'normal'
+     */
+    messageWhiteSpace?: 'normal' | 'nowrap' | 'pre-line';
+    /**
+     * Additional properties to be set on the input element.
+     */
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+declare const TimePicker: (props: TimePickerProps) => import("react/jsx-runtime").JSX.Element;
+export default TimePicker;