feat(theme): showcase custom theme

angular.json

@@ -42,7 +42,8 @@
             "aot": false,
             "stylePreprocessorOptions": {
               "includePaths": [
-                "node_modules"
+                "node_modules",
+                "dist"
               ]
             }
           },

src/app/app.component.ts

@@ -157,6 +157,11 @@ export class AppComponent implements OnInit {
             icon: 'horizontal_split',
             name: 'DropDown - Density'
         },
+        {
+            link: '/dotmatics',
+            icon: 'horizontal_split',
+            name: 'Dotmatics sample'
+        },
         {
             link: '/expansionPanel',
             icon: 'expand_more',

src/app/app.routes.ts

@@ -11,6 +11,7 @@ import { ExpansionPanelSampleComponent } from './expansion-panel/expansion-panel
 import { DatePickerSampleComponent } from './date-picker/date-picker.sample';
 import { DialogSampleComponent } from './dialog/dialog.sample';
 import { DragDropSampleComponent } from './drag-drop/drag-drop.sample';
+import { DotmaticsComponent } from "./dotmatics/dotmatics.component";
 import { MaskSampleComponent } from './mask/mask.sample';
 import { IconSampleComponent } from './icon/icon.sample';
 import { InputSampleComponent } from './input/input.sample';
@@ -232,6 +233,10 @@ export const appRoutes: Routes = [
         path: 'drag-drop',
         component: DragDropSampleComponent
     },
+    {
+        path: 'dotmatics',
+        component: DotmaticsComponent
+    },
     {
         path: 'icon',
         component: IconSampleComponent

src/app/calendar/calendar.sample.html

@@ -9,7 +9,7 @@ <h4 class="sample-title">Default Calendar</h4>
                     <button igxButton="raised" igxRipple (click)="select()">Select</button>
                     <button igxButton="flat" igxRipple (click)="deselect()">Deselect</button>
                     <br>
-                <button igxButton="raised" igxRipple (click)="showHide()">Hide days</button>
+                    <button igxButton="raised" igxRipple (click)="showHide()">Hide days</button>
                     <button igxButton="raised" igxRipple (click)="setMonthsViewNumber(monthsviewnumber)">Set months number</button>
                     <input type="number" #monthsviewnumber style="margin-right: 10px;"/>
                     <br>

src/app/dotmatics/dotmatics.component.html

@@ -0,0 +1,137 @@
+<span class="title">Buttons</span>
+<igx-switch  [(ngModel)]="isButtonDisabled">
+    <span igxLabel>Disable buttons</span>
+</igx-switch>
+<div class="buttons preview">
+    <button igxButton="raised" [disabled]="isButtonDisabled">Primary</button>
+
+    <button igxButton="outlined" [disabled]="isButtonDisabled">Default</button>
+
+    <button igxButton="flat" [disabled]="isButtonDisabled">Text</button>
+
+    <a href="/dotmatics" igxButton="flat" [disabled]="isButtonDisabled">Text</a>
+
+
+    <button igxButton="fab">
+        <igx-icon>menu</igx-icon>
+    </button>
+</div>
+
+
+<span class="title">Dropdown</span>
+<div class="preview">
+    <button class="dd-button" igxButton="raised" [igxToggleAction]="dropdown">Dropdown</button>
+    <igx-drop-down #dropdown>
+        <igx-drop-down-item *ngFor="let item of ddItems">
+            <span>{{ item.field }}</span>
+            <igx-icon *ngIf="item.icon" igxSuffix>{{item.icon}}</igx-icon>
+        </igx-drop-down-item>
+    </igx-drop-down>
+</div>
+
+
+<span class="title">Form controls</span>
+<igx-switch  [(ngModel)]="isInputDisabled">
+    <span igxLabel>Disable controls</span>
+</igx-switch>
+<form class="input-form preview">
+    <igx-input-group>
+        <igx-icon igxPrefix>face</igx-icon>
+        <label igxLabel for="file">Default input</label>
+        <input [disabled]="isInputDisabled" placeholder="Placeholder" igxInput id="file" name="file" type="text" />
+        <span igxSuffix>
+            <igx-icon>info</igx-icon>
+        </span>
+    </igx-input-group>
+
+    <igx-input-group>
+        <label igxLabel for="textarea">Default input</label>
+        <textarea [disabled]="isInputDisabled" placeholder="Placeholder" igxInput id="textarea" name="file"></textarea>
+    </igx-input-group>
+
+    <igx-select checked [disabled]="isInputDisabled">
+        <label igxLabel>Select</label>
+        <igx-select-item *ngFor="let item of items" [value]="item">
+            {{item}}
+        </igx-select-item>
+    </igx-select>
+
+    <igx-combo
+            [itemsMaxHeight]="250"
+            [data]="lData"
+            [displayKey]="'field'"
+            [valueKey]="'field'"
+            [disabled]="isInputDisabled"
+               placeholder="Location(s)">
+        <label igxLabel>Combo</label>
+    </igx-combo>
+
+    <div class="controls">
+        <igx-checkbox [disabled]="isInputDisabled">
+            <label igxLabel>Unchecked</label>
+        </igx-checkbox>
+
+        <igx-checkbox checked [disabled]="isInputDisabled">
+            <label igxLabel>Checked</label>
+        </igx-checkbox>
+
+        <igx-checkbox indeterminate [disabled]="isInputDisabled">
+            <label igxLabel>indeterminate</label>
+        </igx-checkbox>
+    </div>
+
+    <div class="controls">
+        <igx-radio [disabled]="isInputDisabled">
+            <label igxLabel>Unchecked</label>
+        </igx-radio>
+
+        <igx-radio checked [disabled]="isInputDisabled">
+            <label igxLabel>Checked</label>
+        </igx-radio>
+    </div>
+
+    <div class="controls">
+        <label igxLabel>Radio group</label>
+        <igx-radio-group>
+            <igx-radio [disabled]="isInputDisabled">Radio 1</igx-radio>
+            <igx-radio [disabled]="isInputDisabled">Radio 2</igx-radio>
+            <igx-radio [disabled]="isInputDisabled">Radio 3</igx-radio>
+        </igx-radio-group>
+    </div>
+</form>
+
+<span class="title">Form controls</span>
+<igx-switch  [(ngModel)]="isTabDisabled">
+    <span igxLabel>Disable controls</span>
+</igx-switch>
+<div class="preview">
+    <igx-tabs>
+        <igx-tab-item>
+            <igx-tab-header>
+                <igx-icon igxTabHeaderIcon>library_music</igx-icon>
+                <span igxTabHeaderLabel>Albums</span>
+            </igx-tab-header>
+            <igx-tab-content>
+                Albums
+            </igx-tab-content>
+        </igx-tab-item>
+        <igx-tab-item [disabled]="isTabDisabled">
+            <igx-tab-header>
+                <igx-icon igxTabHeaderIcon>favorite</igx-icon>
+                <span igxTabHeaderLabel>Favorite</span>
+            </igx-tab-header>
+            <igx-tab-content>
+                Favorite
+            </igx-tab-content>
+        </igx-tab-item>
+        <igx-tab-item>
+            <igx-tab-header>
+                <igx-icon igxTabHeaderIcon>info</igx-icon>
+                <span igxTabHeaderLabel>Details</span>
+            </igx-tab-header>
+            <igx-tab-content>
+                Details
+            </igx-tab-content>
+        </igx-tab-item>
+    </igx-tabs>
+</div>

src/app/dotmatics/dotmatics.component.scss

@@ -0,0 +1,48 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.preview {
+    width: 100%;
+    display: grid;
+    padding: 1rem;
+    background: hsla(var(--ig-gray-100));
+    border: 1px solid hsla(var(--ig-gray-200));
+    box-shadow: inset 0 0 0 1px hsla(var(--ig-gray-50));
+    border-radius: 6px;
+    margin-bottom: 1rem;
+}
+
+.buttons {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    gap: 1rem;
+    justify-items: center;
+    align-items: center;
+}
+
+.title {
+    font-weight: 600;
+    font-size: 18px;
+}
+
+igx-switch {
+    align-self: flex-start;
+}
+
+.input-form {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.controls {
+    display: flex;
+    gap: 16px;
+    padding-block: 16px;
+}
+
+.dd-button {
+    justify-self: self-start;
+}

src/app/dotmatics/dotmatics.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DotmaticsComponent } from './dotmatics.component';
+
+describe('DotmaticsComponent', () => {
+  let component: DotmaticsComponent;
+  let fixture: ComponentFixture<DotmaticsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DotmaticsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DotmaticsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dotmatics/dotmatics.component.ts

@@ -0,0 +1,125 @@
+import {Component, OnInit} from '@angular/core';
+import {
+    IgxAvatarComponent,
+    IgxButtonModule,
+    IgxCheckboxComponent,
+    IgxComboComponent,
+    IgxDropDownComponent,
+    IgxDropDownItemComponent,
+    IgxIconComponent,
+    IgxInputDirective,
+    IgxInputGroupComponent,
+    IgxLabelDirective,
+    IgxPrefixDirective,
+    IgxRadioComponent,
+    IgxRadioGroupDirective,
+    IgxSelectComponent,
+    IgxSelectItemComponent,
+    IgxSuffixDirective,
+    IgxSwitchComponent, IgxTabHeaderComponent,
+    IgxTabHeaderIconDirective,
+    IgxTabHeaderLabelDirective,
+    IgxTabItemComponent,
+    IgxTabsComponent,
+    IgxTabsModule,
+    IgxToggleActionDirective,
+    IgxToggleDirective
+} from "igniteui-angular";
+import {FormsModule} from "@angular/forms";
+import {NgForOf, NgIf} from "@angular/common";
+
+@Component({
+    selector: 'app-dotmatics',
+    standalone: true,
+    imports: [
+        IgxButtonModule,
+        IgxIconComponent,
+        IgxSwitchComponent,
+        FormsModule,
+        IgxInputGroupComponent,
+        IgxLabelDirective,
+        IgxInputDirective,
+        IgxPrefixDirective,
+        IgxSuffixDirective,
+        IgxSelectComponent,
+        NgForOf,
+        IgxComboComponent,
+        IgxCheckboxComponent,
+        IgxDropDownComponent,
+        IgxToggleDirective,
+        IgxDropDownItemComponent,
+        IgxToggleActionDirective,
+        IgxRadioComponent,
+        IgxRadioGroupDirective,
+        NgIf,
+        IgxSelectItemComponent,
+        IgxTabsModule,
+        IgxTabsComponent,
+        IgxTabItemComponent,
+        IgxTabHeaderIconDirective,
+        IgxTabHeaderLabelDirective,
+        IgxAvatarComponent,
+        IgxTabHeaderComponent,
+    ],
+    templateUrl: './dotmatics.component.html',
+    styleUrl: './dotmatics.component.scss'
+})
+export class DotmaticsComponent implements OnInit {
+    public isButtonDisabled = false;
+    public isInputDisabled = false;
+    public isTabDisabled = false;
+
+    public items: string[] = ['Orange', 'Apple', 'Banana', 'Mango'];
+
+    public lData: any[];
+
+    public division = {
+        'New England 01': ['Connecticut', 'Maine', 'Massachusetts'],
+        'New England 02': ['New Hampshire', 'Rhode Island', 'Vermont'],
+        // tslint:disable-next-line:object-literal-sort-keys
+        'Mid-Atlantic': ['New Jersey', 'New York', 'Pennsylvania'],
+        'East North Central 02': ['Michigan', 'Ohio', 'Wisconsin'],
+        'East North Central 01': ['Illinois', 'Indiana'],
+        'West North Central 01': ['Missouri', 'Nebraska', 'North Dakota', 'South Dakota'],
+        'West North Central 02': ['Iowa', 'Kansas', 'Minnesota'],
+        'South Atlantic 01': ['Delaware', 'Florida', 'Georgia', 'Maryland'],
+        'South Atlantic 02': ['North Carolina', 'South Carolina', 'Virginia',
+            'District of Columbia', 'West Virginia'],
+        'East South Central 01': ['Alabama', 'Kentucky'],
+        'East South Central 02': ['Mississippi', 'Tennessee'],
+        'West South Central': ['Arkansas', 'Louisiana', 'Oklahome', 'Texas'],
+        'Mountain': ['Arizona', 'Colorado', 'Idaho', 'Montana', 'Nevada', 'New Mexico', 'Utah', 'Wyoming'],
+        'Pacific 01': ['Alaska', 'California'],
+        'Pacific 02': ['Hawaii', 'Oregon', 'Washington']
+    };
+
+    public ddItems = [
+        {
+            field: 'Option 1'
+        },
+        {
+            field: 'Option 2',
+            icon: 'check'
+        },
+        {
+            field: 'Option 3'
+        }
+    ];
+
+    public localData: any[] = [];
+
+    public keys = Object.keys(this.division);
+
+    public ngOnInit() {
+        for (const key of this.keys) {
+            this.division[key].map((e) => {
+                this.localData.push({
+                    field: e,
+                    region: key.substring(0, key.length - 3)
+                });
+            });
+        }
+
+        this.lData = this.localData;
+    }
+}