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

package/igx-ts/custom-templates/login/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -1,69 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { ReactiveFormsModule } from '@angular/forms';
-import { RouterTestingModule } from '@angular/router/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
-import { IgxInputGroupModule, IgxIconModule, IgxButtonModule, IgxRippleModule } from '<%=igxPackage%>';
-
-const MAIL_GROUP_NAME = 'email';
-const PASSWORD_GROUP_NAME = 'password';
-const NEW_MAIL_GROUP_NAME = 'newEmail';
-const NEW_PASSWORD_GROUP_NAME = 'newPassword';
-const FIRST_NAME_GROUP_NAME = 'firstName';
-const LAST_NAME_GROUP_NAME = 'lastName';
-
-describe('<%=ClassName%>Component', () => {
-  let component: <%=ClassName%>Component;
-  let fixture: ComponentFixture<<%=ClassName%>Component>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        ReactiveFormsModule,
-        RouterTestingModule,
-        NoopAnimationsModule,
-        IgxInputGroupModule,
-        IgxButtonModule,
-        IgxIconModule,
-        IgxRippleModule,
-        <%=ClassName%>Component,
-      ],
-      providers: [
-        { provide: ExternalAuthService, useValue: extAuthSpy },
-        { provide: AuthenticationService, useValue: authSpy },
-        { provide: UserService, useValue: userServSpy },
-      ],
-    })
-      .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(<%=ClassName%>Component);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should not allow login until valid',  async () => {
-    expect(component.loginForm.valid).toBeFalsy();
-    component.loginForm.controls[MAIL_GROUP_NAME].setValue('test@example.com');
-    expect(component.loginForm.valid).toBeFalsy();
-    component.loginForm.controls[PASSWORD_GROUP_NAME].setValue('123456');
-    expect(component.loginForm.valid).toBeTruthy();
-  });
-
-  it('should not allow register until valid',  async () => {
-    expect(component.registrationForm.valid).toBeFalsy();
-    component.registrationForm.controls[NEW_MAIL_GROUP_NAME].setValue('test@example.com');
-    expect(component.registrationForm.valid).toBeFalsy();
-    component.registrationForm.controls[FIRST_NAME_GROUP_NAME].setValue('John');
-    expect(component.registrationForm.valid).toBeFalsy();
-    component.registrationForm.controls[LAST_NAME_GROUP_NAME].setValue('Doe');
-    expect(component.registrationForm.valid).toBeFalsy();
-    component.registrationForm.controls[NEW_PASSWORD_GROUP_NAME].setValue('123456');
-    expect(component.registrationForm.valid).toBeTruthy();
-  });
-});

package/igx-ts/custom-templates/login/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,82 +0,0 @@
-import { Component } from '@angular/core';
-import {
-  FormBuilder,
-  FormGroup,
-  Validators,
-  ReactiveFormsModule,
-} from '@angular/forms';
-import { NgIf } from '@angular/common';
-import {
-  IgxInputGroupComponent,
-  IgxPrefixDirective,
-  IgxIconComponent,
-  IgxLabelDirective,
-  IgxInputDirective,
-  IgxButtonDirective,
-  IgxRippleDirective,
-} from '<%=igxPackage%>';
-
-@Component({
-  selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
-  imports: [
-    ReactiveFormsModule,
-    IgxInputGroupComponent,
-    IgxPrefixDirective,
-    IgxIconComponent,
-    IgxLabelDirective,
-    IgxInputDirective,
-    IgxButtonDirective,
-    IgxRippleDirective,
-    NgIf
-  ]
-})
-export class <%=ClassName%>Component {
-  public loginForm: FormGroup;
-  public registrationForm: FormGroup;
-  public showLogin = true;
-  public showRegister = false;
-  public showSuccessLogin = false;
-  public showSuccessRegister = false;
-
-  constructor(fb: FormBuilder) {
-    this.loginForm = fb.group( {
-        email: ['', Validators.required],
-        password: ['', Validators.required]
-      });
-
-    this.registrationForm = fb.group( {
-        newEmail: ['', Validators.required],
-        newPassword: ['', Validators.required],
-        firstName: ['', Validators.required],
-        lastName: ['', Validators.required]
-    });
-  }
-
-  tryLogin() {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const loginInfo = this.loginForm.value;
-    // use loginInfo
-    this.showLogin = false;
-    this.showSuccessLogin = true;
-  }
-
-  showRegistrationForm() {
-    this.showLogin = false;
-    this.showRegister = true;
-  }
-  showLoginForm() {
-    this.showLogin = true;
-    this.showRegister = false;
-  }
-
-  tryRegister() {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const registerInfo = this.registrationForm.value;
-    // use registerInfo
-    this.showRegister = false;
-    this.showSuccessRegister = true;
-  }
-}

