@speakapbv/dough-component-library 9.7.1 → 9.11.0

package/dist/components/button/button.d.ts

@@ -8,6 +8,7 @@ export declare enum ButtonInputType {
     LINK = "link"
 }
 export interface ButtonProps {
+    alignIconRight?: boolean;
     className?: string;
     children?: ReactNode;
     dataAttributes?: DoughDataAttributes;

package/dist/components/drop-menu/drop-menu.d.ts

@@ -6,6 +6,7 @@ export declare type DoughDropMenuRef = {
     hide(): void;
 };
 export interface DropMenuProps {
+    alignIconRight?: boolean;
     className?: string;
     children?: ReactNode;
     dataAttributes?: DoughDataAttributes;

package/dist/components/image-comp/image.d.ts

@@ -14,6 +14,10 @@ export interface ImageProps {
     borderColor?: Colors;
     width?: string;
     height?: string;
+    ratio?: {
+        width: number;
+        height: number;
+    };
     opacity?: number;
     rounded?: boolean;
     borderRadius?: boolean;

package/dist/components/tag-comp/tag.d.ts

@@ -6,6 +6,7 @@ export interface TagProps {
     children?: ReactNode;
     dataAttributes?: DoughDataAttributes;
     color?: Colors;
+    big?: boolean;
     onRemove?(): void;
 }
 export declare const Tag: {

package/dist/index.d.ts

@@ -58,7 +58,7 @@ export { Box, BoxAlign, BoxAlignment, BoxAlignContent, BoxDirection, BoxDisplay,
 export { Grid, GridContentAlignment, GridItemsAlignment, GridFlow, } from "./components/containers/grid/grid";
 export { GridItem } from "./components/containers/grid/grid-item";
 export { cancelEvent } from "./utils/event";
-export { findParentBySelector } from "./utils/dom-management";
+export { findParentBySelector, setBreakpointSizeManually, } from "./utils/dom-management";
 export { default as cn } from "./utils/class-names";
 export { generateUID } from "./utils/guid";
 export { hideLastDoughTooltip } from "./utils/dom-management";

package/dist/index.es.js

@@ -535,9 +535,16 @@ var insertBreakpointControllerDoms = function () {
         observer.observe(breakpointDom);
     });
 };
+var manualBreakpointSize = null;
+var setBreakpointSizeManually = function (size) {
+    manualBreakpointSize = size;
+};
 var registerBreakpointView = function (callbacks, breakpointSize, id) {
     var _a;
-    if (typeof IntersectionObserver !== "undefined") {
+    if (manualBreakpointSize && manualBreakpointSize === breakpointSize) {
+        callbacks.show(breakpointSize);
+    }
+    else if (typeof IntersectionObserver !== "undefined") {
         if (document.querySelectorAll(".dough-breakpoint-control").length === 0) {
             insertBreakpointControllerDoms();
         }
@@ -600,8 +607,8 @@ var Button = function (props) {
     var doubleClickPrevent = false;
     var clickTime = 0;
     var doubleClickDuration = 250;
-    var _a = props.shadow, shadow = _a === void 0 ? true : _a, _b = props.padding, padding = _b === void 0 ? true : _b, _c = props.size, size = _c === void 0 ? Sizes.SMALL : _c, _d = props.type, type = _d === void 0 ? ButtonInputType.BUTTON : _d, _e = props.linkProps, linkProps = _e === void 0 ? {} : _e;
-    var _f = useState(props.color ? props.color : Colors.BUTTON), colorVal = _f[0], setColorVal = _f[1];
+    var _a = props.alignIconRight, alignIconRight = _a === void 0 ? false : _a, _b = props.shadow, shadow = _b === void 0 ? true : _b, _c = props.padding, padding = _c === void 0 ? true : _c, _d = props.size, size = _d === void 0 ? Sizes.SMALL : _d, _e = props.type, type = _e === void 0 ? ButtonInputType.BUTTON : _e, _f = props.linkProps, linkProps = _f === void 0 ? {} : _f;
+    var _g = useState(props.color ? props.color : Colors.BUTTON), colorVal = _g[0], setColorVal = _g[1];
     var initColorVal = useState(props.color ? props.color : Colors.BUTTON)[0];
     var buttonRef = useRef(null);
     var clickAndDoubleClickHandler = function (eNative, e, handler) {
@@ -688,7 +695,7 @@ var Button = function (props) {
                 return "24px";
             }
         }
-        return "3px";
+        return "6px";
     };
     useEffect(function () {
         if (props.color && props.color !== colorVal && buttonRef.current) {
@@ -713,6 +720,7 @@ var Button = function (props) {
             "dough-button-wait": props.busy,
             "dough-button-disabled": props.disabled,
         }) },
+        props.icon && !alignIconRight && (React.createElement("div", { className: "dough-button-icon" }, props.icon)),
         React.createElement("div", { className: cn("dough-button-background-wrapper", initColorVal) },
             props.color && props.color.match("dough-color-text") && (React.createElement(React.Fragment, null,
                 props.border && (React.createElement("svg", { className: "dough-button-background-wrapper-border-svg" },
@@ -723,7 +731,7 @@ var Button = function (props) {
             props.busy && (React.createElement("div", { className: "dough-button-waiter" },
                 React.createElement("svg", { width: "100%", height: "100%" },
                     React.createElement("rect", { width: "100%", height: "100%", fill: "currentColor" }))))),
-        props.icon && (React.createElement("div", { className: "dough-button-icon" }, props.icon)),
+        props.icon && alignIconRight && (React.createElement("div", { className: "dough-button-icon" }, props.icon)),
         React.createElement("div", { className: "dough-button-label" },
             props.label && React.createElement(React.Fragment, null, props.label),
             !props.label && props.children && props.children))); };
@@ -1500,9 +1508,9 @@ var css_248z$c = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium
 styleInject(css_248z$c);
 
 var DropMenu = forwardRef(function (props, ref) {
-    var _a = props.color, color = _a === void 0 ? Colors.TRANSPARENT : _a, _b = props.closeOnClickOutside, closeOnClickOutside = _b === void 0 ? true : _b, _c = props.closeOnEscape, closeOnEscape = _c === void 0 ? true : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, _e = props.showCaret, showCaret = _e === void 0 ? true : _e, _f = props.rightShift, rightShift = _f === void 0 ? 0 : _f, _g = props.shadow, shadow = _g === void 0 ? false : _g, _h = props.show, show = _h === void 0 ? false : _h, _j = props.rounded, rounded = _j === void 0 ? true : _j, _k = props.icon, icon = _k === void 0 ? React.createElement(EllipsisVIcon, null) : _k, _l = props.size, size = _l === void 0 ? Sizes.SMALL : _l, _m = props.innerButtonSize, innerButtonSize = _m === void 0 ? Sizes.NORMAL : _m;
+    var _a = props.alignIconRight, alignIconRight = _a === void 0 ? false : _a, _b = props.color, color = _b === void 0 ? Colors.TRANSPARENT : _b, _c = props.closeOnClickOutside, closeOnClickOutside = _c === void 0 ? true : _c, _d = props.closeOnEscape, closeOnEscape = _d === void 0 ? true : _d, _e = props.disabled, disabled = _e === void 0 ? false : _e, _f = props.showCaret, showCaret = _f === void 0 ? true : _f, _g = props.rightShift, rightShift = _g === void 0 ? 0 : _g, _h = props.shadow, shadow = _h === void 0 ? false : _h, _j = props.show, show = _j === void 0 ? false : _j, _k = props.rounded, rounded = _k === void 0 ? true : _k, _l = props.icon, icon = _l === void 0 ? React.createElement(EllipsisVIcon, null) : _l, _m = props.size, size = _m === void 0 ? Sizes.SMALL : _m, _o = props.innerButtonSize, innerButtonSize = _o === void 0 ? Sizes.NORMAL : _o;
     var componentRef = useRef(null);
-    var _o = useState(false), showDropArea = _o[0], setShowDropArea = _o[1];
+    var _p = useState(false), showDropArea = _p[0], setShowDropArea = _p[1];
     var openDropArea = function (e) {
         var _a, _b;
         cancelEvent(e);
@@ -1574,7 +1582,7 @@ var DropMenu = forwardRef(function (props, ref) {
             "dough-dropmenu-as-line": props.asInvisibleLine,
             "dough-dropmenu-full-width": props.fullWidth,
         }), ref: componentRef }, props.dataAttributes),
-        props.asInvisibleLine !== true && (React.createElement(Button, { className: cn("dough-drop-menu-button", props.buttonClassName), color: color, disabled: disabled, icon: icon, padding: props.padding, fullWidth: props.fullWidth, label: props.label, onClick: function (e) {
+        props.asInvisibleLine !== true && (React.createElement(Button, { className: cn("dough-drop-menu-button", props.buttonClassName), color: color, disabled: disabled, icon: icon, alignIconRight: alignIconRight, padding: props.padding, fullWidth: props.fullWidth, label: props.label, onClick: function (e) {
                 if (showDropArea === true) {
                     closeDropArea();
                 }
@@ -2888,7 +2896,7 @@ var css_248z$k = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium
 styleInject(css_248z$k);
 
 var Tag = function (props) { return (React.createElement("div", __assign({ className: cn("dough-tag-item", props.color ? props.color : Colors.HEADER, props.className) }, props.dataAttributes),
-    React.createElement(Text, { tiny: true, bold: true }, props.children),
+    React.createElement(Text, { tiny: !props.big, bold: true }, props.children),
     props.onRemove && (React.createElement(Button, { padding: false, color: Colors.TRANSPARENT, icon: React.createElement(CloseIcon, null), onClick: function (e) {
             cancelEvent(e);
             if (typeof props.onRemove === "function") {
@@ -5075,7 +5083,7 @@ var ContentSlider = function (props) {
 };
 ContentSlider.displayName = "ContentSlider";
 
-var css_248z$I = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-image-viewer {\n  display: inline-flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  box-sizing: border-box;\n  position: relative;\n  z-index: 1;\n  background-size: 0px 0px;\n}\n.dough-image-viewer.dough-image-border-radius {\n  border-radius: 12px;\n}\n.dough-box.dough-box-border-radius .dough-image-viewer.dough-image-border-radius {\n  border-radius: 6px;\n}\n.dough-image-viewer.has-border {\n  padding: 3px;\n}\n.dough-image-viewer.has-border > .after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: -1;\n  width: auto;\n  height: auto;\n}\n.dough-image-viewer > .dough-image-viewer-as-background {\n  display: none;\n}\n.dough-image-viewer > img {\n  position: relative;\n  z-index: 5;\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  object-position: center center;\n  text-indent: -101%;\n  overflow: hidden;\n}\nhtml.dough-IE11 .dough-image-viewer > img {\n  opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer > img {\n  opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer > .dough-image-viewer-as-background {\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n  width: auto;\n  height: auto;\n  background-position: center center;\n  background-size: cover;\n  background-repeat: no-repeat;\n}\nhtml.dough-IE11 .dough-image-viewer.has-border > .dough-image-viewer-as-background {\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  bottom: 3px;\n  left: 3px;\n  z-index: 1;\n  width: auto;\n  height: auto;\n}\n.dough-image-viewer.dough-image-viewer-fit-to-view > img {\n  object-fit: contain;\n}\nhtml.dough-IE11 .dough-image-viewer.dough-image-viewer-fit-to-view > img {\n  opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer.dough-image-viewer-fit-to-view > .dough-image-viewer-as-background {\n  background-size: contain;\n}\n.dough-image-viewer.size-extra-small {\n  width: 32px !important;\n  height: 32px !important;\n}\n.dough-image-viewer.size-extra-small > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-small {\n  width: 64px !important;\n  height: 64px !important;\n}\n.dough-image-viewer.size-small > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-normal {\n  width: 96px !important;\n  height: 96px !important;\n}\n.dough-image-viewer.size-normal > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-large {\n  width: 128px !important;\n  height: 128px !important;\n}\n.dough-image-viewer.size-large > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-extra-large {\n  width: 160px !important;\n  height: 160px !important;\n}\n.dough-image-viewer.size-extra-large > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.rounded {\n  border-radius: 100%;\n}\n.dough-image-viewer.rounded > .dough-image-viewer-as-background,\n.dough-image-viewer.rounded > .after,\n.dough-image-viewer.rounded > img {\n  border-radius: 100%;\n}\n.dough-image-viewer > .dough-image-viewer-content-container {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n}\nbody:not(.no-transition) .dough-image-viewer > .dough-image-viewer-content-container {\n  transition: all 650ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-image-viewer > .dough-image-viewer-content-container {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-image-viewer.dough-image-have-children-text-color * {\n  color: inherit !important;\n}\n.dough-image-viewer.dough-image-viewer-show-children-on-hover > .dough-image-viewer-content-container {\n  opacity: 0;\n  pointer-events: none;\n}\n.dough-image-viewer.dough-image-viewer-show-children-on-hover:hover > .dough-image-viewer-content-container {\n  opacity: 1;\n}\n.dough-image-viewer:not(:hover) .dough-image-show-only-on-image-hover {\n  opacity: 0 !important;\n  pointer-events: none !important;\n}";
+var css_248z$I = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-image-viewer {\n  display: inline-flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  box-sizing: border-box;\n  position: relative;\n  z-index: 1;\n  background-size: 0px 0px;\n}\n.dough-image-viewer.dough-image-border-radius {\n  border-radius: 12px;\n}\n.dough-box.dough-box-border-radius .dough-image-viewer.dough-image-border-radius {\n  border-radius: 6px;\n}\n.dough-image-viewer.has-border {\n  padding: 3px;\n}\n.dough-image-viewer.has-border > .after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: -1;\n  width: auto;\n  height: auto;\n}\n.dough-image-viewer > .dough-image-viewer-as-background {\n  display: none;\n}\n.dough-image-viewer > img {\n  position: relative;\n  z-index: 5;\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  object-position: center center;\n  text-indent: -101%;\n  overflow: hidden;\n}\nhtml.dough-IE11 .dough-image-viewer > img {\n  opacity: 0;\n}\n.dough-image-viewer.dough-image-with-ratio > img {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\nhtml.dough-IE11 .dough-image-viewer > img {\n  opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer > .dough-image-viewer-as-background {\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n  width: auto;\n  height: auto;\n  background-position: center center;\n  background-size: cover;\n  background-repeat: no-repeat;\n}\nhtml.dough-IE11 .dough-image-viewer.has-border > .dough-image-viewer-as-background {\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  bottom: 3px;\n  left: 3px;\n  z-index: 1;\n  width: auto;\n  height: auto;\n}\n.dough-image-viewer.dough-image-viewer-fit-to-view > img {\n  object-fit: contain;\n}\nhtml.dough-IE11 .dough-image-viewer.dough-image-viewer-fit-to-view > img {\n  opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer.dough-image-viewer-fit-to-view > .dough-image-viewer-as-background {\n  background-size: contain;\n}\n.dough-image-viewer.size-extra-small {\n  width: 32px !important;\n  height: 32px !important;\n}\n.dough-image-viewer.size-extra-small > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-small {\n  width: 64px !important;\n  height: 64px !important;\n}\n.dough-image-viewer.size-small > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-normal {\n  width: 96px !important;\n  height: 96px !important;\n}\n.dough-image-viewer.size-normal > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-large {\n  width: 128px !important;\n  height: 128px !important;\n}\n.dough-image-viewer.size-large > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-extra-large {\n  width: 160px !important;\n  height: 160px !important;\n}\n.dough-image-viewer.size-extra-large > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.rounded {\n  border-radius: 100%;\n}\n.dough-image-viewer.rounded > .dough-image-viewer-as-background,\n.dough-image-viewer.rounded > .after,\n.dough-image-viewer.rounded > img {\n  border-radius: 100%;\n}\n.dough-image-viewer > .dough-image-viewer-content-container {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n}\nbody:not(.no-transition) .dough-image-viewer > .dough-image-viewer-content-container {\n  transition: all 650ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-image-viewer > .dough-image-viewer-content-container {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-image-viewer.dough-image-have-children-text-color * {\n  color: inherit !important;\n}\n.dough-image-viewer.dough-image-viewer-show-children-on-hover > .dough-image-viewer-content-container {\n  opacity: 0;\n  pointer-events: none;\n}\n.dough-image-viewer.dough-image-viewer-show-children-on-hover:hover > .dough-image-viewer-content-container {\n  opacity: 1;\n}\n.dough-image-viewer:not(:hover) .dough-image-show-only-on-image-hover {\n  opacity: 0 !important;\n  pointer-events: none !important;\n}";
 styleInject(css_248z$I);
 
 var ImageContentShowOnHoverClassName = "dough-image-show-only-on-image-hover";
@@ -5087,12 +5095,15 @@ var Image = function (props) {
             "dough-image-border-radius": props.borderRadius,
             "has-border": props.border,
             rounded: props.rounded,
+            "dough-image-with-ratio": props.ratio,
             "dough-image-viewer-fit-to-view": props.fitToView,
             "dough-image-viewer-show-children-on-hover": props.showChildrenOnHover,
-        }), style: {
-            height: (_a = props.height) !== null && _a !== void 0 ? _a : "initial",
-            width: (_b = props.width) !== null && _b !== void 0 ? _b : "initial",
-        } }, props.dataAttributes),
+        }), style: __assign({ height: (_a = props.height) !== null && _a !== void 0 ? _a : "initial", width: (_b = props.width) !== null && _b !== void 0 ? _b : "initial" }, (props.ratio
+            ? {
+                paddingTop: (props.ratio.height * 100) /
+                    props.ratio.width + "%",
+            }
+            : {})) }, props.dataAttributes),
         React.createElement("img", { alt: "", src: props.src, style: {
                 opacity: props.opacity,
             } }),
@@ -5454,4 +5465,4 @@ GridItem.displayName = "GridItem";
 
 injectRobotoFont();
 
-export { AlertStatus, AlertText, AppBackground, AppWrapper, Avatar, BR, Badge, BorderStyles, Box, BoxAlign, BoxAlignContent, BoxAlignment, BoxDirection, BoxDisplay, BoxJustifyContent, BoxOverflow, BoxWrap, BreadCrumb, BreakpointViewer, BreakpointViewportSizes, Button, ButtonInputType, Card, Carousel, CheckBox, Collapser, Colors, ColorsIcon, ColorsText, Container, ContentSlider, DatePicker, DateTime, DesignTokens, Dialog, Direction, Divider, DoughDateInput, DropMenu, Fader, Footer, Grid, GridContentAlignment, GridFlow, GridItem, GridItemsAlignment, H1, H2, H3, H4, H5, H6, H7, Header, HorizontalAlignment, HorizontalListSlider, Image, ImageCarousel, ImageContentShowOnHoverClassName, InputWrapper, LayoutContainer, LayoutFlexBox, Link, Notification, NumericInput, Overlay, PanelOverlay, Paragraph, RadioGroup, RadioOption, SelectBox, Sizes, Skeleton, SkeletonShape, Spacer, Spacings, Spinner, StepsIndicator, StrengthIndicator, Subtitle, Switch, Table, TableCell, TableRow, TableRowStyle, TabsContainer, Tag, Text, TextAlignment, TextArea, TextInput, TimePicker, Toggle, ToggleWithText, Tooltip, TooltipDirection, VerticalAlignment, cancelEvent, checkComponentType, cn, findParentBySelector, generateUID, hideLastDoughTooltip };
+export { AlertStatus, AlertText, AppBackground, AppWrapper, Avatar, BR, Badge, BorderStyles, Box, BoxAlign, BoxAlignContent, BoxAlignment, BoxDirection, BoxDisplay, BoxJustifyContent, BoxOverflow, BoxWrap, BreadCrumb, BreakpointViewer, BreakpointViewportSizes, Button, ButtonInputType, Card, Carousel, CheckBox, Collapser, Colors, ColorsIcon, ColorsText, Container, ContentSlider, DatePicker, DateTime, DesignTokens, Dialog, Direction, Divider, DoughDateInput, DropMenu, Fader, Footer, Grid, GridContentAlignment, GridFlow, GridItem, GridItemsAlignment, H1, H2, H3, H4, H5, H6, H7, Header, HorizontalAlignment, HorizontalListSlider, Image, ImageCarousel, ImageContentShowOnHoverClassName, InputWrapper, LayoutContainer, LayoutFlexBox, Link, Notification, NumericInput, Overlay, PanelOverlay, Paragraph, RadioGroup, RadioOption, SelectBox, Sizes, Skeleton, SkeletonShape, Spacer, Spacings, Spinner, StepsIndicator, StrengthIndicator, Subtitle, Switch, Table, TableCell, TableRow, TableRowStyle, TabsContainer, Tag, Text, TextAlignment, TextArea, TextInput, TimePicker, Toggle, ToggleWithText, Tooltip, TooltipDirection, VerticalAlignment, cancelEvent, checkComponentType, cn, findParentBySelector, generateUID, hideLastDoughTooltip, setBreakpointSizeManually };

package/dist/index.js

@@ -531,9 +531,16 @@ var insertBreakpointControllerDoms = function () {
         observer.observe(breakpointDom);
     });
 };
+var manualBreakpointSize = null;
+var setBreakpointSizeManually = function (size) {
+    manualBreakpointSize = size;
+};
 var registerBreakpointView = function (callbacks, breakpointSize, id) {
     var _a;
-    if (typeof IntersectionObserver !== "undefined") {
+    if (manualBreakpointSize && manualBreakpointSize === breakpointSize) {
+        callbacks.show(breakpointSize);
+    }
+    else if (typeof IntersectionObserver !== "undefined") {
         if (document.querySelectorAll(".dough-breakpoint-control").length === 0) {
             insertBreakpointControllerDoms();
         }
@@ -595,8 +602,8 @@ var Button = function (props) {
     var doubleClickPrevent = false;
     var clickTime = 0;
     var doubleClickDuration = 250;
-    var _a = props.shadow, shadow = _a === void 0 ? true : _a, _b = props.padding, padding = _b === void 0 ? true : _b, _c = props.size, size = _c === void 0 ? exports.Sizes.SMALL : _c, _d = props.type, type = _d === void 0 ? exports.ButtonInputType.BUTTON : _d, _e = props.linkProps, linkProps = _e === void 0 ? {} : _e;
-    var _f = React.useState(props.color ? props.color : exports.Colors.BUTTON), colorVal = _f[0], setColorVal = _f[1];
+    var _a = props.alignIconRight, alignIconRight = _a === void 0 ? false : _a, _b = props.shadow, shadow = _b === void 0 ? true : _b, _c = props.padding, padding = _c === void 0 ? true : _c, _d = props.size, size = _d === void 0 ? exports.Sizes.SMALL : _d, _e = props.type, type = _e === void 0 ? exports.ButtonInputType.BUTTON : _e, _f = props.linkProps, linkProps = _f === void 0 ? {} : _f;
+    var _g = React.useState(props.color ? props.color : exports.Colors.BUTTON), colorVal = _g[0], setColorVal = _g[1];
     var initColorVal = React.useState(props.color ? props.color : exports.Colors.BUTTON)[0];
     var buttonRef = React.useRef(null);
     var clickAndDoubleClickHandler = function (eNative, e, handler) {
@@ -683,7 +690,7 @@ var Button = function (props) {
                 return "24px";
             }
         }
-        return "3px";
+        return "6px";
     };
     React.useEffect(function () {
         if (props.color && props.color !== colorVal && buttonRef.current) {
@@ -708,6 +715,7 @@ var Button = function (props) {
             "dough-button-wait": props.busy,
             "dough-button-disabled": props.disabled,
         }) },
+        props.icon && !alignIconRight && (React__default.createElement("div", { className: "dough-button-icon" }, props.icon)),
         React__default.createElement("div", { className: cn("dough-button-background-wrapper", initColorVal) },
             props.color && props.color.match("dough-color-text") && (React__default.createElement(React__default.Fragment, null,
                 props.border && (React__default.createElement("svg", { className: "dough-button-background-wrapper-border-svg" },
@@ -718,7 +726,7 @@ var Button = function (props) {
             props.busy && (React__default.createElement("div", { className: "dough-button-waiter" },
                 React__default.createElement("svg", { width: "100%", height: "100%" },
                     React__default.createElement("rect", { width: "100%", height: "100%", fill: "currentColor" }))))),
-        props.icon && (React__default.createElement("div", { className: "dough-button-icon" }, props.icon)),
+        props.icon && alignIconRight && (React__default.createElement("div", { className: "dough-button-icon" }, props.icon)),
         React__default.createElement("div", { className: "dough-button-label" },
             props.label && React__default.createElement(React__default.Fragment, null, props.label),
             !props.label && props.children && props.children))); };
@@ -1486,9 +1494,9 @@ var css_248z$c = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium
 styleInject(css_248z$c);
 
 var DropMenu = React.forwardRef(function (props, ref) {
-    var _a = props.color, color = _a === void 0 ? exports.Colors.TRANSPARENT : _a, _b = props.closeOnClickOutside, closeOnClickOutside = _b === void 0 ? true : _b, _c = props.closeOnEscape, closeOnEscape = _c === void 0 ? true : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, _e = props.showCaret, showCaret = _e === void 0 ? true : _e, _f = props.rightShift, rightShift = _f === void 0 ? 0 : _f, _g = props.shadow, shadow = _g === void 0 ? false : _g, _h = props.show, show = _h === void 0 ? false : _h, _j = props.rounded, rounded = _j === void 0 ? true : _j, _k = props.icon, icon = _k === void 0 ? React__default.createElement(EllipsisVIcon, null) : _k, _l = props.size, size = _l === void 0 ? exports.Sizes.SMALL : _l, _m = props.innerButtonSize, innerButtonSize = _m === void 0 ? exports.Sizes.NORMAL : _m;
+    var _a = props.alignIconRight, alignIconRight = _a === void 0 ? false : _a, _b = props.color, color = _b === void 0 ? exports.Colors.TRANSPARENT : _b, _c = props.closeOnClickOutside, closeOnClickOutside = _c === void 0 ? true : _c, _d = props.closeOnEscape, closeOnEscape = _d === void 0 ? true : _d, _e = props.disabled, disabled = _e === void 0 ? false : _e, _f = props.showCaret, showCaret = _f === void 0 ? true : _f, _g = props.rightShift, rightShift = _g === void 0 ? 0 : _g, _h = props.shadow, shadow = _h === void 0 ? false : _h, _j = props.show, show = _j === void 0 ? false : _j, _k = props.rounded, rounded = _k === void 0 ? true : _k, _l = props.icon, icon = _l === void 0 ? React__default.createElement(EllipsisVIcon, null) : _l, _m = props.size, size = _m === void 0 ? exports.Sizes.SMALL : _m, _o = props.innerButtonSize, innerButtonSize = _o === void 0 ? exports.Sizes.NORMAL : _o;
     var componentRef = React.useRef(null);
-    var _o = React.useState(false), showDropArea = _o[0], setShowDropArea = _o[1];
+    var _p = React.useState(false), showDropArea = _p[0], setShowDropArea = _p[1];
     var openDropArea = function (e) {
         var _a, _b;
         cancelEvent(e);
@@ -1560,7 +1568,7 @@ var DropMenu = React.forwardRef(function (props, ref) {
             "dough-dropmenu-as-line": props.asInvisibleLine,
             "dough-dropmenu-full-width": props.fullWidth,
         }), ref: componentRef }, props.dataAttributes),
-        props.asInvisibleLine !== true && (React__default.createElement(Button, { className: cn("dough-drop-menu-button", props.buttonClassName), color: color, disabled: disabled, icon: icon, padding: props.padding, fullWidth: props.fullWidth, label: props.label, onClick: function (e) {
+        props.asInvisibleLine !== true && (React__default.createElement(Button, { className: cn("dough-drop-menu-button", props.buttonClassName), color: color, disabled: disabled, icon: icon, alignIconRight: alignIconRight, padding: props.padding, fullWidth: props.fullWidth, label: props.label, onClick: function (e) {
                 if (showDropArea === true) {
                     closeDropArea();
                 }
@@ -2873,7 +2881,7 @@ var css_248z$k = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium
 styleInject(css_248z$k);
 
 var Tag = function (props) { return (React__default.createElement("div", __assign({ className: cn("dough-tag-item", props.color ? props.color : exports.Colors.HEADER, props.className) }, props.dataAttributes),
-    React__default.createElement(Text, { tiny: true, bold: true }, props.children),
+    React__default.createElement(Text, { tiny: !props.big, bold: true }, props.children),
     props.onRemove && (React__default.createElement(Button, { padding: false, color: exports.Colors.TRANSPARENT, icon: React__default.createElement(CloseIcon, null), onClick: function (e) {
             cancelEvent(e);
             if (typeof props.onRemove === "function") {
@@ -5059,7 +5067,7 @@ var ContentSlider = function (props) {
 };
 ContentSlider.displayName = "ContentSlider";
 
-var css_248z$I = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-image-viewer {\n  display: inline-flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  box-sizing: border-box;\n  position: relative;\n  z-index: 1;\n  background-size: 0px 0px;\n}\n.dough-image-viewer.dough-image-border-radius {\n  border-radius: 12px;\n}\n.dough-box.dough-box-border-radius .dough-image-viewer.dough-image-border-radius {\n  border-radius: 6px;\n}\n.dough-image-viewer.has-border {\n  padding: 3px;\n}\n.dough-image-viewer.has-border > .after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: -1;\n  width: auto;\n  height: auto;\n}\n.dough-image-viewer > .dough-image-viewer-as-background {\n  display: none;\n}\n.dough-image-viewer > img {\n  position: relative;\n  z-index: 5;\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  object-position: center center;\n  text-indent: -101%;\n  overflow: hidden;\n}\nhtml.dough-IE11 .dough-image-viewer > img {\n  opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer > img {\n  opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer > .dough-image-viewer-as-background {\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n  width: auto;\n  height: auto;\n  background-position: center center;\n  background-size: cover;\n  background-repeat: no-repeat;\n}\nhtml.dough-IE11 .dough-image-viewer.has-border > .dough-image-viewer-as-background {\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  bottom: 3px;\n  left: 3px;\n  z-index: 1;\n  width: auto;\n  height: auto;\n}\n.dough-image-viewer.dough-image-viewer-fit-to-view > img {\n  object-fit: contain;\n}\nhtml.dough-IE11 .dough-image-viewer.dough-image-viewer-fit-to-view > img {\n  opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer.dough-image-viewer-fit-to-view > .dough-image-viewer-as-background {\n  background-size: contain;\n}\n.dough-image-viewer.size-extra-small {\n  width: 32px !important;\n  height: 32px !important;\n}\n.dough-image-viewer.size-extra-small > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-small {\n  width: 64px !important;\n  height: 64px !important;\n}\n.dough-image-viewer.size-small > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-normal {\n  width: 96px !important;\n  height: 96px !important;\n}\n.dough-image-viewer.size-normal > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-large {\n  width: 128px !important;\n  height: 128px !important;\n}\n.dough-image-viewer.size-large > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-extra-large {\n  width: 160px !important;\n  height: 160px !important;\n}\n.dough-image-viewer.size-extra-large > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.rounded {\n  border-radius: 100%;\n}\n.dough-image-viewer.rounded > .dough-image-viewer-as-background,\n.dough-image-viewer.rounded > .after,\n.dough-image-viewer.rounded > img {\n  border-radius: 100%;\n}\n.dough-image-viewer > .dough-image-viewer-content-container {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n}\nbody:not(.no-transition) .dough-image-viewer > .dough-image-viewer-content-container {\n  transition: all 650ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-image-viewer > .dough-image-viewer-content-container {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-image-viewer.dough-image-have-children-text-color * {\n  color: inherit !important;\n}\n.dough-image-viewer.dough-image-viewer-show-children-on-hover > .dough-image-viewer-content-container {\n  opacity: 0;\n  pointer-events: none;\n}\n.dough-image-viewer.dough-image-viewer-show-children-on-hover:hover > .dough-image-viewer-content-container {\n  opacity: 1;\n}\n.dough-image-viewer:not(:hover) .dough-image-show-only-on-image-hover {\n  opacity: 0 !important;\n  pointer-events: none !important;\n}";
+var css_248z$I = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-image-viewer {\n  display: inline-flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  box-sizing: border-box;\n  position: relative;\n  z-index: 1;\n  background-size: 0px 0px;\n}\n.dough-image-viewer.dough-image-border-radius {\n  border-radius: 12px;\n}\n.dough-box.dough-box-border-radius .dough-image-viewer.dough-image-border-radius {\n  border-radius: 6px;\n}\n.dough-image-viewer.has-border {\n  padding: 3px;\n}\n.dough-image-viewer.has-border > .after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: -1;\n  width: auto;\n  height: auto;\n}\n.dough-image-viewer > .dough-image-viewer-as-background {\n  display: none;\n}\n.dough-image-viewer > img {\n  position: relative;\n  z-index: 5;\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  object-position: center center;\n  text-indent: -101%;\n  overflow: hidden;\n}\nhtml.dough-IE11 .dough-image-viewer > img {\n  opacity: 0;\n}\n.dough-image-viewer.dough-image-with-ratio > img {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\nhtml.dough-IE11 .dough-image-viewer > img {\n  opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer > .dough-image-viewer-as-background {\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n  width: auto;\n  height: auto;\n  background-position: center center;\n  background-size: cover;\n  background-repeat: no-repeat;\n}\nhtml.dough-IE11 .dough-image-viewer.has-border > .dough-image-viewer-as-background {\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  bottom: 3px;\n  left: 3px;\n  z-index: 1;\n  width: auto;\n  height: auto;\n}\n.dough-image-viewer.dough-image-viewer-fit-to-view > img {\n  object-fit: contain;\n}\nhtml.dough-IE11 .dough-image-viewer.dough-image-viewer-fit-to-view > img {\n  opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer.dough-image-viewer-fit-to-view > .dough-image-viewer-as-background {\n  background-size: contain;\n}\n.dough-image-viewer.size-extra-small {\n  width: 32px !important;\n  height: 32px !important;\n}\n.dough-image-viewer.size-extra-small > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-small {\n  width: 64px !important;\n  height: 64px !important;\n}\n.dough-image-viewer.size-small > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-normal {\n  width: 96px !important;\n  height: 96px !important;\n}\n.dough-image-viewer.size-normal > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-large {\n  width: 128px !important;\n  height: 128px !important;\n}\n.dough-image-viewer.size-large > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-extra-large {\n  width: 160px !important;\n  height: 160px !important;\n}\n.dough-image-viewer.size-extra-large > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.rounded {\n  border-radius: 100%;\n}\n.dough-image-viewer.rounded > .dough-image-viewer-as-background,\n.dough-image-viewer.rounded > .after,\n.dough-image-viewer.rounded > img {\n  border-radius: 100%;\n}\n.dough-image-viewer > .dough-image-viewer-content-container {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n}\nbody:not(.no-transition) .dough-image-viewer > .dough-image-viewer-content-container {\n  transition: all 650ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-image-viewer > .dough-image-viewer-content-container {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-image-viewer.dough-image-have-children-text-color * {\n  color: inherit !important;\n}\n.dough-image-viewer.dough-image-viewer-show-children-on-hover > .dough-image-viewer-content-container {\n  opacity: 0;\n  pointer-events: none;\n}\n.dough-image-viewer.dough-image-viewer-show-children-on-hover:hover > .dough-image-viewer-content-container {\n  opacity: 1;\n}\n.dough-image-viewer:not(:hover) .dough-image-show-only-on-image-hover {\n  opacity: 0 !important;\n  pointer-events: none !important;\n}";
 styleInject(css_248z$I);
 
 var ImageContentShowOnHoverClassName = "dough-image-show-only-on-image-hover";
@@ -5071,12 +5079,15 @@ var Image = function (props) {
             "dough-image-border-radius": props.borderRadius,
             "has-border": props.border,
             rounded: props.rounded,
+            "dough-image-with-ratio": props.ratio,
             "dough-image-viewer-fit-to-view": props.fitToView,
             "dough-image-viewer-show-children-on-hover": props.showChildrenOnHover,
-        }), style: {
-            height: (_a = props.height) !== null && _a !== void 0 ? _a : "initial",
-            width: (_b = props.width) !== null && _b !== void 0 ? _b : "initial",
-        } }, props.dataAttributes),
+        }), style: __assign({ height: (_a = props.height) !== null && _a !== void 0 ? _a : "initial", width: (_b = props.width) !== null && _b !== void 0 ? _b : "initial" }, (props.ratio
+            ? {
+                paddingTop: (props.ratio.height * 100) /
+                    props.ratio.width + "%",
+            }
+            : {})) }, props.dataAttributes),
         React__default.createElement("img", { alt: "", src: props.src, style: {
                 opacity: props.opacity,
             } }),
@@ -5508,3 +5519,4 @@ exports.cn = cn;
 exports.findParentBySelector = findParentBySelector;
 exports.generateUID = generateUID;
 exports.hideLastDoughTooltip = hideLastDoughTooltip;
+exports.setBreakpointSizeManually = setBreakpointSizeManually;

package/dist/utils/dom-management.d.ts

@@ -22,5 +22,6 @@ export declare const getAppWrapperOverlay: () => any;
 export declare const getNotificationOverlay: (verticalLayer: any, horizontalLayer: any, selector?: string | undefined) => any;
 export declare const getInjectedStylesWrapper: () => any;
 export declare const findParentBySelector: (element: HTMLElement, selector: string) => HTMLElement;
+export declare const setBreakpointSizeManually: (size: BreakpointViewportSizes | null) => void;
 export declare const registerBreakpointView: (callbacks: any, breakpointSize: BreakpointViewportSizes, id: string) => void;
 export declare const deRegisterBreakpointView: (id: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@speakapbv/dough-component-library",
-    "version": "9.7.1",
+    "version": "9.11.0",
     "description": "DOUGH: Speakap React Component Library",
     "author": "Speakap",
     "license": "MIT",