Guia de atualização

No Ignite UI for Angular controle de versão, o primeiro número sempre corresponde à versão principal do Angular o código dá suporte e o segundo é dedicado para versões principais. Alterações significativas podem ser introduzidas entre as versões principais. Uma lista abrangente de alterações para cada versão do Ignite UI for Angular pode ser encontrada no produto CHANGELOG

O pacote Ignite UI for Angular também suporta a migração automática de versão por meio ng update de esquemas. Eles tentarão migrar todas as alterações significativas possíveis (seletores renomeados, classes e propriedades @Input/Output), no entanto, ainda pode haver alterações que não podem ser migradas. Eles geralmente estão relacionados à lógica do aplicativo datilografado e serão descritos adicionalmente abaixo.

Primeiro, execute o ng update comando que analisará seu aplicativo e as atualizações disponíveis para seus pacotes.

ng update

Para atualizar o pacote licenciado Ignite UI for Angular, execute o seguinte comando:

ng update @infragistics/igniteui-angular

Para atualizar o pacote Ignite UI for Angular free, execute o seguinte comando:

ng update igniteui-angular

Quando você atualiza @infragistics/igniteui-angular ou igniteui-angular- é recomendado atualizar,e @angular/core @angular/cli igniteui-cli pacotes para suas versões correspondentes. Para atualizar o pacote da CLI do Ignite UI, execute o seguinte comando:

ng update igniteui-cli

Para atualizar o pacote principal do Angular, execute o seguinte comando:

ng update @angular/core

Para atualizar o pacote da CLI do Angular, use o seguinte comando:

ng update @angular/cli

Note

Se o ng update comando falhar devido a incompatibilidades de dependência de pacote, reverta a atualização, exclua a node_modules pasta e execute novamente a atualização com--force sinalizador.

Additional manual changes

Infelizmente, nem todas as alterações podem ser atualizadas automaticamente. As alterações abaixo são divididas em seções à medida que ocorrem nas versões, portanto, se alguma atualização for necessária, você deve começar a partir da versão atual e aplicar outras atualizações de baixo para cima.

Por exemplo: se você estiver atualizando da versão 6.2.4 para a 7.1.0, comece com a opção "De 6.x .. " aplique essas alterações e vá subindo:

From 17.2.x to 18.0.x

Breaking changes

Na versão 18.0.x, a propriedade depracated displayDensity é removida em favor da propriedade--ig-size CSS personalizada. Para obter mais referências, consulte o guia de atualização de 16.0.x a 16.1.x.

Geral

IgxPivotGrid

Breaking changes

A propriedade showPivotConfigurationUI da grade dinâmica é alterada e estendida para pivotUI.

// version 17.2.x
<igx-pivot-grid [data]="data" [pivotConfiguration]="pivotConfig" [showPivotConfigurationUI]="false">
</igx-pivot-grid>

// version 18.0.x
<igx-pivot-grid [data]="data" [pivotConfiguration]="pivotConfig" [pivotUI]="{ showConfiguration: false }">
</igx-pivot-grid>

From 17.0.x to 17.1.x

Geral

IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
- Alterações significativas
  - rowAdd e rowDelete agora emitem argumento de evento do tipo IRowDataCancelableEventArgs em vez de IGridEditEventArgs. As duas interfaces ainda são compatíveis, no entanto, redundantes para essas propriedades cellID de eventos, newValue, oldValue,estão isAddRow obsoletas e IRowDataCancelableEventArgs serão removidas em uma versão futura. Alternar para as novas interfaces corretas deve revelar qualquer uso obsoleto que possa ser removido com segurança.
- Substituições
  - rowID foi preterida nas seguintes interfaces: IGridEditDoneEventArgs, IPathSegment, IRowToggleEventArgs, IPinRowEventArgs,,e IgxAddRowParent será removida em uma versão futura. Use rowKey em vez disso.
  - primaryKey foi preterida nas seguintes interfaces: IRowDataEventArgs, IGridEditDoneEventArgs. Use rowKey em vez disso.
  - data foi preterida nas seguintes interfaces: IRowDataEventArgs. Use rowData em vez disso.

Breaking changes

Na versão 17.1.x, o icon igxButton tipo da diretiva foi alterado para a igxIconButton diretiva do tipo flat. As migrações automáticas estão disponíveis e serão aplicadas ng update. No entanto, algumas das igxButton propriedades de entrada que podiam ser usadas anteriormente com os icon botões de texto não podem ser aplicadas ao recém-criado igxIconButton. Se você usou as igxButtonColor propriedades ou com igxButtonBackground um botão do tipo icon, atualize-o da seguinte maneira:

// version 17.0.x
<button igxButton="icon" [igxButtonBackground]="'red'">
    <igx-icon fontSet="material">search</igx-icon>
</button>

// version 17.1.x
<button igxIconButton="flat" [style.background]="'red'">
    <igx-icon fontSet="material">search</igx-icon>
</button>

NOTA: Os usuários precisam adicionar manualmente em IgxIconButtonDirective suas importações:

import { IgxIconButtonDirective } from 'igniteui-angular';

@Component({
    ...
    imports: [IgxIconButtonDirective]
})

From 16.1.x to 17.0.x

Geral

Na versão 17.0, Angular removeram os @nguniversal/* pacotes. Se o projeto usar esses pacotes, uma chamada padrão ng update causará um erro nas igniteui-angular migrações devido à modificação package-lock.json inadequada - mais detalhes podem ser encontrados aqui. Para atualizar para 17.0.x uma das seguintes etapas adicionais, é necessário executar:
- Exclua o arquivo antes de package-lock.json executar ng update
- Executar npm dedupe --legacy-peer-deps antes de correr ng update igniteui-angular

Alteração significativa

O tipo IComboSelectionChangingEventArgs de argumentos de evento de selectionChanging In IgxCombo tem estas alterações:
- propriedades newSelection e oldSelection foram renomeadas para newValue e oldValue respectivamente para refletir melhor sua função. Assim como o Combo, eles emitirão os valores de propriedade especificados ou itens de dados completos, dependendo valueKey se estão definidos ou não. Migrações automáticas value estão disponíveis e serão aplicadas ng update.
- duas novas propriedades newSelection e oldSelection são expostas no lugar das antigas que não são mais afetadas e valueKey emitem consistentemente itens de Combo. data
- propriedades added e removed agora sempre contêm itens de dados, independentemente de valueKey serem definidos. Isso os alinha com as propriedades and atualizadas newSelection oldSelection.

Se o código no selectionChanging manipulador de eventos dependia da leitura valueKeys do argumento do evento, atualize-o da seguinte maneira:

  // version 16.1.x
  public handleSelectionChanging(e: IComboSelectionChangingEventArgs): void {
    this.addedItems = e.added;
    this.removedItems = e.removed;
  }

  // version 17.0.x
  public handleSelectionChanging(e: IComboSelectionChangingEventArgs): void {
    this.addedItems = e.added.map(i => {
       return i[e.owner?.valueKey]
    });
    this.removedItems = e.removed.map(i => {
       return i[e.owner?.valueKey]
    });
  }

getCurrentResourceStrings foi removido. Em vez disso, use as importações de cadeia de caracteres de componente específicas.
- Por exemplo, as cordas EN vêm de igniteui-angular: import { GridResourceStringsEN } from 'igniteui-angular';
- Por exemplo, DE ou outras strings de linguagem vêm de igniteui-angular-i18n: import { GridResourceStringsDE } from 'igniteui-angular-i18n';
Exemplos de uso podem ser encontrados no documento Localização (i18n) atualizado.

From 16.0.x to 16.1.x

Geral

Non-breaking changes

Estamos nos afastando do DisplayDensityToken token de injeção como uma forma de definir o tamanho dos componentes em favor de uma maneira mais simples e robusta - usando propriedades personalizadas CSS. Por esse motivo, o DisplayDensityToken token de injeção agora está obsoleto. Isso se espalha por todos os componentes que expõem a displayDensity propriedade de entrada. As propriedades de token e entrada serão removidas na versão 17.0.0. Recomendamos que você faça o seguinte:

Remova todas as declarações em que o DisplayDensityToken é fornecido:

// *.component.ts
// remove the provider declaration for `DisplayDensityToken`
providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDensity.compact } }],

Remova todas as associações ou atribuições programáticas para a displayDensity propriedade input:

<!-- Remove `[displayDensity]="'compact'"` -->
<igx-grid [displayDensity]="'compact'">...</igx-grid>

Em vez disso, use a propriedade--ig-size CSS personalizada para obter o mesmo resultado que displayDensity:

/* 
Add --ig-size to a component or global file.
Available values are:
  - compact: --ig-size-small
  - cosy: --ig-size-medium
  - comfortable: --ig-size-large
*/
igx-grid {
    --ig-size: var(--ig-size-small);
}

