text:
Body cell with component in template does not check for updates after row is removed

I'm submitting a ...  (check one with "x")
[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

I have a ngx datatable, with a column named 'active'.
This column contains a component that receive the column property, displays it, and contains a button to change the property.
  <ngx-datatable-column name="active" prop="active">
       <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
        value: {{value}};
        row.active: {{row.active}}
        <active-component [value]="value" (changed)="onStateChanged(row, $event)">
        </active-component>
       </ng-template>
 </ngx-datatable-column>

The active component has a button that changes the 'active' field value and emits the 'changed' event with the new value.
In the onStateChanged function set the new value to the row and I remove the row that was changed and set the datasource of the table with the new collection. (I have a filter by active value)
After the row is removed, the cell containing the button is not refreshed (it shows the value of the removed line).
I made a plnkr with the example.
On version 10.0.2 it works fine when removing the row.
On version 10.0.3 (after performance improvements) it does not update the cell.
https://embed.plnkr.co/DmHUI6FhH0nALbwfnuRl/
Is is possible to force the table to recheck/refresh/recalculate the changes?
Thank you,
Ben

Table version: 10.3.0 (the issue started with 10.0.3)

Angular version: 4.2.4

Browser: [all]

Language: [TypeScript]

I've got same issue

I just reported what appears to be the same issue.  With example.  #1645
I'm just really surprised that nobody seems to have run into this issue before now.

+1 I have the same issue with custom cell template

Have the same issue, does anyone got fix for this?

authors: Sharondio benniaminn hatung nbhusarapu vooda--

repo: swimlane/ngx-datatable


text:
Scrollbar disappearance causes ExpressionChangedAfterItHasBeenCheckedError

I'm submitting a ...  (check one with "x")
[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

ExpressionChangedAfterItHasBeenCheckedError is thrown on table's resize due to scrollbar disappearance
Expected behavior

No ExpressionChangedAfterItHasBeenCheckedError should be thrown. Exact error is:
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '1783'. Current value: '1800'.
    at viewDebugError (core.js:9801)
    at expressionChangedAfterItHasBeenCheckedError (core.js:9779)
    at checkBindingNoChanges (core.js:9948)
    at checkNoChangesNodeDynamic (core.js:14030)
    at checkNoChangesNode (core.js:13979)
    at debugCheckNoChangesNode (core.js:14805)
    at debugCheckDirectivesFn (core.js:14707)
    at Object.eval [as updateDirectives] (DatatableComponent.html:26)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14689)
    at checkNoChangesView (core.js:13814)

Reproduction of the problem

Have ngx-datatable component in a view where a scrollbar exists at the highest level
Have scrollbar disappear (for my situation specifically, an action causes an 'overflow: hidden' to be set)
ExpressionChangedAfterItHasBeenCheckedError is thrown.

What is the motivation / use case for changing the behavior?

Removes unnecessary errors in development mode (reduce noise)
Please tell us about your environment:

OS: Windows 8.1 x64
IDE: Webstorm
Package manager: NPM
node 6.9.4, Angular 5.1.2, angular cli 1.6.3

Table version: "^11.1.7"

Angular version: "~5.1.2"

Browser: Chrome (not sure about other browsers)

Language: Typescript: "~2.5.3"

Possible Fix
I have looked into the source code and noticed it was happening due to the _innerWidth of the datatable.component being changed after the first detection change cycle has already fired. Not sure which exact place this is being changed as the only place I can see it is in recalculateDims() method which is used everywhere.
Regardless, another tick has to happen before recalculating to notify angular of the new value. The window resizes due to the scrollbar disappearing but doesn't have the latest width. Therefore adding the below change fixes the issue:
/**
   * Window resize handler to update sizes.
   */
  @HostListener('window:resize')
  @throttleable(5)
  onWindowResize(): void {
    setTimeout(() => {
      this.recalculate();
    }, 0);
  }

Same problem here when I display a modal with click on a row.

source: gharchive/issue

authors: khchong stephanecot

license: mit

license_type: permissive

license_source: bigquery


text:
Using Row Details with Material and certain Row Order Freezes!

I'm submitting a ...  (check one with "x")
[x] bug report
[ ] feature request
[ ] support request

**Current behavior**
Using row details + material produces a potentially deadly combination that freezes the entire app.
Stackblitz below (plus source copied-in).

Observations:
1) Removing  altogether prevents the app from freezing
2) Removing  prevents the app from freezing
3) Moving the  to above the   prevents the app from freezing.
4) Replacing  to use <select> and <option> instead of material's <mat-select> and <mat-option> prevents the app from freezing.
5) Removing all <mat-option>'s prevents that app from freezing.
6) Moving  to the beneath the column definitions prevents the app from freezing (this seems to be the only viable solution).

