@adcops/autocore-react 3.0.33 → 3.0.36

package/src/themes/theme-base/components/panel/_panel.scss

@@ -0,0 +1,47 @@
+.p-panel {
+    .p-panel-header {
+        border: $panelHeaderBorder;
+        padding: $panelHeaderPadding;
+        background: $panelHeaderBg;
+        color: $panelHeaderTextColor;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-panel-title {
+            font-weight: $panelHeaderFontWeight;
+        }
+
+        .p-panel-header-icon {
+            @include action-icon();
+        }
+    }
+
+    &.p-panel-toggleable {
+        .p-panel-header {
+            padding: $panelToggleableHeaderPadding;
+        }
+    }
+
+    &:has(> .p-panel-footer) .p-panel-content {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .p-panel-content {
+        padding: $panelContentPadding;
+        border: $panelContentBorder;
+        background: $panelContentBg;
+        color: $panelContentTextColor;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+        border-top: 0 none;
+    }
+
+    .p-panel-footer {
+        padding: $panelFooterPadding;
+        border: $panelFooterBorder;
+        background: $panelFooterBg;
+        color: $panelFooterTextColor;
+        border-top: 0 none;
+    }
+}

package/src/themes/theme-base/components/panel/_scrollpanel.scss

@@ -0,0 +1,10 @@
+.p-scrollpanel {
+	.p-scrollpanel-bar {
+		background: $scrollPanelTrackBg;
+		border: $scrollPanelTrackBorder;
+
+		&:focus-visible {
+			@include focused();
+		}
+	}
+}

package/src/themes/theme-base/components/panel/_splitter.scss

@@ -0,0 +1,23 @@
+.p-splitter {
+	border: $panelContentBorder;
+	background: $panelContentBg;
+	border-radius: $borderRadius;
+	color: $panelContentTextColor;
+
+	.p-splitter-gutter {
+		transition: $actionIconTransition;
+		background: $splitterGutterBg;
+
+		.p-splitter-gutter-handle {
+			background: $splitterGutterHandleBg;
+
+			&:focus-visible {
+				@include focused();
+			}
+		}
+	}
+
+	.p-splitter-gutter-resizing {
+		background: $splitterGutterHandleBg;
+	}
+}

package/src/themes/theme-base/components/panel/_stepper.scss

@@ -0,0 +1,136 @@
+@use "sass:math";
+
+//theme
+.p-stepper {
+  .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  .p-stepper-header {
+    padding: $inlineSpacing;
+
+    .p-stepper-action {
+      transition: $listItemTransition;
+      border-radius: $borderRadius;
+      background: $stepsItemBg;
+      outline-color: transparent;
+
+      .p-stepper-number {
+        color: $stepsItemNumberColor;
+        border: $stepsItemBorder;
+        border-width: 2px;
+        background: $stepsItemBg;
+        min-width: $stepsItemNumberWidth;
+        height: $stepsItemNumberHeight;
+        line-height: $stepsItemNumberHeight;
+        font-size: $stepsItemNumberFontSize;
+        border-radius: $stepsItemNumberBorderRadius;
+        transition: $actionIconTransition;
+      }
+
+      .p-stepper-title {
+        margin-left: $inlineSpacing;
+        color: $stepsItemTextColor;
+        font-weight: $stepsItemActiveFontWeight;
+        transition: $actionIconTransition;
+      }
+
+      &:not(.p-disabled):focus-visible {
+        @include focused();
+      }
+    }
+
+    &.p-highlight {
+      .p-stepper-number {
+        background: $highlightBg;
+        color: $highlightTextColor;
+      }
+
+      .p-stepper-title {
+        color: $textColor;
+      }
+    }
+
+    &:not(.p-disabled):focus-visible {
+      @include focused();
+    }
+
+    &:has(~ .p-highlight) {
+      @if variable-exists(primaryColor) {
+        .p-stepper-separator {
+          background-color: $primaryColor;
+        }
+      }
+    }
+  }
+
+  .p-stepper-panels {
+    background: $tabviewContentBg;
+    padding: $tabviewContentPadding;
+    color: $tabviewContentTextColor;
+  }
+
+  .p-stepper-separator {
+    background-color: $timelineEventColor;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: calc($inlineSpacing * 2);
+    transition: $listItemTransition;
+  }
+
+  &.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+
+    .p-stepper-toggleable-content {
+      display: flex;
+      flex: 1 1 auto;
+      background: $tabviewContentBg;
+      color: $tabviewContentTextColor;
+    }
+
+    .p-stepper-panel {
+      display: flex;
+      flex-direction: column;
+      flex: initial;
+
+      &.p-stepper-panel-active {
+        flex: 1 1 auto;
+      }
+
+      .p-stepper-header {
+        flex: initial;
+      }
+
+      .p-stepper-content {
+        width: 100%;
+        padding-left: calc($inlineSpacing * 2);
+      }
+
+      .p-stepper-separator {
+        flex: 0 0 auto;
+        width: 2px;
+        height: auto;
+        margin-inline-start: calc($inlineSpacing * 7 / 2 + 2px);
+      }
+
+      &:has(~ .p-stepper-panel-active) {
+        @if variable-exists(primaryColor) {
+          .p-stepper-separator {
+            background-color: $primaryColor;
+          }
+        }
+      }
+
+      &:last-of-type {
+        .p-stepper-content {
+          padding-left: calc($inlineSpacing * 6);
+        }
+      }
+    }
+  }
+}

