design-angular-kit 1.2.1 → 1.2.2

package/src/lib/components/utils/icon/icon.component.ts

@@ -1,95 +0,0 @@
-import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core';
-import { IconColor, IconName, IconSize } from '../../../interfaces/icon';
-import { inputToBoolean } from '../../../utils/coercion';
-import { IT_ASSET_BASE_PATH } from '../../../interfaces/design-angular-kit-config';
-
-@Component({
-  standalone: true,
-  selector: 'it-icon',
-  templateUrl: './icon.component.html',
-  styles: ':host {display: contents;}',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [],
-})
-export class ItIconComponent {
-  /**
-   * The icon name
-   */
-  @Input({ required: true }) name!: IconName;
-
-  /**
-   * The icon size
-   */
-  @Input() size: IconSize | undefined;
-
-  /**
-   * The icon color
-   */
-  @Input() color: IconColor | undefined;
-
-  /**
-   * Create a padding proportional to the size of the surrounding icon.
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) padded?: boolean;
-
-  /**
-   * Custom class of svg
-   */
-  @Input() svgClass: string | undefined;
-
-  /**
-   * Title of the icon
-   */
-  @Input() title: string | undefined;
-
-  /**
-   * Custom Waria label
-   */
-  @Input() labelWaria: string | undefined;
-
-  /**
-   * Return the icon href
-   */
-  protected get iconHref(): string {
-    return `${this.assetBasePath}/dist/svg/sprites.svg#it-${this.name}`;
-  }
-
-  /**
-   * Return the icon class
-   */
-  protected get iconClass(): string {
-    let iconClass = 'icon';
-    if (this.size) {
-      iconClass += ` icon-${this.size}`;
-    }
-    if (this.color) {
-      iconClass += ` icon-${this.color}`;
-    }
-    if (this.padded) {
-      iconClass += ` icon-padded`;
-    }
-    if (this.svgClass) {
-      iconClass += ` ${this.svgClass}`;
-    }
-    return iconClass;
-  }
-
-  /**
-   * The bootstrap-italia asset folder path
-   * @default ./bootstrap-italia
-   */
-  protected assetBasePath: string;
-
-  get isAriaHidden(): boolean {
-    return this.labelWaria == undefined && this.title == undefined;
-  }
-
-  get role(): string | null {
-    return this.labelWaria == undefined && this.title == undefined ? null : 'img';
-  }
-
-  constructor() {
-    this.assetBasePath = inject(IT_ASSET_BASE_PATH);
-  }
-}

package/src/lib/components/utils/language-switcher/language-switcher.component.html

@@ -1,21 +0,0 @@
-<it-dropdown [mode]="mode">
-  <ng-container button>
-    <span class="visually-hidden">{{ 'it.utils.selected' | translate: { lang: (currentLang$ | async)?.label } }}</span>
-    <span>{{ (currentLang$ | async)?.label || ('it.utils.select-language' | translate) }}</span>
-  </ng-container>
-
-  @if (availableLanguages) {
-    <ng-container list>
-      @for (lang of availableLanguages; track lang.code) {
-        <it-dropdown-item (click)="changeLanguage(lang.code)" [active]="lang.code === (currentLang$ | async)?.code">
-          {{ lang.label }}
-          @if (lang.code === (currentLang$ | async)?.code) {
-            <span class="visually-hidden">
-              {{ 'it.utils.selected' | translate }}
-            </span>
-          }
-        </it-dropdown-item>
-      }
-    </ng-container>
-  }
-</it-dropdown>

package/src/lib/components/utils/language-switcher/language-switcher.component.spec.ts

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

package/src/lib/components/utils/language-switcher/language-switcher.component.ts

