tecnualng 21.0.26 → 21.0.28

package/fesm2022/tecnualng.mjs

@@ -1016,6 +1016,13 @@ class ThemeService {
             description: 'Neon cyberpunk vibes',
             primaryColor: '#00f2ff',
             isDark: true
+        },
+        {
+            name: 'futuristic-light',
+            displayName: 'Futuristic Light',
+            description: 'Clean cyberpunk aesthetic',
+            primaryColor: '#00c2cc',
+            isDark: false
         }
     ];
     constructor() {
@@ -2035,6 +2042,381 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"tng-select-wrapper\" [class.tng-select-open]=\"selectDirective()?.isOpen()\">\n  @if (label()) {\n  <label class=\"tng-select-label\" [attr.for]=\"selectId()\">\n    {{ label() }}\n  </label>\n  }\n\n  <div class=\"tng-select-container\">\n    <select\n      [id]=\"selectId()\"\n      tngSelect\n      [enableMulti]=\"enableMulti()\"\n      [enableSearch]=\"enableSearch()\"\n      [placeholder]=\"placeholder()\"\n      [customTrigger]=\"true\"\n      [multiple]=\"enableMulti()\"\n      [triggerRef]=\"triggerDisplay\"\n      [(selectedValues)]=\"value\"\n      [disabled]=\"effectiveDisabled()\"\n      [attr.aria-label]=\"ariaLabel() || label()\"\n    >\n      @for (option of options(); track option.value) {\n      <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n        {{ option.label }}\n      </option>\n      }\n    </select>\n\n    <div\n      class=\"tng-select-display\"\n      #triggerDisplay\n      [class.disabled]=\"effectiveDisabled()\"\n      (click)=\"onDisplayClick($event)\"\n    >\n      <span class=\"tng-select-display-text\">\n        {{ displayText() }}\n      </span>\n      <i class=\"fa fa-chevron-down tng-select-arrow\"></i>\n    </div>\n  </div>\n\n  @if (hint()) {\n  <div class=\"tng-select-hint\">\n    {{ hint() }}\n  </div>\n  }\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif)}.tng-select-wrapper{width:100%}.tng-select-label{display:block;margin-bottom:.5rem;font-size:.9rem;font-weight:500;color:var(--tng-text, #333)}.tng-select-container{position:relative}.tng-select-display{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background:var(--tng-surface, #ffffff);cursor:pointer;transition:all .2s ease;min-height:48px;font-family:var(--tng-font-family, \"Inter\", sans-serif)}.tng-select-display:hover:not(.disabled){border-color:var(--tng-text-secondary, #757575)}.tng-select-display.disabled{opacity:.6;cursor:not-allowed;background:var(--tng-background, #fafafa)}.tng-select-wrapper.tng-select-open .tng-select-display,.tng-select-display.tng-select-open{border-color:var(--tng-primary, #00f2ff);border-width:2px;padding:calc(.75rem - 1px) calc(1rem - 1px)}.tng-select-display-text{flex:1;color:var(--tng-text, #333);font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tng-select-display-text:empty:before{content:attr(data-placeholder);color:var(--tng-text-secondary, #757575)}.tng-select-arrow{color:var(--tng-text-secondary, #757575);transition:transform .2s ease;font-size:.8rem}.tng-select-wrapper.tng-select-open .tng-select-arrow,.tng-select-display.tng-select-open .tng-select-arrow{transform:rotate(180deg)}.tng-select-hint{margin-top:.25rem;font-size:.85rem;color:var(--tng-text-secondary, #757575)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], enableMulti: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableMulti", required: false }] }], enableSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSearch", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selectDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TngSelectDirective), { isSignal: true }] }] } });
 
