@almoamendev/ngx-md3 0.3.4 → 0.3.5

package/fesm2022/almoamendev-ngx-md3.mjs

@@ -2110,6 +2110,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                     }, template: "<div class=\"md3-carousel-item-content\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{--md3-carousel-item-size: 0px;--md3-carousel-item-full-size: 0px;--md3-carousel-item-offset: 0px;--md3-carousel-item-mask-ratio: 0;--background-color: rgb(var(--md-scheme-surface-container-high));--border-radius: var(--md-border-radius-xlarge);--md3-carousel-item-gap: var(--md3-carousel-gap, 0px);--md3-carousel-item-visible-size: max( 0px, calc(var(--md3-carousel-item-size) - var(--md3-carousel-item-gap)) );--md3-carousel-item-visible-full-size: max( 0px, calc(var(--md3-carousel-item-full-size) - var(--md3-carousel-item-gap)) );position:absolute;inset-block:0;inset-inline-start:calc(var(--md3-carousel-item-offset) + var(--md3-carousel-item-gap) / 2);inline-size:var(--md3-carousel-item-visible-size);overflow:hidden;border-radius:var(--border-radius);background-color:var(--background-color);contain:paint}:host([hidden]){display:none}.md3-carousel-item-content{position:absolute;inset-block:0;inset-inline-start:50%;inline-size:var(--md3-carousel-item-visible-full-size);margin-inline-start:calc(var(--md3-carousel-item-visible-full-size) / -2)}:host ::ng-deep .md3-carousel-item-content>img,:host ::ng-deep .md3-carousel-item-content>video,:host ::ng-deep .md3-carousel-item-content>picture{display:block;inline-size:100%;block-size:100%;object-fit:cover}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
+/**
+ * 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.
+ */
+function parseCarouselAspectRatio(value) {
+    if (value === null || value === undefined || value === '') {
+        return undefined;
+    }
+    let ratio;
+    if (typeof value === 'number') {
+        ratio = value;
+    }
+    else {
+        const parts = String(value).split('/');
+        ratio = parts.length === 2
+            ? Number(parts[0]) / Number(parts[1])
+            : Number(parts[0]);
+    }
+    return Number.isFinite(ratio) && ratio > 0 ? ratio : undefined;
+}
 /** Grace period after a programmatic scroll before the index is synced back from the DOM. */
 const SCROLL_END_FALLBACK = 120;
 /**
@@ -2155,6 +2177,17 @@ class Carousel {
     /** Space between items, in pixels. */
     gap = input(8, { ...(ngDevMode ? { debugName: "gap" } : /* istanbul ignore next */ {}), alias: 'gap',
         transform: numberAttribute });
+    /**
+     * 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 = input(undefined, { ...(ngDevMode ? { debugName: "aspectRatio" } : /* istanbul ignore next */ {}), alias: 'aspect-ratio',
+        transform: parseCarouselAspectRatio });
     /**
      * Index of the item leading the focal range. Two-way bindable.
      *
@@ -2240,6 +2273,22 @@ class Carousel {
      */
     lastIndex = computed(() => this.geometry()?.lastIndex ?? 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "lastIndex" }] : /* istanbul ignore next */ []));
+    /**
+     * 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.
+     */
+    resolvedHeight = computed(() => {
+        const ratio = this.aspectRatio();
+        const geometry = this.geometry();
+        if (!ratio || !geometry) {
+            return undefined;
+        }
+        return (geometry.itemSize - this.metrics().gap) / ratio;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedHeight" }] : /* istanbul ignore next */ []));
     atStart = computed(() => this.index() <= 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "atStart" }] : /* istanbul ignore next */ []));
     /** True when the carousel cannot scroll any further towards the end. */
@@ -2301,6 +2350,17 @@ class Carousel {
             this.items();
             this.applyGeometry();
         });
