@sima-land/moleculas 16.0.0-alpha.4 → 16.0.0-alpha.40

package/README.md

@@ -0,0 +1,23 @@
+# UI-moleculas
+
+В этом проекте собраны UI-компоненты, привязанные к контексту интернет-магазина.
+
+## Использование
+
+### Установка
+
+```sh
+# с помощью npm
+npm i -S @sima-land/moleculas
+
+# или с помощью yarn
+yarn add @sima-land/moleculas
+```
+
+### Настройка среды
+
+Компоненты библиотеки используют:
+
+- импорты css/scss-файлов как css-модулей (каждый такой файл промаркирован в виде `*.m.{css,scss}`)
+
+Поэтому, для использования библиотеки необходимо сконфигурировать среду (сборщик или тестовый фреймворк) таким образом чтобы данные импорты работали корректно.

package/common/components/badge/badge.d.ts

@@ -0,0 +1,7 @@
+import type { BadgeProps } from './types';
+/**
+ * Шильдик.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Badge({ rootRef, className, color, coloring, fields, style, shape, withHoverEffect, 'data-testid': testId, children, ...restProps }: BadgeProps): import("react/jsx-runtime").JSX.Element;

package/common/components/badge/badge.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = Badge;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("./utils");
+const bind_1 = __importDefault(require("classnames/bind"));
+const badge_m_scss_1 = __importDefault(require("./badge.m.scss"));
+const cx = bind_1.default.bind(badge_m_scss_1.default);
+/**
+ * Шильдик.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Badge({ rootRef, className, color, coloring = 'outline', fields, style, shape = 'unset', withHoverEffect = true, 'data-testid': testId = 'badge', children, ...restProps }) {
+    const iconOnly = fields && fields.length === 1 && fields[0].type === 'svg-url';
+    const rootClassName = cx('root', iconOnly && 'icon-only', withHoverEffect && 'with-hover-effect', shape === 'round' && 'shape-round', shape === 'pill' && 'shape-pill', shape !== 'pill' && !iconOnly && 'padding-x-default', shape === 'pill' && !iconOnly && 'padding-x-pill', coloring === 'outline' && 'coloring-outline', coloring === 'fill' && 'coloring-fill', className);
+    const rootStyle = {
+        '--badge-color': (0, utils_1.tokenToCustomProperty)(color),
+        ...style,
+    };
+    const content = fields ? (0, utils_1.renderFields)(fields) : children;
+    if (restProps.as === 'span') {
+        return ((0, jsx_runtime_1.jsx)("span", { ref: rootRef, className: rootClassName, style: rootStyle, "data-testid": testId, ...omitPropAs(restProps), children: content }));
+    }
+    if (restProps.as === 'div') {
+        return ((0, jsx_runtime_1.jsx)("div", { ref: rootRef, className: rootClassName, style: rootStyle, "data-testid": testId, ...omitPropAs(restProps), children: content }));
+    }
+    if (restProps.as === 'button') {
+        return ((0, jsx_runtime_1.jsx)("button", { ref: rootRef, className: rootClassName, style: rootStyle, "data-testid": testId, type: 'button', ...omitPropAs(restProps), children: content }));
+    }
+    return ((0, jsx_runtime_1.jsx)("a", { ref: rootRef, className: rootClassName, style: rootStyle, "data-testid": testId, ...omitPropAs(restProps), children: content }));
+}
+/** @inheritdoc */
+function omitPropAs(props) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { as, ...omitted } = props;
+    return omitted;
+}
+//# sourceMappingURL=badge.js.map

