gentera-rdnd 0.2.2 → 0.2.3

package/fesm2022/gentera-rdnd.mjs

@@ -0,0 +1,794 @@
+import * as i0 from '@angular/core';
+import { Input, Component, output, InjectionToken, Optional, Inject, Injectable, EventEmitter, Output } from '@angular/core';
+import { NgStyle, NgClass, NgIf, CommonModule } from '@angular/common';
+import * as i2 from '@fortawesome/angular-fontawesome';
+import { FaIconComponent, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faBarsStaggered, faSignOut, faTimes, faArrowRight, faChevronDown, faChevronUp, faCircle, faEyeSlash, faCircleInfo, faCircleCheck, faCircleQuestion } from '@fortawesome/free-solid-svg-icons';
+import { RouterLink } from '@angular/router';
+import { BehaviorSubject, Subscription } from 'rxjs';
+import * as i3 from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons/faTriangleExclamation';
+
+const colors = {
+    black: '#171717',
+    'black-light': '#343434',
+    'black-dark': '#000000',
+    'black-navy': '#191a21',
+    'xs-dark-gray': '#5A5A5A',
+    'dark-gray': '#9E9E9E',
+    'medium-gray': '#AFAFAF',
+    gray: '#C4C4C4',
+    'light-gray': '#C6C6C6',
+    'xs-light-gray': '#DFDFDF',
+    'xxs-light-gray': '#F2F2F2',
+    'soft-white': '#EEEEEE',
+    green: '#28a746',
+    'green-medium': '#208B6A',
+    'green-dark': '#156a29',
+    'green-xs-dark': 'rgb(33, 97, 90)',
+    'green-1': '#009F74',
+    'green-2': '#00B987',
+    'green-3': '#19C496',
+    'green-light': '#84ce94',
+    'green-4': '#50D8B3',
+    'green-5': '#83E6B8',
+    "blue-info": '#7390EC',
+    blue: '#3360fa',
+    'blue-dark': '#1a389e',
+    'blue-light': '#3390fa',
+    'blue-gray-soft': '#E5EAEDFF',
+    'blue-gray-light': 'rgb(244,247,250)',
+    orange: '#F77C00',
+    'orange-light': '#F7B500',
+    yellow: '#F09D00',
+    "yellow-normal": '#FFBC57',
+    'yellow-light': '#FFC400',
+    purple: '#6459be',
+    'purple-light': 'rgb(149, 138, 242)',
+    red: '#E60018',
+    'red-light': '#e74364',
+    'red-medium': '#c51628',
+    "white": "#FFFFFF",
+    "magentaStart": "#C2185B",
+    "magentaEnd": "#7E0083",
+    'magenta-normal': '#B41364',
+    disabled: '#C6C6C6',
+    "disabledText": "#9E9E9E",
+};
+
+class RdndScreenTitle {
+    title;
+    align = 'CENTER';
+    color = colors["magentaEnd"];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RdndScreenTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: RdndScreenTitle, isStandalone: true, selector: "rdnd-screen-title", inputs: { title: "title", align: "align", color: "color" }, ngImport: i0, template: "<h1 [class]=\" 'align-' + align \" [ngStyle]=\"{\n  color: color\n}\">\n  {{ title }}\n</h1>\n", styles: ["h1{font-size:24px;font-family:Poppins,sans-serif;font-weight:400;width:100%}h1.align-LEFT{text-align:left}h1.align-CENTER{text-align:center}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RdndScreenTitle, decorators: [{
+            type: Component,
+            args: [{ selector: 'rdnd-screen-title', standalone: true, imports: [
+                        NgClass,
+                        NgStyle
+                    ], template: "<h1 [class]=\" 'align-' + align \" [ngStyle]=\"{\n  color: color\n}\">\n  {{ title }}\n</h1>\n", styles: ["h1{font-size:24px;font-family:Poppins,sans-serif;font-weight:400;width:100%}h1.align-LEFT{text-align:left}h1.align-CENTER{text-align:center}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+class RdndNavbar {
+    // Icons
+    faBarsStaggered = faBarsStaggered;
+    faSignOut = faSignOut;
+    faTimes = faTimes;
+    // States
+    showLoader = false;
+    // Inputs & Outputs
+    userName = "";
+    imageUrl = "";
+    backgroundStart = "#C2185B";
+    backgroundEnd = "#7E0083";
+    showSidebar = false;
+    onSignOut = output();
+    onToggleSidebar = output();
+    // Functions
+    toggleMenu = () => {
+        this.showSidebar = !this.showSidebar;
+        this.onToggleSidebar.emit();
+    };
+    closeMenu = () => {
+        this.showSidebar = false;
+    };
+    handleSignOut = () => {
+        this.onSignOut.emit();
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RdndNavbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: RdndNavbar, isStandalone: true, selector: "rdnd-navbar", inputs: { userName: "userName", imageUrl: "imageUrl", backgroundStart: "backgroundStart", backgroundEnd: "backgroundEnd", showSidebar: "showSidebar" }, outputs: { onSignOut: "onSignOut", onToggleSidebar: "onToggleSidebar" }, ngImport: i0, template: "<nav [ngStyle]=\"{'background': 'linear-gradient(to right, ' + backgroundStart + ', ' + backgroundEnd + ')'}\">\n\n  <div class=\"rdnd-nav-container\">\n    <button (click)=\"toggleMenu()\" >\n      <fa-icon [icon]=\"showSidebar ? faTimes : faBarsStaggered\"></fa-icon>\n    </button>\n\n    @if (imageUrl) {\n      <a [routerLink]=\"['/']\">\n        <img src=\"{{imageUrl}}\" alt=\"\">\n      </a>\n    }\n\n    <button (click)=\"handleSignOut()\">\n      <fa-icon [icon]=\"faSignOut\"></fa-icon>\n    </button>\n  </div>\n\n</nav>\n", styles: ["nav{width:100%;height:40px;padding:0 16px}nav .rdnd-nav-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}nav .rdnd-nav-container a img{height:30px}nav .rdnd-nav-container button{appearance:none;cursor:pointer;background-color:transparent;border:0;outline:none;height:40px;width:40px;color:#fff;font-size:18px;transition:all .3s ease}nav .rdnd-nav-container button:hover{opacity:.6}\n"], dependencies: [{ kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RdndNavbar, decorators: [{
+            type: Component,
+            args: [{ selector: 'rdnd-navbar', standalone: true, imports: [
+                        FaIconComponent,
+                        NgStyle,
+                        RouterLink
+                    ], template: "<nav [ngStyle]=\"{'background': 'linear-gradient(to right, ' + backgroundStart + ', ' + backgroundEnd + ')'}\">\n\n  <div class=\"rdnd-nav-container\">\n    <button (click)=\"toggleMenu()\" >\n      <fa-icon [icon]=\"showSidebar ? faTimes : faBarsStaggered\"></fa-icon>\n    </button>\n\n    @if (imageUrl) {\n      <a [routerLink]=\"['/']\">\n        <img src=\"{{imageUrl}}\" alt=\"\">\n      </a>\n    }\n\n    <button (click)=\"handleSignOut()\">\n      <fa-icon [icon]=\"faSignOut\"></fa-icon>\n    </button>\n  </div>\n\n</nav>\n", styles: ["nav{width:100%;height:40px;padding:0 16px}nav .rdnd-nav-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}nav .rdnd-nav-container a img{height:30px}nav .rdnd-nav-container button{appearance:none;cursor:pointer;background-color:transparent;border:0;outline:none;height:40px;width:40px;color:#fff;font-size:18px;transition:all .3s ease}nav .rdnd-nav-container button:hover{opacity:.6}\n"] }]
+        }], propDecorators: { userName: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }], backgroundStart: [{
+                type: Input
+            }], backgroundEnd: [{
+                type: Input
+            }], showSidebar: [{
+                type: Input
+            }] } });
+
+class RdndSidebar {
+    //  Inputs
+    show = false;
+    user;
+    entries = [];
+    backgroundStart = '#C2185B';
+    backgroundEnd = '#7E0083';
+    activeRoute = '/';
+    // Outputs
+    onClickEntry = output();
+    faArrowRight = faArrowRight;
+    faChevronDown = faChevronDown;
+    faChevronUp = faChevronUp;
+    faCircle = faCircle;
+    openSections = new Set();
+    handleClick = () => {
+        this.onClickEntry.emit();
+    };
+    toggleSection(name) {
+        this.openSections.has(name)
+            ? this.openSections.delete(name)
+            : this.openSections.add(name);
+    }
+    isSectionOpen(section) {
+        const hasActiveChild = section.entries?.some(entry => this.activeRoute === `/${section.url}${entry.url}`);
+        return hasActiveChild || this.openSections.has(section.name);
+    }
+    isActiveRoute(itemRoute) {
+        return this.activeRoute === itemRoute;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RdndSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: RdndSidebar, isStandalone: true, selector: "rdnd-sidebar", inputs: { show: "show", user: "user", entries: "entries", backgroundStart: "backgroundStart", backgroundEnd: "backgroundEnd", activeRoute: "activeRoute" }, outputs: { onClickEntry: "onClickEntry" }, ngImport: i0, template: "@if (show) {\n  <div\n    class=\"background-overlay\"\n    (click)=\"handleClick()\"\n    [ngClass]=\"show ? 'open' : 'closed'\">\n  </div>\n}\n\n<aside\n  id=\"sidebar\"\n  class=\"sidebar\"\n  [ngClass]=\"show ? 'open' : 'closed'\"\n  [ngStyle]=\"{\n    'background': 'linear-gradient(to bottom, ' + backgroundStart + ', ' + backgroundEnd + ')'\n  }\"\n>\n\n  @if (user) {\n\n    <div class=\"user-details\">\n      @if (user.photo) {\n        <img src=\"{{user.photo}}\" alt='{{user.name}}' class=\"user-image\">\n      } @else {\n        <div class=\"user-image\">\n          <svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n               x=\"0px\" y=\"0px\"\n               viewBox=\"0 0 554 481\" style=\"enable-background:new 0 0 554 481;\" xml:space=\"preserve\">\n<style type=\"text/css\">\n\t.st0 {\n    fill: none;\n  }\n\n  .st1 {\n    fill: #E85E16;\n  }\n\n  .st2 {\n    fill: #9D0046;\n  }\n\n  .st3 {\n    fill: #592275;\n  }\n\n  .st4 {\n    fill: #CD0058;\n  }\n\n  .st5 {\n    fill: #00587F;\n  }\n\n  .st6 {\n    fill: #229B7D;\n  }\n</style>\n            <rect class=\"st0\" width=\"554\" height=\"481\"/>\n            <g>\n\t<path id=\"naranja\" class=\"st1\" d=\"M277.4,128.4c74.7-40.1,146.4-40,154.5-40c8.1,48,13.7,67-7.9,121.3\n\t\tc-24.2,43.8-169.9,71.1-169.9,71.1l0,0c2.7-5.3-3.7-67.7-3.7-67.7S248.6,141.8,277.4,128.4\"/>\n              <path id=\"roja\" class=\"st2\" d=\"M449.8,205.7c-2.6,16-11.6,58-43.6,101.2s-99.9,85.5-138,96s-35.3,8-51.6,8\n\t\tc-10-28.6-11.3-33.9-4.9-81.3s22.9-61.8,56.5-80c24.4-10.7,48.7-17.3,73.1-25.3C379.4,213.7,417.4,208.3,449.8,205.7\"/>\n              <path id=\"morada\" class=\"st3\" d=\"M236.8,95.1c18.8-8.3,43.1-16.7,70-25.2c-7.8,18.8-10.1,42.8-15.2,66.9\n\t\tc-6.6,43.2-12.8,104.4-40.2,136.6C217.9,313,127.3,348.2,127,347.6l-2.5,0c-14.4-50.4-20.6-93-15.7-125\n\t\tC116,166.4,150.6,131.2,236.8,95.1L236.8,95.1\"/>\n              <path id=\"fushia\" class=\"st4\" d=\"M425.5,246h13.6c-13.5,37.3-31.4,76.2-72,105.6c-69,48.9-98.8,50.7-98.8,50.7S341.4,254,425.5,246\n\t\t\"/>\n              <path id=\"azul\" class=\"st5\" d=\"M122.5,344.1L122.5,344.1c13.6,45.3,48.8,69.3,100.3,66.6c24.4-48,44-108.8,52.1-164.7\n\t\tC218,272.7,165.9,312.1,122.5,344.1\"/>\n              <path id=\"verde\" class=\"st6\" d=\"M277,232.3c5.4-37.3,10.8-72,16.2-103.9C206.5,171,144.2,251,122.5,344.3\n\t\tc43.4-32,95.2-70.3,152.1-97\"/>\n</g>\n</svg>\n        </div>\n      }\n\n      <div class=\"data\">\n        <span>\n          <fa-icon [icon]=\"faCircle\" class=\"icon\"></fa-icon>\n          {{ user.name }}\n        </span>\n        <span class=\"email\">\n          {{ user.email }}\n        </span>\n      </div>\n\n    </div>\n\n  }\n\n  <ul class=\"entries\">\n    @for (item of entries; track item.name) {\n\n      @if (item.type === 'ENTRY') {\n        <li>\n          <a\n            [routerLink]=\"[item.url]\"\n            class=\"entry\"\n            (click)=\"handleClick()\"\n            [ngClass]=\"{\n              activeRoute: activeRoute === item.url\n            }\"\n          >\n            <fa-icon [icon]=\"faArrowRight\"/>\n            {{ item.name }}\n          </a>\n        </li>\n      } @else if (item.type === 'SECTION') {\n        <li class=\"section\">\n\n          <div class=\"section-title\" (click)=\"toggleSection(item.name)\">\n            <fa-icon\n              [icon]=\"isSectionOpen(item) ? faChevronUp : faChevronDown\"\n              class=\"chevron\"\n            />\n            <span>{{ item.name }}</span>\n          </div>\n\n          @if (isSectionOpen(item)) {\n            <ul class=\"section-entries\">\n              @for (entry of item.entries; track entry.name) {\n                <li>\n                  <a\n                    [routerLink]=\"[item.url + entry.url]\"\n                    (click)=\"handleClick()\"\n                    class=\"entry\"\n                    [ngClass]=\"{\n                      activeRoute: isActiveRoute('/' + item.url + entry.url)\n                    }\"\n                  >\n                    <fa-icon [icon]=\"faArrowRight\" class=\"icon\"/>\n                    {{ entry.name }}\n                  </a>\n                </li>\n              }\n              <hr/>\n            </ul>\n          }\n        </li>\n      }\n    }\n\n  </ul>\n</aside>\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1;display:flex}to{opacity:0;display:none}}div.background-overlay{position:fixed;top:40px;left:0;width:100%;height:calc(100% - 40px);background-color:#000c;transition:all .3s ease-in-out;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:89}div.background-overlay.closed{opacity:0;visibility:hidden;animation:fadeOut .3s ease-in-out}div.background-overlay.open{opacity:1;visibility:visible;animation:fadeIn .3s ease-in-out}aside.sidebar{border-top:1px solid white;position:fixed;top:40px;height:calc(100% - 40px);overflow-y:auto;width:100%;max-width:400px;padding:0 0 16px;display:grid;grid-template-rows:auto 1fr auto;gap:10px;box-sizing:border-box;transition:left .3s ease-in-out;box-shadow:-2px 0 55px #0000004d;z-index:90}aside.sidebar.open{left:0}aside.sidebar.closed{left:-100%}aside.sidebar .user-details{border-top:1px solid rgba(242,242,242,.22);border-bottom:1px solid rgba(242,242,242,.22);margin:0 20px;padding:10px 0;display:grid;grid-template-columns:70px 1fr;grid-template-rows:70px;column-gap:20px;place-items:start;place-content:center;box-sizing:border-box}aside.sidebar .user-details .user-image{background-color:#fff;border:2px solid white;width:70px;height:70px;grid-column:1;grid-row:1/3;border-radius:50%;display:flex;place-items:center;place-content:center}aside.sidebar .user-details .data{grid-row:1;grid-column:2;height:100%;display:flex;flex-direction:column;justify-content:center;margin:auto 0;gap:8px}aside.sidebar .user-details .data span{height:fit-content;margin:0;padding:0;grid-column:2;display:flex;align-items:center;color:#fff;font-size:16px}aside.sidebar .user-details .data span .icon{font-size:8px;color:#65a518;margin-right:4px}aside.sidebar .user-details .data span.email{font-size:12px}aside.sidebar .entries{width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}aside.sidebar .entries li{width:100%;box-sizing:border-box}aside.sidebar .entries li .entry{width:100%;margin:0;padding:14px 20px;box-sizing:border-box;background-color:transparent;transition:all .3s ease;color:#fff;text-decoration:none;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;font-size:14px}aside.sidebar .entries li .entry:hover{background-color:#0000004d}aside.sidebar .entries li .entry.activeRoute{background-color:#0000001a}aside.sidebar .entries li.section{width:100%;box-sizing:border-box}aside.sidebar .entries li.section .section-title{width:100%;margin:0;padding:14px 20px;color:#fff;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;-webkit-user-select:none;user-select:none;cursor:pointer;font-size:14px}aside.sidebar .entries li.section .section-title .chevron{font-size:12px}aside.sidebar .entries li.section .section-title:hover{background-color:#ffffff0d}aside.sidebar .entries li.section .section-entries{animation:fadeIn .3s ease-in-out}aside.sidebar .entries li.section .section-entries .entry{padding:14px 30px}aside.sidebar .entries li.section .section-entries .entry .icon{font-size:10px}aside.sidebar .entries li.section .section-entries hr{width:calc(100% - 40px);margin:auto;padding:0 20px 0 30px;color:#fff3;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RdndSidebar, decorators: [{
+            type: Component,
+            args: [{ selector: 'rdnd-sidebar', standalone: true, imports: [
+                        NgClass,
+                        NgStyle,
+                        RouterLink,
+                        FaIconComponent,
+                    ], template: "@if (show) {\n  <div\n    class=\"background-overlay\"\n    (click)=\"handleClick()\"\n    [ngClass]=\"show ? 'open' : 'closed'\">\n  </div>\n}\n\n<aside\n  id=\"sidebar\"\n  class=\"sidebar\"\n  [ngClass]=\"show ? 'open' : 'closed'\"\n  [ngStyle]=\"{\n    'background': 'linear-gradient(to bottom, ' + backgroundStart + ', ' + backgroundEnd + ')'\n  }\"\n>\n\n  @if (user) {\n\n    <div class=\"user-details\">\n      @if (user.photo) {\n        <img src=\"{{user.photo}}\" alt='{{user.name}}' class=\"user-image\">\n      } @else {\n        <div class=\"user-image\">\n          <svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n               x=\"0px\" y=\"0px\"\n               viewBox=\"0 0 554 481\" style=\"enable-background:new 0 0 554 481;\" xml:space=\"preserve\">\n<style type=\"text/css\">\n\t.st0 {\n    fill: none;\n  }\n\n  .st1 {\n    fill: #E85E16;\n  }\n\n  .st2 {\n    fill: #9D0046;\n  }\n\n  .st3 {\n    fill: #592275;\n  }\n\n  .st4 {\n    fill: #CD0058;\n  }\n\n  .st5 {\n    fill: #00587F;\n  }\n\n  .st6 {\n    fill: #229B7D;\n  }\n</style>\n            <rect class=\"st0\" width=\"554\" height=\"481\"/>\n            <g>\n\t<path id=\"naranja\" class=\"st1\" d=\"M277.4,128.4c74.7-40.1,146.4-40,154.5-40c8.1,48,13.7,67-7.9,121.3\n\t\tc-24.2,43.8-169.9,71.1-169.9,71.1l0,0c2.7-5.3-3.7-67.7-3.7-67.7S248.6,141.8,277.4,128.4\"/>\n              <path id=\"roja\" class=\"st2\" d=\"M449.8,205.7c-2.6,16-11.6,58-43.6,101.2s-99.9,85.5-138,96s-35.3,8-51.6,8\n\t\tc-10-28.6-11.3-33.9-4.9-81.3s22.9-61.8,56.5-80c24.4-10.7,48.7-17.3,73.1-25.3C379.4,213.7,417.4,208.3,449.8,205.7\"/>\n              <path id=\"morada\" class=\"st3\" d=\"M236.8,95.1c18.8-8.3,43.1-16.7,70-25.2c-7.8,18.8-10.1,42.8-15.2,66.9\n\t\tc-6.6,43.2-12.8,104.4-40.2,136.6C217.9,313,127.3,348.2,127,347.6l-2.5,0c-14.4-50.4-20.6-93-15.7-125\n\t\tC116,166.4,150.6,131.2,236.8,95.1L236.8,95.1\"/>\n              <path id=\"fushia\" class=\"st4\" d=\"M425.5,246h13.6c-13.5,37.3-31.4,76.2-72,105.6c-69,48.9-98.8,50.7-98.8,50.7S341.4,254,425.5,246\n\t\t\"/>\n              <path id=\"azul\" class=\"st5\" d=\"M122.5,344.1L122.5,344.1c13.6,45.3,48.8,69.3,100.3,66.6c24.4-48,44-108.8,52.1-164.7\n\t\tC218,272.7,165.9,312.1,122.5,344.1\"/>\n              <path id=\"verde\" class=\"st6\" d=\"M277,232.3c5.4-37.3,10.8-72,16.2-103.9C206.5,171,144.2,251,122.5,344.3\n\t\tc43.4-32,95.2-70.3,152.1-97\"/>\n</g>\n</svg>\n        </div>\n      }\n\n      <div class=\"data\">\n        <span>\n          <fa-icon [icon]=\"faCircle\" class=\"icon\"></fa-icon>\n          {{ user.name }}\n        </span>\n        <span class=\"email\">\n          {{ user.email }}\n        </span>\n      </div>\n\n    </div>\n\n  }\n\n  <ul class=\"entries\">\n    @for (item of entries; track item.name) {\n\n      @if (item.type === 'ENTRY') {\n        <li>\n          <a\n            [routerLink]=\"[item.url]\"\n            class=\"entry\"\n            (click)=\"handleClick()\"\n            [ngClass]=\"{\n              activeRoute: activeRoute === item.url\n            }\"\n          >\n            <fa-icon [icon]=\"faArrowRight\"/>\n            {{ item.name }}\n          </a>\n        </li>\n      } @else if (item.type === 'SECTION') {\n        <li class=\"section\">\n\n          <div class=\"section-title\" (click)=\"toggleSection(item.name)\">\n            <fa-icon\n              [icon]=\"isSectionOpen(item) ? faChevronUp : faChevronDown\"\n              class=\"chevron\"\n            />\n            <span>{{ item.name }}</span>\n          </div>\n\n          @if (isSectionOpen(item)) {\n            <ul class=\"section-entries\">\n              @for (entry of item.entries; track entry.name) {\n                <li>\n                  <a\n                    [routerLink]=\"[item.url + entry.url]\"\n                    (click)=\"handleClick()\"\n                    class=\"entry\"\n                    [ngClass]=\"{\n                      activeRoute: isActiveRoute('/' + item.url + entry.url)\n                    }\"\n                  >\n                    <fa-icon [icon]=\"faArrowRight\" class=\"icon\"/>\n                    {{ entry.name }}\n                  </a>\n                </li>\n              }\n              <hr/>\n            </ul>\n          }\n        </li>\n      }\n    }\n\n  </ul>\n</aside>\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1;display:flex}to{opacity:0;display:none}}div.background-overlay{position:fixed;top:40px;left:0;width:100%;height:calc(100% - 40px);background-color:#000c;transition:all .3s ease-in-out;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:89}div.background-overlay.closed{opacity:0;visibility:hidden;animation:fadeOut .3s ease-in-out}div.background-overlay.open{opacity:1;visibility:visible;animation:fadeIn .3s ease-in-out}aside.sidebar{border-top:1px solid white;position:fixed;top:40px;height:calc(100% - 40px);overflow-y:auto;width:100%;max-width:400px;padding:0 0 16px;display:grid;grid-template-rows:auto 1fr auto;gap:10px;box-sizing:border-box;transition:left .3s ease-in-out;box-shadow:-2px 0 55px #0000004d;z-index:90}aside.sidebar.open{left:0}aside.sidebar.closed{left:-100%}aside.sidebar .user-details{border-top:1px solid rgba(242,242,242,.22);border-bottom:1px solid rgba(242,242,242,.22);margin:0 20px;padding:10px 0;display:grid;grid-template-columns:70px 1fr;grid-template-rows:70px;column-gap:20px;place-items:start;place-content:center;box-sizing:border-box}aside.sidebar .user-details .user-image{background-color:#fff;border:2px solid white;width:70px;height:70px;grid-column:1;grid-row:1/3;border-radius:50%;display:flex;place-items:center;place-content:center}aside.sidebar .user-details .data{grid-row:1;grid-column:2;height:100%;display:flex;flex-direction:column;justify-content:center;margin:auto 0;gap:8px}aside.sidebar .user-details .data span{height:fit-content;margin:0;padding:0;grid-column:2;display:flex;align-items:center;color:#fff;font-size:16px}aside.sidebar .user-details .data span .icon{font-size:8px;color:#65a518;margin-right:4px}aside.sidebar .user-details .data span.email{font-size:12px}aside.sidebar .entries{width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}aside.sidebar .entries li{width:100%;box-sizing:border-box}aside.sidebar .entries li .entry{width:100%;margin:0;padding:14px 20px;box-sizing:border-box;background-color:transparent;transition:all .3s ease;color:#fff;text-decoration:none;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;font-size:14px}aside.sidebar .entries li .entry:hover{background-color:#0000004d}aside.sidebar .entries li .entry.activeRoute{background-color:#0000001a}aside.sidebar .entries li.section{width:100%;box-sizing:border-box}aside.sidebar .entries li.section .section-title{width:100%;margin:0;padding:14px 20px;color:#fff;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;-webkit-user-select:none;user-select:none;cursor:pointer;font-size:14px}aside.sidebar .entries li.section .section-title .chevron{font-size:12px}aside.sidebar .entries li.section .section-title:hover{background-color:#ffffff0d}aside.sidebar .entries li.section .section-entries{animation:fadeIn .3s ease-in-out}aside.sidebar .entries li.section .section-entries .entry{padding:14px 30px}aside.sidebar .entries li.section .section-entries .entry .icon{font-size:10px}aside.sidebar .entries li.section .section-entries hr{width:calc(100% - 40px);margin:auto;padding:0 20px 0 30px;color:#fff3;box-sizing:border-box}\n"] }]
+        }], propDecorators: { show: [{
+                type: Input
+            }], user: [{
+                type: Input
+            }], entries: [{
+                type: Input
+            }], backgroundStart: [{
+                type: Input
+            }], backgroundEnd: [{
+                type: Input
+            }], activeRoute: [{
+                type: Input
+            }] } });
+
+// src/lib/config/rdnd-config.token.ts
+const RDND_CONFIG = new InjectionToken('RDND_CONFIG');
+
+class RdndLoaderComponent {
+    show = false;
+    loaderType = 'gentera';
+    constructor(config) {
+        const type = config?.loader?.loaderType;
+        if (type === 'gentera' || type === 'compartamos') {
+            this.loaderType = type;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RdndLoaderComponent, deps: [{ token: RDND_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: RdndLoaderComponent, isStandalone: true, selector: "rdnd-loader", inputs: { show: "show" }, ngImport: i0, template: "@if (show) {\n  <div class=\"loader\">\n    @if (loaderType === 'compartamos') {\n      <div class=\"svg-wrapper\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" xmlns:cc=\"http://creativecommons.org/ns#\"\n             xmlns:dc=\"http://purl.org/dc/elements/1.1/\" xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"\n             xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"\n             xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\" xmlns:svg=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 1629.3 720\">\n          <defs>\n            <style>\n              .cls-1 {\n                fill: #fff;\n              }\n\n              .cls-2 {\n                fill: #8d104b;\n              }\n\n              .cls-3 {\n                fill: #f7961c;\n              }\n            </style>\n          </defs>\n          <!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142)  -->\n          <g>\n            <g id=\"Capa_1\">\n              <path id=\"path16\" class=\"cls-3\"\n                    d=\"M664.5,84.3c-7,1.3-43.6-10.4-43.6-10.4,0,0,26.2,19.3,28.4,22.7,2.2,3.5-7.9,33-7.9,33,0,0,19.3-22.3,26.6-29,4.4-4,14.6-2.1,19.5-.9,4.9,1.2,53.4,14.5,101.8-14.4,31.6-18.9,31.5-23,31.5-23,0,0-26.5-21.5-69.6-16.6-43.2,5-79.8,37.1-86.8,38.4\"/>\n              <path id=\"path18\" class=\"cls-2\"\n                    d=\"M507.7,668.9c-8.4,2.3-52.7,1.7-52.7,1.7,0,0,31,14,33.5,17,2.4,2.9-10.4,32.4-10.4,32.4,0,0,20.7-21.3,29.6-28.8,5.4-4.5,17.1-5.9,26.7-6.7,5.9-.5,63.8,5.2,122.8-29.6,38.5-22.7,38.5-26.6,38.5-26.6,0,0-37.8-20.3-89.8-8.8-51.9,11.5-89.7,47.1-98.1,49.5\"/>\n              <path id=\"path20\" class=\"cls-3\"\n                    d=\"M1368.2,125.5c-11.8,2.3-72.1-3.5-72.1-3.5,0,0,40.7,22.6,43.8,26.9,3,4.2-17.9,43.1-17.9,43.1,0,0,30.6-26.8,43.7-35.9,7.9-5.6,24.1-6.1,37.1-6.1s86.5,14.3,171-26.6c55.2-26.8,55.5-32.1,55.5-32.1,0,0-49.3-32-121.6-22.2-72.2,9.9-127.7,54.2-139.5,56.5\"/>\n              <path id=\"path22\" class=\"cls-3\"\n                    d=\"M77.2,575.8c-12.3,2.6-77.2-17-77.2-17,0,0,46.9,33.2,50.8,39.3,3.8,6.1-13,58.5-13,58.5,0,0,33.4-39.9,46.1-51.8,7.7-7.3,25.8-4.1,34.4-2.1,8.7,1.9,94.7,24,179.3-28.3,55.2-34.1,54.9-41.4,54.9-41.4,0,0-47.3-37.2-123.3-27.2-76,10-139.7,67.8-152.1,70.3\"/>\n              <path id=\"path24\" class=\"cls-2\"\n                    d=\"M1194.7,50.2c-7.7,1.5-45.8-10.6-45.8-10.6,0,0,27.1,19.3,28.4,23,1.5,4.1-10.4,31.9-10.4,31.9,0,0,22.4-22,30.8-28.6,5.1-4,16.2-2.5,21.5-1.5,5.4,1,59.2,12.3,113.8-17.2,32.8-17.7,34.9-22.9,34.9-22.9,0,0-27.9-19.8-75.7-13.6-47.7,6.1-89.7,38.1-97.5,39.6\"/>\n              <path id=\"path26\" class=\"cls-1\"\n                    d=\"M1062.8,620.1c0,38.8-36.7,62.4-79.1,62.4s-31.5-2.1-50.6-2.1l31.5-198.2c20.9,0,26.7-2.6,46.7-2.6,37.1,0,54.7,19.4,54.7,43.5s-19.4,43.2-44.7,49.1c23,5,41.5,26.1,41.5,47.9M1040.8,620.7c0-19.1-13.8-38.3-56.4-38.3s-11.2.3-17.7.9l-11.8,74.1c-.9,5.6,7.4,8,29.7,8s56.2-17.1,56.2-44.8M1044.6,525.4c0-16.8-12.1-29.5-36.8-29.5s-26.2,2.4-27.3,8.2c-4.4,22.1-8.8,48.3-11.2,62.1h11.2c46.7-1.2,64.1-18,64.1-40.9\"/>\n              <path id=\"path28\" class=\"cls-1\"\n                    d=\"M1171.1,680.4c-2.3-9.4-2.3-17.7-1.5-27.3-9.7,14.1-25,30.2-47.4,30.2s-38.5-20.8-38.5-45.8c0-41.5,32.6-95.6,79.1-95.6s20,4.7,39.4,4.7c-10.3,49.7-16.8,97.6-16.8,118.5s.5,12.4,1.2,15.3h-15.6.1ZM1162,557.4c-31.8,0-58.5,39.7-58.5,78.2s8,31.3,22,31.3c25.3,0,44.1-32.1,49.5-63.3l5.9-34.1c.9-6.7-3.2-12-18.8-12\"/>\n              <path id=\"path30\" class=\"cls-1\"\n                    d=\"M1247.1,574.5l-16.8,105.8h-17.6l20.9-131.1c25.9,0,32.4-7.4,52.7-7.4s40.5,9.1,40.5,34.4-.3,7-.9,10.9l-14.6,93.2h-17.7l14.1-88.8c.6-3.5.9-6.8.9-9.7,0-17.1-7.3-24.4-26.7-24.4s-33.5,9.4-34.7,17.1\"/>\n              <path id=\"path32\" class=\"cls-1\"\n                    d=\"M1418.6,557.7c-33.2,0-56.2,28.2-56.2,72.7s15,38.5,37.4,38.5,17-.8,24.1-2.6l-2.3,15.6c-7.6,1.7-15,2.6-21.7,2.6-35,0-57.2-17.9-57.2-53.8s32.1-88.8,78.9-88.8,14.7.5,21.7,1.8l-2.6,17.3c-7.3-2.3-15-3.2-22-3.2\"/>\n              <path id=\"path34\" class=\"cls-1\"\n                    d=\"M1560.5,593.9c0,46.8-27.1,90.6-68.9,90.6s-45-18.8-45-52.1c0-47.1,27.6-90.6,68.8-90.6s45.1,19.1,45.1,52M1465.7,631.2c0,26.1,9.5,37.9,28.2,37.9s47.3-32.6,47.3-73.5-8.5-38.2-27.6-38.2c-27.1,0-48,33-48,73.8\"/>\n              <path id=\"path36\" class=\"cls-1\"\n                    d=\"M179.3,400.2c-12.4,5.9-27.1,8.9-41.2,8.9-54.4,0-101.3-28.8-101.3-102.7s48.3-104.9,102.8-104.9,28,1.8,39.8,5.3v34.5c-12-5-25.4-8-40-8-38.3,0-65.7,19.4-65.7,72.2s29.7,71.6,65.9,71.6,27.4-2.4,39.8-7.7v30.9\"/>\n              <path id=\"path38\" class=\"cls-1\"\n                    d=\"M228.5,335.5c0,29.7,12.9,44.4,29.1,44.4s28-13.5,28-44.4-13-44.2-29.5-44.2-27.6,13.2-27.6,44.2M320.3,335.5c0,43.2-25,73.3-63.6,73.3s-63.3-30.1-63.3-73.3,25.3-72.7,63.3-72.7,63.6,28.8,63.6,72.7\"/>\n              <path id=\"path40\" class=\"cls-1\"\n                    d=\"M522.5,404.6h-32.5v-88c0-18.2-7-25-21.7-25s-21.2,3.5-21.2,10.2c.3,3.2.9,7.4.9,11.8v91h-32.4v-88c0-18.5-7.4-25-20-25s-21.8,2.9-21.8,12.9v100.1h-32.4v-134.9c28.6,0,37.7-6.5,58.9-6.5s26.8,4.4,33.8,10.6c10.6-6.8,24.1-10.6,41.5-10.6,28,0,46.9,12.7,46.9,48.9v92.5\"/>\n              <path id=\"path42\" class=\"cls-1\"\n                    d=\"M597.2,290.4c-10.8,0-17.8,4.7-17.8,9.5v70.6c0,5,7.8,9.4,17.8,9.4,20.5,0,32.3-13.5,32.3-44.2s-11.8-45.3-32.3-45.3M546.3,477.9c.6-30.9,1.2-61.5,1.2-100.1v-110.4c20,0,32.7-4.7,52.3-4.7,35.7,0,65.4,25.6,65.4,73.6s-31.8,71.5-61.2,71.5-20-3-24.5-6.2v76.2h-33.2\"/>\n              <path id=\"path44\" class=\"cls-1\"\n                    d=\"M753,337.8c-26.8.8-40.6,9.1-40.6,24.7s8.3,18,20.9,18,17.4-3.2,18.6-7.4c.9-4.4,1.1-17.6,1.1-35.3M753,313.7v-5.3c0-11.2-7.6-17.9-21.4-17.9s-28.3,2.7-43,9.4v-30.3c15.3-4.4,29.1-6.7,45.6-6.7,31.8,0,51.5,12.9,51.5,45.3s-.9,42.4-.9,64.2.6,24.2,1.5,31.5c-23.6,0-36.2,3.8-56.2,3.8-34.1,0-51.2-15.8-51.2-42.6s22.4-49.8,74.1-51.2\"/>\n              <path id=\"path46\" class=\"cls-1\"\n                    d=\"M810.8,404.6v-137.8h30.6v13c8.2-13,22.1-17.4,35.6-17.4s10.5.6,15,1.2v34.1c-5.6-2.6-14.5-3.8-22.7-3.8-13.2,0-25,5.3-25.7,16.8-.6,23.2-.6,58.8-.6,93.9h-32.4\"/>\n              <path id=\"path48\" class=\"cls-1\"\n                    d=\"M937.9,266.8h39.7v28.3h-39.7c0,29.1-.3,49.2-.3,70.7s6.2,14.4,17.1,14.4,15.9-1.5,22.9-5.3v28.5c-9.7,3.6-19.7,5.3-31.5,5.3-23.5,0-40.9-10.9-40.9-36.5v-130.4l32.7-19.4v44.4\"/>\n              <path id=\"path50\" class=\"cls-1\"\n                    d=\"M1068.6,337.8c-26.8.8-40.6,9.1-40.6,24.7s8.2,18,20.9,18,17.3-3.2,18.5-7.4c.9-4.4,1.2-17.6,1.2-35.3M1068.6,313.7v-5.3c0-11.2-7.7-17.9-21.5-17.9s-28.3,2.7-43,9.4v-30.3c15.3-4.4,29-6.7,45.6-6.7,31.8,0,51.5,12.9,51.5,45.3s-.9,42.4-.9,64.2.6,24.2,1.5,31.5c-23.5,0-36.2,3.8-56.3,3.8-34.1,0-51.2-15.8-51.2-42.6s22.4-49.8,74.2-51.2\"/>\n              <path id=\"path52\" class=\"cls-1\"\n                    d=\"M1307.8,404.6h-32.4v-88c0-18.2-7.1-25-21.8-25s-21.2,3.5-21.2,10.2c.2,3.2.9,7.4.9,11.8v91h-32.4v-88c0-18.5-7.4-25-20-25s-21.8,2.9-21.8,12.9v100.1h-32.3v-134.9c28.5,0,37.7-6.5,58.8-6.5s26.8,4.4,33.9,10.6c10.6-6.8,24.1-10.6,41.5-10.6,28,0,46.8,12.7,46.8,48.9v92.5\"/>\n              <path id=\"path54\" class=\"cls-1\"\n                    d=\"M1363,335.5c0,29.7,13,44.4,29.2,44.4s27.9-13.5,27.9-44.4-12.9-44.2-29.4-44.2-27.8,13.2-27.8,44.2M1454.9,335.5c0,43.2-25,73.3-63.6,73.3s-63.3-30.1-63.3-73.3,25.4-72.7,63.3-72.7,63.6,28.8,63.6,72.7\"/>\n              <path id=\"path56\" class=\"cls-1\"\n                    d=\"M1522.2,262.7c10.9,0,20,.8,31.8,4.1v30.7c-13.8-5.6-23.6-7.1-33-7.1s-18.2,4.7-18.2,11.8c0,21.2,57.6,19.1,57.6,61.5s-16.5,45-54.7,45-24.4-1.2-35.9-4.7v-28.8c11.2,3.8,24.4,5.6,33.8,5.6,15.6,0,23.5-5.9,23.5-15,0-23.3-58-19.7-58-60.1s20.1-43,53-43\"/>\n            </g>\n          </g>\n        </svg>\n      </div>\n    } @else {\n      <div class=\"svg-wrapper\">\n        <svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n             x=\"0px\" y=\"0px\"\n             viewBox=\"0 0 554 481\" style=\"enable-background:new 0 0 554 481;\" xml:space=\"preserve\">\n<style type=\"text/css\">\n\t.st0 {\n    fill: none;\n  }\n\n  .st1 {\n    fill: #E85E16;\n  }\n\n  .st2 {\n    fill: #9D0046;\n  }\n\n  .st3 {\n    fill: #592275;\n  }\n\n  .st4 {\n    fill: #CD0058;\n  }\n\n  .st5 {\n    fill: #00587F;\n  }\n\n  .st6 {\n    fill: #229B7D;\n  }\n</style>\n          <rect class=\"st0\" width=\"554\" height=\"481\"/>\n          <g>\n\t<path id=\"naranja\" class=\"st1\" d=\"M277.4,128.4c74.7-40.1,146.4-40,154.5-40c8.1,48,13.7,67-7.9,121.3\n\t\tc-24.2,43.8-169.9,71.1-169.9,71.1l0,0c2.7-5.3-3.7-67.7-3.7-67.7S248.6,141.8,277.4,128.4\"/>\n            <path id=\"roja\" class=\"st2\" d=\"M449.8,205.7c-2.6,16-11.6,58-43.6,101.2s-99.9,85.5-138,96s-35.3,8-51.6,8\n\t\tc-10-28.6-11.3-33.9-4.9-81.3s22.9-61.8,56.5-80c24.4-10.7,48.7-17.3,73.1-25.3C379.4,213.7,417.4,208.3,449.8,205.7\"/>\n            <path id=\"morada\" class=\"st3\" d=\"M236.8,95.1c18.8-8.3,43.1-16.7,70-25.2c-7.8,18.8-10.1,42.8-15.2,66.9\n\t\tc-6.6,43.2-12.8,104.4-40.2,136.6C217.9,313,127.3,348.2,127,347.6l-2.5,0c-14.4-50.4-20.6-93-15.7-125\n\t\tC116,166.4,150.6,131.2,236.8,95.1L236.8,95.1\"/>\n            <path id=\"fushia\" class=\"st4\" d=\"M425.5,246h13.6c-13.5,37.3-31.4,76.2-72,105.6c-69,48.9-98.8,50.7-98.8,50.7S341.4,254,425.5,246\n\t\t\"/>\n            <path id=\"azul\" class=\"st5\" d=\"M122.5,344.1L122.5,344.1c13.6,45.3,48.8,69.3,100.3,66.6c24.4-48,44-108.8,52.1-164.7\n\t\tC218,272.7,165.9,312.1,122.5,344.1\"/>\n            <path id=\"verde\" class=\"st6\" d=\"M277,232.3c5.4-37.3,10.8-72,16.2-103.9C206.5,171,144.2,251,122.5,344.3\n\t\tc43.4-32,95.2-70.3,152.1-97\"/>\n</g>\n</svg>\n\n      </div>\n    }\n  </div>\n}\n", styles: ["@keyframes bounce{0%{opacity:.1}to{opacity:1}}.loader{position:fixed;z-index:100000000000000000;inset:0;background-color:#000c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;place-items:center;place-content:center}.loader .svg-wrapper{width:80px;animation:bounce 1s ease-in-out infinite alternate}.loader .svg-wrapper svg{width:100%;height:auto;display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RdndLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rdnd-loader', standalone: true, imports: [], template: "@if (show) {\n  <div class=\"loader\">\n    @if (loaderType === 'compartamos') {\n      <div class=\"svg-wrapper\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" xmlns:cc=\"http://creativecommons.org/ns#\"\n             xmlns:dc=\"http://purl.org/dc/elements/1.1/\" xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"\n             xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"\n             xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\" xmlns:svg=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 1629.3 720\">\n          <defs>\n            <style>\n              .cls-1 {\n                fill: #fff;\n              }\n\n              .cls-2 {\n                fill: #8d104b;\n              }\n\n              .cls-3 {\n                fill: #f7961c;\n              }\n            </style>\n          </defs>\n          <!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142)  -->\n          <g>\n            <g id=\"Capa_1\">\n              <path id=\"path16\" class=\"cls-3\"\n                    d=\"M664.5,84.3c-7,1.3-43.6-10.4-43.6-10.4,0,0,26.2,19.3,28.4,22.7,2.2,3.5-7.9,33-7.9,33,0,0,19.3-22.3,26.6-29,4.4-4,14.6-2.1,19.5-.9,4.9,1.2,53.4,14.5,101.8-14.4,31.6-18.9,31.5-23,31.5-23,0,0-26.5-21.5-69.6-16.6-43.2,5-79.8,37.1-86.8,38.4\"/>\n              <path id=\"path18\" class=\"cls-2\"\n                    d=\"M507.7,668.9c-8.4,2.3-52.7,1.7-52.7,1.7,0,0,31,14,33.5,17,2.4,2.9-10.4,32.4-10.4,32.4,0,0,20.7-21.3,29.6-28.8,5.4-4.5,17.1-5.9,26.7-6.7,5.9-.5,63.8,5.2,122.8-29.6,38.5-22.7,38.5-26.6,38.5-26.6,0,0-37.8-20.3-89.8-8.8-51.9,11.5-89.7,47.1-98.1,49.5\"/>\n              <path id=\"path20\" class=\"cls-3\"\n                    d=\"M1368.2,125.5c-11.8,2.3-72.1-3.5-72.1-3.5,0,0,40.7,22.6,43.8,26.9,3,4.2-17.9,43.1-17.9,43.1,0,0,30.6-26.8,43.7-35.9,7.9-5.6,24.1-6.1,37.1-6.1s86.5,14.3,171-26.6c55.2-26.8,55.5-32.1,55.5-32.1,0,0-49.3-32-121.6-22.2-72.2,9.9-127.7,54.2-139.5,56.5\"/>\n              <path id=\"path22\" class=\"cls-3\"\n                    d=\"M77.2,575.8c-12.3,2.6-77.2-17-77.2-17,0,0,46.9,33.2,50.8,39.3,3.8,6.1-13,58.5-13,58.5,0,0,33.4-39.9,46.1-51.8,7.7-7.3,25.8-4.1,34.4-2.1,8.7,1.9,94.7,24,179.3-28.3,55.2-34.1,54.9-41.4,54.9-41.4,0,0-47.3-37.2-123.3-27.2-76,10-139.7,67.8-152.1,70.3\"/>\n              <path id=\"path24\" class=\"cls-2\"\n                    d=\"M1194.7,50.2c-7.7,1.5-45.8-10.6-45.8-10.6,0,0,27.1,19.3,28.4,23,1.5,4.1-10.4,31.9-10.4,31.9,0,0,22.4-22,30.8-28.6,5.1-4,16.2-2.5,21.5-1.5,5.4,1,59.2,12.3,113.8-17.2,32.8-17.7,34.9-22.9,34.9-22.9,0,0-27.9-19.8-75.7-13.6-47.7,6.1-89.7,38.1-97.5,39.6\"/>\n              <path id=\"path26\" class=\"cls-1\"\n                    d=\"M1062.8,620.1c0,38.8-36.7,62.4-79.1,62.4s-31.5-2.1-50.6-2.1l31.5-198.2c20.9,0,26.7-2.6,46.7-2.6,37.1,0,54.7,19.4,54.7,43.5s-19.4,43.2-44.7,49.1c23,5,41.5,26.1,41.5,47.9M1040.8,620.7c0-19.1-13.8-38.3-56.4-38.3s-11.2.3-17.7.9l-11.8,74.1c-.9,5.6,7.4,8,29.7,8s56.2-17.1,56.2-44.8M1044.6,525.4c0-16.8-12.1-29.5-36.8-29.5s-26.2,2.4-27.3,8.2c-4.4,22.1-8.8,48.3-11.2,62.1h11.2c46.7-1.2,64.1-18,64.1-40.9\"/>\n              <path id=\"path28\" class=\"cls-1\"\n                    d=\"M1171.1,680.4c-2.3-9.4-2.3-17.7-1.5-27.3-9.7,14.1-25,30.2-47.4,30.2s-38.5-20.8-38.5-45.8c0-41.5,32.6-95.6,79.1-95.6s20,4.7,39.4,4.7c-10.3,49.7-16.8,97.6-16.8,118.5s.5,12.4,1.2,15.3h-15.6.1ZM1162,557.4c-31.8,0-58.5,39.7-58.5,78.2s8,31.3,22,31.3c25.3,0,44.1-32.1,49.5-63.3l5.9-34.1c.9-6.7-3.2-12-18.8-12\"/>\n              <path id=\"path30\" class=\"cls-1\"\n                    d=\"M1247.1,574.5l-16.8,105.8h-17.6l20.9-131.1c25.9,0,32.4-7.4,52.7-7.4s40.5,9.1,40.5,34.4-.3,7-.9,10.9l-14.6,93.2h-17.7l14.1-88.8c.6-3.5.9-6.8.9-9.7,0-17.1-7.3-24.4-26.7-24.4s-33.5,9.4-34.7,17.1\"/>\n              <path id=\"path32\" class=\"cls-1\"\n                    d=\"M1418.6,557.7c-33.2,0-56.2,28.2-56.2,72.7s15,38.5,37.4,38.5,17-.8,24.1-2.6l-2.3,15.6c-7.6,1.7-15,2.6-21.7,2.6-35,0-57.2-17.9-57.2-53.8s32.1-88.8,78.9-88.8,14.7.5,21.7,1.8l-2.6,17.3c-7.3-2.3-15-3.2-22-3.2\"/>\n              <path id=\"path34\" class=\"cls-1\"\n                    d=\"M1560.5,593.9c0,46.8-27.1,90.6-68.9,90.6s-45-18.8-45-52.1c0-47.1,27.6-90.6,68.8-90.6s45.1,19.1,45.1,52M1465.7,631.2c0,26.1,9.5,37.9,28.2,37.9s47.3-32.6,47.3-73.5-8.5-38.2-27.6-38.2c-27.1,0-48,33-48,73.8\"/>\n              <path id=\"path36\" class=\"cls-1\"\n                    d=\"M179.3,400.2c-12.4,5.9-27.1,8.9-41.2,8.9-54.4,0-101.3-28.8-101.3-102.7s48.3-104.9,102.8-104.9,28,1.8,39.8,5.3v34.5c-12-5-25.4-8-40-8-38.3,0-65.7,19.4-65.7,72.2s29.7,71.6,65.9,71.6,27.4-2.4,39.8-7.7v30.9\"/>\n              <path id=\"path38\" class=\"cls-1\"\n                    d=\"M228.5,335.5c0,29.7,12.9,44.4,29.1,44.4s28-13.5,28-44.4-13-44.2-29.5-44.2-27.6,13.2-27.6,44.2M320.3,335.5c0,43.2-25,73.3-63.6,73.3s-63.3-30.1-63.3-73.3,25.3-72.7,63.3-72.7,63.6,28.8,63.6,72.7\"/>\n              <path id=\"path40\" class=\"cls-1\"\n                    d=\"M522.5,404.6h-32.5v-88c0-18.2-7-25-21.7-25s-21.2,3.5-21.2,10.2c.3,3.2.9,7.4.9,11.8v91h-32.4v-88c0-18.5-7.4-25-20-25s-21.8,2.9-21.8,12.9v100.1h-32.4v-134.9c28.6,0,37.7-6.5,58.9-6.5s26.8,4.4,33.8,10.6c10.6-6.8,24.1-10.6,41.5-10.6,28,0,46.9,12.7,46.9,48.9v92.5\"/>\n              <path id=\"path42\" class=\"cls-1\"\n                    d=\"M597.2,290.4c-10.8,0-17.8,4.7-17.8,9.5v70.6c0,5,7.8,9.4,17.8,9.4,20.5,0,32.3-13.5,32.3-44.2s-11.8-45.3-32.3-45.3M546.3,477.9c.6-30.9,1.2-61.5,1.2-100.1v-110.4c20,0,32.7-4.7,52.3-4.7,35.7,0,65.4,25.6,65.4,73.6s-31.8,71.5-61.2,71.5-20-3-24.5-6.2v76.2h-33.2\"/>\n              <path id=\"path44\" class=\"cls-1\"\n                    d=\"M753,337.8c-26.8.8-40.6,9.1-40.6,24.7s8.3,18,20.9,18,17.4-3.2,18.6-7.4c.9-4.4,1.1-17.6,1.1-35.3M753,313.7v-5.3c0-11.2-7.6-17.9-21.4-17.9s-28.3,2.7-43,9.4v-30.3c15.3-4.4,29.1-6.7,45.6-6.7,31.8,0,51.5,12.9,51.5,45.3s-.9,42.4-.9,64.2.6,24.2,1.5,31.5c-23.6,0-36.2,3.8-56.2,3.8-34.1,0-51.2-15.8-51.2-42.6s22.4-49.8,74.1-51.2\"/>\n              <path id=\"path46\" class=\"cls-1\"\n                    d=\"M810.8,404.6v-137.8h30.6v13c8.2-13,22.1-17.4,35.6-17.4s10.5.6,15,1.2v34.1c-5.6-2.6-14.5-3.8-22.7-3.8-13.2,0-25,5.3-25.7,16.8-.6,23.2-.6,58.8-.6,93.9h-32.4\"/>\n              <path id=\"path48\" class=\"cls-1\"\n                    d=\"M937.9,266.8h39.7v28.3h-39.7c0,29.1-.3,49.2-.3,70.7s6.2,14.4,17.1,14.4,15.9-1.5,22.9-5.3v28.5c-9.7,3.6-19.7,5.3-31.5,5.3-23.5,0-40.9-10.9-40.9-36.5v-130.4l32.7-19.4v44.4\"/>\n              <path id=\"path50\" class=\"cls-1\"\n                    d=\"M1068.6,337.8c-26.8.8-40.6,9.1-40.6,24.7s8.2,18,20.9,18,17.3-3.2,18.5-7.4c.9-4.4,1.2-17.6,1.2-35.3M1068.6,313.7v-5.3c0-11.2-7.7-17.9-21.5-17.9s-28.3,2.7-43,9.4v-30.3c15.3-4.4,29-6.7,45.6-6.7,31.8,0,51.5,12.9,51.5,45.3s-.9,42.4-.9,64.2.6,24.2,1.5,31.5c-23.5,0-36.2,3.8-56.3,3.8-34.1,0-51.2-15.8-51.2-42.6s22.4-49.8,74.2-51.2\"/>\n              <path id=\"path52\" class=\"cls-1\"\n                    d=\"M1307.8,404.6h-32.4v-88c0-18.2-7.1-25-21.8-25s-21.2,3.5-21.2,10.2c.2,3.2.9,7.4.9,11.8v91h-32.4v-88c0-18.5-7.4-25-20-25s-21.8,2.9-21.8,12.9v100.1h-32.3v-134.9c28.5,0,37.7-6.5,58.8-6.5s26.8,4.4,33.9,10.6c10.6-6.8,24.1-10.6,41.5-10.6,28,0,46.8,12.7,46.8,48.9v92.5\"/>\n              <path id=\"path54\" class=\"cls-1\"\n                    d=\"M1363,335.5c0,29.7,13,44.4,29.2,44.4s27.9-13.5,27.9-44.4-12.9-44.2-29.4-44.2-27.8,13.2-27.8,44.2M1454.9,335.5c0,43.2-25,73.3-63.6,73.3s-63.3-30.1-63.3-73.3,25.4-72.7,63.3-72.7,63.6,28.8,63.6,72.7\"/>\n              <path id=\"path56\" class=\"cls-1\"\n                    d=\"M1522.2,262.7c10.9,0,20,.8,31.8,4.1v30.7c-13.8-5.6-23.6-7.1-33-7.1s-18.2,4.7-18.2,11.8c0,21.2,57.6,19.1,57.6,61.5s-16.5,45-54.7,45-24.4-1.2-35.9-4.7v-28.8c11.2,3.8,24.4,5.6,33.8,5.6,15.6,0,23.5-5.9,23.5-15,0-23.3-58-19.7-58-60.1s20.1-43,53-43\"/>\n            </g>\n          </g>\n        </svg>\n      </div>\n    } @else {\n      <div class=\"svg-wrapper\">\n        <svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n             x=\"0px\" y=\"0px\"\n             viewBox=\"0 0 554 481\" style=\"enable-background:new 0 0 554 481;\" xml:space=\"preserve\">\n<style type=\"text/css\">\n\t.st0 {\n    fill: none;\n  }\n\n  .st1 {\n    fill: #E85E16;\n  }\n\n  .st2 {\n    fill: #9D0046;\n  }\n\n  .st3 {\n    fill: #592275;\n  }\n\n  .st4 {\n    fill: #CD0058;\n  }\n\n  .st5 {\n    fill: #00587F;\n  }\n\n  .st6 {\n    fill: #229B7D;\n  }\n</style>\n          <rect class=\"st0\" width=\"554\" height=\"481\"/>\n          <g>\n\t<path id=\"naranja\" class=\"st1\" d=\"M277.4,128.4c74.7-40.1,146.4-40,154.5-40c8.1,48,13.7,67-7.9,121.3\n\t\tc-24.2,43.8-169.9,71.1-169.9,71.1l0,0c2.7-5.3-3.7-67.7-3.7-67.7S248.6,141.8,277.4,128.4\"/>\n            <path id=\"roja\" class=\"st2\" d=\"M449.8,205.7c-2.6,16-11.6,58-43.6,101.2s-99.9,85.5-138,96s-35.3,8-51.6,8\n\t\tc-10-28.6-11.3-33.9-4.9-81.3s22.9-61.8,56.5-80c24.4-10.7,48.7-17.3,73.1-25.3C379.4,213.7,417.4,208.3,449.8,205.7\"/>\n            <path id=\"morada\" class=\"st3\" d=\"M236.8,95.1c18.8-8.3,43.1-16.7,70-25.2c-7.8,18.8-10.1,42.8-15.2,66.9\n\t\tc-6.6,43.2-12.8,104.4-40.2,136.6C217.9,313,127.3,348.2,127,347.6l-2.5,0c-14.4-50.4-20.6-93-15.7-125\n\t\tC116,166.4,150.6,131.2,236.8,95.1L236.8,95.1\"/>\n            <path id=\"fushia\" class=\"st4\" d=\"M425.5,246h13.6c-13.5,37.3-31.4,76.2-72,105.6c-69,48.9-98.8,50.7-98.8,50.7S341.4,254,425.5,246\n\t\t\"/>\n            <path id=\"azul\" class=\"st5\" d=\"M122.5,344.1L122.5,344.1c13.6,45.3,48.8,69.3,100.3,66.6c24.4-48,44-108.8,52.1-164.7\n\t\tC218,272.7,165.9,312.1,122.5,344.1\"/>\n            <path id=\"verde\" class=\"st6\" d=\"M277,232.3c5.4-37.3,10.8-72,16.2-103.9C206.5,171,144.2,251,122.5,344.3\n\t\tc43.4-32,95.2-70.3,152.1-97\"/>\n</g>\n</svg>\n\n      </div>\n    }\n  </div>\n}\n", styles: ["@keyframes bounce{0%{opacity:.1}to{opacity:1}}.loader{position:fixed;z-index:100000000000000000;inset:0;background-color:#000c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;place-items:center;place-content:center}.loader .svg-wrapper{width:80px;animation:bounce 1s ease-in-out infinite alternate}.loader .svg-wrapper svg{width:100%;height:auto;display:block}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [RDND_CONFIG]
+                }] }], propDecorators: { show: [{
+                type: Input
+            }] } });
+
+class RdndActiveIndicator {
+    isActive = false;
+    activeDisplay = "Activo";
+    inactiveDisplay = "Inactivo";
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RdndActiveIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: RdndActiveIndicator, isStandalone: true, selector: "rdnd-active-indicator", inputs: { isActive: "isActive", activeDisplay: "activeDisplay", inactiveDisplay: "inactiveDisplay" }, ngImport: i0, template: "<div class=\"rdnd-active-indicator-wrapper\" [ngClass]=\"{\n  active: isActive,\n  inactive: !isActive\n}\">\n  <span>\n    @if (isActive) {\n      {{ activeDisplay }}\n    } @else {\n      {{ inactiveDisplay }}\n    }\n  </span>\n</div>\n", styles: [".rdnd-active-indicator-wrapper{width:70px;height:24px;padding:1px 4px;border-radius:4px;display:flex;flex-direction:row;place-content:center;place-items:center;box-sizing:border-box}.rdnd-active-indicator-wrapper.active{background-color:#19c496;color:#156a29}.rdnd-active-indicator-wrapper.inactive{background-color:#f16683;color:#77113a}.rdnd-active-indicator-wrapper span{font-size:12px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RdndActiveIndicator, decorators: [{
+            type: Component,
+            args: [{ selector: 'rdnd-active-indicator', standalone: true, imports: [
+                        NgClass
+                    ], template: "<div class=\"rdnd-active-indicator-wrapper\" [ngClass]=\"{\n  active: isActive,\n  inactive: !isActive\n}\">\n  <span>\n    @if (isActive) {\n      {{ activeDisplay }}\n    } @else {\n      {{ inactiveDisplay }}\n    }\n  </span>\n</div>\n", styles: [".rdnd-active-indicator-wrapper{width:70px;height:24px;padding:1px 4px;border-radius:4px;display:flex;flex-direction:row;place-content:center;place-items:center;box-sizing:border-box}.rdnd-active-indicator-wrapper.active{background-color:#19c496;color:#156a29}.rdnd-active-indicator-wrapper.inactive{background-color:#f16683;color:#77113a}.rdnd-active-indicator-wrapper span{font-size:12px}\n"] }]
+        }], propDecorators: { isActive: [{
+                type: Input
+            }], activeDisplay: [{
+                type: Input
+            }], inactiveDisplay: [{
+                type: Input
+            }] } });
+
+const themes = {
+    disabled: {
+        default: colors.disabled,
+        hover: colors.disabled,
+        border: 'transparent',
+        active: colors.disabled,
+        fontColor: colors.disabledText,
+    },
+    magenta: {
+        default: `linear-gradient(to right, ${colors.magentaStart}, ${colors.magentaEnd})`,
+        hover: `linear-gradient(to right, ${colors.magentaEnd}, ${colors.magentaStart})`,
+        //default: `${colors.magentaStart}`,
+        border: 'transparent',
+        active: colors.magentaStart, // Color al hacer clic
+        fontColor: colors.white, // Texto en blanco
+    },
+    magentaSolid: {
+        default: `${colors.magentaStart}`,
+        hover: `${colors.magentaEnd}`,
+        border: 'transparent',
+        active: colors.magentaStart, // Color al hacer clic
+        fontColor: colors.white, // Texto en blanco
+    },
+    magentaNormal: {
+        default: `${colors["magenta-normal"]}`,
+        hover: `${colors.magentaEnd}`,
+        border: 'transparent',
+        active: colors["magenta-normal"], // Color al hacer clic
+        fontColor: colors.white, // Texto en blanco
+    },
+    gray: {
+        default: `${colors["light-gray"]}`,
+        hover: `linear-gradient(to right, ${colors.magentaEnd}, ${colors.magentaStart})`,
+        //default: `${colors.magentaStart}`,
+        border: 'transparent',
+        active: colors.magentaStart, // Color al hacer clic
+        fontColor: colors.white, // Texto en blanco
+    },
+    green: {
+        default: `${colors["green-medium"]}`,
+        hover: colors.green,
+        border: 'transparent',
+        active: colors["green-xs-dark"],
+        fontColor: colors.white,
+    },
+    red: {
+        default: `${colors["red-medium"]}`,
+        hover: colors.red,
+        border: 'transparent',
+        active: colors["red"],
+        fontColor: colors.white,
+    },
+    purple: {
+        default: `${colors['blue-info']}`,
+        hover: colors["purple-light"],
+        border: 'transparent',
+        active: colors.purple,
+        fontColor: colors.white,
+    },
+    yellow: {
+        default: `${colors['yellow-normal']}`,
+        hover: colors["yellow"],
+        border: 'transparent',
+        active: colors["yellow-light"],
+        fontColor: colors.white,
+    },
+    blue: {
+        default: `${colors["blue"]}`,
+        hover: colors["blue-light"],
+        border: 'transparent',
+        active: colors["blue-dark"],
+        fontColor: colors.white,
+    },
+    borderedMagenta: {
+        default: 'transparent',
+        hover: 'transparent',
+        border: colors.magentaStart,
+        active: 'transparent',
+        fontColor: colors.magentaStart
+    },
+    borderedBlack: {
+        default: 'white',
+        hover: 'white',
+        border: colors.black,
+        active: 'white',
+        fontColor: colors.black
+    },
+    transparentMagenta: {
+        default: 'transparent',
+        hover: 'transparent',
+        border: 'transparent',
+        active: 'transparent',
+        fontColor: colors.magentaStart
+    },
+    transparentBlack: {
+        default: 'transparent',
+        hover: 'transparent',
+        border: 'transparent',
+        active: 'transparent',
+        fontColor: colors.black
+    },
+    transparentGreen: {
+        default: 'transparent',
+        hover: 'transparent',
+        border: 'transparent',
+        active: 'transparent',
+        fontColor: colors["green-medium"]
+    },
+};
+
+class ButtonService {
+    buttonsState = {};
+    ensureButtonExists(id) {
+        if (!this.buttonsState[id]) {
+            this.buttonsState[id] = new BehaviorSubject(false);
+        }
+    }
+    useButton(id) {
+        this.ensureButtonExists(id);
+        return {
+            disabled$: this.buttonsState[id].asObservable(),
+            enable: () => this.buttonsState[id].next(false),
+            disable: () => this.buttonsState[id].next(true),
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ButtonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ButtonService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ButtonService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+// @ts-ignore
+class RdndButton {
+    buttonService;
+    id;
+    icon;
+    text = 'Enviar';
+    theme = themes.magenta;
+    size = 'full';
+    type = 'submit';
+    borders = true;
+    disabled = false;
+    callback = new EventEmitter();
+    themes = themes;
+    subscription;
+    hoverBackgroundColor = this.theme.default;
+    buttonControl;
+    constructor(buttonService) {
+        this.buttonService = buttonService;
+    }
+    ngOnInit() {
+        this.buttonControl = this.buttonService.useButton(this.id);
+        this.subscription = new Subscription(() => this.buttonControl.disabled$.subscribe((isDisabled) => {
+            this.disabled = isDisabled;
+        }));
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+    handleClick(event) {
+        event.stopPropagation();
+        if (!this.disabled && this.type !== 'submit') {
+            this.callback.emit();
+        }
+    }
+    onMouseEnter() {
+        if (!this.disabled) {
+            this.hoverBackgroundColor = this.theme.hover;
+        }
+    }
+    onMouseLeave() {
+        if (!this.disabled) {
+            this.hoverBackgroundColor = this.theme.default;
+        }
+    }
+    event = event;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RdndButton, deps: [{ token: ButtonService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: RdndButton, isStandalone: true, selector: "rdnd-button", inputs: { id: "id", icon: "icon", text: "text", theme: "theme", size: "size", type: "type", borders: "borders", disabled: "disabled" }, outputs: { callback: "callback" }, ngImport: i0, template: "<button\n  [ngClass]=\"{\n    'full': size === 'full',\n    'contained': size === 'contained',\n    'bordered': borders,\n    'disabled': disabled\n  }\"\n  [style.background]=\"disabled ? themes.disabled.default : theme.default\"\n  [style.color]=\"theme.fontColor\"\n  [style.border]=\"borders ? '1px solid ' + theme.border : 'none'\"\n  [style.cursor]=\"disabled ? 'not-allowed' : 'pointer'\"\n  [attr.type]=\"type\"\n  [disabled]=\"disabled\"\n\n  (mouseleave)=\"onMouseLeave()\"\n  (click)=\"handleClick($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  <fa-icon *ngIf=\"icon\" [icon]=\"icon\" class=\"icon\"></fa-icon>\n  {{ text }}\n</button>\n", styles: ["button{height:36px;display:flex;align-items:center;justify-content:center;gap:4px;padding:10px;font-size:14px;transition:all .3s ease}button.full{width:100%}button.contained{width:fit-content}button.bordered{border-radius:5px}button.disabled{pointer-events:none;background-color:#ddd;border-color:transparent!important;color:#9e9e9e!important}button .icon{transition:all .3s ease}button:hover{opacity:.8}button:active{transform:scale(.99)}\n"], dependencies: [{ kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RdndButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'rdnd-button', standalone: true, imports: [
+                        FaIconComponent,
+                        NgIf,
+                        NgClass
+                    ], template: "<button\n  [ngClass]=\"{\n    'full': size === 'full',\n    'contained': size === 'contained',\n    'bordered': borders,\n    'disabled': disabled\n  }\"\n  [style.background]=\"disabled ? themes.disabled.default : theme.default\"\n  [style.color]=\"theme.fontColor\"\n  [style.border]=\"borders ? '1px solid ' + theme.border : 'none'\"\n  [style.cursor]=\"disabled ? 'not-allowed' : 'pointer'\"\n  [attr.type]=\"type\"\n  [disabled]=\"disabled\"\n\n  (mouseleave)=\"onMouseLeave()\"\n  (click)=\"handleClick($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  <fa-icon *ngIf=\"icon\" [icon]=\"icon\" class=\"icon\"></fa-icon>\n  {{ text }}\n</button>\n", styles: ["button{height:36px;display:flex;align-items:center;justify-content:center;gap:4px;padding:10px;font-size:14px;transition:all .3s ease}button.full{width:100%}button.contained{width:fit-content}button.bordered{border-radius:5px}button.disabled{pointer-events:none;background-color:#ddd;border-color:transparent!important;color:#9e9e9e!important}button .icon{transition:all .3s ease}button:hover{opacity:.8}button:active{transform:scale(.99)}\n"] }]
+        }], ctorParameters: () => [{ type: ButtonService }], propDecorators: { id: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], borders: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], callback: [{
+                type: Output
+            }] } });
+
+class InputService {
+    inputState = {};
+    ensureInputExists(id) {
+        if (!this.inputState[id]) {
+            this.inputState[id] = {
+                valid$: new BehaviorSubject(false),
+                errorMessage$: new BehaviorSubject(null),
+            };
+        }
+    }
+    useInput(id) {
+        this.ensureInputExists(id);
+        return {
+            isValid: this.inputState[id].valid$,
+            valid: this.inputState[id].valid$.asObservable(),
+            errorMessage: this.inputState[id].errorMessage$.asObservable(),
+            setValid: (isValid) => this.inputState[id].valid$.next(isValid),
+            setErrorMessage: (message) => this.inputState[id].errorMessage$.next(message),
+        };
+    }
+    updateInputState(control, id) {
+        this.ensureInputExists(id);
+        const errors = control.errors;
+        if (control.valid) {
+            this.inputState[id].valid$.next(true);
+            this.inputState[id].errorMessage$.next(null);
+        }
+        else {
+            this.inputState[id].valid$.next(false);
+            this.inputState[id].errorMessage$.next(this.getErrorMessage(errors));
+        }
+    }
+    getErrorMessage(errors) {
+        if (!errors)
+            return null;
+        if (errors['required'])
+            return 'Este campo es obligatorio';
+        if (errors['minlength'])
+            return `Mínimo ${errors['minlength'].requiredLength} caracteres requeridos`;
+        if (errors['maxlength'])
+            return `Máximo ${errors['maxlength'].requiredLength} caracteres permitidos`;
+        if (errors['email'])
+            return 'Formato de correo inválido';
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: InputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: InputService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: InputService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class RdndInput {
+    inputService;
+    id;
+    name;
+    type = 'text';
+    placeholder = '';
+    showLabel = false;
+    control;
+    value = '';
+    validators = [];
+    disabled = false;
+    valueChange = new EventEmitter();
+    onKeyDown = new EventEmitter();
+    onPaste = new EventEmitter();
+    onFocus = new EventEmitter();
+    onBlur = new EventEmitter();
+    faEyeSlash = faEyeSlash;
+    showPassword = false;
+    showError = false;
+    constructor(inputService) {
+        this.inputService = inputService;
+    }
+    ngOnInit() {
+        if (this.control) {
+            this.control.addValidators(this.validators);
+            this.control.valueChanges.subscribe((value) => {
+                this.valueChange.emit(value);
+                this.inputService.updateInputState(this.control, this.id);
+            });
+        }
+        else {
+            this.control = new FormControl(this.value, this.validators);
+            this.control.valueChanges.subscribe((value) => {
+                this.valueChange.emit(value);
+                this.inputService.updateInputState(this.control, this.id);
+            });
+        }
+    }
+    ngOnChanges(changes) {
+        if (this.control) {
+            this.control.addValidators(this.validators);
+            this.control.valueChanges.subscribe((value) => {
+                this.valueChange.emit(value);
+                this.inputService.updateInputState(this.control, this.id);
+            });
+        }
+        else {
+            this.control = new FormControl(this.value, this.validators);
+            this.control.valueChanges.subscribe((value) => {
+                this.valueChange.emit(value);
+                this.inputService.updateInputState(this.control, this.id);
+            });
+        }
+    }
+    getErrorMessage() {
+        if (this.control && this.control.errors) {
+            const errorKeys = Object.keys(this.control.errors);
+            if (errorKeys.length > 0) {
+                const firstErrorKey = errorKeys[0];
+                return this.control.errors[firstErrorKey];
+            }
+        }
+        return null;
+    }
+    toggleErrorDisplay() {
+        this.showError = !this.showError;
+    }
+    hasError() {
+        return !!this.control && this.control.invalid && (this.control.dirty || this.control.touched);
+    }
+    handleTogglePassword() {
+        this.showPassword = !this.showPassword;
+    }
+    handleChange(event) {
+        const e = event.target;
+        this.valueChange.emit(e.value);
+    }
+    handleKeyDown(event) {
+        const allowRegex = /^[a-zA-Z!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]*$/;
+        if (this.type === 'number' && !(['Backspace', 'Shift', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) && !(event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)) {
+            event.key.match(allowRegex) ? event.preventDefault() : this.onKeyDown.emit(event);
+        }
+        else {
+            this.onKeyDown.emit(event);
+        }
+    }
+    handlePaste(event) {
+        this.onPaste.emit(event);
+    }
+    handleFocus(event) {
+        this.onFocus.emit(event);
+    }
+    handleBlur(event) {
+        this.onBlur.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RdndInput, deps: [{ token: InputService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: RdndInput, isStandalone: true, selector: "rdnd-input", inputs: { id: "id", name: "name", type: "type", placeholder: "placeholder", showLabel: "showLabel", control: "control", value: "value", validators: "validators", disabled: "disabled" }, outputs: { valueChange: "valueChange", onKeyDown: "onKeyDown", onPaste: "onPaste", onFocus: "onFocus", onBlur: "onBlur" }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"{ 'disabled': disabled }\" class=\"input-container\">\n  <!-- \u00CDcono de error que aparece por encima del campo si hay error -->\n  <span *ngIf=\"hasError()\" class=\"error-icon\" (click)=\"toggleErrorDisplay()\">&#9432;</span>\n\n  <!-- Bot\u00F3n de mostrar/ocultar contrase\u00F1a centrado verticalmente -->\n  <button *ngIf=\"type === 'password'\" type=\"button\" (click)=\"handleTogglePassword()\" class=\"toggle-button\">\n    <fa-icon [icon]=\"faEyeSlash\" class=\"icon\" [class.active]=\"showPassword\"></fa-icon>\n  </button>\n\n  @if (showLabel) {\n    <label class=\"text-small dark-gray\">{{ placeholder }}</label>\n  }\n\n\n  <!-- Input compatible con FormControl o signals -->\n  <input\n    *ngIf=\"control; else signalInput\"\n    [type]=\"type === 'password' && showPassword ? 'text' : type\"\n    [formControl]=\"control\"\n    [placeholder]=\"showLabel ? '' : placeholder\"\n    [disabled]=\"disabled\"\n    (keydown)=\"handleKeyDown($event)\"\n    (paste)=\"handlePaste($event)\"\n    (focus)=\"handleFocus($event)\"\n    (blur)=\"handleBlur($event)\"\n    [ngClass]=\"{ 'error-border': hasError() }\"\n  />\n\n  <!-- Input para signals -->\n  <ng-template #signalInput>\n    <input\n      [type]=\"type === 'password' && showPassword ? 'text' : type\"\n      [value]=\"value\"\n      [placeholder]=\"showLabel ? '' : placeholder\"\n      [disabled]=\"disabled\"\n      (input)=\"handleChange($event)\"\n      (keydown)=\"handleKeyDown($event)\"\n      (paste)=\"handlePaste($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"\n      [ngClass]=\"{ 'error-border': false }\"\n    />\n  </ng-template>\n\n\n  <!-- Mensaje de error que aparece solo cuando se clickea en el \u00EDcono de error -->\n  <div *ngIf=\"control?.invalid && control?.dirty && showError\" class=\"error-message\">\n    {{ getErrorMessage() }}\n  </div>\n</div>\n", styles: [".input-container{width:100%;min-width:100%;box-sizing:border-box;position:relative;display:block}input{position:relative;width:100%;min-width:100%;padding:7px 35px 7px 8px;border-radius:3px;font-family:Poppins,sans-serif;height:36px;font-size:14px;border:1px solid #ccc;outline:none;box-sizing:border-box;transition:all .3s ease;background-color:#fff!important;appearance:none;-moz-appearance:textfield;-webkit-appearance:textfield}input:-webkit-autofill{background-color:#fff!important}input.error-border{border-color:red}input:focus{border:1px solid blue}.error-icon{position:absolute;right:8px;top:1px;bottom:1px;font-size:24px;color:red;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:3;background-color:#fff}.error-message{position:absolute;bottom:0;left:0;color:red;padding:0 0 0 8px;border-radius:4px;font-size:12px;font-family:sans-serif;white-space:nowrap}.toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;z-index:2}.icon{transition:opacity .3s ease}.icon.active{opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RdndInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'rdnd-input', standalone: true, imports: [
+                        NgIf,
+                        NgClass,
+                        FontAwesomeModule,
+                        ReactiveFormsModule
+                    ], template: "<div [ngClass]=\"{ 'disabled': disabled }\" class=\"input-container\">\n  <!-- \u00CDcono de error que aparece por encima del campo si hay error -->\n  <span *ngIf=\"hasError()\" class=\"error-icon\" (click)=\"toggleErrorDisplay()\">&#9432;</span>\n\n  <!-- Bot\u00F3n de mostrar/ocultar contrase\u00F1a centrado verticalmente -->\n  <button *ngIf=\"type === 'password'\" type=\"button\" (click)=\"handleTogglePassword()\" class=\"toggle-button\">\n    <fa-icon [icon]=\"faEyeSlash\" class=\"icon\" [class.active]=\"showPassword\"></fa-icon>\n  </button>\n\n  @if (showLabel) {\n    <label class=\"text-small dark-gray\">{{ placeholder }}</label>\n  }\n\n\n  <!-- Input compatible con FormControl o signals -->\n  <input\n    *ngIf=\"control; else signalInput\"\n    [type]=\"type === 'password' && showPassword ? 'text' : type\"\n    [formControl]=\"control\"\n    [placeholder]=\"showLabel ? '' : placeholder\"\n    [disabled]=\"disabled\"\n    (keydown)=\"handleKeyDown($event)\"\n    (paste)=\"handlePaste($event)\"\n    (focus)=\"handleFocus($event)\"\n    (blur)=\"handleBlur($event)\"\n    [ngClass]=\"{ 'error-border': hasError() }\"\n  />\n\n  <!-- Input para signals -->\n  <ng-template #signalInput>\n    <input\n      [type]=\"type === 'password' && showPassword ? 'text' : type\"\n      [value]=\"value\"\n      [placeholder]=\"showLabel ? '' : placeholder\"\n      [disabled]=\"disabled\"\n      (input)=\"handleChange($event)\"\n      (keydown)=\"handleKeyDown($event)\"\n      (paste)=\"handlePaste($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"\n      [ngClass]=\"{ 'error-border': false }\"\n    />\n  </ng-template>\n\n\n  <!-- Mensaje de error que aparece solo cuando se clickea en el \u00EDcono de error -->\n  <div *ngIf=\"control?.invalid && control?.dirty && showError\" class=\"error-message\">\n    {{ getErrorMessage() }}\n  </div>\n</div>\n", styles: [".input-container{width:100%;min-width:100%;box-sizing:border-box;position:relative;display:block}input{position:relative;width:100%;min-width:100%;padding:7px 35px 7px 8px;border-radius:3px;font-family:Poppins,sans-serif;height:36px;font-size:14px;border:1px solid #ccc;outline:none;box-sizing:border-box;transition:all .3s ease;background-color:#fff!important;appearance:none;-moz-appearance:textfield;-webkit-appearance:textfield}input:-webkit-autofill{background-color:#fff!important}input.error-border{border-color:red}input:focus{border:1px solid blue}.error-icon{position:absolute;right:8px;top:1px;bottom:1px;font-size:24px;color:red;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:3;background-color:#fff}.error-message{position:absolute;bottom:0;left:0;color:red;padding:0 0 0 8px;border-radius:4px;font-size:12px;font-family:sans-serif;white-space:nowrap}.toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;z-index:2}.icon{transition:opacity .3s ease}.icon.active{opacity:.5}\n"] }]
+        }], ctorParameters: () => [{ type: InputService }], propDecorators: { id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], showLabel: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], validators: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], onKeyDown: [{
+                type: Output
+            }], onPaste: [{
+                type: Output
+            }], onFocus: [{
+                type: Output
+            }], onBlur: [{
+                type: Output
+            }] } });
+
+class RdndModal {
+    title = '';
+    type = 'success';
+    theme = themes.magenta;
+    confirmText = '';
+    cancelText = '';
+    close = new EventEmitter();
+    themes = themes;
+    icon;
+    content = '';
+    closeModal(result) {
+        this.close.emit(result);
+    }
+    constructor() {
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RdndModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: RdndModal, isStandalone: true, selector: "rdnd-modal", inputs: { title: "title", type: "type", theme: "theme", confirmText: "confirmText", cancelText: "cancelText" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"modal-wrapper\">\n\n  <div class=\"container\" (click)=\"$event.stopPropagation()\">\n\n    <div class=\"content\">\n\n      @if (icon != undefined) {\n        <fa-icon [icon]=\"icon\" class=\"icon\" [style.color]=\"theme.default\"\n        />\n      }\n\n      <span class=\"subtitle align-center\">{{ title }}</span>\n\n      <div class=\"text align-center\" [innerHTML]=\"content\">\n      </div>\n\n\n      @if (type !== 'question') {\n        <rdnd-button\n          [id]=\"'btn-modal'\"\n          [type]=\"'button'\"\n          (callback)=\"closeModal(true)\"\n          [text]=\"'Aceptar'\"\n          [theme]=\"theme\"\n          [size]=\"'full'\"\n        />\n      } @else {\n        <rdnd-button\n          [id]=\"'btn-modal-accept'\"\n          [type]=\"'button'\"\n          (callback)=\"closeModal(true)\"\n          [text]=\"confirmText\"\n          [theme]=\"theme\"\n          [size]=\"'full'\"\n        />\n        <rdnd-button\n          [id]=\"'btn-modal-cancel'\"\n          [type]=\"'button'\"\n          (callback)=\"closeModal(false)\"\n          [text]=\"cancelText\"\n          [theme]=\"themes.borderedMagenta\"\n          [size]=\"'full'\"\n        />\n      }\n\n    </div>\n\n\n  </div>\n</div>\n\n", styles: [".subtitle{font-family:Poppins,sans-serif;text-align:left;width:100%;font-weight:400;line-height:normal;font-size:18px;color:#000!important;font-weight:500}.subtitle.magenta{color:#c2185b}.subtitle.green{color:#44bb96}.subtitle.gray{color:#9e9e9e}.subtitle.white{color:#fff}.subtitle.white-soft{color:#ffffff78}.subtitle.bold{font-weight:700!important}.text-medium{font-family:Poppins,sans-serif;text-align:left;width:100%;font-weight:400;line-height:normal;font-size:16px;font-weight:500}.text-medium.magenta{color:#c2185b}.text-medium.green{color:#44bb96}.text-medium.gray{color:#9e9e9e}.text-medium.white{color:#fff}.text-medium.white-soft{color:#ffffff78}.text-medium.bold{font-weight:700!important}.text{font-family:Poppins,sans-serif;text-align:left;width:100%;font-weight:400;line-height:normal;font-size:14.5px}.text.magenta{color:#c2185b}.text.green{color:#44bb96}.text.gray{color:#9e9e9e}.text.white{color:#fff}.text.white-soft{color:#ffffff78}.text.bold{font-weight:700!important}.text-small{font-family:Poppins,sans-serif;text-align:left;width:100%;font-weight:400;line-height:normal;font-size:12px}.text-small.magenta{color:#c2185b}.text-small.green{color:#44bb96}.text-small.gray{color:#9e9e9e}.text-small.white{color:#fff}.text-small.white-soft{color:#ffffff78}.text-small.bold{font-weight:700!important}.label{font-family:Poppins,sans-serif;text-align:left;width:100%;font-weight:400;line-height:normal;font-size:14.5px;font-weight:700;margin:0;padding:0}.label.magenta{color:#c2185b}.label.green{color:#44bb96}.label.gray{color:#9e9e9e}.label.white{color:#fff}.label.white-soft{color:#ffffff78}.label.bold{font-weight:700!important}.label-medium{font-family:Poppins,sans-serif;text-align:left;width:100%;font-weight:400;line-height:normal;font-size:16px;font-weight:700;margin:0;padding:0}.label-medium.magenta{color:#c2185b}.label-medium.green{color:#44bb96}.label-medium.gray{color:#9e9e9e}.label-medium.white{color:#fff}.label-medium.white-soft{color:#ffffff78}.label-medium.bold{font-weight:700!important}.label-small{font-family:Poppins,sans-serif;text-align:left;width:100%;font-weight:400;line-height:normal;font-size:12px;font-weight:700;margin:0;padding:0}.label-small.magenta{color:#c2185b}.label-small.green{color:#44bb96}.label-small.gray{color:#9e9e9e}.label-small.white{color:#fff}.label-small.white-soft{color:#ffffff78}.label-small.bold{font-weight:700!important}.align-center{text-align:center}.align-right{text-align:right}@font-face{font-family:Barcode;src:url(/assets/fonts/BarcodeFont.ttf) format(\"truetype\");font-weight:400;font-style:normal}.modal-wrapper{position:fixed;inset:0;z-index:95;background-color:#000000b3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;padding:16px}.modal-wrapper .container{width:100%;max-width:720px;background-color:#fff;padding:32px 16px;border-radius:4px;position:relative}.modal-wrapper .container .content{display:flex;flex-direction:column;gap:8px;width:100%;max-width:380px;margin:auto}.modal-wrapper .container .content .icon{margin:auto;font-size:40px;line-height:normal}.modal-wrapper .container .content p{margin:14px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: RdndButton, selector: "rdnd-button", inputs: ["id", "icon", "text", "theme", "size", "type", "borders", "disabled"], outputs: ["callback"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RdndModal, decorators: [{
+            type: Component,
+            args: [{ selector: 'rdnd-modal', standalone: true, imports: [
+                        CommonModule,
+                        FontAwesomeModule,
+                        RdndButton,
+                        RdndScreenTitle,
+                    ], template: "<div class=\"modal-wrapper\">\n\n  <div class=\"container\" (click)=\"$event.stopPropagation()\">\n\n    <div class=\"content\">\n\n      @if (icon != undefined) {\n        <fa-icon [icon]=\"icon\" class=\"icon\" [style.color]=\"theme.default\"\n        />\n      }\n\n      <span class=\"subtitle align-center\">{{ title }}</span>\n\n      <div class=\"text align-center\" [innerHTML]=\"content\">\n      </div>\n\n\n      @if (type !== 'question') {\n        <rdnd-button\n          [id]=\"'btn-modal'\"\n          [type]=\"'button'\"\n          (callback)=\"closeModal(true)\"\n          [text]=\"'Aceptar'\"\n          [theme]=\"theme\"\n          [size]=\"'full'\"\n        />\n      } @else {\n        <rdnd-button\n          [id]=\"'btn-modal-accept'\"\n          [type]=\"'button'\"\n          (callback)=\"closeModal(true)\"\n          [text]=\"confirmText\"\n          [theme]=\"theme\"\n          [size]=\"'full'\"\n        />\n        <rdnd-button\n          [id]=\"'btn-modal-cancel'\"\n          [type]=\"'button'\"\n          (callback)=\"closeModal(false)\"\n          [text]=\"cancelText\"\n          [theme]=\"themes.borderedMagenta\"\n          [size]=\"'full'\"\n        />\n      }\n\n    </div>\n\n\n  </div>\n</div>\n\n", styles: [".subtitle{font-family:Poppins,sans-serif;text-align:left;width:100%;font-weight:400;line-height:normal;font-size:18px;color:#000!important;font-weight:500}.subtitle.magenta{color:#c2185b}.subtitle.green{color:#44bb96}.subtitle.gray{color:#9e9e9e}.subtitle.white{color:#fff}.subtitle.white-soft{color:#ffffff78}.subtitle.bold{font-weight:700!important}.text-medium{font-family:Poppins,sans-serif;text-align:left;width:100%;font-weight:400;line-height:normal;font-size:16px;font-weight:500}.text-medium.magenta{color:#c2185b}.text-medium.green{color:#44bb96}.text-medium.gray{color:#9e9e9e}.text-medium.white{color:#fff}.text-medium.white-soft{color:#ffffff78}.text-medium.bold{font-weight:700!important}.text{font-family:Poppins,sans-serif;text-align:left;width:100%;font-weight:400;line-height:normal;font-size:14.5px}.text.magenta{color:#c2185b}.text.green{color:#44bb96}.text.gray{color:#9e9e9e}.text.white{color:#fff}.text.white-soft{color:#ffffff78}.text.bold{font-weight:700!important}.text-small{font-family:Poppins,sans-serif;text-align:left;width:100%;font-weight:400;line-height:normal;font-size:12px}.text-small.magenta{color:#c2185b}.text-small.green{color:#44bb96}.text-small.gray{color:#9e9e9e}.text-small.white{color:#fff}.text-small.white-soft{color:#ffffff78}.text-small.bold{font-weight:700!important}.label{font-family:Poppins,sans-serif;text-align:left;width:100%;font-weight:400;line-height:normal;font-size:14.5px;font-weight:700;margin:0;padding:0}.label.magenta{color:#c2185b}.label.green{color:#44bb96}.label.gray{color:#9e9e9e}.label.white{color:#fff}.label.white-soft{color:#ffffff78}.label.bold{font-weight:700!important}.label-medium{font-family:Poppins,sans-serif;text-align:left;width:100%;font-weight:400;line-height:normal;font-size:16px;font-weight:700;margin:0;padding:0}.label-medium.magenta{color:#c2185b}.label-medium.green{color:#44bb96}.label-medium.gray{color:#9e9e9e}.label-medium.white{color:#fff}.label-medium.white-soft{color:#ffffff78}.label-medium.bold{font-weight:700!important}.label-small{font-family:Poppins,sans-serif;text-align:left;width:100%;font-weight:400;line-height:normal;font-size:12px;font-weight:700;margin:0;padding:0}.label-small.magenta{color:#c2185b}.label-small.green{color:#44bb96}.label-small.gray{color:#9e9e9e}.label-small.white{color:#fff}.label-small.white-soft{color:#ffffff78}.label-small.bold{font-weight:700!important}.align-center{text-align:center}.align-right{text-align:right}@font-face{font-family:Barcode;src:url(/assets/fonts/BarcodeFont.ttf) format(\"truetype\");font-weight:400;font-style:normal}.modal-wrapper{position:fixed;inset:0;z-index:95;background-color:#000000b3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;padding:16px}.modal-wrapper .container{width:100%;max-width:720px;background-color:#fff;padding:32px 16px;border-radius:4px;position:relative}.modal-wrapper .container .content{display:flex;flex-direction:column;gap:8px;width:100%;max-width:380px;margin:auto}.modal-wrapper .container .content .icon{margin:auto;font-size:40px;line-height:normal}.modal-wrapper .container .content p{margin:14px 0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], confirmText: [{
+                type: Input
+            }], cancelText: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }] } });
+
+class ModalService {
+    appRef;
+    injector;
+    modalRef = null;
+    viewContainerRef;
+    constructor(appRef, injector) {
+        this.appRef = appRef;
+        this.injector = injector;
+    }
+    setViewContainerRef(vcr) {
+        this.viewContainerRef = vcr;
+    }
+    openModal(title, content, type = 'success', confirmText = 'Continuar', cancelText = 'Cancelar') {
+        if (this.modalRef || !this.viewContainerRef)
+            return Promise.resolve(false);
+        this.modalRef = this.viewContainerRef.createComponent(RdndModal);
+        this.modalRef.instance.title = title;
+        this.modalRef.instance.type = type;
+        this.modalRef.instance.theme = this.getStyleTheme(type);
+        this.modalRef.instance.content = content;
+        this.modalRef.instance.icon = this.getIcon(type);
+        this.modalRef.instance.confirmText = confirmText;
+        this.modalRef.instance.cancelText = cancelText;
+        const result = new Promise((resolve) => {
+            this.modalRef.instance.close.subscribe((res) => {
+                this.closeModal();
+                resolve(res);
+            });
+        });
+        this.appRef.attachView(this.modalRef.hostView);
+        const domElem = this.modalRef.hostView.rootNodes[0];
+        document.body.appendChild(domElem);
+        return result;
+    }
+    getStyleTheme = (theme) => {
+        switch (theme) {
+            case "success":
+                return themes.green;
+            case 'error':
+                return themes.magentaNormal;
+            case 'question':
+                return themes.purple;
+            case 'warning':
+                return themes.yellow;
+            case 'info':
+                return themes.purple;
+        }
+    };
+    closeModal() {
+        if (this.modalRef) {
+            this.appRef.detachView(this.modalRef.hostView);
+            this.modalRef.destroy();
+            this.modalRef = null;
+        }
+    }
+    getIcon(theme) {
+        switch (theme) {
+            case 'error':
+                return faTriangleExclamation;
+            case 'question':
+                return faCircleQuestion;
+            case "success":
+                return faCircleCheck;
+            case "warning":
+                return faTriangleExclamation;
+            case "info":
+                return faCircleInfo;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ModalService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.Injector }] });
+
+class StorageService {
+    constructor() {
+    }
+    save(key, value) {
+        sessionStorage.setItem(key, JSON.stringify(value));
+    }
+    ;
+    get(key) {
+        const data = sessionStorage.getItem(key);
+        if (data !== null) {
+            return JSON.parse(data);
+        }
+        else {
+            return null;
+        }
+    }
+    delete(key) {
+        sessionStorage.removeItem(key);
+    }
+    wipe() {
+        sessionStorage.clear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: StorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: StorageService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: StorageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Public API Surface of gentera-rdnd
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ButtonService, InputService, ModalService, RDND_CONFIG, RdndActiveIndicator, RdndButton, RdndInput, RdndLoaderComponent, RdndModal, RdndNavbar, RdndScreenTitle, RdndSidebar, StorageService, themes as rdndThemes };
+//# sourceMappingURL=gentera-rdnd.mjs.map