bord-design-system 0.0.32 → 0.0.33
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.
- package/dist/components/BordCommentInput/BordCommentInput.d.ts.map +1 -1
- package/dist/components/BordCommentInput/components/CommentMentionChip/CommentMentionChip.d.ts +1 -1
- package/dist/components/BordCommentInput/components/CommentMentionChip/CommentMentionChip.d.ts.map +1 -1
- package/dist/components/BordCommentsPanel/BordCommentsPanel.d.ts +1 -1
- package/dist/components/BordCommentsPanel/BordCommentsPanel.d.ts.map +1 -1
- package/dist/components/BordOneToneIcon/BordOneToneIcon.d.ts +1 -1
- package/dist/components/BordOneToneIcon/BordOneToneIcon.d.ts.map +1 -1
- package/dist/components/BordSelect/BordSelect.d.ts.map +1 -1
- package/dist/components/BordSelect/BordSelect.types.d.ts +1 -0
- package/dist/components/BordSelect/BordSelect.types.d.ts.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.esm.js +59 -52
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +59 -52
- package/dist/index.js.map +1 -1
- package/dist/index.webpack.js +59 -52
- package/dist/index.webpack.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BordCommentInput.d.ts","sourceRoot":"","sources":["../../../src/components/BordCommentInput/BordCommentInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"BordCommentInput.d.ts","sourceRoot":"","sources":["../../../src/components/BordCommentInput/BordCommentInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,EAAE,EAKR,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EACV,sBAAsB,EAGvB,MAAM,0BAA0B,CAAC;AAElC,OAAO,yBAAyB,CAAC;AAYjC;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,sBAAsB,CAmPhD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
package/dist/components/BordCommentInput/components/CommentMentionChip/CommentMentionChip.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommentMentionChip.d.ts","sourceRoot":"","sources":["../../../../../src/components/BordCommentInput/components/CommentMentionChip/CommentMentionChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"CommentMentionChip.d.ts","sourceRoot":"","sources":["../../../../../src/components/BordCommentInput/components/CommentMentionChip/CommentMentionChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAK5C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAE3E,OAAO,2BAA2B,CAAC;AAEnC,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,wBAAwB,CAcpD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BordCommentsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/BordCommentsPanel/BordCommentsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"BordCommentsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/BordCommentsPanel/BordCommentsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAQhC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAEzE,OAAO,0BAA0B,CAAC;AAElC;;;GAGG;AACH,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,uBAAuB,CA0ElD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -4,7 +4,7 @@ declare const BordOneToneIcon: ({ variant, standardSize, customWidth, style, cus
|
|
|
4
4
|
export default BordOneToneIcon;
|
|
5
5
|
export interface IbordOneToneIconProps extends ComponentProps<'svg'> {
|
|
6
6
|
variant: TbordOneToneIcon;
|
|
7
|
-
standardSize?: 12 | 14 | 16 | 18 | 20 | 24 | 32;
|
|
7
|
+
standardSize?: 10 | 12 | 14 | 16 | 18 | 20 | 24 | 32;
|
|
8
8
|
customWidth?: string;
|
|
9
9
|
customClassName?: string;
|
|
10
10
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BordOneToneIcon.d.ts","sourceRoot":"","sources":["../../../src/components/BordOneToneIcon/BordOneToneIcon.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAG3D,QAAA,MAAM,eAAe,4EAOlB,qBAAqB,4CAcvB,CAAC;AAEF,eAAe,eAAe,CAAC;AAE/B,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAClE,OAAO,EAAE,gBAAgB,CAAC;IAC1B,YAAY,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"BordOneToneIcon.d.ts","sourceRoot":"","sources":["../../../src/components/BordOneToneIcon/BordOneToneIcon.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAG3D,QAAA,MAAM,eAAe,4EAOlB,qBAAqB,4CAcvB,CAAC;AAEF,eAAe,eAAe,CAAC;AAE/B,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAClE,OAAO,EAAE,gBAAgB,CAAC;IAC1B,YAAY,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BordSelect.d.ts","sourceRoot":"","sources":["../../../src/components/BordSelect/BordSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAA6B,MAAM,OAAO,CAAC;AAQ3D,OAAO,KAAK,EAAyB,gBAAgB,EAA0B,MAAM,oBAAoB,CAAC;AAM1G,OAAO,mBAAmB,CAAC;AAQ3B,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,gBAAgB,
|
|
1
|
+
{"version":3,"file":"BordSelect.d.ts","sourceRoot":"","sources":["../../../src/components/BordSelect/BordSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAA6B,MAAM,OAAO,CAAC;AAQ3D,OAAO,KAAK,EAAyB,gBAAgB,EAA0B,MAAM,oBAAoB,CAAC;AAM1G,OAAO,mBAAmB,CAAC;AAQ3B,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,gBAAgB,CAuSpC,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -8,6 +8,7 @@ export type TBordSelectOption = {
|
|
|
8
8
|
labelPrefix?: ReactNode;
|
|
9
9
|
labelSuffix?: ReactNode;
|
|
10
10
|
triggerAccent?: TBordSelectTriggerAccent;
|
|
11
|
+
disabled?: boolean;
|
|
11
12
|
};
|
|
12
13
|
export type TBordSelectTriggerVariant = 'default' | 'bare' | 'gradient' | 'search';
|
|
13
14
|
export type TBordSelectIndicatorPlacement = 'start' | 'end' | 'none';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BordSelect.types.d.ts","sourceRoot":"","sources":["../../../src/components/BordSelect/BordSelect.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,wBAAwB,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEvF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"BordSelect.types.d.ts","sourceRoot":"","sources":["../../../src/components/BordSelect/BordSelect.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,wBAAwB,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEvF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,wBAAwB,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;AACnF,MAAM,MAAM,6BAA6B,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AACrE,MAAM,MAAM,wBAAwB,GAAG,OAAO,GAAG,KAAK,CAAC;AACvD,MAAM,MAAM,uBAAuB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AAChE,MAAM,MAAM,2BAA2B,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;AAErE,KAAK,sBAAsB,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpC,aAAa,CAAC,EAAE,wBAAwB,CAAC;IACzC,YAAY,CAAC,EAAE,uBAAuB,CAAC;IACvC,cAAc,CAAC,EAAE,yBAAyB,CAAC;IAC3C,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,6BAA6B,CAAC;IACnD,gBAAgB,CAAC,EAAE,2BAA2B,CAAC;IAC/C,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1D,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,SAAS,CAAC;CACrD,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,sBAAsB,GAAG;IAC5D,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,sBAAsB,GAAG;IAC3D,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,EAAE,MAAM,EAAE,CAAC;IAEhB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACrC,CAAC;AACF,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,GAAG,qBAAqB,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -326,7 +326,7 @@ declare const BordOneToneIcon: ({ variant, standardSize, customWidth, style, cus
|
|
|
326
326
|
|
|
327
327
|
interface IbordOneToneIconProps extends ComponentProps<'svg'> {
|
|
328
328
|
variant: TbordOneToneIcon;
|
|
329
|
-
standardSize?: 12 | 14 | 16 | 18 | 20 | 24 | 32;
|
|
329
|
+
standardSize?: 10 | 12 | 14 | 16 | 18 | 20 | 24 | 32;
|
|
330
330
|
customWidth?: string;
|
|
331
331
|
customClassName?: string;
|
|
332
332
|
}
|
|
@@ -1642,6 +1642,7 @@ type TBordSelectOption = {
|
|
|
1642
1642
|
labelPrefix?: ReactNode;
|
|
1643
1643
|
labelSuffix?: ReactNode;
|
|
1644
1644
|
triggerAccent?: TBordSelectTriggerAccent;
|
|
1645
|
+
disabled?: boolean;
|
|
1645
1646
|
};
|
|
1646
1647
|
type TBordSelectTriggerVariant = 'default' | 'bare' | 'gradient' | 'search';
|
|
1647
1648
|
type TBordSelectIndicatorPlacement = 'start' | 'end' | 'none';
|
package/dist/index.esm.js
CHANGED
|
@@ -11059,61 +11059,40 @@ const BordComment = ({ authorName, authorType = 'customer', authorPhotoUrl, mess
|
|
|
11059
11059
|
return (jsx("div", { className: rootClassName, style: style, children: jsxs("div", { className: "bordCommentContent", children: [jsxs("div", { className: "bordCommentAuthor", children: [getAuthorAvatar(), jsx("p", { className: "bordCommentAuthorName", children: authorName })] }), !!mentions?.length && (jsx("div", { className: "bordCommentMentions", children: mentions?.map(({ uid, username }) => (jsxs("p", { className: "bordCommentMention", children: ["@", username] }, uid))) })), jsx("p", { className: "bordCommentMessage", children: message }), !!imageUrl && (jsxs("div", { className: "bordCommentImage", children: [jsx("img", { src: imageUrl, alt: imageDownloadLabel }), jsxs("a", { href: imageUrl, download: true, target: "_blank", rel: "noreferrer", onClick: onDownloadImage, children: [imageDownloadLabel, jsx(BordOneToneIcon, { variant: "download", standardSize: 12 })] })] })), jsxs("div", { className: "bordCommentTimestamp", children: [jsxs("div", { className: "bordCommentDate", children: [jsx("p", { children: dateLabel }), jsx("p", { children: timeLabel })] }), !!timezoneLabel && jsx("p", { children: timezoneLabel })] })] }) }));
|
|
11060
11060
|
};
|
|
11061
11061
|
|
|
11062
|
-
var css_248z$1e = ".bordCommentBubbleDS{align-items:center;background-color:var(--ds-c-bool-info-fg);border-radius:15998.4rem;border-style:none;box-shadow:.6rem .8rem .6rem rgba(0,0,0,.08);cursor:pointer;display:flex;flex-shrink:0;gap:.8rem;height:4.8rem;justify-content:center;padding:.8rem;position:relative;width:4.8rem}.bordCommentBubbleDS svg path{stroke:#fff}.bordCommentBubbleDS:disabled{background-color:var(--ds-c-bool-disabled-bg);cursor:not-allowed}.bordCommentBubbleDS:disabled svg path{stroke:var(--ds-c-bool-disabled-fg)}.bordCommentBubbleDS .bordCommentBubbleBadge{--tw-text-opacity:1;align-items:center;background-color:var(--ds-c-bool-danger-fg);border-radius:15998.4rem;color:rgb(255 255 255/var(--tw-text-opacity));display:flex;font-size:1rem;height:2rem;justify-content:center;left:3.4rem;line-height:1.3rem;padding:.4rem;position:absolute;text-align:center;top:-.2rem;width:2rem}";
|
|
11062
|
+
var css_248z$1e = ".bordCommentBubbleDS{align-items:center;background-color:var(--ds-c-bool-info-fg);border-radius:15998.4rem;border-style:none;box-shadow:.6rem .8rem .6rem rgba(0,0,0,.08);cursor:pointer;display:flex;flex-shrink:0;gap:.8rem;height:4.8rem;justify-content:center;padding:.8rem;position:relative;width:4.8rem}.bordCommentBubbleDS svg path{stroke:#fff}.bordCommentBubbleDS:disabled{background-color:var(--ds-c-bool-disabled-bg);cursor:not-allowed}.bordCommentBubbleDS:disabled svg path{stroke:var(--ds-c-bool-disabled-fg)}.bordCommentBubbleDS .bordCommentBubbleBadge{--tw-text-opacity:1;align-items:center;background-color:var(--ds-c-bool-danger-fg);border-radius:15998.4rem;color:rgb(255 255 255/var(--tw-text-opacity));display:flex;font-size:1rem;height:2rem;justify-content:center;left:3.4rem;line-height:1.3rem;padding:.4rem;position:absolute;text-align:center;top:-.2rem;width:2rem}.bordCommentBubbleDS .bordCommentBubbleIcon svg path{fill:#fff}";
|
|
11063
11063
|
styleInject(css_248z$1e);
|
|
11064
11064
|
|
|
11065
11065
|
const BordCommentBubble = ({ unreadCount = 0, maxUnreadCount = 99, customClassName = '', type = 'button', ...restProps }) => {
|
|
11066
11066
|
const hasUnreadComments = unreadCount > 0;
|
|
11067
11067
|
const unreadLabel = unreadCount > maxUnreadCount ? `${maxUnreadCount}+` : `${unreadCount}`;
|
|
11068
|
-
return (jsxs("button", { className: `bordCommentBubbleDS ${customClassName}`, type: type, "aria-label": hasUnreadComments ? `Comentarios, ${unreadLabel} sin leer` : 'Comentarios', ...restProps, children: [jsx(BordOneToneIcon, { variant: "messageCircle", standardSize: 24 }), hasUnreadComments && jsx("span", { className: "bordCommentBubbleBadge", children: unreadLabel })] }));
|
|
11068
|
+
return (jsxs("button", { className: `bordCommentBubbleDS ${customClassName}`, type: type, "aria-label": hasUnreadComments ? `Comentarios, ${unreadLabel} sin leer` : 'Comentarios', ...restProps, children: [jsx(BordOneToneIcon, { variant: "messageCircle", standardSize: 24, customClassName: 'bordCommentBubbleIcon' }), hasUnreadComments && jsx("span", { className: "bordCommentBubbleBadge", children: unreadLabel })] }));
|
|
11069
11069
|
};
|
|
11070
11070
|
|
|
11071
|
-
var css_248z$1d = ".
|
|
11071
|
+
var css_248z$1d = ".commentMentionableUser{align-items:center;background-color:transparent;border-radius:.4rem;border-style:none;cursor:pointer;display:flex;gap:.8rem;padding:.4rem;text-align:left;width:100%}.commentMentionableUser:hover{background-color:var(--ds-c-layout-bg)}.commentMentionableUser .commentMentionableUserInfo{display:flex;flex-direction:column;min-width:0}.commentMentionableUser .commentMentionableUserName{color:var(--ds-c-content-default);font-size:1.2rem;line-height:1.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.commentMentionableUser .commentMentionableUserEmail{color:var(--ds-c-content-secondary);font-size:1rem;line-height:1.3rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
|
|
11072
11072
|
styleInject(css_248z$1d);
|
|
11073
11073
|
|
|
11074
|
-
const DEFAULT_SIZE = '4rem';
|
|
11075
|
-
const DEFAULT_TICK_COUNT = 6;
|
|
11076
|
-
const DEFAULT_ARIA_LABEL = 'Cargando';
|
|
11077
|
-
/**
|
|
11078
|
-
* Spinner circular de rayas radiales animadas con CSS.
|
|
11079
|
-
* Indicador visual de carga; tamaño, color y cantidad de rayas configurables.
|
|
11080
|
-
*/
|
|
11081
|
-
const BordTickSpinner = ({ size = DEFAULT_SIZE, color, tickCount = DEFAULT_TICK_COUNT, className = '', ariaLabel = DEFAULT_ARIA_LABEL, }) => {
|
|
11082
|
-
const rootClassName = ['bordTickSpinnerDS', className].filter(Boolean).join(' ');
|
|
11083
|
-
const style = {
|
|
11084
|
-
'--bord-tick-spinner-size': size,
|
|
11085
|
-
'--bord-tick-spinner-count': tickCount,
|
|
11086
|
-
...(color ? { '--bord-tick-spinner-color': color } : {}),
|
|
11087
|
-
};
|
|
11088
|
-
return (jsx("div", { className: rootClassName, role: "status", "aria-label": ariaLabel, style: style, children: Array.from({ length: tickCount }).map((_, i) => (jsx("span", { className: "bordTickSpinnerDStick", style: {
|
|
11089
|
-
'--bord-tick-spinner-index': i,
|
|
11090
|
-
} }, i))) }));
|
|
11091
|
-
};
|
|
11092
|
-
|
|
11093
|
-
var css_248z$1c = ".commentMentionableUser{align-items:center;background-color:transparent;border-radius:.4rem;border-style:none;cursor:pointer;display:flex;gap:.8rem;padding:.4rem;text-align:left;width:100%}.commentMentionableUser:hover{background-color:var(--ds-c-layout-bg)}.commentMentionableUser .commentMentionableUserInfo{display:flex;flex-direction:column;min-width:0}.commentMentionableUser .commentMentionableUserName{color:var(--ds-c-content-default);font-size:1.2rem;line-height:1.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.commentMentionableUser .commentMentionableUserEmail{color:var(--ds-c-content-secondary);font-size:1rem;line-height:1.3rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
|
|
11094
|
-
styleInject(css_248z$1c);
|
|
11095
|
-
|
|
11096
11074
|
const CommentMentionableUser = ({ user, onSelect }) => {
|
|
11097
11075
|
return (jsxs("button", { className: "commentMentionableUser", type: "button", onClick: () => onSelect(user), children: [jsx(BordPhoto, { url: user?.photoUrl, size: "s20", variant: "circle", avatarProps: { variant: 'circularBordMascot', customWidth: '2rem' } }), jsxs("span", { className: "commentMentionableUserInfo", children: [jsx("span", { className: "commentMentionableUserName", children: user?.name }), jsx("span", { className: "commentMentionableUserEmail", children: user?.email })] })] }));
|
|
11098
11076
|
};
|
|
11099
11077
|
|
|
11100
|
-
var css_248z$
|
|
11101
|
-
styleInject(css_248z$
|
|
11078
|
+
var css_248z$1c = ".commentMentionableUsersList{background-color:var(--ds-c-layout-l1);border-color:var(--ds-c-stroke-default);border-radius:.6rem;border-style:solid;border-width:1px;bottom:calc(100% + .4rem);box-shadow:0 .5rem .8rem rgba(0,0,0,.15);display:flex;flex-direction:column;gap:.4rem;left:0;max-height:18rem;overflow-y:auto;padding:.8rem;position:absolute;right:0;z-index:10}.commentMentionableUsersList::-webkit-scrollbar{height:.2rem;width:.2rem}.commentMentionableUsersList::-webkit-scrollbar-thumb{--tw-bg-opacity:1;background-color:rgb(34 207 171/var(--tw-bg-opacity));border-radius:.4rem;border-width:4px}.commentMentionableUsersList::-webkit-scrollbar-track{background-color:var(--ds-c-layout-l2);border-color:var(--ds-c-stroke-default);border-width:4px}.commentMentionableUsersList .commentMentionableUsersListEmpty,.commentMentionableUsersList .commentMentionableUsersListSearch{color:var(--ds-c-content-secondary);font-size:1rem;line-height:1.3rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
|
|
11079
|
+
styleInject(css_248z$1c);
|
|
11102
11080
|
|
|
11103
11081
|
const CommentMentionableUsersList = ({ users, search, searchLabel, emptyLabel, onSelectUser, }) => {
|
|
11104
11082
|
return (jsxs("div", { className: "commentMentionableUsersList", children: [!!search && (jsxs("p", { className: "commentMentionableUsersListSearch", children: [searchLabel, " ", search] })), !users?.length && jsx("p", { className: "commentMentionableUsersListEmpty", children: emptyLabel }), users?.map((user) => (jsx(CommentMentionableUser, { user: user, onSelect: onSelectUser }, user?.uid)))] }));
|
|
11105
11083
|
};
|
|
11106
11084
|
|
|
11107
|
-
var css_248z$
|
|
11108
|
-
styleInject(css_248z$
|
|
11085
|
+
var css_248z$1b = ".commentMentionChip{align-items:center;color:var(--ds-c-bool-info-fg);display:flex;font-size:1rem;gap:.2rem;line-height:1.3rem}.commentMentionChip.blocked{cursor:not-allowed}.commentMentionChip button{align-items:center;background-color:transparent;border-style:none;cursor:pointer;display:flex;padding:0}";
|
|
11086
|
+
styleInject(css_248z$1b);
|
|
11109
11087
|
|
|
11110
11088
|
const CommentMentionChip = ({ email, onRemove }) => {
|
|
11089
|
+
const bord = useContext(ThemeContext);
|
|
11111
11090
|
const chipClassName = ['commentMentionChip', !onRemove && 'blocked'].filter(Boolean).join(' ');
|
|
11112
|
-
return (jsxs("span", { className: chipClassName, children: ["@", email, !!onRemove && (jsx("button", { type: "button", onClick: onRemove, "aria-label": `Quitar la mención a ${email}`, children: jsx(BordOneToneIcon, { variant: "
|
|
11091
|
+
return (jsxs("span", { className: chipClassName, children: ["@", email, !!onRemove && (jsx("button", { type: "button", onClick: onRemove, "aria-label": `Quitar la mención a ${email}`, children: jsx(BordOneToneIcon, { variant: "xSquare", standardSize: 10, stroke: bord.theme.content.secondary }) }))] }));
|
|
11113
11092
|
};
|
|
11114
11093
|
|
|
11115
|
-
var css_248z$
|
|
11116
|
-
styleInject(css_248z$
|
|
11094
|
+
var css_248z$1a = ".commentMentionChips{align-items:center;-moz-column-gap:1.2rem;column-gap:1.2rem;display:flex;flex-wrap:wrap;width:100%}";
|
|
11095
|
+
styleInject(css_248z$1a);
|
|
11117
11096
|
|
|
11118
11097
|
const CommentMentionChips = ({ mentions, isDisabled = false, onRemoveMention }) => {
|
|
11119
11098
|
return (jsx("div", { className: "commentMentionChips", children: mentions?.map(({ uid, email, isRemovable = true }) => {
|
|
@@ -11122,11 +11101,12 @@ const CommentMentionChips = ({ mentions, isDisabled = false, onRemoveMention })
|
|
|
11122
11101
|
}) }));
|
|
11123
11102
|
};
|
|
11124
11103
|
|
|
11125
|
-
var css_248z$
|
|
11126
|
-
styleInject(css_248z$
|
|
11104
|
+
var css_248z$19 = ".bordCommentInputDS{display:flex;flex-direction:column;gap:.4rem;width:100%}.bordCommentInputDS .bordCommentInputRow{align-items:flex-end;display:flex;gap:.4rem;width:100%}.bordCommentInputDS .bordCommentInputField{background-color:var(--ds-c-layout-bg);border-color:var(--ds-c-stroke-interactive);border-radius:.6rem;border-style:solid;border-width:1px;display:flex;flex:1 1 0%;flex-direction:column;gap:.8rem;min-height:3.6rem;min-width:0;padding:.8rem 1.6rem;position:relative}.bordCommentInputDS .bordCommentInputField .separator{background-color:var(--ds-c-stroke-default)}.bordCommentInputDS .bordCommentInputFile{display:none}.bordCommentInputDS .bordCommentInputContent{align-items:center;display:flex;gap:.8rem;width:100%}.bordCommentInputDS .bordCommentInputAttachWrapper{align-items:center;display:flex;flex-shrink:0;position:relative}.bordCommentInputDS .bordCommentInputAttach{align-items:center;background-color:transparent;border-style:none;cursor:pointer;display:flex;flex-shrink:0;padding:0}.bordCommentInputDS .bordCommentInputAttach svg{transition-duration:.2s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bordCommentInputDS .bordCommentInputAttach svg path{stroke:var(--ds-c-bool-disabled-sec-fg)}.bordCommentInputDS .bordCommentInputAttach.open svg{transform:rotate(45deg)}.bordCommentInputDS .bordCommentInputAttach:disabled{cursor:default}.bordCommentInputDS .bordCommentInputAttachTooltip{align-items:center;background-color:var(--ds-c-layout-l1);border-radius:.6rem;border-style:none;bottom:calc(100% + .8rem);box-shadow:0 .2rem .8rem rgba(0,0,0,.12);color:var(--ds-c-content-default);cursor:pointer;display:flex;font-size:1rem;gap:.4rem;left:0;line-height:1.3rem;padding:.8rem;position:absolute;white-space:nowrap;z-index:10}.bordCommentInputDS .bordCommentInputAttachTooltip svg path{stroke:var(--ds-c-content-default)}.bordCommentInputDS .bordCommentInputImage{border-color:var(--ds-c-stroke-interactive);border-radius:.4rem;border-style:solid;border-width:1px;flex-shrink:0;height:2.4rem;overflow:hidden;position:relative;width:2.4rem}.bordCommentInputDS .bordCommentInputImage img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.bordCommentInputDS .bordCommentInputImage button{align-items:center;background-color:rgba(0,0,0,.4);border-style:none;cursor:pointer;display:flex;justify-content:center;padding:0;position:absolute;right:0;top:0}.bordCommentInputDS .bordCommentInputImage button svg path{stroke:#fff}.bordCommentInputDS .bordCommentInputTextarea{background-color:transparent;color:var(--ds-c-content-default);flex:1 1 0%;font-size:1.4rem;line-height:1.8rem;max-height:13.6rem;min-height:0;min-width:0;padding:0;resize:none}.bordCommentInputDS .bordCommentInputTextarea::-webkit-scrollbar{height:.2rem;width:.2rem}.bordCommentInputDS .bordCommentInputTextarea::-webkit-scrollbar-thumb{--tw-bg-opacity:1;background-color:rgb(34 207 171/var(--tw-bg-opacity));border-radius:.4rem;border-width:4px}.bordCommentInputDS .bordCommentInputTextarea::-webkit-scrollbar-track{background-color:var(--ds-c-layout-l2);border-color:var(--ds-c-stroke-default);border-width:4px}.bordCommentInputDS .bordCommentInputTextarea::-moz-placeholder{color:var(--ds-c-bool-disabled-sec-fg)}.bordCommentInputDS .bordCommentInputTextarea::placeholder{color:var(--ds-c-bool-disabled-sec-fg)}.bordCommentInputDS .bordCommentInputTextarea:focus-visible{outline:2px solid transparent;outline-offset:2px}.bordCommentInputDS .bordButtonSkeletonLoader,.bordCommentInputDS .bordCommentInputSubmit{border-radius:.8rem;flex-shrink:0;height:3.6rem;min-width:6.4rem}.bordCommentInputDS .bordButtonSkeletonLoader .textContainer,.bordCommentInputDS .bordCommentInputSubmit .textContainer{font-size:1.2rem;line-height:1.6rem}.bordCommentInputDS .bordButtonSkeletonLoader .bordTickSpinnerDS,.bordCommentInputDS .bordCommentInputSubmit .bordTickSpinnerDS{--bord-tick-spinner-color:currentColor}.bordCommentInputDS .bordCommentInputError{color:var(--ds-c-bool-danger-fg);font-size:1rem;line-height:1.3rem}.bordCommentInputDS:not(.disabled):not(.error) .bordCommentInputField:not(:focus-within):hover{border-color:var(--ds-c-content-default)}.bordCommentInputDS:not(.disabled):not(.error) .bordCommentInputField:focus-within{border-color:var(--ds-c-primary-bg-default)}.bordCommentInputDS.error .bordCommentInputField{border-color:var(--ds-c-bool-danger-fg)}.bordCommentInputDS.error .bordCommentInputField .bordCommentInputTextarea::-moz-placeholder{color:var(--ds-c-bool-danger-fg)}.bordCommentInputDS.error .bordCommentInputField .bordCommentInputTextarea,.bordCommentInputDS.error .bordCommentInputField .bordCommentInputTextarea::placeholder{color:var(--ds-c-bool-danger-fg)}.bordCommentInputDS.error .bordCommentInputField .bordCommentInputAttach svg path{stroke:var(--ds-c-bool-danger-fg)}.bordCommentInputDS.disabled .bordCommentInputField{background-color:var(--ds-c-bool-disabled-sec-bg);border-color:var(--ds-c-bool-disabled-sec-fg);cursor:not-allowed}.bordCommentInputDS.disabled .bordCommentInputField .bordCommentInputTextarea{color:var(--ds-c-bool-disabled-sec-fg);cursor:not-allowed}.bordCommentInputDS.disabled .bordCommentInputField .commentMentionChip{color:var(--ds-c-bool-disabled-sec-fg)}";
|
|
11105
|
+
styleInject(css_248z$19);
|
|
11127
11106
|
|
|
11128
11107
|
const MAX_TEXTAREA_HEIGHT = 136;
|
|
11129
11108
|
const ATTACH_IMAGE_LABEL = 'Adjuntar una imagen';
|
|
11109
|
+
const UPLOAD_IMAGE_LABEL = 'Cargar imagen';
|
|
11130
11110
|
const IMAGE_PREVIEW_LABEL = 'Imagen adjunta al comentario';
|
|
11131
11111
|
const REMOVE_IMAGE_LABEL = 'Quitar la imagen adjunta';
|
|
11132
11112
|
// Fuera del componente para que el valor por defecto no sea un arreglo nuevo en cada render
|
|
@@ -11137,9 +11117,10 @@ const EMPTY_SELECTED_MENTIONS = [];
|
|
|
11137
11117
|
* menciones con `@`, adjunto de imagen por botón o pegado, y botón de envío.
|
|
11138
11118
|
* No valida el archivo ni construye la vista previa: ambos quedan a cargo del consumidor.
|
|
11139
11119
|
*/
|
|
11140
|
-
const BordCommentInput = ({ value, setInputValue, onSubmit, placeholder = 'Escribe tus comentarios', submitLabel = '
|
|
11120
|
+
const BordCommentInput = ({ value, setInputValue, onSubmit, placeholder = 'Escribe tus comentarios', submitLabel = 'Enviar', mentionableUsers = EMPTY_MENTIONABLE_USERS, selectedMentions = EMPTY_SELECTED_MENTIONS, onMentionUser, onRemoveMention, mentionsSearchLabel = 'Buscando:', mentionsEmptyLabel = 'Ningún usuario coincide con la búsqueda', onImageSelected, acceptImageExtensions = 'image/*', imagePreviewUrl, onRemoveImage, isDisabled = false, isLoading = false, hasError = false, errorMessage, maxCharacters = 1000, customClassName = '', }) => {
|
|
11141
11121
|
const [mentionSearch, setMentionSearch] = useState('');
|
|
11142
11122
|
const [areMentionsOpen, setAreMentionsOpen] = useState(false);
|
|
11123
|
+
const [isAttachMenuOpen, setIsAttachMenuOpen] = useState(false);
|
|
11143
11124
|
const rootRef = useRef(null);
|
|
11144
11125
|
const textareaRef = useRef(null);
|
|
11145
11126
|
const fileInputRef = useRef(null);
|
|
@@ -11203,7 +11184,14 @@ const BordCommentInput = ({ value, setInputValue, onSubmit, placeholder = 'Escri
|
|
|
11203
11184
|
closeMentions();
|
|
11204
11185
|
focusTextareaEnd();
|
|
11205
11186
|
};
|
|
11206
|
-
const handleAttachClick = () =>
|
|
11187
|
+
const handleAttachClick = (event) => {
|
|
11188
|
+
event.stopPropagation();
|
|
11189
|
+
setIsAttachMenuOpen((wasOpen) => !wasOpen);
|
|
11190
|
+
};
|
|
11191
|
+
const handleUploadImageClick = () => {
|
|
11192
|
+
setIsAttachMenuOpen(false);
|
|
11193
|
+
fileInputRef?.current?.click();
|
|
11194
|
+
};
|
|
11207
11195
|
const handleFileChange = (event) => {
|
|
11208
11196
|
const file = event?.target?.files?.[0];
|
|
11209
11197
|
if (file)
|
|
@@ -11228,23 +11216,24 @@ const BordCommentInput = ({ value, setInputValue, onSubmit, placeholder = 'Escri
|
|
|
11228
11216
|
textarea.style.height = 'auto';
|
|
11229
11217
|
textarea.style.height = `${Math.min(textarea.scrollHeight, MAX_TEXTAREA_HEIGHT)}px`;
|
|
11230
11218
|
}, [value]);
|
|
11231
|
-
/** Cierra el listado de menciones al hacer click fuera del componente */
|
|
11219
|
+
/** Cierra el listado de menciones y el tooltip de adjunto al hacer click fuera del componente */
|
|
11232
11220
|
useEffect(() => {
|
|
11233
|
-
if (!areMentionsOpen)
|
|
11221
|
+
if (!areMentionsOpen && !isAttachMenuOpen)
|
|
11234
11222
|
return;
|
|
11235
11223
|
const handleClickOutside = (event) => {
|
|
11236
11224
|
if (rootRef?.current?.contains(event.target))
|
|
11237
11225
|
return;
|
|
11238
11226
|
closeMentions();
|
|
11227
|
+
setIsAttachMenuOpen(false);
|
|
11239
11228
|
};
|
|
11240
11229
|
document.addEventListener('click', handleClickOutside);
|
|
11241
11230
|
return () => document.removeEventListener('click', handleClickOutside);
|
|
11242
|
-
}, [areMentionsOpen]);
|
|
11243
|
-
return (jsxs("div", { ref: rootRef, className: rootClassName, children: [jsxs("div", { className: "bordCommentInputRow", children: [jsxs("div", { className: "bordCommentInputField", children: [areMentionsOpen && (jsx(CommentMentionableUsersList, { users: filteredMentionableUsers, search: mentionSearch, searchLabel: mentionsSearchLabel, emptyLabel: mentionsEmptyLabel, onSelectUser: handleSelectMentionableUser })), jsxs("div", { className: "bordCommentInputContent", children: [jsx("button", { className:
|
|
11231
|
+
}, [areMentionsOpen, isAttachMenuOpen]);
|
|
11232
|
+
return (jsxs("div", { ref: rootRef, className: rootClassName, children: [jsxs("div", { className: "bordCommentInputRow", children: [jsxs("div", { className: "bordCommentInputField", children: [areMentionsOpen && (jsx(CommentMentionableUsersList, { users: filteredMentionableUsers, search: mentionSearch, searchLabel: mentionsSearchLabel, emptyLabel: mentionsEmptyLabel, onSelectUser: handleSelectMentionableUser })), jsxs("div", { className: "bordCommentInputContent", children: [jsxs("div", { className: "bordCommentInputAttachWrapper", children: [jsx("button", { className: ['bordCommentInputAttach', isAttachMenuOpen && 'open'].filter(Boolean).join(' '), type: "button", onClick: handleAttachClick, disabled: isDisabled, "aria-label": ATTACH_IMAGE_LABEL, "aria-expanded": isAttachMenuOpen, children: jsx(BordOneToneIcon, { variant: "plus", standardSize: 14 }) }), isAttachMenuOpen && (jsxs("button", { className: "bordCommentInputAttachTooltip", type: "button", onClick: handleUploadImageClick, children: [jsx(BordOneToneIcon, { variant: "image", standardSize: 16 }), UPLOAD_IMAGE_LABEL] }))] }), jsx("input", { ref: fileInputRef, className: "bordCommentInputFile", type: "file", "aria-label": ATTACH_IMAGE_LABEL, accept: acceptImageExtensions, onChange: handleFileChange, disabled: isDisabled }), !!imagePreviewUrl && (jsxs("div", { className: "bordCommentInputImage", children: [jsx("img", { src: imagePreviewUrl, alt: IMAGE_PREVIEW_LABEL }), !!onRemoveImage && (jsx("button", { type: "button", onClick: onRemoveImage, disabled: isDisabled, "aria-label": REMOVE_IMAGE_LABEL, children: jsx(BordOneToneIcon, { variant: "x", standardSize: 12 }) }))] })), jsx("textarea", { ref: textareaRef, className: "bordCommentInputTextarea", rows: 1, value: value, placeholder: placeholder, maxLength: maxCharacters, disabled: isDisabled, onChange: handleInputChange, onBeforeInput: handleBeforeInput, onKeyDown: handleKeyDown, onPaste: handlePaste })] }), !!selectedMentions?.length && (jsxs(Fragment, { children: [jsx("hr", { className: "separator" }), jsx(CommentMentionChips, { mentions: selectedMentions, isDisabled: isDisabled, onRemoveMention: onRemoveMention })] }))] }), jsx(BordButton, { customClassName: "bordCommentInputSubmit", customHeight: "auto", label: submitLabel, isLoading: isLoading, onClick: onSubmit, disabled: isSubmitDisabled || isLoading })] }), hasError && !!errorMessage && jsx("p", { className: "bordCommentInputError", children: errorMessage })] }));
|
|
11244
11233
|
};
|
|
11245
11234
|
|
|
11246
|
-
var css_248z$
|
|
11247
|
-
styleInject(css_248z$
|
|
11235
|
+
var css_248z$18 = ".bordEmptyStateDS{align-items:center;display:flex;flex-direction:column;gap:2.4rem;text-align:center}.bordEmptyStateDS .titleAndSubTitleContainer{max-width:29rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.bordEmptyStateDS :where(.title){color:var(--ds-c-content-default);font-size:2rem;font-weight:700;line-height:2.6rem}.bordEmptyStateDS :where(.subTitle){color:var(--ds-c-content-secondary);font-size:1.6rem;font-weight:400;line-height:2.1rem;margin-top:.8rem}.bordEmptyStateDS .buttonsContainer{align-items:center;display:flex;gap:1.2rem}";
|
|
11236
|
+
styleInject(css_248z$18);
|
|
11248
11237
|
|
|
11249
11238
|
const mergeClassNames = (...classNames) => classNames.filter(Boolean).join(' ');
|
|
11250
11239
|
const BordEmptyState = ({ title = 'title', subTitle, customClassName = '', customClassNameTitle = '', customClassNameSubTitle = '', customClassNameIlustration = '', customStyles, buttonOneProps, buttonTwoProps, ilustrationIconProps, oneToneIconProps, twoToneIconProps, }) => {
|
|
@@ -11269,7 +11258,29 @@ const BordEmptyState = ({ title = 'title', subTitle, customClassName = '', custo
|
|
|
11269
11258
|
return (jsxs("div", { className: rootClassName, style: customStyles, children: [ilustration, jsxs("div", { className: titleAndSubTitleContainerClassName, children: [jsx("div", { className: mergeClassNames('title', customClassNameTitle), children: title }), subTitle && jsx("div", { className: mergeClassNames('subTitle', customClassNameSubTitle), children: subTitle })] }), jsxs("div", { className: buttonsContainerClassName, children: [buttonOneProps && jsx(BordButton, { ...buttonOneProps }), buttonTwoProps && jsx(BordButton, { ...buttonTwoProps })] })] }));
|
|
11270
11259
|
};
|
|
11271
11260
|
|
|
11272
|
-
var css_248z$
|
|
11261
|
+
var css_248z$17 = ".bordTickSpinnerDS{display:inline-block;height:var(--bord-tick-spinner-size,4rem);position:relative;width:var(--bord-tick-spinner-size,4rem)}.bordTickSpinnerDS .bordTickSpinnerDStick{animation:bordTickSpinnerFade 1.2s linear infinite;animation-delay:calc(var(--bord-tick-spinner-index)/var(--bord-tick-spinner-count, 6)*1.2s - 1.2s);background-color:var(--bord-tick-spinner-color,var(--ds-c-primary-bg-default));border-radius:.2rem;height:25%;left:calc(50% - .15rem);position:absolute;top:0;transform:rotate(calc(var(--bord-tick-spinner-index)*1turn/var(--bord-tick-spinner-count, 6)));transform-origin:50% calc(var(--bord-tick-spinner-size, 4rem)/2);width:.3rem}@keyframes bordTickSpinnerFade{0%,39%,to{opacity:.15}40%{opacity:1}}@media (prefers-reduced-motion:reduce){.bordTickSpinnerDS .bordTickSpinnerDStick{animation:none;opacity:.6}}";
|
|
11262
|
+
styleInject(css_248z$17);
|
|
11263
|
+
|
|
11264
|
+
const DEFAULT_SIZE = '4rem';
|
|
11265
|
+
const DEFAULT_TICK_COUNT = 6;
|
|
11266
|
+
const DEFAULT_ARIA_LABEL = 'Cargando';
|
|
11267
|
+
/**
|
|
11268
|
+
* Spinner circular de rayas radiales animadas con CSS.
|
|
11269
|
+
* Indicador visual de carga; tamaño, color y cantidad de rayas configurables.
|
|
11270
|
+
*/
|
|
11271
|
+
const BordTickSpinner = ({ size = DEFAULT_SIZE, color, tickCount = DEFAULT_TICK_COUNT, className = '', ariaLabel = DEFAULT_ARIA_LABEL, }) => {
|
|
11272
|
+
const rootClassName = ['bordTickSpinnerDS', className].filter(Boolean).join(' ');
|
|
11273
|
+
const style = {
|
|
11274
|
+
'--bord-tick-spinner-size': size,
|
|
11275
|
+
'--bord-tick-spinner-count': tickCount,
|
|
11276
|
+
...(color ? { '--bord-tick-spinner-color': color } : {}),
|
|
11277
|
+
};
|
|
11278
|
+
return (jsx("div", { className: rootClassName, role: "status", "aria-label": ariaLabel, style: style, children: Array.from({ length: tickCount }).map((_, i) => (jsx("span", { className: "bordTickSpinnerDStick", style: {
|
|
11279
|
+
'--bord-tick-spinner-index': i,
|
|
11280
|
+
} }, i))) }));
|
|
11281
|
+
};
|
|
11282
|
+
|
|
11283
|
+
var css_248z$16 = "@keyframes bordCommentsPanelAppear{0%{opacity:0;transform:translateY(1.6rem) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.bordCommentsPanelDS{animation:bordCommentsPanelAppear .2s ease-out;background-color:var(--ds-c-layout-l1);border-color:var(--ds-c-stroke-default);border-radius:.8rem .8rem 0 0;border-style:solid;border-width:1px;box-shadow:0 .5rem .8rem rgba(0,0,0,.15);display:flex;flex-direction:column;overflow:hidden;transform-origin:bottom right}@media (prefers-reduced-motion:reduce){.bordCommentsPanelDS{animation:none}}.bordCommentsPanelDS .bordCommentsPanelIconWrapper{--tw-bg-opacity:1;background-color:rgb(223 242 255/var(--tw-bg-opacity));border-radius:15998.4rem;display:grid;height:2rem;place-content:center;position:relative;width:2rem}.bordCommentsPanelDS .bordCommentsPanelIcon{background-color:#23a5ff1a;border-radius:15998.4rem;display:grid;height:1.6rem;place-content:center;width:1.6rem}.bordCommentsPanelDS .bordCommentsPanelIcon svg path{stroke:#4096f0}.bordCommentsPanelDS .bordCommentsPanelHeader{align-items:center;border-bottom-width:1px;border-color:var(--ds-c-stroke-default);border-style:solid;display:flex;flex-shrink:0;gap:.8rem;padding:.8rem 1.2rem}.bordCommentsPanelDS .bordCommentsPanelHeader .bordCommentsPanelTitle{color:var(--ds-c-content-default);flex:1 1 0%;font-size:1.4rem;font-weight:500;line-height:1.8rem;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bordCommentsPanelDS .bordCommentsPanelHeader .bordCommentsPanelClose{align-items:center;background-color:transparent;border-style:none;cursor:pointer;display:flex;flex-shrink:0;padding:0}.bordCommentsPanelDS .bordCommentsPanelHeader .bordCommentsPanelClose svg path{stroke:var(--ds-c-content-default)}.bordCommentsPanelDS .bordCommentsPanelThread{background-color:var(--ds-c-layout-bg);border-right:1.2rem solid transparent;display:flex;flex:1 1 0%;flex-direction:column;gap:1.2rem;min-height:0;overflow-y:auto;padding:1.2rem}.bordCommentsPanelDS .bordCommentsPanelThread::-webkit-scrollbar{width:.4rem}.bordCommentsPanelDS .bordCommentsPanelThread::-webkit-scrollbar-track{background-color:transparent;margin:1.2rem 0}.bordCommentsPanelDS .bordCommentsPanelThread::-webkit-scrollbar-thumb{background-color:var(--ds-c-primary-bg-default);border-radius:.2rem}.bordCommentsPanelDS .bordCommentsPanelThread .bordCommentsPanelEmptyState{flex:1 1 0%;justify-content:center}.bordCommentsPanelDS .bordCommentsPanelThread .bordCommentsPanelEmptyState .title{color:var(--ds-c-content-secondary);font-size:1.2rem;line-height:1.5rem}.bordCommentsPanelDS .bordCommentsPanelDropzone,.bordCommentsPanelDS .bordCommentsPanelThread .bordCommentsPanelLoader{align-items:center;display:flex;flex:1 1 0%;justify-content:center}.bordCommentsPanelDS .bordCommentsPanelDropzone{border-color:var(--ds-c-stroke-interactive);border-radius:.6rem;border-style:dashed;border-width:1px;flex-direction:column;gap:.8rem}.bordCommentsPanelDS .bordCommentsPanelDropzone .bordCommentsPanelIcon{height:3.2rem;width:3.2rem}.bordCommentsPanelDS .bordCommentsPanelDropzone p{color:var(--ds-c-content-secondary);font-size:1.2rem;line-height:1.5rem;text-align:center}.bordCommentsPanelDS .bordCommentsPanelFooter{align-items:flex-start;background-color:var(--ds-c-layout-l1);border-color:var(--ds-c-stroke-default);border-style:solid;border-top-width:1px;display:flex;flex-shrink:0;padding:.8rem}";
|
|
11273
11284
|
styleInject(css_248z$16);
|
|
11274
11285
|
|
|
11275
11286
|
/**
|
|
@@ -11290,7 +11301,7 @@ const BordCommentsPanel = ({ title = 'Comentarios', comments, onClose, inputProp
|
|
|
11290
11301
|
}
|
|
11291
11302
|
return comments?.map((comment, index) => (jsx(BordComment, { ...comment, hasDivider: index < lastCommentIndex }, comment?.uid)));
|
|
11292
11303
|
};
|
|
11293
|
-
return (jsxs("div", { className: `bordCommentsPanelDS ${customClassName}`, style: { width: customWidth, height: customHeight }, children: [jsxs("div", { className: "bordCommentsPanelHeader", children: [jsx("div", { className: "bordCommentsPanelIcon", children: jsx(BordOneToneIcon, { variant: "messageCircle", standardSize: 12 }) }), jsx("p", { className: "bordCommentsPanelTitle", children: title }), jsx("button", { className: "bordCommentsPanelClose", type: "button", onClick: onClose, "aria-label": closeLabel, children: jsx(BordOneToneIcon, { variant: "x", standardSize: 16 }) })] }), jsx("div", { className: "bordCommentsPanelThread", children: getThreadContent() }), !isDraggingImage && (jsx("div", { className: "bordCommentsPanelFooter", children: jsx(BordCommentInput, { ...inputProps }) }))] }));
|
|
11304
|
+
return (jsxs("div", { className: `bordCommentsPanelDS ${customClassName}`, style: { width: customWidth, height: customHeight }, children: [jsxs("div", { className: "bordCommentsPanelHeader", children: [jsx("div", { className: "bordCommentsPanelIconWrapper", children: jsx("div", { className: "bordCommentsPanelIcon", children: jsx(BordOneToneIcon, { variant: "messageCircle", standardSize: 12 }) }) }), jsx("p", { className: "bordCommentsPanelTitle", children: title }), jsx("button", { className: "bordCommentsPanelClose", type: "button", onClick: onClose, "aria-label": closeLabel, children: jsx(BordOneToneIcon, { variant: "x", standardSize: 16 }) })] }), jsx("div", { className: "bordCommentsPanelThread", children: getThreadContent() }), !isDraggingImage && (jsx("div", { className: "bordCommentsPanelFooter", children: jsx(BordCommentInput, { ...inputProps }) }))] }));
|
|
11294
11305
|
};
|
|
11295
11306
|
|
|
11296
11307
|
var css_248z$15 = ".dsSwitchVariant-default{align-items:center;background-color:transparent;border-color:var(--ds-c-stroke-interactive);border-radius:4rem;border-style:solid;border-width:1px;border-width:.1rem;box-sizing:content-box;cursor:pointer;display:flex;flex-shrink:0;height:2.4rem;padding:0;transition-duration:.2s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);width:5.6rem}.dsSwitchVariant-default,.dsSwitchVariant-default .dsSwitchThumb{position:relative}.dsSwitchVariant-default .dsSwitchThumb{background-color:var(--ds-c-stroke-default);border-radius:15998.4rem;color:var(--ds-c-content-secondary);display:grid;flex-shrink:0;height:2rem;margin-left:.2rem;place-items:center;transform:translateX(0);transition-duration:.2s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);width:2rem}.dsSwitchVariant-default.dsSwitchRootOn .dsSwitchThumb{background-color:var(--ds-c-primary-bg-default);color:var(--ds-c-layout-l1);transform:translateX(3.1rem)}.dsSwitchVariant-default:disabled{background-color:var(--ds-c-bool-disabled-bg);border-color:var(--ds-c-stroke-default);cursor:not-allowed}.dsSwitchVariant-default:disabled .dsSwitchThumb,.dsSwitchVariant-default:disabled.dsSwitchRootOn .dsSwitchThumb{background-color:var(--ds-c-bool-disabled-fg);color:var(--ds-c-bool-disabled-sec-bg)}.dsSwitchSkeleton.dsSwitchVariant-default{width:5.6rem}";
|
|
@@ -11509,7 +11520,7 @@ const SelectIndicator = ({ multiple, isSelected, placement, disabled = false })
|
|
|
11509
11520
|
return (jsx("span", { className: "bordSelectIndicatorSlot", "aria-hidden": true, children: jsx(BordRadioButton, { isButtonActive: isSelected, disabled: disabled, customWidth: "1.6rem", componentSize: "medium" }) }));
|
|
11510
11521
|
};
|
|
11511
11522
|
|
|
11512
|
-
var css_248z$Z = ".bordSelectRoot{position:relative;width:100%}.bordSelectSkeletonText{background-color:var(--ds-c-stroke-default);border-radius:.4rem;display:block;height:1.2rem;width:4rem}.bordSelectSkeletonTrigger{border-radius:.6rem;height:4rem;width:100%}.bordSelectOption{margin:0;padding:0}.bordSelectOptionButton{align-items:center;background-color:transparent;border-radius:.6rem;border-width:0;cursor:pointer;display:flex;gap:.8rem;justify-content:space-between;padding:.4rem;text-align:left;transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}.bordSelectOptionButton:hover{background-color:var(--ds-c-layout-l3)}[data-theme=dark] .bordSelectOptionButton:hover{background-color:var(--ds-c-layout-l2)}.bordSelectOptionButtonList,.bordSelectOptionButtonSearch{background-color:transparent;border-radius:.8rem;min-height:2.8rem;padding:.4rem}.bordSelectOptionButtonSearch{gap:.4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bordSelectOptionContent{align-items:center;display:flex;flex:1 1 0%;gap:.4rem;min-width:0}.bordSelectOptionPrefixSlot,.bordSelectOptionSuffixSlot{align-items:center;display:flex;flex-shrink:0}.bordSelectOptionTexts{display:grid;flex:1 1 0%;gap:.2rem;min-width:0}.bordSelectOptionTitle{color:var(--ds-c-content-secondary);font-size:1.4rem;font-weight:500;line-height:1.8rem}.bordSelectOptionButtonSelected:not(.bordSelectOptionButtonList):not(.bordSelectOptionButtonSearch) .bordSelectOptionTitle{color:var(--ds-c-primary-bg-default)}.bordSelectOptionTextsWithDescription .bordSelectOptionTitle{color:var(--ds-c-content-default)}.bordSelectOptionButtonSelected:not(.bordSelectOptionButtonList):not(.bordSelectOptionButtonSearch) .bordSelectOptionTextsWithDescription .bordSelectOptionTitle{color:var(--ds-c-primary-bg-default)}.bordSelectOptionDescription{color:var(--ds-c-content-secondary);font-size:1.4rem;font-weight:400;line-height:1.8rem}.bordSelectDropdownListFloating--gradient .bordSelectOptionDescription,.bordSelectDropdownListFloating--gradient .bordSelectOptionTitle,.bordSelectDropdownListFloating--select .bordSelectOptionDescription,.bordSelectDropdownListFloating--select .bordSelectOptionTitle{font-family:DM Sans,sans-serif;font-size:1.2rem;font-weight:400;line-height:normal}.bordSelectDropdownListFloating--search .bordSelectOptionTitle{color:var(--ds-c-content-default);font-family:DM Sans,sans-serif;font-size:1.2rem;font-weight:500;line-height:normal}.bordConditionBadgeSlot{align-items:center;display:flex;flex-shrink:0;justify-content:center;width:3.6rem}";
|
|
11523
|
+
var css_248z$Z = ".bordSelectRoot{position:relative;width:100%}.bordSelectSkeletonText{background-color:var(--ds-c-stroke-default);border-radius:.4rem;display:block;height:1.2rem;width:4rem}.bordSelectSkeletonTrigger{border-radius:.6rem;height:4rem;width:100%}.bordSelectOption{margin:0;padding:0}.bordSelectOptionButton{align-items:center;background-color:transparent;border-radius:.6rem;border-width:0;cursor:pointer;display:flex;gap:.8rem;justify-content:space-between;padding:.4rem;text-align:left;transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}.bordSelectOptionButton:hover{background-color:var(--ds-c-layout-l3)}[data-theme=dark] .bordSelectOptionButton:hover{background-color:var(--ds-c-layout-l2)}.bordSelectOptionButtonDisabled{cursor:not-allowed;opacity:.4}.bordSelectOptionButtonDisabled:hover,[data-theme=dark] .bordSelectOptionButtonDisabled:hover{background-color:transparent}.bordSelectOptionButtonList,.bordSelectOptionButtonSearch{background-color:transparent;border-radius:.8rem;min-height:2.8rem;padding:.4rem}.bordSelectOptionButtonSearch{gap:.4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bordSelectOptionContent{align-items:center;display:flex;flex:1 1 0%;gap:.4rem;min-width:0}.bordSelectOptionPrefixSlot,.bordSelectOptionSuffixSlot{align-items:center;display:flex;flex-shrink:0}.bordSelectOptionTexts{display:grid;flex:1 1 0%;gap:.2rem;min-width:0}.bordSelectOptionTitle{color:var(--ds-c-content-secondary);font-size:1.4rem;font-weight:500;line-height:1.8rem}.bordSelectOptionButtonSelected:not(.bordSelectOptionButtonList):not(.bordSelectOptionButtonSearch) .bordSelectOptionTitle{color:var(--ds-c-primary-bg-default)}.bordSelectOptionTextsWithDescription .bordSelectOptionTitle{color:var(--ds-c-content-default)}.bordSelectOptionButtonSelected:not(.bordSelectOptionButtonList):not(.bordSelectOptionButtonSearch) .bordSelectOptionTextsWithDescription .bordSelectOptionTitle{color:var(--ds-c-primary-bg-default)}.bordSelectOptionDescription{color:var(--ds-c-content-secondary);font-size:1.4rem;font-weight:400;line-height:1.8rem}.bordSelectDropdownListFloating--gradient .bordSelectOptionDescription,.bordSelectDropdownListFloating--gradient .bordSelectOptionTitle,.bordSelectDropdownListFloating--select .bordSelectOptionDescription,.bordSelectDropdownListFloating--select .bordSelectOptionTitle{font-family:DM Sans,sans-serif;font-size:1.2rem;font-weight:400;line-height:normal}.bordSelectDropdownListFloating--search .bordSelectOptionTitle{color:var(--ds-c-content-default);font-family:DM Sans,sans-serif;font-size:1.2rem;font-weight:500;line-height:normal}.bordConditionBadgeSlot{align-items:center;display:flex;flex-shrink:0;justify-content:center;width:3.6rem}";
|
|
11513
11524
|
styleInject(css_248z$Z);
|
|
11514
11525
|
|
|
11515
11526
|
const DEFAULT_SEARCH_EMPTY_OPTIONS_TEXT = 'No hay opciones disponibles.';
|
|
@@ -11613,12 +11624,7 @@ const BordSelect = props => {
|
|
|
11613
11624
|
}
|
|
11614
11625
|
}, [triggerVariant]);
|
|
11615
11626
|
const rootStateClass = !isLoading &&
|
|
11616
|
-
[
|
|
11617
|
-
!isPlaceholder ? 'bordSelectRoot--filled' : '',
|
|
11618
|
-
danger ? 'bordSelectRoot--danger' : '',
|
|
11619
|
-
]
|
|
11620
|
-
.filter(Boolean)
|
|
11621
|
-
.join(' ');
|
|
11627
|
+
[!isPlaceholder ? 'bordSelectRoot--filled' : '', danger ? 'bordSelectRoot--danger' : ''].filter(Boolean).join(' ');
|
|
11622
11628
|
const dropdownVariantClass = getDropdownVariantClass(triggerVariant, optionRowVariant);
|
|
11623
11629
|
const supportsLabelAndCaption = triggerVariant === 'default' || isSearchVariant;
|
|
11624
11630
|
const optionsList = visibleOptions.map(option => {
|
|
@@ -11629,10 +11635,11 @@ const BordSelect = props => {
|
|
|
11629
11635
|
effectiveOptionRowVariant === 'list' ? 'bordSelectOptionButtonList' : '',
|
|
11630
11636
|
effectiveOptionRowVariant === 'search' ? 'bordSelectOptionButtonSearch' : '',
|
|
11631
11637
|
isSelected ? 'bordSelectOptionButtonSelected' : '',
|
|
11638
|
+
option.disabled ? 'bordSelectOptionButtonDisabled' : '',
|
|
11632
11639
|
]
|
|
11633
11640
|
.filter(Boolean)
|
|
11634
11641
|
.join(' ');
|
|
11635
|
-
return (jsx("li", { className: "bordSelectOption", children: jsxs("button", { type: "button", className: optionButtonClass, onClick: () => handleSelect(option.value), children: [jsxs("span", { className: "bordSelectOptionContent", children: [effectiveIndicatorPlacement === 'end' ? null : indicator, option.labelPrefix ? jsx("span", { className: "bordSelectOptionPrefixSlot", children: option.labelPrefix }) : null, jsxs("span", { className: `bordSelectOptionTexts ${option.description ? 'bordSelectOptionTextsWithDescription' : ''}`, children: [jsx("span", { className: "bordSelectOptionTitle", children: option.label }), option.description ? jsx("span", { className: "bordSelectOptionDescription", children: option.description }) : null] }), effectiveIndicatorPlacement === 'end' ? indicator : null] }), option.labelSuffix ? (jsx("span", { className: "bordSelectOptionSuffixSlot", onClick: event => event.stopPropagation(), children: option.labelSuffix })) : null] }) }, option.value));
|
|
11642
|
+
return (jsx("li", { className: "bordSelectOption", children: jsxs("button", { type: "button", className: optionButtonClass, disabled: option.disabled, onClick: () => handleSelect(option.value), children: [jsxs("span", { className: "bordSelectOptionContent", children: [effectiveIndicatorPlacement === 'end' ? null : indicator, option.labelPrefix ? jsx("span", { className: "bordSelectOptionPrefixSlot", children: option.labelPrefix }) : null, jsxs("span", { className: `bordSelectOptionTexts ${option.description ? 'bordSelectOptionTextsWithDescription' : ''}`, children: [jsx("span", { className: "bordSelectOptionTitle", children: option.label }), option.description ? jsx("span", { className: "bordSelectOptionDescription", children: option.description }) : null] }), effectiveIndicatorPlacement === 'end' ? indicator : null] }), option.labelSuffix ? (jsx("span", { className: "bordSelectOptionSuffixSlot", onClick: event => event.stopPropagation(), children: option.labelSuffix })) : null] }) }, option.value));
|
|
11636
11643
|
});
|
|
11637
11644
|
const renderSearchDropdownContent = () => {
|
|
11638
11645
|
if (!normalizedSearchText && !options.length) {
|