package/igx-ts/custom-templates/weather-forecast/files/src/app/__path__/__filePrefix__.component.html

@@ -1,34 +0,0 @@
-<div class="sample-wrapper">
-  <igx-card>
-    <igx-card-header>
-    <h3 class="ig-card-header__title">{{data.city}}</h3>
-    <h5 class="ig-card-header__subtitle">{{data.dateTime}}, {{data.today.description}}</h5>
-    </igx-card-header>
-    <igx-card-content>
-    <div class="weather__main" *ngIf=data>
-      <div class="weather__main-temp">
-      <div>{{data.today.tempMax}}°<sup>C</sup></div>
-      <div class="right"><igx-icon class="weather-icon--orange" family="fas" name="fa-sun"></igx-icon></div>
-      </div>
-      <div class="weather__main-hum">
-      <div><igx-icon class="weather-icon--blue" family="fas" name="fa-umbrella"></igx-icon>{{data.precipitation}} Precipitation </div>
-      <div class="right"><igx-icon class="weather-icon--skyblue" family="fas" name="fa-tint"></igx-icon>{{data.humidity}} Humidity </div>
-      </div>
-    </div>
-    <button igxButton igxRipple (click)="toggleDetails()">Forecast Details</button>
-    <igx-expansion-panel>
-      <igx-expansion-panel-body>
-      <div class="forecast__container" *ngIf=data>
-        <div *ngFor="let day of data.daysOfWeek" class="forecast__day">
-        <div>{{day.name}}</div>
-        <div class="right">
-          <igx-icon [ngClass]="'weather-icon--' + day.iconColor" family="fas" [name]="day.iconName" font-size="1em"></igx-icon>
-          {{day.tempMin}}°/{{day.tempMax}}°
-        </div>
-        </div>
-      </div>
-      </igx-expansion-panel-body>
-    </igx-expansion-panel>
-    </igx-card-content>
-  </igx-card>
-  </div>

package/igx-ts/custom-templates/weather-forecast/files/src/app/__path__/__filePrefix__.component.scss

@@ -1,59 +0,0 @@
-@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");
-
-.sample-wrapper {
-    width: 24rem;
-    margin-top: 20px;
-}
-
-%columnDisplay {
-    display: flex;
-    > * {
-        flex: 1 1 auto;
-    }
-
-    igx-icon {
-        font-size: 1.5em;
-        margin-right: 1rem;
-    }
-}
-.forecast__day {
-    @extend %columnDisplay;
-    padding-top: 1rem;
-}
-
-.right {
-    text-align: right;
-}
-
-igx-icon.weather-icon {
-    &--gray {
-        color: gray;
-    }
-    &--blue {
-        color: blue;
-    }
-    &--orange {
-        color: orange;
-    }
-    &--skyblue {
-        color: skyblue;
-    }
-}
-
-.weather__main-temp {
-    @extend %columnDisplay;
-    font-size: 4rem;
-    line-height: 4rem;
-    igx-icon {
-        font-size: 4rem;
-        width: 4rem;
-        height: 4rem;
-    }
-}
-
-.weather__main-hum {
-    @extend %columnDisplay;
-    padding: .7rem 0;
-}

