@aiandralves/ai-ui 1.0.0

package/esm2022/lib/components/form-field/select/demo/multiple.js

@@ -0,0 +1,57 @@
+import { Component, signal } from "@angular/core";
+import { AiBadge } from "../../../badge";
+import { AiSelectImports } from "../select.imports";
+import * as i0 from "@angular/core";
+import * as i1 from "../select";
+import * as i2 from "../select-item";
+export class DemoSelectMultipleComponent {
+    selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoSelectMultipleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DemoSelectMultipleComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex flex-col gap-y-4">
+            <div class="flex items-center gap-x-2">
+                @for (item of selectedItems(); track $index) {
+                    <ai-badge variant="primary" class="w-max">
+                        {{ item }}
+                    </ai-badge>
+                }
+            </div>
+
+            <ai-select class="w-75" placeholder="selected options" [multiple]="true" [maxLabelCount]="4" [(value)]="selectedItems">
+                <ai-select-item value="option1">Option 1</ai-select-item>
+                <ai-select-item value="option2">Option 2</ai-select-item>
+                <ai-select-item value="option3">Option 3</ai-select-item>
+                <ai-select-item value="option4">Option 4</ai-select-item>
+                <ai-select-item value="option5">Option 5</ai-select-item>
+                <ai-select-item value="option6">Option 6</ai-select-item>
+            </ai-select>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: i1.AiSelect, selector: "ai-select", inputs: ["maxLabelCount", "multiple", "value", "disabled", "invalid", "readonly", "required", "label", "placeholder", "id", "touched", "class", "size", "selectedValue"], outputs: ["valueChange", "touchedChange", "selectedValueChange", "selectionChange"], exportAs: ["aiSelect"] }, { kind: "component", type: i2.AiSelectItem, selector: "ai-select-item, [ai-select-item]", inputs: ["value", "disabled", "class"] }, { kind: "component", type: AiBadge, selector: "ai-badge", inputs: ["variant", "shape", "fill", "icon", "disabled", "close", "class"], outputs: ["closed"], exportAs: ["aiBadge"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoSelectMultipleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiSelectImports, AiBadge],
+                    template: `
+        <div class="flex flex-col gap-y-4">
+            <div class="flex items-center gap-x-2">
+                @for (item of selectedItems(); track $index) {
+                    <ai-badge variant="primary" class="w-max">
+                        {{ item }}
+                    </ai-badge>
+                }
+            </div>
+
+            <ai-select class="w-75" placeholder="selected options" [multiple]="true" [maxLabelCount]="4" [(value)]="selectedItems">
+                <ai-select-item value="option1">Option 1</ai-select-item>
+                <ai-select-item value="option2">Option 2</ai-select-item>
+                <ai-select-item value="option3">Option 3</ai-select-item>
+                <ai-select-item value="option4">Option 4</ai-select-item>
+                <ai-select-item value="option5">Option 5</ai-select-item>
+                <ai-select-item value="option6">Option 6</ai-select-item>
+            </ai-select>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=multiple.js.map

package/esm2022/lib/components/form-field/select/demo/multiple.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiple.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/select/demo/multiple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;;;;AAyBpD,MAAM,OAAO,2BAA2B;IACpC,aAAa,GAAG,MAAM,CAAW,EAAE,yDAAC,CAAC;uGAD5B,2BAA2B;2FAA3B,2BAA2B,wEArB1B;;;;;;;;;;;;;;;;;;;KAmBT,whBApB0B,OAAO;;2FAsBzB,2BAA2B;kBAvBvC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,eAAe,EAAE,OAAO,CAAC;oBACnC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;KAmBT;iBACJ","sourcesContent":["import { Component, signal } from \"@angular/core\";\r\nimport { AiBadge } from \"../../../badge\";\r\nimport { AiSelectImports } from \"../select.imports\";\r\n\r\n@Component({\r\n    imports: [AiSelectImports, AiBadge],\r\n    template: `\r\n        <div class=\"flex flex-col gap-y-4\">\r\n            <div class=\"flex items-center gap-x-2\">\r\n                @for (item of selectedItems(); track $index) {\r\n                    <ai-badge variant=\"primary\" class=\"w-max\">\r\n                        {{ item }}\r\n                    </ai-badge>\r\n                }\r\n            </div>\r\n\r\n            <ai-select class=\"w-75\" placeholder=\"selected options\" [multiple]=\"true\" [maxLabelCount]=\"4\" [(value)]=\"selectedItems\">\r\n                <ai-select-item value=\"option1\">Option 1</ai-select-item>\r\n                <ai-select-item value=\"option2\">Option 2</ai-select-item>\r\n                <ai-select-item value=\"option3\">Option 3</ai-select-item>\r\n                <ai-select-item value=\"option4\">Option 4</ai-select-item>\r\n                <ai-select-item value=\"option5\">Option 5</ai-select-item>\r\n                <ai-select-item value=\"option6\">Option 6</ai-select-item>\r\n            </ai-select>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoSelectMultipleComponent {\r\n    selectedItems = signal<string[]>([]);\r\n}\r\n"]}

