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

@raintonic/formaui 0.9.0 → 0.9.2

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 (83) hide show

package/fesm2022/raintonic-formaui-components-accordion.mjs CHANGED Viewed

@@ -120,7 +120,7 @@ class FuiExpansionPanelComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiExpansionPanelComponent, isStandalone: true, selector: "fui-expansion-panel", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideToggle: { classPropertyName: "hideToggle", publicName: "hideToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", expandedChange: "expandedChange", afterExpand: "afterExpand", afterCollapse: "afterCollapse" }, host: { properties: { "class.fui-expansion-panel--expanded": "_expanded()", "class.fui-expansion-panel--disabled": "disabled()", "class.fui-expansion-panel--animating": "_animating()" }, classAttribute: "fui-expansion-panel" }, ngImport: i0, template: "<div\r\n  class=\"fui-expansion-panel__header\"\r\n  (click)=\"toggle()\"\r\n  (keydown.enter)=\"toggle()\"\r\n  (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n  role=\"button\"\r\n  [attr.aria-expanded]=\"_expanded()\"\r\n  [attr.aria-controls]=\"_contentId\"\r\n  [attr.id]=\"_headerId\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n>\r\n  <span class=\"fui-expansion-panel__leading-icon\">\r\n    <ng-content select=\"[panelIcon]\"></ng-content>\r\n  </span>\r\n  <div class=\"fui-expansion-panel__header-content\">\r\n    <ng-content select=\"[panelTitle]\"></ng-content>\r\n    <ng-content select=\"[panelDescription]\"></ng-content>\r\n  </div>\r\n  @if (!hideToggle()) {\r\n    <fui-icon\r\n      class=\"fui-expansion-panel__toggle-icon\"\r\n      [class.fui-expansion-panel__toggle-icon--expanded]=\"_expanded()\"\r\n      name=\"caret-down\"\r\n      size=\"sm\"\r\n    ></fui-icon>\r\n  }\r\n</div>\r\n\r\n<div\r\n  class=\"fui-expansion-panel__body\"\r\n  [attr.id]=\"_contentId\"\r\n  [attr.aria-labelledby]=\"_headerId\"\r\n  role=\"region\"\r\n  [class.fui-expansion-panel__body--expanded]=\"_expanded()\"\r\n  (transitionend)=\"_onBodyTransitionEnd($event)\"\r\n>\r\n  <div class=\"fui-expansion-panel__body-inner\">\r\n    @if (_expanded() || _hasBeenOpened()) {\r\n      <ng-content></ng-content>\r\n    }\r\n  </div>\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-expansion-panel{display:block;background-color:var(--fui-bg-default, var(--fui-bg-default));border-bottom:1px solid var(--fui-border-default)}.fui-expansion-panel:first-child{border-top-left-radius:var(--fui-radius-sm);border-top-right-radius:var(--fui-radius-sm)}.fui-expansion-panel:last-child{border-bottom:none;border-bottom-left-radius:var(--fui-radius-sm);border-bottom-right-radius:var(--fui-radius-sm)}.fui-expansion-panel__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-spacing-7, 1rem) var(--fui-spacing-9, 1.5rem);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--fui-font-sans);font-size:var(--fui-text-md);font-weight:var(--fui-weight-medium, 500);color:var(--fui-text-primary);background:transparent;border:none;outline:none;transition-property:background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-expansion-panel__header:hover{background-color:var(--fui-bg-subtle, rgba(0, 0, 0, .04))}.fui-expansion-panel__header:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-expansion-panel__header-content{display:flex;flex-direction:column;flex:1;min-width:0;gap:var(--fui-spacing-2, .25rem)}.fui-expansion-panel__header-content [panelTitle]{font-weight:var(--fui-weight-medium, 500);color:var(--fui-text-primary)}.fui-expansion-panel__header-content [panelDescription]{font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular, 400);color:var(--fui-text-secondary)}.fui-expansion-panel__leading-icon{display:contents}.fui-expansion-panel__leading-icon:has(*){display:inline-flex;align-items:center;flex-shrink:0;margin-right:var(--fui-spacing-6, .75rem);color:var(--fui-text-secondary)}.fui-expansion-panel__toggle-icon{flex-shrink:0;margin-left:var(--fui-spacing-7, 1rem);color:var(--fui-text-secondary);transition-property:transform;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-expansion-panel__toggle-icon--expanded{transform:rotate(180deg)}.fui-expansion-panel__body{display:grid;grid-template-rows:0fr;transition-property:grid-template-rows;transition-duration:var(--fui-duration-moderate);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-expansion-panel__body--expanded{grid-template-rows:1fr}.fui-expansion-panel__body-inner{overflow:hidden;padding:0 var(--fui-spacing-9, 1.5rem);font-family:var(--fui-font-sans);font-size:var(--fui-text-base);color:var(--fui-text-primary);transition-property:padding;transition-duration:var(--fui-duration-moderate);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-expansion-panel__body--expanded .fui-expansion-panel__body-inner{padding-bottom:var(--fui-spacing-7, 1rem)}.fui-expansion-panel--expanded .fui-expansion-panel__header{font-weight:var(--fui-weight-semibold, 600)}.fui-expansion-panel--disabled{opacity:var(--fui-state-disabled-opacity, .5)}.fui-expansion-panel--disabled .fui-expansion-panel__header{cursor:not-allowed;pointer-events:none}.fui-accordion--flat .fui-expansion-panel{border-bottom:none;background-color:transparent;border-radius:0}.fui-accordion--flat .fui-expansion-panel__header,.fui-accordion--flat .fui-expansion-panel__body-inner{padding-left:0;padding-right:0}@media(prefers-reduced-motion:reduce){.fui-expansion-panel__toggle-icon,.fui-expansion-panel__body,.fui-expansion-panel__header{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: FuiExpansionPanelComponent, isStandalone: true, selector: "fui-expansion-panel", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideToggle: { classPropertyName: "hideToggle", publicName: "hideToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", expandedChange: "expandedChange", afterExpand: "afterExpand", afterCollapse: "afterCollapse" }, host: { properties: { "class.fui-expansion-panel--expanded": "_expanded()", "class.fui-expansion-panel--disabled": "disabled()", "class.fui-expansion-panel--animating": "_animating()" }, classAttribute: "fui-expansion-panel" }, ngImport: i0, template: "<div\r\n  class=\"fui-expansion-panel__header\"\r\n  (click)=\"toggle()\"\r\n  (keydown.enter)=\"toggle()\"\r\n  (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n  role=\"button\"\r\n  [attr.aria-expanded]=\"_expanded()\"\r\n  [attr.aria-controls]=\"_contentId\"\r\n  [attr.id]=\"_headerId\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n>\r\n  <span class=\"fui-expansion-panel__leading-icon\">\r\n    <ng-content select=\"[panelIcon]\"></ng-content>\r\n  </span>\r\n  <div class=\"fui-expansion-panel__header-content\">\r\n    <ng-content select=\"[panelTitle]\"></ng-content>\r\n    <ng-content select=\"[panelDescription]\"></ng-content>\r\n  </div>\r\n  @if (!hideToggle()) {\r\n    <fui-icon\r\n      class=\"fui-expansion-panel__toggle-icon\"\r\n      [class.fui-expansion-panel__toggle-icon--expanded]=\"_expanded()\"\r\n      name=\"caret-down\"\r\n      size=\"sm\"\r\n    ></fui-icon>\r\n  }\r\n</div>\r\n\r\n<div\r\n  class=\"fui-expansion-panel__body\"\r\n  [attr.id]=\"_contentId\"\r\n  [attr.aria-labelledby]=\"_headerId\"\r\n  role=\"region\"\r\n  [class.fui-expansion-panel__body--expanded]=\"_expanded()\"\r\n  (transitionend)=\"_onBodyTransitionEnd($event)\"\r\n>\r\n  <div class=\"fui-expansion-panel__body-inner\">\r\n    @if (_expanded() || _hasBeenOpened()) {\r\n      <ng-content></ng-content>\r\n    }\r\n  </div>\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-expansion-panel{display:block;background-color:var(--fui-bg-default, var(--fui-bg-default));border-bottom:var(--fui-border-width-sm) solid var(--fui-border-default)}.fui-expansion-panel:first-child{border-top-left-radius:var(--fui-radius-sm);border-top-right-radius:var(--fui-radius-sm)}.fui-expansion-panel:last-child{border-bottom:none;border-bottom-left-radius:var(--fui-radius-sm);border-bottom-right-radius:var(--fui-radius-sm)}.fui-expansion-panel__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-spacing-7, 1rem) var(--fui-spacing-9, 1.5rem);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--fui-font-sans);font-size:var(--fui-text-md);font-weight:var(--fui-weight-medium, 500);color:var(--fui-text-primary);background:transparent;border:none;outline:none;transition-property:background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-expansion-panel__header:hover{background-color:var(--fui-bg-subtle, rgba(0, 0, 0, .04))}.fui-expansion-panel__header:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-expansion-panel__header-content{display:flex;flex-direction:column;flex:1;min-width:0;gap:var(--fui-spacing-2, .25rem)}.fui-expansion-panel__header-content [panelTitle]{font-weight:var(--fui-weight-medium, 500);color:var(--fui-text-primary)}.fui-expansion-panel__header-content [panelDescription]{font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular, 400);color:var(--fui-text-secondary)}.fui-expansion-panel__leading-icon{display:contents}.fui-expansion-panel__leading-icon:has(*){display:inline-flex;align-items:center;flex-shrink:0;margin-right:var(--fui-spacing-6, .75rem);color:var(--fui-text-secondary)}.fui-expansion-panel__toggle-icon{flex-shrink:0;margin-left:var(--fui-spacing-7, 1rem);color:var(--fui-text-secondary);transition-property:transform;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-expansion-panel__toggle-icon--expanded{transform:rotate(180deg)}.fui-expansion-panel__body{display:grid;grid-template-rows:0fr;transition-property:grid-template-rows;transition-duration:var(--fui-duration-moderate);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-expansion-panel__body--expanded{grid-template-rows:1fr}.fui-expansion-panel__body-inner{overflow:hidden;padding:0 var(--fui-spacing-9, 1.5rem);font-family:var(--fui-font-sans);font-size:var(--fui-text-base);color:var(--fui-text-primary);transition-property:padding;transition-duration:var(--fui-duration-moderate);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-expansion-panel__body--expanded .fui-expansion-panel__body-inner{padding-bottom:var(--fui-spacing-7, 1rem)}.fui-expansion-panel--expanded .fui-expansion-panel__header{font-weight:var(--fui-weight-semibold, 600)}.fui-expansion-panel--disabled{opacity:var(--fui-state-disabled-opacity, .5)}.fui-expansion-panel--disabled .fui-expansion-panel__header{cursor:not-allowed;pointer-events:none}.fui-accordion--flat .fui-expansion-panel{border-bottom:none;background-color:transparent;border-radius:var(--fui-radius-none)}.fui-accordion--flat .fui-expansion-panel__header,.fui-accordion--flat .fui-expansion-panel__body-inner{padding-left:0;padding-right:0}@media(prefers-reduced-motion:reduce){.fui-expansion-panel__toggle-icon,.fui-expansion-panel__body,.fui-expansion-panel__header{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: FuiExpansionPanelComponent, decorators: [{
             type: Component,
@@ -129,7 +129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         '[class.fui-expansion-panel--expanded]': '_expanded()',
                         '[class.fui-expansion-panel--disabled]': 'disabled()',
                         '[class.fui-expansion-panel--animating]': '_animating()',
