From 402b63bb5d1b6d2a5111ad85f9e0478780a5e302 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Fri, 25 Sep 2026 12:56:21 +0300 Subject: [PATCH] feat(color-picker): add samples --- .../alpha/color-picker-alpha.component.html | 3 + .../alpha/color-picker-alpha.component.scss | 13 ++ .../alpha/color-picker-alpha.component.ts | 21 +++ .../format/color-picker-format.component.html | 3 + .../format/color-picker-format.component.scss | 13 ++ .../format/color-picker-format.component.ts | 21 +++ .../color-picker-input-sizes.component.html | 14 ++ .../color-picker-input-sizes.component.scss | 40 ++++ .../color-picker-input-sizes.component.ts | 21 +++ .../input/color-picker-input.component.html | 3 + .../input/color-picker-input.component.scss | 13 ++ .../input/color-picker-input.component.ts | 21 +++ .../color-picker-overview.component.html | 34 ++++ .../color-picker-overview.component.scss | 80 ++++++++ .../color-picker-overview.component.ts | 41 ++++ .../color-picker-reactive-form.component.html | 45 +++++ .../color-picker-reactive-form.component.scss | 62 ++++++ .../color-picker-reactive-form.component.ts | 57 ++++++ .../sizes/color-picker-sizes.component.html | 14 ++ .../sizes/color-picker-sizes.component.scss | 40 ++++ .../sizes/color-picker-sizes.component.ts | 21 +++ .../states/color-picker-states.component.html | 14 ++ .../states/color-picker-states.component.scss | 30 +++ .../states/color-picker-states.component.ts | 27 +++ .../color-picker-styling.component.html | 57 ++++++ .../color-picker-styling.component.scss | 16 ++ .../styling/color-picker-styling.component.ts | 16 ++ .../color-picker/styling/layout.scss | 99 ++++++++++ .../color-picker-swatches.component.html | 4 + .../color-picker-swatches.component.scss | 14 ++ .../color-picker-swatches.component.ts | 31 +++ ...lor-picker-tailwind-styling.component.html | 62 ++++++ ...lor-picker-tailwind-styling.component.scss | 176 ++++++++++++++++++ ...color-picker-tailwind-styling.component.ts | 60 ++++++ .../value/color-picker-value.component.html | 3 + .../value/color-picker-value.component.scss | 17 ++ .../value/color-picker-value.component.ts | 21 +++ .../data-entries/data-entries-routes-data.ts | 12 ++ src/app/data-entries/data-entries.routes.ts | 72 +++++++ 39 files changed, 1311 insertions(+) create mode 100644 src/app/data-entries/color-picker/alpha/color-picker-alpha.component.html create mode 100644 src/app/data-entries/color-picker/alpha/color-picker-alpha.component.scss create mode 100644 src/app/data-entries/color-picker/alpha/color-picker-alpha.component.ts create mode 100644 src/app/data-entries/color-picker/format/color-picker-format.component.html create mode 100644 src/app/data-entries/color-picker/format/color-picker-format.component.scss create mode 100644 src/app/data-entries/color-picker/format/color-picker-format.component.ts create mode 100644 src/app/data-entries/color-picker/input-sizes/color-picker-input-sizes.component.html create mode 100644 src/app/data-entries/color-picker/input-sizes/color-picker-input-sizes.component.scss create mode 100644 src/app/data-entries/color-picker/input-sizes/color-picker-input-sizes.component.ts create mode 100644 src/app/data-entries/color-picker/input/color-picker-input.component.html create mode 100644 src/app/data-entries/color-picker/input/color-picker-input.component.scss create mode 100644 src/app/data-entries/color-picker/input/color-picker-input.component.ts create mode 100644 src/app/data-entries/color-picker/overview/color-picker-overview.component.html create mode 100644 src/app/data-entries/color-picker/overview/color-picker-overview.component.scss create mode 100644 src/app/data-entries/color-picker/overview/color-picker-overview.component.ts create mode 100644 src/app/data-entries/color-picker/reactive-form/color-picker-reactive-form.component.html create mode 100644 src/app/data-entries/color-picker/reactive-form/color-picker-reactive-form.component.scss create mode 100644 src/app/data-entries/color-picker/reactive-form/color-picker-reactive-form.component.ts create mode 100644 src/app/data-entries/color-picker/sizes/color-picker-sizes.component.html create mode 100644 src/app/data-entries/color-picker/sizes/color-picker-sizes.component.scss create mode 100644 src/app/data-entries/color-picker/sizes/color-picker-sizes.component.ts create mode 100644 src/app/data-entries/color-picker/states/color-picker-states.component.html create mode 100644 src/app/data-entries/color-picker/states/color-picker-states.component.scss create mode 100644 src/app/data-entries/color-picker/states/color-picker-states.component.ts create mode 100644 src/app/data-entries/color-picker/styling/color-picker-styling.component.html create mode 100644 src/app/data-entries/color-picker/styling/color-picker-styling.component.scss create mode 100644 src/app/data-entries/color-picker/styling/color-picker-styling.component.ts create mode 100644 src/app/data-entries/color-picker/styling/layout.scss create mode 100644 src/app/data-entries/color-picker/swatches/color-picker-swatches.component.html create mode 100644 src/app/data-entries/color-picker/swatches/color-picker-swatches.component.scss create mode 100644 src/app/data-entries/color-picker/swatches/color-picker-swatches.component.ts create mode 100644 src/app/data-entries/color-picker/tailwind-styling/color-picker-tailwind-styling.component.html create mode 100644 src/app/data-entries/color-picker/tailwind-styling/color-picker-tailwind-styling.component.scss create mode 100644 src/app/data-entries/color-picker/tailwind-styling/color-picker-tailwind-styling.component.ts create mode 100644 src/app/data-entries/color-picker/value/color-picker-value.component.html create mode 100644 src/app/data-entries/color-picker/value/color-picker-value.component.scss create mode 100644 src/app/data-entries/color-picker/value/color-picker-value.component.ts diff --git a/src/app/data-entries/color-picker/alpha/color-picker-alpha.component.html b/src/app/data-entries/color-picker/alpha/color-picker-alpha.component.html new file mode 100644 index 000000000..ebd41ed54 --- /dev/null +++ b/src/app/data-entries/color-picker/alpha/color-picker-alpha.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/app/data-entries/color-picker/alpha/color-picker-alpha.component.scss b/src/app/data-entries/color-picker/alpha/color-picker-alpha.component.scss new file mode 100644 index 000000000..f4cefbb18 --- /dev/null +++ b/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; +} diff --git a/src/app/data-entries/color-picker/alpha/color-picker-alpha.component.ts b/src/app/data-entries/color-picker/alpha/color-picker-alpha.component.ts new file mode 100644 index 000000000..b9c1958d6 --- /dev/null +++ b/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; + + ngAfterViewInit() { + this.colorPicker.nativeElement.toggle(); + } +} diff --git a/src/app/data-entries/color-picker/format/color-picker-format.component.html b/src/app/data-entries/color-picker/format/color-picker-format.component.html new file mode 100644 index 000000000..e0e0fbdc8 --- /dev/null +++ b/src/app/data-entries/color-picker/format/color-picker-format.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/app/data-entries/color-picker/format/color-picker-format.component.scss b/src/app/data-entries/color-picker/format/color-picker-format.component.scss new file mode 100644 index 000000000..f4cefbb18 --- /dev/null +++ b/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; +} diff --git a/src/app/data-entries/color-picker/format/color-picker-format.component.ts b/src/app/data-entries/color-picker/format/color-picker-format.component.ts new file mode 100644 index 000000000..a867942a1 --- /dev/null +++ b/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; + + ngAfterViewInit() { + this.colorPicker.nativeElement.toggle(); + } +} diff --git a/src/app/data-entries/color-picker/input-sizes/color-picker-input-sizes.component.html b/src/app/data-entries/color-picker/input-sizes/color-picker-input-sizes.component.html new file mode 100644 index 000000000..cc4d57f30 --- /dev/null +++ b/src/app/data-entries/color-picker/input-sizes/color-picker-input-sizes.component.html @@ -0,0 +1,14 @@ +
+
+ Small + +
+
+ Medium + +
+
+ Large + +
+
diff --git a/src/app/data-entries/color-picker/input-sizes/color-picker-input-sizes.component.scss b/src/app/data-entries/color-picker/input-sizes/color-picker-input-sizes.component.scss new file mode 100644 index 000000000..708377b7c --- /dev/null +++ b/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; + } +} diff --git a/src/app/data-entries/color-picker/input-sizes/color-picker-input-sizes.component.ts b/src/app/data-entries/color-picker/input-sizes/color-picker-input-sizes.component.ts new file mode 100644 index 000000000..04443afb1 --- /dev/null +++ b/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; + + ngAfterViewInit() { + this.colorPicker.nativeElement.toggle(); + } +} diff --git a/src/app/data-entries/color-picker/input/color-picker-input.component.html b/src/app/data-entries/color-picker/input/color-picker-input.component.html new file mode 100644 index 000000000..67554f034 --- /dev/null +++ b/src/app/data-entries/color-picker/input/color-picker-input.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/app/data-entries/color-picker/input/color-picker-input.component.scss b/src/app/data-entries/color-picker/input/color-picker-input.component.scss new file mode 100644 index 000000000..f4cefbb18 --- /dev/null +++ b/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; +} diff --git a/src/app/data-entries/color-picker/input/color-picker-input.component.ts b/src/app/data-entries/color-picker/input/color-picker-input.component.ts new file mode 100644 index 000000000..161e442ff --- /dev/null +++ b/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; + + ngAfterViewInit() { + this.colorPicker.nativeElement.toggle(); + } +} diff --git a/src/app/data-entries/color-picker/overview/color-picker-overview.component.html b/src/app/data-entries/color-picker/overview/color-picker-overview.component.html new file mode 100644 index 000000000..befe6c3b9 --- /dev/null +++ b/src/app/data-entries/color-picker/overview/color-picker-overview.component.html @@ -0,0 +1,34 @@ +
+ + +

