maverick-wave-angular

Angular components for MaverickWave. They render the same mw-* markup as maverick-wave-astro, so the look comes from the CSS framework and an Angular app matches the Astro sites. Signals, standalone, zoneless-ready, Angular 22.

Install

npm i maverick-wave-angular maverick-wave
npm i pdfjs-dist   # only for maverick-wave-angular/preview

styles.scss of the app - the theme stays yours, the package adds the rules for projected content:

@use 'maverick-wave/src/scss/main' with (
  $primary-color: #c3592b
);
@use 'maverick-wave-angular/styles';

Register the locale data for your LOCALE_ID (registerLocaleData(localeDe)); dates in the message band use DatePipe.

Entry points

| Import | Contents | | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | maverick-wave-angular | Panel, Card, PageHeader, Dialog, ConfirmDialog + MwConfirm, ActionMenu, Dropdown, Tabs, Segmented, Loading, EmptyState, DataTable + Column/Cell, Pagination + paginate(), Timeline, Kpi, Stat + StatGroup, Meter, Progress, ProgressRing, StatBars, Legend, DescriptionList, Countdown, Carousel, Bento + mwBentoTile, ActionBar, Marquee, Compare, Chat + ChatComposer, Gallery + Lightbox, MonthCalendar, DateStamp, Stepper, Wizard, Accordion, Skeleton, Tag, FilterChip, Badge, Avatar, AvatarGroup, Status, Rating, Divider, CopyButton, CopyField, CodeBlock, Kbd, Kanban, ThemeToggle + MwTheme, LanguageSwitch, Icon, pipes mwTimeAgo mwFileSize mwDuration, directives mwHotkey mwLightDismiss mwClickOutside mwInView mwReveal mwConfirmClick, injectNow() (one shared timer per period), injectBreakpoint() + injectMediaQuery(), readStorage() + writeStorage(), readableTextOn(), RunLock, downloadFile, date helpers | | maverick-wave-angular/forms | mw-field with automatic error texts, mwInput, mwErrorFocus, mwPrefilled, Toggle, Checkbox, CheckboxGroup, RadioGroup, SegmentedControl, MoneyInput, DurationInput, SearchInput, PasswordInput, Textarea, ChipsInput, FileDrop, Slider, RatingInput, CodeInput, ColorInput, FormSection, FormActions, SupportDialog, MwValidators, mwUnsavedChangesGuard, warnBeforeUnload | | maverick-wave-angular/messages | MwToasts + ToastStack, Alert, Announcement, MessageBand, NotificationMenu, Result | | maverick-wave-angular/frame | AppShell, AppLayout (the mw-app sidebar layout), Header (with localhost indicator), Footer (compact bar, full, dark), Breadcrumbs + MwBreadcrumbTrail (from route data.breadcrumb), CommandPalette (Ctrl/Cmd K), Tiles, StatusPage | | maverick-wave-angular/preview | FilePreview, ImagePreview, PdfPreview, PreviewDialog, detectPreviewKind |

Header

Extras go into [mwHeaderExtra]: mw-notification-menu, mw-language-switch, mw-theme-toggle (the sliding switch, tooltip below). Own icon buttons take the framework's class="mw-header-btn"; a tooltip in the header goes below on its own. mw-hide-mobile takes an extra out below md.

MwTheme uses the storage key mw-theme like maverick-wave.min.js, sets mw-theme-light and mw-theme-dark, follows the OS until someone chooses, and turns itself off when Sass fixes $mw-theme-mode.

App layout

mw-app-layout is the sidebar frame of an app: navigation groups, tabs for the phone's tab bar, [mwAppAside] for a side panel, [mwAppSidebarFooter], a projected mw-footer. collapsed and asideOpen are models, persist remembers both. Rail, off-canvas panel, Escape, inert and focus return run in the component - no maverick-wave.min.js needed.

Directives

• <button mwHotkey="mod+s"> clicks the element on that combination - mod is ⌘ on Apple devices, Ctrl elsewhere. Not while typing in a field (unless Ctrl, Alt or ⌘ is part of it), not on a disabled element, not behind a modal. Sets aria-keyshortcuts; an mwAction carrying it shows the key in the menu, <mw-kbd keys="mod+k" /> prints the caps.
• <details mwLightDismiss> closes on a click outside and on Escape, closeOnSelect on every click but the one on <summary>. [(open)] is a model.
• (mwClickOutside), (mwInView) with mwInViewMargin and mwInViewOnce (#chart="mwInView" then chart.visible()), mwReveal or mwReveal="stagger" - the framework's scroll entrance, with the observer fallback of main.js.
• [mwConfirmClick]="{ title }" (confirmed)="delete()" asks through MwConfirm first; needs <mw-confirm-host />.
• injectBreakpoint('md') and injectMediaQuery(query) return signals on the framework's breakpoints.

Variants

• mw-data-table: selectable with selection as model, a [mwTableBulk] bar, stickyColumn
• mw-pagination layout="pages", mw-timeline variant="compact", mw-dialog drawer="end|start"
• mw-progress without value runs indeterminate; mw-loading inline, mw-empty-state inline
• Forms: mw-checkbox indeterminate, mwInput custom on a select (mw-select-custom); alerts take actions in [mwAlertActions]

Texts

German by default. English, or your own translation service as a signal:

provideMwTexts({}, MW_TEXTS_EN);
provideMwTexts(() => {
  const i18n = inject(I18n);
  return computed(() => ({ close: i18n.t('common.close') }));
});

A form field

<mw-field label="E-Mail" hint="For the invoice" required>
  <input mwInput type="email" formControlName="email" />
</mw-field>

The error shows once the control is touched or the form submitted; the text comes from the validator's error key (required, email, iban, ...), overridable per field with [messages].

Reactive forms, ngModel and Signal Forms work the same way - with Signal Forms the controls are FormValueControls:

<mw-field label="Notiz"><mw-textarea [formField]="driver.note" /></mw-field>

Limits then live in the schema (required(), max(), maxLength()): Angular refuses [max] next to [formField], and the label takes its required mark from the schema.

PDF preview

Serve the pdf.js files and tell the package where:

{ "glob": "pdf.worker.min.mjs", "input": "node_modules/pdfjs-dist/build", "output": "assets/pdfjs/build" },
{ "glob": "**/*", "input": "node_modules/pdfjs-dist/cmaps", "output": "assets/pdfjs/cmaps" },
{ "glob": "**/*", "input": "node_modules/pdfjs-dist/standard_fonts", "output": "assets/pdfjs/standard_fonts" },
{ "glob": "**/*", "input": "node_modules/pdfjs-dist/wasm", "output": "assets/pdfjs/wasm" }

provideMwPdfPreview({ assetsUrl: '/assets/pdfjs/' }) - pdf.js is loaded lazily on the first PDF.

Rules

• No HTTP, no domain types, no auth. Data comes in through inputs, events go out through outputs.
• Icons are inline SVG; add your own with provideMwIcons({ name: '<path d="..."/>' }).
• Selectors are mw-*, own CSS classes and properties mwang-*, so they never collide with the framework's mw-*.
• The global styles sit in the framework's cascade layers: its utilities still win, and your own unlayered CSS overrides everything.