@cdevhub/ngx-tw 0.2.0 → 0.3.0

package/README.md

@@ -5,16 +5,20 @@ and **Angular CDK**. The quality bar is [Angular Material](https://material.angu
 — well-tested, accessible, composable — but styled with Tailwind utility classes
 instead of Material Design tokens.
 
-- **37 components** covering common UI needs (buttons, inputs, overlays,
-  navigation, data display, etc.)
-- **Standalone, signal-based APIs** — Angular v21 idioms throughout (no
-  NgModules, `OnPush`, `input()`/`output()`/`model()`).
+- **54 components** spanning forms, overlays, navigation, data display, layout,
+  and feedback.
+- **Standalone, signal-based APIs** — Angular v22 idioms throughout (no
+  NgModules, `OnPush`, `input()` / `output()` / `model()`).
 - **Accessible by default** — built on Angular CDK primitives (focus management,
-  overlays, a11y, collections). WCAG AA.
-- **Tailwind v4 native** — no component CSS files; consumers control theming
-  through semantic tokens.
+  overlays, a11y, collections). Targets WCAG AA and is checked with AXE.
+- **Tailwind v4 native** — no component CSS files; consumers control appearance
+  through semantic design tokens.
+- **Theme runtime included** — light / dark / high-contrast / system with a
+  persisted `ThemeService`, or pure-CSS dark mode with no JS.
 - **Tree-shakeable secondary entry points** — import only what you use.
 
+> **Live demo & API reference:** <https://avs2001.github.io/ngx-tw/>
+
 ## Installation
 
 ```bash
@@ -23,31 +27,90 @@ npm install @cdevhub/ngx-tw @angular/cdk tailwindcss tailwind-variants
 
 **Peer requirements**
 
-- Angular `^21.2.0` (`@angular/core`, `@angular/common`)
-- `@angular/cdk` `^21.0.0`
-- `tailwindcss` `^4.0.0`
-- `tailwind-variants` `^0.3.0`
+| Package | Version |
+|---|---|
+| `@angular/core`, `@angular/common` | `^22.0.0` |
+| `@angular/cdk` | `^22.0.0` |
+| `tailwindcss` | `^4.0.0` |
+| `tailwind-variants` | `^0.3.0` |
+
+Form controls additionally use `@angular/forms` (ships with Angular). Node
+`^22.22.3`, `^24.15.0`, or `>=26.0.0`.
 
 ## Setup
 
 ### 1. Import the default theme
 
-Tailwind v4 has no JS config file — all customization happens in CSS. Add the
-ngx-tw default theme to your global stylesheet so semantic tokens resolve:
+Tailwind v4 has no JS config file — all customization happens in CSS. One
+import is all that is needed:
 
 ```css
 /* src/styles.css */
-@import 'tailwindcss';
 @import '@cdevhub/ngx-tw/theme/index.css';
 ```
 
-The default theme maps semantic roles (`info`, `success`, `warning`, `error`,
+That single line pulls in Tailwind itself, the semantic tokens, and a `@source`
+directive pointing at the library's compiled bundles — the last one matters
+because Tailwind v4 never scans `node_modules` on its own, so without it your
+build would emit tokens but no component utilities. You do not need to add a
+`@source` line yourself, and you do not need a separate `@import 'tailwindcss'`
+(a duplicate is harmless if you already have one).
+
+If you use any overlay-based component (dialog, sheet, menu, popover, select,
+tooltip, combobox, date-picker, time-picker, command-palette), also import the
+CDK overlay stylesheet:
+
+```css
+@import '@angular/cdk/overlay-prebuilt.css';
+```
+
+The theme maps semantic roles (`info`, `success`, `warning`, `error`,
 `primary`, `secondary`, `accent`, `neutral`) and structural tokens (`surface`,
-`fg`, `border`) to Tailwind's palette, with dark mode support out of the box.
+`fg`, `border`) to Tailwind's palette, and ships **dark** and **high-contrast**
+variants out of the box.
 
-### 2. Use components
+### 2. Register providers
 
-Import from the per-component entry points for best tree-shaking:
+A handful of subsystems are provider-based. Register the ones you use once, in
+your application config:
+
+```ts
+// src/app/app.config.ts
+import { ApplicationConfig } from '@angular/core';
+import { provideTheme } from '@cdevhub/ngx-tw/theme';
+import { provideNativeDateAdapter } from '@cdevhub/ngx-tw/calendar';
+import { provideTwLucideIcons } from '@cdevhub/ngx-tw/icon/lucide';
+import { provideTwDialog } from '@cdevhub/ngx-tw/dialog';
+import { provideSheet } from '@cdevhub/ngx-tw/sheet';
+import { provideToast } from '@cdevhub/ngx-tw/toast';
+import { Star, Search, Settings } from 'lucide';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideTheme(),                              // theme service + persistence
+    provideNativeDateAdapter(),                  // calendar / date pickers
+    provideTwLucideIcons({ Star, Search, Settings }), // register named icons
+    provideTwDialog(),                           // tw-dialog overlay service
+    provideSheet(),                              // side-sheet overlay service
+    provideToast({ position: 'bottom-right', duration: 4000 }),
+  ],
+};
+```
+
+You only need the providers for the features you use:
+
+| Provider | Required for | Entry point |
+|---|---|---|
+| `provideTheme()` | runtime theme switching / `ThemeService` (optional — see below) | `@cdevhub/ngx-tw/theme` |
+| `provideNativeDateAdapter()` | `calendar`, `date-picker`, `date-range-picker` | `@cdevhub/ngx-tw/calendar` |
+| `provideTwLucideIcons()` / `provideTwIcons()` | `<tw-icon>` and any component that renders glyphs | `@cdevhub/ngx-tw/icon/lucide`, `@cdevhub/ngx-tw/icon` |
+| `provideTwDialog()` | imperative dialogs via the `TwDialog` service | `@cdevhub/ngx-tw/dialog` |
+| `provideSheet()` | imperative side sheets via the `Sheet` service | `@cdevhub/ngx-tw/sheet` |
+| `provideToast()` | `ToastService` notifications | `@cdevhub/ngx-tw/toast` |
+
+### 3. Use components
+
+Import from the per-component entry points for the best tree-shaking:
 
 ```ts
 import { Component } from '@angular/core';