From 15.1.x to 16.0.x

A atualização para o Angular 16 vem com mudanças na forma como NgModules opera sob o capô. Anteriormente, adicionar um módulo que dependesse internamente de outro disponibilizaria as declarações de ambos em seu aplicativo. Esse comportamento não foi intencional e o Angular 16 o altera. Se o seu aplicativo dependia desse comportamento, por exemplo, você estava importando apenas um módulo contendo muitas dependências internas e IgxGridModule usando componentes que vêm com elas, você precisará adicionar manualmente os módulos para cada componente que seu aplicativo usa separadamente.
Alterações significativas
Na versão 16.0.x, todas as propriedades da grade, relacionadas à paginação, são removidas. O comportamento de paginação agora é configurado e controlado inteiramente por meio do IgxPaginatorComponent. Para habilitar a paginação na grade, inicialize o IgxPaginatorComponent na grade e defina as propriedades de entrada relacionadas e anexe aos manipuladores de eventos ao próprio paginador:

<igx-grid ...>
    <igx-paginator #paginator [totalRecords]="totalRecords" [perPage]="25" (pageChange)="pageChange($event) (perPageChange)="perPageChange($event)">
    </igx-paginator>
<igx-grid>

@ViewChild('grid', { static: true }) private grid: IgxGridComponent;
@ViewChild('paginator', { static: true }) private paginator: IgxPaginatorComponent;

// prior version 16.0.x
public onButtonClick(event) {
    this.grid.nextPage();
    this.grid.previousPage();
    this.grid.paginate(0);
}

// from version 16.0.x
public onButtonClick(event) {
    this.paginator.nextPage();
    this.paginator.previousPage();
    this.paginator.paginate(0);
}

Na versão 16.0.x, o método getCellByColumnVisibleIndex(rowIndex: number, index: number) grid é removido. Em vez disso, use: getCellByKey(rowSelector: any, columnField: string) ou getCellByColumn(rowIndex: number, columnField: string). Exemplo:

 // prior version 16.0.x
 const cell = grid.getCellByColumnVisibleIndex(rowIndex, columnIndex);

 // after version 16.0.x
 const rowKey = grid.getRowByIndex(rowIndex).key;
 const columnField = grid.getColumnByVisibleIndex(columnIndex).field;
 const cell = grid.getCellByKey(rowKey, columnField);
 const cell = grid.getCellByColumn(rowIndex, columnField);

From 15.0.x to 15.1.x

Alteração significativa
rowSelectionChanging O tipo de argumentos é alterado. Agora, as oldSelection coleções , newSelection, added and removed da interface não consistem mais nas chaves de linha dos elementos selecionados (quando a grade definiu um primaryKey), mas agora, IRowSelectionEventArgs em qualquer caso, os dados da linha são emitidos. Quando a grade estiver trabalhando com dados remotos e a primaryKey estiver definido - para as linhas selecionadas que não fazem parte da exibição de grade no momento, um objeto de dados de linha parcial será emitido.

Se o código no rowSelectionChanging manipulador de eventos dependia da leitura de primaryKeys do argumento do evento, atualize-o da seguinte maneira:

  // prior version 15.1.x
  public handleRowSelection(e: IRowSelectionEventArgs): void {
    this.selectedRows = e.newSelection;
  }

  // after version 15.1.x
  public handleRowSelection(e: IRowSelectionEventArgs): void {
    this.selectedRows = e.newSelection.map(rec => {
       return rec[e.owner?.primaryKey]
    });
  }

Mudança de comportamento Quando a linha selecionada é excluída do componente de grade, rowSelectionChanging o evento não é emitido.
Mudança visual
Na versão 15.1, os tamanhos dos componentes de entrada aumentaram. Isso é mais perceptível ao usar o tema Material. Fazemos isso para corresponder às especificações do material. Se o aplicativo for afetado negativamente pela alteração, você poderá usar a entrada displayDensity e defini-la para uma configuração mais densa, por exemplo, de confortável para aconchegante ou de aconchegante para compacto.

Exemplo

    <igx-input-group displayDensity="cosy">
        ...
    </igx-input-group>

    <igx-select displayDensity="cosy">
        ...
    </igx-select>

    <igx-combo displayDensity="cosy">
        
    </igx-combo>

    <igx-simple-combo displayDensity="cosy">
        ...
    </igx-simple-combo>

Na versão 15.1, o componente de seleção e combinação agora tem plano de fundo ao redor do ícone de alternância. Você pode alterar o plano de fundo e a cor do ícone usando scss ou css.

Exemplo

    $my-select: select-theme(
        $toggle-button-background: red,
        $toggle-button-foreground: #fff,
    );

    $my-combo: combo-theme(
        $toggle-button-background: red,
        $toggle-button-foreground: #fff,
    );

    @include css-vars($my-select);
    @include css-vars($my-combo);

**Example**

    .igx-select {
        --igx-select-toggle-button-background: red;
        --igx-select-toggle-button-foreground: #fff;
    }
    
    .igx-combo {
        --igx-combo-toggle-button-background: red;
        --igx-combo-toggle-button-foreground: #fff;
    }

From 14.2.x to 15.0.x

Geral

igxGrid, igxHierarchicalGrid, igxTreeGrid
- Os parâmetros em modelos de grade agora têm tipos para seu contexto. Isso também pode causar problemas se o aplicativo estiver no modo de modelo estrito e usar o tipo errado. Referências ao modelo que podem exigir conversão:
  - IgxColumnComponent-ColumnType (por exemplo, o parâmetro de coluna em igxFilterCellTemplate)
  - IgxGridCell-CellType (por exemplo, o parâmetro de célula no igxCell modelo)
Ignite UI for Angular tem uma dependência do tema igniteui. Adicione a seguinte configuração de pré-processador em seu angular.json arquivo.
```
  "build": {
    "options": {
      "stylePreprocessorOptions": {
  	"includePaths": ["node_modules"]
      }
    }
  }
```
Alteração interruptiva- Todas as variáveis CSS globais para configuração de tema, cores, elevações e tipografia alteraram o prefixo de--igx para--ig. Essa alteração não afeta as variáveis do componente global;

Example:

Na versão 14.2.x:
```
:root {
    --igx-typography: 'Titillium Web', sans-serif; 
}
```
Na versão 15.0.x, isso se torna:
```
:root {
    --ig-typography: 'Titillium Web', sans-serif; 
}
```

Themes

Alteração interruptiva- O grays argumento de entrada foi renomeado para gray.
Veja como isso afetará o código existente:

