design-angular-kit 1.2.1 → 1.2.2

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

@@ -1,30 +0,0 @@
-.card-body:empty {
-  display: none;
-}
-
-::ng-deep .row [class*='col-'] {
-  .card,
-  .card-wrapper {
-    height: 100%;
-  }
-}
-
-::ng-deep .card-wrapper.card-teaser-wrapper {
-  it-card {
-    flex-direction: row;
-    align-items: flex-start;
-    flex: 0 0 100%;
-    flex-wrap: wrap;
-    margin: 16px 0;
-  }
-
-  @media (min-width: 768px) {
-    it-card {
-      flex: 0 0 49%;
-    }
-  }
-}
-
-:host {
-  width: 100%;
-}

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

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

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

@@ -1,78 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { ItAbstractComponent } from '../../../abstracts/abstract.component';
-import { NgTemplateOutlet } from '@angular/common';
-import { inputToBoolean } from '../../../utils/coercion';
-
-/**
- * Card
- * @description A container of texts and images with many options and variations.
- */
-@Component({
-  standalone: true,
-  selector: 'it-card',
-  templateUrl: './card.component.html',
-  styleUrls: ['./card.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgTemplateOutlet],
-})
-export class ItCardComponent extends ItAbstractComponent {
-  /**
-   * To create cards with short or "preview" content
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) teaser?: boolean;
-
-  /**
-   * To create special cards
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) special?: boolean;
-
-  /**
-   * Card with image
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) hasImage?: boolean;
-
-  /**
-   * To add rounding effects
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) rounded?: boolean;
-
-  /**
-   * To add shadow effects
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) shadow?: boolean;
-
-  /**
-   * To add background and shadow
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) background?: boolean;
-
-  /**
-   * To add bottom border
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) borderBottom?: boolean;
-
-  /**
-   * To render a big card
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) big?: boolean;
-
-  /**
-   * Custom card class
-   * @default ''
-   */
-  @Input() cardClass: string = '';
-
-  /**
-   * Custom card body class
-   * @default ''
-   */
-  @Input() bodyClass: string = '';
-}

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

@@ -1,29 +0,0 @@
-<div
-  #carousel
-  class="it-carousel-wrapper splide {{ typeClass }}"
-  [class.it-full-carousel]="fullCarousel"
-  [class.it-big-img]="bigImg"
-  [class.it-standard-image]="standardImage"
-  data-bs-carousel-splide>
-  @if (title) {
-    <div class="it-header-block">
-      <div class="it-header-block-title">
-        <h2>{{ title }}</h2>
-      </div>
-    </div>
-  }
-
-  <div class="splide__track {{ trackClass }}">
-    @if (items) {
-      <ul class="splide__list">
-        @for (item of items; track item) {
-          <li class="splide__slide" [class.lined_slide]="lined">
-            <div class="it-single-slide-wrapper">
-              <ng-container *ngTemplateOutlet="item.htmlContent"></ng-container>
-            </div>
-          </li>
-        }
-      </ul>
-    }
-  </div>
-</div>

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

@@ -1 +0,0 @@
-@import '@splidejs/splide/dist/css/splide.min'; // Splide

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

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

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

@@ -1,119 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ContentChildren,
-  ElementRef,
-  Input,
-  OnDestroy,
-  QueryList,
-  ViewChild,
-} from '@angular/core';
-import { CarouselType } from '../../../../interfaces/core';
-import { ItCarouselItemComponent } from '../carousel-item/carousel-item.component';
-import { CarouselBI } from 'bootstrap-italia';
-import { startWith, Subscription } from 'rxjs';
-import { NgTemplateOutlet } from '@angular/common';
-import { inputToBoolean } from '../../../../utils/coercion';
-
-/**
- * Carousel
- * @description A presentation component for scrolling through elements, images or text slides.
- */
-@Component({
-  standalone: true,
-  selector: 'it-carousel',
-  templateUrl: './carousel.component.html',
-  styleUrls: ['./carousel.component.scss'],
-  exportAs: 'itCarousel',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgTemplateOutlet],
-})
-export class ItCarouselComponent implements AfterViewInit, OnDestroy {
-  /**
-   * The callout title
-   * @default undefined
-   */
-  @Input() title: string | undefined;
-
-  /**
-   * The carousel type
-   * @default default
-   */
-  @Input() type: CarouselType = 'default';
-
-  /**
-   * Custom class in splide__track element
-   * @default ''
-   */
-  @Input() trackClass: string = '';
-
-  /**
-   * True for full screen (landscape) viewing
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) fullCarousel?: boolean;
-
-  /**
-   * To indicate that the contained image is of a large type
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) bigImg?: boolean;
-
-  /**
-   * To indicate that the contained image is of a standard type
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) standardImage?: boolean;
-
-  /**
-   * Card line style
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) lined?: boolean;
-
-  @ContentChildren(ItCarouselItemComponent) protected items?: QueryList<ItCarouselItemComponent>;
-
-  private carousel?: CarouselBI;
-
-  @ViewChild('carousel') private carouselDiv!: ElementRef<HTMLDivElement>;
-
-  private itemSubscriptions?: Array<Subscription>;
-
-  protected get typeClass(): string {
-    const typeClass = 'it-carousel-landscape-abstract';
-    return this.type === 'default' ? typeClass : typeClass + `-${this.type}`;
-  }
-
-  constructor(private readonly _changeDetectorRef: ChangeDetectorRef) {}
-
-  ngAfterViewInit(): void {
-    this.carousel = CarouselBI.getOrCreateInstance(this.carouselDiv.nativeElement);
-    this.items?.changes
-      .pipe(
-        // When carousel items changes (dynamic add/remove)
-        startWith(undefined)
-      )
-      .subscribe(() => {
-        this.itemSubscriptions?.forEach(sub => sub.unsubscribe()); // Remove old subscriptions
-        this.itemSubscriptions = this.items?.map(item =>
-          item.valueChanges.subscribe(() => {
-            this._changeDetectorRef.detectChanges(); // DetectChanges when carousel item attributes changes
-          })
-        );
-        this._changeDetectorRef.detectChanges(); // Force update html render
-      });
-  }
-
-  ngOnDestroy(): void {
-    this.itemSubscriptions?.forEach(item => item.unsubscribe());
-  }
-
-  /**
-   * Removes CarouselBI features
-   */
-  public dispose(): void {
-    this.carousel?.dispose();
-  }
-}

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

@@ -1,3 +0,0 @@
-<ng-template>
-  <ng-content></ng-content>
-</ng-template>

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

@@ -1,22 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,26 +0,0 @@
-<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

@@ -1,87 +0,0 @@
-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

@@ -1,154 +0,0 @@
-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

@@ -1,3 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-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();
-  });
-});