@praxisui/metadata-editor 1.0.0-beta.42 → 1.0.0-beta.44

package/fesm2022/praxisui-metadata-editor.mjs

@@ -3678,6 +3678,156 @@ function minLenLeMaxLen(group) {
     return null;
 }
 
+const HEX_PATTERN = /^#([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/i;
+function clampChannel(value) {
+    return Math.max(0, Math.min(255, Math.round(value)));
+}
+function parseHexColor(raw) {
+    const normalized = raw.trim();
+    if (!HEX_PATTERN.test(normalized)) {
+        return null;
+    }
+    const hex = normalized.slice(1);
+    if (hex.length === 3 || hex.length === 4) {
+        return {
+            r: Number.parseInt(hex[0] + hex[0], 16),
+            g: Number.parseInt(hex[1] + hex[1], 16),
+            b: Number.parseInt(hex[2] + hex[2], 16),
+        };
+    }
+    return {
+        r: Number.parseInt(hex.slice(0, 2), 16),
+        g: Number.parseInt(hex.slice(2, 4), 16),
+        b: Number.parseInt(hex.slice(4, 6), 16),
+    };
+}
+function parseRgbChannel(token) {
+    const value = token.trim();
+    if (!value.length)
+        return null;
+    if (value.endsWith('%')) {
+        const pct = Number.parseFloat(value.slice(0, -1));
+        if (!Number.isFinite(pct))
+            return null;
+        return clampChannel((pct / 100) * 255);
+    }
+    const numeric = Number.parseFloat(value);
+    if (!Number.isFinite(numeric))
+        return null;
+    return clampChannel(numeric);
+}
+function parseRgbColor(raw) {
+    const normalized = raw.trim().toLowerCase();
+    if (!normalized.startsWith('rgb')) {
+        return null;
+    }
+    const parts = normalized.match(/[\d.]+%?/g) ?? [];
+    if (parts.length < 3) {
+        return null;
+    }
+    const [rRaw, gRaw, bRaw] = parts;
+    if (rRaw === undefined || gRaw === undefined || bRaw === undefined) {
+        return null;
+    }
+    const r = parseRgbChannel(rRaw);
+    const g = parseRgbChannel(gRaw);
+    const b = parseRgbChannel(bRaw);
+    if (r === null || g === null || b === null) {
+        return null;
+    }
+    return { r, g, b };
+}
+function parseComputedRgbColor(raw) {
+    if (typeof document === 'undefined') {
+        return null;
+    }
+    const probe = document.createElement('span');
+    probe.style.color = '';
+    probe.style.color = raw;
+    if (!probe.style.color) {
+        return null;
+    }
+    const host = document.body ?? document.documentElement;
+    let computed = probe.style.color;
+    if (host) {
+        host.appendChild(probe);
+        try {
+            computed = getComputedStyle(probe).color || computed;
+        }
+        finally {
+            probe.remove();
+        }
+    }
+    return parseRgbColor(computed) ?? parseHexColor(computed);
+}
+function normalizeCssColorToRgb(value) {
+    const raw = String(value ?? '').trim();
+    if (!raw.length) {
+        return null;
+    }
+    return parseHexColor(raw) ?? parseRgbColor(raw) ?? parseComputedRgbColor(raw);
+}
+function relativeLuminance({ r, g, b }) {
+    const normalize = (channel) => {
+        const value = channel / 255;
+        return value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+    };
+    return 0.2126 * normalize(r) + 0.7152 * normalize(g) + 0.0722 * normalize(b);
+}
+function contrastRatio(a, b) {
+    const lumA = relativeLuminance(a);
+    const lumB = relativeLuminance(b);
+    const lighter = Math.max(lumA, lumB);
+    const darker = Math.min(lumA, lumB);
+    return (lighter + 0.05) / (darker + 0.05);
+}
+function gradientColorStopValidator(options) {
+    const label = String(options.label || 'Cor').trim() || 'Cor';
+    const compareWith = options.compareWith ?? [];
+    const minContrastRatio = Math.max(1, Number(options.minContrastRatio ?? 1.4));
+    return (control) => {
+        const rawValue = String(control.value ?? '').trim();
+        if (!rawValue.length) {
+            return null;
+        }
+        const currentColor = normalizeCssColorToRgb(rawValue);
+        if (!currentColor) {
+            return {
+                invalidColor: {
+                    message: `${label}: informe uma cor CSS valida (ex.: #22c55e).`,
+                },
+            };
+        }
+        const parent = control.parent;
+        if (!parent || !compareWith.length) {
+            return null;
+        }
+        for (const target of compareWith) {
+            const siblingRaw = String(parent.get(target.field)?.value ?? '').trim();
+            if (!siblingRaw.length) {
+                continue;
+            }
+            const siblingColor = normalizeCssColorToRgb(siblingRaw);
+            if (!siblingColor) {
+                continue;
+            }
+            const ratio = contrastRatio(currentColor, siblingColor);
+            if (ratio < minContrastRatio) {
+                return {
+                    gradientContrast: {
+                        message: `${label}: contraste baixo com ${target.label} ` +
+                            `(${ratio.toFixed(2)}:1). Use ao menos ${minContrastRatio.toFixed(1)}:1.`,
+                        ratio,
+                        minContrastRatio,
+                        comparedField: target.field,
+                    },
+                };
+            }
+        }
+        return null;
+    };
+}
+
 function cloneProperty$6(prop) {
     return {
         ...prop,
@@ -3803,6 +3953,61 @@ const filterInlineDistanceRadiusProperties = [
         group: 'Aparencia',
         hint: 'Cor do glow ao redor do centro radial.',
     },
+    {
+        name: 'distanceGradientLowColor',
+        label: 'Gradiente baixo',
+        editorType: 'color',
+        group: 'Aparencia',
+        row: 'distance-gradient-colors',
+        inline: true,
+        hint: 'Cor para valores baixos (fallback padrao: verde).',
+        validators: [
+            gradientColorStopValidator({
+                label: 'Gradiente baixo',
+                compareWith: [{ field: 'distanceGradientMidColor', label: 'Gradiente medio' }],
+            }),
+        ],
+    },
+    {
+        name: 'distanceGradientMidColor',
+        label: 'Gradiente medio',
+        editorType: 'color',
+        group: 'Aparencia',
+        row: 'distance-gradient-colors',
+        inline: true,
+        hint: 'Cor para valores medios (fallback padrao: amarelo/ambar).',
+        validators: [
+            gradientColorStopValidator({
+                label: 'Gradiente medio',
+                compareWith: [
+                    { field: 'distanceGradientLowColor', label: 'Gradiente baixo' },
+                    { field: 'distanceGradientHighColor', label: 'Gradiente alto' },
+                ],
+            }),
+        ],
+    },
+    {
+        name: 'distanceGradientHighColor',
+        label: 'Gradiente alto',
+        editorType: 'color',
+        group: 'Aparencia',
+        row: 'distance-gradient-colors',
+        inline: true,
+        hint: 'Cor para valores altos (fallback padrao: vermelho).',
+        validators: [
+            gradientColorStopValidator({
+                label: 'Gradiente alto',
+                compareWith: [{ field: 'distanceGradientMidColor', label: 'Gradiente medio' }],
+            }),
+        ],
+    },
+    {
+        name: 'distanceRangeBandOpacity',
+        label: 'Opacidade da faixa (0-1)',
+        editorType: 'number',
+        group: 'Aparencia',
+        hint: 'Opcional. Sobrescreve a opacidade automatica da faixa radial no modo range.',
+    },
     {
         name: 'materialDesign.density',
         label: 'Densidade',
@@ -3854,6 +4059,48 @@ const filterInlineRelativePeriodProperties = [
         editorType: 'checkbox',
         group: 'Formato/Comportamento',
     },
+    {
+        name: 'relativePeriodProgressGradientLowColor',
+        label: 'Gradiente progresso (inicio)',
+        editorType: 'color',
+        group: 'Aparencia',
+        hint: 'Cor inicial da barra de progresso relativa.',
+        validators: [
+            gradientColorStopValidator({
+                label: 'Gradiente progresso (inicio)',
+                compareWith: [{ field: 'relativePeriodProgressGradientMidColor', label: 'Gradiente progresso (meio)' }],
+            }),
+        ],
+    },
+    {
+        name: 'relativePeriodProgressGradientMidColor',
+        label: 'Gradiente progresso (meio)',
+        editorType: 'color',
+        group: 'Aparencia',
+        hint: 'Cor intermediaria da barra de progresso relativa.',
+        validators: [
+            gradientColorStopValidator({
+                label: 'Gradiente progresso (meio)',
+                compareWith: [
+                    { field: 'relativePeriodProgressGradientLowColor', label: 'Gradiente progresso (inicio)' },
+                    { field: 'relativePeriodProgressGradientHighColor', label: 'Gradiente progresso (fim)' },
+                ],
+            }),
+        ],
+    },
+    {
+        name: 'relativePeriodProgressGradientHighColor',
+        label: 'Gradiente progresso (fim)',
+        editorType: 'color',
+        group: 'Aparencia',
+        hint: 'Cor final da barra de progresso relativa.',
+        validators: [
+            gradientColorStopValidator({
+                label: 'Gradiente progresso (fim)',
+                compareWith: [{ field: 'relativePeriodProgressGradientMidColor', label: 'Gradiente progresso (meio)' }],
+            }),
+        ],
+    },
     {
         name: 'relativePeriodColumns',
         label: 'Colunas do grid',
@@ -3992,6 +4239,48 @@ const filterInlineSentimentProperties = [
         group: 'Aparencia',
         hint: 'Cores fallback usadas quando a opcao nao informar color.',
     },
+    {
+        name: 'sentimentGradientLowColor',
+        label: 'Gradiente sentimento (inicio)',
+        editorType: 'color',
+        group: 'Aparencia',
+        hint: 'Cor inicial do gradiente fallback de sentimento.',
+        validators: [
+            gradientColorStopValidator({
+                label: 'Gradiente sentimento (inicio)',
+                compareWith: [{ field: 'sentimentGradientMidColor', label: 'Gradiente sentimento (meio)' }],
+            }),
+        ],
+    },
+    {
+        name: 'sentimentGradientMidColor',
+        label: 'Gradiente sentimento (meio)',
+        editorType: 'color',
+        group: 'Aparencia',
+        hint: 'Cor intermediaria do gradiente fallback de sentimento.',
+        validators: [
+            gradientColorStopValidator({
+                label: 'Gradiente sentimento (meio)',
+                compareWith: [
+                    { field: 'sentimentGradientLowColor', label: 'Gradiente sentimento (inicio)' },
+                    { field: 'sentimentGradientHighColor', label: 'Gradiente sentimento (fim)' },
+                ],
+            }),
+        ],
+    },
+    {
+        name: 'sentimentGradientHighColor',
+        label: 'Gradiente sentimento (fim)',
+        editorType: 'color',
+        group: 'Aparencia',
+        hint: 'Cor final do gradiente fallback de sentimento.',
+        validators: [
+            gradientColorStopValidator({
+                label: 'Gradiente sentimento (fim)',
+                compareWith: [{ field: 'sentimentGradientMidColor', label: 'Gradiente sentimento (meio)' }],
+            }),
+        ],
+    },
     {
         name: 'sentimentShowBar',
         label: 'Mostrar barra de sentimento',
@@ -4362,6 +4651,48 @@ const filterInlinePipelineStatusProperties = [
         group: 'Aparencia',
         hint: 'Cores fallback quando a opcao nao informar color.',
     },
+    {
+        name: 'pipelineGradientLowColor',
+        label: 'Gradiente pipeline (inicio)',
+        editorType: 'color',
+        group: 'Aparencia',
+        hint: 'Cor inicial do gradiente fallback da barra/segmentos.',
+        validators: [
+            gradientColorStopValidator({
+                label: 'Gradiente pipeline (inicio)',
+                compareWith: [{ field: 'pipelineGradientMidColor', label: 'Gradiente pipeline (meio)' }],
+            }),
+        ],
+    },
+    {
+        name: 'pipelineGradientMidColor',
+        label: 'Gradiente pipeline (meio)',
+        editorType: 'color',
+        group: 'Aparencia',
+        hint: 'Cor intermediaria do gradiente fallback da barra/segmentos.',
+        validators: [
+            gradientColorStopValidator({
+                label: 'Gradiente pipeline (meio)',
+                compareWith: [
+                    { field: 'pipelineGradientLowColor', label: 'Gradiente pipeline (inicio)' },
+                    { field: 'pipelineGradientHighColor', label: 'Gradiente pipeline (fim)' },
+                ],
+            }),
+        ],
+    },
+    {
+        name: 'pipelineGradientHighColor',
+        label: 'Gradiente pipeline (fim)',
+        editorType: 'color',
+        group: 'Aparencia',
+        hint: 'Cor final do gradiente fallback da barra/segmentos.',
+        validators: [
+            gradientColorStopValidator({
+                label: 'Gradiente pipeline (fim)',
+                compareWith: [{ field: 'pipelineGradientMidColor', label: 'Gradiente pipeline (meio)' }],
+            }),
+        ],
+    },
     {
         name: 'pipelineEmptyStateText',
         label: 'Texto de estado vazio',
@@ -4542,6 +4873,48 @@ const filterInlineRatingProperties = [
         group: 'Aparência',
         hint: 'Cor para estrelas de notas altas (fallback: verde).',
     },
+    {
+        name: 'ratingGradientLowColor',
+        label: 'Gradiente estrelas (inicio)',
+        editorType: 'color',
+        group: 'Aparência',
+        hint: 'Cor inicial do gradiente aplicado na escala de estrelas.',
+        validators: [
+            gradientColorStopValidator({
+                label: 'Gradiente estrelas (inicio)',
+                compareWith: [{ field: 'ratingGradientMidColor', label: 'Gradiente estrelas (meio)' }],
+            }),
+        ],
+    },
+    {
+        name: 'ratingGradientMidColor',
+        label: 'Gradiente estrelas (meio)',
+        editorType: 'color',
+        group: 'Aparência',
+        hint: 'Cor intermediaria do gradiente aplicado na escala de estrelas.',
+        validators: [
+            gradientColorStopValidator({
+                label: 'Gradiente estrelas (meio)',
+                compareWith: [
+                    { field: 'ratingGradientLowColor', label: 'Gradiente estrelas (inicio)' },
+                    { field: 'ratingGradientHighColor', label: 'Gradiente estrelas (fim)' },
+                ],
+            }),
+        ],
+    },
+    {
+        name: 'ratingGradientHighColor',
+        label: 'Gradiente estrelas (fim)',
+        editorType: 'color',
+        group: 'Aparência',
+        hint: 'Cor final do gradiente aplicado na escala de estrelas.',
+        validators: [
+            gradientColorStopValidator({
+                label: 'Gradiente estrelas (fim)',
+                compareWith: [{ field: 'ratingGradientMidColor', label: 'Gradiente estrelas (meio)' }],
+            }),
+        ],
+    },
     {
         name: 'ratingBadgeColor',
         label: 'Cor ícone badges',
@@ -4735,6 +5108,48 @@ const filterInlineScorePriorityProperties = [
         group: 'Aparencia',
         hint: 'Cores usadas quando uma faixa nao informa color.',
     },
+    {
+        name: 'scoreGradientLowColor',
+        label: 'Gradiente score (inicio)',
+        editorType: 'color',
+        group: 'Aparencia',
+        hint: 'Cor inicial do gradiente fallback da trilha.',
+        validators: [
+            gradientColorStopValidator({
+                label: 'Gradiente score (inicio)',
+                compareWith: [{ field: 'scoreGradientMidColor', label: 'Gradiente score (meio)' }],
+            }),
+        ],
+    },
+    {
+        name: 'scoreGradientMidColor',
+        label: 'Gradiente score (meio)',
+        editorType: 'color',
+        group: 'Aparencia',
+        hint: 'Cor intermediaria do gradiente fallback da trilha.',
+        validators: [
+            gradientColorStopValidator({
+                label: 'Gradiente score (meio)',
+                compareWith: [
+                    { field: 'scoreGradientLowColor', label: 'Gradiente score (inicio)' },
+                    { field: 'scoreGradientHighColor', label: 'Gradiente score (fim)' },
+                ],
+            }),
+        ],
+    },
+    {
+        name: 'scoreGradientHighColor',
+        label: 'Gradiente score (fim)',
+        editorType: 'color',
+        group: 'Aparencia',
+        hint: 'Cor final do gradiente fallback da trilha.',
+        validators: [
+            gradientColorStopValidator({
+                label: 'Gradiente score (fim)',
+                compareWith: [{ field: 'scoreGradientMidColor', label: 'Gradiente score (meio)' }],
+            }),
+        ],
+    },
     {
         name: 'scoreValueFallbackColor',
         label: 'Cor fallback valor',