package/common/components/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../src/common/components/badge/badge.tsx"],"names":[],"mappings":";;;;;AAYA,sBAyFC;;AApGD,mCAA8D;AAC9D,2DAAyC;AACzC,kEAAoC;AAEpC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,sBAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,KAAK,CAAC,EACpB,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,GAAG,SAAS,EACpB,MAAM,EACN,KAAK,EACL,KAAK,GAAG,OAAO,EACf,eAAe,GAAG,IAAI,EACtB,aAAa,EAAE,MAAM,GAAG,OAAO,EAC/B,QAAQ,EACR,GAAG,SAAS,EACD;IACX,MAAM,QAAQ,GAAG,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC;IAE/E,MAAM,aAAa,GAAG,EAAE,CACtB,MAAM,EACN,QAAQ,IAAI,WAAW,EACvB,eAAe,IAAI,mBAAmB,EACtC,KAAK,KAAK,OAAO,IAAI,aAAa,EAClC,KAAK,KAAK,MAAM,IAAI,YAAY,EAChC,KAAK,KAAK,MAAM,IAAI,CAAC,QAAQ,IAAI,mBAAmB,EACpD,KAAK,KAAK,MAAM,IAAI,CAAC,QAAQ,IAAI,gBAAgB,EACjD,QAAQ,KAAK,SAAS,IAAI,kBAAkB,EAC5C,QAAQ,KAAK,MAAM,IAAI,eAAe,EACtC,SAAS,CACV,CAAC;IAEF,MAAM,SAAS,GAAe;QAC5B,eAAe,EAAE,IAAA,6BAAqB,EAAC,KAAK,CAAC;QAC7C,GAAG,KAAK;KACT,CAAC;IAEF,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,IAAA,oBAAY,EAAC,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAEzD,IAAI,SAAS,CAAC,EAAE,KAAK,MAAM,EAAE,CAAC;QAC5B,OAAO,CACL,iCACE,GAAG,EAAE,OAAc,EACnB,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,SAAS,iBACH,MAAM,KACf,UAAU,CAAC,SAAS,CAAC,YAExB,OAAO,GACH,CACR,CAAC;IACJ,CAAC;IAED,IAAI,SAAS,CAAC,EAAE,KAAK,KAAK,EAAE,CAAC;QAC3B,OAAO,CACL,gCACE,GAAG,EAAE,OAAc,EACnB,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,SAAS,iBACH,MAAM,KACf,UAAU,CAAC,SAAS,CAAC,YAExB,OAAO,GACJ,CACP,CAAC;IACJ,CAAC;IAED,IAAI,SAAS,CAAC,EAAE,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,CACL,mCACE,GAAG,EAAE,OAAc,EACnB,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,SAAS,iBACH,MAAM,EACnB,IAAI,EAAC,QAAQ,KACT,UAAU,CAAC,SAAS,CAAC,YAExB,OAAO,GACD,CACV,CAAC;IACJ,CAAC;IAED,OAAO,CACL,8BACE,GAAG,EAAE,OAAc,EACnB,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,SAAS,iBACH,MAAM,KACf,UAAU,CAAC,SAAS,CAAC,YAExB,OAAO,GACN,CACL,CAAC;AACJ,CAAC;AAED,kBAAkB;AAClB,SAAS,UAAU,CAA6B,KAAQ;IACtD,6DAA6D;IAC7D,MAAM,EAAE,EAAE,EAAE,GAAG,OAAO,EAAE,GAAG,KAAK,CAAC;IAEjC,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/common/components/badge/badge.m.scss

