# DeprecatedSelectorDirective

![Status](https://img.shields.io/badge/status-stable-brightgreen)

⚠️ **USO INTERNO DO MONOREPO APENAS**

Diretiva utilitária aplicada via `hostDirectives` para alertar, em modo de desenvolvimento, sobre o uso de seletores CSS deprecados em componentes que mantêm compatibilidade retroativa com um seletor antigo (ex: `s-stepper, s-steps`).

**NÃO** deve ser usado por projetos externos que consomem a biblioteca — é uma ferramenta interna para gerenciar depreciações de seletores dentro do próprio monorepo `@seniorsistemas/angular-components`.

## Quando usar

- Um componente da biblioteca precisa manter um seletor antigo funcionando (`selector: 's-novo-nome, s-nome-antigo'`) durante um período de transição
- Alertar desenvolvedores que ainda usam o seletor antigo no console, em modo de desenvolvimento, indicando o seletor novo e a versão de remoção

## Quando não usar

- Em projetos externos que consomem `@seniorsistemas/angular-components` — este é um secondary entry point interno, não documentado publicamente
- Para depreciar inputs, outputs ou métodos — esta diretiva trata apenas do seletor do elemento host
- Quando não há um seletor legado a manter — não adicione a diretiva "preventivamente"

## Instalação

```typescript
import { DeprecatedSelectorDirective, DEPRECATED_CONFIG } from '@seniorsistemas/angular-components/common/deprecated-selector';
```

> O Angular não suporta barrel exports para `hostDirectives` devido à análise estática do compilador — sempre importe diretamente deste secondary entry point, nunca através do entry point principal do pacote `common`.

## Uso básico

Aplique `DeprecatedSelectorDirective` via `hostDirectives` no `@Component` que mantém o seletor legado, e forneça `DEPRECATED_CONFIG` com os dados do aviso:

```typescript
import { Component } from '@angular/core';
import {
  DEPRECATED_CONFIG,
  DeprecatedSelectorDirective,
} from '@seniorsistemas/angular-components/common/deprecated-selector';

@Component({
  selector: 's-meu-componente, s-nome-antigo',
  standalone: true,
  hostDirectives: [DeprecatedSelectorDirective],
  providers: [
    {
      provide: DEPRECATED_CONFIG,
      useValue: {
        oldSelector: 's-nome-antigo',
        newSelector: 's-meu-componente',
        removalVersion: '20.0.0',
      },
    },
  ],
  templateUrl: './meu-componente.component.html',
})
export class MeuComponenteComponent {}
```

Quando o elemento é renderizado com o seletor antigo (`<s-nome-antigo>`), a diretiva imprime um aviso formatado no console em modo de desenvolvimento (`isDevMode()`), indicando o seletor novo e a versão em que o antigo será removido. Em produção, nenhum aviso é exibido.

## API

### Inputs

Nenhum. A diretiva não expõe inputs — toda a configuração é feita via injeção do token `DEPRECATED_CONFIG`.

### Outputs

Nenhum.

### Tipos

```typescript
interface DeprecatedSelectorConfig {
  oldSelector: string;    // seletor antigo/deprecado, ex: 's-steps'
  newSelector: string;    // seletor novo recomendado, ex: 's-stepper'
  removalVersion: string; // versão em que o seletor antigo será removido, ex: '20.0.0'
}

const DEPRECATED_CONFIG: InjectionToken<DeprecatedSelectorConfig>;
```

## Exemplos

### Componente com seletor legado (`stepper`)

Exemplo real extraído de `stepper.component.ts`, que ainda responde ao seletor antigo `s-steps`:

```typescript
@Component({
  selector: 's-stepper, s-steps',
  templateUrl: './stepper.component.html',
  styleUrls: ['./stepper.component.scss'],
  hostDirectives: [DeprecatedSelectorDirective],
  providers: [
    {
      provide: DEPRECATED_CONFIG,
      useValue: {
        oldSelector: 's-steps',
        newSelector: 's-stepper',
        removalVersion: '20.0.0',
      },
    },
  ],
})
export class StepperComponent { /* ... */ }
```

Ao renderizar `<s-steps>` em modo de desenvolvimento, o console exibe:

```
[DEPRECATED] O seletor <s-steps> será removido na versão 20.0.0. Use <s-stepper>.
```

### Outro exemplo real (`content-generator`)

Extraído de `content-generator.component.ts`, que substituiu o antigo `s-text-area-ia`:

```typescript
@Component({
  selector: 's-content-generator, s-text-area-ia',
  templateUrl: './content-generator.component.html',
  styleUrls: ['./content-generator.component.scss'],
  hostDirectives: [DeprecatedSelectorDirective],
  providers: [
    {
      provide: DEPRECATED_CONFIG,
      useValue: {
        oldSelector: 's-text-area-ia',
        newSelector: 's-content-generator',
        removalVersion: '20.0.0',
      },
    },
  ],
  standalone: true,
})
export class ContentGeneratorComponent { /* ... */ }
```

## Acessibilidade

- Não aplicável — a diretiva não renderiza elementos nem altera o comportamento de acessibilidade do componente host, apenas emite um aviso no console em modo de desenvolvimento

## Componentes relacionados

- Não há componentes relacionados — esta é uma diretiva utilitária interna, não um componente de UI