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

package/igx-ts/projects/_base/files/src/app/error-routing/not-found/not-found.component.ts

@@ -1,7 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  template: '<h2>Error 404: Page not found</h2>',
-  standalone: true
-})
-export class PageNotFoundComponent { }

package/igx-ts/projects/_base/files/src/environments/environment.prod.ts

@@ -1,3 +0,0 @@
-export const environment = {
-  production: true
-};

package/igx-ts/projects/_base_with_home/files/src/app/home/home.component.html

@@ -1,9 +0,0 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<h1>{{title}}</h1>
-<img src="assets/responsive.gif" alt="Ignite UI CLI">
-
-<div id="linksContainer">
-    <h3 class="links"><a target="_blank" rel="noopener" href="https://github.com/IgniteUI/ignite-ui-cli">Ignite UI CLI </a></h3>
-    <h3 class="links"><a target="_blank" rel="noopener" href="https://www.infragistics.com/products/ignite-ui-angular">Component Demos</a></h3>
-    <h3 class="links"><a target="_blank" rel="noopener" href="https://github.com/IgniteUI/igniteui-angular-ui-kits">Sketch UI Kit</a></h3>
-</div>

package/igx-ts/projects/_base_with_home/files/src/app/home/home.component.scss

@@ -1,35 +0,0 @@
-a {
-  color: #731963;
-  text-decoration: none;
-}
-
-h1 {
-  font-size: 3rem;
-  font-weight: 600;
-  color: rgba(0, 0, 0, .74);
-}
-
-h3 {
-  font-size: 1.75rem;
-  font-weight: 600;
-}
-
-.links{
-  text-align: center;
-  padding: 0 35px;
-}
-
-#linksContainer {
-  flex-flow: row wrap;
-  display: flex;
-  justify-content: center;
-}
-
-:host{
-  width: 100%;
-  text-align:center;
-}
-
-img {
-  max-width:100%;
-}

package/igx-ts/projects/_base_with_home/files/src/app/home/home.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { RouterModule } from '@angular/router';
-import { HomeComponent } from './home.component';
-
-describe('HomeComponent', () => {
-  let component: HomeComponent;
-  let fixture: ComponentFixture<HomeComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [ HomeComponent, RouterModule.forRoot([]) ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(HomeComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/igx-ts/projects/_base_with_home/files/src/app/home/home.component.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-home',
-  standalone: true,
-  templateUrl: './home.component.html',
-  styleUrls: ['./home.component.scss']
-})
-export class HomeComponent  {
-  title = 'Welcome to Ignite UI for Angular!';
-}

package/igx-ts/projects/empty/files/src/app/app.component.html

@@ -1,3 +0,0 @@
-<div class="outer-wrapper">
-  <router-outlet></router-outlet>
-</div>

package/igx-ts/projects/empty/files/src/app/app.component.scss

@@ -1,5 +0,0 @@
-.outer-wrapper {
-  display: flex;
-  justify-content: center;
-  height: 100%;
-}

package/igx-ts/projects/empty/files/src/app/app.component.ts

@@ -1,13 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
-  standalone: true,
-  imports: [RouterOutlet]
-})
-export class AppComponent {
-  title = 'Home - IgniteUI for Angular';
-}

package/igx-ts/projects/empty/files/src/app/home/home.component.html

@@ -1,25 +0,0 @@
-<div class="content">
-  <h1 class="content__header content__subject">Welcome to Ignite UI for Angular!</h1>
-  <h4 class="content__subject">50+ Material-based UI Components</h4>
-  <img src="../../assets/indigo-design.svg" class="content__image">
-  <p class="ig-typography__subtitle-1">Discover more at</p>
-  <p>
-    <a href="https://www.infragistics.com/products/ignite-ui-angular" target="_blank" class="content__link ig-typography__body-2">
-      www.infragistics.com/products/ignite-ui-angular
-    </a>
-  </p>
-  <p>
-    <a href="https://www.infragistics.com/products/indigo-design" target="_blank" class="content__link ig-typography__body-2">
-      www.infragistics.com/products/indigo-design
-    </a>
-  </p>
-  <p class="ig-typography__subtitle-1">We are also on GitHub</p>
-  <p class="content__container--wide">
-    <a href="https://github.com/IgniteUI/igniteui-angular" target="_blank" class="content__link--github ig-typography__body-2">
-      <span class="content__link-image"></span>Ignite UI for Angular
-    </a>
-    <a href="https://github.com/IgniteUI/igniteui-cli" target="_blank" class="content__link--github ig-typography__body-2">
-      <span class="content__link-image"></span>Ignite UI CLI
-    </a>
-  </p>
-</div>

