npm - @raintonic/formaui - Versions diffs - 0.9.0 → 0.9.3 - Mend

@raintonic/formaui 0.9.0 → 0.9.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (114) hide show

package/fesm2022/raintonic-formaui-components-empty-state.mjs CHANGED Viewed

@@ -12,7 +12,7 @@ class FuiEmptyStateComponent {
         return s === 'sm' ? 'md' : 'lg';
     }, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiEmptyStateComponent, isStandalone: true, selector: "fui-empty-state", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "class.fui-empty-state--sm": "size() === \"sm\"", "class.fui-empty-state--md": "size() === \"md\"", "class.fui-empty-state--lg": "size() === \"lg\"" }, classAttribute: "fui-empty-state" }, ngImport: i0, template: "<div class=\"fui-empty-state__content\">\r\n  @if (icon()) {\r\n    <div class=\"fui-empty-state__icon\" aria-hidden=\"true\">\r\n      <fui-icon [name]=\"icon()!\" [size]=\"iconSize()\" weight=\"light\" />\r\n    </div>\r\n  }\r\n  @if (title()) {\r\n    <h3 class=\"fui-empty-state__title\">{{ title() }}</h3>\r\n  }\r\n  @if (description()) {\r\n    <p class=\"fui-empty-state__description\">{{ description() }}</p>\r\n  }\r\n  <div class=\"fui-empty-state__actions\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".fui-empty-state{display:flex;align-items:center;justify-content:center;padding:var(--fui-spacing-13, 3rem);text-align:center}.fui-empty-state__content{display:flex;flex-direction:column;align-items:center;gap:var(--fui-spacing-6, .75rem);max-width:24rem}.fui-empty-state__icon{color:var(--fui-text-disabled);margin-bottom:var(--fui-spacing-4, .5rem)}.fui-empty-state__title{font-family:var(--fui-font-sans);font-size:var(--fui-text-lg);font-weight:var(--fui-weight-semibold, 600);color:var(--fui-text-primary);margin:0}.fui-empty-state__description{font-size:var(--fui-text-base);color:var(--fui-text-secondary);margin:0;line-height:1.5}.fui-empty-state__actions{margin-top:var(--fui-spacing-7, 1rem);display:flex;gap:var(--fui-spacing-4, .5rem)}.fui-empty-state--sm{padding:var(--fui-spacing-9, 1.5rem)}.fui-empty-state--sm .fui-empty-state__title{font-size:var(--fui-text-md)}.fui-empty-state--lg{padding:4.5rem}.fui-empty-state--lg .fui-empty-state__title{font-size:var(--fui-text-xl)}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiEmptyStateComponent, isStandalone: true, selector: "fui-empty-state", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "class.fui-empty-state--sm": "size() === \"sm\"", "class.fui-empty-state--md": "size() === \"md\"", "class.fui-empty-state--lg": "size() === \"lg\"" }, classAttribute: "fui-empty-state" }, ngImport: i0, template: "<div class=\"fui-empty-state__content\">\r\n  @if (icon()) {\r\n    <div class=\"fui-empty-state__icon\" aria-hidden=\"true\">\r\n      <fui-icon [name]=\"icon()!\" [size]=\"iconSize()\" weight=\"light\" />\r\n    </div>\r\n  }\r\n  @if (title()) {\r\n    <h3 class=\"fui-empty-state__title\">{{ title() }}</h3>\r\n  }\r\n  @if (description()) {\r\n    <p class=\"fui-empty-state__description\">{{ description() }}</p>\r\n  }\r\n  <div class=\"fui-empty-state__actions\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".fui-empty-state{display:flex;align-items:center;justify-content:center;padding:var(--fui-spacing-13, 3rem);text-align:center}.fui-empty-state__content{display:flex;flex-direction:column;align-items:center;gap:var(--fui-spacing-6, .75rem);max-width:24rem}.fui-empty-state__icon{color:var(--fui-text-disabled);margin-bottom:var(--fui-spacing-4, .5rem)}.fui-empty-state__title{font-family:var(--fui-font-sans);font-size:var(--fui-text-lg);font-weight:var(--fui-weight-semibold, 600);color:var(--fui-text-primary);margin:0}.fui-empty-state__description{font-size:var(--fui-text-base);color:var(--fui-text-secondary);margin:0;line-height:var(--fui-leading-normal)}.fui-empty-state__actions{margin-top:var(--fui-spacing-7, 1rem);display:flex;gap:var(--fui-spacing-4, .5rem)}.fui-empty-state--sm{padding:var(--fui-spacing-9, 1.5rem)}.fui-empty-state--sm .fui-empty-state__title{font-size:var(--fui-text-md)}.fui-empty-state--lg{padding:4.5rem}.fui-empty-state--lg .fui-empty-state__title{font-size:var(--fui-text-xl)}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiEmptyStateComponent, decorators: [{
             type: Component,
@@ -22,7 +22,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         '[class.fui-empty-state--md]': 'size() === "md"',
                         '[class.fui-empty-state--lg]': 'size() === "lg"',
                         role: 'status',
-                    }, template: "<div class=\"fui-empty-state__content\">\r\n  @if (icon()) {\r\n    <div class=\"fui-empty-state__icon\" aria-hidden=\"true\">\r\n      <fui-icon [name]=\"icon()!\" [size]=\"iconSize()\" weight=\"light\" />\r\n    </div>\r\n  }\r\n  @if (title()) {\r\n    <h3 class=\"fui-empty-state__title\">{{ title() }}</h3>\r\n  }\r\n  @if (description()) {\r\n    <p class=\"fui-empty-state__description\">{{ description() }}</p>\r\n  }\r\n  <div class=\"fui-empty-state__actions\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".fui-empty-state{display:flex;align-items:center;justify-content:center;padding:var(--fui-spacing-13, 3rem);text-align:center}.fui-empty-state__content{display:flex;flex-direction:column;align-items:center;gap:var(--fui-spacing-6, .75rem);max-width:24rem}.fui-empty-state__icon{color:var(--fui-text-disabled);margin-bottom:var(--fui-spacing-4, .5rem)}.fui-empty-state__title{font-family:var(--fui-font-sans);font-size:var(--fui-text-lg);font-weight:var(--fui-weight-semibold, 600);color:var(--fui-text-primary);margin:0}.fui-empty-state__description{font-size:var(--fui-text-base);color:var(--fui-text-secondary);margin:0;line-height:1.5}.fui-empty-state__actions{margin-top:var(--fui-spacing-7, 1rem);display:flex;gap:var(--fui-spacing-4, .5rem)}.fui-empty-state--sm{padding:var(--fui-spacing-9, 1.5rem)}.fui-empty-state--sm .fui-empty-state__title{font-size:var(--fui-text-md)}.fui-empty-state--lg{padding:4.5rem}.fui-empty-state--lg .fui-empty-state__title{font-size:var(--fui-text-xl)}\n"] }]
+                    }, template: "<div class=\"fui-empty-state__content\">\r\n  @if (icon()) {\r\n    <div class=\"fui-empty-state__icon\" aria-hidden=\"true\">\r\n      <fui-icon [name]=\"icon()!\" [size]=\"iconSize()\" weight=\"light\" />\r\n    </div>\r\n  }\r\n  @if (title()) {\r\n    <h3 class=\"fui-empty-state__title\">{{ title() }}</h3>\r\n  }\r\n  @if (description()) {\r\n    <p class=\"fui-empty-state__description\">{{ description() }}</p>\r\n  }\r\n  <div class=\"fui-empty-state__actions\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".fui-empty-state{display:flex;align-items:center;justify-content:center;padding:var(--fui-spacing-13, 3rem);text-align:center}.fui-empty-state__content{display:flex;flex-direction:column;align-items:center;gap:var(--fui-spacing-6, .75rem);max-width:24rem}.fui-empty-state__icon{color:var(--fui-text-disabled);margin-bottom:var(--fui-spacing-4, .5rem)}.fui-empty-state__title{font-family:var(--fui-font-sans);font-size:var(--fui-text-lg);font-weight:var(--fui-weight-semibold, 600);color:var(--fui-text-primary);margin:0}.fui-empty-state__description{font-size:var(--fui-text-base);color:var(--fui-text-secondary);margin:0;line-height:var(--fui-leading-normal)}.fui-empty-state__actions{margin-top:var(--fui-spacing-7, 1rem);display:flex;gap:var(--fui-spacing-4, .5rem)}.fui-empty-state--sm{padding:var(--fui-spacing-9, 1.5rem)}.fui-empty-state--sm .fui-empty-state__title{font-size:var(--fui-text-md)}.fui-empty-state--lg{padding:4.5rem}.fui-empty-state--lg .fui-empty-state__title{font-size:var(--fui-text-xl)}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 /**

package/fesm2022/raintonic-formaui-components-empty-state.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"raintonic-formaui-components-empty-state.mjs","sources":["../../../lib/components/empty-state/empty-state.component.ts","../../../lib/components/empty-state/empty-state.component.html","../../../lib/components/empty-state/raintonic-formaui-components-empty-state.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from '@angular/core';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\n\r\n@Component({\r\n selector: 'fui-empty-state',\r\n standalone: true,\r\n imports: [FuiIconComponent],\r\n templateUrl: './empty-state.component.html',\r\n styleUrls: ['./empty-state.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-empty-state',\r\n '[class.fui-empty-state--sm]': 'size() === \"sm\"',\r\n '[class.fui-empty-state--md]': 'size() === \"md\"',\r\n '[class.fui-empty-state--lg]': 'size() === \"lg\"',\r\n role: 'status',\r\n },\r\n})\r\nexport class FuiEmptyStateComponent {\r\n readonly icon = input<string \| null>(null);\r\n readonly title = input<string \| null>(null);\r\n readonly description = input<string \| null>(null);\r\n readonly size = input<'sm' \| 'md' \| 'lg'>('md');\r\n\r\n readonly iconSize = computed(() => {\r\n const s = this.size();\r\n return s === 'sm' ? 'md' : 'lg';\r\n });\r\n}\r\n","<div class=\"fui-empty-state__content\">\r\n @if (icon()) {\r\n <div class=\"fui-empty-state__icon\" aria-hidden=\"true\">\r\n <fui-icon [name]=\"icon()!\" [size]=\"iconSize()\" weight=\"light\" />\r\n </div>\r\n }\r\n @if (title()) {\r\n <h3 class=\"fui-empty-state__title\">{{ title() }}</h3>\r\n }\r\n @if (description()) {\r\n <p class=\"fui-empty-state__description\">{{ description() }}</p>\r\n }\r\n <div class=\"fui-empty-state__actions\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;MAmBa,sBAAsB,CAAA;AACxB,IAAA,IAAI,GAAG,KAAK,CAAgB,IAAI,2EAAC;AACjC,IAAA,KAAK,GAAG,KAAK,CAAgB,IAAI,4EAAC;AAClC,IAAA,WAAW,GAAG,KAAK,CAAgB,IAAI,kFAAC;AACxC,IAAA,IAAI,GAAG,KAAK,CAAqB,IAAI,2EAAC;AAEtC,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AAChC,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;QACrB,OAAO,CAAC,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI;AACjC,IAAA,CAAC,+EAAC;uGATS,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,UAAA,EAAA,EAAA,2BAAA,EAAA,mBAAA,EAAA,2BAAA,EAAA,mBAAA,EAAA,2BAAA,EAAA,mBAAA,EAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnBnC,ohBAgBA,EAAA,MAAA,EAAA,CAAA,i+BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDVY,gBAAgB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,WAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAaf,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAhBlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,UAAA,EACf,IAAI,EAAA,OAAA,EACP,CAAC,gBAAgB,CAAC,EAAA,eAAA,EAGV,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,iBAAiB;AACxB,wBAAA,6BAA6B,EAAE,iBAAiB;AAChD,wBAAA,6BAA6B,EAAE,iBAAiB;AAChD,wBAAA,6BAA6B,EAAE,iBAAiB;AAChD,wBAAA,IAAI,EAAE,QAAQ;AACf,qBAAA,EAAA,QAAA,EAAA,ohBAAA,EAAA,MAAA,EAAA,CAAA,i+BAAA,CAAA,EAAA;;;AEjBH;;AAEG;;;;"}
1	+ {"version":3,"file":"raintonic-formaui-components-empty-state.mjs","sources":["../../../lib/components/empty-state/empty-state.component.ts","../../../lib/components/empty-state/empty-state.component.html","../../../lib/components/empty-state/raintonic-formaui-components-empty-state.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from '@angular/core';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\n\r\n@Component({\r\n selector: 'fui-empty-state',\r\n standalone: true,\r\n imports: [FuiIconComponent],\r\n templateUrl: './empty-state.component.html',\r\n styleUrls: ['./empty-state.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-empty-state',\r\n '[class.fui-empty-state--sm]': 'size() === \"sm\"',\r\n '[class.fui-empty-state--md]': 'size() === \"md\"',\r\n '[class.fui-empty-state--lg]': 'size() === \"lg\"',\r\n role: 'status',\r\n },\r\n})\r\nexport class FuiEmptyStateComponent {\r\n readonly icon = input<string \| null>(null);\r\n readonly title = input<string \| null>(null);\r\n readonly description = input<string \| null>(null);\r\n readonly size = input<'sm' \| 'md' \| 'lg'>('md');\r\n\r\n readonly iconSize = computed(() => {\r\n const s = this.size();\r\n return s === 'sm' ? 'md' : 'lg';\r\n });\r\n}\r\n","<div class=\"fui-empty-state__content\">\r\n @if (icon()) {\r\n <div class=\"fui-empty-state__icon\" aria-hidden=\"true\">\r\n <fui-icon [name]=\"icon()!\" [size]=\"iconSize()\" weight=\"light\" />\r\n </div>\r\n }\r\n @if (title()) {\r\n <h3 class=\"fui-empty-state__title\">{{ title() }}</h3>\r\n }\r\n @if (description()) {\r\n <p class=\"fui-empty-state__description\">{{ description() }}</p>\r\n }\r\n <div class=\"fui-empty-state__actions\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;MAmBa,sBAAsB,CAAA;AACxB,IAAA,IAAI,GAAG,KAAK,CAAgB,IAAI,2EAAC;AACjC,IAAA,KAAK,GAAG,KAAK,CAAgB,IAAI,4EAAC;AAClC,IAAA,WAAW,GAAG,KAAK,CAAgB,IAAI,kFAAC;AACxC,IAAA,IAAI,GAAG,KAAK,CAAqB,IAAI,2EAAC;AAEtC,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AAChC,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;QACrB,OAAO,CAAC,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI;AACjC,IAAA,CAAC,+EAAC;uGATS,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,UAAA,EAAA,EAAA,2BAAA,EAAA,mBAAA,EAAA,2BAAA,EAAA,mBAAA,EAAA,2BAAA,EAAA,mBAAA,EAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnBnC,ohBAgBA,EAAA,MAAA,EAAA,CAAA,u/BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDVY,gBAAgB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,WAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAaf,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAhBlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,UAAA,EACf,IAAI,EAAA,OAAA,EACP,CAAC,gBAAgB,CAAC,EAAA,eAAA,EAGV,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,iBAAiB;AACxB,wBAAA,6BAA6B,EAAE,iBAAiB;AAChD,wBAAA,6BAA6B,EAAE,iBAAiB;AAChD,wBAAA,6BAA6B,EAAE,iBAAiB;AAChD,wBAAA,IAAI,EAAE,QAAQ;AACf,qBAAA,EAAA,QAAA,EAAA,ohBAAA,EAAA,MAAA,EAAA,CAAA,u/BAAA,CAAA,EAAA;;;AEjBH;;AAEG;;;;"}

package/fesm2022/raintonic-formaui-components-file-upload.mjs CHANGED Viewed

@@ -246,7 +246,7 @@ class FuiFileUploadComponent {
         return URL.createObjectURL(file);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiFileUploadComponent, isStandalone: true, selector: "fui-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesSelected: "filesSelected", fileRemoved: "fileRemoved", filesDropped: "filesDropped", validationErrors: "validationErrors" }, host: { properties: { "class.fui-file-upload--disabled": "disabled()", "class.fui-file-upload--drag-over": "_isDragOver()", "class.fui-file-upload--has-files": "_files().length > 0" }, classAttribute: "fui-file-upload" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\r\n  #fileInput\r\n  type=\"file\"\r\n  class=\"fui-file-upload__native-input\"\r\n  [attr.accept]=\"accept()\"\r\n  [attr.multiple]=\"multiple() ? '' : null\"\r\n  [attr.disabled]=\"disabled() ? '' : null\"\r\n  (change)=\"_onFileInputChange($event)\"\r\n  tabindex=\"-1\"\r\n  aria-hidden=\"true\"\r\n/>\r\n\r\n<div\r\n  class=\"fui-file-upload__dropzone\"\r\n  (click)=\"browse()\"\r\n  (dragenter)=\"_onDragEnter($event)\"\r\n  (dragover)=\"_onDragOver($event)\"\r\n  (dragleave)=\"_onDragLeave($event)\"\r\n  (drop)=\"_onDrop($event)\"\r\n  (keydown.enter)=\"browse()\"\r\n  (keydown.space)=\"browse(); $event.preventDefault()\"\r\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n  role=\"button\"\r\n  [attr.aria-label]=\"intl.dropzoneAriaLabel\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n>\r\n  <fui-icon name=\"upload-simple\" size=\"lg\" class=\"fui-file-upload__icon\"></fui-icon>\r\n  <span class=\"fui-file-upload__text\"> Drag &amp; drop files here or <strong>browse</strong> </span>\r\n  @if (accept()) {\r\n    <span class=\"fui-file-upload__hint\">Accepted: {{ accept() }}</span>\r\n  }\r\n  @if (maxFileSize() > 0) {\r\n    <span class=\"fui-file-upload__hint\">Max size: {{ _formatFileSize(maxFileSize()) }}</span>\r\n  }\r\n</div>\r\n\r\n@if (_files().length > 0) {\r\n  <ul class=\"fui-file-upload__file-list\" role=\"list\">\r\n    @for (fileItem of _files(); track fileItem.name; let i = $index) {\r\n      <li class=\"fui-file-upload__file-item\" [class.fui-file-upload__file-item--error]=\"fileItem.error\">\r\n        @if (showPreview() && fileItem.previewUrl) {\r\n          <img [src]=\"fileItem.previewUrl\" class=\"fui-file-upload__preview\" [alt]=\"fileItem.name\" />\r\n        } @else {\r\n          <fui-icon name=\"file\" size=\"sm\" class=\"fui-file-upload__file-icon\"></fui-icon>\r\n        }\r\n        <div class=\"fui-file-upload__file-info\">\r\n          <span class=\"fui-file-upload__file-name\">{{ fileItem.name }}</span>\r\n          <span class=\"fui-file-upload__file-size\">{{ _formatFileSize(fileItem.size) }}</span>\r\n          @if (fileItem.error) {\r\n            <span class=\"fui-file-upload__file-error\">{{ fileItem.error }}</span>\r\n          }\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fui-file-upload__remove-btn\"\r\n          (click)=\"removeFile(i); $event.stopPropagation()\"\r\n          [attr.aria-label]=\"intl.removeFileAriaLabel(fileItem.name)\"\r\n          [disabled]=\"disabled()\"\r\n        >\r\n          <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-file-upload{display:block;width:100%}.fui-file-upload__native-input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.fui-file-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--fui-spacing-4);padding:var(--fui-spacing-11, 2rem);border:2px dashed var(--fui-border-default);border-radius:var(--fui-radius-md);background-color:var(--fui-bg-subtle);cursor:pointer;text-align:center;transition-property:border-color,background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-file-upload__dropzone:hover{border-color:var(--fui-primary-60, var(--fui-border-primary));background-color:var(--fui-primary-10, rgba(124, 58, 237, .04))}.fui-file-upload__dropzone:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-file-upload__icon{color:var(--fui-text-secondary)}.fui-file-upload__text{font-family:var(--fui-font-sans);font-size:var(--fui-text-base);color:var(--fui-text-secondary)}.fui-file-upload__text strong{color:var(--fui-brand-fg);font-weight:var(--fui-weight-semibold, 600)}.fui-file-upload__hint{font-family:var(--fui-font-sans);font-size:var(--fui-text-sm);color:var(--fui-text-disabled)}.fui-file-upload__file-list{list-style:none;margin:var(--fui-spacing-6, .75rem) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--fui-spacing-2)}.fui-file-upload__file-item{display:flex;align-items:center;gap:var(--fui-spacing-6, .75rem);padding:var(--fui-spacing-4, .5rem) var(--fui-spacing-6, .75rem);border:1px solid var(--fui-border-default);border-radius:var(--fui-radius-sm);background-color:var(--fui-bg-default, var(--fui-bg-default));transition-property:border-color,background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-file-upload__file-item--error{border-color:var(--fui-border-error);background-color:var(--fui-error-10, rgba(239, 68, 68, .04))}.fui-file-upload__preview{width:48px;height:48px;object-fit:cover;border-radius:var(--fui-radius-sm);flex-shrink:0}.fui-file-upload__file-icon{flex-shrink:0;color:var(--fui-text-secondary)}.fui-file-upload__file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.fui-file-upload__file-name{font-family:var(--fui-font-sans);font-size:var(--fui-text-base);font-weight:var(--fui-weight-medium, 500);color:var(--fui-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-file-upload__file-size{font-family:var(--fui-font-sans);font-size:var(--fui-text-sm);color:var(--fui-text-secondary)}.fui-file-upload__file-error{font-family:var(--fui-font-sans);font-size:var(--fui-text-sm);color:var(--fui-text-error)}.fui-file-upload__remove-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-file-upload__remove-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);opacity:.7;transition-property:opacity,color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-file-upload__remove-btn:hover:not(:disabled){opacity:1;color:var(--fui-text-error)}.fui-file-upload__remove-btn:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-file-upload__remove-btn:disabled{opacity:.4;cursor:not-allowed}.fui-file-upload--drag-over .fui-file-upload__dropzone{border-color:var(--fui-border-primary);border-style:solid;background-color:var(--fui-primary-10, rgba(124, 58, 237, .08))}.fui-file-upload--disabled{opacity:var(--fui-state-disabled-opacity, .5)}.fui-file-upload--disabled .fui-file-upload__dropzone{cursor:not-allowed;pointer-events:none}.fui-file-upload--disabled .fui-file-upload__remove-btn{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.fui-file-upload__dropzone,.fui-file-upload__file-item,.fui-file-upload__remove-btn{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiFileUploadComponent, isStandalone: true, selector: "fui-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesSelected: "filesSelected", fileRemoved: "fileRemoved", filesDropped: "filesDropped", validationErrors: "validationErrors" }, host: { properties: { "class.fui-file-upload--disabled": "disabled()", "class.fui-file-upload--drag-over": "_isDragOver()", "class.fui-file-upload--has-files": "_files().length > 0" }, classAttribute: "fui-file-upload" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\r\n  #fileInput\r\n  type=\"file\"\r\n  class=\"fui-file-upload__native-input\"\r\n  [attr.accept]=\"accept()\"\r\n  [attr.multiple]=\"multiple() ? '' : null\"\r\n  [attr.disabled]=\"disabled() ? '' : null\"\r\n  (change)=\"_onFileInputChange($event)\"\r\n  tabindex=\"-1\"\r\n  aria-hidden=\"true\"\r\n/>\r\n\r\n<div\r\n  class=\"fui-file-upload__dropzone\"\r\n  (click)=\"browse()\"\r\n  (dragenter)=\"_onDragEnter($event)\"\r\n  (dragover)=\"_onDragOver($event)\"\r\n  (dragleave)=\"_onDragLeave($event)\"\r\n  (drop)=\"_onDrop($event)\"\r\n  (keydown.enter)=\"browse()\"\r\n  (keydown.space)=\"browse(); $event.preventDefault()\"\r\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n  role=\"button\"\r\n  [attr.aria-label]=\"intl.dropzoneAriaLabel\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n>\r\n  <fui-icon name=\"upload-simple\" size=\"lg\" class=\"fui-file-upload__icon\"></fui-icon>\r\n  <span class=\"fui-file-upload__text\"> Drag &amp; drop files here or <strong>browse</strong> </span>\r\n  @if (accept()) {\r\n    <span class=\"fui-file-upload__hint\">Accepted: {{ accept() }}</span>\r\n  }\r\n  @if (maxFileSize() > 0) {\r\n    <span class=\"fui-file-upload__hint\">Max size: {{ _formatFileSize(maxFileSize()) }}</span>\r\n  }\r\n</div>\r\n\r\n@if (_files().length > 0) {\r\n  <ul class=\"fui-file-upload__file-list\" role=\"list\">\r\n    @for (fileItem of _files(); track fileItem.name; let i = $index) {\r\n      <li class=\"fui-file-upload__file-item\" [class.fui-file-upload__file-item--error]=\"fileItem.error\">\r\n        @if (showPreview() && fileItem.previewUrl) {\r\n          <img [src]=\"fileItem.previewUrl\" class=\"fui-file-upload__preview\" [alt]=\"fileItem.name\" />\r\n        } @else {\r\n          <fui-icon name=\"file\" size=\"sm\" class=\"fui-file-upload__file-icon\"></fui-icon>\r\n        }\r\n        <div class=\"fui-file-upload__file-info\">\r\n          <span class=\"fui-file-upload__file-name\">{{ fileItem.name }}</span>\r\n          <span class=\"fui-file-upload__file-size\">{{ _formatFileSize(fileItem.size) }}</span>\r\n          @if (fileItem.error) {\r\n            <span class=\"fui-file-upload__file-error\">{{ fileItem.error }}</span>\r\n          }\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fui-file-upload__remove-btn\"\r\n          (click)=\"removeFile(i); $event.stopPropagation()\"\r\n          [attr.aria-label]=\"intl.removeFileAriaLabel(fileItem.name)\"\r\n          [disabled]=\"disabled()\"\r\n        >\r\n          <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-file-upload{display:block;width:100%}.fui-file-upload__native-input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.fui-file-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--fui-spacing-4);padding:var(--fui-spacing-11, 2rem);border:var(--fui-border-width-md) dashed var(--fui-border-default);border-radius:var(--fui-radius-md);background-color:var(--fui-bg-subtle);cursor:pointer;text-align:center;transition-property:border-color,background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-file-upload__dropzone:hover{border-color:var(--fui-primary-60, var(--fui-border-primary));background-color:var(--fui-primary-10, rgba(124, 58, 237, .04))}.fui-file-upload__dropzone:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-file-upload__icon{color:var(--fui-text-secondary)}.fui-file-upload__text{font-family:var(--fui-font-sans);font-size:var(--fui-text-base);color:var(--fui-text-secondary)}.fui-file-upload__text strong{color:var(--fui-primary-fg);font-weight:var(--fui-weight-semibold, 600)}.fui-file-upload__hint{font-family:var(--fui-font-sans);font-size:var(--fui-text-sm);color:var(--fui-text-disabled)}.fui-file-upload__file-list{list-style:none;margin:var(--fui-spacing-6, .75rem) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--fui-spacing-2)}.fui-file-upload__file-item{display:flex;align-items:center;gap:var(--fui-spacing-6, .75rem);padding:var(--fui-spacing-4, .5rem) var(--fui-spacing-6, .75rem);border:var(--fui-border-width-sm) solid var(--fui-border-default);border-radius:var(--fui-radius-sm);background-color:var(--fui-bg-default, var(--fui-bg-default));transition-property:border-color,background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-file-upload__file-item--error{border-color:var(--fui-border-error);background-color:var(--fui-error-10, rgba(239, 68, 68, .04))}.fui-file-upload__preview{width:48px;height:48px;object-fit:cover;border-radius:var(--fui-radius-sm);flex-shrink:0}.fui-file-upload__file-icon{flex-shrink:0;color:var(--fui-text-secondary)}.fui-file-upload__file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.fui-file-upload__file-name{font-family:var(--fui-font-sans);font-size:var(--fui-text-base);font-weight:var(--fui-weight-medium, 500);color:var(--fui-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-file-upload__file-size{font-family:var(--fui-font-sans);font-size:var(--fui-text-sm);color:var(--fui-text-secondary)}.fui-file-upload__file-error{font-family:var(--fui-font-sans);font-size:var(--fui-text-sm);color:var(--fui-text-error)}.fui-file-upload__remove-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-file-upload__remove-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);opacity:.7;transition-property:opacity,color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-file-upload__remove-btn:hover:not(:disabled){opacity:1;color:var(--fui-text-error)}.fui-file-upload__remove-btn:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-file-upload__remove-btn:disabled{opacity:.4;cursor:not-allowed}.fui-file-upload--drag-over .fui-file-upload__dropzone{border-color:var(--fui-border-primary);border-style:solid;background-color:var(--fui-primary-10, rgba(124, 58, 237, .08))}.fui-file-upload--disabled{opacity:var(--fui-state-disabled-opacity, .5)}.fui-file-upload--disabled .fui-file-upload__dropzone{cursor:not-allowed;pointer-events:none}.fui-file-upload--disabled .fui-file-upload__remove-btn{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.fui-file-upload__dropzone,.fui-file-upload__file-item,.fui-file-upload__remove-btn{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiFileUploadComponent, decorators: [{
             type: Component,
@@ -255,7 +255,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         '[class.fui-file-upload--disabled]': 'disabled()',
                         '[class.fui-file-upload--drag-over]': '_isDragOver()',
                         '[class.fui-file-upload--has-files]': '_files().length > 0',
-                    }, template: "<input\r\n  #fileInput\r\n  type=\"file\"\r\n  class=\"fui-file-upload__native-input\"\r\n  [attr.accept]=\"accept()\"\r\n  [attr.multiple]=\"multiple() ? '' : null\"\r\n  [attr.disabled]=\"disabled() ? '' : null\"\r\n  (change)=\"_onFileInputChange($event)\"\r\n  tabindex=\"-1\"\r\n  aria-hidden=\"true\"\r\n/>\r\n\r\n<div\r\n  class=\"fui-file-upload__dropzone\"\r\n  (click)=\"browse()\"\r\n  (dragenter)=\"_onDragEnter($event)\"\r\n  (dragover)=\"_onDragOver($event)\"\r\n  (dragleave)=\"_onDragLeave($event)\"\r\n  (drop)=\"_onDrop($event)\"\r\n  (keydown.enter)=\"browse()\"\r\n  (keydown.space)=\"browse(); $event.preventDefault()\"\r\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n  role=\"button\"\r\n  [attr.aria-label]=\"intl.dropzoneAriaLabel\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n>\r\n  <fui-icon name=\"upload-simple\" size=\"lg\" class=\"fui-file-upload__icon\"></fui-icon>\r\n  <span class=\"fui-file-upload__text\"> Drag &amp; drop files here or <strong>browse</strong> </span>\r\n  @if (accept()) {\r\n    <span class=\"fui-file-upload__hint\">Accepted: {{ accept() }}</span>\r\n  }\r\n  @if (maxFileSize() > 0) {\r\n    <span class=\"fui-file-upload__hint\">Max size: {{ _formatFileSize(maxFileSize()) }}</span>\r\n  }\r\n</div>\r\n\r\n@if (_files().length > 0) {\r\n  <ul class=\"fui-file-upload__file-list\" role=\"list\">\r\n    @for (fileItem of _files(); track fileItem.name; let i = $index) {\r\n      <li class=\"fui-file-upload__file-item\" [class.fui-file-upload__file-item--error]=\"fileItem.error\">\r\n        @if (showPreview() && fileItem.previewUrl) {\r\n          <img [src]=\"fileItem.previewUrl\" class=\"fui-file-upload__preview\" [alt]=\"fileItem.name\" />\r\n        } @else {\r\n          <fui-icon name=\"file\" size=\"sm\" class=\"fui-file-upload__file-icon\"></fui-icon>\r\n        }\r\n        <div class=\"fui-file-upload__file-info\">\r\n          <span class=\"fui-file-upload__file-name\">{{ fileItem.name }}</span>\r\n          <span class=\"fui-file-upload__file-size\">{{ _formatFileSize(fileItem.size) }}</span>\r\n          @if (fileItem.error) {\r\n            <span class=\"fui-file-upload__file-error\">{{ fileItem.error }}</span>\r\n          }\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fui-file-upload__remove-btn\"\r\n          (click)=\"removeFile(i); $event.stopPropagation()\"\r\n          [attr.aria-label]=\"intl.removeFileAriaLabel(fileItem.name)\"\r\n          [disabled]=\"disabled()\"\r\n        >\r\n          <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-file-upload{display:block;width:100%}.fui-file-upload__native-input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.fui-file-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--fui-spacing-4);padding:var(--fui-spacing-11, 2rem);border:2px dashed var(--fui-border-default);border-radius:var(--fui-radius-md);background-color:var(--fui-bg-subtle);cursor:pointer;text-align:center;transition-property:border-color,background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-file-upload__dropzone:hover{border-color:var(--fui-primary-60, var(--fui-border-primary));background-color:var(--fui-primary-10, rgba(124, 58, 237, .04))}.fui-file-upload__dropzone:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-file-upload__icon{color:var(--fui-text-secondary)}.fui-file-upload__text{font-family:var(--fui-font-sans);font-size:var(--fui-text-base);color:var(--fui-text-secondary)}.fui-file-upload__text strong{color:var(--fui-brand-fg);font-weight:var(--fui-weight-semibold, 600)}.fui-file-upload__hint{font-family:var(--fui-font-sans);font-size:var(--fui-text-sm);color:var(--fui-text-disabled)}.fui-file-upload__file-list{list-style:none;margin:var(--fui-spacing-6, .75rem) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--fui-spacing-2)}.fui-file-upload__file-item{display:flex;align-items:center;gap:var(--fui-spacing-6, .75rem);padding:var(--fui-spacing-4, .5rem) var(--fui-spacing-6, .75rem);border:1px solid var(--fui-border-default);border-radius:var(--fui-radius-sm);background-color:var(--fui-bg-default, var(--fui-bg-default));transition-property:border-color,background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-file-upload__file-item--error{border-color:var(--fui-border-error);background-color:var(--fui-error-10, rgba(239, 68, 68, .04))}.fui-file-upload__preview{width:48px;height:48px;object-fit:cover;border-radius:var(--fui-radius-sm);flex-shrink:0}.fui-file-upload__file-icon{flex-shrink:0;color:var(--fui-text-secondary)}.fui-file-upload__file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.fui-file-upload__file-name{font-family:var(--fui-font-sans);font-size:var(--fui-text-base);font-weight:var(--fui-weight-medium, 500);color:var(--fui-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-file-upload__file-size{font-family:var(--fui-font-sans);font-size:var(--fui-text-sm);color:var(--fui-text-secondary)}.fui-file-upload__file-error{font-family:var(--fui-font-sans);font-size:var(--fui-text-sm);color:var(--fui-text-error)}.fui-file-upload__remove-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-file-upload__remove-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);opacity:.7;transition-property:opacity,color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-file-upload__remove-btn:hover:not(:disabled){opacity:1;color:var(--fui-text-error)}.fui-file-upload__remove-btn:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-file-upload__remove-btn:disabled{opacity:.4;cursor:not-allowed}.fui-file-upload--drag-over .fui-file-upload__dropzone{border-color:var(--fui-border-primary);border-style:solid;background-color:var(--fui-primary-10, rgba(124, 58, 237, .08))}.fui-file-upload--disabled{opacity:var(--fui-state-disabled-opacity, .5)}.fui-file-upload--disabled .fui-file-upload__dropzone{cursor:not-allowed;pointer-events:none}.fui-file-upload--disabled .fui-file-upload__remove-btn{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.fui-file-upload__dropzone,.fui-file-upload__file-item,.fui-file-upload__remove-btn{transition:none}}\n"] }]
+                    }, template: "<input\r\n  #fileInput\r\n  type=\"file\"\r\n  class=\"fui-file-upload__native-input\"\r\n  [attr.accept]=\"accept()\"\r\n  [attr.multiple]=\"multiple() ? '' : null\"\r\n  [attr.disabled]=\"disabled() ? '' : null\"\r\n  (change)=\"_onFileInputChange($event)\"\r\n  tabindex=\"-1\"\r\n  aria-hidden=\"true\"\r\n/>\r\n\r\n<div\r\n  class=\"fui-file-upload__dropzone\"\r\n  (click)=\"browse()\"\r\n  (dragenter)=\"_onDragEnter($event)\"\r\n  (dragover)=\"_onDragOver($event)\"\r\n  (dragleave)=\"_onDragLeave($event)\"\r\n  (drop)=\"_onDrop($event)\"\r\n  (keydown.enter)=\"browse()\"\r\n  (keydown.space)=\"browse(); $event.preventDefault()\"\r\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n  role=\"button\"\r\n  [attr.aria-label]=\"intl.dropzoneAriaLabel\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n>\r\n  <fui-icon name=\"upload-simple\" size=\"lg\" class=\"fui-file-upload__icon\"></fui-icon>\r\n  <span class=\"fui-file-upload__text\"> Drag &amp; drop files here or <strong>browse</strong> </span>\r\n  @if (accept()) {\r\n    <span class=\"fui-file-upload__hint\">Accepted: {{ accept() }}</span>\r\n  }\r\n  @if (maxFileSize() > 0) {\r\n    <span class=\"fui-file-upload__hint\">Max size: {{ _formatFileSize(maxFileSize()) }}</span>\r\n  }\r\n</div>\r\n\r\n@if (_files().length > 0) {\r\n  <ul class=\"fui-file-upload__file-list\" role=\"list\">\r\n    @for (fileItem of _files(); track fileItem.name; let i = $index) {\r\n      <li class=\"fui-file-upload__file-item\" [class.fui-file-upload__file-item--error]=\"fileItem.error\">\r\n        @if (showPreview() && fileItem.previewUrl) {\r\n          <img [src]=\"fileItem.previewUrl\" class=\"fui-file-upload__preview\" [alt]=\"fileItem.name\" />\r\n        } @else {\r\n          <fui-icon name=\"file\" size=\"sm\" class=\"fui-file-upload__file-icon\"></fui-icon>\r\n        }\r\n        <div class=\"fui-file-upload__file-info\">\r\n          <span class=\"fui-file-upload__file-name\">{{ fileItem.name }}</span>\r\n          <span class=\"fui-file-upload__file-size\">{{ _formatFileSize(fileItem.size) }}</span>\r\n          @if (fileItem.error) {\r\n            <span class=\"fui-file-upload__file-error\">{{ fileItem.error }}</span>\r\n          }\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fui-file-upload__remove-btn\"\r\n          (click)=\"removeFile(i); $event.stopPropagation()\"\r\n          [attr.aria-label]=\"intl.removeFileAriaLabel(fileItem.name)\"\r\n          [disabled]=\"disabled()\"\r\n        >\r\n          <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-file-upload{display:block;width:100%}.fui-file-upload__native-input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.fui-file-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--fui-spacing-4);padding:var(--fui-spacing-11, 2rem);border:var(--fui-border-width-md) dashed var(--fui-border-default);border-radius:var(--fui-radius-md);background-color:var(--fui-bg-subtle);cursor:pointer;text-align:center;transition-property:border-color,background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-file-upload__dropzone:hover{border-color:var(--fui-primary-60, var(--fui-border-primary));background-color:var(--fui-primary-10, rgba(124, 58, 237, .04))}.fui-file-upload__dropzone:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-file-upload__icon{color:var(--fui-text-secondary)}.fui-file-upload__text{font-family:var(--fui-font-sans);font-size:var(--fui-text-base);color:var(--fui-text-secondary)}.fui-file-upload__text strong{color:var(--fui-primary-fg);font-weight:var(--fui-weight-semibold, 600)}.fui-file-upload__hint{font-family:var(--fui-font-sans);font-size:var(--fui-text-sm);color:var(--fui-text-disabled)}.fui-file-upload__file-list{list-style:none;margin:var(--fui-spacing-6, .75rem) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--fui-spacing-2)}.fui-file-upload__file-item{display:flex;align-items:center;gap:var(--fui-spacing-6, .75rem);padding:var(--fui-spacing-4, .5rem) var(--fui-spacing-6, .75rem);border:var(--fui-border-width-sm) solid var(--fui-border-default);border-radius:var(--fui-radius-sm);background-color:var(--fui-bg-default, var(--fui-bg-default));transition-property:border-color,background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-file-upload__file-item--error{border-color:var(--fui-border-error);background-color:var(--fui-error-10, rgba(239, 68, 68, .04))}.fui-file-upload__preview{width:48px;height:48px;object-fit:cover;border-radius:var(--fui-radius-sm);flex-shrink:0}.fui-file-upload__file-icon{flex-shrink:0;color:var(--fui-text-secondary)}.fui-file-upload__file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.fui-file-upload__file-name{font-family:var(--fui-font-sans);font-size:var(--fui-text-base);font-weight:var(--fui-weight-medium, 500);color:var(--fui-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-file-upload__file-size{font-family:var(--fui-font-sans);font-size:var(--fui-text-sm);color:var(--fui-text-secondary)}.fui-file-upload__file-error{font-family:var(--fui-font-sans);font-size:var(--fui-text-sm);color:var(--fui-text-error)}.fui-file-upload__remove-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-file-upload__remove-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);opacity:.7;transition-property:opacity,color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-file-upload__remove-btn:hover:not(:disabled){opacity:1;color:var(--fui-text-error)}.fui-file-upload__remove-btn:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-file-upload__remove-btn:disabled{opacity:.4;cursor:not-allowed}.fui-file-upload--drag-over .fui-file-upload__dropzone{border-color:var(--fui-border-primary);border-style:solid;background-color:var(--fui-primary-10, rgba(124, 58, 237, .08))}.fui-file-upload--disabled{opacity:var(--fui-state-disabled-opacity, .5)}.fui-file-upload--disabled .fui-file-upload__dropzone{cursor:not-allowed;pointer-events:none}.fui-file-upload--disabled .fui-file-upload__remove-btn{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.fui-file-upload__dropzone,.fui-file-upload__file-item,.fui-file-upload__remove-btn{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPreview", required: false }] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }], filesDropped: [{ type: i0.Output, args: ["filesDropped"] }], validationErrors: [{ type: i0.Output, args: ["validationErrors"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
 /**

package/fesm2022/raintonic-formaui-components-file-upload.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"raintonic-formaui-components-file-upload.mjs","sources":["../../../lib/components/file-upload/file-upload.intl.ts","../../../lib/components/file-upload/file-upload.component.ts","../../../lib/components/file-upload/file-upload.component.html","../../../lib/components/file-upload/raintonic-formaui-components-file-upload.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiFileUploadIntl extends FuiIntlBase {\r\n dropzoneAriaLabel = 'Drop files here or click to browse';\r\n removeFileAriaLabel(name: string): string {\r\n return `Remove ${name}`;\r\n }\r\n}\r\n","import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n ViewEncapsulation,\r\n inject,\r\n input,\r\n output,\r\n signal,\r\n viewChild,\r\n ElementRef,\r\n WritableSignal,\r\n booleanAttribute,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\n\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FileUploadFile, FileUploadValidationError } from './file-upload.types';\r\nimport { FuiFileUploadIntl } from './file-upload.intl';\r\n\r\n/*\r\n # FuiFileUploadComponent\r\n \r\n A file upload component with drag-and-drop support, file previews, and validation.\r\n \r\n ## Features\r\n * - Drag & drop file upload\r\n * - Click to browse\r\n * - File type, size, and count validation\r\n * - Image preview thumbnails\r\n * - Accessible (keyboard, ARIA)\r\n \r\n ## Usage\r\n \r\n ### Basic\r\n * ```html\r\n * <fui-file-upload\r\n * accept=\"image/,.pdf\"\r\n [multiple]=\"true\"\r\n * [maxFileSize]=\"5242880\"\r\n * (filesSelected)=\"onFiles($event)\"\r\n * ></fui-file-upload>\r\n * ```\r\n /\r\n@Component({\r\n selector: 'fui-file-upload',\r\n standalone: true,\r\n imports: [FuiIconComponent],\r\n templateUrl: './file-upload.component.html',\r\n styleUrls: ['./file-upload.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-file-upload',\r\n '[class.fui-file-upload--disabled]': 'disabled()',\r\n '[class.fui-file-upload--drag-over]': '_isDragOver()',\r\n '[class.fui-file-upload--has-files]': '_files().length > 0',\r\n },\r\n})\r\nexport class FuiFileUploadComponent {\r\n readonly intl = inject(FuiFileUploadIntl);\r\n private readonly _cdr = inject(ChangeDetectorRef);\r\n\r\n constructor() {\r\n this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });\r\n }\r\n\r\n // Inputs\r\n readonly accept = input('');\r\n readonly multiple = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n readonly maxFileSize = input(0);\r\n readonly maxFiles = input(0);\r\n readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n readonly showPreview = input<boolean, unknown>(true, { transform: booleanAttribute });\r\n\r\n // Outputs\r\n readonly filesSelected = output<FileUploadFile[]>();\r\n readonly fileRemoved = output<FileUploadFile>();\r\n readonly filesDropped = output<FileUploadFile[]>();\r\n readonly validationErrors = output<FileUploadValidationError[]>();\r\n\r\n // Internal state\r\n readonly _files: WritableSignal<FileUploadFile[]> = signal([]);\r\n readonly _isDragOver: WritableSignal<boolean> = signal(false);\r\n\r\n // ViewChild\r\n readonly fileInput = viewChild<ElementRef<HTMLInputElement>>('fileInput');\r\n\r\n // Public methods\r\n browse(): void {\r\n if (this.disabled()) return;\r\n this.fileInput()?.nativeElement.click();\r\n }\r\n\r\n removeFile(index: number): void {\r\n if (this.disabled()) return;\r\n const files = [...this._files()];\r\n const removed = files.splice(index, 1)[0];\r\n if (removed) {\r\n if (removed.previewUrl) {\r\n URL.revokeObjectURL(removed.previewUrl);\r\n }\r\n this._files.set(files);\r\n this.fileRemoved.emit(removed);\r\n }\r\n }\r\n\r\n clearAll(): void {\r\n const files = this._files();\r\n for (const f of files) {\r\n if (f.previewUrl) {\r\n URL.revokeObjectURL(f.previewUrl);\r\n }\r\n }\r\n this._files.set([]);\r\n }\r\n\r\n getFiles(): FileUploadFile[] {\r\n return this._files();\r\n }\r\n\r\n // Template event handlers\r\n _onFileInputChange(event: Event): void {\r\n const input = event.target as HTMLInputElement;\r\n if (input.files && input.files.length > 0) {\r\n this._processFiles(input.files);\r\n }\r\n // Reset input so the same file can be selected again\r\n input.value = '';\r\n }\r\n\r\n _onDragEnter(event: DragEvent): void {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n if (!this.disabled()) {\r\n this._isDragOver.set(true);\r\n }\r\n }\r\n\r\n _onDragOver(event: DragEvent): void {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n if (!this.disabled()) {\r\n this._isDragOver.set(true);\r\n }\r\n }\r\n\r\n _onDragLeave(event: DragEvent): void {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n this._isDragOver.set(false);\r\n }\r\n\r\n _onDrop(event: DragEvent): void {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n this._isDragOver.set(false);\r\n\r\n if (this.disabled()) return;\r\n\r\n const files = event.dataTransfer?.files;\r\n if (files && files.length > 0) {\r\n this._processFiles(files);\r\n this.filesDropped.emit(this._files());\r\n }\r\n }\r\n\r\n _formatFileSize(bytes: number): string {\r\n if (bytes === 0) return '0 B';\r\n const units = ['B', 'KB', 'MB', 'GB'];\r\n const k = 1024;\r\n const i = Math.floor(Math.log(bytes) / Math.log(k));\r\n const size = parseFloat((bytes / Math.pow(k, i)).toFixed(1));\r\n return `${size} ${units[i]}`;\r\n }\r\n\r\n // Private methods\r\n private _processFiles(fileList: FileList): void {\r\n const newFiles: FileUploadFile[] = [];\r\n const errors: FileUploadValidationError[] = [];\r\n const currentFiles = this._files();\r\n\r\n const filesToProcess = Array.from(fileList);\r\n\r\n for (const file of filesToProcess) {\r\n // Max files check\r\n const maxFiles = this.maxFiles();\r\n if (maxFiles > 0 && currentFiles.length + newFiles.length >= maxFiles) {\r\n errors.push({\r\n file,\r\n error: 'maxFiles',\r\n message: `Maximum ${maxFiles} file(s) allowed`,\r\n });\r\n continue;\r\n }\r\n\r\n const validationError = this._validateFile(file);\r\n if (validationError) {\r\n errors.push(validationError);\r\n continue;\r\n }\r\n\r\n const uploadFile: FileUploadFile = {\r\n file,\r\n name: file.name,\r\n size: file.size,\r\n type: file.type,\r\n };\r\n\r\n if (this.showPreview() && this._isImage(file)) {\r\n uploadFile.previewUrl = this._generatePreview(file);\r\n }\r\n\r\n newFiles.push(uploadFile);\r\n }\r\n\r\n if (errors.length > 0) {\r\n this.validationErrors.emit(errors);\r\n }\r\n\r\n if (newFiles.length > 0) {\r\n if (this.multiple()) {\r\n this._files.set([...currentFiles, ...newFiles]);\r\n } else {\r\n // Single mode: replace existing\r\n for (const f of currentFiles) {\r\n if (f.previewUrl) URL.revokeObjectURL(f.previewUrl);\r\n }\r\n this._files.set([newFiles[0]]);\r\n }\r\n this.filesSelected.emit(this._files());\r\n }\r\n }\r\n\r\n private _validateFile(file: File): FileUploadValidationError \| null {\r\n // Type check\r\n const accept = this.accept();\r\n if (accept && !this._matchesAccept(file, accept)) {\r\n return {\r\n file,\r\n error: 'type',\r\n message: `File type \"${file.type \|\| file.name.split('.').pop()}\" is not allowed`,\r\n };\r\n }\r\n\r\n // Size check\r\n const maxSize = this.maxFileSize();\r\n if (maxSize > 0 && file.size > maxSize) {\r\n return {\r\n file,\r\n error: 'size',\r\n message: `File size ${this._formatFileSize(file.size)} exceeds maximum ${this._formatFileSize(maxSize)}`,\r\n };\r\n }\r\n\r\n return null;\r\n }\r\n\r\n private _matchesAccept(file: File, accept: string): boolean {\r\n const acceptTypes = accept.split(',').map((t) => t.trim().toLowerCase());\r\n\r\n for (const acceptType of acceptTypes) {\r\n // Wildcard MIME type (e.g. \"image/\")\r\n if (acceptType.endsWith('/')) {\r\n const category = acceptType.slice(0, acceptType.indexOf('/'));\r\n if (file.type.toLowerCase().startsWith(category + '/')) {\r\n return true;\r\n }\r\n }\r\n // Extension match (e.g. \".pdf\")\r\n else if (acceptType.startsWith('.')) {\r\n if (file.name.toLowerCase().endsWith(acceptType)) {\r\n return true;\r\n }\r\n }\r\n // Exact MIME match\r\n else if (file.type.toLowerCase() === acceptType) {\r\n return true;\r\n }\r\n }\r\n\r\n return false;\r\n }\r\n\r\n private _isImage(file: File): boolean {\r\n return file.type.startsWith('image/');\r\n }\r\n\r\n private _generatePreview(file: File): string {\r\n return URL.createObjectURL(file);\r\n }\r\n}\r\n","<input\r\n #fileInput\r\n type=\"file\"\r\n class=\"fui-file-upload__native-input\"\r\n [attr.accept]=\"accept()\"\r\n [attr.multiple]=\"multiple() ? '' : null\"\r\n [attr.disabled]=\"disabled() ? '' : null\"\r\n (change)=\"_onFileInputChange($event)\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n/>\r\n\r\n<div\r\n class=\"fui-file-upload__dropzone\"\r\n (click)=\"browse()\"\r\n (dragenter)=\"_onDragEnter($event)\"\r\n (dragover)=\"_onDragOver($event)\"\r\n (dragleave)=\"_onDragLeave($event)\"\r\n (drop)=\"_onDrop($event)\"\r\n (keydown.enter)=\"browse()\"\r\n (keydown.space)=\"browse(); $event.preventDefault()\"\r\n [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n role=\"button\"\r\n [attr.aria-label]=\"intl.dropzoneAriaLabel\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n>\r\n <fui-icon name=\"upload-simple\" size=\"lg\" class=\"fui-file-upload__icon\"></fui-icon>\r\n <span class=\"fui-file-upload__text\"> Drag & drop files here or <strong>browse</strong> </span>\r\n @if (accept()) {\r\n <span class=\"fui-file-upload__hint\">Accepted: {{ accept() }}</span>\r\n }\r\n @if (maxFileSize() > 0) {\r\n <span class=\"fui-file-upload__hint\">Max size: {{ _formatFileSize(maxFileSize()) }}</span>\r\n }\r\n</div>\r\n\r\n@if (_files().length > 0) {\r\n <ul class=\"fui-file-upload__file-list\" role=\"list\">\r\n @for (fileItem of _files(); track fileItem.name; let i = $index) {\r\n <li class=\"fui-file-upload__file-item\" [class.fui-file-upload__file-item--error]=\"fileItem.error\">\r\n @if (showPreview() && fileItem.previewUrl) {\r\n <img [src]=\"fileItem.previewUrl\" class=\"fui-file-upload__preview\" [alt]=\"fileItem.name\" />\r\n } @else {\r\n <fui-icon name=\"file\" size=\"sm\" class=\"fui-file-upload__file-icon\"></fui-icon>\r\n }\r\n <div class=\"fui-file-upload__file-info\">\r\n <span class=\"fui-file-upload__file-name\">{{ fileItem.name }}</span>\r\n <span class=\"fui-file-upload__file-size\">{{ _formatFileSize(fileItem.size) }}</span>\r\n @if (fileItem.error) {\r\n <span class=\"fui-file-upload__file-error\">{{ fileItem.error }}</span>\r\n }\r\n </div>\r\n <button\r\n type=\"button\"\r\n class=\"fui-file-upload__remove-btn\"\r\n (click)=\"removeFile(i); $event.stopPropagation()\"\r\n [attr.aria-label]=\"intl.removeFileAriaLabel(fileItem.name)\"\r\n [disabled]=\"disabled()\"\r\n >\r\n <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n}\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"raintonic-formaui-components-file-upload.mjs","sources":["../../../lib/components/file-upload/file-upload.intl.ts","../../../lib/components/file-upload/file-upload.component.ts","../../../lib/components/file-upload/file-upload.component.html","../../../lib/components/file-upload/raintonic-formaui-components-file-upload.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiFileUploadIntl extends FuiIntlBase {\r\n dropzoneAriaLabel = 'Drop files here or click to browse';\r\n removeFileAriaLabel(name: string): string {\r\n return `Remove ${name}`;\r\n }\r\n}\r\n","import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n ViewEncapsulation,\r\n inject,\r\n input,\r\n output,\r\n signal,\r\n viewChild,\r\n ElementRef,\r\n WritableSignal,\r\n booleanAttribute,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\n\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FileUploadFile, FileUploadValidationError } from './file-upload.types';\r\nimport { FuiFileUploadIntl } from './file-upload.intl';\r\n\r\n/*\r\n # FuiFileUploadComponent\r\n \r\n A file upload component with drag-and-drop support, file previews, and validation.\r\n \r\n ## Features\r\n * - Drag & drop file upload\r\n * - Click to browse\r\n * - File type, size, and count validation\r\n * - Image preview thumbnails\r\n * - Accessible (keyboard, ARIA)\r\n \r\n ## Usage\r\n \r\n ### Basic\r\n * ```html\r\n * <fui-file-upload\r\n * accept=\"image/,.pdf\"\r\n [multiple]=\"true\"\r\n * [maxFileSize]=\"5242880\"\r\n * (filesSelected)=\"onFiles($event)\"\r\n * ></fui-file-upload>\r\n * ```\r\n /\r\n@Component({\r\n selector: 'fui-file-upload',\r\n standalone: true,\r\n imports: [FuiIconComponent],\r\n templateUrl: './file-upload.component.html',\r\n styleUrls: ['./file-upload.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-file-upload',\r\n '[class.fui-file-upload--disabled]': 'disabled()',\r\n '[class.fui-file-upload--drag-over]': '_isDragOver()',\r\n '[class.fui-file-upload--has-files]': '_files().length > 0',\r\n },\r\n})\r\nexport class FuiFileUploadComponent {\r\n readonly intl = inject(FuiFileUploadIntl);\r\n private readonly _cdr = inject(ChangeDetectorRef);\r\n\r\n constructor() {\r\n this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });\r\n }\r\n\r\n // Inputs\r\n readonly accept = input('');\r\n readonly multiple = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n readonly maxFileSize = input(0);\r\n readonly maxFiles = input(0);\r\n readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n readonly showPreview = input<boolean, unknown>(true, { transform: booleanAttribute });\r\n\r\n // Outputs\r\n readonly filesSelected = output<FileUploadFile[]>();\r\n readonly fileRemoved = output<FileUploadFile>();\r\n readonly filesDropped = output<FileUploadFile[]>();\r\n readonly validationErrors = output<FileUploadValidationError[]>();\r\n\r\n // Internal state\r\n readonly _files: WritableSignal<FileUploadFile[]> = signal([]);\r\n readonly _isDragOver: WritableSignal<boolean> = signal(false);\r\n\r\n // ViewChild\r\n readonly fileInput = viewChild<ElementRef<HTMLInputElement>>('fileInput');\r\n\r\n // Public methods\r\n browse(): void {\r\n if (this.disabled()) return;\r\n this.fileInput()?.nativeElement.click();\r\n }\r\n\r\n removeFile(index: number): void {\r\n if (this.disabled()) return;\r\n const files = [...this._files()];\r\n const removed = files.splice(index, 1)[0];\r\n if (removed) {\r\n if (removed.previewUrl) {\r\n URL.revokeObjectURL(removed.previewUrl);\r\n }\r\n this._files.set(files);\r\n this.fileRemoved.emit(removed);\r\n }\r\n }\r\n\r\n clearAll(): void {\r\n const files = this._files();\r\n for (const f of files) {\r\n if (f.previewUrl) {\r\n URL.revokeObjectURL(f.previewUrl);\r\n }\r\n }\r\n this._files.set([]);\r\n }\r\n\r\n getFiles(): FileUploadFile[] {\r\n return this._files();\r\n }\r\n\r\n // Template event handlers\r\n _onFileInputChange(event: Event): void {\r\n const input = event.target as HTMLInputElement;\r\n if (input.files && input.files.length > 0) {\r\n this._processFiles(input.files);\r\n }\r\n // Reset input so the same file can be selected again\r\n input.value = '';\r\n }\r\n\r\n _onDragEnter(event: DragEvent): void {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n if (!this.disabled()) {\r\n this._isDragOver.set(true);\r\n }\r\n }\r\n\r\n _onDragOver(event: DragEvent): void {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n if (!this.disabled()) {\r\n this._isDragOver.set(true);\r\n }\r\n }\r\n\r\n _onDragLeave(event: DragEvent): void {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n this._isDragOver.set(false);\r\n }\r\n\r\n _onDrop(event: DragEvent): void {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n this._isDragOver.set(false);\r\n\r\n if (this.disabled()) return;\r\n\r\n const files = event.dataTransfer?.files;\r\n if (files && files.length > 0) {\r\n this._processFiles(files);\r\n this.filesDropped.emit(this._files());\r\n }\r\n }\r\n\r\n _formatFileSize(bytes: number): string {\r\n if (bytes === 0) return '0 B';\r\n const units = ['B', 'KB', 'MB', 'GB'];\r\n const k = 1024;\r\n const i = Math.floor(Math.log(bytes) / Math.log(k));\r\n const size = parseFloat((bytes / Math.pow(k, i)).toFixed(1));\r\n return `${size} ${units[i]}`;\r\n }\r\n\r\n // Private methods\r\n private _processFiles(fileList: FileList): void {\r\n const newFiles: FileUploadFile[] = [];\r\n const errors: FileUploadValidationError[] = [];\r\n const currentFiles = this._files();\r\n\r\n const filesToProcess = Array.from(fileList);\r\n\r\n for (const file of filesToProcess) {\r\n // Max files check\r\n const maxFiles = this.maxFiles();\r\n if (maxFiles > 0 && currentFiles.length + newFiles.length >= maxFiles) {\r\n errors.push({\r\n file,\r\n error: 'maxFiles',\r\n message: `Maximum ${maxFiles} file(s) allowed`,\r\n });\r\n continue;\r\n }\r\n\r\n const validationError = this._validateFile(file);\r\n if (validationError) {\r\n errors.push(validationError);\r\n continue;\r\n }\r\n\r\n const uploadFile: FileUploadFile = {\r\n file,\r\n name: file.name,\r\n size: file.size,\r\n type: file.type,\r\n };\r\n\r\n if (this.showPreview() && this._isImage(file)) {\r\n uploadFile.previewUrl = this._generatePreview(file);\r\n }\r\n\r\n newFiles.push(uploadFile);\r\n }\r\n\r\n if (errors.length > 0) {\r\n this.validationErrors.emit(errors);\r\n }\r\n\r\n if (newFiles.length > 0) {\r\n if (this.multiple()) {\r\n this._files.set([...currentFiles, ...newFiles]);\r\n } else {\r\n // Single mode: replace existing\r\n for (const f of currentFiles) {\r\n if (f.previewUrl) URL.revokeObjectURL(f.previewUrl);\r\n }\r\n this._files.set([newFiles[0]]);\r\n }\r\n this.filesSelected.emit(this._files());\r\n }\r\n }\r\n\r\n private _validateFile(file: File): FileUploadValidationError \| null {\r\n // Type check\r\n const accept = this.accept();\r\n if (accept && !this._matchesAccept(file, accept)) {\r\n return {\r\n file,\r\n error: 'type',\r\n message: `File type \"${file.type \|\| file.name.split('.').pop()}\" is not allowed`,\r\n };\r\n }\r\n\r\n // Size check\r\n const maxSize = this.maxFileSize();\r\n if (maxSize > 0 && file.size > maxSize) {\r\n return {\r\n file,\r\n error: 'size',\r\n message: `File size ${this._formatFileSize(file.size)} exceeds maximum ${this._formatFileSize(maxSize)}`,\r\n };\r\n }\r\n\r\n return null;\r\n }\r\n\r\n private _matchesAccept(file: File, accept: string): boolean {\r\n const acceptTypes = accept.split(',').map((t) => t.trim().toLowerCase());\r\n\r\n for (const acceptType of acceptTypes) {\r\n // Wildcard MIME type (e.g. \"image/\")\r\n if (acceptType.endsWith('/')) {\r\n const category = acceptType.slice(0, acceptType.indexOf('/'));\r\n if (file.type.toLowerCase().startsWith(category + '/')) {\r\n return true;\r\n }\r\n }\r\n // Extension match (e.g. \".pdf\")\r\n else if (acceptType.startsWith('.')) {\r\n if (file.name.toLowerCase().endsWith(acceptType)) {\r\n return true;\r\n }\r\n }\r\n // Exact MIME match\r\n else if (file.type.toLowerCase() === acceptType) {\r\n return true;\r\n }\r\n }\r\n\r\n return false;\r\n }\r\n\r\n private _isImage(file: File): boolean {\r\n return file.type.startsWith('image/');\r\n }\r\n\r\n private _generatePreview(file: File): string {\r\n return URL.createObjectURL(file);\r\n }\r\n}\r\n","<input\r\n #fileInput\r\n type=\"file\"\r\n class=\"fui-file-upload__native-input\"\r\n [attr.accept]=\"accept()\"\r\n [attr.multiple]=\"multiple() ? '' : null\"\r\n [attr.disabled]=\"disabled() ? '' : null\"\r\n (change)=\"_onFileInputChange($event)\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n/>\r\n\r\n<div\r\n class=\"fui-file-upload__dropzone\"\r\n (click)=\"browse()\"\r\n (dragenter)=\"_onDragEnter($event)\"\r\n (dragover)=\"_onDragOver($event)\"\r\n (dragleave)=\"_onDragLeave($event)\"\r\n (drop)=\"_onDrop($event)\"\r\n (keydown.enter)=\"browse()\"\r\n (keydown.space)=\"browse(); $event.preventDefault()\"\r\n [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n role=\"button\"\r\n [attr.aria-label]=\"intl.dropzoneAriaLabel\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n>\r\n <fui-icon name=\"upload-simple\" size=\"lg\" class=\"fui-file-upload__icon\"></fui-icon>\r\n <span class=\"fui-file-upload__text\"> Drag & drop files here or <strong>browse</strong> </span>\r\n @if (accept()) {\r\n <span class=\"fui-file-upload__hint\">Accepted: {{ accept() }}</span>\r\n }\r\n @if (maxFileSize() > 0) {\r\n <span class=\"fui-file-upload__hint\">Max size: {{ _formatFileSize(maxFileSize()) }}</span>\r\n }\r\n</div>\r\n\r\n@if (_files().length > 0) {\r\n <ul class=\"fui-file-upload__file-list\" role=\"list\">\r\n @for (fileItem of _files(); track fileItem.name; let i = $index) {\r\n <li class=\"fui-file-upload__file-item\" [class.fui-file-upload__file-item--error]=\"fileItem.error\">\r\n @if (showPreview() && fileItem.previewUrl) {\r\n <img [src]=\"fileItem.previewUrl\" class=\"fui-file-upload__preview\" [alt]=\"fileItem.name\" />\r\n } @else {\r\n <fui-icon name=\"file\" size=\"sm\" class=\"fui-file-upload__file-icon\"></fui-icon>\r\n }\r\n <div class=\"fui-file-upload__file-info\">\r\n <span class=\"fui-file-upload__file-name\">{{ fileItem.name }}</span>\r\n <span class=\"fui-file-upload__file-size\">{{ _formatFileSize(fileItem.size) }}</span>\r\n @if (fileItem.error) {\r\n <span class=\"fui-file-upload__file-error\">{{ fileItem.error }}</span>\r\n }\r\n </div>\r\n <button\r\n type=\"button\"\r\n class=\"fui-file-upload__remove-btn\"\r\n (click)=\"removeFile(i); $event.stopPropagation()\"\r\n [attr.aria-label]=\"intl.removeFileAriaLabel(fileItem.name)\"\r\n [disabled]=\"disabled()\"\r\n >\r\n <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n}\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/raintonic-formaui-components-form-field.mjs CHANGED Viewed

@@ -64,6 +64,7 @@ class FuiFormFieldIntl extends FuiIntlBase {
     copiedAriaLabel = 'Copied';
     copyTooltip = 'Copy';
     copiedTooltip = 'Copied';
+    clearAriaLabel = 'Clear';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiFormFieldIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiFormFieldIntl, providedIn: 'root' });
 }
@@ -221,6 +222,16 @@ class FuiFormFieldComponent {
     isNumberInput = computed(() => {
         return this.control()?.controlType === 'fui-number-input';
     }, ...(ngDevMode ? [{ debugName: "isNumberInput" }] : /* istanbul ignore next */ []));
