@praxisui/metadata-editor 3.0.0-beta.3 → 3.0.0-beta.5

package/fesm2022/praxisui-metadata-editor.mjs

@@ -1136,6 +1136,8 @@ const selectProperties = [
     { name: 'searchable', label: 'Buscável', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comp.inline1', inline: true, hint: 'Mostra campo de busca; em remoto, filtra na API.' },
     { name: 'searchPlaceholder', label: 'Placeholder da busca', editorType: 'text', group: 'Formato/Comportamento', hint: 'Texto do campo de busca no popover/lista.' },
     { name: 'maxSelections', label: 'Máximo de seleções', editorType: 'number', group: 'Formato/Comportamento', hint: 'Limite de itens quando multiple=true.' },
+    { name: 'readonly', label: 'Somente leitura', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comp.inline2', inline: true, hint: 'Mantém o valor visível sem permitir interação.' },
+    { name: 'disabled', label: 'Desabilitado', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comp.inline2', inline: true, hint: 'Desativa interação, foco e ações do trigger.' },
     // 5) Validação
     { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
     { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
@@ -1217,6 +1219,10 @@ const transferListProperties = [
     // Geral
     { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
     { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral', hint: 'Texto de ajuda exibido abaixo do campo.' },
+    { name: 'leftLabel', label: 'Label da lista esquerda', editorType: 'text', group: 'Geral', hint: 'Titulo exibido acima dos itens disponiveis.' },
+    { name: 'rightLabel', label: 'Label da lista direita', editorType: 'text', group: 'Geral', hint: 'Titulo exibido acima dos itens selecionados.' },
+    { name: 'leftPlaceholder', label: 'Placeholder da busca esquerda', editorType: 'text', group: 'Geral', hint: 'Texto de busca da lista de itens disponiveis.' },
+    { name: 'rightPlaceholder', label: 'Placeholder da busca direita', editorType: 'text', group: 'Geral', hint: 'Texto de busca da lista de itens selecionados.' },
     // Dados/Opções
     {
         name: 'options',
@@ -2086,11 +2092,6 @@ const timeInputProperties = [
     { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Ícones', hint: 'primary, accent, warn ou hex/rgb (ex.: #ff0000).' },
     { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Ícones', hint: 'Nome do ícone Material Symbols (ex.: mi:info).' },
     { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Ícones', hint: 'primary, accent, warn ou hex/rgb (ex.: #ff0000).' },
-    { name: 'panelToggleCloseIcon', label: 'Ícone toggle fechado', editorType: 'text', group: 'Ícones', row: 'icon.toggle', inline: true, hint: 'Ícone do botão quando painel está fechado (fallback: expand_more).' },
-    { name: 'panelToggleOpenIcon', label: 'Ícone toggle aberto', editorType: 'text', group: 'Ícones', row: 'icon.toggle', inline: true, hint: 'Ícone do botão quando painel está aberto (fallback: expand_less).' },
-    { name: 'panelToggleIconColor', label: 'Cor do toggle', editorType: 'color', group: 'Ícones', row: 'icon.toggle', inline: true, hint: 'primary/accent/warn ou cor CSS.' },
-    { name: 'optionSelectedIcon', label: 'Ícone selecionado', editorType: 'text', group: 'Ícones', row: 'icon.selected', inline: true, hint: 'Ícone da opção selecionada na lista (fallback: check).' },
-    { name: 'optionSelectedIconColor', label: 'Cor selecionado', editorType: 'color', group: 'Ícones', row: 'icon.selected', inline: true, hint: 'primary/accent/warn ou cor CSS.' },
     // Formato/Comportamento
     { name: 'step', label: 'Step (segundos)', editorType: 'number', group: 'Formato/Comportamento', hint: 'Incremento em segundos (ex.: 60 = 1 min).' },
     { name: 'interval', label: 'Intervalo (segundos ou 30m)', editorType: 'text', group: 'Formato/Comportamento', hint: 'Compatibilidade inline: intervalo entre horários.' },
@@ -2194,11 +2195,6 @@ const timePickerProperties = [
     { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Ícones', hint: 'Tema (primary/accent/warn) ou cor CSS (hex/rgb).' },
     { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Ícones', hint: 'Nome do ícone Material Symbols (ex.: mi:info).' },
     { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Ícones', hint: 'Tema (primary/accent/warn) ou cor CSS (hex/rgb).' },
-    { name: 'panelToggleCloseIcon', label: 'Ícone toggle fechado', editorType: 'text', group: 'Ícones', row: 'icon.toggle', inline: true, hint: 'Ícone do botão quando painel está fechado (fallback: expand_more).' },
-    { name: 'panelToggleOpenIcon', label: 'Ícone toggle aberto', editorType: 'text', group: 'Ícones', row: 'icon.toggle', inline: true, hint: 'Ícone do botão quando painel está aberto (fallback: expand_less).' },
-    { name: 'panelToggleIconColor', label: 'Cor do toggle', editorType: 'color', group: 'Ícones', row: 'icon.toggle', inline: true, hint: 'Tema (primary/accent/warn) ou cor CSS.' },
-    { name: 'optionSelectedIcon', label: 'Ícone selecionado', editorType: 'text', group: 'Ícones', row: 'icon.selected', inline: true, hint: 'Ícone da opção selecionada na lista (fallback: check).' },
-    { name: 'optionSelectedIconColor', label: 'Cor selecionado', editorType: 'color', group: 'Ícones', row: 'icon.selected', inline: true, hint: 'Tema (primary/accent/warn) ou cor CSS.' },
     // Dados/Opções
     { name: 'timeOptions', label: 'Opções (uma por linha)', editorType: 'textarea', group: 'Dados/Opções', hint: 'Lista manual de horários (HH:mm ou HH:mm:ss), um por linha; use para presets.' },
     // Formato/Comportamento
@@ -2233,6 +2229,8 @@ const timePickerProperties = [
     { name: 'showSeconds', label: 'Exibir segundos', editorType: 'checkbox', group: 'Formato/Comportamento', hint: 'Habilita seleção HH:mm:ss.' },
     { name: 'stepMinute', label: 'Passo (min)', editorType: 'number', group: 'Formato/Comportamento', row: 'fmt.steps', inline: true, hint: 'Incremento de minutos.' },
     { name: 'stepSecond', label: 'Passo (seg)', editorType: 'number', group: 'Formato/Comportamento', row: 'fmt.steps', inline: true, hint: 'Incremento de segundos.' },
+    { name: 'readonly', label: 'Somente leitura', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'fmt.state', inline: true, hint: 'Mantém o horário visível sem abrir o seletor.' },
+    { name: 'disabled', label: 'Desabilitado', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'fmt.state', inline: true, hint: 'Desativa trigger, foco e abertura do painel.' },
     { name: 'timeFilter', label: 'Filtro (id função)', editorType: 'text', group: 'Formato/Comportamento', hint: 'ID de função para filtrar horários.' },
     { name: 'inlineTexts.hourLabel', label: 'Inline: rótulo hora', editorType: 'text', group: 'Formato/Comportamento' },
     { name: 'inlineTexts.minuteLabel', label: 'Inline: rótulo minuto', editorType: 'text', group: 'Formato/Comportamento' },
@@ -2538,6 +2536,17 @@ const passwordInputProperties = [
     { name: 'ariaLabelledby', label: 'ARIA labelledby', editorType: 'text', group: 'Acessibilidade', hint: 'ID de elemento que atua como label.' },
     { name: 'tabIndex', label: 'TabIndex', editorType: 'number', group: 'Acessibilidade' },
     // Ações
+    { name: 'revealToggle.enabled', label: 'Reveal: habilitar', editorType: 'checkbox', group: 'Ações', hint: 'Mostra botão para alternar a visibilidade da senha.' },
+    { name: 'revealToggle.style', label: 'Reveal: estilo', editorType: 'select', group: 'Ações', options: [
+            { value: 'icon', text: 'Ícone' },
+            { value: 'text', text: 'Texto' },
+        ] },
+    { name: 'revealToggle.showLabel', label: 'Reveal: label (mostrar)', editorType: 'text', group: 'Ações', hint: 'Usado quando o estilo estiver em texto.' },
+    { name: 'revealToggle.hideLabel', label: 'Reveal: label (ocultar)', editorType: 'text', group: 'Ações', hint: 'Usado quando o estilo estiver em texto.' },
+    { name: 'revealToggle.iconShow', label: 'Reveal: ícone (mostrar)', editorType: 'text', group: 'Ações', hint: "Material Symbols (ex.: mi:visibility). Use o seletor ao lado para buscar." },
+    { name: 'revealToggle.iconHide', label: 'Reveal: ícone (ocultar)', editorType: 'text', group: 'Ações', hint: "Material Symbols (ex.: mi:visibility_off). Use o seletor ao lado para buscar." },
+    { name: 'revealToggle.tooltip', label: 'Reveal: tooltip', editorType: 'text', group: 'Ações' },
+    { name: 'revealToggle.ariaLabel', label: 'Reveal: aria-label', editorType: 'text', group: 'Ações', hint: 'Descreve a ação do botão para leitores de tela.' },
     { name: 'clearButton.enabled', label: 'Clear: habilitar', editorType: 'checkbox', group: 'Ações', hint: 'Mostra botão para limpar valor.' },
     { name: 'clearButton.icon', label: 'Clear: ícone', editorType: 'text', group: 'Ações', hint: "Material Symbols (ex.: mi:clear). Use o seletor ao lado para buscar." },
     { name: 'clearButton.iconColor', label: 'Clear: cor do ícone', editorType: 'color', group: 'Ações', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
@@ -3177,6 +3186,8 @@ const rangeSliderProperties = [
             { value: 'auto', text: 'Auto' },
         ], hint: 'Marcas na trilha; auto calcula com base no step.' },
     { name: 'discrete', label: 'Discreto', editorType: 'checkbox', group: 'Formato/Comportamento', hint: 'Mostra valor fixo por tick; use com showTicks.' },
+    { name: 'readonly', label: 'Somente leitura', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comp.state', inline: true, hint: 'Mantém o valor renderizado sem permitir ajuste do slider.' },
+    { name: 'disabled', label: 'Desabilitado', editorType: 'checkbox', group: 'Formato/Comportamento', row: 'comp.state', inline: true, hint: 'Desativa arraste, foco e presets rápidos.' },
     { name: 'vertical', label: 'Vertical', editorType: 'checkbox', group: 'Formato/Comportamento', hint: 'Inverte para eixo Y.' },
     { name: 'invert', label: 'Inverter', editorType: 'checkbox', group: 'Formato/Comportamento', hint: 'Inverte a direção (direita→esquerda).' },
     { name: 'displayWith', label: 'DisplayWith (id função)', editorType: 'text', group: 'Formato/Comportamento', hint: 'Função para formatar valores (ex.: percentual).' },
@@ -5419,9 +5430,108 @@ class FieldMetadataEditorComponent {
         catch { }
         this.rebuildEditorForType(this.controlType);
     }
+    resolveCanonicalEditorProperties(controlType, controlTypeToken) {
+        const inlineProps = resolveInlineFilterEditorProperties(controlTypeToken);
+        if (inlineProps?.length)
+            return inlineProps;
+        if (controlType === FieldControlType.INPUT)
+            return inputProperties;
+        if (controlTypeToken === 'searchableselect' ||
+            controlTypeToken === 'asyncselect' ||
+            controlTypeToken === 'entitylookup')
+            return selectProperties;
+        if (controlType === FieldControlType.NUMERIC_TEXT_BOX)
+            return numberProperties;
+        if (controlType === FieldControlType.DATE_PICKER)
+            return dateProperties;
+        if (controlType === FieldControlType.DATE_INPUT)
+            return dateInputProperties;
+        if (controlType === FieldControlType.DATE_RANGE)
+            return dateRangeProperties;
+        if (controlType === FieldControlType.DATETIME_LOCAL_INPUT)
+            return datetimeLocalProperties;
+        if (controlType === FieldControlType.TIME_INPUT)
+            return timeInputProperties;
+        if (controlType === FieldControlType.TIME_PICKER)
+            return timePickerProperties;
+        if (controlType === FieldControlType.TIME_RANGE)
+            return timeRangeProperties;
+        if (controlType === FieldControlType.MONTH_INPUT)
+            return monthInputProperties;
+        if (controlType === FieldControlType.WEEK_INPUT)
+            return weekInputProperties;
+        if (controlType === FieldControlType.EMAIL_INPUT)
+            return emailInputProperties;
+        if (controlType === FieldControlType.PASSWORD)
+            return passwordInputProperties;
+        if (controlType === FieldControlType.URL_INPUT)
+            return urlInputProperties;
+        if (controlType === FieldControlType.SEARCH_INPUT)
+            return searchInputProperties;
+        if (controlType === FieldControlType.PHONE)
+            return phoneInputProperties;
+        if (controlType === FieldControlType.COLOR_INPUT)
+            return colorInputProperties;
+        if (controlType === FieldControlType.COLOR_PICKER)
+            return colorPickerProperties;
+        if (controlType === FieldControlType.RATING)
+            return ratingProperties;
+        if (controlType === FieldControlType.SELECT ||
+            controlType === FieldControlType.MULTI_SELECT ||
+            controlType === FieldControlType.SEARCHABLE_SELECT ||
+            controlType === FieldControlType.ASYNC_SELECT ||
+            controlType === FieldControlType.AUTO_COMPLETE ||
+            controlType === FieldControlType.SELECTION_LIST)
+            return selectProperties;
+        if (controlType === FieldControlType.TEXTAREA)
+            return textareaProperties;
+        if (controlType === FieldControlType.TRANSFER_LIST)
+            return transferListProperties;
+        if (controlType === FieldControlType.RADIO)
+            return radioProperties;
+        if (controlType === FieldControlType.BUTTON_TOGGLE)
+            return buttonToggleProperties;
+        if (controlType === FieldControlType.CHIP_INPUT)
+            return chipInputProperties;
+        if (controlType === FieldControlType.CHECKBOX)
+            return checkboxGroupProperties;
+        if (controlType === FieldControlType.TOGGLE)
+            return toggleProperties;
+        if (controlType === FieldControlType.SLIDER)
+            return sliderProperties;
+        if (controlType === FieldControlType.RANGE_SLIDER)
+            return rangeSliderProperties;
+        if (controlType === FieldControlType.CURRENCY_INPUT)
+            return currencyInputProperties;
+        if (controlType === FieldControlType.PRICE_RANGE)
+            return priceRangeProperties;
+        if (controlType === FieldControlType.CPF_CNPJ_INPUT)
+            return cpfCnpjProperties;
+        if (controlType === FieldControlType.FILE_UPLOAD)
+            return fileUploadProperties;
+        if (controlType === FieldControlType.YEAR_INPUT)
+            return yearInputProperties;
+        if (controlType === FieldControlType.AVATAR)
+            return avatarProperties;
+        if (controlType === FieldControlType.TREE_SELECT ||
+            controlType === FieldControlType.MULTI_SELECT_TREE)
+            return treeSelectProperties;
+        return undefined;
+    }
     rebuildEditorForType(ct) {
         this.controlType = ct;
         let props = this.registry.getProperties(this.controlType);
+        const controlTypeToken = normalizeControlTypeToken(this.controlType);
+        const canonicalProps = this.resolveCanonicalEditorProperties(this.controlType, controlTypeToken);
+        if (canonicalProps?.length) {
+            const currentPropNames = new Set(props.map((prop) => prop.name));
+            const hasInlineConfigDrift = !props.length ||
+                canonicalProps.some((inlineProp) => !currentPropNames.has(inlineProp.name));
+            if (hasInlineConfigDrift) {
+                this.registry.register(this.controlType, canonicalProps);
+                props = canonicalProps;
+            }
+        }
         try {
             (console.log || console.debug)('[FieldMetadataEditor] init', {
                 controlType: this.controlType,
@@ -5440,14 +5550,12 @@ class FieldMetadataEditorComponent {
         }
         catch { }
         // Fallback de registro mínimo para facilitar execução inicial
+        if (!props.length && canonicalProps?.length) {
+            this.registry.register(this.controlType, canonicalProps);
+            props = canonicalProps;
+        }
         if (!props.length) {
-            const controlTypeToken = normalizeControlTypeToken(this.controlType);
-            const inlineProps = resolveInlineFilterEditorProperties(controlTypeToken);
-            if (inlineProps) {
-                this.registry.register(this.controlType, inlineProps);
-                props = inlineProps;
-            }
-            else if (this.controlType === FieldControlType.INPUT) {
+            if (this.controlType === FieldControlType.INPUT) {
                 this.registry.register(this.controlType, inputProperties);
                 props = inputProperties;
             }