feat(color-picker): add samples

src/app/data-entries/color-picker/alpha/color-picker-alpha.component.html

@@ -0,0 +1,3 @@
+<div class="sample-container">
+    <igc-color-picker #colorPicker label="Pick a color" show-alpha value="rgba(25, 118, 210, 0.5)"></igc-color-picker>
+</div>

src/app/data-entries/color-picker/alpha/color-picker-alpha.component.scss

@@ -0,0 +1,13 @@
+.sample-container {
+    --ig-size: 2;
+
+    display: flex;
+    justify-content: center;
+    padding-block-start: 0.5rem;
+}
+
+igc-color-picker::part(picker) {
+    --picker-elevation: var(--ig-elevation-4);
+
+    margin-top: 0.5rem;
+}

src/app/data-entries/color-picker/alpha/color-picker-alpha.component.ts

@@ -0,0 +1,21 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { defineComponents, IgcColorPickerComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcColorPickerComponent);
+
+@Component({
+    selector: 'app-color-picker-alpha',
+    styleUrls: ['./color-picker-alpha.component.scss'],
+    templateUrl: './color-picker-alpha.component.html',
+    imports: [],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+
+export class ColorPickerAlphaComponent implements AfterViewInit {
+    @ViewChild('colorPicker', { static: true })
+    colorPicker!: ElementRef<IgcColorPickerComponent>;
+
+    ngAfterViewInit() {
+        this.colorPicker.nativeElement.toggle();
+    }
+}

src/app/data-entries/color-picker/format/color-picker-format.component.html

@@ -0,0 +1,3 @@
+<div class="sample-container">
+    <igc-color-picker #colorPicker format="rgb" label="Pick a color"></igc-color-picker>
+</div>

src/app/data-entries/color-picker/format/color-picker-format.component.scss

@@ -0,0 +1,13 @@
+.sample-container {
+    --ig-size: 2;
+
+    display: flex;
+    justify-content: center;
+    padding-block-start: 0.5rem;
+}
+
+igc-color-picker::part(picker) {
+    --picker-elevation: var(--ig-elevation-4);
+
+    margin-top: 0.5rem;
+}

src/app/data-entries/color-picker/format/color-picker-format.component.ts

@@ -0,0 +1,21 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { defineComponents, IgcColorPickerComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcColorPickerComponent);
+
+@Component({
+    selector: 'app-color-picker-format',
+    styleUrls: ['./color-picker-format.component.scss'],
+    templateUrl: './color-picker-format.component.html',
+    imports: [],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+
+export class ColorPickerFormatComponent implements AfterViewInit {
+    @ViewChild('colorPicker', { static: true })
+    colorPicker!: ElementRef<IgcColorPickerComponent>;
+
+    ngAfterViewInit() {
+        this.colorPicker.nativeElement.toggle();
+    } 
+}

src/app/data-entries/color-picker/input-sizes/color-picker-input-sizes.component.html

@@ -0,0 +1,14 @@
+<div class="sample-container">
+    <div>
+        <span>Small</span>
+        <igc-color-picker #colorPicker class="small-picker" mode="input" label="Pick a color"></igc-color-picker>
+    </div>
+    <div>
+        <span>Medium</span>
+        <igc-color-picker class="medium-picker" mode="input" label="Pick a color"></igc-color-picker>
+    </div>
+    <div>
+        <span>Large</span>
+        <igc-color-picker class="large-picker" mode="input" label="Pick a color"></igc-color-picker>
+    </div>
+</div>

src/app/data-entries/color-picker/input-sizes/color-picker-input-sizes.component.scss

@@ -0,0 +1,40 @@
+.small-picker {
+    --ig-size: var(--ig-size-small);
+}
+
+.medium-picker {
+    --ig-size: var(--ig-size-medium);
+}
+
+.large-picker {
+    --ig-size: var(--ig-size-large);
+}
+
+.sample-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 2rem;
+    padding-block-start: 0.5rem;
+    font-family: "Aktiv Grotesk", sans-serif;
+}
+
+span {
+    display: block;
+    text-align: center;
+    margin-block-end: 1rem;
+    color: var(--ig-gray-600);
+}
+
+igc-color-picker::part(picker) {
+    --picker-elevation: var(--ig-elevation-4);
+
+    margin-top: 0.5rem;
+}
+
+@media (width < 450px) {
+    .sample-container {
+        flex-direction: column;
+        align-items: center;
+    }
+}

src/app/data-entries/color-picker/input-sizes/color-picker-input-sizes.component.ts

@@ -0,0 +1,21 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { defineComponents, IgcColorPickerComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcColorPickerComponent);
+
+@Component({
+    selector: 'app-color-picker-input-sizes',
+    styleUrls: ['./color-picker-input-sizes.component.scss'],
+    templateUrl: './color-picker-input-sizes.component.html',
+    imports: [],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+
+export class ColorPickerInputSizesComponent implements AfterViewInit {
+    @ViewChild('colorPicker', { static: true })
+    colorPicker!: ElementRef<IgcColorPickerComponent>;
+
+    ngAfterViewInit() {
+        this.colorPicker.nativeElement.toggle();
+    }
+}

src/app/data-entries/color-picker/input/color-picker-input.component.html

@@ -0,0 +1,3 @@
+<div class="sample-container">
+    <igc-color-picker #colorPicker mode="input" label="Background"></igc-color-picker>
+</div>

src/app/data-entries/color-picker/input/color-picker-input.component.scss

@@ -0,0 +1,13 @@
+.sample-container {
+    --ig-size: 2;
+
+    display: flex;
+    justify-content: center;
+    padding-block-start: 0.5rem;
+}
+
+igc-color-picker::part(picker) {
+    --picker-elevation: var(--ig-elevation-4);
+
+    margin-top: 0.5rem;
+}

src/app/data-entries/color-picker/input/color-picker-input.component.ts

@@ -0,0 +1,21 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { defineComponents, IgcColorPickerComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcColorPickerComponent);
+
+@Component({
+    selector: 'app-color-picker-input',
+    styleUrls: ['./color-picker-input.component.scss'],
+    templateUrl: './color-picker-input.component.html',
+    imports: [],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+
+export class ColorPickerInputComponent implements AfterViewInit {
+    @ViewChild('colorPicker', { static: true })
+    colorPicker!: ElementRef<IgcColorPickerComponent>;
+
+    ngAfterViewInit() {
+        this.colorPicker.nativeElement.toggle();
+    } 
+}

src/app/data-entries/color-picker/overview/color-picker-overview.component.html

@@ -0,0 +1,34 @@
+<div class="sample-container">
+    <igx-card>
+        <igx-card-content>
+            <h2>Choose your interior color</h2>
+            <igx-select value="Satin" type="border">
+                <label igxLabel>Type of wall paints</label>
+                @for (item of paintTypes; track item) {
+                    <igx-select-item [value]="item">{{ item }}</igx-select-item>
+                }
+            </igx-select>
+            <igx-select value="3 litres" type="border">
+                <label igxLabel>Paint quantity</label>
+                @for (item of paintQuantities; track item) {
+                    <igx-select-item [value]="item">{{ item }}</igx-select-item>
+                }
+            </igx-select>
+            <div class="color-row">
+                <igc-color-picker #picker mode="input" value="#0598fa"></igc-color-picker>
+                <button igxIconButton="flat" (click)="resetColor()">
+                    <igx-icon>refresh</igx-icon>
+                </button>
+            </div>
+        </igx-card-content>
+        <igx-card-actions>
+            <button igxButton="flat" igxStart>Back</button>
+            <div class="stepper">
+                <span class="dot"></span>
+                <span class="dot"></span>
+                <span class="dot active"></span>
+            </div>
+            <button igxButton="flat" igxEnd>Confirm</button>
+        </igx-card-actions>
+    </igx-card>
+</div>

src/app/data-entries/color-picker/overview/color-picker-overview.component.scss

@@ -0,0 +1,80 @@
+.sample-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-block-start: 0.5rem;
+}
+
+igx-card {
+    --ig-size: 2;
+
+    width: 22rem;
+}
+
+h2 {
+    margin: 0 0 1rem;
+    font-size: 1.25rem;
+    color: var(--ig-gray-900);
+}
+
+igx-card-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+
+igx-select {
+    width: 100%;
+}
+
+.color-row {
+    position: relative;
+}
+
+igc-color-picker {
+    width: 100%;
+}
+
+igc-color-picker::part(color-picker) {
+    width: 100%;
+    grid-template-columns: auto;
+}
+
+igc-color-picker::part(picker) {
+    --picker-elevation: var(--ig-elevation-12);
+}
+
+.igx-icon-button {
+    position: absolute;
+    right: 0.5rem;
+    top: 0.5rem;
+    z-index: 1;
+}
+
+igx-card-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.stepper {
+    display: flex;
+    gap: 0.375rem;
+}
+
+.stepper .dot {
+    width: 0.375rem;
+    height: 0.375rem;
+    border-radius: 50%;
+    background: var(--ig-gray-300);
+}
+
+.stepper .dot.active {
+    background: var(--ig-secondary-500);
+}
+
+::ng-deep {
+    .igx-card-actions__end {
+        margin-inline-start: unset;
+    }
+}

src/app/data-entries/color-picker/overview/color-picker-overview.component.ts

@@ -0,0 +1,41 @@
+import { Component, ElementRef, ViewChild, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { defineComponents, IgcColorPickerComponent } from 'igniteui-webcomponents';
+import { IgxCardComponent, IgxCardContentDirective, IgxCardActionsComponent } from 'igniteui-angular/card';
+import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select';
+import { IgxLabelDirective } from 'igniteui-angular/input-group';
+
+defineComponents(IgcColorPickerComponent);
+
+@Component({
+    selector: 'app-color-picker-overview',
+    styleUrls: ['./color-picker-overview.component.scss'],
+    templateUrl: './color-picker-overview.component.html',
+    imports: [
+        FormsModule,
+        IgxCardComponent,
+        IgxCardContentDirective,
+        IgxCardActionsComponent,
+        IgxButtonDirective,
+        IgxIconButtonDirective,
+        IgxIconComponent,
+        IgxSelectComponent,
+        IgxSelectItemComponent,
+        IgxLabelDirective
+    ],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+
+export class ColorPickerOverviewComponent {
+    @ViewChild('picker', { static: true })
+    public picker!: ElementRef<IgcColorPickerComponent>;
+
+    public paintTypes = ['Matte', 'Satin', 'Eggshell', 'Gloss'];
+    public paintQuantities = ['1 litre', '3 litres', '5 litres', '10 litres'];
+
+    public resetColor(): void {
+        this.picker.nativeElement.value = '';
+    }
+}