feat: move to standalone

Author: HitkoDev

packages/color-picker/src/lib/color-picker.directive.ts

@@ -10,8 +10,7 @@ import { ColorPickerComponent } from './color-picker/color-picker.component'
 
 @Directive({
     selector: '[nxtColor]',
-    exportAs: 'nxtColorPicker',
-    standalone: false
+    exportAs: 'nxtColorPicker'
 })
 export class ColorPickerDirective implements OnChanges, OnDestroy {
 

packages/color-picker/src/lib/color-picker.module.ts

@@ -1,21 +1,10 @@
-import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
-import { OverlayModule } from '@angular/cdk/overlay'
 import { ColorPickerDirective } from './color-picker.directive'
-import { ColorPickerComponent } from './color-picker/color-picker.component'
-import { SliderDirective } from './slider.directive'
-import { TextDirective } from './text.directive'
 
+/** @deprecated use standalone imports */
 @NgModule({
-    declarations: [
-        TextDirective,
-        SliderDirective,
-        ColorPickerComponent,
-        ColorPickerDirective
-    ],
     imports: [
-        CommonModule,
-        OverlayModule
+        ColorPickerDirective
     ],
     exports: [
         ColorPickerDirective

packages/color-picker/src/lib/color-picker/color-picker.component.spec.ts

@@ -1,8 +1,6 @@
 import { ApplicationRef, ElementRef, Injector } from '@angular/core'
 import { ComponentFixture, inject, TestBed } from '@angular/core/testing'
 import { ColorPickerDirective } from '../color-picker.directive'
-import { SliderDirective } from '../slider.directive'
-import { TextDirective } from '../text.directive'
 import { ColorPickerComponent } from './color-picker.component'
 
 describe('ColorPickerComponent', () => {
@@ -14,13 +12,7 @@ describe('ColorPickerComponent', () => {
     let fixture: ComponentFixture<ColorPickerComponent>
 
     beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            declarations: [
-                SliderDirective,
-                TextDirective,
-                ColorPickerComponent
-            ]
-        })
+        await TestBed.configureTestingModule({})
             .compileComponents()
     })
 

packages/color-picker/src/lib/color-picker/color-picker.component.ts

@@ -1,10 +1,13 @@
 import { AfterViewChecked, ChangeDetectorRef, Component, ElementRef, HostListener, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'
+import { NgStyle, NgClass } from '@angular/common'
 import { cmykToRgb, denormalizeCMYK, denormalizeHSLA, denormalizeRGBA, formatCmyk, formatOutput, hslaToHsva, hsvaToHsla, hsvaToRgba, rgbaToCmyk, rgbaToHex, rgbaToHsva, stringToCmyk, stringToHsva } from '../../util/color'
 import { opaqueSliderLight, transparentSliderLight } from '../../util/contrast'
 import { Cmyk, Hsla, Hsva, Rgba } from '../../util/formats'
 import { ColorModeInternal, composedPath, CursorEvent, DialogConfig, DirectiveCallbacks, parseColorMode, sizeToString, SliderPosition, TextEvent } from '../../util/helpers'
 import { AlphaChannel, AlphaChannelEnum, AlphaEnabledFormats, ColorFormat, ColorFormatEnum, DialogDisplay, DialogDisplayEnum, OutputFormat, OutputFormatEnum } from '../../util/types'
 import { ColorPickerService } from '../color-picker.service'
+import { SliderDirective } from '../slider.directive'
+import { TextDirective } from '../text.directive'
 
 /**
  * @internal
@@ -14,7 +17,12 @@ import { ColorPickerService } from '../color-picker.service'
     templateUrl: './color-picker.component.html',
     styleUrls: ['./color-picker.component.scss'],
     encapsulation: ViewEncapsulation.Emulated,
-    standalone: false
+    imports: [
+        NgStyle,
+        SliderDirective,
+        NgClass,
+        TextDirective
+    ]
 })
 export class ColorPickerComponent implements OnInit, OnDestroy, AfterViewChecked {
 

packages/color-picker/src/lib/slider.directive.ts

@@ -5,8 +5,7 @@ import { CursorEvent } from '../util/helpers'
  * @internal
  */
 @Directive({
-    selector: '[nxtSlider]',
-    standalone: false
+    selector: '[nxtSlider]'
 })
 export class SliderDirective {
 

packages/color-picker/src/lib/text.directive.ts

@@ -5,8 +5,7 @@ import { TextEvent } from '../util/helpers'
  * @internal
  */
 @Directive({
-    selector: '[nxtText]',
-    standalone: false
+    selector: '[nxtText]'
 })
 export class TextDirective {
 

packages/demo/src/app/app.component.ts

@@ -18,6 +18,11 @@ const hidden = style({
     marginBottom: '0px'
 })
 
+type MenuItem = {
+    label: string
+    children?: MenuItem[]
+} & ({ link: string, url?: undefined } | { link?: undefined, url: string })
+
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
@@ -58,7 +63,7 @@ export class AppComponent {
 
     readonly logo = logo
 
-    readonly menuItems = [
+    readonly menuItems: MenuItem[] = [
         {
             label: 'nxt-color-picker',
             link: '/color-picker',

packages/demo/src/app/color-picker/color-picker/color-picker.component.ts

@@ -1,7 +1,7 @@
 import { OverlayContainer } from '@angular/cdk/overlay'
 import { Platform } from '@angular/cdk/platform'
-
-import { Component, Injector, OnInit, PendingTasks, DOCUMENT } from '@angular/core'
+import { AsyncPipe } from '@angular/common'
+import { Component, DOCUMENT, Injector, OnInit, PendingTasks } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
 import { ContentWrapComponent } from '../../content-wrap/content-wrap.component'
@@ -18,7 +18,8 @@ import { WaitLoad } from '../../utils/wait-load.class'
         ContentWrapComponent,
         RouterModule,
         ExampleComponent,
-        BsDropdownModule
+        BsDropdownModule,
+        AsyncPipe
     ]
 })
 export class AppColorPickerComponent extends WaitLoad implements OnInit {

packages/demo/src/app/example/example.component.html

@@ -46,7 +46,7 @@ <h2 class="h3">{{ config.name }}</h2>
             }
         </tabset>
         } @else {
-        @if (sources?.[0]; as source) {
+        @if (sources[0]; as source) {
         <div class="example-tab-content example-tab-content--single">
             <pre><code [nxtHighlightAuto]="source.code"
                   [languages]="[source.language]"

packages/dropzone-wrapper/src/lib/dropzone.component.ts

@@ -15,7 +15,9 @@ import { DropzoneConfig, DropzoneListeners, NXT_DROPZONE_LISTENERS } from './dro
         provide: NXT_DROPZONE_LISTENERS,
         useExisting: DropzoneComponent
     }],
-    standalone: false
+    imports: [
+        DropzoneDirective
+    ]
 })
 export class DropzoneComponent implements OnInit, DropzoneListeners {