Choose your interior color

+ + + @for (item of paintTypes; track item) { + {{ item }} + } + + + + @for (item of paintQuantities; track item) { + {{ item }} + } + +
+ + +
+ + + +
+ + + +
+ + + +
diff --git a/src/app/data-entries/color-picker/overview/color-picker-overview.component.scss b/src/app/data-entries/color-picker/overview/color-picker-overview.component.scss new file mode 100644 index 000000000..df7e8a0f5 --- /dev/null +++ b/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; + } +} diff --git a/src/app/data-entries/color-picker/overview/color-picker-overview.component.ts b/src/app/data-entries/color-picker/overview/color-picker-overview.component.ts new file mode 100644 index 000000000..10d22cf96 --- /dev/null +++ b/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; + + public paintTypes = ['Matte', 'Satin', 'Eggshell', 'Gloss']; + public paintQuantities = ['1 litre', '3 litres', '5 litres', '10 litres']; + + public resetColor(): void { + this.picker.nativeElement.value = ''; + } +} diff --git a/src/app/data-entries/color-picker/reactive-form/color-picker-reactive-form.component.html b/src/app/data-entries/color-picker/reactive-form/color-picker-reactive-form.component.html new file mode 100644 index 000000000..97f917eef --- /dev/null +++ b/src/app/data-entries/color-picker/reactive-form/color-picker-reactive-form.component.html @@ -0,0 +1,45 @@ +
+ + +
+

