design-angular-kit 1.2.0 → 1.2.1

package/src/lib/components/core/carousel/carousel-item/carousel-item.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItCarouselItemComponent } from './carousel-item.component';
+
+describe('ItCarouselItemComponent', () => {
+  let component: ItCarouselItemComponent;
+  let fixture: ComponentFixture<ItCarouselItemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ItCarouselItemComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ItCarouselItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/core/carousel/carousel-item/carousel-item.component.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, TemplateRef, ViewChild } from '@angular/core';
+import { ItAbstractComponent } from '../../../../abstracts/abstract.component';
+
+/**
+ * Carousel Item
+ * @description element, image or text slide of carousel
+ */
+@Component({
+  standalone: true,
+  selector: 'it-carousel-item',
+  templateUrl: './carousel-item.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [],
+})
+export class ItCarouselItemComponent extends ItAbstractComponent {
+  /**
+   * The content of item
+   */
+  @ViewChild(TemplateRef) public htmlContent!: TemplateRef<any>;
+}

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

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { ItCarouselComponent } from './carousel/carousel.component';
+import { ItCarouselItemComponent } from './carousel-item/carousel-item.component';
+
+const carouselComponents = [ItCarouselComponent, ItCarouselItemComponent];
+
+@NgModule({
+  imports: carouselComponents,
+  exports: carouselComponents,
+})
+export class ItCarouselModule {}

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

@@ -0,0 +1,26 @@
+<div
+  class="chip"
+  [ngClass]="[
+    !showCloseButton ? 'chip-simple' : 'alert',
+    size === 'lg' ? 'chip-lg' : '',
+    color ? 'chip-' + color : '',
+    disabled ? 'chip-disabled' : '',
+  ]">
+  @if (icon) {
+    <svg class="icon icon-xs">
+      <use [attr.href]="iconHref" [attr.xlink:href]="iconHref"></use>
+    </svg>
+  }
+  @if (avatar) {
+    <div class="avatar size-xs"><img [src]="avatar" [alt]="altAvatar" /></div>
+  }
+  <span class="chip-label">{{ label }}</span>
+  @if (showCloseButton) {
+    <button (click)="clickToClose()" [disabled]="disabled">
+      <svg class="icon">
+        <use [attr.href]="iconCloseHref" [attr.xlink:href]="iconCloseHref"></use>
+      </svg>
+      <span class="visually-hidden">{{ 'it.core.remove' | translate }} {{ label }}</span>
+    </button>
+  }
+</div>

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

