@aiandralves/ai-ui 1.0.0

package/esm2022/lib/components/command/command.js

@@ -0,0 +1,184 @@
+import { ChangeDetectionStrategy, Component, computed, contentChild, contentChildren, forwardRef, input, output, signal, ViewEncapsulation } from "@angular/core";
+import { FormsModule, NG_VALUE_ACCESSOR } from "@angular/forms";
+import { mergeClasses, noopFn } from "../../core";
+import { AiCommandInput } from "./command-input";
+import { AiCommandItem } from "./command-item";
+import { commandVariants } from "./command.variants";
+import * as i0 from "@angular/core";
+export class AiCommand {
+    cmdInputComponent = contentChild(AiCommandInput, ...(ngDevMode ? [{ debugName: "cmdInputComponent" }] : []));
+    cmdItemComponents = contentChildren(AiCommandItem, { ...(ngDevMode ? { debugName: "cmdItemComponents" } : {}), descendants: true });
+    #registeredItems = signal([], ...(ngDevMode ? [{ debugName: "#registeredItems" }] : []));
+    size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    _change = () => noopFn;
+    _touched = () => noopFn;
+    searchTerm = signal("", ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    selectedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
+    #itemUpdateTrigger = signal(0, ...(ngDevMode ? [{ debugName: "#itemUpdateTrigger" }] : []));
+    changeCommand = output();
+    selectedCommand = output();
+    itemComponents = computed(() => (this.cmdItemComponents().length ? this.cmdItemComponents() : this.#registeredItems()), ...(ngDevMode ? [{ debugName: "itemComponents" }] : []));
+    classes = computed(() => mergeClasses(commandVariants({ size: this.size() }), this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    filteredItems = computed(() => {
+        const searchTerm = this.searchTerm();
+        this.#itemUpdateTrigger();
+        if (!this.itemComponents())
+            return [];
+        const lowerSearchTerm = searchTerm.toLowerCase().trim();
+        if (!lowerSearchTerm)
+            return this.itemComponents();
+        return this.itemComponents().filter(item => item.label().toLowerCase().includes(lowerSearchTerm) || (item.command()?.toLowerCase() ?? "").includes(lowerSearchTerm));
+    }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : []));
+    statusMessage = computed(() => {
+        const searchTerm = this.searchTerm().trim();
+        const filteredCount = this.filteredItems().length;
+        if (!searchTerm)
+            return searchTerm;
+        if (!filteredCount)
+            return `No results found for "${searchTerm}"`;
+        return `${filteredCount} result${filteredCount === 1 ? "" : "s"} found for "${searchTerm}"`;
+    }, ...(ngDevMode ? [{ debugName: "statusMessage" }] : []));
+    constructor() {
+        this._triggerItemsUpdate();
+    }
+    register(item) {
+        this.#registeredItems.update(items => [...items, item]);
+    }
+    unregister(item) {
+        this.#registeredItems.update(items => items.filter(i => i !== item));
+    }
+    writeValue(_value) {
+        // Implementation here
+    }
+    registerOnChange(fn) {
+        this._change = fn;
+    }
+    registerOnTouched(fn) {
+        this._touched = fn;
+    }
+    setDisabledState(_isDisabled) {
+        // Implementation here
+    }
+    onSearch(searchTerm) {
+        this.searchTerm.set(searchTerm);
+        this.selectedIndex.set(-1);
+        this._updateSelectedItem();
+    }
+    selectItem(item) {
+        const commandItem = {
+            value: item.value(),
+            label: item.label(),
+            disabled: item.disabled(),
+            command: item.command(),
+            shortcut: item.shortcut(),
+            icon: item.icon(),
+        };
+        this._change(item.value());
+        this.changeCommand.emit(commandItem);
+        this.selectedCommand.emit(commandItem);
+    }
+    onKeyDown(event) {
+        const filteredItems = this.filteredItems();
+        if (filteredItems.length === 0)
+            return;
+        const { key } = event;
+        const index = this.selectedIndex();
+        switch (key) {
+            case "ArrowDown": {
+                const nextIndex = index < filteredItems.length - 1 ? index + 1 : 0;
+                this.selectedIndex.set(nextIndex);
+                this._updateSelectedItem();
+                break;
+            }
+            case "ArrowUp": {
+                const prevIndex = index > 0 ? index - 1 : filteredItems.length - 1;
+                this.selectedIndex.set(prevIndex);
+                this._updateSelectedItem();
+                break;
+            }
+            case "Enter":
+                if (index >= 0 && index < filteredItems.length) {
+                    const selectedItem = filteredItems[index];
+                    if (!selectedItem.disabled()) {
+                        this.selectItem(selectedItem);
+                    }
+                }
+                break;
+            case "Escape":
+                this.selectedIndex.set(-1);
+                this._updateSelectedItem();
+                break;
+        }
+    }
+    refreshItems() {
+        this._triggerItemsUpdate();
+    }
+    focus() {
+        this.cmdInputComponent()?.focus();
+    }
+    _updateSelectedItem() {
+        const filteredItems = this.filteredItems();
+        const index = this.selectedIndex();
+        for (const option of filteredItems) {
+            option.setSelected(false);
+        }
+        if (index >= 0 && index < filteredItems.length) {
+            const selected = filteredItems[index];
+            selected.setSelected(true);
+            selected.focus();
+        }
+    }
+    _triggerItemsUpdate() {
+        this.#itemUpdateTrigger.update(value => value + 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiCommand, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: AiCommand, isStandalone: true, selector: "ai-command", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeCommand: "changeCommand", selectedCommand: "selectedCommand" }, host: { attributes: { "role": "combobox", "aria-haspopup": "listbox" }, listeners: { "keydown.{arrowdown,arrowup,enter,escape}.prevent": "onKeyDown($event)" }, properties: { "attr.aria-expanded": "true" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AiCommand),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "cmdInputComponent", first: true, predicate: AiCommandInput, descendants: true, isSignal: true }, { propertyName: "cmdItemComponents", predicate: AiCommandItem, descendants: true, isSignal: true }], exportAs: ["aiCommand"], ngImport: i0, template: `
+        <div [class]="classes()">
+            <div id="command-instructions" class="sr-only">Use arrow keys to navigate, Enter to select, Escape to clear selection.</div>
+            <div id="command-status" class="sr-only" aria-live="polite" aria-atomic="true">
+                {{ statusMessage() }}
+            </div>
+            <ng-content />
+        </div>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiCommand, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ai-command",
+                    exportAs: "aiCommand",
+                    imports: [FormsModule],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <div [class]="classes()">
+            <div id="command-instructions" class="sr-only">Use arrow keys to navigate, Enter to select, Escape to clear selection.</div>
+            <div id="command-status" class="sr-only" aria-live="polite" aria-atomic="true">
+                {{ statusMessage() }}
+            </div>
+            <ng-content />
+        </div>
+    `,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AiCommand),
+                            multi: true,
+                        },
+                    ],
+                    host: {
+                        role: "combobox",
+                        "aria-haspopup": "listbox",
+                        "[attr.aria-expanded]": "true",
+                        "(keydown.{arrowdown,arrowup,enter,escape}.prevent)": "onKeyDown($event)",
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { cmdInputComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AiCommandInput), { isSignal: true }] }], cmdItemComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AiCommandItem), { ...{ descendants: true }, isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], changeCommand: [{ type: i0.Output, args: ["changeCommand"] }], selectedCommand: [{ type: i0.Output, args: ["selectedCommand"] }] } });
+//# sourceMappingURL=command.js.map

package/esm2022/lib/components/command/command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/command/command.ts"],"names":[],"mappings":"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","sourcesContent":["import { ChangeDetectionStrategy, Component, computed, contentChild, contentChildren, forwardRef, input, output, signal, ViewEncapsulation } from \"@angular/core\";\r\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from \"@angular/forms\";\r\nimport { ClassValue } from \"clsx\";\r\nimport { ChangeFn, mergeClasses, noopFn, TouchFn } from \"../../core\";\r\nimport { AiCommandInput } from \"./command-input\";\r\nimport { AiCommandItem } from \"./command-item\";\r\nimport { AiCommandItemConfig, AiCommandRepository } from \"./command.config\";\r\nimport { CommandSizeVariants, commandVariants } from \"./command.variants\";\r\n\r\n@Component({\r\n    selector: \"ai-command\",\r\n    exportAs: \"aiCommand\",\r\n    imports: [FormsModule],\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    template: `\r\n        <div [class]=\"classes()\">\r\n            <div id=\"command-instructions\" class=\"sr-only\">Use arrow keys to navigate, Enter to select, Escape to clear selection.</div>\r\n            <div id=\"command-status\" class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n                {{ statusMessage() }}\r\n            </div>\r\n            <ng-content />\r\n        </div>\r\n    `,\r\n    providers: [\r\n        {\r\n            provide: NG_VALUE_ACCESSOR,\r\n            useExisting: forwardRef(() => AiCommand),\r\n            multi: true,\r\n        },\r\n    ],\r\n    host: {\r\n        role: \"combobox\",\r\n        \"aria-haspopup\": \"listbox\",\r\n        \"[attr.aria-expanded]\": \"true\",\r\n        \"(keydown.{arrowdown,arrowup,enter,escape}.prevent)\": \"onKeyDown($event)\",\r\n    },\r\n})\r\nexport class AiCommand implements ControlValueAccessor, AiCommandRepository {\r\n    private readonly cmdInputComponent = contentChild(AiCommandInput);\r\n    private readonly cmdItemComponents = contentChildren(AiCommandItem, { descendants: true });\r\n    readonly #registeredItems = signal<AiCommandItem[]>([]);\r\n\r\n    readonly size = input<CommandSizeVariants>(\"default\");\r\n    readonly class = input<ClassValue>(\"\");\r\n\r\n    protected _change: ChangeFn<string> = () => noopFn;\r\n    protected _touched: TouchFn = () => noopFn;\r\n\r\n    readonly searchTerm = signal<string>(\"\");\r\n    readonly selectedIndex = signal<number>(-1);\r\n    #itemUpdateTrigger = signal<number>(0);\r\n\r\n    readonly changeCommand = output<AiCommandItemConfig>();\r\n    readonly selectedCommand = output<AiCommandItemConfig>();\r\n\r\n    protected readonly itemComponents = computed(() => (this.cmdItemComponents().length ? this.cmdItemComponents() : this.#registeredItems()));\r\n\r\n    protected readonly classes = computed(() => mergeClasses(commandVariants({ size: this.size() }), this.class()));\r\n\r\n    readonly filteredItems = computed(() => {\r\n        const searchTerm = this.searchTerm();\r\n        this.#itemUpdateTrigger();\r\n\r\n        if (!this.itemComponents()) return [];\r\n\r\n        const lowerSearchTerm = searchTerm.toLowerCase().trim();\r\n        if (!lowerSearchTerm) return this.itemComponents();\r\n\r\n        return this.itemComponents().filter(item => item.label().toLowerCase().includes(lowerSearchTerm) || (item.command()?.toLowerCase() ?? \"\").includes(lowerSearchTerm));\r\n    });\r\n\r\n    protected readonly statusMessage = computed(() => {\r\n        const searchTerm = this.searchTerm().trim();\r\n        const filteredCount = this.filteredItems().length;\r\n\r\n        if (!searchTerm) return searchTerm;\r\n        if (!filteredCount) return `No results found for \"${searchTerm}\"`;\r\n\r\n        return `${filteredCount} result${filteredCount === 1 ? \"\" : \"s\"} found for \"${searchTerm}\"`;\r\n    });\r\n\r\n    constructor() {\r\n        this._triggerItemsUpdate();\r\n    }\r\n\r\n    register(item: AiCommandItem) {\r\n        this.#registeredItems.update(items => [...items, item]);\r\n    }\r\n\r\n    unregister(item: AiCommandItem) {\r\n        this.#registeredItems.update(items => items.filter(i => i !== item));\r\n    }\r\n\r\n    writeValue(_value: string | null) {\r\n        // Implementation here\r\n    }\r\n\r\n    registerOnChange(fn: (value: string) => void): void {\r\n        this._change = fn;\r\n    }\r\n\r\n    registerOnTouched(fn: () => void): void {\r\n        this._touched = fn;\r\n    }\r\n\r\n    setDisabledState(_isDisabled: boolean): void {\r\n        // Implementation here\r\n    }\r\n\r\n    onSearch(searchTerm: string) {\r\n        this.searchTerm.set(searchTerm);\r\n        this.selectedIndex.set(-1);\r\n        this._updateSelectedItem();\r\n    }\r\n\r\n    selectItem(item: AiCommandItem) {\r\n        const commandItem: AiCommandItemConfig = {\r\n            value: item.value(),\r\n            label: item.label(),\r\n            disabled: item.disabled(),\r\n            command: item.command(),\r\n            shortcut: item.shortcut(),\r\n            icon: item.icon(),\r\n        };\r\n\r\n        this._change(item.value() as string);\r\n        this.changeCommand.emit(commandItem);\r\n        this.selectedCommand.emit(commandItem);\r\n    }\r\n\r\n    onKeyDown(event: Event) {\r\n        const filteredItems = this.filteredItems();\r\n        if (filteredItems.length === 0) return;\r\n\r\n        const { key } = event as KeyboardEvent;\r\n        const index = this.selectedIndex();\r\n\r\n        switch (key) {\r\n            case \"ArrowDown\": {\r\n                const nextIndex = index < filteredItems.length - 1 ? index + 1 : 0;\r\n                this.selectedIndex.set(nextIndex);\r\n                this._updateSelectedItem();\r\n                break;\r\n            }\r\n\r\n            case \"ArrowUp\": {\r\n                const prevIndex = index > 0 ? index - 1 : filteredItems.length - 1;\r\n                this.selectedIndex.set(prevIndex);\r\n                this._updateSelectedItem();\r\n                break;\r\n            }\r\n\r\n            case \"Enter\":\r\n                if (index >= 0 && index < filteredItems.length) {\r\n                    const selectedItem = filteredItems[index];\r\n                    if (!selectedItem.disabled()) {\r\n                        this.selectItem(selectedItem);\r\n                    }\r\n                }\r\n                break;\r\n\r\n            case \"Escape\":\r\n                this.selectedIndex.set(-1);\r\n                this._updateSelectedItem();\r\n                break;\r\n        }\r\n    }\r\n\r\n    refreshItems() {\r\n        this._triggerItemsUpdate();\r\n    }\r\n\r\n    focus() {\r\n        this.cmdInputComponent()?.focus();\r\n    }\r\n\r\n    private _updateSelectedItem() {\r\n        const filteredItems = this.filteredItems();\r\n        const index = this.selectedIndex();\r\n\r\n        for (const option of filteredItems) {\r\n            option.setSelected(false);\r\n        }\r\n\r\n        if (index >= 0 && index < filteredItems.length) {\r\n            const selected = filteredItems[index];\r\n            selected.setSelected(true);\r\n            selected.focus();\r\n        }\r\n    }\r\n\r\n    private _triggerItemsUpdate(): void {\r\n        this.#itemUpdateTrigger.update(value => value + 1);\r\n    }\r\n}\r\n"]}

package/esm2022/lib/components/command/command.variants.js

@@ -0,0 +1,50 @@
+import { cva } from "class-variance-authority";
+export const commandVariants = cva("flex h-full w-full flex-col overflow-hidden shadow-md border border-border rounded-md bg-background text-background-foreground", {
+    variants: {
+        size: {
+            sm: "min-h-64",
+            default: "min-h-80",
+            lg: "min-h-96",
+            xl: "min-h-120",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+    },
+});
+export const commandInputVariants = cva("flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", {
+    variants: {},
+    defaultVariants: {},
+});
+export const commandListVariants = cva("max-h-75 overflow-y-auto overflow-x-hidden p-1", {
+    variants: {},
+    defaultVariants: {},
+});
+export const commandGroupVariants = cva("overflow-hidden text-foreground", {
+    variants: {},
+    defaultVariants: {},
+});
+export const commandGroupHeadingVariants = cva("px-2 py-1.5 text-xs font-semibold font-title text-muted-foreground", {
+    variants: {},
+    defaultVariants: {},
+});
+export const commandItemVariants = cva("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-default hover:text-default-foreground aria-selected:bg-default aria-selected:text-default-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50", {
+    variants: {
+        variant: {
+            default: "",
+            destructive: "aria-selected:bg-destructive aria-selected:text-destructive-foreground hover:bg-destructive hover:text-destructive-foreground",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+export const commandSeparatorVariants = cva("-mx-1 my-1 h-px bg-border", {
+    variants: {},
+    defaultVariants: {},
+});
+export const commandShortcutVariants = cva("ml-auto text-xs tracking-widest text-muted-foreground", {
+    variants: {},
+    defaultVariants: {},
+});
+//# sourceMappingURL=command.variants.js.map

package/esm2022/lib/components/command/command.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.variants.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/command/command.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAElE,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAC,gIAAgI,EAAE;IACjK,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,EAAE,EAAE,UAAU;YACd,OAAO,EAAE,UAAU;YACnB,EAAE,EAAE,UAAU;YACd,EAAE,EAAE,WAAW;SAClB;KACJ;IACD,eAAe,EAAE;QACb,IAAI,EAAE,SAAS;KAClB;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CACnC,wJAAwJ,EACxJ;IACI,QAAQ,EAAE,EAAE;IACZ,eAAe,EAAE,EAAE;CACtB,CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAC,gDAAgD,EAAE;IACrF,QAAQ,EAAE,EAAE;IACZ,eAAe,EAAE,EAAE;CACtB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAC,iCAAiC,EAAE;IACvE,QAAQ,EAAE,EAAE;IACZ,eAAe,EAAE,EAAE;CACtB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAC,oEAAoE,EAAE;IACjH,QAAQ,EAAE,EAAE;IACZ,eAAe,EAAE,EAAE;CACtB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAClC,0RAA0R,EAC1R;IACI,QAAQ,EAAE;QACN,OAAO,EAAE;YACL,OAAO,EAAE,EAAE;YACX,WAAW,EAAE,+HAA+H;SAC/I;KACJ;IACD,eAAe,EAAE;QACb,OAAO,EAAE,SAAS;KACrB;CACJ,CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAC,2BAA2B,EAAE;IACrE,QAAQ,EAAE,EAAE;IACZ,eAAe,EAAE,EAAE;CACtB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAC,uDAAuD,EAAE;IAChG,QAAQ,EAAE,EAAE;IACZ,eAAe,EAAE,EAAE;CACtB,CAAC,CAAC","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nexport const commandVariants = cva(\"flex h-full w-full flex-col overflow-hidden shadow-md border border-border rounded-md bg-background text-background-foreground\", {\r\n    variants: {\r\n        size: {\r\n            sm: \"min-h-64\",\r\n            default: \"min-h-80\",\r\n            lg: \"min-h-96\",\r\n            xl: \"min-h-120\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        size: \"default\",\r\n    },\r\n});\r\n\r\nexport const commandInputVariants = cva(\r\n    \"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\r\n    {\r\n        variants: {},\r\n        defaultVariants: {},\r\n    },\r\n);\r\n\r\nexport const commandListVariants = cva(\"max-h-75 overflow-y-auto overflow-x-hidden p-1\", {\r\n    variants: {},\r\n    defaultVariants: {},\r\n});\r\n\r\nexport const commandGroupVariants = cva(\"overflow-hidden text-foreground\", {\r\n    variants: {},\r\n    defaultVariants: {},\r\n});\r\n\r\nexport const commandGroupHeadingVariants = cva(\"px-2 py-1.5 text-xs font-semibold font-title text-muted-foreground\", {\r\n    variants: {},\r\n    defaultVariants: {},\r\n});\r\n\r\nexport const commandItemVariants = cva(\r\n    \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-default hover:text-default-foreground aria-selected:bg-default aria-selected:text-default-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50\",\r\n    {\r\n        variants: {\r\n            variant: {\r\n                default: \"\",\r\n                destructive: \"aria-selected:bg-destructive aria-selected:text-destructive-foreground hover:bg-destructive hover:text-destructive-foreground\",\r\n            },\r\n        },\r\n        defaultVariants: {\r\n            variant: \"default\",\r\n        },\r\n    },\r\n);\r\n\r\nexport const commandSeparatorVariants = cva(\"-mx-1 my-1 h-px bg-border\", {\r\n    variants: {},\r\n    defaultVariants: {},\r\n});\r\n\r\nexport const commandShortcutVariants = cva(\"ml-auto text-xs tracking-widest text-muted-foreground\", {\r\n    variants: {},\r\n    defaultVariants: {},\r\n});\r\n\r\nexport type CommandSizeVariants = NonNullable<VariantProps<typeof commandVariants>[\"size\"]>;\r\nexport type CommandItemVariants = NonNullable<VariantProps<typeof commandItemVariants>[\"variant\"]>;\r\n"]}

package/esm2022/lib/components/command/demo/command.js

@@ -0,0 +1,12 @@
+import { DemoCommandDefaultComponent } from "./default";
+export const COMMAND = {
+    componentName: "command",
+    componentType: "command",
+    examples: [
+        {
+            name: "default",
+            component: DemoCommandDefaultComponent,
+        },
+    ],
+};
+//# sourceMappingURL=command.js.map

package/esm2022/lib/components/command/demo/command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/command/demo/command.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,WAAW,CAAC;AAExD,MAAM,CAAC,MAAM,OAAO,GAAG;IACnB,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,SAAS;IACxB,QAAQ,EAAE;QACN;YACI,IAAI,EAAE,SAAS;YACf,SAAS,EAAE,2BAA2B;SACzC;KACJ;CACJ,CAAC","sourcesContent":["import { DemoCommandDefaultComponent } from \"./default\";\r\n\r\nexport const COMMAND = {\r\n    componentName: \"command\",\r\n    componentType: \"command\",\r\n    examples: [\r\n        {\r\n            name: \"default\",\r\n            component: DemoCommandDefaultComponent,\r\n        },\r\n    ],\r\n};\r\n"]}

package/esm2022/lib/components/command/demo/default.js

@@ -0,0 +1,124 @@
+import { Component } from "@angular/core";
+import { AiCommandImports } from "../command.imports";
+import * as i0 from "@angular/core";
+import * as i1 from "../command";
+import * as i2 from "../command-input";
+import * as i3 from "../command-list";
+import * as i4 from "../command-item";
+import * as i5 from "../command-item-group";
+import * as i6 from "../command-separator";
+import * as i7 from "../command-empty";
+export class DemoCommandDefaultComponent {
+    commandActions = {
+        "new-project": () => this._showAlert("Creating new project..."),
+        "open-file": () => this._showAlert("Opening file dialog..."),
+        "save-all": () => this._showAlert("Saving all files..."),
+        dashboard: () => this._showAlert("Navigating to Dashboard..."),
+        projects: () => this._showAlert("Navigating to Projects..."),
+        terminal: () => this._showAlert("Opening terminal..."),
+        theme: () => this._showAlert("Toggling theme..."),
+    };
+    keyMap = {
+        n: { value: "new-project", label: "Create new project" },
+        o: { value: "open-file", label: "Open file" },
+        s: { value: "save-all", label: "Save all" },
+        "1": { value: "dashboard", label: "Go to Dashboard" },
+        "2": { value: "projects", label: "Go to Projects" },
+        t: { value: "terminal", label: "Open terminal" },
+        d: { value: "theme", label: "Toggle theme" },
+    };
+    handleCommand(item) {
+        const action = `Executed "${item.label}" (value: ${item.value})`;
+        console.log(action);
+        (this.commandActions[item.value] ?? (() => this._showAlert(`Action: ${item.label}`)))();
+    }
+    handleKeydown(event) {
+        if (event.metaKey || event.ctrlKey) {
+            const key = event.key.toLowerCase();
+            if (this.keyMap[key]) {
+                event.preventDefault();
+                this._executeCommand(this.keyMap[key].value, this.keyMap[key].label);
+            }
+        }
+    }
+    _executeCommand(value, label) {
+        this.handleCommand({ value, label });
+    }
+    _showAlert(message, warning = false) {
+        if (warning) {
+            console.warn(message);
+        }
+        else {
+            console.log(message);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoCommandDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoCommandDefaultComponent, isStandalone: true, selector: "ng-component", host: { listeners: { "window:keydown": "handleKeydown($event)" } }, ngImport: i0, template: `
+        <ai-command class="md:min-w-125" (selectedCommand)="handleCommand($event)">
+            <ai-command-input placeholder="Search actions, files, and more..." />
+
+            <ai-command-list>
+                <ai-command-empty />
+
+                <ai-command-item-group label="Quick Actions">
+                    <ai-command-item label="Create new project" value="new-project" icon="folder" shortcut="⌘N" />
+                    <ai-command-item label="Open file" value="open-file" icon="folder-open" shortcut="⌘O" />
+                    <ai-command-item label="Save all" value="save-all" icon="save-2" shortcut="⌘S" />
+                </ai-command-item-group>
+
+                <ai-command-separator />
+
+                <ai-command-item-group label="Navigation">
+                    <ai-command-item label="Go to Dashboard" value="dashboard" icon="dashboard" shortcut="⌘1" />
+                    <ai-command-item label="Go to Projects" value="projects" icon="folder" shortcut="⌘2" />
+                </ai-command-item-group>
+
+                <ai-command-separator />
+
+                <ai-command-item-group label="Tools">
+                    <ai-command-item label="Open terminal" value="terminal" icon="terminal" shortcut="⌘T" />
+                    <ai-command-item label="Toggle theme" value="theme" icon="moon" shortcut="⌘D" />
+                </ai-command-item-group>
+            </ai-command-list>
+        </ai-command>
+    `, isInline: true, dependencies: [{ kind: "component", type: i1.AiCommand, selector: "ai-command", inputs: ["size", "class"], outputs: ["changeCommand", "selectedCommand"], exportAs: ["aiCommand"] }, { kind: "component", type: i2.AiCommandInput, selector: "ai-command-input", inputs: ["placeholder", "class"], outputs: ["changeValue"], exportAs: ["aiCommandInput"] }, { kind: "component", type: i3.AiCommandList, selector: "ai-command-list", inputs: ["class"], exportAs: ["aiCommandList"] }, { kind: "component", type: i4.AiCommandItem, selector: "ai-command-item", inputs: ["value", "label", "command", "icon", "shortcut", "disabled", "variant", "class", "parentCommand", "commandItemGroup"], exportAs: ["aiCommandItem"] }, { kind: "component", type: i5.AiCommandItemGroup, selector: "ai-command-item-group", inputs: ["label", "class"], exportAs: ["aiCommandItemGroup"] }, { kind: "component", type: i6.AiCommandSeparator, selector: "ai-command-separator", inputs: ["class"], exportAs: ["aiCommandSeparator"] }, { kind: "component", type: i7.AiCommandEmpty, selector: "ai-command-empty", inputs: ["icon", "title", "description", "class"], exportAs: ["aiCommandEmpty"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoCommandDefaultComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiCommandImports],
+                    template: `
+        <ai-command class="md:min-w-125" (selectedCommand)="handleCommand($event)">
+            <ai-command-input placeholder="Search actions, files, and more..." />
+
+            <ai-command-list>
+                <ai-command-empty />
+
+                <ai-command-item-group label="Quick Actions">
+                    <ai-command-item label="Create new project" value="new-project" icon="folder" shortcut="⌘N" />
+                    <ai-command-item label="Open file" value="open-file" icon="folder-open" shortcut="⌘O" />
+                    <ai-command-item label="Save all" value="save-all" icon="save-2" shortcut="⌘S" />
+                </ai-command-item-group>
+
+                <ai-command-separator />
+
+                <ai-command-item-group label="Navigation">
+                    <ai-command-item label="Go to Dashboard" value="dashboard" icon="dashboard" shortcut="⌘1" />
+                    <ai-command-item label="Go to Projects" value="projects" icon="folder" shortcut="⌘2" />
+                </ai-command-item-group>
+
+                <ai-command-separator />
+
+                <ai-command-item-group label="Tools">
+                    <ai-command-item label="Open terminal" value="terminal" icon="terminal" shortcut="⌘T" />
+                    <ai-command-item label="Toggle theme" value="theme" icon="moon" shortcut="⌘D" />
+                </ai-command-item-group>
+            </ai-command-list>
+        </ai-command>
+    `,
+                    host: {
+                        "(window:keydown)": "handleKeydown($event)",
+                    },
+                }]
+        }] });
+//# sourceMappingURL=default.js.map

package/esm2022/lib/components/command/demo/default.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/command/demo/default.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component } from \"@angular/core\";\r\nimport { AiCommandItemConfig } from \"../command.config\";\r\nimport { AiCommandImports } from \"../command.imports\";\r\n\r\n@Component({\r\n    imports: [AiCommandImports],\r\n    template: `\r\n        <ai-command class=\"md:min-w-125\" (selectedCommand)=\"handleCommand($event)\">\r\n            <ai-command-input placeholder=\"Search actions, files, and more...\" />\r\n\r\n            <ai-command-list>\r\n                <ai-command-empty />\r\n\r\n                <ai-command-item-group label=\"Quick Actions\">\r\n                    <ai-command-item label=\"Create new project\" value=\"new-project\" icon=\"folder\" shortcut=\"⌘N\" />\r\n                    <ai-command-item label=\"Open file\" value=\"open-file\" icon=\"folder-open\" shortcut=\"⌘O\" />\r\n                    <ai-command-item label=\"Save all\" value=\"save-all\" icon=\"save-2\" shortcut=\"⌘S\" />\r\n                </ai-command-item-group>\r\n\r\n                <ai-command-separator />\r\n\r\n                <ai-command-item-group label=\"Navigation\">\r\n                    <ai-command-item label=\"Go to Dashboard\" value=\"dashboard\" icon=\"dashboard\" shortcut=\"⌘1\" />\r\n                    <ai-command-item label=\"Go to Projects\" value=\"projects\" icon=\"folder\" shortcut=\"⌘2\" />\r\n                </ai-command-item-group>\r\n\r\n                <ai-command-separator />\r\n\r\n                <ai-command-item-group label=\"Tools\">\r\n                    <ai-command-item label=\"Open terminal\" value=\"terminal\" icon=\"terminal\" shortcut=\"⌘T\" />\r\n                    <ai-command-item label=\"Toggle theme\" value=\"theme\" icon=\"moon\" shortcut=\"⌘D\" />\r\n                </ai-command-item-group>\r\n            </ai-command-list>\r\n        </ai-command>\r\n    `,\r\n    host: {\r\n        \"(window:keydown)\": \"handleKeydown($event)\",\r\n    },\r\n})\r\nexport class DemoCommandDefaultComponent {\r\n    private readonly commandActions: Record<string, () => void> = {\r\n        \"new-project\": () => this._showAlert(\"Creating new project...\"),\r\n        \"open-file\": () => this._showAlert(\"Opening file dialog...\"),\r\n        \"save-all\": () => this._showAlert(\"Saving all files...\"),\r\n        dashboard: () => this._showAlert(\"Navigating to Dashboard...\"),\r\n        projects: () => this._showAlert(\"Navigating to Projects...\"),\r\n        terminal: () => this._showAlert(\"Opening terminal...\"),\r\n        theme: () => this._showAlert(\"Toggling theme...\"),\r\n    };\r\n\r\n    private readonly keyMap: Record<string, { value: string; label: string }> = {\r\n        n: { value: \"new-project\", label: \"Create new project\" },\r\n        o: { value: \"open-file\", label: \"Open file\" },\r\n        s: { value: \"save-all\", label: \"Save all\" },\r\n        \"1\": { value: \"dashboard\", label: \"Go to Dashboard\" },\r\n        \"2\": { value: \"projects\", label: \"Go to Projects\" },\r\n        t: { value: \"terminal\", label: \"Open terminal\" },\r\n        d: { value: \"theme\", label: \"Toggle theme\" },\r\n    };\r\n\r\n    handleCommand(item: AiCommandItemConfig) {\r\n        const action = `Executed \"${item.label}\" (value: ${item.value})`;\r\n        console.log(action);\r\n        (this.commandActions[item.value as keyof typeof this.commandActions] ?? (() => this._showAlert(`Action: ${item.label}`)))();\r\n    }\r\n\r\n    handleKeydown(event: KeyboardEvent) {\r\n        if (event.metaKey || event.ctrlKey) {\r\n            const key = event.key.toLowerCase();\r\n            if (this.keyMap[key]) {\r\n                event.preventDefault();\r\n                this._executeCommand(this.keyMap[key].value, this.keyMap[key].label);\r\n            }\r\n        }\r\n    }\r\n\r\n    private _executeCommand(value: string, label: string) {\r\n        this.handleCommand({ value, label } as AiCommandItemConfig);\r\n    }\r\n\r\n    private _showAlert(message: string, warning = false) {\r\n        if (warning) {\r\n            console.warn(message);\r\n        } else {\r\n            console.log(message);\r\n        }\r\n    }\r\n}\r\n"]}

package/esm2022/lib/components/command/index.js

@@ -0,0 +1,10 @@
+export * from "./command";
+export * from "./command-empty";
+export * from "./command-input";
+export * from "./command-item";
+export * from "./command-item-group";
+export * from "./command-list";
+export * from "./command-separator";
+export * from "./command.imports";
+export * from "./demo/command";
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/command/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/command/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC","sourcesContent":["export * from \"./command\";\r\nexport * from \"./command-empty\";\r\nexport * from \"./command-input\";\r\nexport * from \"./command-item\";\r\nexport * from \"./command-item-group\";\r\nexport * from \"./command-list\";\r\nexport * from \"./command-separator\";\r\nexport * from \"./command.imports\";\r\nexport * from \"./demo/command\";\r\n"]}

