design-angular-kit 1.2.1 → 1.2.2

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { ItDimmerComponent } from './dimmer.component';
-import { ItDimmerIconComponent } from './dimmer-icon/dimmer-icon.component';
-import { ItDimmerButtonsComponent } from './dimmer-buttons/dimmer-buttons.component';
-
-const dimmerComponents = [ItDimmerComponent, ItDimmerIconComponent, ItDimmerButtonsComponent];
-
-@NgModule({
-  imports: dimmerComponents,
-  exports: dimmerComponents,
-})
-export class ItDimmerModule {}

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

@@ -1,45 +0,0 @@
-<div class="dropdown {{ direction }}" [class.nav-item]="mode === 'nav'" [class.megamenu]="megamenu">
-  @if (mode === 'button') {
-    <button
-      #dropdownButton
-      [id]="id"
-      [class]="buttonClass"
-      type="button"
-      data-bs-toggle="dropdown"
-      aria-haspopup="true"
-      aria-expanded="false">
-      <ng-container *ngTemplateOutlet="buttonContent"></ng-container>
-      <it-icon svgClass="icon-expand" name="expand" size="sm" [color]="this.color ? 'light' : 'primary'"></it-icon>
-    </button>
-  } @else {
-    <a
-      #dropdownButton
-      [id]="id"
-      [class.btn]="mode === 'link'"
-      [class.btn-dropdown]="mode === 'link'"
-      [class.nav-link]="mode === 'nav'"
-      class="dropdown-toggle"
-      role="button"
-      data-bs-toggle="dropdown"
-      aria-haspopup="true"
-      aria-expanded="false">
-      <ng-container *ngTemplateOutlet="buttonContent"></ng-container>
-      <it-icon svgClass="icon-expand" name="expand" size="sm"></it-icon>
-    </a>
-  }
-
-  <div class="dropdown-menu" [class.full-width]="fullWidth" [class.dark]="dark" [attr.aria-labelledby]="id">
-    <div class="link-list-wrapper">
-      <div class="link-list-heading">
-        <ng-content select="[listHeading]"></ng-content>
-      </div>
-      <ul class="link-list">
-        <ng-content select="[list]"></ng-content>
-      </ul>
-    </div>
-  </div>
-</div>
-
-<ng-template #buttonContent>
-  <ng-content select="[button]"></ng-content>
-</ng-template>

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

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

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

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

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