@@ -0,0 +1,100 @@
+@use 'pkg:@sima-land/ui-nucleons/utils.scss';
+
+$badge-size: 20px;
+$icon-size: 16px;
+
+.root {
+  @include utils.reset-button;
+}
+
+.root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: $badge-size;
+  font-weight: bold;
+  font-size: 12px;
+  line-height: 16px;
+  max-width: 100%;
+  min-width: $badge-size;
+  text-decoration: none;
+}
+
+.padding-x-default {
+  padding-left: 6px;
+  padding-right: 6px;
+  &.coloring-outline {
+    // ВАЖНО: учитываем border
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}
+
+.padding-x-pill {
+  padding-left: 8px;
+  padding-right: 8px;
+  &.coloring-outline {
+    // ВАЖНО: учитываем border
+    padding-left: 7px;
+    padding-right: 7px;
+  }
+}
+
+.shape-round {
+  border-radius: 4px;
+}
+
+.shape-pill {
+  border-radius: 99999px;
+}
+
+.with-hover-effect:hover {
+  position: relative;
+  cursor: pointer;
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #fff;
+    opacity: 0.16;
+  }
+}
+
+.coloring-outline {
+  color: var(--badge-color, #aaa);
+
+  // ВАЖНО: используем border т.к. на Safari box-shadow пропадает при уменьшении масштаба
+  border: 1px solid var(--badge-border-color, var(--badge-color, #aaa));
+}
+
+.coloring-fill {
+  background: var(--badge-color, #aaa);
+  color: var(--badge-text-color, #fff);
+}
+
+.icon-only {
+  width: $badge-size;
+}
+
+// содержимое
+.content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.icon {
+  display: block;
+  width: $icon-size;
+  height: $icon-size;
+  line-height: $icon-size;
+}
+
+.icon + .content,
+.content + .icon {
+  margin-left: 4px;
+}

package/common/components/badge/index.d.ts

@@ -1,19 +1,2 @@
-import React from 'react';
-export interface BadgeField {
-    type: 'text' | 'timer' | 'svg-url';
-    value: string;
-}
-export interface BadgeProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
-    /** Основной цвет, используется как цвет обводки, иконок и текста. */
-    color?: string;
-    /** Содержимое шильдика. */
-    fields: Array<BadgeField>;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-}
-/**
- * Шильдик.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLAnchorElement>>;
+export type { BadgeSpecificProps, BadgeAsAnchorProps, BadgeAsButtonProps, BadgeAsSpanProps, BadgeAsDivProps, BadgeProps, BadgeField, } from './types';
+export { Badge } from './badge';

package/common/components/badge/index.js

@@ -1,83 +1,6 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = void 0;
-const react_1 = __importStar(require("react"));
-const timer_1 = require("@sima-land/ui-nucleons/timer");
-const bind_1 = __importDefault(require("classnames/bind"));
-const badge_module_scss_1 = __importDefault(require("./badge.module.scss"));
-const cx = bind_1.default.bind(badge_module_scss_1.default);
-/**
- * Шильдик.
- * @param props Свойства.
- * @return Элемент.
- */
-exports.Badge = (0, react_1.forwardRef)(function Badge(_a, ref) {
-    var { className, color, fields, href, style, 'data-testid': testId = 'badge' } = _a, restProps = __rest(_a, ["className", "color", "fields", "href", "style", 'data-testid']);
-    const iconOnly = fields.length === 1 && fields[0].type === 'svg-url';
-    return (react_1.default.createElement("a", Object.assign({ ref: ref }, restProps, { "data-testid": testId, href: href, style: Object.assign(Object.assign({}, style), { '--badge-color': color }), className: cx('root', iconOnly && 'icon-only', href && 'interactive', className), children: iconOnly ? (react_1.default.createElement("img", { className: cx('icon'), src: fields[0].value, alt: '' })) : (
-        // вложенный span нужен для того чтобы объединить `display: inline-flex` и `text-overflow: ellipsis`
-        react_1.default.createElement("span", { className: cx('content') }, fields.reduce((acc, item, i) => {
-            let result = null;
-            // на данный момент сочетание иконки с другими элементами не предусмотрено макетами - игнорируем
-            switch (item.type) {
-                case 'text':
-                    result = item.value;
-                    break;
-                case 'timer':
-                    result = (react_1.default.createElement(timer_1.Timer, { key: i, date: item.value, timeout: 1000 * 60, format: formatDistance }));
-                    break;
-            }
-            acc.push(result);
-            i < fields.length - 1 && acc.push(' ');
-            return acc;
-        }, []))) })));
-});
-/**
- * Форматирует оставшееся время.
- * @param distance Оставшееся время.
- * @return Отформатированное время.
- */
-const formatDistance = ({ days, hours, minutes, }) => [toTimePart(days), ...[hours % 24, minutes % 60].map(toTimePart)].join(':');
-/**
- * Форматирует число добавляя нули при необходимости.
- * @param n Число.
- * @return Отформатированное число.
- */
-const toTimePart = (n) => `${n}`.padStart(2, '0');
+var badge_1 = require("./badge");
+Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return badge_1.Badge; } });
+//# sourceMappingURL=index.js.map

package/common/components/badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/badge/index.ts"],"names":[],"mappings":";;;AASA,iCAAgC;AAAvB,8FAAA,KAAK,OAAA"}

package/common/components/badge/types.d.ts

@@ -0,0 +1,40 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, CSSProperties, HTMLAttributes, Ref } from 'react';
+export interface BadgeField {
+    type: 'text' | 'timer' | 'svg-url';
+    value: string;
+}
+export interface BadgeStyle extends CSSProperties {
+    '--badge-color'?: string;
+    '--badge-text-color'?: string;
+    '--badge-border-color'?: string;
+}
+export interface BadgeSpecificProps {
+    /** Основной цвет, используется как цвет обводки, иконок и текста. */
+    color?: string;
+    /** Как применится цвет. */
+    coloring?: 'fill' | 'outline' | 'unset';
+    /** Содержимое шильдика. */
+    fields?: Array<BadgeField>;
+    /** Форма скруглений. */
+    shape?: 'round' | 'pill' | 'unset';
+    /** Нужен ли эффект при наведении. */
+    withHoverEffect?: boolean;
+    /** Стили. */
+    style?: BadgeStyle;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+    rootRef?: Ref<HTMLElement>;
+}
+export interface BadgeAsAnchorProps extends BadgeSpecificProps, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color' | 'style'> {
+    as?: 'anchor';
+}
+export interface BadgeAsButtonProps extends BadgeSpecificProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'style'> {
+    as: 'button';
+}
+export interface BadgeAsDivProps extends BadgeSpecificProps, Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'style'> {
+    as: 'div';
+}
+export interface BadgeAsSpanProps extends BadgeSpecificProps, Omit<HTMLAttributes<HTMLSpanElement>, 'color' | 'style'> {
+    as: 'span';
+}
+export type BadgeProps = BadgeAsAnchorProps | BadgeAsButtonProps | BadgeAsDivProps | BadgeAsSpanProps;