package/esm2022/lib/components/date-picker/date-picker-overlay.service.js

@@ -0,0 +1,63 @@
+import { Overlay, OverlayPositionBuilder } from "@angular/cdk/overlay";
+import { TemplatePortal } from "@angular/cdk/portal";
+import { isPlatformBrowser } from "@angular/common";
+import { inject, Injectable, PLATFORM_ID } from "@angular/core";
+import { EMPTY } from "rxjs";
+import * as i0 from "@angular/core";
+export class AiDatePickerOverlayService {
+    #overlay = inject(Overlay);
+    #overlayPositionBuilder = inject(OverlayPositionBuilder);
+    #platformId = inject(PLATFORM_ID);
+    #overlayRef;
+    #portal;
+    create(origin) {
+        if (this.#overlayRef)
+            return this.#overlayRef;
+        if (!isPlatformBrowser(this.#platformId))
+            return;
+        const positionStrategy = this.#overlayPositionBuilder
+            .flexibleConnectedTo(origin)
+            .withPositions([
+            { originX: "start", originY: "bottom", overlayX: "start", overlayY: "top", offsetY: 4 },
+            { originX: "start", originY: "top", overlayX: "start", overlayY: "bottom", offsetY: -4 },
+        ])
+            .withPush(false);
+        this.#overlayRef = this.#overlay.create({
+            positionStrategy,
+            hasBackdrop: false,
+            scrollStrategy: this.#overlay.scrollStrategies.reposition(),
+        });
+        return this.#overlayRef;
+    }
+    attach(template, viewContainerRef) {
+        if (!this.#overlayRef)
+            return;
+        if (this.#overlayRef.hasAttached()) {
+            this.#overlayRef.detach();
+        }
+        this.#portal = new TemplatePortal(template, viewContainerRef);
+        this.#overlayRef.attach(this.#portal);
+    }
+    detach() {
+        if (this.#overlayRef?.hasAttached()) {
+            this.#overlayRef.detach();
+        }
+    }
+    hasAttached() {
+        return !!this.#overlayRef?.hasAttached();
+    }
+    destroy() {
+        this.#overlayRef?.dispose();
+        this.#overlayRef = undefined;
+        this.#portal = undefined;
+    }
+    outsidePointerEvents() {
+        return this.#overlayRef?.outsidePointerEvents() ?? EMPTY;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiDatePickerOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiDatePickerOverlayService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiDatePickerOverlayService, decorators: [{
+            type: Injectable
+        }] });
+//# sourceMappingURL=date-picker-overlay.service.js.map

