@radix-ng/primitives 0.1.0 → 0.1.1

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

@@ -0,0 +1,166 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, EventEmitter, booleanAttribute, Directive, Input, Output, HostListener } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+const CheckboxToken = new InjectionToken('CheckboxToken');
+function injectCheckbox() {
+    return inject(CheckboxToken);
+}
+
+class CheckboxDirective {
+    constructor() {
+        /**
+         * Defines whether the checkbox is checked.
+         */
+        this.checked = false;
+        /**
+         * Defines whether the checkbox is indeterminate.
+         */
+        this.indeterminate = false;
+        /**
+         * Defines whether the checkbox is disabled.
+         */
+        this.disabled = false;
+        /**
+         * Event emitted when the checkbox checked state changes.
+         */
+        this.checkedChange = new EventEmitter();
+        /**
+         * Event emitted when the indeterminate state changes.
+         */
+        this.indeterminateChange = new EventEmitter();
+    }
+    /**
+     * Determine the state
+     */
+    get state() {
+        if (this.indeterminate) {
+            return 'indeterminate';
+        }
+        return this.checked ? 'checked' : 'unchecked';
+    }
+    onKeydown(event) {
+        // According to WAI ARIA, Checkboxes don't activate on enter keypress
+        if (event.key === 'Enter') {
+            event.preventDefault();
+        }
+    }
+    onClick() {
+        this.checked = this.indeterminate ? true : !this.checked;
+        this.checkedChange.emit(this.checked);
+        this.onChange?.(this.checked);
+        // if the checkbox was indeterminate, it isn't anymore
+        if (this.indeterminate) {
+            this.indeterminate = false;
+            this.indeterminateChange.emit(this.indeterminate);
+        }
+    }
+    onBlur() {
+        this.onTouched?.();
+    }
+    /**
+     * Sets the checked state of the checkbox.
+     * @param checked The checked state of the checkbox.
+     * @internal
+     */
+    writeValue(checked) {
+        this.checked = checked;
+    }
+    /**
+     * Registers a callback function that should be called when the checkbox checked state changes.
+     * @param fn The callback function.
+     * @internal
+     */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /**
+     * Registers a callback function that should be called when the checkbox is blurred.
+     * @param fn The callback function.
+     * @internal
+     */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * Sets the disabled state of the checkbox.
+     * @param isDisabled The disabled state of the checkbox.
+     * @internal
+     */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CheckboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.3", type: CheckboxDirective, isStandalone: true, selector: "button[rdxCheckbox]", inputs: { checked: ["checked", "checked", booleanAttribute], indeterminate: ["indeterminate", "indeterminate", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { checkedChange: "checkedChange", indeterminateChange: "indeterminateChange" }, host: { attributes: { "type": "button", "role": "checkbox" }, listeners: { "keydown": "onKeydown($event)", "click": "onClick()", "blur": "onBlur()" }, properties: { "disabled": "disabled", "attr.aria-checked": "indeterminate ? \"mixed\" : checked", "attr.data-disabled": "disabled ? \"\" : null", "attr.data-state": "state" } }, providers: [
+            { provide: CheckboxToken, useExisting: CheckboxDirective },
+            { provide: NG_VALUE_ACCESSOR, useExisting: CheckboxDirective, multi: true }
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CheckboxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[rdxCheckbox]',
+                    standalone: true,
+                    providers: [
+                        { provide: CheckboxToken, useExisting: CheckboxDirective },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: CheckboxDirective, multi: true }
+                    ],
+                    host: {
+                        type: 'button',
+                        role: 'checkbox',
+                        '[disabled]': 'disabled',
+                        '[attr.aria-checked]': 'indeterminate ? "mixed" : checked',
+                        '[attr.data-disabled]': 'disabled ? "" : null',
+                        '[attr.data-state]': 'state'
+                    }
+                }]
+        }], propDecorators: { checked: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], indeterminate: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], checkedChange: [{
+                type: Output
+            }], indeterminateChange: [{
+                type: Output
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
+class CheckboxIndicatorDirective {
+    constructor() {
+        this.checkbox = injectCheckbox();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CheckboxIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.3", type: CheckboxIndicatorDirective, isStandalone: true, selector: "[rdxCheckboxIndicator]", host: { properties: { "style.pointer-events": "\"none\"", "attr.data-state": "checkbox.state", "attr.data-disabled": "checkbox.disabled ? \"\" : null" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CheckboxIndicatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxCheckboxIndicator]',
+                    standalone: true,
+                    host: {
+                        '[style.pointer-events]': '"none"',
+                        '[attr.data-state]': 'checkbox.state',
+                        '[attr.data-disabled]': 'checkbox.disabled ? "" : null'
+                    }
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CheckboxDirective, CheckboxIndicatorDirective, CheckboxToken, injectCheckbox };
+//# sourceMappingURL=radix-ng-primitives-checkbox.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radix-ng-primitives-checkbox.mjs","sources":["../../../packages/primitives/checkbox/src/checkbox.token.ts","../../../packages/primitives/checkbox/src/checkbox.directive.ts","../../../packages/primitives/checkbox/src/checkbox-indicator.directive.ts","../../../packages/primitives/checkbox/radix-ng-primitives-checkbox.ts"],"sourcesContent":["import { InjectionToken, inject } from '@angular/core';\nimport type { CheckboxDirective } from './checkbox.directive';\n\nexport const CheckboxToken = new InjectionToken<CheckboxDirective>('CheckboxToken');\n\nexport function injectCheckbox(): CheckboxDirective {\n    return inject(CheckboxToken);\n}\n","import {\n    Directive,\n    EventEmitter,\n    HostListener,\n    Input,\n    Output,\n    booleanAttribute\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { CheckboxToken } from './checkbox.token';\n\n@Directive({\n    selector: 'button[rdxCheckbox]',\n    standalone: true,\n    providers: [\n        { provide: CheckboxToken, useExisting: CheckboxDirective },\n        { provide: NG_VALUE_ACCESSOR, useExisting: CheckboxDirective, multi: true }\n    ],\n    host: {\n        type: 'button',\n        role: 'checkbox',\n        '[disabled]': 'disabled',\n        '[attr.aria-checked]': 'indeterminate ? \"mixed\" : checked',\n        '[attr.data-disabled]': 'disabled ? \"\" : null',\n        '[attr.data-state]': 'state'\n    }\n})\nexport class CheckboxDirective implements ControlValueAccessor {\n    /**\n     * Defines whether the checkbox is checked.\n     */\n    @Input({ transform: booleanAttribute }) checked = false;\n\n    /**\n     * Defines whether the checkbox is indeterminate.\n     */\n    @Input({ transform: booleanAttribute })\n    indeterminate = false;\n\n    /**\n     * Defines whether the checkbox is disabled.\n     */\n    @Input({ transform: booleanAttribute }) disabled = false;\n\n    /**\n     * Event emitted when the checkbox checked state changes.\n     */\n    @Output() readonly checkedChange = new EventEmitter<boolean>();\n\n    /**\n     * Event emitted when the indeterminate state changes.\n     */\n    @Output() readonly indeterminateChange = new EventEmitter<boolean>();\n\n    /**\n     * Determine the state\n     */\n    get state(): 'checked' | 'unchecked' | 'indeterminate' {\n        if (this.indeterminate) {\n            return 'indeterminate';\n        }\n        return this.checked ? 'checked' : 'unchecked';\n    }\n\n    /**\n     * Store the callback function that should be called when the checkbox checked state changes.\n     * @internal\n     */\n    private onChange?: (checked: boolean) => void;\n\n    /**\n     * Store the callback function that should be called when the checkbox is blurred.\n     * @internal\n     */\n    private onTouched?: () => void;\n\n    @HostListener('keydown', ['$event'])\n    onKeydown(event: KeyboardEvent): void {\n        // According to WAI ARIA, Checkboxes don't activate on enter keypress\n        if (event.key === 'Enter') {\n            event.preventDefault();\n        }\n    }\n\n    @HostListener('click')\n    onClick(): void {\n        this.checked = this.indeterminate ? true : !this.checked;\n        this.checkedChange.emit(this.checked);\n        this.onChange?.(this.checked);\n\n        // if the checkbox was indeterminate, it isn't anymore\n        if (this.indeterminate) {\n            this.indeterminate = false;\n            this.indeterminateChange.emit(this.indeterminate);\n        }\n    }\n\n    @HostListener('blur')\n    onBlur(): void {\n        this.onTouched?.();\n    }\n\n    /**\n     * Sets the checked state of the checkbox.\n     * @param checked The checked state of the checkbox.\n     * @internal\n     */\n    writeValue(checked: boolean): void {\n        this.checked = checked;\n    }\n\n    /**\n     * Registers a callback function that should be called when the checkbox checked state changes.\n     * @param fn The callback function.\n     * @internal\n     */\n    registerOnChange(fn: (checked: boolean) => void): void {\n        this.onChange = fn;\n    }\n\n    /**\n     * Registers a callback function that should be called when the checkbox is blurred.\n     * @param fn The callback function.\n     * @internal\n     */\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    /**\n     * Sets the disabled state of the checkbox.\n     * @param isDisabled The disabled state of the checkbox.\n     * @internal\n     */\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n    }\n}\n","import { Directive } from '@angular/core';\nimport { injectCheckbox } from './checkbox.token';\n\n@Directive({\n    selector: '[rdxCheckboxIndicator]',\n    standalone: true,\n    host: {\n        '[style.pointer-events]': '\"none\"',\n        '[attr.data-state]': 'checkbox.state',\n        '[attr.data-disabled]': 'checkbox.disabled ? \"\" : null'\n    }\n})\nexport class CheckboxIndicatorDirective {\n    protected readonly checkbox = injectCheckbox();\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAGa,aAAa,GAAG,IAAI,cAAc,CAAoB,eAAe,EAAE;SAEpE,cAAc,GAAA;AAC1B,IAAA,OAAO,MAAM,CAAC,aAAa,CAAC,CAAC;AACjC;;MCoBa,iBAAiB,CAAA;AAhB9B,IAAA,WAAA,GAAA;AAiBI;;AAEG;QACqC,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;AAExD;;AAEG;QAEH,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;AAEtB;;AAEG;QACqC,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;AAEzD;;AAEG;AACgB,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,YAAY,EAAW,CAAC;AAE/D;;AAEG;AACgB,QAAA,IAAA,CAAA,mBAAmB,GAAG,IAAI,YAAY,EAAW,CAAC;AAqFxE,KAAA;AAnFG;;AAEG;AACH,IAAA,IAAI,KAAK,GAAA;AACL,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACpB,YAAA,OAAO,eAAe,CAAC;SAC1B;QACD,OAAO,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;KACjD;AAeD,IAAA,SAAS,CAAC,KAAoB,EAAA;;AAE1B,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACvB,KAAK,CAAC,cAAc,EAAE,CAAC;SAC1B;KACJ;IAGD,OAAO,GAAA;AACH,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QACzD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACtC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;;AAG9B,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACpB,YAAA,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SACrD;KACJ;IAGD,MAAM,GAAA;AACF,QAAA,IAAI,CAAC,SAAS,IAAI,CAAC;KACtB;AAED;;;;AAIG;AACH,IAAA,UAAU,CAAC,OAAgB,EAAA;AACvB,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;KAC1B;AAED;;;;AAIG;AACH,IAAA,gBAAgB,CAAC,EAA8B,EAAA;AAC3C,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;KACtB;AAED;;;;AAIG;AACH,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC5B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;KACvB;AAED;;;;AAIG;AACH,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAChC,QAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,CAAC;KAC9B;8GA7GQ,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,iGAIN,gBAAgB,CAAA,EAAA,aAAA,EAAA,CAAA,eAAA,EAAA,eAAA,EAKhB,gBAAgB,CAAA,EAAA,QAAA,EAAA,CAAA,UAAA,EAAA,UAAA,EAMhB,gBAAgB,CA5BzB,EAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,mBAAA,EAAA,qBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,UAAA,EAAA,EAAA,SAAA,EAAA,EAAA,SAAA,EAAA,mBAAA,EAAA,OAAA,EAAA,WAAA,EAAA,MAAA,EAAA,UAAA,EAAA,EAAA,UAAA,EAAA,EAAA,UAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,qCAAA,EAAA,oBAAA,EAAA,wBAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,EAAA,EAAA,SAAA,EAAA;AACP,YAAA,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,iBAAiB,EAAE;YAC1D,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,iBAAiB,EAAE,KAAK,EAAE,IAAI,EAAE;AAC9E,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAUQ,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAhB7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,qBAAqB;AAC/B,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,SAAS,EAAE;AACP,wBAAA,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,mBAAmB,EAAE;wBAC1D,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,mBAAmB,EAAE,KAAK,EAAE,IAAI,EAAE;AAC9E,qBAAA;AACD,oBAAA,IAAI,EAAE;AACF,wBAAA,IAAI,EAAE,QAAQ;AACd,wBAAA,IAAI,EAAE,UAAU;AAChB,wBAAA,YAAY,EAAE,UAAU;AACxB,wBAAA,qBAAqB,EAAE,mCAAmC;AAC1D,wBAAA,sBAAsB,EAAE,sBAAsB;AAC9C,wBAAA,mBAAmB,EAAE,OAAO;AAC/B,qBAAA;AACJ,iBAAA,CAAA;8BAK2C,OAAO,EAAA,CAAA;sBAA9C,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;gBAMtC,aAAa,EAAA,CAAA;sBADZ,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;gBAME,QAAQ,EAAA,CAAA;sBAA/C,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;gBAKnB,aAAa,EAAA,CAAA;sBAA/B,MAAM;gBAKY,mBAAmB,EAAA,CAAA;sBAArC,MAAM;gBAyBP,SAAS,EAAA,CAAA;sBADR,YAAY;uBAAC,SAAS,EAAE,CAAC,QAAQ,CAAC,CAAA;gBASnC,OAAO,EAAA,CAAA;sBADN,YAAY;uBAAC,OAAO,CAAA;gBAcrB,MAAM,EAAA,CAAA;sBADL,YAAY;uBAAC,MAAM,CAAA;;;MCrFX,0BAA0B,CAAA;AATvC,IAAA,WAAA,GAAA;QAUuB,IAAQ,CAAA,QAAA,GAAG,cAAc,EAAE,CAAC;AAClD,KAAA;8GAFY,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAA1B,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,sBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,oBAAA,EAAA,iCAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAA1B,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBATtC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,wBAAwB;AAClC,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACF,wBAAA,wBAAwB,EAAE,QAAQ;AAClC,wBAAA,mBAAmB,EAAE,gBAAgB;AACrC,wBAAA,sBAAsB,EAAE,+BAA+B;AAC1D,qBAAA;AACJ,iBAAA,CAAA;;;ACXD;;AAEG;;;;"}

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

@@ -0,0 +1,53 @@
+import * as i0 from '@angular/core';
+import { Directive, Optional, Input, HostListener } from '@angular/core';
+
+class LabelDirective {
+    constructor(el) {
+        this.el = el;
+        /**
+         * The id of the element the label is associated with.
+         * @default '-'
+         */
+        this.htmlFor = '';
+    }
+    // prevent text selection when double-clicking label
+    // The main problem with double-clicks in a web app is that
+    // you will have to create special code to handle this on touch enabled devices.
+    onMouseDown(event) {
+        const target = event.target;
+        // only prevent text selection if clicking inside the label itself
+        if (['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
+            return;
+        }
+        // prevent text selection when double-clicking label
+        if (this.el.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: LabelDirective, deps: [{ token: i0.ElementRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.3", type: LabelDirective, isStandalone: true, selector: "label[rdxLabel]", inputs: { htmlFor: "htmlFor" }, host: { listeners: { "mousedown": "onMouseDown($event)" }, properties: { "attr.for": "htmlFor ? htmlFor : null" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: LabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'label[rdxLabel]',
+                    standalone: true,
+                    host: {
+                        '[attr.for]': 'htmlFor ? htmlFor : null'
+                    }
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { htmlFor: [{
+                type: Input
+            }], onMouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LabelDirective };
+//# sourceMappingURL=radix-ng-primitives-label.mjs.map

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

@@ -0,0 +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 } from '@angular/core';\n\n@Directive({\n    selector: 'label[rdxLabel]',\n    standalone: true,\n    host: {\n        '[attr.for]': 'htmlFor ? htmlFor : null'\n    }\n})\nexport class LabelDirective {\n    /**\n     * The id of the element the label is associated with.\n     * @default '-'\n     */\n    @Input() htmlFor = '';\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":";;;MASa,cAAc,CAAA;AAOvB,IAAA,WAAA,CAAgC,EAAc,EAAA;QAAd,IAAE,CAAA,EAAA,GAAF,EAAE,CAAY;AAN9C;;;AAGG;QACM,IAAO,CAAA,OAAA,GAAG,EAAE,CAAC;KAE4B;;;;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;8GAzBQ,cAAc,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;kGAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,EAAA,UAAA,EAAA,EAAA,UAAA,EAAA,0BAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACF,wBAAA,YAAY,EAAE,0BAA0B;AAC3C,qBAAA;AACJ,iBAAA,CAAA;;0BAQgB,QAAQ;yCAFZ,OAAO,EAAA,CAAA;sBAAf,KAAK;gBAQN,WAAW,EAAA,CAAA;sBADV,YAAY;uBAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,CAAA;;;ACrBzC;;AAEG;;;;"}

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

@@ -0,0 +1,93 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Directive, numberAttribute, Input } from '@angular/core';
+
+const ProgressToken = new InjectionToken('ProgressDirective');
+function injectProgress() {
+    return inject(ProgressToken);
+}
+
+class ProgressIndicatorDirective {
+    constructor() {
+        this.progress = injectProgress();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ProgressIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.3", type: ProgressIndicatorDirective, 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: ProgressIndicatorDirective, 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 ProgressDirective {
+    constructor() {
+        /**
+         * 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)}%`;
+    }
+    /**
+     * Get the state of the progress bar.
+     * @returns 'indeterminate' | 'loading' | 'complete'
+     * @internal
+     */
+    get state() {
+        return this.value == null
+            ? 'indeterminate'
+            : this.value === this.max
+                ? 'complete'
+                : 'loading';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ProgressDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.3", type: ProgressDirective, 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: ProgressToken, useExisting: ProgressDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ProgressDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxProgress]',
+                    standalone: true,
+                    providers: [{ provide: ProgressToken, useExisting: ProgressDirective }],
+                    host: {
+                        role: 'progressbar',
+                        '[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'
+                    }
+                }]
+        }], propDecorators: { value: [{
+                type: Input,
+                args: [{ alias: 'rdxProgressValue', transform: numberAttribute }]
+            }], max: [{
+                type: Input,
+                args: [{ alias: 'rdxProgressMax', transform: numberAttribute }]
+            }], valueLabel: [{
+                type: Input,
+                args: ['rdxProgressValueLabel']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ProgressDirective, ProgressIndicatorDirective };
+//# sourceMappingURL=radix-ng-primitives-progress.mjs.map

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

@@ -0,0 +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 { InjectionToken, inject } from '@angular/core';\nimport type { ProgressDirective } from './progress.directive';\n\nexport const ProgressToken = new InjectionToken<ProgressDirective>('ProgressDirective');\n\nexport function injectProgress(): ProgressDirective {\n    return inject(ProgressToken);\n}\n","import { Directive } from '@angular/core';\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 ProgressIndicatorDirective {\n    protected readonly progress = injectProgress();\n}\n","import { Directive, Input, numberAttribute } from '@angular/core';\nimport { ProgressToken } from './progress.token';\n\n@Directive({\n    selector: '[rdxProgress]',\n    standalone: true,\n    providers: [{ provide: ProgressToken, useExisting: ProgressDirective }],\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 ProgressDirective {\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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"}

package/fesm2022/radix-ng-primitives-roving-focus.mjs

@@ -0,0 +1,220 @@
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, DestroyRef, QueryList, booleanAttribute, Directive, Input, ElementRef, ChangeDetectorRef, numberAttribute, HostBinding, HostListener } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { filter } from 'rxjs';
+
+const RovingFocusGroupToken = new InjectionToken('RovingFocusToken');
+/**
+ * Inject the roving focus directive instance.
+ */
+function injectRovingFocusGroup() {
+    return inject(RovingFocusGroupToken);
+}
+
+class RovingFocusGroupDirective {
+    constructor() {
+        this.directionality = inject(Directionality);
+        this.destroyRef = inject(DestroyRef);
+        /**
+         * Create a query list of all the roving focus items.
+         * We don't use ContentChildren as dynamically added items may not be in the correct order.
+         */
+        this.items = new QueryList();
+        /**
+         * Create the focus key manager instance.
+         * @internal
+         */
+        this.keyManager = new FocusKeyManager(this.items);
+        /**
+         * Determine the orientation of the roving focus group.
+         * @default vertical
+         */
+        this.orientation = 'vertical';
+        /**
+         * Determine if focus should wrap when the end or beginning is reached.
+         * @default true
+         */
+        this.wrap = true;
+    }
+    ngOnInit() {
+        this.keyManager.withWrap(this.wrap);
+        this.setOrientation(this.orientation);
+        // update the key manager orientation if the document direction changes
+        this.directionality.change
+            .pipe(filter(() => this.orientation === 'horizontal'), takeUntilDestroyed(this.destroyRef))
+            .subscribe((direction) => this.keyManager.withHorizontalOrientation(direction));
+    }
+    ngOnChanges(changes) {
+        if ('orientation' in changes) {
+            this.setOrientation(this.orientation);
+        }
+        if ('wrap' in changes) {
+            this.keyManager.withWrap(this.wrap);
+        }
+    }
+    ngOnDestroy() {
+        this.keyManager.destroy();
+    }
+    /**
+     * Register a roving focus item.
+     * @param item The roving focus item to register.
+     */
+    register(item) {
+        // add the item to the query list by sort the items based on their order
+        this.items.reset([...this.items.toArray(), item].sort((a, b) => a.order - b.order));
+        // if this is the first item, make it the active item
+        if (this.items.length === 1) {
+            this.keyManager.updateActiveItem(item);
+        }
+    }
+    /**
+     * Unregister a roving focus item.
+     * @param item The roving focus item to unregister.
+     */
+    unregister(item) {
+        // determine if the item being removed is the active item
+        const isActive = this.keyManager.activeItem === item;
+        // remove the item from the query list
+        this.items.reset(this.items.toArray().filter((i) => i !== item));
+        // if the item being removed is the active item, make the first item the active item
+        if (isActive) {
+            this.keyManager.updateActiveItem(0);
+        }
+    }
+    /**
+     * Handle key events on the roving focus items.
+     * @param event The key event.
+     * @internal
+     */
+    onKeydown(event) {
+        this.keyManager.onKeydown(event);
+    }
+    /**
+     * Set the orientation of the roving focus group.
+     * @param orientation The orientation of the roving focus group.
+     */
+    setOrientation(orientation) {
+        this.orientation = orientation;
+        if (orientation === 'horizontal') {
+            this.keyManager.withHorizontalOrientation(this.directionality.value);
+        }
+        else {
+            this.keyManager.withVerticalOrientation();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RovingFocusGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.3", type: RovingFocusGroupDirective, isStandalone: true, selector: "[rdxRovingFocusGroup]", inputs: { orientation: "orientation", wrap: ["wrap", "wrap", booleanAttribute] }, providers: [{ provide: RovingFocusGroupToken, useExisting: RovingFocusGroupDirective }], usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RovingFocusGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxRovingFocusGroup]',
+                    standalone: true,
+                    providers: [{ provide: RovingFocusGroupToken, useExisting: RovingFocusGroupDirective }]
+                }]
+        }], propDecorators: { orientation: [{
+                type: Input
+            }], wrap: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+const RovingFocusItemToken = new InjectionToken('RovingFocusItemToken');
+function injectRovingFocusItem() {
+    return inject(RovingFocusItemToken);
+}
+
+class RovingFocusItemDirective {
+    constructor() {
+        /**
+         * Access the group the roving focus item belongs to.
+         */
+        this.group = injectRovingFocusGroup();
+        /**
+         * Access the element reference of the roving focus item.
+         */
+        this.elementRef = inject((ElementRef));
+        /**
+         * Access the destroyRef
+         */
+        this.destroyRef = inject(DestroyRef);
+        /**
+         * Access the change detector ref
+         */
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        /**
+         * Define the order of the roving focus item in the group.
+         */
+        this.order = 0;
+        /**
+         * Define if the item is disabled.
+         */
+        this.disabled = false;
+    }
+    /**
+     * Derive the tabindex of the roving focus item.
+     * @internal
+     */
+    get tabindex() {
+        return this.group.keyManager.activeItem === this ? 0 : -1;
+    }
+    ngOnInit() {
+        // register the roving focus item with the group
+        this.group.register(this);
+        // listen for changes to the active item and run change detection
+        this.group.keyManager.change
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.changeDetectorRef.markForCheck());
+    }
+    ngOnDestroy() {
+        // unregister the roving focus item with the group
+        this.group.unregister(this);
+    }
+    /**
+     * Handle key events on the roving focus item.
+     * @param event The key event.
+     * @internal
+     */
+    onKeydown(event) {
+        this.group.onKeydown(event);
+    }
+    /**
+     * Focus the roving focus item.
+     * @param origin The origin of the focus request.
+     * @internal
+     */
+    focus() {
+        this.elementRef?.nativeElement.focus();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RovingFocusItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.3", type: RovingFocusItemDirective, isStandalone: true, selector: "[rdxRovingFocusItem]", inputs: { order: ["order", "order", numberAttribute], disabled: ["disabled", "disabled", booleanAttribute] }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.tabindex": "this.tabindex" } }, providers: [{ provide: RovingFocusItemToken, useExisting: RovingFocusItemDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RovingFocusItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxRovingFocusItem]',
+                    standalone: true,
+                    providers: [{ provide: RovingFocusItemToken, useExisting: RovingFocusItemDirective }]
+                }]
+        }], propDecorators: { order: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RovingFocusGroupDirective, RovingFocusGroupToken, RovingFocusItemDirective, RovingFocusItemToken, injectRovingFocusGroup, injectRovingFocusItem };
+//# sourceMappingURL=radix-ng-primitives-roving-focus.mjs.map

package/fesm2022/radix-ng-primitives-roving-focus.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radix-ng-primitives-roving-focus.mjs","sources":["../../../packages/primitives/roving-focus/src/roving-focus-group.token.ts","../../../packages/primitives/roving-focus/src/roving-focus-group.directive.ts","../../../packages/primitives/roving-focus/src/roving-focus-item.token.ts","../../../packages/primitives/roving-focus/src/roving-focus-item.directive.ts","../../../packages/primitives/roving-focus/radix-ng-primitives-roving-focus.ts"],"sourcesContent":["import { InjectionToken, inject } from '@angular/core';\nimport type { RovingFocusGroupDirective } from './roving-focus-group.directive';\n\nexport const RovingFocusGroupToken = new InjectionToken<RovingFocusGroupDirective>(\n    'RovingFocusToken'\n);\n\n/**\n * Inject the roving focus directive instance.\n */\nexport function injectRovingFocusGroup(): RovingFocusGroupDirective {\n    return inject(RovingFocusGroupToken);\n}\n","import { FocusKeyManager } from '@angular/cdk/a11y';\nimport { Directionality } from '@angular/cdk/bidi';\nimport {\n    DestroyRef,\n    Directive,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    QueryList,\n    SimpleChanges,\n    booleanAttribute,\n    inject\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { filter } from 'rxjs';\nimport type { RovingFocusItemDirective } from './roving-focus-item.directive';\nimport { RovingFocusGroupToken } from './roving-focus-group.token';\n\n@Directive({\n    selector: '[rdxRovingFocusGroup]',\n    standalone: true,\n    providers: [{ provide: RovingFocusGroupToken, useExisting: RovingFocusGroupDirective }]\n})\nexport class RovingFocusGroupDirective implements OnInit, OnChanges, OnDestroy {\n    private readonly directionality = inject(Directionality);\n\n    private readonly destroyRef = inject(DestroyRef);\n\n    /**\n     * Create a query list of all the roving focus items.\n     * We don't use ContentChildren as dynamically added items may not be in the correct order.\n     */\n    private readonly items = new QueryList<RovingFocusItemDirective>();\n\n    /**\n     * Create the focus key manager instance.\n     * @internal\n     */\n    readonly keyManager = new FocusKeyManager<RovingFocusItemDirective>(this.items);\n\n    /**\n     * Determine the orientation of the roving focus group.\n     * @default vertical\n     */\n    @Input() orientation: 'horizontal' | 'vertical' = 'vertical';\n\n    /**\n     * Determine if focus should wrap when the end or beginning is reached.\n     * @default true\n     */\n    @Input({ transform: booleanAttribute }) wrap = true;\n\n    ngOnInit(): void {\n        this.keyManager.withWrap(this.wrap);\n\n        this.setOrientation(this.orientation);\n\n        // update the key manager orientation if the document direction changes\n        this.directionality.change\n            .pipe(\n                filter(() => this.orientation === 'horizontal'),\n                takeUntilDestroyed(this.destroyRef)\n            )\n            .subscribe((direction) => this.keyManager.withHorizontalOrientation(direction));\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if ('orientation' in changes) {\n            this.setOrientation(this.orientation);\n        }\n\n        if ('wrap' in changes) {\n            this.keyManager.withWrap(this.wrap);\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.keyManager.destroy();\n    }\n\n    /**\n     * Register a roving focus item.\n     * @param item The roving focus item to register.\n     */\n    register(item: RovingFocusItemDirective): void {\n        // add the item to the query list by sort the items based on their order\n        this.items.reset([...this.items.toArray(), item].sort((a, b) => a.order - b.order));\n\n        // if this is the first item, make it the active item\n        if (this.items.length === 1) {\n            this.keyManager.updateActiveItem(item);\n        }\n    }\n\n    /**\n     * Unregister a roving focus item.\n     * @param item The roving focus item to unregister.\n     */\n    unregister(item: RovingFocusItemDirective): void {\n        // determine if the item being removed is the active item\n        const isActive = this.keyManager.activeItem === item;\n\n        // remove the item from the query list\n        this.items.reset(this.items.toArray().filter((i) => i !== item));\n\n        // if the item being removed is the active item, make the first item the active item\n        if (isActive) {\n            this.keyManager.updateActiveItem(0);\n        }\n    }\n\n    /**\n     * Handle key events on the roving focus items.\n     * @param event The key event.\n     * @internal\n     */\n    onKeydown(event: KeyboardEvent): void {\n        this.keyManager.onKeydown(event);\n    }\n\n    /**\n     * Set the orientation of the roving focus group.\n     * @param orientation The orientation of the roving focus group.\n     */\n    setOrientation(orientation: 'horizontal' | 'vertical'): void {\n        this.orientation = orientation;\n\n        if (orientation === 'horizontal') {\n            this.keyManager.withHorizontalOrientation(this.directionality.value);\n        } else {\n            this.keyManager.withVerticalOrientation();\n        }\n    }\n}\n","import { InjectionToken, inject } from '@angular/core';\nimport type { RovingFocusItemDirective } from './roving-focus-item.directive';\n\nexport const RovingFocusItemToken = new InjectionToken<RovingFocusItemDirective>(\n    'RovingFocusItemToken'\n);\n\nexport function injectRovingFocusItem(): RovingFocusItemDirective {\n    return inject(RovingFocusItemToken);\n}\n","import { FocusableOption } from '@angular/cdk/a11y';\nimport {\n    ChangeDetectorRef,\n    DestroyRef,\n    Directive,\n    ElementRef,\n    HostBinding,\n    HostListener,\n    Input,\n    OnDestroy,\n    OnInit,\n    booleanAttribute,\n    inject,\n    numberAttribute\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { injectRovingFocusGroup } from './roving-focus-group.token';\nimport { RovingFocusItemToken } from './roving-focus-item.token';\n\n@Directive({\n    selector: '[rdxRovingFocusItem]',\n    standalone: true,\n    providers: [{ provide: RovingFocusItemToken, useExisting: RovingFocusItemDirective }]\n})\nexport class RovingFocusItemDirective implements OnInit, OnDestroy, FocusableOption {\n    /**\n     * Access the group the roving focus item belongs to.\n     */\n    private readonly group = injectRovingFocusGroup();\n\n    /**\n     * Access the element reference of the roving focus item.\n     */\n    private readonly elementRef = inject(ElementRef<HTMLElement>);\n\n    /**\n     * Access the destroyRef\n     */\n    private readonly destroyRef = inject(DestroyRef);\n\n    /**\n     * Access the change detector ref\n     */\n    private readonly changeDetectorRef = inject(ChangeDetectorRef);\n\n    /**\n     * Define the order of the roving focus item in the group.\n     */\n    @Input({ transform: numberAttribute }) order = 0;\n\n    /**\n     * Define if the item is disabled.\n     */\n    @Input({ transform: booleanAttribute }) disabled = false;\n\n    /**\n     * Derive the tabindex of the roving focus item.\n     * @internal\n     */\n    @HostBinding('attr.tabindex')\n    get tabindex(): number {\n        return this.group.keyManager.activeItem === this ? 0 : -1;\n    }\n\n    ngOnInit(): void {\n        // register the roving focus item with the group\n        this.group.register(this);\n\n        // listen for changes to the active item and run change detection\n        this.group.keyManager.change\n            .pipe(takeUntilDestroyed(this.destroyRef))\n            .subscribe(() => this.changeDetectorRef.markForCheck());\n    }\n\n    ngOnDestroy(): void {\n        // unregister the roving focus item with the group\n        this.group.unregister(this);\n    }\n\n    /**\n     * Handle key events on the roving focus item.\n     * @param event The key event.\n     * @internal\n     */\n    @HostListener('keydown', ['$event'])\n    onKeydown(event: KeyboardEvent): void {\n        this.group.onKeydown(event);\n    }\n\n    /**\n     * Focus the roving focus item.\n     * @param origin The origin of the focus request.\n     * @internal\n     */\n    focus(): void {\n        this.elementRef?.nativeElement.focus();\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}