package/esm2022/lib/components/form-field/select/demo/select.js

@@ -0,0 +1,17 @@
+import { DemoSelectDefaultComponent } from "./default";
+import { DemoSelectMultipleComponent } from "./multiple";
+export const SELECT = {
+    componentName: "select",
+    componentType: "select",
+    examples: [
+        {
+            name: "default",
+            component: DemoSelectDefaultComponent,
+        },
+        {
+            name: "multiple",
+            component: DemoSelectMultipleComponent,
+        },
+    ],
+};
+//# sourceMappingURL=select.js.map

package/esm2022/lib/components/form-field/select/demo/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/select/demo/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,2BAA2B,EAAE,MAAM,YAAY,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,aAAa,EAAE,QAAQ;IACvB,aAAa,EAAE,QAAQ;IACvB,QAAQ,EAAE;QACN;YACI,IAAI,EAAE,SAAS;YACf,SAAS,EAAE,0BAA0B;SACxC;QACD;YACI,IAAI,EAAE,UAAU;YAChB,SAAS,EAAE,2BAA2B;SACzC;KACJ;CACJ,CAAC","sourcesContent":["import { DemoSelectDefaultComponent } from \"./default\";\r\nimport { DemoSelectMultipleComponent } from \"./multiple\";\r\n\r\nexport const SELECT = {\r\n    componentName: \"select\",\r\n    componentType: \"select\",\r\n    examples: [\r\n        {\r\n            name: \"default\",\r\n            component: DemoSelectDefaultComponent,\r\n        },\r\n        {\r\n            name: \"multiple\",\r\n            component: DemoSelectMultipleComponent,\r\n        },\r\n    ],\r\n};\r\n"]}

package/esm2022/lib/components/form-field/select/index.js

@@ -0,0 +1,5 @@
+export * from "./demo/select";
+export * from "./select";
+export * from "./select-item";
+export * from "./select.imports";
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/form-field/select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/form-field/select/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from \"./demo/select\";\r\nexport * from \"./select\";\r\nexport * from \"./select-item\";\r\nexport * from \"./select.imports\";\r\n"]}

package/esm2022/lib/components/form-field/select/select-item.js

