@malva-ui/core 0.1.13 → 0.1.14

package/types/malva-ui-core-link.d.ts

@@ -0,0 +1,28 @@
+import * as i0 from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { MlvStructural } from '@malva-ui/cdk/utils';
+
+declare class MlvLinkBefore extends MlvStructural {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvLinkBefore, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MlvLinkBefore, "[mlvLinkBefore]", never, {}, {}, never, never, true, never>;
+}
+declare class MlvLinkAfter extends MlvStructural {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvLinkAfter, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MlvLinkAfter, "[mlvLinkAfter]", never, {}, {}, never, never, true, never>;
+}
+
+type MlvLinkVariant = 'default' | 'subtle' | 'emphasized';
+declare class MlvLink {
+    readonly variant: i0.InputSignal<MlvLinkVariant>;
+    /** Whether the link is disabled — prevents activation and removes it from the tab order. */
+    readonly disabled: i0.InputSignalWithTransform<boolean, BooleanInput>;
+    /** @protected Optional leading-slot template projected before the link text. */
+    protected readonly _before: i0.Signal<MlvLinkBefore | undefined>;
+    /** @protected Optional trailing-slot template projected after the link text. */
+    protected readonly _after: i0.Signal<MlvLinkAfter | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvLink, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MlvLink, "a[mlvLink]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, ["_before", "_after"], ["*"], true, never>;
+}
+
+export { MlvLink, MlvLinkAfter, MlvLinkBefore };
+export type { MlvLinkVariant };

package/types/malva-ui-core-list.d.ts