@@ -65,9 +128,14 @@ import { AlertComponent } from '@cdevhub/ngx-tw/alert';
 export class AppComponent {}
 ```
 
-## Customizing the theme
+## Theming
+
+### Semantic tokens
 
-Override any semantic token in your own CSS using Tailwind v4's `@theme` block:
+Components never reference raw palette colors. They use **semantic roles** on a
+50–950 scale (`bg-primary-500`, `text-error-800`) plus structural tokens
+(`surface`, `surface-raised`, `fg`, `fg-muted`, `border`). Re-theme the whole
+library — including dark mode and brand palettes — by overriding those tokens.
 
 ```css
 @import '@cdevhub/ngx-tw/theme/index.css';
@@ -77,54 +145,199 @@ Override any semantic token in your own CSS using Tailwind v4's `@theme` block:
   --color-primary-500: oklch(0.55 0.2 260);
   --color-primary-600: oklch(0.48 0.2 260);
 
-  /* Remap "info" to the sky palette */
+  /* Remap "info" onto the sky palette */
   --color-info-50: var(--color-sky-50);
   --color-info-500: var(--color-sky-500);
 }
 ```
 
-Dark mode is handled entirely by the theme layer — swap in your own
-`index.css` equivalent (or extend the ngx-tw one) if you need a different
-dark palette. Components only reference semantic tokens, so they adapt
-automatically.
+### Dark mode & runtime switching
 
-## Components
+Dark mode is driven by a `data-theme` attribute on `<html>` (with a
+`prefers-color-scheme` fallback when no attribute is set), so the simplest setup
+needs **no JavaScript** — the imported theme CSS already responds to the OS
+preference.
+
+For explicit, persisted switching, register `provideTheme()` and inject
+`ThemeService`:
+
+```ts
+import { ThemeService } from '@cdevhub/ngx-tw/theme';
 