+class TngSliderComponent {
+    // Inputs
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    // Internal state
+    value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    // Elements
+    track = viewChild.required('track');
+    // Computed
+    percentage = computed(() => {
+        const min = this.min();
+        const max = this.max();
+        const val = this.value();
+        if (max === min)
+            return 0;
+        const percent = ((val - min) / (max - min)) * 100;
+        return Math.min(Math.max(percent, 0), 100);
+    }, ...(ngDevMode ? [{ debugName: "percentage" }] : []));
+    // CVA callbacks
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        // Ensure value respects min/max/step when inputs change
+        effect(() => {
+            const val = this.value();
+            const clamped = this.clampAndStep(val);
+            if (val !== clamped) {
+                this.value.set(clamped);
+            }
+        }, { allowSignalWrites: true });
+    }
+    // CVA Implementation
+    writeValue(value) {
+        if (value !== null && value !== undefined) {
+            this.value.set(this.clampAndStep(value));
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // We handle disabled state via input, but CVA can also set it
+        // Usually we'd sync this with a signal if we wanted to support both
+    }
+    // Interaction Logic
+    onStart(event) {
+        if (this.disabled())
+            return;
+        this.isDragging.set(true);
+        this.onTouched();
+        this.updateValueFromEvent(event);
+        // Prevent text selection while dragging
+        event.preventDefault();
+    }
+    onMove(event) {
+        if (!this.isDragging() || this.disabled())
+            return;
+        this.updateValueFromEvent(event);
+    }
+    onEnd() {
+        this.isDragging.set(false);
+    }
+    updateValueFromEvent(event) {
+        const rect = this.track().nativeElement.getBoundingClientRect();
+        let percent = 0;
+        if (this.orientation() === 'horizontal') {
+            const clientX = this.getClientX(event);
+            percent = (clientX - rect.left) / rect.width;
+        }
+        else {
+            const clientY = this.getClientY(event);
+            // In vertical mode, 0 is at bottom, so we invert logic or CSS
+            // Typically slider goes bottom->top.
+            // clientY is 0 at top.
+            // So percent = (rect.bottom - clientY) / rect.height
+            percent = (rect.bottom - clientY) / rect.height;
+        }
+        percent = Math.min(Math.max(percent, 0), 1);
+        const range = this.max() - this.min();
+        const rawValue = this.min() + percent * range;
+        const newValue = this.clampAndStep(rawValue);
+        if (this.value() !== newValue) {
+            this.value.set(newValue);
+            this.onChange(newValue);
+        }
+    }
+    getClientX(event) {
+        if (event instanceof MouseEvent) {
+            return event.clientX;
+        }
+        return event.touches[0].clientX;
+    }
+    getClientY(event) {
+        if (event instanceof MouseEvent) {
+            return event.clientY;
+        }
+        return event.touches[0].clientY;
+    }
+    clampAndStep(value) {
+        const min = this.min();
+        const max = this.max();
+        const step = this.step();
+        let clamped = Math.min(Math.max(value, min), max);
+        if (step > 0) {
+            const steps = Math.round((clamped - min) / step);
+            clamped = min + steps * step;
+            // Re-clamp to handle floating point issues or partial steps at max
+            clamped = Math.min(Math.max(clamped, min), max);
+        }
+        return clamped;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TngSliderComponent, isStandalone: true, selector: "tng-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "mousedown": "onStart($event)", "touchstart": "onStart($event)", "window:mousemove": "onMove($event)", "window:touchmove": "onMove($event)", "window:mouseup": "onEnd()", "window:touchend": "onEnd()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TngSliderComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "<div \n  class=\"tng-slider-container\" \n  [class.disabled]=\"disabled()\"\n  [class.dragging]=\"isDragging()\"\n  [class.vertical]=\"orientation() === 'vertical'\">\n  \n  @if (label()) {\n    <label class=\"tng-slider-label\">{{ label() }}</label>\n  }\n\n  <div class=\"tng-slider-wrapper\">\n    <div class=\"tng-slider-track\" #track>\n      <div \n        class=\"tng-slider-fill\" \n        [style.width.%]=\"orientation() === 'horizontal' ? percentage() : 100\"\n        [style.height.%]=\"orientation() === 'vertical' ? percentage() : 100\">\n      </div>\n      <div \n        class=\"tng-slider-thumb\" \n        [style.left.%]=\"orientation() === 'horizontal' ? percentage() : 50\"\n        [style.bottom.%]=\"orientation() === 'vertical' ? percentage() : undefined\">\n        <div class=\"tng-slider-thumb-knob\"></div>\n        <div class=\"tng-slider-thumb-label\">{{ value() }}</div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.tng-slider-container{display:flex;flex-direction:column;gap:.5rem;padding:1rem 0;-webkit-user-select:none;user-select:none}.tng-slider-container.disabled{opacity:.5;pointer-events:none;filter:grayscale(1)}.tng-slider-label{font-family:inherit;font-size:.875rem;font-weight:500;color:var(--tng-text);margin-bottom:.25rem}.tng-slider-wrapper{position:relative;height:24px;display:flex;align-items:center;cursor:pointer;touch-action:none}.tng-slider-track{position:relative;width:100%;height:6px;background:rgba(var(--tng-primary),.2);background:color-mix(in srgb,var(--tng-primary),transparent 80%);border-radius:3px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);overflow:visible;border:1px solid color-mix(in srgb,var(--tng-primary),transparent 90%);box-shadow:inset 0 1px 3px #0003}.tng-slider-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,var(--tng-primary),var(--tng-secondary));border-radius:3px;transition:width .2s cubic-bezier(.4,0,.2,1);box-shadow:0 0 10px color-mix(in srgb,var(--tng-primary),transparent 50%)}.tng-slider-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center;z-index:2;transition:left .2s cubic-bezier(.4,0,.2,1)}.tng-slider-thumb-knob{width:20px;height:20px;background:var(--tng-surface);border:2px solid var(--tng-primary);border-radius:50%;box-shadow:0 2px 5px #0000004d;transition:transform .1s ease,box-shadow .2s ease}.tng-slider-thumb-knob:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:var(--tng-primary);border-radius:50%;opacity:.5}.tng-slider-thumb-label{position:absolute;top:-35px;left:50%;transform:translate(-50%) scale(0);background:color-mix(in srgb,var(--tng-surface),transparent 10%);color:var(--tng-primary);padding:4px 8px;border-radius:6px;font-size:.75rem;font-weight:700;border:1px solid color-mix(in srgb,var(--tng-primary),transparent 70%);pointer-events:none;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s ease;opacity:0;box-shadow:0 4px 10px #0003;white-space:nowrap}.tng-slider-container:hover .tng-slider-thumb-knob{box-shadow:0 0 15px color-mix(in srgb,var(--tng-primary),transparent 60%)}.tng-slider-container:hover .tng-slider-thumb-label,.tng-slider-container.dragging .tng-slider-thumb-label{transform:translate(-50%) scale(1);opacity:1}.tng-slider-container.dragging .tng-slider-fill,.tng-slider-container.dragging .tng-slider-thumb{transition:none}.tng-slider-container.dragging .tng-slider-thumb-knob{transform:scale(1.1);background:var(--tng-primary);border-color:var(--tng-text);box-shadow:0 0 20px color-mix(in srgb,var(--tng-primary),transparent 40%)}.tng-slider-container.dragging .tng-slider-thumb-knob:after{background:var(--tng-text);opacity:1}.tng-slider-container.dragging .tng-slider-track{cursor:grabbing}.tng-slider-container.vertical{height:100%;min-height:150px;flex-direction:column;align-items:center}.tng-slider-container.vertical .tng-slider-wrapper{width:24px;height:100%;flex-direction:column}.tng-slider-container.vertical .tng-slider-track{width:6px;height:100%}.tng-slider-container.vertical .tng-slider-fill{width:100%;bottom:0;top:auto;transition:height .2s cubic-bezier(.4,0,.2,1)}.tng-slider-container.vertical .tng-slider-thumb{top:auto;left:50%;transform:translate(-50%,50%);transition:bottom .2s cubic-bezier(.4,0,.2,1)}.tng-slider-container.vertical .tng-slider-thumb-label{top:50%;left:35px;transform:translateY(-50%) scale(0)}.tng-slider-container.vertical:hover .tng-slider-thumb-label,.tng-slider-container.vertical.dragging .tng-slider-thumb-label{transform:translateY(-50%) scale(1)}.tng-slider-container.vertical.dragging .tng-slider-fill,.tng-slider-container.vertical.dragging .tng-slider-thumb{transition:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-slider', standalone: true, imports: [CommonModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TngSliderComponent),
+                            multi: true,
+                        },
+                    ], template: "<div \n  class=\"tng-slider-container\" \n  [class.disabled]=\"disabled()\"\n  [class.dragging]=\"isDragging()\"\n  [class.vertical]=\"orientation() === 'vertical'\">\n  \n  @if (label()) {\n    <label class=\"tng-slider-label\">{{ label() }}</label>\n  }\n\n  <div class=\"tng-slider-wrapper\">\n    <div class=\"tng-slider-track\" #track>\n      <div \n        class=\"tng-slider-fill\" \n        [style.width.%]=\"orientation() === 'horizontal' ? percentage() : 100\"\n        [style.height.%]=\"orientation() === 'vertical' ? percentage() : 100\">\n      </div>\n      <div \n        class=\"tng-slider-thumb\" \n        [style.left.%]=\"orientation() === 'horizontal' ? percentage() : 50\"\n        [style.bottom.%]=\"orientation() === 'vertical' ? percentage() : undefined\">\n        <div class=\"tng-slider-thumb-knob\"></div>\n        <div class=\"tng-slider-thumb-label\">{{ value() }}</div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.tng-slider-container{display:flex;flex-direction:column;gap:.5rem;padding:1rem 0;-webkit-user-select:none;user-select:none}.tng-slider-container.disabled{opacity:.5;pointer-events:none;filter:grayscale(1)}.tng-slider-label{font-family:inherit;font-size:.875rem;font-weight:500;color:var(--tng-text);margin-bottom:.25rem}.tng-slider-wrapper{position:relative;height:24px;display:flex;align-items:center;cursor:pointer;touch-action:none}.tng-slider-track{position:relative;width:100%;height:6px;background:rgba(var(--tng-primary),.2);background:color-mix(in srgb,var(--tng-primary),transparent 80%);border-radius:3px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);overflow:visible;border:1px solid color-mix(in srgb,var(--tng-primary),transparent 90%);box-shadow:inset 0 1px 3px #0003}.tng-slider-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,var(--tng-primary),var(--tng-secondary));border-radius:3px;transition:width .2s cubic-bezier(.4,0,.2,1);box-shadow:0 0 10px color-mix(in srgb,var(--tng-primary),transparent 50%)}.tng-slider-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center;z-index:2;transition:left .2s cubic-bezier(.4,0,.2,1)}.tng-slider-thumb-knob{width:20px;height:20px;background:var(--tng-surface);border:2px solid var(--tng-primary);border-radius:50%;box-shadow:0 2px 5px #0000004d;transition:transform .1s ease,box-shadow .2s ease}.tng-slider-thumb-knob:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:var(--tng-primary);border-radius:50%;opacity:.5}.tng-slider-thumb-label{position:absolute;top:-35px;left:50%;transform:translate(-50%) scale(0);background:color-mix(in srgb,var(--tng-surface),transparent 10%);color:var(--tng-primary);padding:4px 8px;border-radius:6px;font-size:.75rem;font-weight:700;border:1px solid color-mix(in srgb,var(--tng-primary),transparent 70%);pointer-events:none;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s ease;opacity:0;box-shadow:0 4px 10px #0003;white-space:nowrap}.tng-slider-container:hover .tng-slider-thumb-knob{box-shadow:0 0 15px color-mix(in srgb,var(--tng-primary),transparent 60%)}.tng-slider-container:hover .tng-slider-thumb-label,.tng-slider-container.dragging .tng-slider-thumb-label{transform:translate(-50%) scale(1);opacity:1}.tng-slider-container.dragging .tng-slider-fill,.tng-slider-container.dragging .tng-slider-thumb{transition:none}.tng-slider-container.dragging .tng-slider-thumb-knob{transform:scale(1.1);background:var(--tng-primary);border-color:var(--tng-text);box-shadow:0 0 20px color-mix(in srgb,var(--tng-primary),transparent 40%)}.tng-slider-container.dragging .tng-slider-thumb-knob:after{background:var(--tng-text);opacity:1}.tng-slider-container.dragging .tng-slider-track{cursor:grabbing}.tng-slider-container.vertical{height:100%;min-height:150px;flex-direction:column;align-items:center}.tng-slider-container.vertical .tng-slider-wrapper{width:24px;height:100%;flex-direction:column}.tng-slider-container.vertical .tng-slider-track{width:6px;height:100%}.tng-slider-container.vertical .tng-slider-fill{width:100%;bottom:0;top:auto;transition:height .2s cubic-bezier(.4,0,.2,1)}.tng-slider-container.vertical .tng-slider-thumb{top:auto;left:50%;transform:translate(-50%,50%);transition:bottom .2s cubic-bezier(.4,0,.2,1)}.tng-slider-container.vertical .tng-slider-thumb-label{top:50%;left:35px;transform:translateY(-50%) scale(0)}.tng-slider-container.vertical:hover .tng-slider-thumb-label,.tng-slider-container.vertical.dragging .tng-slider-thumb-label{transform:translateY(-50%) scale(1)}.tng-slider-container.vertical.dragging .tng-slider-fill,.tng-slider-container.vertical.dragging .tng-slider-thumb{transition:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], onStart: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['touchstart', ['$event']]
+            }], onMove: [{
+                type: HostListener,
+                args: ['window:mousemove', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['window:touchmove', ['$event']]
+            }], onEnd: [{
+                type: HostListener,
+                args: ['window:mouseup']
+            }, {
+                type: HostListener,
+                args: ['window:touchend']
+            }] } });
+
+class TngLoaderComponent {
+    type = input('spinner', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    duration = input(null, ...(ngDevMode ? [{ debugName: "duration" }] : []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    progress = input(null, ...(ngDevMode ? [{ debugName: "progress" }] : []));
+    fullscreen = input(false, ...(ngDevMode ? [{ debugName: "fullscreen" }] : []));
+    inline = input(false, ...(ngDevMode ? [{ debugName: "inline" }] : []));
+    hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
+    color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
+    hostClasses = computed(() => {
+        const classes = [];
+        if (this.fullscreen()) {
+            classes.push('tng-loader--fullscreen');
+        }
+        if (this.inline()) {
+            classes.push('tng-loader--inline');
+        }
+        if (this.hidden()) {
+            classes.push('tng-loader--hidden');
+        }
+        if (this.color()) {
+            classes.push(`tng-loader--${this.color()}`);
+        }
+        classes.push(`tng-loader--type-${this.type()}`);
+        classes.push(`tng-loader--size-${this.size()}`);
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    // Helper for dynamic styles like duration
+    containerStyles = computed(() => {
+        const styles = {};
+        if (this.duration()) {
+            styles['--tng-loader-duration'] = this.duration();
+        }
+        return styles;
+    }, ...(ngDevMode ? [{ debugName: "containerStyles" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TngLoaderComponent, isStandalone: true, selector: "tng-loader", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "\"status\"", "attr.aria-label": "label() || \"Loading\"", "attr.aria-hidden": "hidden() ? \"true\" : \"false\"" }, classAttribute: "tng-loader" }, ngImport: i0, template: "@if (!hidden()) {\n  <div class=\"tng-loader__container\" [style]=\"containerStyles()\">\n    \n    @switch (type()) {\n      @case ('spinner') {\n        <svg class=\"tng-loader__spinner\" viewBox=\"0 0 50 50\">\n          <circle class=\"tng-loader__spinner-path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"5\"></circle>\n        </svg>\n      }\n      \n      @case ('bar') {\n        <div class=\"tng-loader__bar\">\n          <div class=\"tng-loader__bar-track\"></div>\n          <div class=\"tng-loader__bar-fill\" \n               [style.width.%]=\"progress() || 0\"\n               [class.tng-loader__bar-fill--indeterminate]=\"progress() === null\">\n          </div>\n        </div>\n      }\n      \n      @case ('dots') {\n        <div class=\"tng-loader__dots\">\n          <div class=\"tng-loader__dot\"></div>\n          <div class=\"tng-loader__dot\"></div>\n          <div class=\"tng-loader__dot\"></div>\n        </div>\n      }\n      \n      @case ('pulse') {\n        <div class=\"tng-loader__pulse\"></div>\n      }\n    }\n\n    @if (label()) {\n      <div class=\"tng-loader__label\">{{ label() }}</div>\n    }\n  </div>\n}\n", styles: [".tng-loader{display:block;box-sizing:border-box;--tng-loader-size: 48px;--tng-loader-color: var(--tng-primary, #6200ee);--tng-loader-duration: 1.5s}.tng-loader--inline{display:inline-block;vertical-align:middle}.tng-loader--hidden{display:none!important}.tng-loader--fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;display:flex;align-items:center;justify-content:center}.tng-loader--fullscreen .tng-loader__container{background:var(--tng-surface, white);padding:32px;border-radius:16px;box-shadow:0 4px 20px #00000026;display:flex;flex-direction:column;align-items:center;gap:16px}.tng-loader__container{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:var(--tng-loader-color)}.tng-loader__label{font-size:.875rem;font-weight:500;font-family:inherit;color:currentColor;opacity:.8}.tng-loader--size-sm{--tng-loader-size: 24px}.tng-loader--size-md{--tng-loader-size: 48px}.tng-loader--size-lg{--tng-loader-size: 72px}.tng-loader--size-xl{--tng-loader-size: 96px}.tng-loader--primary{--tng-loader-color: var(--tng-primary)}.tng-loader--secondary{--tng-loader-color: var(--tng-secondary)}.tng-loader--accent{--tng-loader-color: var(--tng-accent, #00e5ff)}.tng-loader--warn{--tng-loader-color: var(--tng-error, #b00020)}.tng-loader--type-spinner .tng-loader__spinner{width:var(--tng-loader-size);height:var(--tng-loader-size);animation:tng-rotate var(--tng-loader-duration) linear infinite}.tng-loader--type-spinner .tng-loader__spinner-path{stroke:currentColor;stroke-linecap:round;animation:tng-dash var(--tng-loader-duration) ease-in-out infinite}.tng-loader__bar{width:100%;min-width:200px;height:4px;background-color:color-mix(in srgb,currentColor,transparent 80%);border-radius:4px;overflow:hidden;position:relative}.tng-loader__bar-track{position:absolute;top:0;left:0;width:100%;height:100%}.tng-loader__bar-fill{height:100%;background-color:currentColor;transition:width .3s ease}.tng-loader__bar-fill--indeterminate{width:30%;position:absolute;animation:tng-indeterminate-bar var(--tng-loader-duration) infinite linear}.tng-loader--size-sm .tng-loader__bar{height:2px;min-width:100px}.tng-loader--size-lg .tng-loader__bar{height:6px;min-width:300px}.tng-loader--size-xl .tng-loader__bar{height:8px;min-width:400px}.tng-loader__dots{display:flex;gap:calc(var(--tng-loader-size) / 6);height:var(--tng-loader-size);align-items:center}.tng-loader__dots .tng-loader__dot{width:calc(var(--tng-loader-size) / 4);height:calc(var(--tng-loader-size) / 4);background-color:currentColor;border-radius:50%;animation:tng-bounce var(--tng-loader-duration) infinite ease-in-out both}.tng-loader__dots .tng-loader__dot:nth-child(1){animation-delay:-.32s}.tng-loader__dots .tng-loader__dot:nth-child(2){animation-delay:-.16s}.tng-loader__pulse{width:var(--tng-loader-size);height:var(--tng-loader-size);background-color:currentColor;border-radius:50%;animation:tng-pulse var(--tng-loader-duration) infinite ease-in-out}@keyframes tng-rotate{to{transform:rotate(360deg)}}@keyframes tng-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes tng-indeterminate-bar{0%{left:-30%}to{left:100%}}@keyframes tng-bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes tng-pulse{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-loader', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'tng-loader',
+                        '[class]': 'hostClasses()',
+                        '[attr.role]': '"status"',
+                        '[attr.aria-label]': 'label() || "Loading"',
+                        '[attr.aria-hidden]': 'hidden() ? "true" : "false"',
+                    }, template: "@if (!hidden()) {\n  <div class=\"tng-loader__container\" [style]=\"containerStyles()\">\n    \n    @switch (type()) {\n      @case ('spinner') {\n        <svg class=\"tng-loader__spinner\" viewBox=\"0 0 50 50\">\n          <circle class=\"tng-loader__spinner-path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"5\"></circle>\n        </svg>\n      }\n      \n      @case ('bar') {\n        <div class=\"tng-loader__bar\">\n          <div class=\"tng-loader__bar-track\"></div>\n          <div class=\"tng-loader__bar-fill\" \n               [style.width.%]=\"progress() || 0\"\n               [class.tng-loader__bar-fill--indeterminate]=\"progress() === null\">\n          </div>\n        </div>\n      }\n      \n      @case ('dots') {\n        <div class=\"tng-loader__dots\">\n          <div class=\"tng-loader__dot\"></div>\n          <div class=\"tng-loader__dot\"></div>\n          <div class=\"tng-loader__dot\"></div>\n        </div>\n      }\n      \n      @case ('pulse') {\n        <div class=\"tng-loader__pulse\"></div>\n      }\n    }\n\n    @if (label()) {\n      <div class=\"tng-loader__label\">{{ label() }}</div>\n    }\n  </div>\n}\n", styles: [".tng-loader{display:block;box-sizing:border-box;--tng-loader-size: 48px;--tng-loader-color: var(--tng-primary, #6200ee);--tng-loader-duration: 1.5s}.tng-loader--inline{display:inline-block;vertical-align:middle}.tng-loader--hidden{display:none!important}.tng-loader--fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;display:flex;align-items:center;justify-content:center}.tng-loader--fullscreen .tng-loader__container{background:var(--tng-surface, white);padding:32px;border-radius:16px;box-shadow:0 4px 20px #00000026;display:flex;flex-direction:column;align-items:center;gap:16px}.tng-loader__container{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:var(--tng-loader-color)}.tng-loader__label{font-size:.875rem;font-weight:500;font-family:inherit;color:currentColor;opacity:.8}.tng-loader--size-sm{--tng-loader-size: 24px}.tng-loader--size-md{--tng-loader-size: 48px}.tng-loader--size-lg{--tng-loader-size: 72px}.tng-loader--size-xl{--tng-loader-size: 96px}.tng-loader--primary{--tng-loader-color: var(--tng-primary)}.tng-loader--secondary{--tng-loader-color: var(--tng-secondary)}.tng-loader--accent{--tng-loader-color: var(--tng-accent, #00e5ff)}.tng-loader--warn{--tng-loader-color: var(--tng-error, #b00020)}.tng-loader--type-spinner .tng-loader__spinner{width:var(--tng-loader-size);height:var(--tng-loader-size);animation:tng-rotate var(--tng-loader-duration) linear infinite}.tng-loader--type-spinner .tng-loader__spinner-path{stroke:currentColor;stroke-linecap:round;animation:tng-dash var(--tng-loader-duration) ease-in-out infinite}.tng-loader__bar{width:100%;min-width:200px;height:4px;background-color:color-mix(in srgb,currentColor,transparent 80%);border-radius:4px;overflow:hidden;position:relative}.tng-loader__bar-track{position:absolute;top:0;left:0;width:100%;height:100%}.tng-loader__bar-fill{height:100%;background-color:currentColor;transition:width .3s ease}.tng-loader__bar-fill--indeterminate{width:30%;position:absolute;animation:tng-indeterminate-bar var(--tng-loader-duration) infinite linear}.tng-loader--size-sm .tng-loader__bar{height:2px;min-width:100px}.tng-loader--size-lg .tng-loader__bar{height:6px;min-width:300px}.tng-loader--size-xl .tng-loader__bar{height:8px;min-width:400px}.tng-loader__dots{display:flex;gap:calc(var(--tng-loader-size) / 6);height:var(--tng-loader-size);align-items:center}.tng-loader__dots .tng-loader__dot{width:calc(var(--tng-loader-size) / 4);height:calc(var(--tng-loader-size) / 4);background-color:currentColor;border-radius:50%;animation:tng-bounce var(--tng-loader-duration) infinite ease-in-out both}.tng-loader__dots .tng-loader__dot:nth-child(1){animation-delay:-.32s}.tng-loader__dots .tng-loader__dot:nth-child(2){animation-delay:-.16s}.tng-loader__pulse{width:var(--tng-loader-size);height:var(--tng-loader-size);background-color:currentColor;border-radius:50%;animation:tng-pulse var(--tng-loader-duration) infinite ease-in-out}@keyframes tng-rotate{to{transform:rotate(360deg)}}@keyframes tng-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes tng-indeterminate-bar{0%{left:-30%}to{left:100%}}@keyframes tng-bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes tng-pulse{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:0}}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+
+class TngNotificationService {
+    notifications = signal([], ...(ngDevMode ? [{ debugName: "notifications" }] : []));
+    timers = new Map();
+    remainingTimes = new Map();
+    startTimes = new Map();
+    activeNotifications = this.notifications.asReadonly();
+    show(message, options = {}) {
+        const id = options.id || this.generateId();
+        const duration = options.duration ?? 3000;
+        const config = {
+            id,
+            message,
+            type: options.type || 'default',
+            position: options.position || 'top-right',
+            duration,
+            clipboard: options.clipboard,
+            closable: options.closable ?? true,
+            icon: options.icon,
+            pauseOnHover: options.pauseOnHover ?? true,
+        };
+        this.notifications.update(current => [...current, config]);
+        if (duration > 0) {
+            this.startTimer(id, duration);
+        }
+        return id;
+    }
+    success(message, options) {
+        return this.show(message, { ...options, type: 'success' });
+    }
+    error(message, options) {
+        return this.show(message, { ...options, type: 'error' });
+    }
+    warning(message, options) {
+        return this.show(message, { ...options, type: 'warning' });
+    }
+    info(message, options) {
+        return this.show(message, { ...options, type: 'info' });
+    }
+    remove(id) {
+        this.clearTimer(id);
+        this.notifications.update(current => current.filter(n => n.id !== id));
+    }
+    clear() {
+        this.timers.forEach((timer) => clearTimeout(timer));
+        this.timers.clear();
+        this.remainingTimes.clear();
+        this.startTimes.clear();
+        this.notifications.set([]);
+    }
+    pauseTimer(id) {
+        const notification = this.notifications().find(n => n.id === id);
+        if (!notification?.pauseOnHover || !this.timers.has(id))
+            return;
+        clearTimeout(this.timers.get(id));
+        this.timers.delete(id);
+        const elapsed = Date.now() - (this.startTimes.get(id) || 0);
+        const duration = notification.duration || 3000;
+        const remaining = this.remainingTimes.has(id)
+            ? this.remainingTimes.get(id) - elapsed
+            : duration - elapsed;
+        this.remainingTimes.set(id, remaining > 0 ? remaining : 0);
+    }
+    resumeTimer(id) {
+        const notification = this.notifications().find(n => n.id === id);
+        if (!notification?.pauseOnHover || !this.remainingTimes.has(id))
+            return;
+        const remaining = this.remainingTimes.get(id) || 0;
+        if (remaining > 0) {
+            this.startTimer(id, remaining);
+        }
+        else {
+            this.remove(id);
+        }
+    }
+    startTimer(id, duration) {
+        this.startTimes.set(id, Date.now());
+        const timerId = setTimeout(() => {
+            this.remove(id);
+        }, duration);
+        this.timers.set(id, timerId);
+    }
+    clearTimer(id) {
+        if (this.timers.has(id)) {
+            clearTimeout(this.timers.get(id));
+            this.timers.delete(id);
+        }
+        this.remainingTimes.delete(id);
+        this.startTimes.delete(id);
+    }
+    generateId() {
+        return Math.random().toString(36).substring(2, 9);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngNotificationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngNotificationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class TngToastComponent {
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+    service = inject(TngNotificationService);
+    onMouseEnter() {
+        this.service.pauseTimer(this.config().id);
+    }
+    onMouseLeave() {
+        this.service.resumeTimer(this.config().id);
+    }
+    close() {
+        this.service.remove(this.config().id);
+    }
+    // Copied tooltip state
+    showCopiedTooltip = signal(false, ...(ngDevMode ? [{ debugName: "showCopiedTooltip" }] : []));
+    copyToClipboard() {
+        const text = this.config().clipboard;
+        if (text) {
+            navigator.clipboard.writeText(text).then(() => {
+                // Show tooltip
+                this.showCopiedTooltip.set(true);
+                console.log('Copied to clipboard');
+                // Hide after 4 seconds
+                setTimeout(() => {
+                    this.showCopiedTooltip.set(false);
+                }, 4000);
+            });
+        }
+    }
+    get iconClass() {
+        const type = this.config().type;
+        const customIcon = this.config().icon;
+        if (customIcon)
+            return customIcon;
+        switch (type) {
+            case 'success': return 'fa fa-check-circle';
+            case 'error': return 'fa fa-exclamation-circle';
+            case 'warning': return 'fa fa-exclamation-triangle';
+            case 'info': return 'fa fa-info-circle';
+            default: return 'fa fa-bell';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TngToastComponent, isStandalone: true, selector: "tng-toast", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div \n  class=\"tng-toast\" \n  [class]=\"'tng-toast--' + config().type\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\">\n  \n  <div class=\"tng-toast__icon\">\n    <i [class]=\"iconClass\"></i>\n  </div>\n\n  <div class=\"tng-toast__content\">\n    <div class=\"tng-toast__message\">{{ config().message }}</div>\n  </div>\n\n  <div class=\"tng-toast__actions\">\n    @if (config().clipboard) {\n      <div class=\"tng-toast__action-wrapper\">\n        <button class=\"tng-toast__action-btn\" (click)=\"copyToClipboard()\" aria-label=\"Copy to clipboard\">\n          <i class=\"fa fa-copy\"></i>\n        </button>\n        @if (showCopiedTooltip()) {\n          <div class=\"tng-toast__tooltip\">\u00A1Texto copiado al portapapeles!</div>\n        }\n      </div>\n    }\n    \n    @if (config().closable) {\n      <button class=\"tng-toast__close-btn\" (click)=\"close()\" aria-label=\"Close notification\">\n        <i class=\"fa fa-times\"></i>\n      </button>\n    }\n  </div>\n\n  @if (config().duration! > 0) {\n    <div class=\"tng-toast__progress\" [style.animation-duration]=\"config().duration + 'ms'\"></div>\n  }\n</div>\n", styles: [".tng-toast{position:relative;display:flex;align-items:center;padding:12px 16px;border-radius:8px;background:var(--tng-surface, white);box-shadow:var(--tng-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1));min-width:300px;max-width:400px;gap:12px;pointer-events:auto;border-left:4px solid transparent;color:var(--tng-text, #333);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:inherit;font-size:.875rem;line-height:1.4;margin-bottom:8px;animation:tng-toast-fade-in .3s ease-out forwards}.tng-toast__icon{flex-shrink:0;font-size:1.25rem;display:flex;align-items:center}.tng-toast__content{flex:1;word-break:break-word}.tng-toast__actions{display:flex;gap:8px;margin-left:8px}.tng-toast__action-btn,.tng-toast__close-btn{background:transparent;border:none;cursor:pointer;padding:4px;color:inherit;opacity:.6;transition:opacity .2s;border-radius:4px}.tng-toast__action-btn:hover,.tng-toast__close-btn:hover{opacity:1;background:#0000000d}.tng-toast--success{border-left-color:var(--tng-success, #2e7d32)}.tng-toast--success .tng-toast__icon{color:var(--tng-success, #2e7d32)}.tng-toast--error{border-left-color:var(--tng-error, #d32f2f)}.tng-toast--error .tng-toast__icon{color:var(--tng-error, #d32f2f)}.tng-toast--warning{border-left-color:var(--tng-warning, #ed6c02)}.tng-toast--warning .tng-toast__icon{color:var(--tng-warning, #ed6c02)}.tng-toast--info{border-left-color:var(--tng-info, #0288d1)}.tng-toast--info .tng-toast__icon{color:var(--tng-info, #0288d1)}.tng-toast--default{border-left-color:var(--tng-separator, #e0e0e0)}.tng-toast--default .tng-toast__icon{color:var(--tng-text-secondary, #757575)}@keyframes tng-toast-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.tng-toast__action-wrapper{position:relative;display:inline-block}.tng-toast__tooltip{position:absolute;bottom:100%;right:50%;transform:translate(50%);background-color:#333;color:#fff;padding:4px 8px;border-radius:4px;font-size:.75rem;white-space:nowrap;opacity:0;animation:tng-tooltip-fade .3s ease forwards;pointer-events:none;margin-bottom:8px;z-index:10}.tng-toast__tooltip:after{content:\"\";position:absolute;top:100%;left:50%;margin-left:-4px;border-width:4px;border-style:solid;border-color:#333 transparent transparent transparent}.tng-toast__progress{position:absolute;bottom:0;left:0;height:4px;background-color:var(--tng-toast-color, #ccc);width:100%;transform-origin:left;animation:tng-toast-progress linear forwards;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.tng-toast--success{--tng-toast-color: var(--tng-success, #2e7d32)}.tng-toast--error{--tng-toast-color: var(--tng-error, #d32f2f)}.tng-toast--warning{--tng-toast-color: var(--tng-warning, #ed6c02)}.tng-toast--info{--tng-toast-color: var(--tng-info, #0288d1)}.tng-toast--default{--tng-toast-color: var(--tng-text-secondary, #757575)}.tng-toast:hover .tng-toast__progress{animation-play-state:paused}@keyframes tng-toast-progress{0%{width:100%}to{width:0%}}@keyframes tng-tooltip-fade{0%{opacity:0;transform:translate(50%) translateY(4px)}to{opacity:1;transform:translate(50%) translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-toast', standalone: true, imports: [CommonModule], template: "<div \n  class=\"tng-toast\" \n  [class]=\"'tng-toast--' + config().type\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\">\n  \n  <div class=\"tng-toast__icon\">\n    <i [class]=\"iconClass\"></i>\n  </div>\n\n  <div class=\"tng-toast__content\">\n    <div class=\"tng-toast__message\">{{ config().message }}</div>\n  </div>\n\n  <div class=\"tng-toast__actions\">\n    @if (config().clipboard) {\n      <div class=\"tng-toast__action-wrapper\">\n        <button class=\"tng-toast__action-btn\" (click)=\"copyToClipboard()\" aria-label=\"Copy to clipboard\">\n          <i class=\"fa fa-copy\"></i>\n        </button>\n        @if (showCopiedTooltip()) {\n          <div class=\"tng-toast__tooltip\">\u00A1Texto copiado al portapapeles!</div>\n        }\n      </div>\n    }\n    \n    @if (config().closable) {\n      <button class=\"tng-toast__close-btn\" (click)=\"close()\" aria-label=\"Close notification\">\n        <i class=\"fa fa-times\"></i>\n      </button>\n    }\n  </div>\n\n  @if (config().duration! > 0) {\n    <div class=\"tng-toast__progress\" [style.animation-duration]=\"config().duration + 'ms'\"></div>\n  }\n</div>\n", styles: [".tng-toast{position:relative;display:flex;align-items:center;padding:12px 16px;border-radius:8px;background:var(--tng-surface, white);box-shadow:var(--tng-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1));min-width:300px;max-width:400px;gap:12px;pointer-events:auto;border-left:4px solid transparent;color:var(--tng-text, #333);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:inherit;font-size:.875rem;line-height:1.4;margin-bottom:8px;animation:tng-toast-fade-in .3s ease-out forwards}.tng-toast__icon{flex-shrink:0;font-size:1.25rem;display:flex;align-items:center}.tng-toast__content{flex:1;word-break:break-word}.tng-toast__actions{display:flex;gap:8px;margin-left:8px}.tng-toast__action-btn,.tng-toast__close-btn{background:transparent;border:none;cursor:pointer;padding:4px;color:inherit;opacity:.6;transition:opacity .2s;border-radius:4px}.tng-toast__action-btn:hover,.tng-toast__close-btn:hover{opacity:1;background:#0000000d}.tng-toast--success{border-left-color:var(--tng-success, #2e7d32)}.tng-toast--success .tng-toast__icon{color:var(--tng-success, #2e7d32)}.tng-toast--error{border-left-color:var(--tng-error, #d32f2f)}.tng-toast--error .tng-toast__icon{color:var(--tng-error, #d32f2f)}.tng-toast--warning{border-left-color:var(--tng-warning, #ed6c02)}.tng-toast--warning .tng-toast__icon{color:var(--tng-warning, #ed6c02)}.tng-toast--info{border-left-color:var(--tng-info, #0288d1)}.tng-toast--info .tng-toast__icon{color:var(--tng-info, #0288d1)}.tng-toast--default{border-left-color:var(--tng-separator, #e0e0e0)}.tng-toast--default .tng-toast__icon{color:var(--tng-text-secondary, #757575)}@keyframes tng-toast-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.tng-toast__action-wrapper{position:relative;display:inline-block}.tng-toast__tooltip{position:absolute;bottom:100%;right:50%;transform:translate(50%);background-color:#333;color:#fff;padding:4px 8px;border-radius:4px;font-size:.75rem;white-space:nowrap;opacity:0;animation:tng-tooltip-fade .3s ease forwards;pointer-events:none;margin-bottom:8px;z-index:10}.tng-toast__tooltip:after{content:\"\";position:absolute;top:100%;left:50%;margin-left:-4px;border-width:4px;border-style:solid;border-color:#333 transparent transparent transparent}.tng-toast__progress{position:absolute;bottom:0;left:0;height:4px;background-color:var(--tng-toast-color, #ccc);width:100%;transform-origin:left;animation:tng-toast-progress linear forwards;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.tng-toast--success{--tng-toast-color: var(--tng-success, #2e7d32)}.tng-toast--error{--tng-toast-color: var(--tng-error, #d32f2f)}.tng-toast--warning{--tng-toast-color: var(--tng-warning, #ed6c02)}.tng-toast--info{--tng-toast-color: var(--tng-info, #0288d1)}.tng-toast--default{--tng-toast-color: var(--tng-text-secondary, #757575)}.tng-toast:hover .tng-toast__progress{animation-play-state:paused}@keyframes tng-toast-progress{0%{width:100%}to{width:0%}}@keyframes tng-tooltip-fade{0%{opacity:0;transform:translate(50%) translateY(4px)}to{opacity:1;transform:translate(50%) translateY(0)}}\n"] }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
+
+class TngNotificationContainerComponent {
+    service = inject(TngNotificationService);
+    notifications = this.service.activeNotifications;
+    topLeft = computed(() => this.notifications().filter(n => n.position === 'top-left'), ...(ngDevMode ? [{ debugName: "topLeft" }] : []));
+    topRight = computed(() => this.notifications().filter(n => n.position === 'top-right' || !n.position), ...(ngDevMode ? [{ debugName: "topRight" }] : []));
+    topCenter = computed(() => this.notifications().filter(n => n.position === 'top-center'), ...(ngDevMode ? [{ debugName: "topCenter" }] : []));
+    bottomLeft = computed(() => this.notifications().filter(n => n.position === 'bottom-left'), ...(ngDevMode ? [{ debugName: "bottomLeft" }] : []));
+    bottomRight = computed(() => this.notifications().filter(n => n.position === 'bottom-right'), ...(ngDevMode ? [{ debugName: "bottomRight" }] : []));
+    bottomCenter = computed(() => this.notifications().filter(n => n.position === 'bottom-center'), ...(ngDevMode ? [{ debugName: "bottomCenter" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngNotificationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TngNotificationContainerComponent, isStandalone: true, selector: "tng-notification-container", ngImport: i0, template: "<div class=\"tng-notification-container tng-notification-container--top-left\">\n  @for (notification of topLeft(); track notification.id) {\n    <tng-toast [config]=\"notification\"></tng-toast>\n  }\n</div>\n\n<div class=\"tng-notification-container tng-notification-container--top-right\">\n  @for (notification of topRight(); track notification.id) {\n    <tng-toast [config]=\"notification\"></tng-toast>\n  }\n</div>\n\n<div class=\"tng-notification-container tng-notification-container--top-center\">\n  @for (notification of topCenter(); track notification.id) {\n    <tng-toast [config]=\"notification\"></tng-toast>\n  }\n</div>\n\n<div class=\"tng-notification-container tng-notification-container--bottom-left\">\n  @for (notification of bottomLeft(); track notification.id) {\n    <tng-toast [config]=\"notification\"></tng-toast>\n  }\n</div>\n\n<div class=\"tng-notification-container tng-notification-container--bottom-right\">\n  @for (notification of bottomRight(); track notification.id) {\n    <tng-toast [config]=\"notification\"></tng-toast>\n  }\n</div>\n\n<div class=\"tng-notification-container tng-notification-container--bottom-center\">\n  @for (notification of bottomCenter(); track notification.id) {\n    <tng-toast [config]=\"notification\"></tng-toast>\n  }\n</div>\n", styles: [".tng-notification-container{position:fixed;z-index:9999;display:flex;flex-direction:column;pointer-events:none;padding:16px;gap:12px;max-width:100vw;box-sizing:border-box}.tng-notification-container--top-left{top:0;left:0;align-items:flex-start}.tng-notification-container--top-right{top:0;right:0;align-items:flex-end}.tng-notification-container--top-center{top:0;left:50%;transform:translate(-50%);align-items:center}.tng-notification-container--bottom-left{bottom:0;left:0;flex-direction:column-reverse;align-items:flex-start}.tng-notification-container--bottom-right{bottom:0;right:0;flex-direction:column-reverse;align-items:flex-end}.tng-notification-container--bottom-center{bottom:0;left:50%;transform:translate(-50%);flex-direction:column-reverse;align-items:center}@media(max-width:600px){.tng-notification-container{width:100%;padding:12px}.tng-notification-container--top-left,.tng-notification-container--top-right,.tng-notification-container--top-center,.tng-notification-container--bottom-left,.tng-notification-container--bottom-right,.tng-notification-container--bottom-center{left:0;right:0;transform:none;align-items:center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TngToastComponent, selector: "tng-toast", inputs: ["config"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngNotificationContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-notification-container', standalone: true, imports: [CommonModule, TngToastComponent], template: "<div class=\"tng-notification-container tng-notification-container--top-left\">\n  @for (notification of topLeft(); track notification.id) {\n    <tng-toast [config]=\"notification\"></tng-toast>\n  }\n</div>\n\n<div class=\"tng-notification-container tng-notification-container--top-right\">\n  @for (notification of topRight(); track notification.id) {\n    <tng-toast [config]=\"notification\"></tng-toast>\n  }\n</div>\n\n<div class=\"tng-notification-container tng-notification-container--top-center\">\n  @for (notification of topCenter(); track notification.id) {\n    <tng-toast [config]=\"notification\"></tng-toast>\n  }\n</div>\n\n<div class=\"tng-notification-container tng-notification-container--bottom-left\">\n  @for (notification of bottomLeft(); track notification.id) {\n    <tng-toast [config]=\"notification\"></tng-toast>\n  }\n</div>\n\n<div class=\"tng-notification-container tng-notification-container--bottom-right\">\n  @for (notification of bottomRight(); track notification.id) {\n    <tng-toast [config]=\"notification\"></tng-toast>\n  }\n</div>\n\n<div class=\"tng-notification-container tng-notification-container--bottom-center\">\n  @for (notification of bottomCenter(); track notification.id) {\n    <tng-toast [config]=\"notification\"></tng-toast>\n  }\n</div>\n", styles: [".tng-notification-container{position:fixed;z-index:9999;display:flex;flex-direction:column;pointer-events:none;padding:16px;gap:12px;max-width:100vw;box-sizing:border-box}.tng-notification-container--top-left{top:0;left:0;align-items:flex-start}.tng-notification-container--top-right{top:0;right:0;align-items:flex-end}.tng-notification-container--top-center{top:0;left:50%;transform:translate(-50%);align-items:center}.tng-notification-container--bottom-left{bottom:0;left:0;flex-direction:column-reverse;align-items:flex-start}.tng-notification-container--bottom-right{bottom:0;right:0;flex-direction:column-reverse;align-items:flex-end}.tng-notification-container--bottom-center{bottom:0;left:50%;transform:translate(-50%);flex-direction:column-reverse;align-items:center}@media(max-width:600px){.tng-notification-container{width:100%;padding:12px}.tng-notification-container--top-left,.tng-notification-container--top-right,.tng-notification-container--top-center,.tng-notification-container--bottom-left,.tng-notification-container--bottom-right,.tng-notification-container--bottom-center{left:0;right:0;transform:none;align-items:center}}\n"] }]
+        }] });
+
 /*
  * Public API Surface of tecnualng
  */
@@ -2043,5 +2425,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { TecnualDatepickerComponent, TecnualInputComponent, TecnualTableComponent, ThemeService, TngButton, TngCardComponent, TngExpansionPanelComponent, TngFormFieldComponent, TngInputDirective, TngMenuComponent, TngMenuGroupComponent, TngMenuItemComponent, TngSelectComponent, TngSelectDirective, TngSelectPanelComponent, TngSidebarComponent, TngTabComponent, TngTabsComponent, TngTextareaComponent, TngTextareaDirective, TngToolbarComponent, TngTooltipComponent, TngTooltipDirective };
+export { TecnualDatepickerComponent, TecnualInputComponent, TecnualTableComponent, ThemeService, TngButton, TngCardComponent, TngExpansionPanelComponent, TngFormFieldComponent, TngInputDirective, TngLoaderComponent, TngMenuComponent, TngMenuGroupComponent, TngMenuItemComponent, TngNotificationContainerComponent, TngNotificationService, TngSelectComponent, TngSelectDirective, TngSelectPanelComponent, TngSidebarComponent, TngSliderComponent, TngTabComponent, TngTabsComponent, TngTextareaComponent, TngTextareaDirective, TngToastComponent, TngToolbarComponent, TngTooltipComponent, TngTooltipDirective };
 //# sourceMappingURL=tecnualng.mjs.map