@@ -0,0 +1,87 @@
+import { ChangeDetectionStrategy } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { ItChipComponent } from './chip.component';
+import { tb_base } from '../../../../test';
+
+describe('ItChipComponent', () => {
+  let component: ItChipComponent;
+  let fixture: ComponentFixture<ItChipComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ItChipComponent],
+      providers: tb_base.providers,
+    })
+      .overrideComponent(ItChipComponent, {
+        set: { changeDetection: ChangeDetectionStrategy.Default },
+      })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ItChipComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('click on close button should trigger close.emit()', () => {
+    spyOn(component.closeEvent, 'emit').and.returnValue();
+    component.showCloseButton = true;
+    fixture.detectChanges();
+    const buttonElement = fixture.debugElement.query(By.css('button'));
+    buttonElement.nativeElement.click();
+    expect(component.closeEvent.emit).toHaveBeenCalled();
+  });
+
+  it('click on close button DISABLED should NOT trigger close.emit()', () => {
+    spyOn(component.closeEvent, 'emit').and.returnValue();
+    component.showCloseButton = true;
+    component.disabled = true;
+    fixture.detectChanges();
+    const buttonElement = fixture.debugElement.query(By.css('button'));
+    buttonElement.nativeElement.click();
+    expect(component.closeEvent.emit).not.toHaveBeenCalled();
+  });
+
+  it('can set label', () => {
+    component.label = 'label';
+    fixture.detectChanges();
+    // const spanElement = fixture.debugElement.query(By.css('.chip-label'));
+    expect(component).toBeTruthy();
+  });
+
+  it('can set size', () => {
+    component.size = 'lg';
+    fixture.detectChanges();
+    const divElement = fixture.debugElement.query(By.css('.chip-lg'));
+    expect(divElement).toBeTruthy();
+  });
+
+  it('can set color', () => {
+    component.color = 'primary';
+    fixture.detectChanges();
+    const divElement = fixture.debugElement.query(By.css('.chip-primary'));
+    expect(divElement).toBeTruthy();
+  });
+
+  it('can set icon', () => {
+    component.icon = 'github';
+    fixture.detectChanges();
+    const svgElement = fixture.debugElement.query(By.css('.icon.icon-xs'));
+    expect(svgElement).toBeTruthy();
+  });
+
+  it('can set avantar and alt', () => {
+    component.altAvatar = 'alt';
+    component.avatar = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';
+    fixture.detectChanges();
+    const imgElement = fixture.debugElement.query(
+      By.css('img[alt="alt"][src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"]')
+    );
+    expect(imgElement).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,154 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, Output } from '@angular/core';
+import { IconName } from '../../../interfaces/icon';
+import { ChipColor } from '../../../interfaces/core';
+import { NgClass } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { IT_ASSET_BASE_PATH } from '../../../interfaces/design-angular-kit-config';
+
+@Component({
+  standalone: true,
+  selector: 'it-chip',
+  templateUrl: './chip.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgClass, TranslateModule],
+})
+export class ItChipComponent {
+  /**
+   * Indica la label
+   */
+  @Input() set label(value: string) {
+    this._label = value;
+  }
+
+  get label(): string {
+    return this._label;
+  }
+
+  private _label = '';
+
+  /**
+   * Indica se mostrate il pulante di chisura
+   */
+  @Input() set showCloseButton(value: boolean) {
+    this._showCloseButton = value;
+  }
+
+  get showCloseButton(): boolean {
+    return this._showCloseButton;
+  }
+
+  private _showCloseButton = false;
+
+  /**
+   * Indica il size
+   */
+  @Input() set size(value: '' | 'lg') {
+    this._size = value;
+  }
+
+  get size(): '' | 'lg' {
+    return this._size;
+  }
+
+  private _size: '' | 'lg' = '';
+
+  /**
+   * Indica il colore della chip
+   */
+  @Input() set color(value: ChipColor | undefined) {
+    this._color = value;
+  }
+
+  get color(): ChipColor | undefined {
+    return this._color;
+  }
+
+  private _color: ChipColor | undefined = undefined;
+
+  /**
+   * Indica se la chip è disabilitata
+   */
+  @Input() set disabled(value: boolean) {
+    this._disabled = value;
+  }
+
+  get disabled(): boolean {
+    return this._disabled;
+  }
+
+  private _disabled: boolean = false;
+
+  /**
+   * Indica il nome dell'icona, se valorizzata viene mostrata
+   */
+  @Input() set icon(value: IconName | undefined) {
+    this._icon = value;
+  }
+
+  get icon(): IconName | undefined {
+    return this._icon;
+  }
+
+  private _icon: IconName | undefined = undefined;
+
+  /**
+   * Indica l'url dell'avatar, se valorizzata viene mostrata
+   */
+  @Input() set avatar(value: string | undefined) {
+    this._avatar = value;
+  }
+
+  get avatar(): string | undefined {
+    return this._avatar;
+  }
+
+  private _avatar: string | undefined = undefined;
+
+  /**
+   * Indica il valore da aggiungere al parametro alt, di default ''
+   */
+  @Input() set altAvatar(value: string) {
+    this._altAvatar = value;
+  }
+
+  get altAvatar(): string {
+    return this._altAvatar;
+  }
+
+  private _altAvatar: string = '';
+
+  /**
+   * Evento emesso al click sul bottone di chiusura
+   */
+  @Output() closeEvent = new EventEmitter();
+
+  /**
+   * Return the icon href
+   */
+  protected get iconHref(): string {
+    return `${this.assetBasePath}/dist/svg/sprites.svg#it-${this._icon}`;
+  }
+
+  private iconClose: IconName = 'close';
+
+  /**
+   * Return the close icon href
+   */
+  protected get iconCloseHref(): string {
+    return `${this.assetBasePath}/dist/svg/sprites.svg#it-${this.iconClose}`;
+  }
+
+  /**
+   * The bootstrap-italia asset folder path
+   * @default ./bootstrap-italia
+   */
+  protected assetBasePath: string;
+
+  constructor() {
+    this.assetBasePath = inject(IT_ASSET_BASE_PATH);
+  }
+
+  clickToClose(): void {
+    this.closeEvent.emit();
+  }
+}

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

@@ -0,0 +1,3 @@
+<div [id]="id" class="collapse {{ class }}" [class.multi-collapse]="multi" #collapse>
+  <ng-content></ng-content>
+</div>

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

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

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

@@ -0,0 +1,124 @@
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { ItAbstractComponent } from '../../../abstracts/abstract.component';
+import { Collapse } from 'bootstrap-italia';
+import { inputToBoolean } from '../../../utils/coercion';
+
+@Component({
+  standalone: true,
+  selector: 'it-collapse',
+  templateUrl: './collapse.component.html',
+  exportAs: 'itCollapse',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [],
+})
+export class ItCollapseComponent extends ItAbstractComponent implements AfterViewInit {
+  /**
+   * Enable multiple collapse
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) multi?: boolean;
+
+  /**
+   * Toggles the collapsible element on invocation
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) opened?: boolean;
+
+  /**
+   * Custom class
+   */
+  @Input() class: string = '';
+
+  /**
+   * This event fires immediately when the show method is called.
+   */
+  @Output() showEvent: EventEmitter<Event> = new EventEmitter();
+
+  /**
+   * This event is triggered when the tooltip has been made visible to the user (it will wait for the CSS transitions to complete).
+   */
+  @Output() shownEvent: EventEmitter<Event> = new EventEmitter();
+
+  /**
+   * This event fires immediately when the hide method is called.
+   */
+  @Output() hideEvent: EventEmitter<Event> = new EventEmitter();
+
+  /**
+   * This event is raised when the tooltip has finished being hidden from the user (it will wait for the CSS transitions to complete).
+   */
+  @Output() hiddenEvent: EventEmitter<Event> = new EventEmitter();
+
+  private collapse?: Collapse;
+
+  private open: boolean = false;
+
+  @ViewChild('collapse') protected collapseDiv?: ElementRef<HTMLDivElement>;
+
+  override ngAfterViewInit(): void {
+    super.ngAfterViewInit();
+    this._renderer.removeAttribute(this._elementRef.nativeElement, 'class');
+
+    if (this.collapseDiv) {
+      const element = this.collapseDiv.nativeElement;
+      this.collapse = Collapse.getOrCreateInstance(element, {
+        toggle: this.opened,
+      });
+
+      element.addEventListener('show.bs.collapse', event => {
+        this.open = true;
+        this.showEvent.emit(event);
+      });
+      element.addEventListener('shown.bs.collapse', event => {
+        this.open = true;
+        this.shownEvent.emit(event);
+      });
+      element.addEventListener('hide.bs.collapse', event => {
+        this.open = false;
+        this.hideEvent.emit(event);
+      });
+      element.addEventListener('hidden.bs.collapse', event => {
+        this.open = false;
+        this.hiddenEvent.emit(event);
+      });
+    }
+  }
+
+  /**
+   * Shows if collapse is open or not
+   */
+  public isOpen(): boolean {
+    return this.open;
+  }
+
+  /**
+   * Shows a resealable item
+   * NOTE: Returns to the caller before the collapsable element has actually been shown (onShown event).
+   */
+  public show(): void {
+    this.collapse?.show();
+  }
+
+  /**
+   * Hides a resealable item
+   * NOTE: Returns to the caller before the collapsable element has actually been hidden (onHidden Event)
+   */
+  public hide(): void {
+    this.collapse?.hide();
+  }
+
+  /**
+   * Toggle a collapsible item to show or hide it.
+   * NOTE: Returns to the caller before the collapsable element has actually been shown or hidden (onShown and onHidden events)
+   */
+  public toggle(): void {
+    this.collapse?.toggle();
+  }
+
+  /**
+   * Eliminates the possibility of an item being resealable
+   */
+  public dispose(): void {
+    this.collapse?.dispose();
+  }
+}

package/src/lib/components/core/dimmer/dimmer-buttons/dimmer-buttons.component.html

@@ -0,0 +1,3 @@
+<div class="dimmer-buttons bg-dark" [ngClass]="{ 'single-button': hasOneButton }">
+  <ng-content></ng-content>
+</div>

package/src/lib/components/core/dimmer/dimmer-buttons/dimmer-buttons.component.spec.ts

@@ -0,0 +1,35 @@
+import { ChangeDetectionStrategy } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { ItDimmerButtonsComponent } from './dimmer-buttons.component';
+
+describe('ItDimmerButtonsComponent', () => {
+  let component: ItDimmerButtonsComponent;
+  let fixture: ComponentFixture<ItDimmerButtonsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ItDimmerButtonsComponent],
+    })
+      .overrideComponent(ItDimmerButtonsComponent, {
+        set: { changeDetection: ChangeDetectionStrategy.Default },
+      })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ItDimmerButtonsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('add class single-button to buttons div if hasOneButton is true', () => {
+    component.hasOneButton = true;
+    fixture.detectChanges();
+    const divElement = fixture.debugElement.query(By.css('.single-button'));
+    expect(divElement).toBeTruthy();
+  });
+});

