{"version":3,"file":"sixbell-telco-sdk-components-forms-form-group.mjs","sources":["../../../projects/sdk/components/forms/form-group/src/form-group.component.ts","../../../projects/sdk/components/forms/form-group/src/form-group.component.html","../../../projects/sdk/components/forms/form-group/sixbell-telco-sdk-components-forms-form-group.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\nimport { cn } from '@sixbell-telco/sdk/utils/cn';\nimport { cva } from 'class-variance-authority';\n\n/**\n * @internal\n * Generates base form-group classes with gap variants using class-variance-authority\n */\nexport const formGroupComponent = cva(['flex', 'flex-col'], {\n\tvariants: {\n\t\tgap: {\n\t\t\ttight: ['gap-1.5'],\n\t\t\tnormal: ['gap-3'],\n\t\t\trelaxed: ['gap-4'],\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tgap: 'tight',\n\t},\n});\n\n/**\n * Possible form-group gap spacing variants\n *\n * @description\n * - `'tight'` - 6px spacing (gap-1.5). Best for compact forms or dense UI layouts. Default.\n * - `'normal'` - 12px spacing (gap-3). Use for more breathing room in standard forms.\n * - `'relaxed'` - 16px spacing (gap-4). Best for spacious forms, accessibility focus, or improved readability.\n */\nexport type FormGroupGapProps = 'tight' | 'normal' | 'relaxed' | null | undefined;\n\n/**\n * Configuration object for form-group styling\n *\n * @property gap - Vertical spacing between form items\n * @property class - Additional custom Tailwind CSS classes to merge\n */\nexport type FormGroupProps = {\n\tgap?: FormGroupGapProps;\n\tclass?: string;\n};\n\n/**\n * A flexible layout wrapper for grouping form components with consistent vertical spacing.\n *\n * @remarks\n * `st-form-group` is a layout utility that wraps form items or form sections with configurable\n * vertical spacing. Built with Tailwind CSS v4 and class-variance-authority for efficient\n * variant management. It uses modern Angular signals for reactive input/output handling.\n *\n * The component supports three gap variants that scale from compact to spacious layouts,\n * making it ideal for diverse UI patterns:\n * - **Tight (6px)**: Dense layouts, compact form sections (default)\n * - **Normal (12px)**: Standard forms, roomier layout\n * - **Relaxed (16px)**: Accessible forms, improved readability\n *\n * @example\n * ```html\n * <!-- Default tight spacing (6px) -->\n * <st-form-group>\n *   <st-form-item>\n *     <st-input label=\"Email\" [(value)]=\"email\"></st-input>\n *   </st-form-item>\n *   <st-form-item>\n *     <st-input label=\"Password\" type=\"password\" [(value)]=\"password\"></st-input>\n *   </st-form-item>\n * </st-form-group>\n * ```\n *\n * @example\n * ```html\n * <!-- Tight spacing for compact UI (6px) -->\n * <st-form-group gap=\"tight\">\n *   <st-form-item><st-input label=\"First\" ...></st-input></st-form-item>\n *   <st-form-item><st-input label=\"Second\" ...></st-input></st-form-item>\n * </st-form-group>\n * ```\n *\n * @example\n * ```html\n * <!-- Relaxed spacing for accessibility (16px) -->\n * <st-form-group gap=\"relaxed\">\n *   <st-form-item><st-input label=\"Email\" ...></st-input></st-form-item>\n *   <st-form-item><st-input label=\"Phone\" ...></st-input></st-form-item>\n * </st-form-group>\n * ```\n *\n * @example\n * ```html\n * <!-- Custom classes merged with variant -->\n * <st-form-group gap=\"tight\" class=\"p-4 border-2 border-primary rounded-lg\">\n *   <!-- Form items with normal spacing + custom styling -->\n * </st-form-group>\n * ```\n */\n@Component({\n\tselector: 'st-form-group',\n\tstandalone: true,\n\thost: {\n\t\t'[class]': 'containerClass()',\n\t},\n\ttemplateUrl: './form-group.component.html',\n})\nexport class FormGroupComponent {\n\t/**\n\t * Gap variant for vertical spacing between form items.\n\t *\n\t * @defaultValue 'tight'\n\t *\n\t * @description\n\t * Controls the vertical spacing (`gap-*` utility) between child form components.\n\t * Choose based on your layout needs and accessibility requirements:\n\t *\n\t * @param 'tight' - 6px spacing (Tailwind `gap-1.5`)\n\t *   Use when designing compact, dense form layouts where space is limited.\n\t *   Examples: Modal dialogs, inline form sections, sidebar forms.\n\t *   Spacing: 6px (0.375rem)\n\t *\n\t * @param 'normal' - 12px spacing (Tailwind `gap-3`)\n\t *   Use when you need more breathing room between fields. Works well for\n\t *   standard web forms and layouts.\n\t *   Spacing: 12px (0.75rem)\n\t *\n\t * @param 'relaxed' - 16px spacing (Tailwind `gap-4`)\n\t *   Use for forms prioritizing accessibility and readability. Ideal for\n\t *   forms targeting users with visual or motor impairments. Also great\n\t *   for mobile-first or touch-friendly interfaces.\n\t *   Spacing: 16px (1rem)\n\t *\n\t * @example\n\t * ```typescript\n\t * // In component template:\n\t * <st-form-group gap=\"tight\">...</st-form-group>   // 6px spacing (default)\n\t * <st-form-group gap=\"normal\">...</st-form-group>  // 12px spacing\n\t * <st-form-group gap=\"relaxed\">...</st-form-group> // 16px spacing\n\t * ```\n\t */\n\tgap = input<FormGroupGapProps>('tight');\n\n\t/**\n\t * Additional custom CSS classes.\n\t *\n\t * @defaultValue ''\n\t *\n\t * @description\n\t * Any valid Tailwind CSS or custom classes to apply alongside the gap variant.\n\t * Classes are merged using the `cn()` utility, which handles proper class\n\t * precedence and conflict resolution with Tailwind's merge logic.\n\t *\n\t * @example\n\t * ```html\n\t * <!-- Add custom padding and background -->\n\t * <st-form-group class=\"p-6 bg-base-200 rounded-lg border border-primary\">\n\t *   ...\n\t * </st-form-group>\n\t *\n\t * <!-- Responsive modifications -->\n\t * <st-form-group gap=\"normal\" class=\"md:p-8 lg:gap-4\">\n\t *   ...\n\t * </st-form-group>\n\t * ```\n\t */\n\tclass = input<string>('');\n\n\t/**\n\t * @internal\n\t * Computed class string combining gap variant and custom classes.\n\t *\n\t * Uses CVA pattern to manage gap variants and `cn()` utility to merge\n\t * with custom classes, handling Tailwind class conflicts properly.\n\t */\n\tcontainerClass = computed(() =>\n\t\tcn(\n\t\t\tformGroupComponent({\n\t\t\t\tgap: this.gap(),\n\t\t\t}),\n\t\t\tthis.class(),\n\t\t),\n\t);\n}\n","<div [class]=\"containerClass()\">\n\t<ng-content />\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAIA;;;AAGG;AACI,MAAM,kBAAkB,GAAG,GAAG,CAAC,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE;AAC3D,IAAA,QAAQ,EAAE;AACT,QAAA,GAAG,EAAE;YACJ,KAAK,EAAE,CAAC,SAAS,CAAC;YAClB,MAAM,EAAE,CAAC,OAAO,CAAC;YACjB,OAAO,EAAE,CAAC,OAAO,CAAC;AAClB,SAAA;AACD,KAAA;AACD,IAAA,eAAe,EAAE;AAChB,QAAA,GAAG,EAAE,OAAO;AACZ,KAAA;AACD,CAAA;AAuBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDG;MASU,kBAAkB,CAAA;AAC9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCG;AACH,IAAA,GAAG,GAAG,KAAK,CAAoB,OAAO,CAAC;AAEvC;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACH,IAAA,KAAK,GAAG,KAAK,CAAS,EAAE,CAAC;AAEzB;;;;;;AAMG;IACH,cAAc,GAAG,QAAQ,CAAC,MACzB,EAAE,CACD,kBAAkB,CAAC;AAClB,QAAA,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE;AACf,KAAA,CAAC,EACF,IAAI,CAAC,KAAK,EAAE,CACZ,CACD;wGA3EW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,kBAAkB,sXCvG/B,gEAGA,EAAA,CAAA;;4FDoGa,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAR9B,SAAS;+BACC,eAAe,EAAA,UAAA,EACb,IAAI,EAAA,IAAA,EACV;AACL,wBAAA,SAAS,EAAE,kBAAkB;AAC7B,qBAAA,EAAA,QAAA,EAAA,gEAAA,EAAA;;;AEpGF;;AAEG;;;;"}