@@ -0,0 +1,78 @@
+import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, input, linkedSignal, signal } from "@angular/core";
+import { mergeClasses, noopFn, transform } from "../../../core";
+import { AiIcon } from "../../icon/icon.component";
+import { selectItemIconVariants, selectItemVariants } from "./select.variants";
+import * as i0 from "@angular/core";
+export class AiSelectItem {
+    elementRef = inject((ElementRef));
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform });
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    select = signal(null, ...(ngDevMode ? [{ debugName: "select" }] : []));
+    noopFn = noopFn;
+    label = linkedSignal(() => {
+        const element = this.elementRef.nativeElement;
+        return (element.textContent ?? element.innerText)?.trim() ?? "";
+    }, ...(ngDevMode ? [{ debugName: "label" }] : []));
+    mode = signal("normal", ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    size = signal("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
+    classes = computed(() => mergeClasses(selectItemVariants({ mode: this.mode(), size: this.size() }), this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    iconClasses = computed(() => mergeClasses(selectItemIconVariants({ mode: this.mode(), size: this.size() })), ...(ngDevMode ? [{ debugName: "iconClasses" }] : []));
+    strokeWidth = computed(() => (this.mode() === "compact" ? 3 : 2), ...(ngDevMode ? [{ debugName: "strokeWidth" }] : []));
+    isSelected = computed(() => this.select()?.selectedValue().includes(this.value()) ?? false, ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
+    setSelectHost(selectHost) {
+        this.select.set(selectHost);
+    }
+    onMouseEnter() {
+        if (this.disabled())
+            return;
+        this.select()?.navigateTo();
+    }
+    onClick() {
+        if (this.disabled())
+            return;
+        this.select()?.selectItem(this.value(), this.label());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiSelectItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AiSelectItem, isStandalone: true, selector: "ai-select-item, [ai-select-item]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option", "tabindex": "-1" }, listeners: { "click": "onClick()", "mouseenter": "onMouseEnter()", "keydown.{tab}.prevent": "noopFn" }, properties: { "class": "classes()", "attr.value": "value()", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-selected": "isSelected() ? \"\" : null", "attr.aria-selected": "isSelected()" } }, ngImport: i0, template: `
+        @if (isSelected()) {
+            <span [class]="iconClasses()">
+                <ai-icon icon="check-double" size="default" />
+            </span>
+        }
+        <span class="truncate flex-1">
+            <ng-content />
+        </span>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiIcon, selector: "ai-icon, [ai-icon]", inputs: ["icon", "size", "type", "disabled", "class"], exportAs: ["aiIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiSelectItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ai-select-item, [ai-select-item]",
+                    imports: [AiIcon],
+                    template: `
+        @if (isSelected()) {
+            <span [class]="iconClasses()">
+                <ai-icon icon="check-double" size="default" />
+            </span>
+        }
+        <span class="truncate flex-1">
+            <ng-content />
+        </span>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        role: "option",
+                        tabindex: "-1",
+                        "[class]": "classes()",
+                        "[attr.value]": "value()",
+                        "[attr.data-disabled]": 'disabled() ? "" : null',
+                        "[attr.data-selected]": 'isSelected() ? "" : null',
+                        "[attr.aria-selected]": "isSelected()",
+                        "(click)": "onClick()",
+                        "(mouseenter)": "onMouseEnter()",
+                        "(keydown.{tab}.prevent)": "noopFn",
+                    },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=select-item.js.map

package/esm2022/lib/components/form-field/select/select-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-item.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/form-field/select/select-item.ts"],"names":[],"mappings":"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","sourcesContent":["import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, input, linkedSignal, signal } from \"@angular/core\";\r\n\r\nimport { mergeClasses, noopFn, transform } from \"../../../core\";\r\nimport { AiIcon } from \"../../icon/icon.component\";\r\nimport { selectItemIconVariants, SelectItemModeVariants, selectItemVariants, SelectSizeVariants } from \"./select.variants\";\r\n\r\ninterface SelectHost<T = unknown> {\r\n    selectedValue(): T[];\r\n    selectItem(value: T, label: string): void;\r\n    navigateTo(): void;\r\n}\r\n\r\n@Component({\r\n    selector: \"ai-select-item, [ai-select-item]\",\r\n    imports: [AiIcon],\r\n    template: `\r\n        @if (isSelected()) {\r\n            <span [class]=\"iconClasses()\">\r\n                <ai-icon icon=\"check-double\" size=\"default\" />\r\n            </span>\r\n        }\r\n        <span class=\"truncate flex-1\">\r\n            <ng-content />\r\n        </span>\r\n    `,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    host: {\r\n        role: \"option\",\r\n        tabindex: \"-1\",\r\n        \"[class]\": \"classes()\",\r\n        \"[attr.value]\": \"value()\",\r\n        \"[attr.data-disabled]\": 'disabled() ? \"\" : null',\r\n        \"[attr.data-selected]\": 'isSelected() ? \"\" : null',\r\n        \"[attr.aria-selected]\": \"isSelected()\",\r\n        \"(click)\": \"onClick()\",\r\n        \"(mouseenter)\": \"onMouseEnter()\",\r\n        \"(keydown.{tab}.prevent)\": \"noopFn\",\r\n    },\r\n})\r\nexport class AiSelectItem<T = unknown> {\r\n    readonly elementRef = inject(ElementRef<HTMLElement>);\r\n\r\n    readonly value = input.required<T>();\r\n    readonly disabled = input(false, { transform });\r\n    readonly class = input<string>(\"\");\r\n\r\n    private readonly select = signal<SelectHost | null>(null);\r\n    noopFn = noopFn;\r\n\r\n    readonly label = linkedSignal<string>(() => {\r\n        const element = this.elementRef.nativeElement;\r\n        return (element.textContent ?? element.innerText)?.trim() ?? \"\";\r\n    });\r\n\r\n    readonly mode = signal<SelectItemModeVariants>(\"normal\");\r\n    readonly size = signal<SelectSizeVariants>(\"default\");\r\n\r\n    protected readonly classes = computed(() => mergeClasses(selectItemVariants({ mode: this.mode(), size: this.size() }), this.class()));\r\n    protected readonly iconClasses = computed(() => mergeClasses(selectItemIconVariants({ mode: this.mode(), size: this.size() })));\r\n    protected readonly strokeWidth = computed(() => (this.mode() === \"compact\" ? 3 : 2));\r\n    protected readonly isSelected = computed(() => this.select()?.selectedValue().includes(this.value()) ?? false);\r\n\r\n    setSelectHost(selectHost: SelectHost) {\r\n        this.select.set(selectHost);\r\n    }\r\n\r\n    onMouseEnter() {\r\n        if (this.disabled()) return;\r\n        this.select()?.navigateTo();\r\n    }\r\n\r\n    onClick() {\r\n        if (this.disabled()) return;\r\n        this.select()?.selectItem(this.value(), this.label());\r\n    }\r\n}\r\n"]}

package/esm2022/lib/components/form-field/select/select.facade.js

