design-angular-kit 1.1.4 → 1.2.1

package/schematics/ng-add/setup-project.spec.ts

@@ -0,0 +1,166 @@
+import { SchematicTestRunner } from '@angular-devkit/schematics/testing';
+import * as path from 'path';
+import { Schema } from './schema';
+
+const createApp = async (
+  runner: SchematicTestRunner,
+  options: Schema,
+  { standalone, style }: { standalone: boolean; style: 'scss' | 'css' | 'sass' }
+) => {
+  let tree = await runner.runExternalSchematic('@schematics/angular', 'workspace', {
+    name: 'workspace',
+    version: '18.0.0',
+    newProjectRoot: 'projects',
+  });
+
+  tree = await runner.runExternalSchematic(
+    '@schematics/angular',
+    'application',
+    {
+      name: options.project,
+      standalone,
+      style,
+    },
+    tree
+  );
+
+  return { tree };
+};
+
+describe(`ng add design-angular-kit | setup-project - library providing`, () => {
+  const collectionPath = path.join(__dirname, '../collection.json');
+  const runner = new SchematicTestRunner('schematics', collectionPath);
+
+  const defaultOptions: Schema = {
+    project: 'test-project', // Set your default project name
+  };
+
+  it('should add DesignAngularKitModule to the root module - NgModule app', async () => {
+    const { tree: appTree } = await createApp(runner, defaultOptions, { standalone: false, style: 'scss' });
+    const tree = await runner.runSchematic('ng-add-setup-project', defaultOptions, appTree);
+
+    // Check if the app.module.ts file exists
+    const modulePath = '/projects/test-project/src/app/app.module.ts';
+    expect(tree.files).toContain(modulePath);
+
+    // Check if the correct import statement was added
+    const content = tree.readContent(modulePath);
+    expect(content).toContain(`import { DesignAngularKitModule } from 'design-angular-kit';`);
+    expect(content).toContain(`DesignAngularKitModule.forRoot()`);
+  });
+
+  it('should add provideDesignAngularKit() to the app config - Standalone app', async () => {
+    const { tree: appTree } = await createApp(runner, defaultOptions, { standalone: true, style: 'scss' });
+    const tree = await runner.runSchematic('ng-add-setup-project', defaultOptions, appTree);
+
+    // Check if the app.module.ts file exists
+    const appConfigPath = '/projects/test-project/src/app/app.config.ts';
+    expect(tree.files).toContain(appConfigPath);
+
+    // Check if the correct import statement was added
+    const content = tree.readContent(appConfigPath);
+    expect(content).toContain(`import { provideDesignAngularKit } from 'design-angular-kit';`);
+    expect(content).toContain(`provideDesignAngularKit()`);
+  });
+});
+
+for (const standalone of [true, false]) {
+  describe(`ng add design-angular-kit | setup-project for ${standalone ? 'standalone' : 'NgModule'} app - styles`, () => {
+    const collectionPath = path.join(__dirname, '../collection.json');
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+
+    const defaultOptions: Schema = {
+      project: 'test-project', // Set your default project name
+    };
+
+    it('should add .scss import to project style file', async () => {
+      const { tree: appTree } = await createApp(runner, defaultOptions, { standalone, style: 'scss' });
+      const tree = await runner.runSchematic('ng-add-setup-project', defaultOptions, appTree);
+
+      // Check if the styles.scss file exists
+      const styleFilePath = '/projects/test-project/src/styles.scss';
+      expect(tree.files).toContain(styleFilePath);
+      // Check if the correct import statement was added
+      const content = tree.readContent(styleFilePath);
+      expect(content).toContain(`@import '../node_modules/bootstrap-italia/src/scss/bootstrap-italia.scss';`);
+    });
+
+    it('should add .sass import to project style file', async () => {
+      const { tree: appTree } = await createApp(runner, defaultOptions, { standalone, style: 'sass' });
+      const tree = await runner.runSchematic('ng-add-setup-project', defaultOptions, appTree);
+
+      // Check if the styles.sass file exists
+      const styleFilePath = '/projects/test-project/src/styles.sass';
+      expect(tree.files).toContain(styleFilePath);
+      // Check if the correct import statement was added
+      const content = tree.readContent(styleFilePath);
+      expect(content).toContain(`@import 'bootstrap-italia/scss/bootstrap-italia'`);
+    });
+
+    it('should add .css import to angular.json', async () => {
+      const { tree: appTree } = await createApp(runner, defaultOptions, { standalone, style: 'css' });
+      const tree = await runner.runSchematic('ng-add-setup-project', defaultOptions, appTree);
+
+      // Check if the angular.json file exists
+      const angularJsonPath = '/angular.json';
+      expect(tree.files).toContain(angularJsonPath);
+      // Check if the correct import statement was added
+      const content = tree.readContent(angularJsonPath);
+      expect(content).toContain(`node_modules/bootstrap-italia/dist/css/bootstrap-italia.min.css`);
+    });
+  });
+
+  describe(`ng add design-angular-kit | setup-project for ${standalone ? 'standalone' : 'NgModule'} app - assets`, () => {
+    const collectionPath = path.join(__dirname, '../collection.json');
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+
+    const defaultOptions: Schema = {
+      project: 'test-project', // Set your default project name
+    };
+
+    it('should add bootstrap italia assets to angular.json', async () => {
+      const { tree: appTree } = await createApp(runner, defaultOptions, { standalone, style: 'css' });
+      const tree = await runner.runSchematic('ng-add-setup-project', defaultOptions, appTree);
+
+      // Check if the angular.json file exists
+      const angularJsonPath = '/angular.json';
+      expect(tree.files).toContain(angularJsonPath);
+      // Check if the correct import statement was added
+      const content = tree.readContent(angularJsonPath);
+      //"./node_modules/bootstrap-italia/"
+      expect(content).toContain(`./node_modules/bootstrap-italia/`);
+      const angularJson = JSON.parse(content);
+      const assetsConfig = angularJson.projects[defaultOptions.project]?.architect?.build?.options?.assets?.find(
+        (item: { input: string }) => item.input === `./node_modules/bootstrap-italia/`
+      );
+      expect(assetsConfig).toBeDefined(assetsConfig);
+    });
+  });
+
+  describe(`ng add design-angular-kit | setup-project for ${standalone ? 'standalone' : 'NgModule'} app - localisation`, () => {
+    const collectionPath = path.join(__dirname, '../collection.json');
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+
+    const defaultOptions: Schema = {
+      project: 'test-project', // Set your default project name
+    };
+
+    it('should add bootstrap italia localisation to angular.json', async () => {
+      const { tree: appTree } = await createApp(runner, defaultOptions, { standalone, style: 'css' });
+      const tree = await runner.runSchematic('ng-add-setup-project', defaultOptions, appTree);
+
+      // Check if the angular.json file exists
+      const angularJsonPath = '/angular.json';
+      expect(tree.files).toContain(angularJsonPath);
+      // Check if the correct import statement was added
+      const content = tree.readContent(angularJsonPath);
+      //"./node_modules/bootstrap-italia/"
+      expect(content).toContain(`/node_modules/design-angular-kit/assets/i18n`);
+      const angularJson = JSON.parse(content);
+      const assetsConfig = angularJson.projects[defaultOptions.project]?.architect?.build?.options?.assets?.find(
+        (item: { input: string }) => item.input === `./node_modules/design-angular-kit/assets/i18n`
+      );
+      expect(assetsConfig).toBeDefined(assetsConfig);
+    });
+  });
+}

