@luscii-healthtech/web-ui 28.4.0 → 28.4.1
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/NotificationBanner/NotificationBanner.d.ts +0 -1
- package/dist/index.development.js +16 -19
- package/dist/index.development.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/web-ui-tailwind.css +15 -0
- package/dist/web-ui.esm.js +1 -1
- package/dist/web-ui.esm.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { IconProps } from "../Icons/types/IconProps.type";
|
|
3
|
-
import "./NotificationBanner.css";
|
|
4
3
|
export type NotificationBannerColor = "base" | "blue" | "red" | "green" | "amber";
|
|
5
4
|
export interface NotificationBannerLinkProps {
|
|
6
5
|
text: string;
|
|
@@ -884,8 +884,8 @@ function styleInject(css, ref) {
|
|
|
884
884
|
}
|
|
885
885
|
}
|
|
886
886
|
|
|
887
|
-
var css_248z$
|
|
888
|
-
styleInject(css_248z$
|
|
887
|
+
var css_248z$j = "/* https://stackoverflow.com/a/13924997 */\n.ui-text-two-lines-max {\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n /* number of lines to show */\n -webkit-line-clamp: 2;\n line-clamp: 2;\n -webkit-box-orient: vertical;\n}\n";
|
|
888
|
+
styleInject(css_248z$j);
|
|
889
889
|
|
|
890
890
|
const allowedTextStyles = {
|
|
891
891
|
sm: "ui-text-xs ui-font-medium",
|
|
@@ -1028,8 +1028,8 @@ toast.info = (message) => {
|
|
|
1028
1028
|
showToaster({ message, type: "success", showIcon: true, title: "" });
|
|
1029
1029
|
};
|
|
1030
1030
|
|
|
1031
|
-
var css_248z$
|
|
1032
|
-
styleInject(css_248z$
|
|
1031
|
+
var css_248z$i = "/**\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/** Load Avenir fonts for titles */\n@font-face {\n font-family: \"AvenirNextLTPro-Regular\";\n src: url(\"../../../public/fonts/avenir/3A0AF8_1_0.eot\");\n src: url(\"../../../public/fonts/avenir/3A0AF8_1_0.eot\") format(\"embedded-opentype\"), url(\"../../../public/fonts/avenir/3A0AF8_1_0.woff2\") format(\"woff2\"), url(\"../../../public/fonts/avenir/3A0AF8_1_0.woff\") format(\"woff\"), url(\"../../../public/fonts/avenir/3A0AF8_1_0.ttf\") format(\"truetype\");\n}\n@font-face {\n font-family: \"AvenirNextLTPro-Bold\";\n src: url(\"../../../public/fonts/avenir/3A0AF8_0_0.eot\");\n src: url(\"../../../public/fonts/avenir/3A0AF8_0_0.eot\") format(\"embedded-opentype\"), url(\"../../../public/fonts/avenir/3A0AF8_0_0.woff2\") format(\"woff2\"), url(\"../../../public/fonts/avenir/3A0AF8_0_0.woff\") format(\"woff\"), url(\"../../../public/fonts/avenir/3A0AF8_0_0.ttf\") format(\"truetype\");\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}";
|
|
1032
|
+
styleInject(css_248z$i);
|
|
1033
1033
|
|
|
1034
1034
|
const Title = (props) => {
|
|
1035
1035
|
var _a, _b;
|
|
@@ -1112,8 +1112,8 @@ const Accordion = ({ dataTestId, isCollapsedByDefault = false, items, className,
|
|
|
1112
1112
|
);
|
|
1113
1113
|
};
|
|
1114
1114
|
|
|
1115
|
-
var css_248z$
|
|
1116
|
-
styleInject(css_248z$
|
|
1115
|
+
var css_248z$h = ".list-skeleton .skeleton-box {\n display: inline-block;\n height: 1em;\n position: relative;\n overflow: hidden;\n background-color: #cbd5e1;\n border-radius: 3px;\n}\n.list-skeleton .skeleton-box::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));\n animation: shimmer 800ms infinite;\n content: \"\";\n}\n.list-skeleton .skeleton-box.is-circle {\n border-radius: 50%;\n}\n.list-skeleton .skeleton-box.is-button::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(90deg, rgba(221, 221, 221, 0) 0, rgba(221, 221, 221, 0.2) 20%, rgba(221, 221, 221, 0.5) 60%, rgba(221, 221, 221, 0));\n animation: shimmer 800ms infinite;\n content: \"\";\n}\n@keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n}";
|
|
1116
|
+
styleInject(css_248z$h);
|
|
1117
1117
|
|
|
1118
1118
|
const ListItemSkeleton = () => {
|
|
1119
1119
|
return React__namespace.default.createElement(
|
|
@@ -1341,8 +1341,8 @@ const DraggableBaseList = (_a) => {
|
|
|
1341
1341
|
return React__namespace.default.createElement(BaseList, Object.assign({}, props, { items, itemComponent: DraggableBaseListItem }));
|
|
1342
1342
|
};
|
|
1343
1343
|
|
|
1344
|
-
var css_248z$
|
|
1345
|
-
styleInject(css_248z$
|
|
1344
|
+
var css_248z$g = ".dropzone-dashed-border {\n border-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 fill%3D%22none%22%3E %3Cpath fill%3D%22%230074DD%22 fill-rule%3D%22evenodd%22 d%3D%22M8 0v1h8V0H8Zm0 23v1h8v-1H8ZM0 8h1v8H0V8Zm24 0h-1v8h1V8ZM1 0h3v1H1v3H0V0h1ZM0 23v-3h1v3h3v1H0v-1Zm20 0v1h4v-4h-1v3h-3Zm0-22V0h4v4h-1V1h-3Z%22 clip-rule%3D%22evenodd%22 %2F%3E%3C%2Fsvg%3E\") 1 1 1 1;\n border-image-width: 4px;\n border-image-slice: 4 4 4 4;\n border-image-repeat: round;\n}";
|
|
1345
|
+
styleInject(css_248z$g);
|
|
1346
1346
|
|
|
1347
1347
|
const DefaultState = ({ icon, message, horizontal = false, alignMessage = "center" }) => {
|
|
1348
1348
|
if (!icon && !message) {
|
|
@@ -1423,8 +1423,8 @@ const SortableBaseList = (_a) => {
|
|
|
1423
1423
|
);
|
|
1424
1424
|
};
|
|
1425
1425
|
|
|
1426
|
-
var css_248z$
|
|
1427
|
-
styleInject(css_248z$
|
|
1426
|
+
var css_248z$f = "li.gu-mirror {\n position: fixed;\n z-index: 9999;\n margin: 0px;\n --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\nli.gu-hide {\n display: none\n}\nli.gu-unselectable {\n user-select: none\n}\nli.gu-transit {\n --tw-bg-opacity: 1;\n background-color: rgb(239 246 255 / var(--tw-bg-opacity));\n filter: none;\n border-radius: 0px;\n border-style: none;\n opacity: 1\n}\nli.gu-transit > * {\n visibility: hidden\n}";
|
|
1427
|
+
styleInject(css_248z$f);
|
|
1428
1428
|
|
|
1429
1429
|
const ListItem = (props) => {
|
|
1430
1430
|
return React__namespace.default.createElement(BaseListItem, Object.assign({}, props));
|
|
@@ -1730,8 +1730,8 @@ var img$e = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:
|
|
|
1730
1730
|
|
|
1731
1731
|
var img$d = "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";
|
|
1732
1732
|
|
|
1733
|
-
var css_248z$
|
|
1734
|
-
styleInject(css_248z$
|
|
1733
|
+
var css_248z$e = "/**\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}";
|
|
1734
|
+
styleInject(css_248z$e);
|
|
1735
1735
|
|
|
1736
1736
|
function LoadingIndicator(_a) {
|
|
1737
1737
|
var { asModal = false, asSpinner = false, className = "", spinnerColor = "blue", dataTestId = "loading-indicator" } = _a, restProps = __rest(_a, ["asModal", "asSpinner", "className", "spinnerColor", "dataTestId"]);
|
|
@@ -2372,8 +2372,8 @@ const Badge = (props) => {
|
|
|
2372
2372
|
);
|
|
2373
2373
|
};
|
|
2374
2374
|
|
|
2375
|
-
var css_248z$
|
|
2376
|
-
styleInject(css_248z$
|
|
2375
|
+
var css_248z$d = ".entity-preview-dots.glider-dots {\n padding-top: 1rem;\n}\n.entity-preview-dots.glider-dots .glider-dot {\n margin: 0.25rem;\n height: 0.5rem;\n width: 0.5rem;\n --tw-bg-opacity: 1;\n background-color: rgb(239 246 255 / var(--tw-bg-opacity));\n}\n.entity-preview-dots.glider-dots .glider-dot:focus {\n outline-color: #1e40af;\n}\n.entity-preview-dots.glider-dots .glider-dot.active, .entity-preview-dots.glider-dots .glider-dot:focus {\n --tw-bg-opacity: 1;\n background-color: rgb(30 64 175 / var(--tw-bg-opacity));\n}\n\n.glider-slide {\n visibility: hidden;\n}\n\n.glider-slide.visible,\n.glider-slide.active {\n visibility: visible;\n}";
|
|
2376
|
+
styleInject(css_248z$d);
|
|
2377
2377
|
|
|
2378
2378
|
const GliderContainer = (props) => React__namespace.default.createElement(
|
|
2379
2379
|
"div",
|
|
@@ -2425,8 +2425,8 @@ const Carousel = ({ slides, className, id }) => {
|
|
|
2425
2425
|
) : React__namespace.default.createElement(React__namespace.default.Fragment, null);
|
|
2426
2426
|
};
|
|
2427
2427
|
|
|
2428
|
-
var css_248z$
|
|
2429
|
-
styleInject(css_248z$
|
|
2428
|
+
var css_248z$c = "/**\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-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 width: 16px;\n height: 16px;\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: #ff6266;\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 width: 0.5rem;\n height: 0.5rem;\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}\n.cweb-checkbox.type-switch .cweb-checkbox-label {\n display: flex;\n align-items: center;\n margin-bottom: 0;\n width: 56px;\n height: 28px;\n position: relative;\n}\n.cweb-checkbox.type-switch .cweb-checkbox-icon-container {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #d1d5db;\n border-radius: 16px;\n}\n.cweb-checkbox.type-switch .cweb-checkbox-icon-container:after {\n position: relative;\n display: block;\n content: \"\";\n height: 20px;\n width: 20px;\n top: 4px;\n left: 4px;\n background-color: white;\n border-radius: 50%;\n}\n.cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container {\n background-color: #6abfa6;\n}\n.cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container:after {\n left: 32px;\n}";
|
|
2429
|
+
styleInject(css_248z$c);
|
|
2430
2430
|
|
|
2431
2431
|
const CheckboxInner = (props) => {
|
|
2432
2432
|
const { id, explanation, type = "regular", isChecked = false, isIndeterminate = false, isDisabled, name, value, onChange, className, classNameCheckboxLabel, error, innerRef } = props;
|
|
@@ -2550,9 +2550,6 @@ const TextLink = (props) => {
|
|
|
2550
2550
|
return React__namespace.default.createElement("a", { href: props.href, rel: props.rel, target: props.target, onClick: props.onClick, className: classNames__default.default(className, props.className) }, props.text);
|
|
2551
2551
|
};
|
|
2552
2552
|
|
|
2553
|
-
var css_248z$c = "/* Overrides for components we cannot control inside the notification banner component */\n\n[data-test-id=\"notification-banner\"] a {\n\n --tw-text-opacity: 1;\n\n color: rgb(30 64 175 / var(--tw-text-opacity))\n}\n\n[data-test-id=\"notification-banner\"] a:hover {\n\n --tw-text-opacity: 1;\n\n color: rgb(30 58 138 / var(--tw-text-opacity))\n}\n";
|
|
2554
|
-
styleInject(css_248z$c);
|
|
2555
|
-
|
|
2556
2553
|
const NotificationBanner = (props) => {
|
|
2557
2554
|
const { stretch = true, centerContent = false, noBorder = false } = props;
|
|
2558
2555
|
const classes = classNames__default.default("ui-px-4 ui-py-4 ui-min-h-13 ui-flex ui-flex-row ui-items-center ui-rounded", props.className, {
|