@radix-ng/primitives 0.4.0 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/accordion/README.md +3 -0
- package/accordion/index.d.ts +7 -0
- package/accordion/src/accordion/accordion.directive.d.ts +64 -0
- package/accordion/src/accordion/accordion.token.d.ts +4 -0
- package/accordion/src/accordion-content/accordion-content.directive.d.ts +44 -0
- package/accordion/src/accordion-header/accordion-header.directive.d.ts +6 -0
- package/accordion/src/accordion-item/accordion-item.directive.d.ts +42 -0
- package/accordion/src/accordion-item/accordion-item.token.d.ts +4 -0
- package/accordion/src/accordion-state.directive.d.ts +28 -0
- package/accordion/src/accordion-trigger/accordion-trigger.directive.d.ts +23 -0
- package/accordion/src/accordion.config.d.ts +25 -0
- package/esm2022/accordion/index.mjs +8 -0
- package/esm2022/accordion/radix-ng-primitives-accordion.mjs +5 -0
- package/esm2022/accordion/src/accordion/accordion.directive.mjs +108 -0
- package/esm2022/accordion/src/accordion/accordion.token.mjs +6 -0
- package/esm2022/accordion/src/accordion-content/accordion-content.directive.mjs +75 -0
- package/esm2022/accordion/src/accordion-header/accordion-header.directive.mjs +17 -0
- package/esm2022/accordion/src/accordion-item/accordion-item.directive.mjs +81 -0
- package/esm2022/accordion/src/accordion-item/accordion-item.token.mjs +6 -0
- package/esm2022/accordion/src/accordion-state.directive.mjs +49 -0
- package/esm2022/accordion/src/accordion-trigger/accordion-trigger.directive.mjs +49 -0
- package/esm2022/accordion/src/accordion.config.mjs +27 -0
- package/esm2022/label/src/label.directive.mjs +17 -3
- package/esm2022/roving-focus/src/roving-focus-group.directive.mjs +5 -4
- package/esm2022/toggle-group/index.mjs +6 -0
- package/esm2022/toggle-group/radix-ng-primitives-toggle-group.mjs +5 -0
- package/esm2022/toggle-group/src/toggle-group-button.directive.mjs +79 -0
- package/esm2022/toggle-group/src/toggle-group-button.token.mjs +6 -0
- package/esm2022/toggle-group/src/toggle-group-multi.directive.mjs +159 -0
- package/esm2022/toggle-group/src/toggle-group.directive.mjs +157 -0
- package/esm2022/toggle-group/src/toggle-group.token.mjs +6 -0
- package/fesm2022/radix-ng-primitives-accordion.mjs +394 -0
- package/fesm2022/radix-ng-primitives-accordion.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-label.mjs +16 -2
- package/fesm2022/radix-ng-primitives-label.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-roving-focus.mjs +4 -3
- package/fesm2022/radix-ng-primitives-roving-focus.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toggle-group.mjs +397 -0
- package/fesm2022/radix-ng-primitives-toggle-group.mjs.map +1 -0
- package/label/src/label.directive.d.ts +6 -1
- package/package.json +12 -6
- package/roving-focus/src/roving-focus-group.directive.d.ts +1 -1
- package/toggle-group/README.md +3 -0
- package/toggle-group/index.d.ts +5 -0
- package/toggle-group/src/toggle-group-button.directive.d.ts +39 -0
- package/toggle-group/src/toggle-group-button.token.d.ts +4 -0
- package/toggle-group/src/toggle-group-multi.directive.d.ts +90 -0
- package/toggle-group/src/toggle-group.directive.d.ts +90 -0
- package/toggle-group/src/toggle-group.token.d.ts +5 -0
- package/esm2022/tooltip/index.mjs +0 -5
- package/esm2022/tooltip/radix-ng-primitives-tooltip.mjs +0 -5
- package/esm2022/tooltip/src/tooltip-arrow.directive.mjs +0 -17
- package/esm2022/tooltip/src/tooltip-trigger.directive.mjs +0 -148
- package/esm2022/tooltip/src/tooltip-trigger.token.mjs +0 -6
- package/esm2022/tooltip/src/tooltip.config.mjs +0 -31
- package/esm2022/tooltip/src/tooltip.directive.mjs +0 -46
- package/fesm2022/radix-ng-primitives-tooltip.mjs +0 -242
- package/fesm2022/radix-ng-primitives-tooltip.mjs.map +0 -1
- package/tooltip/README.md +0 -1
- package/tooltip/index.d.ts +0 -4
- package/tooltip/src/tooltip-arrow.directive.d.ts +0 -6
- package/tooltip/src/tooltip-trigger.directive.d.ts +0 -79
- package/tooltip/src/tooltip-trigger.token.d.ts +0 -4
- package/tooltip/src/tooltip.config.d.ts +0 -46
- package/tooltip/src/tooltip.directive.d.ts +0 -17
@@ -1,9 +1,20 @@
|
|
1
1
|
import * as i0 from '@angular/core';
|
2
|
-
import { Directive, Optional, Input, HostListener } from '@angular/core';
|
2
|
+
import { signal, Directive, Optional, Input, HostListener } from '@angular/core';
|
3
3
|
|
4
|
+
// Increasing integer for generating unique ids.
|
5
|
+
let nextUniqueId = 0;
|
4
6
|
class RdxLabelDirective {
|
7
|
+
/** The HTML id of the Label. */
|
8
|
+
set id(id) {
|
9
|
+
this._id.set(id || this._id());
|
10
|
+
}
|
11
|
+
get id() {
|
12
|
+
return this._id();
|
13
|
+
}
|
5
14
|
constructor(el) {
|
6
15
|
this.el = el;
|
16
|
+
/** The HTML id attribute applied to this element. */
|
17
|
+
this._id = signal(`rdx-label-${nextUniqueId++}`);
|
7
18
|
/**
|
8
19
|
* The id of the element the label is associated with.
|
9
20
|
* @default '-'
|
@@ -25,7 +36,7 @@ class RdxLabelDirective {
|
|
25
36
|
}
|
26
37
|
}
|
27
38
|
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 }); }
|
28
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.3", type: RdxLabelDirective, isStandalone: true, selector: "label[rdxLabel]", inputs: { htmlFor: "htmlFor" }, host: { listeners: { "mousedown": "onMouseDown($event)" }, properties: { "attr.for": "htmlFor ? htmlFor : null" } }, ngImport: i0 }); }
|
39
|
+
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 }); }
|
29
40
|
}
|
30
41
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxLabelDirective, decorators: [{
|
31
42
|
type: Directive,
|
@@ -33,6 +44,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
|
|
33
44
|
selector: 'label[rdxLabel]',
|
34
45
|
standalone: true,
|
35
46
|
host: {
|
47
|
+
'[id]': '_id()',
|
36
48
|
'[attr.for]': 'htmlFor ? htmlFor : null'
|
37
49
|
}
|
38
50
|
}]
|
@@ -40,6 +52,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
|
|
40
52
|
type: Optional
|
41
53
|
}] }], propDecorators: { htmlFor: [{
|
42
54
|
type: Input
|
55
|
+
}], id: [{
|
56
|
+
type: Input
|
43
57
|
}], onMouseDown: [{
|
44
58
|
type: HostListener,
|
45
59
|
args: ['mousedown', ['$event']]
|
@@ -1 +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 } 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 RdxLabelDirective {\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":";;;
|
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;;;;"}
|
@@ -105,7 +105,7 @@ class RdxRovingFocusGroupDirective {
|
|
105
105
|
}
|
106
106
|
}
|
107
107
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxRovingFocusGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
108
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.3", type: RdxRovingFocusGroupDirective, isStandalone: true, selector: "[rdxRovingFocusGroup]", inputs: { orientation: "orientation", wrap: ["
|
108
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.3", type: RdxRovingFocusGroupDirective, isStandalone: true, selector: "[rdxRovingFocusGroup]", inputs: { orientation: ["rdxRovingFocusGroupOrientation", "orientation"], wrap: ["rdxRovingFocusGroupWrap", "wrap", booleanAttribute] }, providers: [{ provide: RdxRovingFocusGroupToken, useExisting: RdxRovingFocusGroupDirective }], usesOnChanges: true, ngImport: i0 }); }
|
109
109
|
}
|
110
110
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxRovingFocusGroupDirective, decorators: [{
|
111
111
|
type: Directive,
|
@@ -115,10 +115,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
|
|
115
115
|
providers: [{ provide: RdxRovingFocusGroupToken, useExisting: RdxRovingFocusGroupDirective }]
|
116
116
|
}]
|
117
117
|
}], propDecorators: { orientation: [{
|
118
|
-
type: Input
|
118
|
+
type: Input,
|
119
|
+
args: [{ alias: 'rdxRovingFocusGroupOrientation' }]
|
119
120
|
}], wrap: [{
|
120
121
|
type: Input,
|
121
|
-
args: [{ transform: booleanAttribute }]
|
122
|
+
args: [{ alias: 'rdxRovingFocusGroupWrap', transform: booleanAttribute }]
|
122
123
|
}] } });
|
123
124
|
|
124
125
|
const RdxRovingFocusItemToken = new InjectionToken('RdxRovingFocusItemToken');
|
@@ -1 +1 @@
|
|
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 { inject, InjectionToken } from '@angular/core';\n\nimport type { RdxRovingFocusGroupDirective } from './roving-focus-group.directive';\n\nexport const RdxRovingFocusGroupToken = new InjectionToken<RdxRovingFocusGroupDirective>(\n 'RdxRovingFocusToken'\n);\n\n/**\n * Inject the roving focus directive instance.\n */\nexport function injectRovingFocusGroup(): RdxRovingFocusGroupDirective {\n return inject(RdxRovingFocusGroupToken);\n}\n","import { FocusKeyManager } from '@angular/cdk/a11y';\nimport { Directionality } from '@angular/cdk/bidi';\nimport {\n booleanAttribute,\n DestroyRef,\n Directive,\n inject,\n Input,\n OnChanges,\n OnDestroy,\n OnInit,\n QueryList,\n SimpleChanges\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { filter } from 'rxjs';\n\nimport { RdxRovingFocusGroupToken } from './roving-focus-group.token';\nimport type { RdxRovingFocusItemDirective } from './roving-focus-item.directive';\n\n@Directive({\n selector: '[rdxRovingFocusGroup]',\n standalone: true,\n providers: [{ provide: RdxRovingFocusGroupToken, useExisting: RdxRovingFocusGroupDirective }]\n})\nexport class RdxRovingFocusGroupDirective 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<RdxRovingFocusItemDirective>();\n\n /**\n * Create the focus key manager instance.\n * @internal\n */\n readonly keyManager = new FocusKeyManager<RdxRovingFocusItemDirective>(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: RdxRovingFocusItemDirective): 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: RdxRovingFocusItemDirective): 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 { inject, InjectionToken } from '@angular/core';\n\nimport type { RdxRovingFocusItemDirective } from './roving-focus-item.directive';\n\nexport const RdxRovingFocusItemToken = new InjectionToken<RdxRovingFocusItemDirective>(\n 'RdxRovingFocusItemToken'\n);\n\nexport function injectRovingFocusItem(): RdxRovingFocusItemDirective {\n return inject(RdxRovingFocusItemToken);\n}\n","import { FocusableOption } from '@angular/cdk/a11y';\nimport {\n booleanAttribute,\n ChangeDetectorRef,\n DestroyRef,\n Directive,\n ElementRef,\n HostBinding,\n HostListener,\n inject,\n Input,\n numberAttribute,\n OnDestroy,\n OnInit\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nimport { injectRovingFocusGroup } from './roving-focus-group.token';\nimport { RdxRovingFocusItemToken } from './roving-focus-item.token';\n\n@Directive({\n selector: '[rdxRovingFocusItem]',\n standalone: true,\n providers: [{ provide: RdxRovingFocusItemToken, useExisting: RdxRovingFocusItemDirective }]\n})\nexport class RdxRovingFocusItemDirective 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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"}
|
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 { inject, InjectionToken } from '@angular/core';\n\nimport type { RdxRovingFocusGroupDirective } from './roving-focus-group.directive';\n\nexport const RdxRovingFocusGroupToken = new InjectionToken<RdxRovingFocusGroupDirective>(\n 'RdxRovingFocusToken'\n);\n\n/**\n * Inject the roving focus directive instance.\n */\nexport function injectRovingFocusGroup(): RdxRovingFocusGroupDirective {\n return inject(RdxRovingFocusGroupToken);\n}\n","import { FocusKeyManager } from '@angular/cdk/a11y';\nimport { Directionality } from '@angular/cdk/bidi';\nimport {\n booleanAttribute,\n DestroyRef,\n Directive,\n inject,\n Input,\n OnChanges,\n OnDestroy,\n OnInit,\n QueryList,\n SimpleChanges\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { filter } from 'rxjs';\n\nimport { RdxRovingFocusGroupToken } from './roving-focus-group.token';\nimport type { RdxRovingFocusItemDirective } from './roving-focus-item.directive';\n\n@Directive({\n selector: '[rdxRovingFocusGroup]',\n standalone: true,\n providers: [{ provide: RdxRovingFocusGroupToken, useExisting: RdxRovingFocusGroupDirective }]\n})\nexport class RdxRovingFocusGroupDirective 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<RdxRovingFocusItemDirective>();\n\n /**\n * Create the focus key manager instance.\n * @internal\n */\n readonly keyManager = new FocusKeyManager<RdxRovingFocusItemDirective>(this.items);\n\n /**\n * Determine the orientation of the roving focus group.\n * @default vertical\n */\n @Input({ alias: 'rdxRovingFocusGroupOrientation' }) orientation: 'horizontal' | 'vertical' =\n 'vertical';\n\n /**\n * Determine if focus should wrap when the end or beginning is reached.\n * @default true\n */\n @Input({ alias: 'rdxRovingFocusGroupWrap', 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: RdxRovingFocusItemDirective): 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: RdxRovingFocusItemDirective): 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 { inject, InjectionToken } from '@angular/core';\n\nimport type { RdxRovingFocusItemDirective } from './roving-focus-item.directive';\n\nexport const RdxRovingFocusItemToken = new InjectionToken<RdxRovingFocusItemDirective>(\n 'RdxRovingFocusItemToken'\n);\n\nexport function injectRovingFocusItem(): RdxRovingFocusItemDirective {\n return inject(RdxRovingFocusItemToken);\n}\n","import { FocusableOption } from '@angular/cdk/a11y';\nimport {\n booleanAttribute,\n ChangeDetectorRef,\n DestroyRef,\n Directive,\n ElementRef,\n HostBinding,\n HostListener,\n inject,\n Input,\n numberAttribute,\n OnDestroy,\n OnInit\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nimport { injectRovingFocusGroup } from './roving-focus-group.token';\nimport { RdxRovingFocusItemToken } from './roving-focus-item.token';\n\n@Directive({\n selector: '[rdxRovingFocusItem]',\n standalone: true,\n providers: [{ provide: RdxRovingFocusItemToken, useExisting: RdxRovingFocusItemDirective }]\n})\nexport class RdxRovingFocusItemDirective 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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"}
|
@@ -0,0 +1,397 @@
|
|
1
|
+
import * as i0 from '@angular/core';
|
2
|
+
import { InjectionToken, inject, booleanAttribute, Directive, Input, HostListener, EventEmitter, ContentChildren } from '@angular/core';
|
3
|
+
import * as i1 from '@radix-ng/primitives/roving-focus';
|
4
|
+
import { injectRovingFocusItem, RdxRovingFocusItemDirective, injectRovingFocusGroup, RdxRovingFocusGroupDirective } from '@radix-ng/primitives/roving-focus';
|
5
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
6
|
+
|
7
|
+
const RdxToggleGroupButtonToken = new InjectionToken('RdxToggleGroupButtonToken');
|
8
|
+
function injectToggleGroupButton() {
|
9
|
+
return inject(RdxToggleGroupButtonToken);
|
10
|
+
}
|
11
|
+
|
12
|
+
const RdxToggleGroupToken = new InjectionToken('RdxToggleGroupToken');
|
13
|
+
function injectToggleGroup() {
|
14
|
+
return inject(RdxToggleGroupToken);
|
15
|
+
}
|
16
|
+
|
17
|
+
class RdxToggleGroupButtonDirective {
|
18
|
+
constructor() {
|
19
|
+
/**
|
20
|
+
* Access the toggle group.
|
21
|
+
*/
|
22
|
+
this.toggleGroup = injectToggleGroup();
|
23
|
+
/**
|
24
|
+
* Access the roving focus item.
|
25
|
+
*/
|
26
|
+
this.rovingFocusItem = injectRovingFocusItem();
|
27
|
+
/**
|
28
|
+
* Whether this toggle button is disabled.
|
29
|
+
* @default false
|
30
|
+
*/
|
31
|
+
this.disabled = false;
|
32
|
+
}
|
33
|
+
/**
|
34
|
+
* Whether this toggle button is checked.
|
35
|
+
*/
|
36
|
+
get checked() {
|
37
|
+
return this.toggleGroup.isSelected(this.value);
|
38
|
+
}
|
39
|
+
ngOnChanges(changes) {
|
40
|
+
if ('disabled' in changes) {
|
41
|
+
this.updateDisabled();
|
42
|
+
}
|
43
|
+
}
|
44
|
+
/**
|
45
|
+
* Toggle this toggle button.
|
46
|
+
*/
|
47
|
+
toggle() {
|
48
|
+
if (this.disabled) {
|
49
|
+
return;
|
50
|
+
}
|
51
|
+
this.toggleGroup.toggle(this.value);
|
52
|
+
}
|
53
|
+
/**
|
54
|
+
* Ensure the disabled state is propagated to the roving focus item.
|
55
|
+
* @internal
|
56
|
+
*/
|
57
|
+
updateDisabled() {
|
58
|
+
this.rovingFocusItem.disabled = this.disabled || this.toggleGroup.disabled;
|
59
|
+
}
|
60
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxToggleGroupButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
61
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.3", type: RdxToggleGroupButtonDirective, isStandalone: true, selector: "button[rdxToggleGroupButton]", inputs: { value: ["rdxToggleGroupButtonValue", "value"], disabled: ["rdxToggleGroupButtonDisabled", "disabled", booleanAttribute] }, host: { attributes: { "role": "radio" }, listeners: { "click": "toggle()" }, properties: { "attr.aria-checked": "checked", "attr.aria-disabled": "disabled || toggleGroup.disabled", "attr.data-disabled": "disabled || toggleGroup.disabled", "attr.data-state": "checked ? \"on\" : \"off\"", "attr.data-orientation": "toggleGroup.orientation" } }, providers: [{ provide: RdxToggleGroupButtonToken, useExisting: RdxToggleGroupButtonDirective }], usesOnChanges: true, hostDirectives: [{ directive: i1.RdxRovingFocusItemDirective }], ngImport: i0 }); }
|
62
|
+
}
|
63
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxToggleGroupButtonDirective, decorators: [{
|
64
|
+
type: Directive,
|
65
|
+
args: [{
|
66
|
+
selector: 'button[rdxToggleGroupButton]',
|
67
|
+
standalone: true,
|
68
|
+
hostDirectives: [RdxRovingFocusItemDirective],
|
69
|
+
providers: [{ provide: RdxToggleGroupButtonToken, useExisting: RdxToggleGroupButtonDirective }],
|
70
|
+
host: {
|
71
|
+
role: 'radio',
|
72
|
+
'[attr.aria-checked]': 'checked',
|
73
|
+
'[attr.aria-disabled]': 'disabled || toggleGroup.disabled',
|
74
|
+
'[attr.data-disabled]': 'disabled || toggleGroup.disabled',
|
75
|
+
'[attr.data-state]': 'checked ? "on" : "off"',
|
76
|
+
'[attr.data-orientation]': 'toggleGroup.orientation'
|
77
|
+
}
|
78
|
+
}]
|
79
|
+
}], propDecorators: { value: [{
|
80
|
+
type: Input,
|
81
|
+
args: [{ alias: 'rdxToggleGroupButtonValue', required: true }]
|
82
|
+
}], disabled: [{
|
83
|
+
type: Input,
|
84
|
+
args: [{ alias: 'rdxToggleGroupButtonDisabled', transform: booleanAttribute }]
|
85
|
+
}], toggle: [{
|
86
|
+
type: HostListener,
|
87
|
+
args: ['click']
|
88
|
+
}] } });
|
89
|
+
|
90
|
+
class RdxToggleGroupMultiDirective {
|
91
|
+
constructor() {
|
92
|
+
/**
|
93
|
+
* Access the roving focus group
|
94
|
+
*/
|
95
|
+
this.rovingFocusGroup = injectRovingFocusGroup();
|
96
|
+
/**
|
97
|
+
* The selected toggle button.
|
98
|
+
*/
|
99
|
+
this.value = [];
|
100
|
+
/**
|
101
|
+
* The orientation of the toggle group.
|
102
|
+
* @default 'horizontal'
|
103
|
+
*/
|
104
|
+
this.orientation = 'horizontal';
|
105
|
+
/**
|
106
|
+
* Whether the toggle group is disabled.
|
107
|
+
* @default false
|
108
|
+
*/
|
109
|
+
this.disabled = false;
|
110
|
+
/**
|
111
|
+
* Whether the toggle group roving focus should wrap.
|
112
|
+
* @default true
|
113
|
+
*/
|
114
|
+
this.wrap = true;
|
115
|
+
/**
|
116
|
+
* Event emitted when the selected toggle button changes.
|
117
|
+
*/
|
118
|
+
this.valueChange = new EventEmitter();
|
119
|
+
}
|
120
|
+
ngOnInit() {
|
121
|
+
// the toggle button group has a default orientation of horizontal
|
122
|
+
// whereas the roving focus group has a default orientation of vertical
|
123
|
+
// if the toggle button group input is not defined, the orientation will not be set
|
124
|
+
// in the roving focus group and the default vertical orientation will be used.
|
125
|
+
// we must initially set the orientation of the roving focus group to match the toggle button group orientation
|
126
|
+
this.rovingFocusGroup.setOrientation(this.orientation);
|
127
|
+
}
|
128
|
+
ngOnChanges(changes) {
|
129
|
+
if ('disabled' in changes) {
|
130
|
+
this.buttons?.forEach((button) => button.updateDisabled());
|
131
|
+
}
|
132
|
+
}
|
133
|
+
ngAfterContentInit() {
|
134
|
+
if (this.disabled) {
|
135
|
+
this.buttons?.forEach((button) => button.updateDisabled());
|
136
|
+
}
|
137
|
+
}
|
138
|
+
/**
|
139
|
+
* Determine if a value is selected.
|
140
|
+
* @param value The value to check.
|
141
|
+
* @returns Whether the value is selected.
|
142
|
+
* @internal
|
143
|
+
*/
|
144
|
+
isSelected(value) {
|
145
|
+
return this.value.includes(value);
|
146
|
+
}
|
147
|
+
/**
|
148
|
+
* Toggle a value.
|
149
|
+
* @param value The value to toggle.
|
150
|
+
* @internal
|
151
|
+
*/
|
152
|
+
toggle(value) {
|
153
|
+
if (this.disabled) {
|
154
|
+
return;
|
155
|
+
}
|
156
|
+
this.value = this.value.includes(value)
|
157
|
+
? this.value.filter((v) => v !== value)
|
158
|
+
: [...this.value, value];
|
159
|
+
this.valueChange.emit(this.value);
|
160
|
+
this.onChange?.(this.value);
|
161
|
+
}
|
162
|
+
/**
|
163
|
+
* Select a value from Angular forms.
|
164
|
+
* @param value The value to select.
|
165
|
+
* @internal
|
166
|
+
*/
|
167
|
+
writeValue(value) {
|
168
|
+
this.value = value;
|
169
|
+
}
|
170
|
+
/**
|
171
|
+
* Register a callback to be called when the value changes.
|
172
|
+
* @param fn The callback to register.
|
173
|
+
* @internal
|
174
|
+
*/
|
175
|
+
registerOnChange(fn) {
|
176
|
+
this.onChange = fn;
|
177
|
+
}
|
178
|
+
/**
|
179
|
+
* Register a callback to be called when the toggle group is touched.
|
180
|
+
* @param fn The callback to register.
|
181
|
+
* @internal
|
182
|
+
*/
|
183
|
+
registerOnTouched(fn) {
|
184
|
+
this.onTouched = fn;
|
185
|
+
}
|
186
|
+
/**
|
187
|
+
* Set the disabled state of the toggle group.
|
188
|
+
* @param isDisabled Whether the toggle group is disabled.
|
189
|
+
* @internal
|
190
|
+
*/
|
191
|
+
setDisabledState(isDisabled) {
|
192
|
+
this.disabled = isDisabled;
|
193
|
+
this.buttons?.forEach((button) => button.updateDisabled());
|
194
|
+
}
|
195
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxToggleGroupMultiDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
196
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.3", type: RdxToggleGroupMultiDirective, isStandalone: true, selector: "[rdxToggleGroupMulti]", inputs: { value: ["rdxToggleGroupMultiValue", "value"], orientation: ["rdxToggleGroupMultiOrientation", "orientation"], disabled: ["rdxToggleGroupMultiDisabled", "disabled", booleanAttribute], wrap: ["rdxToggleGroupMultiWrap", "wrap", booleanAttribute], valueChange: ["rdxToggleGroupMultiValueChange", "valueChange"] }, host: { attributes: { "role": "group" }, listeners: { "focusout": "onTouched?.()" }, properties: { "attr.data-orientation": "orientation" } }, providers: [
|
197
|
+
{ provide: RdxToggleGroupToken, useExisting: RdxToggleGroupMultiDirective },
|
198
|
+
{ provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupMultiDirective, multi: true }
|
199
|
+
], queries: [{ propertyName: "buttons", predicate: RdxToggleGroupButtonToken }], usesOnChanges: true, hostDirectives: [{ directive: i1.RdxRovingFocusGroupDirective, inputs: ["rdxRovingFocusGroupWrap", "wrap", "rdxRovingFocusGroupOrientation", "orientation"] }], ngImport: i0 }); }
|
200
|
+
}
|
201
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxToggleGroupMultiDirective, decorators: [{
|
202
|
+
type: Directive,
|
203
|
+
args: [{
|
204
|
+
selector: '[rdxToggleGroupMulti]',
|
205
|
+
standalone: true,
|
206
|
+
hostDirectives: [
|
207
|
+
{
|
208
|
+
directive: RdxRovingFocusGroupDirective,
|
209
|
+
inputs: ['rdxRovingFocusGroupWrap:wrap', 'rdxRovingFocusGroupOrientation:orientation']
|
210
|
+
}
|
211
|
+
],
|
212
|
+
providers: [
|
213
|
+
{ provide: RdxToggleGroupToken, useExisting: RdxToggleGroupMultiDirective },
|
214
|
+
{ provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupMultiDirective, multi: true }
|
215
|
+
],
|
216
|
+
host: {
|
217
|
+
role: 'group',
|
218
|
+
'[attr.data-orientation]': 'orientation',
|
219
|
+
'(focusout)': 'onTouched?.()'
|
220
|
+
}
|
221
|
+
}]
|
222
|
+
}], propDecorators: { value: [{
|
223
|
+
type: Input,
|
224
|
+
args: ['rdxToggleGroupMultiValue']
|
225
|
+
}], orientation: [{
|
226
|
+
type: Input,
|
227
|
+
args: ['rdxToggleGroupMultiOrientation']
|
228
|
+
}], disabled: [{
|
229
|
+
type: Input,
|
230
|
+
args: [{ alias: 'rdxToggleGroupMultiDisabled', transform: booleanAttribute }]
|
231
|
+
}], wrap: [{
|
232
|
+
type: Input,
|
233
|
+
args: [{ alias: 'rdxToggleGroupMultiWrap', transform: booleanAttribute }]
|
234
|
+
}], valueChange: [{
|
235
|
+
type: Input,
|
236
|
+
args: ['rdxToggleGroupMultiValueChange']
|
237
|
+
}], buttons: [{
|
238
|
+
type: ContentChildren,
|
239
|
+
args: [RdxToggleGroupButtonToken]
|
240
|
+
}] } });
|
241
|
+
|
242
|
+
class RdxToggleGroupDirective {
|
243
|
+
constructor() {
|
244
|
+
/**
|
245
|
+
* Access the roving focus group
|
246
|
+
*/
|
247
|
+
this.rovingFocusGroup = injectRovingFocusGroup();
|
248
|
+
/**
|
249
|
+
* The selected toggle button.
|
250
|
+
*/
|
251
|
+
this.value = null;
|
252
|
+
/**
|
253
|
+
* The orientation of the toggle group.
|
254
|
+
* @default 'horizontal'
|
255
|
+
*/
|
256
|
+
this.orientation = 'horizontal';
|
257
|
+
/**
|
258
|
+
* Whether the toggle group is disabled.
|
259
|
+
* @default false
|
260
|
+
*/
|
261
|
+
this.disabled = false;
|
262
|
+
/**
|
263
|
+
* Whether the toggle group roving focus should wrap.
|
264
|
+
* @default true
|
265
|
+
*/
|
266
|
+
this.wrap = true;
|
267
|
+
/**
|
268
|
+
* Event emitted when the selected toggle button changes.
|
269
|
+
*/
|
270
|
+
this.valueChange = new EventEmitter();
|
271
|
+
}
|
272
|
+
ngOnInit() {
|
273
|
+
// the toggle button group has a default orientation of horizontal
|
274
|
+
// whereas the roving focus group has a default orientation of vertical
|
275
|
+
// if the toggle button group input is not defined, the orientation will not be set
|
276
|
+
// in the roving focus group and the default vertical orientation will be used.
|
277
|
+
// we must initially set the orientation of the roving focus group to match the toggle button group orientation
|
278
|
+
this.rovingFocusGroup.setOrientation(this.orientation);
|
279
|
+
}
|
280
|
+
ngOnChanges(changes) {
|
281
|
+
if ('disabled' in changes) {
|
282
|
+
this.buttons?.forEach((button) => button.updateDisabled());
|
283
|
+
}
|
284
|
+
}
|
285
|
+
ngAfterContentInit() {
|
286
|
+
if (this.disabled) {
|
287
|
+
this.buttons?.forEach((button) => button.updateDisabled());
|
288
|
+
}
|
289
|
+
}
|
290
|
+
/**
|
291
|
+
* Determine if a value is selected.
|
292
|
+
* @param value The value to check.
|
293
|
+
* @returns Whether the value is selected.
|
294
|
+
* @internal
|
295
|
+
*/
|
296
|
+
isSelected(value) {
|
297
|
+
return this.value === value;
|
298
|
+
}
|
299
|
+
/**
|
300
|
+
* Toggle a value.
|
301
|
+
* @param value The value to toggle.
|
302
|
+
* @internal
|
303
|
+
*/
|
304
|
+
toggle(value) {
|
305
|
+
if (this.disabled) {
|
306
|
+
return;
|
307
|
+
}
|
308
|
+
this.value = this.value === value ? null : value;
|
309
|
+
this.valueChange.emit(this.value);
|
310
|
+
this.onChange?.(this.value);
|
311
|
+
}
|
312
|
+
/**
|
313
|
+
* Select a value from Angular forms.
|
314
|
+
* @param value The value to select.
|
315
|
+
* @internal
|
316
|
+
*/
|
317
|
+
writeValue(value) {
|
318
|
+
this.value = value;
|
319
|
+
}
|
320
|
+
/**
|
321
|
+
* Register a callback to be called when the value changes.
|
322
|
+
* @param fn The callback to register.
|
323
|
+
* @internal
|
324
|
+
*/
|
325
|
+
registerOnChange(fn) {
|
326
|
+
this.onChange = fn;
|
327
|
+
}
|
328
|
+
/**
|
329
|
+
* Register a callback to be called when the toggle group is touched.
|
330
|
+
* @param fn The callback to register.
|
331
|
+
* @internal
|
332
|
+
*/
|
333
|
+
registerOnTouched(fn) {
|
334
|
+
this.onTouched = fn;
|
335
|
+
}
|
336
|
+
/**
|
337
|
+
* Set the disabled state of the toggle group.
|
338
|
+
* @param isDisabled Whether the toggle group is disabled.
|
339
|
+
* @internal
|
340
|
+
*/
|
341
|
+
setDisabledState(isDisabled) {
|
342
|
+
this.disabled = isDisabled;
|
343
|
+
this.buttons?.forEach((button) => button.updateDisabled());
|
344
|
+
}
|
345
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxToggleGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
346
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.3", type: RdxToggleGroupDirective, isStandalone: true, selector: "[rdxToggleGroup]", inputs: { value: ["rdxToggleGroupValue", "value"], orientation: ["rdxToggleGroupOrientation", "orientation"], disabled: ["rdxToggleGroupDisabled", "disabled", booleanAttribute], wrap: ["rdxToggleGroupWrap", "wrap", booleanAttribute], valueChange: ["rdxToggleGroupValueChange", "valueChange"] }, host: { attributes: { "role": "group" }, listeners: { "focusout": "onTouched?.()" }, properties: { "attr.data-orientation": "orientation" } }, providers: [
|
347
|
+
{ provide: RdxToggleGroupToken, useExisting: RdxToggleGroupDirective },
|
348
|
+
{ provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupDirective, multi: true }
|
349
|
+
], queries: [{ propertyName: "buttons", predicate: RdxToggleGroupButtonToken }], usesOnChanges: true, hostDirectives: [{ directive: i1.RdxRovingFocusGroupDirective, inputs: ["rdxRovingFocusGroupWrap", "wrap", "rdxRovingFocusGroupOrientation", "orientation"] }], ngImport: i0 }); }
|
350
|
+
}
|
351
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxToggleGroupDirective, decorators: [{
|
352
|
+
type: Directive,
|
353
|
+
args: [{
|
354
|
+
selector: '[rdxToggleGroup]',
|
355
|
+
standalone: true,
|
356
|
+
hostDirectives: [
|
357
|
+
{
|
358
|
+
directive: RdxRovingFocusGroupDirective,
|
359
|
+
inputs: ['rdxRovingFocusGroupWrap:wrap', 'rdxRovingFocusGroupOrientation:orientation']
|
360
|
+
}
|
361
|
+
],
|
362
|
+
providers: [
|
363
|
+
{ provide: RdxToggleGroupToken, useExisting: RdxToggleGroupDirective },
|
364
|
+
{ provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupDirective, multi: true }
|
365
|
+
],
|
366
|
+
host: {
|
367
|
+
role: 'group',
|
368
|
+
'[attr.data-orientation]': 'orientation',
|
369
|
+
'(focusout)': 'onTouched?.()'
|
370
|
+
}
|
371
|
+
}]
|
372
|
+
}], propDecorators: { value: [{
|
373
|
+
type: Input,
|
374
|
+
args: ['rdxToggleGroupValue']
|
375
|
+
}], orientation: [{
|
376
|
+
type: Input,
|
377
|
+
args: ['rdxToggleGroupOrientation']
|
378
|
+
}], disabled: [{
|
379
|
+
type: Input,
|
380
|
+
args: [{ alias: 'rdxToggleGroupDisabled', transform: booleanAttribute }]
|
381
|
+
}], wrap: [{
|
382
|
+
type: Input,
|
383
|
+
args: [{ alias: 'rdxToggleGroupWrap', transform: booleanAttribute }]
|
384
|
+
}], valueChange: [{
|
385
|
+
type: Input,
|
386
|
+
args: ['rdxToggleGroupValueChange']
|
387
|
+
}], buttons: [{
|
388
|
+
type: ContentChildren,
|
389
|
+
args: [RdxToggleGroupButtonToken]
|
390
|
+
}] } });
|
391
|
+
|
392
|
+
/**
|
393
|
+
* Generated bundle index. Do not edit.
|
394
|
+
*/
|
395
|
+
|
396
|
+
export { RdxToggleGroupButtonDirective, RdxToggleGroupButtonToken, RdxToggleGroupDirective, RdxToggleGroupMultiDirective, RdxToggleGroupToken, injectToggleGroup, injectToggleGroupButton };
|
397
|
+
//# sourceMappingURL=radix-ng-primitives-toggle-group.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"radix-ng-primitives-toggle-group.mjs","sources":["../../../packages/primitives/toggle-group/src/toggle-group-button.token.ts","../../../packages/primitives/toggle-group/src/toggle-group.token.ts","../../../packages/primitives/toggle-group/src/toggle-group-button.directive.ts","../../../packages/primitives/toggle-group/src/toggle-group-multi.directive.ts","../../../packages/primitives/toggle-group/src/toggle-group.directive.ts","../../../packages/primitives/toggle-group/radix-ng-primitives-toggle-group.ts"],"sourcesContent":["import { inject, InjectionToken } from '@angular/core';\n\nimport type { RdxToggleGroupButtonDirective } from './toggle-group-button.directive';\n\nexport const RdxToggleGroupButtonToken = new InjectionToken<RdxToggleGroupButtonDirective>(\n 'RdxToggleGroupButtonToken'\n);\n\nexport function injectToggleGroupButton(): RdxToggleGroupButtonDirective {\n return inject(RdxToggleGroupButtonToken);\n}\n","import { inject, InjectionToken } from '@angular/core';\n\nimport type { RdxToggleGroupMultiDirective } from './toggle-group-multi.directive';\nimport type { RdxToggleGroupDirective } from './toggle-group.directive';\n\nexport const RdxToggleGroupToken = new InjectionToken<\n RdxToggleGroupDirective | RdxToggleGroupMultiDirective\n>('RdxToggleGroupToken');\n\nexport function injectToggleGroup(): RdxToggleGroupDirective | RdxToggleGroupMultiDirective {\n return inject(RdxToggleGroupToken);\n}\n","import {\n booleanAttribute,\n Directive,\n HostListener,\n Input,\n OnChanges,\n SimpleChanges\n} from '@angular/core';\n\nimport {\n injectRovingFocusItem,\n RdxRovingFocusItemDirective\n} from '@radix-ng/primitives/roving-focus';\n\nimport { RdxToggleGroupButtonToken } from './toggle-group-button.token';\nimport { injectToggleGroup } from './toggle-group.token';\n\n@Directive({\n selector: 'button[rdxToggleGroupButton]',\n standalone: true,\n hostDirectives: [RdxRovingFocusItemDirective],\n providers: [{ provide: RdxToggleGroupButtonToken, useExisting: RdxToggleGroupButtonDirective }],\n host: {\n role: 'radio',\n '[attr.aria-checked]': 'checked',\n '[attr.aria-disabled]': 'disabled || toggleGroup.disabled',\n '[attr.data-disabled]': 'disabled || toggleGroup.disabled',\n '[attr.data-state]': 'checked ? \"on\" : \"off\"',\n '[attr.data-orientation]': 'toggleGroup.orientation'\n }\n})\nexport class RdxToggleGroupButtonDirective implements OnChanges {\n /**\n * Access the toggle group.\n */\n protected readonly toggleGroup = injectToggleGroup();\n\n /**\n * Access the roving focus item.\n */\n private readonly rovingFocusItem = injectRovingFocusItem();\n\n /**\n * The value of this toggle button.\n */\n @Input({ alias: 'rdxToggleGroupButtonValue', required: true }) value!: string;\n\n /**\n * Whether this toggle button is disabled.\n * @default false\n */\n @Input({ alias: 'rdxToggleGroupButtonDisabled', transform: booleanAttribute }) disabled = false;\n\n /**\n * Whether this toggle button is checked.\n */\n protected get checked(): boolean {\n return this.toggleGroup.isSelected(this.value);\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if ('disabled' in changes) {\n this.updateDisabled();\n }\n }\n\n /**\n * Toggle this toggle button.\n */\n @HostListener('click')\n toggle(): void {\n if (this.disabled) {\n return;\n }\n\n this.toggleGroup.toggle(this.value);\n }\n\n /**\n * Ensure the disabled state is propagated to the roving focus item.\n * @internal\n */\n updateDisabled(): void {\n this.rovingFocusItem.disabled = this.disabled || this.toggleGroup.disabled;\n }\n}\n","import {\n AfterContentInit,\n booleanAttribute,\n ContentChildren,\n Directive,\n EventEmitter,\n Input,\n OnChanges,\n OnInit,\n QueryList,\n SimpleChanges\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport {\n injectRovingFocusGroup,\n RdxRovingFocusGroupDirective\n} from '@radix-ng/primitives/roving-focus';\n\nimport type { RdxToggleGroupButtonDirective } from './toggle-group-button.directive';\nimport { RdxToggleGroupButtonToken } from './toggle-group-button.token';\nimport { RdxToggleGroupToken } from './toggle-group.token';\n\n@Directive({\n selector: '[rdxToggleGroupMulti]',\n standalone: true,\n hostDirectives: [\n {\n directive: RdxRovingFocusGroupDirective,\n inputs: ['rdxRovingFocusGroupWrap:wrap', 'rdxRovingFocusGroupOrientation:orientation']\n }\n ],\n providers: [\n { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupMultiDirective },\n { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupMultiDirective, multi: true }\n ],\n host: {\n role: 'group',\n '[attr.data-orientation]': 'orientation',\n '(focusout)': 'onTouched?.()'\n }\n})\nexport class RdxToggleGroupMultiDirective\n implements OnInit, OnChanges, AfterContentInit, ControlValueAccessor\n{\n /**\n * Access the roving focus group\n */\n private readonly rovingFocusGroup = injectRovingFocusGroup();\n\n /**\n * The selected toggle button.\n */\n @Input('rdxToggleGroupMultiValue') value: ReadonlyArray<string> = [];\n\n /**\n * The orientation of the toggle group.\n * @default 'horizontal'\n */\n @Input('rdxToggleGroupMultiOrientation') orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * Whether the toggle group is disabled.\n * @default false\n */\n @Input({ alias: 'rdxToggleGroupMultiDisabled', transform: booleanAttribute }) disabled = false;\n\n /**\n * Whether the toggle group roving focus should wrap.\n * @default true\n */\n @Input({ alias: 'rdxToggleGroupMultiWrap', transform: booleanAttribute }) wrap = true;\n\n /**\n * Event emitted when the selected toggle button changes.\n */\n @Input('rdxToggleGroupMultiValueChange') readonly valueChange = new EventEmitter<\n ReadonlyArray<string>\n >();\n\n /**\n * Access the buttons in the toggle group.\n */\n @ContentChildren(RdxToggleGroupButtonToken)\n protected buttons?: QueryList<RdxToggleGroupButtonDirective>;\n\n /**\n * The value change callback.\n */\n private onChange?: (value: ReadonlyArray<string>) => void;\n\n /**\n * The touched callback.\n */\n protected onTouched?: () => void;\n\n ngOnInit(): void {\n // the toggle button group has a default orientation of horizontal\n // whereas the roving focus group has a default orientation of vertical\n // if the toggle button group input is not defined, the orientation will not be set\n // in the roving focus group and the default vertical orientation will be used.\n // we must initially set the orientation of the roving focus group to match the toggle button group orientation\n this.rovingFocusGroup.setOrientation(this.orientation);\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if ('disabled' in changes) {\n this.buttons?.forEach((button) => button.updateDisabled());\n }\n }\n\n ngAfterContentInit(): void {\n if (this.disabled) {\n this.buttons?.forEach((button) => button.updateDisabled());\n }\n }\n\n /**\n * Determine if a value is selected.\n * @param value The value to check.\n * @returns Whether the value is selected.\n * @internal\n */\n isSelected(value: string): boolean {\n return this.value.includes(value);\n }\n\n /**\n * Toggle a value.\n * @param value The value to toggle.\n * @internal\n */\n toggle(value: string): void {\n if (this.disabled) {\n return;\n }\n\n this.value = this.value.includes(value)\n ? this.value.filter((v) => v !== value)\n : [...this.value, value];\n\n this.valueChange.emit(this.value);\n this.onChange?.(this.value);\n }\n\n /**\n * Select a value from Angular forms.\n * @param value The value to select.\n * @internal\n */\n writeValue(value: ReadonlyArray<string>): void {\n this.value = value;\n }\n\n /**\n * Register a callback to be called when the value changes.\n * @param fn The callback to register.\n * @internal\n */\n registerOnChange(fn: (value: ReadonlyArray<string>) => void): void {\n this.onChange = fn;\n }\n\n /**\n * Register a callback to be called when the toggle group is touched.\n * @param fn The callback to register.\n * @internal\n */\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /**\n * Set the disabled state of the toggle group.\n * @param isDisabled Whether the toggle group is disabled.\n * @internal\n */\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.buttons?.forEach((button) => button.updateDisabled());\n }\n}\n","import {\n AfterContentInit,\n booleanAttribute,\n ContentChildren,\n Directive,\n EventEmitter,\n Input,\n OnChanges,\n OnInit,\n QueryList,\n SimpleChanges\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport {\n injectRovingFocusGroup,\n RdxRovingFocusGroupDirective\n} from '@radix-ng/primitives/roving-focus';\n\nimport type { RdxToggleGroupButtonDirective } from './toggle-group-button.directive';\nimport { RdxToggleGroupButtonToken } from './toggle-group-button.token';\nimport { RdxToggleGroupToken } from './toggle-group.token';\n\n@Directive({\n selector: '[rdxToggleGroup]',\n standalone: true,\n hostDirectives: [\n {\n directive: RdxRovingFocusGroupDirective,\n inputs: ['rdxRovingFocusGroupWrap:wrap', 'rdxRovingFocusGroupOrientation:orientation']\n }\n ],\n providers: [\n { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupDirective },\n { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupDirective, multi: true }\n ],\n host: {\n role: 'group',\n '[attr.data-orientation]': 'orientation',\n '(focusout)': 'onTouched?.()'\n }\n})\nexport class RdxToggleGroupDirective\n implements OnInit, OnChanges, AfterContentInit, ControlValueAccessor\n{\n /**\n * Access the roving focus group\n */\n private readonly rovingFocusGroup = injectRovingFocusGroup();\n\n /**\n * The selected toggle button.\n */\n @Input('rdxToggleGroupValue') value: string | null = null;\n\n /**\n * The orientation of the toggle group.\n * @default 'horizontal'\n */\n @Input('rdxToggleGroupOrientation') orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * Whether the toggle group is disabled.\n * @default false\n */\n @Input({ alias: 'rdxToggleGroupDisabled', transform: booleanAttribute }) disabled = false;\n\n /**\n * Whether the toggle group roving focus should wrap.\n * @default true\n */\n @Input({ alias: 'rdxToggleGroupWrap', transform: booleanAttribute }) wrap = true;\n\n /**\n * Event emitted when the selected toggle button changes.\n */\n @Input('rdxToggleGroupValueChange') readonly valueChange = new EventEmitter<string | null>();\n\n /**\n * Access the buttons in the toggle group.\n */\n @ContentChildren(RdxToggleGroupButtonToken)\n protected buttons?: QueryList<RdxToggleGroupButtonDirective>;\n\n /**\n * The value change callback.\n */\n private onChange?: (value: string | null) => void;\n\n /**\n * The touched callback.\n */\n protected onTouched?: () => void;\n\n ngOnInit(): void {\n // the toggle button group has a default orientation of horizontal\n // whereas the roving focus group has a default orientation of vertical\n // if the toggle button group input is not defined, the orientation will not be set\n // in the roving focus group and the default vertical orientation will be used.\n // we must initially set the orientation of the roving focus group to match the toggle button group orientation\n this.rovingFocusGroup.setOrientation(this.orientation);\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if ('disabled' in changes) {\n this.buttons?.forEach((button) => button.updateDisabled());\n }\n }\n\n ngAfterContentInit(): void {\n if (this.disabled) {\n this.buttons?.forEach((button) => button.updateDisabled());\n }\n }\n\n /**\n * Determine if a value is selected.\n * @param value The value to check.\n * @returns Whether the value is selected.\n * @internal\n */\n isSelected(value: string): boolean {\n return this.value === value;\n }\n\n /**\n * Toggle a value.\n * @param value The value to toggle.\n * @internal\n */\n toggle(value: string): void {\n if (this.disabled) {\n return;\n }\n\n this.value = this.value === value ? null : value;\n this.valueChange.emit(this.value);\n this.onChange?.(this.value);\n }\n\n /**\n * Select a value from Angular forms.\n * @param value The value to select.\n * @internal\n */\n writeValue(value: string): void {\n this.value = value;\n }\n\n /**\n * Register a callback to be called when the value changes.\n * @param fn The callback to register.\n * @internal\n */\n registerOnChange(fn: (value: string | null) => void): void {\n this.onChange = fn;\n }\n\n /**\n * Register a callback to be called when the toggle group is touched.\n * @param fn The callback to register.\n * @internal\n */\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /**\n * Set the disabled state of the toggle group.\n * @param isDisabled Whether the toggle group is disabled.\n * @internal\n */\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.buttons?.forEach((button) => button.updateDisabled());\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
@@ -2,13 +2,18 @@ import { ElementRef } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
3
3
|
export declare class RdxLabelDirective {
|
4
4
|
private el;
|
5
|
+
/** The HTML id attribute applied to this element. */
|
6
|
+
protected readonly _id: import("@angular/core").WritableSignal<string>;
|
5
7
|
/**
|
6
8
|
* The id of the element the label is associated with.
|
7
9
|
* @default '-'
|
8
10
|
*/
|
9
11
|
htmlFor: string;
|
12
|
+
/** The HTML id of the Label. */
|
13
|
+
set id(id: string);
|
14
|
+
get id(): string;
|
10
15
|
constructor(el: ElementRef);
|
11
16
|
onMouseDown(event: MouseEvent): void;
|
12
17
|
static ɵfac: i0.ɵɵFactoryDeclaration<RdxLabelDirective, [{ optional: true; }]>;
|
13
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxLabelDirective, "label[rdxLabel]", never, { "htmlFor": { "alias": "htmlFor"; "required": false; }; }, {}, never, never, true, never>;
|
18
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxLabelDirective, "label[rdxLabel]", never, { "htmlFor": { "alias": "htmlFor"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, never, never, true, never>;
|
14
19
|
}
|