sccoreui 2.4.7 → 2.5.0

package/dist/App.scss

@@ -75,13 +75,13 @@ h3 {
   &.horizontal::before {
     height: 2px;
     width: 100%;
-    top: 13%;
+    top: 11%;
   }
 
   &.vertical::before {
     height: 100%;
     width: 2px;
-    left: 11px;
+    left: 5%;
     top: 0;
   }
 }
@@ -92,13 +92,13 @@ h3 {
 
   &.horizontal {
     left: 0;
-    top: 13%;
     height: 2px;
+    top: 11%;
   }
 
   &.vertical {
     width: 2px;
-    left: 11px;
+    left: 5%;
     top: 0;
   }
 }
@@ -127,4 +127,4 @@ h3 {
       transform: translateY(100%);
     }
   }
-}
+}

package/dist/assets/sccoreui.css

@@ -960,7 +960,6 @@ a {
   height: 40px;
 }
 
-
 .p-inputgroup > .p-dropdown {
   background: #ffffff;
   height: 40px;
@@ -2114,8 +2113,8 @@ a {
   width: 0.286rem;
 }
 .p-slider.p-slider-vertical .p-slider-handle {
-  margin-left: -0.5715rem;
-  margin-bottom: -0.5715rem;
+  margin-left: -0.715rem;
+  margin-bottom: -0.715rem;
 }
 .p-slider .p-slider-handle {
   height: 1.5rem;
@@ -2372,6 +2371,7 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
   background-color: transparent;
   color: var(--gray-600);
   border-color: transparent;
+  box-shadow: none;
 }
 .p-button.p-button-text:enabled:hover,
 .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover {
@@ -2435,17 +2435,17 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
   border-radius: 50%;
   height: 3rem;
 }
-.p-button.p-button-sm {
+/* .p-button.p-button-sm {
   font-size: 0.875rem;
   padding: 0.65625rem 1.09375rem;
-}
+} */
 .p-button.p-button-sm .p-button-icon {
   font-size: 0.875rem;
 }
-.p-button.p-button-lg {
+/* .p-button.p-button-lg {
   font-size: 1.25rem;
   padding: 0.9375rem 1.5625rem;
-}
+} */
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
@@ -2484,14 +2484,15 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
 } */
 
 .p-fileupload .p-button {
-  background-color: #f4f6fd !important;
+  background-color: transparent;
   color: var(--gray-900);
   height: 48px !important;
   line-height: 48px !important;
   padding: 0px 22px;
   border-radius: 4px;
-  border: 1px dashed #c6cae0;
+  border: 1px dashed var(--gray-500);
   font-size: 14px;
+  box-shadow: none;
 }
 
 .p-fileupload .p-button .p-button-icon {
@@ -2508,6 +2509,7 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
 .p-fileupload .p-button:enabled:hover,
 .p-button:not(button):not(a):not(.p-disabled):hover {
   color: var(--gray-900);
+  background: var(--gray-50);
 }
 
 .p-button.p-button-secondary,
@@ -5827,7 +5829,7 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
 }
 
 .p-dialog {
-  border-radius: 6px;
+  border-radius: 12px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   border: 0 none;
 }
@@ -5872,8 +5874,8 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
   padding: 24px;
 }
 .p-dialog .p-dialog-content:last-of-type {
-  border-bottom-right-radius: 6px;
-  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 12px;
+  border-bottom-left-radius: 12px;
 }
 .p-dialog .p-dialog-footer {
   border-top: 1px solid #eaecf0;
@@ -5970,11 +5972,11 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
   /* outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #C7D2FE;  */
 }
-.p-sidebar .p-sidebar-header + .p-sidebar-content {
+/* .p-sidebar .p-sidebar-header + .p-sidebar-content {
   padding-top: 24px;
-}
+} */
 .p-sidebar .p-sidebar-content:not(.footer) {
-  padding: 24px;
+  /* padding: 24px; */
   display: flex;
   flex-direction: column;
   /* padding-left: 0px; */
@@ -6042,9 +6044,9 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
 .p-fileupload .p-progressbar {
   height: 0.25rem;
 }
-.p-fileupload .p-fileupload-row > div {
+/* .p-fileupload .p-fileupload-row > div {
   padding: 1rem 1rem;
-}
+} */
 .p-fileupload.p-fileupload-advanced .p-message {
   margin-top: 0;
 }
@@ -7786,8 +7788,6 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
 .p-chip img {
   width: 1rem;
   height: 1rem;
-  margin-left: -0.75rem;
-  margin-right: 0.5rem;
 }
 .p-chip .p-chip-remove-icon {
   border-radius: 6px;
@@ -8688,6 +8688,20 @@ input[type="number"]::-webkit-outer-spin-button {
 }
 
 
+.tab-view-bg-dark.p-tabview-nav-container.p-tabview-nav-content{
+  border-bottom: none;
+}
+
+
+.p-autocomplete.p-autocomplete-lg .p-inputtext{
+   height: 40px;
+   width: 320px;
+}
+
+.p-autocomplete.p-autocomplete-xl .p-inputtext{
+  height: 40px;
+  width: 320px;
+}
 
 /* SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
 
@@ -8699,28 +8713,33 @@ input[type="number"]::-webkit-outer-spin-button {
   height: 32px;
   line-height: 20px;
   font-size: 14px;
+  padding: 6px 14px;
 }
 
 .p-button.p-button-sm {
   height: 40px;
   line-height: 20px;
   font-size: 14px;
+  padding: 10px 16px;
 }
 
 .p-button.p-button-md {
   height: 44px ;
   line-height: 24px ;
   font-size: 16px ;
+  padding: 10px 18px;
 }
 .p-button.p-button-lg {
   height: 48px;
   line-height: 24px;
   font-size: 16px;
+  padding: 12px 20px;
 }
 .p-button.p-button-xl {
   height: 60px;
   line-height: 28px;
   font-size: 18px;
+  padding: 16px 28px;
 }
 
 /* Default button with dual icon */

package/dist/assets/theme.css

@@ -501,6 +501,10 @@
 .p-calendar .p-inputtext {
   flex: 1 1 auto;
   width: 1%;
+  padding-left: 8px;
+}
+
+.p-calendar.p-calendar-w-btn-left .p-inputtext{
   padding-left: 0;
 }
 

package/dist/components/chips/chip.js

@@ -1,4 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const chip_1 = require("primereact/chip");
-exports.default = chip_1.Chip;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const ChipTag = (props) => {
+    const { onRemove } = props;
+    return props.template ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.template })) : ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: !props.className
+            ? "bg-gray-100 border-round-2xl flex justify-content-between align-items-center py-1 gap-2 px-3 text-gray-700"
+            : `bg-gray-100 border-round-2xl flex justify-content-between align-items-center py-1 gap-2 px-3 text-gray-700 ${props.className}` }, { children: [props.image && ((0, jsx_runtime_1.jsx)("img", { src: props.image, alt: props.imageAlt || "chip image" })), props.icon && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.icon }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: props.label })), props.removable && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: (e) => {
+                    const el = e.currentTarget.parentElement;
+                    props.onRemove !== undefined ? onRemove : el.remove();
+                } }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.removeIcon || (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close" }) }) })))] })));
+};
+exports.default = ChipTag;

