@igniteui/angular-templates 21.1.1491 → 21.1.1500-rc.0

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

@@ -1,184 +0,0 @@
-<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" [shape]="'square'" 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/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.component.scss

@@ -1,391 +0,0 @@
-@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 css-vars($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 css-vars($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/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -1,60 +0,0 @@
-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({
-      imports: [
-        FormsModule,
-        BrowserAnimationsModule,
-        IgxGridModule,
-        IgxAvatarModule,
-        IgxBadgeModule,
-        IgxButtonModule,
-        IgxIconModule,
-        IgxInputGroupModule,
-        IgxProgressBarModule,
-        IgxRippleModule,
-        IgxSwitchModule,
-        IgxToggleModule,
-        IgxCheckboxModule,
-        IgxSparklineModule,
-        IgxSparklineCoreModule,
-        <%=ClassName%>Component
-      ],
-      providers: [IgxExcelExporterService, IgxCsvExporterService]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(<%=ClassName%>Component);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});