package/igx-ts/projects/empty/files/src/app/home/home.component.scss

@@ -1,67 +0,0 @@
-@use 'igniteui-angular/theming' as *;
-
-%content-display {
-  width: 100%;
-  display: flex;
-  text-align: center;
-  flex-flow: column nowrap;
-  justify-content: stretch;
-  align-items: center;
-  padding: 40px 24px 40px 24px;
-  overflow: inherit;
-}
-
-@include b(content) {
-  @extend %content-display;
-
-  p {
-    margin: 0px 0px 8px 0px;
-
-    &:nth-last-child(2) {
-      padding-top: 16px;
-    }
-  }
-
-  @include e(header) {
-    color: color($default-palette, "primary");
-  }
-
-  @include e(subject) {
-    margin-bottom: 16px;
-  }
-
-  @include e(container, $m: wide) {
-    display: flex;
-    flex-flow: row;
-    justify-content: center;
-  }
-
-  @include e(link, $m: github) {
-    position: relative;
-    display: flex;
-    flex-flow: row;
-    align-items: center;
-
-    &:not(:first-child) {
-      margin-left: 24px;
-    }
-
-    &::before {
-      position: relative;
-      display: block;
-      content: "";
-      min-width: 24px;
-      min-height: 24px;
-      background-image: url("../../assets/GitHub/github.svg");
-      background-size: 24px 24px;
-      background-repeat: no-repeat;
-      margin-right: 8px;
-    }
-  }
-
-  @include e(image) {
-    margin-bottom: 48px;
-    max-height: 480px;
-    max-width: 100%;
-  }
-}

package/igx-ts/projects/empty/files/src/app/home/home.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-home',
-  standalone: true,
-  templateUrl: './home.component.html',
-  styleUrls: ['./home.component.scss']
-})
-export class HomeComponent {
-}

package/igx-ts/projects/side-nav/files/src/app/app.component.html

@@ -1,14 +0,0 @@
-<div class="outer-wrapper" igxLayout>
-  <igx-nav-drawer #nav id="project-menu" [isOpen]="true" [enableGestures]="true" width="280px">
-    <ng-template igxDrawer>
-      <span igxDrawerItem [isHeader]="true">Views</span>
-      <span *ngFor="let route of topNavLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" [routerLink]="route.path">{{route.name}}</span>
-    </ng-template>
-  </igx-nav-drawer>
-  <div igxFlex igxLayout igxLayoutDir="columns">
-    <igx-navbar title="<%=name%>" actionButtonIcon="menu" (action)="nav.toggle()"></igx-navbar>
-    <div class="content" igxFlex>
-      <router-outlet></router-outlet>
-     </div>
-  </div>
-</div>

package/igx-ts/projects/side-nav/files/src/app/app.component.scss

@@ -1,30 +0,0 @@
-.outer-wrapper {
-  height: 100%;
-}
-
-.content {
-  width: 100%;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: center;
-  align-items: stretch;
-  overflow: auto;
-
-  > *:not(router-outlet) {
-    padding: 0 24px;
-  }
-
-  p {
-    margin: 15px;
-  }
-}
-
-@media only screen and (max-width: 1024px) {
-  .content {
-    justify-content: flex-start;
-
-    > *:not(router-outlet) {
-      padding: 0 15px;
-    }
-  }
-}

package/igx-ts/projects/side-nav/files/src/app/app.component.spec.ts

@@ -1,25 +0,0 @@
-import { TestBed, waitForAsync } from '@angular/core/testing';
-import { RouterModule } from '@angular/router';
-import { IgxLayoutModule, IgxNavbarModule, IgxNavigationDrawerModule, IgxRippleModule } from 'igniteui-angular';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        RouterModule.forRoot([]),
-        IgxLayoutModule,
-        IgxNavbarModule,
-        IgxNavigationDrawerModule,
-        IgxRippleModule,
-        AppComponent
-      ]
-    }).compileComponents();
-  }));
-
-  it('should create the app', waitForAsync(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  }));
-});

