@aiandralves/ai-ui 1.0.0

package/esm2022/lib/components/icon/demo/searchable.js

@@ -0,0 +1,188 @@
+import { Component, computed, inject, signal } from "@angular/core";
+import { ReactiveFormsModule } from "@angular/forms";
+import { ClipboardUtil } from "../../../core";
+import { AiEmpty } from "../../empty";
+import { AiToastService } from "../../toast/toast.service";
+import { ICON_CATEGORIES, ICON_CATEGORY_ORDER } from "../icon-categories";
+import { AiIcon } from "../icon.component";
+import { AI_ICONS } from "../icons";
+import * as i0 from "@angular/core";
+export class DemoIconSearchableComponent {
+    #toast = inject(AiToastService);
+    search = signal("", ...(ngDevMode ? [{ debugName: "search" }] : []));
+    selectedCategory = signal("All", ...(ngDevMode ? [{ debugName: "selectedCategory" }] : []));
+    icons = Object.keys(AI_ICONS);
+    categories = ICON_CATEGORY_ORDER;
+    totalIcons = this.icons.length;
+    filteredIcons = computed(() => {
+        const query = this.search().toLowerCase().trim();
+        const category = this.selectedCategory();
+        const iconList = category === "All" ? this.icons : (ICON_CATEGORIES[category] ?? []);
+        if (!query) {
+            return iconList;
+        }
+        return iconList.filter(name => name.toLowerCase().includes(query));
+    }, ...(ngDevMode ? [{ debugName: "filteredIcons" }] : []));
+    getCategoryCount(category) {
+        return ICON_CATEGORIES[category]?.length ?? 0;
+    }
+    selectCategory(category) {
+        this.selectedCategory.set(category);
+    }
+    onSearchChange(event) {
+        const input = event.target;
+        this.search.set(input.value);
+    }
+    async onCopy(item) {
+        await ClipboardUtil.copy(item);
+        this.#toast.default({ message: "Ícone copiado", description: item, icon: "check-double", position: "bottom-right" });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoIconSearchableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DemoIconSearchableComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex w-full flex-col gap-y-6">
+            <p class="text-sm font-medium text-justify">
+                Os ícones abaixo podem ser pesquisados por nome ou filtrados por categoria. Clique em um ícone para copiar seu nome para a área de transferência. Eles são baseados
+                na biblioteca <a href="https://remixicon.com/" target="_blank" class="hover:text-primary hover:underline font-bold">Remix Icon</a>.
+            </p>
+            <div class="relative">
+                <input
+                    class="w-145 py-2.5 border text-sm border-border rounded px-4 text-muted-foreground"
+                    type="text"
+                    id="search"
+                    [value]="search()"
+                    placeholder="Pesquisar por ícones"
+                    (input)="onSearchChange($event)"
+                />
+
+                <ai-icon size="lg" icon="search" class="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
+            </div>
+
+            <div class="flex flex-wrap gap-2">
+                <button
+                    type="button"
+                    class="rounded-full border border-border px-3 py-1 text-xs transition-colors"
+                    [class.bg-primary]="selectedCategory() === 'All'"
+                    [class.text-primary-foreground]="selectedCategory() === 'All'"
+                    (click)="selectCategory('All')"
+                >
+                    Todas ({{ totalIcons }})
+                </button>
+
+                @for (category of categories; track category) {
+                    <button
+                        type="button"
+                        class="rounded-full border border-border px-3 py-1 text-xs transition-colors"
+                        [class.bg-primary]="selectedCategory() === category"
+                        [class.text-primary-foreground]="selectedCategory() === category"
+                        (click)="selectCategory(category)"
+                    >
+                        {{ category }} ({{ getCategoryCount(category) }})
+                    </button>
+                }
+            </div>
+
+            <div class="text-muted-foreground text-sm">
+                {{ filteredIcons().length }} of {{ totalIcons }} icons
+                @if (selectedCategory() !== "All") {
+                    <span>em {{ selectedCategory() }}</span>
+                }
+            </div>
+
+            <div class="grid max-h-150 grid-cols-2 gap-4 overflow-y-auto pr-4 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-4">
+                @for (iconName of filteredIcons(); track iconName) {
+                    <button
+                        shape="default"
+                        class="group border border-border rounded-lg cursor-pointer flex h-auto min-h-17.5 w-full flex-col items-center justify-center gap-2 px-3 py-2"
+                        (click)="onCopy(iconName)"
+                    >
+                        <ai-icon [icon]="iconName" class="shrink-0 transition-transform group-hover:scale-110" />
+                        <span class="group-hover:text-foreground w-full text-center text-xs leading-relaxed wrap-break-word hyphens-auto transition-colors">
+                            {{ iconName }}
+                        </span>
+                    </button>
+                }
+            </div>
+
+            @if (filteredIcons().length === 0) {
+                <ai-empty icon="code-block" title="Nenhum ícone encontrado" description="Tente ajustar sua consulta de pesquisa ou verifique a ortografia." />
+            }
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiIcon, selector: "ai-icon, [ai-icon]", inputs: ["icon", "size", "type", "disabled", "class"], exportAs: ["aiIcon"] }, { kind: "component", type: AiEmpty, selector: "ai-empty", inputs: ["actions", "icon", "image", "title", "description", "class"], exportAs: ["aiEmpty"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoIconSearchableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiIcon, AiEmpty, ReactiveFormsModule],
+                    template: `
+        <div class="flex w-full flex-col gap-y-6">
+            <p class="text-sm font-medium text-justify">
+                Os ícones abaixo podem ser pesquisados por nome ou filtrados por categoria. Clique em um ícone para copiar seu nome para a área de transferência. Eles são baseados
+                na biblioteca <a href="https://remixicon.com/" target="_blank" class="hover:text-primary hover:underline font-bold">Remix Icon</a>.
+            </p>
+            <div class="relative">
+                <input
+                    class="w-145 py-2.5 border text-sm border-border rounded px-4 text-muted-foreground"
+                    type="text"
+                    id="search"
+                    [value]="search()"
+                    placeholder="Pesquisar por ícones"
+                    (input)="onSearchChange($event)"
+                />
+
+                <ai-icon size="lg" icon="search" class="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
+            </div>
+
+            <div class="flex flex-wrap gap-2">
+                <button
+                    type="button"
+                    class="rounded-full border border-border px-3 py-1 text-xs transition-colors"
+                    [class.bg-primary]="selectedCategory() === 'All'"
+                    [class.text-primary-foreground]="selectedCategory() === 'All'"
+                    (click)="selectCategory('All')"
+                >
+                    Todas ({{ totalIcons }})
+                </button>
+
+                @for (category of categories; track category) {
+                    <button
+                        type="button"
+                        class="rounded-full border border-border px-3 py-1 text-xs transition-colors"
+                        [class.bg-primary]="selectedCategory() === category"
+                        [class.text-primary-foreground]="selectedCategory() === category"
+                        (click)="selectCategory(category)"
+                    >
+                        {{ category }} ({{ getCategoryCount(category) }})
+                    </button>
+                }
+            </div>
+
+            <div class="text-muted-foreground text-sm">
+                {{ filteredIcons().length }} of {{ totalIcons }} icons
+                @if (selectedCategory() !== "All") {
+                    <span>em {{ selectedCategory() }}</span>
+                }
+            </div>
+
+            <div class="grid max-h-150 grid-cols-2 gap-4 overflow-y-auto pr-4 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-4">
+                @for (iconName of filteredIcons(); track iconName) {
+                    <button
+                        shape="default"
+                        class="group border border-border rounded-lg cursor-pointer flex h-auto min-h-17.5 w-full flex-col items-center justify-center gap-2 px-3 py-2"
+                        (click)="onCopy(iconName)"
+                    >
+                        <ai-icon [icon]="iconName" class="shrink-0 transition-transform group-hover:scale-110" />
+                        <span class="group-hover:text-foreground w-full text-center text-xs leading-relaxed wrap-break-word hyphens-auto transition-colors">
+                            {{ iconName }}
+                        </span>
+                    </button>
+                }
+            </div>
+
+            @if (filteredIcons().length === 0) {
+                <ai-empty icon="code-block" title="Nenhum ícone encontrado" description="Tente ajustar sua consulta de pesquisa ou verifique a ortografia." />
+            }
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=searchable.js.map

package/esm2022/lib/components/icon/demo/searchable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchable.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/icon/demo/searchable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAgB,MAAM,oBAAoB,CAAC;AACxF,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;;AA2EpC,MAAM,OAAO,2BAA2B;IACpC,MAAM,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAChC,MAAM,GAAG,MAAM,CAAS,EAAE,kDAAC,CAAC;IAC5B,gBAAgB,GAAG,MAAM,CAAuB,KAAK,4DAAC,CAAC;IAEvD,KAAK,GAAiC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAiC,CAAC;IAC5F,UAAU,GAAG,mBAAmB,CAAC;IACjC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;IAE/B,aAAa,GAAG,QAAQ,CAA+B,GAAG,EAAE;QACxD,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC;QACjD,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACzC,MAAM,QAAQ,GAAiC,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAE,CAAC,eAAe,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAkC,CAAC;QAErJ,IAAI,CAAC,KAAK,EAAE,CAAC;YACT,OAAO,QAAQ,CAAC;QACpB,CAAC;QAED,OAAO,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IACvE,CAAC,yDAAC,CAAC;IAEH,gBAAgB,CAAC,QAAsB;QACnC,OAAO,eAAe,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC,CAAC;IAClD,CAAC;IAED,cAAc,CAAC,QAA8B;QACzC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAED,cAAc,CAAC,KAAY;QACvB,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;QAC/C,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC;IAED,KAAK,CAAC,MAAM,CAAC,IAAY;QACrB,MAAM,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC,CAAC;IACzH,CAAC;uGArCQ,2BAA2B;2FAA3B,2BAA2B,wEAvE1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqET,4DAtES,MAAM,4IAAE,OAAO,kJAAE,mBAAmB;;2FAwErC,2BAA2B;kBAzEvC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,mBAAmB,CAAC;oBAC/C,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqET;iBACJ","sourcesContent":["import { Component, computed, inject, signal } from \"@angular/core\";\r\nimport { ReactiveFormsModule } from \"@angular/forms\";\r\nimport { ClipboardUtil } from \"../../../core\";\r\nimport { AiEmpty } from \"../../empty\";\r\nimport { AiToastService } from \"../../toast/toast.service\";\r\nimport { ICON_CATEGORIES, ICON_CATEGORY_ORDER, IconCategory } from \"../icon-categories\";\r\nimport { AiIcon } from \"../icon.component\";\r\nimport { AI_ICONS } from \"../icons\";\r\n\r\n@Component({\r\n    imports: [AiIcon, AiEmpty, ReactiveFormsModule],\r\n    template: `\r\n        <div class=\"flex w-full flex-col gap-y-6\">\r\n            <p class=\"text-sm font-medium text-justify\">\r\n                Os ícones abaixo podem ser pesquisados por nome ou filtrados por categoria. Clique em um ícone para copiar seu nome para a área de transferência. Eles são baseados\r\n                na biblioteca <a href=\"https://remixicon.com/\" target=\"_blank\" class=\"hover:text-primary hover:underline font-bold\">Remix Icon</a>.\r\n            </p>\r\n            <div class=\"relative\">\r\n                <input\r\n                    class=\"w-145 py-2.5 border text-sm border-border rounded px-4 text-muted-foreground\"\r\n                    type=\"text\"\r\n                    id=\"search\"\r\n                    [value]=\"search()\"\r\n                    placeholder=\"Pesquisar por ícones\"\r\n                    (input)=\"onSearchChange($event)\"\r\n                />\r\n\r\n                <ai-icon size=\"lg\" icon=\"search\" class=\"absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground\" />\r\n            </div>\r\n\r\n            <div class=\"flex flex-wrap gap-2\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"rounded-full border border-border px-3 py-1 text-xs transition-colors\"\r\n                    [class.bg-primary]=\"selectedCategory() === 'All'\"\r\n                    [class.text-primary-foreground]=\"selectedCategory() === 'All'\"\r\n                    (click)=\"selectCategory('All')\"\r\n                >\r\n                    Todas ({{ totalIcons }})\r\n                </button>\r\n\r\n                @for (category of categories; track category) {\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"rounded-full border border-border px-3 py-1 text-xs transition-colors\"\r\n                        [class.bg-primary]=\"selectedCategory() === category\"\r\n                        [class.text-primary-foreground]=\"selectedCategory() === category\"\r\n                        (click)=\"selectCategory(category)\"\r\n                    >\r\n                        {{ category }} ({{ getCategoryCount(category) }})\r\n                    </button>\r\n                }\r\n            </div>\r\n\r\n            <div class=\"text-muted-foreground text-sm\">\r\n                {{ filteredIcons().length }} of {{ totalIcons }} icons\r\n                @if (selectedCategory() !== \"All\") {\r\n                    <span>em {{ selectedCategory() }}</span>\r\n                }\r\n            </div>\r\n\r\n            <div class=\"grid max-h-150 grid-cols-2 gap-4 overflow-y-auto pr-4 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-4\">\r\n                @for (iconName of filteredIcons(); track iconName) {\r\n                    <button\r\n                        shape=\"default\"\r\n                        class=\"group border border-border rounded-lg cursor-pointer flex h-auto min-h-17.5 w-full flex-col items-center justify-center gap-2 px-3 py-2\"\r\n                        (click)=\"onCopy(iconName)\"\r\n                    >\r\n                        <ai-icon [icon]=\"iconName\" class=\"shrink-0 transition-transform group-hover:scale-110\" />\r\n                        <span class=\"group-hover:text-foreground w-full text-center text-xs leading-relaxed wrap-break-word hyphens-auto transition-colors\">\r\n                            {{ iconName }}\r\n                        </span>\r\n                    </button>\r\n                }\r\n            </div>\r\n\r\n            @if (filteredIcons().length === 0) {\r\n                <ai-empty icon=\"code-block\" title=\"Nenhum ícone encontrado\" description=\"Tente ajustar sua consulta de pesquisa ou verifique a ortografia.\" />\r\n            }\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoIconSearchableComponent {\r\n    #toast = inject(AiToastService);\r\n    search = signal<string>(\"\");\r\n    selectedCategory = signal<IconCategory | \"All\">(\"All\");\r\n\r\n    icons: Array<keyof typeof AI_ICONS> = Object.keys(AI_ICONS) as Array<keyof typeof AI_ICONS>;\r\n    categories = ICON_CATEGORY_ORDER;\r\n    totalIcons = this.icons.length;\r\n\r\n    filteredIcons = computed<Array<keyof typeof AI_ICONS>>(() => {\r\n        const query = this.search().toLowerCase().trim();\r\n        const category = this.selectedCategory();\r\n        const iconList: Array<keyof typeof AI_ICONS> = category === \"All\" ? this.icons : ((ICON_CATEGORIES[category] ?? []) as Array<keyof typeof AI_ICONS>);\r\n\r\n        if (!query) {\r\n            return iconList;\r\n        }\r\n\r\n        return iconList.filter(name => name.toLowerCase().includes(query));\r\n    });\r\n\r\n    getCategoryCount(category: IconCategory) {\r\n        return ICON_CATEGORIES[category]?.length ?? 0;\r\n    }\r\n\r\n    selectCategory(category: IconCategory | \"All\") {\r\n        this.selectedCategory.set(category);\r\n    }\r\n\r\n    onSearchChange(event: Event) {\r\n        const input = event.target as HTMLInputElement;\r\n        this.search.set(input.value);\r\n    }\r\n\r\n    async onCopy(item: string) {\r\n        await ClipboardUtil.copy(item);\r\n        this.#toast.default({ message: \"Ícone copiado\", description: item, icon: \"check-double\", position: \"bottom-right\" });\r\n    }\r\n}\r\n"]}

