design-angular-kit 1.2.0 → 1.2.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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