package/schematics/ng-add/setup-project.ts

@@ -0,0 +1,31 @@
+import { chain, Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+
+import { getProjectFromWorkspace } from '@angular/cdk/schematics';
+import { getWorkspace } from '@schematics/angular/utility/workspace';
+import { addAnimations, addAssets, addDesignAngularKit, addHttpClient, addImportToStyleFile, addLocalisation } from './rules/setup-project';
+import { Schema } from './schema';
+
+import { ProjectType } from '@schematics/angular/utility/workspace-models';
+
+export default function (options: Schema): Rule {
+  return async (host: Tree, context: SchematicContext) => {
+    const workspace = await getWorkspace(host);
+    const project = getProjectFromWorkspace(workspace, options.project);
+    const isAProject = project.extensions['projectType'] === ProjectType.Application;
+
+    if (isAProject) {
+      return chain([
+        addAnimations(),
+        addHttpClient(),
+        addDesignAngularKit(options),
+        addImportToStyleFile(options),
+        addAssets(options),
+        addLocalisation(options),
+      ]);
+    }
+    context.logger.warn(
+      `Design Angular Kit has been set in your workspace. No additional setup required.\nIf you intend to run the schematics on a specific project, please use -- project option `
+    );
+    return;
+  };
+}

package/schematics/ng-add/utils.ts

@@ -0,0 +1,71 @@
+import { Tree } from '@angular-devkit/schematics';
+
+interface PackageJson {
+  dependencies: Record<string, string>;
+}
+
+interface SemVerObject {
+  semVer?: string;
+  major?: string;
+  minor?: string;
+  patch?: string;
+  prerelease?: string;
+  buildmetadata?: string;
+}
+
+const SEMVER_WITH_PREFIX_REGEX =
+  /^[\^~]?(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9A-Za-z-][0-9A-Za-z-]*)(?:\.(?:0|[1-9A-Za-z-][0-9A-Za-z-]*))*))?(?:\+([0-9A-Za-z-]+(?:\.[0-9A-Za-z-]+)*))?$/;
+
+function sortObjectByKeys(obj: Record<string, string>) {
+  return Object.keys(obj)
+    .sort()
+    .reduce(
+      (result, key) => {
+        result[key] = obj[key];
+        return result;
+      },
+      {} as Record<string, string>
+    );
+}
+
+/** Get a SemVerObject given a semver string */
+export function toSemVerObject(versionString: string) {
+  const [semVer, major, minor, patch, prerelease, buildmetadata] = versionString.match(SEMVER_WITH_PREFIX_REGEX) ?? [];
+  return { semVer, major, minor, patch, prerelease, buildmetadata } satisfies SemVerObject;
+}
+
+/** Adds a package to the package.json in the given host tree. */
+export function addPackageToPackageJson(host: Tree, pkg: string, version: string): Tree {
+  if (host.exists('package.json')) {
+    const sourceText = host.read('package.json')!.toString('utf-8');
+    const json = JSON.parse(sourceText) as PackageJson;
+
+    if (!json.dependencies) {
+      json.dependencies = {};
+    }
+
+    if (!json.dependencies[pkg]) {
+      json.dependencies[pkg] = version;
+      json.dependencies = sortObjectByKeys(json.dependencies);
+    }
+
+    host.overwrite('package.json', JSON.stringify(json, null, 2));
+  }
+
+  return host;
+}
+
+/** Gets the version of the specified package by looking at the package.json in the given tree. */
+export function getPackageVersionFromPackageJson(tree: Tree, name: string): string | null {
+  if (!tree.exists('package.json')) {
+    return null;
+  }
+
+  const packageJson = JSON.parse(tree.read('package.json')!.toString('utf8')) as PackageJson;
+
+  if (packageJson.dependencies && packageJson.dependencies[name]) {
+    return packageJson.dependencies[name];
+  }
+
+  return null;
+}