@@ -1,56 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
-import { map, Observable, startWith } from 'rxjs';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { AvailableLanguage } from '../../../interfaces/utils';
-import { AsyncPipe } from '@angular/common';
-import { ItDropdownModule } from '../../core/dropdown/dropdown.module';
-
-@Component({
-  standalone: true,
-  selector: 'it-language-switcher',
-  templateUrl: './language-switcher.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [AsyncPipe, TranslateModule, ItDropdownModule],
-})
-export class ItLanguageSwitcherComponent implements OnInit {
-  /**
-   * The available languages
-   * @default The languages available through TranslateService (ngx-translate)
-   */
-  @Input() availableLanguages: Array<AvailableLanguage> | undefined;
-
-  /**
-   * Dropdown mode
-   */
-  @Input() mode: 'button' | 'link' | 'nav' = 'link';
-
-  protected currentLang$: Observable<AvailableLanguage | undefined>;
-
-  constructor(private readonly translateService: TranslateService) {
-    this.currentLang$ = this.translateService.onLangChange.pipe(
-      startWith({ lang: translateService.currentLang }),
-      map(event => this.availableLanguages?.find(l => l.code === event.lang))
-    );
-  }
-
-  ngOnInit(): void {
-    if (!this.availableLanguages) {
-      this.availableLanguages = this.translateService.getLangs().map(lang => ({
-        code: lang,
-        label: lang,
-        ...(lang === 'it' && { label: 'ITA' }),
-        ...(lang === 'en' && { label: 'ENG' }),
-      }));
-    } else {
-      this.translateService.addLangs(this.availableLanguages.map(l => l.code)); // Adds custom languages
-    }
-  }
-
-  /**
-   * Change the current language
-   * @param lang the language code
-   */
-  public changeLanguage(lang: string): void {
-    this.translateService.use(lang);
-  }
-}

package/src/lib/design-angular-kit.module.ts

@@ -1,131 +0,0 @@
-import { ModuleWithProviders, NgModule } from '@angular/core';
-import { ItAccordionComponent } from './components/core/accordion/accordion.component';
-import { ItAlertComponent } from './components/core/alert/alert.component';
-import { ItAvatarModule } from './components/core/avatar/avatar.module';
-import { ItBadgeDirective } from './components/core/badge/badge.directive';
-import { ItButtonDirective } from './components/core/button/button.directive';
-import { ItCalloutComponent } from './components/core/callout/callout.component';
-import { ItCardComponent } from './components/core/card/card.component';
-import { ItCarouselModule } from './components/core/carousel/carousel.module';
-import { ItChipComponent } from './components/core/chip/chip.component';
-import { ItCollapseComponent } from './components/core/collapse/collapse.component';
-import { ItDimmerModule } from './components/core/dimmer/dimmer.module';
-import { ItDropdownModule } from './components/core/dropdown/dropdown.module';
-import { ItForwardDirective } from './components/core/forward/forward.directive';
-import { ItLinkComponent } from './components/core/link/link.component';
-import { ItListModule } from './components/core/list/list.module';
-import { ItModalComponent } from './components/core/modal/modal.component';
-import { ItNotificationsComponent } from './components/core/notifications/notifications.component';
-import { ItPaginationComponent } from './components/core/pagination/pagination.component';
-import { ItPopoverDirective } from './components/core/popover/popover.directive';
-import { ItProgressBarComponent } from './components/core/progress-bar/progress-bar.component';
-import { ItProgressButtonComponent } from './components/core/progress-button/progress-button.component';
-import { ItSpinnerComponent } from './components/core/spinner/spinner.component';
-import { ItSteppersModule } from './components/core/steppers/steppers.module';
-import { ItTabModule } from './components/core/tab/tab.module';
-import { ItTableModule } from './components/core/table/table.module';
-import { ItTimelineModule } from './components/core/timeline/timeline.module';
-import { ItTooltipDirective } from './components/core/tooltip/tooltip.directive';
-import { ItFormModule } from './components/form/form.module';
-import { ItBackButtonComponent } from './components/navigation/back-button/back-button.component';
-import { ItBackToTopComponent } from './components/navigation/back-to-top/back-to-top.component';
-import { ItBreadcrumbsModule } from './components/navigation/breadcrumbs/breadcrumbs.module';
-import { ItHeaderComponent } from './components/navigation/header/header.component';
-import { ItMegamenuComponent } from './components/navigation/megamenu/megamenu.component';
-import { ItNavBarModule } from './components/navigation/navbar/navbar.module';
-import { ItNavscrollComponent } from './components/navigation/navscroll/navscroll.component';
-import { ItSidebarComponent } from './components/navigation/sidebar/sidebar.component';
-import { ItErrorPageComponent } from './components/utils/error-page/error-page.component';
-import { ItIconComponent } from './components/utils/icon/icon.component';
-import { ItLanguageSwitcherComponent } from './components/utils/language-switcher/language-switcher.component';
-import { DesignAngularKitConfig } from './interfaces/design-angular-kit-config';
-import { ItDateAgoPipe } from './pipes/date-ago.pipe';
-import { ItDurationPipe } from './pipes/duration.pipe';
-import { ItMarkMatchingTextPipe } from './pipes/mark-matching-text.pipe';
-import { ItSkiplinkModule } from './components/navigation/skiplink/skiplink.module';
-import { provideDesignAngularKit } from './provide-design-angular-kit';
-
-/**
- * Core components
- */
-const core = [
-  ItAccordionComponent,
-  ItAlertComponent,
-  ItAvatarModule,
-  ItBadgeDirective,
-  ItButtonDirective,
-  ItCalloutComponent,
-  ItCardComponent,
-  ItCarouselModule,
-  ItChipComponent,
-  ItCollapseComponent,
-  ItDimmerModule,
-  ItDropdownModule,
-  ItForwardDirective,
-  ItLinkComponent,
-  ItListModule,
-  ItModalComponent,
-  ItNotificationsComponent,
-  ItPaginationComponent,
-  ItPopoverDirective,
-  ItProgressBarComponent,
-  ItProgressButtonComponent,
-  ItSpinnerComponent,
-  ItSteppersModule,
-  ItTabModule,
-  ItTableModule,
-  ItTooltipDirective,
-  ItTimelineModule,
-];
-
-/**
- * Navigation Components
- */
-const navigation = [
-  ItBackButtonComponent,
-  ItBackToTopComponent,
-  ItBreadcrumbsModule,
-  ItHeaderComponent,
-  ItNavBarModule,
-  ItSidebarComponent,
-  ItMegamenuComponent,
-  ItSkiplinkModule,
-  ItNavscrollComponent,
-];
-
-/**
- * Utils components
- */
-const utils = [ItErrorPageComponent, ItIconComponent, ItLanguageSwitcherComponent];
-
-/**
- * Library pipes
- */
-const pipes = [ItDateAgoPipe, ItDurationPipe, ItMarkMatchingTextPipe];
-
-const components = [
-  ...core, // Core components
-  ItFormModule, // Form components
-  ...navigation, // Navigation Components
-  ...utils, // Utils components
-  ...pipes, // Library pipes
-];
-
-@NgModule({
-  imports: components,
-  exports: components,
-})
-export class DesignAngularKitModule {
-  public static forRoot(config?: DesignAngularKitConfig): ModuleWithProviders<DesignAngularKitModule> {
-    return {
-      ngModule: DesignAngularKitModule,
-      providers: [provideDesignAngularKit(config)],
-    };
-  }
-
-  public static forChild(): ModuleWithProviders<DesignAngularKitModule> {
-    return {
-      ngModule: DesignAngularKitModule,
-    };
-  }
-}