**Expected behavior**
It should not freeze!

**Reproduction of the problem**
https://stackblitz.com/edit/angular-ixto2n

template:
`

  <ngx-datatable
    #myTable
    [rows]="rows"
    [reorderable]="true"
    [columnMode]="'force'"
    [scrollbarH]="true"
    [rowHeight]="50"
    [headerHeight]="50"
    [selected]="selected"
  >

    <ngx-datatable-row-detail rowHeight="'auto'" #myDetailRow>
      <ng-template ngx-datatable-row-detail-template>

Hi, I am a row detail

      </ng-template>
    </ngx-datatable-row-detail>

    <ngx-datatable-column
      [width]="150"
      [resizeable]="false"
      [sortable]="false"
      [draggable]="false"
      [canAutoResize]="false"
    >
      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>

        Expand/Collapse

      </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="Name" [canAutoResize]="true" prop="name"></ngx-datatable-column>
    <ngx-datatable-column name="ID" [canAutoResize]="true" prop="id"></ngx-datatable-column>

    <ngx-datatable-column name="Primary" prop="primary">
      <ng-template ngx-datatable-cell-template let-row="row">
        <mat-radio-button radioGroup="primary" [checked]="row.primary"></mat-radio-button>
      </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="Required" prop="required">
      <ng-template ngx-datatable-cell-template let-row="row">
        <mat-checkbox radioGroup="primary" [checked]="row.required"></mat-checkbox>
      </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="Links" prop="links">
      <ng-template ngx-datatable-cell-template let-row="row">
        <mat-form-field>
          <mat-select [(ngModel)]="row.links" [value]="row.links" multiple>
            <mat-option *ngFor="let link of allLinks" [value]="link">{{link}}</mat-option>
          </mat-select>
        </mat-form-field>
      </ng-template>
    </ngx-datatable-column>

  </ngx-datatable>

`

component:
`import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent  {

  @ViewChild('myTable', { static: false}) table: any;

  rows = [
    {name: 'row A', id: "A", primary: true, required: true, links: ['link1', 'link2']},
    {name: 'row B', id: "B", primary: false, required: false, links: ['link3', 'link4']}
  ];

  allLinks = ['link1','link2','link3','link4'];

  toggleDetails(row) {
    this.table.rowDetail.toggleExpandRow(row);
  }
}
`

* **Table version:**
"@angular/material": "^8.2.3"
"@swimlane/ngx-datatable": "^16.0.2"

* **Angular version:**
"@angular/core": "^8.0.0"

For those who happen to stumble upon this deadly combo, see Observation 6 for viable solution.


text:
Distance in between checkboxes and text is wrong in search results.

Description: Distance in between checkboxes an text is wrong in search results.
Link: http://swiss.github.io/styleguide/content_modules_-_search.html?#
Browser: all
For further information or if you have any questions please do not hesitate to contact me. lukas.jaborsky@namics.com
Screenshot:

reviewed

authors: LukasJaborsky zufrieden

repo: swiss/styleguide


text:
Add Deployment URL

This PR is tightly related to https://github.com/hashicorp/waypoint/pull/1387 and https://github.com/hashicorp/waypoint-plugin-sdk/pull/27.
Thanks to this PR, the deployment URL is now displayed in the CLI when the process is done.

Merging, because I need to add more stuff and I rely on this PR 👍

source: gharchive/pull-request

repo: swisscom/waypoint-plugin-cloudfoundry

license: MIT

license_source: github-api


text:
Pattern request: Tel. Number Input Field

Suggestion: https://www.figma.com/file/gOzjxKOZbkmQmp2zfdp602/Partnerportal?type=design&node-id=17912%3A74986&mode=design&t=QCoc3DaLKio2JZsa-1
Contact person: Katrin Bürger und Zignoli Claassen Desiree
possible solution: https://github.com/webcat12345/ngx-intl-tel-input

USe this: https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=185%3A13&mode=design&t=0P4Wrs6dJcpq7tmM-1

@gfellerph did you ever have such a request and if yes, how did you solve it?

For now, my only input is, that any input component could be part of this "control group" pattern. Text, select, checkbox/radiobutton, (not a textarea), button (but single line only 😄). Re-assigning to @wueestd for concepting.

authors: gfellerph rouvenpost wueestd

repo: swisspost/design-system


text:
Token Guidelines

