@finam/web-ui-kit-components 3.27.3 → 3.28.0

package/CHANGELOG.md

@@ -1,3 +1,5 @@
+## 3.28.0
+* Добавлен компонент `SecurityIcon`
 ## 3.27.3
 * Исправлено зацикливание рендера в DraggablePopover
 ## 3.27.2

package/dist/SecurityIcon/SecurityIcon.d.ts

@@ -0,0 +1,20 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { Root } from './SecurityIcon.styles.js';
+import type { IconTypeProps } from './types.js';
+export interface Props extends ComponentPropsWithoutRef<typeof Root>, IconTypeProps {
+    /** Шаблон URL сервиса иконок, например `https://host/$type/$size/$id$mult.png` */
+    urlTemplate?: string;
+    /** Готовый URL картинки, имеет приоритет над urlTemplate */
+    imgSrc?: string;
+    /** Название, используется для alt/title и буквы-заглушки */
+    name?: string;
+    /** Размер иконки в пикселях */
+    size?: number;
+    /** Показывать заглушку, если картинка не загрузилась */
+    withPlaceholder?: boolean;
+    /** Дополнительное содержимое поверх иконки, например бейдж */
+    children?: ReactNode;
+}
+declare const _default: import("react").MemoExoticComponent<({ className, urlTemplate, imgSrc, name, size, withPlaceholder, children, type, iconId, style, ...props }: Props) => import("react/jsx-runtime").JSX.Element | null>;
+export default _default;
+//# sourceMappingURL=SecurityIcon.d.ts.map

package/dist/SecurityIcon/SecurityIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecurityIcon.d.ts","sourceRoot":"","sources":["../../src/SecurityIcon/SecurityIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAO,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAErD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,MAAM,WAAW,KAAM,SAAQ,wBAAwB,CAAC,OAAO,IAAI,CAAC,EAAE,aAAa;IACjF,kFAAkF;IAClF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;uKAcE,KAAK;AA+CR,wBAAkC"}

package/dist/SecurityIcon/SecurityIcon.js

@@ -0,0 +1,30 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState } from 'react';
+import classNames from 'clsx';
+import Typography from '../Typography/index.js';
+import { Img, Root } from './SecurityIcon.styles.js';
+import { DEFAULT_SIZE, LARGE_PLACEHOLDER_SIZE } from './constants.js';
+import { buildIconUrl, resolveIconSize } from './utils.js';
+const SecurityIcon = (_a) => {
+    var { className, urlTemplate, imgSrc, name, size = DEFAULT_SIZE, withPlaceholder = true, children, type, iconId, style } = _a, props = __rest(_a, ["className", "urlTemplate", "imgSrc", "name", "size", "withPlaceholder", "children", "type", "iconId", "style"]);
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const [imageLoadError, setImageLoadError] = useState(false);
+    const handleImgLoad = () => {
+        setImageLoaded(true);
+    };
+    const handleImgError = () => {
+        setImageLoadError(true);
+    };
+    if (!withPlaceholder && imageLoadError) {
+        return null;
+    }
+    const src = imgSrc ||
+        (urlTemplate && type && iconId != null
+            ? buildIconUrl(urlTemplate, type, iconId, resolveIconSize(size))
+            : undefined);
+    const imageAvailable = Boolean(src) && !imageLoadError;
+    return (_jsxs(Root, Object.assign({}, props, { style: Object.assign({ width: `${size}px`, height: `${size}px` }, style), className: classNames(className, { imageLoaded: imageAvailable && imageLoaded }), children: [children, imageAvailable ? (_jsx(Img, { className: classNames({ imageLoaded, fromImage: Boolean(imgSrc) }), src: src, alt: name, title: name, onLoad: handleImgLoad, onError: handleImgError })) : (_jsx(Typography, { variant: size < LARGE_PLACEHOLDER_SIZE ? 'caption12' : 'body16', children: name === null || name === void 0 ? void 0 : name.charAt(0) }))] })));
+};
+export default memo(SecurityIcon);
+//# sourceMappingURL=SecurityIcon.js.map

