sccoreui 2.3.7 → 2.3.8

package/dist/App.scss

@@ -60,3 +60,71 @@ h3 {
   font-weight: var(--fw-400);
 }
 
+// ============= custom progress steps ===============  //
+
+.progress-container {
+  isolation: isolate;
+
+  &::before {
+    content: "";
+    background-color: var(--gray-200);
+    position: absolute;
+    z-index: -1;
+  }
+
+  &.horizontal::before {
+    height: 2px;
+    width: 100%;
+    top: 13%;
+  }
+
+  &.vertical::before {
+    height: 100%;
+    width: 2px;
+    left: 11px;
+    top: 0;
+  }
+}
+
+.progressbar {
+  z-index: -1;
+  transition: all 0.6s ease;
+
+  &.horizontal {
+    left: 0;
+    top: 13%;
+    height: 2px;
+  }
+
+  &.vertical {
+    width: 2px;
+    left: 11px;
+    top: 0;
+  }
+}
+
+.progress-step-item {
+  &.horizontal {
+    // transform: translateX(10%);
+
+    &:nth-of-type(1) {
+      transform: translateX(-50%);
+    }
+
+    &:last-child {
+      transform: translateX(50%);
+    }
+  }
+
+  &.vertical {
+    transform: translateY(50%);
+
+    &:nth-of-type(1) {
+      transform: translateY(-5%);
+    }
+
+    &:last-child {
+      transform: translateY(100%);
+    }
+  }
+}

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

@@ -1,11 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProgressSteps = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const button_1 = require("primereact/button");
 const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
-require("./progress-steps.scss");
 const react_1 = require("react");
 const ProgressSteps = (props) => {
     const { stepsItems, orientation, activeIndex, withButtons = true, icons, className, style, } = props;
@@ -62,23 +60,4 @@ const ProgressSteps = (props) => {
                     ? ""
                     : " flex-column align-self-center"} gap-2 mt-5` }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: currentActive === 0, onClick: handlePrev }, { children: "Prev" })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: currentActive === stepsItems.length - 1, onClick: handleNext }, { children: "Next" }))] })))] }));
 };
-exports.ProgressSteps = ProgressSteps;
-const ProgressStepsComponent = () => {
-    const itemTemplate = (label, description) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-semibold" }, { children: label })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal" }, { children: description }))] }));
-    const items = [
-        {
-            id: "1",
-            template: itemTemplate("Your Details", "Provide Your Details"),
-        },
-        {
-            id: "2",
-            template: itemTemplate("Company details", "A few details of your company"),
-        },
-        {
-            id: "3",
-            template: itemTemplate("Invite your team", "Start collaborating"),
-        },
-    ];
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center justify-content-between gap-5 h-30rem" }, { children: [(0, jsx_runtime_1.jsx)(exports.ProgressSteps, { stepsItems: items }), (0, jsx_runtime_1.jsx)(exports.ProgressSteps, { stepsItems: items, orientation: "vertical" })] })));
-};
-exports.default = ProgressStepsComponent;
+exports.default = ProgressSteps;

package/dist/pages/home.js

@@ -22,7 +22,7 @@ const tooltip_1 = tslib_1.__importDefault(require("./tooltip/tooltip"));
 const loader_indicator_1 = tslib_1.__importDefault(require("./loader-indicator/loader-indicator"));
 const pagination_1 = tslib_1.__importDefault(require("../pages/paginator/pagination"));
 const shadows_1 = tslib_1.__importDefault(require("../pages/shadows/shadows"));
-const progress_steps_1 = tslib_1.__importDefault(require("../components/progress-steps/progress-steps"));
+const progress_steps_1 = tslib_1.__importDefault(require("../pages/progress-steps/progress-steps"));
 const tabs_1 = tslib_1.__importDefault(require("./tabs/tabs"));
 const breadcrumb_1 = tslib_1.__importDefault(require("./breadcrumb/breadcrumb"));
 const button_1 = tslib_1.__importDefault(require("./button/button"));

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const progress_steps_1 = tslib_1.__importDefault(require("../../components/progress-steps/progress-steps"));
+const ProgressStepsComponent = () => {
+    const itemTemplate = (label, description) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-semibold" }, { children: label })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal" }, { children: description }))] }));
+    const items = [
+        {
+            id: "1",
+            template: itemTemplate("Your Details", "Provide Your Details"),
+        },
+        {
+            id: "2",
+            template: itemTemplate("Company details", "A few details of your company"),
+        },
+        {
+            id: "3",
+            template: itemTemplate("Invite your team", "Start collaborating"),
+        },
+    ];
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center justify-content-between gap-5 h-30rem" }, { children: [(0, jsx_runtime_1.jsx)(progress_steps_1.default, { stepsItems: items }), (0, jsx_runtime_1.jsx)(progress_steps_1.default, { stepsItems: items, orientation: "vertical" })] })));
+};
+exports.default = ProgressStepsComponent;

package/dist/types/components/progress-steps/progress-steps.d.ts

@@ -1,5 +1,3 @@
-import "./progress-steps.scss";
 import { StepsItemProps } from "../../pages/types/type";
-export declare const ProgressSteps: (props: StepsItemProps) => JSX.Element;
-declare const ProgressStepsComponent: () => import("react/jsx-runtime").JSX.Element;
-export default ProgressStepsComponent;
+declare const ProgressSteps: (props: StepsItemProps) => JSX.Element;
+export default ProgressSteps;

package/dist/types/pages/progress-steps/progress-steps.d.ts

@@ -0,0 +1,2 @@
+declare const ProgressStepsComponent: () => import("react/jsx-runtime").JSX.Element;
+export default ProgressStepsComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sccoreui",
-  "version": "2.3.7",
+  "version": "2.3.8",
   "description": "ui-sccore",
   "main": "./dist/index.js",
   "module": "./dist/index.js",