Skip to content

Commit e77f59e

Browse files
damyanpetevdamyanpetev
authored
Merge pull request #12601 from IgniteUI/list-spec-refactoring
refactor(list): spec file refactoring
2 parents 66ecef5 + 930db31 commit e77f59e

File tree

3 files changed

+164
-293
lines changed

3 files changed

+164
-293
lines changed

‎projects/igniteui-angular/src/lib/grids/grid/grid.component.html

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<!-- Group-by area -->
55
<ng-container *ngIf="showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)">
6-
<igx-grid-group-by-area #groupArea [style.flex-basis.px]='outerWidth'
6+
<igx-grid-group-by-area #groupArea [style.flex-basis.px]="outerWidth"
77
[grid]="this"
88
[expressions]="groupingExpressions"
99
[sortingExpressions]="sortingExpressions"
@@ -34,9 +34,9 @@
3434

3535
<div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody" role="rowgroup">
3636
<div class="igx-grid__tbody-content" tabindex="0" [attr.role]="dataView.length ? null : 'row'" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
37-
(dragStop)="selectionService.dragMode = $event" (scroll)='preventContainerScroll($event)'
37+
(dragStop)="selectionService.dragMode = $event" (scroll)="preventContainerScroll($event)"
3838
(dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
39-
[style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody [attr.aria-activedescendant]="activeDescendant">
39+
[style.height.px]="totalHeight" [style.width.px]="calcWidth || null" #tbody [attr.aria-activedescendant]="activeDescendant">
4040
<span *ngIf="moving && columnInDrag && pinnedColumns.length <= 0"
4141
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
4242
class="igx-grid__scroll-on-drag-left"></span>
@@ -46,19 +46,19 @@
4646
<ng-container *ngTemplateOutlet="hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null">
4747
</ng-container>
4848
<ng-template #pinnedRecordsTemplate>
49-
<ng-container *ngIf='data
49+
<ng-container *ngIf="data
5050
| gridTransaction:id:pipeTrigger
5151
| visibleColumns:hasVisibleColumns
5252
| gridAddRow:true:pipeTrigger
5353
| gridRowPinning:id:true:pipeTrigger
5454
| gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
55-
| gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData'>
56-
<div #pinContainer *ngIf='pinnedData.length > 0'
55+
| gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData">
56+
<div #pinContainer *ngIf="pinnedData.length > 0"
5757
[ngClass]="{
5858
'igx-grid__tr--pinned-bottom': !isRowPinningToTop,
5959
'igx-grid__tr--pinned-top': isRowPinningToTop
6060
}"
61-
class='igx-grid__tr--pinned' [style.width.px]='calcWidth'>
61+
class="igx-grid__tr--pinned" [style.width.px]="calcWidth">
6262
<ng-container *ngFor="let rowData of pinnedData; let rowIndex = index">
6363
<ng-container *ngTemplateOutlet="pinned_record_template; context: getContext(rowData, rowIndex, true)">
6464
</ng-container>
@@ -77,17 +77,17 @@
7777
| gridDetails:hasDetails:expansionStates:pipeTrigger
7878
| gridAddRow:false:pipeTrigger
7979
| gridRowPinning:id:false:pipeTrigger"
80-
let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
81-
[igxForContainerSize]='calcHeight'
80+
let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]="verticalScroll"
81+
[igxForContainerSize]="calcHeight"
8282
[igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"
83-
[igxForTrackBy]='trackChanges'
83+
[igxForTrackBy]="trackChanges"
8484
#verticalScrollContainer (chunkPreload)="dataLoading($event)" (dataChanging)="dataRebinding($event)" (dataChanged)="dataRebound($event)">
8585
<ng-template
86-
[igxTemplateOutlet]='getRowTemplate(rowData)'
87-
[igxTemplateOutletContext]='getContext(rowData, rowIndex)'
88-
(cachedViewLoaded)='cachedViewLoaded($event)'
89-
(viewCreated)='viewCreatedHandler($event)'
90-
(viewMoved)='viewMovedHandler($event)'>
86+
[igxTemplateOutlet]="getRowTemplate(rowData)"
87+
[igxTemplateOutletContext]="getContext(rowData, rowIndex)"
88+
(cachedViewLoaded)="cachedViewLoaded($event)"
89+
(viewCreated)="viewCreatedHandler($event)"
90+
(viewMoved)="viewMovedHandler($event)">
9191
</ng-template>
9292
</ng-template>
9393
<ng-container *ngTemplateOutlet="hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null">
@@ -114,18 +114,18 @@
114114
</igx-grid-summary-row>
115115
</ng-template>
116116
<ng-template #detail_template_container let-rowIndex="index" let-rowData>
117-
<div detail='true' style="overflow: auto; width: 100%;" id="{{id}}_{{rowIndex}}" (pointerdown)='detailsViewFocused(detailsContainer, rowIndex)' #detailsContainer [attr.data-rowindex]='rowIndex'
117+
<div detail="true" style="overflow: auto; width: 100%;" id="{{id}}_{{rowIndex}}" (pointerdown)="detailsViewFocused(detailsContainer, rowIndex)" #detailsContainer [attr.data-rowindex]="rowIndex"
118118
[ngClass]="{
119119
'igx-grid__tr-container': true,
120120
'igx-grid__tr-container--active': isDetailActive(rowIndex)
121121
}">
122-
<div class="igx-grid__hierarchical-indent" style='display: flex;'>
122+
<div class="igx-grid__hierarchical-indent" style="display: flex">
123123
<ng-container *ngIf="this.groupingExpressions.length > 0">
124124
<div class="igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}"></div>
125125
</ng-container>
126126
<ng-template
127-
[ngTemplateOutlet]='detailTemplate'
128-
[ngTemplateOutletContext]='getDetailsContext(rowData, rowIndex)'>
127+
[ngTemplateOutlet]="detailTemplate"
128+
[ngTemplateOutletContext]="getDetailsContext(rowData, rowIndex)">
129129
</ng-template>
130130
</div>
131131
</div>
@@ -136,47 +136,47 @@
136136
<igc-trial-watermark></igc-trial-watermark>
137137
</div>
138138
<div igxToggle #loadingOverlay>
139-
<igx-circular-bar [indeterminate]="true" *ngIf='shouldOverlayLoading'>
139+
<igx-circular-bar [indeterminate]="true" *ngIf="shouldOverlayLoading">
140140
</igx-circular-bar>
141141
</div>
142142
<span *ngIf="moving && columnInDrag" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
143143
id="right" class="igx-grid__scroll-on-drag-right"></span>
144-
<div [hidden]='!hasVerticalScroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollSize" (pointerdown)="$event.preventDefault()">
145-
<div class="igx-grid__tbody-scrollbar-start" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>
146-
<div class="igx-grid__tbody-scrollbar-main" [style.height.px]='calcHeight'>
147-
<ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>
144+
<div [hidden]="!hasVerticalScroll()" class="igx-grid__tbody-scrollbar" [style.width.px]="scrollSize" (pointerdown)="$event.preventDefault()">
145+
<div class="igx-grid__tbody-scrollbar-start" [style.height.px]="isRowPinningToTop ? pinnedRowHeight : 0"></div>
146+
<div class="igx-grid__tbody-scrollbar-main" [style.height.px]="calcHeight">
147+
<ng-template igxGridFor [igxGridForOf]="[]" #verticalScrollHolder></ng-template>
148148
</div>
149-
<div class="igx-grid__tbody-scrollbar-end" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>
149+
<div class="igx-grid__tbody-scrollbar-end" [style.height.px]="!isRowPinningToTop ? pinnedRowHeight : 0"></div>
150150
</div>
151151