@@ -0,0 +1,70 @@
+import { inject, Injectable } from "@angular/core";
+import { AiSelectKeyboardService, AiSelectOverlayService, AiSelectStore } from "./services";
+import * as i0 from "@angular/core";
+export class AiSelectFacade {
+    #store = inject(AiSelectStore);
+    #overlay = inject(AiSelectOverlayService);
+    #keyboard = inject(AiSelectKeyboardService);
+    #keydownSub;
+    #outsideSub;
+    open(config) {
+        if (this.#store.isOpen())
+            return;
+        const overlayRef = this.#overlay.create(config.elementRef, config.width);
+        if (!overlayRef)
+            return;
+        this.#overlay.attach(config.dropdownTemplate, config.viewContainerRef);
+        this.#overlay.updateSize(config.width);
+        this.#store.open();
+        this.#keydownSub?.unsubscribe();
+        this.#keydownSub = this.#overlay.keydownEvents().subscribe((event) => {
+            this.#keyboard.handleDropdownKeydown(event, config.keyboardContext());
+        });
+        this.#outsideSub?.unsubscribe();
+        this.#outsideSub = this.#overlay.outsidePointerEvents().subscribe((event) => {
+            const target = event.target;
+            if (!target || !config.elementRef.nativeElement.contains(target)) {
+                config.onOutsideClick();
+            }
+        });
+        config.onAfterOpen?.();
+    }
+    close(onAfterClose) {
+        this.#overlay.detach();
+        this.#store.close();
+        this.#keydownSub?.unsubscribe();
+        this.#outsideSub?.unsubscribe();
+        onAfterClose?.();
+    }
+    toggle(config, onAfterClose) {
+        if (this.#store.isOpen()) {
+            this.close(onAfterClose);
+        }
+        else {
+            this.open(config);
+        }
+    }
+    updateOverlaySize(width) {
+        this.#overlay.updateSize(width);
+    }
+    updateOverlayPosition() {
+        this.#overlay.updatePosition();
+    }
+    hasAttached() {
+        return this.#overlay.hasAttached();
+    }
+    getOverlayElement() {
+        return this.#overlay.getOverlayElement();
+    }
+    destroy() {
+        this.#keydownSub?.unsubscribe();
+        this.#outsideSub?.unsubscribe();
+        this.#overlay.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiSelectFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiSelectFacade });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiSelectFacade, decorators: [{
+            type: Injectable
+        }] });
+//# sourceMappingURL=select.facade.js.map

package/esm2022/lib/components/form-field/select/select.facade.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.facade.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/form-field/select/select.facade.ts"],"names":[],"mappings":"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","sourcesContent":["import { Subscription } from \"rxjs\";\r\n\r\nimport { ElementRef, inject, Injectable, TemplateRef, ViewContainerRef } from \"@angular/core\";\r\n\r\nimport { AiSelectKeyboardContext, AiSelectKeyboardService, AiSelectOverlayService, AiSelectStore } from \"./services\";\r\n\r\nexport interface AiSelectOpenConfig {\r\n    elementRef: ElementRef<HTMLElement>;\r\n    viewContainerRef: ViewContainerRef;\r\n    dropdownTemplate: TemplateRef<void>;\r\n    width: number;\r\n    keyboardContext: () => AiSelectKeyboardContext;\r\n    onOutsideClick: () => void;\r\n    onAfterOpen?: () => void;\r\n}\r\n\r\n@Injectable()\r\nexport class AiSelectFacade {\r\n    readonly #store = inject(AiSelectStore);\r\n    readonly #overlay = inject(AiSelectOverlayService);\r\n    readonly #keyboard = inject(AiSelectKeyboardService);\r\n\r\n    #keydownSub?: Subscription;\r\n    #outsideSub?: Subscription;\r\n\r\n    open(config: AiSelectOpenConfig) {\r\n        if (this.#store.isOpen()) return;\r\n\r\n        const overlayRef = this.#overlay.create(config.elementRef, config.width);\r\n        if (!overlayRef) return;\r\n\r\n        this.#overlay.attach(config.dropdownTemplate, config.viewContainerRef);\r\n        this.#overlay.updateSize(config.width);\r\n\r\n        this.#store.open();\r\n\r\n        this.#keydownSub?.unsubscribe();\r\n        this.#keydownSub = this.#overlay.keydownEvents().subscribe((event: KeyboardEvent) => {\r\n            this.#keyboard.handleDropdownKeydown(event, config.keyboardContext());\r\n        });\r\n\r\n        this.#outsideSub?.unsubscribe();\r\n        this.#outsideSub = this.#overlay.outsidePointerEvents().subscribe((event: any) => {\r\n            const target = event.target as Node | null;\r\n            if (!target || !config.elementRef.nativeElement.contains(target)) {\r\n                config.onOutsideClick();\r\n            }\r\n        });\r\n\r\n        config.onAfterOpen?.();\r\n    }\r\n\r\n    close(onAfterClose?: () => void) {\r\n        this.#overlay.detach();\r\n        this.#store.close();\r\n\r\n        this.#keydownSub?.unsubscribe();\r\n        this.#outsideSub?.unsubscribe();\r\n\r\n        onAfterClose?.();\r\n    }\r\n\r\n    toggle(config: AiSelectOpenConfig, onAfterClose?: () => void) {\r\n        if (this.#store.isOpen()) {\r\n            this.close(onAfterClose);\r\n        } else {\r\n            this.open(config);\r\n        }\r\n    }\r\n\r\n    updateOverlaySize(width: number) {\r\n        this.#overlay.updateSize(width);\r\n    }\r\n\r\n    updateOverlayPosition() {\r\n        this.#overlay.updatePosition();\r\n    }\r\n\r\n    hasAttached(): boolean {\r\n        return this.#overlay.hasAttached();\r\n    }\r\n\r\n    getOverlayElement(): HTMLElement | undefined {\r\n        return this.#overlay.getOverlayElement();\r\n    }\r\n\r\n    destroy() {\r\n        this.#keydownSub?.unsubscribe();\r\n        this.#outsideSub?.unsubscribe();\r\n        this.#overlay.destroy();\r\n    }\r\n}\r\n"]}

