@almoamendev/ngx-md3 0.3.4 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almoamendev/ngx-md3",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "MD3-style Angular components & style library",
   "author": "Murtadha (Hussain) Almoamen",
   "license": "MIT",

package/types/almoamendev-ngx-md3.d.ts

@@ -809,6 +809,13 @@ declare class CarouselItem {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CarouselItem, "md3-carousel-item", never, {}, {}, never, ["*"], true, never>;
 }
 
+/**
+ * Reads an aspect ratio from an input value.
+ *
+ * Accepts a number (`1.778`) or the more readable fraction form (`"16 / 9"`). Anything that is
+ * not a positive, finite ratio resolves to `undefined`, which leaves the height to CSS.
+ */
+declare function parseCarouselAspectRatio(value: unknown): number | undefined;
 /**
  * A Material Design 3 carousel.
  *
@@ -848,6 +855,16 @@ declare class Carousel {
     smallItemSizeMax: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Space between items, in pixels. */
     gap: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Width-to-height ratio of a fully unmasked item, as a number or a `"16 / 9"` fraction.
+     *
+     * The solver changes item width as the container resizes, so a fixed height would let the
+     * ratio drift. Setting this derives the carousel's height from the solved item width
+     * instead, keeping items at a constant shape at every viewport size.
+     *
+     * Leave it unset to size the carousel with `--md3-carousel-height` in CSS.
+     */
+    aspectRatio: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
     /**
      * Index of the item leading the focal range. Two-way bindable.
      *
@@ -889,6 +906,14 @@ declare class Carousel {
      * container fits more items in the focal range.
      */
     readonly lastIndex: _angular_core.Signal<number>;
+    /**
+     * Height implied by `aspect-ratio`, in pixels, or `undefined` when CSS owns the height.
+     *
+     * Measured against a focal item's visible width — the solved item size less the gap — so a
+     * fully unmasked item matches the requested ratio exactly. Masked items keep this height and
+     * crop horizontally, which is what the Material Design arrangement expects.
+     */
+    readonly resolvedHeight: _angular_core.Signal<number | undefined>;
     readonly atStart: _angular_core.Signal<boolean>;
     /** True when the carousel cannot scroll any further towards the end. */
     readonly atEnd: _angular_core.Signal<boolean>;
