@praxisui/settings-panel 1.0.0-beta.52 → 1.0.0-beta.53

package/fesm2022/praxisui-settings-panel.mjs

@@ -425,6 +425,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+const TABLE_COMPACT_LENGTH_TOKEN$1 = '(?:0|(?:\\d+|\\d*\\.\\d+)(?:px|rem|em|%|vh|vw|svh|svw|lvh|lvw|dvh|dvw|ch|ex))';
+const TABLE_COMPACT_SPACING_PATTERN = `^(?:var\\(.+\\)|calc\\(.+\\)|${TABLE_COMPACT_LENGTH_TOKEN$1}(?:\\s+${TABLE_COMPACT_LENGTH_TOKEN$1}){0,3})$`;
+const TABLE_COMPACT_FONT_SIZE_PATTERN = `^(?:var\\(.+\\)|calc\\(.+\\)|${TABLE_COMPACT_LENGTH_TOKEN$1})$`;
 function safeName(path) {
     return path.replace(/[^a-zA-Z0-9_]/g, '_');
 }
@@ -732,12 +735,48 @@ function buildGlobalConfigFormConfig() {
             label: 'Aparência: densidade',
             controlType: FieldControlType.SELECT,
             selectOptions: [
-                { text: 'comfortable', value: 'comfortable' },
-                { text: 'cozy', value: 'cozy' },
                 { text: 'compact', value: 'compact' },
+                { text: 'comfortable', value: 'comfortable' },
+                { text: 'spacious', value: 'spacious' },
             ],
             dataAttributes: { globalPath: 'table.appearance.density' },
         },
