@radix-ng/primitives 0.5.0 → 0.7.0

package/fesm2022/radix-ng-primitives-label.mjs

@@ -1,25 +1,16 @@
 import * as i0 from '@angular/core';
-import { signal, Directive, Optional, Input, HostListener } from '@angular/core';
+import { input, inject, ElementRef, Directive, Input } from '@angular/core';
 
-// Increasing integer for generating unique ids.
-let nextUniqueId = 0;
-class RdxLabelDirective {
-    /** The HTML id of the Label. */
-    set id(id) {
-        this._id.set(id || this._id());
-    }
-    get id() {
-        return this._id();
-    }
-    constructor(el) {
-        this.el = el;
-        /** The HTML id attribute applied to this element. */
-        this._id = signal(`rdx-label-${nextUniqueId++}`);
+let idIterator = 0;
+class RdxLabelRootDirective {
+    constructor() {
+        this.id = `rdx-label-${idIterator++}`;
         /**
          * The id of the element the label is associated with.
          * @default '-'
          */
-        this.htmlFor = '';
+        this.htmlFor = input('');
+        this.elementRef = inject((ElementRef));
     }
     // prevent text selection when double-clicking label
     // The main problem with double-clicks in a web app is that
@@ -31,37 +22,34 @@ class RdxLabelDirective {
             return;
         }
         // prevent text selection when double-clicking label
-        if (this.el.nativeElement.contains(target) && !event.defaultPrevented && event.detail > 1) {
+        if (this.elementRef.nativeElement.contains(target) &&
+            !event.defaultPrevented &&
+            event.detail > 1) {
             event.preventDefault();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxLabelDirective, deps: [{ token: i0.ElementRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.3", type: RdxLabelDirective, isStandalone: true, selector: "label[rdxLabel]", inputs: { htmlFor: "htmlFor", id: "id" }, host: { listeners: { "mousedown": "onMouseDown($event)" }, properties: { "id": "_id()", "attr.for": "htmlFor ? htmlFor : null" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: RdxLabelRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.4", type: RdxLabelRootDirective, isStandalone: true, selector: "label[LabelRoot]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, htmlFor: { classPropertyName: "htmlFor", publicName: "htmlFor", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousedown": "onMouseDown($event)" }, properties: { "attr.id": "this.id", "attr.for": "htmlFor ? htmlFor() : null" } }, exportAs: ["LabelRoot"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: RdxLabelRootDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'label[rdxLabel]',
+                    selector: 'label[LabelRoot]',
+                    exportAs: 'LabelRoot',
                     standalone: true,
                     host: {
-                        '[id]': '_id()',
-                        '[attr.for]': 'htmlFor ? htmlFor : null'
+                        '[attr.id]': 'this.id',
+                        '[attr.for]': 'htmlFor ? htmlFor() : null',
+                        '(mousedown)': 'onMouseDown($event)'
                     }
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { htmlFor: [{
-                type: Input
-            }], id: [{
+        }], propDecorators: { id: [{
                 type: Input
-            }], onMouseDown: [{
-                type: HostListener,
-                args: ['mousedown', ['$event']]
             }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { RdxLabelDirective };
+export { RdxLabelRootDirective };
 //# sourceMappingURL=radix-ng-primitives-label.mjs.map

package/fesm2022/radix-ng-primitives-label.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"radix-ng-primitives-label.mjs","sources":["../../../packages/primitives/label/src/label.directive.ts","../../../packages/primitives/label/radix-ng-primitives-label.ts"],"sourcesContent":["import { Directive, ElementRef, HostListener, Input, Optional, signal } from '@angular/core';\n\n// Increasing integer for generating unique ids.\nlet nextUniqueId = 0;\n\n@Directive({\n    selector: 'label[rdxLabel]',\n    standalone: true,\n    host: {\n        '[id]': '_id()',\n        '[attr.for]': 'htmlFor ? htmlFor : null'\n    }\n})\nexport class RdxLabelDirective {\n    /** The HTML id attribute applied to this element. */\n    protected readonly _id = signal(`rdx-label-${nextUniqueId++}`);\n\n    /**\n     * The id of the element the label is associated with.\n     * @default '-'\n     */\n    @Input() htmlFor = '';\n\n    /** The HTML id of the Label. */\n    @Input()\n    set id(id: string) {\n        this._id.set(id || this._id());\n    }\n\n    get id() {\n        return this._id();\n    }\n\n    constructor(@Optional() private el: ElementRef) {}\n\n    // prevent text selection when double-clicking label\n    // The main problem with double-clicks in a web app is that\n    // you will have to create special code to handle this on touch enabled devices.\n    @HostListener('mousedown', ['$event'])\n    onMouseDown(event: MouseEvent): void {\n        const target = event.target as HTMLElement;\n\n        // only prevent text selection if clicking inside the label itself\n        if (['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {\n            return;\n        }\n\n        // prevent text selection when double-clicking label\n        if (this.el.nativeElement.contains(target) && !event.defaultPrevented && event.detail > 1) {\n            event.preventDefault();\n        }\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;AACA,IAAI,YAAY,GAAG,CAAC,CAAC;MAUR,iBAAiB,CAAA;;IAW1B,IACI,EAAE,CAAC,EAAU,EAAA;AACb,QAAA,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;KAClC;AAED,IAAA,IAAI,EAAE,GAAA;AACF,QAAA,OAAO,IAAI,CAAC,GAAG,EAAE,CAAC;KACrB;AAED,IAAA,WAAA,CAAgC,EAAc,EAAA;QAAd,IAAE,CAAA,EAAA,GAAF,EAAE,CAAY;;QAlB3B,IAAG,CAAA,GAAA,GAAG,MAAM,CAAC,CAAA,UAAA,EAAa,YAAY,EAAE,CAAA,CAAE,CAAC,CAAC;AAE/D;;;AAGG;QACM,IAAO,CAAA,OAAA,GAAG,EAAE,CAAC;KAY4B;;;;AAMlD,IAAA,WAAW,CAAC,KAAiB,EAAA;AACzB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;;AAG3C,QAAA,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE;YACpE,OAAO;SACV;;QAGD,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACvF,KAAK,CAAC,cAAc,EAAE,CAAC;SAC1B;KACJ;8GAtCQ,iBAAiB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,EAAA,UAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,UAAA,EAAA,0BAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAAjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAR7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACF,wBAAA,MAAM,EAAE,OAAO;AACf,wBAAA,YAAY,EAAE,0BAA0B;AAC3C,qBAAA;AACJ,iBAAA,CAAA;;0BAqBgB,QAAQ;yCAZZ,OAAO,EAAA,CAAA;sBAAf,KAAK;gBAIF,EAAE,EAAA,CAAA;sBADL,KAAK;gBAeN,WAAW,EAAA,CAAA;sBADV,YAAY;uBAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,CAAA;;;ACtCzC;;AAEG;;;;"}
+{"version":3,"file":"radix-ng-primitives-label.mjs","sources":["../../../packages/primitives/label/src/label-root.directive.ts","../../../packages/primitives/label/radix-ng-primitives-label.ts"],"sourcesContent":["import { Directive, ElementRef, inject, Input, input } from '@angular/core';\n\nlet idIterator = 0;\n\n@Directive({\n    selector: 'label[LabelRoot]',\n    exportAs: 'LabelRoot',\n    standalone: true,\n    host: {\n        '[attr.id]': 'this.id',\n        '[attr.for]': 'htmlFor ? htmlFor() : null',\n        '(mousedown)': 'onMouseDown($event)'\n    }\n})\nexport class RdxLabelRootDirective {\n    @Input() id = `rdx-label-${idIterator++}`;\n\n    /**\n     * The id of the element the label is associated with.\n     * @default '-'\n     */\n    readonly htmlFor = input<string>('');\n\n    private readonly elementRef = inject(ElementRef<HTMLElement>);\n\n    // prevent text selection when double-clicking label\n    // The main problem with double-clicks in a web app is that\n    // you will have to create special code to handle this on touch enabled devices.\n    onMouseDown(event: MouseEvent): void {\n        const target = event.target as HTMLElement;\n\n        // only prevent text selection if clicking inside the label itself\n        if (['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {\n            return;\n        }\n\n        // prevent text selection when double-clicking label\n        if (\n            this.elementRef.nativeElement.contains(target) &&\n            !event.defaultPrevented &&\n            event.detail > 1\n        ) {\n            event.preventDefault();\n        }\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA,IAAI,UAAU,GAAG,CAAC,CAAC;MAYN,qBAAqB,CAAA;AAVlC,IAAA,WAAA,GAAA;AAWa,QAAA,IAAA,CAAA,EAAE,GAAG,CAAA,UAAA,EAAa,UAAU,EAAE,EAAE,CAAC;AAE1C;;;AAGG;AACM,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAS,EAAE,CAAC,CAAC;AAEpB,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,EAAC,UAAuB,EAAC,CAAC;AAsBjE,KAAA;;;;AAjBG,IAAA,WAAW,CAAC,KAAiB,EAAA;AACzB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;;AAG3C,QAAA,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE;YACpE,OAAO;SACV;;QAGD,IACI,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC;YAC9C,CAAC,KAAK,CAAC,gBAAgB;AACvB,YAAA,KAAK,CAAC,MAAM,GAAG,CAAC,EAClB;YACE,KAAK,CAAC,cAAc,EAAE,CAAC;SAC1B;KACJ;8GA9BQ,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,EAAA,UAAA,EAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,EAAA,4BAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAArB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAVjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,kBAAkB;AAC5B,oBAAA,QAAQ,EAAE,WAAW;AACrB,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACF,wBAAA,WAAW,EAAE,SAAS;AACtB,wBAAA,YAAY,EAAE,4BAA4B;AAC1C,wBAAA,aAAa,EAAE,qBAAqB;AACvC,qBAAA;AACJ,iBAAA,CAAA;8BAEY,EAAE,EAAA,CAAA;sBAAV,KAAK;;;ACfV;;AAEG;;;;"}

package/fesm2022/radix-ng-primitives-progress.mjs

@@ -1,46 +1,22 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Directive, numberAttribute, Input } from '@angular/core';
+import { InjectionToken, inject, numberAttribute, Directive, Input } from '@angular/core';
 
+let idIterator = 0;
+const MIN_PERCENT = 0;
+const DEFAULT_MAX = 100;
 const RdxProgressToken = new InjectionToken('RdxProgressDirective');
 function injectProgress() {
     return inject(RdxProgressToken);
 }
-
-class RdxProgressIndicatorDirective {
-    constructor() {
-        this.progress = injectProgress();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxProgressIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.3", type: RdxProgressIndicatorDirective, isStandalone: true, selector: "[rdxProgressIndicator]", host: { properties: { "attr.data-state": "progress.state", "attr.data-value": "progress.value", "attr.data-max": "progress.max" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxProgressIndicatorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxProgressIndicator]',
-                    standalone: true,
-                    host: {
-                        '[attr.data-state]': 'progress.state',
-                        '[attr.data-value]': 'progress.value',
-                        '[attr.data-max]': 'progress.max'
-                    }
-                }]
-        }] });
-
-class RdxProgressDirective {
+class RdxProgressRootDirective {
     constructor() {
+        this.id = `rdx-progress-bar-${idIterator++}`;
+        this.value = MIN_PERCENT;
         /**
-         * Define the progress value.
-         */
-        this.value = 0;
-        /**
-         * Define the progress max value.
          * @default 100
          */
-        this.max = 100;
-        /**
-         * Define a function that returns the progress value label.
-         */
-        this.valueLabel = (value, max) => `${Math.round((value / max) * 100)}%`;
+        this.max = DEFAULT_MAX;
+        this.valueLabel = (value, max) => this.defaultGetValueLabel(value, max);
     }
     /**
      * Get the state of the progress bar.
@@ -48,46 +24,76 @@ class RdxProgressDirective {
      * @internal
      */
     get state() {
-        return this.value == null
-            ? 'indeterminate'
-            : this.value === this.max
-                ? 'complete'
-                : 'loading';
+        return this.getProgressState(this.value, this.max);
+    }
+    getProgressState(value, maxValue) {
+        return value == null ? 'indeterminate' : value === maxValue ? 'complete' : 'loading';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxProgressDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.3", type: RdxProgressDirective, isStandalone: true, selector: "[rdxProgress]", inputs: { value: ["rdxProgressValue", "value", numberAttribute], max: ["rdxProgressMax", "max", numberAttribute], valueLabel: ["rdxProgressValueLabel", "valueLabel"] }, host: { attributes: { "role": "progressbar" }, properties: { "attr.aria-valuemax": "max", "attr.aria-valuemin": "0", "attr.aria-valuenow": "value", "attr.aria-valuetext": "valueLabel(value, max)", "attr.data-state": "state", "attr.data-value": "value", "attr.data-max": "max" } }, providers: [{ provide: RdxProgressToken, useExisting: RdxProgressDirective }], ngImport: i0 }); }
+    defaultGetValueLabel(value, max) {
+        return `${Math.round((value / max) * 100)}%`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: RdxProgressRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.4", type: RdxProgressRootDirective, isStandalone: true, selector: "div[ProgressRoot]", inputs: { id: "id", value: ["rdxValue", "value", numberAttribute], max: ["rdxMax", "max", numberAttribute], valueLabel: ["rdxValueLabel", "valueLabel"] }, host: { attributes: { "role": "progressbar", "tabindex": "-1" }, properties: { "attr.id": "id", "attr.aria-valuemax": "max", "attr.aria-valuemin": "0", "attr.aria-valuenow": "value", "attr.aria-valuetext": "valueLabel(value, max)", "attr.data-state": "state", "attr.data-value": "value", "attr.data-max": "max" } }, providers: [{ provide: RdxProgressToken, useExisting: RdxProgressRootDirective }], exportAs: ["ProgressRoot"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxProgressDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: RdxProgressRootDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxProgress]',
+                    selector: 'div[ProgressRoot]',
+                    exportAs: 'ProgressRoot',
                     standalone: true,
-                    providers: [{ provide: RdxProgressToken, useExisting: RdxProgressDirective }],
+                    providers: [{ provide: RdxProgressToken, useExisting: RdxProgressRootDirective }],
                     host: {
                         role: 'progressbar',
+                        '[attr.id]': 'id',
                         '[attr.aria-valuemax]': 'max',
                         '[attr.aria-valuemin]': '0',
                         '[attr.aria-valuenow]': 'value',
                         '[attr.aria-valuetext]': 'valueLabel(value, max)',
                         '[attr.data-state]': 'state',
                         '[attr.data-value]': 'value',
-                        '[attr.data-max]': 'max'
+                        '[attr.data-max]': 'max',
+                        // set tab index to -1 so screen readers will read the aria-label
+                        // Note: there is a known issue with JAWS that does not read progressbar aria labels on FireFox
+                        tabindex: '-1'
                     }
                 }]
-        }], propDecorators: { value: [{
+        }], propDecorators: { id: [{
+                type: Input
+            }], value: [{
                 type: Input,
-                args: [{ alias: 'rdxProgressValue', transform: numberAttribute }]
+                args: [{ alias: 'rdxValue', transform: numberAttribute }]
             }], max: [{
                 type: Input,
-                args: [{ alias: 'rdxProgressMax', transform: numberAttribute }]
+                args: [{ alias: 'rdxMax', transform: numberAttribute }]
             }], valueLabel: [{
                 type: Input,
-                args: ['rdxProgressValueLabel']
+                args: ['rdxValueLabel']
             }] } });
 
+class RdxProgressIndicatorDirective {
+    constructor() {
+        this._progress = injectProgress();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: RdxProgressIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.4", type: RdxProgressIndicatorDirective, isStandalone: true, selector: "div[ProgressIndicator]", host: { properties: { "attr.data-state": "_progress.state", "attr.data-value": "_progress.value", "attr.data-max": "_progress.max" } }, exportAs: ["ProgressIndicator"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: RdxProgressIndicatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[ProgressIndicator]',
+                    exportAs: 'ProgressIndicator',
+                    standalone: true,
+                    host: {
+                        '[attr.data-state]': '_progress.state',
+                        '[attr.data-value]': '_progress.value',
+                        '[attr.data-max]': '_progress.max'
+                    }
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { RdxProgressDirective, RdxProgressIndicatorDirective };
+export { RdxProgressIndicatorDirective, RdxProgressRootDirective, injectProgress };
 //# sourceMappingURL=radix-ng-primitives-progress.mjs.map

package/fesm2022/radix-ng-primitives-progress.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"radix-ng-primitives-progress.mjs","sources":["../../../packages/primitives/progress/src/progress.token.ts","../../../packages/primitives/progress/src/progress-indicator.directive.ts","../../../packages/primitives/progress/src/progress.directive.ts","../../../packages/primitives/progress/radix-ng-primitives-progress.ts"],"sourcesContent":["import { inject, InjectionToken } from '@angular/core';\n\nimport type { RdxProgressDirective } from './progress.directive';\n\nexport const RdxProgressToken = new InjectionToken<RdxProgressDirective>('RdxProgressDirective');\n\nexport function injectProgress(): RdxProgressDirective {\n    return inject(RdxProgressToken);\n}\n","import { Directive } from '@angular/core';\n\nimport { injectProgress } from './progress.token';\n\n@Directive({\n    selector: '[rdxProgressIndicator]',\n    standalone: true,\n    host: {\n        '[attr.data-state]': 'progress.state',\n        '[attr.data-value]': 'progress.value',\n        '[attr.data-max]': 'progress.max'\n    }\n})\nexport class RdxProgressIndicatorDirective {\n    protected readonly progress = injectProgress();\n}\n","import { Directive, Input, numberAttribute } from '@angular/core';\n\nimport { RdxProgressToken } from './progress.token';\n\n@Directive({\n    selector: '[rdxProgress]',\n    standalone: true,\n    providers: [{ provide: RdxProgressToken, useExisting: RdxProgressDirective }],\n    host: {\n        role: 'progressbar',\n        '[attr.aria-valuemax]': 'max',\n        '[attr.aria-valuemin]': '0',\n        '[attr.aria-valuenow]': 'value',\n        '[attr.aria-valuetext]': 'valueLabel(value, max)',\n        '[attr.data-state]': 'state',\n        '[attr.data-value]': 'value',\n        '[attr.data-max]': 'max'\n    }\n})\nexport class RdxProgressDirective {\n    /**\n     * Define the progress value.\n     */\n    @Input({ alias: 'rdxProgressValue', transform: numberAttribute }) value = 0;\n\n    /**\n     * Define the progress max value.\n     * @default 100\n     */\n    @Input({ alias: 'rdxProgressMax', transform: numberAttribute }) max = 100;\n\n    /**\n     * Define a function that returns the progress value label.\n     */\n    @Input('rdxProgressValueLabel') valueLabel: (value: number, max: number) => string = (\n        value,\n        max\n    ) => `${Math.round((value / max) * 100)}%`;\n\n    /**\n     * Get the state of the progress bar.\n     * @returns 'indeterminate' | 'loading' | 'complete'\n     * @internal\n     */\n    get state(): 'indeterminate' | 'loading' | 'complete' {\n        return this.value == null\n            ? 'indeterminate'\n            : this.value === this.max\n              ? 'complete'\n              : 'loading';\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"radix-ng-primitives-progress.mjs","sources":["../../../packages/primitives/progress/src/progress-root.directive.ts","../../../packages/primitives/progress/src/progress-indicator.directive.ts","../../../packages/primitives/progress/radix-ng-primitives-progress.ts"],"sourcesContent":["import { Directive, inject, InjectionToken, Input, numberAttribute } from '@angular/core';\n\nlet idIterator = 0;\n\nconst MIN_PERCENT = 0;\nconst DEFAULT_MAX = 100;\n\nconst RdxProgressToken = new InjectionToken<RdxProgressRootDirective>('RdxProgressDirective');\n\nexport function injectProgress(): RdxProgressRootDirective {\n    return inject(RdxProgressToken);\n}\n\nexport type ProgressState = 'indeterminate' | 'loading' | 'complete';\n\nexport interface ProgressProps {\n    value?: number | null | undefined;\n    max?: number;\n    getValueLabel?: string;\n}\n\n@Directive({\n    selector: 'div[ProgressRoot]',\n    exportAs: 'ProgressRoot',\n    standalone: true,\n    providers: [{ provide: RdxProgressToken, useExisting: RdxProgressRootDirective }],\n    host: {\n        role: 'progressbar',\n        '[attr.id]': 'id',\n        '[attr.aria-valuemax]': 'max',\n        '[attr.aria-valuemin]': '0',\n        '[attr.aria-valuenow]': 'value',\n        '[attr.aria-valuetext]': 'valueLabel(value, max)',\n        '[attr.data-state]': 'state',\n        '[attr.data-value]': 'value',\n        '[attr.data-max]': 'max',\n        // set tab index to -1 so screen readers will read the aria-label\n        // Note: there is a known issue with JAWS that does not read progressbar aria labels on FireFox\n        tabindex: '-1'\n    }\n})\nexport class RdxProgressRootDirective implements ProgressProps {\n    @Input() id = `rdx-progress-bar-${idIterator++}`;\n\n    @Input({ alias: 'rdxValue', transform: numberAttribute }) value = MIN_PERCENT;\n\n    /**\n     * @default 100\n     */\n    @Input({ alias: 'rdxMax', transform: numberAttribute }) max = DEFAULT_MAX;\n\n    @Input('rdxValueLabel') valueLabel: (value: number, max: number) => string = (value, max) =>\n        this.defaultGetValueLabel(value, max);\n\n    /**\n     * Get the state of the progress bar.\n     * @returns 'indeterminate' | 'loading' | 'complete'\n     * @internal\n     */\n    get state(): ProgressState {\n        return this.getProgressState(this.value, this.max);\n    }\n\n    private getProgressState(value: number | undefined | null, maxValue: number): ProgressState {\n        return value == null ? 'indeterminate' : value === maxValue ? 'complete' : 'loading';\n    }\n\n    private defaultGetValueLabel(value: number, max: number) {\n        return `${Math.round((value / max) * 100)}%`;\n    }\n}\n","import { Directive } from '@angular/core';\n\nimport { injectProgress } from './progress-root.directive';\n\n@Directive({\n    selector: 'div[ProgressIndicator]',\n    exportAs: 'ProgressIndicator',\n    standalone: true,\n    host: {\n        '[attr.data-state]': '_progress.state',\n        '[attr.data-value]': '_progress.value',\n        '[attr.data-max]': '_progress.max'\n    }\n})\nexport class RdxProgressIndicatorDirective {\n    readonly _progress = injectProgress();\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/radix-ng-primitives-radio.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, EventEmitter, booleanAttribute, Directive, Input, Output, HostListener } from '@angular/core';
+import { InjectionToken, inject, EventEmitter, booleanAttribute, Directive, Input, Output } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from '@radix-ng/primitives/roving-focus';
 import { RdxRovingFocusGroupDirective, RdxRovingFocusItemDirective } from '@radix-ng/primitives/roving-focus';
@@ -8,22 +8,21 @@ const RdxRadioGroupToken = new InjectionToken('RdxRadioGroupToken');
 function injectRadioGroup() {
     return inject(RdxRadioGroupToken);
 }
-
 class RdxRadioGroupDirective {
     constructor() {
-        /**
-         * Whether the radio group is disabled.
-         */
         this.disabled = false;
         /**
-         * The orientation of the radio group.
-         * @default 'horizontal'
+         * The orientation of the radio group only vertical.
+         * Horizontal radio buttons can sometimes be challenging to scan and localize.
+         * The horizontal arrangement of radio buttons may also lead to difficulties in determining which
+         * label corresponds to which button: whether the label is above or below the button.
+         * @default 'vertical'
          */
-        this.orientation = 'horizontal';
+        this._orientation = 'vertical';
         /**
-         * Event emitted when the value of the radio group changes.
+         * Event handler called when the value changes.
          */
-        this.valueChange = new EventEmitter();
+        this.onValueChange = new EventEmitter();
     }
     /**
      * Select a radio item.
@@ -31,7 +30,7 @@ class RdxRadioGroupDirective {
      */
     select(value) {
         this.value = value;
-        this.valueChange.emit(value);
+        this.onValueChange.emit(value);
         this.onChange?.(value);
     }
     /**
@@ -62,22 +61,22 @@ class RdxRadioGroupDirective {
         this.disabled = isDisabled;
     }
     /**
-     * When focus leaves the radio group, mark it as touched.
-     * @internal
+     * When focus leaves the radio group.
      */
-    onFocusout() {
+    _onFocusout() {
         this.onTouched?.();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxRadioGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.3", type: RdxRadioGroupDirective, isStandalone: true, selector: "[rdxRadioGroup]", inputs: { value: ["rdxRadioGroupValue", "value"], disabled: ["rdxRadioGroupDisabled", "disabled", booleanAttribute], orientation: ["rdxRadioGroupOrientation", "orientation"] }, outputs: { valueChange: "rdxRadioGroupValueChange" }, host: { attributes: { "role": "radiogroup" }, listeners: { "focusout": "onFocusout()" }, properties: { "attr.aria-orientation": "orientation", "attr.data-disabled": "disabled ? \"\" : null" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: RdxRadioGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.4", type: RdxRadioGroupDirective, isStandalone: true, selector: "div[RadioRoot]", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute], dir: "dir" }, outputs: { onValueChange: "onValueChange" }, host: { attributes: { "role": "radiogroup" }, listeners: { "focusout": "_onFocusout()" }, properties: { "attr.aria-orientation": "_orientation", "attr.data-disabled": "disabled ? \"\" : null", "attr.dir": "dir" } }, providers: [
             { provide: RdxRadioGroupToken, useExisting: RdxRadioGroupDirective },
             { provide: NG_VALUE_ACCESSOR, useExisting: RdxRadioGroupDirective, multi: true }
-        ], hostDirectives: [{ directive: i1.RdxRovingFocusGroupDirective }], ngImport: i0 }); }
+        ], exportAs: ["RadioRoot"], hostDirectives: [{ directive: i1.RdxRovingFocusGroupDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxRadioGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: RdxRadioGroupDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxRadioGroup]',
+                    selector: 'div[RadioRoot]',
+                    exportAs: 'RadioRoot',
                     standalone: true,
                     providers: [
                         { provide: RdxRadioGroupToken, useExisting: RdxRadioGroupDirective },
@@ -86,133 +85,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                     hostDirectives: [RdxRovingFocusGroupDirective],
                     host: {
                         role: 'radiogroup',
-                        '[attr.aria-orientation]': 'orientation',
-                        '[attr.data-disabled]': 'disabled ? "" : null'
+                        '[attr.aria-orientation]': '_orientation',
+                        '[attr.data-disabled]': 'disabled ? "" : null',
+                        '[attr.dir]': 'dir',
+                        '(focusout)': '_onFocusout()'
                     }
                 }]
         }], propDecorators: { value: [{
-                type: Input,
-                args: ['rdxRadioGroupValue']
+                type: Input
             }], disabled: [{
                 type: Input,
-                args: [{
-                        alias: 'rdxRadioGroupDisabled',
-                        transform: booleanAttribute
-                    }]
-            }], orientation: [{
-                type: Input,
-                args: ['rdxRadioGroupOrientation']
-            }], valueChange: [{
-                type: Output,
-                args: ['rdxRadioGroupValueChange']
-            }], onFocusout: [{
-                type: HostListener,
-                args: ['focusout']
+                args: [{ transform: booleanAttribute }]
+            }], dir: [{
+                type: Input
+            }], onValueChange: [{
+                type: Output
             }] } });
 
 const RdxRadioItemToken = new InjectionToken('RadioItemToken');
 function injectRadioItem() {
     return inject(RdxRadioItemToken);
 }
-
-class RdxRadioIndicatorDirective {
-    constructor() {
-        /**
-         * Access the radio group.
-         */
-        this.radioGroup = injectRadioGroup();
-        /**
-         * Access the radio group item.
-         */
-        this.radioItem = injectRadioItem();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxRadioIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.3", type: RdxRadioIndicatorDirective, isStandalone: true, selector: "[rdxRadioIndicator]", host: { properties: { "attr.data-state": "radioGroup.value === this.radioItem.value ? \"checked\" : \"unchecked\"", "attr.data-disabled": "radioItem.disabled ? \"\" : null" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxRadioIndicatorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxRadioIndicator]',
-                    standalone: true,
-                    host: {
-                        '[attr.data-state]': 'radioGroup.value === this.radioItem.value ? "checked" : "unchecked"',
-                        '[attr.data-disabled]': 'radioItem.disabled ? "" : null'
-                    }
-                }]
-        }] });
-
+// Increasing integer for generating unique ids for radio components.
+let nextUniqueId = 0;
 class RdxRadioItemDirective {
     constructor() {
-        /**
-         * Access the radio group.
-         */
         this.radioGroup = injectRadioGroup();
-        /**
-         * Whether the radio item is disabled.
-         * @default false
-         */
+        this.id = `rdx-radio-${++nextUniqueId}`;
         this.disabled = false;
     }
-    /**
-     * Handle keydown events.
-     * @param event The keydown event.
-     * @internal
-     */
-    onKeydown(event) {
+    _onKeydown(event) {
         // According to WAI ARIA, radio groups don't activate items on enter keypress
         if (event.key === 'Enter') {
             event.preventDefault();
         }
     }
-    /**
-     * When the item receives focus, select it.
-     * @internal
-     */
-    onFocus() {
+    _onFocus() {
         this.radioGroup.select(this.value);
     }
-    /**
-     * When the item receives a click, select it.
-     * @internal
-     */
-    onClick() {
+    _onClick() {
+        console.log('click');
         this.radioGroup.select(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxRadioItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.3", type: RdxRadioItemDirective, isStandalone: true, selector: "button[rdxRadioItem]", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, host: { attributes: { "type": "button", "role": "radio" }, listeners: { "keydown": "onKeydown($event)", "focus": "onFocus()", "click": "onClick()" }, properties: { "attr.aria-checked": "radioGroup.value === value ? \"true\" : \"false\"", "attr.data-disabled": "disabled ? \"\" : null", "attr.data-state": "radioGroup.value === value ? \"checked\" : \"unchecked\"" } }, providers: [{ provide: RdxRadioItemToken, useExisting: RdxRadioItemDirective }], hostDirectives: [{ directive: i1.RdxRovingFocusItemDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: RdxRadioItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.4", type: RdxRadioItemDirective, isStandalone: true, selector: "[RadioItem]", inputs: { id: "id", value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, host: { attributes: { "type": "button", "role": "radio" }, listeners: { "focus": "_onFocus()", "click": "_onClick()", "keydown": "_onKeydown($event)" }, properties: { "attr.id": "id", "attr.aria-checked": "radioGroup.value === value ? \"true\" : \"false\"", "attr.data-disabled": "disabled ? \"\" : null", "attr.data-state": "radioGroup.value === value ? \"checked\" : \"unchecked\"" } }, providers: [{ provide: RdxRadioItemToken, useExisting: RdxRadioItemDirective }], exportAs: ["RadioItem"], hostDirectives: [{ directive: i1.RdxRovingFocusItemDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxRadioItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: RdxRadioItemDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'button[rdxRadioItem]',
+                    selector: '[RadioItem]',
+                    exportAs: 'RadioItem',
                     standalone: true,
                     hostDirectives: [RdxRovingFocusItemDirective],
                     providers: [{ provide: RdxRadioItemToken, useExisting: RdxRadioItemDirective }],
                     host: {
                         type: 'button',
                         role: 'radio',
+                        '[attr.id]': 'id',
                         '[attr.aria-checked]': 'radioGroup.value === value ? "true" : "false"',
                         '[attr.data-disabled]': 'disabled ? "" : null',
-                        '[attr.data-state]': 'radioGroup.value === value ? "checked" : "unchecked"'
+                        '[attr.data-state]': 'radioGroup.value === value ? "checked" : "unchecked"',
+                        '(focus)': '_onFocus()',
+                        '(click)': '_onClick()',
+                        '(keydown)': '_onKeydown($event)'
                     }
                 }]
-        }], propDecorators: { value: [{
+        }], propDecorators: { id: [{
+                type: Input
+            }], value: [{
                 type: Input,
                 args: [{ required: true }]
             }], disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], onKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], onFocus: [{
-                type: HostListener,
-                args: ['focus']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click']
             }] } });
 
+class RdxRadioIndicatorDirective {
+    constructor() {
+        this.radioGroup = injectRadioGroup();
+        this.radioItem = injectRadioItem();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: RdxRadioIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.4", type: RdxRadioIndicatorDirective, isStandalone: true, selector: "[RadioIndicator]", host: { properties: { "attr.data-state": "radioGroup.value === this.radioItem.value ? \"checked\" : \"unchecked\"", "attr.data-disabled": "radioItem.disabled ? \"\" : null" } }, exportAs: ["RadioIndicator"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: RdxRadioIndicatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[RadioIndicator]',
+                    exportAs: 'RadioIndicator',
+                    standalone: true,
+                    host: {
+                        '[attr.data-state]': 'radioGroup.value === this.radioItem.value ? "checked" : "unchecked"',
+                        '[attr.data-disabled]': 'radioItem.disabled ? "" : null'
+                    }
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */