@radix-ng/primitives 1.0.5 → 1.0.7

package/fesm2022/radix-ng-primitives-aspect-ratio.mjs

@@ -1,57 +1,33 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Renderer2, input, numberAttribute, computed, Directive } from '@angular/core';
+import { input, numberAttribute, Directive } from '@angular/core';
 
 /**
- * Directive to maintain an aspect ratio for an element.
- * The element will have its `padding-bottom` dynamically calculated
- * based on the provided aspect ratio to maintain the desired ratio.
- * The content inside the element will be positioned absolutely.
+ * Maintains a fixed aspect ratio for its content using the native CSS `aspect-ratio` property.
+ * Place the content inside (e.g. an `<img class="size-full object-cover">`) and it fills the box.
+ *
  * @group Components
  */
 class RdxAspectRatioDirective {
     constructor() {
-        this.element = inject(ElementRef);
-        this.renderer = inject(Renderer2);
         /**
-         * The desired aspect ratio (e.g., 16/9).
-         * By default, it is set to 1 (which results in a square, 1:1).
+         * The desired aspect ratio (e.g. `16 / 9`). Defaults to `1` (a square, 1:1).
+         *
          * @group Props
          * @defaultValue 1
          */
         this.ratio = input(1, { ...(ngDevMode ? { debugName: "ratio" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        /**
-         * Dynamically computed `padding-bottom` style for the element.
-         * This value is calculated based on the inverse of the aspect ratio.
-         *
-         * If the ratio is zero, it defaults to `0%` to avoid division by zero.
-         *
-         */
-        this.paddingBottom = computed(() => {
-            const ratioValue = this.ratio();
-            return `${ratioValue !== 0 ? (1 / ratioValue) * 100 : 0}%`;
-        }, ...(ngDevMode ? [{ debugName: "paddingBottom" }] : /* istanbul ignore next */ []));
-    }
-    ngAfterViewInit() {
-        const content = this.element.nativeElement.firstElementChild;
-        if (content) {
-            // Set the content to cover the entire element with absolute positioning
-            this.renderer.setStyle(content, 'position', 'absolute');
-            this.renderer.setStyle(content, 'inset', '0');
-        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAspectRatioDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxAspectRatioDirective, isStandalone: true, selector: "[rdxAspectRatio]", inputs: { ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.position": "'relative'", "style.width": "'100%'", "style.padding-bottom": "paddingBottom()" } }, exportAs: ["rdxAspectRatio"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxAspectRatioDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxAspectRatioDirective, isStandalone: true, selector: "[rdxAspectRatio]", inputs: { ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.aspect-ratio": "ratio() || null", "style.width": "\"100%\"" } }, exportAs: ["rdxAspectRatio"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxAspectRatioDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxAspectRatioDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxAspectRatio]',
                     exportAs: 'rdxAspectRatio',
-                    standalone: true,
                     host: {
-                        '[style.position]': `'relative'`,
-                        '[style.width]': `'100%'`,
-                        '[style.padding-bottom]': 'paddingBottom()'
+                        '[style.aspect-ratio]': 'ratio() || null',
+                        '[style.width]': '"100%"'
                     }
                 }]
         }], propDecorators: { ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }] } });