@@ -940,7 +965,7 @@ declare class Carousel {
      */
     private applyGeometry;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Carousel, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Carousel, "md3-carousel", never, { "carouselLayout": { "alias": "carousel-layout"; "required": false; "isSignal": true; }; "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "itemSize": { "alias": "item-size"; "required": false; "isSignal": true; }; "smallItemSizeMin": { "alias": "small-item-size-min"; "required": false; "isSignal": true; }; "smallItemSizeMax": { "alias": "small-item-size-max"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "index": { "alias": "index"; "required": false; "isSignal": true; }; }, { "index": "indexChange"; }, ["items"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Carousel, "md3-carousel", never, { "carouselLayout": { "alias": "carousel-layout"; "required": false; "isSignal": true; }; "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "itemSize": { "alias": "item-size"; "required": false; "isSignal": true; }; "smallItemSizeMin": { "alias": "small-item-size-min"; "required": false; "isSignal": true; }; "smallItemSizeMax": { "alias": "small-item-size-max"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "aspectRatio": { "alias": "aspect-ratio"; "required": false; "isSignal": true; }; "index": { "alias": "index"; "required": false; "isSignal": true; }; }, { "index": "indexChange"; }, ["items"], ["*"], true, never>;
 }
 
 /**
@@ -1910,5 +1935,5 @@ declare class SnackbarService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<SnackbarService>;
 }
 
-export { AppBar, AppBarLogo, Avatar, Badge, Button, ButtonGroup, CAROUSEL_STRATEGIES, Card, Carousel, CarouselItem, Checkbox, ChipAvatar, Chips, CircularProgressIndicator, DIALOG_COMPONENT, DIALOG_CONFIG, DIALOG_DATA, Dialog, DialogActions, DialogBody, DialogHeader, DialogRef, DialogService, Divider, FloatingActionButton, FullScreenDialog, FullScreenDialogHeader, Grid, GridItem, IconButton, IconElement, InputElement, LayoutService, LinearProgressIndicator, List, ListItem, ListItemPrimaryAction, ListLeading, ListSlot, LoadingIndicator, MENU_COMPONENT, MENU_CONFIG, MENU_DATA, MaterialIcon, Menu, MenuGroup, MenuItem, MenuRef, MenuService, NavigationBar, NavigationGroup, NavigationItem, NavigationRail, RadioButton, SIDE_SHEET_COMPONENT, SIDE_SHEET_CONFIG, SIDE_SHEET_DATA, SNACKBAR_ACTION_LABEL, SNACKBAR_CONFIG, SNACKBAR_MESSAGE, Scaffold, ScaffoldBar, ScaffoldPane, ScaffoldRail, SheetsService, SideSheetActions, SideSheetBody, SideSheetHeader, SideSheetRef, Slider, Snackbar, SnackbarRef, SnackbarService, SplitButton, StateComponent, SupportingText, Switch, TextField, TypeBody, TypeDisplay, TypeHeadline, TypeLabel, TypeTitle, buildGeometry, clampIndex, indexForScrollOffset, multiBrowseStrategy, resolveItemGeometry, resolveState, scrollOffsetForIndex, sizeBandFor };
+export { AppBar, AppBarLogo, Avatar, Badge, Button, ButtonGroup, CAROUSEL_STRATEGIES, Card, Carousel, CarouselItem, Checkbox, ChipAvatar, Chips, CircularProgressIndicator, DIALOG_COMPONENT, DIALOG_CONFIG, DIALOG_DATA, Dialog, DialogActions, DialogBody, DialogHeader, DialogRef, DialogService, Divider, FloatingActionButton, FullScreenDialog, FullScreenDialogHeader, Grid, GridItem, IconButton, IconElement, InputElement, LayoutService, LinearProgressIndicator, List, ListItem, ListItemPrimaryAction, ListLeading, ListSlot, LoadingIndicator, MENU_COMPONENT, MENU_CONFIG, MENU_DATA, MaterialIcon, Menu, MenuGroup, MenuItem, MenuRef, MenuService, NavigationBar, NavigationGroup, NavigationItem, NavigationRail, RadioButton, SIDE_SHEET_COMPONENT, SIDE_SHEET_CONFIG, SIDE_SHEET_DATA, SNACKBAR_ACTION_LABEL, SNACKBAR_CONFIG, SNACKBAR_MESSAGE, Scaffold, ScaffoldBar, ScaffoldPane, ScaffoldRail, SheetsService, SideSheetActions, SideSheetBody, SideSheetHeader, SideSheetRef, Slider, Snackbar, SnackbarRef, SnackbarService, SplitButton, StateComponent, SupportingText, Switch, TextField, TypeBody, TypeDisplay, TypeHeadline, TypeLabel, TypeTitle, buildGeometry, clampIndex, indexForScrollOffset, multiBrowseStrategy, parseCarouselAspectRatio, resolveItemGeometry, resolveState, scrollOffsetForIndex, sizeBandFor };
 export type { AppBarScrollingStyle, AppBarType, ButtonGroupSelection, ButtonGroupType, ButtonSize, ButtonType, CardType, CarouselAlignment, CarouselArrangement, CarouselGeometry, CarouselItemGeometry, CarouselItemSize, CarouselKeyline, CarouselKeylineState, CarouselLayout, CarouselOrientation, CarouselStrategy, CarouselStrategyContext, ChipStyle, ChipType, DialogConfig, DialogContainer, DialogRole, FabSize, FabType, FullScreenDialogConfig, IconButtonType, IconButtonWidth, ListLeadingSize, ListLeadingType, Md3NavigationMode, MenuConfig, MenuPositionOrigin, MenuPositionX, MenuPositionY, MenuScrollStrategy, PreviousDialog, SideSheetConfig, SideSheetContainer, SideSheetSide, SideSheetType, SliderSize, SnackbarConfig, SnackbarDismiss, SnackbarDismissReason, SnackbarPoliteness, SplitButtonType, TextColor, TextSize };