package/src/lib/enums/colors.enums.ts

@@ -1,10 +0,0 @@
-export enum ColorsEnum {
-  primary = 'primary',
-  secondary = 'secondary',
-  success = 'success',
-  danger = 'danger',
-  warning = 'warning',
-  green = 'green',
-  orange = 'orange',
-  red = 'red',
-}

package/src/lib/enums/sizes.enum.ts

@@ -1,7 +0,0 @@
-export enum SizesEnum {
-  xs = 'size-xs',
-  sm = 'size-sm',
-  lg = 'size-lg',
-  xl = 'size-xl',
-  xxl = 'size-xxl',
-}

package/src/lib/interfaces/design-angular-kit-config.ts

@@ -1,34 +0,0 @@
-import { InjectionToken, Provider } from '@angular/core';
-
-/**
- * The bootstrap-italia asset folder path
- * @default ./bootstrap-italia
- */
-export const IT_ASSET_BASE_PATH = new InjectionToken<string>('it-asset-base-path');
-
-export interface DesignAngularKitConfig {
-  /**
-   * The bootstrap-italia asset folder path
-   * @default ./bootstrap-italia
-   */
-  assetBasePath?: string;
-
-  /**
-   * Load the <a href="https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/#fonts">bootstrap-italia fonts</a>
-   * @default true
-   */
-  loadFont?: boolean;
-
-  /**
-   * The TranslateModule loader
-   * @param itPrefix the design-angular-kit i18n path
-   * @param itSuffix the design-angular-kit i18n suffix
-   * @default
-   * {
-   *   provide: TranslateLoader,
-   *   useFactory: (http: HttpClient) => new TranslateHttpLoader(http, `${assetBasePath}/i18n/`, `.json?v${version}`),
-   *   deps: [HttpClient],
-   * }
-   */
-  translateLoader?: (itPrefix: string, itSuffix: string) => Provider;
-}

