design-angular-kit 1.2.1 → 1.2.2

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

@@ -1,82 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { IconName } from '../../../../interfaces/icon';
-import { ItLinkComponent } from '../../link/link.component';
-import { ItIconComponent } from '../../../utils/icon/icon.component';
-import { TranslateModule } from '@ngx-translate/core';
-
-import { inputToBoolean } from '../../../../utils/coercion';
-
-@Component({
-  standalone: true,
-  selector: 'it-dropdown-item',
-  templateUrl: './dropdown-item.component.html',
-  styleUrls: ['./dropdown-item.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ItIconComponent, TranslateModule, ItLinkComponent],
-})
-export class ItDropdownItemComponent extends ItLinkComponent {
-  /**
-   * Show divider
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) divider?: boolean;
-
-  /**
-   * Active item
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) active?: boolean;
-
-  /**
-   * To increase the size of links
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) large?: boolean;
-
-  /**
-   * The name of icon to show
-   */
-  @Input() iconName: IconName | undefined;
-
-  /**
-   * The icon position
-   * @default right
-   */
-  @Input() iconPosition: 'left' | 'right' = 'right';
-
-  /**
-   * Dropdown mode
-   */
-  @Input() mode?: 'button' | 'link' | 'nav' = 'button';
-
-  /**
-   * Change icon color if menu is dark
-   * @default false
-   */
-  isDark: boolean = false;
-
-  get linkClass(): string {
-    let linkClass = `list-item ${this.active ? 'active' : 'dropdown-item'}`;
-    if (this.mode === 'nav') {
-      linkClass += ' nav-link';
-    }
-    if (this.disabled) {
-      linkClass += ' disabled';
-    }
-    if (this.large) {
-      linkClass += ' large';
-    }
-    if (this.iconName) {
-      linkClass += ` ${this.iconPosition === 'right' ? 'right-icon' : 'left-icon'}`;
-    }
-
-    return linkClass;
-  }
-
-  setDark(dark: boolean): void {
-    if (this.isDark !== dark) {
-      this.isDark = dark;
-      this._changeDetectorRef.detectChanges();
-    }
-  }
-}

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

@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { ItDropdownComponent } from './dropdown/dropdown.component';
-import { ItDropdownItemComponent } from './dropdown-item/dropdown-item.component';
-
-const dropdownComponents = [ItDropdownComponent, ItDropdownItemComponent];
-
-@NgModule({
-  imports: dropdownComponents,
-  exports: dropdownComponents,
-})
-export class ItDropdownModule {}

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

@@ -1,60 +0,0 @@
-import { ItForwardDirective } from './forward.directive';
-import { Component, QueryList, ViewChildren } from '@angular/core';
-import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-
-@Component({
-  selector: 'it-unit-test',
-  template: `
-    <a href="#" [itForward]="'idH3'">first</a>
-    <a href="#" [itForward]="refH3">second</a>
-    <h3>Text H3</h3>
-  `,
-})
-class UnitTestComponent {
-  @ViewChildren(ItForwardDirective) directives: QueryList<ItForwardDirective>;
-}
-
-describe('ItForwardDirective', () => {
-  let component: UnitTestComponent;
-  let fixture: ComponentFixture<UnitTestComponent>;
-  beforeEach(fakeAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [UnitTestComponent],
-      imports: [ItForwardDirective],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(UnitTestComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  }));
-
-  it('should create an instance', () => {
-    const directive = new ItForwardDirective();
-    expect(directive).toBeTruthy();
-  });
-
-  it('should trigger this.document.querySelector(...)?.scrollIntoView() if i pass a string', () => {
-    component.directives.changes.subscribe(() => {
-      spyOn(
-        component.directives.first['document'].querySelector(<string>component.directives.first.itForward),
-        'scrollIntoView'
-      ).and.returnValue();
-      const aElement = fixture.debugElement.query(By.css('#firstA'));
-      aElement.nativeElement.click();
-      expect(
-        component.directives.first['document'].querySelector(<string>component.directives.first.itForward).scrollIntoView
-      ).toHaveBeenCalled();
-    });
-  });
-
-  it('should trigger this.itForward.scrollIntoView() if i pass an HTMLElement', async () => {
-    component.directives.changes.subscribe(() => {
-      const itForward = <HTMLElement>component.directives.last.itForward;
-      spyOn(itForward, 'scrollIntoView').and.returnValue();
-      const aElement = fixture.debugElement.query(By.css('#secondA'));
-      aElement.nativeElement.click();
-      expect(itForward.scrollIntoView).toHaveBeenCalled();
-    });
-  });
-});

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