package/src/themes/theme-base/components/panel/_tabview.scss

@@ -0,0 +1,147 @@
+//core
+.p-tabview-nav-container {
+    position: relative;
+}
+
+.p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+}
+
+.p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+}
+
+.p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+}
+
+.p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+}
+
+.p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+}
+
+.p-tabview-nav-link:focus {
+    z-index: 1;
+}
+
+.p-tabview-close {
+    z-index: 1;
+}
+
+.p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+}
+
+.p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-tabview-nav-prev {
+    left: 0;
+}
+
+.p-tabview-nav-next {
+    right: 0;
+}
+
+.p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+}
+
+//theme
+.p-tabview {
+    .p-tabview-nav {
+        background: $tabviewNavBg;
+        border: $tabviewNavBorder;
+        border-width: $tabviewNavBorderWidth;
+
+        li {
+            margin-right: $tabviewHeaderSpacing;
+
+            .p-tabview-nav-link {
+                border: $tabviewHeaderBorder;
+                border-width: $tabviewHeaderBorderWidth;
+                border-color: $tabviewHeaderBorderColor;
+                background: $tabviewHeaderBg;
+                color: $tabviewHeaderTextColor;
+                padding: $tabviewHeaderPadding;
+                font-weight: $tabviewHeaderFontWeight;
+                border-top-right-radius: $borderRadius;
+                border-top-left-radius: $borderRadius;
+                transition: $listItemTransition;
+                margin: $tabviewHeaderMargin;
+
+                &:not(.p-disabled):focus-visible {
+                    @include focused-inset();
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled):hover {
+                .p-tabview-nav-link {
+                    background: $tabviewHeaderHoverBg;
+                    border-color: $tabviewHeaderHoverBorderColor;
+                    color: $tabviewHeaderTextHoverColor;
+                }
+            }
+
+            &.p-highlight {
+                .p-tabview-nav-link {
+                    background: $tabviewHeaderActiveBg;
+                    border-color: $tabviewHeaderActiveBorderColor;
+                    color: $tabviewHeaderTextActiveColor;
+                }
+            }
+        }
+    }
+
+    .p-tabview-close {
+        margin-left: $inlineSpacing;
+    }
+    
+    .p-tabview-nav-btn.p-link {
+        background: $tabviewHeaderActiveBg;
+        color: $tabviewHeaderTextActiveColor;
+        width: $buttonIconOnlyWidth;
+        box-shadow: $raisedButtonShadow;
+        border-radius: 0;
+
+        &:focus-visible {
+            @include focused-inset();
+        }
+    }
+
+    .p-tabview-panels {
+        background: $tabviewContentBg;
+        padding: $tabviewContentPadding;
+        border: $tabviewContentBorder;
+        color: $tabviewContentTextColor;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+    }
+}

package/src/themes/theme-base/components/panel/_toolbar.scss

@@ -0,0 +1,11 @@
+.p-toolbar {
+    background: $panelHeaderBg;
+    border: $panelHeaderBorder;
+    padding: $panelHeaderPadding;
+    border-radius: $borderRadius;
+    gap: $inlineSpacing;
+
+    .p-toolbar-separator {
+        margin: 0 $inlineSpacing;
+    }
+}

package/tools/build-themes.cjs

@@ -0,0 +1,66 @@
+/*
+ * Copyright (C) 2025 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2025-07-15 15:05:23
+ * -----
+ * Last Modified: 2025-07-16 07:33:11
+ * -----
+ * 
+ */
+
+
+const { execSync } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+
+/**
+ * 
+ * @param {*} input_file Relative path to the source sass file.
+ * @param {*} output_file Relative path to the destination file
+ */
+function build_theme(input_file, output_file) {
+
+    // Define absolute paths for input and output files for reliability
+    const inputFile = path.resolve(__dirname, input_file);
+    const outputFile = path.resolve(__dirname, output_file);
+
+
+    // Get the directory of the output file
+    const outputDir = path.dirname(outputFile);
+
+    try {
+        // 1. Ensure the output directory exists.
+        // The `recursive: true` option creates parent directories if they don't exist.
+        if (!fs.existsSync(outputDir)) {
+            fs.mkdirSync(outputDir, { recursive: true });
+            console.log(`Created directory: ${outputDir}`);
+        }
+
+        // 2. Construct the sass build command.
+        // We use npx to ensure the locally installed sass package is used.
+        const command = `npx sass ${inputFile} ${outputFile}`;
+
+        console.log(`Executing: ${command}`);
+
+        // 3. Execute the command.
+        // `stdio: 'inherit'` pipes the output (and errors) to the current terminal.
+        execSync(command, { stdio: 'inherit' });
+
+        console.log('✅ AutoCore theme built successfully!');
+
+    } catch (error) {
+        console.error('❌ Failed to build AutoCore theme.');
+        // Exit the process with an error code to stop the entire build chain if this fails.
+        process.exit(1);
+    }    
+
+}
+
+
+
+console.log('Building custom AutoCore theme...');
+
+//
+// List the themes to include in the distribution below.
+//
+
+build_theme('../src/themes/adc-dark/blue/adc_theme.scss', '../dist/themes/adc-dark/blue/theme.css');

package/tools/copy-distribution-files.cjs

@@ -3,7 +3,7 @@
  * Created Date: 2024-01-08 13:01:16
  * Author: Thomas C. Bitsky Jr.
  * -----
- * Last Modified: 2024-03-17 12:37:37
+ * Last Modified: 2025-07-16 13:37:05
  * Modified By: ADC
  * -----
  * 
@@ -26,10 +26,7 @@ const path = require('path');
  * @param {*} destDir 
  */
 function copyFilesByType(srcDir, destDir, extension) {
-    // Create the destination directory if it doesn't exist
-    if (!fs.existsSync(destDir)) {
-        fs.mkdirSync(destDir, { recursive: true });
-    }
+
 
     // Read the contents of the source directory
     fs.readdir(srcDir, { withFileTypes: true }, (err, files) => {
@@ -37,8 +34,8 @@ function copyFilesByType(srcDir, destDir, extension) {
             console.error('Error reading directory:', err);
             return;
         }
-
-        files.forEach(file => {
+        
+        files.forEach(file => {                    
             const srcPath = path.join(srcDir, file.name);
             const destPath = path.join(destDir, file.name);
 
@@ -46,7 +43,18 @@ function copyFilesByType(srcDir, destDir, extension) {
                 // If it's a directory, recurse into it
                 copyFilesByType(srcPath, destPath, extension);
             } else if (path.extname(file.name) === `.${extension}`) {
-                // If it's a CSS file, copy it
+
+                // If it's a matching type of file file, copy it.
+
+                //
+                // Create the destination directory if it doesn't exist
+                // We moved this here so that the directory only gets created if
+                // it contains matching file types. 
+                //
+                if (!fs.existsSync(destDir)) {
+                    fs.mkdirSync(destDir, { recursive: true });
+                }                
+                
                 fs.copyFile(srcPath, destPath, err => {
                     if (err) {
                         console.error('Error copying file:', err);
@@ -57,18 +65,14 @@ function copyFilesByType(srcDir, destDir, extension) {
     });
 }
 
-
-// // destination.txt will be created or overwritten by default.
-// fs.copyFile("./package.json", './dist/package.json', (err) =>
-// {
-//     if (err) throw err;
-// });
-
-// copy in the files that won't be included by tsc
+//
+// Specify the file types that won't be included by tsc to be added to the distribution.
+//
 
 copyFilesByType("./src", "./dist", "css");
 copyFilesByType("./src", "./dist", "ttf");
 copyFilesByType("./src", "./dist", "woff2");
 copyFilesByType("./src", "./dist", "svg");
+
 // JavaScript files won't be processed by tsc
 //copyFilesByType("./src", "./dist", "js");