design-angular-kit 1.2.0 → 1.2.1

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

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

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

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

package/{lib/interfaces/core.d.ts → src/lib/interfaces/core.ts}

@@ -1,77 +1,119 @@
 import { IconName } from './icon';
+
 export type AlertColor = 'primary' | 'info' | 'success' | 'warning' | 'danger';
-export type ButtonColor = 'primary' | 'outline-primary' | 'secondary' | 'outline-secondary' | 'success' | 'outline-success' | 'danger' | 'outline-danger' | 'warning' | 'outline-warning' | 'info' | 'outline-info' | 'light' | 'outline-light' | 'dark' | 'outline-dark' | 'link';
+
+export type ButtonColor =
+  | 'primary'
+  | 'outline-primary'
+  | 'secondary'
+  | 'outline-secondary'
+  | 'success'
+  | 'outline-success'
+  | 'danger'
+  | 'outline-danger'
+  | 'warning'
+  | 'outline-warning'
+  | 'info'
+  | 'outline-info'
+  | 'light'
+  | 'outline-light'
+  | 'dark'
+  | 'outline-dark'
+  | 'link';
+
 export type ButtonSize = 'lg' | 'sm' | 'xs';
 export type ButtonType = 'submit' | 'button';
+
 export type CalloutColor = 'success' | 'warning' | 'danger' | 'important' | 'note';
 export type CalloutAppearance = 'default' | 'highlight' | 'more';
+
 export type ChipColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning';
+
 export type ElementPlacement = 'top' | 'bottom' | 'left' | 'right';
+
 export type ProgressBarColor = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+
 export type BadgeColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+
 export type TableColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
+
 export type TableHeadColor = 'light' | 'dark';
+
 export type TableResponsive = 'responsive' | 'responsive-sm' | 'responsive-md' | 'responsive-lg' | 'responsive-xl' | 'responsive-xxl';
+
 export type VerticalAlignment = 'align-baseline' | 'align-top' | 'align-middle' | 'align-bottom' | 'align-text-bottom' | 'align-text-top';
+
 export type DropdownDirection = 'dropup' | 'dropend' | 'dropstart';
+
 export type CarouselType = 'default' | 'three-cols' | 'three-cols-arrow-visible';
+
 export type TimelinePINType = 'default' | 'evidence' | 'now';
+
 export interface TimelineElement {
-    pin: {
-        type?: TimelinePINType;
-        icon?: IconName;
-        text: string;
-    };
-    category?: {
-        title: string;
-        link: string;
-    };
-    title: string;
+  pin: {
+    type?: TimelinePINType;
+    icon?: IconName;
     text: string;
-    signature?: string;
-    eventDate?: Date;
-    link?: string;
+  };
+  category?: {
+    title: string;
+    link: string;
+  };
+  title: string;
+  text: string;
+  signature?: string;
+  eventDate?: Date;
+  link?: string;
 }
+
 export interface Notification {
-    /**
-     * Notification type
-     */
-    type: NotificationType;
-    /**
-     * Notification title
-     */
-    title: string;
-    /**
-     * Notification message / text
-     */
-    message?: string;
-    /**
-     * Custom duration of notification
-     */
-    duration?: number;
-    /**
-     * The close notification button appears
-     */
-    dismissible?: boolean;
-    /**
-     * Custom position of notification
-     */
-    position?: NotificationPosition;
-    /**
-     * Custom icon of notification
-     */
-    icon?: IconName;
+  /**
+   * Notification type
+   */
+  type: NotificationType;
+
+  /**
+   * Notification title
+   */
+  title: string;
+
+  /**
+   * Notification message / text
+   */
+  message?: string;
+
+  /**
+   * Custom duration of notification
+   */
+  duration?: number;
+
+  /**
+   * The close notification button appears
+   */
+  dismissible?: boolean;
+
+  /**
+   * Custom position of notification
+   */
+  position?: NotificationPosition;
+
+  /**
+   * Custom icon of notification
+   */
+  icon?: IconName;
 }
-export declare enum NotificationType {
-    Standard = "standard",
-    Success = "success",
-    Error = "error",
-    Info = "info",
-    Warning = "warning"
+
+export enum NotificationType {
+  Standard = 'standard',
+  Success = 'success',
+  Error = 'error',
+  Info = 'info',
+  Warning = 'warning',
 }
-export declare enum NotificationPosition {
-    Top = "top-fix mt-3",
-    Bottom = "bottom-fix mb-3",
-    Left = "left-fix ms-3",
-    Right = "right-fix me-3"
+
+export enum NotificationPosition {
+  Top = 'top-fix mt-3',
+  Bottom = 'bottom-fix mb-3',
+  Left = 'left-fix ms-3',
+  Right = 'right-fix me-3',
 }

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

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

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

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

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

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