We should have a comprehensive documentation of our token system which explains the basic concept and the architecture we're using.
Basics
Design tokens — or tokens, for short — are design decisions, translated into data. They’re ultimately a communication tool: a shared language between design and engineering for communicating detailed information about how to build user interfaces.
Tokens consist of values needed to construct and maintain a design system, such as spacing, color, typography, object styles, animation, and more. They can represent anything that has a design definition, like a color as a RGB value, an opacity as a number, or an animation ease as Bezier coordinates.[^1]
Other resources:

Atlassian Design Tokens
Salesforce Lightning Design Tokens
Material Design Design Tokens
W3C Design Token Community Group

Architecture
Tokens are categorised into 3 groups: core, semantic and component tokens. Each group has it's specific purpose and rules. The core and semantic layer are meant to be internal to the Design System, the component layer is intended to be used by the implementation. This enables introducing changes to the core and semantic layers without breaking changes in the component layer.
Core tokens
Core tokens are the most basic tokens and represent concrete values, for example yellow = #ffcc00 or size-16 = 16px.

Don't assign semantic names to core tokens. Do yellow = #ffcc00 instead of brand-color = #ffcc00. brand-color is a semantic name and belongs in the next group
Core tokens can reference each other in composite or derived tokens: sandgray = #050400 can be reused for a transparent variant with sandgray-alpha-50 = rgba(sandgray, 0.5)
Core tokens should not be aliased. When there's a definition for sandgray = #050400 there should not be another core token with the exact same value, e.g. othergray = sandgray or othergray = #050400. This would unnecessarily increase the number of tokens
Core tokens should not be referenced or used directly in any application since they represent static values that are intended to be referenced by either semantic or component tokens

Semantic tokens
Semantic tokens represent changes in design decisions across different environments, for example the body font-size that grows larger with increasing browser size. The semantic layer can also be seen as a mapping layer between the core and the component layer. It reassigns tokens to the correct values based on the current environment, for example styles for an external post themed page on a mobile device in dark mode.

Semantic tokens should be named around design concepts like brand-color or font-size curves (TODO: better define what design concepts are)
Example of a responsive font size token definition in the semantic layer, referencing three different core tokens:

Token
Mobile
Tablet
Desktop

font-curve-base
size-16
size-18
size-20

Semantic tokens can reference core tokens as well as other semantic tokens

Semantic tokens should not be referenced or used directly in any application since they represent changing values. In any given environment, a semantic token is never guaranteed to be the finally desired value since it could be referenced and overridden by another semantic token

Tokens from the semantic layer are intended to be implemented in an automated process

Semantic tokens should be grouped by environment: modes (light/dark), themes (post/subsidiary X/subsidiary Y), devices (mobile/tablet/desktop), channels (internal/external).

It should be possible to extend or reduce semantic groups or their environments and re-map values without introducing breaking changes to the system. This is only possible if implementations use an automated process to ship semantic tokens and never directly reference semantic tokens from within components

Component tokens
On the last layer, component tokens are tied directly to components (or utilities) and their properties.

Component tokens should be named according to the property of a component, for example button-padding-left = interactive-padding-left. The naming of properties should be as platform agnostic as possible (foreground-colour instead of just colour which would be CSS specific and not self explanatory in a token context since it could mean border colour, background colour or text colour).
Every component should have it's own set of tokens, component tokens should not be shared between components (see #3356)
Component tokens should reference semantic tokens if their value is expected to change based on the environment they are used in. If the value is static, component tokens can also reference core tokens directly

[^1]: Design tokens - Spectrum: https://spectrum.adobe.com/page/design-tokens/

Started something on experience hub but didnt get to finish it yet, maybe we can combine that with the text above

Closing in favor of https://github.com/swisspost/design-system/issues/3448

authors: Vandapanda gfellerph


text:
fix(intranet-header): nav-links have no horizontal padding on moblie

As soon as the main-menu collapses to a burger-icon, the normal nav-link elements have no horizontal padding anymore.
At the same time, nav-link dropdowns do have a horizontal padding.

@LarissaMS please just make it beautiful!


text:
Styles: Align text input styles with figma

Align the implementation of the text input with figma (https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components?node-id=7830%3A34310&t=cV2KtiERUC03yvvs-4).
This is a breaking change.

[ ] Show placeholder on floating label inputs (wait till label is floated, then remove color transparency and on blur, hide the placeholder fast before the label is animated)
[ ] Reduce number of size variants to two (72px and 48px)
[ ] Rename the component to Text Input
[ ] Update storybook and demo app

@gfellerph it looks like an old issue which is covered by: https://github.com/swisspost/design-system/issues/1835 and https://github.com/swisspost/design-system/issues/2225

Closing as duplicate of #1835, #2225 and #2527

authors: gfellerph imagoiq