@foxeltech/angular-ui 0.0.4 → 0.0.5

package/README.md

@@ -1,3 +1,3 @@
-# @fxlt/common-ui
+# @foxeltech/angular-ui
 
-Common UI & Service Library
+Common UI & Service Library

package/fesm2022/foxeltech-angular-ui.mjs

@@ -310,9 +310,9 @@ class FxUtils {
             return 'Session timeout. Please login again.';
         }
         if (this.isStringEmpty(_.get(err, 'error.code'))) {
-            return _.get(err, 'error.message', 'Unknown Error');
+            return _.get(err, 'error.errors', 'Unknown Error');
         }
-        return `${_.get(err, 'error.code')}: ${_.get(err, 'error.message', 'Unknown Error')}`;
+        return `${_.get(err, 'error.code')}: ${_.get(err, 'error.errors', 'Unknown Error')}`;
     }
     static convertColorFromVariable(name, alpha = 1) {
         const value = getComputedStyle(document.body)
@@ -513,6 +513,9 @@ class BaseTableComponent extends BaseComponent {
     }
     async refresh() {
         this.page = 0;
+        if (this.paginator) {
+            this.paginator.pageIndex = 0;
+        }
         await this.fetch();
     }
     setDataSource(result) {
@@ -890,6 +893,122 @@ class BaseResolver {
     }
 }
 
+class FxValidators {
+    /**
+     * Name fields: firstName, lastName, groupName, projectName, displayName
+     * Allows: letters (Unicode), spaces, hyphens, apostrophes, periods
+     */
+    static validateName(value) {
+        if (!value || value.trim() === '')
+            return null;
+        const regex = /^[\p{L}\s'\-.]{1,100}$/u;
+        return regex.test(value) ? null : { invalidName: 'Only letters, spaces, hyphens, apostrophes, and periods are allowed (max 100 characters)' };
+    }
+    /**
+     * Description fields
+     * Allows: letters, digits, spaces, basic punctuation
+     */
+    static validateDescription(value) {
+        if (!value || value.trim() === '')
+            return null;
+        const regex = /^[\p{L}\d\s.,;:!?'/()"&\-\n\r]{1,500}$/u;
+        return regex.test(value) ? null : { invalidDescription: 'Contains disallowed characters (max 500 characters)' };
+    }
+    /**
+     * Email fields
+     */
+    static validateEmail(value) {
+        if (!value || value.trim() === '')
+            return null;
+        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return regex.test(value) ? null : { invalidEmail: 'Please enter a valid email address' };
+    }
+    /**
+     * Phone fields
+     * Allows: digits, optional leading +, spaces, hyphens, parentheses (7-15 digits)
+     */
+    static validatePhone(value) {
+        if (!value || value.trim() === '')
+            return null;
+        const regex = /^\+?[\d\s\-()]{7,20}$/;
+        const digitCount = value.replace(/\D/g, '').length;
+        if (!regex.test(value) || digitCount < 7 || digitCount > 15) {
+            return { invalidPhone: 'Please enter a valid phone number' };
+        }
+        return null;
+    }
+    /**
+     * Code/identifier fields: server code, template code, templateId
+     * Allows: alphanumeric, hyphens, underscores
+     */
+    static validateCode(value) {
+        if (!value || value.trim() === '')
+            return null;
+        const regex = /^[a-zA-Z0-9_\-]{1,50}$/;
+        return regex.test(value) ? null : { invalidCode: 'Only letters, numbers, hyphens, and underscores are allowed (max 50 characters)' };
+    }
+    /**
+     * Domain fields
+     * Standard domain pattern with optional port
+     */
+    static validateDomain(value) {
+        if (!value || value.trim() === '')
+            return null;
+        const regex = /^([a-zA-Z0-9]([a-zA-Z0-9\-]*[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}(:\d{1,5})?$/;
+        return regex.test(value) ? null : { invalidDomain: 'Please enter a valid domain (e.g., mail.example.com)' };
+    }
+    /**
+     * Subject fields (email subject)
+     * Allows: letters, digits, spaces, common punctuation, template placeholders {{}}
+     */
+    static validateSubject(value) {
+        if (!value || value.trim() === '')
+            return null;
+        const regex = /^[\p{L}\d\s.,;:!?'/()"&\-{}]{1,200}$/u;
+        return regex.test(value) ? null : { invalidSubject: 'Contains disallowed characters (max 200 characters)' };
+    }
+    /**
+     * Tag fields
+     * Allows: alphanumeric, hyphens, underscores, dots, spaces
+     */
+    static validateTag(value) {
+        if (!value || value.trim() === '')
+            return null;
+        const regex = /^[a-zA-Z0-9_\-.\s]{1,50}$/;
+        return regex.test(value) ? null : { invalidTag: 'Only letters, numbers, hyphens, underscores, dots, and spaces are allowed' };
+    }
+    /**
+     * URL fields: proxy, masterUrl
+     * Standard URL pattern
+     */
+    static validateUrl(value) {
+        if (!value || value.trim() === '')
+            return null;
+        const regex = /^https?:\/\/[a-zA-Z0-9\-._~:/?#[\]@!$&'()*+,;=%]{1,2000}$/;
+        return regex.test(value) ? null : { invalidUrl: 'Please enter a valid URL (http:// or https://)' };
+    }
+    /**
+     * Numeric string fields: timeout, memoryLimit, cpuCores
+     * Allows: digits, optional decimal point
+     */
+    static validateNumeric(value) {
+        if (!value || value.toString().trim() === '')
+            return null;
+        const regex = /^\d+(\.\d+)?$/;
+        return regex.test(value.toString()) ? null : { invalidNumeric: 'Please enter a valid number' };
+    }
+    /**
+     * Version fields (semver-like)
+     * Allows: digits, dots, hyphens, plus, letters
+     */
+    static validateVersion(value) {
+        if (!value || value.trim() === '')
+            return null;
+        const regex = /^[a-zA-Z0-9.\-+]{1,50}$/;
+        return regex.test(value) ? null : { invalidVersion: 'Please enter a valid version (e.g., 1.0.0)' };
+    }
+}
+
 function HttpLoaderFactory(http) {
     return new TranslateHttpLoader(http, '/assets/i18n/', '.json');
 }
@@ -1510,6 +1629,7 @@ class ChartComponent {
     intersectionObserver;
     canInit = false;
     isMobile = false;
+    containerWidth = 0;
     constructor(ref, cdr) {
         this.ref = ref;
         this.cdr = cdr;
@@ -1563,6 +1683,7 @@ class ChartComponent {
     updateResponsiveState() {
         const { width } = this.ref.nativeElement.getBoundingClientRect();
         if (width > 0) {
+            this.containerWidth = width;
             this.isMobile = width < this.mobileWidth;
         }
     }
@@ -1574,7 +1695,7 @@ class ChartComponent {
             requestAnimationFrame(() => this.forceMediaRecalc(retry + 1));
             return;
         }
-        this.chartInstance.setOption(this.chartOptions, true);
+        this.rebuildChart();
         this.chartInstance.resize();
     }
     rebuildChart() {
@@ -1646,20 +1767,20 @@ class ChartComponent {
         }),
         pie: (data, colors) => {
             const total = data.reduce((sum, d) => sum + d.value, 0);
-            const isMobile = this.isMobile;
+            const layout = this.calcPieLayout(data);
             return {
                 color: colors,
                 tooltip: { trigger: 'item' },
                 legend: {
-                    orient: isMobile ? 'horizontal' : 'vertical',
+                    type: 'scroll',
+                    orient: layout.legendOrient,
                     icon: 'circle',
                     itemGap: 12,
-                    width: 160,
-                    // 🔑 layout switch
-                    right: isMobile ? undefined : this.pieLegendAlign,
-                    top: isMobile ? undefined : this.pieLegendPosition,
-                    left: isMobile ? 'center' : undefined,
-                    bottom: isMobile ? 0 : undefined,
+                    right: layout.legendRight,
+                    top: layout.legendTop,
+                    left: layout.legendLeft,
+                    bottom: layout.legendBottom,
+                    width: layout.legendWidth,
                     formatter: (name) => {
                         const item = data.find((d) => d.name === name);
                         return item ? `${name}: ${item.value}` : name;
@@ -1676,7 +1797,7 @@ class ChartComponent {
                     {
                         type: 'pie',
                         radius: ['40%', '70%'],
-                        center: isMobile ? ['50%', '40%'] : ['35%', '50%'],
+                        center: layout.pieCenter,
                         data,
                         label: {
                             show: this.showPieLabel,
@@ -1697,8 +1818,8 @@ class ChartComponent {
                 ],
                 graphic: {
                     type: 'group',
-                    left: isMobile ? '50%' : '35%',
-                    top: isMobile ? '40%' : '50%',
+                    left: layout.graphicLeft,
+                    top: layout.graphicTop,
                     bounding: 'raw',
                     children: [
                         {
@@ -1740,6 +1861,46 @@ class ChartComponent {
             ],
         }),
     };
+    /* ================= PIE LAYOUT ================= */
+    calcPieLayout(data) {
+        const cw = this.containerWidth || 400;
+        if (this.isMobile) {
+            return {
+                legendOrient: 'horizontal',
+                legendLeft: 'center',
+                legendRight: undefined,
+                legendTop: undefined,
+                legendBottom: 0,
+                legendWidth: undefined,
+                pieCenter: ['50%', '40%'],
+                graphicLeft: '50%',
+                graphicTop: '40%',
+            };
+        }
+        // Estimate legend pixel width from longest formatted label
+        const CHAR_WIDTH = 7.5; // approx px per char at fontSize 13
+        const ICON_GAP = 30; // legend icon + padding
+        const longestLabel = data.reduce((max, d) => {
+            return Math.max(max, `${d.name}: ${d.value}`.length);
+        }, 0);
+        const rawLegendPx = longestLabel * CHAR_WIDTH + ICON_GAP;
+        // Clamp: min 100px, max 45% of container
+        const legendPx = Math.max(100, Math.min(rawLegendPx, cw * 0.45));
+        const legendPct = (legendPx / cw) * 100;
+        // Pie center: middle of the remaining space after legend
+        const pieCenterX = Math.round((100 - legendPct) / 2);
+        return {
+            legendOrient: 'vertical',
+            legendLeft: undefined,
+            legendRight: '2%',
+            legendTop: 'middle',
+            legendBottom: undefined,
+            legendWidth: Math.round(legendPx),
+            pieCenter: [`${pieCenterX}%`, '50%'],
+            graphicLeft: `${pieCenterX}%`,
+            graphicTop: '50%',
+        };
+    }
     /* ================= BUILD ================= */
     detectType() {
         if (this.type !== 'auto')
@@ -3449,5 +3610,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuthInterceptor, AuthStateService, BaseComponent, BaseDialogComponent, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, ChartComponent, CheckboxComponent, CircleProgressBar, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, DrawerComponent, FlowConnection, FxLoadingService, FxStorageService, FxToastrService, FxUtils, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InputComponent, KanbanBoardComponent, LoadingPanel, MY_MOMENT_FORMATS, NotificationService, PermissionGuard, PermissionService, QuillStyleLoaderService, RadioButtonComponent, RadioButtonToggleComponent, RichTextAreaComponent, SearchBarComponent, SelectComponent, SkeletonTableLoadingComponent, SliderComponent, SwitchComponent, TabComponent, TabGroupComponent, TableCell, TagComponent, ThemeService, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, TreeDiagram, TrimOnBlurDirective, UiModule };
+export { AuthInterceptor, AuthStateService, BaseComponent, BaseDialogComponent, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, ChartComponent, CheckboxComponent, CircleProgressBar, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, DrawerComponent, FlowConnection, FxLoadingService, FxStorageService, FxToastrService, FxUtils, FxValidators, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InputComponent, KanbanBoardComponent, LoadingPanel, MY_MOMENT_FORMATS, NotificationService, PermissionGuard, PermissionService, QuillStyleLoaderService, RadioButtonComponent, RadioButtonToggleComponent, RichTextAreaComponent, SearchBarComponent, SelectComponent, SkeletonTableLoadingComponent, SliderComponent, SwitchComponent, TabComponent, TabGroupComponent, TableCell, TagComponent, ThemeService, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, TreeDiagram, TrimOnBlurDirective, UiModule };
 //# sourceMappingURL=foxeltech-angular-ui.mjs.map