package/igx-ts/projects/side-nav/files/src/app/app.component.ts

@@ -1,67 +0,0 @@
-import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { NavigationStart, Router, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
-import {
-  IgxNavigationDrawerComponent,
-  IgxLayoutDirective,
-  IgxNavDrawerTemplateDirective,
-  IgxNavDrawerItemDirective,
-  IgxRippleDirective,
-  IgxFlexDirective,
-  IgxNavbarComponent,
-} from 'igniteui-angular';
-import { filter } from 'rxjs/operators';
-import { NgFor } from '@angular/common';
-import { routes } from './app.routes';
-
-@Component({
-  selector: 'app-root',
-  standalone: true,
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  imports: [
-    IgxLayoutDirective,
-    IgxNavigationDrawerComponent,
-    IgxNavDrawerTemplateDirective,
-    IgxNavDrawerItemDirective,
-    NgFor,
-    IgxRippleDirective,
-    RouterLinkActive,
-    RouterLink,
-    IgxFlexDirective,
-    IgxNavbarComponent,
-    RouterOutlet
-  ]
-})
-export class AppComponent implements OnInit {
-  public topNavLinks: {
-    path: string,
-    name: string
-  }[] = [];
-
-  @ViewChild(IgxNavigationDrawerComponent, { static: true })
-  public navdrawer!: IgxNavigationDrawerComponent;
-
-  constructor(private router: Router) {
-    for (const route of routes) {
-      if (route.path && route.data && route.path.indexOf('*') === -1) {
-        this.topNavLinks.push({
-          name: route.data['text'],
-          path: '/' + route.path
-        });
-      }
-    }
-  }
-
-  public ngOnInit(): void {
-    this.router.events.pipe(
-      filter((x): x is NavigationStart => x instanceof NavigationStart)
-    )
-      .subscribe((event: NavigationStart) => {
-        if (event.url !== '/' && !this.navdrawer.pin) {
-          // Close drawer when selecting a view on mobile (unpinned)
-          this.navdrawer.close();
-        }
-      });
-  }
-}

package/igx-ts/projects/side-nav-auth/files/src/app/app.component.html

@@ -1,16 +0,0 @@
-<div class="outer-wrapper" igxLayout>
-  <igx-nav-drawer #nav id="project-menu" [isOpen]="true" [enableGestures]="true" width="280px">
-    <ng-template igxDrawer>
-      <span igxDrawerItem [isHeader]="true">Views</span>
-      <span *ngFor="let route of topNavLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" [routerLink]="route.path">{{route.name}}</span>
-    </ng-template>
-  </igx-nav-drawer>
-  <div class="main" igxFlex igxLayout igxLayoutDir="columns">
-    <igx-navbar title="<%=name%>" actionButtonIcon="menu" (action)="nav.toggle()">
-      <app-login-bar></app-login-bar>
-  </igx-navbar>
-    <div class="content" igxFlex>
-      <router-outlet></router-outlet>
-    </div>
-  </div>
-</div>

package/igx-ts/projects/side-nav-auth/files/src/app/app.component.spec.ts

@@ -1,29 +0,0 @@
-import { TestBed, waitForAsync } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterModule } from '@angular/router';
-import { IgxLayoutModule, IgxNavbarModule, IgxNavigationDrawerModule, IgxRippleModule } from 'igniteui-angular';
-import { AppComponent } from './app.component';
-import { AuthenticationModule } from './authentication';
-
-describe('AppComponent', () => {
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        NoopAnimationsModule,
-        RouterModule.forRoot([]),
-        IgxNavigationDrawerModule,
-        AuthenticationModule,
-        IgxNavbarModule,
-        IgxLayoutModule,
-        IgxRippleModule,
-        AppComponent
-      ]
-    }).compileComponents();
-  }));
-
-  it('should create the app', waitForAsync(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  }));
-});

package/igx-ts/projects/side-nav-auth/files/src/app/app.component.ts

