npm - @alfalab/core-components - Versions diffs - 48.31.0 → 48.33.0 - Mend

@alfalab/core-components 48.31.0 → 48.33.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2801) hide show

package/icon-view/cssm/components/base-shape/component.d.ts CHANGED Viewed

@@ -7,6 +7,7 @@ type Border = {
     color?: string;
     style?: 'solid' | 'dashed';
 };
+type ScaleType = 'fit' | 'fill';
 type TMainSize = 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 128;
 type BaseShapeProps = {
     /**
@@ -35,6 +36,13 @@ type BaseShapeProps = {
      * Фоновое изображение. Имеет приоритет над иконкой и заливкой
      */
     imageUrl?: string;
+    /**
+     * Режим масштабирования изображения
+     * 'fill' - изображение заполняет всё доступное пространство и может быть обрезано
+     * 'fit' - изображение вписывается полностью без обрезки
+     * @default 'fill'
+     */
+    scale?: ScaleType;
     /**
      * Фоновое svg. Имеет приоритет над иконкой и заливкой
      */
@@ -81,4 +89,4 @@ type BaseShapeProps = {
     mainSize?: TMainSize;
 };
 declare const BaseShape: React.ForwardRefExoticComponent<BaseShapeProps & React.RefAttributes<HTMLDivElement>>;
-export { TMainSize, BaseShapeProps, BaseShape };
+export { ScaleType, TMainSize, BaseShapeProps, BaseShape };

package/icon-view/cssm/components/base-shape/component.js CHANGED Viewed

@@ -13,9 +13,9 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 var BaseShape = React.forwardRef(function (_a, ref) {
-    var _b;
-    var _c = _a.size, size = _c === void 0 ? 64 : _c, _d = _a.border, border = _d === void 0 ? false : _d, backgroundColor = _a.backgroundColor, imageUrl = _a.imageUrl, Icon = _a.backgroundIcon, className = _a.className, shapeClassName = _a.shapeClassName, text = _a.text, children = _a.children, topAddons = _a.topAddons, bottomAddons = _a.bottomAddons, indicator = _a.indicator, pathsMap = _a.pathsMap, dataTestId = _a.dataTestId, mainSize = _a.mainSize, iconContainerClassName = _a.iconContainerClassName;
-    var _e = typeof size === 'object' ? [size.width, size.height] : [size, size], width = _e[0], height = _e[1];
+    var _b, _c;
+    var _d = _a.size, size = _d === void 0 ? 64 : _d, _e = _a.border, border = _e === void 0 ? false : _e, backgroundColor = _a.backgroundColor, imageUrl = _a.imageUrl, _f = _a.scale, scale = _f === void 0 ? 'fill' : _f, Icon = _a.backgroundIcon, className = _a.className, shapeClassName = _a.shapeClassName, text = _a.text, children = _a.children, topAddons = _a.topAddons, bottomAddons = _a.bottomAddons, indicator = _a.indicator, pathsMap = _a.pathsMap, dataTestId = _a.dataTestId, mainSize = _a.mainSize, iconContainerClassName = _a.iconContainerClassName;
+    var _g = typeof size === 'object' ? [size.width, size.height] : [size, size], width = _g[0], height = _g[1];
     var imageLoadingState = hooks.useImageLoadingState({ src: imageUrl || '' });
     var clipPathId = hooks.useId();
     var svgPatternId = hooks.useId();
@@ -30,6 +30,8 @@ var BaseShape = React.forwardRef(function (_a, ref) {
     });
     var shapeDPath = components_baseShape_utils.getPath(polygonName, maxDimension, pathsMap.shape);
     var borderDPath = components_baseShape_utils.getPath(polygonName, maxDimension, pathsMap.border);
+    var shouldContain = scale === 'fit';
+    var preserveAspectRatio = shouldContain ? 'xMidYMid meet' : 'xMidYMid slice';
     return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.componentWrapper, styles__default.default["wrapperSize_".concat(maxDimension)], className), ref: ref, "data-test-id": dataTestId },
         React__default.default.createElement("div", { className: styles__default.default.component, style: { width: width, height: height } },
             React__default.default.createElement("svg", { width: width, height: height, viewBox: "0 0 ".concat(width, " ").concat(height), xmlns: 'http://www.w3.org/2000/svg', focusable: false },
@@ -40,7 +42,10 @@ var BaseShape = React.forwardRef(function (_a, ref) {
                     React__default.default.createElement("defs", null,
                         React__default.default.createElement("clipPath", { id: clipPathId },
                             React__default.default.createElement("path", { d: shapeDPath }))),
-                    React__default.default.createElement("image", { href: imageUrl, width: '100%', height: '100%', clipPath: "url(#".concat(clipPathId, ")"), preserveAspectRatio: 'xMidYMid slice' }),
+                    React__default.default.createElement("image", { className: cn__default.default((_b = {},
+                            _b[styles__default.default.imageFit] = scale === 'fit',
+                            _b[styles__default.default.imageFill] = scale === 'fill',
+                            _b)), href: imageUrl, width: '100%', height: '100%', clipPath: "url(#".concat(clipPathId, ")"), preserveAspectRatio: preserveAspectRatio }),
                     React__default.default.createElement("path", { d: shapeDPath, fill: 'none' }))),
                 Icon && (React__default.default.createElement(React.Fragment, null,
                     React__default.default.createElement("defs", null,
@@ -56,7 +61,7 @@ var BaseShape = React.forwardRef(function (_a, ref) {
                         }
                         : undefined, d: borderDPath }))),
             text && React__default.default.createElement("div", { className: styles__default.default.text }, text),
-            children && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.children, (_b = {}, _b[styles__default.default["childrenSize_".concat(mainSize)]] = mainSize, _b), iconContainerClassName) }, children))),
+            children && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.children, (_c = {}, _c[styles__default.default["childrenSize_".concat(mainSize)]] = mainSize, _c), iconContainerClassName) }, children))),
         hasTopAddons && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.addons, styles__default.default.topAddons) }, topAddons)),
         hasBottomAddons && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.addons, styles__default.default.bottomAddons) }, bottomAddons)),
         hasIndicator && !hasTopAddons && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.addons, styles__default.default.indicator) }, indicator))));

