tecnualng 21.0.27 → 21.1.0

package/fesm2022/tecnualng.mjs

@@ -2199,6 +2199,224 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                 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
  */
@@ -2207,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, TngSliderComponent, 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