Changelog - 7.0.0 Betas
=======================

7.0.0-beta.50 (24/07/2024)
-------------------

Bug Fixes
^^^^^^^^^

- [SDKF-62] `common`: Fixes in `field-container` / `w-x/x` classes;
- [NO-ISSUE] `components`: `grid` Fix in grid-card actions

____

7.0.0-beta.44 (16/04/2024)
--------------------------

Bug Fixes
^^^^^^^^^

- `SDKF-36 <https://portal.korp.com.br/projetos/0e971de3-71ae-16ff-9d20-fcf528bebd03/lista?identificador=SDKF-36>`_ - `components`: Fixed an issue related to column sorting with cache in the `TreeTable`. 

____

7.0.0-beta.43 (10/04/2024)
--------------------------

Bug Fixes
^^^^^^^^^

- [NO-ISSUE] - `components`: Fixed an issue that prevented row selection from working in the mobile layout of the `Grid`.

____

7.0.0-beta.41 (28/03/2024)
--------------------------

Features
^^^^^^^^

- `SDKF-31 <https://portal.korp.com.br/projetos/0e971de3-71ae-16ff-9d20-fcf528bebd03/lista?identificador=SDKF-30>`_ - `components/view-template`: New scroll buttons have been added to the `Header`. These buttons appear when the header buttons total width exceeds the available space. The scroll buttons can be customized using templates.

  - Additionally, a new directive ``vsScroll`` and a new component ``VsScrollButtons`` has been introduced, which can be used in other components as well. The directive and component allow custom scroll buttons and supports both horizontal and vertical scrolling.

  .. raw:: html

    <span style="font-weight: bold;">Usage Example for Header with templates:</span>

  .. code-block:: html+ng2

    <vs-header mode="nav" [startScrollButtonTemplate]="scrollStartButton" [endScrollButtonTemplate]="scrollEndButton">
      <div actions>
        <ng-template #scrollStartButton
          let-scrollElement="scrollElement"
          let-disabled="disableScrollToStartButton"
          let-startButtonClasses="startButtonClasses">
          <vs-button [class]="startButtonClasses" [disabled]="disabled" (clickEvent)="scrollElement('start')">
            Custom start
          </vs-button>
        </ng-template>

        <ng-container *ngFor="let item of items">
          <vs-button model="icon" [icon]="item.icon" [label]="item.label"></vs-button>
        </ng-container>

        <ng-template #scrollEndButton
          let-scrollElement="scrollElement"
          let-disabled="disableScrollToEndButton"
          let-endButtonClasses="endButtonClasses">
          <vs-button [class]="endButtonClasses" [disabled]="disabled" (clickEvent)="scrollElement('end')">
            Custom end
          </vs-button>
        </ng-template>
      </div>
    </vs-header>

  .. raw:: html

    <span style="font-weight: bold;">Usage Examples for VsScrollButtons:</span>

  .. code-block:: html+ng2

    <div vsScroll [customScrollAmount]="100">
      <vs-scroll-buttons>
        <ng-container *ngFor="let item of items">
          <vs-button model="icon" [icon]="item.icon" [label]="item.label"></vs-button>
        </ng-container>
      </vs-scroll-buttons>
    </div>

    <div class="vertical-scroll-buttons" vsScroll>
      <vs-scroll-buttons scrollOrientation="vertical">
        <ng-container *ngFor="let item of items">
          <vs-button model="icon" [icon]="item.icon" [label]="item.label"></vs-button>
        </ng-container>
      </vs-scroll-buttons>
    </div>

- [NO-ISSUE] - `components`: A new ``InjectionToken`` has been added to control the visibility of `ScrollButtons` in the `VsHeader` component. This ``InjectionToken`` accepts a ``boolean`` value that determines whether the scroll buttons should appear. The default behavior is enabled, and to disable it, you can use the InjectionToken (`VS_HEADER_SCROLL_BUTTONS`).

  .. raw:: html

    <span style="font-weight: bold;">Usage Example:</span>
      
  .. code-block:: typescript
    
    @NgModule({
      providers: [
        { provide: VS_HEADER_SCROLL_BUTTONS, useValue: false }
      ]
    })

Improvements
^^^^^^^^^^^^

- [NO-ISSUE] - `components`: Changes have been made to the `LabelLink`. New properties include ``target``, which allows specifying where to open the linked document and ``isExternalLinkFn``, a function that determines if the link is external. External links will now open using the default browser behavior if specified as external.
- [NO-ISSUE] - `components`: Performance improvements have been made to the following components: `VsFilter`, `VsAutocomplete` and `VsSearch`.

Changes
^^^^^^^

- [NO-ISSUE] - `components`: A change was made to the Grid Paginator, now it hides the first and last pagination icon when `totalCountMode` is disabled. To disable `totalCountMode`, return ``0`` or ``undefined`` in the `gridOptions` Get method of `VsGrid`.

Bug Fixes
^^^^^^^^^

- [NO-ISSUE] - `components`: Performance corrections have been made to the `TreeTable`.
- [NO-ISSUE] - `components`: Fixed issues with the `Grid` `singleSelect` selection behavior.
- [NO-ISSUE] - `components`: A correction has been made to ensure the `Grid` paginator locks when the item count is less than the page size.

____

7.0.0-beta.39 (14/03/2024)
--------------------------

Improvements
^^^^^^^^^^^^

- `SDKF-31 <https://portal.korp.com.br/projetos/0e971de3-71ae-16ff-9d20-fcf528bebd03/lista?identificador=SDKF-31>`_ - `components`: `Grid` columns now accept a `tooltip`, which can be a `string`, or a function that returns a `string.`

  .. raw:: html

    <span style="font-weight: bold;">Usage Example:</span>

  .. code-block:: typescript

    new VsGridSimpleColumn({
      tooltip: 'tooltip'
    })

- `SDKF-29 <https://portal.korp.com.br/projetos/0e971de3-71ae-16ff-9d20-fcf528bebd03/lista?identificador=SDKF-29>`_ - `components`: Performance improvements have been made to the following components: `TreeTable`, `Icon` and `Navbar`.

Bug Fixes
^^^^^^^^^

- [NO-ISSUE] - `components`: A correction has been made to the `tabLabel` color of the `TabGroup` when a tab is disabled.

____

7.0.0-beta.38 (03/03/2024)
--------------------------

Bug Fixes
^^^^^^^^^

- `SDKF-14 <https://portal.korp.com.br/projetos/0e971de3-71ae-16ff-9d20-fcf528bebd03/lista?identificador=SDKF-14>`_ - `components`: A problem with the ``rowClick`` when used in conjunction with `getSelection` in the `Grid` has been fixed and additional corrections were made to the selection behavior in `Grid`.

____

7.0.0-beta.36 (28/02/2024)
--------------------------

Changes
^^^^^^^
- `SDKF-14 <https://portal.korp.com.br/projetos/0e971de3-71ae-16ff-9d20-fcf528bebd03/lista/707f5490-b85f-6580-a8ff-349ee4a3fb6a>`_ - `components`: The ``checkbox`` mode option has been removed from the `selectionMode` property of the `Grid`. Now, the `Grid` supports only two selection modes: ``multiple`` and ``single``. This change simplifies the available selection options and adjusts some behaviors of the `Grid` in relation to row selection.
  
  - **Multiple** Mode:
    
    - When the `Grid` is configured with ``selectionMode = 'multiple'``, and only the ``select`` method is implemented, rows can be selected by clicking either on the checkbox or on the entire row.
    - If the ``select`` and ``onRowClick``, or ``ctrlClick`` methods are implemented, checkboxes can only be selected through a direct click on the checkbox. Clicks on the row will invoke the ``onRowClick`` or ``ctrlClick`` methods, without marking the checkbox.
    - To allow ``onRowClick`` to also select the checkbox, a new property called ``shouldToggleSelection`` has been added to the return of ``onRowClick``. To enable checkbox selection through ``onRowClick`` in ``multiple`` mode, simply return an object with ``shouldToggleSelection: true``.
  
  - **Single** Mode:

    - In ``single`` mode, there are no checkboxes on the `Grid` rows. If only the ``select`` method is implemented, it will be called when clicking on a row. If ``onRowClick`` is also implemented, this method will be called upon clicking the row, preventing the ``select`` method from being called .

  - With the removal of the ``checkbox`` mode from the ``selectionMode`` property in the `Grid`, developers will need to make adjustments to migrate to the new selection options available. Here is a simplified guide to facilitate this transition:

    - Update the `selectionMode`: Change the ``selectionMode`` of your `Grid` from ``checkbox`` to ``multiple``. This aligns your grid's configuration with the updated selection options.
    - Avoid Implementing `onRowClick`: To maintain a selection behavior similar to the previous ``checkbox`` mode, avoid implementing the ``onRowClick`` method.
    
    After completing the migration, the behavior will be as follows:

    - Clicking directly on a checkbox will select the corresponding row.
    - Additionally, beyond direct checkbox clicks, clicking on any part of the row will also result in the selection of that row's checkbox.