Create a label

+ + + + @if (name.touched && name.invalid) { + A label name is required. + } + + + Pick a swatch or select any color value. + A label color is required. + + + +
+ Preview + + {{ labelForm.value.name || 'Label' }} + +
+
+ + +
+
+ + +
diff --git a/src/app/data-entries/color-picker/reactive-form/color-picker-reactive-form.component.scss b/src/app/data-entries/color-picker/reactive-form/color-picker-reactive-form.component.scss new file mode 100644 index 000000000..c5b1f896f --- /dev/null +++ b/src/app/data-entries/color-picker/reactive-form/color-picker-reactive-form.component.scss @@ -0,0 +1,62 @@ +.sample-container { + --ig-size: 2; + + display: flex; + justify-content: center; + padding-block-start: 0.5rem; +} + +igx-card { + width: 24rem; +} + +form { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +h2 { + margin: 0; + font-size: 1.25rem; + color: var(--ig-gray-900); +} + +igc-color-picker[mode="input"] { + width: 100%; +} + +igc-color-picker[mode="input"]::part(color-picker) { + width: 100%; + grid-template-columns: auto; +} + +igc-color-picker::part(picker) { + --picker-elevation: var(--ig-elevation-4); + + margin-top: 0.5rem; +} + +.preview { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.preview-caption { + font-size: 0.875rem; + color: var(--ig-gray-600); +} + +.preview-label { + padding: 0.25rem 0.75rem; + border-radius: 1rem; + font-size: 0.875rem; + font-weight: 600; +} + +.actions { + display: flex; + justify-content: flex-end; + gap: 0.5rem; +} diff --git a/src/app/data-entries/color-picker/reactive-form/color-picker-reactive-form.component.ts b/src/app/data-entries/color-picker/reactive-form/color-picker-reactive-form.component.ts new file mode 100644 index 000000000..a0a7fea1a --- /dev/null +++ b/src/app/data-entries/color-picker/reactive-form/color-picker-reactive-form.component.ts @@ -0,0 +1,57 @@ +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; +import { defineComponents, IgcColorPickerComponent } from 'igniteui-webcomponents'; +import { IgcFormControlDirective, IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxCardComponent, IgxCardContentDirective } from 'igniteui-angular/card'; +import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group'; + +defineComponents(IgcColorPickerComponent); + +interface LabelForm { + name: FormControl; + color: FormControl; + textColor: FormControl; +} + +const initialValue = { name: '', color: '', textColor: '#000000' }; + +@Component({ + selector: 'app-color-picker-reactive-form', + styleUrls: ['./color-picker-reactive-form.component.scss'], + templateUrl: './color-picker-reactive-form.component.html', + imports: [ + ReactiveFormsModule, + IgcFormControlDirective, + IgxButtonDirective, + IgxCardComponent, + IgxCardContentDirective, + IgxInputGroupComponent, + IgxInputDirective, + IgxLabelDirective, + IgxHintDirective + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) + +export class ColorPickerReactiveFormComponent { + public swatches = ['#d32f2f', '#f57c00', '#fbc02d', '#388e3c', '#1976d2', '#7b1fa2', '#455a64']; + + public labelForm = new FormGroup({ + name: new FormControl(initialValue.name, Validators.required), + color: new FormControl(initialValue.color, Validators.required), + textColor: new FormControl(initialValue.textColor) + }); + + public get name() { + return this.labelForm.controls.name; + } + + public get color() { + return this.labelForm.controls.color; + } + + public onReset(form: HTMLFormElement): void { + form.reset(); + this.labelForm.reset(initialValue); + } +} diff --git a/src/app/data-entries/color-picker/sizes/color-picker-sizes.component.html b/src/app/data-entries/color-picker/sizes/color-picker-sizes.component.html new file mode 100644 index 000000000..11a68b6c1 --- /dev/null +++ b/src/app/data-entries/color-picker/sizes/color-picker-sizes.component.html @@ -0,0 +1,14 @@ +
+
+ Small + +
+
+ Medium + +
+
+ Large + +
+
diff --git a/src/app/data-entries/color-picker/sizes/color-picker-sizes.component.scss b/src/app/data-entries/color-picker/sizes/color-picker-sizes.component.scss new file mode 100644 index 000000000..708377b7c --- /dev/null +++ b/src/app/data-entries/color-picker/sizes/color-picker-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; + } +} diff --git a/src/app/data-entries/color-picker/sizes/color-picker-sizes.component.ts b/src/app/data-entries/color-picker/sizes/color-picker-sizes.component.ts new file mode 100644 index 000000000..9d0a203e9 --- /dev/null +++ b/src/app/data-entries/color-picker/sizes/color-picker-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-sizes', + styleUrls: ['./color-picker-sizes.component.scss'], + templateUrl: './color-picker-sizes.component.html', + imports: [], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) + +export class ColorPickerSizesComponent implements AfterViewInit { + @ViewChild('colorPicker', { static: true }) + colorPicker!: ElementRef; + + ngAfterViewInit() { + this.colorPicker.nativeElement.toggle(); + } +} diff --git a/src/app/data-entries/color-picker/states/color-picker-states.component.html b/src/app/data-entries/color-picker/states/color-picker-states.component.html new file mode 100644 index 000000000..5ac47a4df --- /dev/null +++ b/src/app/data-entries/color-picker/states/color-picker-states.component.html @@ -0,0 +1,14 @@ +
+
+ Default state + +
+
+ Invalid state + +
+
+ Disabled state + +
+
diff --git a/src/app/data-entries/color-picker/states/color-picker-states.component.scss b/src/app/data-entries/color-picker/states/color-picker-states.component.scss new file mode 100644 index 000000000..37ab4063c --- /dev/null +++ b/src/app/data-entries/color-picker/states/color-picker-states.component.scss @@ -0,0 +1,30 @@ +.sample-container { + --ig-size: 2; + + 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; + } +} diff --git a/src/app/data-entries/color-picker/states/color-picker-states.component.ts b/src/app/data-entries/color-picker/states/color-picker-states.component.ts new file mode 100644 index 000000000..1578339f8 --- /dev/null +++ b/src/app/data-entries/color-picker/states/color-picker-states.component.ts @@ -0,0 +1,27 @@ +import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; +import { defineComponents, IgcColorPickerComponent } from 'igniteui-webcomponents'; + +defineComponents(IgcColorPickerComponent); + +@Component({ + selector: 'app-color-picker-states', + styleUrls: ['./color-picker-states.component.scss'], + templateUrl: './color-picker-states.component.html', + imports: [], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) + +export class ColorPickerStatesComponent implements AfterViewInit { + public invalid = true; + + public onInput(): void { + this.invalid = false; + } + + @ViewChild('colorPicker', { static: true }) + colorPicker!: ElementRef; + + ngAfterViewInit() { + this.colorPicker.nativeElement.toggle(); + } +} diff --git a/src/app/data-entries/color-picker/styling/color-picker-styling.component.html b/src/app/data-entries/color-picker/styling/color-picker-styling.component.html new file mode 100644 index 000000000..29b527c55 --- /dev/null +++ b/src/app/data-entries/color-picker/styling/color-picker-styling.component.html @@ -0,0 +1,57 @@ +
+
+
+ Text +
+ +
+
+
+ Alignment +
+ + + + +
+
+
+ Content +
+ + + +
+
+
+ Charts +
+ +
+
+
+ Colors +
+ +
+
+
+
diff --git a/src/app/data-entries/color-picker/styling/color-picker-styling.component.scss b/src/app/data-entries/color-picker/styling/color-picker-styling.component.scss new file mode 100644 index 000000000..055ca3c76 --- /dev/null +++ b/src/app/data-entries/color-picker/styling/color-picker-styling.component.scss @@ -0,0 +1,16 @@ +@use "layout.scss"; + +igc-color-picker { + --ig-color-picker-picker-background: #e6f2ff; + --ig-color-picker-picker-border-color: #a9b8cc; + --ig-color-picker-picker-border-radius: 1rem; + --ig-color-picker-picker-elevation: none; +} + +igc-color-picker::part(anchor) { + border: 0.125rem solid #a9b8cc; +} + +igc-color-picker::part(picker-canvas) { + border-radius: 0.25rem; +} diff --git a/src/app/data-entries/color-picker/styling/color-picker-styling.component.ts b/src/app/data-entries/color-picker/styling/color-picker-styling.component.ts new file mode 100644 index 000000000..43903a85f --- /dev/null +++ b/src/app/data-entries/color-picker/styling/color-picker-styling.component.ts @@ -0,0 +1,16 @@ +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { defineComponents, IgcColorPickerComponent } from 'igniteui-webcomponents'; +import { IgxIconButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + +defineComponents(IgcColorPickerComponent); + +@Component({ + selector: 'app-color-picker-styling', + styleUrls: ['./color-picker-styling.component.scss'], + templateUrl: './color-picker-styling.component.html', + imports: [IgxIconButtonDirective, IgxIconComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) + +export class ColorPickerStylingComponent {} diff --git a/src/app/data-entries/color-picker/styling/layout.scss b/src/app/data-entries/color-picker/styling/layout.scss new file mode 100644 index 000000000..6a8181ff0 --- /dev/null +++ b/src/app/data-entries/color-picker/styling/layout.scss @@ -0,0 +1,99 @@ +.sample-container { + --ig-size: 2; + + display: flex; + justify-content: center; + align-items: center; + padding-block-start: 0.5rem; +} + +.editor-toolbar { + display: flex; + align-items: stretch; + gap: 0.5rem; + padding: 1rem; + border-radius: 1rem; + background: #00142b; + font-family: "Aktiv Grotesk", sans-serif; +} + +.toolbar-group { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; +} + +.toolbar-group-label { + font-size: 0.75rem; + font-weight: 600; + line-height: 1rem; + letter-spacing: 0.009375rem; + color: #d2dbe8; +} + +.toolbar-actions { + border-radius: 0.5rem; + background: #556c86; +} + +[igxIconButton] { + width: fit-content; + height: fit-content; + padding: 0.5rem; + --foreground: #fcfcfc; + --hover-foreground: #fff; +} + +[igxIconButton] igx-icon { + --size: 0.875rem; + width: 1.6em; + height: 1.6em; + align-items: center; + justify-content: center; +} + +.toolbar-group:nth-child(2) { + [igxIconButton]:nth-of-type(2) { + padding-inline: unset; + } + + [igxIconButton]:nth-of-type(3) { + padding-inline-end: unset; + } +} + +.toolbar-group:nth-child(3) [igxIconButton]:nth-of-type(2) { + padding-inline: unset; +} + +igc-color-picker { + --ig-size: var(--ig-size-small); + --ig-input-group-border-color: transparent; + --ig-input-group-hover-border-color: rgb(255 255 255 / 15%); + --ig-input-group-focused-border-color: transparent; + --ig-input-group-border-border-radius: 0.5rem; + --ig-input-group-filled-text-color: #fff; + --ig-input-group-filled-text-hover-color: #fff; + --ig-input-group-focused-text-color: #fff; + --ig-input-group-placeholder-color: #fff; + --ig-input-group-hover-placeholder-color: #fff; + --ig-input-group-focus-placeholder-color: #fff; + + width: 8.75rem; +} + +igc-color-picker::part(picker) { + --ig-input-group-filled-text-color: var(--ig-gray-900); + --ig-input-group-filled-text-hover-color: var(--ig-gray-900); + --ig-input-group-focused-text-color: var(--ig-gray-900); + --ig-input-group-placeholder-color: var(--ig-gray-900); + --ig-input-group-hover-placeholder-color: var(--ig-gray-900); + --ig-input-group-focus-placeholder-color: var(--ig-gray-900); + --ig-input-group-border-color: var(--ig-gray-500); + --ig-input-group-hover-border-color: var(--ig-gray-500); + --ig-input-group-focused-border-color: var(--ig-gray-500); + --ig-input-group-border-border-radius: 0.25rem; + + margin-top: 1.25rem; +} \ No newline at end of file diff --git a/src/app/data-entries/color-picker/swatches/color-picker-swatches.component.html b/src/app/data-entries/color-picker/swatches/color-picker-swatches.component.html new file mode 100644 index 000000000..8408e1d46 --- /dev/null +++ b/src/app/data-entries/color-picker/swatches/color-picker-swatches.component.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/src/app/data-entries/color-picker/swatches/color-picker-swatches.component.scss b/src/app/data-entries/color-picker/swatches/color-picker-swatches.component.scss new file mode 100644 index 000000000..b4ca3f0bb --- /dev/null +++ b/src/app/data-entries/color-picker/swatches/color-picker-swatches.component.scss @@ -0,0 +1,14 @@ +.sample-container { + --ig-size: 2; + + display: flex; + flex-direction: row; + justify-content: space-between; + padding-block-start: 0.5rem; +} + +igc-color-picker::part(picker) { + --picker-elevation: var(--ig-elevation-4); + + margin-top: 0.5rem; +} \ No newline at end of file diff --git a/src/app/data-entries/color-picker/swatches/color-picker-swatches.component.ts b/src/app/data-entries/color-picker/swatches/color-picker-swatches.component.ts new file mode 100644 index 000000000..e2d803fc5 --- /dev/null +++ b/src/app/data-entries/color-picker/swatches/color-picker-swatches.component.ts @@ -0,0 +1,31 @@ +import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; +import { defineComponents, IgcColorPickerComponent } from 'igniteui-webcomponents'; + +defineComponents(IgcColorPickerComponent); + +@Component({ + selector: 'app-color-picker-swatches', + styleUrls: ['./color-picker-swatches.component.scss'], + templateUrl: './color-picker-swatches.component.html', + imports: [], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) + +export class ColorPickerSwatchesComponent implements AfterViewInit { + public oneLineSwatches = ['#f44336', '#e91e63', '#9c27b0', '#3f51b5', '#2196f3', '#4caf50']; + + public multiLineSwatches = [ + '#f44336', '#e91e63', '#9c27b0', '#3f51b5', '#2196f3', '#4caf50', '#ffeb3b', '#ff9800', '#795548', '#607d8b', '#ffffff', '#000000', '#0000ff', '#00ff00', '#ff00ff', '#00ffff', '#ff0000', '#ffff00', '#ff00ff', '#00ffff', '#c0c0c0', '#808080', '#800000', '#808000' + ]; + + @ViewChild('colorPicker1', { static: true }) + colorPicker1!: ElementRef; + + @ViewChild('colorPicker2', { static: true }) + colorPicker2!: ElementRef; + + ngAfterViewInit() { + this.colorPicker1.nativeElement.toggle(); + this.colorPicker2.nativeElement.toggle(); + } +} diff --git a/src/app/data-entries/color-picker/tailwind-styling/color-picker-tailwind-styling.component.html b/src/app/data-entries/color-picker/tailwind-styling/color-picker-tailwind-styling.component.html new file mode 100644 index 000000000..85e1cf292 --- /dev/null +++ b/src/app/data-entries/color-picker/tailwind-styling/color-picker-tailwind-styling.component.html @@ -0,0 +1,62 @@ +
+
+
+
+

Theme Editor

+

Use the pickers to style the card.

+
+ +
+
+
+ + Card surface color + +
+
+ + Body & heading color + +
+
+ + Button & tag color + +
+
+ + Card edge color + +
+
+ + Upgrade to unlock + +
+
+ + + Design +

Color Picker in Practice

+

Pick colors above to see them applied live across every element of this card.

+
+ + +
+ + +
+
diff --git a/src/app/data-entries/color-picker/tailwind-styling/color-picker-tailwind-styling.component.scss b/src/app/data-entries/color-picker/tailwind-styling/color-picker-tailwind-styling.component.scss new file mode 100644 index 000000000..b76c19079 --- /dev/null +++ b/src/app/data-entries/color-picker/tailwind-styling/color-picker-tailwind-styling.component.scss @@ -0,0 +1,176 @@ +igc-color-picker::part(copy), +igc-color-picker::part(eye-dropper) { + --foreground: #c6451b; +} + +igc-color-picker::part(picker) { + --ig-input-group-border-color: #f95924; + --ig-input-group-hover-border-color: #f95924; + --ig-input-group-focused-border-color: #f95924; + + margin-top: 1.25rem; +} + +igc-color-picker::part(buttons) { + gap: 0rem; +} + +igc-color-picker { + --ig-color-picker-picker-elevation: none; +} + +.sample-container { + --ig-size: 2; + + display: flex; + height: fit-content; + max-width: 55rem; + margin-inline: auto; + padding-block-start: 0.5rem; +} + +.theme-editor { + --ig-font-family: "Aktiv Grotesk", sans-serif; + + width: 100%; + border-radius: 0.75rem; + border: 0.063rem solid; + padding: 1.5rem; + border-color: var(--ig-gray-200); + background: var(--ig-surface-500); +} + +.theme-editor-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.5rem 1rem; + border-bottom: 0.063rem solid; + border-color: var(--ig-gray-200); +} + +.theme-editor-header h2 { + font-size: 1rem; + line-height: 1.5rem; + font-weight: 600; + margin: 0; + color: var(--ig-gray-900); + letter-spacing: 0.009rem; +} + +.theme-editor-header p { + font-size: 0.875rem; + line-height: 1.25rem; + margin: 0.125rem 0 0; + color: var(--ig-gray-600); +} + +.theme-editor-header igx-icon { + --size: 1.5rem; +} + +.swatches { + display: flex; + flex-wrap: wrap; + gap: 1.5rem; + padding: 1.5rem 1rem 1rem; +} + +.swatch-item { + display: flex; + align-items: center; + gap: 0.5rem; + max-width: 8.5rem; + width: 100%; +} + +.swatch-item igc-color-picker { + --ig-color-picker-anchor-border-radius: 0.375rem; + --ig-color-picker-label-color: var(--ig-gray-900); +} + +.swatch-item igc-color-picker::part(label) { + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; +} + +igc-color-picker::part(anchor) { + --anchor-border-radius: 0.25rem; + --anchor-border-color: var(--ig-gray-600); + --swatch-preview-border-color: var(--ig-gray-300); +} + +.swatch-item.disabled igc-color-picker { + --ig-color-picker-label-color-disabled: var(--ig-gray-400); +} + +.swatch-item.disabled .swatch-hint { + color: var(--ig-gray-400); +} + +.swatch-hint { + font-size: 0.75rem; + line-height: 1rem; + color: var(--ig-gray-600); +} + +igx-card { + margin-block-start: 1rem; + border-radius: 0.5rem; + background: var(--preview-bg); + border: 0.063rem solid var(--preview-border); + box-shadow: var(--ig-elevation-4); +} + +.preview-chip { + --ig-size: var(--ig-size-large); + --ig-chip-background: color-mix(in srgb, var(--preview-accent) 25%, transparent); + --ig-chip-hover-background: color-mix(in srgb, var(--preview-accent) 75%, transparent); + --ig-chip-text-color: var(--preview-accent); +} + +.preview-primary, +.preview-secondary { + --ig-size: var(--ig-size-medium); + text-transform: capitalize; +} + +.preview-primary { + --background: var(--preview-accent); + --foreground: var(--preview-bg); + --hover-background: hsl(from var(--preview-accent) h s 40%); +} + +.preview-secondary { + --foreground: var(--preview-accent); + --hover-foreground: hsl(from var(--preview-accent) h s 40%); + --border-color: var(--preview-accent); + --hover-border-color: hsl(from var(--preview-accent) h s 40%); + min-width: unset; +} + +.preview-title, +.preview-text { + color: var(--preview-text); +} + +.preview-title { + font-size: 1rem; + line-height: 1.5rem; + font-weight: 600; + margin: 1rem 0 0.25rem; + letter-spacing: 0.009rem; +} + +.preview-text { + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; +} + +.preview-actions { + display: flex; + gap: 0.75rem; + margin-top: 1.25rem; +} diff --git a/src/app/data-entries/color-picker/tailwind-styling/color-picker-tailwind-styling.component.ts b/src/app/data-entries/color-picker/tailwind-styling/color-picker-tailwind-styling.component.ts new file mode 100644 index 000000000..5223f3be7 --- /dev/null +++ b/src/app/data-entries/color-picker/tailwind-styling/color-picker-tailwind-styling.component.ts @@ -0,0 +1,60 @@ +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { defineComponents, IgcColorPickerComponent } from 'igniteui-webcomponents'; +import { IgxCardComponent, IgxCardContentDirective } from 'igniteui-angular/card'; +import { IgxButtonDirective, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxChipComponent } from 'igniteui-angular/chips'; + +defineComponents(IgcColorPickerComponent); + +const defaults = { + background: '#1a314a', + text: '#e5ebf3', + accent: '#f9592a', + border: '#00142b' +}; + +@Component({ + selector: 'app-color-picker-tailwind-styling', + styleUrls: ['./color-picker-tailwind-styling.component.scss'], + templateUrl: './color-picker-tailwind-styling.component.html', + imports: [ + IgxCardComponent, + IgxCardContentDirective, + IgxButtonDirective, + IgxIconButtonDirective, + IgxRippleDirective, + IgxIconComponent, + IgxChipComponent + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class ColorPickerTailwindStylingComponent { + public background = defaults.background; + public text = defaults.text; + public accent = defaults.accent; + public border = defaults.border; + + public onBackgroundInput(event: Event): void { + this.background = (event as CustomEvent).detail; + } + + public onTextInput(event: Event): void { + this.text = (event as CustomEvent).detail; + } + + public onAccentInput(event: Event): void { + this.accent = (event as CustomEvent).detail; + } + + public onBorderInput(event: Event): void { + this.border = (event as CustomEvent).detail; + } + + public reset(): void { + this.background = defaults.background; + this.text = defaults.text; + this.accent = defaults.accent; + this.border = defaults.border; + } +} diff --git a/src/app/data-entries/color-picker/value/color-picker-value.component.html b/src/app/data-entries/color-picker/value/color-picker-value.component.html new file mode 100644 index 000000000..6c4d826ed --- /dev/null +++ b/src/app/data-entries/color-picker/value/color-picker-value.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/app/data-entries/color-picker/value/color-picker-value.component.scss b/src/app/data-entries/color-picker/value/color-picker-value.component.scss new file mode 100644 index 000000000..3b5129b70 --- /dev/null +++ b/src/app/data-entries/color-picker/value/color-picker-value.component.scss @@ -0,0 +1,17 @@ +.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; +} + +:root { + overflow: auto; +} diff --git a/src/app/data-entries/color-picker/value/color-picker-value.component.ts b/src/app/data-entries/color-picker/value/color-picker-value.component.ts new file mode 100644 index 000000000..310a70149 --- /dev/null +++ b/src/app/data-entries/color-picker/value/color-picker-value.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-value', + styleUrls: ['./color-picker-value.component.scss'], + templateUrl: './color-picker-value.component.html', + imports: [], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) + +export class ColorPickerValueComponent implements AfterViewInit { + @ViewChild('colorPicker', { static: true }) + colorPicker!: ElementRef; + + ngAfterViewInit() { + this.colorPicker.nativeElement.toggle(); + } +} diff --git a/src/app/data-entries/data-entries-routes-data.ts b/src/app/data-entries/data-entries-routes-data.ts index c12dffbf4..eb06f3490 100644 --- a/src/app/data-entries/data-entries-routes-data.ts +++ b/src/app/data-entries/data-entries-routes-data.ts @@ -29,6 +29,18 @@ export const dataEntriesRoutesData = { "checkbox-sample-3": { displayName: "Indeterminate Checkbox", parentName: "Checkbox" }, "checkbox-styling": { displayName: "Checkbox Styling", parentName: "Checkbox" }, "checkbox-tailwind-styling": { displayName: "Checkbox Tailwind Styling", parentName: "Checkbox" }, + "color-picker-overview": { displayName: "Overview", parentName: "Color Picker" }, + "color-picker-value": { displayName: "Value", parentName: "Color Picker" }, + "color-picker-input": { displayName: "Input Mode", parentName: "Color Picker" }, + "color-picker-format": { displayName: "Format", parentName: "Color Picker" }, + "color-picker-alpha": { displayName: "Alpha", parentName: "Color Picker" }, + "color-picker-swatches": { displayName: "Swatches", parentName: "Color Picker" }, + "color-picker-states": { displayName: "States", parentName: "Color Picker" }, + "color-picker-sizes": { displayName: "Sizes", parentName: "Color Picker" }, + "color-picker-input-sizes": { displayName: "Input Sizes", parentName: "Color Picker" }, + "color-picker-styling": { displayName: "Color Picker Styling", parentName: "Color Picker" }, + "color-picker-tailwind-styling": { displayName: "Color Picker Tailwind Styling", parentName: "Color Picker" }, + "color-picker-reactive-form": { displayName: "Color Picker in Reactive Form", parentName: "Color Picker" }, "dropdown-remote": { displayName: "Virtual Dropdown - Remote Data", parentName: "Dropdown" }, "dropdown-virtual": { displayName: "Virtual Dropdown", parentName: "Dropdown" }, "dropdown-menu": { displayName: "Dropdown as Menu", parentName: "Dropdown" }, diff --git a/src/app/data-entries/data-entries.routes.ts b/src/app/data-entries/data-entries.routes.ts index 8132650c3..5a7a06e8b 100644 --- a/src/app/data-entries/data-entries.routes.ts +++ b/src/app/data-entries/data-entries.routes.ts @@ -28,6 +28,18 @@ import { CheckboxSample2Component } from './checkbox/checkbox-sample-2/checkbox- import { CheckboxSample3Component } from './checkbox/checkbox-sample-3/checkbox-sample-3.component'; import { CheckboxStylingComponent } from './checkbox/checkbox-styling/checkbox-styling.component'; import { CheckboxTailwindStylingComponent } from './checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component'; +import { ColorPickerOverviewComponent } from './color-picker/overview/color-picker-overview.component'; +import { ColorPickerValueComponent } from './color-picker/value/color-picker-value.component'; +import { ColorPickerInputComponent } from './color-picker/input/color-picker-input.component'; +import { ColorPickerFormatComponent } from './color-picker/format/color-picker-format.component'; +import { ColorPickerAlphaComponent } from './color-picker/alpha/color-picker-alpha.component'; +import { ColorPickerSwatchesComponent } from './color-picker/swatches/color-picker-swatches.component'; +import { ColorPickerStatesComponent } from './color-picker/states/color-picker-states.component'; +import { ColorPickerSizesComponent } from './color-picker/sizes/color-picker-sizes.component'; +import { ColorPickerInputSizesComponent } from './color-picker/input-sizes/color-picker-input-sizes.component'; +import { ColorPickerStylingComponent } from './color-picker/styling/color-picker-styling.component'; +import { ColorPickerTailwindStylingComponent } from './color-picker/tailwind-styling/color-picker-tailwind-styling.component'; +import { ColorPickerReactiveFormComponent } from './color-picker/reactive-form/color-picker-reactive-form.component'; import { dataEntriesRoutesData } from './data-entries-routes-data'; import { DropDownRemoteComponent } from './dropdown/drop-down-remote-virtual/drop-down-remote.component'; import { DropDownVirtualComponent } from './dropdown/drop-down-virtual/drop-down-virtual.component'; @@ -233,6 +245,66 @@ export const DataEntriesRoutes: Routes = [ data: dataEntriesRoutesData['checkbox-tailwind-styling'], path: 'checkbox-tailwind-styling' }, + { + component: ColorPickerOverviewComponent, + data: dataEntriesRoutesData['color-picker-overview'], + path: 'color-picker-overview' + }, + { + component: ColorPickerValueComponent, + data: dataEntriesRoutesData['color-picker-value'], + path: 'color-picker-value' + }, + { + component: ColorPickerInputComponent, + data: dataEntriesRoutesData['color-picker-input'], + path: 'color-picker-input' + }, + { + component: ColorPickerFormatComponent, + data: dataEntriesRoutesData['color-picker-format'], + path: 'color-picker-format' + }, + { + component: ColorPickerAlphaComponent, + data: dataEntriesRoutesData['color-picker-alpha'], + path: 'color-picker-alpha' + }, + { + component: ColorPickerSwatchesComponent, + data: dataEntriesRoutesData['color-picker-swatches'], + path: 'color-picker-swatches' + }, + { + component: ColorPickerStatesComponent, + data: dataEntriesRoutesData['color-picker-states'], + path: 'color-picker-states' + }, + { + component: ColorPickerSizesComponent, + data: dataEntriesRoutesData['color-picker-sizes'], + path: 'color-picker-sizes' + }, + { + component: ColorPickerInputSizesComponent, + data: dataEntriesRoutesData['color-picker-input-sizes'], + path: 'color-picker-input-sizes' + }, + { + component: ColorPickerStylingComponent, + data: dataEntriesRoutesData['color-picker-styling'], + path: 'color-picker-styling' + }, + { + component: ColorPickerTailwindStylingComponent, + data: dataEntriesRoutesData['color-picker-tailwind-styling'], + path: 'color-picker-tailwind-styling' + }, + { + component: ColorPickerReactiveFormComponent, + data: dataEntriesRoutesData['color-picker-reactive-form'], + path: 'color-picker-reactive-form' + }, { component: DropdownMenuComponent, data: dataEntriesRoutesData['dropdown-menu'],