package/igx-ts/custom-templates/weather-forecast/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -1,37 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
-import {
-    IgxButtonModule,
-    IgxCardModule,
-    IgxExpansionPanelModule,
-    IgxIconModule
-} from '<%=igxPackage%>';
-describe('<%=ClassName%>Component', () => {
-  let component: <%=ClassName%>Component;
-  let fixture: ComponentFixture<<%=ClassName%>Component>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        BrowserAnimationsModule,
-        IgxButtonModule,
-        IgxCardModule,
-        IgxExpansionPanelModule,
-        IgxIconModule,
-        <%=ClassName%>Component
-      ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(<%=ClassName%>Component);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/igx-ts/custom-templates/weather-forecast/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,42 +0,0 @@
-import { Component, ViewChild } from '@angular/core';
-import {
-  IgxExpansionPanelComponent,
-  IgxCardComponent,
-  IgxCardHeaderComponent,
-  IgxCardContentDirective,
-  IgxIconComponent,
-  IgxButtonDirective,
-  IgxRippleDirective,
-  IgxExpansionPanelBodyComponent,
-} from '<%=igxPackage%>';
-import { data as weatherData } from './weather-data';
-import { NgIf, NgFor, NgClass } from '@angular/common';
-
-@Component({
-  selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
-  imports: [
-    IgxCardComponent,
-    IgxCardHeaderComponent,
-    IgxCardContentDirective,
-    NgIf,
-    IgxIconComponent,
-    IgxButtonDirective,
-    IgxRippleDirective,
-    IgxExpansionPanelComponent,
-    IgxExpansionPanelBodyComponent,
-    NgFor,
-    NgClass
-  ]
-})
-export class <%=ClassName%>Component {
-  @ViewChild(IgxExpansionPanelComponent, { static: true })
-  public panel!: IgxExpansionPanelComponent;
-  public data = weatherData;
-
-  public toggleDetails() {
-    this.panel.toggle();
-  }
-}

package/igx-ts/date-picker/default/files/src/app/__path__/__filePrefix__.component.html

@@ -1,7 +0,0 @@
-<div igxLayout igxLayoutDir="columns" igxLayoutItemAlign="center">
-  <p>igx-date-picker component.</p>
-  <p>You can read more about configuring the igx-date-picker component in the
-  <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/date-picker/README.md" target="_blank">README</a> or the
-  <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/date-picker" target="_blank">official documentation</a>.</p>
-  <igx-date-picker [cancelButtonLabel]="'Close'"[todayButtonLabel]="'Today'" [value]="today"></igx-date-picker>
-</div>

package/igx-ts/date-picker/default/files/src/app/__path__/__filePrefix__.component.scss

@@ -1,3 +0,0 @@
-.igx-date-picker {
-  width: 200px;
-}

package/igx-ts/date-picker/default/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -1,26 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxDatePickerModule } from '<%=igxPackage%>';
-import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
-
-describe('<%=ClassName%>Component', () => {
-  let component: <%=ClassName%>Component;
-  let fixture: ComponentFixture<<%=ClassName%>Component>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-	  imports: [IgxDatePickerModule, NoopAnimationsModule, <%=ClassName%>Component]
-    })
-      .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(<%=ClassName%>Component);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/igx-ts/date-picker/default/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,14 +0,0 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-import { IgxLayoutDirective, IgxDatePickerComponent } from '<%=igxPackage%>';;
-
-@Component({
-  selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  encapsulation: ViewEncapsulation.Emulated,
-  standalone: true,
-  imports: [IgxLayoutDirective, IgxDatePickerComponent],
-})
-export class <%=ClassName%>Component {
-  public today: Date = new Date(Date.now());
-}

package/igx-ts/dialog/default/files/src/app/__path__/__filePrefix__.component.html

@@ -1,9 +0,0 @@
-<p>Standard dialog window template </p>
-<p>You can read more about configuring the igx-dialog component in the
-  <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/dialog/README.md" target="_blank">README</a> or the
-  <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/dialog" target="_blank">official documentation</a>.
-</p>
-<button igxButton="raised" (click)="dialog.open()">Show Dialog</button>
-<igx-dialog #dialog title="Confirmation" leftButtonLabel="Cancel" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK"
-  (rightButtonSelect)="dialogOKSelected($event)" message="Are you sure you want to delete the Microsoft_Annual_Report_2015.pdf?">
-</igx-dialog>

package/igx-ts/dialog/default/files/src/app/__path__/__filePrefix__.component.scss

@@ -1,6 +0,0 @@
-:host {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}

package/igx-ts/dialog/default/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -1,26 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxDialogModule } from '<%=igxPackage%>';
-import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
-
-describe('<%=ClassName%>Component', () => {
-  let component: <%=ClassName%>Component;
-  let fixture: ComponentFixture<<%=ClassName%>Component>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-	  imports: [IgxDialogModule, NoopAnimationsModule, <%=ClassName%>Component]
-    })
-      .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(<%=ClassName%>Component);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/igx-ts/dialog/default/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,15 +0,0 @@
-import { Component } from '@angular/core';
-import { IDialogEventArgs, IgxButtonDirective, IgxDialogComponent } from '<%=igxPackage%>';
-
-@Component({
-  selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
-  imports: [IgxButtonDirective, IgxDialogComponent]
-})
-export class <%=ClassName%>Component {
-  dialogOKSelected(args: IDialogEventArgs) {
-    args.dialog.close();
-  }
-}