package/icon-view/cssm/components/base-shape/index.module.css CHANGED Viewed

@@ -56,6 +56,10 @@
     stroke: var(--color-light-neutral-translucent-200);
     stroke-width: 1px;
     fill: transparent;
+} .imageFit {
+    object-fit: contain;
+} .imageFill {
+    object-fit: cover;
 } .text {
     display: flex;
     justify-content: center;

package/icon-view/esm/components/base-shape/component.d.ts CHANGED Viewed

@@ -7,6 +7,7 @@ type Border = {
     color?: string;
     style?: 'solid' | 'dashed';
 };
+type ScaleType = 'fit' | 'fill';
 type TMainSize = 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 128;
 type BaseShapeProps = {
     /**
@@ -35,6 +36,13 @@ type BaseShapeProps = {
      * Фоновое изображение. Имеет приоритет над иконкой и заливкой
      */
     imageUrl?: string;
+    /**
+     * Режим масштабирования изображения
+     * 'fill' - изображение заполняет всё доступное пространство и может быть обрезано
+     * 'fit' - изображение вписывается полностью без обрезки
+     * @default 'fill'
+     */
+    scale?: ScaleType;
     /**
      * Фоновое svg. Имеет приоритет над иконкой и заливкой
      */
@@ -81,4 +89,4 @@ type BaseShapeProps = {
     mainSize?: TMainSize;
 };
 declare const BaseShape: React.ForwardRefExoticComponent<BaseShapeProps & React.RefAttributes<HTMLDivElement>>;
-export { TMainSize, BaseShapeProps, BaseShape };
+export { ScaleType, TMainSize, BaseShapeProps, BaseShape };

package/icon-view/esm/components/base-shape/component.js CHANGED Viewed

@@ -3,13 +3,13 @@ import cn from 'classnames';
 import { useImageLoadingState, useId } from '@alfalab/hooks';
 import { getPathName, getPath } from './utils.js';
-var styles = {"componentWrapper":"icon-view__componentWrapper_19glp","component":"icon-view__component_19glp","bg":"icon-view__bg_19glp","border":"icon-view__border_19glp","text":"icon-view__text_19glp","children":"icon-view__children_19glp","addons":"icon-view__addons_19glp","wrapperSize_128":"icon-view__wrapperSize_128_19glp","topAddons":"icon-view__topAddons_19glp","bottomAddons":"icon-view__bottomAddons_19glp","wrapperSize_80":"icon-view__wrapperSize_80_19glp","indicator":"icon-view__indicator_19glp","wrapperSize_72":"icon-view__wrapperSize_72_19glp","wrapperSize_64":"icon-view__wrapperSize_64_19glp","wrapperSize_56":"icon-view__wrapperSize_56_19glp","wrapperSize_48":"icon-view__wrapperSize_48_19glp","wrapperSize_40":"icon-view__wrapperSize_40_19glp","wrapperSize_32":"icon-view__wrapperSize_32_19glp","wrapperSize_24":"icon-view__wrapperSize_24_19glp","wrapperSize_20":"icon-view__wrapperSize_20_19glp","wrapperSize_16":"icon-view__wrapperSize_16_19glp","childrenSize_16":"icon-view__childrenSize_16_19glp","childrenSize_20":"icon-view__childrenSize_20_19glp","childrenSize_24":"icon-view__childrenSize_24_19glp","childrenSize_32":"icon-view__childrenSize_32_19glp","childrenSize_40":"icon-view__childrenSize_40_19glp","childrenSize_48":"icon-view__childrenSize_48_19glp","childrenSize_56":"icon-view__childrenSize_56_19glp","childrenSize_64":"icon-view__childrenSize_64_19glp","childrenSize_72":"icon-view__childrenSize_72_19glp","childrenSize_80":"icon-view__childrenSize_80_19glp","childrenSize_128":"icon-view__childrenSize_128_19glp"};
+var styles = {"componentWrapper":"icon-view__componentWrapper_50nkw","component":"icon-view__component_50nkw","bg":"icon-view__bg_50nkw","border":"icon-view__border_50nkw","imageFit":"icon-view__imageFit_50nkw","imageFill":"icon-view__imageFill_50nkw","text":"icon-view__text_50nkw","children":"icon-view__children_50nkw","addons":"icon-view__addons_50nkw","wrapperSize_128":"icon-view__wrapperSize_128_50nkw","topAddons":"icon-view__topAddons_50nkw","bottomAddons":"icon-view__bottomAddons_50nkw","wrapperSize_80":"icon-view__wrapperSize_80_50nkw","indicator":"icon-view__indicator_50nkw","wrapperSize_72":"icon-view__wrapperSize_72_50nkw","wrapperSize_64":"icon-view__wrapperSize_64_50nkw","wrapperSize_56":"icon-view__wrapperSize_56_50nkw","wrapperSize_48":"icon-view__wrapperSize_48_50nkw","wrapperSize_40":"icon-view__wrapperSize_40_50nkw","wrapperSize_32":"icon-view__wrapperSize_32_50nkw","wrapperSize_24":"icon-view__wrapperSize_24_50nkw","wrapperSize_20":"icon-view__wrapperSize_20_50nkw","wrapperSize_16":"icon-view__wrapperSize_16_50nkw","childrenSize_16":"icon-view__childrenSize_16_50nkw","childrenSize_20":"icon-view__childrenSize_20_50nkw","childrenSize_24":"icon-view__childrenSize_24_50nkw","childrenSize_32":"icon-view__childrenSize_32_50nkw","childrenSize_40":"icon-view__childrenSize_40_50nkw","childrenSize_48":"icon-view__childrenSize_48_50nkw","childrenSize_56":"icon-view__childrenSize_56_50nkw","childrenSize_64":"icon-view__childrenSize_64_50nkw","childrenSize_72":"icon-view__childrenSize_72_50nkw","childrenSize_80":"icon-view__childrenSize_80_50nkw","childrenSize_128":"icon-view__childrenSize_128_50nkw"};
 require('./index.css');
 var BaseShape = forwardRef(function (_a, ref) {
-    var _b;
-    var _c = _a.size, size = _c === void 0 ? 64 : _c, _d = _a.border, border = _d === void 0 ? false : _d, backgroundColor = _a.backgroundColor, imageUrl = _a.imageUrl, Icon = _a.backgroundIcon, className = _a.className, shapeClassName = _a.shapeClassName, text = _a.text, children = _a.children, topAddons = _a.topAddons, bottomAddons = _a.bottomAddons, indicator = _a.indicator, pathsMap = _a.pathsMap, dataTestId = _a.dataTestId, mainSize = _a.mainSize, iconContainerClassName = _a.iconContainerClassName;
-    var _e = typeof size === 'object' ? [size.width, size.height] : [size, size], width = _e[0], height = _e[1];
+    var _b, _c;
+    var _d = _a.size, size = _d === void 0 ? 64 : _d, _e = _a.border, border = _e === void 0 ? false : _e, backgroundColor = _a.backgroundColor, imageUrl = _a.imageUrl, _f = _a.scale, scale = _f === void 0 ? 'fill' : _f, Icon = _a.backgroundIcon, className = _a.className, shapeClassName = _a.shapeClassName, text = _a.text, children = _a.children, topAddons = _a.topAddons, bottomAddons = _a.bottomAddons, indicator = _a.indicator, pathsMap = _a.pathsMap, dataTestId = _a.dataTestId, mainSize = _a.mainSize, iconContainerClassName = _a.iconContainerClassName;
+    var _g = typeof size === 'object' ? [size.width, size.height] : [size, size], width = _g[0], height = _g[1];
     var imageLoadingState = useImageLoadingState({ src: imageUrl || '' });
     var clipPathId = useId();
     var svgPatternId = useId();
@@ -24,6 +24,8 @@ var BaseShape = forwardRef(function (_a, ref) {
     });
     var shapeDPath = getPath(polygonName, maxDimension, pathsMap.shape);
     var borderDPath = getPath(polygonName, maxDimension, pathsMap.border);
+    var shouldContain = scale === 'fit';
+    var preserveAspectRatio = shouldContain ? 'xMidYMid meet' : 'xMidYMid slice';
     return (React.createElement("div", { className: cn(styles.componentWrapper, styles["wrapperSize_".concat(maxDimension)], className), ref: ref, "data-test-id": dataTestId },
         React.createElement("div", { className: styles.component, style: { width: width, height: height } },
             React.createElement("svg", { width: width, height: height, viewBox: "0 0 ".concat(width, " ").concat(height), xmlns: 'http://www.w3.org/2000/svg', focusable: false },
@@ -34,7 +36,10 @@ var BaseShape = forwardRef(function (_a, ref) {
                     React.createElement("defs", null,
                         React.createElement("clipPath", { id: clipPathId },
                             React.createElement("path", { d: shapeDPath }))),
-                    React.createElement("image", { href: imageUrl, width: '100%', height: '100%', clipPath: "url(#".concat(clipPathId, ")"), preserveAspectRatio: 'xMidYMid slice' }),
+                    React.createElement("image", { className: cn((_b = {},
+                            _b[styles.imageFit] = scale === 'fit',
+                            _b[styles.imageFill] = scale === 'fill',
+                            _b)), href: imageUrl, width: '100%', height: '100%', clipPath: "url(#".concat(clipPathId, ")"), preserveAspectRatio: preserveAspectRatio }),
                     React.createElement("path", { d: shapeDPath, fill: 'none' }))),
                 Icon && (React.createElement(Fragment, null,
                     React.createElement("defs", null,
@@ -50,7 +55,7 @@ var BaseShape = forwardRef(function (_a, ref) {
                         }
                         : undefined, d: borderDPath }))),
             text && React.createElement("div", { className: styles.text }, text),
-            children && (React.createElement("div", { className: cn(styles.children, (_b = {}, _b[styles["childrenSize_".concat(mainSize)]] = mainSize, _b), iconContainerClassName) }, children))),
+            children && (React.createElement("div", { className: cn(styles.children, (_c = {}, _c[styles["childrenSize_".concat(mainSize)]] = mainSize, _c), iconContainerClassName) }, children))),
         hasTopAddons && (React.createElement("div", { className: cn(styles.addons, styles.topAddons) }, topAddons)),
         hasBottomAddons && (React.createElement("div", { className: cn(styles.addons, styles.bottomAddons) }, bottomAddons)),
         hasIndicator && !hasTopAddons && (React.createElement("div", { className: cn(styles.addons, styles.indicator) }, indicator))));

package/icon-view/esm/components/base-shape/index.css CHANGED Viewed

@@ -1,4 +1,4 @@
-/* hash: gtokr */
+/* hash: vufes */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-100: #f2f3f5;
@@ -38,26 +38,30 @@
 } /* сбрасывает синюю подсветку при нажатии */ :root {
     --icon-view-color: var(--color-light-neutral-translucent-700);
     --icon-view-bg-color: var(--color-light-neutral-100);
-} .icon-view__componentWrapper_19glp {
+} .icon-view__componentWrapper_50nkw {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-} .icon-view__component_19glp {
+} .icon-view__component_50nkw {
     position: relative;
     overflow: hidden;
     width: 100%;
     height: 100%;
     color: var(--icon-view-color)
-} .icon-view__component_19glp > svg {
+} .icon-view__component_50nkw > svg {
         vertical-align: top;
-    } .icon-view__bg_19glp {
+    } .icon-view__bg_50nkw {
     fill: var(--icon-view-bg-color);
-} .icon-view__border_19glp {
+} .icon-view__border_50nkw {
     stroke: var(--color-light-neutral-translucent-200);
     stroke-width: 1px;
     fill: transparent;
-} .icon-view__text_19glp {
+} .icon-view__imageFit_50nkw {
+    object-fit: contain;
+} .icon-view__imageFill_50nkw {
+    object-fit: cover;
+} .icon-view__text_50nkw {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -68,7 +72,7 @@
     top: var(--gap-0);
     overflow: hidden;
     text-align: center;
-} .icon-view__children_19glp {
+} .icon-view__children_50nkw {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -77,206 +81,206 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%)
-} .icon-view__children_19glp svg,
-    .icon-view__children_19glp .cc-cdn-icon {
+} .icon-view__children_50nkw svg,
+    .icon-view__children_50nkw .cc-cdn-icon {
         width: 100%;
         height: 100%;
-    } .icon-view__addons_19glp {
+    } .icon-view__addons_50nkw {
     display: flex;
     align-items: center;
     flex-shrink: 0;
     position: absolute;
     line-height: 0;
-} .icon-view__wrapperSize_128_19glp {
+} .icon-view__wrapperSize_128_50nkw {
     width: 128px;
     height: 128px
-} .icon-view__wrapperSize_128_19glp .icon-view__children_19glp {
+} .icon-view__wrapperSize_128_50nkw .icon-view__children_50nkw {
         width: 64px;
         height: 64px;
-    } .icon-view__wrapperSize_128_19glp .icon-view__addons_19glp {
+    } .icon-view__wrapperSize_128_50nkw .icon-view__addons_50nkw {
         width: 40px;
         height: 40px;
-    } .icon-view__wrapperSize_128_19glp .icon-view__topAddons_19glp {
+    } .icon-view__wrapperSize_128_50nkw .icon-view__topAddons_50nkw {
         top: var(--gap-8-neg);
         right: var(--gap-8-neg);
-    } .icon-view__wrapperSize_128_19glp .icon-view__bottomAddons_19glp {
+    } .icon-view__wrapperSize_128_50nkw .icon-view__bottomAddons_50nkw {
         bottom: var(--gap-8-neg);
         right: var(--gap-8-neg);
-    } .icon-view__wrapperSize_80_19glp {
+    } .icon-view__wrapperSize_80_50nkw {
     width: 80px;
     height: 80px
-} .icon-view__wrapperSize_80_19glp .icon-view__children_19glp {
+} .icon-view__wrapperSize_80_50nkw .icon-view__children_50nkw {
         width: 48px;
         height: 48px;
-    } .icon-view__wrapperSize_80_19glp .icon-view__addons_19glp {
+    } .icon-view__wrapperSize_80_50nkw .icon-view__addons_50nkw {
         width: 24px;
         height: 24px;
-    } .icon-view__wrapperSize_80_19glp .icon-view__topAddons_19glp {
+    } .icon-view__wrapperSize_80_50nkw .icon-view__topAddons_50nkw {
         top: -3px;
         right: -3px;
-    } .icon-view__wrapperSize_80_19glp .icon-view__bottomAddons_19glp {
+    } .icon-view__wrapperSize_80_50nkw .icon-view__bottomAddons_50nkw {
         bottom: -3px;
         right: -3px;
-    } .icon-view__wrapperSize_80_19glp .icon-view__indicator_19glp {
+    } .icon-view__wrapperSize_80_50nkw .icon-view__indicator_50nkw {
         top: -6px;
         right: -14px;
-    } .icon-view__wrapperSize_72_19glp {
+    } .icon-view__wrapperSize_72_50nkw {
     width: 72px;
     height: 72px
-} .icon-view__wrapperSize_72_19glp .icon-view__children_19glp {
+} .icon-view__wrapperSize_72_50nkw .icon-view__children_50nkw {
         width: 56px;
         height: 56px;
-    } .icon-view__wrapperSize_72_19glp .icon-view__addons_19glp {
+    } .icon-view__wrapperSize_72_50nkw .icon-view__addons_50nkw {
         width: 24px;
         height: 24px;
-    } .icon-view__wrapperSize_72_19glp .icon-view__topAddons_19glp {
+    } .icon-view__wrapperSize_72_50nkw .icon-view__topAddons_50nkw {
         top: -5px;
         right: -5px;
-    } .icon-view__wrapperSize_72_19glp .icon-view__bottomAddons_19glp {
+    } .icon-view__wrapperSize_72_50nkw .icon-view__bottomAddons_50nkw {
         bottom: -5px;
         right: -5px;
-    } .icon-view__wrapperSize_72_19glp .icon-view__indicator_19glp {
+    } .icon-view__wrapperSize_72_50nkw .icon-view__indicator_50nkw {
         top: -8px;
         right: -16px;
-    } .icon-view__wrapperSize_64_19glp {
+    } .icon-view__wrapperSize_64_50nkw {
     width: 64px;
     height: 64px
-} .icon-view__wrapperSize_64_19glp .icon-view__children_19glp {
+} .icon-view__wrapperSize_64_50nkw .icon-view__children_50nkw {
         width: 32px;
         height: 32px;
-    } .icon-view__wrapperSize_64_19glp .icon-view__addons_19glp {
+    } .icon-view__wrapperSize_64_50nkw .icon-view__addons_50nkw {
         width: 24px;
         height: 24px;
-    } .icon-view__wrapperSize_64_19glp .icon-view__topAddons_19glp {
+    } .icon-view__wrapperSize_64_50nkw .icon-view__topAddons_50nkw {
         top: -7px;
         right: -7px;
-    } .icon-view__wrapperSize_64_19glp .icon-view__bottomAddons_19glp {
+    } .icon-view__wrapperSize_64_50nkw .icon-view__bottomAddons_50nkw {
         bottom: -7px;
         right: -7px;
-    } .icon-view__wrapperSize_64_19glp .icon-view__indicator_19glp {
+    } .icon-view__wrapperSize_64_50nkw .icon-view__indicator_50nkw {
         top: var(--gap-8-neg);
         right: var(--gap-16-neg);
-    } .icon-view__wrapperSize_56_19glp {
+    } .icon-view__wrapperSize_56_50nkw {
     width: 56px;
     height: 56px
-} .icon-view__wrapperSize_56_19glp .icon-view__children_19glp {
+} .icon-view__wrapperSize_56_50nkw .icon-view__children_50nkw {
         width: 40px;
         height: 40px;
-    } .icon-view__wrapperSize_56_19glp .icon-view__addons_19glp {
+    } .icon-view__wrapperSize_56_50nkw .icon-view__addons_50nkw {
         width: 20px;
         height: 20px;
-    } .icon-view__wrapperSize_56_19glp .icon-view__topAddons_19glp {
+    } .icon-view__wrapperSize_56_50nkw .icon-view__topAddons_50nkw {
         top: var(--gap-8-neg);
         right: -6px;
-    } .icon-view__wrapperSize_56_19glp .icon-view__bottomAddons_19glp {
+    } .icon-view__wrapperSize_56_50nkw .icon-view__bottomAddons_50nkw {
         bottom: var(--gap-8-neg);
         right: -6px;
-    } .icon-view__wrapperSize_56_19glp .icon-view__indicator_19glp {
+    } .icon-view__wrapperSize_56_50nkw .icon-view__indicator_50nkw {
         top: -6px;
         right: var(--gap-12-neg);
-    } .icon-view__wrapperSize_48_19glp {
+    } .icon-view__wrapperSize_48_50nkw {
     width: 48px;
     height: 48px
-} .icon-view__wrapperSize_48_19glp .icon-view__children_19glp {
+} .icon-view__wrapperSize_48_50nkw .icon-view__children_50nkw {
         width: 24px;
         height: 24px;
-    } .icon-view__wrapperSize_48_19glp .icon-view__addons_19glp {
+    } .icon-view__wrapperSize_48_50nkw .icon-view__addons_50nkw {
         width: 20px;
         height: 20px;
-    } .icon-view__wrapperSize_48_19glp .icon-view__topAddons_19glp {
+    } .icon-view__wrapperSize_48_50nkw .icon-view__topAddons_50nkw {
         top: -7px;
         right: -7px;
-    } .icon-view__wrapperSize_48_19glp .icon-view__bottomAddons_19glp {
+    } .icon-view__wrapperSize_48_50nkw .icon-view__bottomAddons_50nkw {
         bottom: -7px;
         right: -7px;
-    } .icon-view__wrapperSize_48_19glp .icon-view__indicator_19glp {
+    } .icon-view__wrapperSize_48_50nkw .icon-view__indicator_50nkw {
         top: -7px;
         right: -13px;
-    } .icon-view__wrapperSize_40_19glp {
+    } .icon-view__wrapperSize_40_50nkw {
     width: 40px;
     height: 40px
-} .icon-view__wrapperSize_40_19glp .icon-view__children_19glp {
+} .icon-view__wrapperSize_40_50nkw .icon-view__children_50nkw {
         width: 24px;
         height: 24px;
-    } .icon-view__wrapperSize_40_19glp .icon-view__addons_19glp {
+    } .icon-view__wrapperSize_40_50nkw .icon-view__addons_50nkw {
         width: 20px;
         height: 20px;
-    } .icon-view__wrapperSize_40_19glp .icon-view__topAddons_19glp {
+    } .icon-view__wrapperSize_40_50nkw .icon-view__topAddons_50nkw {
         top: -7px;
         right: -7px;
-    } .icon-view__wrapperSize_40_19glp .icon-view__bottomAddons_19glp {
+    } .icon-view__wrapperSize_40_50nkw .icon-view__bottomAddons_50nkw {
         bottom: -7px;
         right: -7px;
-    } .icon-view__wrapperSize_40_19glp .icon-view__indicator_19glp {
+    } .icon-view__wrapperSize_40_50nkw .icon-view__indicator_50nkw {
         top: -7px;
         right: -13px;
-    } .icon-view__wrapperSize_32_19glp {
+    } .icon-view__wrapperSize_32_50nkw {
     width: 32px;
     height: 32px
-} .icon-view__wrapperSize_32_19glp .icon-view__children_19glp {
+} .icon-view__wrapperSize_32_50nkw .icon-view__children_50nkw {
         width: 24px;
         height: 24px;
-    } .icon-view__wrapperSize_32_19glp .icon-view__indicator_19glp {
+    } .icon-view__wrapperSize_32_50nkw .icon-view__indicator_50nkw {
         top: var(--gap-2-neg);
         right: var(--gap-2-neg);
-    } .icon-view__wrapperSize_24_19glp {
+    } .icon-view__wrapperSize_24_50nkw {
     width: 24px;
     height: 24px
-} .icon-view__wrapperSize_24_19glp .icon-view__children_19glp {
+} .icon-view__wrapperSize_24_50nkw .icon-view__children_50nkw {
         width: 24px;
         height: 24px;
-    } .icon-view__wrapperSize_24_19glp .icon-view__indicator_19glp {
+    } .icon-view__wrapperSize_24_50nkw .icon-view__indicator_50nkw {
         top: var(--gap-2-neg);
         right: var(--gap-2-neg);
-    } .icon-view__wrapperSize_20_19glp {
+    } .icon-view__wrapperSize_20_50nkw {
     width: 20px;
     height: 20px
-} .icon-view__wrapperSize_20_19glp .icon-view__children_19glp {
+} .icon-view__wrapperSize_20_50nkw .icon-view__children_50nkw {
         width: 16px;
         height: 16px;
-    } .icon-view__wrapperSize_20_19glp .icon-view__indicator_19glp {
+    } .icon-view__wrapperSize_20_50nkw .icon-view__indicator_50nkw {
         top: -3px;
         right: -3px;
-    } .icon-view__wrapperSize_16_19glp {
+    } .icon-view__wrapperSize_16_50nkw {
     width: 16px;
     height: 16px
-} .icon-view__wrapperSize_16_19glp .icon-view__children_19glp {
+} .icon-view__wrapperSize_16_50nkw .icon-view__children_50nkw {
         width: 16px;
         height: 16px;
-    } .icon-view__wrapperSize_16_19glp .icon-view__indicator_19glp {
+    } .icon-view__wrapperSize_16_50nkw .icon-view__indicator_50nkw {
         top: var(--gap-4-neg);
         right: var(--gap-4-neg);
-    } /* prettier-ignore */ .icon-view__children_19glp.icon-view__childrenSize_16_19glp {
+    } /* prettier-ignore */ .icon-view__children_50nkw.icon-view__childrenSize_16_50nkw {
             width: 16px;
             height: 16px;
-        } .icon-view__children_19glp.icon-view__childrenSize_20_19glp {
+        } .icon-view__children_50nkw.icon-view__childrenSize_20_50nkw {
             width: 20px;
             height: 20px;
-        } .icon-view__children_19glp.icon-view__childrenSize_24_19glp {
+        } .icon-view__children_50nkw.icon-view__childrenSize_24_50nkw {
             width: 24px;
             height: 24px;
-        } .icon-view__children_19glp.icon-view__childrenSize_32_19glp {
+        } .icon-view__children_50nkw.icon-view__childrenSize_32_50nkw {
             width: 32px;
             height: 32px;
-        } .icon-view__children_19glp.icon-view__childrenSize_40_19glp {
+        } .icon-view__children_50nkw.icon-view__childrenSize_40_50nkw {
             width: 40px;
             height: 40px;
-        } .icon-view__children_19glp.icon-view__childrenSize_48_19glp {
+        } .icon-view__children_50nkw.icon-view__childrenSize_48_50nkw {
             width: 48px;
             height: 48px;
-        } .icon-view__children_19glp.icon-view__childrenSize_56_19glp {
+        } .icon-view__children_50nkw.icon-view__childrenSize_56_50nkw {
             width: 56px;
             height: 56px;
-        } .icon-view__children_19glp.icon-view__childrenSize_64_19glp {
+        } .icon-view__children_50nkw.icon-view__childrenSize_64_50nkw {
             width: 64px;
             height: 64px;
-        } .icon-view__children_19glp.icon-view__childrenSize_72_19glp {
+        } .icon-view__children_50nkw.icon-view__childrenSize_72_50nkw {
             width: 72px;
             height: 72px;
-        } .icon-view__children_19glp.icon-view__childrenSize_80_19glp {
+        } .icon-view__children_50nkw.icon-view__childrenSize_80_50nkw {
             width: 80px;
             height: 80px;
-        } .icon-view__children_19glp.icon-view__childrenSize_128_19glp {
+        } .icon-view__children_50nkw.icon-view__childrenSize_128_50nkw {
             width: 128px;
             height: 128px;
         }

package/icon-view/modern/components/base-shape/component.d.ts CHANGED Viewed

@@ -7,6 +7,7 @@ type Border = {
     color?: string;
     style?: 'solid' | 'dashed';
 };
+type ScaleType = 'fit' | 'fill';
 type TMainSize = 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 128;
 type BaseShapeProps = {
     /**
@@ -35,6 +36,13 @@ type BaseShapeProps = {
      * Фоновое изображение. Имеет приоритет над иконкой и заливкой
      */
     imageUrl?: string;
+    /**
+     * Режим масштабирования изображения
+     * 'fill' - изображение заполняет всё доступное пространство и может быть обрезано
+     * 'fit' - изображение вписывается полностью без обрезки
+     * @default 'fill'
+     */
+    scale?: ScaleType;
     /**
      * Фоновое svg. Имеет приоритет над иконкой и заливкой
      */
@@ -81,4 +89,4 @@ type BaseShapeProps = {
     mainSize?: TMainSize;
 };
 declare const BaseShape: React.ForwardRefExoticComponent<BaseShapeProps & React.RefAttributes<HTMLDivElement>>;
-export { TMainSize, BaseShapeProps, BaseShape };
+export { ScaleType, TMainSize, BaseShapeProps, BaseShape };

package/icon-view/modern/components/base-shape/component.js CHANGED Viewed

@@ -3,10 +3,10 @@ import cn from 'classnames';
 import { useImageLoadingState, useId } from '@alfalab/hooks';
 import { getPath, getPathName } from './utils.js';
-const styles = {"componentWrapper":"icon-view__componentWrapper_19glp","component":"icon-view__component_19glp","bg":"icon-view__bg_19glp","border":"icon-view__border_19glp","text":"icon-view__text_19glp","children":"icon-view__children_19glp","addons":"icon-view__addons_19glp","wrapperSize_128":"icon-view__wrapperSize_128_19glp","topAddons":"icon-view__topAddons_19glp","bottomAddons":"icon-view__bottomAddons_19glp","wrapperSize_80":"icon-view__wrapperSize_80_19glp","indicator":"icon-view__indicator_19glp","wrapperSize_72":"icon-view__wrapperSize_72_19glp","wrapperSize_64":"icon-view__wrapperSize_64_19glp","wrapperSize_56":"icon-view__wrapperSize_56_19glp","wrapperSize_48":"icon-view__wrapperSize_48_19glp","wrapperSize_40":"icon-view__wrapperSize_40_19glp","wrapperSize_32":"icon-view__wrapperSize_32_19glp","wrapperSize_24":"icon-view__wrapperSize_24_19glp","wrapperSize_20":"icon-view__wrapperSize_20_19glp","wrapperSize_16":"icon-view__wrapperSize_16_19glp","childrenSize_16":"icon-view__childrenSize_16_19glp","childrenSize_20":"icon-view__childrenSize_20_19glp","childrenSize_24":"icon-view__childrenSize_24_19glp","childrenSize_32":"icon-view__childrenSize_32_19glp","childrenSize_40":"icon-view__childrenSize_40_19glp","childrenSize_48":"icon-view__childrenSize_48_19glp","childrenSize_56":"icon-view__childrenSize_56_19glp","childrenSize_64":"icon-view__childrenSize_64_19glp","childrenSize_72":"icon-view__childrenSize_72_19glp","childrenSize_80":"icon-view__childrenSize_80_19glp","childrenSize_128":"icon-view__childrenSize_128_19glp"};
+const styles = {"componentWrapper":"icon-view__componentWrapper_50nkw","component":"icon-view__component_50nkw","bg":"icon-view__bg_50nkw","border":"icon-view__border_50nkw","imageFit":"icon-view__imageFit_50nkw","imageFill":"icon-view__imageFill_50nkw","text":"icon-view__text_50nkw","children":"icon-view__children_50nkw","addons":"icon-view__addons_50nkw","wrapperSize_128":"icon-view__wrapperSize_128_50nkw","topAddons":"icon-view__topAddons_50nkw","bottomAddons":"icon-view__bottomAddons_50nkw","wrapperSize_80":"icon-view__wrapperSize_80_50nkw","indicator":"icon-view__indicator_50nkw","wrapperSize_72":"icon-view__wrapperSize_72_50nkw","wrapperSize_64":"icon-view__wrapperSize_64_50nkw","wrapperSize_56":"icon-view__wrapperSize_56_50nkw","wrapperSize_48":"icon-view__wrapperSize_48_50nkw","wrapperSize_40":"icon-view__wrapperSize_40_50nkw","wrapperSize_32":"icon-view__wrapperSize_32_50nkw","wrapperSize_24":"icon-view__wrapperSize_24_50nkw","wrapperSize_20":"icon-view__wrapperSize_20_50nkw","wrapperSize_16":"icon-view__wrapperSize_16_50nkw","childrenSize_16":"icon-view__childrenSize_16_50nkw","childrenSize_20":"icon-view__childrenSize_20_50nkw","childrenSize_24":"icon-view__childrenSize_24_50nkw","childrenSize_32":"icon-view__childrenSize_32_50nkw","childrenSize_40":"icon-view__childrenSize_40_50nkw","childrenSize_48":"icon-view__childrenSize_48_50nkw","childrenSize_56":"icon-view__childrenSize_56_50nkw","childrenSize_64":"icon-view__childrenSize_64_50nkw","childrenSize_72":"icon-view__childrenSize_72_50nkw","childrenSize_80":"icon-view__childrenSize_80_50nkw","childrenSize_128":"icon-view__childrenSize_128_50nkw"};
 require('./index.css');
-const BaseShape = forwardRef(({ size = 64, border = false, backgroundColor, imageUrl, backgroundIcon: Icon, className, shapeClassName, text, children, topAddons, bottomAddons, indicator, pathsMap, dataTestId, mainSize, iconContainerClassName, }, ref) => {
+const BaseShape = forwardRef(({ size = 64, border = false, backgroundColor, imageUrl, scale = 'fill', backgroundIcon: Icon, className, shapeClassName, text, children, topAddons, bottomAddons, indicator, pathsMap, dataTestId, mainSize, iconContainerClassName, }, ref) => {
     const [width, height] = typeof size === 'object' ? [size.width, size.height] : [size, size];
     const imageLoadingState = useImageLoadingState({ src: imageUrl || '' });
     const clipPathId = useId();
@@ -22,6 +22,8 @@ const BaseShape = forwardRef(({ size = 64, border = false, backgroundColor, imag
     });
     const shapeDPath = getPath(polygonName, maxDimension, pathsMap.shape);
     const borderDPath = getPath(polygonName, maxDimension, pathsMap.border);
+    const shouldContain = scale === 'fit';
+    const preserveAspectRatio = shouldContain ? 'xMidYMid meet' : 'xMidYMid slice';
     return (React.createElement("div", { className: cn(styles.componentWrapper, styles[`wrapperSize_${maxDimension}`], className), ref: ref, "data-test-id": dataTestId },
         React.createElement("div", { className: styles.component, style: { width, height } },
             React.createElement("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: 'http://www.w3.org/2000/svg', focusable: false },
@@ -32,7 +34,10 @@ const BaseShape = forwardRef(({ size = 64, border = false, backgroundColor, imag
                     React.createElement("defs", null,
                         React.createElement("clipPath", { id: clipPathId },
                             React.createElement("path", { d: shapeDPath }))),
-                    React.createElement("image", { href: imageUrl, width: '100%', height: '100%', clipPath: `url(#${clipPathId})`, preserveAspectRatio: 'xMidYMid slice' }),
+                    React.createElement("image", { className: cn({
+                            [styles.imageFit]: scale === 'fit',
+                            [styles.imageFill]: scale === 'fill',
+                        }), href: imageUrl, width: '100%', height: '100%', clipPath: `url(#${clipPathId})`, preserveAspectRatio: preserveAspectRatio }),
                     React.createElement("path", { d: shapeDPath, fill: 'none' }))),
                 Icon && (React.createElement(Fragment, null,
                     React.createElement("defs", null,