package/esm2022/lib/components/icon/demo/size.js

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from "@angular/core";
+import { AiIcon } from "../icon.component";
+import * as i0 from "@angular/core";
+export class DemoIconSizeComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoIconSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoIconSizeComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="w-125 flex items-center gap-x-2 justify-center">
+            <ai-icon icon="heart" size="sm" />
+            <ai-icon icon="heart" size="default" />
+            <ai-icon icon="heart" size="lg" />
+            <ai-icon icon="heart" size="xl" />
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiIcon, selector: "ai-icon, [ai-icon]", inputs: ["icon", "size", "type", "disabled", "class"], exportAs: ["aiIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoIconSizeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiIcon],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+        <div class="w-125 flex items-center gap-x-2 justify-center">
+            <ai-icon icon="heart" size="sm" />
+            <ai-icon icon="heart" size="default" />
+            <ai-icon icon="heart" size="lg" />
+            <ai-icon icon="heart" size="xl" />
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=size.js.map

package/esm2022/lib/components/icon/demo/size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/icon/demo/size.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACtF,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;;AAe3C,MAAM,OAAO,qBAAqB;uGAArB,qBAAqB;2FAArB,qBAAqB,wEATpB;;;;;;;KAOT,4DAVS,MAAM;;2FAYP,qBAAqB;kBAbjC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,MAAM,CAAC;oBACjB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,QAAQ,EAAE;;;;;;;KAOT;iBACJ","sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation } from \"@angular/core\";\r\nimport { AiIcon } from \"../icon.component\";\r\n\r\n@Component({\r\n    imports: [AiIcon],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n    template: `\r\n        <div class=\"w-125 flex items-center gap-x-2 justify-center\">\r\n            <ai-icon icon=\"heart\" size=\"sm\" />\r\n            <ai-icon icon=\"heart\" size=\"default\" />\r\n            <ai-icon icon=\"heart\" size=\"lg\" />\r\n            <ai-icon icon=\"heart\" size=\"xl\" />\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoIconSizeComponent {}\r\n"]}