-All components are exposed as independent secondary entry points:
+export class ThemeToggle {
+  private readonly theme = inject(ThemeService);
 
+  readonly current = this.theme.theme;          // 'light' | 'dark' | 'high-contrast' | 'system'
+  readonly resolved = this.theme.resolvedTheme;  // never 'system'
+  readonly isDark = this.theme.isDark;           // boolean signal
+
+  toggle() {
+    this.theme.cycleTheme();           // light → dark → high-contrast → system → …
+  }
+
+  dark() {
+    this.theme.setTheme('dark');       // also: 'light' | 'high-contrast' | 'system'
+  }
+}
 ```
-@cdevhub/ngx-tw/accordion          @cdevhub/ngx-tw/input                @cdevhub/ngx-tw/sort
-@cdevhub/ngx-tw/alert              @cdevhub/ngx-tw/item                 @cdevhub/ngx-tw/spinner
-@cdevhub/ngx-tw/avatar             @cdevhub/ngx-tw/menu                 @cdevhub/ngx-tw/stepper
-@cdevhub/ngx-tw/badge              @cdevhub/ngx-tw/paginator            @cdevhub/ngx-tw/switch
-@cdevhub/ngx-tw/button             @cdevhub/ngx-tw/popover              @cdevhub/ngx-tw/tab-nav
-@cdevhub/ngx-tw/calendar           @cdevhub/ngx-tw/progress-bar         @cdevhub/ngx-tw/table
-@cdevhub/ngx-tw/card               @cdevhub/ngx-tw/radio                @cdevhub/ngx-tw/tabs
-@cdevhub/ngx-tw/checkbox           @cdevhub/ngx-tw/segmented-control    @cdevhub/ngx-tw/time-picker
-@cdevhub/ngx-tw/code-block         @cdevhub/ngx-tw/select               @cdevhub/ngx-tw/toast
-@cdevhub/ngx-tw/collapsible        @cdevhub/ngx-tw/separator            @cdevhub/ngx-tw/tooltip
-@cdevhub/ngx-tw/command-palette    @cdevhub/ngx-tw/skeleton
-@cdevhub/ngx-tw/date-picker        @cdevhub/ngx-tw/slider
-@cdevhub/ngx-tw/dialog             @cdevhub/ngx-tw/form-field
-@cdevhub/ngx-tw/flip-card          @cdevhub/ngx-tw/icon
+
+`ThemeService` writes the active theme to `data-theme` on `documentElement`,
+tracks the OS preference, and persists the selection to `localStorage`
+(`ngx-tw-theme` by default). Configure via `provideTheme({ defaultTheme,
+storageKey, attribute, target })`. A `[twTheme]` directive is also available to
+scope a theme to a subtree.
+
+## Icons
+
+`<tw-icon>` uses a registry: a glyph renders only after its name is registered.
+The Lucide adapter is the quickest path — register the icons you need at
+bootstrap:
+
+```ts
+import { provideTwLucideIcons } from '@cdevhub/ngx-tw/icon/lucide';
+import { Star, Search } from 'lucide';
+
+// in providers:
+provideTwLucideIcons({ Star, Search });
 ```
 
-Shared types (`TwColor`, `TwSize`) live in `@cdevhub/ngx-tw/core`.
+```html
+<tw-icon name="Star" size="md" />
+```
 
-A catch-all entry (`@cdevhub/ngx-tw`) re-exports every public API for convenience, but
-per-component imports are preferred for tree-shaking.
+Bring your own SVGs with `provideTwIcons()` / `IconRegistry` from
+`@cdevhub/ngx-tw/icon`.
+
+## Date & time
+
+The calendar and date pickers require a date adapter. The native adapter works
+zero-config:
+
+```ts
+import { provideNativeDateAdapter } from '@cdevhub/ngx-tw/calendar';
+// providers: [ provideNativeDateAdapter() ]
+```
+
+A Luxon adapter is available from the `@cdevhub/ngx-tw/calendar/luxon`
+sub-entry, and calendar test helpers from `@cdevhub/ngx-tw/calendar/testing`.
+Calendar UI strings are localizable via `CalendarIntl` / `provideCalendarIntl`.
 
 ## Form controls
 
-Interactive controls (input, select, checkbox, radio, switch, slider,
-date-picker, time-picker, etc.) implement `ControlValueAccessor` and work with
-all three Angular form strategies — template-driven, reactive, and
-signal-based forms.
+Interactive controls — `input`, `textarea`, `select`, `combobox`, `checkbox`,
+`radio`, `switch`, `slider`, `date-picker`, `date-range-picker`, `time-picker` —
+implement `ControlValueAccessor` and work with all three Angular form
+strategies: template-driven, reactive, and signal forms. Pair them with
+`tw-form-field` for labels, hints, and error messages.
+
+## Components
+
+54 components, each published as an independent secondary entry point
+(`@cdevhub/ngx-tw/<name>`). See the [live demo](https://avs2001.github.io/ngx-tw/)
+for full API tables and examples.
+
+### Actions & inputs
+
+| Component | Selector | Purpose |
+|---|---|---|
+| button | `[twButton]` | Multi-variant button (color / size / variant) |
+| checkbox | `tw-checkbox` | Accessible checkbox control |
+| radio | `tw-radio-group` / `tw-radio` | Single-choice radio group |
+| switch | `tw-switch` | Boolean toggle |
+| slider | `tw-slider` | Numeric range selector |
+| input | `[twInput]` | Text input styling directive |
+| textarea | `[twTextarea]` | Multi-line text input |
+| select | `tw-select` | Single/multi dropdown select |
+| combobox | `tw-combobox` | Autocomplete / filterable input |
+| segmented-control | `tw-segmented-control` | Single-select button group |
+| form-field | `tw-form-field` | Label / hint / error wrapper |
+
+### Date & time
+
+| Component | Selector | Purpose |
+|---|---|---|
+| calendar | `tw-calendar` | Single / multiple / range calendar |
+| date-picker | `tw-date-picker` | Single date input + overlay |
+| date-range-picker | `tw-date-range-picker` | Date-range input + overlay |
+| time-picker | `tw-time-picker` | Hours / minutes selector |
+
+### Overlays & feedback
+
+| Component | Selector / API | Purpose |
+|---|---|---|
+| dialog | `TwDialog` service | Modal dialog overlay |
+| sheet | `Sheet` service | Side drawer / sheet |
+| popover | `[twPopover]` | Floating anchored content |
+| tooltip | `[twTooltip]` | Hover / focus tooltip |
+| menu | `tw-menu` + `[twMenuTrigger]` | Dropdown & context menus |
+| toast | `ToastService` | Transient notifications |
+| command-palette | `tw-command-palette` | Keyboard command finder |
+| alert | `tw-alert` | Inline status message |
+
+### Navigation
+
+| Component | Selector | Purpose |
+|---|---|---|
+| tabs | `tw-tabs` | Tabbed content panels |
+| tab-nav | `[twTabNav]` / `[twTabLink]` | Router-aware tab bar |
+| breadcrumbs | `tw-breadcrumbs` | Hierarchical path navigation |
+| paginator | `tw-paginator` | Page-size / range pagination |
+| stepper | `tw-stepper` | Multi-step flow |
+
+### Data display
+
+| Component | Selector | Purpose |
+|---|---|---|
+| table | `tw-table` | Data table (sort, expand, sticky) |
+| sort | `[twSort]` | Sortable column headers |
+| card | `tw-card` | Elevated / outlined container |
+| item | `tw-item` | List item with leading/trailing slots |
+| stat | `tw-stat` | KPI value with delta |
+| badge | `[twBadge]` | Count / status indicator |
+| avatar | `tw-avatar` / `tw-avatar-group` | Image / initials avatar |
+| timeline | `tw-timeline` | Chronological event list |
+| code-block | `tw-code-block` | Code display with header |
+| separator | `tw-separator` | Divider line |
+
+### Layout & disclosure
+
+| Component | Selector | Purpose |
+|---|---|---|
+| accordion | `tw-accordion` | Single / multi-panel disclosure |
+| collapsible | `tw-collapsible` | Collapsible region + group |
+| split | `tw-split` | Resizable split panes |
+| carousel | `tw-carousel` | Slide carousel |
+| flip-card | `tw-flip-card` | Front/back flip animation |
+
+### Status & utility
+
+| Component | Selector | Purpose |
+|---|---|---|
+| spinner | `tw-spinner` | Loading spinner |
+| progress-bar | `tw-progress-bar` | Determinate / indeterminate progress |
+| skeleton | `tw-skeleton` | Content placeholder |
+| empty-state | `tw-empty-state` | No-data / empty screen |
+| icon | `tw-icon` | Registry-backed SVG icon |
+
+## Entry points
+
+| Entry point | Contents |
+|---|---|
+| `@cdevhub/ngx-tw/<component>` | One per component (preferred — tree-shakeable) |
+| `@cdevhub/ngx-tw` | Catch-all re-export of every public API (convenience) |
+| `@cdevhub/ngx-tw/core` | Shared types (`TwColor`, `TwSize`) and `TW_ERROR_STATE_MATCHER` |
+| `@cdevhub/ngx-tw/theme` | `ThemeService`, `provideTheme`, `[twTheme]`, theme types |
+| `@cdevhub/ngx-tw/theme/index.css` | Default semantic theme stylesheet (asset) |
+| `@cdevhub/ngx-tw/icon/lucide` | `provideTwLucideIcons`, `fromLucideIcon` |
+| `@cdevhub/ngx-tw/calendar/luxon` | Luxon date adapter |
+| `@cdevhub/ngx-tw/calendar/testing` | Calendar test harnesses |
+
+Per-component imports are preferred over the catch-all for tree-shaking.
 
 ## Building locally
 
 ```bash