Na versão 14.2.x:

$my-palette: palette(
    $primary: #09f,
    $secondary: #e41c77,
    $grays: #000
);

.my-class {
    background: color($color: 'grays', $variant: 300);
    color: contrast-color($color: 'grays', $variant: 300);
    border-color: hsl(var(--igx-grays-500));
}

Na versão 15.0.x e a partir de então:

$my-palette: palette(
    $primary: #09f,
    $secondary: #e41c77,
    $gray: #000
);

.my-class {
    background: color($color: 'gray', $variant: 300);
    color: contrast-color($color: 'gray', $variant: 300);
    border-color: hsl(var(--ig-gray-500));
}

Quebrando variáveis CSS geradoras de alterações para uma paleta agora é feito pelo mixin de paleta, em vez do mixin palette-vars.
Alteração interruptiva- A função de paleta agora requer que uma cor de superfície seja passada, enquanto a passagem de um valor para a gray cor é opcional. Se um valor para a cor de base cinza não for fornecido, ele será gerado automaticamente com base na luminosidade da cor da superfície - a cor da superfície clara resulta em uma cor de base cinza preta (# 000), enquanto uma cor de superfície escura gera uma cor cinza de base branca (#fff). Ao gerar uma paleta, você deve ter em mente que não há mais valores padrão para cores de informação, sucesso, erro e aviso. Você deve defini-los explicitamente se quiser usá-los. Você também pode pegar essas cores de uma paleta existente se não quiser criar os valores sozinho.

Exemplo:
```
$my-palette: palette(
    $primary: #09f,
    $secondary: #e41c77,
    $surface: #fff,
    $info: color($light-material-palette, 'info'),
    $success: color($light-material-palette, 'success'),
    $error: color($light-material-palette, 'error'),
    $warn: color($light-material-palette, 'warn'),
);

@include palette($my-palette);
```
Alteração interruptiva-O parâmetro da paleta agora é removido de todos os temas de componentes. Você pode usar a combinação de paleta para definir o escopo de uma paleta personalizada para um tema de componente de componente personalizado. Como abandonamos o suporte para o IE11, todos os temas de componentes se referem às variáveis CSS globais para cores, elevações, tipografia, etc., portanto, não é mais necessário passar uma paleta personalizada para um tema de componente.

Gerando um tema personalizado com uma paleta personalizada:
```
// app.component.scss

$my-palette: palette(
    $primary: royalblue,
    $secondary: orange,
    $surface: white
);

$avatar: avatar-theme(
    $background: color($color: 'primary'), 
    $color: contrast-color($color: 'primary')
);

:host ::ng-deep {
    // Include the custom palette in the scope of the app component.
    // It will have a higher specificity than the global palette.
    @include palette($my-palette):

    .my-avatar {
        @include avatar($avatar);
    }
}
```

Tipografia

Alteração interruptiva- O mixin de estilo de tipo agora não aceita escala de tipo como parâmetro, apenas o nome da categoria.

Na versão 14.2.x e anteriores:
```
.my-class {
    @include type-style($type-scale: $my-type-scale, $category: h1);
}
```
Na versão 15.0.x e posteriores:
```
.my-class {
    @include type-style(h1);
}
```

Elevações

Alteração interruptiva- A função de elevação agora tem apenas um argumento nomeado -$name (o nome da elevação).
Alteração interruptiva- A função de elevações foi removida, agora você pode configurar as cores de elevação, usando o configure-elevations mixin.

Na versão 14.2.x e anteriores:
```
.my-class {
    box-shadow: elevation($elevations, $elevation: 8);
}
```
Na versão 15.0.x e posteriores:
```
.my-class {
    box-shadow: elevation(8);
}
```

Alteração interruptiva- Os IgxGridToolbarTitleDirective e IgxGridToolbarActionsDirective foram convertidos em componentes, mantendo apenas o seletor de elementos. Para aplicativos que usam a marcação de elemento preferencial de <igx-grid-toolbar-title> e <igx-grid-toolbar-actions> não deve haver nenhuma alteração funcional. Os aplicativos que usam as igxGridToolbarTitle diretivas and igxGridToolbarActions em outros elementos precisarão convertê-los nos elementos mencionados:

From:
```
<igx-grid-toolbar>
    <span igxGridToolbarTitle>Title</span >
    <div igxGridToolbarActions>
        ...
    </div>
</igx-grid-toolbar>
```
To:
```
<igx-grid-toolbar>
    <igx-grid-toolbar-title>Title</igx-grid-toolbar-title>
    <igx-grid-toolbar-actions>
        ...
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>
```

From 13.1.x to 13.2.x

Themes

Alteração interruptiva- Todas as folhas de estilo específicas da RTL foram removidas. Ignite UI temas agora suportam RTL directon por padrão. Os usuários que já usaram *-rtl.css temas específicos devem alternar para os arquivos de tema regulares.

From 13.0.x to 13.1.x

Geral

igxGrid, igxHierarchicalGrid, igxTreeGrid
- Alteração interruptiva- A propriedade columns' movable foi preterida. Em vez disso, use a propriedade de grade moving exposta:
```
<igx-grid [moving]="true">
</igx-grid>
```
IgxHierarchicalGrid
- Alteração interruptiva: o serviço de API público para os componentes hgridAPI igxHierarchicalGrid e igxRowIsland foi renomeado para gridAPI.

IgxToast

Alteração interruptiva- A propriedade preterida igx-toast position foi removida. Sugerimos usar a positionSettings propriedade da seguinte maneira:

@ViewChild('toast', { static: true }) public toast: IgxToastComponent;

public ngOnInit(): void {
    this.toast.positionSettings.verticalDirection = VerticalAlignment.Middle;
}

From 12.2.x to 13.0.x

Geral

IE discontinued support
IgxDialog
- Alteração interruptiva- A posição padrãoConfigurações de abertura/fechamento da animação foi alterada para fadeIn / fadeOut.
igxGrid, igxHierarchicalGrid, igxTreeGrid
- Alteração interruptiva- As seguintes entradas obsoletas foram removidas -showToolbar, toolbarTitle, columnHiding, columnHidingTitle, hiddenColumnsText, columnPinning,, columnPinningTitle,. pinnedColumnsText Use IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent em vez disso.
- Alteração interruptiva- Ao adicionar um componente, agora você deve especificar manualmente quais recursos deseja habilitar - Ocultação de igx-toolbar coluna, fixação, exportação do Excel. A Filtragem Avançada pode ser habilitada por meio da allowAdvancedFiltering propriedade input na grade, mas é recomendável habilitá-la declarativamente com marcação, como acontece com os outros recursos.
- Alteração interruptiva: o rowSelected evento é renomeado para rowSelectionChanging refletir melhor sua função.
- Alteração interruptiva: o columnSelected evento é renomeado para columnSelectionChanging refletir melhor sua função.
- Alteração interruptiva-columnsCollection é removido. Use columns em vez disso. Se em determinadas ocasiões columns retornar array vazio, consulte as colunas usando ViewChildren e acesse-as em ngAfterViewInit:
```
@ViewChildren(IgxColumnComponent, { read: IgxColumnComponent })
public columns: QueryList<IgxColumnComponent>;
```
- Alteração interruptiva- ao aplicar uma diretiva personalizada na grade, injete o IGX_GRID_BASE token no construtor para obter referência à grade de hospedagem:
```
<igx-grid customDirective ...></igx-grid>
```
```
@Directive({
    selector: '[customDirective]'
})
export class customDirective {

constructor(@Host() @Optional() @Inject(IGX_GRID_BASE) grid: IgxGridBaseDirective) { }
```
RowDirective, RowType
- Alteração interruptiva-rowData e rowID as propriedades são removidas de RowDirective e para classes que implementam a RowType interface. Use data e key em vez disso. Use ng update para migração automática. A migração automática não será capaz de pegar alguns exemplos de modelos, onde o objeto de contexto do modelo não é digitado:
```
<ng-template igxCell let-cell="cell">
    <span>{{ cell.rowID }}</span>
    <span>{{ cell.row.rowData.ProductID }}</span>
</ng-template>
```
  Atualize esses modelos manualmente para
```
<span>{{ cell.key }}</span>
<span>{{ cell.row.data.ProductID }}</span>
```
igxGrid
- Exposta uma groupStrategy entrada que funciona de forma sortStrategy semelhante, permitindo a personalização do comportamento de agrupamento da grade.
IgxCsvExporterService, IgxExcelExporterService
- Os serviços de exportador não precisam mais ser fornecidos no aplicativo, pois agora são injetados em um nível raiz.
IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent
- Nova entrada buttonText exposta que define o texto exibido dentro do botão suspenso na barra de ferramentas.
IgxCombo
- Adicionada groupSortingDirection entrada, que permite definir a ordem de classificação dos grupos.
IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
- Adicionadas novas diretivas para remodelagem de indicadores de classificação de cabeçalho -IgxSortHeaderIconDirective, IgxSortAscendingHeaderIconDirective and IgxSortDescendingHeaderIconDirective.
IgxDialog
- Adicionada focusTrap entrada para definir se o foco da tecla Tab está preso na caixa de diálogo quando aberto. O padrão é true.
IgxColumnActionsComponent
- Alteração interruptiva- A seguinte entrada foi removida
  - Entrada columns. Em vez disso, use igxGrid columns a entrada.
IgxCarousel
- Alterações interruptivas- O tipo CarouselAnimationType de animação do carrossel é renomeado para HorizontalAnimationType.
IgxGridStateDirective- agora suporta disableHiding suporte de suporte de coluna e grupos de colunas

Temas

A propriedade do componente color Icon foi preterida. Use style.color a propriedade CSS para alterar sua cor padrão. Exemplos:

<igx-icon [style.color]="'#e41c77'">home</igx-icon>

<igx-icon style.color="{{ col.hasSummary ? '#e41c77' : '' }}">functions</igx-icon>

Módulos Sass: O mecanismo de temas mudou para módulos Sass. Essa mudança significa que todas as funções da biblioteca de temas (temas comopnentes, etc.), mixins (mixins de componentes, etc.) e variáveis agora forwarded são de um único arquivo. Para usar corretamente a biblioteca de temas Sass, seu projeto deve utilizar o Dart Sass versão 1.33.0 ou posterior e alterar todas as importações da biblioteca de temas de:

// free version
@import '~igniteui-angular/lib/core/styles/themes/index';

// licensed version
@import '~@infragistics/igniteui-angular/lib/core/styles/themes/index';

to:

// free version
@use 'igniteui-angular/theming' as *;

// licensed version:
@use '@infragistics/igniteui-angular/theming' as *;

Se você quiser importar toda a biblioteca de temas apenas uma vez e usá-la em outros arquivos Sass em seu aplicativo, certifique-se de encaminhá-la. Os arquivos Sass importados não serão encaminhados automaticamente.

Before:

// _variables.scss
// free version
@import '~igniteui-angular/lib/core/styles/themes/index';

// licensed version
@import '~@infragistics/igniteui-angular/lib/core/styles/themes/index';

// _other-file.scss
@import 'variables';

After:

// _variables.scss
// free versioin
@use 'igniteui-angular/theming' as *;
@forward 'igniteui-angular/theming';

// licensed version
@use '@infragistics/igniteui-angular/theming' as *;
@forward '@infragistics/igniteui-angular/theming';


// _other-file.scss
@use 'variables' as *;

Paletas e esquemas:

As variáveis da paleta CSS não se referem mais a valores HEX, em vez disso, representam uma lista de 3 valores H, S e L, o que significa que devem ser passadas para as hsl funções ou hsla CSS.

Before:

.some-class {
    background: var(--igx-surface-500); // returns HEX color
}

After:

.some-class {
    background: hsl(var(--igx-surface-500)); // returns a list of H, S, L
}

Isso foi feito para que as paletas possam ser alteradas em tempo de execução usando apenas variáveis CSS. Dessa forma, o canal alfa para uma determinada cor de paleta pode ser modificado em tempo de execução sem afetar a cor subjacente da paleta.

Certifique-se de que a paleta e o esquema de componentes corretos sejam passados para seu componente personalizado e temas globais. Se você deseja criar um tema escuro global, certifique-se de selecionar um tom de cor mais claro para sua cor cinza, por exemplo:

$my-dark-palette: palette(
    $primary: olive,
    $secondary: yellow,
    $grays: #fff
);

@include dark-theme($palette: $my-dark-palette);

Da mesma forma, os temas claros exigem um tom mais escuro de cinza e um esquema de cores claras.

Se você não excluiu nenhum tema de componente do tema global, mas ainda deseja criar seus próprios temas de substituição personalizados usando o css-vars mixin, certifique-se de que o tema tenha passado a paleta correta e o esquema correspondente:

$my-custom-grid: grid-theme(
    $palette: $my-dark-palette,
    $schema: $dark-schema
);

@include css-vars($my-custom-grid);

Temas de componentes excluídos:

Caso você tenha excluído alguns temas de componentes do tema global e tenha criado temas de substituição personalizados, certifique-se de que a combinação de componentes seja incluída e receba o tema de componente correto:

$my-dark-palette: palette(
    ...
    $exclude: ('igx-grid')
);

$my-custom-grid: grid-theme(
    $palette: $my-dark-palette,
    $schema: $dark-schema
);

// Ensuregrid is included:
@include grid($my-custom-grid);

Caso seus temas de componentes personalizados sejam declarados em um arquivo Sass de componente separado, diferente do global styles.scss, certifique-se de que o core mixin também esteja incluído.

// free version
@use 'igniteui-angular/theming' as *;

// licensed version
@use '@infragistics/igniteui-angular/theming' as *;

// Include the core module mixin.
@include core();

// Create your theme.
$my-custom-grid: grid-theme(
    $palette: $my-dark-palette,
    $schema: $dark-schema
);

// Include your custom theme styles.
@include grid($my-custom-grid);

Para entender melhor o sistema Sass Moule, você pode ler este ótimo artigo de Miriam Suzanne;

From 12.0.x to 12.1.x

Grids

Alterações significativas:
- IgxPaginatorComponent- A maneira como o paginador é instanciado na grade mudou. Agora é um componente separado projetado na árvore de grade. Assim, a [paging]="true" propriedade é removida de todas as grades e todas as outras propriedades relacionadas ao paginador na grade são preteridas. É recomendável seguir as diretrizes para habilitar Grid Paging recursos, conforme descrito no tópico Paginação.
- IgxPageSizeSelectorComponent e IgxPageNavigationComponent são introduzidos para facilitar a implementação de qualquer conteúdo personalizado:
```
<igx-paginator #paginator>
    <igx-paginator-content>
        <igx-page-size></igx-page-size>
        [My custom text]
        <igx-page-nav></igx-page-nav>
    </igx-paginator-content>
</igx-paginator>
```
- A API do componente de paginação foi alterada durante a refatoração e muitas das propriedades antigas agora estão obsoletas. Infelizmente, ter uma migração adequada para algumas dessas alterações é complicado, para dizer o mínimo, portanto, quaisquer erros devem ser tratados no nível do aplicativo.
- As seguintes propriedades foram preteridas da Grade:
  - paginação, página por página, totalPages, isFirstPage, isLastPage, pageChange, perPageChange, pagingDone
- Os seguintes métodos também estão obsoletos:
  - nextPage()
  - anteriorPágina()
- A seguinte propriedade foi removida:
  - paginationTemplate - para definir um modelo personalizado, use o igx-paginator-content
- Especificações do HierarchicalGrid – o seguinte uso da Diretiva é necessário quando se trata de *igxPaginator habilitar a paginação em RowIslands:
```
<igx-hierarchical-grid #hGrid >
    <igx-column *ngFor="let c of hColumns" [field]="c.field">
    </igx-column>
    <igx-row-island [key]="'childData'" [autoGenerate]="true">
        <igx-row-island [key]="'childData'" [autoGenerate]="true">
            <igx-paginator *igxPaginator></igx-paginator>
        </igx-row-island>
        <igx-paginator *igxPaginator></igx-paginator>
    </igx-row-island>
    <igx-row-island [key]="'childData2'" [autoGenerate]="true">
        <igx-paginator *igxPaginator></igx-paginator>
    </igx-row-island>

    <igx-paginator></igx-paginator>
</igx-hierarchical-grid>
```
- Embora a migração mova o conteúdo do modelo para dentro do igx-paginator-content conteúdo, ela pode não resolver todas as associações de modelo. Verifique seus arquivos de modelo após a migração. As seguintes associações devem ser alteradas manualmente, pois essas propriedades foram removidas (pagerEnabled, pagerHidden, dropdownEnabled, dropdownHidden):
From:
```
<igx-paginator #paginator
    [pagerEnabled]="!isPagerDisabled" [pagerHidden]="isPagerHidden"
    [dropdownHidden]="isDropdownHidden">
</igx-paginator>
```
To:
```
<igx-paginator #paginator *ngIf="!isPagerDisabled">
    <igx-paginator-content>
        <igx-page-size *ngIf="isDropdownHidden"></igx-page-size>
        <igx-page-nav *ngIf="isPagerHidden"></igx-page-nav>
    </igx-paginator-content>
</igx-paginator>
```
- IgxGridCellComponent, IgxTreeGridCellComponent, IgxHierarchicalGridCellComponent, IgxGridExpandableCellComponent não são mais expostos na API pública. Consulte as seções abaixo para obter um guia detalhado sobre como atualizar para o novo IgxGridCell.
Descontinuação da grade:
- O padrão de DI para fornecimento IgxGridTransaction foi preterido. O seguinte ainda funcionará, mas é recomendável refatorá-lo, pois provavelmente será removido em uma versão futura:
```
@Component({
    template: `<igx-grid [data]="data">
    ...
    </igx-grid>`,
    providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }],
    ...
})
export class MyCustomComponent {
    ...
}
```
Para obter o comportamento acima, você deve usar a entrada recém-adicionada batchEditing:
```
@Component({
    template: `<igx-grid [data]="data" [batchEditing]="true">
    ...
    </igx-grid>`
    ...
})
export class MyCustomComponent {
    ...
}
```
- getCellByColumnVisibleIndex agora está obsoleto e será removido na próxima versão principal. Use getCellByKey, getCellByColumn em vez disso.

IgxGridCell migration

IgxGridCellComponent,IgxTreeGridCellComponent,IgxHierarchicalGridCellComponent,IgxGridExpandableCellComponent não são mais expostos na API pública.
As APIs públicas, que costumavam retornar uma instância de um dos itens acima, agora retornam uma instância de IgxGridCell:

const cell = grid.getCellByColumn(0, 'ProductID');     // returns IgxGridCell
const cell = grid.getCellByKey('ALFKI', 'ProductID');  // returns IgxGridCell
const cell = grid.getCellByColumnVisibleIndex(0, 0);   // returns IgxGridCell
const rowCells = grid.getRowByIndex(0).cells;          // returns IgxGridCell[]
const selectedCells = grid.selectedCells;              // returns IgxGridCell[]
const cells = grid.getColumnByName('ProductID').cells; // returns IgxGridCell[]

cell IGridCellEventArgs nos argumentos de evento emitidos pelos eventos cellClick,selected,contextMenu e doubleClick agora é uma instância de IgxGridCell
let-cell no modelo de célula é agora IgxGridCell.
getCellByColumnVisibleIndex agora está obsoleto e será removido na próxima versão principal. Use getCellByKey, getCellByColumn em vez disso.

Observação:

ng update migrará os usos de IgxGridCellComponent,IgxTreeGridCellComponent,IgxHierarchicalGridCellComponent,IgxGridExpandableCellComponent, como importações, digitações e conversões. Se um lugar em seu código usando qualquer um dos itens acima não for migrado, basta remover a tipagem/conversão ou alterá-la com IgxGridCell.
getCellByIndex e outros métodos retornarão undefined, se a linha nesse índice não for uma linha de dados, mas for IgxGroupByRow, IgxSummaryRow, linha de detalhes, etc.

Themes

Devido a reclamações relativas a avisos de compilação (consulte # 9793), agora usamos a math.div função; Essa funcionalidade é suportada pelo Dart Sass a partir da versão 1.33.0.

Solução

Se por algum motivo você vir erros de compilação do Sass dizendo que math.div não é uma função conhecida, significa que você está usando uma versão desatualizada do Sass em seu projeto.

Atualize para a versão mais recente do Angular usando ng update-Angular 12.1.0+ usa o compilador dart-sass por padrão.

ng update [options]

Se, por algum motivo, você não usar a CLI do Ignite UI / Angular, precisará substituí-la node-sass sass por em seu projeto Node.

npm uninstall node-sass
npm install sass --save-dev

Se, por algum motivo, você não puder atualizar para a versão mais recente do Angular usando o método acima, poderá voltar ao antigo método de divisão Sass definindo um sinalizador global em seu arquivo Sass:

$__legacy-libsass: true;

From 11.1.x to 12.0.x

Themes

Alterações significativas:

IgxAvatar foi simplificado. O número de parâmetros de tema (avatar-theme) foi reduzido significativamente e não inclui mais parâmetros prefixados(icon-*, initials-*, image-*) e parâmetros border-radius-* com sufixo(). As atualizações realizadas com ng update migrarão os temas de avatar existentes, mas alguns ajustes adicionais podem ser necessários para compensar a ausência de parâmetros prefixados e sufixos.

Você precisará modificar os temas de avatar específicos do tipo existente da seguinte maneira:

Por exemplo, isso:

  ```scss
  $avatar-theme: avatar-theme(
      $initials-background: blue,
      $initials-color: orange,
      $icon-background: blue,
      $icon-color: orange,
  );

  @include avatar($avatar-theme);
  ```

Precisa ser transformado nisso:

  ```scss
  $initials-avatar: avatar-theme(
      $background: blue,
      $color: orange,
  );

  $icon-avatar: avatar-theme(
      $background: blue,
      $color: orange,
  );

  .initials-avatar {
      @include avatar($initials-avatar);
  }

  .icon-avatar {
      @include avatar($icon-avatar);
  }
  ```

IgxButton foi simplificado. O número de parâmetros de tema (button-theme) foi reduzido significativamente e não inclui mais parâmetros prefixados (flat-*, raised-*, etc.). As atualizações executadas com ng update migrarão os temas de botão existentes, mas alguns ajustes adicionais podem ser necessários para compensar a ausência de parâmetros prefixados.

Para obter o mesmo resultado do trecho de código abaixo.

  ```html
  <button igxButton="raised">Raised button</button>
  <button igxButton="outlined">Outlined button</button>
  ```
  ```scss
  $my-button-theme: button-theme(
      $raised-background: red,
      $outlined-outline-color: green
  );

  @include css-vars($my-button-theme);
  ```

Você precisa criar um tema separado para cada tipo de botão e definir o escopo para um seletor CSS. html <div class="my-raised-btn"> <button igxButton="raised">Raised button</button> </div> <div class="my-outlined-btn"> <button igxButton="outlined">Outlined button</button> </div>

  ```scss
  $my-raised-button: button-theme(
      $background: red
  );

  $my-outlined-button: button-theme(
      $border-color: red
  );

  .my-raised-btn {
      @include css-vars($my-raised-button);
   }

  .my-outlined-btn {
      @include css-vars($my-outlined-button);
  }
  ```

Como você pode ver, como os button-theme parâmetros agora têm os mesmos nomes para cada tipo de botão, temos que definir o escopo de nossos temas de botão para um seletor CSS para ter cores diferentes para tipos diferentes.

Aqui você pode ver todas as propriedades disponíveis do button-theme

O typography mixin não está mais incluído core implicitamente. Para usar nossos estilos de tipografia, você deve incluir o mixin explicitamente antes core e depois theme:

// in styles.scss

@include core();

@include typography(
    $font-family: $material-typeface,
    $type-scale: $material-type-scale
);

@include theme();

Important

O core mixin deve sempre ser incluído primeiro.

Para cada tema incluído no Ignite UI for Angular fornecemos variáveis específicas font-family e type-scale que você pode usar:

Tema	Família de fontes	Escala de tipo
Material	Tipo de $material	Escala de tipo $material
Fluente	$fluent tipo de letra	$fluent escala de tipo
Bootstrap	Tipo de $bootstrap	Escala de tipo $bootstrap
Anil	$indigo tipo de letra	Escala de tipo $indigo

IgxBottomNav component

O IgxBottomNavComponent foi completamente refatorado para fornecer uma maneira mais flexível e descritiva de definir cabeçalhos e conteúdo de guias. É recomendável que você atualize via ng update para migrar as definições igx-bottom-nav existentes para as novas.

Modelo
- A nova estrutura define os componentes do item de navegação inferior, cada um envolvendo um cabeçalho e um componente de conteúdo. Os cabeçalhos geralmente contêm um ícone (Material guidelines), mas também podem ter um rótulo ou qualquer outro conteúdo personalizado.
- Para fins de estilo de cabeçalho, introduzimos duas novas diretivas -igxBottomNavHeaderLabel and igxBottomNavHeaderIcon.
- Como o componente de cabeçalho agora permite adicionar qualquer conteúdo, a igxTab diretiva, que antes era usada para reformular o cabeçalho da guia, foi removida porque não é mais necessária.
- Quando o componente é usado no cenário de navegação, a routerLink diretiva precisa ser anexada ao componente de cabeçalho.
```
<igx-bottom-nav>
    <igx-bottom-nav-item>
        <igx-bottom-nav-header>
            <igx-icon igxBottomNavHeaderIcon>folder</igx-icon>
            <span igxBottomNavHeaderLabel>Tab 1</span>
        </igx-bottom-nav-header>
        <igx-bottom-nav-content>
            Content 1
        </igx-bottom-nav-content>
    </igx-bottom-nav-item>
    ...
</igx-bottom-nav>
```
Mudanças na API
- As id propriedades , itemStyle, panels, viewTabs,e contentTabs tabs foram removidas. Atualmente, a items propriedade retorna a coleção de guias.
- As seguintes propriedades foram alteradas:
  - A propriedade do item de isSelected guia foi renomeada para selected.
  - A selectedTab propriedade foi renomeada para selectedItem.
- Os onTabSelected eventos e onTabDeselected foram removidos. Introduzimos três novos eventos, selectedIndexChanging, selectedIndexChange and selectedItemChange, que fornecem mais flexibilidade e controle sobre a seleção das guias. Infelizmente, ter uma migração adequada para essas alterações de eventos é complicado, para dizer o mínimo, portanto, quaisquer erros devem ser tratados no nível do projeto.

IgxTabs component

O IgxTabsComponent foi completamente refatorado para fornecer uma maneira mais flexível e descritiva de definir cabeçalhos e conteúdo de guias. É recomendado que você atualize via ng update para migrar as definições igx-tabs existentes para as novas.

Modelo
- A nova estrutura define componentes de item de guia, cada um envolvendo um cabeçalho e um componente de conteúdo. Os cabeçalhos geralmente contêm um ícone e um rótulo, mas também podem ter qualquer outro conteúdo personalizado.
- Para fins de estilo de cabeçalho, introduzimos duas novas diretivas -igxTabHeaderLabel and igxTabHeaderIcon.
- Como o componente de cabeçalho agora permite adicionar qualquer conteúdo, a igxTab diretiva, que antes era usada para reformular o cabeçalho da guia, foi removida porque não é mais necessária.
- Quando o componente é usado no cenário de navegação, a routerLink diretiva precisa ser anexada ao componente de cabeçalho.
```
<igx-tabs>
    <igx-tab-item>
        <igx-tab-header>
            <igx-icon igxTabHeaderIcon>folder</igx-icon>
            <span igxTabHeaderLabel>Tab 1</span>
        </igx-tab-header>
        <igx-tab-content>
            <h1>Tab 1 Content</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </igx-tab-content>
    </igx-tab-item>
...
</igx-tabs>
```
Mudanças na API
- As id propriedades , groups, viewTabs,e contentTabs tabs foram removidas. Atualmente, a items propriedade retorna a coleção de guias.
- As seguintes propriedades foram alteradas:
  - A propriedade do item de isSelected guia foi renomeada para selected.
  - A selectedTabItem propriedade foi reduzida para selectedItem.
  - A type propriedade, com suas opções contentFit e fixed, não está mais disponível. O modo de dimensionamento e posicionamento do cabeçalho é atualmente controlado pela tabAlignment propriedade de entrada que aceita quatro valores diferentes - start (padrão), center, end e justify. O tipo antigo contentFit corresponde ao valor de alinhamento atual start e o tipo antigo fixed- ao valor atual justify.
- Os tabItemSelected eventos e tabItemDeselected foram removidos. Introduzimos três novos eventos, selectedIndexChanging, selectedIndexChange and selectedItemChange, que fornecem mais flexibilidade e controle sobre a seleção das guias. Infelizmente, ter uma migração adequada para essas alterações de eventos é complicado, para dizer o mínimo, portanto, quaisquer erros devem ser tratados no nível do projeto.

IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent

IgxGridRowComponent,IgxTreeGridRowComponent,IgxHierarchicalRowComponent,IgxGridGroupByRowComponent não são mais expostos na API pública.
As APIs públicas, que costumavam retornar uma instância de uma das anteriores, agora retornam objetos que implementam a interface pública RowType:

const row = grid.getRowByIndex(0);
const row = grid.getRowByKey(2);
const row = cell.row;

Embora a API pública de RowType seja a mesma que IgxRowComponent e outros costumavam expor, observe:

toggle, exposto pelo IgxHierarchicalRowComponent não está disponível. Use expanded a propriedade para todos os tipos de linha:

grid.getRowByIndex(0).expanded = false;

row.rowData e row.rowID foram descontinuados e serão totalmente removidos com a versão 13. Em vez disso, use row.data e row.key.

row nos argumentos de evento emitidos por onRowPinning e dragData nos argumentos de evento emitidos por onRowDragStart, onRowDragEnd agora está implementando RowType
ng update migrará a maioria dos usos de IgxGridRowComponent,IgxTreeGridRowComponent,IgxHierarchicalRowComponent,IgxGridGroupByRowComponent, como importações, tipificações e conversões. Se um lugar em seu código usando qualquer um dos itens acima não for migrado, basta remover a tipagem/conversão ou alterá-la com RowType.
getRowByIndex agora retornará um RowType objeto, se a linha nesse índice for uma linha de resumo (usada anteriormente para retornar indefinido). row.isSummaryRow e row.isGroupByRow retornarão true se a linha no índice for uma linha de resumo ou um grupo por linha.

IgxInputGroupComponent

A disabled propriedade foi removida. A propriedade era enganosa, pois o estado do grupo de entrada sempre foi gerenciado pelo subjacente igxInput.
- A execução ng update lidará com todas as instâncias nas quais [disabled] foi usado como modelos @Input in.
- Se você estiver fazendo referência à propriedade em um.ts arquivo:
```
export class CustomComponent {
    public inputGroup: IgxInputGroupComponent
    ...
    this.inputGroup.disabled = false;
}
```
Você deve atualizar manualmente seu código para fazer referência à propriedade da diretiva de entrada subjacente: disabled
```
export class CustomComponent {
    public input: IgxInputDirective
    ...
    this.input.disabled = false;
}
```

IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent

A value propriedade para IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent agora aceita o formato de cadeia de caracteres ISO 8601. Isso significa que o value tipo pode ser Date ou string.
A inputFormat propriedade de IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent agora não aceita y a parte do ano. Você deve atualizá-lo para yy.

From 10.2.x to 11.0.x

IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
- A maneira como a barra de ferramentas é instanciada na grade foi alterada. Agora é um componente separado projetado na árvore de grade. Assim, a showToolbar propriedade é removida de todas as grades e todas as outras propriedades relacionadas à barra de ferramentas na grade são preteridas. É recomendável seguir a maneira recomendada para habilitar os recursos da barra de ferramentas, conforme descrito no tópico Barra de ferramentas.
- A igxToolbarCustomContent diretiva é suprimida. Embora a migração mova o conteúdo do modelo para dentro do conteúdo da barra de ferramentas, ela não tenta resolver as associações de modelo. Verifique seus arquivos de modelo após a migração.
- A API do componente da barra de ferramentas foi alterada durante a refatoração e muitas das propriedades antigas foram removidas. Infelizmente, ter uma migração adequada para essas mudanças é complicado, para dizer o mínimo, portanto, quaisquer erros devem ser tratados no nível do projeto.

From 10.0.x to 10.1.x

IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
- Como removemos as IgxExcelStyleSortingTemplateDirective diretivas , IgxExcelStyleHidingTemplateDirective, IgxExcelStyleMovingTemplateDirective, IgxExcelStylePinningTemplateDirective, e IgxExcelStyleSelectingTemplateDirective usadas para modelar algumas partes do menu de filtro de estilo do Excel, você pode usar as diretivas recém-adicionadas para modelar as áreas de operações de coluna e filtro -IgxExcelStyleColumnOperationsTemplateDirective and IgxExcelStyleFilterOperationsTemplateDirective. Também expusemos todos os componentes internos do menu de filtro de estilo do Excel para que possam ser usados dentro de modelos personalizados. Você pode encontrar mais informações sobre as novas diretivas de modelo no Tópico de filtragem de estilo do Excel.
IgxGrid
- O selectedRows() método foi refatorado em uma propriedade de entrada chamada. Essa alteração significativa permite que os usuários alterem facilmente o estado de seleção da grade em tempo de execução. A pré-seleção de linhas também é suportada. Todas as instâncias em que o selectedRows() método é chamado devem ser reescritas sem parênteses.
- A associação à selectedRows propriedade input pode ser algo assim:
```
public mySelectedRows = [0, 1, 2];
```
```
<igx-grid [data]="myData" rowSelection="multiple"
    primaryKey="ID" [selectedRows]="mySelectedRows">
    
</igx-grid>
```

From 9.0.x to 10.0.x

IgxDropdown
- A propriedade display do item suspenso foi alterada de flex para block. Fizemos isso para que o texto truncado fosse ativado por padrão. Devido a essa alteração, se houver mais de texto no conteúdo do item suspenso, o layout precisará ser tratado no nível do aplicativo.
- O exemplo a seguir demonstra como estilizar um item suspenso com um ícone e conteúdo de texto para que eles sejam alinhados verticalmente.
```
<igx-drop-down-item>
    <div class="my-styles">
        <igx-icon>alarm</igx-icon>
        <span>item text</span>
    </div>
</igx-drop-down-item>
```
```
.my-styles {
    display: flex;
    align-items: center;

    span {
      margin-left: 8px;
    }
}
```

From 8.x.x to 9.0.x

Devido a uma alteração significativa no Angular 9 Os provedores do Hammer não são mais adicionados implicitamente, consulte o seguinte documento para obter detalhes: Por isso, os seguintes componentes precisam HammerModule ser importados no módulo raiz do aplicativo para que as interações por toque funcionem conforme o esperado:

igxGrid
igxHierarchicalGrid
igxTreeGrid
igxList
igxNavigationDrawer
igxTimePicker
igxDatePicker
igxMonthPicker
igxSlider *
igxCalendário
igxCarrossel

* Nota- igxSlider requer o HammerModule para todas as interações do usuário.

Você pode usar o snippet de código a seguir para atualizar o arquivo do módulo raiz do aplicativo.

import { HammerModule } from "@angular/platform-browser";

@NgModule({
    ...
    imports: [
        ...
        HammerModule
    ]
})

Devido a alterações de nome feitas em alguns dos Enumerations que exportamos, é necessária uma atualização manual para seus membros. Aqui está uma lista de todas as alterações feitas que exigem atualização manual:

AvatarType. DEFAULT-> IgxAvatarType. CUSTOM
Tipo. DEFAULT-> IgxBadgeType. PRIMARY
IgxCardType. DEFAULT-> IgxCardType. ELEVATED
IgxCardActionsLayout. DEFAULT-> IgxCardActionsLayout. START
IgxDividerType. DEFAULT-> IgxDividerType. SOLID
IgxProgressType. DANGER-> IgxProgressType. ERROR

O ng update processo atualizará todos os nomes de enumeração, como AvatarType, Type, et al. para IgxAvatarType e IgxBadgeType, respectivamente. Todos os outros nomes de membros de enumeração permanecem inalterados.

From 8.1.x to 8.2.x

IgxDrag
- Como hideBaseOnDrag as entradas e visible estão sendo preteridas, para obter a mesma funcionalidade em seu aplicativo, você pode usar qualquer maneira de ocultar o elemento base que Angular fornece. Um exemplo é definir o visibility estilo como hidden, já que ele só ficará invisível e manterá o espaço que ocupa no DOM:
```
<div igxDrag [ngStyle]="{ 'visibility': targetDragged ? 'hidden' : 'visible' }"
    (dragStart)="onDragStarted($event)" (dragEnd)="onDragEnded($event)">
    Drag me!
</div>
```
```
public targetDragged = false;

public onDragStarted(event) {
    this.targetDragged = true;
}

public onDragEnded(event) {
    this.targetDragged = false;
}
```
- Como animateOnRelease e dropFinished() também estão sendo obsoletos, qualquer dropFinished() uso de método deve ser substituído por transitionToOrigin(). Caso contrário, você precisaria chamar transitionToOrigin() dependendo de quando deseja que o elemento arrastado faça a transição de volta ao seu local original. Observe que, se a posição do DOM do elemento arrastado for alterada, sua localização original também será alterada com base nisso.
IgxDrop
- Como a estratégia de descarte padrão fornecida com a IxgDrop diretiva não é mais aplicada por padrão, para continuar tendo o mesmo comportamento, você precisa definir a nova entrada dropStrategy para ser a implementação fornecida IgxAppendDropStrategy.
```
<div igxDrop [dropStrategy]="appendStrategy"></div>
```
```
import { IgxAppendDropStrategy } from 'igniteui-angular';
// import { IgxAppendDropStrategy } from '@infragistics/igniteui-angular'; for licensed package

public appendStrategy = IgxAppendDropStrategy;
```
- Qualquer uso de interfaces IgxDropEnterEventArgs e IgxDropLeaveEventArgs deve ser substituído por IDragBaseEventArgs.
- Além disso, qualquer uso da IgxDropEventArgs interface deve ser substituído por IDropDroppedEventArgs.
Diretiva IgxRowDragDirective
- IRowDragStartEventArgs e IRowDragEndEventArgs ter o nome do argumento alterado para ser mais claro sobre o que ele se refere. owner argumento é renomeado para dragDirective. O owner argumento agora fornece uma referência ao componente proprietário. Se o seu código fosse como:
```
public dragStart(event) {
    const directive = event.owner;
}
```
  A partir da versão 8.2.x, ele deve ser atualizado para:
```
public dragStart(event) {
    const directive = event.dragDirective;
    const grid = event.owner;
}
```
IgxCombo
- A maneira como as manipulações igx-combo de seleção e vinculação de dados são alteradas.
- Se a entrada [valueKey] do combo for definida, o controle procurará essa propriedade específica na matriz passada de itens de dados ao executar a seleção. Todos os eventos de seleção são tratados com o valor da propriedade dos itens de dados. valueKey Todos os combos especificados valueKey devem ter sua seleção/associação bidirecional consistindo apenas nos valores da propriedade do objeto especificada na entrada:
```
<igx-combo [data]="cities" valueKey="id" displayKey="name"></igx-combo>
```
```
export class MyExampleCombo {
    public data: { name: string, id: string }[] = [{ name: 'London', id: 'UK01' }, { name: 'Sofia', id: 'BG01' }, ...];
    ...
    selectFavorites() {
        // Selection is handled with the data entries' id properties
        this.combo.selectItems(['UK01', 'BG01']);
    }
}
```
- Se a combinação não tiver um valueKey definido, todos os eventos de seleção serão tratados com igualdade (===). Todos os combos que não têm um valueKey especificado devem ter sua seleção/associação bidirecional tratada com referências a seus itens de dados:
```
<igx-combo [data]="cities" displayKey="name"></igx-combo>
```
```
export class MyExampleCombo {
    public data: { name: string, id: string }[] = [{ name: 'London', id: 'UK01' }, { name: 'Sofia', id: 'BG01' }, ...];
    ...
    selectFavorites() {
        // Selection is handled with references to the data entries
        this.combo.selectItems([this.data[0], this.data[1]]);
    }
}
```
Você pode ler mais sobre como configurar o combo no leia-me e na documentação oficial.

From 8.0.x to 8.1.x

O igx-paginator componente é introduzido como um componente independente e também é usado nos componentes de grade. Lembre-se de que, se você tiver definido o paginationTemplate, talvez seja necessário modificar seu CSS para exibir a paginação corretamente. Isso se deve ao fato de que o modelo não é mais aplicado em um contêiner específico de paginação com regras CSS para centralizar o conteúdo, portanto, talvez seja necessário adicioná-las manualmente. O estilo deve ser algo semelhante a:

<igx-grid #grid [data]="data" [paging]="true" [perPage]="10" [paginationTemplate]="pager">
</igx-grid>
<ng-template #pager>
    <div class="pagination-container"></div>
</ng-template>

.pagination-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

From 7.3.x to 8.0.x

Durante a atualização, se você enfrentar o seguinte erro Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.1.1 <3.3", would install "3.4.5")., atualize @angular/core o pacote primeiro. Isso está relacionado a este problema conhecido da CLI do Angular
Ao atualizar o igniteui-angular pacote, se você vir o seguinte erro Package "igniteui-angular" has an incompatible peer dependency to "web-animations-js" (requires "^2.3.1", would install "2.3.2-pr208"), atualize usando ng update igniteui-angular --force. Isso pode acontecer se você atualizar @angular/core e @angular/cli antes de igniteui-angular atualizar.

From 7.2.x or 7.3.x to 7.3.4

Se você usar o filterGlobal método de,ou IgxHierarchicalGrid IgxGrid IgxTreeGrid, você deve saber que o condition parâmetro não é mais opcional. Quando o filterGlobal método é chamado com uma condição inválida, ele não limpará os filtros existentes para todas as colunas.

From 7.1.x to 7.2.x

Se você usa um IgxCombo com combo.value, você deve saber que agora combo.value é apenas um getter.
Se você usar IgxTextHighlightDirective, deve saber que a page propriedade input está obsoleta. rowIndex, columnIndex e page as IActiveHighlightInfo propriedades da interface também estão obsoletas. Em vez disso, row e column propriedades opcionais são adicionadas.
Se você usar o button-theme, você deve saber que o $button-roundness foi substituído para cada tipo de botão por: $flat-border-radius, $raised-border-radius, $outline-border-radius, $fab-border-radius, $icon-border-radius.

From 7.0.x to 7.1.x

Se você usa um IgxGrid com resumos em seu aplicativo, deve saber que agora o IgxSummaryOperand.operate() método é chamado com dados vazios para calcular a altura necessária para a linha de resumo. Para operandos de resumo personalizados, o método sempre deve retornar uma matriz de IgxSummaryResult com o comprimento adequado.

Antes da versão 7.1:

export class CustomSummary extends IgxNumberSummaryOperand {
	public operate(data?: any[]): IgxSummaryResult[] {
		return [{
			key: 'average',
			label: 'average',
			summaryResult: IgxNumberSummaryOperand.average(data).toFixed(2)
		}];
	}
}

Since version 7.1:

export class CustomSummary extends IgxNumberSummaryOperand {
	public operate(data?: any[]): IgxSummaryResult[] {
		return [{
			key: 'average',
			label: 'average',
			summaryResult: data.length ?  IgxNumberSummaryOperand.average(data).toFixed(2) : null
		}];
	}
}

From 6.0.x to 6.1.x

Se você usar um controle IgxCombo em seu aplicativo e tiver definido a itemsMaxWidth opção, deverá alterar essa opção para itemsWidth

Guia de atualização

Note

Additional manual changes

From 17.2.x to 18.0.x

Breaking changes

Geral

Breaking changes

From 17.0.x to 17.1.x

Geral

Breaking changes

From 16.1.x to 17.0.x

Geral

From 16.0.x to 16.1.x

Geral

Non-breaking changes

From 15.1.x to 16.0.x

From 15.0.x to 15.1.x

From 14.2.x to 15.0.x

Geral

Themes

Exemplo:

Tipografia

Elevações

Grid Toolbar

From 13.1.x to 13.2.x

Themes

From 13.0.x to 13.1.x

Geral

From 12.2.x to 13.0.x

Geral

Temas

From 12.0.x to 12.1.x

Grids

IgxGridCell migration

Themes

Solução

From 11.1.x to 12.0.x

Themes

Important

IgxBottomNav component

IgxTabs component

IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent

IgxInputGroupComponent

IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent

From 10.2.x to 11.0.x

From 10.0.x to 10.1.x

From 9.0.x to 10.0.x

From 8.x.x to 9.0.x

From 8.1.x to 8.2.x

From 8.0.x to 8.1.x

From 7.3.x to 8.0.x

From 7.2.x or 7.3.x to 7.3.4

From 7.1.x to 7.2.x

From 7.0.x to 7.1.x

From 6.0.x to 6.1.x

Temas