package/common/components/{intractive-image → badge}/types.js

@@ -1,2 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/common/components/badge/types.js.map

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

package/common/components/badge/utils.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import type { BadgeField } from './types';
+/**
+ * Если переданное значение является токеном цвета/градиента, вернёт CSS-значение с соответствующей CSS-переменной.
+ * Иначе вернет само значение.
+ * @param value Значение.
+ * @return Значение или undefined.
+ */
+export declare function tokenToCustomProperty(value: string | undefined): string | undefined;
+/**
+ * Сформирует содержимое шильдика на основе списка полей.
+ * Текстовые поля (type === text | timer) идущие подряд, будут объединены в один span.
+ * Между текстовыми полями в span будет вставлен 1 пробел.
+ * @param fields Поля.
+ * @return СОдержимое шильдика.
+ */
+export declare function renderFields(fields: BadgeField[]): ReactNode[];
+/**
+ * Форматирует оставшееся время.
+ * @param distance Оставшееся время.
+ * @return Отформатированное время.
+ */
+export declare function formatDistance({ days, hours, minutes, }: {
+    days: number;
+    hours: number;
+    minutes: number;
+}): string;
+/**
+ * Форматирует число добавляя нули при необходимости.
+ * @param n Число.
+ * @return Отформатированное число.
+ */
+export declare function toTimePart(n: number): string;

package/common/components/badge/utils.js