@@ -0,0 +1,252 @@
+import * as i0 from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { RouterLinkActive } from '@angular/router';
+import * as i1 from '@angular/aria/listbox';
+import { Option, Listbox } from '@angular/aria/listbox';
+
+/**
+ * Visual variant of the list container.
+ *
+ * - `plain` — spaced rows with no container styling (default).
+ * - `inset` — grouped, elevated appearance: rows sit on a raised surface
+ *   inside a sunken background, connected by inset dividers and topped with
+ *   sticky group headers. The iOS/Apple Settings look.
+ */
+type MlvListVariant = 'plain' | 'inset';
+/**
+ * Context-specific styling for the list. `mlv-list` is a shared primitive
+ * used both as a standalone content list and as the panel container inside
+ * overlays (select/combobox/autocomplete dropdowns, popover menus) — the two
+ * contexts want different row rhythm, so `appearance` (orthogonal to
+ * {@link MlvListVariant}) picks which one applies.
+ *
+ * - `default` — the airy standalone-list look: hairline separators between
+ *   rows, taller row padding, square row corners (SL-R5).
+ * - `menu` — compact overlay look: no hairline separators, tighter row
+ *   padding, and rounded row corners for the hover/selection pill. Matches
+ *   the pre-harmonization dropdown/menu rhythm. Set this on every `mlv-list`
+ *   rendered inside an overlay panel.
+ */
+type MlvListAppearance = 'default' | 'menu';
+declare class MlvList {
+    /**
+     * WAI-ARIA role for the list host element.
+     * Override when the list is used in a context requiring a different role
+     * (e.g. `'menu'` when used as a menu panel container).
+     * Defaults to `'list'`.
+     */
+    readonly listRole: i0.InputSignal<string>;
+    /**
+     * Visual variant of the list. See {@link MlvListVariant}.
+     */
+    readonly variant: i0.InputSignal<MlvListVariant>;
+    /**
+     * Context-specific styling. See {@link MlvListAppearance}. Defaults to
+     * `'default'` (the standalone airy list look); every overlay panel
+     * consumer (select/combobox/autocomplete dropdown, `mlv-menu`, popup
+     * menus) sets `'menu'`.
+     */
+    readonly appearance: i0.InputSignal<MlvListAppearance>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvList, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MlvList, "mlv-list", never, { "listRole": { "alias": "listRole"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class MlvListItemLink {
+    readonly routerLink: RouterLinkActive | null;
+    readonly isActive: i0.Signal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvListItemLink, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MlvListItemLink, "a[mlvListItemLink]", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class MlvListItemActions {
+    /**
+     * When true, the actions wrapper is hidden by default and revealed on row
+     * hover, focus-within, or touch devices. Lets rows stay visually calm until
+     * the user signals intent to interact.
+     */
+    readonly revealOnHover: i0.InputSignalWithTransform<boolean, BooleanInput>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvListItemActions, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MlvListItemActions, "[mlvListItemActions]", never, { "revealOnHover": { "alias": "revealOnHover"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class MlvListItemByline {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvListItemByline, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MlvListItemByline, "[mlvListItemByline]", never, {}, {}, never, never, true, never>;
+}
+
+declare class MlvListItemMedia {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvListItemMedia, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MlvListItemMedia, "[mlvListItemMedia]", never, {}, {}, never, never, true, never>;
+}
+
+declare class MlvListItemMeta {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvListItemMeta, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MlvListItemMeta, "[mlvListItemMeta]", never, {}, {}, never, never, true, never>;
+}
+
+declare class MlvListItemPrefix {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvListItemPrefix, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MlvListItemPrefix, "[mlvListItemPrefix]", never, {}, {}, never, never, true, never>;
+}
+
+declare class MlvListItemSuffix {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvListItemSuffix, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MlvListItemSuffix, "[mlvListItemSuffix]", never, {}, {}, never, never, true, never>;
+}
+
+declare class MlvListItemTitle {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvListItemTitle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MlvListItemTitle, "[mlvListItemTitle]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Semantic accent key used to tint the leading accent bar of a list item.
+ * Any other string is treated as a raw CSS color value.
+ */
+type MlvListItemAccent = 'neutral' | 'primary' | 'positive' | 'negative' | 'warning' | 'info' | (string & {});
+declare class MlvListItem {
+    /**
+     * WAI-ARIA role for the host element.
+     * Defaults to `'listitem'`. Override to `'menuitem'`, `'option'`, or another
+     * appropriate role when the item is used inside a composite widget that
+     * requires a different ARIA role (e.g. inside a `role="menu"` container).
+     */
+    readonly itemRole: i0.InputSignal<string>;
+    /**
+     * Marks the item as unread — bolds the title and shows a leading unread dot.
+     * Matches the familiar inbox/notification-center pattern.
+     */
+    readonly unread: i0.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Optional accent color for the leading bar. Accepts semantic keys
+     * (`primary`, `positive`, `negative`, `warning`, `info`, `neutral`) or any
+     * raw CSS color value. When set, the accent bar is always rendered.
+     */
+    readonly accent: i0.InputSignal<MlvListItemAccent | undefined>;
+    /** @protected Projected `a[mlvListItemLink]` child, if any — drives router-active state. */
+    protected readonly _link: i0.Signal<MlvListItemLink | undefined>;
+    /** @protected Leading rich-media slot (`[mlvListItemMedia]`). */
+    protected readonly _mediaSlot: i0.Signal<MlvListItemMedia | undefined>;
+    /** @protected Title slot (`[mlvListItemTitle]`). */
+    protected readonly _titleSlot: i0.Signal<MlvListItemTitle | undefined>;
+    /** @protected Secondary byline slot (`[mlvListItemByline]`). */
+    protected readonly _bylineSlot: i0.Signal<MlvListItemByline | undefined>;
+    /** @protected Inline headline meta slot (`[mlvListItemMeta]`). */
+    protected readonly _metaSlot: i0.Signal<MlvListItemMeta | undefined>;
+    /** @protected Trailing actions slot (`[mlvListItemActions]`). */
+    protected readonly _actionsSlot: i0.Signal<MlvListItemActions | undefined>;
+    /** @protected Legacy leading prefix slot (`[mlvListItemPrefix]`). */
+    protected readonly _prefixSlot: i0.Signal<MlvListItemPrefix | undefined>;
+    /** @protected Legacy trailing suffix slot (`[mlvListItemSuffix]`). */
+    protected readonly _suffixSlot: i0.Signal<MlvListItemSuffix | undefined>;
+    readonly isActive: i0.Signal<boolean>;
+    /** @protected Whether any rich-layout slot is projected — switches the row to rich layout. */
+    protected readonly _hasRichLayout: i0.Signal<boolean>;
+    /** @protected Whether a leading slot (media or legacy prefix) is projected. */
+    protected readonly _hasLeadingSlot: i0.Signal<boolean>;
+    /** @protected Whether a trailing slot (actions or legacy suffix) is projected. */
+    protected readonly _hasTrailingSlot: i0.Signal<boolean>;
+    /** @protected Whether the actions slot opts into reveal-on-hover behaviour. */
+    protected readonly _revealActions: i0.Signal<boolean>;
+    /**
+     * @protected Resolves the `accent` input to a CSS color value. Semantic
+     * keys map to Malva UI tokens; any other string is returned verbatim.
+     */
+    protected readonly _accentColor: i0.Signal<string | null>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvListItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MlvListItem, "mlv-list-item", never, { "itemRole": { "alias": "itemRole"; "required": false; "isSignal": true; }; "unread": { "alias": "unread"; "required": false; "isSignal": true; }; "accent": { "alias": "accent"; "required": false; "isSignal": true; }; }, {}, ["_link", "_mediaSlot", "_titleSlot", "_bylineSlot", "_metaSlot", "_actionsSlot", "_prefixSlot", "_suffixSlot"], ["[mlvListItemMedia], [mlvListItemPrefix]", "*", "[mlvListItemActions], [mlvListItemSuffix]", "[mlvListItemTitle]", "[mlvListItemMeta]", "[mlvListItemByline]"], true, never>;
+}
+
+interface MlvListItemTemplateContext<T = unknown> {
+    $implicit: T;
+}
+declare class MlvListItemTemplate<T = unknown> {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvListItemTemplate<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MlvListItemTemplate<any>, "[mlvListItemTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Turns a `mlv-list` into a single- or multi-select listbox, backed by
+ * `@angular/aria`'s headless `ngListbox` pattern.
+ *
+ * The `Listbox` directive is applied as a host directive so the public
+ * `mlv-list[selectable]` selector, `multiple`/`value` inputs and `valueChange`
+ * output are unchanged. The aria pattern's selection/navigation knobs are
+ * re-exposed as inputs so consumers (and the shared dropdown panel) can pin
+ * them:
+ *
+ * - `selectionMode` (default aria `follow`) — set `"explicit"` to reproduce the
+ *   previous `CdkListbox` behaviour where selection only changes on
+ *   click / Space / Enter, never on arrow-key focus movement. The shared
+ *   `mlv-dropdown-panel` (and therefore `mlv-select` / `mlv-combobox`) pins
+ *   this to `"explicit"`.
+ * - `softDisabled` (default aria `true`) — set `false` to skip disabled options
+ *   during keyboard navigation, matching the previous `CdkListbox` behaviour.
+ *
+ * - `focusMode` (default aria `roving`) — set `"activedescendant"` so DOM focus
+ *   stays on an owning combobox trigger/input while the active option is tracked
+ *   via `aria-activedescendant`. The shared `mlv-dropdown-panel` re-exposes this
+ *   so `mlv-combobox` can keep keyboard focus in its text input.
+ *
+ * `wrap` and text typeahead keep aria's defaults, which already match the
+ * previous configuration (typeahead reads each option's `label`; see
+ * {@link MlvListItemSelectable}).
+ *
+ * The aria `Listbox`'s own `id` input is re-exposed publicly as `listboxId`. The
+ * pattern binds `[attr.id]="id()"` on the host and, when left unset, generates a
+ * `ng-listbox-*` id that would otherwise override any `[id]` template binding —
+ * dangling the `aria-controls` reference of a wrapping `mlv-select` /
+ * `mlv-combobox` trigger. Forwarding a consumer-provided id through the aria
+ * input keeps the rendered DOM id under the consumer's control (the shared
+ * `mlv-dropdown-panel` wires this from its `listboxId` input). A host
+ * directive's exposed inputs cannot be set from this wrapper's own `host`
+ * metadata, so `listboxId` is bound where the `<mlv-list>` element is used.
+ */
+declare class MlvListSelectable<T> {
+    /** @protected The host `ngListbox` pattern instance. */
+    protected readonly _listbox: Listbox<T>;
+    /**
+     * Moves keyboard focus to the first option in the list. Used by the
+     * dropdown panel when a parent select/combobox opens the popup.
+     */
+    focusFirst(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvListSelectable<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MlvListSelectable<any>, "mlv-list[selectable]", never, {}, {}, never, never, true, [{ directive: typeof i1.Listbox; inputs: { "value": "value"; "multi": "multiple"; "orientation": "orientation"; "wrap": "wrap"; "disabled": "disabled"; "readonly": "readonly"; "selectionMode": "selectionMode"; "softDisabled": "softDisabled"; "focusMode": "focusMode"; "id": "listboxId"; }; outputs: { "valueChange": "valueChange"; }; }]>;
+}
+/**
+ * Marks a `mlv-list-item` as a selectable option inside a
+ * `mlv-list[selectable]`, backed by `@angular/aria`'s `ngOption`.
+ *
+ * The required `value`, optional `disabled`, optional typeahead `label`, and
+ * optional `optionId` inputs are forwarded to the host `Option` directive.
+ * Provide `label` (the visible option text) so type-to-select works — aria's
+ * typeahead reads the explicit `label` input and defaults to an empty search
+ * term otherwise. The shared `mlv-dropdown-panel` sets this automatically from
+ * the option label.
+ *
+ * `optionId` re-exposes aria's `ngOption` `id` input (rendered as the option
+ * element's `[attr.id]`). Forwarding a deterministic id lets an owning combobox
+ * point its input's `aria-activedescendant` at the active option element (the
+ * activedescendant focus model). Left unset, aria mints its own id.
+ */
+declare class MlvListItemSelectable {
+    /** @protected The host `ngOption` pattern instance. */
+    protected readonly option: Option<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvListItemSelectable, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MlvListItemSelectable, "mlv-list-item[value]", ["uiListItemSelectable"], {}, {}, never, never, true, [{ directive: typeof i1.Option; inputs: { "value": "value"; "disabled": "disabled"; "label": "label"; "id": "optionId"; }; outputs: {}; }]>;
+}
+
+declare class MlvListItemGroup {
+    readonly label: i0.InputSignal<string>;
+    readonly open: i0.ModelSignal<BooleanInput>;
+    /** @protected Unique ID for the collapsible content region. */
+    protected readonly _contentId: string;
+    toggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvListItemGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MlvListItemGroup, "mlv-list-item-group", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*"], true, never>;
+}
+
+export { MlvList, MlvListItem, MlvListItemActions, MlvListItemByline, MlvListItemGroup, MlvListItemLink, MlvListItemMedia, MlvListItemMeta, MlvListItemPrefix, MlvListItemSelectable, MlvListItemSuffix, MlvListItemTemplate, MlvListItemTitle, MlvListSelectable };
+export type { MlvListAppearance, MlvListItemAccent, MlvListItemTemplateContext, MlvListVariant };

package/types/malva-ui-core-loader.d.ts

@@ -0,0 +1,89 @@
+import * as _malva_ui_i18n from '@malva-ui/i18n';
+import * as _angular_core from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { MlvTone } from '@malva-ui/cdk/utils';
+
+/**
+ * Semantic tone of the loader. Extends the shared {@link MlvTone} vocabulary
+ * (`'info' | 'success' | 'warning' | 'danger'`) with a neutral `'default'`.
+ */
+type MlvLoaderTone = MlvTone | 'default';
+/** Visual variant of the loader. */
+type MlvLoaderVariant = 'bar' | 'circle';
+declare class MlvLoader {
+    /** Visual variant — `'bar'` for a horizontal progress bar, `'circle'` for a circular spinner. */
+    readonly variant: _angular_core.InputSignal<MlvLoaderVariant>;
+    /** Semantic tone. Controls the `--mlv-l-color` CSS token. */
+    readonly tone: _angular_core.InputSignal<MlvLoaderTone>;
+    /** Current progress value. Used in determinate mode together with `max`. */
+    readonly value: _angular_core.InputSignal<number>;
+    /** Maximum progress value. Defaults to `100`. */
+    readonly max: _angular_core.InputSignal<number>;
+    /**
+     * When `true`, the loader animates continuously without tracking a specific value.
+     * Disables all ARIA value attributes (`aria-valuenow`, `aria-valuemin`, `aria-valuemax`).
+     */
+    readonly indeterminate: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Pixel size of the loader.
+     * For `'bar'` variant this sets the track height (defaults to `4`).
+     * For `'circle'` variant this sets the diameter (defaults to `48`).
+     */
+    readonly size: _angular_core.InputSignal<number | undefined>;
+    /** Stroke width in pixels for the `'circle'` variant. Defaults to `4`. */
+    readonly strokeWidth: _angular_core.InputSignal<number>;
+    /** Custom aria-label override. Falls back to the i18n-provided label. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * When `true`, displays the current progress percentage as a text hint.
+     * For the `'bar'` variant the hint appears above the track.
+     * For the `'circle'` variant the hint appears centred inside the ring.
+     * Only shown when the loader is in determinate mode (not `indeterminate`).
+     */
+    readonly showHint: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Custom color override applied directly to `--mlv-l-color`.
+     * Accepts any valid CSS color value or a `linear-gradient()` / `url('#paintServerId')` string.
+     * When set, takes precedence over the `tone` color.
+     */
+    readonly color: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Custom fill color override applied directly to `--mlv-l-track-color`.
+     * Accepts any valid CSS color value or a `linear-gradient()` / `url('#paintServerId')` string.
+     * When set, takes precedence over the `tone` color.
+     */
+    readonly trackColor: _angular_core.InputSignal<string | undefined>;
+    /**
+     * When `true`, adds a shimmer sweep animation over the filled bar / arc.
+     * Only applies to the `'bar'` variant in determinate mode.
+     * Has no effect in indeterminate mode (the bar is already animated).
+     */
+    readonly glow: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** @protected The component's i18n strings signal. */
+    protected readonly _i18n: _angular_core.Signal<_malva_ui_i18n.MlvLoaderI18n>;
+    /** @protected Resolved aria-label: explicit input takes precedence over i18n default. */
+    protected readonly _resolvedAriaLabel: _angular_core.Signal<string>;
+    /** @protected Resolves the effective pixel size based on `size` input and `variant`. */
+    protected readonly _normalizedSize: _angular_core.Signal<number>;
+    /**
+     * @protected Delays enabling the CSS fill transition by one event loop tick so the
+     * browser has a defined starting `stroke-dashoffset` before the transition begins.
+     * Starts as `undefined` (falsy) and becomes truthy after the microtask queue drains.
+     */
+    protected readonly _progressVisible: _angular_core.Signal<boolean | undefined>;
+    /** @protected `true` when the loader is in determinate (value-tracking) mode. */
+    protected readonly _determinate: _angular_core.Signal<boolean>;
+    /** @protected Progress as a percentage clamped between 0 and 100. */
+    protected readonly _percentage: _angular_core.Signal<number>;
+    /** @protected Formatted hint text shown when `showHint` is true and mode is determinate. */
+    protected readonly _hintText: _angular_core.Signal<string>;
+    /** @protected Whether the hint should be visible. */
+    protected readonly _showHint: _angular_core.Signal<boolean>;
+    /** @protected CSS class string applied to the host element. */
+    protected readonly _hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvLoader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvLoader, "mlv-loader", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "showHint": { "alias": "showHint"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "trackColor": { "alias": "trackColor"; "required": false; "isSignal": true; }; "glow": { "alias": "glow"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { MlvLoader };
+export type { MlvLoaderTone, MlvLoaderVariant };