design-angular-kit 1.2.1 → 1.2.2

package/src/lib/components/core/avatar/avatar-group/avatar-group.component.ts

@@ -1,25 +0,0 @@
-import { Component, ContentChildren, HostBinding, Input, QueryList, TemplateRef, ViewChild } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
-import { inputToBoolean } from '../../../../utils/coercion';
-
-@Component({
-  standalone: true,
-  selector: 'it-avatar-item',
-  template: '<ng-template><ng-content></ng-content></ng-template>',
-})
-export class ItAvatarGroupItemComponent {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  @ViewChild(TemplateRef, { static: true }) _implicitContent!: TemplateRef<any>;
-}
-
-@Component({
-  standalone: true,
-  selector: 'it-avatar-group',
-  templateUrl: './avatar-group.component.html',
-  imports: [NgTemplateOutlet],
-})
-export class ItAvatarGroupComponent {
-  @Input({ transform: inputToBoolean }) @HostBinding('class.link-list-wrapper') linkList = false;
-
-  @ContentChildren(ItAvatarGroupItemComponent) avatars!: QueryList<ItAvatarGroupItemComponent>;
-}

package/src/lib/components/core/avatar/avatar.directive.ts

@@ -1,73 +0,0 @@
-import { ColorsEnum } from '../../../enums/colors.enums';
-import { SizesEnum } from '../../../enums/sizes.enum';
-import { Directive, HostBinding, Input } from '@angular/core';
-
-@Directive({
-  standalone: true,
-  selector: '[itAvatar]',
-  exportAs: 'itAvatar',
-})
-export class ItAvatarDirective {
-  /**
-   * Indica il colore dell'avatar. Può assumere i valori:
-   * <ul>
-   * <li> primary
-   * <li> secondary
-   * <li> green
-   * <li> orange
-   * <li> red
-   * </ul>
-   */
-  @Input()
-  get color(): string | undefined {
-    return this._color;
-  }
-  set color(value: string | undefined) {
-    const colorsKey = value as keyof typeof ColorsEnum;
-    if (ColorsEnum[colorsKey]) {
-      this._color = ColorsEnum[colorsKey];
-    } else {
-      this._color = undefined;
-    }
-  }
-  private _color?: ColorsEnum;
-  /**
-   * Indica la grandezza dell'avatar. Può assumere i valori:
-   * <ul>
-   * <li> xs
-   * <li> sm
-   * <li> lg
-   * <li> xl
-   * <li> xxl
-   * </ul>
-   */
-  @Input()
-  get size(): SizesEnum | undefined {
-    return this._size;
-  }
-  set size(value: string | undefined) {
-    const sizesKey = value as keyof typeof SizesEnum;
-    if (SizesEnum[sizesKey]) {
-      this._size = SizesEnum[sizesKey];
-    } else {
-      this._size = undefined;
-    }
-  }
-
-  private _size?: SizesEnum;
-
-  @HostBinding('class')
-  get hostClasses(): string {
-    let cssClass = 'avatar';
-
-    if (this.size) {
-      cssClass += ` ${this.size}`;
-    }
-
-    if (this.color) {
-      cssClass += ` avatar-${this.color}`;
-    }
-
-    return cssClass;
-  }
-}

package/src/lib/components/core/avatar/avatar.module.ts

@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { ItAvatarGroupComponent, ItAvatarGroupItemComponent } from './avatar-group/avatar-group.component';
-import { ItAvatarDropdownComponent, ItAvatarDropdownItemComponent } from './avatar-dropdown/avatar-dropdown.component';
-import { ItAvatarDirective } from './avatar.directive';
-
-const avatarComponents = [
-  ItAvatarGroupItemComponent,
-  ItAvatarGroupComponent,
-  ItAvatarDropdownComponent,
-  ItAvatarDropdownItemComponent,
-  ItAvatarDirective,
-];
-
-@NgModule({
-  imports: avatarComponents,
-  exports: avatarComponents,
-})
-export class ItAvatarModule {}

package/src/lib/components/core/badge/badge.directive.spec.ts