@@ -0,0 +1,112 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tokenToCustomProperty = tokenToCustomProperty;
+exports.renderFields = renderFields;
+exports.formatDistance = formatDistance;
+exports.toTimePart = toTimePart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("@sima-land/ui-nucleons/colors");
+const gradients_1 = require("@sima-land/ui-nucleons/gradients");
+const timer_1 = require("@sima-land/ui-nucleons/timer");
+const badge_m_scss_1 = __importDefault(require("./badge.m.scss"));
+/**
+ * Если переданное значение является токеном цвета/градиента, вернёт CSS-значение с соответствующей CSS-переменной.
+ * Иначе вернет само значение.
+ * @param value Значение.
+ * @return Значение или undefined.
+ */
+function tokenToCustomProperty(value) {
+    if (typeof value !== 'string') {
+        return value;
+    }
+    if (value.startsWith('color/')) {
+        const colorName = value.replace('color/', '');
+        if (!colors_1.COLORS.has(colorName)) {
+            return value;
+        }
+        return `var(--color-${colorName})`;
+    }
+    if (value.startsWith('gradient/')) {
+        const gradientName = value.replace('gradient/', '');
+        if (!gradients_1.GRADIENTS.has(gradientName)) {
+            return value;
+        }
+        return `var(--gradient-${gradientName})`;
+    }
+    return value;
+}
+/**
+ * Сформирует содержимое шильдика на основе списка полей.
+ * Текстовые поля (type === text | timer) идущие подряд, будут объединены в один span.
+ * Между текстовыми полями в span будет вставлен 1 пробел.
+ * @param fields Поля.
+ * @return СОдержимое шильдика.
+ */
+function renderFields(fields) {
+    const result = [];
+    let item = null;
+    for (const field of fields) {
+        if (!item) {
+            switch (field.type) {
+                case 'text': {
+                    item = [field.value];
+                    break;
+                }
+                case 'timer': {
+                    item = [(0, jsx_runtime_1.jsx)(timer_1.Timer, { date: field.value, timeout: 1000 * 60, format: formatDistance }, 0)];
+                    break;
+                }
+                case 'svg-url': {
+                    result.push((0, jsx_runtime_1.jsx)("img", { className: badge_m_scss_1.default.icon, src: field.value, alt: '' }, result.length));
+                    break;
+                }
+            }
+        }
+        else {
+            switch (field.type) {
+                case 'text': {
+                    item.push(' ');
+                    item.push(field.value);
+                    break;
+                }
+                case 'timer': {
+                    item.push(' ');
+                    item.push((0, jsx_runtime_1.jsx)(timer_1.Timer, { date: field.value, timeout: 1000 * 60, format: formatDistance }, item.length));
+                    break;
+                }
+                case 'svg-url': {
+                    // вложенный span нужен для того чтобы объединить `display: inline-flex` и `text-overflow: ellipsis`
+                    result.push((0, jsx_runtime_1.jsx)("span", { className: badge_m_scss_1.default.content, children: item }, result.length));
+                    item = null;
+                    result.push((0, jsx_runtime_1.jsx)("img", { className: badge_m_scss_1.default.icon, src: field.value, alt: '' }, result.length));
+                    break;
+                }
+            }
+        }
+    }
+    if (item) {
+        result.push((0, jsx_runtime_1.jsx)("span", { className: badge_m_scss_1.default.content, children: item }, result.length));
+        item = null;
+    }
+    return result;
+}
+/**
+ * Форматирует оставшееся время.
+ * @param distance Оставшееся время.
+ * @return Отформатированное время.
+ */
+function formatDistance({ days, hours, minutes, }) {
+    return `${toTimePart(days)}:${toTimePart(hours % 24)}:${toTimePart(minutes % 60)}`;
+}
+/**
+ * Форматирует число добавляя нули при необходимости.
+ * @param n Число.
+ * @return Отформатированное число.
+ */
+function toTimePart(n) {
+    return `${n}`.padStart(2, '0');
+}
+//# sourceMappingURL=utils.js.map

package/common/components/badge/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/common/components/badge/utils.tsx"],"names":[],"mappings":"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"}

