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

package/igx-ts-legacy/custom-templates/awesome-grid/index.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxGridAwesomeTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.id = "awesome-grid";
+        this.projectType = "igx-ts";
+        this.listInComponentTemplates = false;
+        this.listInCustomTemplates = true;
+        this.name = "Awesome Grid";
+        this.description = "Awesome IgxGrid";
+        this.dependencies = [
+            { import: "IgxGridModule", from: "<%=igxPackage%>" },
+            {
+                import: [
+                    "IgxProgressBarModule",
+                    "IgxIconModule",
+                    "IgxAvatarModule",
+                    "IgxBadgeModule",
+                    "IgxSwitchModule",
+                    "IgxInputGroupModule",
+                    "IgxButtonModule"
+                ],
+                from: "<%=igxPackage%>"
+            },
+            {
+                import: [
+                    "IgxSparklineModule",
+                    "IgxSparklineCoreModule"
+                ],
+                from: "igniteui-angular-charts"
+            },
+            { import: "FormsModule", from: "@angular/forms" }
+        ];
+        this.packages = ["igniteui-angular-core@~17.0.0", "igniteui-angular-charts@~17.0.0"];
+    }
+}
+module.exports = new IgxGridAwesomeTemplate();

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

@@ -0,0 +1,184 @@
+<div class="grid__wrapper">
+  <igx-grid #grid1 igxPreventDocumentScroll id="grid1" [data]="localData" height="430px" width="100%"
+    [rowSelection]="selectionMode" displayDensity="cosy" rowHeight="50" [allowFiltering]="true" [moving]="true">
+    <igx-grid-toolbar>
+      <igx-grid-toolbar-title>
+        <div class="crm-toolbar-template">
+          <div class="crm-sample-toolbar__title">
+            <span class="logo-propeller">
+              <img src="assets/images/propeller-logo.svg" class="animated-fan" />
+            </span>
+            <span class="crm-sample-toolbar__ellipsis">Business Propeller</span>
+          </div>
+          <div class="sample-flex-container">
+            <igx-input-group type="search" class="searchInputGroup">
+              <igx-prefix>
+                <igx-icon class="prefixIcon" *ngIf="searchText.length === 0">search</igx-icon>
+                <igx-icon class="prefixIcon" *ngIf="searchText.length > 0" (click)="clearSearch()">clear</igx-icon>
+              </igx-prefix>
+
+              <input #search1 id="search1" class="searchInput" igxInput placeholder="Search" [(ngModel)]="searchText"
+                (ngModelChange)="grid1.findNext(searchText, caseSensitive)" (keydown)="searchKeyDown($event)" />
+
+              <igx-suffix *ngIf="searchText.length > 0">
+                <div class="resultsText" *ngIf="grid1.lastSearchInfo">
+                  <span *ngIf="grid1.lastSearchInfo.matchInfoCache.length > 0">
+                    {{ grid1.lastSearchInfo.activeMatchIndex + 1 }} of {{
+                    grid1.lastSearchInfo.matchInfoCache.length }} results
+                  </span>
+                  <span *ngIf="grid1.lastSearchInfo.matchInfoCache.length === 0">
+                    No results
+                  </span>
+                </div>
+                <div class="caseSensitiveButton">
+                  <button igxButton="icon" igxRipple [igxRippleCentered]="true" (click)="updateSearch()"
+                    [igxButtonBackground]="caseSensitive? 'rgb(73, 180, 254)' : 'transparent'">
+                    <igx-icon class="caseSensitiveIcon" family="material">text_fields</igx-icon>
+                  </button>
+                </div>
+                <div class="searchButtons">
+                  <button igxButton="icon" igxRipple [igxRippleCentered]="true"
+                    (click)="grid1.findPrev(searchText, caseSensitive)">
+                    <igx-icon family="material">navigate_before</igx-icon>
+                  </button>
+                  <button igxButton="icon" igxRipple [igxRippleCentered]="true"
+                    (click)="grid1.findNext(searchText, caseSensitive)">
+                    <igx-icon family="material">navigate_next</igx-icon>
+                  </button>
+                </div>
+              </igx-suffix>
+            </igx-input-group>
+          </div>
+        </div>
+      </igx-grid-toolbar-title>
+      <igx-grid-toolbar-actions>
+        <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
+        <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
+        <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
+      </igx-grid-toolbar-actions>
+    </igx-grid-toolbar>
+
+    <igx-column field="id" header="Customer Number" width="172" [pinned]="true" [hasSummary]="false" [resizable]="true"
+      [hidden]="true">
+    </igx-column>
+
+    <igx-column field="avatar" header="Photo" width="88" [pinned]="true" [resizable]="true" [searchable]="false"
+      [filterable]="false">
+      <ng-template igxCell let-cell="cell">
+        <div class="cell__inner avatar-cell">
+          <igx-avatar [src]="cell.row.data.avatar" [roundShape]="true" size="small"></igx-avatar>
+        </div>
+      </ng-template>
+    </igx-column>
+
+    <igx-column field="name" header="Name" [sortable]="true" width="149" [pinned]="true" [resizable]="true"
+      [hasSummary]="false">
+    </igx-column>
+
+    <igx-column field="deals_total" header="Total Deals" [sortable]="true" width="130" dataType="number"
+      [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
+    </igx-column>
+
+    <igx-column field="deals_won" header="Won Deals" [sortable]="true" width="130" dataType="number"
+      [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
+    </igx-column>
+
+    <igx-column field="ratio" header="Ratio" width="150" [resizable]="true" [filterable]="false">
+      <ng-template igxCell let-val>
+        <div style="width: 100%">
+          <igx-linear-bar [textVisibility]="false" class="cell__inner_2" [value]="val" [animate]="false">
+          </igx-linear-bar>
+        </div>
+      </ng-template>
+    </igx-column>
+
+    <igx-column field="Deals" header="Ratio per month" width="160px" [filterable]="false">
+      <ng-template igxCell let-val>
+        <igx-sparkline height="40px" width="160px" [dataSource]="val" valueMemberPath="Deals"
+          [displayType]="displayType.Column" brush="rgb(21, 190, 6)" negativeBrush="rgb(211, 17, 3)">
+        </igx-sparkline>
+      </ng-template>
+    </igx-column>
+
+    <igx-column field="deals_lost" header="Lost Deals" [sortable]="true" width="130" dataType="number"
+      [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
+    </igx-column>
+
+    <igx-column field="deals_pending" header="Pending Deals" [sortable]="true" width="130" dataType="number"
+      [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
+    </igx-column>
+
+    <igx-column field="position" header="Position" width="200" [resizable]="true">
+    </igx-column>
+
+    <igx-column field="company" header="Company" [sortable]="true" width="130" [hasSummary]="false" [resizable]="true"
+     >
+    </igx-column>
+
+    <igx-column field="email" header="Email" width="240" [resizable]="true" [filterable]="false">
+    </igx-column>
+
+    <igx-column field="work_phone" header="Work Phone" width="160" [resizable]="true"
+      [filterable]="false">
+    </igx-column>
+
+    <igx-column field="mobile_phone" header="Mobile Phone" width="160" [resizable]="true"
+      [filterable]="false">
+    </igx-column>
+
+    <igx-column field="fax" header="Fax" width="160" [resizable]="true" [filterable]="false">
+    </igx-column>
+
+    <igx-column field="tags" header="Tags" width="160" [resizable]="true">
+    </igx-column>
+
+    <igx-column field="street" header="Street" width="160" [resizable]="true" [filterable]="false">
+    </igx-column>
+
+    <igx-column field="city" header="City" width="160" [resizable]="true">
+    </igx-column>
+
+    <igx-column field="post_code" header="Post Code" width="100" [resizable]="true"
+      [filterable]="false">
+    </igx-column>
+
+    <igx-column field="state" header="State" width="105" [resizable]="true">
+    </igx-column>
+
+    <igx-column field="country" header="Country" [sortable]="true" width="160" [resizable]="true">
+    </igx-column>
+
+    <igx-column field="created_on" header="Created On" dataType="date" [formatter]="formatDate" [sortable]="true"
+      width="150" [resizable]="true" [filterable]="false">
+    </igx-column>
+
+    <igx-column field="referred_by" header="Referred By" width="160" [resizable]="true">
+    </igx-column>
+
+    <igx-column field="birthday" header="Birthday" width="160" dataType="date" [formatter]="formatDate"
+      [hasSummary]="false" [summaries]="soonSummary" [resizable]="true" [filterable]="false">
+    </igx-column>
+
+    <igx-column field="last_activity" header="Last Activity" width="160" dataType="date" [formatter]="formatDate"
+      [hasSummary]="false" [summaries]="earliestSummary" [resizable]="true" [filterable]="false">
+    </igx-column>
+
+    <igx-column field="next_activity" header="Next Activity" width="160" dataType="date" [formatter]="formatDate"
+      [hasSummary]="false" [summaries]="earliestSummary" [resizable]="true" [filterable]="false">
+    </igx-column>
+
+    <igx-column field="estimated_sales" header="Possible Sales ($)" [sortable]="true" width="150" dataType="number"
+      [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
+      <ng-template igxCell let-cell="cell" let-val>
+        {{ formatValue(val) }}
+      </ng-template>
+    </igx-column>
+
+    <igx-column field="actual_sales" header="Actual Sales ($)" [sortable]="true" width="150" dataType="number"
+      [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
+      <ng-template igxCell let-val>
+        {{ formatValue(val) }}
+      </ng-template>
+    </igx-column>
+  </igx-grid>
+</div>

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

@@ -0,0 +1,391 @@
+@use '<%=igxPackage%>/theming' as *;
+@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fontawesome.css");
+@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-regular.css");
+@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css");
+:host ::ng-deep {
+
+    $crm-grid-palette: palette(
+        $primary: #09f,
+        $secondary: #4db8ff,
+        $surface: #333
+    );
+    @include theme($crm-grid-palette);
+
+    $checkbox-theme: checkbox-theme(
+        $fill-color: color($crm-grid-palette, "secondary", 500),
+        $tick-color: black
+    );
+
+    $summary-theme: grid-summary-theme(
+        $background-color: #f0f8fe,
+        $result-color: color($crm-grid-palette, "primary", 500)
+    );
+
+    $search-theme: input-group-theme(
+        $search-background: color($crm-grid-palette, "primary", 600),
+        $idle-text-color: color($crm-grid-palette, "primary", 100),
+        $filled-text-color: color($crm-grid-palette, "gray", 600),
+        $focused-text-color: color($crm-grid-palette, "gray", 600)
+    );
+
+    $crm-grid-theme: grid-theme(
+        $header-background: #f0f8fe,
+        $header-border-color: #dde5eb
+    );
+
+    $crm-grid-toolbar: grid-toolbar-theme(
+        $background-color: color($crm-grid-palette, "primary", 500)
+    );
+
+    $crm-grid-toolbar-button: button-theme(
+        $background: color($crm-grid-palette, "primary", 800),
+        $hover-background: color($crm-grid-palette, "primary", 900),
+        $focus-foreground: #fff
+    );
+
+    $crm-grid-search-button: button-theme(
+        $background: transparent,
+        $focus-background: color($crm-grid-palette, "gray", 200),
+        $hover-background: color($crm-grid-palette, "gray", 200)
+    );
+
+    $crm-input-drop-down: input-group-theme(
+        $placeholder-color: color($crm-grid-palette, "gray", 500),
+        $idle-text-color: color($crm-grid-palette, "gray", 900)
+    );
+
+    @include grid-toolbar($crm-grid-toolbar);
+
+    @include grid($crm-grid-theme);
+
+    @include grid-summary($summary-theme);
+
+    @include input-group($search-theme);
+
+    @include grid-toolbar($crm-grid-toolbar);
+
+    .igx-drop-down__list {
+        @include input-group($crm-input-drop-down)
+    }
+
+    .igx-grid__summaries-patch {
+        background: #f0f8fe;
+    }
+
+    .grid__wrapper {
+        width: inherit;
+        position: relative;
+        height: 100%;
+        margin: 1px;
+        padding: 1px;
+        background: transparent;
+    }
+
+    .avatar-cell {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+    }
+
+    // grid caption styling
+
+    .crm-toolbar-template {
+        justify-content: space-between;
+        display: flex;
+        flex: 1 0 0%;
+        align-items: center;
+        padding-right: rem(24px);
+        border-radius: 2px;
+
+        & span {
+            margin-right: auto;
+        }
+
+        .igx-button--flat {
+            flex-wrap: nowrap;
+            white-space: nowrap;
+        }
+
+        .igx-button--icon {
+            border-radius: 0;
+        }
+
+        .logo-propeller {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 10px;
+        }
+    }
+
+    .igx-grid-toolbar__button-space {
+        .igx-icon {
+            font-size: 1rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+
+    .sample-flex-container {
+        display: flex;
+        align-self: center;
+        justify-content: flex-end;
+        width: 500px;
+    }
+
+    .crm-sample-toolbar__title {
+        margin-right: rem(16px);
+        display: flex;
+        align-items: center;
+        justify-self: flex-start;
+        width: 50%;
+    }
+
+    .crm-sample-toolbar__ellipsis {
+        @include ellipsis();
+        opacity: 0;
+        animation: slide-fade 1.25s .25s ease-out forwards;
+    }
+
+    .igx-grid-toolbar__custom-content {
+        flex: 1 0 0%;
+   }
+
+    igx-grid-toolbar-actions {
+      min-width: 350px;
+    }
+
+    .igx-grid-toolbar__actions {
+        @include button($crm-grid-toolbar-button);
+
+        .igx-button--outlined {
+            margin-left: 0.5rem;
+            border: none;
+        }
+    }
+    .igx-input-group--search{
+        width: 100%;
+    }
+    .igx-input-group--search .igx-input-group__bundle {
+        height: rem(36px);
+        width: 100%;
+        overflow: hidden;
+        background-color: color($crm-grid-palette, "primary", 800);
+
+        .igx-input-group__bundle-main {
+            padding-top: 0.6rem;
+            height: 36px;
+        }
+
+        @include button($crm-grid-search-button);
+    }
+
+    .igx-input-group--search .igx-input-group__bundle,
+    .igx-input-group--search .igx-input-group__bundle:hover {
+        box-shadow: none;
+    }
+
+    .sample-flex-container {
+        .igx-input-group,
+        .igx-input-group--focused {
+            .igx-input-group__bundle {
+                transition: background 500ms ease-in-out;
+            }
+
+            font-size: 13px;
+            overflow: hidden;
+
+            igx-icon {
+                font-size: 1rem;
+                width: 1rem;
+                height: 1rem;
+                color: color($crm-grid-palette, "primary", 200);
+            }
+        }
+
+        .igx-input-group {
+            igx-icon {
+                color: white;
+            }
+        }
+
+        .igx-input-group__textarea,
+        .igx-input-group__input {
+            color: color($crm-grid-palette, "primary", 100);
+        }
+
+        .igx-input-group__input {
+            &::placeholder {
+                color: white;
+                opacity: 1;
+            }
+        }
+
+        .igx-input-group {
+            &:hover,
+            &:focus,
+            &.igx-input-group--focused {
+                igx-icon {
+                    color: color($crm-grid-palette, 'gray', 600);
+                }
+
+                .igx-input-group__bundle {
+                    background: #fff;
+                    color: color($crm-grid-palette, 'gray', 600);
+                }
+
+                .igx-input-group__input {
+                    &::placeholder {
+                        color: color($crm-grid-palette, 'gray', 600);
+                        opacity: 1;
+                    }
+                }
+
+                .igx-input-group__textarea,
+                .igx-input-group__input {
+                    color: color($crm-grid-palette, 'gray', 600);
+                }
+
+                .igx-button--icon {
+                    &:focus,
+                    &:active {
+                        color: color($crm-grid-palette, 'gray', 600);
+                    }
+                }
+            }
+        }
+
+        .igx-button--icon {
+            &:focus,
+            &:active {
+                color: color($crm-grid-palette, "primary", 100);
+                background: transparent;
+            }
+        }
+    }
+
+    .igx-grid-summary__item {
+        font-size: 0.8rem;
+    }
+
+    .operationsContainer {
+        display: flex;
+
+        .igx-button--flat {
+            -webkit-tap-highlight-color: transparent;
+        }
+    }
+
+    .caseSensitiveButton {
+        margin-left: 8px;
+    }
+
+    .igx-input-group--search .igx-input-group__bundle .igx-button--icon {
+        border-radius: 0;
+    }
+
+    .caseSensitiveIcon {
+        width: 1.25rem;
+        height: 1.25rem;
+        font-size: 1.25rem;
+    }
+
+    .searchButtons {
+        margin-left: 4px;
+
+    }
+
+    //resize handle
+
+    .igx-grid__th-resize-line {
+        background: color($crm-grid-palette, "secondary", 500);
+    }
+
+
+    .toggle-content {
+        display: flex;
+        width: 240px;
+        height: 300px;
+        position: absolute;
+        z-index: 3;
+        background-color: white;
+        overflow: auto;
+    }
+
+    .toggle-section {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        font-size: 0.8em;
+    }
+
+    .dd-title {
+        color: color($crm-grid-palette, "primary", 600);
+        margin: 0;
+        padding: 16px;
+        font-size: 14px;
+    }
+
+    .dd-list {
+        list-style-type: none;
+    }
+
+    .dd-list__item {
+        display: flex;
+        align-items: center;
+        padding: 16px;
+
+        ::ng-deep {
+            @include checkbox($checkbox-theme);
+        }
+
+        &:hover {
+            background: lighten(color($crm-grid-palette, "primary", 100), 10);
+        }
+    }
+
+    .pin-icon {
+        font-size: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 1rem;
+        height: 1rem;
+    }
+
+    .igx-grid-toolbar__title {
+        max-width: 68ch;
+    }
+}
+
+
+.animated-fan {
+    width: 28px;
+    height: 28px;
+    animation: spin-fade 1.5s cubic-bezier(0.21, 1.07, 0.99, 1) forwards;
+}
+
+@keyframes spin-fade {
+    0% {
+        opacity: 0;
+        transform: rotate(0);
+    }
+
+    100% {
+        opacity: 1;
+        transform: rotate(270deg);
+    }
+}
+
+@keyframes slide-fade {
+    0% {
+        transform: translateX(-5%);
+    }
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+
+}

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

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