____

7.0.0-beta.32 (05/02/2024)
--------------------------

Bug Fixes
^^^^^^^^^

- `SDKF-24 <https://portal.korp.com.br/projetos/0e971de3-71ae-16ff-9d20-fcf528bebd03/lista/a1412524-3b8c-733b-41fc-6358944ee9d8>`_ - `components`: A problem with the checkboxes in VsTreeView was fixed that prevented the correct functioning of partial selections.

____

7.0.0-beta.31 (01/02/2024)
--------------------------

Features
^^^^^^^^

- [NO-ISSUE] - `components`: The configuration of the `VsDatepicker` can now be passed through the `@Input` ``config`` property.

- `SDKF-17 <https://portal.korp.com.br/projetos/0e971de3-71ae-16ff-9d20-fcf528bebd03/lista/bd879803-8429-0791-3f71-4a703429f5c8>`_ - `components`: The `@Input` ``getChipColor`` property has been added to the `VsAutocompleteChipsMinimalist` component. This property accepts a function with the parameters ``key`` and ``value``, returning a ``string``. The function is used to define specific colors for the `chips` in `VsAutocompleteChipsMinimalist`.

  .. raw:: html

    <span style="font-weight: bold;">Usage Example:</span>

  **component.html**
     
  .. code-block:: html+ng2

    <vs-autocomplete-chips-minimalist
      [getChipColor]="getChipColor.bind(this)"
    ></vs-autocomplete-chips-minimalist>

  **component.tabs-view-template**  

  .. code-block:: typescript

    private chipColors = {
      chip1: '#FFBC0A',
      chip2: '#D7263D',
      chip3: '#32DE8A',
      chip4: '#C200FB'
    };

    public getChipColor(key: string): string {
      return this.chipColors[key];
    }

- `SDKF-23 <https://portal.korp.com.br/projetos/0e971de3-71ae-16ff-9d20-fcf528bebd03/lista/75691b70-329a-d0a0-bdd6-e646f2920a6c>`_ - `components`: A new eventEmitter called chipClickEvent has been added to VsAutocompleteChipsMinimalist. This eventEmitter can be used to capture the information of the chip after it is clicked on.

  .. raw:: html

    <span style="font-weight: bold;">Usage Example:</span>

  .. code-block:: html+ng2

    <vs-autocomplete-chips-minimalist
      controlName="autocompleteChips"
      placeholder="Example"
      [options]="autocompleteOptionsChips"
      [autocompleteGetInput]="autocompleteGetInputChips"
      [getChipColor]="getChipColor.bind(this)"
      (chipClickEvent)="onChipClick($event)"
      (selectionChangeEvent)="change($event)"
      (deletionChangeEvent)="delete($event)"
    ></vs-autocomplete-chips-minimalist>

