gp-crm-ui/components/crm-table-header/crm-table-header.component.html

Модуль компонентов UI Имя модуля: `gp-crm-ui`

<crm-cursor [type]="cursorType"></crm-cursor>
<div class="header">
	<div class="view view--pinned">
		<div class="canvas"
			[style.width.px]="pinnedCanvasWidth">
			<div class="cell"
				[ngClass]="{
					'cell--swap': column.isSwap,
					'cell--placeholder': column.isPlaceholder
				}"
				[style.width.px]="column.width"
				[style.left.px]="column.offset"
				*ngFor="let column of pinnedColumns">

				<div class="cell__wrapper"
					(mousedown)="onSwapMouseDown($event, column); $event.preventDefault();"
					(touchstart)="onSwapTouchStart($event, column);">
					<div class="cell__handle">
						<svg class="cell__handle-icon">
							<use xlink:href="#crm_ic_table-drag-drop"></use>
						</svg>
					</div>
					<div class="cell__content"
						(click)="onSortToggle(column); $event.preventDefault();">
						<div class="cell-header-name">
							<span class="cell-header-name__text">{{column.headerName}}</span>
						</div>
						<svg class="cell-button-pin cell-button-pin--active"
							(click)="
								onPinToggle(column);
								$event.preventDefault();
								$event.stopPropagation();
							">
							<use xlink:href="#crm_ic_column-pin-16"></use>
						</svg>
						<svg class="cell-button-sort"
							[ngClass]="{
								'cell-button-sort--none': column.sortType === SortType.None,
								'cell-button-sort--ascending': column.sortType === SortType.Asc,
								'cell-button-sort--descending': column.sortType === SortType.Desc
							}"
							*ngIf="column.isSorted">
							<use xlink:href="#crm_ic_table-sort-arrow-16"></use>
						</svg>
					</div>
				</div>

				<div class="cell__border"></div>

				<div class="cell__resizer"
					(mousedown)="onResizeMouseDown($event, column); $event.preventDefault();"
					(touchstart)="onResizeTouchStart($event, column);">
				</div>

			</div>
		</div>
	</div>

	<div class="separator"
		[attr.hidden]="pinnedCanvasWidth ? null : 'hidden'">
	</div>

	<div class="view" #view>
		<div class="canvas"
			[style.min-width.px]="defaultCanvasWidth">
			<div class="cell"
				[ngClass]="{
					'cell--swap': column.isSwap,
					'cell--placeholder': column.isPlaceholder
				}"
				[style.width.px]="column.width"
				[style.left.px]="column.offset"
				*ngFor="let column of defaultColumns">

				<div class="cell__wrapper"
					(mousedown)="onSwapMouseDown($event, column); $event.preventDefault();"
					(touchstart)="onSwapTouchStart($event, column);">
					<div class="cell__handle">
						<svg class="cell__handle-icon">
							<use xlink:href="#crm_ic_table-drag-drop"></use>
						</svg>
					</div>
					<div class="cell__content"
						(click)="onSortToggle(column); $event.preventDefault();">
						<div class="cell-header-name">
							<span class="cell-header-name__text">{{column.headerName}}</span>
						</div>
						<svg class="cell-button-pin"
							*ngIf="column === defaultColumns[0]"
							(click)="
								onPinToggle(column);
								$event.preventDefault();
								$event.stopPropagation();
							">
							<use xlink:href="#crm_ic_column-pin-16"></use>
						</svg>
						<svg class="cell-button-sort"
							[ngClass]="{
								'cell-button-sort--none': column.sortType === SortType.None,
								'cell-button-sort--ascending': column.sortType === SortType.Asc,
								'cell-button-sort--descending': column.sortType === SortType.Desc
							}"
							*ngIf="column.isSorted">
							<use xlink:href="#crm_ic_table-sort-arrow-16"></use>
						</svg>
					</div>
				</div>

				<div class="cell__border"></div>

				<div class="cell__resizer"
					(mousedown)="onResizeMouseDown($event, column); $event.preventDefault();"
					(touchstart)="onResizeTouchStart($event, column);">
				</div>

			</div>
		</div>
	</div>
</div>