@adabit/iu-kit

Libreria UI Angular per i componenti IU.

Importante: entry point secondari (nuovi percorsi di import)

Dalla versione 0.9.0 i componenti pesanti sono in entry point secondari, per poterli caricare solo quando servono (@defer, rotte lazy):

| Componente | Importa da | Da @adabit/iu-kit | | --- | --- | --- | | Spreadsheet (IuSpreadsheetComponent, tipi IuSpreadsheet*, readSpreadsheetXlsx) | @adabit/iu-kit/spreadsheet | non disponibile | | Calendar (IuCalendarComponent, IuCalendar*) | @adabit/iu-kit/calendar | deprecato, verrà rimosso | | Gantt (IuGanttComponent, IuGantt*) | @adabit/iu-kit/gantt | deprecato, verrà rimosso | | Node editor (IuNodeEditorComponent, IuNode*) | @adabit/iu-kit/node-editor | deprecato, verrà rimosso | | Tutti gli altri componenti | @adabit/iu-kit | invariato |

import { IuButtonComponent } from '@adabit/iu-kit';
import { IuSpreadsheetComponent } from '@adabit/iu-kit/spreadsheet';
import { IuCalendarComponent } from '@adabit/iu-kit/calendar';

• Non serve configurazione: i sotto-percorsi sono negli exports del pacchetto.
• Con @defer (on viewport) { <iu-spreadsheet /> } il foglio viene scaricato a parte: 68 KB gzip all'avvio + 46 KB al bisogno, invece di 109 KB all'avvio.
• Calendar, Gantt e node editor importati da @adabit/iu-kit funzionano ancora, ma finché esiste quella riesportazione @defer non li separa dal bundle iniziale. Aggiorna gli import ora.
• Guida completa, misure e migrazione: docs/entry-points.md.

Prerequisiti obbligatori

• Angular 20.x
• peer deps installate:
  • @angular/cdk@^20.0.0
  • @fortawesome/angular-fontawesome@^2.0.0
  • @fortawesome/fontawesome-svg-core@^6.5.2
  • @ngx-translate/core@^18.0.0
• CSS globale libreria importato nel progetto host

Quick start (5 minuti)

1. Installa il pacchetto:

pnpm add @adabit/iu-kit

2. Verifica peer deps (se mancanti):

pnpm add @angular/cdk @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @ngx-translate/core

3. Aggiungi il CSS globale in angular.json:

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.scss",
              "node_modules/@adabit/iu-kit/styles/iu-theme.css"
            ]
          }
        }
      }
    }
  }
}

Nota: evita di copiare iu-theme.css in src/styles/. Importalo dal pacchetto per restare allineato agli aggiornamenti.

4. Importa il componente in una pagina standalone:

import { Component } from '@angular/core';
import { IuPasswordInputComponent } from '@adabit/iu-kit';

@Component({
  standalone: true,
  selector: 'app-login',
  imports: [IuPasswordInputComponent],
  template: `<iu-password-input [(model)]="password"></iu-password-input>`
})
export class LoginComponent {
  password = '';
}

Compatibilita ufficiale

| iu-kit | Angular | Note | |---|---|---| | 0.9.0 | 20.x | Foglio di calcolo, entry point secondari (@adabit/iu-kit/spreadsheet, /calendar, /gantt, /node-editor) | | 0.8.0 | 20.x | Calendario, Gantt ed editor nodi interattivi, export PNG/PDF/SVG | | 0.5.0 | 20.x | Gantt, theme system e showcase HUD | | 0.4.0 | 20.x | Angular 20 baseline | | 0.3.1 | 17.x | Baseline precedente |

Dettaglio completo: docs/compatibility-matrix.md (nel repository monorepo).

Theme System

La libreria supporta una strategia temi strutturata basata su:

• token CSS globali --iu-*
• attributi root data-iu-theme, data-iu-theme-mode, data-iu-density, data-iu-theme-name
• preset esportati dalla public API

Temi built-in attualmente inclusi:

• base
• windows-95
• iron-man