package/igx-ts/dock-manager/default/files/src/app/__path__/__filePrefix__.component.html

@@ -1,16 +0,0 @@
-<igc-dockmanager [layout]=layout>
-  <div slot="content1" class="dockManagerContent">Content 1</div>
-  <div slot="content2" class="dockManagerContent">Content 2</div>
-  <div slot="content3" class="dockManagerContent">
-    <p>igx-dock-manager component.</p>
-    <p>You can read more about configuring the igx-dock-manager component in the 
-      <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/dock-manager" target="_blank">official documentation</a>.
-    </p>
-  </div>
-  <div slot="content4" class="dockManagerContent">Content 4</div>
-  <div slot="content5" class="dockManagerContent">Content 5</div>
-  <div slot="content6" class="dockManagerContent">Content 6</div>
-  <div slot="content7" class="dockManagerContent">Content 7</div>
-  <div slot="content8" class="dockManagerContent">Content 8</div>
-  <div slot="content9" class="dockManagerContent">Content 9</div>
-</igc-dockmanager>

package/igx-ts/dock-manager/default/files/src/app/__path__/__filePrefix__.component.scss

@@ -1,8 +0,0 @@
-.dockManagerContent {
-  padding: 0.5rem;
-}
-
-:host {
-  flex: 1 1 auto;
-  padding: 0 !important;
-}

package/igx-ts/dock-manager/default/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -1,31 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { defineCustomElements } from '<%=dockManagerPackage%>/loader';
-import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
-
-defineCustomElements();
-
-describe('<%=ClassName%>Component', () => {
-  let component: <%=ClassName%>Component;
-  let fixture: ComponentFixture<<%=ClassName%>Component>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-	  imports: [CommonModule, <%=ClassName%>Component],
-	  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-    })
-      .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(<%=ClassName%>Component);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-    expect(document.querySelector('igc-dockmanager')?.constructor).toBe(customElements.get('igc-dockmanager'));
-  });
-});