152152
<div class="igx-grid__addrow-snackbar">
153-
<igx-snackbar #addRowSnackbar [outlet]="igxBodyOverlayOutlet" [actionText]="resourceStrings.igx_grid_snackbar_addrow_actiontext" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>
153+
<igx-snackbar #addRowSnackbar [outlet]="igxBodyOverlayOutlet" [actionText]="resourceStrings.igx_grid_snackbar_addrow_actiontext" [displayTime]="snackbarDisplayTime">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>
154154
</div>
155155

156156
<div #igxBodyOverlayOutlet="overlay-outlet" igxOverlayOutlet></div>
157157
<div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet igxOverlayOutlet></div>
158158
</div>
159159

160160

161-
<div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summaryRowHeight' #tfoot>
161+
<div class="igx-grid__tfoot" role="rowgroup" [style.height.px]="summaryRowHeight" #tfoot>
162162
<div tabindex="0" (focus)="navigation.focusFirstCell(false)" (keydown)="navigation.summaryNav($event)" [attr.aria-activedescendant]="activeDescendant">
163-
<igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summaryRowHeight'
163+
<igx-grid-summary-row [style.width.px]="calcWidth" [style.height.px]="summaryRowHeight"
164164
*ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id" role="row"
165165
[summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe" [index]="dataView.length"
166166
class="igx-grid__summaries" #summaryRow>
167167
</igx-grid-summary-row>
168-
<div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalScroll()' [style.height.px]='summaryRowHeight'
168+
<div class="igx-grid__tfoot-thumb" [hidden]="!hasVerticalScroll()" [style.height.px]="summaryRowHeight"
169169
[style.width.px]="scrollSize"></div>
170170
</div>
171171
</div>
172172

173173
<div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">
174-
<div class="igx-grid__scroll-start" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>
175-
<div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
176-
<ng-template igxGridFor [igxGridForOf]='EMPTY_DATA' #scrollContainer>
174+
<div class="igx-grid__scroll-start" [style.width.px]="isPinningToStart ? pinnedWidth : headerFeaturesWidth" [style.min-width.px]="isPinningToStart ? pinnedWidth : headerFeaturesWidth"></div>
175+
<div class="igx-grid__scroll-main" [style.width.px]="unpinnedWidth">
176+
<ng-template igxGridFor [igxGridForOf]="EMPTY_DATA" #scrollContainer>
177177
</ng-template>
178178
</div>
179-
<div class="igx-grid__scroll-end" [style.float]='"right"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]="pinnedWidth === 0 || isPinningToStart"></div>
179+
<div class="igx-grid__scroll-end" [style.float]="'right'" [style.width.px]="pinnedWidth" [style.min-width.px]="pinnedWidth" [hidden]="pinnedWidth === 0 || isPinningToStart"></div>
180180
</div>
181181

182182
<div class="igx-grid__footer" #footer>
@@ -187,8 +187,8 @@
187187
<ng-template #emptyFilteredGrid>
188188
<span class="igx-grid__tbody-message" role="cell">
189189
<span>{{emptyFilteredGridMessage}}</span>
190-
<span *ngIf='showAddButton'>
191-
<ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>
190+
<span *ngIf="showAddButton">
191+
<ng-container *ngTemplateOutlet="addRowEmptyTemplate || defaultAddRowEmptyTemplate"></ng-container>
192192
</span>
193193
</span>
194194
</ng-template>
@@ -197,7 +197,7 @@
197197
<span class="igx-grid__tbody-message" role="cell">
198198
<span>{{emptyGridMessage}}</span>
199199
<span *ngIf='showAddButton'>
200-
<ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>
200+
<ng-container *ngTemplateOutlet="addRowEmptyTemplate || defaultAddRowEmptyTemplate"></ng-container>
201201
</span>
202202
</span>
203203
</ng-template>

‎projects/igniteui-angular/src/lib/list/list-item.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
<div *ngIf="!isHeader && list.listItemLeftPanningTemplate" #leftPanningTmpl class="igx-list__item-right"
33
[style.width.rem]="offsetWidthInRem" [style.height.rem]="offsetHeightInRem">
4-
<ng-container *ngTemlateOutlet="list.listItemLeftPanningTemplate.template; context: context">
4+
<ng-container *ngTemplateOutlet="list.listItemLeftPanningTemplate.template; context: context">
55
</ng-container>
66
</div>
77

0 commit comments

Comments
 (0)