@tailng-ui/primitives 0.26.0 → 0.27.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 +1 -1
- package/src/lib/form/multi-autocomplete/tng-multi-autocomplete.d.ts +2 -0
- package/src/lib/form/multi-autocomplete/tng-multi-autocomplete.d.ts.map +1 -1
- package/src/lib/form/multi-autocomplete/tng-multi-autocomplete.js +31 -2
- package/src/lib/form/multi-autocomplete/tng-multi-autocomplete.js.map +1 -1
- package/src/lib/form/multi-autocomplete/tng-multi-autocomplete.overlay.d.ts +2 -0
- package/src/lib/form/multi-autocomplete/tng-multi-autocomplete.overlay.d.ts.map +1 -1
- package/src/lib/form/multi-autocomplete/tng-multi-autocomplete.overlay.js +56 -1
- package/src/lib/form/multi-autocomplete/tng-multi-autocomplete.overlay.js.map +1 -1
package/package.json
CHANGED
|
@@ -44,6 +44,8 @@ export declare class TngMultiAutocomplete<T = unknown> {
|
|
|
44
44
|
setOverlayElement(element: HTMLElement | null): void;
|
|
45
45
|
getOverlayElement(): HTMLElement | null;
|
|
46
46
|
containsOwnedNode(node: Node | null): boolean;
|
|
47
|
+
protected onHostClick(event: MouseEvent): void;
|
|
48
|
+
private getTriggerElement;
|
|
47
49
|
static ɵfac: i0.ɵɵFactoryDeclaration<TngMultiAutocomplete<any>, never>;
|
|
48
50
|
static ɵdir: i0.ɵɵDirectiveDeclaration<TngMultiAutocomplete<any>, "[tngMultiAutocomplete]", ["tngMultiAutocomplete"], { "open": { "alias": "open"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "query": { "alias": "query"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "value": "valueChange"; "query": "queryChange"; "queryChange": "queryChange"; }, never, never, true, never>;
|
|
49
51
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tng-multi-autocomplete.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/multi-autocomplete/tng-multi-autocomplete.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"tng-multi-autocomplete.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/multi-autocomplete/tng-multi-autocomplete.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;;AAE7F,qBAKa,oBAAoB,CAAC,CAAC,GAAG,OAAO;IAC3C,QAAQ,CAAC,WAAW,MAAiD;IAErE,+BAA+B;IAC/B,QAAQ,CAAC,IAAI,+CAAyB;IAEtC,sBAAsB;IACtB,QAAQ,CAAC,QAAQ,+CAAyB;IAE1C,sCAAsC;IACtC,QAAQ,CAAC,KAAK,oDAA2B;IAEzC,gDAAgD;IAChD,QAAQ,CAAC,KAAK,8CAAqB;IAEnC,oFAAoF;IACpF,QAAQ,CAAC,WAAW,mDAAoB;IAExC,sCAAsC;IACtC,QAAQ,CAAC,OAAO,+CAAyB;IACzC,QAAQ,CAAC,OAAO,+CAAyB;IAGzC,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,WAAW,CAA+C;IAClE,OAAO,CAAC,eAAe,CAA4B;IAKnD,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAG,oBAAoB,CAAU;IAG5D,SAAS,KAAK,SAAS,IAAI,MAAM,GAAG,QAAQ,CAE3C;IAGD,SAAS,KAAK,YAAY,IAAI,EAAE,GAAG,IAAI,CAEtC;IAGD,SAAS,KAAK,WAAW,IAAI,EAAE,GAAG,IAAI,CAErC;IAGD,SAAS,KAAK,WAAW,IAAI,EAAE,GAAG,IAAI,CAErC;IAID,UAAU,IAAI,IAAI;IAKlB,KAAK,IAAI,IAAI;IAIb,UAAU,IAAI,IAAI;IASlB,GAAG,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI;IAUnB,MAAM,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI;IAWtB,MAAM,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI;IAatB,KAAK,IAAI,IAAI;IAKb,UAAU,IAAI,IAAI;IAalB,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAGrC,YAAY,IAAI,MAAM,GAAG,IAAI;IAI7B,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAGrC,YAAY,IAAI,MAAM,GAAG,IAAI;IAI7B,qBAAqB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAG9C,qBAAqB,IAAI,MAAM,GAAG,IAAI;IAItC,aAAa,CAAC,GAAG,EAAE,8BAA8B,GAAG,IAAI,GAAG,IAAI;IAG/D,aAAa,IAAI,8BAA8B,GAAG,IAAI;IAItD,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI;IAIpD,iBAAiB,IAAI,WAAW,GAAG,IAAI;IAIvC,iBAAiB,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,OAAO;IAY7C,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IA+B9C,OAAO,CAAC,iBAAiB;yCA7Md,oBAAoB;2CAApB,oBAAoB;CAkNhC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Directive, ElementRef, HostBinding, inject, input, model, output, } from '@angular/core';
|
|
1
|
+
import { Directive, ElementRef, HostBinding, HostListener, inject, input, model, output, } from '@angular/core';
|
|
2
2
|
import { TNG_MULTI_AUTOCOMPLETE } from './tng-multi-autocomplete.tokens';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
export class TngMultiAutocomplete {
|
|
@@ -136,8 +136,34 @@ export class TngMultiAutocomplete {
|
|
|
136
136
|
return (this.hostElement.contains(node) ||
|
|
137
137
|
this._overlayElement?.contains(node) === true);
|
|
138
138
|
}
|
|
139
|
+
onHostClick(event) {
|
|
140
|
+
if (this.disabled()) {
|
|
141
|
+
return;
|
|
142
|
+
}
|
|
143
|
+
const trigger = this.getTriggerElement();
|
|
144
|
+
if (trigger === null) {
|
|
145
|
+
return;
|
|
146
|
+
}
|
|
147
|
+
const target = event.target;
|
|
148
|
+
if (!(target instanceof Node)) {
|
|
149
|
+
return;
|
|
150
|
+
}
|
|
151
|
+
if (trigger.contains(target)) {
|
|
152
|
+
return;
|
|
153
|
+
}
|
|
154
|
+
if (target instanceof Element) {
|
|
155
|
+
const interactiveAncestor = target.closest('button, a[href], input, textarea, select, summary, [contenteditable=""], [contenteditable="true"], [role="button"], [role="link"]');
|
|
156
|
+
if (interactiveAncestor !== null) {
|
|
157
|
+
return;
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
trigger.focus({ preventScroll: true });
|
|
161
|
+
}
|
|
162
|
+
getTriggerElement() {
|
|
163
|
+
return this.hostElement.querySelector('[data-slot="multi-autocomplete-trigger"]');
|
|
164
|
+
}
|
|
139
165
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngMultiAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
140
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngMultiAutocomplete, isStandalone: true, selector: "[tngMultiAutocomplete]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", value: "valueChange", query: "queryChange", queryChange: "queryChange" }, host: { properties: { "attr.data-slot": "this.dataSlot", "attr.data-state": "this.dataState", "attr.data-disabled": "this.dataDisabled", "attr.data-loading": "this.dataLoading", "attr.data-invalid": "this.dataInvalid" } }, providers: [{ provide: TNG_MULTI_AUTOCOMPLETE, useExisting: TngMultiAutocomplete }], exportAs: ["tngMultiAutocomplete"], ngImport: i0 });
|
|
166
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngMultiAutocomplete, isStandalone: true, selector: "[tngMultiAutocomplete]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", value: "valueChange", query: "queryChange", queryChange: "queryChange" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "attr.data-slot": "this.dataSlot", "attr.data-state": "this.dataState", "attr.data-disabled": "this.dataDisabled", "attr.data-loading": "this.dataLoading", "attr.data-invalid": "this.dataInvalid" } }, providers: [{ provide: TNG_MULTI_AUTOCOMPLETE, useExisting: TngMultiAutocomplete }], exportAs: ["tngMultiAutocomplete"], ngImport: i0 });
|
|
141
167
|
}
|
|
142
168
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngMultiAutocomplete, decorators: [{
|
|
143
169
|
type: Directive,
|
|
@@ -161,5 +187,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
161
187
|
}], dataInvalid: [{
|
|
162
188
|
type: HostBinding,
|
|
163
189
|
args: ['attr.data-invalid']
|
|
190
|
+
}], onHostClick: [{
|
|
191
|
+
type: HostListener,
|
|
192
|
+
args: ['click', ['$event']]
|
|
164
193
|
}] } });
|
|
165
194
|
//# sourceMappingURL=tng-multi-autocomplete.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tng-multi-autocomplete.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/multi-autocomplete/tng-multi-autocomplete.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Directive,\n ElementRef,\n HostBinding,\n inject,\n input,\n model,\n output,\n} from '@angular/core';\nimport { TNG_MULTI_AUTOCOMPLETE } from './tng-multi-autocomplete.tokens';\nimport type { TngMultiAutocompleteListboxApi } from './tng-multi-autocomplete.listbox.types';\n\n@Directive({\n selector: '[tngMultiAutocomplete]',\n exportAs: 'tngMultiAutocomplete',\n providers: [{ provide: TNG_MULTI_AUTOCOMPLETE, useExisting: TngMultiAutocomplete }],\n})\nexport class TngMultiAutocomplete<T = unknown> {\n readonly hostElement = inject(ElementRef<HTMLElement>).nativeElement;\n\n /** Whether overlay is open. */\n readonly open = model<boolean>(false);\n\n /** Disabled state. */\n readonly disabled = input<boolean>(false);\n\n /** Selected values (always array). */\n readonly value = model<readonly T[]>([]);\n\n /** Current input query (used for filtering). */\n readonly query = model<string>('');\n\n /** Emits whenever query changes (focus-open emit, typing, selection-clear, etc.) */\n readonly queryChange = output<string>();\n\n /** Optional states (styling/aria). */\n readonly loading = input<boolean>(false);\n readonly invalid = input<boolean>(false);\n\n // ---- internal bridge state ----\n private _contentId: string | null = null;\n private _listboxId: string | null = null;\n private _activeId: string | null = null;\n private _listboxApi: TngMultiAutocompleteListboxApi | null = null;\n private _overlayElement: HTMLElement | null = null;\n\n // ---- host styling hooks ----\n\n @HostBinding('attr.data-slot')\n protected readonly dataSlot = 'multi-autocomplete' as const;\n\n @HostBinding('attr.data-state')\n protected get dataState(): 'open' | 'closed' {\n return this.open() ? 'open' : 'closed';\n }\n\n @HostBinding('attr.data-disabled')\n protected get dataDisabled(): '' | null {\n return this.disabled() ? '' : null;\n }\n\n @HostBinding('attr.data-loading')\n protected get dataLoading(): '' | null {\n return this.loading() ? '' : null;\n }\n\n @HostBinding('attr.data-invalid')\n protected get dataInvalid(): '' | null {\n return this.invalid() ? '' : null;\n }\n\n // ---- overlay control ----\n\n openSelect(): void {\n if (this.disabled()) return;\n this.open.set(true);\n }\n\n close(): void {\n this.open.set(false);\n }\n\n toggleOpen(): void {\n if (this.disabled()) return;\n this.open.set(!this.open());\n }\n\n // =========================================================\n // Selection API\n // =========================================================\n\n add(value: T): void {\n if (this.disabled()) return;\n\n const current = this.value();\n const exists = current.some((v) => Object.is(v, value));\n if (exists) return;\n\n this.value.set([...current, value]);\n }\n\n remove(value: T): void {\n if (this.disabled()) return;\n\n const current = this.value();\n const next = current.filter((v) => !Object.is(v, value));\n\n if (next.length !== current.length) {\n this.value.set(next);\n }\n }\n\n toggle(value: T): void {\n if (this.disabled()) return;\n\n const current = this.value();\n const exists = current.some((v) => Object.is(v, value));\n\n if (exists) {\n this.value.set(current.filter((v) => !Object.is(v, value)));\n } else {\n this.value.set([...current, value]);\n }\n }\n\n clear(): void {\n if (this.disabled()) return;\n this.value.set([]);\n }\n\n removeLast(): void {\n if (this.disabled()) return;\n\n const current = this.value();\n if (current.length === 0) return;\n\n this.value.set(current.slice(0, -1));\n }\n\n // =========================================================\n // Listbox bridge\n // =========================================================\n\n setContentId(id: string | null): void {\n this._contentId = id;\n }\n getContentId(): string | null {\n return this._contentId;\n }\n\n setListboxId(id: string | null): void {\n this._listboxId = id;\n }\n getListboxId(): string | null {\n return this._listboxId;\n }\n\n setActiveDescendantId(id: string | null): void {\n this._activeId = id;\n }\n getActiveDescendantId(): string | null {\n return this._activeId;\n }\n\n setListboxApi(api: TngMultiAutocompleteListboxApi | null): void {\n this._listboxApi = api;\n }\n getListboxApi(): TngMultiAutocompleteListboxApi | null {\n return this._listboxApi;\n }\n\n setOverlayElement(element: HTMLElement | null): void {\n this._overlayElement = element;\n }\n\n getOverlayElement(): HTMLElement | null {\n return this._overlayElement;\n }\n\n containsOwnedNode(node: Node | null): boolean {\n if (node === null) {\n return false;\n }\n\n return (\n this.hostElement.contains(node) ||\n this._overlayElement?.contains(node) === true\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"tng-multi-autocomplete.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/multi-autocomplete/tng-multi-autocomplete.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Directive,\n ElementRef,\n HostBinding,\n HostListener,\n inject,\n input,\n model,\n output,\n} from '@angular/core';\nimport { TNG_MULTI_AUTOCOMPLETE } from './tng-multi-autocomplete.tokens';\nimport type { TngMultiAutocompleteListboxApi } from './tng-multi-autocomplete.listbox.types';\n\n@Directive({\n selector: '[tngMultiAutocomplete]',\n exportAs: 'tngMultiAutocomplete',\n providers: [{ provide: TNG_MULTI_AUTOCOMPLETE, useExisting: TngMultiAutocomplete }],\n})\nexport class TngMultiAutocomplete<T = unknown> {\n readonly hostElement = inject(ElementRef<HTMLElement>).nativeElement;\n\n /** Whether overlay is open. */\n readonly open = model<boolean>(false);\n\n /** Disabled state. */\n readonly disabled = input<boolean>(false);\n\n /** Selected values (always array). */\n readonly value = model<readonly T[]>([]);\n\n /** Current input query (used for filtering). */\n readonly query = model<string>('');\n\n /** Emits whenever query changes (focus-open emit, typing, selection-clear, etc.) */\n readonly queryChange = output<string>();\n\n /** Optional states (styling/aria). */\n readonly loading = input<boolean>(false);\n readonly invalid = input<boolean>(false);\n\n // ---- internal bridge state ----\n private _contentId: string | null = null;\n private _listboxId: string | null = null;\n private _activeId: string | null = null;\n private _listboxApi: TngMultiAutocompleteListboxApi | null = null;\n private _overlayElement: HTMLElement | null = null;\n\n // ---- host styling hooks ----\n\n @HostBinding('attr.data-slot')\n protected readonly dataSlot = 'multi-autocomplete' as const;\n\n @HostBinding('attr.data-state')\n protected get dataState(): 'open' | 'closed' {\n return this.open() ? 'open' : 'closed';\n }\n\n @HostBinding('attr.data-disabled')\n protected get dataDisabled(): '' | null {\n return this.disabled() ? '' : null;\n }\n\n @HostBinding('attr.data-loading')\n protected get dataLoading(): '' | null {\n return this.loading() ? '' : null;\n }\n\n @HostBinding('attr.data-invalid')\n protected get dataInvalid(): '' | null {\n return this.invalid() ? '' : null;\n }\n\n // ---- overlay control ----\n\n openSelect(): void {\n if (this.disabled()) return;\n this.open.set(true);\n }\n\n close(): void {\n this.open.set(false);\n }\n\n toggleOpen(): void {\n if (this.disabled()) return;\n this.open.set(!this.open());\n }\n\n // =========================================================\n // Selection API\n // =========================================================\n\n add(value: T): void {\n if (this.disabled()) return;\n\n const current = this.value();\n const exists = current.some((v) => Object.is(v, value));\n if (exists) return;\n\n this.value.set([...current, value]);\n }\n\n remove(value: T): void {\n if (this.disabled()) return;\n\n const current = this.value();\n const next = current.filter((v) => !Object.is(v, value));\n\n if (next.length !== current.length) {\n this.value.set(next);\n }\n }\n\n toggle(value: T): void {\n if (this.disabled()) return;\n\n const current = this.value();\n const exists = current.some((v) => Object.is(v, value));\n\n if (exists) {\n this.value.set(current.filter((v) => !Object.is(v, value)));\n } else {\n this.value.set([...current, value]);\n }\n }\n\n clear(): void {\n if (this.disabled()) return;\n this.value.set([]);\n }\n\n removeLast(): void {\n if (this.disabled()) return;\n\n const current = this.value();\n if (current.length === 0) return;\n\n this.value.set(current.slice(0, -1));\n }\n\n // =========================================================\n // Listbox bridge\n // =========================================================\n\n setContentId(id: string | null): void {\n this._contentId = id;\n }\n getContentId(): string | null {\n return this._contentId;\n }\n\n setListboxId(id: string | null): void {\n this._listboxId = id;\n }\n getListboxId(): string | null {\n return this._listboxId;\n }\n\n setActiveDescendantId(id: string | null): void {\n this._activeId = id;\n }\n getActiveDescendantId(): string | null {\n return this._activeId;\n }\n\n setListboxApi(api: TngMultiAutocompleteListboxApi | null): void {\n this._listboxApi = api;\n }\n getListboxApi(): TngMultiAutocompleteListboxApi | null {\n return this._listboxApi;\n }\n\n setOverlayElement(element: HTMLElement | null): void {\n this._overlayElement = element;\n }\n\n getOverlayElement(): HTMLElement | null {\n return this._overlayElement;\n }\n\n containsOwnedNode(node: Node | null): boolean {\n if (node === null) {\n return false;\n }\n\n return (\n this.hostElement.contains(node) ||\n this._overlayElement?.contains(node) === true\n );\n }\n\n @HostListener('click', ['$event'])\n protected onHostClick(event: MouseEvent): void {\n if (this.disabled()) {\n return;\n }\n\n const trigger = this.getTriggerElement();\n if (trigger === null) {\n return;\n }\n\n const target = event.target;\n if (!(target instanceof Node)) {\n return;\n }\n\n if (trigger.contains(target)) {\n return;\n }\n\n if (target instanceof Element) {\n const interactiveAncestor = target.closest(\n 'button, a[href], input, textarea, select, summary, [contenteditable=\"\"], [contenteditable=\"true\"], [role=\"button\"], [role=\"link\"]',\n );\n if (interactiveAncestor !== null) {\n return;\n }\n }\n\n trigger.focus({ preventScroll: true });\n }\n\n private getTriggerElement(): HTMLInputElement | null {\n return this.hostElement.querySelector(\n '[data-slot=\"multi-autocomplete-trigger\"]',\n ) as HTMLInputElement | null;\n }\n}\n"]}
|
|
@@ -18,6 +18,8 @@ export declare class TngMultiAutocompleteOverlay {
|
|
|
18
18
|
private teardownRepositionListeners;
|
|
19
19
|
private setupOutsidePointer;
|
|
20
20
|
private teardownOutsidePointer;
|
|
21
|
+
private syncPortalledThemeVars;
|
|
22
|
+
private clearPortalledThemeVars;
|
|
21
23
|
private mountToBodyAndPosition;
|
|
22
24
|
private restoreToPlaceholder;
|
|
23
25
|
static ɵfac: i0.ɵɵFactoryDeclaration<TngMultiAutocompleteOverlay, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tng-multi-autocomplete.overlay.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/multi-autocomplete/tng-multi-autocomplete.overlay.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"tng-multi-autocomplete.overlay.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/multi-autocomplete/tng-multi-autocomplete.overlay.ts"],"names":[],"mappings":";AAsDA,qBAIa,2BAA2B;IACtC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAwD;IAC9E,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAmC;IACzD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IAEjD,OAAO,CAAC,oBAAoB,CAA6B;IACzD,OAAO,CAAC,oBAAoB,CAA6B;IACzD,OAAO,CAAC,cAAc,CAA+B;IACrD,OAAO,CAAC,wBAAwB,CAA6B;IAC7D,OAAO,CAAC,WAAW,CAAwB;IAC3C,OAAO,CAAC,cAAc,CAAqB;IAG3C,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAG,4BAA4B,CAAU;IAGpE,SAAS,KAAK,MAAM,IAAI,EAAE,GAAG,IAAI,CAEhC;;IA2BD,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,UAAU;IAkBlB,OAAO,CAAC,wBAAwB;IA2BhC,OAAO,CAAC,2BAA2B;IASnC,OAAO,CAAC,mBAAmB;IAqB3B,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,sBAAsB;IAqB9B,OAAO,CAAC,uBAAuB;IAU/B,OAAO,CAAC,sBAAsB;IA4B9B,OAAO,CAAC,oBAAoB;yCA5LjB,2BAA2B;2CAA3B,2BAA2B;CAmNvC"}
|
|
@@ -2,6 +2,28 @@ import { DestroyRef, Directive, ElementRef, HostBinding, effect, inject, } from
|
|
|
2
2
|
import { computeOverlayPosition } from '@tailng-ui/cdk';
|
|
3
3
|
import { TNG_MULTI_AUTOCOMPLETE } from './tng-multi-autocomplete.tokens';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
|
+
const PORTALLED_MULTI_AUTOCOMPLETE_THEME_VARS = [
|
|
6
|
+
'--tng-multi-autocomplete-radius',
|
|
7
|
+
'--tng-multi-autocomplete-padding',
|
|
8
|
+
'--tng-multi-autocomplete-trigger-py',
|
|
9
|
+
'--tng-multi-autocomplete-trigger-px',
|
|
10
|
+
'--tng-multi-autocomplete-chip-py',
|
|
11
|
+
'--tng-multi-autocomplete-chip-px',
|
|
12
|
+
'--tng-multi-autocomplete-option-py',
|
|
13
|
+
'--tng-multi-autocomplete-option-px',
|
|
14
|
+
'--tng-multi-autocomplete-border',
|
|
15
|
+
'--tng-multi-autocomplete-border-strong',
|
|
16
|
+
'--tng-multi-autocomplete-bg',
|
|
17
|
+
'--tng-multi-autocomplete-surface',
|
|
18
|
+
'--tng-multi-autocomplete-fg',
|
|
19
|
+
'--tng-multi-autocomplete-muted',
|
|
20
|
+
'--tng-multi-autocomplete-brand',
|
|
21
|
+
'--tng-multi-autocomplete-danger',
|
|
22
|
+
'--tng-multi-autocomplete-focus-ring',
|
|
23
|
+
'--tng-multi-autocomplete-ease',
|
|
24
|
+
'--tng-multi-autocomplete-shadow',
|
|
25
|
+
'--tng-multi-autocomplete-shadow-focus',
|
|
26
|
+
];
|
|
5
27
|
function rectFromClientRect(r) {
|
|
6
28
|
return { left: r.left, top: r.top, width: r.width, height: r.height };
|
|
7
29
|
}
|
|
@@ -125,6 +147,33 @@ export class TngMultiAutocompleteOverlay {
|
|
|
125
147
|
this.removeDocPointerListener?.();
|
|
126
148
|
this.removeDocPointerListener = null;
|
|
127
149
|
}
|
|
150
|
+
syncPortalledThemeVars() {
|
|
151
|
+
const panel = this.elRef.nativeElement;
|
|
152
|
+
const hostStyles = getComputedStyle(this.multi.hostElement);
|
|
153
|
+
for (const cssVar of PORTALLED_MULTI_AUTOCOMPLETE_THEME_VARS) {
|
|
154
|
+
const value = hostStyles.getPropertyValue(cssVar).trim();
|
|
155
|
+
if (value) {
|
|
156
|
+
panel.style.setProperty(cssVar, value);
|
|
157
|
+
}
|
|
158
|
+
else {
|
|
159
|
+
panel.style.removeProperty(cssVar);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
const colorScheme = hostStyles.colorScheme?.trim();
|
|
163
|
+
if (colorScheme && colorScheme !== 'normal') {
|
|
164
|
+
panel.style.colorScheme = colorScheme;
|
|
165
|
+
}
|
|
166
|
+
else {
|
|
167
|
+
panel.style.removeProperty('color-scheme');
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
clearPortalledThemeVars() {
|
|
171
|
+
const panel = this.elRef.nativeElement;
|
|
172
|
+
for (const cssVar of PORTALLED_MULTI_AUTOCOMPLETE_THEME_VARS) {
|
|
173
|
+
panel.style.removeProperty(cssVar);
|
|
174
|
+
}
|
|
175
|
+
panel.style.removeProperty('color-scheme');
|
|
176
|
+
}
|
|
128
177
|
mountToBodyAndPosition() {
|
|
129
178
|
this.setupRepositionListeners();
|
|
130
179
|
const panel = this.elRef.nativeElement;
|
|
@@ -135,11 +184,15 @@ export class TngMultiAutocompleteOverlay {
|
|
|
135
184
|
panel.style.left = '0px';
|
|
136
185
|
panel.style.top = '0px';
|
|
137
186
|
panel.style.zIndex = '1000';
|
|
187
|
+
this.syncPortalledThemeVars();
|
|
138
188
|
queueMicrotask(() => {
|
|
139
189
|
if (!this.multi.open())
|
|
140
190
|
return;
|
|
141
191
|
const anchor = rectFromClientRect(this.findAnchorEl().getBoundingClientRect());
|
|
142
|
-
|
|
192
|
+
const viewportWidth = viewportRect().width;
|
|
193
|
+
const inlineSize = Math.max(0, Math.min(anchor.width, viewportWidth - 16));
|
|
194
|
+
panel.style.width = `${inlineSize}px`;
|
|
195
|
+
panel.style.minWidth = `${inlineSize}px`;
|
|
143
196
|
this.reposition();
|
|
144
197
|
});
|
|
145
198
|
this.setupOutsidePointer();
|
|
@@ -161,7 +214,9 @@ export class TngMultiAutocompleteOverlay {
|
|
|
161
214
|
panel.style.left = '';
|
|
162
215
|
panel.style.top = '';
|
|
163
216
|
panel.style.zIndex = '';
|
|
217
|
+
panel.style.width = '';
|
|
164
218
|
panel.style.minWidth = '';
|
|
219
|
+
this.clearPortalledThemeVars();
|
|
165
220
|
this.teardownOutsidePointer();
|
|
166
221
|
}
|
|
167
222
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngMultiAutocompleteOverlay, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tng-multi-autocomplete.overlay.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/multi-autocomplete/tng-multi-autocomplete.overlay.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n DestroyRef,\n Directive,\n ElementRef,\n HostBinding,\n effect,\n inject,\n} from '@angular/core';\nimport { computeOverlayPosition } from '@tailng-ui/cdk';\nimport { TNG_MULTI_AUTOCOMPLETE } from './tng-multi-autocomplete.tokens';\nimport type { TngMultiAutocomplete } from './tng-multi-autocomplete';\n\ntype MaybeRect = Readonly<{ left: number; top: number; width: number; height: number }>;\n\nfunction rectFromClientRect(r: DOMRect | ClientRect): MaybeRect {\n return { left: r.left, top: r.top, width: r.width, height: r.height };\n}\n\nfunction viewportRect(): MaybeRect {\n return {\n left: 0,\n top: 0,\n width: window.innerWidth || 1024,\n height: window.innerHeight || 768,\n };\n}\n\nfunction isInside(target: EventTarget | null, container: HTMLElement): boolean {\n return !!target && target instanceof Node && container.contains(target);\n}\n\n@Directive({\n selector: '[tngMultiAutocompleteOverlay]',\n exportAs: 'tngMultiAutocompleteOverlay',\n})\nexport class TngMultiAutocompleteOverlay {\n private readonly multi = inject<TngMultiAutocomplete>(TNG_MULTI_AUTOCOMPLETE);\n private readonly elRef = inject(ElementRef<HTMLElement>);\n private readonly destroyRef = inject(DestroyRef);\n\n private removeResizeListener: (() => void) | null = null;\n private removeScrollListener: (() => void) | null = null;\n private resizeObserver: ResizeObserver | null = null;\n private removeDocPointerListener: (() => void) | null = null;\n private placeholder: Comment | null = null;\n private originalParent: Node | null = null;\n\n @HostBinding('attr.data-slot')\n protected readonly dataSlot = 'multi-autocomplete-overlay' as const;\n\n @HostBinding('attr.hidden')\n protected get hidden(): '' | null {\n return this.multi.open() ? null : '';\n }\n\n constructor() {\n const hostEl = this.elRef.nativeElement;\n this.placeholder = document.createComment('tng-multi-autocomplete-overlay-anchor');\n this.originalParent = hostEl.parentNode;\n this.originalParent?.insertBefore(this.placeholder, hostEl);\n this.multi.setOverlayElement(hostEl);\n\n effect(() => {\n const open = this.multi.open();\n if (open) {\n this.mountToBodyAndPosition();\n } else {\n this.restoreToPlaceholder();\n }\n });\n\n this.destroyRef.onDestroy(() => {\n this.teardownOutsidePointer();\n this.restoreToPlaceholder(true);\n this.multi.setOverlayElement(null);\n this.placeholder = null;\n this.originalParent = null;\n });\n }\n\n private findAnchorEl(): HTMLElement {\n return this.multi.hostElement;\n }\n\n private reposition(): void {\n if (!this.multi.open()) return;\n\n const panel = this.elRef.nativeElement;\n const anchorEl = this.findAnchorEl();\n const anchor = rectFromClientRect(anchorEl.getBoundingClientRect());\n const overlay = rectFromClientRect(panel.getBoundingClientRect());\n const viewport = viewportRect();\n const result = computeOverlayPosition({\n anchorRect: anchor,\n overlayRect: overlay,\n viewportRect: viewport,\n });\n\n panel.style.left = `${result.x}px`;\n panel.style.top = `${result.y}px`;\n }\n\n private setupRepositionListeners(): void {\n let rafId: number | null = null;\n\n const schedule = () => {\n if (rafId !== null) return;\n\n rafId = requestAnimationFrame(() => {\n rafId = null;\n this.reposition();\n });\n };\n\n const onResize = () => schedule();\n const onScroll = () => schedule();\n\n window.addEventListener('resize', onResize);\n window.addEventListener('scroll', onScroll, true);\n this.removeResizeListener = () => window.removeEventListener('resize', onResize);\n this.removeScrollListener = () => window.removeEventListener('scroll', onScroll, true);\n\n if ('ResizeObserver' in window) {\n this.resizeObserver = new ResizeObserver(() => schedule());\n this.resizeObserver.observe(this.findAnchorEl());\n this.resizeObserver.observe(this.elRef.nativeElement);\n }\n }\n\n private teardownRepositionListeners(): void {\n this.removeResizeListener?.();\n this.removeScrollListener?.();\n this.removeResizeListener = null;\n this.removeScrollListener = null;\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n }\n\n private setupOutsidePointer(): void {\n if (this.removeDocPointerListener) return;\n\n const onPointerDown = (event: PointerEvent) => {\n if (!this.multi.open()) return;\n\n const panel = this.elRef.nativeElement;\n if (isInside(event.target, panel)) return;\n if (isInside(event.target, this.multi.hostElement)) return;\n if (event.target && (event.target as Element).closest?.('[data-slot=\"multi-autocomplete-option\"]')) {\n return;\n }\n\n this.multi.close();\n };\n\n document.addEventListener('pointerdown', onPointerDown, true);\n this.removeDocPointerListener = () =>\n document.removeEventListener('pointerdown', onPointerDown, true);\n }\n\n private teardownOutsidePointer(): void {\n this.removeDocPointerListener?.();\n this.removeDocPointerListener = null;\n }\n\n private mountToBodyAndPosition(): void {\n this.setupRepositionListeners();\n\n const panel = this.elRef.nativeElement;\n if (panel.parentNode !== document.body) {\n document.body.appendChild(panel);\n }\n\n panel.style.position = 'fixed';\n panel.style.left = '0px';\n panel.style.top = '0px';\n panel.style.zIndex = '1000';\n\n queueMicrotask(() => {\n if (!this.multi.open()) return;\n\n const anchor = rectFromClientRect(this.findAnchorEl().getBoundingClientRect());\n panel.style.minWidth = `${anchor.width}px`;\n this.reposition();\n });\n\n this.setupOutsidePointer();\n }\n\n private restoreToPlaceholder(force = false): void {\n const panel = this.elRef.nativeElement;\n if (!force && panel.parentNode !== document.body) {\n this.teardownOutsidePointer();\n return;\n }\n\n if (this.placeholder?.parentNode) {\n this.placeholder.parentNode.insertBefore(panel, this.placeholder);\n } else if (this.originalParent) {\n this.originalParent.appendChild(panel);\n }\n\n this.teardownRepositionListeners();\n panel.style.position = '';\n panel.style.left = '';\n panel.style.top = '';\n panel.style.zIndex = '';\n panel.style.minWidth = '';\n this.teardownOutsidePointer();\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"tng-multi-autocomplete.overlay.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/form/multi-autocomplete/tng-multi-autocomplete.overlay.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n DestroyRef,\n Directive,\n ElementRef,\n HostBinding,\n effect,\n inject,\n} from '@angular/core';\nimport { computeOverlayPosition } from '@tailng-ui/cdk';\nimport { TNG_MULTI_AUTOCOMPLETE } from './tng-multi-autocomplete.tokens';\nimport type { TngMultiAutocomplete } from './tng-multi-autocomplete';\n\ntype MaybeRect = Readonly<{ left: number; top: number; width: number; height: number }>;\n\nconst PORTALLED_MULTI_AUTOCOMPLETE_THEME_VARS = [\n '--tng-multi-autocomplete-radius',\n '--tng-multi-autocomplete-padding',\n '--tng-multi-autocomplete-trigger-py',\n '--tng-multi-autocomplete-trigger-px',\n '--tng-multi-autocomplete-chip-py',\n '--tng-multi-autocomplete-chip-px',\n '--tng-multi-autocomplete-option-py',\n '--tng-multi-autocomplete-option-px',\n '--tng-multi-autocomplete-border',\n '--tng-multi-autocomplete-border-strong',\n '--tng-multi-autocomplete-bg',\n '--tng-multi-autocomplete-surface',\n '--tng-multi-autocomplete-fg',\n '--tng-multi-autocomplete-muted',\n '--tng-multi-autocomplete-brand',\n '--tng-multi-autocomplete-danger',\n '--tng-multi-autocomplete-focus-ring',\n '--tng-multi-autocomplete-ease',\n '--tng-multi-autocomplete-shadow',\n '--tng-multi-autocomplete-shadow-focus',\n] as const;\n\nfunction rectFromClientRect(r: DOMRect | ClientRect): MaybeRect {\n return { left: r.left, top: r.top, width: r.width, height: r.height };\n}\n\nfunction viewportRect(): MaybeRect {\n return {\n left: 0,\n top: 0,\n width: window.innerWidth || 1024,\n height: window.innerHeight || 768,\n };\n}\n\nfunction isInside(target: EventTarget | null, container: HTMLElement): boolean {\n return !!target && target instanceof Node && container.contains(target);\n}\n\n@Directive({\n selector: '[tngMultiAutocompleteOverlay]',\n exportAs: 'tngMultiAutocompleteOverlay',\n})\nexport class TngMultiAutocompleteOverlay {\n private readonly multi = inject<TngMultiAutocomplete>(TNG_MULTI_AUTOCOMPLETE);\n private readonly elRef = inject(ElementRef<HTMLElement>);\n private readonly destroyRef = inject(DestroyRef);\n\n private removeResizeListener: (() => void) | null = null;\n private removeScrollListener: (() => void) | null = null;\n private resizeObserver: ResizeObserver | null = null;\n private removeDocPointerListener: (() => void) | null = null;\n private placeholder: Comment | null = null;\n private originalParent: Node | null = null;\n\n @HostBinding('attr.data-slot')\n protected readonly dataSlot = 'multi-autocomplete-overlay' as const;\n\n @HostBinding('attr.hidden')\n protected get hidden(): '' | null {\n return this.multi.open() ? null : '';\n }\n\n constructor() {\n const hostEl = this.elRef.nativeElement;\n this.placeholder = document.createComment('tng-multi-autocomplete-overlay-anchor');\n this.originalParent = hostEl.parentNode;\n this.originalParent?.insertBefore(this.placeholder, hostEl);\n this.multi.setOverlayElement(hostEl);\n\n effect(() => {\n const open = this.multi.open();\n if (open) {\n this.mountToBodyAndPosition();\n } else {\n this.restoreToPlaceholder();\n }\n });\n\n this.destroyRef.onDestroy(() => {\n this.teardownOutsidePointer();\n this.restoreToPlaceholder(true);\n this.multi.setOverlayElement(null);\n this.placeholder = null;\n this.originalParent = null;\n });\n }\n\n private findAnchorEl(): HTMLElement {\n return this.multi.hostElement;\n }\n\n private reposition(): void {\n if (!this.multi.open()) return;\n\n const panel = this.elRef.nativeElement;\n const anchorEl = this.findAnchorEl();\n const anchor = rectFromClientRect(anchorEl.getBoundingClientRect());\n const overlay = rectFromClientRect(panel.getBoundingClientRect());\n const viewport = viewportRect();\n const result = computeOverlayPosition({\n anchorRect: anchor,\n overlayRect: overlay,\n viewportRect: viewport,\n });\n\n panel.style.left = `${result.x}px`;\n panel.style.top = `${result.y}px`;\n }\n\n private setupRepositionListeners(): void {\n let rafId: number | null = null;\n\n const schedule = () => {\n if (rafId !== null) return;\n\n rafId = requestAnimationFrame(() => {\n rafId = null;\n this.reposition();\n });\n };\n\n const onResize = () => schedule();\n const onScroll = () => schedule();\n\n window.addEventListener('resize', onResize);\n window.addEventListener('scroll', onScroll, true);\n this.removeResizeListener = () => window.removeEventListener('resize', onResize);\n this.removeScrollListener = () => window.removeEventListener('scroll', onScroll, true);\n\n if ('ResizeObserver' in window) {\n this.resizeObserver = new ResizeObserver(() => schedule());\n this.resizeObserver.observe(this.findAnchorEl());\n this.resizeObserver.observe(this.elRef.nativeElement);\n }\n }\n\n private teardownRepositionListeners(): void {\n this.removeResizeListener?.();\n this.removeScrollListener?.();\n this.removeResizeListener = null;\n this.removeScrollListener = null;\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n }\n\n private setupOutsidePointer(): void {\n if (this.removeDocPointerListener) return;\n\n const onPointerDown = (event: PointerEvent) => {\n if (!this.multi.open()) return;\n\n const panel = this.elRef.nativeElement;\n if (isInside(event.target, panel)) return;\n if (isInside(event.target, this.multi.hostElement)) return;\n if (event.target && (event.target as Element).closest?.('[data-slot=\"multi-autocomplete-option\"]')) {\n return;\n }\n\n this.multi.close();\n };\n\n document.addEventListener('pointerdown', onPointerDown, true);\n this.removeDocPointerListener = () =>\n document.removeEventListener('pointerdown', onPointerDown, true);\n }\n\n private teardownOutsidePointer(): void {\n this.removeDocPointerListener?.();\n this.removeDocPointerListener = null;\n }\n\n private syncPortalledThemeVars(): void {\n const panel = this.elRef.nativeElement;\n const hostStyles = getComputedStyle(this.multi.hostElement);\n\n for (const cssVar of PORTALLED_MULTI_AUTOCOMPLETE_THEME_VARS) {\n const value = hostStyles.getPropertyValue(cssVar).trim();\n if (value) {\n panel.style.setProperty(cssVar, value);\n } else {\n panel.style.removeProperty(cssVar);\n }\n }\n\n const colorScheme = hostStyles.colorScheme?.trim();\n if (colorScheme && colorScheme !== 'normal') {\n panel.style.colorScheme = colorScheme;\n } else {\n panel.style.removeProperty('color-scheme');\n }\n }\n\n private clearPortalledThemeVars(): void {\n const panel = this.elRef.nativeElement;\n\n for (const cssVar of PORTALLED_MULTI_AUTOCOMPLETE_THEME_VARS) {\n panel.style.removeProperty(cssVar);\n }\n\n panel.style.removeProperty('color-scheme');\n }\n\n private mountToBodyAndPosition(): void {\n this.setupRepositionListeners();\n\n const panel = this.elRef.nativeElement;\n if (panel.parentNode !== document.body) {\n document.body.appendChild(panel);\n }\n\n panel.style.position = 'fixed';\n panel.style.left = '0px';\n panel.style.top = '0px';\n panel.style.zIndex = '1000';\n this.syncPortalledThemeVars();\n\n queueMicrotask(() => {\n if (!this.multi.open()) return;\n\n const anchor = rectFromClientRect(this.findAnchorEl().getBoundingClientRect());\n const viewportWidth = viewportRect().width;\n const inlineSize = Math.max(0, Math.min(anchor.width, viewportWidth - 16));\n panel.style.width = `${inlineSize}px`;\n panel.style.minWidth = `${inlineSize}px`;\n this.reposition();\n });\n\n this.setupOutsidePointer();\n }\n\n private restoreToPlaceholder(force = false): void {\n const panel = this.elRef.nativeElement;\n if (!force && panel.parentNode !== document.body) {\n this.teardownOutsidePointer();\n return;\n }\n\n if (this.placeholder?.parentNode) {\n this.placeholder.parentNode.insertBefore(panel, this.placeholder);\n } else if (this.originalParent) {\n this.originalParent.appendChild(panel);\n }\n\n this.teardownRepositionListeners();\n panel.style.position = '';\n panel.style.left = '';\n panel.style.top = '';\n panel.style.zIndex = '';\n panel.style.width = '';\n panel.style.minWidth = '';\n this.clearPortalledThemeVars();\n this.teardownOutsidePointer();\n }\n}\n"]}
|