package/esm2022/lib/components/icon/demo/type.js

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from "@angular/core";
+import { AiIcon } from "../icon.component";
+import * as i0 from "@angular/core";
+export class DemoIconTypeComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoIconTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoIconTypeComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="w-125 flex items-center gap-x-2  justify-center">
+            <ai-icon icon="heart" type="fill" />
+            <ai-icon icon="heart" type="line" />
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiIcon, selector: "ai-icon, [ai-icon]", inputs: ["icon", "size", "type", "disabled", "class"], exportAs: ["aiIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoIconTypeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiIcon],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+        <div class="w-125 flex items-center gap-x-2  justify-center">
+            <ai-icon icon="heart" type="fill" />
+            <ai-icon icon="heart" type="line" />
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=type.js.map

package/esm2022/lib/components/icon/demo/type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/icon/demo/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACtF,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;;AAa3C,MAAM,OAAO,qBAAqB;uGAArB,qBAAqB;2FAArB,qBAAqB,wEAPpB;;;;;KAKT,4DARS,MAAM;;2FAUP,qBAAqB;kBAXjC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,MAAM,CAAC;oBACjB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,QAAQ,EAAE;;;;;KAKT;iBACJ","sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation } from \"@angular/core\";\r\nimport { AiIcon } from \"../icon.component\";\r\n\r\n@Component({\r\n    imports: [AiIcon],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n    template: `\r\n        <div class=\"w-125 flex items-center gap-x-2  justify-center\">\r\n            <ai-icon icon=\"heart\" type=\"fill\" />\r\n            <ai-icon icon=\"heart\" type=\"line\" />\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoIconTypeComponent {}\r\n"]}