+        {
+            name: safeName('table.appearance.spacing.cellPadding'),
+            label: 'Aparência: padding das células',
+            controlType: FieldControlType.INPUT,
+            hint: 'Aceita 1 a 4 medidas CSS com unidade, var(...) ou calc(...). Ex.: 6px 12px',
+            pattern: TABLE_COMPACT_SPACING_PATTERN,
+            patternMessage: 'Use 1 a 4 medidas CSS válidas, como 6px 12px.',
+            dataAttributes: { globalPath: 'table.appearance.spacing.cellPadding' },
+        },
+        {
+            name: safeName('table.appearance.spacing.headerPadding'),
+            label: 'Aparência: padding do cabeçalho',
+            controlType: FieldControlType.INPUT,
+            hint: 'Aceita 1 a 4 medidas CSS com unidade, var(...) ou calc(...). Ex.: 8px 12px',
+            pattern: TABLE_COMPACT_SPACING_PATTERN,
+            patternMessage: 'Use 1 a 4 medidas CSS válidas, como 8px 12px.',
+            dataAttributes: { globalPath: 'table.appearance.spacing.headerPadding' },
+        },
+        {
+            name: safeName('table.appearance.typography.fontSize'),
+            label: 'Aparência: fonte das células',
+            controlType: FieldControlType.INPUT,
+            hint: 'Aceita uma medida CSS com unidade, var(...) ou calc(...). Ex.: 13px',
+            pattern: TABLE_COMPACT_FONT_SIZE_PATTERN,
+            patternMessage: 'Use uma medida CSS válida, como 13px.',
+            dataAttributes: { globalPath: 'table.appearance.typography.fontSize' },
+        },
+        {
+            name: safeName('table.appearance.typography.headerFontSize'),
+            label: 'Aparência: fonte do cabeçalho',
+            controlType: FieldControlType.INPUT,
+            hint: 'Aceita uma medida CSS com unidade, var(...) ou calc(...). Ex.: 13px',
+            pattern: TABLE_COMPACT_FONT_SIZE_PATTERN,
+            patternMessage: 'Use uma medida CSS válida, como 13px.',
+            dataAttributes: { globalPath: 'table.appearance.typography.headerFontSize' },
+        },
         {
             name: safeName('table.filteringUi.advancedOpenMode'),
             label: 'Filtro: modo de abertura',
@@ -1026,6 +1065,10 @@ function buildGlobalConfigFormConfig() {
                             { id: 'tbl-col-1', fields: [
                                     safeName('table.toolbar.visible'),
                                     safeName('table.appearance.density'),
+                                    safeName('table.appearance.spacing.cellPadding'),
+                                    safeName('table.appearance.spacing.headerPadding'),
+                                    safeName('table.appearance.typography.fontSize'),
+                                    safeName('table.appearance.typography.headerFontSize'),
                                     safeName('table.filteringUi.advancedOpenMode'),
                                     safeName('table.filteringUi.overlayVariant'),
                                     safeName('table.filteringUi.overlayBackdrop'),
@@ -1219,6 +1262,23 @@ const GLOBAL_CONFIG_DYNAMIC_FORM_COMPONENT = new InjectionToken('GLOBAL_CONFIG_D
     factory: () => null,
 });
 
+const TABLE_COMPACT_SPACING_PATHS = new Set([
+    'table.appearance.spacing.cellPadding',
+    'table.appearance.spacing.headerPadding',
+]);
+const TABLE_COMPACT_FONT_SIZE_PATHS = new Set([
+    'table.appearance.typography.fontSize',
+    'table.appearance.typography.headerFontSize',
+]);
+const TABLE_COMPACT_FIELD_LABELS = {
+    'table.appearance.spacing.cellPadding': 'padding das células',
+    'table.appearance.spacing.headerPadding': 'padding do cabeçalho',
+    'table.appearance.typography.fontSize': 'fonte das células',
+    'table.appearance.typography.headerFontSize': 'fonte do cabeçalho',
+};
+const TABLE_COMPACT_LENGTH_TOKEN = '(?:0|(?:\\d+|\\d*\\.\\d+)(?:px|rem|em|%|vh|vw|svh|svw|lvh|lvw|dvh|dvw|ch|ex))';
+const TABLE_COMPACT_SPACING_REGEX = new RegExp(`^(?:var\\(.+\\)|calc\\(.+\\)|${TABLE_COMPACT_LENGTH_TOKEN}(?:\\s+${TABLE_COMPACT_LENGTH_TOKEN}){0,3})$`, 'i');
+const TABLE_COMPACT_FONT_SIZE_REGEX = new RegExp(`^(?:var\\(.+\\)|calc\\(.+\\)|${TABLE_COMPACT_LENGTH_TOKEN})$`, 'i');
 class GlobalConfigEditorComponent {
     admin;
     snack;
@@ -1670,14 +1730,14 @@ class GlobalConfigEditorComponent {
             const da = fm.dataAttributes || {};
             const path = da.globalPath || fm.name;
             this.pathMap[fm.name] = path;
-            const v = flat[path];
+            const v = this.normalizeFieldValue(path, flat[path]);
             if (v !== undefined)
                 fm.defaultValue = v;
         }
         this.initialValues = {};
         for (const safe of Object.keys(this.pathMap)) {
             const path = this.pathMap[safe];
-            const v = flat[path];
+            const v = this.normalizeFieldValue(path, flat[path]);
             if (v !== undefined)
                 this.initialValues[safe] = v;
         }
@@ -1910,6 +1970,14 @@ class GlobalConfigEditorComponent {
     }
     async onSave() {
         const partial = this.getSettingsValue();
+        const validationMessage = this.validateCompactTableAppearancePayload(partial);
+        if (validationMessage) {
+            try {
+                this.snack.open(validationMessage, undefined, { duration: 5000 });
+            }
+            catch { }
+            return undefined;
+        }
         this.isBusy$.next(true);
         try {
             await this.admin.save(partial);
@@ -2080,11 +2148,12 @@ class GlobalConfigEditorComponent {
     buildChangedValues() {
         const out = {};
         for (const [safe, value] of Object.entries(this.currentValues)) {
-            const initial = this.initialValues[safe];
-            if (!this.shouldIncludeField(initial, value))
-                continue;
             const path = this.pathMap[safe] || safe;
-            out[path] = value;
+            const normalizedValue = this.normalizeFieldValue(path, value);
+            const normalizedInitial = this.normalizeFieldValue(path, this.initialValues[safe]);
+            if (!this.shouldIncludeField(normalizedInitial, normalizedValue))
+                continue;
+            out[path] = normalizedValue;
         }
         return out;
     }
@@ -2116,6 +2185,56 @@ class GlobalConfigEditorComponent {
         }
         return 'Falha ao salvar configurações.';
     }
+    normalizeFieldValue(path, value) {
+        if (typeof value !== 'string')
+            return value;
+        if (!TABLE_COMPACT_SPACING_PATHS.has(path) && !TABLE_COMPACT_FONT_SIZE_PATHS.has(path)) {
+            return value;
+        }
+        return value.trim().replace(/\s+/g, ' ');
+    }
+    validateCompactTableAppearancePayload(partial) {
+        const appearance = partial?.table?.appearance;
+        if (!appearance || typeof appearance !== 'object')
+            return null;
+        const checks = [
+            {
+                path: 'table.appearance.spacing.cellPadding',
+                value: appearance?.spacing?.cellPadding,
+                regex: TABLE_COMPACT_SPACING_REGEX,
+                example: '6px 12px',
+            },
+            {
+                path: 'table.appearance.spacing.headerPadding',
+                value: appearance?.spacing?.headerPadding,
+                regex: TABLE_COMPACT_SPACING_REGEX,
+                example: '8px 12px',
+            },
+            {
+                path: 'table.appearance.typography.fontSize',
+                value: appearance?.typography?.fontSize,
+                regex: TABLE_COMPACT_FONT_SIZE_REGEX,
+                example: '13px',
+            },
+            {
+                path: 'table.appearance.typography.headerFontSize',
+                value: appearance?.typography?.headerFontSize,
+                regex: TABLE_COMPACT_FONT_SIZE_REGEX,
+                example: '13px',
+            },
+        ];
+        for (const check of checks) {
+            if (typeof check.value !== 'string')
+                continue;
+            const normalized = this.normalizeFieldValue(check.path, check.value);
+            if (!normalized)
+                continue;
+            if (!check.regex.test(normalized)) {
+                return `Valor inválido em ${TABLE_COMPACT_FIELD_LABELS[check.path]}. Use uma string CSS simples, como ${check.example}.`;
+            }
+        }
+        return null;
+    }
     getVariantIcon(key) {
         const safe = this.safeName(`dialog.variants.${key}.icon`);
         return this.currentValues[safe];