package/dist/components/input/input.js

@@ -1,12 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputComponent = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const inputtext_1 = require("primereact/inputtext");
-const InputComponent = () => {
-    const [value, setValue] = (0, react_1.useState)('');
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card flex justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: value, onChange: (e) => setValue(e.target.value) }) })));
-};
-exports.InputComponent = InputComponent;
 exports.default = inputtext_1.InputText;

package/dist/components/progress-steps/progress-steps.js

@@ -48,7 +48,7 @@ const ProgressSteps = (props) => {
                             if (eachItem.action) {
                                 eachItem.action();
                             }
-                        } }, { children: [!icons ? ((0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: index === currentActive
+                        } }, { children: [!icons ? ((0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: index === currentActive
                                     ? "step-current"
                                     : index > currentActive
                                         ? "step-unvisited"

package/dist/components/sliders/sliders.js

@@ -1,4 +1,100 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const slider_1 = require("primereact/slider");
-exports.default = slider_1.Slider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const RangeSlider = (props) => {
+    const { min, max, orientation, range, value, indicator = true } = props;
+    const [rangeValues, setRangeValues] = (0, react_1.useState)(value);
+    const [sliderValue, setSliderValue] = (0, react_1.useState)(value);
+    const sliderRef = (0, react_1.useRef)(null);
+    if (range && typeof value === "number") {
+        throw new Error(`For a range slider value should be [number, number]. Make sure to provide a proper value.`);
+    }
+    const finalWidthValue = !range
+        ? `${sliderValue}%`
+        : `${rangeValues[0] > rangeValues[1]
+            ? rangeValues[0] - rangeValues[1]
+            : rangeValues[1] > rangeValues[0]
+                ? rangeValues[1] - rangeValues[0]
+                : 0}%`;
+    const finalLeftValue = rangeValues[0] < rangeValues[1]
+        ? `${rangeValues[0]}%`
+        : `${rangeValues[1]}%`;
+    const rangeStyles = range
+        ? {
+            [orientation === "horizontal" ? "width" : "height"]: finalWidthValue,
+            [orientation === "horizontal" ? "left" : "top"]: finalLeftValue,
+        }
+        : {
+            [orientation === "horizontal" ? "width" : "height"]: `${sliderValue}%`,
+            [orientation === "vertical" ? "top" : null]: 0,
+        };
+    const handleStyles = !range
+        ? { [orientation === "horizontal" ? "left" : "top"]: `${sliderValue}%` }
+        : null;
+    const mouseMoveController = (e, index) => {
+        const sliderRect = sliderRef.current.getBoundingClientRect();
+        const currentRange = Math.round((e[orientation === "horizontal" ? "clientX" : "clientY"] -
+            sliderRect[orientation === "horizontal" ? "left" : "top"]) /
+            4);
+        if (min && max) {
+            if (e[orientation === "horizontal" ? "clientX" : "clientY"] -
+                sliderRect[orientation === "horizontal" ? "left" : "top"] <
+                0 ||
+                e[orientation === "horizontal" ? "clientX" : "clientY"] -
+                    sliderRect[orientation === "horizontal" ? "left" : "top"] >
+                    sliderRect[orientation === "horizontal" ? "width" : "height"])
+                return;
+        }
+        else {
+            if (currentRange < 0 || currentRange > 100)
+                return;
+        }
+        if (range) {
+            if (index) {
+                setRangeValues((prevRanges) => [prevRanges[0], currentRange]);
+            }
+            else {
+                setRangeValues((prevRanges) => [currentRange, prevRanges[1]]);
+            }
+        }
+        else {
+            setSliderValue(currentRange);
+        }
+    };
+    const handleMovement = (index) => {
+        const handler = (e) => {
+            mouseMoveController(e, index);
+        };
+        document.addEventListener("mousemove", handler);
+        document.addEventListener("mouseup", () => {
+            document.removeEventListener("mousemove", handler);
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-pc-name": "slider", "data-pc-section": "root", className: `p-slider ${orientation === "horizontal" ? "w" : "h"}-25rem p-component p-slider-${orientation}${props.className ? ` ${props.className}` : ""}`, ref: sliderRef }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-slider-range", "data-pc-section": "range", style: rangeStyles }), range && typeof value !== "number" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-slider-handle p-slider-handle-start", tabIndex: 0, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": rangeValues[0], "aria-orientation": orientation, style: {
+                            [orientation === "horizontal"
+                                ? "left"
+                                : "top"]: `${rangeValues[0]}%`,
+                        }, onMouseDown: () => handleMovement(0) }, { children: indicator && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
+                                position: "absolute",
+                                height: "40px",
+                                [orientation === "vertical" ? "left" : "top"]: orientation === "horizontal" ? "-50px" : "-70px",
+                                transform: `translate${orientation === "horizontal" ? "X" : "Y"}(-30%)`,
+                            }, className: "px-3 bg-white border-1 border-gray-300 border-round-lg shadow-4 py-2 text-center text-lg" }, { children: [rangeValues[0], "%"] }))) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-slider-handle p-slider-handle-end p-slider-handle-active", tabIndex: 0, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": rangeValues[1], "aria-orientation": orientation, style: {
+                            [orientation === "horizontal"
+                                ? "left"
+                                : "top"]: `${rangeValues[1]}%`,
+                        }, onMouseDown: () => handleMovement(1) }, { children: indicator && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
+                                position: "absolute",
+                                height: "40px",
+                                [orientation === "vertical" ? "left" : "top"]: orientation === "horizontal" ? "-50px" : "-70px",
+                                transform: `translate${orientation === "horizontal" ? "X" : "Y"}(-30%)`,
+                            }, className: "px-3 bg-white border-1 border-gray-300 border-round-lg shadow-4 py-2 text-center text-lg" }, { children: [rangeValues[1], "%"] }))) }))] })) : ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-slider-handle", role: "slider", "aria-valuenow": typeof value === "number" ? value : undefined, "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": orientation, style: handleStyles, onMouseDown: () => handleMovement() }, { children: indicator && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
+                        position: "absolute",
+                        height: "40px",
+                        width: "60px",
+                        [orientation === "vertical" ? "left" : "top"]: "-50px",
+                        transform: "translateX(-30%)",
+                    }, className: "px-3 bg-white border-1 border-gray-300 border-round-lg shadow-4 py-2 text-center text-lg" }, { children: [sliderValue, "%"] }))) })))] })));
+};
+exports.default = RangeSlider;