feat(design): move each button type to its own component

[xelaint]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/graycoreio/daffodil/blob/develop/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

Fixes: #3196

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

[xelaint]

@damienwebdev The @if for prefix and suffix works, but the issue with splitting the components up is that DAFF_BUTTON_COMPONENTS, handles exporting the DaffPrefixSuffixModule so that the usage component doesn't have to import it.

Since each component example is only importing the specific button type (i.e. DaffFlatButtonComponent), the DaffPrefixSuffixModule import here doesn't actually work.

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: '' +
    'button[daff-flat-button]' + ',' +
    'a[daff-flat-button]',
  templateUrl: '../button-base.component.html',
  styleUrl: './flat.component.scss',
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [
    DaffPrefixSuffixModule,
    DAFF_LOADING_ICON_COMPONENTS,
  ],
})

[damienwebdev]

@xelaint I think that's perfectly fine. While the prefix suffix code is tiny, we still don't want to encourage people to import code they don't use. If they want to use prefix and suffix, they can import it.

[damienwebdev]

lgtm