feat(design): deprecate DaffPrefixSuffixModule and add component array option (#4273)

Author: xelaint

libs/design-examples/tabs/src/basic-tabs/basic-tabs.component.ts

@@ -5,7 +5,7 @@ import {
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 
-import { DaffPrefixSuffixModule } from '@daffodil/design';
+import { DAFF_PREFIX_SUFFIX_DIRECTIVES } from '@daffodil/design';
 import { DAFF_TABS_COMPONENTS } from '@daffodil/design/tabs';
 
 @Component({
@@ -15,7 +15,7 @@ import { DAFF_TABS_COMPONENTS } from '@daffodil/design/tabs';
   imports: [
     DAFF_TABS_COMPONENTS,
     FaIconComponent,
-    DaffPrefixSuffixModule,
+    DAFF_PREFIX_SUFFIX_DIRECTIVES,
   ],
 })
 export class BasicTabsExampleComponent {

libs/design-examples/tabs/src/custom-select-tabs/custom-select-tabs.component.ts

@@ -6,7 +6,7 @@ import {
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 
-import { DaffPrefixSuffixModule } from '@daffodil/design';
+import { DAFF_PREFIX_SUFFIX_DIRECTIVES } from '@daffodil/design';
 import { DaffButtonComponent } from '@daffodil/design/button';
 import {
   DAFF_TABS_COMPONENTS,
@@ -22,7 +22,7 @@ import {
     DAFF_TABS_COMPONENTS,
     DaffButtonComponent,
     FaIconComponent,
-    DaffPrefixSuffixModule,
+    DAFF_PREFIX_SUFFIX_DIRECTIVES,
   ],
 })
 export class CustomSelectTabsExampleComponent {

libs/design-examples/tabs/src/disabled-tabs/disabled-tabs.component.ts

@@ -5,7 +5,7 @@ import {
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 
-import { DaffPrefixSuffixModule } from '@daffodil/design';
+import { DAFF_PREFIX_SUFFIX_DIRECTIVES } from '@daffodil/design';
 import { DAFF_TABS_COMPONENTS } from '@daffodil/design/tabs';
 
 @Component({
@@ -15,7 +15,7 @@ import { DAFF_TABS_COMPONENTS } from '@daffodil/design/tabs';
   imports: [
     DAFF_TABS_COMPONENTS,
     FaIconComponent,
-    DaffPrefixSuffixModule,
+    DAFF_PREFIX_SUFFIX_DIRECTIVES,
   ],
 })
 export class DisabledTabsExampleComponent {

libs/design-examples/tabs/src/initially-select-tab/initially-select-tab.component.ts

@@ -5,7 +5,7 @@ import {
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 
-import { DaffPrefixSuffixModule } from '@daffodil/design';
+import { DAFF_PREFIX_SUFFIX_DIRECTIVES } from '@daffodil/design';
 import { DAFF_TABS_COMPONENTS } from '@daffodil/design/tabs';
 
 @Component({
@@ -15,7 +15,7 @@ import { DAFF_TABS_COMPONENTS } from '@daffodil/design/tabs';
   imports: [
     DAFF_TABS_COMPONENTS,
     FaIconComponent,
-    DaffPrefixSuffixModule,
+    DAFF_PREFIX_SUFFIX_DIRECTIVES,
   ],
 })
 export class InitiallySelectTabExampleComponent {

libs/design-examples/tabs/src/link-tabs/link-tabs.component.ts

@@ -5,7 +5,7 @@ import {
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 
-import { DaffPrefixSuffixModule } from '@daffodil/design';
+import { DAFF_PREFIX_SUFFIX_DIRECTIVES } from '@daffodil/design';
 import { DAFF_TABS_COMPONENTS } from '@daffodil/design/tabs';
 
 @Component({
@@ -15,7 +15,7 @@ import { DAFF_TABS_COMPONENTS } from '@daffodil/design/tabs';
   imports: [
     DAFF_TABS_COMPONENTS,
     FaIconComponent,
-    DaffPrefixSuffixModule,
+    DAFF_PREFIX_SUFFIX_DIRECTIVES,
   ],
 })
 export class LinkTabsExampleComponent {

libs/design/src/core/prefix-suffix/prefix-suffix.module.ts

@@ -3,6 +3,9 @@ import { NgModule } from '@angular/core';
 import { DaffPrefixDirective } from './prefix.directive';
 import { DaffSuffixDirective } from './suffix.directive';
 
+/**
+ * @deprecated in favor of standalone components. Deprecated in version 0.91.0. Will be removed in version 1.0.0.
+ */
 @NgModule({
   imports: [
     DaffPrefixDirective,

libs/design/src/core/prefix-suffix/prefix-suffix.ts

@@ -0,0 +1,7 @@
+import { DaffPrefixDirective } from './prefix.directive';
+import { DaffSuffixDirective } from './suffix.directive';
+
+export const DAFF_PREFIX_SUFFIX_DIRECTIVES = <const> [
+  DaffPrefixDirective,
+  DaffSuffixDirective,
+];

libs/design/src/core/prefix-suffix/prefix.directive.ts

@@ -1,20 +1,13 @@
-import {
-  Directive,
-  HostBinding,
-} from '@angular/core';
+import { Directive } from '@angular/core';
 
 /**
- *
- * Prefix can be used to place content before another piece of content in components like
- * `daff-form-field`, `daff-solo-field`, and `daff-list`.
+ * DaffPrefixDirective can be used to place content before another piece of content
+ * in components like `DaffFormFieldComponent` or `DaffListComponent`.
  */
 @Directive({
   selector: '[daffPrefix]',
+  host: {
+    class: 'daff-prefix',
+  },
 })
-export class DaffPrefixDirective {
-
-  /**
-   * @docs-private
-   */
-  @HostBinding('class.daff-prefix') class = true;
-}
+export class DaffPrefixDirective {}

libs/design/src/core/prefix-suffix/public_api.ts

@@ -1,3 +1,4 @@
 export * from './prefix-suffix.module';
-export * from './prefix.directive';
-export * from './suffix.directive';
+export { DaffPrefixDirective } from './prefix.directive';
+export { DaffSuffixDirective } from './suffix.directive';
+export { DAFF_PREFIX_SUFFIX_DIRECTIVES } from './prefix-suffix';

libs/design/src/core/prefix-suffix/suffix.directive.ts

@@ -1,20 +1,13 @@
-import {
-  Directive,
-  HostBinding,
-} from '@angular/core';
+import { Directive } from '@angular/core';
 
 /**
- *
- * Prefix can be used to place content after another piece of content in components like
- * `daff-form-field`, `daff-solo-field`, and `daff-list`.
+ * DaffSuffixDirective can be used to place content after another piece of content
+ * in components like `DaffFormFieldComponent` or `DaffListComponent`.
  */
 @Directive({
   selector: '[daffSuffix]',
+  host: {
+    class: 'daff-suffix',
+  },
 })
-export class DaffSuffixDirective {
-
-  /**
-   * @docs-private
-   */
-  @HostBinding('class.daff-suffix') class = true;
-}
+export class DaffSuffixDirective { }