ngx-com 0.0.3 → 0.0.4

package/fesm2022/ngx-com-components-empty-state.mjs

@@ -0,0 +1,382 @@
+import * as i0 from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, Directive } from '@angular/core';
+import { mergeClasses } from 'ngx-com/utils';
+import { cva } from 'class-variance-authority';
+
+/**
+ * CVA variants for the empty state container.
+ *
+ * @tokens `--color-foreground`, `--color-muted`, `--color-muted-foreground`
+ */
+const emptyStateVariants = cva('flex', {
+    variants: {
+        orientation: {
+            vertical: 'flex-col',
+            horizontal: 'flex-row',
+        },
+        align: {
+            center: 'items-center text-center',
+            start: 'items-start text-left',
+        },
+        size: {
+            sm: 'gap-2 py-4',
+            md: 'gap-3 py-6',
+            lg: 'gap-4 py-10',
+        },
+    },
+    compoundVariants: [
+        { orientation: 'horizontal', align: 'center', class: 'justify-center' },
+        { orientation: 'horizontal', align: 'start', class: 'justify-start' },
+    ],
+    defaultVariants: {
+        size: 'md',
+        align: 'center',
+        orientation: 'vertical',
+    },
+});
+/**
+ * CVA variants for the empty state icon container.
+ *
+ * @tokens `--color-muted`, `--color-muted-foreground`
+ */
+const emptyStateIconVariants = cva('flex items-center justify-center shrink-0 bg-muted text-muted-foreground', {
+    variants: {
+        size: {
+            sm: 'size-10 rounded-lg',
+            md: 'size-14 rounded-xl',
+            lg: 'size-20 rounded-2xl',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+/**
+ * CVA variants for the empty state title.
+ *
+ * @tokens `--color-foreground`
+ */
+const emptyStateTitleVariants = cva('font-heading tracking-tight text-foreground', {
+    variants: {
+        size: {
+            sm: 'text-sm font-medium',
+            md: 'text-base font-semibold',
+            lg: 'text-lg font-semibold',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+/**
+ * CVA variants for the empty state description.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+const emptyStateDescriptionVariants = cva('text-muted-foreground', {
+    variants: {
+        size: {
+            sm: 'text-xs max-w-[200px]',
+            md: 'text-sm max-w-xs',
+            lg: 'text-base max-w-sm',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+/**
+ * CVA variants for the empty state actions container.
+ */
+const emptyStateActionsVariants = cva('flex flex-wrap items-center justify-center', {
+    variants: {
+        size: {
+            sm: 'gap-2 pt-1',
+            md: 'gap-2.5 pt-2',
+            lg: 'gap-3 pt-3',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+
+/**
+ * Empty state component - a placeholder surface for when there is no data to display.
+ *
+ * Common use cases include:
+ * - Empty lists or tables ("No results found")
+ * - Initial states before user action ("Create your first project")
+ * - Search results with no matches ("No items match your search")
+ * - Error recovery states ("Something went wrong. Try again.")
+ *
+ * The component is a pure layout container that accepts projected content through attribute directives.
+ *
+ * @tokens `--color-muted`, `--color-muted-foreground`, `--color-foreground`
+ *
+ * @example Minimal empty state
+ * ```html
+ * <com-empty-state>
+ *   <div comEmptyStateIcon>
+ *     <com-icon name="inbox" size="xl" />
+ *   </div>
+ *   <h3 comEmptyStateTitle>No messages</h3>
+ * </com-empty-state>
+ * ```
+ *
+ * @example Full empty state with description and action
+ * ```html
+ * <com-empty-state>
+ *   <div comEmptyStateIcon>
+ *     <com-icon name="folder-open" size="xl" />
+ *   </div>
+ *   <h3 comEmptyStateTitle>No projects yet</h3>
+ *   <p comEmptyStateDescription>
+ *     Create your first project to get started organizing your work.
+ *   </p>
+ *   <div comEmptyStateActions>
+ *     <button comButton>Create Project</button>
+ *   </div>
+ * </com-empty-state>
+ * ```
+ *
+ * @example Search empty state with secondary action
+ * ```html
+ * <com-empty-state>
+ *   <div comEmptyStateIcon>
+ *     <com-icon name="search-x" size="xl" />
+ *   </div>
+ *   <h3 comEmptyStateTitle>No results found</h3>
+ *   <p comEmptyStateDescription>
+ *     Try adjusting your search terms or filters.
+ *   </p>
+ *   <div comEmptyStateActions>
+ *     <button comButton variant="outline">Clear Filters</button>
+ *     <button comButton>New Search</button>
+ *   </div>
+ * </com-empty-state>
+ * ```
+ *
+ * @example Small size for inline contexts
+ * ```html
+ * <com-empty-state size="sm">
+ *   <div comEmptyStateIcon>
+ *     <com-icon name="list" size="lg" />
+ *   </div>
+ *   <h4 comEmptyStateTitle>No items</h4>
+ * </com-empty-state>
+ * ```
+ *
+ * @example Large size for full-page empty states
+ * ```html
+ * <com-empty-state size="lg">
+ *   <div comEmptyStateIcon>
+ *     <com-icon name="rocket" size="2xl" />
+ *   </div>
+ *   <h2 comEmptyStateTitle>Welcome to Acme</h2>
+ *   <p comEmptyStateDescription>
+ *     Your dashboard is ready. Start by creating your first resource.
+ *   </p>
+ *   <div comEmptyStateActions>
+ *     <button comButton size="lg">Get Started</button>
+ *   </div>
+ * </com-empty-state>
+ * ```
+ *
+ * @example Horizontal orientation
+ * ```html
+ * <com-empty-state orientation="horizontal" align="start">
+ *   <div comEmptyStateIcon>
+ *     <com-icon name="alert-circle" size="lg" />
+ *   </div>
+ *   <h4 comEmptyStateTitle>No notifications</h4>
+ *   <p comEmptyStateDescription>You're all caught up!</p>
+ * </com-empty-state>
+ * ```
+ *
+ * @example Left-aligned for sidebar contexts
+ * ```html
+ * <com-empty-state align="start">
+ *   <div comEmptyStateIcon>
+ *     <com-icon name="users" size="lg" />
+ *   </div>
+ *   <h4 comEmptyStateTitle>No team members</h4>
+ *   <p comEmptyStateDescription>Invite people to collaborate.</p>
+ *   <div comEmptyStateActions>
+ *     <button comButton size="sm">Invite</button>
+ *   </div>
+ * </com-empty-state>
+ * ```
+ */
+class ComEmptyState {
+    /** Controls overall scale: icon container size, text sizes, spacing. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Horizontal alignment of content. */
+    align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : []));
+    /** Layout direction: vertical stacks content, horizontal places icon beside text. */
+    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    /** Consumer CSS classes - merged with variant classes. */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    computedClass = computed(() => mergeClasses(emptyStateVariants({
+        size: this.size(),
+        align: this.align(),
+        orientation: this.orientation(),
+    }), this.userClass()), ...(ngDevMode ? [{ debugName: "computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComEmptyState, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ComEmptyState, isStandalone: true, selector: "com-empty-state", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, exportAs: ["comEmptyState"], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComEmptyState, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'com-empty-state',
+                    exportAs: 'comEmptyState',
+                    template: `<ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Empty state icon container directive - styled circular background for icon/illustration.
+ *
+ * Apply to a container element. Place any content inside (typically `com-icon`).
+ * Styling automatically adapts to the parent's `size` input.
+ *
+ * @example
+ * ```html
+ * <div comEmptyStateIcon>
+ *   <com-icon name="inbox" size="xl" />
+ * </div>
+ * ```
+ *
+ * @example With custom illustration
+ * ```html
+ * <div comEmptyStateIcon>
+ *   <img src="/assets/empty-mailbox.svg" alt="" class="size-8" />
+ * </div>
+ * ```
+ *
+ * @tokens `--color-muted`, `--color-muted-foreground`
+ */
+class ComEmptyStateIcon {
+    emptyState = inject(ComEmptyState);
+    computedClass = computed(() => emptyStateIconVariants({ size: this.emptyState.size() }), ...(ngDevMode ? [{ debugName: "computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComEmptyStateIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComEmptyStateIcon, isStandalone: true, selector: "[comEmptyStateIcon]", host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComEmptyStateIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comEmptyStateIcon]',
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }] });
+
+/**
+ * Empty state title directive - styled heading text.
+ *
+ * Apply to any heading element. Consumer picks the semantic level (h2, h3, etc.).
+ * Styling automatically adapts to the parent's `size` input.
+ *
+ * @example
+ * ```html
+ * <h3 comEmptyStateTitle>No projects yet</h3>
+ * ```
+ *
+ * @tokens `--color-foreground`
+ */
+class ComEmptyStateTitle {
+    emptyState = inject(ComEmptyState);
+    computedClass = computed(() => emptyStateTitleVariants({ size: this.emptyState.size() }), ...(ngDevMode ? [{ debugName: "computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComEmptyStateTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComEmptyStateTitle, isStandalone: true, selector: "[comEmptyStateTitle]", host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComEmptyStateTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comEmptyStateTitle]',
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }] });
+
+/**
+ * Empty state description directive - supporting text.
+ *
+ * Apply to a paragraph or text element.
+ * Styling automatically adapts to the parent's `size` input.
+ *
+ * @example
+ * ```html
+ * <p comEmptyStateDescription>
+ *   Create your first project to get started organizing your work.
+ * </p>
+ * ```
+ *
+ * @tokens `--color-muted-foreground`
+ */
+class ComEmptyStateDescription {
+    emptyState = inject(ComEmptyState);
+    computedClass = computed(() => emptyStateDescriptionVariants({ size: this.emptyState.size() }), ...(ngDevMode ? [{ debugName: "computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComEmptyStateDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComEmptyStateDescription, isStandalone: true, selector: "[comEmptyStateDescription]", host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComEmptyStateDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comEmptyStateDescription]',
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }] });
+
+/**
+ * Empty state actions directive - container for action buttons.
+ *
+ * Apply to a container element. Place buttons inside.
+ * Styling automatically adapts to the parent's `size` input.
+ *
+ * @example Single action
+ * ```html
+ * <div comEmptyStateActions>
+ *   <button comButton>Create Project</button>
+ * </div>
+ * ```
+ *
+ * @example Multiple actions
+ * ```html
+ * <div comEmptyStateActions>
+ *   <button comButton variant="outline">Clear Filters</button>
+ *   <button comButton>New Search</button>
+ * </div>
+ * ```
+ */
+class ComEmptyStateActions {
+    emptyState = inject(ComEmptyState);
+    computedClass = computed(() => emptyStateActionsVariants({ size: this.emptyState.size() }), ...(ngDevMode ? [{ debugName: "computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComEmptyStateActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComEmptyStateActions, isStandalone: true, selector: "[comEmptyStateActions]", host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComEmptyStateActions, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comEmptyStateActions]',
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComEmptyState, ComEmptyStateActions, ComEmptyStateDescription, ComEmptyStateIcon, ComEmptyStateTitle, emptyStateActionsVariants, emptyStateDescriptionVariants, emptyStateIconVariants, emptyStateTitleVariants, emptyStateVariants };
+//# sourceMappingURL=ngx-com-components-empty-state.mjs.map

package/fesm2022/ngx-com-components-empty-state.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-com-components-empty-state.mjs","sources":["../../../projects/com/components/empty-state/empty-state.variants.ts","../../../projects/com/components/empty-state/empty-state.component.ts","../../../projects/com/components/empty-state/empty-state-icon.directive.ts","../../../projects/com/components/empty-state/empty-state-title.directive.ts","../../../projects/com/components/empty-state/empty-state-description.directive.ts","../../../projects/com/components/empty-state/empty-state-actions.directive.ts","../../../projects/com/components/empty-state/ngx-com-components-empty-state.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type EmptyStateSize = 'sm' | 'md' | 'lg';\nexport type EmptyStateAlign = 'start' | 'center';\nexport type EmptyStateOrientation = 'vertical' | 'horizontal';\n\n/**\n * CVA variants for the empty state container.\n *\n * @tokens `--color-foreground`, `--color-muted`, `--color-muted-foreground`\n */\nexport const emptyStateVariants: (props?: {\n  size?: EmptyStateSize;\n  align?: EmptyStateAlign;\n  orientation?: EmptyStateOrientation;\n}) => string = cva('flex', {\n  variants: {\n    orientation: {\n      vertical: 'flex-col',\n      horizontal: 'flex-row',\n    },\n    align: {\n      center: 'items-center text-center',\n      start: 'items-start text-left',\n    },\n    size: {\n      sm: 'gap-2 py-4',\n      md: 'gap-3 py-6',\n      lg: 'gap-4 py-10',\n    },\n  },\n  compoundVariants: [\n    { orientation: 'horizontal', align: 'center', class: 'justify-center' },\n    { orientation: 'horizontal', align: 'start', class: 'justify-start' },\n  ],\n  defaultVariants: {\n    size: 'md',\n    align: 'center',\n    orientation: 'vertical',\n  },\n});\n\n/**\n * CVA variants for the empty state icon container.\n *\n * @tokens `--color-muted`, `--color-muted-foreground`\n */\nexport const emptyStateIconVariants: (props?: { size?: EmptyStateSize }) => string = cva(\n  'flex items-center justify-center shrink-0 bg-muted text-muted-foreground',\n  {\n    variants: {\n      size: {\n        sm: 'size-10 rounded-lg',\n        md: 'size-14 rounded-xl',\n        lg: 'size-20 rounded-2xl',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\n/**\n * CVA variants for the empty state title.\n *\n * @tokens `--color-foreground`\n */\nexport const emptyStateTitleVariants: (props?: { size?: EmptyStateSize }) => string = cva(\n  'font-heading tracking-tight text-foreground',\n  {\n    variants: {\n      size: {\n        sm: 'text-sm font-medium',\n        md: 'text-base font-semibold',\n        lg: 'text-lg font-semibold',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\n/**\n * CVA variants for the empty state description.\n *\n * @tokens `--color-muted-foreground`\n */\nexport const emptyStateDescriptionVariants: (props?: { size?: EmptyStateSize }) => string = cva(\n  'text-muted-foreground',\n  {\n    variants: {\n      size: {\n        sm: 'text-xs max-w-[200px]',\n        md: 'text-sm max-w-xs',\n        lg: 'text-base max-w-sm',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\n/**\n * CVA variants for the empty state actions container.\n */\nexport const emptyStateActionsVariants: (props?: { size?: EmptyStateSize }) => string = cva(\n  'flex flex-wrap items-center justify-center',\n  {\n    variants: {\n      size: {\n        sm: 'gap-2 pt-1',\n        md: 'gap-2.5 pt-2',\n        lg: 'gap-3 pt-3',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type { InputSignal, Signal } from '@angular/core';\nimport { mergeClasses } from 'ngx-com/utils';\nimport { emptyStateVariants } from './empty-state.variants';\nimport type { EmptyStateSize, EmptyStateAlign, EmptyStateOrientation } from './empty-state.variants';\n\n/**\n * Empty state component - a placeholder surface for when there is no data to display.\n *\n * Common use cases include:\n * - Empty lists or tables (\"No results found\")\n * - Initial states before user action (\"Create your first project\")\n * - Search results with no matches (\"No items match your search\")\n * - Error recovery states (\"Something went wrong. Try again.\")\n *\n * The component is a pure layout container that accepts projected content through attribute directives.\n *\n * @tokens `--color-muted`, `--color-muted-foreground`, `--color-foreground`\n *\n * @example Minimal empty state\n * ```html\n * <com-empty-state>\n *   <div comEmptyStateIcon>\n *     <com-icon name=\"inbox\" size=\"xl\" />\n *   </div>\n *   <h3 comEmptyStateTitle>No messages</h3>\n * </com-empty-state>\n * ```\n *\n * @example Full empty state with description and action\n * ```html\n * <com-empty-state>\n *   <div comEmptyStateIcon>\n *     <com-icon name=\"folder-open\" size=\"xl\" />\n *   </div>\n *   <h3 comEmptyStateTitle>No projects yet</h3>\n *   <p comEmptyStateDescription>\n *     Create your first project to get started organizing your work.\n *   </p>\n *   <div comEmptyStateActions>\n *     <button comButton>Create Project</button>\n *   </div>\n * </com-empty-state>\n * ```\n *\n * @example Search empty state with secondary action\n * ```html\n * <com-empty-state>\n *   <div comEmptyStateIcon>\n *     <com-icon name=\"search-x\" size=\"xl\" />\n *   </div>\n *   <h3 comEmptyStateTitle>No results found</h3>\n *   <p comEmptyStateDescription>\n *     Try adjusting your search terms or filters.\n *   </p>\n *   <div comEmptyStateActions>\n *     <button comButton variant=\"outline\">Clear Filters</button>\n *     <button comButton>New Search</button>\n *   </div>\n * </com-empty-state>\n * ```\n *\n * @example Small size for inline contexts\n * ```html\n * <com-empty-state size=\"sm\">\n *   <div comEmptyStateIcon>\n *     <com-icon name=\"list\" size=\"lg\" />\n *   </div>\n *   <h4 comEmptyStateTitle>No items</h4>\n * </com-empty-state>\n * ```\n *\n * @example Large size for full-page empty states\n * ```html\n * <com-empty-state size=\"lg\">\n *   <div comEmptyStateIcon>\n *     <com-icon name=\"rocket\" size=\"2xl\" />\n *   </div>\n *   <h2 comEmptyStateTitle>Welcome to Acme</h2>\n *   <p comEmptyStateDescription>\n *     Your dashboard is ready. Start by creating your first resource.\n *   </p>\n *   <div comEmptyStateActions>\n *     <button comButton size=\"lg\">Get Started</button>\n *   </div>\n * </com-empty-state>\n * ```\n *\n * @example Horizontal orientation\n * ```html\n * <com-empty-state orientation=\"horizontal\" align=\"start\">\n *   <div comEmptyStateIcon>\n *     <com-icon name=\"alert-circle\" size=\"lg\" />\n *   </div>\n *   <h4 comEmptyStateTitle>No notifications</h4>\n *   <p comEmptyStateDescription>You're all caught up!</p>\n * </com-empty-state>\n * ```\n *\n * @example Left-aligned for sidebar contexts\n * ```html\n * <com-empty-state align=\"start\">\n *   <div comEmptyStateIcon>\n *     <com-icon name=\"users\" size=\"lg\" />\n *   </div>\n *   <h4 comEmptyStateTitle>No team members</h4>\n *   <p comEmptyStateDescription>Invite people to collaborate.</p>\n *   <div comEmptyStateActions>\n *     <button comButton size=\"sm\">Invite</button>\n *   </div>\n * </com-empty-state>\n * ```\n */\n@Component({\n  selector: 'com-empty-state',\n  exportAs: 'comEmptyState',\n  template: `<ng-content />`,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class ComEmptyState {\n  /** Controls overall scale: icon container size, text sizes, spacing. */\n  readonly size: InputSignal<EmptyStateSize> = input<EmptyStateSize>('md');\n\n  /** Horizontal alignment of content. */\n  readonly align: InputSignal<EmptyStateAlign> = input<EmptyStateAlign>('center');\n\n  /** Layout direction: vertical stacks content, horizontal places icon beside text. */\n  readonly orientation: InputSignal<EmptyStateOrientation> = input<EmptyStateOrientation>('vertical');\n\n  /** Consumer CSS classes - merged with variant classes. */\n  readonly userClass: InputSignal<string> = input<string>('', { alias: 'class' });\n\n  protected readonly computedClass: Signal<string> = computed(() =>\n    mergeClasses(\n      emptyStateVariants({\n        size: this.size(),\n        align: this.align(),\n        orientation: this.orientation(),\n      }),\n      this.userClass()\n    )\n  );\n}\n","import { computed, Directive, inject, type Signal } from '@angular/core';\nimport { ComEmptyState } from './empty-state.component';\nimport { emptyStateIconVariants } from './empty-state.variants';\n\n/**\n * Empty state icon container directive - styled circular background for icon/illustration.\n *\n * Apply to a container element. Place any content inside (typically `com-icon`).\n * Styling automatically adapts to the parent's `size` input.\n *\n * @example\n * ```html\n * <div comEmptyStateIcon>\n *   <com-icon name=\"inbox\" size=\"xl\" />\n * </div>\n * ```\n *\n * @example With custom illustration\n * ```html\n * <div comEmptyStateIcon>\n *   <img src=\"/assets/empty-mailbox.svg\" alt=\"\" class=\"size-8\" />\n * </div>\n * ```\n *\n * @tokens `--color-muted`, `--color-muted-foreground`\n */\n@Directive({\n  selector: '[comEmptyStateIcon]',\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class ComEmptyStateIcon {\n  private readonly emptyState = inject(ComEmptyState);\n\n  protected readonly computedClass: Signal<string> = computed(() =>\n    emptyStateIconVariants({ size: this.emptyState.size() })\n  );\n}\n","import { computed, Directive, inject, type Signal } from '@angular/core';\nimport { ComEmptyState } from './empty-state.component';\nimport { emptyStateTitleVariants } from './empty-state.variants';\n\n/**\n * Empty state title directive - styled heading text.\n *\n * Apply to any heading element. Consumer picks the semantic level (h2, h3, etc.).\n * Styling automatically adapts to the parent's `size` input.\n *\n * @example\n * ```html\n * <h3 comEmptyStateTitle>No projects yet</h3>\n * ```\n *\n * @tokens `--color-foreground`\n */\n@Directive({\n  selector: '[comEmptyStateTitle]',\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class ComEmptyStateTitle {\n  private readonly emptyState = inject(ComEmptyState);\n\n  protected readonly computedClass: Signal<string> = computed(() =>\n    emptyStateTitleVariants({ size: this.emptyState.size() })\n  );\n}\n","import { computed, Directive, inject, type Signal } from '@angular/core';\nimport { ComEmptyState } from './empty-state.component';\nimport { emptyStateDescriptionVariants } from './empty-state.variants';\n\n/**\n * Empty state description directive - supporting text.\n *\n * Apply to a paragraph or text element.\n * Styling automatically adapts to the parent's `size` input.\n *\n * @example\n * ```html\n * <p comEmptyStateDescription>\n *   Create your first project to get started organizing your work.\n * </p>\n * ```\n *\n * @tokens `--color-muted-foreground`\n */\n@Directive({\n  selector: '[comEmptyStateDescription]',\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class ComEmptyStateDescription {\n  private readonly emptyState = inject(ComEmptyState);\n\n  protected readonly computedClass: Signal<string> = computed(() =>\n    emptyStateDescriptionVariants({ size: this.emptyState.size() })\n  );\n}\n","import { computed, Directive, inject, type Signal } from '@angular/core';\nimport { ComEmptyState } from './empty-state.component';\nimport { emptyStateActionsVariants } from './empty-state.variants';\n\n/**\n * Empty state actions directive - container for action buttons.\n *\n * Apply to a container element. Place buttons inside.\n * Styling automatically adapts to the parent's `size` input.\n *\n * @example Single action\n * ```html\n * <div comEmptyStateActions>\n *   <button comButton>Create Project</button>\n * </div>\n * ```\n *\n * @example Multiple actions\n * ```html\n * <div comEmptyStateActions>\n *   <button comButton variant=\"outline\">Clear Filters</button>\n *   <button comButton>New Search</button>\n * </div>\n * ```\n */\n@Directive({\n  selector: '[comEmptyStateActions]',\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class ComEmptyStateActions {\n  private readonly emptyState = inject(ComEmptyState);\n\n  protected readonly computedClass: Signal<string> = computed(() =>\n    emptyStateActionsVariants({ size: this.emptyState.size() })\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngx-com-components-form-field.mjs

@@ -165,9 +165,9 @@ const formFieldLabelVariants = cva([
             fill: '',
         },
         floating: {
-            // Floating: absolute positioning relative to container
+            // Floating: absolute positioning at container border
             true: 'absolute',
-            // Not floating: static positioning in flex flow (after prefix)
+            // Not floating: relative positioning in flex flow (after prefix)
             false: 'relative flex-shrink-0 pl-3',
         },
         color: {
@@ -189,7 +189,7 @@ const formFieldLabelVariants = cva([
         },
     },
     compoundVariants: [
-        // Outline floating (label above border)
+        // Outline floating (label above border with notch effect)
         {
             appearance: 'outline',
             floating: true,
@@ -807,27 +807,28 @@ class ComFormField {
         });
         // Wire up aria-describedby on the control
         effect(() => {
-            const inputEl = this.inputDirective();
-            if (!inputEl)
+            const ctrl = this.control();
+            if (!ctrl || !('setDescribedByIds' in ctrl))
                 return;
             const ids = this.showErrors()
                 ? this.errorChildren().filter((e) => e.shouldShow()).map((e) => e.id)
                 : this.hintChildren().map((h) => h.id);
-            inputEl.setDescribedByIds(ids.join(' '));
+            ctrl.setDescribedByIds(ids.join(' '));
         });
-        // Wire up appearance to input for proper styling
+        // Wire up appearance to control for proper styling
         effect(() => {
-            const inputEl = this.inputDirective();
-            if (inputEl) {
-                inputEl.setAppearance(this.appearance());
+            const ctrl = this.control();
+            if (ctrl && 'setAppearance' in ctrl) {
+                ctrl.setAppearance(this.appearance());
             }
         });
         // Wire up control reference to error directives (re-runs on error state change)
         effect(() => {
             // Read hasError to trigger re-evaluation when validation state changes
             this.hasError();
-            const control = this.inputDirective()?.ngControl?.control ?? null;
-            this.errorChildren().forEach((error) => error.setControl(control));
+            const ctrl = this.control();
+            const ngControl = ctrl?.ngControl?.control ?? null;
+            this.errorChildren().forEach((error) => error.setControl(ngControl));
         });
     }
     onContainerClick(event) {
@@ -866,7 +867,7 @@ class ComFormField {
         <ng-content select="[comHint][align='end']" />
       </div>
     </div>
-  `, isInline: true, styles: ["com-form-field.com-form-field--has-label:not(.com-form-field--floating) input::placeholder,com-form-field.com-form-field--has-label:not(.com-form-field--floating) textarea::placeholder{color:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["com-form-field.com-form-field--has-label:not(.com-form-field--floating) input::placeholder,com-form-field.com-form-field--has-label:not(.com-form-field--floating) textarea::placeholder{color:transparent}com-form-field.com-form-field--has-label:not(.com-form-field--floating) com-dropdown .text-placeholder{display:none}com-form-field com-dropdown{display:block;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComFormField, decorators: [{
             type: Component,
@@ -902,14 +903,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         <ng-content select="[comHint][align='end']" />
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [], host: {
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'hostClasses()',
                         '[class.com-form-field--focused]': 'isFocused()',
                         '[class.com-form-field--disabled]': 'isDisabled()',
                         '[class.com-form-field--error]': 'hasError()',
                         '[class.com-form-field--floating]': 'shouldLabelFloat()',
                         '[class.com-form-field--has-label]': '!!labelChild()',
-                    }, styles: ["com-form-field.com-form-field--has-label:not(.com-form-field--floating) input::placeholder,com-form-field.com-form-field--has-label:not(.com-form-field--floating) textarea::placeholder{color:transparent}\n"] }]
+                    }, styles: ["com-form-field.com-form-field--has-label:not(.com-form-field--floating) input::placeholder,com-form-field.com-form-field--has-label:not(.com-form-field--floating) textarea::placeholder{color:transparent}com-form-field.com-form-field--has-label:not(.com-form-field--floating) com-dropdown .text-placeholder{display:none}com-form-field com-dropdown{display:block;width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormFieldControl), { isSignal: true }] }], inputDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComInput), { isSignal: true }] }], labelChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComLabel), { isSignal: true }] }], hintChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ComHint), { isSignal: true }] }], errorChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ComError), { isSignal: true }] }], prefixChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComPrefix), { isSignal: true }] }], suffixChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComSuffix), { isSignal: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], hideRequiredMarker: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideRequiredMarker", required: false }] }], subscriptSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptSizing", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 // Public API for the form-field component