Oggetti esportati:

import { IU_THEME_PRESETS, getIuThemePreset, IuThemeDefinition } from '@adabit/iu-kit';

Guida completa: docs/theme-system.md.

Changelog

0.9.0

• Entry points: iu-spreadsheet is published only at @adabit/iu-kit/spreadsheet; iu-calendar, iu-gantt and iu-node-editor are available at @adabit/iu-kit/calendar, /gantt, /node-editor. Their exports from @adabit/iu-kit are kept for compatibility but deprecated and will be removed in a future release. Importing from the sub-paths lets @defer and lazy routes load these components on demand. Guide: docs/entry-points.md.

• Added the IuSpreadsheetComponent: formula engine with 73 functions (math, conditional aggregates, logic, text, dates, lookups), absolute and cross-sheet references, circular reference detection, reference highlighting and pointing while editing, function suggestions; multiple sheets with tabs; cell styles and number formats; conditional formatting (rules, formulas, color scales, data bars); auto filter with app-managed filter UI (filterOpen); sorting; frozen panes; column/row resize and auto-fit; fill handle with series; Excel compatible copy and paste; undo/redo; notes and allowed values; status bar aggregates; row virtualization with the Angular CDK virtual scroll (variable row heights, sticky header and frozen rows); merged cells (merges, mergeCells, unmergeCells); protected rows, columns and ranges (locked, setLocked); freezeFirstRow() / freezeFirstColumn(); XLSX import (importXlsx, readSpreadsheetXlsx) with values, formulas, styles, theme colors, number formats, merges, frozen panes, validations and notes; incremental recalculation (only changed cells and their dependents); compressed XLSX export (exportFile() returns a Promise<Blob>); XLSX and CSV export and CSV import without dependencies. Guide: docs/spreadsheet.md.

• IuIconButtonComponent: pressed input for toggle buttons (aria-pressed and pressed style).

• IuSelectButtonComponent: option icons (optionIcon, default icon) and iconOnly segmented mode with labels as tooltips.

• IuContextMenuComponent: the menu stays inside the viewport (opens to the left near the right edge, moves up near the bottom) and scrolls when taller than the window.

0.8.0

• Added the IuCalendarComponent with year, month, week, day, and agenda views, drag-and-drop to move and resize events, drag selection to create events, categories with a filterable legend, business hours, week numbers, a custom event template (iuCalendarEvent), interaction outputs for app-managed details and menus (eventClick with the event element, eventContextMenu), and a compact layout for narrow containers. Guide: docs/calendar.md.
• IuGanttComponent: optional editing (editable: drag to move, resize from both edges, progress handle), task creation on "new task" rows (allowCreate, taskCreate), dependency drawing (linkable, dependencyCreate), dependencyClick, taskContextMenu, selectedTaskId, locale and labels. The header now scrolls with the timeline, colors follow the theme tokens (dark mode), date-only strings are read as local days, and one-day tasks render as bars unless milestone: true. Guide: docs/gantt.md.
• IuNodeEditorComponent: groups (groups, groupsChange), multi and box selection, selectable connections with a wide hit area, keyboard shortcuts, typed ports with compatibility check (type, multiple, canConnect, connectionRejected), connections in both directions, edge labels, zoom towards the cursor, fitView(), node creation hooks (nodeDrop, canvasDoubleClick, contextMenu), locale and labels. Guide: docs/node-editor.md.
• Calendar, Gantt and node editor drags no longer start a text selection that scrolls the page.
• IuGanttComponent: scale input (day, week, month, quarter) with unitWidth; narrow bars show their title next to the bar.
• Client-side export without dependencies for IuGanttComponent and IuNodeEditorComponent: download(), exportAs() and toSvg() for PNG, PDF and SVG (node editor toolbar buttons with exportable). Shared helpers are exported from iu-export (exportSvg, downloadBlob, svgToPng, svgToPdf, ...).
• IuChipComponent: optional color dot (color), toggle mode (selectable, selected, selectedChange) and size="md". IuIconButtonComponent grows with its label instead of clipping it. IuSelectButtonComponent selected option follows the theme surface in dark mode.
• Calendar toolbar, view switcher, legend and node editor toolbar now use iu-icon-button, iu-select-button and iu-chip instead of custom controls.