@@ -1,59 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { BadgeColor } from '../../../interfaces/core';
-import { ItBadgeDirective } from './badge.directive';
-
-@Component({
-  selector: 'it-unit-test',
-  template: `
-    <h5>
-      Testo di esempio <span [itBadge]="selectedColor" [rounded]="isRounded">{{ badgeText }}</span>
-    </h5>
-  `,
-})
-class UnitTestComponent {
-  @Input() set selectedColor(value: BadgeColor | undefined) {
-    this._selectedColor = value;
-  }
-  get selectedColor(): BadgeColor | undefined {
-    return this._selectedColor;
-  }
-  private _selectedColor: BadgeColor | undefined = undefined;
-
-  @Input() set isRounded(value: boolean) {
-    this._isRounded = value;
-  }
-  get isRounded(): boolean {
-    return this._isRounded;
-  }
-  private _isRounded: boolean = undefined;
-}
-
-describe('ItBadgeDirective', () => {
-  let component: UnitTestComponent;
-  let fixture: ComponentFixture<UnitTestComponent>;
-  beforeEach(fakeAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [UnitTestComponent],
-      imports: [ItBadgeDirective],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(UnitTestComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  }));
-
-  it('should create an instance', () => {
-    const directive = new ItBadgeDirective();
-    expect(directive).toBeTruthy();
-  });
-
-  it('can have color primary and be rounded', () => {
-    component.isRounded = true;
-    component.selectedColor = 'primary';
-    fixture.detectChanges();
-    const spanElement = fixture.debugElement.query(By.css('.badge.rounded-pill.bg-primary'));
-    expect(spanElement).toBeTruthy();
-  });
-});

package/src/lib/components/core/badge/badge.directive.ts

@@ -1,39 +0,0 @@
-import { Directive, HostBinding, Input } from '@angular/core';
-import { BadgeColor } from '../../../interfaces/core';
-import { inputToBoolean } from '../../../utils/coercion';
-
-/**
- * Badge
- * @description Useful for small counters and labels
- */
-@Directive({
-  standalone: true,
-  selector: '[itBadge]',
-  exportAs: 'itBadge',
-})
-export class ItBadgeDirective {
-  /**
-   * Define the badge color
-   * @default undefined
-   */
-  @Input('itBadge') color: BadgeColor | undefined;
-
-  /**
-   * Show rounded badge
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) rounded?: boolean;
-
-  @HostBinding('class')
-  protected get badgeClass(): string {
-    let badgeClass = 'badge';
-    if (this.rounded) {
-      badgeClass += ` rounded-pill`;
-    }
-    if (this.color) {
-      badgeClass += ` bg-${this.color}`;
-    }
-
-    return badgeClass;
-  }
-}

package/src/lib/components/core/button/button.directive.spec.ts

@@ -1,96 +0,0 @@
-import { ItButtonDirective } from './button.directive';
-import { Component, DebugElement } from '@angular/core';
-import { ButtonColor } from '../../../interfaces/core';
-import { FormsModule } from '@angular/forms';
-import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-
-/** Componente per testare una singola button. */
-@Component({
-  template: ` <div>
-    <button [disabled]="disabled" [itButton]="color" (click)="onClick()">
-      {{ label }}
-    </button>
-  </div>`,
-})
-class SingleButtonComponent {
-  disabled = false;
-  color: ButtonColor = 'primary';
-  count = 0;
-  label = 'Test Button';
-
-  onClick = () => {
-    this.count++;
-  };
-}
-
-describe('ItButtonDirective', () => {
-  beforeEach(fakeAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [FormsModule, ItButtonDirective],
-      declarations: [SingleButtonComponent],
-    });
-
-    TestBed.compileComponents();
-  }));
-
-  describe('comportamenti base', () => {
-    let fixture: ComponentFixture<SingleButtonComponent>;
-    let buttonDebugElement: DebugElement;
-    let buttonNativeElement: HTMLElement;
-    let buttonInstance: ItButtonDirective;
-    let testComponent: SingleButtonComponent;
-
-    beforeEach(() => {
-      fixture = TestBed.createComponent(SingleButtonComponent);
-      fixture.detectChanges();
-
-      buttonDebugElement = fixture.debugElement.query(By.directive(ItButtonDirective));
-      buttonNativeElement = buttonDebugElement.nativeElement;
-      buttonInstance = buttonDebugElement.componentInstance;
-      testComponent = fixture.debugElement.componentInstance;
-    });
-
-    it('dovrebbe poter essere abilitato e disabilitato', () => {
-      expect(buttonInstance.disabled).toBe(false);
-
-      testComponent.disabled = true;
-      fixture.detectChanges();
-
-      expect(buttonInstance.disabled).toBe(true);
-
-      testComponent.disabled = false;
-      fixture.detectChanges();
-
-      expect(buttonInstance.disabled).toBe(false);
-    });
-
-    it("dovrebbe ricevere l'evento di click", () => {
-      expect(testComponent.count).toBe(0);
-      fixture.detectChanges();
-
-      buttonNativeElement.click();
-      fixture.detectChanges();
-
-      expect(testComponent.count).toBe(1);
-
-      buttonNativeElement.click();
-      fixture.detectChanges();
-
-      expect(testComponent.count).toBe(2);
-    });
-
-    it('dovrebbe poter cambiare colore', () => {
-      expect(testComponent.color).toBe('primary');
-      expect(buttonInstance.color).toBe('primary');
-
-      testComponent.color = 'secondary';
-      fixture.detectChanges();
-      expect(buttonInstance.color).toBe('secondary');
-    });
-
-    it('dovrebbe generare un id univoco per bottone', () => {
-      expect(buttonNativeElement.textContent.trim()).toBe('Test Button');
-    });
-  });
-});