+    /** Whether the projected control is a plain `fuiInput` with `type="search"`. */
+    isSearchInput = computed(() => {
+        const ctrl = this.control();
+        return this.control()?.controlType === 'fui-input' && typeof ctrl?.type === 'function' && ctrl.type() === 'search';
+    }, ...(ngDevMode ? [{ debugName: "isSearchInput" }] : /* istanbul ignore next */ []));
+    /** Whether the search clear (X) button should be shown. Visible only when the
+     * search input holds a value and is interactive. */
+    showClearButton = computed(() => {
+        return this.isSearchInput() && !this.isEmpty() && !this.isDisabled() && !this.isReadonly();
+    }, ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
     /** Whether control-specific icons (dropdown caret, calendar) should be hidden in readOnly mode */
     hideControlIcons = computed(() => {
         if (!this.isReadonly())
@@ -304,6 +315,14 @@ class FuiFormFieldComponent {
             }, 1500);
         });
     }
+    /**
+     * Clears the projected search input's value and refocuses it.
+     */
+    clearControl(event) {
+        event.stopPropagation();
+        const ctrl = this.control();
+        ctrl?.clear?.();
+    }
     /**
      * Gets the current error messages
      */
@@ -359,7 +378,7 @@ class FuiFormFieldComponent {
                 provide: FUI_FORM_FIELD,
                 useExisting: forwardRef(() => FuiFormFieldComponent),
             },
