feat(core): accept custom-generated colors in component inputs

projects/design-angular-kit/src/lib/components/core/alert/alert.component.spec.ts

@@ -60,4 +60,18 @@ describe('ItAlertComponent', () => {
     const spanElement = fixture.debugElement.query(By.css('div.alert.alert-success'));
     expect(spanElement).toBeTruthy();
   });
+
+  it('should accept a custom-generated color (e.g. primary-a1 from Bootstrap Italia HSB)', () => {
+    component.selectedColor = 'primary-a1';
+    fixture.detectChanges();
+    const el = fixture.debugElement.query(By.css('div.alert.alert-primary-a1'));
+    expect(el).toBeTruthy();
+  });
+
+  it('should accept an analogue custom color (e.g. analogue-1-a2)', () => {
+    component.selectedColor = 'analogue-1-a2';
+    fixture.detectChanges();
+    const el = fixture.debugElement.query(By.css('div.alert.alert-analogue-1-a2'));
+    expect(el).toBeTruthy();
+  });
 });

projects/design-angular-kit/src/lib/interfaces/core.ts

@@ -1,6 +1,6 @@
 import { IconName } from './icon';
 
-export type AlertColor = 'primary' | 'info' | 'success' | 'warning' | 'danger';
+export type AlertColor = 'primary' | 'info' | 'success' | 'warning' | 'danger' | (string & {});
 
 export type ButtonColor =
   | 'primary'
@@ -19,23 +19,24 @@ export type ButtonColor =
   | 'outline-light'
   | 'dark'
   | 'outline-dark'
-  | 'link';
+  | 'link'
+  | (string & {});
 
 export type ButtonSize = 'lg' | 'sm' | 'xs';
 export type ButtonType = 'submit' | 'button';
 
-export type CalloutColor = 'success' | 'warning' | 'danger' | 'important' | 'note';
+export type CalloutColor = 'success' | 'warning' | 'danger' | 'important' | 'note' | (string & {});
 export type CalloutAppearance = 'default' | 'highlight' | 'more';
 
-export type ChipColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning';
+export type ChipColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | (string & {});
 
 export type ElementPlacement = 'top' | 'bottom' | 'left' | 'right';
 
-export type ProgressBarColor = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export type ProgressBarColor = 'primary' | 'success' | 'warning' | 'danger' | 'info' | (string & {});
 
-export type BadgeColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+export type BadgeColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | (string & {});
 
-export type TableColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
+export type TableColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | (string & {});
 
 export type TableHeadColor = 'light' | 'dark';
 

projects/design-angular-kit/src/lib/interfaces/icon.ts

@@ -1,6 +1,6 @@
 export type IconSize = 'xs' | 'sm' | 'lg' | 'xl';
 
-export type IconColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'white';
+export type IconColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'white' | (string & {});
 
 export type IconName = (typeof IconNameArray)[number];
 

src/app/alert/alert-custom-color-example/alert-custom-color-example.component.html

@@ -0,0 +1,15 @@
+<h3>Colori personalizzati</h3>
+<p class="mb-4">
+  Tutti i componenti con input di colore (<code>AlertColor</code>, <code>ButtonColor</code>, <code>BadgeColor</code>, ecc.) accettano anche
+  stringhe custom oltre ai colori predefiniti. Questo permette di utilizzare le classi CSS generate dal tema Bootstrap Italia
+  personalizzato.
+</p>
+
+<it-alert color="primary"> <strong>Primary</strong> — Colore predefinito del tema. </it-alert>
+
+<it-alert color="teal">
+  <strong>Teal</strong> — Colore custom: la classe <code>alert-teal</code> viene applicata. Richiede che il tema CSS definisca
+  <code>.alert-teal</code>.
+</it-alert>
+
+<it-alert color="indigo"> <strong>Indigo</strong> — Altro colore custom: genera la classe <code>alert-indigo</code>. </it-alert>

src/app/alert/alert-custom-color-example/alert-custom-color-example.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-alert-custom-color-example',
+  templateUrl: './alert-custom-color-example.component.html',
+})
+export class AlertCustomColorExampleComponent {}

src/app/alert/alert-examples/alert-examples.component.tpl

@@ -40,3 +40,16 @@
 
 <it-source-display html="{$ sanitize(htmlClosing) $}" typescript="{$ sanitize(typescriptClosing) $}" >
 </it-source-display>
+
+{% set htmlCustomColor %}
+  {% include "../alert-custom-color-example/alert-custom-color-example.component.html" %}
+{% endset %}
+
+{% set typescriptCustomColor %}
+  {% include "../alert-custom-color-example/alert-custom-color-example.component.ts" %}
+{% endset %}
+
+<it-alert-custom-color-example></it-alert-custom-color-example>
+
+<it-source-display html="{$ sanitize(htmlCustomColor) $}" typescript="{$ sanitize(typescriptCustomColor) $}" >
+</it-source-display>

src/app/alert/alert.module.ts

@@ -7,6 +7,7 @@ import { SharedModule } from '../shared/shared.module';
 import { AlertColorExampleComponent } from './alert-color-example/alert-color-example.component';
 import { AlertAdditionalContentExampleComponent } from './alert-additional-content-example/alert-additional-content-example.component';
 import { AlertClosingExampleComponent } from './alert-closing-example/alert-closing-example.component';
+import { AlertCustomColorExampleComponent } from './alert-custom-color-example/alert-custom-color-example.component';
 
 @NgModule({
   declarations: [
@@ -15,6 +16,7 @@ import { AlertClosingExampleComponent } from './alert-closing-example/alert-clos
     AlertColorExampleComponent,
     AlertAdditionalContentExampleComponent,
     AlertClosingExampleComponent,
+    AlertCustomColorExampleComponent,
   ],
   imports: [CommonModule, SharedModule, AlertRoutingModule],
 })