@@ -1,43 +0,0 @@
-import { DOCUMENT } from '@angular/common';
-import { Directive, HostListener, Inject, Input } from '@angular/core';
-
-@Directive({
-  standalone: true,
-  selector: '[itForward]',
-  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-  host: { class: 'forward' },
-})
-export class ItForwardDirective {
-  /**
-   * Indica, se HTMLElement, l'elemento a cui navigare, o se stringa, il selettore che selezionerà l'elemento a cui navigare.
-   */
-  @Input() set itForward(value: HTMLElement | string | undefined) {
-    this._itForward = value;
-  }
-  get itForward(): HTMLElement | string | undefined {
-    return this._itForward;
-  }
-  private _itForward: HTMLElement | string | undefined = undefined;
-
-  constructor(@Inject(DOCUMENT) private document?: Document) {}
-
-  @HostListener('click', ['$event'])
-  onClick(event: any) {
-    event.preventDefault();
-    if (this.itForward) {
-      if (typeof this.itForward === 'string') {
-        this.document?.querySelector(this.itForward)?.scrollIntoView({
-          behavior: 'smooth',
-          block: 'start',
-          inline: 'nearest',
-        });
-      } else if (this.itForward instanceof HTMLElement) {
-        this.itForward.scrollIntoView({
-          behavior: 'smooth',
-          block: 'start',
-          inline: 'nearest',
-        });
-      }
-    }
-  }
-}

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

@@ -1,13 +0,0 @@
-@if (!externalLink) {
-  <a [id]="id" [class]="class" [routerLinkActive]="'active'" [routerLink]="(disabled ? null : href)!">
-    <ng-container *ngTemplateOutlet="linkContent"></ng-container>
-  </a>
-} @else {
-  <a [id]="id" [class]="class" [attr.href]="disabled ? null : href">
-    <ng-container *ngTemplateOutlet="linkContent"></ng-container>
-  </a>
-}
-
-<ng-template #linkContent>
-  <ng-content></ng-content>
-</ng-template>

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

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

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

