Make components standalone

Author: fil0157

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 7.0.0 (June 6, 2024)
+- Angular updated (v19.2.10)
+
+### Breaking Changes
+- The `AngularColorfulModule` was removed, use standalone components
+
 ## 6.0.0 (June 6, 2024)
 - Angular updated (v18.0.2)
 

angular.json

@@ -8,14 +8,7 @@
  "schematics": {
  "@schematics/angular:component": {
  "style": "scss",
- "standalone": true,
  "changeDetection": "OnPush"
- },
- "@schematics/angular:directive": {
- "standalone": true
- },
- "@schematics/angular:pipe": {
- "standalone": true
  }
  },
  "root": "projects/app",

projects/angular-colorful/src/lib/angular-colorful.module.ts

@@ -1,14 +1,18 @@
 import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from '@angular/core';
+import {CommonModule} from "@angular/common";
 import {defaultHsvaColor} from '../../../utils/constants';
 import {HsvaColor} from '../../../interfaces/hsva-color.interface';
+import {SaturationComponent} from "../saturation/saturation.component";
+import {HueComponent} from "../hue/hue.component";
+import {AlphaComponent} from "../alpha/alpha.component";
 
 
-@Component({
- selector: 'alpha-color-picker',
- templateUrl: './alpha-color-picker.component.html',
- styleUrls: ['./alpha-color-picker.component.scss'],
- changeDetection: ChangeDetectionStrategy.OnPush,
- standalone: false
+@Component({
+ selector: 'alpha-color-picker',
+ templateUrl: './alpha-color-picker.component.html',
+ styleUrls: ['./alpha-color-picker.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ imports: [CommonModule, SaturationComponent, HueComponent, AlphaComponent],
 })
 export class AlphaColorPickerComponent {
  @Input() color: HsvaColor = defaultHsvaColor;

projects/angular-colorful/src/lib/components/common/alpha-color-picker/alpha-color-picker.component.ts

@@ -1,16 +1,18 @@
 import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DoCheck, EventEmitter, Input, Output} from '@angular/core';
+import {CommonModule} from "@angular/common";
 import {hsvaToHslaString} from '../../../utils/convert';
 import {defaultHsvaColor} from '../../../utils/constants';
 import {HsvaColor} from '../../../interfaces/hsva-color.interface';
 import {Interaction} from '../../../interfaces/interaction.interface';
+import {InteractiveComponent} from "../interactive/interactive.component";
 
 
-@Component({
- selector: 'alpha',
- templateUrl: './alpha.component.html',
- styleUrls: ['./alpha.component.scss'],
- changeDetection: ChangeDetectionStrategy.OnPush,
- standalone: false
+@Component({
+ selector: 'alpha',
+ templateUrl: './alpha.component.html',
+ styleUrls: ['./alpha.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ imports: [CommonModule, InteractiveComponent],
 })
 export class AlphaComponent implements DoCheck {
  @Input() color: HsvaColor = defaultHsvaColor;

projects/angular-colorful/src/lib/components/common/alpha/alpha.component.ts

@@ -1,14 +1,17 @@
 import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from '@angular/core';
+import {CommonModule} from "@angular/common";
 import {HsvaColor} from '../../../interfaces/hsva-color.interface';
 import {defaultHsvaColor} from '../../../utils/constants';
+import {SaturationComponent} from "../saturation/saturation.component";
+import {HueComponent} from "../hue/hue.component";
 
 
-@Component({
- selector: 'color-picker',
- templateUrl: './color-picker.component.html',
- styleUrls: ['./color-picker.component.scss'],
- changeDetection: ChangeDetectionStrategy.OnPush,
- standalone: false
+@Component({
+ selector: 'color-picker',
+ templateUrl: './color-picker.component.html',
+ styleUrls: ['./color-picker.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ imports: [CommonModule, SaturationComponent, HueComponent],
 })
 export class ColorPickerComponent {
 

projects/angular-colorful/src/lib/components/common/color-picker/color-picker.component.ts

@@ -1,16 +1,18 @@
 import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DoCheck, EventEmitter, Input, Output} from '@angular/core';
+import {CommonModule} from "@angular/common";
 import {hsvaToHslString} from '../../../utils/convert';
 import {defaultHsvaColor} from '../../../utils/constants';
 import {HsvaColor} from '../../../interfaces/hsva-color.interface';
 import {Interaction} from '../../../interfaces/interaction.interface';
+import {InteractiveComponent} from "../interactive/interactive.component";
 
 
-@Component({
- selector: 'hue',
- templateUrl: './hue.component.html',
- styleUrls: ['./hue.component.scss'],
- changeDetection: ChangeDetectionStrategy.OnPush,
- standalone: false
+@Component({
+ selector: 'hue',
+ templateUrl: './hue.component.html',
+ styleUrls: ['./hue.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ imports: [CommonModule, InteractiveComponent],
 })
 export class HueComponent implements DoCheck {
  @Input() color: HsvaColor = defaultHsvaColor;

projects/angular-colorful/src/lib/components/common/hue/hue.component.ts

@@ -1,16 +1,17 @@
 // Angular
 import {Component, Input, HostListener, OnInit, Output, EventEmitter, ElementRef} from '@angular/core';
+import {CommonModule} from "@angular/common";
 
 // Project
 import {clamp} from '../../../utils/clamp';
 import {Interaction} from '../../../interfaces/interaction.interface';
 
 
-@Component({
- selector: 'interactive',
- templateUrl: './interactive.component.html',
- styleUrls: ['./interactive.component.scss'],
- standalone: false
+@Component({
+ selector: 'interactive',
+ templateUrl: './interactive.component.html',
+ styleUrls: ['./interactive.component.scss'],
+ imports: [CommonModule],
 })
 export class InteractiveComponent implements OnInit {
 

projects/angular-colorful/src/lib/components/common/interactive/interactive.component.ts

@@ -1,16 +1,18 @@
 import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DoCheck, EventEmitter, Input, Output} from '@angular/core';
+import {CommonModule} from "@angular/common";
 import {hsvaToHslString} from '../../../utils/convert';
 import {defaultHsvaColor} from '../../../utils/constants';
 import {HsvaColor} from '../../../interfaces/hsva-color.interface';
 import {Interaction} from '../../../interfaces/interaction.interface';
+import {InteractiveComponent} from "../interactive/interactive.component";
 
 
-@Component({
- selector: 'saturation',
- templateUrl: './saturation.component.html',
- styleUrls: ['./saturation.component.scss'],
- changeDetection: ChangeDetectionStrategy.OnPush,
- standalone: false
+@Component({
+ selector: 'saturation',
+ templateUrl: './saturation.component.html',
+ styleUrls: ['./saturation.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ imports: [CommonModule, InteractiveComponent],
 })
 export class SaturationComponent implements DoCheck {
  @Input() color: HsvaColor = defaultHsvaColor;

projects/angular-colorful/src/lib/components/common/saturation/saturation.component.ts

@@ -1,16 +1,18 @@
 import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output} from '@angular/core';
+import {CommonModule} from "@angular/common";
 import {ColorModel} from '../../interfaces/color-model.interface';
 import {HsvaColor} from '../../interfaces/hsva-color.interface';
 import {hexToHsva, hsvaToHex} from '../../utils/convert';
 import {defaultHexStringColor, defaultHsvaColor} from '../../utils/constants';
+import {ColorPickerComponent} from "../common/color-picker/color-picker.component";
 
 
-@Component({
- selector: 'hex-color-picker',
- templateUrl: './hex-color-picker.component.html',
- styleUrls: ['./hex-color-picker.component.scss'],
- changeDetection: ChangeDetectionStrategy.OnPush,
- standalone: false
+@Component({
+ selector: 'hex-color-picker',
+ templateUrl: './hex-color-picker.component.html',
+ styleUrls: ['./hex-color-picker.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ imports: [CommonModule, ColorPickerComponent],
 })
 export class HexColorPickerComponent implements OnChanges, ColorModel<string> {
  @Input() color: string = defaultHexStringColor;