package/schematics/ng-add/versions-helper.ts

@@ -0,0 +1,41 @@
+const ANGULAR_VERSIONS = {
+  v17: '17',
+  v18: '18',
+};
+
+const KIT_VERSION_1_0_0 = '1.0.0';
+const KIT_VERSION_1_1_0 = '1.1.0';
+const DEFAULT = 'DEFAULT';
+const LATEST = 'LATEST';
+
+const versionsMap: Record<string, string> = {
+  [DEFAULT]: KIT_VERSION_1_0_0,
+  [ANGULAR_VERSIONS.v17]: KIT_VERSION_1_0_0,
+  [ANGULAR_VERSIONS.v18]: KIT_VERSION_1_1_0,
+  [LATEST]: KIT_VERSION_1_1_0,
+};
+
+// Get Design Angular Kit package version given Angular major version
+export function getPackageVersion({ angularMajorVersion }: { angularMajorVersion: string }) {
+  if (isNaN(+angularMajorVersion)) {
+    throw new Error('Major version is not a number');
+  }
+
+  let version = versionsMap[DEFAULT];
+
+  switch (angularMajorVersion) {
+    case ANGULAR_VERSIONS.v17:
+      version = versionsMap[ANGULAR_VERSIONS.v17];
+      break;
+    case ANGULAR_VERSIONS.v18:
+      version = versionsMap[ANGULAR_VERSIONS.v18];
+      break;
+    default: {
+      if (Number(angularMajorVersion) > Number(ANGULAR_VERSIONS.v18)) {
+        version = versionsMap[LATEST];
+      }
+    }
+  }
+
+  return version;
+}

