@raintonic/formaui 0.2.0

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

@@ -0,0 +1,217 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, input, booleanAttribute, output, signal, inject, ElementRef, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, contentChildren } from '@angular/core';
+import { FuiIconComponent } from '@raintonic/formaui/components/icon';
+
+const FUI_ACCORDION = new InjectionToken('FUI_ACCORDION');
+
+let nextPanelId = 0;
+/**
+ * # ExpansionPanel Component
+ *
+ * A collapsible panel that can be used standalone or within an `fui-accordion`.
+ * Supports lazy rendering of content (only rendered after first open).
+ *
+ * ## Usage
+ *
+ * ### Standalone
+ * ```html
+ * <fui-expansion-panel>
+ *   <span panelTitle>Panel Title</span>
+ *   <p>Panel content here</p>
+ * </fui-expansion-panel>
+ * ```
+ *
+ * ### Inside Accordion
+ * ```html
+ * <fui-accordion>
+ *   <fui-expansion-panel>
+ *     <span panelTitle>First</span>
+ *     Content 1
+ *   </fui-expansion-panel>
+ *   <fui-expansion-panel>
+ *     <span panelTitle>Second</span>
+ *     Content 2
+ *   </fui-expansion-panel>
+ * </fui-accordion>
+ * ```
+ */
+class FuiExpansionPanelComponent {
+    // Inputs
+    expanded = input(false, { ...(ngDevMode ? { debugName: "expanded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    hideToggle = input(false, { ...(ngDevMode ? { debugName: "hideToggle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    // Outputs
+    opened = output();
+    closed = output();
+    expandedChange = output();
+    afterExpand = output();
+    afterCollapse = output();
+    // Internal state
+    _expanded = signal(false, ...(ngDevMode ? [{ debugName: "_expanded" }] : /* istanbul ignore next */ []));
+    _animating = signal(false, ...(ngDevMode ? [{ debugName: "_animating" }] : /* istanbul ignore next */ []));
+    _hasBeenOpened = signal(false, ...(ngDevMode ? [{ debugName: "_hasBeenOpened" }] : /* istanbul ignore next */ []));
+    // ARIA IDs
+    _panelId = nextPanelId++;
+    _headerId = `fui-expansion-panel-header-${this._panelId}`;
+    _contentId = `fui-expansion-panel-content-${this._panelId}`;
+    // Parent accordion (optional)
+    _accordion = inject(FUI_ACCORDION, { optional: true });
+    _elementRef = inject(ElementRef);
+    constructor() {
+        // Sync expanded input to internal state
+        effect(() => {
+            const inputExpanded = this.expanded();
+            this._expanded.set(inputExpanded);
+            if (inputExpanded) {
+                this._hasBeenOpened.set(true);
+            }
+        });
+    }
+    /** Toggles the expanded state of the panel. */
+    toggle() {
+        if (this.disabled()) {
+            return;
+        }
+        if (this._expanded()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    /** Opens the panel. */
+    open() {
+        if (this.disabled() || this._expanded()) {
+            return;
+        }
+        this._hasBeenOpened.set(true);
+        this._animating.set(true);
+        this._expanded.set(true);
+        this.expandedChange.emit(true);
+        this.opened.emit();
+        // Notify parent accordion to close other panels if in single mode
+        if (this._accordion) {
+            this._accordion._closeOtherPanels(this);
+        }
+    }
+    /** Closes the panel. */
+    close() {
+        if (this.disabled() || !this._expanded()) {
+            return;
+        }
+        this._animating.set(true);
+        this._expanded.set(false);
+        this.expandedChange.emit(false);
+        this.closed.emit();
+    }
+    /** Called when the body transition ends. */
+    _onBodyTransitionEnd(event) {
+        if (event.propertyName === 'max-height') {
+            this._animating.set(false);
+            if (this._expanded()) {
+                this.afterExpand.emit();
+            }
+            else {
+                this.afterCollapse.emit();
+            }
+        }
+    }
+    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\n  class=\"fui-expansion-panel__header\"\n  (click)=\"toggle()\"\n  (keydown.enter)=\"toggle()\"\n  (keydown.space)=\"toggle(); $event.preventDefault()\"\n  role=\"button\"\n  [attr.aria-expanded]=\"_expanded()\"\n  [attr.aria-controls]=\"_contentId\"\n  [attr.id]=\"_headerId\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n>\n  <div class=\"fui-expansion-panel__header-content\">\n    <ng-content select=\"[panelTitle]\"></ng-content>\n    <ng-content select=\"[panelDescription]\"></ng-content>\n  </div>\n  @if (!hideToggle()) {\n    <fui-icon\n      class=\"fui-expansion-panel__toggle-icon\"\n      [class.fui-expansion-panel__toggle-icon--expanded]=\"_expanded()\"\n      name=\"caret-down\"\n      size=\"sm\"\n    ></fui-icon>\n  }\n</div>\n\n<div\n  class=\"fui-expansion-panel__body\"\n  [attr.id]=\"_contentId\"\n  [attr.aria-labelledby]=\"_headerId\"\n  role=\"region\"\n  [class.fui-expansion-panel__body--expanded]=\"_expanded()\"\n  (transitionend)=\"_onBodyTransitionEnd($event)\"\n>\n  <div class=\"fui-expansion-panel__body-inner\">\n    @if (_expanded() || _hasBeenOpened()) {\n      <ng-content></ng-content>\n    }\n  </div>\n</div>\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:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 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-moderate-01) var(--fui-ease-entrance)}.fui-expansion-panel{display:block;background-color:var(--fui-surface-card, var(--fui-surface-01));border-bottom:1px solid var(--fui-border-color)}.fui-expansion-panel:first-child{border-top-left-radius:var(--fui-border-radius-sm);border-top-right-radius:var(--fui-border-radius-sm)}.fui-expansion-panel:last-child{border-bottom:none;border-bottom-left-radius:var(--fui-border-radius-sm);border-bottom-right-radius:var(--fui-border-radius-sm)}.fui-expansion-panel__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-padding-16, 1rem) var(--fui-padding-24, 1.5rem);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-03);font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary);background:transparent;border:none;outline:none;transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-expansion-panel__header:hover{background-color:var(--fui-surface-hover, rgba(0, 0, 0, .04))}.fui-expansion-panel__header:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0px}.fui-expansion-panel__header-content{display:flex;flex-direction:column;flex:1;min-width:0;gap:var(--fui-gap-4, .25rem)}.fui-expansion-panel__header-content [panelTitle]{font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary)}.fui-expansion-panel__header-content [panelDescription]{font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular, 400);color:var(--fui-text-secondary)}.fui-expansion-panel__toggle-icon{flex-shrink:0;margin-left:var(--fui-gap-16, 1rem);color:var(--fui-text-secondary);transition:transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-expansion-panel__toggle-icon--expanded{transform:rotate(180deg)}.fui-expansion-panel__body{max-height:0;overflow:hidden;transition:max-height var(--fui-duration-moderate-02) var(--fui-ease-standard) 0ms}.fui-expansion-panel__body--expanded{max-height:1000px}.fui-expansion-panel__body-inner{padding:0 var(--fui-padding-24, 1.5rem) var(--fui-padding-16, 1rem);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);color:var(--fui-text-primary)}.fui-expansion-panel--expanded .fui-expansion-panel__header{font-weight:var(--fui-font-weight-semibold, 600)}.fui-expansion-panel--disabled{opacity:var(--fui-opacity-disabled, .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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiExpansionPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-expansion-panel', standalone: true, imports: [FuiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'fui-expansion-panel',
+                        '[class.fui-expansion-panel--expanded]': '_expanded()',
+                        '[class.fui-expansion-panel--disabled]': 'disabled()',
+                        '[class.fui-expansion-panel--animating]': '_animating()',
+                    }, template: "<div\n  class=\"fui-expansion-panel__header\"\n  (click)=\"toggle()\"\n  (keydown.enter)=\"toggle()\"\n  (keydown.space)=\"toggle(); $event.preventDefault()\"\n  role=\"button\"\n  [attr.aria-expanded]=\"_expanded()\"\n  [attr.aria-controls]=\"_contentId\"\n  [attr.id]=\"_headerId\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n>\n  <div class=\"fui-expansion-panel__header-content\">\n    <ng-content select=\"[panelTitle]\"></ng-content>\n    <ng-content select=\"[panelDescription]\"></ng-content>\n  </div>\n  @if (!hideToggle()) {\n    <fui-icon\n      class=\"fui-expansion-panel__toggle-icon\"\n      [class.fui-expansion-panel__toggle-icon--expanded]=\"_expanded()\"\n      name=\"caret-down\"\n      size=\"sm\"\n    ></fui-icon>\n  }\n</div>\n\n<div\n  class=\"fui-expansion-panel__body\"\n  [attr.id]=\"_contentId\"\n  [attr.aria-labelledby]=\"_headerId\"\n  role=\"region\"\n  [class.fui-expansion-panel__body--expanded]=\"_expanded()\"\n  (transitionend)=\"_onBodyTransitionEnd($event)\"\n>\n  <div class=\"fui-expansion-panel__body-inner\">\n    @if (_expanded() || _hasBeenOpened()) {\n      <ng-content></ng-content>\n    }\n  </div>\n</div>\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:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 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-moderate-01) var(--fui-ease-entrance)}.fui-expansion-panel{display:block;background-color:var(--fui-surface-card, var(--fui-surface-01));border-bottom:1px solid var(--fui-border-color)}.fui-expansion-panel:first-child{border-top-left-radius:var(--fui-border-radius-sm);border-top-right-radius:var(--fui-border-radius-sm)}.fui-expansion-panel:last-child{border-bottom:none;border-bottom-left-radius:var(--fui-border-radius-sm);border-bottom-right-radius:var(--fui-border-radius-sm)}.fui-expansion-panel__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-padding-16, 1rem) var(--fui-padding-24, 1.5rem);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-03);font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary);background:transparent;border:none;outline:none;transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-expansion-panel__header:hover{background-color:var(--fui-surface-hover, rgba(0, 0, 0, .04))}.fui-expansion-panel__header:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0px}.fui-expansion-panel__header-content{display:flex;flex-direction:column;flex:1;min-width:0;gap:var(--fui-gap-4, .25rem)}.fui-expansion-panel__header-content [panelTitle]{font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary)}.fui-expansion-panel__header-content [panelDescription]{font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular, 400);color:var(--fui-text-secondary)}.fui-expansion-panel__toggle-icon{flex-shrink:0;margin-left:var(--fui-gap-16, 1rem);color:var(--fui-text-secondary);transition:transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-expansion-panel__toggle-icon--expanded{transform:rotate(180deg)}.fui-expansion-panel__body{max-height:0;overflow:hidden;transition:max-height var(--fui-duration-moderate-02) var(--fui-ease-standard) 0ms}.fui-expansion-panel__body--expanded{max-height:1000px}.fui-expansion-panel__body-inner{padding:0 var(--fui-padding-24, 1.5rem) var(--fui-padding-16, 1rem);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);color:var(--fui-text-primary)}.fui-expansion-panel--expanded .fui-expansion-panel__header{font-weight:var(--fui-font-weight-semibold, 600)}.fui-expansion-panel--disabled{opacity:var(--fui-opacity-disabled, .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"] }]
+        }], 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"] }] } });
+
+/**
+ * # Accordion Component
+ *
+ * Groups multiple `fui-expansion-panel` components.
+ * In single mode (default), only one panel can be expanded at a time.
+ * In multi mode, multiple panels can be expanded simultaneously.
+ *
+ * ## Usage
+ *
+ * ### Single mode (default)
+ * ```html
+ * <fui-accordion>
+ *   <fui-expansion-panel>
+ *     <span panelTitle>Panel 1</span>
+ *     Content 1
+ *   </fui-expansion-panel>
+ *   <fui-expansion-panel>
+ *     <span panelTitle>Panel 2</span>
+ *     Content 2
+ *   </fui-expansion-panel>
+ * </fui-accordion>
+ * ```
+ *
+ * ### Multi mode
+ * ```html
+ * <fui-accordion [multi]="true">
+ *   ...
+ * </fui-accordion>
+ * ```
+ *
+ * ### Flat display mode
+ * ```html
+ * <fui-accordion displayMode="flat">
+ *   ...
+ * </fui-accordion>
+ * ```
+ */
+class FuiAccordionComponent {
+    // Inputs
+    multi = input(false, { ...(ngDevMode ? { debugName: "multi" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    displayMode = input('default', ...(ngDevMode ? [{ debugName: "displayMode" }] : /* istanbul ignore next */ []));
+    // Content children
+    panels = contentChildren(FuiExpansionPanelComponent, ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
+    /** Opens all panels. Only effective in multi mode. */
+    openAll() {
+        if (!this.multi()) {
+            return;
+        }
+        this.panels().forEach((panel) => {
+            panel.open();
+        });
+    }
+    /** Closes all panels. */
+    closeAll() {
+        this.panels().forEach((panel) => {
+            panel.close();
+        });
+    }
+    /** Closes all panels except the specified one. Used internally by panels. */
+    _closeOtherPanels(openedPanel) {
+        if (this.multi()) {
+            return;
+        }
+        this.panels().forEach((panel) => {
+            if (panel !== openedPanel) {
+                panel.close();
+            }
+        });
+    }
+    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-border-radius-sm)}.fui-accordion:not(.fui-accordion--flat){border:1px solid var(--fui-border-color)}.fui-accordion--flat{border:none;border-radius:0}\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-border-radius-sm)}.fui-accordion:not(.fui-accordion--flat){border:1px solid var(--fui-border-color)}.fui-accordion--flat{border:none;border-radius:0}\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 }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FUI_ACCORDION, FuiAccordionComponent, FuiExpansionPanelComponent };
+//# sourceMappingURL=raintonic-formaui-components-accordion.mjs.map

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

@@ -0,0 +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';\n\nexport type AccordionDisplayMode = 'default' | 'flat';\n\nexport interface AccordionExpandedChange {\n  source: unknown;\n  expanded: boolean;\n}\n\nexport const FUI_ACCORDION = new InjectionToken<unknown>('FUI_ACCORDION');\n","import {\n  Component,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n  input,\n  output,\n  signal,\n  effect,\n  inject,\n  booleanAttribute,\n  WritableSignal,\n  ElementRef,\n} from '@angular/core';\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\nimport { FUI_ACCORDION, AccordionDisplayMode } from './accordion.types';\n\nlet nextPanelId = 0;\n\n/**\n * # ExpansionPanel Component\n *\n * A collapsible panel that can be used standalone or within an `fui-accordion`.\n * Supports lazy rendering of content (only rendered after first open).\n *\n * ## Usage\n *\n * ### Standalone\n * ```html\n * <fui-expansion-panel>\n *   <span panelTitle>Panel Title</span>\n *   <p>Panel content here</p>\n * </fui-expansion-panel>\n * ```\n *\n * ### Inside Accordion\n * ```html\n * <fui-accordion>\n *   <fui-expansion-panel>\n *     <span panelTitle>First</span>\n *     Content 1\n *   </fui-expansion-panel>\n *   <fui-expansion-panel>\n *     <span panelTitle>Second</span>\n *     Content 2\n *   </fui-expansion-panel>\n * </fui-accordion>\n * ```\n */\n@Component({\n  selector: 'fui-expansion-panel',\n  standalone: true,\n  imports: [FuiIconComponent],\n  templateUrl: './expansion-panel.component.html',\n  styleUrls: ['./expansion-panel.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'fui-expansion-panel',\n    '[class.fui-expansion-panel--expanded]': '_expanded()',\n    '[class.fui-expansion-panel--disabled]': 'disabled()',\n    '[class.fui-expansion-panel--animating]': '_animating()',\n  },\n})\nexport class FuiExpansionPanelComponent {\n  // Inputs\n  readonly expanded = input<boolean, unknown>(false, { transform: booleanAttribute });\n  readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\n  readonly hideToggle = input<boolean, unknown>(false, { transform: booleanAttribute });\n\n  // Outputs\n  readonly opened = output();\n  readonly closed = output();\n  readonly expandedChange = output<boolean>();\n  readonly afterExpand = output();\n  readonly afterCollapse = output();\n\n  // Internal state\n  readonly _expanded: WritableSignal<boolean> = signal(false);\n  readonly _animating: WritableSignal<boolean> = signal(false);\n  readonly _hasBeenOpened: WritableSignal<boolean> = signal(false);\n\n  // ARIA IDs\n  private readonly _panelId = nextPanelId++;\n  readonly _headerId = `fui-expansion-panel-header-${this._panelId}`;\n  readonly _contentId = `fui-expansion-panel-content-${this._panelId}`;\n\n  // Parent accordion (optional)\n  private readonly _accordion = inject(FUI_ACCORDION, { optional: true }) as {\n    multi: () => boolean;\n    displayMode: () => AccordionDisplayMode;\n    _closeOtherPanels: (panel: FuiExpansionPanelComponent) => void;\n  } | null;\n\n  private readonly _elementRef = inject(ElementRef);\n\n  constructor() {\n    // Sync expanded input to internal state\n    effect(() => {\n      const inputExpanded = this.expanded();\n      this._expanded.set(inputExpanded);\n      if (inputExpanded) {\n        this._hasBeenOpened.set(true);\n      }\n    });\n  }\n\n  /** Toggles the expanded state of the panel. */\n  toggle(): void {\n    if (this.disabled()) {\n      return;\n    }\n    if (this._expanded()) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n\n  /** Opens the panel. */\n  open(): void {\n    if (this.disabled() || this._expanded()) {\n      return;\n    }\n\n    this._hasBeenOpened.set(true);\n    this._animating.set(true);\n    this._expanded.set(true);\n    this.expandedChange.emit(true);\n    this.opened.emit();\n\n    // Notify parent accordion to close other panels if in single mode\n    if (this._accordion) {\n      this._accordion._closeOtherPanels(this);\n    }\n  }\n\n  /** Closes the panel. */\n  close(): void {\n    if (this.disabled() || !this._expanded()) {\n      return;\n    }\n\n    this._animating.set(true);\n    this._expanded.set(false);\n    this.expandedChange.emit(false);\n    this.closed.emit();\n  }\n\n  /** Called when the body transition ends. */\n  _onBodyTransitionEnd(event: TransitionEvent): void {\n    if (event.propertyName === 'max-height') {\n      this._animating.set(false);\n      if (this._expanded()) {\n        this.afterExpand.emit();\n      } else {\n        this.afterCollapse.emit();\n      }\n    }\n  }\n}\n","<div\n  class=\"fui-expansion-panel__header\"\n  (click)=\"toggle()\"\n  (keydown.enter)=\"toggle()\"\n  (keydown.space)=\"toggle(); $event.preventDefault()\"\n  role=\"button\"\n  [attr.aria-expanded]=\"_expanded()\"\n  [attr.aria-controls]=\"_contentId\"\n  [attr.id]=\"_headerId\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n>\n  <div class=\"fui-expansion-panel__header-content\">\n    <ng-content select=\"[panelTitle]\"></ng-content>\n    <ng-content select=\"[panelDescription]\"></ng-content>\n  </div>\n  @if (!hideToggle()) {\n    <fui-icon\n      class=\"fui-expansion-panel__toggle-icon\"\n      [class.fui-expansion-panel__toggle-icon--expanded]=\"_expanded()\"\n      name=\"caret-down\"\n      size=\"sm\"\n    ></fui-icon>\n  }\n</div>\n\n<div\n  class=\"fui-expansion-panel__body\"\n  [attr.id]=\"_contentId\"\n  [attr.aria-labelledby]=\"_headerId\"\n  role=\"region\"\n  [class.fui-expansion-panel__body--expanded]=\"_expanded()\"\n  (transitionend)=\"_onBodyTransitionEnd($event)\"\n>\n  <div class=\"fui-expansion-panel__body-inner\">\n    @if (_expanded() || _hasBeenOpened()) {\n      <ng-content></ng-content>\n    }\n  </div>\n</div>\n","import {\n  Component,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n  input,\n  contentChildren,\n  booleanAttribute,\n} from '@angular/core';\nimport { FuiExpansionPanelComponent } from './expansion-panel.component';\nimport { AccordionDisplayMode, FUI_ACCORDION } from './accordion.types';\n\n/**\n * # Accordion Component\n *\n * Groups multiple `fui-expansion-panel` components.\n * In single mode (default), only one panel can be expanded at a time.\n * In multi mode, multiple panels can be expanded simultaneously.\n *\n * ## Usage\n *\n * ### Single mode (default)\n * ```html\n * <fui-accordion>\n *   <fui-expansion-panel>\n *     <span panelTitle>Panel 1</span>\n *     Content 1\n *   </fui-expansion-panel>\n *   <fui-expansion-panel>\n *     <span panelTitle>Panel 2</span>\n *     Content 2\n *   </fui-expansion-panel>\n * </fui-accordion>\n * ```\n *\n * ### Multi mode\n * ```html\n * <fui-accordion [multi]=\"true\">\n *   ...\n * </fui-accordion>\n * ```\n *\n * ### Flat display mode\n * ```html\n * <fui-accordion displayMode=\"flat\">\n *   ...\n * </fui-accordion>\n * ```\n */\n@Component({\n  selector: 'fui-accordion',\n  standalone: true,\n  template: '<ng-content></ng-content>',\n  styleUrls: ['./accordion.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'fui-accordion',\n    '[class.fui-accordion--flat]': 'displayMode() === \"flat\"',\n  },\n  providers: [{ provide: FUI_ACCORDION, useExisting: FuiAccordionComponent }],\n})\nexport class FuiAccordionComponent {\n  // Inputs\n  readonly multi = input<boolean, unknown>(false, { transform: booleanAttribute });\n  readonly displayMode = input<AccordionDisplayMode>('default');\n\n  // Content children\n  readonly panels = contentChildren(FuiExpansionPanelComponent);\n\n  /** Opens all panels. Only effective in multi mode. */\n  openAll(): void {\n    if (!this.multi()) {\n      return;\n    }\n    this.panels().forEach((panel) => {\n      panel.open();\n    });\n  }\n\n  /** Closes all panels. */\n  closeAll(): void {\n    this.panels().forEach((panel) => {\n      panel.close();\n    });\n  }\n\n  /** Closes all panels except the specified one. Used internally by panels. */\n  _closeOtherPanels(openedPanel: FuiExpansionPanelComponent): void {\n    if (this.multi()) {\n      return;\n    }\n    this.panels().forEach((panel) => {\n      if (panel !== openedPanel) {\n        panel.close();\n      }\n    });\n  }\n}\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-alert.mjs

@@ -0,0 +1,161 @@
+import * as i0 from '@angular/core';
+import { input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FuiIconComponent } from '@raintonic/formaui/components/icon';
+import { FuiProgressbarComponent } from '@raintonic/formaui/components/progressbar';
+
+const FUI_ALERT_VARIANTS = [
+    'primary',
+    'success',
+    'info',
+    'warning',
+    'error',
+    'generic',
+];
+const FUI_NOTIFICATION_POSITIONS = [
+    'top-left',
+    'top-center',
+    'top-right',
+    'bottom-left',
+    'bottom-center',
+    'bottom-right',
+];
+
+/**
+ * # FuiAlertComponent
+ *
+ * A flexible alert component for displaying informational messages, warnings, errors, and success notifications.
+ * Can be used inline in pages or as part of the notification system.
+ *
+ * ## Features
+ * - Multiple variants: primary, success, info, warning, error, generic
+ * - Title and description support
+ * - Optional close button
+ * - Custom or default icons per variant
+ * - Accessible with ARIA attributes
+ *
+ * ## Usage
+ *
+ * ### Basic Alert
+ * ```html
+ * <fui-alert
+ *   variant="success"
+ *   title="Success!"
+ *   description="Your changes have been saved."
+ * ></fui-alert>
+ * ```
+ *
+ * ### Closeable Alert
+ * ```html
+ * <fui-alert
+ *   variant="warning"
+ *   title="Warning"
+ *   description="Please review before continuing."
+ *   [closeable]="true"
+ *   (closed)="onAlertClosed()"
+ * ></fui-alert>
+ * ```
+ *
+ * ### Custom Icon
+ * ```html
+ * <fui-alert
+ *   variant="info"
+ *   title="Custom Icon"
+ *   icon="custom-icon-name"
+ * ></fui-alert>
+ * ```
+ */
+class FuiAlertComponent {
+    /**
+     * Alert variant (determines color scheme and default icon)
+     */
+    variant = input('info', { ...(ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {}), transform: (v) => (FUI_ALERT_VARIANTS.includes(v) ? v : 'info') });
+    /**
+     * Alert title (required)
+     */
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /**
+     * Progress (optional)
+     * 0 = turned off
+     * -1 = indeterminate
+     */
+    progress = input(0, ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+    /**
+     * Alert description (optional)
+     */
+    description = input(null, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to show the close button
+     */
+    closeable = input(false, ...(ngDevMode ? [{ debugName: "closeable" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom icon name (overrides default variant icon)
+     */
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /**
+     * Emits when the close button is clicked
+     */
+    closed = output();
+    /**
+     * Computed CSS classes for the alert
+     */
+    computedClasses = computed(() => {
+        const classes = ['fui-alert', `fui-alert--${this.variant()}`];
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed ARIA role: "alert" for error/warning, "status" for info/success/primary/generic
+     */
+    computedRole = computed(() => {
+        const v = this.variant();
+        return v === 'error' || v === 'warning' ? 'alert' : 'status';
+    }, ...(ngDevMode ? [{ debugName: "computedRole" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed aria-live: "assertive" for errors, "polite" for everything else
+     */
+    computedAriaLive = computed(() => {
+        return this.variant() === 'error' ? 'assertive' : 'polite';
+    }, ...(ngDevMode ? [{ debugName: "computedAriaLive" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed icon name based on variant or custom icon
+     */
+    computedIcon = computed(() => {
+        const icon = this.icon();
+        if (icon) {
+            return icon;
+        }
+        // Default icons for each variant
+        const variantIcons = {
+            primary: 'info',
+            success: 'check-circle',
+            info: 'info',
+            warning: 'warning-diamond',
+            error: 'smiley-sad',
+            generic: 'seal-warning',
+        };
+        return variantIcons[this.variant()];
+    }, ...(ngDevMode ? [{ debugName: "computedIcon" }] : /* istanbul ignore next */ []));
+    /**
+     * Handle close button click
+     */
+    onClose() {
+        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]=\"\r\n      variant() === 'success'\r\n        ? 'success'\r\n        : variant() === 'warning'\r\n          ? 'warn'\r\n          : variant() === 'error'\r\n            ? 'warn'\r\n            : 'primary'\r\n    \"\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  </div>\r\n\r\n  @if (closeable()) {\r\n    <button type=\"button\" class=\"fui-alert__close\" (click)=\"onClose()\" aria-label=\"Close alert\">\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:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 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-moderate-01) var(--fui-ease-entrance)}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-border-radius-sm);--fui-alert-padding: var(--fui-spacing-04);--fui-alert-gap: var(--fui-spacing-04);--fui-alert-close-padding: var(--fui-spacing-02);contain:layout style;position:relative;overflow:hidden;display:flex;font-family:var(--fui-font-family-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:all var(--fui-duration-fast-02) var(--fui-ease-standard) 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}:host.fui-alert .fui-alert__title{margin:0}: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-02);margin:-2px -2px 0 0;cursor:pointer;border-radius:var(--fui-border-radius-sm);transition:all var(--fui-duration-fast-01) var(--fui-ease-standard) 0ms}:host.fui-alert .fui-alert__close:hover{background-color:var(--fui-black-10)}: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-danger-20);--fui-alert-color: var(--fui-danger-100)}:host.fui-alert--error .fui-alert__icon{color:var(--fui-danger-100)}:host.fui-alert--generic{--fui-alert-bg: var(--fui-secondary-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,
+            args: [{ selector: 'fui-alert', standalone: true, imports: [FuiIconComponent, FuiProgressbarComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'computedClasses()',
+                        '[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]=\"\r\n      variant() === 'success'\r\n        ? 'success'\r\n        : variant() === 'warning'\r\n          ? 'warn'\r\n          : variant() === 'error'\r\n            ? 'warn'\r\n            : 'primary'\r\n    \"\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  </div>\r\n\r\n  @if (closeable()) {\r\n    <button type=\"button\" class=\"fui-alert__close\" (click)=\"onClose()\" aria-label=\"Close alert\">\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:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 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-moderate-01) var(--fui-ease-entrance)}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-border-radius-sm);--fui-alert-padding: var(--fui-spacing-04);--fui-alert-gap: var(--fui-spacing-04);--fui-alert-close-padding: var(--fui-spacing-02);contain:layout style;position:relative;overflow:hidden;display:flex;font-family:var(--fui-font-family-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:all var(--fui-duration-fast-02) var(--fui-ease-standard) 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}:host.fui-alert .fui-alert__title{margin:0}: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-02);margin:-2px -2px 0 0;cursor:pointer;border-radius:var(--fui-border-radius-sm);transition:all var(--fui-duration-fast-01) var(--fui-ease-standard) 0ms}:host.fui-alert .fui-alert__close:hover{background-color:var(--fui-black-10)}: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-danger-20);--fui-alert-color: var(--fui-danger-100)}:host.fui-alert--error .fui-alert__icon{color:var(--fui-danger-100)}:host.fui-alert--generic{--fui-alert-bg: var(--fui-secondary-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"] }]
+        }], 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"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FUI_ALERT_VARIANTS, FUI_NOTIFICATION_POSITIONS, FuiAlertComponent };
+//# sourceMappingURL=raintonic-formaui-components-alert.mjs.map

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

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