-        ], queries: [{ propertyName: "control", first: true, predicate: FUI_FORM_FIELD_CONTROL, descendants: true, isSignal: true }, { propertyName: "strengthMeter", first: true, predicate: FUI_STRENGTH_METER, descendants: true, isSignal: true }, { propertyName: "_prefixes", predicate: FuiPrefixDirective, descendants: true }, { propertyName: "_suffixes", predicate: FuiSuffixDirective, descendants: true }], viewQueries: [{ propertyName: "_connectionContainerRef", first: true, predicate: ["connectionContainer"], descendants: true, static: true }, { propertyName: "_wrapperRef", first: true, predicate: ["wrapper"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"fui-form-field__container\">\r\n  <!-- Label - Carbon Design System style (outside wrapper) -->\r\n  <label class=\"fui-form-field__label fui-animate-fade\" [attr.id]=\"labelId\" [attr.for]=\"control()?.id\">\r\n    <ng-content select=\"fui-label\"></ng-content>\r\n    @if (isRequired() && !isReadonly()) {\r\n      <span class=\"fui-form-field__required-marker\" [class.--has-error]=\"hasError()\">*</span>\r\n    }\r\n  </label>\r\n\r\n  <!-- Wrapper \u2014 always visible, styled as read-only when applicable -->\r\n  <div\r\n    #wrapper\r\n    class=\"fui-form-field__wrapper\"\r\n    [class.fui-form-field__wrapper--readonly]=\"isReadonly()\"\r\n    (click)=\"onContainerClick($event)\"\r\n  >\r\n    <!-- Prefix -->\r\n    @if (hasPrefix()) {\r\n      <div class=\"fui-form-field__prefix\">\r\n        <ng-content select=\"[fuiPrefix]\"></ng-content>\r\n      </div>\r\n    }\r\n\r\n    <!-- Infix (contains input) -->\r\n    <div class=\"fui-form-field__infix\">\r\n      <!-- Input container -->\r\n      <div class=\"fui-form-field__input\" #connectionContainer>\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Suffix -->\r\n    @if (hasSuffix() || showCopyButton()) {\r\n      <div class=\"fui-form-field__suffix\">\r\n        <!-- User-projected suffix content -->\r\n        <ng-content select=\"[fuiSuffix]\"></ng-content>\r\n        <!-- Copy button \u2014 visible only in readOnly on hover -->\r\n        @if (showCopyButton()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-form-field__copy-btn\"\r\n            (click)=\"copyValue(); $event.stopPropagation()\"\r\n            [attr.aria-label]=\"copied() ? intl.copiedAriaLabel : intl.copyAriaLabel\"\r\n            [fuiTooltip]=\"copied() ? intl.copiedTooltip : intl.copyTooltip\"\r\n            fuiTooltipPosition=\"top\"\r\n            fuiTooltipSize=\"sm\"\r\n            [fuiTooltipShowDelay]=\"copied() ? 0 : 300\"\r\n            fuiTooltipTrigger=\"manual\"\r\n            [fuiTooltipShow]=\"copied()\"\r\n          >\r\n            <fui-icon [name]=\"copied() ? 'check' : 'copy'\" size=\"sm\"></fui-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (!hideSubscript()) {\r\n    <!-- Helper text and error messages container -->\r\n    <div class=\"fui-form-field__subscript-wrapper\">\r\n      <!-- Error messages -->\r\n      <!-- The strength meter and the error are exclusive -->\r\n      @if (hasError() && !showStrengthMeter()) {\r\n        <div class=\"fui-form-field__error-wrapper fui-animate-slide-in-top\">\r\n          <div class=\"fui-form-field__error\" [attr.id]=\"errorId\">\r\n            <ng-content select=\"fui-error\"></ng-content>\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <div class=\"fui-form-field__hint-wrapper fui-animate-fade\">\r\n          <div class=\"fui-form-field__hint\" [attr.id]=\"hintId\">\r\n            <ng-content select=\"fui-hint\"></ng-content>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n  @if (showStrengthMeter()) {\r\n    <ng-content select=\"fui-strength-meter\"></ng-content>\r\n  }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-form-field{--fui-form-field-height: var(--fui-input-height);--fui-form-field-font-size: var(--fui-text-base);--fui-form-field-border-radius: var(--fui-radius-sm);--fui-form-field-padding-x: var(--fui-spacing-6);--fui-form-field-bg: var(--fui-bg-subtle);--fui-form-field-border-color: var(--fui-border-default);--fui-form-field-label-color: var(--fui-text-primary);--fui-form-field-label-font-size: var(--fui-text-sm);--fui-form-field-label-spacing: var(--fui-spacing-2);--fui-form-field-hint-color: var(--fui-text-secondary);--fui-form-field-error-color: var(--fui-field-border-error);display:block;position:relative;font-family:var(--fui-font-sans);font-size:var(--fui-form-field-font-size)}.fui-form-field__container{display:block;width:100%}.fui-form-field__wrapper{position:relative;display:flex;align-items:center;width:100%;min-height:var(--fui-form-field-height);cursor:text;transition-property:background-color,border-color,box-shadow;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;background-color:var(--fui-form-field-bg);border:var(--fui-border-width-sm) solid var(--fui-form-field-border-color);border-radius:var(--fui-form-field-border-radius);padding:0 var(--fui-form-field-padding-x);box-shadow:var(--fui-shadow-xs);overflow:hidden}.fui-form-field:hover:not(.fui-form-field--disabled):not(.fui-form-field--readonly):not(.fui-form-field--error) .fui-form-field__wrapper{background-color:var(--fui-bg-default);border-color:var(--fui-border-primary)}.fui-form-field.fui-form-field--error .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-error);outline:2px solid var(--fui-error-20)}.fui-form-field.fui-form-field--error.fui-form-field--focused .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-error)}.fui-form-field:has(input:focus) .fui-form-field__wrapper,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-primary)!important;background-color:var(--fui-bg-default);position:relative;outline:2px solid var(--fui-primary-10)}.fui-form-field:has(input:focus) .fui-form-field__prefix,.fui-form-field:has(input:focus) .fui-form-field__suffix,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__prefix,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__suffix{color:var(--fui-brand-fg)}.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__label{color:var(--fui-text-disabled)}.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__wrapper{box-shadow:none;cursor:not-allowed;color:var(--fui-text-disabled);background-color:var(--fui-bg-muted)}.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__prefix,.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__suffix{color:var(--fui-text-disabled)}.fui-form-field--disabled:not(.fui-form-field--readonly) input,.fui-form-field--disabled:not(.fui-form-field--readonly) textarea,.fui-form-field--disabled:not(.fui-form-field--readonly) select{cursor:not-allowed}.fui-form-field--readonly .fui-form-field__wrapper{box-shadow:none;cursor:default;color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-form-field--readonly:has(input:focus) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-default)!important;box-shadow:none;background-color:var(--fui-bg-default)}.fui-form-field--readonly:has(input:focus) .fui-form-field__prefix,.fui-form-field--readonly:has(input:focus) .fui-form-field__suffix{color:var(--fui-text-secondary)}.fui-form-field--readonly .fui-form-field__input input,.fui-form-field--readonly .fui-form-field__input textarea,.fui-form-field--readonly .fui-form-field__input select{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-form-field--readonly .fui-form-field__input input::placeholder,.fui-form-field--readonly .fui-form-field__input textarea::placeholder,.fui-form-field--readonly .fui-form-field__input select::placeholder{color:var(--fui-text-disabled);-webkit-text-fill-color:var(--fui-text-disabled)}.fui-form-field--readonly .fui-form-field__wrapper:hover .fui-form-field__copy-btn{opacity:1;pointer-events:auto}.fui-form-field__prefix,.fui-form-field__suffix{display:flex;align-items:center;white-space:nowrap;flex:0 0 auto;position:relative;z-index:2;padding:0 var(--fui-spacing-2);color:var(--fui-text-secondary);font-size:var(--fui-text-base);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field--focused .fui-form-field__prefix,.fui-form-field--focused .fui-form-field__suffix{color:var(--fui-field-border-focus)}.fui-form-field--error .fui-form-field__prefix,.fui-form-field--error .fui-form-field__suffix{color:var(--fui-field-border-error)}.fui-form-field--disabled .fui-form-field__prefix,.fui-form-field--disabled .fui-form-field__suffix{color:var(--fui-text-secondary)}.fui-form-field--number-input .fui-form-field__wrapper{padding:0}.fui-form-field__infix{position:relative;flex:1 1 auto;min-width:0;padding:0;z-index:2}.fui-form-field__label{display:block;margin-bottom:var(--fui-form-field-label-spacing);font-size:var(--fui-form-field-label-font-size);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-wide);color:var(--fui-form-field-label-color);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__required-marker{color:var(--fui-text-error);margin-left:var(--fui-spacing-2);font-weight:var(--fui-weight-regular)}.fui-form-field__input{position:relative;width:100%}.fui-form-field__input input,.fui-form-field__input textarea,.fui-form-field__input select{width:100%;height:100%;border:none;outline:none;background:transparent;font-family:var(--fui-font-sans);font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-normal);color:var(--fui-text-primary);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__input input::placeholder,.fui-form-field__input textarea::placeholder,.fui-form-field__input select::placeholder{color:var(--fui-text-disabled);opacity:1;transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__input input:focus,.fui-form-field__input textarea:focus,.fui-form-field__input select:focus{outline:none}.fui-form-field__input input:focus-visible,.fui-form-field__input textarea:focus-visible,.fui-form-field__input select:focus-visible{outline:none}.fui-form-field__input input:disabled,.fui-form-field__input textarea:disabled,.fui-form-field__input select:disabled{color:var(--fui-text-disabled);-webkit-text-fill-color:var(--fui-text-disabled)}.fui-form-field__input input:-webkit-autofill,.fui-form-field__input input:-webkit-autofill:hover,.fui-form-field__input input:-webkit-autofill:focus,.fui-form-field__input input:-webkit-autofill:active,.fui-form-field__input textarea:-webkit-autofill,.fui-form-field__input textarea:-webkit-autofill:hover,.fui-form-field__input textarea:-webkit-autofill:focus,.fui-form-field__input textarea:-webkit-autofill:active,.fui-form-field__input select:-webkit-autofill,.fui-form-field__input select:-webkit-autofill:hover,.fui-form-field__input select:-webkit-autofill:focus,.fui-form-field__input select:-webkit-autofill:active{-webkit-box-shadow:0 0 0 100px var(--fui-form-field-bg) inset;-webkit-text-fill-color:var(--fui-text-primary);caret-color:var(--fui-text-primary);transition:background-color 5000s ease-in-out 0s,color 5000s ease-in-out 0s}.fui-form-field__input:has(input[type=color]){height:20px}.fui-form-field__copy-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-form-field__copy-btn:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-form-field__copy-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);opacity:0;pointer-events:none;transition-property:opacity,color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__copy-btn:hover{color:var(--fui-brand-fg)}.fui-form-field__subscript-wrapper{position:relative;min-height:1.25rem;padding:var(--fui-spacing-2) 0 0;font-size:var(--fui-text-sm);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-wide)}.fui-form-field__error-wrapper{color:var(--fui-form-field-error-color)}.fui-form-field__error{transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;font-weight:var(--fui-weight-regular)}.fui-form-field__hint-wrapper{color:var(--fui-form-field-hint-color)}.fui-form-field__hint{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;font-weight:var(--fui-weight-regular)}.fui-form-field--fill .fui-form-field__wrapper{background-color:var(--fui-bg-muted);border-bottom:var(--fui-border-width-md) solid var(--fui-form-field-border-color);border-top:none;border-left:none;border-right:none;border-radius:var(--fui-radius-sm) var(--fui-radius-sm) 0 0}.fui-form-field--fill:hover:not(.fui-form-field--disabled) .fui-form-field__wrapper{background-color:var(--fui-bg-muted);border-top:none;border-left:none;border-right:none}.fui-form-field--fill.fui-form-field--focused .fui-form-field__wrapper,.fui-form-field--fill:has(input:focus) .fui-form-field__wrapper,.fui-form-field--fill:has(select:focus) .fui-form-field__wrapper{border-bottom-color:var(--fui-border-primary);border-top:none!important;border-left:none!important;border-right:none!important}.fui-form-field--fill.fui-form-field--error .fui-form-field__wrapper{border-bottom-color:var(--fui-border-error);border-top:none;border-left:none;border-right:none}.fui-form-field__input textarea{min-height:5rem;resize:vertical;padding:var(--fui-spacing-4) 0;line-height:1.4}.fui-form-field__input select{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:var(--fui-spacing-9)}.fui-form-field__input select::-ms-expand{display:none}.fui-form-field__input select:disabled{cursor:not-allowed}.fui-form-field__input select option{padding:var(--fui-spacing-2);background-color:var(--fui-bg-default);color:var(--fui-text-primary)}.fui-form-field:has(select:focus) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-primary)!important;background-color:var(--fui-bg-default);position:relative;box-shadow:0 0 0 4px var(--fui-primary-20)}.fui-form-field:has(select:focus) .fui-form-field__prefix,.fui-form-field:has(select:focus) .fui-form-field__suffix{color:var(--fui-brand-fg)}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "directive", type: FuiTooltipDirective, selector: "[fuiTooltip]", inputs: ["fuiTooltip", "fuiTooltipPosition", "fuiTooltipSize", "fuiTooltipTrigger", "fuiTooltipShowDelay", "fuiTooltipHideDelay", "fuiTooltipDisabled", "fuiTooltipMaxWidth", "fuiTooltipOffset", "fuiTooltipArrow", "fuiTooltipShow"], exportAs: ["fuiTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "control", first: true, predicate: FUI_FORM_FIELD_CONTROL, descendants: true, isSignal: true }, { propertyName: "strengthMeter", first: true, predicate: FUI_STRENGTH_METER, descendants: true, isSignal: true }, { propertyName: "_prefixes", predicate: FuiPrefixDirective, descendants: true }, { propertyName: "_suffixes", predicate: FuiSuffixDirective, descendants: true }], viewQueries: [{ propertyName: "_connectionContainerRef", first: true, predicate: ["connectionContainer"], descendants: true, static: true }, { propertyName: "_wrapperRef", first: true, predicate: ["wrapper"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"fui-form-field__container\">\r\n  <!-- Label - Carbon Design System style (outside wrapper) -->\r\n  <label class=\"fui-form-field__label fui-animate-fade\" [attr.id]=\"labelId\" [attr.for]=\"control()?.id\">\r\n    <ng-content select=\"fui-label\"></ng-content>\r\n    @if (isRequired() && !isReadonly()) {\r\n      <span class=\"fui-form-field__required-marker\" [class.--has-error]=\"hasError()\">*</span>\r\n    }\r\n  </label>\r\n\r\n  <!-- Wrapper \u2014 always visible, styled as read-only when applicable -->\r\n  <div\r\n    #wrapper\r\n    class=\"fui-form-field__wrapper\"\r\n    [class.fui-form-field__wrapper--readonly]=\"isReadonly()\"\r\n    (click)=\"onContainerClick($event)\"\r\n  >\r\n    <!-- Prefix -->\r\n    @if (hasPrefix()) {\r\n      <div class=\"fui-form-field__prefix\">\r\n        <ng-content select=\"[fuiPrefix]\"></ng-content>\r\n      </div>\r\n    }\r\n\r\n    <!-- Infix (contains input) -->\r\n    <div class=\"fui-form-field__infix\">\r\n      <!-- Input container -->\r\n      <div class=\"fui-form-field__input\" #connectionContainer>\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Suffix -->\r\n    @if (hasSuffix() || showCopyButton() || isSearchInput()) {\r\n      <div class=\"fui-form-field__suffix\">\r\n        <!-- User-projected suffix content -->\r\n        <ng-content select=\"[fuiSuffix]\"></ng-content>\r\n        <!-- Clear button \u2014 always reserves its slot for search inputs (so the\r\n             field width stays stable), hidden until a value is present. -->\r\n        @if (isSearchInput()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-form-field__clear-btn\"\r\n            [class.fui-form-field__clear-btn--hidden]=\"!showClearButton()\"\r\n            tabindex=\"-1\"\r\n            [attr.aria-hidden]=\"!showClearButton()\"\r\n            [disabled]=\"!showClearButton()\"\r\n            (click)=\"clearControl($event)\"\r\n            [attr.aria-label]=\"intl.clearAriaLabel\"\r\n          >\r\n            <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n          </button>\r\n        }\r\n        <!-- Copy button \u2014 visible only in readOnly on hover -->\r\n        @if (showCopyButton()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-form-field__copy-btn\"\r\n            (click)=\"copyValue(); $event.stopPropagation()\"\r\n            [attr.aria-label]=\"copied() ? intl.copiedAriaLabel : intl.copyAriaLabel\"\r\n            [fuiTooltip]=\"copied() ? intl.copiedTooltip : intl.copyTooltip\"\r\n            fuiTooltipPosition=\"top\"\r\n            fuiTooltipSize=\"sm\"\r\n            [fuiTooltipShowDelay]=\"copied() ? 0 : 300\"\r\n            fuiTooltipTrigger=\"manual\"\r\n            [fuiTooltipShow]=\"copied()\"\r\n          >\r\n            <fui-icon [name]=\"copied() ? 'check' : 'copy'\" size=\"sm\"></fui-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (!hideSubscript()) {\r\n    <!-- Helper text and error messages container -->\r\n    <div class=\"fui-form-field__subscript-wrapper\">\r\n      <!-- Error messages -->\r\n      <!-- The strength meter and the error are exclusive -->\r\n      @if (hasError() && !showStrengthMeter()) {\r\n        <div class=\"fui-form-field__error-wrapper fui-animate-slide-in-top\">\r\n          <div class=\"fui-form-field__error\" [attr.id]=\"errorId\">\r\n            <ng-content select=\"fui-error\"></ng-content>\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <div class=\"fui-form-field__hint-wrapper fui-animate-fade\">\r\n          <div class=\"fui-form-field__hint\" [attr.id]=\"hintId\">\r\n            <ng-content select=\"fui-hint\"></ng-content>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n  @if (showStrengthMeter()) {\r\n    <ng-content select=\"fui-strength-meter\"></ng-content>\r\n  }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-form-field{--fui-form-field-height: var(--fui-input-height);--fui-form-field-font-size: var(--fui-text-base);--fui-form-field-border-radius: var(--fui-radius-sm);--fui-form-field-padding-x: var(--fui-spacing-6);--fui-form-field-bg: var(--fui-bg-subtle);--fui-form-field-border-color: var(--fui-border-default);--fui-form-field-label-color: var(--fui-text-primary);--fui-form-field-label-font-size: var(--fui-text-sm);--fui-form-field-label-spacing: var(--fui-spacing-2);--fui-form-field-hint-color: var(--fui-text-secondary);--fui-form-field-error-color: var(--fui-field-border-error);display:block;position:relative;font-family:var(--fui-font-sans);font-size:var(--fui-form-field-font-size)}.fui-form-field__container{display:block;width:100%}.fui-form-field__wrapper{position:relative;display:flex;align-items:center;width:100%;min-height:var(--fui-form-field-height);cursor:text;transition-property:background-color,border-color,box-shadow;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;background-color:var(--fui-form-field-bg);border:var(--fui-border-width-sm) solid var(--fui-form-field-border-color);border-radius:var(--fui-form-field-border-radius);padding:0 var(--fui-form-field-padding-x);box-shadow:var(--fui-shadow-xs);overflow:hidden}.fui-form-field:hover:not(.fui-form-field--disabled):not(.fui-form-field--readonly):not(.fui-form-field--error) .fui-form-field__wrapper{background-color:var(--fui-bg-default);border-color:var(--fui-border-primary)}.fui-form-field.fui-form-field--error .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-error);outline:2px solid var(--fui-error-20)}.fui-form-field.fui-form-field--error.fui-form-field--focused .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-error)}.fui-form-field:has(input:focus) .fui-form-field__wrapper,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-primary)!important;background-color:var(--fui-bg-default);position:relative;outline:2px solid var(--fui-primary-10)}.fui-form-field:has(input:focus) .fui-form-field__prefix,.fui-form-field:has(input:focus) .fui-form-field__suffix,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__prefix,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__suffix{color:var(--fui-primary-fg)}.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__label{color:var(--fui-text-disabled)}.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__wrapper{box-shadow:none;cursor:not-allowed;color:var(--fui-text-disabled);background-color:var(--fui-bg-muted)}.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__prefix,.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__suffix{color:var(--fui-text-disabled)}.fui-form-field--disabled:not(.fui-form-field--readonly) input,.fui-form-field--disabled:not(.fui-form-field--readonly) textarea,.fui-form-field--disabled:not(.fui-form-field--readonly) select{cursor:not-allowed}.fui-form-field--readonly .fui-form-field__wrapper{box-shadow:none;cursor:default;color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-form-field--readonly:has(input:focus) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-default)!important;box-shadow:none;background-color:var(--fui-bg-default)}.fui-form-field--readonly:has(input:focus) .fui-form-field__prefix,.fui-form-field--readonly:has(input:focus) .fui-form-field__suffix{color:var(--fui-text-secondary)}.fui-form-field--readonly .fui-form-field__input input,.fui-form-field--readonly .fui-form-field__input textarea,.fui-form-field--readonly .fui-form-field__input select{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-form-field--readonly .fui-form-field__input input::placeholder,.fui-form-field--readonly .fui-form-field__input textarea::placeholder,.fui-form-field--readonly .fui-form-field__input select::placeholder{color:var(--fui-text-disabled);-webkit-text-fill-color:var(--fui-text-disabled)}.fui-form-field--readonly .fui-form-field__wrapper:hover .fui-form-field__copy-btn{opacity:1;pointer-events:auto}.fui-form-field__prefix,.fui-form-field__suffix{display:flex;align-items:center;white-space:nowrap;flex:0 0 auto;position:relative;z-index:2;padding:0 var(--fui-spacing-2);color:var(--fui-text-secondary);font-size:var(--fui-text-base);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field--focused .fui-form-field__prefix,.fui-form-field--focused .fui-form-field__suffix{color:var(--fui-field-border-focus)}.fui-form-field--error .fui-form-field__prefix,.fui-form-field--error .fui-form-field__suffix{color:var(--fui-field-border-error)}.fui-form-field--disabled .fui-form-field__prefix,.fui-form-field--disabled .fui-form-field__suffix{color:var(--fui-text-secondary)}.fui-form-field--number-input .fui-form-field__wrapper{padding:0}.fui-form-field__infix{position:relative;flex:1 1 auto;min-width:0;padding:0;z-index:2}.fui-form-field__label{display:block;margin-bottom:var(--fui-form-field-label-spacing);font-size:var(--fui-form-field-label-font-size);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-wide);color:var(--fui-form-field-label-color);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__required-marker{color:var(--fui-text-error);margin-left:var(--fui-spacing-2);font-weight:var(--fui-weight-regular)}.fui-form-field__input{position:relative;width:100%}.fui-form-field__input input,.fui-form-field__input textarea,.fui-form-field__input select{width:100%;height:100%;border:none;outline:none;background:transparent;font-family:var(--fui-font-sans);font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-normal);color:var(--fui-text-primary);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__input input::placeholder,.fui-form-field__input textarea::placeholder,.fui-form-field__input select::placeholder{color:var(--fui-text-disabled);opacity:1;transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__input input:focus,.fui-form-field__input textarea:focus,.fui-form-field__input select:focus{outline:none}.fui-form-field__input input:focus-visible,.fui-form-field__input textarea:focus-visible,.fui-form-field__input select:focus-visible{outline:none}.fui-form-field__input input:disabled,.fui-form-field__input textarea:disabled,.fui-form-field__input select:disabled{color:var(--fui-text-disabled);-webkit-text-fill-color:var(--fui-text-disabled)}.fui-form-field__input input:-webkit-autofill,.fui-form-field__input input:-webkit-autofill:hover,.fui-form-field__input input:-webkit-autofill:focus,.fui-form-field__input input:-webkit-autofill:active,.fui-form-field__input textarea:-webkit-autofill,.fui-form-field__input textarea:-webkit-autofill:hover,.fui-form-field__input textarea:-webkit-autofill:focus,.fui-form-field__input textarea:-webkit-autofill:active,.fui-form-field__input select:-webkit-autofill,.fui-form-field__input select:-webkit-autofill:hover,.fui-form-field__input select:-webkit-autofill:focus,.fui-form-field__input select:-webkit-autofill:active{-webkit-box-shadow:0 0 0 100px var(--fui-form-field-bg) inset;-webkit-text-fill-color:var(--fui-text-primary);caret-color:var(--fui-text-primary);transition:background-color 5000s ease-in-out 0s,color 5000s ease-in-out 0s}.fui-form-field__input input[type=search]::-webkit-search-cancel-button,.fui-form-field__input input[type=search]::-webkit-search-decoration,.fui-form-field__input textarea[type=search]::-webkit-search-cancel-button,.fui-form-field__input textarea[type=search]::-webkit-search-decoration,.fui-form-field__input select[type=search]::-webkit-search-cancel-button,.fui-form-field__input select[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}.fui-form-field__input:has(input[type=color]){height:20px}.fui-form-field__copy-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-form-field__copy-btn:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-form-field__copy-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);opacity:0;pointer-events:none;transition-property:opacity,color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__copy-btn:hover{color:var(--fui-primary-fg)}.fui-form-field__clear-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-form-field__clear-btn:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-form-field__clear-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);cursor:pointer;transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__clear-btn:hover{color:var(--fui-text-primary)}.fui-form-field__clear-btn--hidden{visibility:hidden;pointer-events:none}.fui-form-field__subscript-wrapper{position:relative;min-height:1.25rem;padding:var(--fui-spacing-2) 0 0;font-size:var(--fui-text-sm);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-wide)}.fui-form-field__error-wrapper{color:var(--fui-form-field-error-color)}.fui-form-field__error{transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;font-weight:var(--fui-weight-regular)}.fui-form-field__hint-wrapper{color:var(--fui-form-field-hint-color)}.fui-form-field__hint{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;font-weight:var(--fui-weight-regular)}.fui-form-field--fill .fui-form-field__wrapper{background-color:var(--fui-bg-muted);border-bottom:var(--fui-border-width-md) solid var(--fui-form-field-border-color);border-top:none;border-left:none;border-right:none;border-radius:var(--fui-radius-sm) var(--fui-radius-sm) 0 0}.fui-form-field--fill:hover:not(.fui-form-field--disabled) .fui-form-field__wrapper{background-color:var(--fui-bg-muted);border-top:none;border-left:none;border-right:none}.fui-form-field--fill.fui-form-field--focused .fui-form-field__wrapper,.fui-form-field--fill:has(input:focus) .fui-form-field__wrapper,.fui-form-field--fill:has(select:focus) .fui-form-field__wrapper{border-bottom-color:var(--fui-border-primary);border-top:none!important;border-left:none!important;border-right:none!important}.fui-form-field--fill.fui-form-field--error .fui-form-field__wrapper{border-bottom-color:var(--fui-border-error);border-top:none;border-left:none;border-right:none}.fui-form-field__input textarea{min-height:5rem;resize:vertical;padding:var(--fui-spacing-4) 0;line-height:1.4}.fui-form-field__input select{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:var(--fui-spacing-9)}.fui-form-field__input select::-ms-expand{display:none}.fui-form-field__input select:disabled{cursor:not-allowed}.fui-form-field__input select option{padding:var(--fui-spacing-2);background-color:var(--fui-bg-default);color:var(--fui-text-primary)}.fui-form-field:has(select:focus) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-primary)!important;background-color:var(--fui-bg-default);position:relative;box-shadow:0 0 0 4px var(--fui-primary-20)}.fui-form-field:has(select:focus) .fui-form-field__prefix,.fui-form-field:has(select:focus) .fui-form-field__suffix{color:var(--fui-primary-fg)}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "directive", type: FuiTooltipDirective, selector: "[fuiTooltip]", inputs: ["fuiTooltip", "fuiTooltipPosition", "fuiTooltipSize", "fuiTooltipTextAlign", "fuiTooltipTrigger", "fuiTooltipShowDelay", "fuiTooltipHideDelay", "fuiTooltipDisabled", "fuiTooltipMaxWidth", "fuiTooltipOffset", "fuiTooltipArrow", "fuiTooltipShow"], exportAs: ["fuiTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiFormFieldComponent, decorators: [{
             type: Component,
@@ -380,7 +399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         role: 'group',
                         '[attr.aria-labelledby]': 'labelId',
                         '[attr.aria-disabled]': 'isDisabled() || null',
-                    }, template: "<div class=\"fui-form-field__container\">\r\n  <!-- Label - Carbon Design System style (outside wrapper) -->\r\n  <label class=\"fui-form-field__label fui-animate-fade\" [attr.id]=\"labelId\" [attr.for]=\"control()?.id\">\r\n    <ng-content select=\"fui-label\"></ng-content>\r\n    @if (isRequired() && !isReadonly()) {\r\n      <span class=\"fui-form-field__required-marker\" [class.--has-error]=\"hasError()\">*</span>\r\n    }\r\n  </label>\r\n\r\n  <!-- Wrapper \u2014 always visible, styled as read-only when applicable -->\r\n  <div\r\n    #wrapper\r\n    class=\"fui-form-field__wrapper\"\r\n    [class.fui-form-field__wrapper--readonly]=\"isReadonly()\"\r\n    (click)=\"onContainerClick($event)\"\r\n  >\r\n    <!-- Prefix -->\r\n    @if (hasPrefix()) {\r\n      <div class=\"fui-form-field__prefix\">\r\n        <ng-content select=\"[fuiPrefix]\"></ng-content>\r\n      </div>\r\n    }\r\n\r\n    <!-- Infix (contains input) -->\r\n    <div class=\"fui-form-field__infix\">\r\n      <!-- Input container -->\r\n      <div class=\"fui-form-field__input\" #connectionContainer>\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Suffix -->\r\n    @if (hasSuffix() || showCopyButton()) {\r\n      <div class=\"fui-form-field__suffix\">\r\n        <!-- User-projected suffix content -->\r\n        <ng-content select=\"[fuiSuffix]\"></ng-content>\r\n        <!-- Copy button \u2014 visible only in readOnly on hover -->\r\n        @if (showCopyButton()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-form-field__copy-btn\"\r\n            (click)=\"copyValue(); $event.stopPropagation()\"\r\n            [attr.aria-label]=\"copied() ? intl.copiedAriaLabel : intl.copyAriaLabel\"\r\n            [fuiTooltip]=\"copied() ? intl.copiedTooltip : intl.copyTooltip\"\r\n            fuiTooltipPosition=\"top\"\r\n            fuiTooltipSize=\"sm\"\r\n            [fuiTooltipShowDelay]=\"copied() ? 0 : 300\"\r\n            fuiTooltipTrigger=\"manual\"\r\n            [fuiTooltipShow]=\"copied()\"\r\n          >\r\n            <fui-icon [name]=\"copied() ? 'check' : 'copy'\" size=\"sm\"></fui-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (!hideSubscript()) {\r\n    <!-- Helper text and error messages container -->\r\n    <div class=\"fui-form-field__subscript-wrapper\">\r\n      <!-- Error messages -->\r\n      <!-- The strength meter and the error are exclusive -->\r\n      @if (hasError() && !showStrengthMeter()) {\r\n        <div class=\"fui-form-field__error-wrapper fui-animate-slide-in-top\">\r\n          <div class=\"fui-form-field__error\" [attr.id]=\"errorId\">\r\n            <ng-content select=\"fui-error\"></ng-content>\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <div class=\"fui-form-field__hint-wrapper fui-animate-fade\">\r\n          <div class=\"fui-form-field__hint\" [attr.id]=\"hintId\">\r\n            <ng-content select=\"fui-hint\"></ng-content>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n  @if (showStrengthMeter()) {\r\n    <ng-content select=\"fui-strength-meter\"></ng-content>\r\n  }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-form-field{--fui-form-field-height: var(--fui-input-height);--fui-form-field-font-size: var(--fui-text-base);--fui-form-field-border-radius: var(--fui-radius-sm);--fui-form-field-padding-x: var(--fui-spacing-6);--fui-form-field-bg: var(--fui-bg-subtle);--fui-form-field-border-color: var(--fui-border-default);--fui-form-field-label-color: var(--fui-text-primary);--fui-form-field-label-font-size: var(--fui-text-sm);--fui-form-field-label-spacing: var(--fui-spacing-2);--fui-form-field-hint-color: var(--fui-text-secondary);--fui-form-field-error-color: var(--fui-field-border-error);display:block;position:relative;font-family:var(--fui-font-sans);font-size:var(--fui-form-field-font-size)}.fui-form-field__container{display:block;width:100%}.fui-form-field__wrapper{position:relative;display:flex;align-items:center;width:100%;min-height:var(--fui-form-field-height);cursor:text;transition-property:background-color,border-color,box-shadow;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;background-color:var(--fui-form-field-bg);border:var(--fui-border-width-sm) solid var(--fui-form-field-border-color);border-radius:var(--fui-form-field-border-radius);padding:0 var(--fui-form-field-padding-x);box-shadow:var(--fui-shadow-xs);overflow:hidden}.fui-form-field:hover:not(.fui-form-field--disabled):not(.fui-form-field--readonly):not(.fui-form-field--error) .fui-form-field__wrapper{background-color:var(--fui-bg-default);border-color:var(--fui-border-primary)}.fui-form-field.fui-form-field--error .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-error);outline:2px solid var(--fui-error-20)}.fui-form-field.fui-form-field--error.fui-form-field--focused .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-error)}.fui-form-field:has(input:focus) .fui-form-field__wrapper,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-primary)!important;background-color:var(--fui-bg-default);position:relative;outline:2px solid var(--fui-primary-10)}.fui-form-field:has(input:focus) .fui-form-field__prefix,.fui-form-field:has(input:focus) .fui-form-field__suffix,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__prefix,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__suffix{color:var(--fui-brand-fg)}.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__label{color:var(--fui-text-disabled)}.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__wrapper{box-shadow:none;cursor:not-allowed;color:var(--fui-text-disabled);background-color:var(--fui-bg-muted)}.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__prefix,.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__suffix{color:var(--fui-text-disabled)}.fui-form-field--disabled:not(.fui-form-field--readonly) input,.fui-form-field--disabled:not(.fui-form-field--readonly) textarea,.fui-form-field--disabled:not(.fui-form-field--readonly) select{cursor:not-allowed}.fui-form-field--readonly .fui-form-field__wrapper{box-shadow:none;cursor:default;color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-form-field--readonly:has(input:focus) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-default)!important;box-shadow:none;background-color:var(--fui-bg-default)}.fui-form-field--readonly:has(input:focus) .fui-form-field__prefix,.fui-form-field--readonly:has(input:focus) .fui-form-field__suffix{color:var(--fui-text-secondary)}.fui-form-field--readonly .fui-form-field__input input,.fui-form-field--readonly .fui-form-field__input textarea,.fui-form-field--readonly .fui-form-field__input select{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-form-field--readonly .fui-form-field__input input::placeholder,.fui-form-field--readonly .fui-form-field__input textarea::placeholder,.fui-form-field--readonly .fui-form-field__input select::placeholder{color:var(--fui-text-disabled);-webkit-text-fill-color:var(--fui-text-disabled)}.fui-form-field--readonly .fui-form-field__wrapper:hover .fui-form-field__copy-btn{opacity:1;pointer-events:auto}.fui-form-field__prefix,.fui-form-field__suffix{display:flex;align-items:center;white-space:nowrap;flex:0 0 auto;position:relative;z-index:2;padding:0 var(--fui-spacing-2);color:var(--fui-text-secondary);font-size:var(--fui-text-base);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field--focused .fui-form-field__prefix,.fui-form-field--focused .fui-form-field__suffix{color:var(--fui-field-border-focus)}.fui-form-field--error .fui-form-field__prefix,.fui-form-field--error .fui-form-field__suffix{color:var(--fui-field-border-error)}.fui-form-field--disabled .fui-form-field__prefix,.fui-form-field--disabled .fui-form-field__suffix{color:var(--fui-text-secondary)}.fui-form-field--number-input .fui-form-field__wrapper{padding:0}.fui-form-field__infix{position:relative;flex:1 1 auto;min-width:0;padding:0;z-index:2}.fui-form-field__label{display:block;margin-bottom:var(--fui-form-field-label-spacing);font-size:var(--fui-form-field-label-font-size);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-wide);color:var(--fui-form-field-label-color);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__required-marker{color:var(--fui-text-error);margin-left:var(--fui-spacing-2);font-weight:var(--fui-weight-regular)}.fui-form-field__input{position:relative;width:100%}.fui-form-field__input input,.fui-form-field__input textarea,.fui-form-field__input select{width:100%;height:100%;border:none;outline:none;background:transparent;font-family:var(--fui-font-sans);font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-normal);color:var(--fui-text-primary);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__input input::placeholder,.fui-form-field__input textarea::placeholder,.fui-form-field__input select::placeholder{color:var(--fui-text-disabled);opacity:1;transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__input input:focus,.fui-form-field__input textarea:focus,.fui-form-field__input select:focus{outline:none}.fui-form-field__input input:focus-visible,.fui-form-field__input textarea:focus-visible,.fui-form-field__input select:focus-visible{outline:none}.fui-form-field__input input:disabled,.fui-form-field__input textarea:disabled,.fui-form-field__input select:disabled{color:var(--fui-text-disabled);-webkit-text-fill-color:var(--fui-text-disabled)}.fui-form-field__input input:-webkit-autofill,.fui-form-field__input input:-webkit-autofill:hover,.fui-form-field__input input:-webkit-autofill:focus,.fui-form-field__input input:-webkit-autofill:active,.fui-form-field__input textarea:-webkit-autofill,.fui-form-field__input textarea:-webkit-autofill:hover,.fui-form-field__input textarea:-webkit-autofill:focus,.fui-form-field__input textarea:-webkit-autofill:active,.fui-form-field__input select:-webkit-autofill,.fui-form-field__input select:-webkit-autofill:hover,.fui-form-field__input select:-webkit-autofill:focus,.fui-form-field__input select:-webkit-autofill:active{-webkit-box-shadow:0 0 0 100px var(--fui-form-field-bg) inset;-webkit-text-fill-color:var(--fui-text-primary);caret-color:var(--fui-text-primary);transition:background-color 5000s ease-in-out 0s,color 5000s ease-in-out 0s}.fui-form-field__input:has(input[type=color]){height:20px}.fui-form-field__copy-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-form-field__copy-btn:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-form-field__copy-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);opacity:0;pointer-events:none;transition-property:opacity,color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__copy-btn:hover{color:var(--fui-brand-fg)}.fui-form-field__subscript-wrapper{position:relative;min-height:1.25rem;padding:var(--fui-spacing-2) 0 0;font-size:var(--fui-text-sm);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-wide)}.fui-form-field__error-wrapper{color:var(--fui-form-field-error-color)}.fui-form-field__error{transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;font-weight:var(--fui-weight-regular)}.fui-form-field__hint-wrapper{color:var(--fui-form-field-hint-color)}.fui-form-field__hint{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;font-weight:var(--fui-weight-regular)}.fui-form-field--fill .fui-form-field__wrapper{background-color:var(--fui-bg-muted);border-bottom:var(--fui-border-width-md) solid var(--fui-form-field-border-color);border-top:none;border-left:none;border-right:none;border-radius:var(--fui-radius-sm) var(--fui-radius-sm) 0 0}.fui-form-field--fill:hover:not(.fui-form-field--disabled) .fui-form-field__wrapper{background-color:var(--fui-bg-muted);border-top:none;border-left:none;border-right:none}.fui-form-field--fill.fui-form-field--focused .fui-form-field__wrapper,.fui-form-field--fill:has(input:focus) .fui-form-field__wrapper,.fui-form-field--fill:has(select:focus) .fui-form-field__wrapper{border-bottom-color:var(--fui-border-primary);border-top:none!important;border-left:none!important;border-right:none!important}.fui-form-field--fill.fui-form-field--error .fui-form-field__wrapper{border-bottom-color:var(--fui-border-error);border-top:none;border-left:none;border-right:none}.fui-form-field__input textarea{min-height:5rem;resize:vertical;padding:var(--fui-spacing-4) 0;line-height:1.4}.fui-form-field__input select{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:var(--fui-spacing-9)}.fui-form-field__input select::-ms-expand{display:none}.fui-form-field__input select:disabled{cursor:not-allowed}.fui-form-field__input select option{padding:var(--fui-spacing-2);background-color:var(--fui-bg-default);color:var(--fui-text-primary)}.fui-form-field:has(select:focus) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-primary)!important;background-color:var(--fui-bg-default);position:relative;box-shadow:0 0 0 4px var(--fui-primary-20)}.fui-form-field:has(select:focus) .fui-form-field__prefix,.fui-form-field:has(select:focus) .fui-form-field__suffix{color:var(--fui-brand-fg)}\n"] }]
+                    }, template: "<div class=\"fui-form-field__container\">\r\n  <!-- Label - Carbon Design System style (outside wrapper) -->\r\n  <label class=\"fui-form-field__label fui-animate-fade\" [attr.id]=\"labelId\" [attr.for]=\"control()?.id\">\r\n    <ng-content select=\"fui-label\"></ng-content>\r\n    @if (isRequired() && !isReadonly()) {\r\n      <span class=\"fui-form-field__required-marker\" [class.--has-error]=\"hasError()\">*</span>\r\n    }\r\n  </label>\r\n\r\n  <!-- Wrapper \u2014 always visible, styled as read-only when applicable -->\r\n  <div\r\n    #wrapper\r\n    class=\"fui-form-field__wrapper\"\r\n    [class.fui-form-field__wrapper--readonly]=\"isReadonly()\"\r\n    (click)=\"onContainerClick($event)\"\r\n  >\r\n    <!-- Prefix -->\r\n    @if (hasPrefix()) {\r\n      <div class=\"fui-form-field__prefix\">\r\n        <ng-content select=\"[fuiPrefix]\"></ng-content>\r\n      </div>\r\n    }\r\n\r\n    <!-- Infix (contains input) -->\r\n    <div class=\"fui-form-field__infix\">\r\n      <!-- Input container -->\r\n      <div class=\"fui-form-field__input\" #connectionContainer>\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Suffix -->\r\n    @if (hasSuffix() || showCopyButton() || isSearchInput()) {\r\n      <div class=\"fui-form-field__suffix\">\r\n        <!-- User-projected suffix content -->\r\n        <ng-content select=\"[fuiSuffix]\"></ng-content>\r\n        <!-- Clear button \u2014 always reserves its slot for search inputs (so the\r\n             field width stays stable), hidden until a value is present. -->\r\n        @if (isSearchInput()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-form-field__clear-btn\"\r\n            [class.fui-form-field__clear-btn--hidden]=\"!showClearButton()\"\r\n            tabindex=\"-1\"\r\n            [attr.aria-hidden]=\"!showClearButton()\"\r\n            [disabled]=\"!showClearButton()\"\r\n            (click)=\"clearControl($event)\"\r\n            [attr.aria-label]=\"intl.clearAriaLabel\"\r\n          >\r\n            <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n          </button>\r\n        }\r\n        <!-- Copy button \u2014 visible only in readOnly on hover -->\r\n        @if (showCopyButton()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-form-field__copy-btn\"\r\n            (click)=\"copyValue(); $event.stopPropagation()\"\r\n            [attr.aria-label]=\"copied() ? intl.copiedAriaLabel : intl.copyAriaLabel\"\r\n            [fuiTooltip]=\"copied() ? intl.copiedTooltip : intl.copyTooltip\"\r\n            fuiTooltipPosition=\"top\"\r\n            fuiTooltipSize=\"sm\"\r\n            [fuiTooltipShowDelay]=\"copied() ? 0 : 300\"\r\n            fuiTooltipTrigger=\"manual\"\r\n            [fuiTooltipShow]=\"copied()\"\r\n          >\r\n            <fui-icon [name]=\"copied() ? 'check' : 'copy'\" size=\"sm\"></fui-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (!hideSubscript()) {\r\n    <!-- Helper text and error messages container -->\r\n    <div class=\"fui-form-field__subscript-wrapper\">\r\n      <!-- Error messages -->\r\n      <!-- The strength meter and the error are exclusive -->\r\n      @if (hasError() && !showStrengthMeter()) {\r\n        <div class=\"fui-form-field__error-wrapper fui-animate-slide-in-top\">\r\n          <div class=\"fui-form-field__error\" [attr.id]=\"errorId\">\r\n            <ng-content select=\"fui-error\"></ng-content>\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <div class=\"fui-form-field__hint-wrapper fui-animate-fade\">\r\n          <div class=\"fui-form-field__hint\" [attr.id]=\"hintId\">\r\n            <ng-content select=\"fui-hint\"></ng-content>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n  @if (showStrengthMeter()) {\r\n    <ng-content select=\"fui-strength-meter\"></ng-content>\r\n  }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-form-field{--fui-form-field-height: var(--fui-input-height);--fui-form-field-font-size: var(--fui-text-base);--fui-form-field-border-radius: var(--fui-radius-sm);--fui-form-field-padding-x: var(--fui-spacing-6);--fui-form-field-bg: var(--fui-bg-subtle);--fui-form-field-border-color: var(--fui-border-default);--fui-form-field-label-color: var(--fui-text-primary);--fui-form-field-label-font-size: var(--fui-text-sm);--fui-form-field-label-spacing: var(--fui-spacing-2);--fui-form-field-hint-color: var(--fui-text-secondary);--fui-form-field-error-color: var(--fui-field-border-error);display:block;position:relative;font-family:var(--fui-font-sans);font-size:var(--fui-form-field-font-size)}.fui-form-field__container{display:block;width:100%}.fui-form-field__wrapper{position:relative;display:flex;align-items:center;width:100%;min-height:var(--fui-form-field-height);cursor:text;transition-property:background-color,border-color,box-shadow;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;background-color:var(--fui-form-field-bg);border:var(--fui-border-width-sm) solid var(--fui-form-field-border-color);border-radius:var(--fui-form-field-border-radius);padding:0 var(--fui-form-field-padding-x);box-shadow:var(--fui-shadow-xs);overflow:hidden}.fui-form-field:hover:not(.fui-form-field--disabled):not(.fui-form-field--readonly):not(.fui-form-field--error) .fui-form-field__wrapper{background-color:var(--fui-bg-default);border-color:var(--fui-border-primary)}.fui-form-field.fui-form-field--error .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-error);outline:2px solid var(--fui-error-20)}.fui-form-field.fui-form-field--error.fui-form-field--focused .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-error)}.fui-form-field:has(input:focus) .fui-form-field__wrapper,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-primary)!important;background-color:var(--fui-bg-default);position:relative;outline:2px solid var(--fui-primary-10)}.fui-form-field:has(input:focus) .fui-form-field__prefix,.fui-form-field:has(input:focus) .fui-form-field__suffix,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__prefix,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__suffix{color:var(--fui-primary-fg)}.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__label{color:var(--fui-text-disabled)}.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__wrapper{box-shadow:none;cursor:not-allowed;color:var(--fui-text-disabled);background-color:var(--fui-bg-muted)}.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__prefix,.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__suffix{color:var(--fui-text-disabled)}.fui-form-field--disabled:not(.fui-form-field--readonly) input,.fui-form-field--disabled:not(.fui-form-field--readonly) textarea,.fui-form-field--disabled:not(.fui-form-field--readonly) select{cursor:not-allowed}.fui-form-field--readonly .fui-form-field__wrapper{box-shadow:none;cursor:default;color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-form-field--readonly:has(input:focus) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-default)!important;box-shadow:none;background-color:var(--fui-bg-default)}.fui-form-field--readonly:has(input:focus) .fui-form-field__prefix,.fui-form-field--readonly:has(input:focus) .fui-form-field__suffix{color:var(--fui-text-secondary)}.fui-form-field--readonly .fui-form-field__input input,.fui-form-field--readonly .fui-form-field__input textarea,.fui-form-field--readonly .fui-form-field__input select{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-form-field--readonly .fui-form-field__input input::placeholder,.fui-form-field--readonly .fui-form-field__input textarea::placeholder,.fui-form-field--readonly .fui-form-field__input select::placeholder{color:var(--fui-text-disabled);-webkit-text-fill-color:var(--fui-text-disabled)}.fui-form-field--readonly .fui-form-field__wrapper:hover .fui-form-field__copy-btn{opacity:1;pointer-events:auto}.fui-form-field__prefix,.fui-form-field__suffix{display:flex;align-items:center;white-space:nowrap;flex:0 0 auto;position:relative;z-index:2;padding:0 var(--fui-spacing-2);color:var(--fui-text-secondary);font-size:var(--fui-text-base);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field--focused .fui-form-field__prefix,.fui-form-field--focused .fui-form-field__suffix{color:var(--fui-field-border-focus)}.fui-form-field--error .fui-form-field__prefix,.fui-form-field--error .fui-form-field__suffix{color:var(--fui-field-border-error)}.fui-form-field--disabled .fui-form-field__prefix,.fui-form-field--disabled .fui-form-field__suffix{color:var(--fui-text-secondary)}.fui-form-field--number-input .fui-form-field__wrapper{padding:0}.fui-form-field__infix{position:relative;flex:1 1 auto;min-width:0;padding:0;z-index:2}.fui-form-field__label{display:block;margin-bottom:var(--fui-form-field-label-spacing);font-size:var(--fui-form-field-label-font-size);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-wide);color:var(--fui-form-field-label-color);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__required-marker{color:var(--fui-text-error);margin-left:var(--fui-spacing-2);font-weight:var(--fui-weight-regular)}.fui-form-field__input{position:relative;width:100%}.fui-form-field__input input,.fui-form-field__input textarea,.fui-form-field__input select{width:100%;height:100%;border:none;outline:none;background:transparent;font-family:var(--fui-font-sans);font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-normal);color:var(--fui-text-primary);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__input input::placeholder,.fui-form-field__input textarea::placeholder,.fui-form-field__input select::placeholder{color:var(--fui-text-disabled);opacity:1;transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__input input:focus,.fui-form-field__input textarea:focus,.fui-form-field__input select:focus{outline:none}.fui-form-field__input input:focus-visible,.fui-form-field__input textarea:focus-visible,.fui-form-field__input select:focus-visible{outline:none}.fui-form-field__input input:disabled,.fui-form-field__input textarea:disabled,.fui-form-field__input select:disabled{color:var(--fui-text-disabled);-webkit-text-fill-color:var(--fui-text-disabled)}.fui-form-field__input input:-webkit-autofill,.fui-form-field__input input:-webkit-autofill:hover,.fui-form-field__input input:-webkit-autofill:focus,.fui-form-field__input input:-webkit-autofill:active,.fui-form-field__input textarea:-webkit-autofill,.fui-form-field__input textarea:-webkit-autofill:hover,.fui-form-field__input textarea:-webkit-autofill:focus,.fui-form-field__input textarea:-webkit-autofill:active,.fui-form-field__input select:-webkit-autofill,.fui-form-field__input select:-webkit-autofill:hover,.fui-form-field__input select:-webkit-autofill:focus,.fui-form-field__input select:-webkit-autofill:active{-webkit-box-shadow:0 0 0 100px var(--fui-form-field-bg) inset;-webkit-text-fill-color:var(--fui-text-primary);caret-color:var(--fui-text-primary);transition:background-color 5000s ease-in-out 0s,color 5000s ease-in-out 0s}.fui-form-field__input input[type=search]::-webkit-search-cancel-button,.fui-form-field__input input[type=search]::-webkit-search-decoration,.fui-form-field__input textarea[type=search]::-webkit-search-cancel-button,.fui-form-field__input textarea[type=search]::-webkit-search-decoration,.fui-form-field__input select[type=search]::-webkit-search-cancel-button,.fui-form-field__input select[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}.fui-form-field__input:has(input[type=color]){height:20px}.fui-form-field__copy-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-form-field__copy-btn:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-form-field__copy-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);opacity:0;pointer-events:none;transition-property:opacity,color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__copy-btn:hover{color:var(--fui-primary-fg)}.fui-form-field__clear-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-form-field__clear-btn:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-form-field__clear-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);cursor:pointer;transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-form-field__clear-btn:hover{color:var(--fui-text-primary)}.fui-form-field__clear-btn--hidden{visibility:hidden;pointer-events:none}.fui-form-field__subscript-wrapper{position:relative;min-height:1.25rem;padding:var(--fui-spacing-2) 0 0;font-size:var(--fui-text-sm);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-wide)}.fui-form-field__error-wrapper{color:var(--fui-form-field-error-color)}.fui-form-field__error{transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;font-weight:var(--fui-weight-regular)}.fui-form-field__hint-wrapper{color:var(--fui-form-field-hint-color)}.fui-form-field__hint{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;font-weight:var(--fui-weight-regular)}.fui-form-field--fill .fui-form-field__wrapper{background-color:var(--fui-bg-muted);border-bottom:var(--fui-border-width-md) solid var(--fui-form-field-border-color);border-top:none;border-left:none;border-right:none;border-radius:var(--fui-radius-sm) var(--fui-radius-sm) 0 0}.fui-form-field--fill:hover:not(.fui-form-field--disabled) .fui-form-field__wrapper{background-color:var(--fui-bg-muted);border-top:none;border-left:none;border-right:none}.fui-form-field--fill.fui-form-field--focused .fui-form-field__wrapper,.fui-form-field--fill:has(input:focus) .fui-form-field__wrapper,.fui-form-field--fill:has(select:focus) .fui-form-field__wrapper{border-bottom-color:var(--fui-border-primary);border-top:none!important;border-left:none!important;border-right:none!important}.fui-form-field--fill.fui-form-field--error .fui-form-field__wrapper{border-bottom-color:var(--fui-border-error);border-top:none;border-left:none;border-right:none}.fui-form-field__input textarea{min-height:5rem;resize:vertical;padding:var(--fui-spacing-4) 0;line-height:1.4}.fui-form-field__input select{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:var(--fui-spacing-9)}.fui-form-field__input select::-ms-expand{display:none}.fui-form-field__input select:disabled{cursor:not-allowed}.fui-form-field__input select option{padding:var(--fui-spacing-2);background-color:var(--fui-bg-default);color:var(--fui-text-primary)}.fui-form-field:has(select:focus) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-primary)!important;background-color:var(--fui-bg-default);position:relative;box-shadow:0 0 0 4px var(--fui-primary-20)}.fui-form-field:has(select:focus) .fui-form-field__prefix,.fui-form-field:has(select:focus) .fui-form-field__suffix{color:var(--fui-primary-fg)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], hideRequiredMarker: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideRequiredMarker", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FUI_FORM_FIELD_CONTROL), { isSignal: true }] }], _prefixes: [{
                 type: ContentChildren,
                 args: [FuiPrefixDirective, { descendants: true }]