package/src/lib/components/core/dimmer/dimmer-buttons/dimmer-buttons.component.ts

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { NgClass } from '@angular/common';
+
+@Component({
+  standalone: true,
+  selector: 'it-dimmer-buttons',
+  templateUrl: './dimmer-buttons.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgClass],
+})
+export class ItDimmerButtonsComponent {
+  /**
+   * Indica se abbiamo 1 solo bottone
+   * @default false
+   */
+  @Input() set hasOneButton(value: boolean) {
+    this._hasOneButton = value;
+  }
+  get hasOneButton() {
+    return this._hasOneButton;
+  }
+  private _hasOneButton = false;
+}

package/src/lib/components/core/dimmer/dimmer-icon/dimmer-icon.component.html

@@ -0,0 +1,3 @@
+<div class="dimmer-icon">
+  <ng-content></ng-content>
+</div>

package/src/lib/components/core/dimmer/dimmer-icon/dimmer-icon.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItDimmerIconComponent } from './dimmer-icon.component';
+
+describe('ItDimmerIconComponent', () => {
+  let component: ItDimmerIconComponent;
+  let fixture: ComponentFixture<ItDimmerIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ItDimmerIconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ItDimmerIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/core/dimmer/dimmer-icon/dimmer-icon.component.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  standalone: true,
+  selector: 'it-dimmer-icon',
+  templateUrl: './dimmer-icon.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [],
+})
+export class ItDimmerIconComponent {}

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

