@rio-cloud/rio-uikit 1.13.1 → 2.0.0-beta.1

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

@@ -1,12 +0,0 @@
-"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/components/tagManager/CustomSuggestionItem.d.ts

@@ -1,7 +0,0 @@
-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/components/tagManager/CustomSuggestionItem.js

@@ -1,11 +0,0 @@
-"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/components/tagManager/TagManager.d.ts

@@ -1,62 +0,0 @@
-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/components/tagManager/TagManager.js

@@ -1,122 +0,0 @@
-"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/components/tagManager/TagManagerItemList.d.ts

@@ -1,7 +0,0 @@
-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/components/tagManager/TagManagerItemList.js

@@ -1,15 +0,0 @@
-"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/components/tagManager/TagManagerTag.d.ts

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

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

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

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

@@ -1,94 +0,0 @@
-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/components/teaser/Teaser.js

@@ -1,78 +0,0 @@
-"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/components/teaser/TeaserContainer.d.ts

@@ -1,26 +0,0 @@
-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/components/teaser/TeaserContainer.js

@@ -1,36 +0,0 @@
-"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/components/timepicker/TimePicker.d.ts

@@ -1,49 +0,0 @@
-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;