@luscii-healthtech/web-ui 60.3.1 → 60.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/components/ActionCardDetailed/ActionCardDetailed.js +1 -1
- package/dist/esm/components/ActionCardDetailed/ActionCardDetailed.js.map +1 -1
- package/dist/esm/components/Textarea/LabeledTextarea.js +21 -0
- package/dist/esm/components/Textarea/LabeledTextarea.js.map +1 -0
- package/dist/esm/components/Textarea/Textarea.js +9 -10
- package/dist/esm/components/Textarea/Textarea.js.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/index.development.js +87 -78
- package/dist/index.development.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/src/components/Textarea/LabeledTextarea.d.ts +42 -0
- package/dist/src/components/Textarea/Textarea.d.ts +11 -2
- package/dist/src/generated/components/Textarea/LabeledTextarea.d.ts +42 -0
- package/dist/src/generated/components/Textarea/Textarea.d.ts +11 -2
- package/dist/src/generated/index.d.ts +1 -0
- package/dist/src/index.d.ts +1 -0
- package/dist/stories/LabeledTextarea.stories.d.ts +89 -0
- package/dist/web-ui-tailwind.css +3 -0
- package/package.json +1 -1
|
@@ -15,7 +15,7 @@ import { InstrumentCard } from '../InstrumentCard/InstrumentCard.js';
|
|
|
15
15
|
import { Stack } from '../Stack/Stack.js';
|
|
16
16
|
import { Tag } from '../Tag/Tag.js';
|
|
17
17
|
|
|
18
|
-
const ScheduleItem = ({ icon, label, value, detail }) => jsxs(Stack, { axis: "x", align: "start", _gap: "base", children: [jsx(Box, { "aria-hidden": true, _p: "s", className: "ui:size-[var(--ui-semantic-size-xl)] ui:shrink-0 ui:[border-radius:var(--ui-semantic-radius-s)]", children: icon }), jsxs(Stack, { _gap: "none", className: "ui:min-w-0", children: [jsxs(Stack, { axis: "x", align: "baseline", _gap: "s", wrap: true, children: [jsx(Text, { variant: "body-base-light", color: "neutral-secondary", children: label }), jsx(Text, { variant: "body-base-regular", color: "neutral-secondary", children: value })] }), detail && jsx(Text, { variant: "body-small-regular", color: "neutral-secondary", children: detail })] })] });
|
|
18
|
+
const ScheduleItem = ({ icon, label, value, detail }) => jsxs(Stack, { axis: "x", align: "start", _gap: "base", children: [jsx(Box, { "aria-hidden": true, _p: "s", className: "ui:size-[var(--ui-semantic-size-xl)] ui:shrink-0 ui:[border-radius:var(--ui-semantic-radius-s)]", children: icon }), jsxs(Stack, { _gap: "none", className: "ui:min-w-0", children: [jsxs(Stack, { axis: "x", align: "baseline", _gap: "s", wrap: true, className: "ui:min-h-[var(--ui-semantic-size-xl)] ui:content-center", children: [jsx(Text, { variant: "body-base-light", color: "neutral-secondary", children: label }), jsx(Text, { variant: "body-base-regular", color: "neutral-secondary", children: value })] }), detail && jsx(Text, { variant: "body-small-regular", color: "neutral-secondary", children: detail })] })] });
|
|
19
19
|
const ActionCardDetailed = ({ type, iconUrl, title, category, metadata, schedule, scheduleHeading = "Schedule settings", instruments, instrumentsHeading = "Instruments in this action", children, editLabel = "Edit action", deleteLabel = "Delete action", closeLabel = "Close action details", onEdit, onDelete, onClose, className }) => {
|
|
20
20
|
const hasActions = onEdit || onDelete || onClose;
|
|
21
21
|
return jsx(Card, { border: true, borderRadius: "m", elevation: "medium", className: classNames("ui:w-full ui:max-w-[600px]", className), children: jsxs(Stack, { _gap: "xl", width: "full", children: [jsxs(Stack, { axis: "x", align: "start", justify: "between", _gap: "base", width: "full", children: [jsxs(Stack, { axis: "x", align: "start", _gap: "base", className: "ui:min-w-0", children: [jsx(ActionIcon, { type, iconUrl, size: 24 }), jsxs(Stack, { _gap: "none", className: "ui:min-w-0", children: [jsx(Heading, { variant: "h3", children: title }), category && jsx(Text, { variant: "body-base-regular", color: "neutral-secondary", children: category })] })] }), hasActions && jsxs(Stack, { axis: "x", align: "center", _gap: "base", className: "ui:shrink-0", children: [onEdit && jsx(TertiaryIconButton, { label: editLabel, onClick: onEdit, children: jsx(PencilIcon, { "aria-hidden": true }) }), onDelete && jsx(TertiaryIconButton, { label: deleteLabel, onClick: onDelete, children: jsx(TrashBinIcon, { "aria-hidden": true }) }), onClose && jsx(TertiaryIconButton, { label: closeLabel, onClick: onClose, children: jsx(CrossIcon, { "aria-hidden": true }) })] })] }), metadata && metadata.length > 0 && jsx(Stack, { axis: "x", _gap: "base", wrap: true, children: metadata.map((item, index) => jsx(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionCardDetailed.js","sources":["../../../../../../src/components/ActionCardDetailed/ActionCardDetailed.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;AA2FA,MAAM,YAAA,GAAe,CAAC,EAAE,IAAA,EAAM,OAAO,KAAA,EAAO,MAAA,OAC1CA,IAAA,CAAC,KAAA,EAAK,EAAC,IAAA,EAAK,GAAA,EAAI,OAAM,OAAA,EAAQ,IAAA,EAAK,QAAM,QAAA,EAAA,CACvCC,
|
|
1
|
+
{"version":3,"file":"ActionCardDetailed.js","sources":["../../../../../../src/components/ActionCardDetailed/ActionCardDetailed.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { __rest } from '../../vendor/tslib/tslib.es6.js';
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import React__default from 'react';
|
|
4
|
+
import classNames from 'classnames';
|
|
5
|
+
import { calculateResponsiveWidthClasses } from '../../utils/responsiveness.utils.js';
|
|
6
|
+
import { Stack } from '../Stack/Stack.js';
|
|
7
|
+
import { HelperAndErrorText } from '../forms/shared/HelperAndErrorText.js';
|
|
8
|
+
import { LabelText } from '../forms/shared/LabelText.js';
|
|
9
|
+
import { Textarea } from './Textarea.js';
|
|
10
|
+
|
|
11
|
+
const LabeledTextarea = React__default.forwardRef((props, ref) => {
|
|
12
|
+
const { className, helperText, errorText, label, width, fullWidth, id, "aria-describedby": ariaDescribedBy } = props, rest = __rest(props, ["className", "helperText", "errorText", "label", "width", "fullWidth", "id", "aria-describedby"]);
|
|
13
|
+
const generatedTextareaId = React__default.useId();
|
|
14
|
+
const textareaId = id || generatedTextareaId;
|
|
15
|
+
const helperErrorTextId = React__default.useId();
|
|
16
|
+
const fieldWidth = width !== null && width !== void 0 ? width : fullWidth ? "full" : void 0;
|
|
17
|
+
return jsxs(Stack, { _gap: "base", align: fieldWidth ? "stretch" : void 0, className: classNames(fieldWidth && calculateResponsiveWidthClasses(fieldWidth), className), children: [label && jsx(LabelText, { as: "label", htmlFor: textareaId, children: label }), jsx(Textarea, Object.assign({}, rest, { id: textareaId, ref, isError: Boolean(errorText), "aria-invalid": Boolean(errorText) || rest["aria-invalid"] || void 0, "aria-describedby": [ariaDescribedBy, helperErrorTextId].filter(Boolean).join(" ") })), jsx(HelperAndErrorText, { helperText, errorText, describingId: helperErrorTextId })] });
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
export { LabeledTextarea };
|
|
21
|
+
//# sourceMappingURL=LabeledTextarea.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LabeledTextarea.js","sources":["../../../../../../src/components/Textarea/LabeledTextarea.tsx"],"sourcesContent":[null],"names":["React","_jsxs","_jsx"],"mappings":";;;;;;;;;;AAyFO,MAAM,eAAA,GAAkBA,cAAA,CAAM,UAAA,CACnC,CAAC,OAAO,GAAA,KAAO;AAIb,EAAA,MAAM,EACJ,SAAA,EACA,UAAA,EACA,SAAA,EACA,KAAA,EACA,OACA,SAAA,EACA,EAAA,EACA,kBAAA,EAAoB,eAAA,EAAe,GAEjC,KAAA,EADC,OAAI,MAAA,CACL,KAAA,EAVE,CAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,SAAA,OAAA,EAAA,WAAA,EAAA,IAAA,EAAA,kBAAA,CAUL,CAAA;AAED,EAAA,MAAM,mBAAA,GAAsBA,eAAM,KAAA;AAClC,EAAA,MAAM,aAAa,EAAA,IAAM,mBAAA;AACzB,EAAA,MAAM,iBAAA,GAAoBA,eAAM,KAAA;AAChC,EAAA,MAAM,aAAa,KAAA,aAAA,UAAK,MAAA,GAAL,KAAA,GAAU,YAAY,MAAA,GAAS,MAAA;AAQlD,EAAA,OACEC,KAAC,KAAA,IACC,IAAA,EAAK,MAAA,EACL,OAAO,UAAA,GAAa,SAAA,GAAY,MAAA,EAChC,SAAA,EAAW,WACT,UAAA,IAAc,+BAAA,CAAgC,UAAU,CAAA,EACxD,SAAS,CAAA,EACV,QAAA,EAAA,CAEA,KAAA,IACCC,IAAC,SAAA,EAAS,EAAC,EAAA,EAAG,OAAA,EAAQ,SAAS,UAAA,EAAU,QAAA,EACtC,KAAA,KAGLA,GAAA,CAAC,QAAA,EAAQ,OAAA,MAAA,CAAA,IACH,IAAA,EAAI,EACR,EAAA,EAAI,UAAA,EACJ,KACA,OAAA,EAAS,OAAA,CAAQ,SAAS,CAAA,EAAC,gBACb,OAAA,CAAQ,SAAS,CAAA,IAAK,IAAA,CAAK,cAAc,CAAA,IAAK,MAAA,EAAS,kBAAA,EACnD,CAAC,iBAAiB,iBAAiB,CAAA,CAClD,MAAA,CAAO,OAAO,EACd,IAAA,CAAK,GAAG,CAAA,EAAC,CAAA,CAAA,EAGdA,GAAA,CAAC,kBAAA,EAAkB,EACjB,YACA,SAAA,EACA,YAAA,EAAc,mBAAiB,CAC/B,GAAA,CAAA;AAGR,CAAC;;"}
|
|
@@ -10,12 +10,11 @@ const resizeTypes = {
|
|
|
10
10
|
VERTICAL: "vertical"
|
|
11
11
|
};
|
|
12
12
|
const Textarea = React__default.forwardRef((_a, ref) => {
|
|
13
|
-
var { className, value, name, placeholder, maxLength, rows = 4, resizable = resizeTypes.VERTICAL, isDisabled = false, icon, onChange, onBlur, onFocus, onKeyPress, onKeyDown, onCtrlEnter, isError } = _a, otherProps = __rest(_a, ["className", "value", "name", "placeholder", "maxLength", "rows", "resizable", "isDisabled", "icon", "onChange", "onBlur", "onFocus", "onKeyPress", "onKeyDown", "onCtrlEnter", "isError"]);
|
|
14
|
-
|
|
13
|
+
var { className, value, name, placeholder, maxLength, rows = 4, resizable = resizeTypes.VERTICAL, isDisabled = false, disabled: nativeDisabled = false, icon, onChange, onBlur, onFocus, onKeyPress, onKeyDown, onCtrlEnter, isError, style: consumerStyle } = _a, otherProps = __rest(_a, ["className", "value", "name", "placeholder", "maxLength", "rows", "resizable", "isDisabled", "disabled", "icon", "onChange", "onBlur", "onFocus", "onKeyPress", "onKeyDown", "onCtrlEnter", "isError", "style"]);
|
|
14
|
+
const disabled = isDisabled || nativeDisabled;
|
|
15
|
+
let style = consumerStyle;
|
|
15
16
|
if (icon) {
|
|
16
|
-
style = {
|
|
17
|
-
backgroundImage: `url("${icon}")`
|
|
18
|
-
};
|
|
17
|
+
style = Object.assign(Object.assign({}, consumerStyle), { backgroundImage: `url("${icon}")` });
|
|
19
18
|
}
|
|
20
19
|
return jsx("textarea", Object.assign({}, otherProps, { name, value, placeholder, onChange, onBlur, onFocus, onKeyPress, onKeyDown: (event) => {
|
|
21
20
|
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
|
|
@@ -23,7 +22,7 @@ const Textarea = React__default.forwardRef((_a, ref) => {
|
|
|
23
22
|
if ((ctrlKey || metaKey) && key === "Enter") {
|
|
24
23
|
onCtrlEnter === null || onCtrlEnter === void 0 ? void 0 : onCtrlEnter();
|
|
25
24
|
}
|
|
26
|
-
}, maxLength, rows, disabled
|
|
25
|
+
}, maxLength, rows, disabled, className: classNames([
|
|
27
26
|
// Base classes
|
|
28
27
|
className,
|
|
29
28
|
"cweb-textarea",
|
|
@@ -45,11 +44,11 @@ const Textarea = React__default.forwardRef((_a, ref) => {
|
|
|
45
44
|
"ui:duration-300",
|
|
46
45
|
{
|
|
47
46
|
// Disabled state
|
|
48
|
-
"ui:bg-slate-50 ui:text-slate-400":
|
|
49
|
-
"ui:text-on-surface": !
|
|
47
|
+
"ui:bg-slate-50 ui:text-slate-400": disabled,
|
|
48
|
+
"ui:text-on-surface": !disabled,
|
|
50
49
|
// Normal state (not disabled, not error)
|
|
51
|
-
"ui:border-input-border": !
|
|
52
|
-
"ui:hover:border-input-border-dark": !
|
|
50
|
+
"ui:border-input-border": !disabled && !isError,
|
|
51
|
+
"ui:hover:border-input-border-dark": !disabled,
|
|
53
52
|
// Error state
|
|
54
53
|
"ui:border-negative-border": isError,
|
|
55
54
|
"ui:focus:outline-negative": isError,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","sources":["../../../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":[null],"names":["React","_jsx"],"mappings":";;;;;;AASA,MAAM,WAAA,GAAc;AAAA,EAElB,IAAA,EAAM,MAAA;AAAA,EACN,UAAA,EAAY,YAAA;AAAA,EACZ,QAAA,EAAU;;
|
|
1
|
+
{"version":3,"file":"Textarea.js","sources":["../../../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":[null],"names":["React","_jsx"],"mappings":";;;;;;AASA,MAAM,WAAA,GAAc;AAAA,EAElB,IAAA,EAAM,MAAA;AAAA,EACN,UAAA,EAAY,YAAA;AAAA,EACZ,QAAA,EAAU;;AAkCL,MAAM,QAAA,GAAWA,cAAA,CAAM,UAAA,CAC5B,CACE,IAqBA,GAAA,KACE;MAtBF,EACE,WACA,KAAA,EACA,IAAA,EACA,aACA,SAAA,EACA,IAAA,GAAO,CAAA,EACP,SAAA,GAAY,WAAA,CAAY,QAAA,EACxB,aAAa,KAAA,EACb,QAAA,EAAU,cAAA,GAAiB,KAAA,EAC3B,IAAA,EACA,QAAA,EACA,QACA,OAAA,EACA,UAAA,EACA,SAAA,EACA,WAAA,EACA,OAAA,EACA,KAAA,EAAO,eAAa,GAAA,EAAA,EACjB,aAAU,MAAA,CAAA,EAAA,EAnBf,CAAA,WAAA,EAAA,OAAA,EAAA,MAAA,EAAA,aAAA,EAAA,WAAA,EAAA,MAAA,EAAA,aAAA,YAAA,EAAA,UAAA,EAAA,MAAA,EAAA,UAAA,EAAA,QAAA,EAAA,SAAA,EAAA,cAAA,WAAA,EAAA,aAAA,EAAA,SAAA,EAAA,OAAA,CAoBC,CAAA;AAGD,EAAA,MAAM,WAAW,UAAA,IAAc,cAAA;AAC/B,EAAA,IAAI,KAAA,GAAQ,aAAA;AAEZ,EAAA,IAAI,IAAA,EAAM;AACR,IAAA,KAAA,GAAK,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACA,aAAa,CAAA,EAAA,EAChB,eAAA,EAAiB,CAAA,KAAA,EAAQ,IAAI,MAAI,CAAA;AAAA,EAErC;AAEA,EAAA,OACEC,IAAA,UAAA,EAAA,MAAA,CAAA,MAAA,CAAA,IACM,UAAA,EAAU,EACd,IAAA,EACA,KAAA,EACA,aACA,QAAA,EACA,MAAA,EACA,SACA,UAAA,EACA,SAAA,EAAW,CAAC,KAAA,KAAS;AACnB,IAAA,SAAA,aAAA,SAAA,KAAS,MAAA,GAAA,MAAA,GAAT,UAAY,KAAK,CAAA;AACjB,IAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAS,GAAA,EAAG,GAAK,KAAA;AAElC,IAAA,IAAA,CAAK,OAAA,IAAW,OAAA,KAAY,GAAA,KAAQ,OAAA,EAAS;AAC3C,MAAA,WAAA,KAAW,IAAA,IAAX,WAAA,KAAW,MAAA,GAAA,MAAA,GAAX,WAAA;IACF;AAAA,EACF,CAAA,EACA,SAAA,EACA,IAAA,EACA,QAAA,EACA,WAAW,UAAA,CAAW;AAAA;AAAA,IAEpB,SAAA;AAAA,IACA,eAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA;AAAA,IAGA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,iBAAA;AAAA,IACA,iBAAA;AAAA;AAAA,IAGA,yBAAA;AAAA,IACA,4BAAA;AAAA,IACA,0BAAA;AAAA,IACA,yBAAA;AAAA;AAAA,IAGA,sBAAA;AAAA,IACA,iBAAA;AAAA,IAEA;AAAA;AAAA,MAEE,kCAAA,EAAoC,QAAA;AAAA,MACpC,sBAAsB,CAAC,QAAA;AAAA;AAAA,MAGvB,wBAAA,EAA0B,CAAC,QAAA,IAAY,CAAC,OAAA;AAAA,MACxC,qCAAqC,CAAC,QAAA;AAAA;AAAA,MAGtC,2BAAA,EAA6B,OAAA;AAAA,MAC7B,2BAAA,EAA6B,OAAA;AAAA,MAC7B,2BAA2B,CAAC,OAAA;AAAA,MAC5B,4BAA4B,CAAC,OAAA;AAAA;AAAA,MAG7B,UAAA,EAAY,CAAC,CAAC,IAAA;AAAA,MACd,SAAA,EAAW,cAAc,WAAA,CAAY,IAAA;AAAA,MACrC,aAAA,EAAe,cAAc,WAAA,CAAY,UAAA;AAAA,MACzC,aAAA,EAAe,cAAc,WAAA,CAAY;AAAA;AAC1C,GACF,CAAA,EACD,KAAA,EACA,GAAA,EAAQ,CAAA,CAAA;AAGd,CAAC;;"}
|
package/dist/esm/index.js
CHANGED
|
@@ -32,6 +32,7 @@ export { StyledInput } from './components/Input/StyledInput.js';
|
|
|
32
32
|
export { StyledRadio } from './components/Radio/StyledRadio.js';
|
|
33
33
|
export { LabeledDatePicker } from './components/DatePicker/LabeledDatePicker.js';
|
|
34
34
|
export { LabeledInput } from './components/Input/LabeledInput.js';
|
|
35
|
+
export { LabeledTextarea } from './components/Textarea/LabeledTextarea.js';
|
|
35
36
|
export { LabeledRadio } from './components/Radio/LabeledRadio.js';
|
|
36
37
|
export { LabeledRadioGroup } from './components/Radio/LabeledRadioGroup.js';
|
|
37
38
|
export { LabelText } from './components/forms/shared/LabelText.js';
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -2739,6 +2739,77 @@ const LabeledInput = React__namespace.default.forwardRef((props, ref) => {
|
|
|
2739
2739
|
return jsxRuntime.jsxs(Stack, { _gap: "base", align: fieldWidth ? "stretch" : void 0, className: classNames__default.default(fieldWidth && calculateResponsiveWidthClasses(fieldWidth), className), children: [label && jsxRuntime.jsx(LabelText, { as: "label", htmlFor: inputId, children: label }), jsxRuntime.jsx(StyledInput, Object.assign({}, rest, { id: inputId, ref, isError: Boolean(errorText), "aria-describedby": [ariaDescribedBy, helperErrorTextId].filter(Boolean).join(" ") })), jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: helperErrorTextId })] });
|
|
2740
2740
|
});
|
|
2741
2741
|
|
|
2742
|
+
var css_248z$8 = "/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n.cweb-textarea {\n resize: none;\n background-color: field;\n}\n.cweb-textarea.has-icon {\n background-size: 24px;\n background-position: 10px 10px;\n background-repeat: no-repeat;\n padding-left: 44px;\n}\n.cweb-textarea.resizable {\n resize: both;\n}\n.cweb-textarea.resizable-x {\n resize: horizontal;\n}\n.cweb-textarea.resizable-y {\n resize: vertical;\n}\n.cweb-textarea:focus {\n border-color: var(--color-primary);\n}\n.cweb-textarea:disabled {\n cursor: not-allowed;\n}\n.cweb-textarea.has-error {\n border: 1px solid #b91c1c;\n color: #991b1b;\n}";
|
|
2743
|
+
styleInject(css_248z$8);
|
|
2744
|
+
|
|
2745
|
+
const resizeTypes = {
|
|
2746
|
+
BOTH: "both",
|
|
2747
|
+
HORIZONTAL: "horizontal",
|
|
2748
|
+
VERTICAL: "vertical"
|
|
2749
|
+
};
|
|
2750
|
+
const Textarea = React__namespace.default.forwardRef((_a, ref) => {
|
|
2751
|
+
var { className, value, name, placeholder, maxLength, rows = 4, resizable = resizeTypes.VERTICAL, isDisabled = false, disabled: nativeDisabled = false, icon, onChange, onBlur, onFocus, onKeyPress, onKeyDown, onCtrlEnter, isError, style: consumerStyle } = _a, otherProps = __rest(_a, ["className", "value", "name", "placeholder", "maxLength", "rows", "resizable", "isDisabled", "disabled", "icon", "onChange", "onBlur", "onFocus", "onKeyPress", "onKeyDown", "onCtrlEnter", "isError", "style"]);
|
|
2752
|
+
const disabled = isDisabled || nativeDisabled;
|
|
2753
|
+
let style = consumerStyle;
|
|
2754
|
+
if (icon) {
|
|
2755
|
+
style = Object.assign(Object.assign({}, consumerStyle), { backgroundImage: `url("${icon}")` });
|
|
2756
|
+
}
|
|
2757
|
+
return jsxRuntime.jsx("textarea", Object.assign({}, otherProps, { name, value, placeholder, onChange, onBlur, onFocus, onKeyPress, onKeyDown: (event) => {
|
|
2758
|
+
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
|
|
2759
|
+
const { ctrlKey, metaKey, key } = event;
|
|
2760
|
+
if ((ctrlKey || metaKey) && key === "Enter") {
|
|
2761
|
+
onCtrlEnter === null || onCtrlEnter === void 0 ? void 0 : onCtrlEnter();
|
|
2762
|
+
}
|
|
2763
|
+
}, maxLength, rows, disabled, className: classNames__default.default([
|
|
2764
|
+
// Base classes
|
|
2765
|
+
className,
|
|
2766
|
+
"cweb-textarea",
|
|
2767
|
+
"ui:w-full",
|
|
2768
|
+
"ui:rounded",
|
|
2769
|
+
"ui:text-sm",
|
|
2770
|
+
// Padding and border
|
|
2771
|
+
"ui:p-2",
|
|
2772
|
+
"ui:border",
|
|
2773
|
+
"ui:border-solid",
|
|
2774
|
+
"ui:input-border",
|
|
2775
|
+
// Colors and states
|
|
2776
|
+
"ui:placeholder-gray-500",
|
|
2777
|
+
"ui:hover:input-border-dark",
|
|
2778
|
+
"ui:focus:outline-primary",
|
|
2779
|
+
"ui:focus:border-primary",
|
|
2780
|
+
// Transitions
|
|
2781
|
+
"ui:transition-colors",
|
|
2782
|
+
"ui:duration-300",
|
|
2783
|
+
{
|
|
2784
|
+
// Disabled state
|
|
2785
|
+
"ui:bg-slate-50 ui:text-slate-400": disabled,
|
|
2786
|
+
"ui:text-on-surface": !disabled,
|
|
2787
|
+
// Normal state (not disabled, not error)
|
|
2788
|
+
"ui:border-input-border": !disabled && !isError,
|
|
2789
|
+
"ui:hover:border-input-border-dark": !disabled,
|
|
2790
|
+
// Error state
|
|
2791
|
+
"ui:border-negative-border": isError,
|
|
2792
|
+
"ui:focus:outline-negative": isError,
|
|
2793
|
+
"ui:focus:border-primary": !isError,
|
|
2794
|
+
"ui:focus:outline-primary": !isError,
|
|
2795
|
+
// Style if icon present, and resizable states
|
|
2796
|
+
"has-icon": !!icon,
|
|
2797
|
+
resizable: resizable === resizeTypes.BOTH,
|
|
2798
|
+
"resizable-x": resizable === resizeTypes.HORIZONTAL,
|
|
2799
|
+
"resizable-y": resizable === resizeTypes.VERTICAL
|
|
2800
|
+
}
|
|
2801
|
+
]), style, ref }));
|
|
2802
|
+
});
|
|
2803
|
+
|
|
2804
|
+
const LabeledTextarea = React__namespace.default.forwardRef((props, ref) => {
|
|
2805
|
+
const { className, helperText, errorText, label, width, fullWidth, id, "aria-describedby": ariaDescribedBy } = props, rest = __rest(props, ["className", "helperText", "errorText", "label", "width", "fullWidth", "id", "aria-describedby"]);
|
|
2806
|
+
const generatedTextareaId = React__namespace.default.useId();
|
|
2807
|
+
const textareaId = id || generatedTextareaId;
|
|
2808
|
+
const helperErrorTextId = React__namespace.default.useId();
|
|
2809
|
+
const fieldWidth = width !== null && width !== void 0 ? width : fullWidth ? "full" : void 0;
|
|
2810
|
+
return jsxRuntime.jsxs(Stack, { _gap: "base", align: fieldWidth ? "stretch" : void 0, className: classNames__default.default(fieldWidth && calculateResponsiveWidthClasses(fieldWidth), className), children: [label && jsxRuntime.jsx(LabelText, { as: "label", htmlFor: textareaId, children: label }), jsxRuntime.jsx(Textarea, Object.assign({}, rest, { id: textareaId, ref, isError: Boolean(errorText), "aria-invalid": Boolean(errorText) || rest["aria-invalid"] || void 0, "aria-describedby": [ariaDescribedBy, helperErrorTextId].filter(Boolean).join(" ") })), jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: helperErrorTextId })] });
|
|
2811
|
+
});
|
|
2812
|
+
|
|
2742
2813
|
const Actions$1 = (props) => {
|
|
2743
2814
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
2744
2815
|
return jsxRuntime.jsx("div", Object.assign({}, rest, { className: classNames__default.default(
|
|
@@ -3146,8 +3217,8 @@ Line.propTypes = {
|
|
|
3146
3217
|
className: PropTypes__default.default.string
|
|
3147
3218
|
};
|
|
3148
3219
|
|
|
3149
|
-
var css_248z$
|
|
3150
|
-
styleInject(css_248z$
|
|
3220
|
+
var css_248z$7 = "/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n.cweb-checkbox {\n outline: none;\n}\n.cweb-checkbox .cweb-checkbox-input {\n position: absolute;\n -webkit-appearance: none;\n height: 1px;\n opacity: 0;\n width: 1px;\n}\n.cweb-checkbox.type-regular .cweb-checkbox-icon-container {\n border-color: #cccccc;\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n}\n.cweb-checkbox.type-regular.hasError .cweb-checkbox-icon-container {\n border-color: var(--ui-color-red-800, #991b1b);\n}\n.cweb-checkbox.type-regular.is-focused .cweb-checkbox-icon-container {\n border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-checked .cweb-checkbox-icon {\n padding: 4px;\n background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2210%22 height%3D%228%22 viewBox%3D%220 0 10 8%22 fill%3D%22none%22%3E %3Cpath d%3D%22M9.207 0.792787C9.39447 0.980314 9.49979 1.23462 9.49979 1.49979C9.49979 1.76495 9.39447 2.01926 9.207 2.20679L4.207 7.20679C4.01947 7.39426 3.76516 7.49957 3.5 7.49957C3.23484 7.49957 2.98053 7.39426 2.793 7.20679L0.793 5.20679C0.610842 5.01818 0.510047 4.76558 0.512326 4.50339C0.514604 4.24119 0.619773 3.99038 0.805181 3.80497C0.990589 3.61956 1.2414 3.51439 1.5036 3.51211C1.7658 3.50983 2.0184 3.61063 2.207 3.79279L3.5 5.08579L7.793 0.792787C7.98053 0.605316 8.23484 0.5 8.5 0.5C8.76516 0.5 9.01947 0.605316 9.207 0.792787Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n.cweb-checkbox.type-regular.is-checked .cweb-checkbox-icon-container {\n border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-checked.is-focused .cweb-checkbox-icon-container {\n border-color: #1d4ed8;\n}\n.cweb-checkbox.type-regular.is-indeterminate .cweb-checkbox-icon {\n width: 0.5rem;\n height: 0.5rem;\n padding: 4px;\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%222%22 viewBox%3D%220 0 10 2%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M9 -4.37114e-08C9.55228 -1.95703e-08 10 0.447715 10 1C10 1.55228 9.55228 2 9 2L1 2C0.447716 2 -6.78525e-08 1.55228 -4.37114e-08 1C-1.95703e-08 0.447715 0.447715 -4.17544e-07 1 -3.93402e-07L9 -4.37114e-08Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n.cweb-checkbox.type-regular.is-indeterminate .cweb-checkbox-icon-container {\n border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-indeterminate.is-focused .cweb-checkbox-icon-container {\n border-color: #1d4ed8;\n}\n.cweb-checkbox.type-regular.is-disabled.show-cross-when-disabled .cweb-checkbox-icon {\n width: 10px;\n height: 10px;\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2211px%22 height%3D%2211px%22 viewBox%3D%220 0 11 11%22 version%3D%221.1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg stroke%3D%22none%22 stroke-width%3D%221%22 fill%3D%22none%22 fill-rule%3D%22evenodd%22 stroke-linecap%3D%22round%22%3E %3Cg transform%3D%22translate(-6.000000%2C -7.000000)%22 stroke%3D%22%232D2D2D%22 stroke-width%3D%222%22%3E %3Cpath d%3D%22M7%2C17 L16%2C8 M16%2C17 L7%2C8%22 %2F%3E %3C%2Fg%3E %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n opacity: 0.6;\n}";
|
|
3221
|
+
styleInject(css_248z$7);
|
|
3151
3222
|
|
|
3152
3223
|
const CheckboxInner = (props) => {
|
|
3153
3224
|
const { id, explanation, type = "regular", isChecked = false, isIndeterminate = false, isDisabled, name, value, onChange, onClick, className, classNameCheckboxLabel, error, innerRef } = props;
|
|
@@ -3265,8 +3336,8 @@ var img$3 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:
|
|
|
3265
3336
|
|
|
3266
3337
|
var img$2 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='margin: auto%3b background: none%3b display: block%3b shape-rendering: auto%3b' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3e%3ccircle cx='50' cy='50' fill='none' stroke='%23cbd5e1' stroke-width='16' r='36' stroke-dasharray='169.64600329384882 58.548667764616276'%3e %3canimateTransform attributeName='transform' type='rotate' repeatCount='indefinite' dur='1.1111111111111112s' values='0 50 50%3b360 50 50' keyTimes='0%3b1'%3e%3c/animateTransform%3e%3c/circle%3e%3c!-- %5bldio%5d generated by https://loading.io/ --%3e%3c/svg%3e";
|
|
3267
3338
|
|
|
3268
|
-
var css_248z$
|
|
3269
|
-
styleInject(css_248z$
|
|
3339
|
+
var css_248z$6 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-loading {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.cweb-loading .cweb-loading-text {\n margin-bottom: 24px;\n}\n.cweb-loading.as-modal {\n position: fixed;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n z-index: 9999;\n background-color: rgba(255, 255, 255, 0.6);\n}\n.cweb-loading.as-modal .cweb-loading-panel {\n position: relative;\n width: 320px;\n min-height: 120px;\n border-radius: 4px;\n padding: 16px;\n box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.36);\n background-color: #ffffff;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n}\n.cweb-loading.as-modal .cweb-loading-panel:before {\n position: absolute;\n content: \"\";\n top: 0;\n left: 0;\n right: 0;\n z-index: 1;\n height: 3px;\n background-color: #6abfa5;\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}";
|
|
3340
|
+
styleInject(css_248z$6);
|
|
3270
3341
|
|
|
3271
3342
|
function LoadingIndicator(_a) {
|
|
3272
3343
|
var { asModal = false, asSpinner = false, className = "", spinnerColor = "blue", dataTestId = "loading-indicator" } = _a, restProps = __rest(_a, ["asModal", "asSpinner", "className", "spinnerColor", "dataTestId"]);
|
|
@@ -3460,8 +3531,8 @@ const PaginationMenuSmall = (props) => {
|
|
|
3460
3531
|
return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TertiaryButton, { "aria-label": localization.previous, "data-test-id": "prev-button", leadingIcon: jsxRuntime.jsx(ChevronLeftIcon, {}), "data-page": props.currentPageNumber - 1, onClick: handleOnChange, disabled: props.currentPageNumber === 1 }), jsxRuntime.jsx(Text, { className: "ui:ml-4", variant: "sm", color: "slate-500", children: `${props.currentPageNumber} / ${props.pageCount}` }), jsxRuntime.jsx(TertiaryButton, { className: "ui:ml-4", "aria-label": localization.next, "data-test-id": "next-button", leadingIcon: jsxRuntime.jsx(ChevronRightIcon, {}), disabled: props.currentPageNumber === props.pageCount, "data-page": props.currentPageNumber + 1, onClick: handleOnChange })] });
|
|
3461
3532
|
};
|
|
3462
3533
|
|
|
3463
|
-
var css_248z$
|
|
3464
|
-
styleInject(css_248z$
|
|
3534
|
+
var css_248z$5 = ".styled-select {\n appearance: none;\n}\n.styled-select::picker-icon {\n appearance: none;\n}";
|
|
3535
|
+
styleInject(css_248z$5);
|
|
3465
3536
|
|
|
3466
3537
|
const StyledSelect = React__namespace.default.forwardRef((_a, ref) => {
|
|
3467
3538
|
var { children, suffix, prefix, className, width = "full", height = "lg", isError } = _a, attributes = __rest(_a, ["children", "suffix", "prefix", "className", "width", "height", "isError"]);
|
|
@@ -3932,8 +4003,8 @@ const NavLayout = (props) => {
|
|
|
3932
4003
|
}), children })] })] })] }));
|
|
3933
4004
|
};
|
|
3934
4005
|
|
|
3935
|
-
var css_248z$
|
|
3936
|
-
styleInject(css_248z$
|
|
4006
|
+
var css_248z$4 = ".cweb-page {\n width: 100%;\n max-width: 1140px;\n margin: 32px auto 0 auto;\n}\n.cweb-page .cweb-page-breadcrumbs {\n margin-bottom: 16px;\n}\n.cweb-page .page-spinner {\n margin-left: 8px;\n margin-bottom: 4px;\n}\n.cweb-page .page-spinner img {\n width: 21px;\n}\n.cweb-page .cweb-page-header {\n display: flex;\n align-items: center;\n width: 100%;\n flex-grow: 0;\n}\n.cweb-page .cweb-page-header .cweb-page-title {\n display: inline;\n}\n.cweb-page .cweb-page-header.accessory-right {\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n}\n@media screen and (max-width: 426px) {\n .cweb-page .cweb-page-header.accessory-bottom {\n max-width: 75vw;\n }\n .cweb-page .cweb-page-header.accessory-bottom img {\n max-width: 10vw;\n }\n .cweb-page .cweb-page-header.accessory-bottom button p {\n font-size: 4vw;\n }\n}\n.cweb-page .cweb-page-header.accessory-bottom {\n flex-direction: column;\n align-items: flex-start;\n}\n.cweb-page .cweb-page-header.accessory-bottom .cweb-page-title {\n margin-bottom: 8px;\n display: inline;\n}";
|
|
4007
|
+
styleInject(css_248z$4);
|
|
3937
4008
|
|
|
3938
4009
|
function Page({
|
|
3939
4010
|
dataTestId = "page",
|
|
@@ -4112,8 +4183,8 @@ const Breadcrumbs = ({
|
|
|
4112
4183
|
return jsxRuntime.jsx("ul", { "data-test-id": "breadcrumbs", className: "ui:flex ui:flex-row ui:flex-wrap ui:items-center", children: (isTruncated ? crumbsAndDivider : crumbs).map((crumbOrDividerProps) => isBreadcrumbDividerProps(crumbOrDividerProps) ? jsxRuntime.jsx(BreadcrumbDividerItem, Object.assign({}, crumbOrDividerProps), `divider-${truncatedCrumbs.map((crumb) => crumb.name).join("-")}`) : jsxRuntime.jsx(BreadcrumbItem, Object.assign({}, crumbOrDividerProps, { render: renderItem }), crumbOrDividerProps.key || crumbOrDividerProps.name)) });
|
|
4113
4184
|
};
|
|
4114
4185
|
|
|
4115
|
-
var css_248z$
|
|
4116
|
-
styleInject(css_248z$
|
|
4186
|
+
var css_248z$3 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n/**\n * Avenir is NOT declared here. The library does not ship font files, so any\n * `@font-face` written against a path in this repo resolves against the\n * consuming app's document and 404s there. Providing the typeface is the\n * consumer's responsibility; this rule only names it.\n */\n.title-avenir {\n font-family: \"AvenirNextLTPro-Bold\", \"Roboto\", sans-serif;\n}\n\n.title-inter {\n font-family: \"Inter\", \"Roboto\", \"Helvetica\", sans-serif;\n}";
|
|
4187
|
+
styleInject(css_248z$3);
|
|
4117
4188
|
|
|
4118
4189
|
const PageTitle = (props) => {
|
|
4119
4190
|
const { as: Component = "h2", className } = props, rest = __rest(props, ["as", "className"]);
|
|
@@ -4322,8 +4393,8 @@ const Section = (_a) => {
|
|
|
4322
4393
|
}), children: isLoading ? null : children }), footer && jsxRuntime.jsx(SectionFooter, { children: footer })] }));
|
|
4323
4394
|
};
|
|
4324
4395
|
|
|
4325
|
-
var css_248z$
|
|
4326
|
-
styleInject(css_248z$
|
|
4396
|
+
var css_248z$2 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-list-item {\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n padding: 16px 0 16px 0;\n border-bottom: 1px solid #eeeeee;\n}\n.cweb-list-item:last-child {\n border-bottom: none;\n}\n.cweb-list-item.cweb-list-item-clickable {\n cursor: pointer;\n}\n.cweb-list-item.cweb-list-item-clickable:hover {\n background-color: #f2fafd;\n}";
|
|
4397
|
+
styleInject(css_248z$2);
|
|
4327
4398
|
|
|
4328
4399
|
const SectionItem = (props) => {
|
|
4329
4400
|
const { children, className, onClick } = props, rest = __rest(props, ["children", "className", "onClick"]);
|
|
@@ -4340,8 +4411,8 @@ function SectionItemWithContent(props) {
|
|
|
4340
4411
|
return jsxRuntime.jsxs(SectionItem, Object.assign({ className: mergedClasses, onClick }, rest, { children: [icon && jsxRuntime.jsx("img", { className: iconClasses, src: icon, alt: "" }), jsxRuntime.jsx(Text, { children: text })] }));
|
|
4341
4412
|
}
|
|
4342
4413
|
|
|
4343
|
-
var css_248z$
|
|
4344
|
-
styleInject(css_248z$
|
|
4414
|
+
var css_248z$1 = ".customized-select [class*=MenuList] [class*=option]::after {\n position: absolute;\n content: \"\";\n background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E %3Cg transform%3D%22translate(1.5%2C 0.5)%22%3E %3Cpath fill%3D%22none%22 fill-rule%3D%22evenodd%22 stroke%3D%22%230074DD%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22 stroke-width%3D%222%22 d%3D%22M12.643 3.357L6.03 9.97l-2.674 2.674L0 9.286%22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n right: 12px;\n height: 1rem;\n width: 1rem;\n}";
|
|
4415
|
+
styleInject(css_248z$1);
|
|
4345
4416
|
|
|
4346
4417
|
const SelectDropdownIndicator = (props) => jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, Object.assign({}, props, { children: props.isMulti ? jsxRuntime.jsx(ChevronDoubleIcon, {}) : jsxRuntime.jsx(ChevronDownIcon, {}) }));
|
|
4347
4418
|
|
|
@@ -5109,7 +5180,7 @@ const ActionCard = ({ type, iconUrl, title, metadata, instruments, actions, drag
|
|
|
5109
5180
|
}) })] }), actions && jsxRuntime.jsx(Box, { className: "ui:relative ui:z-[1] ui:shrink-0 ui:self-center", children: actions })] }) });
|
|
5110
5181
|
};
|
|
5111
5182
|
|
|
5112
|
-
const ScheduleItem = ({ icon, label, value, detail }) => jsxRuntime.jsxs(Stack, { axis: "x", align: "start", _gap: "base", children: [jsxRuntime.jsx(Box, { "aria-hidden": true, _p: "s", className: "ui:size-[var(--ui-semantic-size-xl)] ui:shrink-0 ui:[border-radius:var(--ui-semantic-radius-s)]", children: icon }), jsxRuntime.jsxs(Stack, { _gap: "none", className: "ui:min-w-0", children: [jsxRuntime.jsxs(Stack, { axis: "x", align: "baseline", _gap: "s", wrap: true, children: [jsxRuntime.jsx(Text, { variant: "body-base-light", color: "neutral-secondary", children: label }), jsxRuntime.jsx(Text, { variant: "body-base-regular", color: "neutral-secondary", children: value })] }), detail && jsxRuntime.jsx(Text, { variant: "body-small-regular", color: "neutral-secondary", children: detail })] })] });
|
|
5183
|
+
const ScheduleItem = ({ icon, label, value, detail }) => jsxRuntime.jsxs(Stack, { axis: "x", align: "start", _gap: "base", children: [jsxRuntime.jsx(Box, { "aria-hidden": true, _p: "s", className: "ui:size-[var(--ui-semantic-size-xl)] ui:shrink-0 ui:[border-radius:var(--ui-semantic-radius-s)]", children: icon }), jsxRuntime.jsxs(Stack, { _gap: "none", className: "ui:min-w-0", children: [jsxRuntime.jsxs(Stack, { axis: "x", align: "baseline", _gap: "s", wrap: true, className: "ui:min-h-[var(--ui-semantic-size-xl)] ui:content-center", children: [jsxRuntime.jsx(Text, { variant: "body-base-light", color: "neutral-secondary", children: label }), jsxRuntime.jsx(Text, { variant: "body-base-regular", color: "neutral-secondary", children: value })] }), detail && jsxRuntime.jsx(Text, { variant: "body-small-regular", color: "neutral-secondary", children: detail })] })] });
|
|
5113
5184
|
const ActionCardDetailed = ({ type, iconUrl, title, category, metadata, schedule, scheduleHeading = "Schedule settings", instruments, instrumentsHeading = "Instruments in this action", children, editLabel = "Edit action", deleteLabel = "Delete action", closeLabel = "Close action details", onEdit, onDelete, onClose, className }) => {
|
|
5114
5185
|
const hasActions = onEdit || onDelete || onClose;
|
|
5115
5186
|
return jsxRuntime.jsx(Card, { border: true, borderRadius: "m", elevation: "medium", className: classNames__default.default("ui:w-full ui:max-w-[600px]", className), children: jsxRuntime.jsxs(Stack, { _gap: "xl", width: "full", children: [jsxRuntime.jsxs(Stack, { axis: "x", align: "start", justify: "between", _gap: "base", width: "full", children: [jsxRuntime.jsxs(Stack, { axis: "x", align: "start", _gap: "base", className: "ui:min-w-0", children: [jsxRuntime.jsx(ActionIcon, { type, iconUrl, size: 24 }), jsxRuntime.jsxs(Stack, { _gap: "none", className: "ui:min-w-0", children: [jsxRuntime.jsx(Heading, { variant: "h3", children: title }), category && jsxRuntime.jsx(Text, { variant: "body-base-regular", color: "neutral-secondary", children: category })] })] }), hasActions && jsxRuntime.jsxs(Stack, { axis: "x", align: "center", _gap: "base", className: "ui:shrink-0", children: [onEdit && jsxRuntime.jsx(TertiaryIconButton, { label: editLabel, onClick: onEdit, children: jsxRuntime.jsx(PencilIcon, { "aria-hidden": true }) }), onDelete && jsxRuntime.jsx(TertiaryIconButton, { label: deleteLabel, onClick: onDelete, children: jsxRuntime.jsx(TrashBinIcon, { "aria-hidden": true }) }), onClose && jsxRuntime.jsx(TertiaryIconButton, { label: closeLabel, onClick: onClose, children: jsxRuntime.jsx(CrossIcon, { "aria-hidden": true }) })] })] }), metadata && metadata.length > 0 && jsxRuntime.jsx(Stack, { axis: "x", _gap: "base", wrap: true, children: metadata.map((item, index) => jsxRuntime.jsx(
|
|
@@ -5127,69 +5198,6 @@ const ActionCardDetailed = ({ type, iconUrl, title, category, metadata, schedule
|
|
|
5127
5198
|
)) })] }), children ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Divider, { version: "v2", className: "ui:w-full" }), jsxRuntime.jsx(Stack, { _gap: "base", width: "full", children })] }) : null] }) });
|
|
5128
5199
|
};
|
|
5129
5200
|
|
|
5130
|
-
var css_248z$1 = "/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n.cweb-textarea {\n resize: none;\n background-color: field;\n}\n.cweb-textarea.has-icon {\n background-size: 24px;\n background-position: 10px 10px;\n background-repeat: no-repeat;\n padding-left: 44px;\n}\n.cweb-textarea.resizable {\n resize: both;\n}\n.cweb-textarea.resizable-x {\n resize: horizontal;\n}\n.cweb-textarea.resizable-y {\n resize: vertical;\n}\n.cweb-textarea:focus {\n border-color: var(--color-primary);\n}\n.cweb-textarea:disabled {\n cursor: not-allowed;\n}\n.cweb-textarea.has-error {\n border: 1px solid #b91c1c;\n color: #991b1b;\n}";
|
|
5131
|
-
styleInject(css_248z$1);
|
|
5132
|
-
|
|
5133
|
-
const resizeTypes = {
|
|
5134
|
-
BOTH: "both",
|
|
5135
|
-
HORIZONTAL: "horizontal",
|
|
5136
|
-
VERTICAL: "vertical"
|
|
5137
|
-
};
|
|
5138
|
-
const Textarea = React__namespace.default.forwardRef((_a, ref) => {
|
|
5139
|
-
var { className, value, name, placeholder, maxLength, rows = 4, resizable = resizeTypes.VERTICAL, isDisabled = false, icon, onChange, onBlur, onFocus, onKeyPress, onKeyDown, onCtrlEnter, isError } = _a, otherProps = __rest(_a, ["className", "value", "name", "placeholder", "maxLength", "rows", "resizable", "isDisabled", "icon", "onChange", "onBlur", "onFocus", "onKeyPress", "onKeyDown", "onCtrlEnter", "isError"]);
|
|
5140
|
-
let style;
|
|
5141
|
-
if (icon) {
|
|
5142
|
-
style = {
|
|
5143
|
-
backgroundImage: `url("${icon}")`
|
|
5144
|
-
};
|
|
5145
|
-
}
|
|
5146
|
-
return jsxRuntime.jsx("textarea", Object.assign({}, otherProps, { name, value, placeholder, onChange, onBlur, onFocus, onKeyPress, onKeyDown: (event) => {
|
|
5147
|
-
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
|
|
5148
|
-
const { ctrlKey, metaKey, key } = event;
|
|
5149
|
-
if ((ctrlKey || metaKey) && key === "Enter") {
|
|
5150
|
-
onCtrlEnter === null || onCtrlEnter === void 0 ? void 0 : onCtrlEnter();
|
|
5151
|
-
}
|
|
5152
|
-
}, maxLength, rows, disabled: isDisabled, className: classNames__default.default([
|
|
5153
|
-
// Base classes
|
|
5154
|
-
className,
|
|
5155
|
-
"cweb-textarea",
|
|
5156
|
-
"ui:w-full",
|
|
5157
|
-
"ui:rounded",
|
|
5158
|
-
"ui:text-sm",
|
|
5159
|
-
// Padding and border
|
|
5160
|
-
"ui:p-2",
|
|
5161
|
-
"ui:border",
|
|
5162
|
-
"ui:border-solid",
|
|
5163
|
-
"ui:input-border",
|
|
5164
|
-
// Colors and states
|
|
5165
|
-
"ui:placeholder-gray-500",
|
|
5166
|
-
"ui:hover:input-border-dark",
|
|
5167
|
-
"ui:focus:outline-primary",
|
|
5168
|
-
"ui:focus:border-primary",
|
|
5169
|
-
// Transitions
|
|
5170
|
-
"ui:transition-colors",
|
|
5171
|
-
"ui:duration-300",
|
|
5172
|
-
{
|
|
5173
|
-
// Disabled state
|
|
5174
|
-
"ui:bg-slate-50 ui:text-slate-400": isDisabled,
|
|
5175
|
-
"ui:text-on-surface": !isDisabled,
|
|
5176
|
-
// Normal state (not disabled, not error)
|
|
5177
|
-
"ui:border-input-border": !isDisabled && !isError,
|
|
5178
|
-
"ui:hover:border-input-border-dark": !isDisabled,
|
|
5179
|
-
// Error state
|
|
5180
|
-
"ui:border-negative-border": isError,
|
|
5181
|
-
"ui:focus:outline-negative": isError,
|
|
5182
|
-
"ui:focus:border-primary": !isError,
|
|
5183
|
-
"ui:focus:outline-primary": !isError,
|
|
5184
|
-
// Style if icon present, and resizable states
|
|
5185
|
-
"has-icon": !!icon,
|
|
5186
|
-
resizable: resizable === resizeTypes.BOTH,
|
|
5187
|
-
"resizable-x": resizable === resizeTypes.HORIZONTAL,
|
|
5188
|
-
"resizable-y": resizable === resizeTypes.VERTICAL
|
|
5189
|
-
}
|
|
5190
|
-
]), style, ref }));
|
|
5191
|
-
});
|
|
5192
|
-
|
|
5193
5201
|
const LinkTooltip = ({ linkElement, editorInstance, onClose, translations }) => {
|
|
5194
5202
|
const dialogRef = React.useRef(null);
|
|
5195
5203
|
const anchorName = React.useRef(`link-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`);
|
|
@@ -7532,6 +7540,7 @@ exports.LabeledRadioCardGroup = LabeledRadioCardGroup;
|
|
|
7532
7540
|
exports.LabeledRadioGroup = LabeledRadioGroup;
|
|
7533
7541
|
exports.LabeledSelect = LabeledSelect;
|
|
7534
7542
|
exports.LabeledSelectSearchable = LabeledSelectSearchable;
|
|
7543
|
+
exports.LabeledTextarea = LabeledTextarea;
|
|
7535
7544
|
exports.LifebuoyIcon = LifebuoyIcon;
|
|
7536
7545
|
exports.LightBulbIcon = LightBulbIcon;
|
|
7537
7546
|
exports.Line = Line;
|