@@ -0,0 +1,7 @@
+@if (active) {
+  <div class="dimmer" @fade [ngClass]="[color, 'show']">
+    <div class="dimmer-inner">
+      <ng-content></ng-content>
+    </div>
+  </div>
+}

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

@@ -0,0 +1,49 @@
+import { ChangeDetectionStrategy } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { ItDimmerComponent } from './dimmer.component';
+
+describe('ItDimmerComponent', () => {
+  let component: ItDimmerComponent;
+  let fixture: ComponentFixture<ItDimmerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ItDimmerComponent, BrowserAnimationsModule],
+    })
+      .overrideComponent(ItDimmerComponent, {
+        set: { changeDetection: ChangeDetectionStrategy.Default },
+      })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ItDimmerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should be inactive by default', () => {
+    const showElement = fixture.debugElement.query(By.css('.dimmer'));
+    expect(showElement).toBeFalsy();
+  });
+
+  it('should be active', () => {
+    component.active = true;
+    fixture.detectChanges();
+    const showElement = fixture.debugElement.query(By.css('.dimmer'));
+    expect(showElement).toBeTruthy();
+  });
+
+  it('Can have primary color', () => {
+    component.color = 'dimmer-primary';
+    component.active = true;
+    fixture.detectChanges();
+    const dimmerPrimaryElement = fixture.debugElement.query(By.css('.dimmer.dimmer-primary'));
+    expect(dimmerPrimaryElement).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,50 @@
+import { animate, style, transition, trigger } from '@angular/animations';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit } from '@angular/core';
+import { NgClass } from '@angular/common';
+
+export type DimmerColor = '' | 'dimmer-primary';
+
+@Component({
+  standalone: true,
+  selector: 'it-dimmer',
+  templateUrl: './dimmer.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('fade', [
+      transition(':enter', [style({ opacity: 0 }), animate('150ms', style({ opacity: 0.9 }))]),
+      transition(':leave', [animate('150ms', style({ opacity: 0 }))]),
+    ]),
+  ],
+  imports: [NgClass],
+})
+export class ItDimmerComponent implements OnInit {
+  /**
+   * Dimmer status
+   * @default false
+   */
+  @Input() set active(value: boolean) {
+    this._active = value;
+  }
+  get active() {
+    return this._active;
+  }
+  private _active = false;
+
+  /**
+   * Colore del dimmer
+   * @default ''
+   */
+  @Input() set color(value: DimmerColor) {
+    this._color = value;
+  }
+  get color() {
+    return this._color;
+  }
+  private _color: DimmerColor = '';
+
+  constructor(private elementRef: ElementRef) {}
+
+  ngOnInit(): void {
+    this.elementRef?.nativeElement?.parentElement?.classList?.add('dimmable');
+  }
+}