package/esm2022/lib/components/date-picker/date-picker-overlay.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-overlay.service.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/date-picker/date-picker-overlay.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,sBAAsB,EAAmB,MAAM,sBAAsB,CAAC;AACxF,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAc,MAAM,EAAE,UAAU,EAAE,WAAW,EAAiC,MAAM,eAAe,CAAC;AAC3G,OAAO,EAAE,KAAK,EAAmB,MAAM,MAAM,CAAC;;AAG9C,MAAM,OAAO,0BAA0B;IAC1B,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAC3B,uBAAuB,GAAG,MAAM,CAAC,sBAAsB,CAAC,CAAC;IACzD,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;IAE3C,WAAW,CAAc;IACzB,OAAO,CAAkB;IAEzB,MAAM,CAAC,MAA+B;QAClC,IAAI,IAAI,CAAC,WAAW;YAAE,OAAO,IAAI,CAAC,WAAW,CAAC;QAC9C,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC;YAAE,OAAO;QAEjD,MAAM,gBAAgB,GAAG,IAAI,CAAC,uBAAuB;aAChD,mBAAmB,CAAC,MAAM,CAAC;aAC3B,aAAa,CAAC;YACX,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE;YACvF,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE;SAC3F,CAAC;aACD,QAAQ,CAAC,KAAK,CAAC,CAAC;QAErB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;YACpC,gBAAgB;YAChB,WAAW,EAAE,KAAK;YAClB,cAAc,EAAE,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE;SAC9D,CAAC,CAAC;QAEH,OAAO,IAAI,CAAC,WAAW,CAAC;IAC5B,CAAC;IAED,MAAM,CAAC,QAA2B,EAAE,gBAAkC;QAClE,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QAC9B,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,EAAE,CAAC;YACjC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;QAC9B,CAAC;QACD,IAAI,CAAC,OAAO,GAAG,IAAI,cAAc,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;QAC9D,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC1C,CAAC;IAED,MAAM;QACF,IAAI,IAAI,CAAC,WAAW,EAAE,WAAW,EAAE,EAAE,CAAC;YAClC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;QAC9B,CAAC;IACL,CAAC;IAED,WAAW;QACP,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,WAAW,EAAE,CAAC;IAC7C,CAAC;IAED,OAAO;QACH,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,CAAC;QAC5B,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;QAC7B,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;IAC7B,CAAC;IAED,oBAAoB;QAChB,OAAO,IAAI,CAAC,WAAW,EAAE,oBAAoB,EAAE,IAAI,KAAK,CAAC;IAC7D,CAAC;uGAxDQ,0BAA0B;2GAA1B,0BAA0B;;2FAA1B,0BAA0B;kBADtC,UAAU","sourcesContent":["import { Overlay, OverlayPositionBuilder, type OverlayRef } from \"@angular/cdk/overlay\";\r\nimport { TemplatePortal } from \"@angular/cdk/portal\";\r\nimport { isPlatformBrowser } from \"@angular/common\";\r\nimport { ElementRef, inject, Injectable, PLATFORM_ID, TemplateRef, ViewContainerRef } from \"@angular/core\";\r\nimport { EMPTY, type Observable } from \"rxjs\";\r\n\r\n@Injectable()\r\nexport class AiDatePickerOverlayService {\r\n    readonly #overlay = inject(Overlay);\r\n    readonly #overlayPositionBuilder = inject(OverlayPositionBuilder);\r\n    readonly #platformId = inject(PLATFORM_ID);\r\n\r\n    #overlayRef?: OverlayRef;\r\n    #portal?: TemplatePortal;\r\n\r\n    create(origin: ElementRef<HTMLElement>): OverlayRef | undefined {\r\n        if (this.#overlayRef) return this.#overlayRef;\r\n        if (!isPlatformBrowser(this.#platformId)) return;\r\n\r\n        const positionStrategy = this.#overlayPositionBuilder\r\n            .flexibleConnectedTo(origin)\r\n            .withPositions([\r\n                { originX: \"start\", originY: \"bottom\", overlayX: \"start\", overlayY: \"top\", offsetY: 4 },\r\n                { originX: \"start\", originY: \"top\", overlayX: \"start\", overlayY: \"bottom\", offsetY: -4 },\r\n            ])\r\n            .withPush(false);\r\n\r\n        this.#overlayRef = this.#overlay.create({\r\n            positionStrategy,\r\n            hasBackdrop: false,\r\n            scrollStrategy: this.#overlay.scrollStrategies.reposition(),\r\n        });\r\n\r\n        return this.#overlayRef;\r\n    }\r\n\r\n    attach(template: TemplateRef<void>, viewContainerRef: ViewContainerRef) {\r\n        if (!this.#overlayRef) return;\r\n        if (this.#overlayRef.hasAttached()) {\r\n            this.#overlayRef.detach();\r\n        }\r\n        this.#portal = new TemplatePortal(template, viewContainerRef);\r\n        this.#overlayRef.attach(this.#portal);\r\n    }\r\n\r\n    detach() {\r\n        if (this.#overlayRef?.hasAttached()) {\r\n            this.#overlayRef.detach();\r\n        }\r\n    }\r\n\r\n    hasAttached(): boolean {\r\n        return !!this.#overlayRef?.hasAttached();\r\n    }\r\n\r\n    destroy() {\r\n        this.#overlayRef?.dispose();\r\n        this.#overlayRef = undefined;\r\n        this.#portal = undefined;\r\n    }\r\n\r\n    outsidePointerEvents(): Observable<MouseEvent | TouchEvent> {\r\n        return this.#overlayRef?.outsidePointerEvents() ?? EMPTY;\r\n    }\r\n}\r\n"]}