package/src/lib/components/core/button/button.directive.ts

@@ -1,89 +0,0 @@
-import { ContentChildren, Directive, Host, HostBinding, Input, Optional, QueryList } from '@angular/core';
-import { ButtonColor, ButtonSize } from '../../../interfaces/core';
-import { ItIconComponent } from '../../utils/icon/icon.component';
-import { ItProgressButtonComponent } from '../progress-button/progress-button.component';
-import { inputToBoolean } from '../../../utils/coercion';
-
-/**
- * Button
- * @description Bootstrap italia custom button styles
- */
-@Directive({
-  standalone: true,
-  selector: '[itButton]',
-  exportAs: 'itButton',
-})
-export class ItButtonDirective {
-  /**
-   * Button color
-   * @default undefined
-   */
-  @Input('itButton') color: ButtonColor | undefined;
-
-  /**
-   * Button size
-   * @default undefined
-   */
-  @Input() size: ButtonSize | undefined;
-
-  /**
-   * Indicates whether the button occupies all the width available to it.
-   * @default undefined
-   */
-  @Input() block: ButtonSize | undefined;
-
-  /**
-   * If button is disabled
-   * @default false
-   */
-  @Input({ transform: inputToBoolean })
-  @HostBinding('disabled')
-  disabled?: boolean;
-
-  /**
-   * The type attribute
-   * @default button
-   */
-  @Input()
-  @HostBinding('type')
-  type: 'button' | 'reset' | 'submit' = 'button';
-
-  /**
-   * The icon children
-   * @default undefined
-   */
-  @ContentChildren(ItIconComponent) protected icons?: QueryList<ItIconComponent>;
-
-  constructor(@Optional() @Host() private progressButtonComponent: ItProgressButtonComponent) {}
-
-  @HostBinding('class')
-  protected get hostClasses(): string {
-    let cssClass = 'btn';
-
-    if (this.color) {
-      cssClass += ` btn-${this.color}`;
-    }
-
-    if (this.size) {
-      cssClass += ` btn-${this.size}`;
-    }
-
-    if (this.block) {
-      cssClass += ' btn-block';
-    }
-
-    if (this.disabled) {
-      cssClass += ' disabled';
-    }
-
-    if (this.icons?.length && !this.progressButtonComponent) {
-      cssClass += ' btn-icon';
-    }
-
-    if (this.progressButtonComponent) {
-      cssClass += ' btn-progress';
-    }
-
-    return cssClass;
-  }
-}

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

@@ -1,25 +0,0 @@
-<div class="callout {{ color }}" [class.callout-highlight]="appearance === 'highlight'" [class.callout-more]="appearance === 'more'">
-  @if (appearance === 'default') {
-    <div class="callout-inner">
-      <ng-container *ngTemplateOutlet="inner"></ng-container>
-    </div>
-  } @else {
-    <ng-container *ngTemplateOutlet="inner"></ng-container>
-  }
-</div>
-
-<ng-template #inner>
-  @if (label) {
-    <div class="callout-title">
-      <it-icon [labelWaria]="labelWaria" [name]="iconName"></it-icon>
-      @if (hiddenLabel) {
-        <span class="visually-hidden">{{ hiddenLabel }}</span>
-      }
-      <span class="text">{{ label }}</span>
-    </div>
-  }
-  <p class="callout-big-text">
-    <ng-content select="[bigText]"></ng-content>
-  </p>
-  <ng-content></ng-content>
-</ng-template>

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

