@igniteui/angular-templates 17.0.1302 → 17.0.1310-beta.2

package/igx-ts-legacy/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.component.html

@@ -0,0 +1,134 @@
+<div class="grid__wrapper">
+  <div class="sample__header">
+    <div class="switch-sample">
+      <h5 class="switch-sample__title">Boston Marathon 2020</h5>
+      <igx-switch [(ngModel)]="live" [disabled]="isFinished" title="Start/Stop the marathon"> <span
+          class="switch-sample__label">Live</span>
+      </igx-switch>
+    </div>
+    <igx-input-group>
+      <input class="gridSample__filter" igxInput type="text" placeholder="Filter by country" (input)="filter($event)">
+    </igx-input-group>
+  </div>
+  <div class="grid__wrapper__inner">
+    <igx-grid #grid1 igxPreventDocumentScroll [data]="localData" height="600px" displayDensity="cosy"
+      [allowFiltering]="true" filterMode="excelStyleFilter" [allowAdvancedFiltering]="true">
+
+      <igx-paginator #paginator [perPage]="10"></igx-paginator>
+
+      <igx-column header="Rank" width="12%" field="Id" [sortable]="true" [filterable]="false">
+        <ng-template igxCell let-cell="cell">
+          <div class="cell__inner">
+            <div>{{ paginator.page * paginator.perPage + cell.row.index + 1 }}</div>
+            <ng-container *ngIf="isTop3(cell)">
+              <span class="cup" *ngIf="cell.row.index === 0">
+                <img src="assets/images/trophy_gold.svg" alt="First place Trophy image" />
+              </span>
+              <span class="cup" *ngIf="cell.row.index === 1">
+                <img src="assets/images/trophy_silver.svg" alt="Second place Trophy image" />
+              </span>
+              <span class="cup" *ngIf="cell.row.index === 2">
+                <img src="assets/images/trophy_bronze.svg" alt="Third place Trophy image" />
+              </span>
+            </ng-container>
+          </div>
+        </ng-template>
+      </igx-column>
+
+      <igx-column field="Name" header="Athlete" [width]="athleteColumnWidth" [hasSummary]="true">
+        <ng-template igxCell let-cell="cell">
+          <div class="cell__inner">
+            <igx-avatar [src]="cell.row.data.Avatar" [roundShape]="true" size="small"> </igx-avatar><span
+              class="athlete_name">{{ cell.value }}</span>
+            <igx-badge *ngIf="live" [type]="getBadgeType(cell)" [icon]="getIconType(cell)"></igx-badge>
+          </div>
+
+        </ng-template>
+      </igx-column>
+
+      <igx-column field="SpeedEntries" header="Speed" width="23%" [filterable]="false" [hasSummary]="true"
+        [summaries]="speedSummary">
+        <ng-template igxCell let-val>
+          <igx-sparkline height="40px" width="190px" [dataSource]="val" valueMemberPath="Speed"
+            [displayType]="displayType.Line" [minimum]="0" [lineThickness]="2" brush="rgb(0, 153, 255)">
+          </igx-sparkline>
+        </ng-template>
+      </igx-column>
+
+      <igx-column field="TrackProgress" header="Progress" [filterable]="false" width="10%">
+        <ng-template igxCell let-val let-cell="cell">
+          <div class="linear-bar-container">
+            <igx-circular-bar [value]="val" [max]="100" [animate]="true" [textVisibility]="true"></igx-circular-bar>
+          </div>
+        </ng-template>
+      </igx-column>
+
+      <igx-column field="BeatsPerMinute" header="Heart Rate (bpm)" width="15%" [hasSummary]="true" dataType="number"
+        [summaries]="bnpSummary" [hidden]="hideBeatsPerMinute" [filterable]="false">
+      </igx-column>
+
+      <igx-column field="TopSpeed" header="Top Speed" width="15%" dataType="number" [hasSummary]="true"
+        [summaries]="topSpeedSummary" [filterable]="false" [hidden]="live">
+        <ng-template igxCell let-val>
+          <div class="cell__inner">
+            {{ val | number: '1.1-5' }}
+          </div>
+        </ng-template>
+      </igx-column>
+
+      <igx-column field="CountryFlag" header="Country" width="10%" [filterable]="false">
+        <ng-template igxCell let-cell="cell">
+          <div class="cell__inner_2">
+            <span>
+              <img [src]="cell.value" class="flag" />
+            </span>
+          </div>
+        </ng-template>
+      </igx-column>
+
+      <igx-column field="CountryName" [hidden]="true">
+      </igx-column>
+    </igx-grid>
+
+    <div class="s-overlay" [hidden]="!showWinnerOverlay" #winnerAlert>
+      <div class="s-overlay__inner">
+        <div class="s-overlay">
+          <div class="s-overlay__heading">
+            <span>
+              <img src="assets/images/trophy_gold.svg" alt="First place Trophy image" />
+              <span>Winner</span>
+              <img src="assets/images/trophy_gold.svg" alt="First place Trophy image" />
+            </span>
+          </div>
+          <div class="s-overlay__players">
+            <div class="s-overlay__player" [ngClass]="{'s-overlay__player--winner' : hasWinner}">
+              <igx-avatar size="large" [roundShape]="true" [src]="winner.Avatar"></igx-avatar>
+              <p class="s-overlay__player-name">{{ winner.Name }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="s-overlay s-overlay--finish" [hidden]="!showFinishedOverlay" #finishedAlert>
+      <div class="s-overlay__inner">
+        <div class="s-overlay__heading s-overlay__heading--finish">
+          <span>Finish</span>
+        </div>
+        <div class="s-overlay__players">
+          <ng-container *ngFor="let player of top3; let i = index">
+            <div class="s-overlay__player"
+              [ngClass]="i === 0 ? 's-overlay__player--winner' : i === 1 ? 's-overlay__player--second' : 's-overlay__player--third'">
+              <div class="s-overlay__trophy">
+                <span>{{i + 1}}</span>
+                <img [src]="getTrophyUrl(i)" alt="First place Trophy image" />
+              </div>
+              <igx-avatar [size]="i === 0 ? 'large': 'medium'" [roundShape]="true" [src]="player.Avatar"></igx-avatar>
+              <p class="s-overlay__player-name">{{ player.Name }}</p>
+            </div>
+          </ng-container>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/igx-ts-legacy/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.component.scss

@@ -0,0 +1,242 @@
+@use '<%=igxPackage%>/theming' as *;
+$grid-sample-theme: grid-theme(
+  $row-selected-background: #333,
+  $row-selected-text-color: #ddd,
+  $row-hover-background: #f8f8f8,
+  $row-border-color: #f8f8f8,
+  $cell-selected-background:
+    color(
+      $color: "gray",
+      $variant: 800,
+    ),
+  $cell-selected-text-color: #fff,
+);
+
+$progressBar-sample-theme: progress-linear-theme(
+  $track-color: rgba(181, 181, 181, 0.5),
+  $fill-color-default: orange,
+);
+
+%flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:host {
+  ::ng-deep {
+    .igx-sparkline {
+      margin-top: 20px;
+      margin-bottom: -10px;
+    }
+
+    .s-overlay {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      z-index: 10002;
+
+      &__inner {
+        @extend %flex-center;
+        flex-direction: column;
+        border-radius: rem(16px);
+        min-width: rem(340px);
+        overflow: hidden;
+        background: #fff;
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.16);
+      }
+
+      &__heading {
+        @extend %flex-center;
+        width: 100%;
+        text-transform: uppercase;
+        font-weight: bold;
+        margin-bottom: rem(16px);
+        margin-top: rem(24);
+        font-size: rem(28px);
+        height: rem(70px);
+        padding: 0 rem(24px);
+        letter-spacing: 2px;
+        border-bottom: 1px solid #ddd;
+
+        &--finish {
+          border-bottom: none;
+          margin-top: 0;
+          font-style: italic;
+          background-color: white;
+          background-image: linear-gradient(45deg, #222 25%, transparent 25%),
+            linear-gradient(-45deg, #222 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #222 75%),
+            linear-gradient(-45deg, transparent 75%, #222 75%);
+          background-size: 20px 20px;
+          background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+        }
+
+        > span {
+          padding: rem(8px);
+          background: #fff;
+          margin: 0 rem(8px);
+
+          > span {
+            margin: 0 rem(8px);
+          }
+        }
+      }
+
+      &__trophy {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        margin-bottom: rem(16px);
+
+        img {
+          width: 40px;
+        }
+
+        span {
+          position: absolute;
+          top: 2px;
+          color: #fff;
+          text-shadow: 0 0 8px #444;
+          font-weight: bold;
+        }
+      }
+
+      &__players {
+        @extend %flex-center;
+        padding: rem(24px);
+      }
+
+      &__player {
+        @extend %flex-center;
+        flex-direction: column;
+        margin: 0 rem(32px);
+        width: 120px;
+
+        igx-avatar {
+          margin-bottom: rem(16px);
+        }
+        &--winner {
+          order: 2;
+          igx-avatar {
+            border: 4px solid #fbb13c;
+          }
+        }
+        &--second {
+          order: 1;
+          igx-avatar {
+            border: 4px solid #bdbdbd;
+          }
+        }
+        &--third {
+          order: 3;
+          igx-avatar {
+            border: 4px solid #b47845;
+          }
+        }
+      }
+
+      &__player-name {
+        color: color($color: "primary", $variant: 800);
+        font-size: 18px;
+        margin: 0;
+        white-space: nowrap;
+      }
+    }
+
+    .s-overlay__player.s-overlay__player--winner {
+      margin-bottom: rem(48px);
+    }
+    width: 95%;
+  }
+}
+
+.grid__wrapper {
+  margin: 0 auto;
+  padding: 16px;
+}
+
+@media (max-width: 1000px) {
+  .grid__wrapper {
+    width: 98% !important;
+    margin: 0 auto;
+    padding-left: 1%;
+    padding-right: 1%;
+  }
+}
+
+@media (max-width: 720px) {
+  .grid__wrapper {
+    width: 720px !important;
+    margin: 0 3px;
+    padding-right: 5px;
+  }
+}
+
+.switch-sample__title {
+  margin: 0 rem(20px) 0 0;
+}
+
+.sample__header {
+  display: flex;
+  align-self: flex-start;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: rem(20px);
+}
+
+.switch-sample {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  width: 100%;
+  height: rem(50px);
+}
+
+.switch-sample__label {
+  margin: 0 rem(8) 0 0;
+}
+
+.athlete_name {
+  width: rem(100px);
+  margin: 0 rem(30px);
+}
+
+.athlete_name,
+.title {
+  @include ellipsis();
+}
+
+.cell__inner,
+.cell__inner_2 {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.cell__inner {
+  position: relative;
+  justify-content: space-between;
+}
+
+.gridSample__filter {
+  width: rem(200px);
+}
+
+.flag {
+  width: rem(24px);
+}
+
+.cup {
+  padding-left: 20px;
+}
+
+@media (max-width: rem(960px)) {
+  .grid__wrapper {
+    width: rem(960px);
+  }
+}
+
+.linear-bar-container {
+  margin: auto;
+}

package/igx-ts-legacy/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -0,0 +1,49 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  IgxAvatarModule,
+  IgxBadgeModule,
+  IgxGridModule,
+  IgxIconModule,
+  IgxInputGroupModule,
+  IgxProgressBarModule,
+  IgxSwitchModule
+} from '<%=igxPackage%>';
+import { IgxSparklineCoreModule, IgxSparklineModule } from 'igniteui-angular-charts';
+import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
+
+describe('<%=ClassName%>Component', () => {
+  let component: <%=ClassName%>Component;
+  let fixture: ComponentFixture<<%=ClassName%>Component>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [<%=ClassName%>Component],
+      imports: [
+        FormsModule,
+        BrowserAnimationsModule,
+        IgxGridModule,
+        IgxProgressBarModule,
+        IgxAvatarModule,
+        IgxBadgeModule,
+        IgxIconModule,
+        IgxSwitchModule,
+        IgxInputGroupModule,
+        IgxSparklineModule,
+        IgxSparklineCoreModule
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});