@@ -1,69 +0,0 @@
-import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { NavigationStart, Router, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
-import {
-  IgxNavigationDrawerComponent,
-  IgxLayoutDirective,
-  IgxNavDrawerTemplateDirective,
-  IgxNavDrawerItemDirective,
-  IgxRippleDirective,
-  IgxFlexDirective,
-  IgxNavbarComponent
-} from 'igniteui-angular';
-import { filter } from 'rxjs/operators';
-import { NgFor } from '@angular/common';
-
-import { routes } from './app.routes';
-import { LoginBarComponent } from './authentication/login-bar/login-bar.component';
-
-@Component({
-  selector: 'app-root',
-  standalone: true,
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  imports: [
-    LoginBarComponent,
-    IgxLayoutDirective,
-    IgxNavigationDrawerComponent,
-    IgxNavDrawerTemplateDirective,
-    IgxNavDrawerItemDirective,
-    NgFor,
-    IgxRippleDirective,
-    RouterLinkActive,
-    RouterLink,
-    IgxFlexDirective,
-    IgxNavbarComponent,
-    RouterOutlet]
-})
-export class AppComponent implements OnInit {
-  public topNavLinks: {
-    path: string,
-    name: string
-  }[] = [];
-
-  @ViewChild(IgxNavigationDrawerComponent, { static: true })
-  public navdrawer!: IgxNavigationDrawerComponent;
-
-  constructor(private router: Router) {
-    for (const route of routes) {
-      if (route.path && route.data && route.path.indexOf('*') === -1) {
-        this.topNavLinks.push({
-          name: route.data['text'],
-          path: '/' + route.path
-        });
-      }
-    }
-  }
-
-  public ngOnInit(): void {
-    this.router.events.pipe(
-      filter((x): x is NavigationStart => x instanceof NavigationStart)
-    )
-      .subscribe((event: NavigationStart) => {
-        if (event.url !== '/' && !this.navdrawer.pin) {
-          // Close drawer when selecting a view on mobile (unpinned)
-          this.navdrawer.close();
-        }
-      });
-  }
-}

package/igx-ts/projects/side-nav-auth/files/src/app/app.module.ts

@@ -1,48 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { BrowserModule, HammerModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import {
-  IgxLayoutModule, IgxNavbarModule, IgxNavigationDrawerModule, IgxRippleModule
-} from 'igniteui-angular';
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { AuthenticationModule, ExternalAuthService } from './authentication';
-import { HomeComponent } from './home/home.component';
-
-@NgModule({
-  declarations: [
-    AppComponent,
-    HomeComponent
-  ],
-  imports: [
-    FormsModule,
-    BrowserModule,
-    HammerModule,
-    BrowserAnimationsModule,
-    // NOTE: `AuthenticationModule` defines child routes, must be imported before root `AppRoutingModule`
-    AuthenticationModule,
-    AppRoutingModule,
-    IgxNavigationDrawerModule,
-    IgxNavbarModule,
-    IgxLayoutModule,
-    IgxRippleModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule {
-
-  constructor(private externalAuthService: ExternalAuthService) {
-    /**
-     * To register a social login, un-comment one or more of the following and add your service provider Client ID.
-     * See https://github.com/IgniteUI/igniteui-cli/wiki/Angular-Authentication-Project-Template#add-a-third-party-social-provider
-     */
-    // this.externalAuthService.addGoogle('<CLIENT_ID>');
-
-    // this.externalAuthService.addMicrosoft('<CLIENT_ID>');
-
-    // this.externalAuthService.addFacebook('<CLIENT_ID>');
-  }
-
-}

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/authentication-routing.module.ts

@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard } from './auth.guard';
-import { ProfileComponent } from './profile/profile.component';
-import { RedirectComponent } from './redirect/redirect.component';
-import { ExternalAuthProvider } from './services/external-auth-configs';
-import { ExternalAuthRedirectUrl } from './services/external-auth.service';
-
-const authRoutes: Routes = [
-  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
-  { path: ExternalAuthRedirectUrl.Google, component: RedirectComponent, data: { provider: ExternalAuthProvider.Google } },
-  { path: ExternalAuthRedirectUrl.Facebook, component: RedirectComponent, data: { provider: ExternalAuthProvider.Facebook } },
-  { path: ExternalAuthRedirectUrl.Microsoft, component: RedirectComponent, data: { provider: ExternalAuthProvider.Microsoft } }
-];
-
-@NgModule({
-  imports: [
-    RouterModule.forChild(authRoutes)
-  ],
-  exports: [
-    RouterModule
-  ]
-})
-export class AuthenticationRoutingModule { }

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/authentication.module.spec.ts

@@ -1,13 +0,0 @@
-import { AuthenticationModule } from './authentication.module';
-
-describe('AuthenticationModule', () => {
-  let authenticationModule: AuthenticationModule;
-
-  beforeEach(() => {
-    authenticationModule = new AuthenticationModule();
-  });
-
-  it('should create an instance', () => {
-    expect(authenticationModule).toBeTruthy();
-  });
-});

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/authentication.module.ts

@@ -1,67 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
-import { NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { AuthModule, OidcConfigService } from 'angular-auth-oidc-client';
-import {
-  IgxAvatarModule,
-  IgxButtonModule,
-  IgxDialogModule,
-  IgxDropDownModule,
-  IgxIconModule,
-  IgxInputGroupModule,
-  IgxRippleModule,
-  IgxToggleModule
-} from 'igniteui-angular';
-import { AuthGuard } from './auth.guard';
-import { AuthenticationRoutingModule } from './authentication-routing.module';
-import { LoginBarComponent } from './login-bar/login-bar.component';
-import { LoginDialogComponent } from './login-dialog/login-dialog.component';
-import { LoginComponent } from './login/login.component';
-import { ProfileComponent } from './profile/profile.component';
-import { RedirectComponent } from './redirect/redirect.component';
-import { RegisterComponent } from './register/register.component';
-import { BackendProvider } from './services/fake-backend.service';
-import { JwtInterceptor } from './services/jwt.interceptor';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    HttpClientModule,
-    ReactiveFormsModule,
-    AuthModule.forRoot(),
-    AuthenticationRoutingModule,
-    IgxAvatarModule,
-    IgxButtonModule,
-    IgxDialogModule,
-    IgxDropDownModule,
-    IgxIconModule,
-    IgxInputGroupModule,
-    IgxRippleModule,
-    IgxToggleModule
-  ],
-  declarations: [
-    LoginBarComponent,
-    LoginComponent,
-    LoginDialogComponent,
-    ProfileComponent,
-    RedirectComponent,
-    RegisterComponent
-  ],
-  providers: [
-    AuthGuard,
-    OidcConfigService,
-    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
-    // TODO: DELETE THIS BEFORE PRODUCTION!
-    BackendProvider
-  ],
-  exports: [
-    LoginBarComponent,
-    LoginComponent,
-    RedirectComponent,
-    RegisterComponent,
-    LoginDialogComponent,
-    ProfileComponent
-  ]
-})
-export class AuthenticationModule { }

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/login/login.component.html

@@ -1,29 +0,0 @@
-<form id="loginForm" [formGroup]="loginForm" (ngSubmit)="tryLogin()">
-  <igx-input-group>
-    <igx-prefix>
-      <igx-icon>account_circle</igx-icon>
-    </igx-prefix>
-    <label igxLabel for="email">Email</label>
-    <input igxInput id="loginEmail" name="email" formControlName="email" type="text" />
-  </igx-input-group>
-  <igx-input-group>
-    <igx-prefix>
-      <igx-icon>lock</igx-icon>
-    </igx-prefix>
-    <input igxInput id="loginPassword" name="password" type="password" formControlName="password" />
-    <label igxLabel for="password">Password</label>
-  </igx-input-group>
-
-  <div class="button-wrapper">
-    <button igxButton="raised" type="submit" igxRipple [disabled]="!loginForm.valid">LOG IN</button>
-    <a id="register" (click)="showRegistrationForm()">Create new account?</a>
-  </div>
-  <div class="social-login" *ngIf="authService.hasProvider()">
-    <button type="button" *ngIf="authService.hasProvider(providers.Facebook)" class="facebook" igxButton="raised"
-      (click)="signUpFb()">Sign Up Facebook</button>
-    <button type="button" *ngIf="authService.hasProvider(providers.Google)" class="google" igxButton="raised"
-      (click)="signUpG()">Sign Up Google</button>
-    <button type="button" *ngIf="authService.hasProvider(providers.Microsoft)" class="microsoft" igxButton="raised"
-      (click)="signUpMS()">Sign Up Microsoft</button>
-  </div>
-</form>