@@ -1,186 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  Component,
-  ContentChildren,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnChanges,
-  Output,
-  QueryList,
-  SimpleChanges,
-  ViewChild,
-} from '@angular/core';
-import { ItAbstractComponent } from '../../../../abstracts/abstract.component';
-import { ButtonColor, DropdownDirection } from '../../../../interfaces/core';
-import { ItDropdownItemComponent } from '../dropdown-item/dropdown-item.component';
-import { Dropdown } from 'bootstrap-italia';
-import { ItIconComponent } from '../../../utils/icon/icon.component';
-import { NgTemplateOutlet } from '@angular/common';
-import { inputToBoolean } from '../../../../utils/coercion';
-
-@Component({
-  standalone: true,
-  selector: 'it-dropdown',
-  templateUrl: './dropdown.component.html',
-  styleUrls: ['./dropdown.component.scss'],
-  exportAs: 'itDropdown',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ItIconComponent, NgTemplateOutlet],
-})
-export class ItDropdownComponent extends ItAbstractComponent implements AfterViewInit, OnChanges {
-  /**
-   * Dropdown mode
-   */
-  @Input() mode: 'button' | 'link' | 'nav' = 'button';
-
-  /**
-   * Button color
-   */
-  @Input() color?: ButtonColor;
-
-  /**
-   * To open menu items to:
-   * - <strong>dropup</strong>: up
-   * - <strong>dropend</strong>: right
-   * - <strong>dropstart</strong>: left
-   */
-  @Input() direction: DropdownDirection | undefined;
-
-  /**
-   * To get a dropdown menu as wide as the element containing the dropdown button
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) fullWidth?: boolean;
-
-  /**
-   * Contains a Megamenu element
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) megamenu?: boolean;
-
-  /**
-   * Dark menu style
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) dark?: boolean;
-
-  /**
-   * The dropdown items
-   */
-  @ContentChildren(ItDropdownItemComponent) items?: QueryList<ItDropdownItemComponent>;
-
-  /**
-   * Fires immediately when the show instance method is called.
-   */
-  @Output() showEvent: EventEmitter<Event> = new EventEmitter();
-
-  /**
-   * Fired when the dropdown has been made visible to the user and CSS transitions have completed.
-   */
-  @Output() shownEvent: EventEmitter<Event> = new EventEmitter();
-
-  /**
-   * Fires immediately when the hide instance method has been called.
-   */
-  @Output() hideEvent: EventEmitter<Event> = new EventEmitter();
-
-  /**
-   * Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.
-   */
-  @Output() hiddenEvent: EventEmitter<Event> = new EventEmitter();
-
-  private dropdown?: Dropdown;
-
-  @ViewChild('dropdownButton') private dropdownButton?: ElementRef<HTMLButtonElement>;
-
-  get buttonClass(): string {
-    let btnClass = 'btn dropdown-toggle';
-    if (this.color) {
-      btnClass += ` btn-${this.color}`;
-    } else {
-      btnClass += ` btn-dropdown`;
-    }
-
-    return btnClass;
-  }
-
-  override ngOnChanges(changes: SimpleChanges): void {
-    if (changes['dark'] && !changes['dark'].firstChange) {
-      this.setDarkItems();
-    }
-    if (changes['mode'] && !changes['mode'].firstChange) {
-      this.updateListeners();
-    }
-    super.ngOnChanges(changes);
-  }
-
-  override ngAfterViewInit() {
-    super.ngAfterViewInit();
-    this.setDarkItems();
-    this.updateListeners();
-    this.items?.forEach(item => {
-      item.mode = this.mode;
-    });
-  }
-
-  /**
-   * Set child items dark mode
-   * @private
-   */
-  private setDarkItems(): void {
-    if (this.dark !== undefined) {
-      this.items?.forEach(item => {
-        item.setDark(!!this.dark);
-      });
-    }
-  }
-
-  private updateListeners(): void {
-    if (this.dropdownButton) {
-      const element = this.dropdownButton.nativeElement;
-      this.dropdown = Dropdown.getOrCreateInstance(element);
-
-      element.addEventListener('show.bs.dropdown', event => this.showEvent.emit(event));
-      element.addEventListener('shown.bs.dropdown', event => this.shownEvent.emit(event));
-      element.addEventListener('hide.bs.dropdown', event => this.hideEvent.emit(event));
-      element.addEventListener('hidden.bs.dropdown', event => this.hiddenEvent.emit(event));
-    }
-  }
-
-  /**
-   * Toggles the dropdown menu of a given navbar or tabbed navigation.
-   */
-  public toggle(): void {
-    this.dropdown?.toggle();
-  }
-
-  /**
-   * Shows the dropdown menu of a given navbar or tabbed navigation.
-   */
-  public show(): void {
-    this.dropdown?.show();
-  }
-
-  /**
-   * Hides the dropdown menu of a given navbar or tabbed navigation.
-   */
-  public hide(): void {
-    this.dropdown?.hide();
-  }
-
-  /**
-   * Updates the position of an element's dropdown.
-   */
-  public update(): void {
-    this.dropdown?.update();
-  }
-
-  /**
-   * Destroys an element's dropdown. (Removes stored data on the DOM element)
-   */
-  public dispose(): void {
-    this.dropdown?.dispose();
-  }
-}

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

@@ -1,18 +0,0 @@
-<li>
-  @if (divider) {
-    <span class="divider"></span>
-  } @else {
-    <it-link [class]="linkClass" [id]="id" [href]="href" [externalLink]="externalLink" [disabled]="disabled">
-      @if (iconName && iconPosition === 'left') {
-        <it-icon size="sm" [name]="iconName" [color]="isDark ? 'light' : 'primary'" [svgClass]="iconPosition"></it-icon>
-      }
-      <span><ng-content></ng-content></span>
-      @if (iconName && iconPosition === 'right') {
-        <it-icon size="sm" [name]="iconName" [color]="isDark ? 'light' : 'primary'" [svgClass]="iconPosition"></it-icon>
-      }
-      @if (active) {
-        <span class="visually-hidden">{{ 'it.core.active' | translate }}</span>
-      }
-    </it-link>
-  }
-</li>

package/src/lib/components/core/dropdown/dropdown-item/dropdown-item.component.scss

@@ -1,4 +0,0 @@
-.list-item.disabled {
-  pointer-events: none;
-  cursor: default;
-}

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

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