import * as _angular_core from '@angular/core'; import { InjectionToken, Provider, Signal, TemplateRef, ElementRef, WritableSignal, Type, Injector } from '@angular/core'; import * as fold_ng from 'fold-ng'; import { FormValueControl, ValidationError, FormCheckboxControl } from '@angular/forms/signals'; /** * Named media queries for {@link FoldAppShellComponent}'s `mobileQuery` input — * the common answers to "when should the shell switch to its single-column, * drawer layout?". Pass a key (`mobileQuery="phoneOrTablet"`) or a raw query built with * {@link foldMediaQuery}. * * - `phone` (default) — viewport ≤768px. The historical behaviour. * - `touchLandscape` — any device with a touch (coarse) pointer held in landscape, regardless * of width (a phone or tablet on its side), plus `phone`. * - `phoneOrTablet` — `phone`, plus any viewport with a touch (coarse) pointer up to 1366px: * an iPad in either orientation, including a 12.9" in landscape. A desktop * with a mouse keeps the rails at the same width. * * The touch presets test `any-pointer: coarse`, not `pointer: coarse`: an iPad * with a trackpad / Magic Keyboard attached can report a FINE primary pointer * while its screen is still touched. The trade-off: a touch-screen laptop * ≤1366px also matches `phoneOrTablet` — pick `phone` or a raw query if that matters. */ declare const FOLD_MOBILE_QUERIES: { readonly phone: "(max-width: 768px)"; readonly touchLandscape: "(max-width: 768px), (any-pointer: coarse) and (orientation: landscape)"; readonly phoneOrTablet: "(max-width: 768px), (any-pointer: coarse) and (max-width: 1366px)"; }; /** A key of {@link FOLD_MOBILE_QUERIES}. */ type FoldMobileQueryName = keyof typeof FOLD_MOBILE_QUERIES; declare const foldMediaQueryBrand: unique symbol; /** * A raw media query, branded so that it can only come from * {@link foldMediaQuery}. A plain `string` arm (`| (string & {})`) would admit * a misspelt key (`"tablette"`) as a "query" that never matches — the shell * would silently stay wide. The brand makes the escape hatch explicit. */ type FoldMediaQuery = string & { readonly [foldMediaQueryBrand]: true; }; /** Marks a raw media query as intended for `mobileQuery`. */ declare function foldMediaQuery(query: string): FoldMediaQuery; /** What `mobileQuery` accepts: a named query (autocompleted), or a branded raw one. */ type FoldMobileQuery = FoldMobileQueryName | FoldMediaQuery; /** Resolves a named query to its media query; a raw query passes through. */ declare function resolveFoldMobileQuery(query: FoldMobileQuery): string; /** * `` — the responsive application skeleton. * * A pure structural grid with four content slots: it owns the layout and the * responsive collapse, the app owns what fills the slots (nav, header, routed * content, overlays) and all state/routing. Rail visibility is driven from the * projected rail component itself (an empty `railSecondary` self-collapses). * * Sizing has two ergonomic paths that compose: * - **Typed inputs** (`railWidth`, `headerHeight`, `headerHeightMobile`) for the * common case — plain px numbers, discoverable and type-checked in the * template. * - **CSS variables** for the theming case — set `--fold-shell-*` on any ancestor * to compose tokens (`var(--w-appMenu)`) or drive it from a media query. An * unset input inherits the variable, so the two never fight. * * ``` * ┌────────┬──────────────┬─────────────────────┐ * │ rail │ rail │ header │ ← header row (fixed height) * │ primary│ secondary ├─────────────────────┤ * │ │ │ subheader │ ← optional band (0 when empty) * │ │ ├─────────────────────┤ * │ (auto, │ (auto width, │ content │ ← content row (1fr) * │ self- │ self- │ (position: relative │ * │ sized)│ collapsing) │ anchor for panels) │ * │ │ ├─────────────────────┤ * │ │ │ footer │ ← footer row (auto — 0 when empty) * └────────┴──────────────┴─────────────────────┘ * ``` * * In the mobile layout (`mobileQuery`, ≤768px by default) it becomes a single header + content + footer column and the rails * drop out. How the nav comes back is `mobileNav`: * - `"drawer"` (default) — the **primary** rail turns into an off-canvas drawer; * bind `[(mobileNavOpen)]` and give the app a mobile-only hamburger to slide * it in over a scrim (`Escape` / scrim / widening close it). Render the * projected rail expanded in the drawer, since the collapsed icon rail is the * desktop chrome. * - `"none"` — no built-in mobile nav; compose an `fold-nav-launcher` (a * full-screen tile grid) bound to the same `mobileNavOpen`. * * ## Slots * | Attribute | Region | * |------------------|-------------------------------------------| * | `railPrimary` | Left rail (intrinsic width — the rail component sizes itself; `railWidth` sets its base via `--fold-shell-rail-width`). In the mobile layout (`mobileQuery`, ≤768px by default) it becomes the mobile drawer (see `mobileNavOpen`). | * | `railSecondary` | Second rail (intrinsic width; a component that collapses to `0` hides itself). | * | `subheader` | The band **under** the header — a nav sub-bar, a filter strip, a context ribbon. Same placement rule as the header (`subheaderLayout`: over the content column, or full width above the rails), and like the footer it is **self-collapsing**: an empty slot claims no row. Rendered as a plain `
`, so the band brings its own semantics (a `