package/src/lib/interfaces/form.ts

@@ -1,78 +0,0 @@
-import { IconName } from './icon';
-
-export type InputControlType = 'text' | 'email' | 'number' | 'date' | 'time' | 'tel' | 'color' | 'url';
-
-export interface SelectControlOption<T = any> {
-  value: T;
-  text?: string;
-  selected?: boolean | ((value: T) => boolean);
-  disabled?: boolean | ((value: T) => boolean);
-}
-
-export interface SelectControlGroup<T = any> {
-  label: string;
-  options: Array<SelectControlOption<T>>;
-  dragdrop?: boolean;
-}
-
-export interface UploadFileListItem {
-  /**
-   * The item id
-   */
-  id: number;
-
-  /**
-   * The uploaded file
-   */
-  file: File;
-
-  /**
-   * Show progress bar
-   *
-   * The status of the item changes based on the value:
-   * - <b>uploading</b>: if value is between 0 and 100 (exclusive 0 < value < 100)
-   * - <b>success</b>: if value is greater than 100
-   */
-  progress?: number;
-
-  /**
-   * Show the ability to delete item
-   * @default false
-   */
-  removable?: boolean;
-
-  /**
-   * Set the status of the item as 'error'
-   */
-  error?: boolean;
-
-  /**
-   * Add tooltip on file item name
-   * @example It can be used to show the error message or additional information about the file
-   */
-  tooltip?: string;
-}
-
-/**
- * Elemento disponibile per l'autocompletamento del it-form-input
- */
-export interface AutocompleteItem<T = any> {
-  /** Valore voce di autocompletamento */
-  value: string;
-  /** Opzionale. Path in cui ricercare l'immagine dell'avatar da posizionare a sinistra della voce di autocompletamento */
-  avatarSrcPath?: string;
-  /** Opzionale. Testo in alternativa dell'avatar per accessibilità */
-  avatarAltText?: string;
-  /** Opzionale. Icona posizionata a sinistra della voce di autocompletamento */
-  icon?: IconName;
-  /** Opzionale. Label posizionata a destra della voce di autocompletamento */
-  label?: string;
-  /** Opzionale. Link relativo all'elemento */
-  link?: string;
-
-  /**
-   * Attribute not used for autocomplete rendering.
-   * It can be useful to retrieve some extra information when selecting the autocomplete item
-   */
-  additionalData?: T;
-}

package/src/lib/interfaces/icon.ts