package/src/lib/abstracts/abstract-form.component.ts

@@ -0,0 +1,200 @@
+import { ControlValueAccessor, FormControl, NgControl, ValidatorFn } from '@angular/forms';
+import { Component, DoCheck, Input, OnInit, Optional, Self } from '@angular/core';
+import { ItAbstractComponent } from './abstract.component';
+import { Observable } from 'rxjs';
+import { TranslateService } from '@ngx-translate/core';
+import { inputToBoolean } from '../utils/coercion';
+
+@Component({ template: '' })
+export abstract class ItAbstractFormComponent<T = any> extends ItAbstractComponent implements OnInit, ControlValueAccessor, DoCheck {
+  /**
+   * The label of form control
+   */
+  @Input() label?: string;
+
+  /**
+   * Validation color display mode (validation triggered if field is touched or not pristine)
+   * - <b>true</b>: Always show the validation color
+   * - <b>false</b>: Never show validation color
+   * - <b>only-valid</b>: Show only valid validation color
+   * - <b>only-invalid</b>: Show only invalid validation color
+   * @default <b>true</b>: Always show the validation color
+   */
+  @Input() validationMode: boolean | 'only-valid' | 'only-invalid' = true;
+
+  /**
+   * Set the disabled state
+   */
+  @Input({ transform: inputToBoolean }) set disabled(isDisabled: boolean) {
+    this.setDisabledState(isDisabled);
+  }
+
+  /**
+   * Internal form control
+   */
+  protected control: FormControl<T>;
+
+  constructor(
+    protected readonly _translateService: TranslateService,
+    @Self() @Optional() protected readonly _ngControl: NgControl
+  ) {
+    super();
+    this.control = new FormControl();
+    this._ngControl && (this._ngControl.valueAccessor = this);
+  }
+
+  /**
+   * Check if field is invalid (Validation failed)
+   */
+  get isInvalid(): boolean | undefined {
+    if (this.validationMode === 'only-valid' || (this.validationMode !== 'only-invalid' && !this.validationMode)) {
+      return undefined;
+    }
+
+    if (this._ngControl) {
+      return this._ngControl.invalid === true && (!this._ngControl.pristine || this._ngControl.touched === true);
+    }
+    return this.control.invalid && (!this.control.pristine || this.control.touched);
+  }
+
+  /**
+   * Check if field is valid (Validation successful)
+   */
+  get isValid(): boolean | undefined {
+    if (this.validationMode === 'only-invalid' || (this.validationMode !== 'only-valid' && !this.validationMode)) {
+      return undefined;
+    }
+
+    if (this._ngControl) {
+      return this._ngControl.valid === true && (!this._ngControl.pristine || this._ngControl.touched === true);
+    }
+    return this.control.valid && (!this.control.pristine || this.control.touched);
+  }
+
+  /**
+   * Return the invalid message string from TranslateService
+   */
+  get invalidMessage(): Observable<string> {
+    if (this.hasError('required')) {
+      return this._translateService.get('it.errors.required-field');
+    }
+
+    return this._translateService.get('it.errors.invalid-field');
+  }
+
+  ngOnInit(): void {
+    if (this._ngControl?.control) {
+      this.control.setValidators((this._ngControl.control as FormControl).validator);
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onChange = (_: T) => {};
+
+  onTouched = () => {};
+
+  registerOnChange(fn: any): void {
+    this.control.valueChanges.subscribe(fn);
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    if (isDisabled) {
+      return this.control.disable();
+    }
+    this.control.enable();
+  }
+
+  writeValue(value: T): void {
+    this.control.setValue(value, { emitEvent: false });
+    this._changeDetectorRef.detectChanges();
+  }
+
+  /**
+   * Mark the control as touched
+   */
+  markAsTouched(): void {
+    if (!this.control.touched) {
+      this.onTouched();
+    }
+  }
+
+  /**
+   * Fired to check if form control is touched
+   */
+  ngDoCheck() {
+    if (this._ngControl?.control) {
+      const ngControl = this._ngControl.control;
+      if (this.control.touched !== ngControl.touched) {
+        if (ngControl.touched) {
+          this.control.markAsTouched();
+        } else {
+          this.control.markAsUntouched();
+        }
+      }
+      if (this.control.pristine !== ngControl.pristine) {
+        if (ngControl.pristine) {
+          this.control.markAsPristine();
+        } else {
+          this.control.markAsDirty();
+        }
+      }
+    }
+    this._changeDetectorRef.detectChanges();
+  }
+
+  /**
+   * Add the validators in control and parent control
+   * @param validators the validators
+   * @protected
+   */
+  protected addValidators(validators: ValidatorFn | ValidatorFn[]): void {
+    if (!Array.isArray(validators)) {
+      validators = [validators];
+    }
+
+    validators.forEach(validator => {
+      if (!this.control.hasValidator(validator)) {
+        this.control.addValidators(validator);
+      }
+
+      if (this._ngControl?.control && !this._ngControl.control.hasValidator(validator)) {
+        this._ngControl.control.addValidators(validator);
+      }
+    });
+  }
+
+  /**
+   * Reports whether the control with the given path has the error specified. <br/>
+   * If the control is not present, false is returned.
+   * @param errorCode The code of the error to check
+   * @param path A list of control names that designates how to move from the current control
+   * to the control that should be queried for errors.
+   * @returns whether the given error is present in the control at the given path.
+   */
+  public hasError(errorCode: string, path?: Array<string | number> | string): boolean {
+    if (this._ngControl) {
+      return this._ngControl.hasError(errorCode, path);
+    }
+    return this.control.hasError(errorCode, path);
+  }
+
+  /**
+   * Reports error data for the control with the given path.
+   * @param errorCode The code of the error to check
+   * @param path A list of control names that designates how to move from the current control
+   * to the control that should be queried for errors.
+   * @returns error data for that particular error. If the control or error is not present,
+   * null is returned.
+   */
+  public getError(errorCode: string, path?: Array<string | number> | string): any {
+    if (this._ngControl) {
+      return this._ngControl.getError(errorCode, path);
+    }
+    return this.control.getError(errorCode, path);
+  }
+}

package/src/lib/abstracts/abstract.component.ts

@@ -0,0 +1,63 @@
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  inject,
+  Input,
+  OnChanges,
+  Output,
+  Renderer2,
+  SimpleChanges,
+} from '@angular/core';
+
+@Component({ template: '' })
+export abstract class ItAbstractComponent implements AfterViewInit, OnChanges {
+  /**
+   * The element ID
+   */
+  @Input() id: string = this.getDefaultId();
+
+  /**
+   * Fired when component input attributes was changed
+   */
+  @Output() public valueChanges: EventEmitter<void>;
+
+  /**
+   * Counter of active instances
+   * @private
+   */
+  private static instances = 0;
+
+  protected readonly _renderer: Renderer2; // Injected
+  protected readonly _elementRef: ElementRef; // Injected
+  protected readonly _changeDetectorRef: ChangeDetectorRef; // Injected
+
+  constructor() {
+    this._renderer = inject(Renderer2);
+    this._elementRef = inject(ElementRef);
+    this._changeDetectorRef = inject(ChangeDetectorRef);
+
+    this.valueChanges = new EventEmitter<void>();
+  }
+
+  ngAfterViewInit(): void {
+    this._renderer.removeAttribute(this._elementRef.nativeElement, 'id');
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ngOnChanges(changes: SimpleChanges): void {
+    this.valueChanges.next(); // The inputs were changed
+  }
+
+  /**
+   * Generate unique id for components
+   * @private
+   */
+  private getDefaultId(): string {
+    const name = this.constructor.name.replace('Component', '');
+    const kebabName = name.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
+    return `${kebabName}-${ItAbstractComponent.instances++}`;
+  }
+}

package/src/lib/components/core/accordion/accordion.component.html

@@ -0,0 +1,27 @@
+<div class="accordion">
+  <div class="accordion-item">
+    <h2 class="accordion-header" id="collapse-{{ id }}-heading">
+      <button
+        class="accordion-button"
+        type="button"
+        data-bs-toggle="collapse"
+        [class.collapsed]="isCollapsed"
+        [attr.data-bs-target]="'#collapse-' + id"
+        [attr.aria-controls]="'collapse-' + id"
+        [attr.aria-expanded]="opened ? 'true' : 'false'">
+        {{ title }}
+      </button>
+    </h2>
+
+    <div
+      #collapse
+      id="collapse-{{ id }}"
+      role="region"
+      class="accordion-collapse collapse {{ class }}"
+      [attr.aria-labelledby]="'collapse-' + id + '-heading'">
+      <div class="accordion-body">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  </div>
+</div>

package/src/lib/components/core/accordion/accordion.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItAccordionComponent } from './accordion.component';
+import { tb_base } from '../../../../test';
+
+describe('ItAccordionComponent', () => {
+  let component: ItAccordionComponent;
+  let fixture: ComponentFixture<ItAccordionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule(tb_base).compileComponents();
+
+    fixture = TestBed.createComponent(ItAccordionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/core/accordion/accordion.component.ts

@@ -0,0 +1,40 @@
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { ItCollapseComponent } from '../collapse/collapse.component';
+
+/**
+ * Accordion
+ * @description Build vertically collapsible accordions based on Collapse.
+ */
+@Component({
+  standalone: true,
+  selector: 'it-accordion',
+  templateUrl: './accordion.component.html',
+  exportAs: 'itAccordion',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [],
+})
+export class ItAccordionComponent extends ItCollapseComponent implements AfterViewInit {
+  /**
+   * Accordion Title
+   */
+  @Input({ required: true }) title!: string;
+
+  @ViewChild('collapse') protected override collapseDiv?: ElementRef<HTMLDivElement>;
+
+  protected isCollapsed: boolean = true;
+
+  override ngAfterViewInit(): void {
+    super.ngAfterViewInit();
+    this._renderer.removeAttribute(this._elementRef.nativeElement, 'title');
+
+    this.isCollapsed = !this.opened;
+    this.hideEvent.subscribe(() => {
+      this.isCollapsed = true;
+      this._changeDetectorRef.detectChanges();
+    });
+    this.showEvent.subscribe(() => {
+      this.isCollapsed = false;
+      this._changeDetectorRef.detectChanges();
+    });
+  }
+}

package/src/lib/components/core/alert/alert.component.html

@@ -0,0 +1,19 @@
+<div
+  #alertElement
+  class="alert alert-{{ color }}"
+  [class.alert-dismissible]="dismissible"
+  [class.fade]="dismissible"
+  [class.show]="dismissible"
+  role="alert">
+  <h4 class="alert-heading">
+    <ng-content select="[heading]"></ng-content>
+  </h4>
+
+  <ng-content></ng-content>
+
+  @if (dismissible) {
+    <button type="button" class="btn-close" data-bs-dismiss="alert" [attr.aria-label]="'it.core.close-alert' | translate">
+      <it-icon name="close"></it-icon>
+    </button>
+  }
+</div>

package/src/lib/components/core/alert/alert.component.scss

@@ -0,0 +1,3 @@
+.alert-heading:empty {
+  display: none;
+}