-                    }, template: "<div\r\n  class=\"fui-expansion-panel__header\"\r\n  (click)=\"toggle()\"\r\n  (keydown.enter)=\"toggle()\"\r\n  (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n  role=\"button\"\r\n  [attr.aria-expanded]=\"_expanded()\"\r\n  [attr.aria-controls]=\"_contentId\"\r\n  [attr.id]=\"_headerId\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n>\r\n  <span class=\"fui-expansion-panel__leading-icon\">\r\n    <ng-content select=\"[panelIcon]\"></ng-content>\r\n  </span>\r\n  <div class=\"fui-expansion-panel__header-content\">\r\n    <ng-content select=\"[panelTitle]\"></ng-content>\r\n    <ng-content select=\"[panelDescription]\"></ng-content>\r\n  </div>\r\n  @if (!hideToggle()) {\r\n    <fui-icon\r\n      class=\"fui-expansion-panel__toggle-icon\"\r\n      [class.fui-expansion-panel__toggle-icon--expanded]=\"_expanded()\"\r\n      name=\"caret-down\"\r\n      size=\"sm\"\r\n    ></fui-icon>\r\n  }\r\n</div>\r\n\r\n<div\r\n  class=\"fui-expansion-panel__body\"\r\n  [attr.id]=\"_contentId\"\r\n  [attr.aria-labelledby]=\"_headerId\"\r\n  role=\"region\"\r\n  [class.fui-expansion-panel__body--expanded]=\"_expanded()\"\r\n  (transitionend)=\"_onBodyTransitionEnd($event)\"\r\n>\r\n  <div class=\"fui-expansion-panel__body-inner\">\r\n    @if (_expanded() || _hasBeenOpened()) {\r\n      <ng-content></ng-content>\r\n    }\r\n  </div>\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-expansion-panel{display:block;background-color:var(--fui-bg-default, var(--fui-bg-default));border-bottom:1px solid var(--fui-border-default)}.fui-expansion-panel:first-child{border-top-left-radius:var(--fui-radius-sm);border-top-right-radius:var(--fui-radius-sm)}.fui-expansion-panel:last-child{border-bottom:none;border-bottom-left-radius:var(--fui-radius-sm);border-bottom-right-radius:var(--fui-radius-sm)}.fui-expansion-panel__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-spacing-7, 1rem) var(--fui-spacing-9, 1.5rem);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--fui-font-sans);font-size:var(--fui-text-md);font-weight:var(--fui-weight-medium, 500);color:var(--fui-text-primary);background:transparent;border:none;outline:none;transition-property:background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-expansion-panel__header:hover{background-color:var(--fui-bg-subtle, rgba(0, 0, 0, .04))}.fui-expansion-panel__header:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-expansion-panel__header-content{display:flex;flex-direction:column;flex:1;min-width:0;gap:var(--fui-spacing-2, .25rem)}.fui-expansion-panel__header-content [panelTitle]{font-weight:var(--fui-weight-medium, 500);color:var(--fui-text-primary)}.fui-expansion-panel__header-content [panelDescription]{font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular, 400);color:var(--fui-text-secondary)}.fui-expansion-panel__leading-icon{display:contents}.fui-expansion-panel__leading-icon:has(*){display:inline-flex;align-items:center;flex-shrink:0;margin-right:var(--fui-spacing-6, .75rem);color:var(--fui-text-secondary)}.fui-expansion-panel__toggle-icon{flex-shrink:0;margin-left:var(--fui-spacing-7, 1rem);color:var(--fui-text-secondary);transition-property:transform;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-expansion-panel__toggle-icon--expanded{transform:rotate(180deg)}.fui-expansion-panel__body{display:grid;grid-template-rows:0fr;transition-property:grid-template-rows;transition-duration:var(--fui-duration-moderate);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-expansion-panel__body--expanded{grid-template-rows:1fr}.fui-expansion-panel__body-inner{overflow:hidden;padding:0 var(--fui-spacing-9, 1.5rem);font-family:var(--fui-font-sans);font-size:var(--fui-text-base);color:var(--fui-text-primary);transition-property:padding;transition-duration:var(--fui-duration-moderate);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-expansion-panel__body--expanded .fui-expansion-panel__body-inner{padding-bottom:var(--fui-spacing-7, 1rem)}.fui-expansion-panel--expanded .fui-expansion-panel__header{font-weight:var(--fui-weight-semibold, 600)}.fui-expansion-panel--disabled{opacity:var(--fui-state-disabled-opacity, .5)}.fui-expansion-panel--disabled .fui-expansion-panel__header{cursor:not-allowed;pointer-events:none}.fui-accordion--flat .fui-expansion-panel{border-bottom:none;background-color:transparent;border-radius:0}.fui-accordion--flat .fui-expansion-panel__header,.fui-accordion--flat .fui-expansion-panel__body-inner{padding-left:0;padding-right:0}@media(prefers-reduced-motion:reduce){.fui-expansion-panel__toggle-icon,.fui-expansion-panel__body,.fui-expansion-panel__header{transition:none}}\n"] }]
+                    }, template: "<div\r\n  class=\"fui-expansion-panel__header\"\r\n  (click)=\"toggle()\"\r\n  (keydown.enter)=\"toggle()\"\r\n  (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n  role=\"button\"\r\n  [attr.aria-expanded]=\"_expanded()\"\r\n  [attr.aria-controls]=\"_contentId\"\r\n  [attr.id]=\"_headerId\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n>\r\n  <span class=\"fui-expansion-panel__leading-icon\">\r\n    <ng-content select=\"[panelIcon]\"></ng-content>\r\n  </span>\r\n  <div class=\"fui-expansion-panel__header-content\">\r\n    <ng-content select=\"[panelTitle]\"></ng-content>\r\n    <ng-content select=\"[panelDescription]\"></ng-content>\r\n  </div>\r\n  @if (!hideToggle()) {\r\n    <fui-icon\r\n      class=\"fui-expansion-panel__toggle-icon\"\r\n      [class.fui-expansion-panel__toggle-icon--expanded]=\"_expanded()\"\r\n      name=\"caret-down\"\r\n      size=\"sm\"\r\n    ></fui-icon>\r\n  }\r\n</div>\r\n\r\n<div\r\n  class=\"fui-expansion-panel__body\"\r\n  [attr.id]=\"_contentId\"\r\n  [attr.aria-labelledby]=\"_headerId\"\r\n  role=\"region\"\r\n  [class.fui-expansion-panel__body--expanded]=\"_expanded()\"\r\n  (transitionend)=\"_onBodyTransitionEnd($event)\"\r\n>\r\n  <div class=\"fui-expansion-panel__body-inner\">\r\n    @if (_expanded() || _hasBeenOpened()) {\r\n      <ng-content></ng-content>\r\n    }\r\n  </div>\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-expansion-panel{display:block;background-color:var(--fui-bg-default, var(--fui-bg-default));border-bottom:var(--fui-border-width-sm) solid var(--fui-border-default)}.fui-expansion-panel:first-child{border-top-left-radius:var(--fui-radius-sm);border-top-right-radius:var(--fui-radius-sm)}.fui-expansion-panel:last-child{border-bottom:none;border-bottom-left-radius:var(--fui-radius-sm);border-bottom-right-radius:var(--fui-radius-sm)}.fui-expansion-panel__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-spacing-7, 1rem) var(--fui-spacing-9, 1.5rem);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--fui-font-sans);font-size:var(--fui-text-md);font-weight:var(--fui-weight-medium, 500);color:var(--fui-text-primary);background:transparent;border:none;outline:none;transition-property:background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-expansion-panel__header:hover{background-color:var(--fui-bg-subtle, rgba(0, 0, 0, .04))}.fui-expansion-panel__header:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-expansion-panel__header-content{display:flex;flex-direction:column;flex:1;min-width:0;gap:var(--fui-spacing-2, .25rem)}.fui-expansion-panel__header-content [panelTitle]{font-weight:var(--fui-weight-medium, 500);color:var(--fui-text-primary)}.fui-expansion-panel__header-content [panelDescription]{font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular, 400);color:var(--fui-text-secondary)}.fui-expansion-panel__leading-icon{display:contents}.fui-expansion-panel__leading-icon:has(*){display:inline-flex;align-items:center;flex-shrink:0;margin-right:var(--fui-spacing-6, .75rem);color:var(--fui-text-secondary)}.fui-expansion-panel__toggle-icon{flex-shrink:0;margin-left:var(--fui-spacing-7, 1rem);color:var(--fui-text-secondary);transition-property:transform;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-expansion-panel__toggle-icon--expanded{transform:rotate(180deg)}.fui-expansion-panel__body{display:grid;grid-template-rows:0fr;transition-property:grid-template-rows;transition-duration:var(--fui-duration-moderate);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-expansion-panel__body--expanded{grid-template-rows:1fr}.fui-expansion-panel__body-inner{overflow:hidden;padding:0 var(--fui-spacing-9, 1.5rem);font-family:var(--fui-font-sans);font-size:var(--fui-text-base);color:var(--fui-text-primary);transition-property:padding;transition-duration:var(--fui-duration-moderate);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-expansion-panel__body--expanded .fui-expansion-panel__body-inner{padding-bottom:var(--fui-spacing-7, 1rem)}.fui-expansion-panel--expanded .fui-expansion-panel__header{font-weight:var(--fui-weight-semibold, 600)}.fui-expansion-panel--disabled{opacity:var(--fui-state-disabled-opacity, .5)}.fui-expansion-panel--disabled .fui-expansion-panel__header{cursor:not-allowed;pointer-events:none}.fui-accordion--flat .fui-expansion-panel{border-bottom:none;background-color:transparent;border-radius:var(--fui-radius-none)}.fui-accordion--flat .fui-expansion-panel__header,.fui-accordion--flat .fui-expansion-panel__body-inner{padding-left:0;padding-right:0}@media(prefers-reduced-motion:reduce){.fui-expansion-panel__toggle-icon,.fui-expansion-panel__body,.fui-expansion-panel__header{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hideToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideToggle", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], afterExpand: [{ type: i0.Output, args: ["afterExpand"] }], afterCollapse: [{ type: i0.Output, args: ["afterCollapse"] }] } });
 /**
@@ -202,14 +202,14 @@ class FuiAccordionComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.6", type: FuiAccordionComponent, isStandalone: true, selector: "fui-accordion", inputs: { multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.fui-accordion--flat": "displayMode() === \"flat\"" }, classAttribute: "fui-accordion" }, providers: [{ provide: FUI_ACCORDION, useExisting: FuiAccordionComponent }], queries: [{ propertyName: "panels", predicate: FuiExpansionPanelComponent, isSignal: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".fui-accordion{display:block;border-radius:var(--fui-radius-sm)}.fui-accordion:not(.fui-accordion--flat){border:1px solid var(--fui-border-default)}.fui-accordion--flat{border:none;border-radius:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.6", type: FuiAccordionComponent, isStandalone: true, selector: "fui-accordion", inputs: { multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.fui-accordion--flat": "displayMode() === \"flat\"" }, classAttribute: "fui-accordion" }, providers: [{ provide: FUI_ACCORDION, useExisting: FuiAccordionComponent }], queries: [{ propertyName: "panels", predicate: FuiExpansionPanelComponent, isSignal: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".fui-accordion{display:block;border-radius:var(--fui-radius-sm)}.fui-accordion:not(.fui-accordion--flat){border:var(--fui-border-width-sm) solid var(--fui-border-default)}.fui-accordion--flat{border:none;border-radius:var(--fui-radius-none)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAccordionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fui-accordion', standalone: true, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'fui-accordion',
                         '[class.fui-accordion--flat]': 'displayMode() === "flat"',
-                    }, providers: [{ provide: FUI_ACCORDION, useExisting: FuiAccordionComponent }], styles: [".fui-accordion{display:block;border-radius:var(--fui-radius-sm)}.fui-accordion:not(.fui-accordion--flat){border:1px solid var(--fui-border-default)}.fui-accordion--flat{border:none;border-radius:0}\n"] }]
+                    }, providers: [{ provide: FUI_ACCORDION, useExisting: FuiAccordionComponent }], styles: [".fui-accordion{display:block;border-radius:var(--fui-radius-sm)}.fui-accordion:not(.fui-accordion--flat){border:var(--fui-border-width-sm) solid var(--fui-border-default)}.fui-accordion--flat{border:none;border-radius:var(--fui-radius-none)}\n"] }]
         }], propDecorators: { multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FuiExpansionPanelComponent), { isSignal: true }] }] } });
 /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"raintonic-formaui-components-accordion.mjs","sources":["../../../lib/components/accordion/accordion.types.ts","../../../lib/components/accordion/expansion-panel.component.ts","../../../lib/components/accordion/expansion-panel.component.html","../../../lib/components/accordion/accordion.component.ts","../../../lib/components/accordion/raintonic-formaui-components-accordion.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\r\n\r\nexport type AccordionDisplayMode = 'default' \| 'flat';\r\n\r\nexport interface AccordionExpandedChange {\r\n source: unknown;\r\n expanded: boolean;\r\n}\r\n\r\nexport const FUI_ACCORDION = new InjectionToken<unknown>('FUI_ACCORDION');\r\n","import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ViewEncapsulation,\r\n input,\r\n output,\r\n signal,\r\n effect,\r\n inject,\r\n booleanAttribute,\r\n WritableSignal,\r\n ElementRef,\r\n} from '@angular/core';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FUI_ACCORDION, AccordionDisplayMode } from './accordion.types';\r\n\r\nlet nextPanelId = 0;\r\n\r\n/*\r\n # ExpansionPanel Component\r\n \r\n A collapsible panel that can be used standalone or within an `fui-accordion`.\r\n * Supports lazy rendering of content (only rendered after first open).\r\n \r\n ## Usage\r\n \r\n ### Standalone\r\n * ```html\r\n * <fui-expansion-panel>\r\n * <span panelTitle>Panel Title</span>\r\n * <p>Panel content here</p>\r\n * </fui-expansion-panel>\r\n * ```\r\n \r\n ### Inside Accordion\r\n * ```html\r\n * <fui-accordion>\r\n * <fui-expansion-panel>\r\n * <span panelTitle>First</span>\r\n * Content 1\r\n * </fui-expansion-panel>\r\n * <fui-expansion-panel>\r\n * <span panelTitle>Second</span>\r\n * Content 2\r\n * </fui-expansion-panel>\r\n * </fui-accordion>\r\n * ```\r\n /\r\n@Component({\r\n selector: 'fui-expansion-panel',\r\n standalone: true,\r\n imports: [FuiIconComponent],\r\n templateUrl: './expansion-panel.component.html',\r\n styleUrls: ['./expansion-panel.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-expansion-panel',\r\n '[class.fui-expansion-panel--expanded]': '_expanded()',\r\n '[class.fui-expansion-panel--disabled]': 'disabled()',\r\n '[class.fui-expansion-panel--animating]': '_animating()',\r\n },\r\n})\r\nexport class FuiExpansionPanelComponent {\r\n // Inputs\r\n readonly expanded = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n readonly hideToggle = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n\r\n // Outputs\r\n readonly opened = output();\r\n readonly closed = output();\r\n readonly expandedChange = output<boolean>();\r\n readonly afterExpand = output();\r\n readonly afterCollapse = output();\r\n\r\n // Internal state\r\n readonly _expanded: WritableSignal<boolean> = signal(false);\r\n readonly _animating: WritableSignal<boolean> = signal(false);\r\n readonly _hasBeenOpened: WritableSignal<boolean> = signal(false);\r\n\r\n // ARIA IDs\r\n private readonly _panelId = nextPanelId++;\r\n readonly _headerId = `fui-expansion-panel-header-${this._panelId}`;\r\n readonly _contentId = `fui-expansion-panel-content-${this._panelId}`;\r\n\r\n // Parent accordion (optional)\r\n private readonly _accordion = inject(FUI_ACCORDION, { optional: true }) as {\r\n multi: () => boolean;\r\n displayMode: () => AccordionDisplayMode;\r\n _closeOtherPanels: (panel: FuiExpansionPanelComponent) => void;\r\n } \| null;\r\n\r\n private readonly _elementRef = inject(ElementRef);\r\n\r\n constructor() {\r\n // Sync expanded input to internal state\r\n effect(() => {\r\n const inputExpanded = this.expanded();\r\n this._expanded.set(inputExpanded);\r\n if (inputExpanded) {\r\n this._hasBeenOpened.set(true);\r\n }\r\n });\r\n }\r\n\r\n /* Toggles the expanded state of the panel. /\r\n toggle(): void {\r\n if (this.disabled()) {\r\n return;\r\n }\r\n if (this._expanded()) {\r\n this.close();\r\n } else {\r\n this.open();\r\n }\r\n }\r\n\r\n /* Opens the panel. /\r\n open(): void {\r\n if (this.disabled() \|\| this._expanded()) {\r\n return;\r\n }\r\n\r\n this._hasBeenOpened.set(true);\r\n this._animating.set(true);\r\n this._expanded.set(true);\r\n this.expandedChange.emit(true);\r\n this.opened.emit();\r\n\r\n // Notify parent accordion to close other panels if in single mode\r\n if (this._accordion) {\r\n this._accordion._closeOtherPanels(this);\r\n }\r\n }\r\n\r\n /* Closes the panel. /\r\n close(): void {\r\n if (this.disabled() \|\| !this._expanded()) {\r\n return;\r\n }\r\n\r\n this._animating.set(true);\r\n this._expanded.set(false);\r\n this.expandedChange.emit(false);\r\n this.closed.emit();\r\n }\r\n\r\n /* Called when the body transition ends. /\r\n _onBodyTransitionEnd(event: TransitionEvent): void {\r\n // The body now animates `grid-template-rows`. Keep `max-height` accepted\r\n // as well so any test or call site still pinned to the old property name\r\n // continues to work without flagging spurious failures.\r\n if (event.propertyName === 'grid-template-rows' \|\| event.propertyName === 'max-height') {\r\n this._animating.set(false);\r\n if (this._expanded()) {\r\n this.afterExpand.emit();\r\n } else {\r\n this.afterCollapse.emit();\r\n }\r\n }\r\n }\r\n}\r\n","<div\r\n class=\"fui-expansion-panel__header\"\r\n (click)=\"toggle()\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n role=\"button\"\r\n [attr.aria-expanded]=\"_expanded()\"\r\n [attr.aria-controls]=\"_contentId\"\r\n [attr.id]=\"_headerId\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n>\r\n <span class=\"fui-expansion-panel__leading-icon\">\r\n <ng-content select=\"[panelIcon]\"></ng-content>\r\n </span>\r\n <div class=\"fui-expansion-panel__header-content\">\r\n <ng-content select=\"[panelTitle]\"></ng-content>\r\n <ng-content select=\"[panelDescription]\"></ng-content>\r\n </div>\r\n @if (!hideToggle()) {\r\n <fui-icon\r\n class=\"fui-expansion-panel__toggle-icon\"\r\n [class.fui-expansion-panel__toggle-icon--expanded]=\"_expanded()\"\r\n name=\"caret-down\"\r\n size=\"sm\"\r\n ></fui-icon>\r\n }\r\n</div>\r\n\r\n<div\r\n class=\"fui-expansion-panel__body\"\r\n [attr.id]=\"_contentId\"\r\n [attr.aria-labelledby]=\"_headerId\"\r\n role=\"region\"\r\n [class.fui-expansion-panel__body--expanded]=\"_expanded()\"\r\n (transitionend)=\"_onBodyTransitionEnd($event)\"\r\n>\r\n <div class=\"fui-expansion-panel__body-inner\">\r\n @if (_expanded() \|\| _hasBeenOpened()) {\r\n <ng-content></ng-content>\r\n }\r\n </div>\r\n</div>\r\n","import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ViewEncapsulation,\r\n input,\r\n contentChildren,\r\n booleanAttribute,\r\n} from '@angular/core';\r\nimport { FuiExpansionPanelComponent } from './expansion-panel.component';\r\nimport { AccordionDisplayMode, FUI_ACCORDION } from './accordion.types';\r\n\r\n/\r\n # Accordion Component\r\n \r\n Groups multiple `fui-expansion-panel` components.\r\n * In single mode (default), only one panel can be expanded at a time.\r\n * In multi mode, multiple panels can be expanded simultaneously.\r\n \r\n ## Usage\r\n \r\n ### Single mode (default)\r\n * ```html\r\n * <fui-accordion>\r\n * <fui-expansion-panel>\r\n * <span panelTitle>Panel 1</span>\r\n * Content 1\r\n * </fui-expansion-panel>\r\n * <fui-expansion-panel>\r\n * <span panelTitle>Panel 2</span>\r\n * Content 2\r\n * </fui-expansion-panel>\r\n * </fui-accordion>\r\n * ```\r\n \r\n ### Multi mode\r\n * ```html\r\n * <fui-accordion [multi]=\"true\">\r\n * ...\r\n * </fui-accordion>\r\n * ```\r\n \r\n ### Flat display mode\r\n * ```html\r\n * <fui-accordion displayMode=\"flat\">\r\n * ...\r\n * </fui-accordion>\r\n * ```\r\n /\r\n@Component({\r\n selector: 'fui-accordion',\r\n standalone: true,\r\n template: '<ng-content></ng-content>',\r\n styleUrls: ['./accordion.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-accordion',\r\n '[class.fui-accordion--flat]': 'displayMode() === \"flat\"',\r\n },\r\n providers: [{ provide: FUI_ACCORDION, useExisting: FuiAccordionComponent }],\r\n})\r\nexport class FuiAccordionComponent {\r\n // Inputs\r\n readonly multi = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n readonly displayMode = input<AccordionDisplayMode>('default');\r\n\r\n // Content children\r\n readonly panels = contentChildren(FuiExpansionPanelComponent);\r\n\r\n /* Opens all panels. Only effective in multi mode. /\r\n openAll(): void {\r\n if (!this.multi()) {\r\n return;\r\n }\r\n this.panels().forEach((panel) => {\r\n panel.open();\r\n });\r\n }\r\n\r\n /* Closes all panels. /\r\n closeAll(): void {\r\n this.panels().forEach((panel) => {\r\n panel.close();\r\n });\r\n }\r\n\r\n /* Closes all panels except the specified one. Used internally by panels. /\r\n _closeOtherPanels(openedPanel: FuiExpansionPanelComponent): void {\r\n if (this.multi()) {\r\n return;\r\n }\r\n this.panels().forEach((panel) => {\r\n if (panel !== openedPanel) {\r\n panel.close();\r\n }\r\n });\r\n }\r\n}\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;MASa,aAAa,GAAG,IAAI,cAAc,CAAU,eAAe;;ACOxE,IAAI,WAAW,GAAG,CAAC;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BG;MAgBU,0BAA0B,CAAA;;IAE5B,QAAQ,GAAG,KAAK,CAAmB,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IAC1E,QAAQ,GAAG,KAAK,CAAmB,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IAC1E,UAAU,GAAG,KAAK,CAAmB,KAAK,kFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;IAG5E,MAAM,GAAG,MAAM,EAAE;IACjB,MAAM,GAAG,MAAM,EAAE;IACjB,cAAc,GAAG,MAAM,EAAW;IAClC,WAAW,GAAG,MAAM,EAAE;IACtB,aAAa,GAAG,MAAM,EAAE;;AAGxB,IAAA,SAAS,GAA4B,MAAM,CAAC,KAAK,gFAAC;AAClD,IAAA,UAAU,GAA4B,MAAM,CAAC,KAAK,iFAAC;AACnD,IAAA,cAAc,GAA4B,MAAM,CAAC,KAAK,qFAAC;;IAG/C,QAAQ,GAAG,WAAW,EAAE;AAChC,IAAA,SAAS,GAAG,CAAA,2BAAA,EAA8B,IAAI,CAAC,QAAQ,EAAE;AACzD,IAAA,UAAU,GAAG,CAAA,4BAAA,EAA+B,IAAI,CAAC,QAAQ,EAAE;;IAGnD,UAAU,GAAG,MAAM,CAAC,aAAa,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAI9D;AAES,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;AAEjD,IAAA,WAAA,GAAA;;QAEE,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,EAAE;AACrC,YAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC;YACjC,IAAI,aAAa,EAAE;AACjB,gBAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC;YAC/B;AACF,QAAA,CAAC,CAAC;IACJ;;IAGA,MAAM,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACnB;QACF;AACA,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;YACpB,IAAI,CAAC,KAAK,EAAE;QACd;aAAO;YACL,IAAI,CAAC,IAAI,EAAE;QACb;IACF;;IAGA,IAAI,GAAA;QACF,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;YACvC;QACF;AAEA,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC;AAC7B,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC;AACzB,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;AACxB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;AAC9B,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;;AAGlB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,YAAA,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC;QACzC;IACF;;IAGA,KAAK,GAAA;QACH,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE;YACxC;QACF;AAEA,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC;AACzB,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;AACzB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;AAC/B,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;IACpB;;AAGA,IAAA,oBAAoB,CAAC,KAAsB,EAAA;;;;AAIzC,QAAA,IAAI,KAAK,CAAC,YAAY,KAAK,oBAAoB,IAAI,KAAK,CAAC,YAAY,KAAK,YAAY,EAAE;AACtF,YAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC;AAC1B,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;AACpB,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;YACzB;iBAAO;AACL,gBAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;YAC3B;QACF;IACF;uGAlGW,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAA1B,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,QAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,qCAAA,EAAA,aAAA,EAAA,qCAAA,EAAA,YAAA,EAAA,sCAAA,EAAA,cAAA,EAAA,EAAA,cAAA,EAAA,qBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC/DvC,63CA2CA,EAAA,MAAA,EAAA,CAAA,y4KAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDQY,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;;2FAYf,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBAftC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,qBAAqB,EAAA,UAAA,EACnB,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,qBAAqB;AAC5B,wBAAA,uCAAuC,EAAE,aAAa;AACtD,wBAAA,uCAAuC,EAAE,YAAY;AACrD,wBAAA,wCAAwC,EAAE,cAAc;AACzD,qBAAA,EAAA,QAAA,EAAA,63CAAA,EAAA,MAAA,EAAA,CAAA,y4KAAA,CAAA,EAAA;;;AElDH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCG;MAcU,qBAAqB,CAAA;;IAEvB,KAAK,GAAG,KAAK,CAAmB,KAAK,6EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AACvE,IAAA,WAAW,GAAG,KAAK,CAAuB,SAAS,kFAAC;;AAGpD,IAAA,MAAM,GAAG,eAAe,CAAC,0BAA0B,6EAAC;;IAG7D,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE;YACjB;QACF;QACA,IAAI,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;YAC9B,KAAK,CAAC,IAAI,EAAE;AACd,QAAA,CAAC,CAAC;IACJ;;IAGA,QAAQ,GAAA;QACN,IAAI,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;YAC9B,KAAK,CAAC,KAAK,EAAE;AACf,QAAA,CAAC,CAAC;IACJ;;AAGA,IAAA,iBAAiB,CAAC,WAAuC,EAAA;AACvD,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE,EAAE;YAChB;QACF;QACA,IAAI,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AAC9B,YAAA,IAAI,KAAK,KAAK,WAAW,EAAE;gBACzB,KAAK,CAAC,KAAK,EAAE;YACf;AACF,QAAA,CAAC,CAAC;IACJ;uGAnCW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,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,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,2BAAA,EAAA,4BAAA,EAAA,EAAA,cAAA,EAAA,eAAA,EAAA,EAAA,SAAA,EAFrB,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,qBAAqB,EAAE,CAAC,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,QAAA,EAAA,SAAA,EAQzC,0BAA0B,6CAhBlD,2BAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,yMAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAU1B,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAbjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,EAAA,UAAA,EACb,IAAI,EAAA,QAAA,EACN,2BAA2B,EAAA,eAAA,EAEpB,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,eAAe;AACtB,wBAAA,6BAA6B,EAAE,0BAA0B;qBAC1D,EAAA,SAAA,EACU,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAA,qBAAuB,EAAE,CAAC,EAAA,MAAA,EAAA,CAAA,yMAAA,CAAA,EAAA;8RAQzC,0BAA0B,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;ACnE9D;;AAEG;;;;"}
1	+ {"version":3,"file":"raintonic-formaui-components-accordion.mjs","sources":["../../../lib/components/accordion/accordion.types.ts","../../../lib/components/accordion/expansion-panel.component.ts","../../../lib/components/accordion/expansion-panel.component.html","../../../lib/components/accordion/accordion.component.ts","../../../lib/components/accordion/raintonic-formaui-components-accordion.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\r\n\r\nexport type AccordionDisplayMode = 'default' \| 'flat';\r\n\r\nexport interface AccordionExpandedChange {\r\n source: unknown;\r\n expanded: boolean;\r\n}\r\n\r\nexport const FUI_ACCORDION = new InjectionToken<unknown>('FUI_ACCORDION');\r\n","import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ViewEncapsulation,\r\n input,\r\n output,\r\n signal,\r\n effect,\r\n inject,\r\n booleanAttribute,\r\n WritableSignal,\r\n ElementRef,\r\n} from '@angular/core';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FUI_ACCORDION, AccordionDisplayMode } from './accordion.types';\r\n\r\nlet nextPanelId = 0;\r\n\r\n/*\r\n # ExpansionPanel Component\r\n \r\n A collapsible panel that can be used standalone or within an `fui-accordion`.\r\n * Supports lazy rendering of content (only rendered after first open).\r\n \r\n ## Usage\r\n \r\n ### Standalone\r\n * ```html\r\n * <fui-expansion-panel>\r\n * <span panelTitle>Panel Title</span>\r\n * <p>Panel content here</p>\r\n * </fui-expansion-panel>\r\n * ```\r\n \r\n ### Inside Accordion\r\n * ```html\r\n * <fui-accordion>\r\n * <fui-expansion-panel>\r\n * <span panelTitle>First</span>\r\n * Content 1\r\n * </fui-expansion-panel>\r\n * <fui-expansion-panel>\r\n * <span panelTitle>Second</span>\r\n * Content 2\r\n * </fui-expansion-panel>\r\n * </fui-accordion>\r\n * ```\r\n /\r\n@Component({\r\n selector: 'fui-expansion-panel',\r\n standalone: true,\r\n imports: [FuiIconComponent],\r\n templateUrl: './expansion-panel.component.html',\r\n styleUrls: ['./expansion-panel.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-expansion-panel',\r\n '[class.fui-expansion-panel--expanded]': '_expanded()',\r\n '[class.fui-expansion-panel--disabled]': 'disabled()',\r\n '[class.fui-expansion-panel--animating]': '_animating()',\r\n },\r\n})\r\nexport class FuiExpansionPanelComponent {\r\n // Inputs\r\n readonly expanded = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n readonly hideToggle = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n\r\n // Outputs\r\n readonly opened = output();\r\n readonly closed = output();\r\n readonly expandedChange = output<boolean>();\r\n readonly afterExpand = output();\r\n readonly afterCollapse = output();\r\n\r\n // Internal state\r\n readonly _expanded: WritableSignal<boolean> = signal(false);\r\n readonly _animating: WritableSignal<boolean> = signal(false);\r\n readonly _hasBeenOpened: WritableSignal<boolean> = signal(false);\r\n\r\n // ARIA IDs\r\n private readonly _panelId = nextPanelId++;\r\n readonly _headerId = `fui-expansion-panel-header-${this._panelId}`;\r\n readonly _contentId = `fui-expansion-panel-content-${this._panelId}`;\r\n\r\n // Parent accordion (optional)\r\n private readonly _accordion = inject(FUI_ACCORDION, { optional: true }) as {\r\n multi: () => boolean;\r\n displayMode: () => AccordionDisplayMode;\r\n _closeOtherPanels: (panel: FuiExpansionPanelComponent) => void;\r\n } \| null;\r\n\r\n private readonly _elementRef = inject(ElementRef);\r\n\r\n constructor() {\r\n // Sync expanded input to internal state\r\n effect(() => {\r\n const inputExpanded = this.expanded();\r\n this._expanded.set(inputExpanded);\r\n if (inputExpanded) {\r\n this._hasBeenOpened.set(true);\r\n }\r\n });\r\n }\r\n\r\n /* Toggles the expanded state of the panel. /\r\n toggle(): void {\r\n if (this.disabled()) {\r\n return;\r\n }\r\n if (this._expanded()) {\r\n this.close();\r\n } else {\r\n this.open();\r\n }\r\n }\r\n\r\n /* Opens the panel. /\r\n open(): void {\r\n if (this.disabled() \|\| this._expanded()) {\r\n return;\r\n }\r\n\r\n this._hasBeenOpened.set(true);\r\n this._animating.set(true);\r\n this._expanded.set(true);\r\n this.expandedChange.emit(true);\r\n this.opened.emit();\r\n\r\n // Notify parent accordion to close other panels if in single mode\r\n if (this._accordion) {\r\n this._accordion._closeOtherPanels(this);\r\n }\r\n }\r\n\r\n /* Closes the panel. /\r\n close(): void {\r\n if (this.disabled() \|\| !this._expanded()) {\r\n return;\r\n }\r\n\r\n this._animating.set(true);\r\n this._expanded.set(false);\r\n this.expandedChange.emit(false);\r\n this.closed.emit();\r\n }\r\n\r\n /* Called when the body transition ends. /\r\n _onBodyTransitionEnd(event: TransitionEvent): void {\r\n // The body now animates `grid-template-rows`. Keep `max-height` accepted\r\n // as well so any test or call site still pinned to the old property name\r\n // continues to work without flagging spurious failures.\r\n if (event.propertyName === 'grid-template-rows' \|\| event.propertyName === 'max-height') {\r\n this._animating.set(false);\r\n if (this._expanded()) {\r\n this.afterExpand.emit();\r\n } else {\r\n this.afterCollapse.emit();\r\n }\r\n }\r\n }\r\n}\r\n","<div\r\n class=\"fui-expansion-panel__header\"\r\n (click)=\"toggle()\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n role=\"button\"\r\n [attr.aria-expanded]=\"_expanded()\"\r\n [attr.aria-controls]=\"_contentId\"\r\n [attr.id]=\"_headerId\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n>\r\n <span class=\"fui-expansion-panel__leading-icon\">\r\n <ng-content select=\"[panelIcon]\"></ng-content>\r\n </span>\r\n <div class=\"fui-expansion-panel__header-content\">\r\n <ng-content select=\"[panelTitle]\"></ng-content>\r\n <ng-content select=\"[panelDescription]\"></ng-content>\r\n </div>\r\n @if (!hideToggle()) {\r\n <fui-icon\r\n class=\"fui-expansion-panel__toggle-icon\"\r\n [class.fui-expansion-panel__toggle-icon--expanded]=\"_expanded()\"\r\n name=\"caret-down\"\r\n size=\"sm\"\r\n ></fui-icon>\r\n }\r\n</div>\r\n\r\n<div\r\n class=\"fui-expansion-panel__body\"\r\n [attr.id]=\"_contentId\"\r\n [attr.aria-labelledby]=\"_headerId\"\r\n role=\"region\"\r\n [class.fui-expansion-panel__body--expanded]=\"_expanded()\"\r\n (transitionend)=\"_onBodyTransitionEnd($event)\"\r\n>\r\n <div class=\"fui-expansion-panel__body-inner\">\r\n @if (_expanded() \|\| _hasBeenOpened()) {\r\n <ng-content></ng-content>\r\n }\r\n </div>\r\n</div>\r\n","import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ViewEncapsulation,\r\n input,\r\n contentChildren,\r\n booleanAttribute,\r\n} from '@angular/core';\r\nimport { FuiExpansionPanelComponent } from './expansion-panel.component';\r\nimport { AccordionDisplayMode, FUI_ACCORDION } from './accordion.types';\r\n\r\n/\r\n # Accordion Component\r\n \r\n Groups multiple `fui-expansion-panel` components.\r\n * In single mode (default), only one panel can be expanded at a time.\r\n * In multi mode, multiple panels can be expanded simultaneously.\r\n \r\n ## Usage\r\n \r\n ### Single mode (default)\r\n * ```html\r\n * <fui-accordion>\r\n * <fui-expansion-panel>\r\n * <span panelTitle>Panel 1</span>\r\n * Content 1\r\n * </fui-expansion-panel>\r\n * <fui-expansion-panel>\r\n * <span panelTitle>Panel 2</span>\r\n * Content 2\r\n * </fui-expansion-panel>\r\n * </fui-accordion>\r\n * ```\r\n \r\n ### Multi mode\r\n * ```html\r\n * <fui-accordion [multi]=\"true\">\r\n * ...\r\n * </fui-accordion>\r\n * ```\r\n \r\n ### Flat display mode\r\n * ```html\r\n * <fui-accordion displayMode=\"flat\">\r\n * ...\r\n * </fui-accordion>\r\n * ```\r\n /\r\n@Component({\r\n selector: 'fui-accordion',\r\n standalone: true,\r\n template: '<ng-content></ng-content>',\r\n styleUrls: ['./accordion.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-accordion',\r\n '[class.fui-accordion--flat]': 'displayMode() === \"flat\"',\r\n },\r\n providers: [{ provide: FUI_ACCORDION, useExisting: FuiAccordionComponent }],\r\n})\r\nexport class FuiAccordionComponent {\r\n // Inputs\r\n readonly multi = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n readonly displayMode = input<AccordionDisplayMode>('default');\r\n\r\n // Content children\r\n readonly panels = contentChildren(FuiExpansionPanelComponent);\r\n\r\n /* Opens all panels. Only effective in multi mode. /\r\n openAll(): void {\r\n if (!this.multi()) {\r\n return;\r\n }\r\n this.panels().forEach((panel) => {\r\n panel.open();\r\n });\r\n }\r\n\r\n /* Closes all panels. /\r\n closeAll(): void {\r\n this.panels().forEach((panel) => {\r\n panel.close();\r\n });\r\n }\r\n\r\n /* Closes all panels except the specified one. Used internally by panels. /\r\n _closeOtherPanels(openedPanel: FuiExpansionPanelComponent): void {\r\n if (this.multi()) {\r\n return;\r\n }\r\n this.panels().forEach((panel) => {\r\n if (panel !== openedPanel) {\r\n panel.close();\r\n }\r\n });\r\n }\r\n}\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;MASa,aAAa,GAAG,IAAI,cAAc,CAAU,eAAe;;ACOxE,IAAI,WAAW,GAAG,CAAC;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BG;MAgBU,0BAA0B,CAAA;;IAE5B,QAAQ,GAAG,KAAK,CAAmB,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IAC1E,QAAQ,GAAG,KAAK,CAAmB,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IAC1E,UAAU,GAAG,KAAK,CAAmB,KAAK,kFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;IAG5E,MAAM,GAAG,MAAM,EAAE;IACjB,MAAM,GAAG,MAAM,EAAE;IACjB,cAAc,GAAG,MAAM,EAAW;IAClC,WAAW,GAAG,MAAM,EAAE;IACtB,aAAa,GAAG,MAAM,EAAE;;AAGxB,IAAA,SAAS,GAA4B,MAAM,CAAC,KAAK,gFAAC;AAClD,IAAA,UAAU,GAA4B,MAAM,CAAC,KAAK,iFAAC;AACnD,IAAA,cAAc,GAA4B,MAAM,CAAC,KAAK,qFAAC;;IAG/C,QAAQ,GAAG,WAAW,EAAE;AAChC,IAAA,SAAS,GAAG,CAAA,2BAAA,EAA8B,IAAI,CAAC,QAAQ,EAAE;AACzD,IAAA,UAAU,GAAG,CAAA,4BAAA,EAA+B,IAAI,CAAC,QAAQ,EAAE;;IAGnD,UAAU,GAAG,MAAM,CAAC,aAAa,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAI9D;AAES,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;AAEjD,IAAA,WAAA,GAAA;;QAEE,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,EAAE;AACrC,YAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC;YACjC,IAAI,aAAa,EAAE;AACjB,gBAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC;YAC/B;AACF,QAAA,CAAC,CAAC;IACJ;;IAGA,MAAM,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACnB;QACF;AACA,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;YACpB,IAAI,CAAC,KAAK,EAAE;QACd;aAAO;YACL,IAAI,CAAC,IAAI,EAAE;QACb;IACF;;IAGA,IAAI,GAAA;QACF,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;YACvC;QACF;AAEA,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC;AAC7B,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC;AACzB,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;AACxB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;AAC9B,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;;AAGlB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,YAAA,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC;QACzC;IACF;;IAGA,KAAK,GAAA;QACH,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE;YACxC;QACF;AAEA,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC;AACzB,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;AACzB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;AAC/B,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;IACpB;;AAGA,IAAA,oBAAoB,CAAC,KAAsB,EAAA;;;;AAIzC,QAAA,IAAI,KAAK,CAAC,YAAY,KAAK,oBAAoB,IAAI,KAAK,CAAC,YAAY,KAAK,YAAY,EAAE;AACtF,YAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC;AAC1B,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;AACpB,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;YACzB;iBAAO;AACL,gBAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;YAC3B;QACF;IACF;uGAlGW,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAA1B,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,QAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,qCAAA,EAAA,aAAA,EAAA,qCAAA,EAAA,YAAA,EAAA,sCAAA,EAAA,cAAA,EAAA,EAAA,cAAA,EAAA,qBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC/DvC,63CA2CA,EAAA,MAAA,EAAA,CAAA,q7KAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDQY,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;;2FAYf,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBAftC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,qBAAqB,EAAA,UAAA,EACnB,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,qBAAqB;AAC5B,wBAAA,uCAAuC,EAAE,aAAa;AACtD,wBAAA,uCAAuC,EAAE,YAAY;AACrD,wBAAA,wCAAwC,EAAE,cAAc;AACzD,qBAAA,EAAA,QAAA,EAAA,63CAAA,EAAA,MAAA,EAAA,CAAA,q7KAAA,CAAA,EAAA;;;AElDH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCG;MAcU,qBAAqB,CAAA;;IAEvB,KAAK,GAAG,KAAK,CAAmB,KAAK,6EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AACvE,IAAA,WAAW,GAAG,KAAK,CAAuB,SAAS,kFAAC;;AAGpD,IAAA,MAAM,GAAG,eAAe,CAAC,0BAA0B,6EAAC;;IAG7D,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE;YACjB;QACF;QACA,IAAI,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;YAC9B,KAAK,CAAC,IAAI,EAAE;AACd,QAAA,CAAC,CAAC;IACJ;;IAGA,QAAQ,GAAA;QACN,IAAI,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;YAC9B,KAAK,CAAC,KAAK,EAAE;AACf,QAAA,CAAC,CAAC;IACJ;;AAGA,IAAA,iBAAiB,CAAC,WAAuC,EAAA;AACvD,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE,EAAE;YAChB;QACF;QACA,IAAI,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AAC9B,YAAA,IAAI,KAAK,KAAK,WAAW,EAAE;gBACzB,KAAK,CAAC,KAAK,EAAE;YACf;AACF,QAAA,CAAC,CAAC;IACJ;uGAnCW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,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,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,2BAAA,EAAA,4BAAA,EAAA,EAAA,cAAA,EAAA,eAAA,EAAA,EAAA,SAAA,EAFrB,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,qBAAqB,EAAE,CAAC,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,QAAA,EAAA,SAAA,EAQzC,0BAA0B,6CAhBlD,2BAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,qPAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAU1B,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAbjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,EAAA,UAAA,EACb,IAAI,EAAA,QAAA,EACN,2BAA2B,EAAA,eAAA,EAEpB,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,eAAe;AACtB,wBAAA,6BAA6B,EAAE,0BAA0B;qBAC1D,EAAA,SAAA,EACU,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAA,qBAAuB,EAAE,CAAC,EAAA,MAAA,EAAA,CAAA,qPAAA,CAAA,EAAA;8RAQzC,0BAA0B,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;ACnE9D;;AAEG;;;;"}

package/fesm2022/raintonic-formaui-components-alert.mjs CHANGED Viewed

@@ -174,7 +174,7 @@ class FuiAlertComponent {
         this.closed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiAlertComponent, isStandalone: true, selector: "fui-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class": "computedClasses()", "attr.role": "computedRole()", "attr.aria-live": "computedAriaLive()", "attr.aria-atomic": "\"true\"" } }, ngImport: i0, template: "@if (progress() !== 0) {\r\n  <fui-progressbar\r\n    [mode]=\"progress() === -1 ? 'indeterminate' : 'determinate'\"\r\n    [value]=\"progress() > 0 ? progress() : undefined\"\r\n    [color]=\"progressColor()\"\r\n  ></fui-progressbar>\r\n}\r\n\r\n<div class=\"fui-alert__container\">\r\n  <fui-icon class=\"fui-alert__icon\" weight=\"fill\" [name]=\"computedIcon()\" size=\"md\" />\r\n\r\n  <div class=\"fui-alert__content\">\r\n    <div class=\"fui-alert__title fui-text-sm fui-font-medium\">{{ title() }}</div>\r\n    @if (description()) {\r\n      <div class=\"fui-alert__description fui-text-xs\">{{ description() }}</div>\r\n    }\r\n    <ng-content />\r\n  </div>\r\n\r\n  @if (closeable()) {\r\n    <button type=\"button\" class=\"fui-alert__close\" (click)=\"onClose()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n      <fui-icon name=\"x\" size=\"sm\" />\r\n    </button>\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-progressbar{position:absolute;top:0;left:0}:host.fui-alert{--fui-alert-bg: transparent;--fui-alert-color: inherit;--fui-alert-border-color: transparent;--fui-alert-border-radius: var(--fui-radius-sm);--fui-alert-padding: var(--fui-spacing-6);--fui-alert-gap: var(--fui-spacing-6);--fui-alert-close-padding: var(--fui-spacing-2);contain:layout style;position:relative;overflow:hidden;display:flex;font-family:var(--fui-font-sans);background-color:var(--fui-alert-bg);color:var(--fui-alert-color);border:1px solid var(--fui-alert-border-color);border-radius:var(--fui-alert-border-radius);padding:var(--fui-alert-padding);transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}:host.fui-alert .fui-alert__container{display:flex;align-items:flex-start;gap:var(--fui-alert-gap);width:100%}:host.fui-alert .fui-alert__content{flex:1;min-width:0;font-size:var(--fui-text-sm)}:host.fui-alert .fui-alert__title{margin:0;font-weight:var(--fui-weight-medium)}:host.fui-alert .fui-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;border:none;padding:var(--fui-spacing-2);margin:-2px -2px 0 0;cursor:pointer;border-radius:var(--fui-radius-sm);transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}:host.fui-alert .fui-alert__close:hover{background-color:#0000001a}:host.fui-alert .fui-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}:host.fui-alert .fui-alert__close:active{transform:scale(.95)}:host.fui-alert--primary{--fui-alert-bg: var(--fui-primary-20);--fui-alert-color: var(--fui-primary-70)}:host.fui-alert--primary .fui-alert__icon{color:var(--fui-primary-70)}:host.fui-alert--success{--fui-alert-bg: var(--fui-success-20);--fui-alert-color: var(--fui-success-100)}:host.fui-alert--success .fui-alert__icon{color:var(--fui-success-100)}:host.fui-alert--info{--fui-alert-bg: var(--fui-info-10);--fui-alert-color: var(--fui-info-100)}:host.fui-alert--info .fui-alert__icon{color:var(--fui-info-100)}:host.fui-alert--warning{--fui-alert-bg: var(--fui-warning-20);--fui-alert-color: var(--fui-warning-100)}:host.fui-alert--warning .fui-alert__icon{color:var(--fui-warning-100)}:host.fui-alert--error{--fui-alert-bg: var(--fui-error-20);--fui-alert-color: var(--fui-error-100)}:host.fui-alert--error .fui-alert__icon{color:var(--fui-error-100)}:host.fui-alert--generic{--fui-alert-bg: var(--fui-neutral-20);--fui-alert-color: var(--fui-text-primary)}:host.fui-alert--generic .fui-alert__icon{color:var(--fui-primary-70)}@media(prefers-reduced-motion:reduce){:host.fui-alert{transition:none}:host.fui-alert .fui-alert__close{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiProgressbarComponent, selector: "fui-progressbar", inputs: ["mode", "value", "bufferValue", "color", "aria-label", "aria-labelledby"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiAlertComponent, isStandalone: true, selector: "fui-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class": "computedClasses()", "attr.role": "computedRole()", "attr.aria-live": "computedAriaLive()", "attr.aria-atomic": "\"true\"" } }, ngImport: i0, template: "@if (progress() !== 0) {\r\n  <fui-progressbar\r\n    [mode]=\"progress() === -1 ? 'indeterminate' : 'determinate'\"\r\n    [value]=\"progress() > 0 ? progress() : undefined\"\r\n    [color]=\"progressColor()\"\r\n  ></fui-progressbar>\r\n}\r\n\r\n<div class=\"fui-alert__container\">\r\n  <fui-icon class=\"fui-alert__icon\" weight=\"fill\" [name]=\"computedIcon()\" size=\"md\" />\r\n\r\n  <div class=\"fui-alert__content\">\r\n    <div class=\"fui-alert__title fui-text-sm fui-font-medium\">{{ title() }}</div>\r\n    @if (description()) {\r\n      <div class=\"fui-alert__description fui-text-xs\">{{ description() }}</div>\r\n    }\r\n    <ng-content />\r\n  </div>\r\n\r\n  @if (closeable()) {\r\n    <button type=\"button\" class=\"fui-alert__close\" (click)=\"onClose()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n      <fui-icon name=\"x\" size=\"sm\" />\r\n    </button>\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-progressbar{position:absolute;top:0;left:0}:host.fui-alert{--fui-alert-bg: transparent;--fui-alert-color: inherit;--fui-alert-border-color: transparent;--fui-alert-border-radius: var(--fui-radius-sm);--fui-alert-padding: var(--fui-spacing-6);--fui-alert-gap: var(--fui-spacing-6);--fui-alert-close-padding: var(--fui-spacing-2);contain:layout style;position:relative;overflow:hidden;display:flex;font-family:var(--fui-font-sans);background-color:var(--fui-alert-bg);color:var(--fui-alert-color);border:var(--fui-border-width-sm) solid var(--fui-alert-border-color);border-radius:var(--fui-alert-border-radius);padding:var(--fui-alert-padding);transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}:host.fui-alert .fui-alert__container{display:flex;align-items:flex-start;gap:var(--fui-alert-gap);width:100%}:host.fui-alert .fui-alert__content{flex:1;min-width:0;font-size:var(--fui-text-sm)}:host.fui-alert .fui-alert__title{margin:0;font-weight:var(--fui-weight-medium)}:host.fui-alert .fui-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;border:none;padding:var(--fui-spacing-2);margin:-2px -2px 0 0;cursor:pointer;border-radius:var(--fui-radius-sm);transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}:host.fui-alert .fui-alert__close:hover{background-color:#0000001a}:host.fui-alert .fui-alert__close:focus-visible{outline:var(--fui-state-focus-ring-width) solid currentColor;outline-offset:var(--fui-state-focus-ring-offset)}:host.fui-alert .fui-alert__close:active{transform:scale(.95)}:host.fui-alert--primary{--fui-alert-bg: var(--fui-primary-20);--fui-alert-color: var(--fui-primary-70)}:host.fui-alert--primary .fui-alert__icon{color:var(--fui-primary-70)}:host.fui-alert--success{--fui-alert-bg: var(--fui-success-20);--fui-alert-color: var(--fui-success-100)}:host.fui-alert--success .fui-alert__icon{color:var(--fui-success-100)}:host.fui-alert--info{--fui-alert-bg: var(--fui-info-10);--fui-alert-color: var(--fui-info-100)}:host.fui-alert--info .fui-alert__icon{color:var(--fui-info-100)}:host.fui-alert--warning{--fui-alert-bg: var(--fui-warning-20);--fui-alert-color: var(--fui-warning-100)}:host.fui-alert--warning .fui-alert__icon{color:var(--fui-warning-100)}:host.fui-alert--error{--fui-alert-bg: var(--fui-error-20);--fui-alert-color: var(--fui-error-100)}:host.fui-alert--error .fui-alert__icon{color:var(--fui-error-100)}:host.fui-alert--generic{--fui-alert-bg: var(--fui-neutral-20);--fui-alert-color: var(--fui-text-primary)}:host.fui-alert--generic .fui-alert__icon{color:var(--fui-primary-70)}@media(prefers-reduced-motion:reduce){:host.fui-alert{transition:none}:host.fui-alert .fui-alert__close{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiProgressbarComponent, selector: "fui-progressbar", inputs: ["mode", "value", "bufferValue", "color", "aria-label", "aria-labelledby"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAlertComponent, decorators: [{
             type: Component,
@@ -183,7 +183,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         '[attr.role]': 'computedRole()',
                         '[attr.aria-live]': 'computedAriaLive()',
                         '[attr.aria-atomic]': '"true"',
-                    }, template: "@if (progress() !== 0) {\r\n  <fui-progressbar\r\n    [mode]=\"progress() === -1 ? 'indeterminate' : 'determinate'\"\r\n    [value]=\"progress() > 0 ? progress() : undefined\"\r\n    [color]=\"progressColor()\"\r\n  ></fui-progressbar>\r\n}\r\n\r\n<div class=\"fui-alert__container\">\r\n  <fui-icon class=\"fui-alert__icon\" weight=\"fill\" [name]=\"computedIcon()\" size=\"md\" />\r\n\r\n  <div class=\"fui-alert__content\">\r\n    <div class=\"fui-alert__title fui-text-sm fui-font-medium\">{{ title() }}</div>\r\n    @if (description()) {\r\n      <div class=\"fui-alert__description fui-text-xs\">{{ description() }}</div>\r\n    }\r\n    <ng-content />\r\n  </div>\r\n\r\n  @if (closeable()) {\r\n    <button type=\"button\" class=\"fui-alert__close\" (click)=\"onClose()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n      <fui-icon name=\"x\" size=\"sm\" />\r\n    </button>\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-progressbar{position:absolute;top:0;left:0}:host.fui-alert{--fui-alert-bg: transparent;--fui-alert-color: inherit;--fui-alert-border-color: transparent;--fui-alert-border-radius: var(--fui-radius-sm);--fui-alert-padding: var(--fui-spacing-6);--fui-alert-gap: var(--fui-spacing-6);--fui-alert-close-padding: var(--fui-spacing-2);contain:layout style;position:relative;overflow:hidden;display:flex;font-family:var(--fui-font-sans);background-color:var(--fui-alert-bg);color:var(--fui-alert-color);border:1px solid var(--fui-alert-border-color);border-radius:var(--fui-alert-border-radius);padding:var(--fui-alert-padding);transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}:host.fui-alert .fui-alert__container{display:flex;align-items:flex-start;gap:var(--fui-alert-gap);width:100%}:host.fui-alert .fui-alert__content{flex:1;min-width:0;font-size:var(--fui-text-sm)}:host.fui-alert .fui-alert__title{margin:0;font-weight:var(--fui-weight-medium)}:host.fui-alert .fui-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;border:none;padding:var(--fui-spacing-2);margin:-2px -2px 0 0;cursor:pointer;border-radius:var(--fui-radius-sm);transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}:host.fui-alert .fui-alert__close:hover{background-color:#0000001a}:host.fui-alert .fui-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}:host.fui-alert .fui-alert__close:active{transform:scale(.95)}:host.fui-alert--primary{--fui-alert-bg: var(--fui-primary-20);--fui-alert-color: var(--fui-primary-70)}:host.fui-alert--primary .fui-alert__icon{color:var(--fui-primary-70)}:host.fui-alert--success{--fui-alert-bg: var(--fui-success-20);--fui-alert-color: var(--fui-success-100)}:host.fui-alert--success .fui-alert__icon{color:var(--fui-success-100)}:host.fui-alert--info{--fui-alert-bg: var(--fui-info-10);--fui-alert-color: var(--fui-info-100)}:host.fui-alert--info .fui-alert__icon{color:var(--fui-info-100)}:host.fui-alert--warning{--fui-alert-bg: var(--fui-warning-20);--fui-alert-color: var(--fui-warning-100)}:host.fui-alert--warning .fui-alert__icon{color:var(--fui-warning-100)}:host.fui-alert--error{--fui-alert-bg: var(--fui-error-20);--fui-alert-color: var(--fui-error-100)}:host.fui-alert--error .fui-alert__icon{color:var(--fui-error-100)}:host.fui-alert--generic{--fui-alert-bg: var(--fui-neutral-20);--fui-alert-color: var(--fui-text-primary)}:host.fui-alert--generic .fui-alert__icon{color:var(--fui-primary-70)}@media(prefers-reduced-motion:reduce){:host.fui-alert{transition:none}:host.fui-alert .fui-alert__close{transition:none}}\n"] }]
+                    }, template: "@if (progress() !== 0) {\r\n  <fui-progressbar\r\n    [mode]=\"progress() === -1 ? 'indeterminate' : 'determinate'\"\r\n    [value]=\"progress() > 0 ? progress() : undefined\"\r\n    [color]=\"progressColor()\"\r\n  ></fui-progressbar>\r\n}\r\n\r\n<div class=\"fui-alert__container\">\r\n  <fui-icon class=\"fui-alert__icon\" weight=\"fill\" [name]=\"computedIcon()\" size=\"md\" />\r\n\r\n  <div class=\"fui-alert__content\">\r\n    <div class=\"fui-alert__title fui-text-sm fui-font-medium\">{{ title() }}</div>\r\n    @if (description()) {\r\n      <div class=\"fui-alert__description fui-text-xs\">{{ description() }}</div>\r\n    }\r\n    <ng-content />\r\n  </div>\r\n\r\n  @if (closeable()) {\r\n    <button type=\"button\" class=\"fui-alert__close\" (click)=\"onClose()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n      <fui-icon name=\"x\" size=\"sm\" />\r\n    </button>\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-progressbar{position:absolute;top:0;left:0}:host.fui-alert{--fui-alert-bg: transparent;--fui-alert-color: inherit;--fui-alert-border-color: transparent;--fui-alert-border-radius: var(--fui-radius-sm);--fui-alert-padding: var(--fui-spacing-6);--fui-alert-gap: var(--fui-spacing-6);--fui-alert-close-padding: var(--fui-spacing-2);contain:layout style;position:relative;overflow:hidden;display:flex;font-family:var(--fui-font-sans);background-color:var(--fui-alert-bg);color:var(--fui-alert-color);border:var(--fui-border-width-sm) solid var(--fui-alert-border-color);border-radius:var(--fui-alert-border-radius);padding:var(--fui-alert-padding);transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}:host.fui-alert .fui-alert__container{display:flex;align-items:flex-start;gap:var(--fui-alert-gap);width:100%}:host.fui-alert .fui-alert__content{flex:1;min-width:0;font-size:var(--fui-text-sm)}:host.fui-alert .fui-alert__title{margin:0;font-weight:var(--fui-weight-medium)}:host.fui-alert .fui-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;border:none;padding:var(--fui-spacing-2);margin:-2px -2px 0 0;cursor:pointer;border-radius:var(--fui-radius-sm);transition-property:all;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}:host.fui-alert .fui-alert__close:hover{background-color:#0000001a}:host.fui-alert .fui-alert__close:focus-visible{outline:var(--fui-state-focus-ring-width) solid currentColor;outline-offset:var(--fui-state-focus-ring-offset)}:host.fui-alert .fui-alert__close:active{transform:scale(.95)}:host.fui-alert--primary{--fui-alert-bg: var(--fui-primary-20);--fui-alert-color: var(--fui-primary-70)}:host.fui-alert--primary .fui-alert__icon{color:var(--fui-primary-70)}:host.fui-alert--success{--fui-alert-bg: var(--fui-success-20);--fui-alert-color: var(--fui-success-100)}:host.fui-alert--success .fui-alert__icon{color:var(--fui-success-100)}:host.fui-alert--info{--fui-alert-bg: var(--fui-info-10);--fui-alert-color: var(--fui-info-100)}:host.fui-alert--info .fui-alert__icon{color:var(--fui-info-100)}:host.fui-alert--warning{--fui-alert-bg: var(--fui-warning-20);--fui-alert-color: var(--fui-warning-100)}:host.fui-alert--warning .fui-alert__icon{color:var(--fui-warning-100)}:host.fui-alert--error{--fui-alert-bg: var(--fui-error-20);--fui-alert-color: var(--fui-error-100)}:host.fui-alert--error .fui-alert__icon{color:var(--fui-error-100)}:host.fui-alert--generic{--fui-alert-bg: var(--fui-neutral-20);--fui-alert-color: var(--fui-text-primary)}:host.fui-alert--generic .fui-alert__icon{color:var(--fui-primary-70)}@media(prefers-reduced-motion:reduce){:host.fui-alert{transition:none}:host.fui-alert .fui-alert__close{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"raintonic-formaui-components-alert.mjs","sources":["../../../lib/components/alert/alert.types.ts","../../../lib/components/alert/alert.intl.ts","../../../lib/components/alert/alert.component.ts","../../../lib/components/alert/alert.component.html","../../../lib/components/alert/raintonic-formaui-components-alert.ts"],"sourcesContent":["export type FuiAlertVariant = 'primary' \| 'success' \| 'info' \| 'warning' \| 'error' \| 'generic';\r\n\r\nexport const FUI_ALERT_VARIANTS: readonly FuiAlertVariant[] = [\r\n 'primary',\r\n 'success',\r\n 'info',\r\n 'warning',\r\n 'error',\r\n 'generic',\r\n] as const;\r\n\r\n/*\r\n Configuration for notification display\r\n /\r\nexport interface FuiNotificationConfig {\r\n /\r\n Notification variant (determines color scheme and icon)\r\n /\r\n variant: FuiAlertVariant;\r\n\r\n /\r\n Title of the notification\r\n /\r\n title: string;\r\n\r\n /\r\n Description/message of the notification\r\n /\r\n description?: string;\r\n\r\n /\r\n Duration in milliseconds before auto-dismiss (default: 5000)\r\n * Set to 0 to disable auto-dismiss\r\n /\r\n duration?: number;\r\n\r\n /\r\n Whether to show the close button (default: true)\r\n /\r\n closeable?: boolean;\r\n\r\n /\r\n Custom icon name (overrides default variant icon)\r\n /\r\n icon?: string;\r\n}\r\n\r\n/\r\n Position for notification display\r\n /\r\nexport type FuiNotificationPosition =\r\n \| 'top-left'\r\n \| 'top-center'\r\n \| 'top-right'\r\n \| 'bottom-left'\r\n \| 'bottom-center'\r\n \| 'bottom-right';\r\n\r\nexport const FUI_NOTIFICATION_POSITIONS: readonly FuiNotificationPosition[] = [\r\n 'top-left',\r\n 'top-center',\r\n 'top-right',\r\n 'bottom-left',\r\n 'bottom-center',\r\n 'bottom-right',\r\n] as const;\r\n","import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiAlertIntl extends FuiIntlBase {\r\n closeAriaLabel = 'Close alert';\r\n}\r\n","import { ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, inject, input, output, Signal } from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiAlertVariant, FUI_ALERT_VARIANTS } from './alert.types';\r\nimport { FuiProgressbarComponent, ProgressBarColor } from '@raintonic/formaui/components/progressbar';\r\nimport { FuiAlertIntl } from './alert.intl';\r\n\r\n/\r\n # FuiAlertComponent\r\n \r\n A flexible alert component for displaying informational messages, warnings, errors, and success notifications.\r\n * Can be used inline in pages or as part of the notification system.\r\n \r\n ## Features\r\n * - Multiple variants: primary, success, info, warning, error, generic\r\n * - Title and description support\r\n * - Optional close button\r\n * - Custom or default icons per variant\r\n * - Accessible with ARIA attributes\r\n \r\n ## Usage\r\n \r\n ### Basic Alert\r\n * ```html\r\n * <fui-alert\r\n * variant=\"success\"\r\n * title=\"Success!\"\r\n * description=\"Your changes have been saved.\"\r\n * ></fui-alert>\r\n * ```\r\n \r\n ### Closeable Alert\r\n * ```html\r\n * <fui-alert\r\n * variant=\"warning\"\r\n * title=\"Warning\"\r\n * description=\"Please review before continuing.\"\r\n * [closeable]=\"true\"\r\n * (closed)=\"onAlertClosed()\"\r\n * ></fui-alert>\r\n * ```\r\n \r\n ### Custom Icon\r\n * ```html\r\n * <fui-alert\r\n * variant=\"info\"\r\n * title=\"Custom Icon\"\r\n * icon=\"custom-icon-name\"\r\n * ></fui-alert>\r\n * ```\r\n /\r\n@Component({\r\n selector: 'fui-alert',\r\n standalone: true,\r\n imports: [FuiIconComponent, FuiProgressbarComponent],\r\n templateUrl: './alert.component.html',\r\n styleUrls: ['./alert.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n host: {\r\n '[class]': 'computedClasses()',\r\n '[attr.role]': 'computedRole()',\r\n '[attr.aria-live]': 'computedAriaLive()',\r\n '[attr.aria-atomic]': '\"true\"',\r\n },\r\n})\r\nexport class FuiAlertComponent {\r\n readonly intl = inject(FuiAlertIntl);\r\n private readonly _cdr = inject(ChangeDetectorRef);\r\n\r\n constructor() {\r\n this.intl.changes\r\n .pipe(takeUntilDestroyed())\r\n .subscribe(() => { this._cdr.markForCheck(); });\r\n }\r\n\r\n /\r\n Alert variant (determines color scheme and default icon)\r\n /\r\n readonly variant = input<FuiAlertVariant, FuiAlertVariant \| string>('info', {\r\n transform: (v) => ((FUI_ALERT_VARIANTS as readonly string[]).includes(v) ? (v as FuiAlertVariant) : 'info'),\r\n });\r\n\r\n /\r\n Alert title (required)\r\n /\r\n readonly title = input.required<string>();\r\n\r\n /\r\n Progress (optional)\r\n * 0 = turned off\r\n * -1 = indeterminate\r\n /\r\n readonly progress = input(0);\r\n\r\n /\r\n Alert description (optional)\r\n /\r\n readonly description = input<string \| null>(null);\r\n\r\n /\r\n Whether to show the close button\r\n /\r\n readonly closeable = input(false);\r\n\r\n /\r\n Custom icon name (overrides default variant icon)\r\n /\r\n readonly icon = input<string \| null>(null);\r\n\r\n /\r\n Emits when the close button is clicked\r\n /\r\n readonly closed = output();\r\n\r\n /\r\n Computed CSS classes for the alert\r\n /\r\n readonly computedClasses: Signal<string> = computed(() => {\r\n const classes: string[] = ['fui-alert', `fui-alert--${this.variant()}`];\r\n\r\n return classes.join(' ');\r\n });\r\n\r\n /\r\n Computed ARIA role: \"alert\" for error/warning, \"status\" for info/success/primary/generic\r\n /\r\n readonly computedRole: Signal<string> = computed(() => {\r\n const v = this.variant();\r\n return v === 'error' \|\| v === 'warning' ? 'alert' : 'status';\r\n });\r\n\r\n /\r\n Computed aria-live: \"assertive\" for errors, \"polite\" for everything else\r\n /\r\n readonly computedAriaLive: Signal<string> = computed(() => {\r\n return this.variant() === 'error' ? 'assertive' : 'polite';\r\n });\r\n\r\n /\r\n Computed icon name based on variant or custom icon\r\n /\r\n readonly computedIcon: Signal<string> = computed(() => {\r\n const icon = this.icon();\r\n if (icon) {\r\n return icon;\r\n }\r\n\r\n // Default icons for each variant\r\n const variantIcons: Record<FuiAlertVariant, string> = {\r\n primary: 'info',\r\n success: 'check-circle',\r\n info: 'info',\r\n warning: 'warning-diamond',\r\n error: 'smiley-sad',\r\n generic: 'seal-warning',\r\n };\r\n\r\n return variantIcons[this.variant()];\r\n });\r\n\r\n /\r\n Progressbar color matching the current alert variant.\r\n /\r\n readonly progressColor: Signal<ProgressBarColor> = computed(() => {\r\n const variantToColor: Record<FuiAlertVariant, ProgressBarColor> = {\r\n primary: 'primary',\r\n success: 'success',\r\n info: 'info',\r\n warning: 'warning',\r\n error: 'warn',\r\n generic: 'accent',\r\n };\r\n return variantToColor[this.variant()];\r\n });\r\n\r\n /\r\n Handle close button click\r\n /\r\n onClose(): void {\r\n this.closed.emit();\r\n }\r\n}\r\n","@if (progress() !== 0) {\r\n <fui-progressbar\r\n [mode]=\"progress() === -1 ? 'indeterminate' : 'determinate'\"\r\n [value]=\"progress() > 0 ? progress() : undefined\"\r\n [color]=\"progressColor()\"\r\n ></fui-progressbar>\r\n}\r\n\r\n<div class=\"fui-alert__container\">\r\n <fui-icon class=\"fui-alert__icon\" weight=\"fill\" [name]=\"computedIcon()\" size=\"md\" />\r\n\r\n <div class=\"fui-alert__content\">\r\n <div class=\"fui-alert__title fui-text-sm fui-font-medium\">{{ title() }}</div>\r\n @if (description()) {\r\n <div class=\"fui-alert__description fui-text-xs\">{{ description() }}</div>\r\n }\r\n <ng-content />\r\n </div>\r\n\r\n @if (closeable()) {\r\n <button type=\"button\" class=\"fui-alert__close\" (click)=\"onClose()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n <fui-icon name=\"x\" size=\"sm\" />\r\n </button>\r\n }\r\n</div>\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-alert.mjs","sources":["../../../lib/components/alert/alert.types.ts","../../../lib/components/alert/alert.intl.ts","../../../lib/components/alert/alert.component.ts","../../../lib/components/alert/alert.component.html","../../../lib/components/alert/raintonic-formaui-components-alert.ts"],"sourcesContent":["export type FuiAlertVariant = 'primary' \| 'success' \| 'info' \| 'warning' \| 'error' \| 'generic';\r\n\r\nexport const FUI_ALERT_VARIANTS: readonly FuiAlertVariant[] = [\r\n 'primary',\r\n 'success',\r\n 'info',\r\n 'warning',\r\n 'error',\r\n 'generic',\r\n] as const;\r\n\r\n/*\r\n Configuration for notification display\r\n /\r\nexport interface FuiNotificationConfig {\r\n /\r\n Notification variant (determines color scheme and icon)\r\n /\r\n variant: FuiAlertVariant;\r\n\r\n /\r\n Title of the notification\r\n /\r\n title: string;\r\n\r\n /\r\n Description/message of the notification\r\n /\r\n description?: string;\r\n\r\n /\r\n Duration in milliseconds before auto-dismiss (default: 5000)\r\n * Set to 0 to disable auto-dismiss\r\n /\r\n duration?: number;\r\n\r\n /\r\n Whether to show the close button (default: true)\r\n /\r\n closeable?: boolean;\r\n\r\n /\r\n Custom icon name (overrides default variant icon)\r\n /\r\n icon?: string;\r\n}\r\n\r\n/\r\n Position for notification display\r\n /\r\nexport type FuiNotificationPosition =\r\n \| 'top-left'\r\n \| 'top-center'\r\n \| 'top-right'\r\n \| 'bottom-left'\r\n \| 'bottom-center'\r\n \| 'bottom-right';\r\n\r\nexport const FUI_NOTIFICATION_POSITIONS: readonly FuiNotificationPosition[] = [\r\n 'top-left',\r\n 'top-center',\r\n 'top-right',\r\n 'bottom-left',\r\n 'bottom-center',\r\n 'bottom-right',\r\n] as const;\r\n","import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiAlertIntl extends FuiIntlBase {\r\n closeAriaLabel = 'Close alert';\r\n}\r\n","import { ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, inject, input, output, Signal } from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiAlertVariant, FUI_ALERT_VARIANTS } from './alert.types';\r\nimport { FuiProgressbarComponent, ProgressBarColor } from '@raintonic/formaui/components/progressbar';\r\nimport { FuiAlertIntl } from './alert.intl';\r\n\r\n/\r\n # FuiAlertComponent\r\n \r\n A flexible alert component for displaying informational messages, warnings, errors, and success notifications.\r\n * Can be used inline in pages or as part of the notification system.\r\n \r\n ## Features\r\n * - Multiple variants: primary, success, info, warning, error, generic\r\n * - Title and description support\r\n * - Optional close button\r\n * - Custom or default icons per variant\r\n * - Accessible with ARIA attributes\r\n \r\n ## Usage\r\n \r\n ### Basic Alert\r\n * ```html\r\n * <fui-alert\r\n * variant=\"success\"\r\n * title=\"Success!\"\r\n * description=\"Your changes have been saved.\"\r\n * ></fui-alert>\r\n * ```\r\n \r\n ### Closeable Alert\r\n * ```html\r\n * <fui-alert\r\n * variant=\"warning\"\r\n * title=\"Warning\"\r\n * description=\"Please review before continuing.\"\r\n * [closeable]=\"true\"\r\n * (closed)=\"onAlertClosed()\"\r\n * ></fui-alert>\r\n * ```\r\n \r\n ### Custom Icon\r\n * ```html\r\n * <fui-alert\r\n * variant=\"info\"\r\n * title=\"Custom Icon\"\r\n * icon=\"custom-icon-name\"\r\n * ></fui-alert>\r\n * ```\r\n /\r\n@Component({\r\n selector: 'fui-alert',\r\n standalone: true,\r\n imports: [FuiIconComponent, FuiProgressbarComponent],\r\n templateUrl: './alert.component.html',\r\n styleUrls: ['./alert.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n host: {\r\n '[class]': 'computedClasses()',\r\n '[attr.role]': 'computedRole()',\r\n '[attr.aria-live]': 'computedAriaLive()',\r\n '[attr.aria-atomic]': '\"true\"',\r\n },\r\n})\r\nexport class FuiAlertComponent {\r\n readonly intl = inject(FuiAlertIntl);\r\n private readonly _cdr = inject(ChangeDetectorRef);\r\n\r\n constructor() {\r\n this.intl.changes\r\n .pipe(takeUntilDestroyed())\r\n .subscribe(() => { this._cdr.markForCheck(); });\r\n }\r\n\r\n /\r\n Alert variant (determines color scheme and default icon)\r\n /\r\n readonly variant = input<FuiAlertVariant, FuiAlertVariant \| string>('info', {\r\n transform: (v) => ((FUI_ALERT_VARIANTS as readonly string[]).includes(v) ? (v as FuiAlertVariant) : 'info'),\r\n });\r\n\r\n /\r\n Alert title (required)\r\n /\r\n readonly title = input.required<string>();\r\n\r\n /\r\n Progress (optional)\r\n * 0 = turned off\r\n * -1 = indeterminate\r\n /\r\n readonly progress = input(0);\r\n\r\n /\r\n Alert description (optional)\r\n /\r\n readonly description = input<string \| null>(null);\r\n\r\n /\r\n Whether to show the close button\r\n /\r\n readonly closeable = input(false);\r\n\r\n /\r\n Custom icon name (overrides default variant icon)\r\n /\r\n readonly icon = input<string \| null>(null);\r\n\r\n /\r\n Emits when the close button is clicked\r\n /\r\n readonly closed = output();\r\n\r\n /\r\n Computed CSS classes for the alert\r\n /\r\n readonly computedClasses: Signal<string> = computed(() => {\r\n const classes: string[] = ['fui-alert', `fui-alert--${this.variant()}`];\r\n\r\n return classes.join(' ');\r\n });\r\n\r\n /\r\n Computed ARIA role: \"alert\" for error/warning, \"status\" for info/success/primary/generic\r\n /\r\n readonly computedRole: Signal<string> = computed(() => {\r\n const v = this.variant();\r\n return v === 'error' \|\| v === 'warning' ? 'alert' : 'status';\r\n });\r\n\r\n /\r\n Computed aria-live: \"assertive\" for errors, \"polite\" for everything else\r\n /\r\n readonly computedAriaLive: Signal<string> = computed(() => {\r\n return this.variant() === 'error' ? 'assertive' : 'polite';\r\n });\r\n\r\n /\r\n Computed icon name based on variant or custom icon\r\n /\r\n readonly computedIcon: Signal<string> = computed(() => {\r\n const icon = this.icon();\r\n if (icon) {\r\n return icon;\r\n }\r\n\r\n // Default icons for each variant\r\n const variantIcons: Record<FuiAlertVariant, string> = {\r\n primary: 'info',\r\n success: 'check-circle',\r\n info: 'info',\r\n warning: 'warning-diamond',\r\n error: 'smiley-sad',\r\n generic: 'seal-warning',\r\n };\r\n\r\n return variantIcons[this.variant()];\r\n });\r\n\r\n /\r\n Progressbar color matching the current alert variant.\r\n /\r\n readonly progressColor: Signal<ProgressBarColor> = computed(() => {\r\n const variantToColor: Record<FuiAlertVariant, ProgressBarColor> = {\r\n primary: 'primary',\r\n success: 'success',\r\n info: 'info',\r\n warning: 'warning',\r\n error: 'warn',\r\n generic: 'accent',\r\n };\r\n return variantToColor[this.variant()];\r\n });\r\n\r\n /\r\n Handle close button click\r\n /\r\n onClose(): void {\r\n this.closed.emit();\r\n }\r\n}\r\n","@if (progress() !== 0) {\r\n <fui-progressbar\r\n [mode]=\"progress() === -1 ? 'indeterminate' : 'determinate'\"\r\n [value]=\"progress() > 0 ? progress() : undefined\"\r\n [color]=\"progressColor()\"\r\n ></fui-progressbar>\r\n}\r\n\r\n<div class=\"fui-alert__container\">\r\n <fui-icon class=\"fui-alert__icon\" weight=\"fill\" [name]=\"computedIcon()\" size=\"md\" />\r\n\r\n <div class=\"fui-alert__content\">\r\n <div class=\"fui-alert__title fui-text-sm fui-font-medium\">{{ title() }}</div>\r\n @if (description()) {\r\n <div class=\"fui-alert__description fui-text-xs\">{{ description() }}</div>\r\n }\r\n <ng-content />\r\n </div>\r\n\r\n @if (closeable()) {\r\n <button type=\"button\" class=\"fui-alert__close\" (click)=\"onClose()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n <fui-icon name=\"x\" size=\"sm\" />\r\n </button>\r\n }\r\n</div>\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-autocomplete.mjs CHANGED Viewed

@@ -489,7 +489,7 @@ class FuiAutocompleteComponent {
                 provide: FUI_SELECT,
                 useExisting: FuiAutocompleteComponent,
             },
-        ], queries: [{ propertyName: "options", predicate: FUI_OPTION, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, static: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], hostDirectives: [{ directive: i1.FuiPopupOverlayDirective, inputs: ["positions", "positions", "panelClass", "panelClass", "backdropClass", "backdropClass", "scrollStrategy", "scrollStrategy", "minWidthFromTrigger", "minWidthFromTrigger"], outputs: ["openedChange", "openedChange", "escapeKey", "escapeKey"] }, { directive: i1.FuiFormControlSyncDirective }], ngImport: i0, template: "<!-- Trigger -->\r\n<div\r\n  #trigger\r\n  [id]=\"id\"\r\n  class=\"fui-autocomplete__trigger\"\r\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n  role=\"combobox\"\r\n  [attr.aria-haspopup]=\"'listbox'\"\r\n  [attr.aria-expanded]=\"panelOpen()\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [attr.aria-invalid]=\"errorState()\"\r\n  [attr.aria-describedby]=\"_ariaDescribedby\"\r\n  [attr.aria-required]=\"required()\"\r\n  [attr.aria-readonly]=\"readonly() ? 'true' : null\"\r\n  aria-autocomplete=\"list\"\r\n  [attr.aria-activedescendant]=\"panelOpen() ? _getActiveDescendant() : null\"\r\n  [attr.aria-controls]=\"panelOpen() ? id + '-panel' : null\"\r\n  (keydown)=\"_handleKeydown($event)\"\r\n>\r\n  <span class=\"fui-autocomplete__value\">\r\n    @if (empty()) {\r\n      <span class=\"fui-autocomplete__placeholder\">{{ placeholder() }}</span>\r\n    } @else {\r\n      <span class=\"fui-autocomplete__value-text\">{{ displayValue() }}</span>\r\n    }\r\n  </span>\r\n\r\n  @if (!readonly() && !disabled()) {\r\n    @if (!empty()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fui-autocomplete__clear\"\r\n        role=\"button\"\r\n        [attr.aria-label]=\"intl.clearSelectionAriaLabel\"\r\n        (click)=\"clear($event)\"\r\n      >\r\n        <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\r\n          <path\r\n            d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\"\r\n          />\r\n        </svg>\r\n      </button>\r\n    }\r\n\r\n    <span class=\"fui-autocomplete__arrow\" [class.fui-autocomplete__arrow--open]=\"panelOpen()\" aria-hidden=\"true\">\r\n      <fui-icon name=\"caret-down\" size=\"sm\"></fui-icon>\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!-- Live region for screen reader announcements -->\r\n<span class=\"fui-sr-only\" aria-live=\"assertive\" aria-atomic=\"true\">{{ _liveAnnouncement() }}</span>\r\n\r\n<!-- Dropdown Panel (always rendered so #panel ViewChild is always available) -->\r\n<div #panel [hidden]=\"false\" [id]=\"id + '-panel'\" class=\"fui-autocomplete__panel\">\r\n  <!-- Search Input -->\r\n  <div class=\"fui-autocomplete__search-input\">\r\n    <fui-form-field hideSubscript>\r\n      <fui-icon fuiPrefix name=\"magnifying-glass\" size=\"sm\" />\r\n      <input\r\n        #searchInput\r\n        fuiInput\r\n        type=\"text\"\r\n        [placeholder]=\"intl.searchPlaceholder\"\r\n        [value]=\"searchTerm()\"\r\n        autocomplete=\"off\"\r\n        role=\"searchbox\"\r\n        aria-label=\"Search\"\r\n        (input)=\"onSearchInput($event)\"\r\n        (keydown)=\"_handlePanelKeydown($event)\"\r\n      />\r\n    </fui-form-field>\r\n  </div>\r\n\r\n  <!-- Options List -->\r\n  <div\r\n    class=\"fui-autocomplete__options\"\r\n    role=\"listbox\"\r\n    [attr.aria-multiselectable]=\"multiple()\"\r\n    [attr.aria-label]=\"placeholder()\"\r\n  >\r\n    <ng-content></ng-content>\r\n\r\n    <!-- No results empty state when search has no matching options -->\r\n    @if (searchTerm() && _visibleOptions().length === 0) {\r\n      <div class=\"fui-autocomplete__no-results\" role=\"status\">\r\n        {{ intl.noResultsText }}\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Panel Actions (e.g., Add new option, Refresh) -->\r\n  <div class=\"fui-autocomplete__panel-actions\">\r\n    <ng-content select=\"[fuiAutocompletePanelActions]\"></ng-content>\r\n  </div>\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-autocomplete{position:relative;display:inline-block;width:100%;min-width:8rem}.fui-autocomplete__trigger{display:flex;align-items:center;width:100%;border:none;color:var(--fui-text-primary);font-family:var(--fui-font-sans);font-size:var(--fui-text-base);line-height:1.29;letter-spacing:.16px;cursor:pointer;outline:none;gap:var(--fui-spacing-2)}.fui-autocomplete__trigger[aria-disabled=true]{color:var(--fui-text-disabled);cursor:not-allowed}.fui-autocomplete__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.fui-autocomplete__placeholder{color:var(--fui-text-secondary)}.fui-autocomplete__value-text{color:var(--fui-text-primary)}.fui-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;cursor:pointer;color:var(--fui-text-secondary);flex-shrink:0;border-radius:50%}.fui-autocomplete__clear svg{width:.75rem;height:.75rem}.fui-autocomplete__clear:hover{color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-autocomplete__arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--fui-icon-xs);height:var(--fui-icon-xs);margin-left:var(--fui-spacing-2);color:var(--fui-text-secondary);pointer-events:none;transition:color var(--fui-duration-fast) var(--fui-ease-in-out),transform var(--fui-duration-fast) var(--fui-ease-in-out)}.fui-autocomplete__arrow--open{color:var(--fui-field-border-focus);transform:rotate(180deg)}.fui-autocomplete--disabled .fui-autocomplete__trigger{color:var(--fui-text-disabled);cursor:not-allowed}.fui-autocomplete--disabled .fui-autocomplete__arrow{color:var(--fui-text-disabled)}.fui-autocomplete--readonly .fui-autocomplete__trigger{background-color:transparent;min-height:unset;cursor:default;color:var(--fui-text-primary)}.fui-autocomplete .fui-autocomplete__panel{display:none}.fui-autocomplete__panel{--fui-autocomplete-panel-max-height: 24rem;--fui-autocomplete-panel-border-radius: var(--fui-radius-sm);--fui-autocomplete-panel-shadow: var(--fui-shadow-lg);--fui-autocomplete-panel-bg: var(--fui-bg-default);width:100%;background-color:var(--fui-autocomplete-panel-bg);border:1px solid var(--fui-border-default);border-radius:var(--fui-autocomplete-panel-border-radius);box-shadow:var(--fui-autocomplete-panel-shadow);max-height:var(--fui-autocomplete-panel-max-height);overflow:hidden;display:flex;flex-direction:column;transform-origin:top center;padding:0 0 var(--fui-spacing-2) 0;animation:fui-popover-enter var(--fui-duration-base) var(--fui-ease-out) both;will-change:transform,opacity}.fui-autocomplete__panel .fui-autocomplete__search-input{padding:var(--fui-spacing-1) var(--fui-spacing-3)}.fui-autocomplete__panel .fui-autocomplete__no-results{padding:var(--fui-spacing-1) var(--fui-spacing-3);font-size:var(--fui-text-md);color:var(--fui-text-disabled)}.fui-autocomplete__options{padding-top:var(--fui-spacing-2);max-height:16rem;overflow-y:auto;background-color:var(--fui-bg-default);scrollbar-width:thin;scrollbar-color:var(--fui-border-default) transparent}.fui-autocomplete__options::-webkit-scrollbar{width:6px}.fui-autocomplete__options::-webkit-scrollbar-track{background:transparent}.fui-autocomplete__options::-webkit-scrollbar-thumb{background-color:var(--fui-border-default);border-radius:3px}.fui-autocomplete__options::-webkit-scrollbar-thumb:hover{background-color:var(--fui-text-secondary)}.fui-autocomplete__panel-actions{padding:var(--fui-spacing-4) var(--fui-spacing-4) 0 var(--fui-spacing-4)}.fui-autocomplete__panel-actions:empty{display:none}.fui-autocomplete-backdrop{background:transparent}@media(prefers-contrast:high){.fui-autocomplete__trigger{border-width:2px}.fui-autocomplete__trigger:focus{outline-width:3px}.fui-autocomplete__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-autocomplete__trigger,.fui-autocomplete__arrow{transition:none}.fui-autocomplete__panel{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiFormFieldComponent, selector: "fui-form-field", inputs: ["appearance", "hideRequiredMarker", "hideSubscript"] }, { kind: "directive", type: FuiInputDirective, selector: "input[fuiInput], textarea[fuiInput], select[fuiInput]", inputs: ["type", "placeholder", "readonly", "maxlength", "minlength", "pattern", "errorStateMatcher", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: FuiPrefixDirective, selector: "[fuiPrefix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "options", predicate: FUI_OPTION, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, static: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], hostDirectives: [{ directive: i1.FuiPopupOverlayDirective, inputs: ["positions", "positions", "panelClass", "panelClass", "backdropClass", "backdropClass", "scrollStrategy", "scrollStrategy", "minWidthFromTrigger", "minWidthFromTrigger"], outputs: ["openedChange", "openedChange", "escapeKey", "escapeKey"] }, { directive: i1.FuiFormControlSyncDirective }], ngImport: i0, template: "<!-- Trigger -->\r\n<div\r\n  #trigger\r\n  [id]=\"id\"\r\n  class=\"fui-autocomplete__trigger\"\r\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n  role=\"combobox\"\r\n  [attr.aria-haspopup]=\"'listbox'\"\r\n  [attr.aria-expanded]=\"panelOpen()\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [attr.aria-invalid]=\"errorState()\"\r\n  [attr.aria-describedby]=\"_ariaDescribedby\"\r\n  [attr.aria-required]=\"required()\"\r\n  [attr.aria-readonly]=\"readonly() ? 'true' : null\"\r\n  aria-autocomplete=\"list\"\r\n  [attr.aria-activedescendant]=\"panelOpen() ? _getActiveDescendant() : null\"\r\n  [attr.aria-controls]=\"panelOpen() ? id + '-panel' : null\"\r\n  (keydown)=\"_handleKeydown($event)\"\r\n>\r\n  <span class=\"fui-autocomplete__value\">\r\n    @if (empty()) {\r\n      <span class=\"fui-autocomplete__placeholder\">{{ placeholder() }}</span>\r\n    } @else {\r\n      <span class=\"fui-autocomplete__value-text\">{{ displayValue() }}</span>\r\n    }\r\n  </span>\r\n\r\n  @if (!readonly() && !disabled()) {\r\n    @if (!empty()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fui-autocomplete__clear\"\r\n        role=\"button\"\r\n        [attr.aria-label]=\"intl.clearSelectionAriaLabel\"\r\n        (click)=\"clear($event)\"\r\n      >\r\n        <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\r\n          <path\r\n            d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\"\r\n          />\r\n        </svg>\r\n      </button>\r\n    }\r\n\r\n    <span class=\"fui-autocomplete__arrow\" [class.fui-autocomplete__arrow--open]=\"panelOpen()\" aria-hidden=\"true\">\r\n      <fui-icon name=\"caret-down\" size=\"sm\"></fui-icon>\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!-- Live region for screen reader announcements -->\r\n<span class=\"fui-sr-only\" aria-live=\"assertive\" aria-atomic=\"true\">{{ _liveAnnouncement() }}</span>\r\n\r\n<!-- Dropdown Panel (always rendered so #panel ViewChild is always available) -->\r\n<div #panel [hidden]=\"false\" [id]=\"id + '-panel'\" class=\"fui-autocomplete__panel\">\r\n  <!-- Search Input -->\r\n  <div class=\"fui-autocomplete__search-input\">\r\n    <fui-form-field hideSubscript>\r\n      <fui-icon fuiPrefix name=\"magnifying-glass\" size=\"sm\" />\r\n      <input\r\n        #searchInput\r\n        fuiInput\r\n        type=\"text\"\r\n        [placeholder]=\"intl.searchPlaceholder\"\r\n        [value]=\"searchTerm()\"\r\n        autocomplete=\"off\"\r\n        role=\"searchbox\"\r\n        aria-label=\"Search\"\r\n        (input)=\"onSearchInput($event)\"\r\n        (keydown)=\"_handlePanelKeydown($event)\"\r\n      />\r\n    </fui-form-field>\r\n  </div>\r\n\r\n  <!-- Options List -->\r\n  <div\r\n    class=\"fui-autocomplete__options\"\r\n    role=\"listbox\"\r\n    [attr.aria-multiselectable]=\"multiple()\"\r\n    [attr.aria-label]=\"placeholder()\"\r\n  >\r\n    <ng-content></ng-content>\r\n\r\n    <!-- No results empty state when search has no matching options -->\r\n    @if (searchTerm() && _visibleOptions().length === 0) {\r\n      <div class=\"fui-autocomplete__no-results\" role=\"status\">\r\n        {{ intl.noResultsText }}\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Panel Actions (e.g., Add new option, Refresh) -->\r\n  <div class=\"fui-autocomplete__panel-actions\">\r\n    <ng-content select=\"[fuiAutocompletePanelActions]\"></ng-content>\r\n  </div>\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-autocomplete{position:relative;display:inline-block;width:100%;min-width:8rem}.fui-autocomplete__trigger{display:flex;align-items:center;width:100%;border:none;color:var(--fui-text-primary);font-family:var(--fui-font-sans);font-size:var(--fui-text-base);line-height:1.29;letter-spacing:.16px;cursor:pointer;outline:none;gap:var(--fui-spacing-2)}.fui-autocomplete__trigger[aria-disabled=true]{color:var(--fui-text-disabled);cursor:not-allowed}.fui-autocomplete__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.fui-autocomplete__placeholder{color:var(--fui-text-secondary)}.fui-autocomplete__value-text{color:var(--fui-text-primary)}.fui-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;cursor:pointer;color:var(--fui-text-secondary);flex-shrink:0;border-radius:50%}.fui-autocomplete__clear svg{width:.75rem;height:.75rem}.fui-autocomplete__clear:hover{color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-autocomplete__arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--fui-icon-xs);height:var(--fui-icon-xs);margin-left:var(--fui-spacing-2);color:var(--fui-text-secondary);pointer-events:none;transition:color var(--fui-duration-fast) var(--fui-ease-in-out),transform var(--fui-duration-fast) var(--fui-ease-in-out)}.fui-autocomplete__arrow--open{color:var(--fui-field-border-focus);transform:rotate(180deg)}.fui-autocomplete--disabled .fui-autocomplete__trigger{color:var(--fui-text-disabled);cursor:not-allowed}.fui-autocomplete--disabled .fui-autocomplete__arrow{color:var(--fui-text-disabled)}.fui-autocomplete--readonly .fui-autocomplete__trigger{background-color:transparent;min-height:unset;cursor:default;color:var(--fui-text-primary)}.fui-autocomplete .fui-autocomplete__panel{display:none}.fui-autocomplete__panel{--fui-autocomplete-panel-max-height: 24rem;--fui-autocomplete-panel-border-radius: var(--fui-radius-sm);--fui-autocomplete-panel-shadow: var(--fui-shadow-lg);--fui-autocomplete-panel-bg: var(--fui-bg-default);width:100%;background-color:var(--fui-autocomplete-panel-bg);border:var(--fui-border-width-sm) solid var(--fui-border-default);border-radius:var(--fui-autocomplete-panel-border-radius);box-shadow:var(--fui-autocomplete-panel-shadow);max-height:var(--fui-autocomplete-panel-max-height);overflow:hidden;display:flex;flex-direction:column;transform-origin:top center;padding:0 0 var(--fui-spacing-2) 0;animation:fui-popover-enter var(--fui-duration-base) var(--fui-ease-out) both;will-change:transform,opacity}.fui-autocomplete__panel .fui-autocomplete__search-input{padding:var(--fui-spacing-1) var(--fui-spacing-3)}.fui-autocomplete__panel .fui-autocomplete__no-results{padding:var(--fui-spacing-1) var(--fui-spacing-3);font-size:var(--fui-text-md);color:var(--fui-text-disabled)}.fui-autocomplete__options{padding-top:var(--fui-spacing-2);max-height:16rem;overflow-y:auto;background-color:var(--fui-bg-default);scrollbar-width:thin;scrollbar-color:var(--fui-border-default) transparent}.fui-autocomplete__options::-webkit-scrollbar{width:6px}.fui-autocomplete__options::-webkit-scrollbar-track{background:transparent}.fui-autocomplete__options::-webkit-scrollbar-thumb{background-color:var(--fui-border-default);border-radius:3px}.fui-autocomplete__options::-webkit-scrollbar-thumb:hover{background-color:var(--fui-text-secondary)}.fui-autocomplete__panel-actions{padding:var(--fui-spacing-4) var(--fui-spacing-4) 0 var(--fui-spacing-4)}.fui-autocomplete__panel-actions:empty{display:none}.fui-autocomplete-backdrop{background:transparent}@media(prefers-contrast:high){.fui-autocomplete__trigger{border-width:2px}.fui-autocomplete__trigger:focus{outline-width:3px}.fui-autocomplete__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-autocomplete__trigger,.fui-autocomplete__arrow{transition:none}.fui-autocomplete__panel{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiFormFieldComponent, selector: "fui-form-field", inputs: ["appearance", "hideRequiredMarker", "hideSubscript"] }, { kind: "directive", type: FuiInputDirective, selector: "input[fuiInput], textarea[fuiInput], select[fuiInput]", inputs: ["type", "placeholder", "readonly", "maxlength", "minlength", "pattern", "errorStateMatcher", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: FuiPrefixDirective, selector: "[fuiPrefix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAutocompleteComponent, decorators: [{
             type: Component,
@@ -528,7 +528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                             provide: FUI_SELECT,
                             useExisting: FuiAutocompleteComponent,
                         },
-                    ], template: "<!-- Trigger -->\r\n<div\r\n  #trigger\r\n  [id]=\"id\"\r\n  class=\"fui-autocomplete__trigger\"\r\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n  role=\"combobox\"\r\n  [attr.aria-haspopup]=\"'listbox'\"\r\n  [attr.aria-expanded]=\"panelOpen()\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [attr.aria-invalid]=\"errorState()\"\r\n  [attr.aria-describedby]=\"_ariaDescribedby\"\r\n  [attr.aria-required]=\"required()\"\r\n  [attr.aria-readonly]=\"readonly() ? 'true' : null\"\r\n  aria-autocomplete=\"list\"\r\n  [attr.aria-activedescendant]=\"panelOpen() ? _getActiveDescendant() : null\"\r\n  [attr.aria-controls]=\"panelOpen() ? id + '-panel' : null\"\r\n  (keydown)=\"_handleKeydown($event)\"\r\n>\r\n  <span class=\"fui-autocomplete__value\">\r\n    @if (empty()) {\r\n      <span class=\"fui-autocomplete__placeholder\">{{ placeholder() }}</span>\r\n    } @else {\r\n      <span class=\"fui-autocomplete__value-text\">{{ displayValue() }}</span>\r\n    }\r\n  </span>\r\n\r\n  @if (!readonly() && !disabled()) {\r\n    @if (!empty()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fui-autocomplete__clear\"\r\n        role=\"button\"\r\n        [attr.aria-label]=\"intl.clearSelectionAriaLabel\"\r\n        (click)=\"clear($event)\"\r\n      >\r\n        <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\r\n          <path\r\n            d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\"\r\n          />\r\n        </svg>\r\n      </button>\r\n    }\r\n\r\n    <span class=\"fui-autocomplete__arrow\" [class.fui-autocomplete__arrow--open]=\"panelOpen()\" aria-hidden=\"true\">\r\n      <fui-icon name=\"caret-down\" size=\"sm\"></fui-icon>\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!-- Live region for screen reader announcements -->\r\n<span class=\"fui-sr-only\" aria-live=\"assertive\" aria-atomic=\"true\">{{ _liveAnnouncement() }}</span>\r\n\r\n<!-- Dropdown Panel (always rendered so #panel ViewChild is always available) -->\r\n<div #panel [hidden]=\"false\" [id]=\"id + '-panel'\" class=\"fui-autocomplete__panel\">\r\n  <!-- Search Input -->\r\n  <div class=\"fui-autocomplete__search-input\">\r\n    <fui-form-field hideSubscript>\r\n      <fui-icon fuiPrefix name=\"magnifying-glass\" size=\"sm\" />\r\n      <input\r\n        #searchInput\r\n        fuiInput\r\n        type=\"text\"\r\n        [placeholder]=\"intl.searchPlaceholder\"\r\n        [value]=\"searchTerm()\"\r\n        autocomplete=\"off\"\r\n        role=\"searchbox\"\r\n        aria-label=\"Search\"\r\n        (input)=\"onSearchInput($event)\"\r\n        (keydown)=\"_handlePanelKeydown($event)\"\r\n      />\r\n    </fui-form-field>\r\n  </div>\r\n\r\n  <!-- Options List -->\r\n  <div\r\n    class=\"fui-autocomplete__options\"\r\n    role=\"listbox\"\r\n    [attr.aria-multiselectable]=\"multiple()\"\r\n    [attr.aria-label]=\"placeholder()\"\r\n  >\r\n    <ng-content></ng-content>\r\n\r\n    <!-- No results empty state when search has no matching options -->\r\n    @if (searchTerm() && _visibleOptions().length === 0) {\r\n      <div class=\"fui-autocomplete__no-results\" role=\"status\">\r\n        {{ intl.noResultsText }}\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Panel Actions (e.g., Add new option, Refresh) -->\r\n  <div class=\"fui-autocomplete__panel-actions\">\r\n    <ng-content select=\"[fuiAutocompletePanelActions]\"></ng-content>\r\n  </div>\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-autocomplete{position:relative;display:inline-block;width:100%;min-width:8rem}.fui-autocomplete__trigger{display:flex;align-items:center;width:100%;border:none;color:var(--fui-text-primary);font-family:var(--fui-font-sans);font-size:var(--fui-text-base);line-height:1.29;letter-spacing:.16px;cursor:pointer;outline:none;gap:var(--fui-spacing-2)}.fui-autocomplete__trigger[aria-disabled=true]{color:var(--fui-text-disabled);cursor:not-allowed}.fui-autocomplete__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.fui-autocomplete__placeholder{color:var(--fui-text-secondary)}.fui-autocomplete__value-text{color:var(--fui-text-primary)}.fui-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;cursor:pointer;color:var(--fui-text-secondary);flex-shrink:0;border-radius:50%}.fui-autocomplete__clear svg{width:.75rem;height:.75rem}.fui-autocomplete__clear:hover{color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-autocomplete__arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--fui-icon-xs);height:var(--fui-icon-xs);margin-left:var(--fui-spacing-2);color:var(--fui-text-secondary);pointer-events:none;transition:color var(--fui-duration-fast) var(--fui-ease-in-out),transform var(--fui-duration-fast) var(--fui-ease-in-out)}.fui-autocomplete__arrow--open{color:var(--fui-field-border-focus);transform:rotate(180deg)}.fui-autocomplete--disabled .fui-autocomplete__trigger{color:var(--fui-text-disabled);cursor:not-allowed}.fui-autocomplete--disabled .fui-autocomplete__arrow{color:var(--fui-text-disabled)}.fui-autocomplete--readonly .fui-autocomplete__trigger{background-color:transparent;min-height:unset;cursor:default;color:var(--fui-text-primary)}.fui-autocomplete .fui-autocomplete__panel{display:none}.fui-autocomplete__panel{--fui-autocomplete-panel-max-height: 24rem;--fui-autocomplete-panel-border-radius: var(--fui-radius-sm);--fui-autocomplete-panel-shadow: var(--fui-shadow-lg);--fui-autocomplete-panel-bg: var(--fui-bg-default);width:100%;background-color:var(--fui-autocomplete-panel-bg);border:1px solid var(--fui-border-default);border-radius:var(--fui-autocomplete-panel-border-radius);box-shadow:var(--fui-autocomplete-panel-shadow);max-height:var(--fui-autocomplete-panel-max-height);overflow:hidden;display:flex;flex-direction:column;transform-origin:top center;padding:0 0 var(--fui-spacing-2) 0;animation:fui-popover-enter var(--fui-duration-base) var(--fui-ease-out) both;will-change:transform,opacity}.fui-autocomplete__panel .fui-autocomplete__search-input{padding:var(--fui-spacing-1) var(--fui-spacing-3)}.fui-autocomplete__panel .fui-autocomplete__no-results{padding:var(--fui-spacing-1) var(--fui-spacing-3);font-size:var(--fui-text-md);color:var(--fui-text-disabled)}.fui-autocomplete__options{padding-top:var(--fui-spacing-2);max-height:16rem;overflow-y:auto;background-color:var(--fui-bg-default);scrollbar-width:thin;scrollbar-color:var(--fui-border-default) transparent}.fui-autocomplete__options::-webkit-scrollbar{width:6px}.fui-autocomplete__options::-webkit-scrollbar-track{background:transparent}.fui-autocomplete__options::-webkit-scrollbar-thumb{background-color:var(--fui-border-default);border-radius:3px}.fui-autocomplete__options::-webkit-scrollbar-thumb:hover{background-color:var(--fui-text-secondary)}.fui-autocomplete__panel-actions{padding:var(--fui-spacing-4) var(--fui-spacing-4) 0 var(--fui-spacing-4)}.fui-autocomplete__panel-actions:empty{display:none}.fui-autocomplete-backdrop{background:transparent}@media(prefers-contrast:high){.fui-autocomplete__trigger{border-width:2px}.fui-autocomplete__trigger:focus{outline-width:3px}.fui-autocomplete__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-autocomplete__trigger,.fui-autocomplete__arrow{transition:none}.fui-autocomplete__panel{animation:none}}\n"] }]
+                    ], template: "<!-- Trigger -->\r\n<div\r\n  #trigger\r\n  [id]=\"id\"\r\n  class=\"fui-autocomplete__trigger\"\r\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n  role=\"combobox\"\r\n  [attr.aria-haspopup]=\"'listbox'\"\r\n  [attr.aria-expanded]=\"panelOpen()\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [attr.aria-invalid]=\"errorState()\"\r\n  [attr.aria-describedby]=\"_ariaDescribedby\"\r\n  [attr.aria-required]=\"required()\"\r\n  [attr.aria-readonly]=\"readonly() ? 'true' : null\"\r\n  aria-autocomplete=\"list\"\r\n  [attr.aria-activedescendant]=\"panelOpen() ? _getActiveDescendant() : null\"\r\n  [attr.aria-controls]=\"panelOpen() ? id + '-panel' : null\"\r\n  (keydown)=\"_handleKeydown($event)\"\r\n>\r\n  <span class=\"fui-autocomplete__value\">\r\n    @if (empty()) {\r\n      <span class=\"fui-autocomplete__placeholder\">{{ placeholder() }}</span>\r\n    } @else {\r\n      <span class=\"fui-autocomplete__value-text\">{{ displayValue() }}</span>\r\n    }\r\n  </span>\r\n\r\n  @if (!readonly() && !disabled()) {\r\n    @if (!empty()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fui-autocomplete__clear\"\r\n        role=\"button\"\r\n        [attr.aria-label]=\"intl.clearSelectionAriaLabel\"\r\n        (click)=\"clear($event)\"\r\n      >\r\n        <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\r\n          <path\r\n            d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\"\r\n          />\r\n        </svg>\r\n      </button>\r\n    }\r\n\r\n    <span class=\"fui-autocomplete__arrow\" [class.fui-autocomplete__arrow--open]=\"panelOpen()\" aria-hidden=\"true\">\r\n      <fui-icon name=\"caret-down\" size=\"sm\"></fui-icon>\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!-- Live region for screen reader announcements -->\r\n<span class=\"fui-sr-only\" aria-live=\"assertive\" aria-atomic=\"true\">{{ _liveAnnouncement() }}</span>\r\n\r\n<!-- Dropdown Panel (always rendered so #panel ViewChild is always available) -->\r\n<div #panel [hidden]=\"false\" [id]=\"id + '-panel'\" class=\"fui-autocomplete__panel\">\r\n  <!-- Search Input -->\r\n  <div class=\"fui-autocomplete__search-input\">\r\n    <fui-form-field hideSubscript>\r\n      <fui-icon fuiPrefix name=\"magnifying-glass\" size=\"sm\" />\r\n      <input\r\n        #searchInput\r\n        fuiInput\r\n        type=\"text\"\r\n        [placeholder]=\"intl.searchPlaceholder\"\r\n        [value]=\"searchTerm()\"\r\n        autocomplete=\"off\"\r\n        role=\"searchbox\"\r\n        aria-label=\"Search\"\r\n        (input)=\"onSearchInput($event)\"\r\n        (keydown)=\"_handlePanelKeydown($event)\"\r\n      />\r\n    </fui-form-field>\r\n  </div>\r\n\r\n  <!-- Options List -->\r\n  <div\r\n    class=\"fui-autocomplete__options\"\r\n    role=\"listbox\"\r\n    [attr.aria-multiselectable]=\"multiple()\"\r\n    [attr.aria-label]=\"placeholder()\"\r\n  >\r\n    <ng-content></ng-content>\r\n\r\n    <!-- No results empty state when search has no matching options -->\r\n    @if (searchTerm() && _visibleOptions().length === 0) {\r\n      <div class=\"fui-autocomplete__no-results\" role=\"status\">\r\n        {{ intl.noResultsText }}\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Panel Actions (e.g., Add new option, Refresh) -->\r\n  <div class=\"fui-autocomplete__panel-actions\">\r\n    <ng-content select=\"[fuiAutocompletePanelActions]\"></ng-content>\r\n  </div>\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-autocomplete{position:relative;display:inline-block;width:100%;min-width:8rem}.fui-autocomplete__trigger{display:flex;align-items:center;width:100%;border:none;color:var(--fui-text-primary);font-family:var(--fui-font-sans);font-size:var(--fui-text-base);line-height:1.29;letter-spacing:.16px;cursor:pointer;outline:none;gap:var(--fui-spacing-2)}.fui-autocomplete__trigger[aria-disabled=true]{color:var(--fui-text-disabled);cursor:not-allowed}.fui-autocomplete__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.fui-autocomplete__placeholder{color:var(--fui-text-secondary)}.fui-autocomplete__value-text{color:var(--fui-text-primary)}.fui-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;cursor:pointer;color:var(--fui-text-secondary);flex-shrink:0;border-radius:50%}.fui-autocomplete__clear svg{width:.75rem;height:.75rem}.fui-autocomplete__clear:hover{color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-autocomplete__arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--fui-icon-xs);height:var(--fui-icon-xs);margin-left:var(--fui-spacing-2);color:var(--fui-text-secondary);pointer-events:none;transition:color var(--fui-duration-fast) var(--fui-ease-in-out),transform var(--fui-duration-fast) var(--fui-ease-in-out)}.fui-autocomplete__arrow--open{color:var(--fui-field-border-focus);transform:rotate(180deg)}.fui-autocomplete--disabled .fui-autocomplete__trigger{color:var(--fui-text-disabled);cursor:not-allowed}.fui-autocomplete--disabled .fui-autocomplete__arrow{color:var(--fui-text-disabled)}.fui-autocomplete--readonly .fui-autocomplete__trigger{background-color:transparent;min-height:unset;cursor:default;color:var(--fui-text-primary)}.fui-autocomplete .fui-autocomplete__panel{display:none}.fui-autocomplete__panel{--fui-autocomplete-panel-max-height: 24rem;--fui-autocomplete-panel-border-radius: var(--fui-radius-sm);--fui-autocomplete-panel-shadow: var(--fui-shadow-lg);--fui-autocomplete-panel-bg: var(--fui-bg-default);width:100%;background-color:var(--fui-autocomplete-panel-bg);border:var(--fui-border-width-sm) solid var(--fui-border-default);border-radius:var(--fui-autocomplete-panel-border-radius);box-shadow:var(--fui-autocomplete-panel-shadow);max-height:var(--fui-autocomplete-panel-max-height);overflow:hidden;display:flex;flex-direction:column;transform-origin:top center;padding:0 0 var(--fui-spacing-2) 0;animation:fui-popover-enter var(--fui-duration-base) var(--fui-ease-out) both;will-change:transform,opacity}.fui-autocomplete__panel .fui-autocomplete__search-input{padding:var(--fui-spacing-1) var(--fui-spacing-3)}.fui-autocomplete__panel .fui-autocomplete__no-results{padding:var(--fui-spacing-1) var(--fui-spacing-3);font-size:var(--fui-text-md);color:var(--fui-text-disabled)}.fui-autocomplete__options{padding-top:var(--fui-spacing-2);max-height:16rem;overflow-y:auto;background-color:var(--fui-bg-default);scrollbar-width:thin;scrollbar-color:var(--fui-border-default) transparent}.fui-autocomplete__options::-webkit-scrollbar{width:6px}.fui-autocomplete__options::-webkit-scrollbar-track{background:transparent}.fui-autocomplete__options::-webkit-scrollbar-thumb{background-color:var(--fui-border-default);border-radius:3px}.fui-autocomplete__options::-webkit-scrollbar-thumb:hover{background-color:var(--fui-text-secondary)}.fui-autocomplete__panel-actions{padding:var(--fui-spacing-4) var(--fui-spacing-4) 0 var(--fui-spacing-4)}.fui-autocomplete__panel-actions:empty{display:none}.fui-autocomplete-backdrop{background:transparent}@media(prefers-contrast:high){.fui-autocomplete__trigger{border-width:2px}.fui-autocomplete__trigger:focus{outline-width:3px}.fui-autocomplete__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-autocomplete__trigger,.fui-autocomplete__arrow{transition:none}.fui-autocomplete__panel{animation:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], trigger: [{
                 type: ViewChild,
                 args: ['trigger', { static: false }]