package/fesm2022/radix-ng-primitives-aspect-ratio.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"radix-ng-primitives-aspect-ratio.mjs","sources":["../../../packages/primitives/aspect-ratio/src/aspect-ratio.directive.ts","../../../packages/primitives/aspect-ratio/radix-ng-primitives-aspect-ratio.ts"],"sourcesContent":["import {\n    AfterViewInit,\n    computed,\n    Directive,\n    ElementRef,\n    inject,\n    input,\n    numberAttribute,\n    Renderer2\n} from '@angular/core';\nimport { NumberInput } from '@radix-ng/primitives/core';\n\n/**\n * Directive to maintain an aspect ratio for an element.\n * The element will have its `padding-bottom` dynamically calculated\n * based on the provided aspect ratio to maintain the desired ratio.\n * The content inside the element will be positioned absolutely.\n * @group Components\n */\n@Directive({\n    selector: '[rdxAspectRatio]',\n    exportAs: 'rdxAspectRatio',\n    standalone: true,\n    host: {\n        '[style.position]': `'relative'`,\n        '[style.width]': `'100%'`,\n        '[style.padding-bottom]': 'paddingBottom()'\n    }\n})\nexport class RdxAspectRatioDirective implements AfterViewInit {\n    private readonly element = inject(ElementRef);\n    private readonly renderer = inject(Renderer2);\n\n    /**\n     * The desired aspect ratio (e.g., 16/9).\n     * By default, it is set to 1 (which results in a square, 1:1).\n     * @group Props\n     * @defaultValue 1\n     */\n    readonly ratio = input<number, NumberInput>(1, { transform: numberAttribute });\n\n    /**\n     * Dynamically computed `padding-bottom` style for the element.\n     * This value is calculated based on the inverse of the aspect ratio.\n     *\n     * If the ratio is zero, it defaults to `0%` to avoid division by zero.\n     *\n     */\n    protected readonly paddingBottom = computed(() => {\n        const ratioValue = this.ratio();\n        return `${ratioValue !== 0 ? (1 / ratioValue) * 100 : 0}%`;\n    });\n\n    ngAfterViewInit() {\n        const content = this.element.nativeElement.firstElementChild;\n        if (content) {\n            // Set the content to cover the entire element with absolute positioning\n            this.renderer.setStyle(content, 'position', 'absolute');\n            this.renderer.setStyle(content, 'inset', '0');\n        }\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAYA;;;;;;AAMG;MAWU,uBAAuB,CAAA;AAVpC,IAAA,WAAA,GAAA;AAWqB,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC;AAC5B,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC;AAE7C;;;;;AAKG;QACM,IAAA,CAAA,KAAK,GAAG,KAAK,CAAsB,CAAC,6EAAI,SAAS,EAAE,eAAe,EAAA,CAAG;AAE9E;;;;;;AAMG;AACgB,QAAA,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MAAK;AAC7C,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,EAAE;AAC/B,YAAA,OAAO,GAAG,UAAU,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,UAAU,IAAI,GAAG,GAAG,CAAC,GAAG;AAC9D,QAAA,CAAC,oFAAC;AAUL,IAAA;IARG,eAAe,GAAA;QACX,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,iBAAiB;QAC5D,IAAI,OAAO,EAAE;;YAET,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,OAAO,EAAE,UAAU,EAAE,UAAU,CAAC;YACvD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,CAAC;QACjD;IACJ;8GA/BS,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,aAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAvB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAVnC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,kBAAkB;AAC5B,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACF,wBAAA,kBAAkB,EAAE,CAAA,UAAA,CAAY;AAChC,wBAAA,eAAe,EAAE,CAAA,MAAA,CAAQ;AACzB,wBAAA,wBAAwB,EAAE;AAC7B;AACJ,iBAAA;;;AC5BD;;AAEG;;;;"}
+{"version":3,"file":"radix-ng-primitives-aspect-ratio.mjs","sources":["../../../packages/primitives/aspect-ratio/src/aspect-ratio.directive.ts","../../../packages/primitives/aspect-ratio/radix-ng-primitives-aspect-ratio.ts"],"sourcesContent":["import { Directive, input, numberAttribute } from '@angular/core';\nimport { NumberInput } from '@radix-ng/primitives/core';\n\n/**\n * Maintains a fixed aspect ratio for its content using the native CSS `aspect-ratio` property.\n * Place the content inside (e.g. an `<img class=\"size-full object-cover\">`) and it fills the box.\n *\n * @group Components\n */\n@Directive({\n    selector: '[rdxAspectRatio]',\n    exportAs: 'rdxAspectRatio',\n    host: {\n        '[style.aspect-ratio]': 'ratio() || null',\n        '[style.width]': '\"100%\"'\n    }\n})\nexport class RdxAspectRatioDirective {\n    /**\n     * The desired aspect ratio (e.g. `16 / 9`). Defaults to `1` (a square, 1:1).\n     *\n     * @group Props\n     * @defaultValue 1\n     */\n    readonly ratio = input<number, NumberInput>(1, { transform: numberAttribute });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAGA;;;;;AAKG;MASU,uBAAuB,CAAA;AARpC,IAAA,WAAA,GAAA;AASI;;;;;AAKG;QACM,IAAA,CAAA,KAAK,GAAG,KAAK,CAAsB,CAAC,6EAAI,SAAS,EAAE,eAAe,EAAA,CAAG;AACjF,IAAA;8GARY,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,oBAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAvB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBARnC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,kBAAkB;AAC5B,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,IAAI,EAAE;AACF,wBAAA,sBAAsB,EAAE,iBAAiB;AACzC,wBAAA,eAAe,EAAE;AACpB;AACJ,iBAAA;;;AChBD;;AAEG;;;;"}