package/common/components/badge-list/badge-list.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode, CSSProperties } from 'react';
+export interface BadgeListProps {
+    /** Список данных для шильдиков. */
+    children?: ReactNode;
+    /** CSS-класс корневого элемента. */
+    className?: string;
+    /** Стили корневого элемента. */
+    style?: CSSProperties;
+    /** Лимит количества строк, не влезающие шильдики будут скрыты. */
+    lineLimit?: number;
+}
+/**
+ * Компонент списка шильдиков. Формирует отступы между шильдиками и переносы по дизайн-найдам.
+ * @param props Свойства компонента.
+ * @return Элемент.
+ */
+export declare const BadgeList: {
+    ({ children, className, lineLimit, style }: BadgeListProps): import("react/jsx-runtime").JSX.Element;
+    Slot: typeof BadgeListSlot;
+};
+/**
+ * Слот для вывода Badge с произвольной оберткой.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+declare function BadgeListSlot({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/common/components/badge-list/badge-list.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BadgeList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const badge_1 = require("../badge");
+const bind_1 = __importDefault(require("classnames/bind"));
+const badge_list_m_scss_1 = __importDefault(require("./badge-list.m.scss"));
+const cx = bind_1.default.bind(badge_list_m_scss_1.default);
+/**
+ * Компонент списка шильдиков. Формирует отступы между шильдиками и переносы по дизайн-найдам.
+ * @param props Свойства компонента.
+ * @return Элемент.
+ */
+const BadgeList = ({ children, className, lineLimit, style }) => ((0, jsx_runtime_1.jsx)("div", { className: cx('root', className, lineLimit && 'line-limit'), style: lineLimit ? { ...style, '--line-limit': lineLimit } : style, children: react_1.Children.toArray(children).map((child, index) => {
+        switch (true) {
+            case (0, react_1.isValidElement)(child) && child.type === badge_1.Badge:
+                return (0, jsx_runtime_1.jsx)(BadgeListSlot, { children: child }, index);
+            case (0, react_1.isValidElement)(child) && child.type === BadgeListSlot:
+                return child;
+            default:
+                return null;
+        }
+    }) }));
+exports.BadgeList = BadgeList;
+/**
+ * Слот для вывода Badge с произвольной оберткой.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function BadgeListSlot({ children }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: cx('item'), children: children });
+}
+exports.BadgeList.Slot = BadgeListSlot;
+//# sourceMappingURL=badge-list.js.map

package/common/components/badge-list/badge-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-list.js","sourceRoot":"","sources":["../../../../src/common/components/badge-list/badge-list.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAA2E;AAC3E,oCAAiC;AACjC,2DAAyC;AACzC,4EAAyC;AAgBzC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,2BAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACI,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAkB,EAAE,EAAE,CAAC,CACtF,gCACE,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,IAAI,YAAY,CAAC,EAC3D,KAAK,EAAE,SAAS,CAAC,CAAC,CAAE,EAAE,GAAG,KAAK,EAAE,cAAc,EAAE,SAAS,EAAoB,CAAC,CAAC,CAAC,KAAK,YAEpF,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QAC/C,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,IAAA,sBAAc,EAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,aAAK;gBAChD,OAAO,uBAAC,aAAa,cAAc,KAAK,IAAb,KAAK,CAAyB,CAAC;YAC5D,KAAK,IAAA,sBAAc,EAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,aAAa;gBACxD,OAAO,KAAK,CAAC;YACf;gBACE,OAAO,IAAI,CAAC;QAChB,CAAC;IACH,CAAC,CAAC,GACE,CACP,CAAC;AAhBW,QAAA,SAAS,aAgBpB;AAEF;;;;GAIG;AACH,SAAS,aAAa,CAAC,EAAE,QAAQ,EAA4B;IAC3D,OAAO,gCAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,YAAG,QAAQ,GAAO,CAAC;AACtD,CAAC;AAED,iBAAS,CAAC,IAAI,GAAG,aAAa,CAAC"}

package/common/components/badge-list/index.d.ts

@@ -1,29 +1 @@
-import React, { ReactNode } from 'react';
-export interface BadgeListProps {
-    /** Список данных для шильдиков. */
-    children?: React.ReactNode;
-    /** CSS-класс корневого элемента. */
-    className?: string;
-    /** Стили корневого элемента. */
-    style?: React.CSSProperties;
-    /** Лимит количества строк, не влезающие шильдики будут скрыты. */
-    lineLimit?: number;
-}
-/**
- * Компонент списка шильдиков. Формирует отступы между шильдиками и переносы по дизайн-найдам.
- * @param props Свойства компонента.
- * @return Элемент.
- */
-export declare const BadgeList: {
-    ({ children, className, lineLimit, style }: BadgeListProps): JSX.Element;
-    Slot: typeof BadgeListSlot;
-};
-/**
- * Слот для вывода Badge с произвольной оберткой.
- * @param props Свойства.
- * @return Элемент.
- */
-declare function BadgeListSlot({ children }: {
-    children?: ReactNode;
-}): JSX.Element;
-export {};
+export { type BadgeListProps, BadgeList } from './badge-list';