package/dist/SecurityIcon/SecurityIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecurityIcon.js","sourceRoot":"","sources":["../../src/SecurityIcon/SecurityIcon.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAuC,IAAI,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,UAAU,MAAM,MAAM,CAAC;AAC9B,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAEtE,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAiB3D,MAAM,YAAY,GAAG,CAAC,EAYd,EAAE,EAAE;QAZU,EACpB,SAAS,EACT,WAAW,EACX,MAAM,EACN,IAAI,EACJ,IAAI,GAAG,YAAY,EACnB,eAAe,GAAG,IAAI,EACtB,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,KAAK,OAEC,EADH,KAAK,cAXY,gHAYrB,CADS;IAER,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5D,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,cAAc,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,IAAI,CAAC,eAAe,IAAI,cAAc,EAAE,CAAC;QACvC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,GAAG,GAAG,MAAM;QAChB,CAAC,WAAW,IAAI,IAAI,IAAI,MAAM,IAAI,IAAI;YACpC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,eAAe,CAAC,IAAI,CAAC,CAAC;YAChE,CAAC,CAAC,SAAS,CAAC,CAAC;IACjB,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;IAEvD,OAAO,CACL,MAAC,IAAI,oBACC,KAAK,IACT,KAAK,kBAAI,KAAK,EAAE,GAAG,IAAI,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,IAAI,IAAK,KAAK,GAC1D,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,EAAE,WAAW,EAAE,cAAc,IAAI,WAAW,EAAE,CAAC,aAE/E,QAAQ,EACR,cAAc,CAAC,CAAC,CAAC,CAChB,KAAC,GAAG,IACF,SAAS,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,EAClE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,IAAI,EACT,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,aAAa,EACrB,OAAO,EAAE,cAAc,GACvB,CACH,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,OAAO,EAAE,IAAI,GAAG,sBAAsB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,YACxE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC,CAAC,CAAC,GACL,CACd,KACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC,YAAY,CAAC,CAAC"}

package/dist/SecurityIcon/SecurityIcon.styles.css

@@ -0,0 +1,2 @@
+.ui_components_r1fjyzu5{flex-shrink:0;display:flex;justify-content:center;align-items:center;position:relative;background:var(--ui-colors-bg-base);background-size:cover;background-repeat:no-repeat;overflow:visible;}.ui_components_r1fjyzu5.imageLoaded{background:transparent;border-radius:0;}
+.ui_components_i11iqzt2{width:100%;height:100%;visibility:hidden;}.ui_components_i11iqzt2.imageLoaded{visibility:visible;}.ui_components_i11iqzt2.fromImage{border-radius:50%;object-fit:cover;}

package/dist/SecurityIcon/SecurityIcon.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const Root: {
+    __wyw_meta: unknown;
+} & import("react").ForwardRefExoticComponent<import("../Avatar/Avatar.js").Props & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Img: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+//# sourceMappingURL=SecurityIcon.styles.d.ts.map

package/dist/SecurityIcon/SecurityIcon.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecurityIcon.styles.d.ts","sourceRoot":"","sources":["../../src/SecurityIcon/SecurityIcon.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI;;kIAehB,CAAC;AAEF,eAAO,MAAM,GAAG,4KAaf,CAAC"}

package/dist/SecurityIcon/SecurityIcon.styles.js

@@ -0,0 +1,16 @@
+import { styled } from '@linaria/react';
+import Avatar from '../Avatar/index.js';
+const _exp = () => (Avatar);
+export const Root = /*#__PURE__*/styled(_exp())({
+  name: "Root",
+  class: "ui_components_r1fjyzu5",
+  propsAsIs: true
+});
+export const Img = /*#__PURE__*/styled('img')({
+  name: "Img",
+  class: "ui_components_i11iqzt2",
+  propsAsIs: false
+});
+//# sourceMappingURL=SecurityIcon.styles.js.map
+
+import "./SecurityIcon.styles.css";

package/dist/SecurityIcon/SecurityIcon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecurityIcon.styles.js","sourceRoot":"","sources":["../../src/SecurityIcon/SecurityIcon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAC/D,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;;;;gBAMlB,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO;;;;;;;;;CASpD,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;CAa5B,CAAC"}

package/dist/SecurityIcon/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const AVAILABLE_SIZES: number[];
+export declare const DEFAULT_SIZE: number;
+export declare const MAX_PIXEL_RATIO = 3;
+export declare const LARGE_PLACEHOLDER_SIZE = 32;
+//# sourceMappingURL=constants.d.ts.map

package/dist/SecurityIcon/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/SecurityIcon/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,UAAuB,CAAC;AAEpD,eAAO,MAAM,YAAY,QAAqB,CAAC;AAE/C,eAAO,MAAM,eAAe,IAAI,CAAC;AAEjC,eAAO,MAAM,sBAAsB,KAAK,CAAC"}

package/dist/SecurityIcon/constants.js