@@ -1,54 +0,0 @@
-import { AfterViewInit, ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { ItAbstractComponent } from '../../../abstracts/abstract.component';
-import { NgTemplateOutlet } from '@angular/common';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-import { inputToBoolean } from '../../../utils/coercion';
-
-@Component({
-  standalone: true,
-  selector: 'it-link',
-  templateUrl: './link.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [RouterLink, RouterLinkActive, NgTemplateOutlet],
-})
-export class ItLinkComponent extends ItAbstractComponent implements AfterViewInit, OnChanges {
-  /**
-   * The router link action
-   *
-   * Commands to pass to Router#createUrlTree.
-   * - array: commands to pass to Router#createUrlTree.
-   * - string: shorthand for array of commands with just the string, i.e. ['/route']
-   * - null|undefined: Disables the link by removing the href
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  @Input() href: any[] | string | null | undefined;
-
-  /**
-   * Is an external link (false to not use Angular router link)
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) externalLink?: boolean;
-
-  /**
-   * Is disabled link
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) disabled?: boolean;
-
-  /**
-   * Custom class
-   */
-  @Input() class: string = '';
-
-  override ngAfterViewInit(): void {
-    super.ngAfterViewInit();
-    this._renderer.removeAttribute(this._elementRef.nativeElement, 'class');
-  }
-
-  override ngOnChanges(changes: SimpleChanges): void {
-    super.ngOnChanges(changes);
-    if (changes['class']) {
-      this._changeDetectorRef.markForCheck();
-    }
-  }
-}

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

@@ -1,13 +0,0 @@
-@if (!linkSubList) {
-  <div [class.multiline]="multiline" [class]="linkList ? 'link-list-wrapper' : 'it-list-wrapper'">
-    <ul [class]="linkList ? 'link-list' : 'it-list'">
-      <ng-container *ngTemplateOutlet="contentTpl"></ng-container>
-    </ul>
-  </div>
-}
-@if (linkSubList) {
-  <ul class="link-sublist">
-    <ng-container *ngTemplateOutlet="contentTpl"></ng-container>
-  </ul>
-}
-<ng-template #contentTpl><ng-content></ng-content></ng-template>

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

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

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

@@ -1,30 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
-import { inputToBoolean } from '../../../../utils/coercion';
-
-@Component({
-  standalone: true,
-  selector: 'it-list',
-  templateUrl: './list.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgTemplateOutlet],
-})
-export class ItListComponent {
-  /**
-   * Add 'link-list' class for navigation menu
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) linkList?: boolean;
-
-  /**
-   * Add 'link-sublist' class for navigation menu
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) linkSubList?: boolean;
-
-  /**
-   * Add 'multiline' class for wrapper
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) multiline?: boolean;
-}

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

@@ -1,42 +0,0 @@
-<li>
-  <ng-template #content>
-    <div class="it-rounded-icon">
-      <ng-content select="[icon]"></ng-content>
-    </div>
-
-    @if (avatar) {
-      <div class="avatar size-lg">
-        <img [attr.src]="avatar" alt="avatar" />
-      </div>
-    }
-
-    @if (image) {
-      <div class="it-thumb">
-        <img [attr.src]="image" alt="thumb" />
-      </div>
-    }
-
-    <div class="it-right-zone">
-      <ng-content></ng-content>
-      <ng-content select="[action]"></ng-content>
-
-      <span class="it-multiple">
-        <span class="metadata">
-          <ng-content select="[metadata]"></ng-content>
-        </span>
-
-        <ng-content select="[multiple]"></ng-content>
-      </span>
-    </div>
-  </ng-template>
-
-  @if (!href) {
-    <div [class]="itemClass">
-      <ng-container *ngTemplateOutlet="content"></ng-container>
-    </div>
-  } @else {
-    <it-link [class]="itemClass" [href]="href" [externalLink]="!!externalLink" [disabled]="!!disabled">
-      <ng-container *ngTemplateOutlet="content"></ng-container>
-    </it-link>
-  }
-</li>

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

@@ -1,16 +0,0 @@
-.metadata:empty,
-.it-rounded-icon:empty {
-  display: none;
-}
-
-:host ::ng-deep {
-  it-icon + .it-multiple {
-    display: none !important;
-  }
-  .list-item-title-icon-wrapper + .it-multiple {
-    display: none !important;
-  }
-  p + .it-multiple {
-    display: none !important;
-  }
-}

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

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

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

@@ -1,75 +0,0 @@
-import { ChangeDetectionStrategy, Component, ElementRef, Input } from '@angular/core';
-import { ItLinkComponent } from '../../link/link.component';
-import { NgTemplateOutlet } from '@angular/common';
-import { inputToBoolean } from '../../../../utils/coercion';
-
-@Component({
-  standalone: true,
-  selector: 'it-list-item',
-  templateUrl: './list-item.component.html',
-  styleUrls: ['./list-item.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgTemplateOutlet, ItLinkComponent],
-})
-export class ItListItemComponent extends ItLinkComponent {
-  constructor(private elRef: ElementRef) {
-    super();
-  }
-
-  /**
-   * Add active class
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) active?: boolean;
-
-  /**
-   * Add large class
-   */
-  @Input() size?: 'large' | 'medium';
-
-  /**
-   * Add icon-left class
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) iconLeft?: boolean;
-
-  /**
-   * Add icon-right class
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) iconRight?: boolean;
-
-  /**
-   * The avatar url
-   */
-  @Input() avatar: URL | undefined;
-
-  /**
-   * The thumb image url
-   */
-  @Input() image: URL | undefined;
-
-  get itemClass(): string {
-    const inSidebar: boolean = this.elRef.nativeElement.closest('.sidebar-linklist-wrapper') ? true : false;
-    let itemClass = 'list-item';
-    if (this.disabled) {
-      itemClass += ` disabled`;
-    }
-    if (this.active) {
-      itemClass += ` active`;
-    }
-    if (this.size) {
-      itemClass += ` ${this.size}`;
-    }
-    if (this.iconLeft) {
-      itemClass += inSidebar ? ` left-icon` : ` icon-left`;
-    }
-    if (this.iconRight) {
-      itemClass += inSidebar ? ` right-icon` : ` icon-right`;
-    }
-    if (this.class) {
-      itemClass += ` ${this.class}`;
-    }
-    return itemClass;
-  }
-}

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

@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { ItListComponent } from './list/list.component';
-import { ItListItemComponent } from './list-item/list-item.component';
-
-const listComponents = [ItListComponent, ItListItemComponent];
-
-@NgModule({
-  imports: listComponents,
-  exports: listComponents,
-})
-export class ItListModule {}

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

@@ -1,36 +0,0 @@
-<div
-  #modalElement
-  [id]="id"
-  [class]="modalClass"
-  tabindex="-1"
-  role="dialog"
-  aria-hidden="true"
-  [attr.aria-labelledby]="id + '-title'"
-  [attr.aria-describedby]="id + '-description'">
-  <div [class]="dialogClass">
-    <div class="modal-content" role="document">
-      <div class="modal-header">
-        <ng-content select="[beforeTitle]"></ng-content>
-
-        <h2 class="modal-title h5" id="{{ id }}-title">
-          <ng-content select="[modalTitle]"></ng-content>
-        </h2>
-
-        @if (closeButton) {
-          <button type="button" class="btn-close" data-bs-dismiss="modal" [attr.aria-label]="'it.core.close-modal' | translate"></button>
-        }
-      </div>
-
-      <div class="modal-body">
-        <div id="{{ id }}-description">
-          <ng-content select="[description]"></ng-content>
-        </div>
-        <ng-content></ng-content>
-      </div>
-
-      <div class="modal-footer" [class.modal-footer-shadow]="footerShadow">
-        <ng-content select="[footer]"></ng-content>
-      </div>
-    </div>
-  </div>
-</div>

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

@@ -1,3 +0,0 @@
-.modal-footer:empty {
-  display: none;
-}

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

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