package/igx-ts/dock-manager/default/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,125 +0,0 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import {
-  IgcDockManagerLayout,
-  IgcDockManagerPaneType,
-  IgcSplitPaneOrientation
-} from '<%=dockManagerPackage%>';
-import { defineCustomElements } from '<%=dockManagerPackage%>/loader';
-
-defineCustomElements();
-
-@Component({
-  selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class <%=ClassName%>Component {
-  public layout: IgcDockManagerLayout = {
-    rootPane: {
-      type: IgcDockManagerPaneType.splitPane,
-      orientation: IgcSplitPaneOrientation.horizontal,
-      panes: [
-        {
-          type: IgcDockManagerPaneType.splitPane,
-          orientation: IgcSplitPaneOrientation.vertical,
-          panes: [
-            {
-              type: IgcDockManagerPaneType.contentPane,
-              contentId: 'content1',
-              header: 'Content Pane 1'
-            },
-            {
-              type: IgcDockManagerPaneType.contentPane,
-              contentId: 'content2',
-              header: 'Unpinned Pane 1',
-              isPinned: false
-            }
-          ]
-        },
-        {
-          type: IgcDockManagerPaneType.splitPane,
-          orientation: IgcSplitPaneOrientation.vertical,
-          size: 200,
-          panes: [
-            {
-              type: IgcDockManagerPaneType.documentHost,
-              size: 200,
-              rootPane: {
-                type: IgcDockManagerPaneType.splitPane,
-                orientation: IgcSplitPaneOrientation.horizontal,
-                panes: [
-                  {
-                    type: IgcDockManagerPaneType.tabGroupPane,
-                    panes: [
-                      {
-                        type: IgcDockManagerPaneType.contentPane,
-                        header: 'Document 1',
-                        contentId: 'content3'
-                      },
-                      {
-                        type: IgcDockManagerPaneType.contentPane,
-                        header: 'Document 2',
-                        contentId: 'content4'
-                      }
-                    ]
-                  }
-                ]
-              }
-            },
-            {
-              type: IgcDockManagerPaneType.contentPane,
-              contentId: 'content5',
-              header: 'Unpinned Pane 2',
-              isPinned: false
-            }
-          ]
-        },
-        {
-          type: IgcDockManagerPaneType.splitPane,
-          orientation: IgcSplitPaneOrientation.vertical,
-          panes: [
-            {
-              type: IgcDockManagerPaneType.tabGroupPane,
-              size: 200,
-              panes: [
-                {
-                  type: IgcDockManagerPaneType.contentPane,
-                  contentId: 'content6',
-                  header: 'Tab 1'
-                },
-                {
-                  type: IgcDockManagerPaneType.contentPane,
-                  contentId: 'content7',
-                  header: 'Tab 2'
-                }
-              ]
-            },
-            {
-              type: IgcDockManagerPaneType.contentPane,
-              contentId: 'content8',
-              header: 'Content Pane 2'
-            }
-          ]
-        }
-      ]
-    },
-    floatingPanes: [
-      {
-        type: IgcDockManagerPaneType.splitPane,
-        orientation: IgcSplitPaneOrientation.horizontal,
-        floatingHeight: 150,
-        floatingWidth: 250,
-        floatingLocation: { x: 300, y: 200 },
-        panes: [
-          {
-            type: IgcDockManagerPaneType.contentPane,
-            contentId: 'content9',
-            header: 'Floating Pane'
-          }
-        ]
-      }
-    ]
-  };
-}

package/igx-ts/dropdown/default/files/src/app/__path__/__filePrefix__.component.html

@@ -1,13 +0,0 @@
-<p>igx-dropdown component.</p>
-<p>You can read more about configuring the igx-dropdown component in the
-<a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/drop-down/README.md" target="_blank">README</a> or the
-<a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/drop-down" target="_blank">official documentation</a>.</p>
-
-<div class="sample-wrapper drop-down-wrapper">
-  <button #button igxButton="raised" igxRipple [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown">Toggle dropdown</button>
-  <igx-drop-down width="200px" #dropdown>
-    <igx-drop-down-item *ngFor="let item of items" [disabled]="!!item.disabled" [isHeader]="!!item.header">
-      {{ item.name }}
-    </igx-drop-down-item>
-  </igx-drop-down>
-</div>

package/igx-ts/dropdown/default/files/src/app/__path__/__filePrefix__.component.scss

@@ -1,14 +0,0 @@
-:host {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.drop-down-wrapper {
-  margin: 10px;
-  width: 200px;
-}
-
-button {
-  width: 100%;
-}