-ng build ngx-tw              # build library to dist/ngx-tw
+ng build ngx-tw              # build the library to dist/ngx-tw
 ng test ngx-tw --no-watch    # run unit tests (Vitest)
 ng serve demo                # run the demo app
 ```
@@ -132,3 +345,5 @@ ng serve demo                # run the demo app
 ## License
 
 [MIT](./LICENSE) © Iuga Ciprian
+</content>
+</invoke>

package/fesm2022/cdevhub-ngx-tw-accordion.mjs

@@ -46,9 +46,11 @@ const accordionVariants = tv({
  */
 class AccordionComponent extends CollapsibleGroupComponent {
     /** Open mode. `'single'` allows one panel open at a time; `'multiple'` allows many. Defaults to `'single'`. */
-    type = input('single', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    type = input('single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     /** Visual style of the accordion container. Defaults to `'default'`. */
-    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     /** In `'single'` mode, whether re-clicking the open panel closes it. Defaults to `true` — accordions are collapsible by definition; opt-out only. */
     collapsible = input(true, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Accessible name for the accordion. Use when surrounding context doesn't make the purpose obvious. */
@@ -57,9 +59,11 @@ class AccordionComponent extends CollapsibleGroupComponent {
     ariaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
     // ── Inherited-binding overrides ──
     /** @internal APG: accordions don't carry `role="group"`. */
-    hostRole = computed(() => null, ...(ngDevMode ? [{ debugName: "hostRole" }] : /* istanbul ignore next */ []));
+    hostRole = computed(() => null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostRole" }] : /* istanbul ignore next */ []));
     /** @internal Variant-driven container classes; replaces the parent's default group string. */
-    hostClasses = computed(() => accordionVariants({ variant: this.variant() }).root(), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => accordionVariants({ variant: this.variant() }).root(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     // ── Virtual-hook overrides ──
     /** @internal Drive single-open-panel behaviour from `type`, ignoring the inherited `accordion` input. */
     isAccordionMode() {
@@ -69,15 +73,15 @@ class AccordionComponent extends CollapsibleGroupComponent {
     canCollapseSingleMode() {
         return this.collapsible();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: AccordionComponent, isStandalone: true, selector: "tw-accordion", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-multiselectable": "type() === 'multiple' ? 'true' : 'false'", "attr.aria-label": "ariaLabel() ?? null", "attr.aria-labelledby": "ariaLabelledby() ?? null" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: AccordionComponent, isStandalone: true, selector: "tw-accordion", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-multiselectable": "type() === 'multiple' ? 'true' : 'false'", "attr.aria-label": "ariaLabel() ?? null", "attr.aria-labelledby": "ariaLabelledby() ?? null" } }, providers: [
             {
                 provide: CollapsibleGroupComponent,
                 useExisting: forwardRef(() => AccordionComponent),
             },
         ], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AccordionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tw-accordion',

package/fesm2022/cdevhub-ngx-tw-accordion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cdevhub-ngx-tw-accordion.mjs","sources":["../../../projects/ngx-tw/accordion/accordion.ts","../../../projects/ngx-tw/accordion/cdevhub-ngx-tw-accordion.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  input,\n} from '@angular/core';\nimport { tv } from 'tailwind-variants';\nimport { CollapsibleGroupComponent } from '@cdevhub/ngx-tw/collapsible';\n\n/** Open mode of the accordion. */\nexport type AccordionType = 'single' | 'multiple';\n\n/** Visual style of the accordion container. */\nexport type AccordionVariant = 'default' | 'bordered' | 'ghost';\n\n// ── tv() config ──\n\nconst accordionVariants = tv(\n  {\n    slots: {\n      root: 'block',\n    },\n    variants: {\n      variant: {\n        default: {\n          root: 'rounded-lg overflow-hidden divide-y divide-border',\n        },\n        bordered: {\n          root: 'rounded-lg overflow-hidden divide-y divide-border border border-border',\n        },\n        ghost: {\n          root: '',\n        },\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n  {\n    twMerge: true,\n  },\n);\n\n// ── AccordionComponent ──\n\n/**\n * Accordion — single- or multiple-open-panel group built on top of\n * `<tw-collapsible>` children. Extends `CollapsibleGroupComponent` to inherit\n * the keyboard navigation, value-sync, and toggle wiring; overrides the\n * virtual `isAccordionMode()` / `canCollapseSingleMode()` hooks so the\n * single-mode behaviour is driven from the local `type` + `collapsible`\n * inputs instead of the parent's `accordion` input. The `hostRole` and\n * `hostClasses` signals are also overridden so the accordion drops APG's\n * `role=\"group\"` and renders the variant-driven container classes.\n *\n * The `providers` block exposes the accordion instance to its descendant\n * collapsibles via the `CollapsibleGroupComponent` DI token — Angular DI\n * uses class identity rather than the prototype chain, so the explicit\n * `useExisting` is required even though `AccordionComponent extends\n * CollapsibleGroupComponent`.\n */\n@Component({\n  selector: 'tw-accordion',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    // `[class]` + `[attr.role]` are inherited from the parent's host metadata\n    // and read the overridden `hostClasses` / `hostRole` computeds below.\n    // We only need to add accordion-specific bindings here.\n    '[attr.aria-multiselectable]': \"type() === 'multiple' ? 'true' : 'false'\",\n    '[attr.aria-label]': 'ariaLabel() ?? null',\n    '[attr.aria-labelledby]': 'ariaLabelledby() ?? null',\n  },\n  template: `<ng-content />`,\n  providers: [\n    {\n      provide: CollapsibleGroupComponent,\n      useExisting: forwardRef(() => AccordionComponent),\n    },\n  ],\n})\nexport class AccordionComponent extends CollapsibleGroupComponent {\n  /** Open mode. `'single'` allows one panel open at a time; `'multiple'` allows many. Defaults to `'single'`. */\n  readonly type = input<AccordionType>('single');\n\n  /** Visual style of the accordion container. Defaults to `'default'`. */\n  readonly variant = input<AccordionVariant>('default');\n\n  /** In `'single'` mode, whether re-clicking the open panel closes it. Defaults to `true` — accordions are collapsible by definition; opt-out only. */\n  readonly collapsible = input(true, { transform: booleanAttribute });\n\n  /** Accessible name for the accordion. Use when surrounding context doesn't make the purpose obvious. */\n  readonly ariaLabel = input<string | undefined>(undefined, { alias: 'aria-label' });\n\n  /** ID(s) of element(s) that label the accordion. Use instead of `aria-label` when a visible heading is available. */\n  readonly ariaLabelledby = input<string | undefined>(undefined, { alias: 'aria-labelledby' });\n\n  // ── Inherited-binding overrides ──\n\n  /** @internal APG: accordions don't carry `role=\"group\"`. */\n  override readonly hostRole = computed<string | null>(() => null);\n\n  /** @internal Variant-driven container classes; replaces the parent's default group string. */\n  override readonly hostClasses = computed(() =>\n    accordionVariants({ variant: this.variant() }).root(),\n  );\n\n  // ── Virtual-hook overrides ──\n\n  /** @internal Drive single-open-panel behaviour from `type`, ignoring the inherited `accordion` input. */\n  protected override isAccordionMode(): boolean {\n    return this.type() === 'single';\n  }\n\n  /** @internal Honour the `collapsible` opt-out in single mode. */\n  protected override canCollapseSingleMode(): boolean {\n    return this.collapsible();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"cdevhub-ngx-tw-accordion.mjs","sources":["../../../projects/ngx-tw/accordion/accordion.ts","../../../projects/ngx-tw/accordion/cdevhub-ngx-tw-accordion.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  input,\n} from '@angular/core';\nimport { tv } from 'tailwind-variants';\nimport { CollapsibleGroupComponent } from '@cdevhub/ngx-tw/collapsible';\n\n/** Open mode of the accordion. */\nexport type AccordionType = 'single' | 'multiple';\n\n/** Visual style of the accordion container. */\nexport type AccordionVariant = 'default' | 'bordered' | 'ghost';\n\n// ── tv() config ──\n\nconst accordionVariants = tv(\n  {\n    slots: {\n      root: 'block',\n    },\n    variants: {\n      variant: {\n        default: {\n          root: 'rounded-lg overflow-hidden divide-y divide-border',\n        },\n        bordered: {\n          root: 'rounded-lg overflow-hidden divide-y divide-border border border-border',\n        },\n        ghost: {\n          root: '',\n        },\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n  {\n    twMerge: true,\n  },\n);\n\n// ── AccordionComponent ──\n\n/**\n * Accordion — single- or multiple-open-panel group built on top of\n * `<tw-collapsible>` children. Extends `CollapsibleGroupComponent` to inherit\n * the keyboard navigation, value-sync, and toggle wiring; overrides the\n * virtual `isAccordionMode()` / `canCollapseSingleMode()` hooks so the\n * single-mode behaviour is driven from the local `type` + `collapsible`\n * inputs instead of the parent's `accordion` input. The `hostRole` and\n * `hostClasses` signals are also overridden so the accordion drops APG's\n * `role=\"group\"` and renders the variant-driven container classes.\n *\n * The `providers` block exposes the accordion instance to its descendant\n * collapsibles via the `CollapsibleGroupComponent` DI token — Angular DI\n * uses class identity rather than the prototype chain, so the explicit\n * `useExisting` is required even though `AccordionComponent extends\n * CollapsibleGroupComponent`.\n */\n@Component({\n  selector: 'tw-accordion',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    // `[class]` + `[attr.role]` are inherited from the parent's host metadata\n    // and read the overridden `hostClasses` / `hostRole` computeds below.\n    // We only need to add accordion-specific bindings here.\n    '[attr.aria-multiselectable]': \"type() === 'multiple' ? 'true' : 'false'\",\n    '[attr.aria-label]': 'ariaLabel() ?? null',\n    '[attr.aria-labelledby]': 'ariaLabelledby() ?? null',\n  },\n  template: `<ng-content />`,\n  providers: [\n    {\n      provide: CollapsibleGroupComponent,\n      useExisting: forwardRef(() => AccordionComponent),\n    },\n  ],\n})\nexport class AccordionComponent extends CollapsibleGroupComponent {\n  /** Open mode. `'single'` allows one panel open at a time; `'multiple'` allows many. Defaults to `'single'`. */\n  readonly type = input<AccordionType>('single');\n\n  /** Visual style of the accordion container. Defaults to `'default'`. */\n  readonly variant = input<AccordionVariant>('default');\n\n  /** In `'single'` mode, whether re-clicking the open panel closes it. Defaults to `true` — accordions are collapsible by definition; opt-out only. */\n  readonly collapsible = input(true, { transform: booleanAttribute });\n\n  /** Accessible name for the accordion. Use when surrounding context doesn't make the purpose obvious. */\n  readonly ariaLabel = input<string | undefined>(undefined, { alias: 'aria-label' });\n\n  /** ID(s) of element(s) that label the accordion. Use instead of `aria-label` when a visible heading is available. */\n  readonly ariaLabelledby = input<string | undefined>(undefined, { alias: 'aria-labelledby' });\n\n  // ── Inherited-binding overrides ──\n\n  /** @internal APG: accordions don't carry `role=\"group\"`. */\n  override readonly hostRole = computed<string | null>(() => null);\n\n  /** @internal Variant-driven container classes; replaces the parent's default group string. */\n  override readonly hostClasses = computed(() =>\n    accordionVariants({ variant: this.variant() }).root(),\n  );\n\n  // ── Virtual-hook overrides ──\n\n  /** @internal Drive single-open-panel behaviour from `type`, ignoring the inherited `accordion` input. */\n  protected override isAccordionMode(): boolean {\n    return this.type() === 'single';\n  }\n\n  /** @internal Honour the `collapsible` opt-out in single mode. */\n  protected override canCollapseSingleMode(): boolean {\n    return this.collapsible();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/cdevhub-ngx-tw-alert.mjs

