@tailng-ui/primitives 0.21.0 → 0.22.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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tailng-ui/primitives",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.22.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
}
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@tailng-ui/cdk": "^0.
|
|
19
|
+
"@tailng-ui/cdk": "^0.18.0"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"@angular/core": "^21.1.0",
|
|
@@ -12,6 +12,7 @@ export declare class TngOptionDirective<T = unknown> implements AfterViewInit, O
|
|
|
12
12
|
get hostId(): string;
|
|
13
13
|
get ariaSelected(): 'true' | 'false';
|
|
14
14
|
get ariaDisabled(): 'true' | null;
|
|
15
|
+
readonly tabIndex = "-1";
|
|
15
16
|
get dataActive(): '' | null;
|
|
16
17
|
get dataSelected(): '' | null;
|
|
17
18
|
get dataDisabled(): '' | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"option.directive.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/listbox/option.directive.ts"],"names":[],"mappings":"AACA,OAAO,EACL,aAAa,EAKb,SAAS,EAKV,MAAM,eAAe,CAAC;;AAOvB,qBAGa,kBAAkB,CAAC,CAAC,GAAG,OAAO,CAAE,YAAW,aAAa,EAAE,SAAS;IAC9E,QAAQ,qDAA0B;IAClC,QAAQ,+CAAyB;IAEjC,OAAO,CAAC,EAAE,CAAmC;IAC7C,OAAO,CAAC,OAAO,CAAuB;IACtC,OAAO,CAAC,EAAE,CAAc;IAGxB,OAAO,CAAC,UAAU,CAAiB;IAGnC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAG3B;IAGH,IAAI,SAAY;IAEhB,IACI,MAAM,WAET;IAED,IACI,YAAY,IAAI,MAAM,GAAG,OAAO,CAEnC;IAED,IACI,YAAY,IAAI,MAAM,GAAG,IAAI,CAEhC;IAGD,IACI,UAAU,IAAI,EAAE,GAAG,IAAI,CAE1B;IAED,IACI,YAAY,IAAI,EAAE,GAAG,IAAI,CAE5B;IAED,IACI,YAAY,IAAI,EAAE,GAAG,IAAI,CAE5B;IAED,eAAe;IAWf,WAAW;IAOX,aAAa,CAAC,KAAK,EAAE,YAAY;IAcjC,OAAO,CAAC,UAAU;
|
|
1
|
+
{"version":3,"file":"option.directive.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/listbox/option.directive.ts"],"names":[],"mappings":"AACA,OAAO,EACL,aAAa,EAKb,SAAS,EAKV,MAAM,eAAe,CAAC;;AAOvB,qBAGa,kBAAkB,CAAC,CAAC,GAAG,OAAO,CAAE,YAAW,aAAa,EAAE,SAAS;IAC9E,QAAQ,qDAA0B;IAClC,QAAQ,+CAAyB;IAEjC,OAAO,CAAC,EAAE,CAAmC;IAC7C,OAAO,CAAC,OAAO,CAAuB;IACtC,OAAO,CAAC,EAAE,CAAc;IAGxB,OAAO,CAAC,UAAU,CAAiB;IAGnC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAG3B;IAGH,IAAI,SAAY;IAEhB,IACI,MAAM,WAET;IAED,IACI,YAAY,IAAI,MAAM,GAAG,OAAO,CAEnC;IAED,IACI,YAAY,IAAI,MAAM,GAAG,IAAI,CAEhC;IAGD,QAAQ,CAAC,QAAQ,QAAQ;IAGzB,IACI,UAAU,IAAI,EAAE,GAAG,IAAI,CAE1B;IAED,IACI,YAAY,IAAI,EAAE,GAAG,IAAI,CAE5B;IAED,IACI,YAAY,IAAI,EAAE,GAAG,IAAI,CAE5B;IAED,eAAe;IAWf,WAAW;IAOX,aAAa,CAAC,KAAK,EAAE,YAAY;IAcjC,OAAO,CAAC,UAAU;yCAtFP,kBAAkB;2CAAlB,kBAAkB;CA+F9B"}
|
|
@@ -28,6 +28,7 @@ export class TngOptionDirective {
|
|
|
28
28
|
get ariaDisabled() {
|
|
29
29
|
return this.disabled() ? 'true' : null;
|
|
30
30
|
}
|
|
31
|
+
tabIndex = '-1';
|
|
31
32
|
// ✅ Tailwind-friendly state attributes (presence based)
|
|
32
33
|
get dataActive() {
|
|
33
34
|
return this.listbox.isActive(this.id) ? '' : null;
|
|
@@ -75,7 +76,7 @@ export class TngOptionDirective {
|
|
|
75
76
|
return this.listbox.isValueSelected(value);
|
|
76
77
|
}
|
|
77
78
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
78
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngOptionDirective, isStandalone: true, selector: "[tngOption]", inputs: { tngValue: { classPropertyName: "tngValue", publicName: "tngValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "onPointerDown($event)" }, properties: { "attr.role": "this.role", "attr.id": "this.hostId", "attr.aria-selected": "this.ariaSelected", "attr.aria-disabled": "this.ariaDisabled", "attr.data-active": "this.dataActive", "attr.data-selected": "this.dataSelected", "attr.data-disabled": "this.dataDisabled" } }, ngImport: i0 });
|
|
79
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngOptionDirective, isStandalone: true, selector: "[tngOption]", inputs: { tngValue: { classPropertyName: "tngValue", publicName: "tngValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "onPointerDown($event)" }, properties: { "attr.role": "this.role", "attr.id": "this.hostId", "attr.aria-selected": "this.ariaSelected", "attr.aria-disabled": "this.ariaDisabled", "attr.tabindex": "this.tabIndex", "attr.data-active": "this.dataActive", "attr.data-selected": "this.dataSelected", "attr.data-disabled": "this.dataDisabled" } }, ngImport: i0 });
|
|
79
80
|
}
|
|
80
81
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngOptionDirective, decorators: [{
|
|
81
82
|
type: Directive,
|
|
@@ -94,6 +95,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
94
95
|
}], ariaDisabled: [{
|
|
95
96
|
type: HostBinding,
|
|
96
97
|
args: ['attr.aria-disabled']
|
|
98
|
+
}], tabIndex: [{
|
|
99
|
+
type: HostBinding,
|
|
100
|
+
args: ['attr.tabindex']
|
|
97
101
|
}], dataActive: [{
|
|
98
102
|
type: HostBinding,
|
|
99
103
|
args: ['attr.data-active']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"option.directive.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/listbox/option.directive.ts"],"names":[],"mappings":"AAAA,sBAAsB;AACtB,OAAO,EAEL,SAAS,EACT,UAAU,EACV,WAAW,EACX,YAAY,EAEZ,MAAM,EACN,MAAM,EACN,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;;AAEvC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;AAKlD,MAAM,OAAO,kBAAkB;IAC7B,QAAQ,GAAG,KAAK,8DAAiB,CAAC;IAClC,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC,CAAC;IAEzB,EAAE,GAAG,MAAM,CAAC,CAAA,UAAuB,CAAA,CAAC,CAAC;IACrC,OAAO,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;IAC9B,EAAE,GAAG,QAAQ,EAAE,CAAC;IAExB,iEAAiE;IACzD,UAAU,GAAG,MAAM,CAAC,KAAK,sDAAC,CAAC;IAEnC,+DAA+D;IAC9C,aAAa,GAAG,MAAM,CAAC,GAAG,EAAE;QAC3C,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAAE,OAAO;QAC/B,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC9D,CAAC,yDAAC,CAAC;IAGH,IAAI,GAAG,QAAQ,CAAC;IAEhB,IACI,MAAM;QACR,OAAO,IAAI,CAAC,EAAE,CAAC;IACjB,CAAC;IAED,IACI,YAAY;QACd,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IAC9C,CAAC;IAED,IACI,YAAY;QACd,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;IACzC,CAAC;
|
|
1
|
+
{"version":3,"file":"option.directive.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/listbox/option.directive.ts"],"names":[],"mappings":"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","sourcesContent":["// option.directive.ts\nimport {\n AfterViewInit,\n Directive,\n ElementRef,\n HostBinding,\n HostListener,\n OnDestroy,\n effect,\n inject,\n input,\n signal,\n} from '@angular/core';\n\nimport { createTngIdFactory } from '@tailng-ui/cdk';\nimport { TNG_LISTBOX } from './tokens';\n\nconst createId = createTngIdFactory('tng-option');\n\n@Directive({\n selector: '[tngOption]',\n})\nexport class TngOptionDirective<T = unknown> implements AfterViewInit, OnDestroy {\n tngValue = input<T | undefined>();\n disabled = input<boolean>(false);\n\n private el = inject(ElementRef<HTMLElement>);\n private listbox = inject(TNG_LISTBOX);\n private id = createId();\n\n // gate to ensure we only push updates after initial registration\n private registered = signal(false);\n\n // ✅ effect is created in injection context (field initializer)\n private readonly _syncDisabled = effect(() => {\n if (!this.registered()) return;\n this.listbox.updateOptionDisabled(this.id, this.disabled());\n });\n\n @HostBinding('attr.role')\n role = 'option';\n\n @HostBinding('attr.id')\n get hostId() {\n return this.id;\n }\n\n @HostBinding('attr.aria-selected')\n get ariaSelected(): 'true' | 'false' {\n return this.isSelected() ? 'true' : 'false';\n }\n\n @HostBinding('attr.aria-disabled')\n get ariaDisabled(): 'true' | null {\n return this.disabled() ? 'true' : null;\n }\n\n @HostBinding('attr.tabindex')\n readonly tabIndex = '-1';\n\n // ✅ Tailwind-friendly state attributes (presence based)\n @HostBinding('attr.data-active')\n get dataActive(): '' | null {\n return this.listbox.isActive(this.id) ? '' : null;\n }\n\n @HostBinding('attr.data-selected')\n get dataSelected(): '' | null {\n return this.isSelected() ? '' : null;\n }\n\n @HostBinding('attr.data-disabled')\n get dataDisabled(): '' | null {\n return this.disabled() ? '' : null;\n }\n\n ngAfterViewInit() {\n const value = this.tngValue();\n if (value === undefined) return;\n\n const text = this.el.nativeElement.textContent?.trim() ?? '';\n // pass text for typeahead\n this.listbox.registerOption(this.id, value, this.disabled(), text, this.el.nativeElement);\n\n this.registered.set(true);\n }\n\n ngOnDestroy() {\n this.listbox.unregisterOption(this.id);\n this.registered.set(false);\n // Angular will destroy directive + tear down effect automatically\n }\n\n @HostListener('pointerdown', ['$event'])\n onPointerDown(event: PointerEvent) {\n if (this.disabled()) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n if (event.button !== 0) return;\n\n // Prevent focus from moving / text selection, keep listbox behavior stable.\n event.preventDefault();\n\n this.listbox.handleOptionClick(this.id, event.shiftKey);\n }\n\n private isSelected(): boolean {\n if (this.listbox.isSelected(this.id)) return true;\n if (this.disabled()) return false;\n\n const value = this.tngValue();\n if (value === undefined) return false;\n\n return this.listbox.isValueSelected(value);\n }\n}\n"]}
|