package/esm2022/lib/components/form-field/select/select.imports.js

@@ -0,0 +1,4 @@
+import { AiSelect } from "./select";
+import { AiSelectItem } from "./select-item";
+export const AiSelectImports = [AiSelect, AiSelectItem];
+//# sourceMappingURL=select.imports.js.map

package/esm2022/lib/components/form-field/select/select.imports.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.imports.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/form-field/select/select.imports.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,QAAQ,EAAE,YAAY,CAAU,CAAC","sourcesContent":["import { AiSelect } from \"./select\";\nimport { AiSelectItem } from \"./select-item\";\n\nexport const AiSelectImports = [AiSelect, AiSelectItem] as const;\n"]}

package/esm2022/lib/components/form-field/select/select.js

@@ -0,0 +1,315 @@
+import { NgTemplateOutlet } from "@angular/common";
+import { afterNextRender, ChangeDetectionStrategy, Component, computed, contentChildren, effect, ElementRef, inject, Injector, input, model, output, runInInjectionContext, viewChild, ViewContainerRef, } from "@angular/core";
+import { mergeClasses } from "../../../core";
+import { AiBadge } from "../../badge";
+import { AiIcon } from "../../icon/icon.component";
+import { AiSelectItem } from "./select-item";
+import { AiSelectFacade } from "./select.facade";
+import { selectContentVariants, selectTriggerVariants, selectVariants } from "./select.variants";
+import { AiSelectDomService, AiSelectKeyboardService, AiSelectLabelsService, AiSelectOverlayService, AiSelectStore } from "./services";
+import * as i0 from "@angular/core";
+const COMPACT_MODE_WIDTH_THRESHOLD = 100;
+export class AiSelect {
+    #elementRef = inject((ElementRef));
+    #injector = inject(Injector);
+    #viewContainerRef = inject(ViewContainerRef);
+    #store = inject(AiSelectStore);
+    #facade = inject(AiSelectFacade);
+    #dom = inject(AiSelectDomService);
+    #labels = inject(AiSelectLabelsService);
+    maxLabelCount = input(1, ...(ngDevMode ? [{ debugName: "maxLabelCount" }] : []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    value = model("", ...(ngDevMode ? [{ debugName: "value" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    label = input("", ...(ngDevMode ? [{ debugName: "label" }] : []));
+    placeholder = input("Selecione...", ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    id = input("", ...(ngDevMode ? [{ debugName: "id" }] : []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
+    dropdownTemplate = viewChild.required("dropdownTemplate");
+    selectItems = contentChildren(AiSelectItem, ...(ngDevMode ? [{ debugName: "selectItems" }] : []));
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
+    selectedValue = model(this.multiple() ? [] : "", ...(ngDevMode ? [{ debugName: "selectedValue" }] : []));
+    selectionChange = output();
+    isOpen = this.#store.isOpen;
+    focusedIndex = this.#store.focusedIndex;
+    isFocus = this.#store.isFocus;
+    isCompact = this.#store.isCompact;
+    onFocus = computed(() => {
+        if (this.isCompact()) {
+            this.isFocus.set(true);
+        }
+    }, ...(ngDevMode ? [{ debugName: "onFocus" }] : []));
+    selectedLabels = computed(() => {
+        return this.#labels.getLabels({
+            value: this.value(),
+            multiple: this.multiple(),
+            maxLabelCount: this.maxLabelCount(),
+            manualLabel: this.label(),
+            items: this.selectItems(),
+        });
+    }, ...(ngDevMode ? [{ debugName: "selectedLabels" }] : []));
+    classes = computed(() => mergeClasses(selectVariants(), this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    contentClasses = computed(() => mergeClasses(selectContentVariants()), ...(ngDevMode ? [{ debugName: "contentClasses" }] : []));
+    triggerClasses = computed(() => mergeClasses(selectTriggerVariants({ size: this.size() })), ...(ngDevMode ? [{ debugName: "triggerClasses" }] : []));
+    constructor() {
+        effect(() => {
+            this.writeValue(this.value());
+        });
+    }
+    ngAfterContentInit() {
+        const hostWidth = this.#elementRef.nativeElement.offsetWidth || 0;
+        let i = 0;
+        for (const item of this.selectItems()) {
+            item.setSelectHost({
+                selectedValue: () => (this.multiple() ? this.value() : [this.value()]),
+                selectItem: (value, label) => this.selectItem(value, label),
+                navigateTo: () => this._navigateTo(item, i),
+            });
+            item.size.set(this.size());
+            i++;
+            if (hostWidth <= COMPACT_MODE_WIDTH_THRESHOLD) {
+                this.isCompact.set(true);
+                item.mode.set("compact");
+            }
+        }
+    }
+    writeValue(value) {
+        if (this.multiple() && Array.isArray(value)) {
+            this.selectedValue.set(value);
+        }
+        else {
+            this.selectedValue.set(value ?? "");
+        }
+    }
+    onChange(value) {
+        this.value.set(value);
+    }
+    onTouched() {
+        this.touched.set(true);
+    }
+    ngOnDestroy() {
+        this._destroyOverlay();
+    }
+    onTriggerKeydown(event) {
+        const { key } = event;
+        switch (key) {
+            case "Enter":
+            case " ":
+            case "ArrowDown":
+            case "ArrowUp":
+                if (!this.isOpen()) {
+                    this._open();
+                }
+                break;
+            case "Escape":
+                if (this.isOpen()) {
+                    this._close();
+                }
+                break;
+        }
+    }
+    toggle() {
+        if (this.disabled())
+            return;
+        return this.isOpen() ? this._close() : this._open();
+    }
+    selectItem(value, label) {
+        if (value === undefined || value === null || value === "") {
+            console.warn("Attempted to select item with invalid value:", { value, label });
+            return;
+        }
+        this.value.update(selectedValues => {
+            if (Array.isArray(selectedValues)) {
+                return selectedValues.includes(value) ? selectedValues.filter(v => v !== value) : [...selectedValues, value];
+            }
+            return value;
+        });
+        const updatedValue = this.value();
+        this.onChange(updatedValue);
+        this.selectionChange.emit(updatedValue);
+        if (this.multiple()) {
+            this._updateOverlayPosition();
+        }
+        else {
+            this._close();
+            setTimeout(() => this._focusButton(), 0);
+        }
+    }
+    _navigateTo(_, index) {
+        this.focusedIndex.set(index);
+        this._updateItemFocus(this._getSelectItems(true), index);
+    }
+    _updateOverlayPosition() {
+        setTimeout(() => this.#facade.updateOverlayPosition(), 0);
+    }
+    _open() {
+        if (this.isOpen())
+            return;
+        const width = this.#elementRef.nativeElement.offsetWidth || 0;
+        this.#facade.open({
+            elementRef: this.#elementRef,
+            viewContainerRef: this.#viewContainerRef,
+            dropdownTemplate: this.dropdownTemplate(),
+            width,
+            keyboardContext: () => this._buildKeyboardContext(),
+            onOutsideClick: () => {
+                this.isFocus.set(false);
+                this._close();
+            },
+            onAfterOpen: () => {
+                this._updateFocusWhenNormalMode();
+                this._determinePortalWidthOnOpen(width);
+            },
+        });
+    }
+    _setFocusOnOpen() {
+        this._focusDropdown();
+        this._focusSelectedItem();
+    }
+    _close() {
+        this.#facade.close(() => {
+            this.onTouched();
+            this._updateFocusWhenNormalMode();
+        });
+    }
+    _updateFocusWhenNormalMode() {
+        if (!this.isCompact()) {
+            this.isFocus.set(!this.isOpen());
+        }
+    }
+    _determinePortalWidthOnOpen(portalWidth) {
+        runInInjectionContext(this.#injector, () => {
+            afterNextRender(() => {
+                if (!this.#facade.hasAttached()) {
+                    return;
+                }
+                const overlayPaneElement = this.#facade.getOverlayElement();
+                if (!overlayPaneElement)
+                    return;
+                const textElements = Array.from(overlayPaneElement.querySelectorAll("ai-select-item > span.truncate, [ai-select-item] > span.truncate"));
+                let isOverflow = false;
+                for (const textElement of textElements) {
+                    if (textElement.scrollWidth > textElement.clientWidth + 1) {
+                        isOverflow = true;
+                        break;
+                    }
+                }
+                if (!isOverflow) {
+                    this._setFocusOnOpen();
+                    return;
+                }
+                const selectItems = this.selectItems();
+                let itemMaxWidth = 0;
+                for (const item of selectItems) {
+                    itemMaxWidth = Math.max(itemMaxWidth, item.elementRef.nativeElement.scrollWidth);
+                }
+                const [selectItem] = selectItems;
+                if (isOverflow && selectItem) {
+                    const elementStyles = getComputedStyle(selectItem.elementRef.nativeElement);
+                    const leftPadding = Number.parseFloat(elementStyles.getPropertyValue("padding-left")) || 0;
+                    const rightPadding = Number.parseFloat(elementStyles.getPropertyValue("padding-right")) || 0;
+                    itemMaxWidth += leftPadding + rightPadding;
+                }
+                itemMaxWidth = Math.max(itemMaxWidth, portalWidth);
+                this.#facade.updateOverlaySize(itemMaxWidth);
+                this.#facade.updateOverlayPosition();
+                this._setFocusOnOpen();
+            });
+        });
+    }
+    _destroyOverlay() {
+        this.#facade.destroy();
+    }
+    _getSelectItems(ignoreFilter = false) {
+        if (!this.#facade.hasAttached())
+            return [];
+        return this.#dom.getSelectItems(this.#facade.getOverlayElement(), ignoreFilter);
+    }
+    _buildKeyboardContext() {
+        const items = this._getSelectItems();
+        return {
+            items,
+            focusedIndex: this.focusedIndex(),
+            onNavigate: index => {
+                this.focusedIndex.set(index);
+                this._updateItemFocus(items, index);
+            },
+            onSelect: index => {
+                const item = items[index];
+                if (!item)
+                    return;
+                const value = item.getAttribute("value");
+                const label = item.textContent?.trim() ?? "";
+                if (value === null || value === undefined) {
+                    console.warn("No value attribute found on selected item:", item);
+                    return;
+                }
+                this.selectItem(value, label);
+            },
+            onClose: () => this._close(),
+            onFocusFirst: () => this._focusFirstItem(items),
+            onFocusLast: () => this._focusLastItem(items),
+            onFocusButton: () => this._focusButton(),
+        };
+    }
+    _focusFirstItem(items) {
+        if (items.length > 0) {
+            this.focusedIndex.set(0);
+            this._updateItemFocus(items, 0);
+        }
+    }
+    _focusLastItem(items) {
+        if (items.length > 0) {
+            const lastIndex = items.length - 1;
+            this.focusedIndex.set(lastIndex);
+            this._updateItemFocus(items, lastIndex);
+        }
+    }
+    _updateItemFocus(items, focusedIndex) {
+        this.#dom.updateItemFocus(items, focusedIndex);
+    }
+    _focusDropdown() {
+        if (!this.#facade.hasAttached())
+            return;
+        this.#dom.focusDropdown(this.#facade.getOverlayElement());
+    }
+    _focusButton() {
+        this.#dom.focusButton(this.#elementRef);
+    }
+    _focusSelectedItem() {
+        const items = this._getSelectItems();
+        if (items.length === 0)
+            return;
+        let selectedValue;
+        const value = this.value();
+        if (Array.isArray(value) && value.length) {
+            [selectedValue] = value;
+        }
+        else {
+            selectedValue = value;
+        }
+        let selectedIndex = items.findIndex(item => item.getAttribute("value") === selectedValue);
+        if (selectedIndex === -1) {
+            selectedIndex = 0;
+        }
+        this.focusedIndex.set(selectedIndex);
+        this._updateItemFocus(items, selectedIndex);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AiSelect, isStandalone: true, selector: "ai-select", inputs: { maxLabelCount: { classPropertyName: "maxLabelCount", publicName: "maxLabelCount", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", selectedValue: "selectedValueChange", selectionChange: "selectionChange" }, host: { listeners: { "keydown.{enter,space,arrowdown,arrowup,escape}.prevent": "onTriggerKeydown($event)" }, properties: { "attr.data-active": "isFocus() ? \"\" : null", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "class": "classes()" } }, providers: [AiSelectStore, AiSelectOverlayService, AiSelectKeyboardService, AiSelectFacade, AiSelectDomService, AiSelectLabelsService], queries: [{ propertyName: "selectItems", predicate: AiSelectItem, isSignal: true }], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], exportAs: ["aiSelect"], ngImport: i0, template: "<button [id]=\"id()\" \r\n    type=\"button\"\r\n    role=\"combobox\"\r\n    aria-controls=\"dropdown\"\r\n    [class]=\"triggerClasses()\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    [attr.data-placeholder]=\"!value() ? '' : null\"\r\n    (blur)=\"!isOpen() && isFocus.set(false)\"\r\n    (click)=\"toggle()\"\r\n    (focus)=\"onFocus()\"\r\n>\r\n    <span class=\"flex flex-1 flex-wrap items-center gap-2\">\r\n        @let labels = selectedLabels(); @for (label of labels; track index; let index = $index) {\r\n        <ng-container *ngTemplateOutlet=\"labelsTemplate; context: { $implicit: label }\" />\r\n        } @empty {\r\n        <span class=\"text-muted-foreground truncate\">{{ placeholder() }}</span>\r\n        }\r\n    </span>\r\n    <ai-icon icon=\"arrow-down-s\" size=\"default\" [class]=\"isOpen() ? 'rotate-180' : ''\" />\r\n</button>\r\n\r\n<ng-template #labelsTemplate let-label>\r\n    @if (multiple()) {\r\n    <ai-badge variant=\"default\">\r\n        <span class=\"truncate\">{{ label }}</span>\r\n    </ai-badge>\r\n    } @else {\r\n    <span class=\"truncate\">{{ label }}</span>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #dropdownTemplate>\r\n    <div\r\n        id=\"dropdown\"\r\n        [class]=\"contentClasses()\"\r\n        role=\"listbox\"\r\n        [attr.data-state]=\"'open'\"\r\n        tabindex=\"-1\"\r\n    >\r\n        <div class=\"p-1\">\r\n            <ng-content />\r\n        </div>\r\n    </div>\r\n</ng-template>", dependencies: [{ kind: "component", type: AiBadge, selector: "ai-badge", inputs: ["variant", "shape", "fill", "icon", "disabled", "close", "class"], outputs: ["closed"], exportAs: ["aiBadge"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AiIcon, selector: "ai-icon, [ai-icon]", inputs: ["icon", "size", "type", "disabled", "class"], exportAs: ["aiIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiSelect, decorators: [{
+            type: Component,
+            args: [{ selector: "ai-select", exportAs: "aiSelect", imports: [AiBadge, NgTemplateOutlet, AiIcon], changeDetection: ChangeDetectionStrategy.OnPush, providers: [AiSelectStore, AiSelectOverlayService, AiSelectKeyboardService, AiSelectFacade, AiSelectDomService, AiSelectLabelsService], host: {
+                        "[attr.data-active]": 'isFocus() ? "" : null',
+                        "[attr.data-disabled]": 'disabled() ? "" : null',
+                        "[attr.data-state]": 'isOpen() ? "open" : "closed"',
+                        "[class]": "classes()",
+                        "(keydown.{enter,space,arrowdown,arrowup,escape}.prevent)": "onTriggerKeydown($event)",
+                    }, template: "<button [id]=\"id()\" \r\n    type=\"button\"\r\n    role=\"combobox\"\r\n    aria-controls=\"dropdown\"\r\n    [class]=\"triggerClasses()\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    [attr.data-placeholder]=\"!value() ? '' : null\"\r\n    (blur)=\"!isOpen() && isFocus.set(false)\"\r\n    (click)=\"toggle()\"\r\n    (focus)=\"onFocus()\"\r\n>\r\n    <span class=\"flex flex-1 flex-wrap items-center gap-2\">\r\n        @let labels = selectedLabels(); @for (label of labels; track index; let index = $index) {\r\n        <ng-container *ngTemplateOutlet=\"labelsTemplate; context: { $implicit: label }\" />\r\n        } @empty {\r\n        <span class=\"text-muted-foreground truncate\">{{ placeholder() }}</span>\r\n        }\r\n    </span>\r\n    <ai-icon icon=\"arrow-down-s\" size=\"default\" [class]=\"isOpen() ? 'rotate-180' : ''\" />\r\n</button>\r\n\r\n<ng-template #labelsTemplate let-label>\r\n    @if (multiple()) {\r\n    <ai-badge variant=\"default\">\r\n        <span class=\"truncate\">{{ label }}</span>\r\n    </ai-badge>\r\n    } @else {\r\n    <span class=\"truncate\">{{ label }}</span>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #dropdownTemplate>\r\n    <div\r\n        id=\"dropdown\"\r\n        [class]=\"contentClasses()\"\r\n        role=\"listbox\"\r\n        [attr.data-state]=\"'open'\"\r\n        tabindex=\"-1\"\r\n    >\r\n        <div class=\"p-1\">\r\n            <ng-content />\r\n        </div>\r\n    </div>\r\n</ng-template>" }]
+        }], ctorParameters: () => [], propDecorators: { maxLabelCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLabelCount", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], dropdownTemplate: [{ type: i0.ViewChild, args: ["dropdownTemplate", { isSignal: true }] }], selectItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AiSelectItem), { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }, { type: i0.Output, args: ["selectedValueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+//# sourceMappingURL=select.js.map