@@ -1,138 +0,0 @@
-import { ChangeDetectionStrategy } from '@angular/core';
-import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-
-import { ItCalloutComponent } from './callout.component';
-import { tb_base } from '../../../../test';
-
-describe('ItCalloutComponent', () => {
-  let component: ItCalloutComponent;
-  let fixture: ComponentFixture<ItCalloutComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule(tb_base)
-      .overrideComponent(ItCalloutComponent, {
-        set: { changeDetection: ChangeDetectionStrategy.Default },
-      })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(ItCalloutComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('if i set a color, that class will be on div with class callout', fakeAsync(() => {
-    component.color = 'note';
-    fixture.detectChanges();
-    const divPrimaryElement = fixture.debugElement.query(By.css('div.callout.note'));
-    expect(divPrimaryElement).toBeTruthy();
-  }));
-
-  it('if i set a appearance, that class will be on div with class callout with prefix callout-*', () => {
-    component.appearance = 'more';
-    fixture.detectChanges();
-    const divPrimaryElement = fixture.debugElement.query(By.css('div.callout.' + 'callout-' + 'more'));
-    expect(divPrimaryElement).toBeTruthy();
-  });
-
-  it('if i set a label, that can be on DOM', () => {
-    component.label = 'label';
-    fixture.detectChanges();
-    const spanPrimaryElement = fixture.debugElement.query(By.css('.callout-title >  span:not(.visually-hidden)'));
-    expect(spanPrimaryElement).toBeTruthy();
-  });
-
-  it("if i don't set a label, that cannot be on DOM", () => {
-    const spanPrimaryElement = fixture.debugElement.query(By.css('.callout-title > span:not(.visually-hidden)'));
-    expect(spanPrimaryElement).toBeFalsy();
-  });
-
-  it('if i set a hiddenLabel (with a label), that can be on DOM', () => {
-    component.hiddenLabel = 'hiddenLabel';
-    component.label = 'label';
-    fixture.detectChanges();
-    const spanPrimaryElement = fixture.debugElement.query(By.css('.callout-title > span.visually-hidden'));
-    expect(spanPrimaryElement).toBeTruthy();
-  });
-
-  it("if i don't set a hiddenLabel (with a label), that cannot be on DOM", () => {
-    component.label = 'label';
-    fixture.detectChanges();
-    const spanPrimaryElement = fixture.debugElement.query(By.css('.callout-title > span.visually-hidden'));
-    expect(spanPrimaryElement).toBeFalsy();
-  });
-
-  it('if i set a hiddenLabel (without a label), that cannot be on DOM', () => {
-    component.hiddenLabel = 'hiddenLabel';
-    fixture.detectChanges();
-    const spanPrimaryElement = fixture.debugElement.query(By.css('.callout-title > span.visually-hidden'));
-    expect(spanPrimaryElement).toBeFalsy();
-  });
-
-  it('if i set a icon (zoom-in), that will be on DOM', () => {
-    component.label = 'label';
-    component.icon = 'zoom-in';
-    fixture.detectChanges();
-    const useElement = fixture.debugElement.query(By.css('use[href="./bootstrap-italia/dist/svg/sprites.svg#it-zoom-in'));
-    expect(useElement).toBeTruthy();
-  });
-
-  it("if i don't set a icon (with a label), that will be on DOM (default is info-circle)", () => {
-    component.label = 'label';
-    fixture.detectChanges();
-    const useElement = fixture.debugElement.query(By.css('use[href="./bootstrap-italia/dist/svg/sprites.svg#it-info-circle'));
-    expect(useElement).toBeTruthy();
-  });
-
-  it('if i set appearance to more with a label, the component show icon: zoom-in', () => {
-    component.appearance = 'more';
-    component.label = 'label';
-    fixture.detectChanges();
-    const useElement = fixture.debugElement.query(By.css('use[href="./bootstrap-italia/dist/svg/sprites.svg#it-zoom-in'));
-    expect(useElement).toBeTruthy();
-  });
-
-  it('if i set color to success with a label, the component show icon: check-circle', () => {
-    component.color = 'success';
-    component.label = 'label';
-    fixture.detectChanges();
-    const useElement = fixture.debugElement.query(By.css('use[href="./bootstrap-italia/dist/svg/sprites.svg#it-check-circle'));
-    expect(useElement).toBeTruthy();
-  });
-
-  it('if i set color to warning with a label, the component show icon: help-circle', () => {
-    component.color = 'warning';
-    component.label = 'label';
-    fixture.detectChanges();
-    const useElement = fixture.debugElement.query(By.css('use[href="./bootstrap-italia/dist/svg/sprites.svg#it-help-circle'));
-    expect(useElement).toBeTruthy();
-  });
-
-  it('if i set color to danger with a label, the component show icon: close-circle', () => {
-    component.color = 'danger';
-    component.label = 'label';
-    fixture.detectChanges();
-    const useElement = fixture.debugElement.query(By.css('use[href="./bootstrap-italia/dist/svg/sprites.svg#it-close-circle'));
-    expect(useElement).toBeTruthy();
-  });
-
-  it('if i set color to important with a label, the component show icon: info-circle', () => {
-    component.color = 'important';
-    component.label = 'label';
-    fixture.detectChanges();
-    const useElement = fixture.debugElement.query(By.css('use[href="./bootstrap-italia/dist/svg/sprites.svg#it-info-circle'));
-    expect(useElement).toBeTruthy();
-  });
-
-  it('if i set color to note with a label, the component show icon: info-circle', () => {
-    component.color = 'note';
-    component.label = 'label';
-    fixture.detectChanges();
-    const useElement = fixture.debugElement.query(By.css('use[href="./bootstrap-italia/dist/svg/sprites.svg#it-info-circle'));
-    expect(useElement).toBeTruthy();
-  });
-});

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

@@ -1,92 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { CalloutAppearance, CalloutColor } from '../../../interfaces/core';
-import { IconName } from '../../../interfaces/icon';
-import { NgTemplateOutlet } from '@angular/common';
-import { ItIconComponent } from '../../utils/icon/icon.component';
-
-/**
- * Callout
- * @description Callouts can be used to highlight certain parts of the text that require particular attention. They may contain error messages, warnings, hints, etc.
- */
-@Component({
-  standalone: true,
-  selector: 'it-callout',
-  templateUrl: './callout.component.html',
-  styles: [
-    `
-      .callout-big-text:empty {
-        display: none;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgTemplateOutlet, ItIconComponent],
-})
-export class ItCalloutComponent {
-  /**
-   * Callout label
-   * @default undefined
-   */
-  @Input() label: string | undefined;
-
-  /**
-   * Callout hiddenLabel
-   * @default undefined
-   */
-  @Input() hiddenLabel: string | undefined;
-
-  /**
-   * Callout color
-   * - <b>success</b>
-   * - <b>danger</b>
-   * - <b>warning</b>
-   * - <b>important</b>
-   * - <b>note</b>
-   * @default undefined
-   */
-  @Input() color: CalloutColor | undefined;
-
-  /**
-   * Callout appearance
-   * - <b>default</b>
-   * - <b>highlight</b>: Callout version with border only on the left side
-   * - <b>more</b>: It looks radically different from the other styles available and is suitable for more extensive texts
-   * @default default
-   */
-  @Input() appearance: CalloutAppearance = 'default';
-
-  /**
-   * Custom icon
-   * @default undefined
-   */
-  @Input() icon: IconName | undefined;
-
-  /**
-   * The input label even get labelWaria icon
-   * @default undefined
-   */
-  @Input() labelWaria: string | undefined = undefined;
-
-  protected get iconName(): IconName {
-    if (this.icon) {
-      return this.icon;
-    }
-
-    if (this.appearance === 'more') {
-      return 'zoom-in';
-    }
-
-    switch (this.color) {
-      case 'success':
-        return 'check-circle';
-      case 'warning':
-        return 'help-circle';
-      case 'danger':
-        return 'close-circle';
-      case 'important':
-      case 'note':
-      default:
-        return 'info-circle';
-    }
-  }
-}

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

@@ -1,35 +0,0 @@
-<ng-template #cardContent>
-  <ng-content select="[beforeBody]"></ng-content>
-
-  <div class="card-body {{ bodyClass }}">
-    <ng-content></ng-content>
-  </div>
-</ng-template>
-
-@if (!special) {
-  <div
-    class="card {{ cardClass }}"
-    [class.card-img]="hasImage"
-    [class.card-teaser]="teaser"
-    [class.no-after]="hasImage"
-    [class.shadow]="shadow"
-    [class.card-bg]="background"
-    [class.card-big]="big"
-    [class.border-bottom-card]="borderBottom"
-    [class.rounded]="rounded">
-    <ng-container *ngTemplateOutlet="cardContent"></ng-container>
-  </div>
-} @else {
-  <a
-    class="card special-card {{ cardClass }}"
-    [class.card-img]="hasImage"
-    [class.card-teaser]="teaser"
-    [class.shadow]="shadow"
-    [class.card-bg]="background"
-    [class.card-big]="big"
-    [class.no-after]="hasImage"
-    [class.border-bottom-card]="borderBottom"
-    [class.rounded]="rounded">
-    <ng-container *ngTemplateOutlet="cardContent"></ng-container>
-  </a>
-}