@@ -0,0 +1,5 @@
+export const AVAILABLE_SIZES = [24, 32, 40, 48, 64];
+export const DEFAULT_SIZE = AVAILABLE_SIZES[1];
+export const MAX_PIXEL_RATIO = 3;
+export const LARGE_PLACEHOLDER_SIZE = 32;
+//# sourceMappingURL=constants.js.map

package/dist/SecurityIcon/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/SecurityIcon/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;AAEpD,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC;AAE/C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,CAAC;AAEjC,MAAM,CAAC,MAAM,sBAAsB,GAAG,EAAE,CAAC"}

package/dist/SecurityIcon/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './SecurityIcon.js';
+export type { SecurityIconType, IconTypeProps } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/SecurityIcon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SecurityIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/SecurityIcon/index.js

@@ -0,0 +1,2 @@
+export { default } from './SecurityIcon.js';
+//# sourceMappingURL=index.js.map

package/dist/SecurityIcon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/SecurityIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/SecurityIcon/types.d.ts

@@ -0,0 +1,8 @@
+export type SecurityIconType = 'security' | 'country' | 'currency' | 'issuer';
+export interface IconTypeProps {
+    /** Тип иконки */
+    type?: SecurityIconType;
+    /** Идентификатор сущности */
+    iconId?: string | number;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/SecurityIcon/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/SecurityIcon/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;AAE9E,MAAM,WAAW,aAAa;IAC5B,iBAAiB;IACjB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B"}

package/dist/SecurityIcon/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/SecurityIcon/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/SecurityIcon/types.ts"],"names":[],"mappings":""}

package/dist/SecurityIcon/utils.d.ts

@@ -0,0 +1,4 @@
+import type { SecurityIconType } from './types.js';
+export declare const resolveIconSize: (size: number) => number;
+export declare const buildIconUrl: (urlTemplate: string, type: SecurityIconType, id: string | number, size: number) => string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/SecurityIcon/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/SecurityIcon/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAenD,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,WAG3C,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,aAAa,MAAM,EACnB,MAAM,gBAAgB,EACtB,IAAI,MAAM,GAAG,MAAM,EACnB,MAAM,MAAM,WAOb,CAAC"}

package/dist/SecurityIcon/utils.js

@@ -0,0 +1,19 @@
+import { AVAILABLE_SIZES, MAX_PIXEL_RATIO } from './constants.js';
+const getPixelRatioSuffix = () => {
+    var _a;
+    if (typeof window === 'undefined') {
+        return '';
+    }
+    const pixelRatio = Math.min(MAX_PIXEL_RATIO, Math.ceil(Math.max(1, (_a = window.devicePixelRatio) !== null && _a !== void 0 ? _a : 1)));
+    return pixelRatio > 1 ? `@${pixelRatio}x` : '';
+};
+export const resolveIconSize = (size) => {
+    var _a;
+    return ((_a = AVAILABLE_SIZES.find(availableSize => availableSize >= size)) !== null && _a !== void 0 ? _a : AVAILABLE_SIZES[AVAILABLE_SIZES.length - 1]);
+};
+export const buildIconUrl = (urlTemplate, type, id, size) => (urlTemplate
+    .replace('$type', type)
+    .replace('$size', size.toString())
+    .replace('$id', typeof id === 'number' ? id.toString() : id)
+    .replace('$mult', getPixelRatioSuffix()));
+//# sourceMappingURL=utils.js.map

package/dist/SecurityIcon/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/SecurityIcon/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGlE,MAAM,mBAAmB,GAAG,GAAG,EAAE;;IAC/B,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CACzB,eAAe,EACf,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAA,MAAM,CAAC,gBAAgB,mCAAI,CAAC,CAAC,CAAC,CACrD,CAAC;IAEF,OAAO,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;AACjD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,IAAY,EAAE,EAAE;;IAAC,OAAA,CAC/C,MAAA,eAAe,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,aAAa,IAAI,IAAI,CAAC,mCAC5D,eAAe,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAC5C,CAAA;CAAA,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,WAAmB,EACnB,IAAsB,EACtB,EAAmB,EACnB,IAAY,EACZ,EAAE,CAAC,CACH,WAAW;KACR,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC;KACtB,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;KACjC,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KAC3D,OAAO,CAAC,OAAO,EAAE,mBAAmB,EAAE,CAAC,CAC3C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finam/web-ui-kit-components",
-  "version": "3.27.3",
+  "version": "3.28.0",
   "description": "Components library for web-ui-kit",
   "author": "",
   "license": "ISC",