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 - 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 - 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.

    Usage Example for Header with templates:
    <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>
    Usage Examples for VsScrollButtons:
    <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).

    Usage Example:
    @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 - components: Grid columns now accept a tooltip, which can be a string, or a function that returns a string.

    Usage Example:
    new VsGridSimpleColumn({
  tooltip: 'tooltip'
})

  • 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 - 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 - 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 - 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 - 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.

    Usage Example:

    component.html

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

    component.tabs-view-template

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

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

  • SDKF-23 - 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.

    Usage Example:
    <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 - 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

    Usage Example:
    <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 - 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 - components: The disabled property of the VsGridCheckboxColumn now accepts a function that returns a boolean.

  • SDKF-11 - 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 - components: Filters for the VsGrid have been added to the mobile layout.

  • SDKF-16 - components: A new property called tooltip has been added to VsGridCheckboxColumn. This property displays a specific text when the user hovers over the checkbox.

    Usage Example:
    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.

    Usage Example:
    <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 - 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 - 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 - 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 - 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 - 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 - 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 - 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.

    Usage Example:
    this.gridOptions = new VsGridOptions();

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

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

Features

  • 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 - components: Added VsTextEditable Component. This component allows for the direct editing of textual content within the user interface.

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

    <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 - 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 - 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 - 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.

    Usage Example:
    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}`);
    Notes

    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 - 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 - 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.

    <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 - Updated the @viasoft/datepicker package.

    Dependency

    Status

    Version

    @viasoft/datepicker

    🔄 Updated

    2.0.1

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

    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 - common: Sentry’s session replay feature has been added.

    Implementing VsSentry's Session Replay

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

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

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

      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).

      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.

    How to use these width classes:

    • 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.

      Examples:

      • 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

      Example:

      • xs:w-3/4: On smaller screens (up to 767.999px), the element will take up three-quarters of the parent container’s width.

    Usage Example:
    <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.

    Example:
    VsSentryIntegration.sessionReplayInit(environment, 'showcase');

  • SDKF-132 / 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.

      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.

      Example:
      <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.

      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 - 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 - components: The condition of the grid now supports promises as return values.

  • 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

    Usage Example:
    this.gridOptions = new VsGridOptions();

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

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

    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.

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

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

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

    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.

    <vs-tree-table [refreshActionsSubject]="refreshActionsSubject"></vs-tree-table>

    public refreshActionsSubject = new Subject<void>();

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

  • SDKF-159 - components: The advancedFilter of the Grid now accepts initial values.

    Example:
    this.gridOptions = new VsGridOptions();

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

    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 / 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.

    Usage Example:
    <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>
    Important Note

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

  • 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 - components: Introduced headerActions for mobile layout in the grid component.

  • 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 - 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 - 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 - 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 - components: Modified the color of the tab-group label to be more “highlighted”.

  • 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 - 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.

    Important Note

    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.

      <vs-tree-table [refreshActionsSubject]="refreshActionsSubject"></vs-tree-table>

      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 - 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.

    Updates to VsTableAction:

    • 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 - 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 - 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 - 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 - 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.

Example of how to use the new 'autofocus' property in the vs-button component:
<vs-button [autofocus]="true"></vs-button>

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.

Update Dependencies

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

Dependency

Status

Version

Documentation

@angular/animations

🔄 Updated

^14.2.12

angular/animations

@angular/cdk

🔄 Updated

^14.2.7

angular/cdk

@angular/common

🔄 Updated

^14.2.12

angular/common

@angular/compiler

🔄 Updated

^14.2.12

angular/compiler

@angular/core

🔄 Updated

^14.2.12

angular/core

@angular/forms

🔄 Updated

^14.2.12

angular/forms

@angular/material

🔄 Updated

^14.2.7

angular/material

@angular/platform-browser

🔄 Updated

^14.2.12

angular/platform-browser

@angular/platform-browser-dynamic

🔄 Updated

^14.2.12

angular/platform-browser

@angular/router

🔄 Updated

^14.2.12

angular/router

@fortawesome/fontawesome-pro

🔄 Updated

~6.2.1

fortawesome

@microsoft/signalr

🔄 Updated

~7.0.0

microsoft/signalr

@ngx-translate/core

🔄 Updated

~14.0.0

ngx-translate/core

@sentry/browser

🔄 Updated

~7.28.1

sentry/browser

@viasoft/datepicker

🔄 Updated

2.0.0

viasoft/datepicker

angular-imask

🔄 Updated

~6.4.3

angular-imask

angular-oauth2-oidc

🔄 Updated

~14.0.1

angular-oauth2-oidc

core-js

🔄 Updated

~3.26.1

core-js

dateformat

🔄 Updated

~5.0.3

dateformat

dompurify

🔄 Updated

~2.4.1

dompurify

imask

🔄 Updated

~6.4.3

imask

primeicons

🔄 Updated

~6.0.1

primeicons

primeng

🔄 Updated

~14.2.2

primeng

prompts

🔄 Updated

~2.4.2

prompts

rxjs

🔄 Updated

~7.8.0

rxjs

tslib

🔄 Updated

~2.4.1

tslib

ua-parser-js

🔄 Updated

~1.0.32

ua-parser-js

zone.js

🔄 Updated

~0.12.0

zone.js

Dev dependency

Status

Version

Documentation

4tw/cypress-drag-drop

🔄 Updated

~2.2.3

4tw/cypress-drag-drop

@angular-devkit/build-angular

🔄 Updated

^14.2.10

@angular-devkit/build-angular

@angular/cli

🔄 Updated

^14.2.10

@angular/cli

@angular/compiler-cli

🔄 Updated

^14.2.12

angular/compiler-cli

@angular/language-service

🔄 Updated

^14.2.12

angular/language-service

@types/jasmine

🔄 Updated

~4.3.1

types/jasmine

@types/node

🔄 Updated

~18.11.17

types/node

@viasoft/testing

🔄 Updated

~2.0.0

viasoft/testing

cypress

🔄 Updated

~12.2.0

cypress

eslint-config-airbnb-base

🔄 Updated

~15.0.0

eslint-config-airbnb-base

eslint-import-resolver-typescript

🔄 Updated

~3.5.2

eslint-import-resolver

eslint-plugin-import

🔄 Updated

~2.25.2

eslint-plugin-import

jasmine-core

🔄 Updated

~4.5.0

jasmine-core

jasmine-spec-reporter

🔄 Updated

~7.0.0

jasmine-spec-reporter

karma

🔄 Updated

~6.4.1

karma

karma-chrome-launcher

🔄 Updated

~3.1.1

karma-chrome-launcher

karma-coverage-istanbul-reporter

🔄 Updated

~3.0.3

karma-coverage-istanbul

karma-jasmine

🔄 Updated

~5.1.0

karma-jasmine

karma-jasmine-html-reporter

🔄 Updated

~2.0.0

karma-jasmine-html-reporter

ng-packagr

🔄 Updated

~14.2.2

ng-packagr

prettier

🔄 Updated

~2.8.1

prettier

shelljs

🔄 Updated

~0.8.5

shelljs

stylelint

🔄 Updated

~14.16.0

stylelint

stylelint-config-prettier

🔄 Updated

~9.0.4

stylelint-config-prettier

stylelint-config-standard

🔄 Updated

~29.0.0

stylelint-config-standard

stylelint-scss

🔄 Updated

~4.3.0

stylelint-scss

ts-node

🔄 Updated

~10.9.1

ts-node

tsickle

🔄 Updated

~0.46.3

tsickle

typescript

🔄 Updated

~4.7.2

typescript

yargs

🔄 Updated

~17.6.2

yargs

Breaking Changes from Libraries

Angular/Material

12.0.0 → 13.0.0

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

Before
[matTextareaAutosize]=""
After
[cdkTextareaAutosize]=""

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

Before
@use '~@angular/material'
After
@use '@angular/material'

  • Changed the import path of palette.

Before
@use '@angular/material/core/theming/palette' as palette
After
@use '@angular/material/theming' as palette;
@viasoft/datepicker

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.

angular-imask

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 “(”.

rxjs

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.

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

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.

stylelint

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:

Before
stylelintrc.json
"extends": [
  "stylelint-config-standard",
  "stylelint-config-prettier"
]
After
stylelintrc.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.

  • 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.

cypress-config.json (New file)
{
  "viewportHeight": 720,
  "viewportWidth": 1050,
  "video": false,
  "retries": 1,
  "e2e": {
    "baseUrl": "http://host.docker.internal:4200/showcase"
  }
}
cypress.config.ts
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.

tsconfig.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.

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