Multi-row layout - Resizing feature integration.

[skrustev]

Related #4384

Additional information (check all that apply):

• Bug fix
• New functionality
• Documentation
• Demos
• CI/CD

Checklist:

• All relevant tags have been applied to this PR
• This PR includes unit tests covering all the new code
• This PR includes API docs for newly added methods/properties
• This PR includes feature/README.MD updates for the feature docs
• This PR includes general feature table updates in the root README.MD
• This PR includes CHANGELOG.MD updates for newly added functionality
• This PR contains breaking changes
• This PR includes ng update migrations for the breaking changes
• This PR includes behavioral changes and the feature specification has been updated with them

[MartinKamenov]

@skrustev
Currently if we have pinning and resizing pinned column can be resized to be wider than the maximal pinned area.

Steps to reproduce:

1. Open mrl sample and add this configuration or pin first column layout

<igx-grid [rowSelectable]="false" #grid [data]="data" displayDensity="compact" [width]="'100%'" [showToolbar]='true' [columnHiding]='true'>
            <igx-column-layout [resizable]="true" [pinned]="true" field='group1'>
                <igx-column [resizable]="true" [rowStart]="1" [colStart]="1" [colEnd]="5" field="ContactName"></igx-column>
                <igx-column [resizable]="true" [rowStart]="1" [colStart]="5" field="ContactTitle"></igx-column>
                <igx-column [resizable]="true" [rowStart]="1" [colStart]="6" field="Country"></igx-column>
                <igx-column [resizable]="true" [rowStart]="2" [colStart]="1" [colEnd]="3" field="Phone"></igx-column>
                <igx-column [resizable]="true" [rowStart]="2" [colStart]="3" [colEnd]="5" field="City"></igx-column>
                <igx-column [resizable]="true" [rowStart]="2" [colStart]="5" [colEnd]="7" field="Address"></igx-column>
                <igx-column [resizable]="true" [rowStart]="3" [colStart]="1" sortable="true" resizable="true"  field="CompanyName"></igx-column>
                <igx-column [resizable]="true" [rowStart]="3" [colStart]="2"  field="PostalCode"></igx-column>
                <igx-column [resizable]="true" [rowStart]="3" [colStart]="3" [colEnd]="7" field="Fax"></igx-column>
            </igx-column-layout>
            <igx-column-layout [resizable]="true" [pinned]="false" field='group2'>
                <igx-column [resizable]="true" [rowStart]="1" [colStart]="1"  sortable="true" field="ContactName" [width]='"500px"'></igx-column>
                <igx-column [resizable]="true" [rowStart]="1" [colStart]="2"  sortable="true" field="ContactTitle" [width]='"200px"'></igx-column>
                <igx-column [resizable]="true" [rowStart]="1" [colStart]="3"  sortable="true" field="Country" [width]='"150px"'></igx-column>
                <igx-column [resizable]="true" [rowStart]="1" [colStart]="4"  sortable="true" field="Phone" [width]='"150px"'></igx-column>

                <igx-column [resizable]="true" [rowStart]="2" [colStart]="4"  sortable="true" field="City"></igx-column>
                <igx-column [resizable]="true" [rowStart]="3" [colStart]="4"  sortable="true" field="Address"></igx-column>
                <igx-column [resizable]="true" [rowStart]="2" [colStart]="1" [rowEnd]="4" [colEnd]="4"  [filterable]="false" sortable="true"  field="CompanyName"></igx-column>
            </igx-column-layout>
        </igx-grid>

2. Resize the pinned column-layout and make it bigger than pinned area.

Actual result:

The pinned area becomes bigger than the allowed maximum

Expected result:

The pinned area should not exceed it's maximum