@@ -67,10 +67,10 @@ const alertVariants = tv({
 class AlertIconDirective {
     alert = inject(AlertComponent);
     classes = this.alert.iconClasses;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AlertIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: AlertIconDirective, isStandalone: true, selector: "[twAlertIcon]", host: { properties: { "class": "classes()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AlertIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: AlertIconDirective, isStandalone: true, selector: "[twAlertIcon]", host: { properties: { "class": "classes()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AlertIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AlertIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[twAlertIcon]',
@@ -82,10 +82,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 class AlertTitleDirective {
     alert = inject(AlertComponent);
     classes = this.alert.titleClasses;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AlertTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: AlertTitleDirective, isStandalone: true, selector: "[twAlertTitle]", host: { properties: { "class": "classes()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AlertTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: AlertTitleDirective, isStandalone: true, selector: "[twAlertTitle]", host: { properties: { "class": "classes()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AlertTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AlertTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[twAlertTitle]',
@@ -97,10 +97,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 class AlertContentDirective {
     alert = inject(AlertComponent);
     classes = this.alert.contentClasses;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AlertContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: AlertContentDirective, isStandalone: true, selector: "[twAlertContent]", host: { properties: { "class": "classes()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AlertContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: AlertContentDirective, isStandalone: true, selector: "[twAlertContent]", host: { properties: { "class": "classes()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AlertContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AlertContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[twAlertContent]',
@@ -112,10 +112,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 class AlertActionsDirective {
     alert = inject(AlertComponent);
     classes = this.alert.actionsClasses;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AlertActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: AlertActionsDirective, isStandalone: true, selector: "[twAlertActions]", host: { properties: { "class": "classes()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AlertActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: AlertActionsDirective, isStandalone: true, selector: "[twAlertActions]", host: { properties: { "class": "classes()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AlertActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AlertActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[twAlertActions]',
@@ -126,9 +126,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         }] });
 class AlertComponent {
     /** Controls the visual style of the alert. Defaults to `'soft'`. */
-    variant = input('soft', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    variant = input('soft', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     /** Sets the semantic color palette. Defaults to `'info'`. */
-    color = input('info', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    color = input('info', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     /** When true, renders a dismiss button. Defaults to `false`. */
     dismissible = input(false, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
@@ -138,14 +140,18 @@ class AlertComponent {
      * alert content updates after initial render — assistive tech treats the
      * alert as a static region rather than a live region. Defaults to `'polite'`.
      */
-    politeness = input('polite', ...(ngDevMode ? [{ debugName: "politeness" }] : /* istanbul ignore next */ []));
+    politeness = input('polite', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "politeness" }] : /* istanbul ignore next */ []));
     /** Accessible label for the dismiss button. Override for localization. Defaults to `'Dismiss'`. */
-    dismissLabel = input('Dismiss', ...(ngDevMode ? [{ debugName: "dismissLabel" }] : /* istanbul ignore next */ []));
+    dismissLabel = input('Dismiss', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dismissLabel" }] : /* istanbul ignore next */ []));
     /** Fires when the dismiss button is clicked. */
     dismissed = output();
     /** @internal */
-    iconDirective = contentChild(AlertIconDirective, ...(ngDevMode ? [{ debugName: "iconDirective" }] : /* istanbul ignore next */ []));
-    hasIcon = computed(() => !!this.iconDirective(), ...(ngDevMode ? [{ debugName: "hasIcon" }] : /* istanbul ignore next */ []));
+    iconDirective = contentChild(AlertIconDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconDirective" }] : /* istanbul ignore next */ []));
+    hasIcon = computed(() => !!this.iconDirective(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasIcon" }] : /* istanbul ignore next */ []));
     computedRole = computed(() => {
         switch (this.politeness()) {
             case 'assertive':
@@ -155,22 +161,30 @@ class AlertComponent {
             default:
                 return null;
         }
-    }, ...(ngDevMode ? [{ debugName: "computedRole" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedRole" }] : /* istanbul ignore next */ []));
     variantResult = computed(() => alertVariants({
         variant: this.variant(),
         color: this.color(),
-    }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
     rootClasses = computed(() => {
         const base = this.variantResult().root();
         return this.dismissible() ? `${base} pr-10` : base;
-    }, ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
-    iconClasses = computed(() => this.variantResult().icon(), ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
-    titleClasses = computed(() => this.variantResult().title(), ...(ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []));
-    contentClasses = computed(() => this.variantResult().content(), ...(ngDevMode ? [{ debugName: "contentClasses" }] : /* istanbul ignore next */ []));
-    actionsClasses = computed(() => this.variantResult().actions(), ...(ngDevMode ? [{ debugName: "actionsClasses" }] : /* istanbul ignore next */ []));
-    dismissClasses = computed(() => this.variantResult().dismiss(), ...(ngDevMode ? [{ debugName: "dismissClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AlertComponent, isStandalone: true, selector: "tw-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, politeness: { classPropertyName: "politeness", publicName: "politeness", isSignal: true, isRequired: false, transformFunction: null }, dismissLabel: { classPropertyName: "dismissLabel", publicName: "dismissLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.role": "computedRole()", "class": "rootClasses()", "animate.leave": "\"fade-out\"" } }, queries: [{ propertyName: "iconDirective", first: true, predicate: AlertIconDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    iconClasses = computed(() => this.variantResult().icon(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
+    titleClasses = computed(() => this.variantResult().title(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []));
+    contentClasses = computed(() => this.variantResult().content(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentClasses" }] : /* istanbul ignore next */ []));
+    actionsClasses = computed(() => this.variantResult().actions(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionsClasses" }] : /* istanbul ignore next */ []));
+    dismissClasses = computed(() => this.variantResult().dismiss(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dismissClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: AlertComponent, isStandalone: true, selector: "tw-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, politeness: { classPropertyName: "politeness", publicName: "politeness", isSignal: true, isRequired: false, transformFunction: null }, dismissLabel: { classPropertyName: "dismissLabel", publicName: "dismissLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.role": "computedRole()", "class": "rootClasses()", "animate.leave": "\"fade-out\"" } }, queries: [{ propertyName: "iconDirective", first: true, predicate: AlertIconDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (hasIcon()) {
       <ng-content select="[twAlertIcon]" />
     }
@@ -195,7 +209,7 @@ class AlertComponent {
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tw-alert',