@kubit-ui-web/react-components/dist/cjs/components/image/imageStandAlone.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImageStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const breakpoints_1 = require("../../types/breakpoints/breakpoints");
const role_1 = require("../../types/role/role");
// internal components
const pictureSourceStandAlone_1 = require("./components/pictureSourceStandAlone");
// styles
const image_styled_1 = require("./image.styled");
const loading_1 = require("./types/loading");
const getFallbackRatio_1 = require("./utils/getFallbackRatio");
const ImageStandAloneComponent = ({ dataTestId = 'image', loading = loading_1.ImageLoadingType.LAZY, ...props }, ref) => {
    return ((0, jsx_runtime_1.jsxs)("figure", { ref: ref, "data-testid": dataTestId, children: [(0, jsx_runtime_1.jsxs)(image_styled_1.ImagePictureStyled, { borderRadius: props?.borderRadius, fallbackRatio: props.ratio && (0, getFallbackRatio_1.getFallbackRatio)(props.ratio), objectFit: props?.objectFit, ratio: props.ratio, tabIndex: props.tabIndex, children: [(0, jsx_runtime_1.jsx)(pictureSourceStandAlone_1.PictureSourceStandAlone, { mediaSource: props.images[breakpoints_1.DeviceBreakpointsType.LARGE_DESKTOP] }), (0, jsx_runtime_1.jsx)(pictureSourceStandAlone_1.PictureSourceStandAlone, { mediaSource: props.images[breakpoints_1.DeviceBreakpointsType.DESKTOP] }), (0, jsx_runtime_1.jsx)(pictureSourceStandAlone_1.PictureSourceStandAlone, { mediaSource: props.images[breakpoints_1.DeviceBreakpointsType.TABLET] }), (0, jsx_runtime_1.jsx)(pictureSourceStandAlone_1.PictureSourceStandAlone, { mediaSource: props.images[breakpoints_1.DeviceBreakpointsType.MOBILE] }), (0, jsx_runtime_1.jsx)(image_styled_1.ImageStyled, { alt: props.alt, as: props.component || role_1.ROLES.IMG, height: props.height, loading: loading, src: props.images.DEFAULT.src, title: props.title, width: props.width, onLoad: props.onLoad })] }), props.caption && (0, jsx_runtime_1.jsx)("figcaption", { children: props.caption })] }));
};
/**
 * @description
 * Image component to load images
 */
exports.ImageStandAlone = react_1.default.forwardRef(ImageStandAloneComponent);
//# sourceMappingURL=imageStandAlone.js.map