@@ -1,176 +0,0 @@
-export type IconSize = 'xs' | 'sm' | 'lg' | 'xl';
-
-export type IconColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'white';
-
-export type IconName = (typeof IconNameArray)[number];
-
-export const IconNameArray = [
-  'arrow-down',
-  'arrow-down-circle',
-  'arrow-down-triangle',
-  'arrow-left',
-  'arrow-left-circle',
-  'arrow-left-triangle',
-  'arrow-right',
-  'arrow-right-circle',
-  'arrow-right-triangle',
-  'arrow-up',
-  'arrow-up-circle',
-  'arrow-up-triangle',
-  'ban',
-  'bookmark',
-  'box',
-  'burger',
-  'calendar',
-  'camera',
-  'card',
-  'chart-line',
-  'check',
-  'check-circle',
-  'chevron-left',
-  'chevron-right',
-  'clip',
-  'clock',
-  'close',
-  'close-big',
-  'close-circle',
-  'code-circle',
-  'comment',
-  'copy',
-  'delete',
-  'download',
-  'error',
-  'exchange-circle',
-  'expand',
-  'external-link',
-  'flag',
-  'folder',
-  'fullscreen',
-  'funnel',
-  'hearing',
-  'help',
-  'help-circle',
-  'horn',
-  'inbox',
-  'info-circle',
-  'key',
-  'link',
-  'list',
-  'locked',
-  'logout',
-  'mail',
-  'mail-open',
-  'map-marker',
-  'map-marker-circle',
-  'map-marker-minus',
-  'map-marker-plus',
-  'maximize',
-  'maximize-alt',
-  'minimize',
-  'minus',
-  'minus-circle',
-  'more-actions',
-  'more-items',
-  'note',
-  'pa',
-  'password-invisible',
-  'password-visible',
-  'pencil',
-  'piattaforme',
-  'pin',
-  'plug',
-  'plus',
-  'plus-circle',
-  'presentation',
-  'print',
-  'refresh',
-  'restore',
-  'rss',
-  'rss-square',
-  'search',
-  'settings',
-  'share',
-  'software',
-  'star-full',
-  'star-outline',
-  'telephone',
-  'tool',
-  'unlocked',
-  'upload',
-  'user',
-  'video',
-  'warning',
-  'warning-circle',
-  'wifi',
-  'zoom-in',
-  'zoom-out',
-
-  // Files
-  'file',
-  'files',
-  'file-audio',
-  'file-compressed',
-  'file-csv',
-  'file-json',
-  'file-odp',
-  'file-ods',
-  'file-odt',
-  'file-pdf',
-  'file-pdf-ext',
-  'file-sheet',
-  'file-slides',
-  'file-ppt',
-  'file-txt',
-  'file-video',
-  'file-xml',
-
-  // Platforms
-  'behance',
-  'facebook',
-  'facebook-square',
-  'figma',
-  'figma-square',
-  'flickr',
-  'flickr-square',
-  'github',
-  'instagram',
-  'linkedin',
-  'linkedin-square',
-  'mastodon',
-  'mastodon-square',
-  'medium',
-  'medium-square',
-  'moodle',
-  'moodle-square',
-  'pinterest',
-  'pinterest-square',
-  'quora',
-  'quora-square',
-  'reddit',
-  'reddit-square',
-  'slack',
-  'slack-square',
-  'snapchat',
-  'snapchat-square',
-  'stackexchange',
-  'stackexchange-square',
-  'stackoverflow',
-  'stackoverflow-square',
-  'telegram',
-  'threads',
-  'threads-square',
-  'tiktok',
-  'tiktok-square',
-  'twitter',
-  'twitter-square',
-  'vimeo',
-  'vimeo-square',
-  'whatsapp',
-  'whatsapp-square',
-  'youtube',
-  'google',
-
-  // Extra
-  'designers-italia',
-  'team-digitale',
-] as const;

package/src/lib/interfaces/sortable-table.ts

@@ -1,42 +0,0 @@
-import { InjectionToken } from '@angular/core';
-
-export type SortDirection = 'asc' | 'desc' | undefined;
-
-/** Position of the arrow that displays when sorted. */
-export type SortHeaderArrowPosition = 'before' | 'after';
-
-/** Interface for a directive that holds sorting state consumed by `ItSortHeader`. */
-export interface ItSortable {
-  /** The id of the column being sorted. */
-  id: string;
-
-  /** Starting sort direction. */
-  start?: SortDirection;
-
-  /** Whether to disable clearing the sorting state. */
-  disableSortClear?: boolean;
-}
-
-/** The current sort state. */
-export interface ItSortEvent {
-  /** The id of the column being sorted. */
-  active: string;
-
-  /** The sort direction. */
-  direction: SortDirection;
-}
-
-/**
- * Default options for `it-sort`.
- */
-export interface ItSortDefaultOptions {
-  /** Whether to disable clearing the sorting state. */
-  disableClear?: boolean;
-  /** Position of the arrow that displays when sorted. */
-  arrowPosition?: SortHeaderArrowPosition;
-}
-
-/**
- * Injection token to be used to override the default options for `it-sort`.
- */
-export const IT_SORT_DEFAULT_OPTIONS = new InjectionToken<ItSortDefaultOptions>('IT_SORT_DEFAULT_OPTIONS');

package/src/lib/interfaces/utils.ts

@@ -1,11 +0,0 @@
-export interface AvailableLanguage {
-  /**
-   * The language code
-   */
-  code: string;
-
-  /**
-   * Label to show
-   */
-  label: string;
-}