0.5.0

• Added the IuGanttComponent with daily timeline, collapsible groups, milestones, progress, and dependencies.
• Added a structured theme system based on exported presets, root theme attributes, and global CSS tokens.
• Added the base, windows-95, and blue/cyan iron-man theme presets.
• Added the theme customizer showcase and documented the theme extension contract.
• Improved Iron Man styling across buttons, cards, layout panels, menus, form controls, overlays, and number inputs.
• Fixed corrupted UTF-8 separator text in the date range showcase.
• Updated the TagBox showcase mode controls to use IuButtonComponent.

0.4.0

• Updated the official baseline to Angular 20.
• Aligned peer dependencies with the supported major versions for internal library usage.
• Updated the toolchain to Angular CLI/build 20, ng-packagr 20, and TypeScript 5.8.

0.3.1

• Aligned monorepo versions for the library, showcase, and MCP.
• Updated public references to the current release.

0.2.3

• Fixed theme packaging: styles/iu-theme.css is included in the npm package.
• Aligned integration: the official path is node_modules/@adabit/iu-kit/styles/iu-theme.css.

0.2.4

• Fixed iu-select: rendered the arrow with pure CSS and separated the clear button from the trigger.
• Fixed the file-uploader demo: added an explicit CommonModule import for *ngIf.
• Technical cleanup: removed the duplicated/non-public dashboard and iu-kit.module.ts placeholders.
• Updated documentation and starter templates to the new package baseline.

0.2.2

• Fixed the iu-select overlay regression: stable open/close behavior with no clicks intercepted by the backdrop.
• Fixed iu-select markup: removed the nested button inside button for the clear action.
• Fixed iu-theme-customizer: native option persistence with persistState and storageKey.
• Fixed iu-toolbar: shrink-safe start/center/end slots on narrow viewports.
• Fixed iu-table: reduced spurious horizontal overflow and contained the resize handle.

0.2.1

• Fixed iu-password-input layout:
  • host-safe sizing (display:block, width:100%, min-width:0)
  • miglior gestione box model in contesti con layout vincolato
• Fixed iu-public-layout:
  • rimosso overflow verticale indesiderato (box-sizing:border-box, 100dvh)
  • hardening min-width:0 su shell/card
• Fixed iu-theme-customizer:
  • drawer body scrollabile con contenuto lungo
  • comportamento viewport-safe mobile/desktop
• Fixed iu-menu:
  • separatori non piu tagliati quando non c'e scrollbar
• Fixed iu-select:
  • dropdown panel reso via overlay (non clippato da overflow:hidden di card/container)
  • hardening search input/panel su box model per evitare overflow orizzontale
• Documentation:
  • aggiunta guida esplicita su wiring del iu-theme-customizer
  • aggiunta matrice compatibilita e starter template Angular 17
• Packaging:
  • esportato styles/iu-theme.css nel pacchetto npm (node_modules/@adabit/iu-kit/styles/iu-theme.css)

0.2.0

• Introduced the iu-public-layout component.
• Introduced the iu-password-input component.
• For correct integration:
  • import iu-theme.css in the global styles
  • verify that peer dependencies are aligned with Angular 17

Theme Customizer Contract

iu-theme-customizer e un controller UI: emette eventi ma non applica automaticamente stato globale al DOM host.

• themeMode / density: richiedono wiring su attributi globali (data-iu-theme, data-iu-density, data-iu-theme-mode)
• themeName: richiede wiring su data-iu-theme-name
• flushLayout: richiede wiring sul tuo layout host ([flush] o classe CSS host)
• colori/font/fontSize: richiedono wiring su CSS variables globali

Recipe completa: docs/theme-customizer-wiring.md.

Sviluppo libreria

pnpm run build:lib
pnpm test

Starter consigliato: templates/angular17-starter (nel repository monorepo).