- `SDKF-207 <https://korp.youtrack.cloud/issue/SDKF-207>`_ - `components`: Added the `VsClickableInput` Component, with this component it is possible to display the input value as a customizable template, chosen by the developer who is implementing the component. By clicking on the displayed text (developer's template), the original input, which is contained within the component, is revealed, allowing for the value to be edited.

  - Properties:
    
    - ``dynamicInputChildTemplate``: This property accepts a TemplateRef, allowing developers to define the actual input element that will be displayed and edited by the user.
    - ``previewTemplate``: Accepts a TemplateRef to define how the input's current value is displayed before the user interacts with it.
    - ``disabled``: This property allows the `VsClickableInput` to be disabled.
    - ``tabIndex``: With a default value of `-1`, this property facilitates tab navigation within the component.
    - ``[(isEditing)]``: Added to allow two-way binding that controls the editing state of the `VsClickableInput`.
    - ``avoidGlobalClick``: This property enables the component to be activated only by a click in a specific location, defined by the developer.
    - ``shouldShowPointerCursor``: Accepts a boolean value and determines whether the displayed cursor should be of the pointer type or the standard cursor.

  - Supported Components:
    
    - `VsAutocompleteSelect`
    - `VsSelect`
    - `VsInput`
    - `VsDatepicker`
    - `VsTextarea`
    - `VsAutocompleteChips`

  .. raw:: html

    <span style="font-weight: bold;">Usage Example:</span>

  .. code-block:: html+ng2

    <vs-clickable-input
      [previewTemplate]="previewSelect"
      [clickableInputChildTemplate]="selectField"
      [avoidGlobalClick]="true">
      <ng-template #previewSelect let-onClickableClick="onClick">
        <div class="preview-template">
          <vs-icon icon="mouse" (click)="onClickableClick()"></vs-icon>
          {{ selectValue }}
        </div>
      </ng-template>

      <ng-template #selectField>
        <vs-select formControlName="select" [options]="selectOptions"></vs-select>
      </ng-template>
    </vs-clickable-input>

Bug Fixes
^^^^^^^^^

- [NO-ISSUE] - `components`: A problem in `VsKanban` was fixed that prevented the removal of a `kanban-card` if it was moved from one `vs-kanban-list` to another and its ID was equal to 0.
- [NO-ISSUE] - `common`: A problem in `VsCommandRunnerService` was corrected that affected the behavior of the ``logout`` command in the **Firefox** browser. Before this fix, upon receiving a ``logout`` command, the user was logged out as expected, but the command was not properly deleted. This led to undesirable behavior where, upon logging in again, the logout message was immediately displayed, and the user was logged out again, creating a continuous logout loop.
- `SDKF-22 <https://portal.korp.com.br/projetos/0e971de3-71ae-16ff-9d20-fcf528bebd03/lista/75675487-8425-ec3f-d6dc-f0fd8c80de2e>`_ - `common`: A problem in `VsCommandRunnerService` related to handling pending logout commands has been fixed. Previously, if a pending logout command was received and a user attempted to re-login while the session was already active, the logout message would be displayed, forcing the user to log in again. This fix resolves the issue, ensuring that, when re-logging in with an active session, pending logout commands no longer affect the user's session.

____

7.0.0-beta.30 (16/01/2024)
--------------------------

Features
^^^^^^^^

- `SDKF-10 <https://portal.korp.com.br/projetos/0e971de3-71ae-16ff-9d20-fcf528bebd03/lista/25666b9c-9fdc-cbfb-fff0-f1f8c3cc6ffa>`_ - `components`: The ``disabled`` property of the `VsGridCheckboxColumn` now accepts a function that returns a ``boolean``.
- `SDKF-11 <https://portal.korp.com.br/projetos/0e971de3-71ae-16ff-9d20-fcf528bebd03/lista/bb493843-fc32-a7a0-b7c6-31f686903582>`_ - `components`: The option ``hideHeaderCheckbox`` has been added to `GridOptions`. This new property accepts a ``boolean`` value and allows developers to remove the checkbox from the `Grid` header.
- `SDKF-15 <https://portal.korp.com.br/projetos/0e971de3-71ae-16ff-9d20-fcf528bebd03/lista/e750ea4c-acfa-9f4d-e4a6-435236490b40>`_ - `components`: Filters for the `VsGrid` have been added to the mobile layout.
- `SDKF-16 <https://portal.korp.com.br/projetos/0e971de3-71ae-16ff-9d20-fcf528bebd03/lista/bd17a932-1b9a-2a69-f1da-71c1ea60b6aa>`_ - `components`: A new property called ``tooltip`` has been added to `VsGridCheckboxColumn`. This property displays a specific text when the user hovers over the checkbox.

  .. raw:: html

    <span style="font-weight: bold;">Usage Example:</span>
    
  .. code-block:: typescript

    new VsGridCheckboxColumn({
      field: 'Example',
      headerName: 'Example',
      tooltip: 'Tooltip example'
    }),

- [NO-ISSUE] - `common`:  Now, it is possible to pass an HTML message to the header of the `Notification` message.

- [NO-ISSUE] - `components`: Two new properties have been added to `vsTabLabel`:

  - ``order``: This property determines the tab's position in the list, allowing developers to specify the order in which the tab labels should appear within the `VsTabGroup`. The default value is 1, meaning that tabs will be arranged based on the provided order value.
  - ``hidden``: The hidden property is used to hide a specific label within the tab group.

  .. raw:: html

    <span style="font-weight: bold;">Usage Example:</span>
    
  .. code-block:: html+ng2

    <vs-tabs-view-template>
      <vs-tab-group endRouteBase="tab-group">
        <div *vsTabLabel="{ title: 'tab.one.label', route: 'tab-one', order: 2 }"></div>
        <div *vsTabLabel="{ title: 'tab.two.label', route: 'tab-two', hidden: true}"></div>
        <div *vsTabLabel="{ title: 'tab.three.label', route: 'tab-three'}"></div>
      </vs-tab-group>
    </vs-tabs-view-template>

Improvements
^^^^^^^^^^^^

- `SDKF-12 <https://portal.korp.com.br/projetos/0e971de3-71ae-16ff-9d20-fcf528bebd03/lista/20f36cce-6444-8357-5d45-4a7d8d457d3f>`_ - `components`: An improvement has been implemented in `VsKanban`. Now, when dragging a `kanban-card` to the edge of the screen horizontally, the horizontal scroll is automatically triggered.

____

7.0.0-beta.29 (28/12/4)
--------------------------

Bug Fixes
^^^^^^^^^

- [NO-ISSUE] - `common`: A correction has been made to address the issue of duplicate messages in the `Notification` upon reconnection.
- [NO-ISSUE] - `components`: Some performance corrections were made in the `VsIcon` component.

____

7.0.0-beta.28 (08/12/2023)
--------------------------

Features
^^^^^^^^

- `SDKF-209 <https://korp.youtrack.cloud/issue/SDKF-209>`_ - `components`: A new `@Input` property called ``disableHeader`` has been added. This property accepts a ``boolean`` value that allows disabling the grid's header. When the grid's header is disabled, it means that all functionalities related to sorting and filters in the header section will not just be turned off, they will be completely removed.

- `SDKF-214 <https://korp.youtrack.cloud/issue/SDKF-214>`_ - `components`: Added a new component called `VsLabelLink`. This component allows the creation of navigable links with additional features, such as custom styling and tooltips. The `@Input` properties include:

  - ``classes``: Allows adding custom CSS classes to the link.
  - ``tooltip``: A text that will be displayed when hovering over the link.
  - ``tooltipPosition``: Sets the tooltip's position relative to the link (`above, below, left, right, before, after`).
  - ``label``: The text of the link.
  - ``color``: Defines the color of the link text.
  - ``navigationPath``: The navigation path when clicking on the link.
  - ``avoidNavigation``: A function that returns a boolean to prevent navigation based on specific conditions.

Improvements
^^^^^^^^^^^^

- [NO-ISSUE] - `components`: Now in the `VsGrid` component, after executing the ``clearAllFilters`` method, the selection is also cleared. 

____

7.0.0-beta.27 (06/11/2023)
--------------------------

Features
^^^^^^^^

- `SDKF-200 <https://korp.youtrack.cloud/issue/SDKF-200>`_ - `components`: A new component named `VsAutocompleteChipsMinimalist` has been added. This component is a minimalist variation of the already existing `VsAutocompleteChips`. The `VsAutocompleteChipsMinimalist` offers a more simplified and clean interface, while maintaining the key functionalities of the original component.

Bug Fixes
^^^^^^^^^

- `SDKF-206 <https://korp.youtrack.cloud/issue/SDKF-206>`_ - `components`: A correction has been made to the `keep-sort` icon in `VsGrid`. Previously, in situations where two or more columns had ``sorting.useField`` set with equal values, the `keep-sort` icon remained visible on all columns. 

____

7.0.0-beta.26 (01/11/2023)
--------------------------

Features
^^^^^^^^

- `SDKF-204 <https://korp.youtrack.cloud/issue/SDKF-204>`_ - `components`: A new `@Input` property named ``useCurrentValueAsFilter`` has been added to the `VsAutocompletSelect` component. This property, which accepts a boolean value, determines whether the current input value will be used to perform filtering in the autocomplete. The default value of this property is false, which means that by default, the current value is not used as a filter unless explicitly configured by the developer to do so.
- `SDKF-205 <https://korp.youtrack.cloud/issue/SDKF-205>`_ - `components`: A new `@Input` property named ``autoSelectTextOnFocus`` has been added to several form components. This property, which accepts a boolean value, is used to determine whether the text inside the input field will be automatically selected when the field receives focus. The ``autoSelectTextOnFocus`` property has been added to the following components:

  - VsAutocompleteSelect
  - VsDatepicker
  - VsDropdown
  - VsInput
  - VsTextarea.
  - VsTextEditable (In this component the property is called ``autoSelectTextOnClick``)

- [NO-ISSUE] - `components`: Two new properties have been added to `VsGridColumn`, named ``alignHeader`` and ``alignCell``. These properties allow for separate alignment of the column title and cell content. Previously, the alignment of both was controlled by the ``align`` property, which has now been `deprecated`. The new properties ``alignHeader`` and ``alignCell`` accept the following positions: ``left``, ``right`` or ``center``.

  .. raw:: html

      <span style="font-weight: bold;">Usage Example:</span>
    
  .. code-block:: typescript

    this.gridOptions = new VsGridOptions();

    this.gridOptions.columns = [
      new VsGridSimpleColumn({
        alignCell: 'left',
        alignHeader: 'right'
      }),
    ];

____

7.0.0-beta.25 (25/10/2023)
--------------------------

Features
^^^^^^^^
- `SDKF-196 <https://korp.youtrack.cloud/issue/SDKF-196>`_ - `components`: A new `@Input` property has been added to the `VsTabGroup` component, named ``fitHeaderToContent``. This property allows the border (outline) of the title within the tab-group to automatically adjust to match the size of the title.

- `SDKF-192 <https://korp.youtrack.cloud/issue/SDKF-192>`_ - `components`: Added `VsTextEditable` Component. This component allows for the direct editing of textual content within the user interface.

  .. raw:: html

    <span style="font-weight: bold;">Usage Example:</span>
  
  .. code-block:: html+ng2

    <vs-text-editable formControlName="title" [editableContent]="editableContent" placeholder="placeholder">
      <h1>
        <span #editableContent></span>
      </h1>
    </vs-text-editable>

  .. code-block:: html+ng2

    <vs-text-editable formControlName="title3" [editableContent]="editableContent3" [placeholder]="placeholderTemplate">
      <h3>
        <span #editableContent3></span>
      </h3>
    </vs-text-editable>
    <ng-template #placeholderTemplate>
      <b>Placeholder </b><i>Template</i>
    </ng-template>

Bug Fixes
^^^^^^^^^

- `SDKF-195 <https://korp.youtrack.cloud/issue/SDKF-195>`_ - `components`: A problem with the `VsTabGroup` title has been fixed. Previously, when a value was not provided for the title, the title was incorrectly displayed as `[Object object]`. This update ensures that, in the absence of a specified title, the title field remains empty.
- `SDKF-196 <https://korp.youtrack.cloud/issue/SDKF-196>`_ - `components`: A correction has been made to the title size of the `VsTabGroup` component for cases where the title is an empty icon without text.
- [NO-ISSUE] - `components`: A correction have been implemented in the alignment of title of the `VsTabGroup` component.

----

7.0.0-beta.24 (04/10/2023)
--------------------------

Features
^^^^^^^^

- `SDKF-83 <https://korp.youtrack.cloud/issue/SDKF-83>`_ - `components`: Added a new `selectionMode` called `multiple` to the Grid. This `selectionMode` allows for simultaneous support of both row clicks and checkbox clicks within the Grid.

  - Along with the introduction of `multiple` `selectionMode`, a new method called ``onRowClick`` has been added. This method is triggered when a row is clicked while the `selectionMode` is set to ``multiple``. When the `selectionMode` is ``single``, the ``onRowClick`` method is also triggered, serving as a replacement for the ``select`` method in this context.

  .. raw:: html

    <span style="font-weight: bold;">Usage Example:</span>

  .. code-block:: typescript

    this.gridOptions = new VsGridOptions();
    this.gridOptions.selectionMode = 'multiple';

    this.gridOptions.select = (i, data) => console.info(`select ${i}: ${data.commonName}`);
    this.gridOptions.onRowClick = (i, data) => console.info(`onRowClick: ${i}: ${data.commonName}`);

  .. raw:: html

    <span style="font-weight: bold;">Notes</span>

  In ``single`` `selectionMode`, if ``onRowClick`` is not implemented, the ``select`` method will continue to function normally as the default behavior for row clicks.

Bug Fixes
^^^^^^^^^

- `SDKBACK-100 <https://korp.youtrack.cloud/issue/SDKBACK-100>`_ - `components`: A issue was fixed in the `filter` functionality that prevented it from working properly with decimal numbers. With this correction, the `filter` now accepts decimal numbers.
- [NO-ISSUE] - `common`: Resolved an issue with the width behavior in `.mat-form-field-infix` when using the percentage width classes (``w-...``).

Breaking Changes
^^^^^^^^^^^^^^^^

- `SDKF-134 <https://korp.youtrack.cloud/issue/SDKF-134>`_ - `theme`: The OpenSans font is no longer included via CSS by default. It is now necessary to add the font directly to the `index.html` of their projects.

  .. code-block:: html

    <head>
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
    </head>

____

7.0.0-beta.23 (02/10/2023)
--------------------------

Update Dependencies
^^^^^^^^^^^^^^^^^^^

- `SDKF-134 <https://korp.youtrack.cloud/issue/SDKF-134>`_ - Updated the **@viasoft/datepicker** package.

  .. list-table::
    :header-rows: 1

    * - Dependency
      - Status
      - Version
    * - @viasoft/datepicker
      - 🔄 Updated
      - ``2.0.1``

- The package ``@fortawesome/fontawesome-pro`` has been replaced with ``@viasoft/fontawesome-pro``.

  .. list-table::
    :header-rows: 1

    * - Dependency
      - Status
      - Version
    * - @viasoft/fontawesome-pro
      - ✅ Added
      - ``6.4.3``
    * - @fortawesome/fontawesome-pro
      - ❌ Removed
      -

  This requires updates in the `angular.json` file. Any reference to ``@fortawesome`` should be updated to ``@viasoft``.

Features
^^^^^^^^

- `SDKF-124 <https://korp.youtrack.cloud/issue/SDKF-124>`_ - `common`: `Sentry's` `session replay <https://docs.sentry.io/product/session-replay>`_ feature has been added.

  .. raw:: html

      <span style="font-weight: bold; font-size: 18px">Implementing VsSentry's Session Replay</span>

  * Start by importing the VsSentryIntegration module in your main application file.

    .. code-block:: typescript

        import { VsSentryIntegration } from '@viasoft/common';

  * Make sure to include the ``packageJson`` within the ``VsAppCoreModule.forRoot`` in your ``app.module``.

    .. code-block:: typescript
      
      import { VsAppCoreModule } from '@viasoft/app-core';
      import * as packageJson from 'path/to/package.json';

      @NgModule({
        imports: [
          VsAppCoreModule.forRoot({
            packageJson
          })
        ]
      })

  * To initialize VsSentry's session replay feature, invoke the sessionReplayInit method from VsSentryIntegration and pass the environment as an argument. (In the ``6.6.0-beta.38`` version, a new parameter was added to this method).

    .. code-block:: typescript

      VsSentryIntegration.sessionReplayInit(environment);

- [NO-ISSUE] - `theme`: New "width" classes have been added to define specific widths for elements, ranging from 1/1 to 16/16 of the parent container's width.

  .. raw:: html

    <span style="font-weight: bold; font-size: 18px">How to use these width classes:</span>

  * Width Classes:

    The classes follow the format w-x/y, where x represents the fraction of space you want the element to take up, and y stands for the whole.
    
    .. raw:: html

      <span style="font-weight: bold;">Examples:</span>

    - `w-1/12`: Represents 1/12 of the parent container's width.
    - `w-10/12`: Represents 10/12 (or 5/6) of the parent container's width.
    - `w-1/2`: Represents half of the parent container's width.

  * Responsive Classes:

    Responsive classes are prefixed based on screen size:

    - `xs`: Applies to screens with max-width: 767.999px
    - `sm`: Applies to screens between min-width: 768px and max-width: 991.999px
    - `md`: Applies to screens between min-width: 992px and max-width: 1199.999px
    - `lg`: Applies to screens with min-width: 1200px

    .. raw:: html

      <span style="font-weight: bold;">Example:</span>
    
    - `xs:w-3/4`: On smaller screens (up to 767.999px), the element will take up three-quarters of the parent container's width.

  .. raw:: html

    <span style="font-weight: bold;">Usage Example:</span>

  .. code-block:: html

    <div class="w-1/1">
      <vs-input class="xs:w-3/4 sm:w-1/2"></vs-input>
    </div>

- [NO-ISSUE] - `theme`: Two new utility classes have been introduced to enhance flexibility in styling and layout.

  - `w-expand`: allows an element to take up any available space by setting its flex value to auto.
  - `w-shrink`: resets the flex value to its initial state.

- [NO-ISSUE] - `common`: `VsSentryIntegration.sessionReplayInit` method has been enhanced to accept an additional optional parameter: ``serviceUrlPrefix``. This prefix is used for the sentryConfiguration call, forming a URL in the pattern ``{backendUrl}/{serviceUrlPrefix}/sentry/configuration``.
  
  .. raw:: html

      <span style="font-weight: bold;">Example:</span>

  .. code-block:: typescript

    VsSentryIntegration.sessionReplayInit(environment, 'showcase');

- `SDKF-132 <https://korp.youtrack.cloud/issue/SDKF-132>`_ / `SDKF-133 <https://korp.youtrack.cloud/issue/SDKF-133>`_ - `components`: `VsFormLayoutDirective` has been added. This directive allows for easy modification of form layouts. The available layouts are: ``legacy``, ``vertical``, and ``horizontal``.
 
  * The `VsFormLayoutDirective` has been integrated with the following form components:
  
    - VsAutocompleteSelect
    - VsDatepicker
    - VsInput
    - VsSearchInput
    - VsSelect
    - VsTextarea

  - To utilize the `VsFormLayoutDirective`, ensure that you have imported the `VsFormModule` from ``@viasoft/components`` in the module of the component where the directive will be used.
    
    .. code-block:: typescript

      import { VsFormModule } from '@viasoft/components';

  - By applying the directive directly on a form or its parent element, you can change the layout for form components. If the directive is placed on a parent element, all form components within will inherit the specified layout.

    .. raw:: html

      <span style="font-weight: bold;">Example:</span>
    
    .. code-block:: html
      
      <form>
        <vs-input vsFormLayout="vertical"></vs-input>
        <vs-input vsFormLayout="horizontal"></vs-input>
        <vs-textarea vsFormLayout="legacy"></vs-textarea>
      </form>

      <form vsFormLayout="vertical">
        <vs-input></vs-input>
        <vs-input></vs-input>
        <vs-textarea></vs-textarea>
      </form>

  - Additionally, you can set the default `vsFormLayout` for your application by including it within `VsAppCoreModule.forRoot` in your ``app.module``.
    
    .. code-block:: typescript

      import { VsAppCoreModule } from '@viasoft/app-core';

      @NgModule({
        imports: [
          VsAppCoreModule.forRoot({
            formLayout: 'vertical'
          })
        ]
      })

- [NO-ISSUE] - `components`: `autocomplete-chips` now supports the required attribute. When set, a visual indicator in the form of an asterisk (``*``) is appended to the form label, signaling that it is a required field.

- [NO-ISSUE] - `http`: Added the `ApiVersion` header, required for the newer versions of `Viasoft.Core`.

- `SDKF-144 <https://korp.youtrack.cloud/issue/SDKF-144>`_ - `theme`: New classes have been introduced to vertically align the `vs-checkbox` with forms when the `vsFormLayout` is set to ``vertical``.

  - ``vertical-form-align-center``: Aligns the checkbox to the center of the form.
  - ``vertical-form-align-top``: Aligns the checkbox to the top of the form.
  - ``vertical-form-align-bottom``: Aligns the checkbox to the bottom of the form.

- `SDKF-137 <https://korp.youtrack.cloud/issue/SDKF-137>`_ - `components`: The `condition` of the `grid` now supports promises as return values.

- `SDKF-146 <https://korp.youtrack.cloud/issue/SDKF-146>`_ - `components`: `headerActions` have been introduced to the `grid`. These can be placed on the upper left or upper right side of the `grid`. The `headerActions` support the same attributes as the `grid` `actions`

  .. raw:: html

    <span style="font-weight: bold;">Usage Example:</span>

  .. code-block:: typescript

    this.gridOptions = new VsGridOptions();

    this.gridOptions.leftActions = [ 
      {
        icon: 'check',
        callback() => {}
      }
    ]

    this.gridOptions.rightActions = [ 
      {
        icon: 'check',
        callback() => {}
      }
    ]

  .. raw:: html

    <span style="font-weight: bold;">Important Note</span>

  If there's a need to refresh the `actions` or `headerActions` dynamically, must be invoked the ``refreshActions`` method available in `VsGridOptions`. This method ensures that all `actions` reflect the most current state and attributes defined in the options.

- [NO-ISSUE] - `components`: `headerActions` have been introduced to the `tree-table`.

  .. raw:: html

    <span style="font-weight: bold;">Usage Example:</span>

  .. code-block:: typescript

    rightHeaderActions = [
      {
        icon: 'check',
        callback: () => {}
      }
    ]

    leftHeaderActions = [
      {
        icon: 'check',
        callback: () => {}
      }
    ]

  .. code-block:: html+ng2

    <vs-tree-table
      [rightHeaderActions]="rightHeaderActions"
      [leftHeaderActions]="leftHeaderActions"
    >
    </vs-tree-table>

  .. raw:: html

      <span style="font-weight: bold;">Important Note</span>

  If there's a need to refresh the `actions` or `headerActions` dynamically, must be invoked the ``refreshActionsSubject`` subject available in `tree-table`. This subject ensures that all `actions` reflect the most current state and attributes defined in the options.

  .. code-block:: html+ng2

    <vs-tree-table [refreshActionsSubject]="refreshActionsSubject"></vs-tree-table>
  
  .. code-block:: typescript

    public refreshActionsSubject = new Subject<void>();

    private yourFunction() {
      this.refreshActionsSubject.next();
    }

- `SDKF-159 <https://korp.youtrack.cloud/issue/SDKF-159>`_ - `components`: The `advancedFilter` of the `Grid` now accepts initial values.

  .. raw:: html

    <span style="font-weight: bold;">Example:</span>

  .. code-block:: typescript

    this.gridOptions = new VsGridOptions();
      
      this.gridOptions.defaultAdvancedFilter = {
        condition: 'and',
        rules: [
          {
            field: 'name',
            operator: 'ends_with',
            type: 'string',
            value: 'Value from defaultAdvancedFilter'
          }
        ]
      };

  .. raw:: html

      <span style="font-weight: bold;">Important Note</span>

  When there is cached data available for the `advancedFilter`, the `grid` will prioritize and use the cached values over the initial values provided through `defaultAdvancedFilter`.

- `SDKF-166 <https://korp.youtrack.cloud/issue/SDKF-166>`_ / `SDKF-167 <https://korp.youtrack.cloud/issue/SDKF-167>`_ - `components`: Added `gridCardActionsTopTemplate` and `gridCardActionsBottomTemplate` to the `grid` component. These new templates allow for the positioning of `grid` actions either at the top or the bottom of the `grid-card` in mobile layout.

  .. raw:: html

    <span style="font-weight: bold;">Usage Example:</span>

  .. code-block:: html+ng2

    <vs-grid 
      [gridCardActionsTopTemplate]="gridCardActionsTopTemplate"
      [gridCardActionsBottomTemplate]="gridCardActionsBottomTemplate"
    >
    </vs-grid>

    <ng-template #gridCardActionsTopTemplate let-data="data">
      your actions here...
    </ng-template>

    <ng-template #gridCardActionsBottomTemplate let-data="data">
      your actions here...
    </ng-template>

  .. raw:: html

    <span style="font-weight: bold;">Important Note</span>

  When utilizing ``gridCardActionsBottomTemplate``, be aware that it will replace the default `actions` of the `grid`.

- `SDKF-181 <https://korp.youtrack.cloud/issue/SDKF-181>`_ - `theme`: New classes have been introduced to vertically align the `vs-checkbox` with forms when the `vsFormLayout` is set to ``horizontal``.
  
  - ``horizontal-form-align-center``: Aligns the checkbox to the center of the form.
  - ``horizontal-form-align-bottom``: Aligns the checkbox to the bottom of the form.

- `SDKF-165 <https://korp.youtrack.cloud/issue/SDKF-165>`_ - `components`: Introduced `headerActions` for mobile layout in the `grid` component.
- `SDKF-165 <https://korp.youtrack.cloud/issue/SDKF-165>`_ - `components`: Introduced new attributes for the `actions` of the `tree-table`. The added attributes include ``iconStyle``, ``iconColor``, ``iconBoxColor``, ``disabled``, and ``refreshSubject``. With these additions, the attributes for `actions` within the `tree-table` are now aligned with those of the `grid`'s `actions`.
- [NO-ISSUE] - `components`: The tooltip attribute for `actions` and `headerActions` in both `grid` and `tree-table` has been enhanced to accept a function returning a ``string``.


Bug Fixes
^^^^^^^^^

- [NO-ISSUE] - `components`: Fixed issues related to the calculation of widths for `actions` of the `grid`.
- `SDKF-147 <https://korp.youtrack.cloud/issue/SDKF-147>`_ - `components`: Fixed an issue with detectChanges within `forms`, effectively resolving the "ExpressionChangedAfterItHasBeenChecked" `error`, that was occurring in some forms.
- [NO-ISSUE] - `components`: Fixed the issue with the refresh for `action` conditions within the `grid`. With this correction, the conditions for `actions` are updated correctly.
- [NO-ISSUE] - `components`: Added a correction ensuring that the `disabled` attribute on `grid` actions functions as expected. With this fix, the `disabled` state of actions is properly set based on the attribute value provided to each action.
- `SDKF-157 <https://korp.youtrack.cloud/issue/SDKF-157>`_ - `common`: Fixed a problem with `translations` that were not working correctly alongside route guards. This adjustment ensures that `translations` are applied correctly.
- [NO-ISSUE] - `components`: Fixed an issue in the `tree-table` where resizing a column would break the width of the `tree-table`. This fix ensures that the `tree-table` maintains its width layout integrity during and after the column resizing.
- [NO-ISSUE] - `components`: A correction has been applied to the color of the sorting label in the `tree-table`.
- `SDKF-188 <https://korp.youtrack.cloud/issue/SDKF-188>`_ - `components`: Fixed an issue in the `tree-table` where the `filter` functionality was not working properly when navigating between pages. This fix ensures correct filtering when browsing the different pages of the `tree-table`.

Changes
^^^^^^^

- [NO-ISSUE] - `common`: The ``@sentry/angular-ivy`` has been added as a dependency to the ``@viasoft/common``.
- `SDKF-145 <https://korp.youtrack.cloud/issue/SDKF-145>`_ - `components`: Modified the color of the `tab-group` label to be more "highlighted".
- `SDKF-163 <https://korp.youtrack.cloud/issue/SDKF-163>`_ - `components`: The vertical scroll within `tree-table` is now always visible (if necessary). No longer need to scroll horizontally to the right for the vertical scroll to appear.
- `SDKF-165 <https://korp.youtrack.cloud/issue/SDKF-165>`_ - `components`: Now, the `grid` header (``thead``) remains fixed at the top of the screen during scrolling.

Breaking Changes
^^^^^^^^^^^^^^^^

- [NO-ISSUE] - `components`: The `refreshActions` method of the grid has been updated to accurately reflect the changes in `actions / headerActions` following any modifications. It is important to call this method whenever there are changes to `actions` or `headerActions`.
- [NO-ISSUE] - `components`: The `disabled` method for both `grid` and `tree-table` has been updated. It now requires a function that returns a boolean value.

  .. raw:: html

    <span style="font-weight: bold;">Important Note</span>

  If there is a need to dynamically refresh the ``disabled``, ``actions``, or ``headerActions`` in these components, different approaches should be used for `tree-table` and `grid`:
    
  - For `tree-table`: Invoke the ``refreshActionsSubject`` subject.

    .. code-block:: html+ng2

      <vs-tree-table [refreshActionsSubject]="refreshActionsSubject"></vs-tree-table>
    
    .. code-block:: typescript

      public refreshActionsSubject = new Subject<void>();

      private yourFunction() {
        this.refreshActionsSubject.next();
      }
  
  - For `grid`: Call the ``refreshActions`` method available in `VsGridOptions`. 
  
  Both will ensure that all `actions` reflect the most current state and attributes defined in the options.

- `SDKF-165 <https://korp.youtrack.cloud/issue/SDKF-165>`_ - `components`: The ``VsGridAction`` class has been deprecated. Users are advised to use the ``VsTableAction`` class as a replacement. The new class provides similar functionalities and is set to be the standard going forward.

  .. raw:: html

    <span style="font-weight: bold;">Updates to VsTableAction:</span>

  - **tooltip** can now accept either a function returning a ``string`` or a static ``string``.
  - **condition** can now accept either a function returning a ``Promise<boolean>`` or a ``boolean``.
  - **disabled** can now accept either a function returning a ``boolean`` or a static ``boolean``.

____

7.0.0-beta.14 (22/06/2023)
--------------------------

Features
^^^^^^^^

- [NO-ISSUE] - `components`: `VsFormValidatorService.validateForm` now has `modalTitle` / `modalErrorTemplate` / `modalActions`.

Bug Fixes
^^^^^^^^^

- [NO-ISSUE] - `components`: `quick-filter` now correctly disallow go to next page if user is already in the last page.
- [NO-ISSUE] - `components`: `grid` filter is removed from DOM correctly when you press "Esc" in a select-modal

Changes
^^^^^^^

- [NO-ISSUE] - `common`: "Updating License" modal now is hidden by default, but you can set it to show up using `VsAppCoreModule.forRoot.showUpdateLicenseModal` / `VsCommonModule.forRoot.showUpdateLicenseModal`.

----

7.0.0-beta.13 (21/06/2023)
--------------------------

Features
^^^^^^^^

- `NCD-215 <https://korp.youtrack.cloud/issue/NCD-215>`_ - `components`: `parcel-renderer` added, allowing to use single-spa parcels in a simple way.

----

7.0.0-beta.8 (09/06/2023)
-------------------------

Features
^^^^^^^^

- `PROP-1305 <http://jira.korp.com.br/browse/PROP-1305>`_ - `components`: `VsFormValidatorService` / `vsFormPath` directive added, so developers can easily show an error modal for the form, allowing users to navigate to each error field.

----

7.0.0-beta.6 (07/06/2023)
-------------------------

Breaking Changes
^^^^^^^^^^^^^^^^

- [NO-ISSUE] - `components`: `button` In `nav-mode` `tooltip` prop was having the `label` functionality. Now `label` always behaviours like `label` and `tooltip` always behaviours like `tooltip`.
  - So if you want the previous behavior, you should replace from `tooltip` to `label` wherever button is in `nav-mode` (inside of `sidenav-view-template` / `tabs-view-template` components)
- [NO-ISSUE] - `common`: `authorizationStorageService.userPermissionsAfterLogin` was replaced to `authorizationStorageService.refreshPermissions`.

Features
^^^^^^^^

- [NO-ISSUE] - `components`: `button` `navMode` property now is public, so you can easily choose whether or not you want the button to behavior as navMode.
- [NO-ISSUE] - `common`: `authorizationService.refreshPermissions` added.

----

7.0.0-beta.5 (02/06/2023)
-------------------------

Breaking Changes
^^^^^^^^^^^^^^^^

- `SDKF-49 <https://korp.youtrack.cloud/issue/SDKF-49>`_ - `components`: `grid` `GetSelection` type changed and now has cache, rather than being called by Angular is now called internally.

----

7.0.0-beta.4 (27/05/2023)
-------------------------

Bug Fixes
^^^^^^^^^

- [NO-ISSUE] - `common`: Minor fix in `VsMessageService`.

----

7.0.0-beta.2 (31/03/2023)
-------------------------

Breaking Changes
^^^^^^^^^^^^^^^^

- `SDKF-32 <https://korp.youtrack.cloud/issue/SDKF-32>`_ - `components`: `vs-button` now has the optional ``autofocus`` property, and the default autofocus has been removed. This way, issues related to autofocus control can be avoided with greater flexibility, allowing developers to configure the ``autofocus`` behavior as needed. 

.. raw:: html

    <span>Example of how to use the new 'autofocus' property in the vs-button component:</span>
    
.. code-block::

    <vs-button [autofocus]="true"></vs-button>

.. _7.0.0-beta.1:

7.0.0-beta.1 (16/01/2023)
-------------------------

This release is focused around updating to Angular 14. It is crucial that you follow these steps in this exact order when updating your apps and libraries.


Before Updating
^^^^^^^^^^^^^^^

* After each "dependency update" step, you might need to delete your ``node_modules`` folder and ``package-lock.json`` file and run ``npm i`` again.


Follow these steps to migrate to Angular 14
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

When entering the link, check the option "I use Angular Material"

`Steps to migrate from Angular 12 to Angular 14 <https://update.angular.io/?locale=en-US&l=3&v=12.0-14.0>`_.

Update Dependencies
^^^^^^^^^^^^^^^^^^^

These are the final dependency tables, go through each dependency and perform the necessary changes.

.. list-table::
   :header-rows: 1

   * - Dependency
     - Status
     - Version
     - Documentation
   * - @angular/animations
     - 🔄 Updated
     - ``^14.2.12``
     - `angular/animations <https://github.com/angular/angular#readme>`_
   * - @angular/cdk
     - 🔄 Updated
     - ``^14.2.7``
     - `angular/cdk <https://github.com/angular/components#readme>`_
   * - @angular/common
     - 🔄 Updated
     - ``^14.2.12``
     - `angular/common <https://github.com/angular/angular#readme>`_
   * - @angular/compiler
     - 🔄 Updated
     - ``^14.2.12``
     - `angular/compiler <https://github.com/angular/angular#readme>`_
   * - @angular/core
     - 🔄 Updated
     - ``^14.2.12``
     - `angular/core <https://github.com/angular/angular#readme>`_
   * - @angular/forms
     - 🔄 Updated
     - ``^14.2.12``
     - `angular/forms <https://github.com/angular/angular#readme>`_
   * - @angular/material
     - 🔄 Updated
     - ``^14.2.7``
     - `angular/material <https://github.com/angular/components#readme>`_
   * - @angular/platform-browser
     - 🔄 Updated
     - ``^14.2.12``
     - `angular/platform-browser <https://github.com/angular/angular#readme>`_
   * - @angular/platform-browser-dynamic
     - 🔄 Updated
     - ``^14.2.12``
     - `angular/platform-browser <https://github.com/angular/angular#readme>`_
   * - @angular/router
     - 🔄 Updated
     - ``^14.2.12``
     - `angular/router <https://github.com/angular/angular/tree/main/packages/router>`_
   * - @fortawesome/fontawesome-pro
     - 🔄 Updated
     - ``~6.2.1``
     - `fortawesome <https://fontawesome.com/v6/docs>`_
   * - @microsoft/signalr
     - 🔄 Updated
     - ``~7.0.0``
     - `microsoft/signalr <https://learn.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-7.0?view=aspnetcore-7.0>`_
   * - @ngx-translate/core
     - 🔄 Updated
     - ``~14.0.0``
     - `ngx-translate/core <https://github.com/ngx-translate/core/blob/master/README.md>`_
   * - @sentry/browser
     - 🔄 Updated
     - ``~7.28.1``
     - `sentry/browser <https://docs.sentry.io/platforms/javascript/guides/angular/>`_
   * - @viasoft/datepicker
     - 🔄 Updated
     - ``2.0.0``
     - `viasoft/datepicker <link>`_ 
   * - angular-imask
     - 🔄 Updated
     - ``~6.4.3``
     - `angular-imask <https://github.com/uNmAnNeR/imaskjs/tree/master/packages/angular-imask>`_
   * - angular-oauth2-oidc
     - 🔄 Updated
     - ``~14.0.1``
     - `angular-oauth2-oidc <https://manfredsteyer.github.io/angular-oauth2-oidc/docs/>`_
   * - core-js
     - 🔄 Updated
     - ``~3.26.1``
     - `core-js <https://github.com/zloirock/core-js>`_
   * - dateformat
     - 🔄 Updated
     - ``~5.0.3``
     - `dateformat <https://www.npmjs.com/package/dateformat>`_
   * - dompurify
     - 🔄 Updated
     - ``~2.4.1``
     - `dompurify <https://www.npmjs.com/package/dompurify>`_
   * - imask
     - 🔄 Updated
     - ``~6.4.3``
     - `imask <https://imask.js.org/guide.html>`_
   * - primeicons
     - 🔄 Updated
     - ``~6.0.1``
     - `primeicons <https://www.primefaces.org/diamond/icons.xhtml>`_
   * - primeng
     - 🔄 Updated
     - ``~14.2.2``
     - `primeng <https://primefaces.org/primeng/setup>`_
   * - prompts
     - 🔄 Updated
     - ``~2.4.2``
     - `prompts <https://github.com/terkelg/prompts/>`_
   * - rxjs
     - 🔄 Updated
     - ``~7.8.0``
     - `rxjs <https://rxjs.dev/guide/overview>`_
   * - tslib
     - 🔄 Updated
     - ``~2.4.1``
     - `tslib <https://github.com/microsoft/tslib>`_
   * - ua-parser-js
     - 🔄 Updated
     - ``~1.0.32``
     - `ua-parser-js <https://github.com/faisalman/ua-parser-js>`_
   * - zone.js
     - 🔄 Updated
     - ``~0.12.0``
     - `zone.js <https://www.npmjs.com/package/zone.js?activeTab=readme>`_
     

.. list-table::
   :header-rows: 1

   * - Dev dependency
     - Status
     - Version
     - Documentation
   * - 4tw/cypress-drag-drop
     - 🔄 Updated
     - ``~2.2.3``
     - `4tw/cypress-drag-drop <https://www.npmjs.com/package/@4tw/cypress-drag-drop>`_
   * - @angular-devkit/build-angular
     - 🔄 Updated
     - ``^14.2.10``
     - `@angular-devkit/build-angular <https://github.com/angular/angular-cli>`_
   * - @angular/cli
     - 🔄 Updated
     - ``^14.2.10``
     - `@angular/cli <https://github.com/angular/angular-cli>`_
   * - @angular/compiler-cli
     - 🔄 Updated
     - ``^14.2.12``
     - `angular/compiler-cli <https://github.com/angular/angular/tree/main/packages/compiler-cli>`_
   * - @angular/language-service
     - 🔄 Updated
     - ``^14.2.12``
     - `angular/language-service <https://github.com/angular/angular#readme>`_
   * - @types/jasmine
     - 🔄 Updated
     - ``~4.3.1``
     - `types/jasmine <https://github.com/DefinitelyTyped/DefinitelyTyped/>`_
   * - @types/node
     - 🔄 Updated
     - ``~18.11.17``
     - `types/node <https://github.com/DefinitelyTyped/DefinitelyTyped>`_
   * - @viasoft/testing
     - 🔄 Updated
     - ``~2.0.0``
     - `viasoft/testing <link>`_
   * - cypress
     - 🔄 Updated
     - ``~12.2.0``
     - `cypress <https://docs.cypress.io/guides/references/migration-guide>`_
   * - eslint-config-airbnb-base
     - 🔄 Updated
     - ``~15.0.0``
     - `eslint-config-airbnb-base <https://github.com/airbnb/javascript>`_
   * - eslint-import-resolver-typescript
     - 🔄 Updated
     - ``~3.5.2``
     - `eslint-import-resolver <https://github.com/import-js/eslint-import-resolver-typescript>`_
   * - eslint-plugin-import
     - 🔄 Updated
     - ``~2.25.2``
     - `eslint-plugin-import <https://github.com/import-js/eslint-plugin-import>`_
   * - jasmine-core
     - 🔄 Updated
     - ``~4.5.0``
     - `jasmine-core <https://github.com/jasmine/jasmine/>`_
   * - jasmine-spec-reporter
     - 🔄 Updated
     - ``~7.0.0``
     - `jasmine-spec-reporter <https://github.com/bcaudan/jasmine-spec-reporter>`_
   * - karma
     - 🔄 Updated
     - ``~6.4.1``
     - `karma <https://karma-runner.github.io/>`_
   * - karma-chrome-launcher
     - 🔄 Updated
     - ``~3.1.1``
     - `karma-chrome-launcher <https://github.com/karma-runner/karma-chrome-launcher>`_
   * - karma-coverage-istanbul-reporter
     - 🔄 Updated
     - ``~3.0.3``
     - `karma-coverage-istanbul <https://github.com/mattlewis92/karma-coverage-istanbul-reporter>`_
   * - karma-jasmine
     - 🔄 Updated
     - ``~5.1.0``
     - `karma-jasmine <https://github.com/karma-runner/karma-jasmine>`_
   * - karma-jasmine-html-reporter
     - 🔄 Updated
     - ``~2.0.0``
     - `karma-jasmine-html-reporter <https://github.com/dfederm/karma-jasmine-html-reporter>`_
   * - ng-packagr
     - 🔄 Updated
     - ``~14.2.2``
     - `ng-packagr <https://github.com/ng-packagr/ng-packagr>`_
   * - prettier
     - 🔄 Updated
     - ``~2.8.1``
     - `prettier <https://prettier.io>`_
   * - shelljs
     - 🔄 Updated
     - ``~0.8.5``
     - `shelljs <https://github.com/shelljs/shelljs>`_
   * - stylelint
     - 🔄 Updated
     - ``~14.16.0``
     - `stylelint <https://stylelint.io/migration-guide/to-14/>`_
   * - stylelint-config-prettier
     - 🔄 Updated
     - ``~9.0.4``
     - `stylelint-config-prettier <https://github.com/prettier/stylelint-config-prettier>`_
   * - stylelint-config-standard
     - 🔄 Updated
     - ``~29.0.0``
     - `stylelint-config-standard <https://github.com/stylelint/stylelint-config-standard>`_
   * - stylelint-scss
     - 🔄 Updated
     - ``~4.3.0``
     - `stylelint-scss <https://github.com/stylelint-scss/stylelint-scss>`_
   * - ts-node
     - 🔄 Updated
     - ``~10.9.1``
     - `ts-node <https://typestrong.org/ts-node/>`_
   * - tsickle
     - 🔄 Updated
     - ``~0.46.3``
     - `tsickle <https://github.com/angular/tsickle>`_
   * - typescript
     - 🔄 Updated
     - ``~4.7.2``
     - `typescript <https://www.typescriptlang.org/>`_
   * - yargs
     - 🔄 Updated
     - ``~17.6.2``
     - `yargs <https://yargs.js.org/docs/>`_


Breaking Changes from Libraries
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

.. raw:: html

    <span style="font-weight: bold; font-size: 20px">Angular/Material</span>

``12.0.0 → 13.0.0``

* Renamed the directive that automatically resizes a text area to fit the content.

.. raw:: html

    <span style="color: red">Before</span>

.. code-block:: html

    [matTextareaAutosize]=""

.. raw:: html

    <span style="color: green">After</span>

.. code-block:: html

    [cdkTextareaAutosize]=""

* The use of ``~`` to import SCSS files from node_modules is deprecated.

.. raw:: html

    <span style="color: red">Before</span>

.. code-block:: html

    @use '~@angular/material'

.. raw:: html

    <span style="color: green">After</span>

.. code-block:: html

    @use '@angular/material'

* Changed the import path of palette.

.. raw:: html

    <span style="color: red">Before</span>

.. code-block:: html

    @use '@angular/material/core/theming/palette' as palette

.. raw:: html

    <span style="color: green">After</span>

.. code-block:: html

    @use '@angular/material/theming' as palette;

.. raw:: html

    <span style="font-weight: bold; font-size: 20px">@viasoft/datepicker</span>

``1.0.0 → 2.0.0``

* Updated to Angular 14

* Moved Dayjs to be a peer dependency.  

*
  Replace deprecated Moment with Dayjs

  * Locale was removed from the library configuration, changing the locale should be done outside the component.
  * Some formats might also have changed due to the way Dayjs is implemented.

*
  Replace internal position resolving with Angular material cdk library.

  * This removal will drop the ``attachTo`` option from the library configuration. If you're using this option, you'll need to update your code to no longer use it.
  * You will also need to add the cdk styles to your project. You can do so by adding ``@import '@angular/cdk/overlay-prebuilt.css';`` to your global styles or by adding it to the styles attribute in your angular.json file.

.. raw:: html

    <span style="font-weight: bold; font-size: 20px">angular-imask</span>

``6.1.0 → 6.4.3``

* When clearing an input with the mark type ``phone``, the input will be completely empty. Before the update, when clearing it, there was “(”.

.. raw:: html

    <span style="font-weight: bold; font-size: 20px">rxjs</span>

``6.6.0 → 7.0.0``

* The ``next`` method expects an argument of the type specified by the generic type of the ``Subject`` or ``BehaviorSubject`` class. This generic type specifies the type of value that will be sent to the observers when the 'next' method is called.

.. raw:: html

    <span style="color: red">Before</span>

.. code-block:: typescript

    public subject1 = new Subject();
    private subject2 = new Subject();

.. raw:: html

    <span style="color: green">After</span>

.. code-block:: typescript

    public subject1 = new Subject<string | void>();
    private subject2  = new Subject<{ event?: any, hideLoading?: boolean } | void>();

.. raw:: html

    <span style="font-weight: bold; font-size: 20px">cypress</span>

``9.6.1 → 12.2.0``

* After updating cypress, run the command ``npx cypress open`` and follow the instructions provided by Cypress to complete the migration.

.. raw:: html

    <span style="font-weight: bold; font-size: 20px">stylelint</span>

``13.6.1 → 14.0.0``

* 
  Stylelint no longer includes the syntaxes that:

  * Parse CSS-like languages like SCSS, Sass, Less and SugarSS.
  * Extract styles from HTML, Markdown and CSS-in-JS object & template literals

* First, install the shared config as a devDependency: ``npm install --save-dev stylelint-config-standard-scss``. Then, update your ``stylelintrc.json`` configuration to use it:

.. raw:: html

    <span style="color: red">Before</span>
    <br>
    <i>stylelintrc.json</i>

.. code-block:: json

    "extends": [
      "stylelint-config-standard",
      "stylelint-config-prettier"
    ]

.. raw:: html

    <span style="color: green">After</span>
    <br>
    <i>stylelintrc.json</i>

.. code-block:: json

    "extends": [
      "stylelint-config-standard",
      "stylelint-config-prettier",
      "stylelint-config-standard-scss"
    ]


Breaking Changes
^^^^^^^^^^^^^^^^

* TSLint has been deprecated in favor of ESLint. A migration from TSLint to ESLint will be required. Go to "Migrating an Angular CLI project from Codelyzer and TSLint" and follow the `steps to perform the migration <https://github.com/angular-eslint/angular-eslint#migrating-an-angular-cli-project-from-codelyzer-and-tslint/>`_.  

.. _@viasoft/testing SDK-7.0.0-beta.1 Breaking Changes:

* 
  Now it is necessary to create a new ``.json`` file in the app's root directory to pass the cypress settings to @viasoft/testing.

  * After upgrading cypress to version 10.0.0 the cypress configuration file format changed from ``.json`` to ``.ts`` being now necessary a new ``.json`` file with the cypress settings to be passed to @viasoft/testing.

.. raw:: html

    <i>cypress-config.json (New file)</i>
    
.. code-block:: json

    {
      "viewportHeight": 720,
      "viewportWidth": 1050,
      "video": false,
      "retries": 1,
      "e2e": {
        "baseUrl": "http://host.docker.internal:4200/showcase"
      }
    }


.. raw:: html

    <i>cypress.config.ts</i>
    
.. code-block:: typescript

    import { defineConfig } from 'cypress'
    import cypressConfig from './cypress-config.json'

    const setupNodeEvents = (on, config) => {
      return require('./cypress/plugins/index.js')(on, config)
    }

    export default defineConfig({
      ...cypressConfig,
      e2e: {
        setupNodeEvents,
        ...cypressConfig.e2e
      }
    })


To import the ``cypress-config.json`` file, it is necessary to add some settings in the ``tsconfig.json`` file.

.. raw:: html

    <i>tsconfig.json</i>
    
.. code-block:: json

    "compilerOptions": {
      "esModuleInterop": true,
      "resolveJsonModule": true,
    }


* Changed icon style of **quote-left** from ``light`` to ``solid``. The style change was necessary as there was a big change in the appearance of the icon after updating ``@fortawesome/fontawesome-pro`` to version 6.

* Paths that were passed as an empty string and redirected to other string paths have been removed.

.. raw:: html

    <span style="color: red">Before</span>

.. code-block:: typescript

    const routes: Routes = [
      { path: 'basic', component: CheckboxBasicComponent },
      { path: 'form', component: CheckboxFormComponent },
      { path: '', redirectTo: 'basic' },
      { path: '**', redirectTo: 'basic' }
    ];

.. raw:: html

    <span style="color: green">After</span>

.. code-block:: typescript

    const routes: Routes = [
      { path: 'basic', component: CheckboxBasicComponent },
      { path: 'form', component: CheckboxFormComponent },
      { path: '**', redirectTo: 'basic' }
    ];