+        // Derive the height from the solved item width so items keep their shape as the
+        // container resizes. Changing the height cannot feed back into the arrangement, which
+        // only depends on the container's width, so this settles in one pass.
+        effect(() => {
+            const height = this.resolvedHeight();
+            if (height === undefined) {
+                this.element.style.removeProperty('--md3-carousel-aspect-height');
+                return;
+            }
+            this.element.style.setProperty('--md3-carousel-aspect-height', `${height}px`);
+        });
         // Follow the index when it is set from outside, but not while the user is scrolling —
         // `syncIndexFromScroll` only writes a value the DOM already agrees with.
         effect(() => {
@@ -2479,15 +2539,15 @@ class Carousel {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Carousel, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Carousel, isStandalone: true, selector: "md3-carousel", inputs: { carouselLayout: { classPropertyName: "carouselLayout", publicName: "carousel-layout", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "item-size", isSignal: true, isRequired: false, transformFunction: null }, smallItemSizeMin: { classPropertyName: "smallItemSizeMin", publicName: "small-item-size-min", isSignal: true, isRequired: false, transformFunction: null }, smallItemSizeMax: { classPropertyName: "smallItemSizeMax", publicName: "small-item-size-max", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange" }, host: { attributes: { "role": "group", "aria-roledescription": "carousel" }, listeners: { "keydown": "onKeydown($event)", "focusin": "onFocusIn($event)" } }, queries: [{ propertyName: "items", predicate: CarouselItem, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #scroller class=\"md3-carousel-scroller\" tabindex=\"0\" [class.md3-snap]=\"snap()\">\n    <div class=\"md3-carousel-content\">\n        <div class=\"md3-carousel-viewport\">\n            <ng-content></ng-content>\n        </div>\n\n        @for (point of snapPoints(); track $index) {\n            <div class=\"md3-carousel-snap\" aria-hidden=\"true\" [style.inset-inline-start.px]=\"point\"></div>\n        }\n    </div>\n</div>\n", styles: [":host{--md3-carousel-height: 14em;--md3-carousel-scroll-size: 100%;--md3-carousel-viewport-size: 100%;--md3-carousel-gap: 0px;--outline-color: rgb(var(--md-scheme-secondary));--outline-width: .1875em;--outline-offset: .125em;font-size:1rem;display:block;inline-size:100%;block-size:var(--md3-carousel-height)}.md3-carousel-scroller{block-size:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;outline:none}.md3-carousel-scroller::-webkit-scrollbar{display:none}.md3-carousel-scroller:focus-visible{outline:var(--outline-width) solid var(--outline-color);outline-offset:var(--outline-offset);border-radius:var(--md-border-radius-xlarge)}.md3-carousel-scroller.md3-snap{scroll-snap-type:x mandatory}.md3-carousel-content{position:relative;inline-size:var(--md3-carousel-scroll-size);block-size:100%}.md3-carousel-viewport{position:sticky;inset-inline-start:0;inset-block-start:0;inline-size:var(--md3-carousel-viewport-size);block-size:100%}.md3-carousel-snap{position:absolute;inset-block-start:0;inline-size:1px;block-size:1px;scroll-snap-align:start;pointer-events:none;visibility:hidden}@media(prefers-reduced-motion:reduce){.md3-carousel-scroller{scroll-behavior:auto}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Carousel, isStandalone: true, selector: "md3-carousel", inputs: { carouselLayout: { classPropertyName: "carouselLayout", publicName: "carousel-layout", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "item-size", isSignal: true, isRequired: false, transformFunction: null }, smallItemSizeMin: { classPropertyName: "smallItemSizeMin", publicName: "small-item-size-min", isSignal: true, isRequired: false, transformFunction: null }, smallItemSizeMax: { classPropertyName: "smallItemSizeMax", publicName: "small-item-size-max", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspect-ratio", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange" }, host: { attributes: { "role": "group", "aria-roledescription": "carousel" }, listeners: { "keydown": "onKeydown($event)", "focusin": "onFocusIn($event)" } }, queries: [{ propertyName: "items", predicate: CarouselItem, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #scroller class=\"md3-carousel-scroller\" tabindex=\"0\" [class.md3-snap]=\"snap()\">\n    <div class=\"md3-carousel-content\">\n        <div class=\"md3-carousel-viewport\">\n            <ng-content></ng-content>\n        </div>\n\n        @for (point of snapPoints(); track $index) {\n            <div class=\"md3-carousel-snap\" aria-hidden=\"true\" [style.inset-inline-start.px]=\"point\"></div>\n        }\n    </div>\n</div>\n", styles: [":host{--md3-carousel-height: 14em;--md3-carousel-scroll-size: 100%;--md3-carousel-viewport-size: 100%;--md3-carousel-gap: 0px;--outline-color: rgb(var(--md-scheme-secondary));--outline-width: .1875em;--outline-offset: .125em;font-size:1rem;display:block;inline-size:100%;block-size:var(--md3-carousel-aspect-height, var(--md3-carousel-height))}.md3-carousel-scroller{block-size:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;outline:none}.md3-carousel-scroller::-webkit-scrollbar{display:none}.md3-carousel-scroller:focus-visible{outline:var(--outline-width) solid var(--outline-color);outline-offset:var(--outline-offset);border-radius:var(--md-border-radius-xlarge)}.md3-carousel-scroller.md3-snap{scroll-snap-type:x mandatory}.md3-carousel-content{position:relative;inline-size:var(--md3-carousel-scroll-size);block-size:100%}.md3-carousel-viewport{position:sticky;inset-inline-start:0;inset-block-start:0;inline-size:var(--md3-carousel-viewport-size);block-size:100%}.md3-carousel-snap{position:absolute;inset-block-start:0;inline-size:1px;block-size:1px;scroll-snap-align:start;pointer-events:none;visibility:hidden}@media(prefers-reduced-motion:reduce){.md3-carousel-scroller{scroll-behavior:auto}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Carousel, decorators: [{
             type: Component,
             args: [{ selector: 'md3-carousel', host: {
                         'role': 'group',
                         'aria-roledescription': 'carousel',
-                    }, template: "<div #scroller class=\"md3-carousel-scroller\" tabindex=\"0\" [class.md3-snap]=\"snap()\">\n    <div class=\"md3-carousel-content\">\n        <div class=\"md3-carousel-viewport\">\n            <ng-content></ng-content>\n        </div>\n\n        @for (point of snapPoints(); track $index) {\n            <div class=\"md3-carousel-snap\" aria-hidden=\"true\" [style.inset-inline-start.px]=\"point\"></div>\n        }\n    </div>\n</div>\n", styles: [":host{--md3-carousel-height: 14em;--md3-carousel-scroll-size: 100%;--md3-carousel-viewport-size: 100%;--md3-carousel-gap: 0px;--outline-color: rgb(var(--md-scheme-secondary));--outline-width: .1875em;--outline-offset: .125em;font-size:1rem;display:block;inline-size:100%;block-size:var(--md3-carousel-height)}.md3-carousel-scroller{block-size:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;outline:none}.md3-carousel-scroller::-webkit-scrollbar{display:none}.md3-carousel-scroller:focus-visible{outline:var(--outline-width) solid var(--outline-color);outline-offset:var(--outline-offset);border-radius:var(--md-border-radius-xlarge)}.md3-carousel-scroller.md3-snap{scroll-snap-type:x mandatory}.md3-carousel-content{position:relative;inline-size:var(--md3-carousel-scroll-size);block-size:100%}.md3-carousel-viewport{position:sticky;inset-inline-start:0;inset-block-start:0;inline-size:var(--md3-carousel-viewport-size);block-size:100%}.md3-carousel-snap{position:absolute;inset-block-start:0;inline-size:1px;block-size:1px;scroll-snap-align:start;pointer-events:none;visibility:hidden}@media(prefers-reduced-motion:reduce){.md3-carousel-scroller{scroll-behavior:auto}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { carouselLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "carousel-layout", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "item-size", required: false }] }], smallItemSizeMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "small-item-size-min", required: false }] }], smallItemSizeMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "small-item-size-max", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }, { type: i0.Output, args: ["indexChange"] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CarouselItem), { ...{ descendants: true }, isSignal: true }] }], scroller: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }], onKeydown: [{
+                    }, template: "<div #scroller class=\"md3-carousel-scroller\" tabindex=\"0\" [class.md3-snap]=\"snap()\">\n    <div class=\"md3-carousel-content\">\n        <div class=\"md3-carousel-viewport\">\n            <ng-content></ng-content>\n        </div>\n\n        @for (point of snapPoints(); track $index) {\n            <div class=\"md3-carousel-snap\" aria-hidden=\"true\" [style.inset-inline-start.px]=\"point\"></div>\n        }\n    </div>\n</div>\n", styles: [":host{--md3-carousel-height: 14em;--md3-carousel-scroll-size: 100%;--md3-carousel-viewport-size: 100%;--md3-carousel-gap: 0px;--outline-color: rgb(var(--md-scheme-secondary));--outline-width: .1875em;--outline-offset: .125em;font-size:1rem;display:block;inline-size:100%;block-size:var(--md3-carousel-aspect-height, var(--md3-carousel-height))}.md3-carousel-scroller{block-size:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;outline:none}.md3-carousel-scroller::-webkit-scrollbar{display:none}.md3-carousel-scroller:focus-visible{outline:var(--outline-width) solid var(--outline-color);outline-offset:var(--outline-offset);border-radius:var(--md-border-radius-xlarge)}.md3-carousel-scroller.md3-snap{scroll-snap-type:x mandatory}.md3-carousel-content{position:relative;inline-size:var(--md3-carousel-scroll-size);block-size:100%}.md3-carousel-viewport{position:sticky;inset-inline-start:0;inset-block-start:0;inline-size:var(--md3-carousel-viewport-size);block-size:100%}.md3-carousel-snap{position:absolute;inset-block-start:0;inline-size:1px;block-size:1px;scroll-snap-align:start;pointer-events:none;visibility:hidden}@media(prefers-reduced-motion:reduce){.md3-carousel-scroller{scroll-behavior:auto}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { carouselLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "carousel-layout", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "item-size", required: false }] }], smallItemSizeMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "small-item-size-min", required: false }] }], smallItemSizeMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "small-item-size-max", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspect-ratio", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }, { type: i0.Output, args: ["indexChange"] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CarouselItem), { ...{ descendants: true }, isSignal: true }] }], scroller: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }], onKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }], onFocusIn: [{
@@ -5901,5 +5961,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 };
 //# sourceMappingURL=almoamendev-ngx-md3.mjs.map