ui-core-abv 0.0.6 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/fesm2022/ui-core-abv.mjs +501 -165
  2. package/fesm2022/ui-core-abv.mjs.map +1 -1
  3. package/lib/components/dynamic-form/form.models.d.ts +2 -1
  4. package/lib/components/{checkbox → inputs/checkbox}/checkbox.component.d.ts +6 -1
  5. package/lib/components/inputs/date-picker/date-picker.component.d.ts +66 -0
  6. package/lib/components/inputs/select/select.component.d.ts +9 -9
  7. package/lib/components/{toggle-button → inputs/toggle-button}/toggle-button.component.d.ts +2 -1
  8. package/lib/components/push-alerts/alert/alert.component.d.ts +16 -0
  9. package/lib/components/push-alerts/alert-container/alert-container.component.d.ts +13 -0
  10. package/lib/components/push-alerts/alert.model.d.ts +1 -1
  11. package/lib/components/table/table.component.d.ts +3 -3
  12. package/lib/components/tiny-alert/tiny-alert.component.d.ts +1 -1
  13. package/package.json +1 -1
  14. package/public-api.d.ts +5 -2
  15. package/src/lib/styles/_tokens.scss +1 -0
  16. package/src/lib/styles/_variables.scss +4 -3
  17. package/src/lib/styles/_colors.scss +0 -0
package/fesm2022/ui-core-abv.mjs CHANGED
@@ -1,15 +1,15 @@
1
1
  import * as i1 from '@angular/common';
2
- import { CommonModule, AsyncPipe } from '@angular/common';
2
+ import { CommonModule, DatePipe, AsyncPipe } from '@angular/common';
3
3
  import * as i0 from '@angular/core';
4
- import { Input, Component, EventEmitter, Output, Directive, forwardRef, inject, Renderer2, ViewChild, Pipe, createComponent, HostListener, Injector, Inject, EnvironmentInjector, Injectable } from '@angular/core';
5
- import * as i1$2 from '@angular/forms';
4
+ import { Input, Component, EventEmitter, Output, Directive, forwardRef, inject, ViewContainerRef, ElementRef, ViewChild, Pipe, createComponent, HostListener, Injectable, Injector, Inject, EnvironmentInjector } from '@angular/core';
5
+ import * as i1$1 from '@angular/forms';
6
6
  import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, FormBuilder, Validators } from '@angular/forms';
7
- import * as i1$1 from '@angular/cdk/overlay';
8
- import { OverlayModule, Overlay, OverlayRef } from '@angular/cdk/overlay';
9
- import { trigger, transition, style, animate, state, keyframes } from '@angular/animations';
7
+ import * as i1$2 from '@angular/cdk/overlay';
8
+ import { Overlay, OverlayRef } from '@angular/cdk/overlay';
10
9
  import * as i1$3 from '@angular/cdk/portal';
11
10
  import { TemplatePortal, ComponentPortal, PortalModule, CdkPortalOutlet } from '@angular/cdk/portal';
12
11
  import { Subject, debounceTime, distinctUntilChanged, tap, switchMap, of, finalize } from 'rxjs';
12
+ import { trigger, transition, style, animate, state, keyframes } from '@angular/animations';
13
13
 
14
14
  class UicButtonComponent {
15
15
  text = '';
@@ -26,11 +26,11 @@ class UicButtonComponent {
26
26
  this.buttonTypeClass = 'btn-' + this.type + ' btn-' + this.color + "-" + this.type;
27
27
  }
28
28
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
29
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicButtonComponent, isStandalone: true, selector: "ui-button", inputs: { text: "text", icon: "icon", rightIcon: "rightIcon", iconOnly: "iconOnly", disabled: "disabled", loading: "loading", size: "size", type: "type", color: "color" }, ngImport: i0, template: "<button\r\n [class]=\"'main-btn ' + buttonTypeClass\"\r\n [disabled]=\"disabled || loading\"\r\n [ngClass]=\"{\r\n 'btn-tiny' :size=='t',\r\n 'btn-small' :size=='s', \r\n 'btn-medium' :size=='m',\r\n 'btn-large' :size=='l', \r\n 'btn-gigant' :size=='g'\r\n }\" >\r\n \r\n @if (!loading) {\r\n @if (icon!='' ) {\r\n <i class=\"{{icon}}\"></i>\r\n }\r\n @if (!iconOnly) {\r\n <div class=\"btn-text\" [class.norighticon]=\"rightIcon==''\" [class.noicon]=\"icon==''\">\r\n {{text}}\r\n <ng-content ></ng-content>\r\n </div>\r\n }\r\n @if (rightIcon!='' ) {\r\n <i class=\"{{rightIcon}}\"></i>\r\n }\r\n } @else {\r\n <div class=\"btn-loader-container\"> <div class=\"btn-loader\"></div> </div>\r\n }\r\n</button>", styles: [":host{width:fit-content;display:block}.main-btn{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border:none;text-align:center;border-radius:var(--button-radius);padding:0;white-space:nowrap;outline:none}.main-btn:focus,.main-btn:focus-visible{box-shadow:0 0 0 3px rgba(var(--secondary-400),.4)}.noicon{padding-left:1rem}.norighticon{padding-right:1rem}.btn-text{font-weight:500}.btn-tiny{height:22px;min-width:22px}.btn-tiny>.btn-text{font-size:.625rem;line-height:22px}.btn-tiny i{font-size:.875rem;line-height:22px;width:22px}.btn-tiny .btn-loader{line-height:.625rem;width:.625rem}.btn-small{height:30px;min-width:30px}.btn-small>.btn-text{font-size:.75rem;line-height:30px}.btn-small i{font-size:1rem;line-height:30px;width:30px}.btn-small .btn-loader{line-height:.75rem;width:.75rem}.btn-medium{height:38px;min-width:38px}.btn-medium>.btn-text{font-size:.875rem;line-height:38px}.btn-medium i{font-size:1.625rem;line-height:38px;width:38px}.btn-medium .btn-loader{line-height:.875rem;width:.875rem}.btn-large{height:46px;min-width:46px}.btn-large>.btn-text{font-size:1rem;line-height:46px}.btn-large i{font-size:1.625rem;line-height:46px;width:46px}.btn-large .btn-loader{line-height:1rem;width:1rem}.btn-gigant{height:54px;min-width:54px}.btn-gigant>.btn-text{font-size:1.125rem;line-height:54px}.btn-gigant i{font-size:1.625rem;line-height:54px;width:54px}.btn-gigant .btn-loader{line-height:1.125rem;width:1.125rem}.btn-filled{color:var(--white);transition:background .3s ease;cursor:pointer}.btn-filled:disabled{cursor:not-allowed;color:var(--grey-300)}.btn-bordered{border:solid 1px var(--grey-200);background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-bordered:disabled{cursor:not-allowed;color:var(--grey-300);border-color:var(--grey-300)}.btn-ghost{color:var(--grey-800);background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-ghost:disabled{cursor:not-allowed;color:var(--grey-300)}.btn-primary-filled{background-color:var(--primary-400)}.btn-primary-filled:hover{background-color:var(--primary-600)}.btn-primary-filled:active{background-color:var(--primary-900)}.btn-primary-filled:disabled{background-color:var(--primary-100)}.btn-primary-bordered{color:var(--primary-400)}.btn-primary-bordered:hover{background-color:var(--primary-100)}.btn-primary-bordered:active{background-color:var(--primary-300)}.btn-primary-bordered:disabled{background-color:var(--primary-100)}.btn-primary-ghost:hover{background-color:var(--primary-100)}.btn-primary-ghost:active{background-color:var(--primary-300)}.btn-primary-ghost:disabled{background-color:transparent}.btn-black-filled{background-color:var(--grey-950)}.btn-black-filled:hover{background-color:var(--secondary-500)}.btn-black-filled:active{background-color:var(--secondary-800)}.btn-black-filled:disabled{background-color:var(--grey-100)}.btn-black-bordered{color:var(--grey-700)}.btn-black-bordered:hover{background-color:var(--secondary-100)}.btn-black-bordered:active{background-color:var(--secondary-300)}.btn-black-bordered:disabled{background-color:var(--grey-50)}.btn-black-ghost:hover{background-color:var(--secondary-100)}.btn-black-ghost:active{background-color:var(--secondary-300)}.btn-black-ghost:disabled{background-color:transparent}.btn-green-filled{background-color:var(--green-400)}.btn-green-filled:hover{background-color:var(--green-600)}.btn-green-filled:active{background-color:var(--green-900)}.btn-green-filled:disabled{background-color:var(--green-100)}.btn-green-bordered{color:var(--green-400)}.btn-green-bordered:hover{background-color:var(--green-100)}.btn-green-bordered:active{background-color:var(--green-300)}.btn-green-bordered:disabled{background-color:var(--green-100)}.btn-green-ghost:hover{background-color:var(--green-100)}.btn-green-ghost:active{background-color:var(--green-300)}.btn-green-ghost:disabled{background-color:transparent}.btn-yellow-filled{background-color:var(--yellow-400)}.btn-yellow-filled:hover{background-color:var(--yellow-600)}.btn-yellow-filled:active{background-color:var(--yellow-900)}.btn-yellow-filled:disabled{background-color:var(--yellow-100)}.btn-yellow-bordered{color:var(--yellow-400)}.btn-yellow-bordered:hover{background-color:var(--yellow-100)}.btn-yellow-bordered:active{background-color:var(--yellow-300)}.btn-yellow-bordered:disabled{background-color:var(--yellow-100)}.btn-yellow-ghost:hover{background-color:var(--yellow-100)}.btn-yellow-ghost:active{background-color:var(--yellow-300)}.btn-yellow-ghost:disabled{background-color:transparent}.btn-blue-filled{background-color:var(--blue-400)}.btn-blue-filled:hover{background-color:var(--blue-600)}.btn-blue-filled:active{background-color:var(--blue-900)}.btn-blue-filled:disabled{background-color:var(--blue-100)}.btn-blue-bordered{color:var(--blue-400)}.btn-blue-bordered:hover{background-color:var(--blue-100)}.btn-blue-bordered:active{background-color:var(--blue-300)}.btn-blue-bordered:disabled{background-color:var(--blue-100)}.btn-blue-ghost:hover{background-color:var(--blue-100)}.btn-blue-ghost:active{background-color:var(--blue-300)}.btn-blue-ghost:disabled{background-color:transparent}.btn-red-filled{background-color:var(--red-400)}.btn-red-filled:hover{background-color:var(--red-600)}.btn-red-filled:active{background-color:var(--red-900)}.btn-red-filled:disabled{background-color:var(--red-100)}.btn-red-bordered{color:var(--red-400)}.btn-red-bordered:hover{background-color:var(--red-100)}.btn-red-bordered:active{background-color:var(--red-300)}.btn-red-bordered:disabled{background-color:var(--red-100)}.btn-red-ghost:hover{background-color:var(--red-100)}.btn-red-ghost:active{background-color:var(--red-300)}.btn-red-ghost:disabled{background-color:transparent}.btn-loader{width:14px;aspect-ratio:1;border-radius:50%;animation:l5 1s infinite linear alternate;margin:2px}.btn-loader-container{line-height:14px;margin:3px 0;display:flex;justify-content:center;width:65px}@keyframes l5{0%{box-shadow:20px 0 var(--primary-200),-20px 0 var(--primary-600);background:var(--primary-200)}33%{box-shadow:20px 0 var(--primary-200),-20px 0 var(--primary-600);background:var(--primary-600)}66%{box-shadow:20px 0 var(--primary-600),-20px 0 var(--primary-200);background:var(--primary-600)}to{box-shadow:20px 0 var(--primary-600),-20px 0 var(--primary-200);background:var(--primary-200)}}.btn-loader:before,.btn-loader:after{content:\"\";grid-area:1/1;margin:15%;border-radius:50%;background:inherit;transform:rotate(0) translate(150%);animation:l22 1s infinite}.btn-loader:after{animation-delay:-.5s}@keyframes l22-0{to{transform:rotate(1turn)}}@keyframes l22{to{transform:rotate(1turn) translate(150%)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
29
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicButtonComponent, isStandalone: true, selector: "ui-button", inputs: { text: "text", icon: "icon", rightIcon: "rightIcon", iconOnly: "iconOnly", disabled: "disabled", loading: "loading", size: "size", type: "type", color: "color" }, ngImport: i0, template: "<button\r\n [class]=\"'main-btn ' + buttonTypeClass\"\r\n [disabled]=\"disabled || loading\"\r\n [ngClass]=\"{\r\n 'btn-tiny' :size=='t',\r\n 'btn-small' :size=='s', \r\n 'btn-medium' :size=='m',\r\n 'btn-large' :size=='l', \r\n 'btn-gigant' :size=='g'\r\n }\" >\r\n \r\n @if (!loading) {\r\n @if (icon!='' ) {\r\n <i class=\"{{icon}}\"></i>\r\n }\r\n @if (!iconOnly) {\r\n <div class=\"btn-text\" [class.norighticon]=\"rightIcon==''\" [class.noicon]=\"icon==''\">\r\n {{text}}\r\n <ng-content ></ng-content>\r\n </div>\r\n }\r\n @if (rightIcon!='' ) {\r\n <i class=\"{{rightIcon}}\"></i>\r\n }\r\n } @else {\r\n <div class=\"btn-loader-container\"> <div class=\"btn-loader\"></div> </div>\r\n }\r\n</button>", styles: [":host{width:fit-content;display:block}.main-btn{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border:none;text-align:center;border-radius:var(--button-radius);padding:0;white-space:nowrap;outline:none}.main-btn:focus,.main-btn:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.noicon{padding-left:1rem}.norighticon{padding-right:1rem}.btn-text{font-weight:500}.btn-tiny{height:22px;min-width:22px}.btn-tiny>.btn-text{font-size:.625rem;line-height:22px}.btn-tiny i{font-size:.875rem;line-height:22px;width:22px}.btn-tiny .btn-loader{line-height:.625rem;width:.625rem}.btn-small{height:30px;min-width:30px}.btn-small>.btn-text{font-size:.75rem;line-height:30px}.btn-small i{font-size:1rem;line-height:30px;width:30px}.btn-small .btn-loader{line-height:.75rem;width:.75rem}.btn-medium{height:38px;min-width:38px}.btn-medium>.btn-text{font-size:.875rem;line-height:38px}.btn-medium i{font-size:1.625rem;line-height:38px;width:38px}.btn-medium .btn-loader{line-height:.875rem;width:.875rem}.btn-large{height:46px;min-width:46px}.btn-large>.btn-text{font-size:1rem;line-height:46px}.btn-large i{font-size:1.625rem;line-height:46px;width:46px}.btn-large .btn-loader{line-height:1rem;width:1rem}.btn-gigant{height:54px;min-width:54px}.btn-gigant>.btn-text{font-size:1.125rem;line-height:54px}.btn-gigant i{font-size:1.625rem;line-height:54px;width:54px}.btn-gigant .btn-loader{line-height:1.125rem;width:1.125rem}.btn-filled{color:var(--white);transition:background .3s ease;cursor:pointer}.btn-filled:disabled{cursor:not-allowed;color:var(--grey-300)}.btn-bordered{border:solid 1px var(--grey-200);background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-bordered:disabled{cursor:not-allowed;color:var(--grey-300);border-color:var(--grey-300)}.btn-ghost{color:var(--grey-800);background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-ghost:disabled{cursor:not-allowed;color:var(--grey-300)}.btn-primary-filled{background-color:var(--primary-400)}.btn-primary-filled:hover{background-color:var(--primary-600)}.btn-primary-filled:active{background-color:var(--primary-900)}.btn-primary-filled:disabled{background-color:var(--primary-100)}.btn-primary-bordered{color:var(--primary-400)}.btn-primary-bordered:hover{background-color:var(--primary-100)}.btn-primary-bordered:active{background-color:var(--primary-300)}.btn-primary-bordered:disabled{background-color:var(--primary-100)}.btn-primary-ghost:hover{background-color:var(--primary-100)}.btn-primary-ghost:active{background-color:var(--primary-300)}.btn-primary-ghost:disabled{background-color:transparent}.btn-black-filled{background-color:var(--grey-950)}.btn-black-filled:hover{background-color:var(--secondary-500)}.btn-black-filled:active{background-color:var(--secondary-800)}.btn-black-filled:disabled{background-color:var(--grey-100)}.btn-black-bordered{color:var(--grey-700)}.btn-black-bordered:hover{background-color:var(--secondary-100)}.btn-black-bordered:active{background-color:var(--secondary-300)}.btn-black-bordered:disabled{background-color:var(--grey-50)}.btn-black-ghost:hover{background-color:var(--secondary-100)}.btn-black-ghost:active{background-color:var(--secondary-300)}.btn-black-ghost:disabled{background-color:transparent}.btn-green-filled{background-color:var(--green-400)}.btn-green-filled:hover{background-color:var(--green-600)}.btn-green-filled:active{background-color:var(--green-900)}.btn-green-filled:disabled{background-color:var(--green-100)}.btn-green-bordered{color:var(--green-400)}.btn-green-bordered:hover{background-color:var(--green-100)}.btn-green-bordered:active{background-color:var(--green-300)}.btn-green-bordered:disabled{background-color:var(--green-100)}.btn-green-ghost:hover{background-color:var(--green-100)}.btn-green-ghost:active{background-color:var(--green-300)}.btn-green-ghost:disabled{background-color:transparent}.btn-yellow-filled{background-color:var(--yellow-400)}.btn-yellow-filled:hover{background-color:var(--yellow-600)}.btn-yellow-filled:active{background-color:var(--yellow-900)}.btn-yellow-filled:disabled{background-color:var(--yellow-100)}.btn-yellow-bordered{color:var(--yellow-400)}.btn-yellow-bordered:hover{background-color:var(--yellow-100)}.btn-yellow-bordered:active{background-color:var(--yellow-300)}.btn-yellow-bordered:disabled{background-color:var(--yellow-100)}.btn-yellow-ghost:hover{background-color:var(--yellow-100)}.btn-yellow-ghost:active{background-color:var(--yellow-300)}.btn-yellow-ghost:disabled{background-color:transparent}.btn-blue-filled{background-color:var(--blue-400)}.btn-blue-filled:hover{background-color:var(--blue-600)}.btn-blue-filled:active{background-color:var(--blue-900)}.btn-blue-filled:disabled{background-color:var(--blue-100)}.btn-blue-bordered{color:var(--blue-400)}.btn-blue-bordered:hover{background-color:var(--blue-100)}.btn-blue-bordered:active{background-color:var(--blue-300)}.btn-blue-bordered:disabled{background-color:var(--blue-100)}.btn-blue-ghost:hover{background-color:var(--blue-100)}.btn-blue-ghost:active{background-color:var(--blue-300)}.btn-blue-ghost:disabled{background-color:transparent}.btn-red-filled{background-color:var(--red-400)}.btn-red-filled:hover{background-color:var(--red-600)}.btn-red-filled:active{background-color:var(--red-900)}.btn-red-filled:disabled{background-color:var(--red-100)}.btn-red-bordered{color:var(--red-400)}.btn-red-bordered:hover{background-color:var(--red-100)}.btn-red-bordered:active{background-color:var(--red-300)}.btn-red-bordered:disabled{background-color:var(--red-100)}.btn-red-ghost:hover{background-color:var(--red-100)}.btn-red-ghost:active{background-color:var(--red-300)}.btn-red-ghost:disabled{background-color:transparent}.btn-loader{width:14px;aspect-ratio:1;border-radius:50%;animation:l5 1s infinite linear alternate;margin:2px}.btn-loader-container{line-height:14px;margin:3px 0;display:flex;justify-content:center;width:65px}@keyframes l5{0%{box-shadow:20px 0 var(--primary-200),-20px 0 var(--primary-600);background:var(--primary-200)}33%{box-shadow:20px 0 var(--primary-200),-20px 0 var(--primary-600);background:var(--primary-600)}66%{box-shadow:20px 0 var(--primary-600),-20px 0 var(--primary-200);background:var(--primary-600)}to{box-shadow:20px 0 var(--primary-600),-20px 0 var(--primary-200);background:var(--primary-200)}}.btn-loader:before,.btn-loader:after{content:\"\";grid-area:1/1;margin:15%;border-radius:50%;background:inherit;transform:rotate(0) translate(150%);animation:l22 1s infinite}.btn-loader:after{animation-delay:-.5s}@keyframes l22-0{to{transform:rotate(1turn)}}@keyframes l22{to{transform:rotate(1turn) translate(150%)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
30
30
  }
31
31
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicButtonComponent, decorators: [{
32
32
  type: Component,
33
- args: [{ selector: 'ui-button', imports: [CommonModule], template: "<button\r\n [class]=\"'main-btn ' + buttonTypeClass\"\r\n [disabled]=\"disabled || loading\"\r\n [ngClass]=\"{\r\n 'btn-tiny' :size=='t',\r\n 'btn-small' :size=='s', \r\n 'btn-medium' :size=='m',\r\n 'btn-large' :size=='l', \r\n 'btn-gigant' :size=='g'\r\n }\" >\r\n \r\n @if (!loading) {\r\n @if (icon!='' ) {\r\n <i class=\"{{icon}}\"></i>\r\n }\r\n @if (!iconOnly) {\r\n <div class=\"btn-text\" [class.norighticon]=\"rightIcon==''\" [class.noicon]=\"icon==''\">\r\n {{text}}\r\n <ng-content ></ng-content>\r\n </div>\r\n }\r\n @if (rightIcon!='' ) {\r\n <i class=\"{{rightIcon}}\"></i>\r\n }\r\n } @else {\r\n <div class=\"btn-loader-container\"> <div class=\"btn-loader\"></div> </div>\r\n }\r\n</button>", styles: [":host{width:fit-content;display:block}.main-btn{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border:none;text-align:center;border-radius:var(--button-radius);padding:0;white-space:nowrap;outline:none}.main-btn:focus,.main-btn:focus-visible{box-shadow:0 0 0 3px rgba(var(--secondary-400),.4)}.noicon{padding-left:1rem}.norighticon{padding-right:1rem}.btn-text{font-weight:500}.btn-tiny{height:22px;min-width:22px}.btn-tiny>.btn-text{font-size:.625rem;line-height:22px}.btn-tiny i{font-size:.875rem;line-height:22px;width:22px}.btn-tiny .btn-loader{line-height:.625rem;width:.625rem}.btn-small{height:30px;min-width:30px}.btn-small>.btn-text{font-size:.75rem;line-height:30px}.btn-small i{font-size:1rem;line-height:30px;width:30px}.btn-small .btn-loader{line-height:.75rem;width:.75rem}.btn-medium{height:38px;min-width:38px}.btn-medium>.btn-text{font-size:.875rem;line-height:38px}.btn-medium i{font-size:1.625rem;line-height:38px;width:38px}.btn-medium .btn-loader{line-height:.875rem;width:.875rem}.btn-large{height:46px;min-width:46px}.btn-large>.btn-text{font-size:1rem;line-height:46px}.btn-large i{font-size:1.625rem;line-height:46px;width:46px}.btn-large .btn-loader{line-height:1rem;width:1rem}.btn-gigant{height:54px;min-width:54px}.btn-gigant>.btn-text{font-size:1.125rem;line-height:54px}.btn-gigant i{font-size:1.625rem;line-height:54px;width:54px}.btn-gigant .btn-loader{line-height:1.125rem;width:1.125rem}.btn-filled{color:var(--white);transition:background .3s ease;cursor:pointer}.btn-filled:disabled{cursor:not-allowed;color:var(--grey-300)}.btn-bordered{border:solid 1px var(--grey-200);background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-bordered:disabled{cursor:not-allowed;color:var(--grey-300);border-color:var(--grey-300)}.btn-ghost{color:var(--grey-800);background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-ghost:disabled{cursor:not-allowed;color:var(--grey-300)}.btn-primary-filled{background-color:var(--primary-400)}.btn-primary-filled:hover{background-color:var(--primary-600)}.btn-primary-filled:active{background-color:var(--primary-900)}.btn-primary-filled:disabled{background-color:var(--primary-100)}.btn-primary-bordered{color:var(--primary-400)}.btn-primary-bordered:hover{background-color:var(--primary-100)}.btn-primary-bordered:active{background-color:var(--primary-300)}.btn-primary-bordered:disabled{background-color:var(--primary-100)}.btn-primary-ghost:hover{background-color:var(--primary-100)}.btn-primary-ghost:active{background-color:var(--primary-300)}.btn-primary-ghost:disabled{background-color:transparent}.btn-black-filled{background-color:var(--grey-950)}.btn-black-filled:hover{background-color:var(--secondary-500)}.btn-black-filled:active{background-color:var(--secondary-800)}.btn-black-filled:disabled{background-color:var(--grey-100)}.btn-black-bordered{color:var(--grey-700)}.btn-black-bordered:hover{background-color:var(--secondary-100)}.btn-black-bordered:active{background-color:var(--secondary-300)}.btn-black-bordered:disabled{background-color:var(--grey-50)}.btn-black-ghost:hover{background-color:var(--secondary-100)}.btn-black-ghost:active{background-color:var(--secondary-300)}.btn-black-ghost:disabled{background-color:transparent}.btn-green-filled{background-color:var(--green-400)}.btn-green-filled:hover{background-color:var(--green-600)}.btn-green-filled:active{background-color:var(--green-900)}.btn-green-filled:disabled{background-color:var(--green-100)}.btn-green-bordered{color:var(--green-400)}.btn-green-bordered:hover{background-color:var(--green-100)}.btn-green-bordered:active{background-color:var(--green-300)}.btn-green-bordered:disabled{background-color:var(--green-100)}.btn-green-ghost:hover{background-color:var(--green-100)}.btn-green-ghost:active{background-color:var(--green-300)}.btn-green-ghost:disabled{background-color:transparent}.btn-yellow-filled{background-color:var(--yellow-400)}.btn-yellow-filled:hover{background-color:var(--yellow-600)}.btn-yellow-filled:active{background-color:var(--yellow-900)}.btn-yellow-filled:disabled{background-color:var(--yellow-100)}.btn-yellow-bordered{color:var(--yellow-400)}.btn-yellow-bordered:hover{background-color:var(--yellow-100)}.btn-yellow-bordered:active{background-color:var(--yellow-300)}.btn-yellow-bordered:disabled{background-color:var(--yellow-100)}.btn-yellow-ghost:hover{background-color:var(--yellow-100)}.btn-yellow-ghost:active{background-color:var(--yellow-300)}.btn-yellow-ghost:disabled{background-color:transparent}.btn-blue-filled{background-color:var(--blue-400)}.btn-blue-filled:hover{background-color:var(--blue-600)}.btn-blue-filled:active{background-color:var(--blue-900)}.btn-blue-filled:disabled{background-color:var(--blue-100)}.btn-blue-bordered{color:var(--blue-400)}.btn-blue-bordered:hover{background-color:var(--blue-100)}.btn-blue-bordered:active{background-color:var(--blue-300)}.btn-blue-bordered:disabled{background-color:var(--blue-100)}.btn-blue-ghost:hover{background-color:var(--blue-100)}.btn-blue-ghost:active{background-color:var(--blue-300)}.btn-blue-ghost:disabled{background-color:transparent}.btn-red-filled{background-color:var(--red-400)}.btn-red-filled:hover{background-color:var(--red-600)}.btn-red-filled:active{background-color:var(--red-900)}.btn-red-filled:disabled{background-color:var(--red-100)}.btn-red-bordered{color:var(--red-400)}.btn-red-bordered:hover{background-color:var(--red-100)}.btn-red-bordered:active{background-color:var(--red-300)}.btn-red-bordered:disabled{background-color:var(--red-100)}.btn-red-ghost:hover{background-color:var(--red-100)}.btn-red-ghost:active{background-color:var(--red-300)}.btn-red-ghost:disabled{background-color:transparent}.btn-loader{width:14px;aspect-ratio:1;border-radius:50%;animation:l5 1s infinite linear alternate;margin:2px}.btn-loader-container{line-height:14px;margin:3px 0;display:flex;justify-content:center;width:65px}@keyframes l5{0%{box-shadow:20px 0 var(--primary-200),-20px 0 var(--primary-600);background:var(--primary-200)}33%{box-shadow:20px 0 var(--primary-200),-20px 0 var(--primary-600);background:var(--primary-600)}66%{box-shadow:20px 0 var(--primary-600),-20px 0 var(--primary-200);background:var(--primary-600)}to{box-shadow:20px 0 var(--primary-600),-20px 0 var(--primary-200);background:var(--primary-200)}}.btn-loader:before,.btn-loader:after{content:\"\";grid-area:1/1;margin:15%;border-radius:50%;background:inherit;transform:rotate(0) translate(150%);animation:l22 1s infinite}.btn-loader:after{animation-delay:-.5s}@keyframes l22-0{to{transform:rotate(1turn)}}@keyframes l22{to{transform:rotate(1turn) translate(150%)}}\n"] }]
33
+ args: [{ selector: 'ui-button', imports: [CommonModule], template: "<button\r\n [class]=\"'main-btn ' + buttonTypeClass\"\r\n [disabled]=\"disabled || loading\"\r\n [ngClass]=\"{\r\n 'btn-tiny' :size=='t',\r\n 'btn-small' :size=='s', \r\n 'btn-medium' :size=='m',\r\n 'btn-large' :size=='l', \r\n 'btn-gigant' :size=='g'\r\n }\" >\r\n \r\n @if (!loading) {\r\n @if (icon!='' ) {\r\n <i class=\"{{icon}}\"></i>\r\n }\r\n @if (!iconOnly) {\r\n <div class=\"btn-text\" [class.norighticon]=\"rightIcon==''\" [class.noicon]=\"icon==''\">\r\n {{text}}\r\n <ng-content ></ng-content>\r\n </div>\r\n }\r\n @if (rightIcon!='' ) {\r\n <i class=\"{{rightIcon}}\"></i>\r\n }\r\n } @else {\r\n <div class=\"btn-loader-container\"> <div class=\"btn-loader\"></div> </div>\r\n }\r\n</button>", styles: [":host{width:fit-content;display:block}.main-btn{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border:none;text-align:center;border-radius:var(--button-radius);padding:0;white-space:nowrap;outline:none}.main-btn:focus,.main-btn:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.noicon{padding-left:1rem}.norighticon{padding-right:1rem}.btn-text{font-weight:500}.btn-tiny{height:22px;min-width:22px}.btn-tiny>.btn-text{font-size:.625rem;line-height:22px}.btn-tiny i{font-size:.875rem;line-height:22px;width:22px}.btn-tiny .btn-loader{line-height:.625rem;width:.625rem}.btn-small{height:30px;min-width:30px}.btn-small>.btn-text{font-size:.75rem;line-height:30px}.btn-small i{font-size:1rem;line-height:30px;width:30px}.btn-small .btn-loader{line-height:.75rem;width:.75rem}.btn-medium{height:38px;min-width:38px}.btn-medium>.btn-text{font-size:.875rem;line-height:38px}.btn-medium i{font-size:1.625rem;line-height:38px;width:38px}.btn-medium .btn-loader{line-height:.875rem;width:.875rem}.btn-large{height:46px;min-width:46px}.btn-large>.btn-text{font-size:1rem;line-height:46px}.btn-large i{font-size:1.625rem;line-height:46px;width:46px}.btn-large .btn-loader{line-height:1rem;width:1rem}.btn-gigant{height:54px;min-width:54px}.btn-gigant>.btn-text{font-size:1.125rem;line-height:54px}.btn-gigant i{font-size:1.625rem;line-height:54px;width:54px}.btn-gigant .btn-loader{line-height:1.125rem;width:1.125rem}.btn-filled{color:var(--white);transition:background .3s ease;cursor:pointer}.btn-filled:disabled{cursor:not-allowed;color:var(--grey-300)}.btn-bordered{border:solid 1px var(--grey-200);background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-bordered:disabled{cursor:not-allowed;color:var(--grey-300);border-color:var(--grey-300)}.btn-ghost{color:var(--grey-800);background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-ghost:disabled{cursor:not-allowed;color:var(--grey-300)}.btn-primary-filled{background-color:var(--primary-400)}.btn-primary-filled:hover{background-color:var(--primary-600)}.btn-primary-filled:active{background-color:var(--primary-900)}.btn-primary-filled:disabled{background-color:var(--primary-100)}.btn-primary-bordered{color:var(--primary-400)}.btn-primary-bordered:hover{background-color:var(--primary-100)}.btn-primary-bordered:active{background-color:var(--primary-300)}.btn-primary-bordered:disabled{background-color:var(--primary-100)}.btn-primary-ghost:hover{background-color:var(--primary-100)}.btn-primary-ghost:active{background-color:var(--primary-300)}.btn-primary-ghost:disabled{background-color:transparent}.btn-black-filled{background-color:var(--grey-950)}.btn-black-filled:hover{background-color:var(--secondary-500)}.btn-black-filled:active{background-color:var(--secondary-800)}.btn-black-filled:disabled{background-color:var(--grey-100)}.btn-black-bordered{color:var(--grey-700)}.btn-black-bordered:hover{background-color:var(--secondary-100)}.btn-black-bordered:active{background-color:var(--secondary-300)}.btn-black-bordered:disabled{background-color:var(--grey-50)}.btn-black-ghost:hover{background-color:var(--secondary-100)}.btn-black-ghost:active{background-color:var(--secondary-300)}.btn-black-ghost:disabled{background-color:transparent}.btn-green-filled{background-color:var(--green-400)}.btn-green-filled:hover{background-color:var(--green-600)}.btn-green-filled:active{background-color:var(--green-900)}.btn-green-filled:disabled{background-color:var(--green-100)}.btn-green-bordered{color:var(--green-400)}.btn-green-bordered:hover{background-color:var(--green-100)}.btn-green-bordered:active{background-color:var(--green-300)}.btn-green-bordered:disabled{background-color:var(--green-100)}.btn-green-ghost:hover{background-color:var(--green-100)}.btn-green-ghost:active{background-color:var(--green-300)}.btn-green-ghost:disabled{background-color:transparent}.btn-yellow-filled{background-color:var(--yellow-400)}.btn-yellow-filled:hover{background-color:var(--yellow-600)}.btn-yellow-filled:active{background-color:var(--yellow-900)}.btn-yellow-filled:disabled{background-color:var(--yellow-100)}.btn-yellow-bordered{color:var(--yellow-400)}.btn-yellow-bordered:hover{background-color:var(--yellow-100)}.btn-yellow-bordered:active{background-color:var(--yellow-300)}.btn-yellow-bordered:disabled{background-color:var(--yellow-100)}.btn-yellow-ghost:hover{background-color:var(--yellow-100)}.btn-yellow-ghost:active{background-color:var(--yellow-300)}.btn-yellow-ghost:disabled{background-color:transparent}.btn-blue-filled{background-color:var(--blue-400)}.btn-blue-filled:hover{background-color:var(--blue-600)}.btn-blue-filled:active{background-color:var(--blue-900)}.btn-blue-filled:disabled{background-color:var(--blue-100)}.btn-blue-bordered{color:var(--blue-400)}.btn-blue-bordered:hover{background-color:var(--blue-100)}.btn-blue-bordered:active{background-color:var(--blue-300)}.btn-blue-bordered:disabled{background-color:var(--blue-100)}.btn-blue-ghost:hover{background-color:var(--blue-100)}.btn-blue-ghost:active{background-color:var(--blue-300)}.btn-blue-ghost:disabled{background-color:transparent}.btn-red-filled{background-color:var(--red-400)}.btn-red-filled:hover{background-color:var(--red-600)}.btn-red-filled:active{background-color:var(--red-900)}.btn-red-filled:disabled{background-color:var(--red-100)}.btn-red-bordered{color:var(--red-400)}.btn-red-bordered:hover{background-color:var(--red-100)}.btn-red-bordered:active{background-color:var(--red-300)}.btn-red-bordered:disabled{background-color:var(--red-100)}.btn-red-ghost:hover{background-color:var(--red-100)}.btn-red-ghost:active{background-color:var(--red-300)}.btn-red-ghost:disabled{background-color:transparent}.btn-loader{width:14px;aspect-ratio:1;border-radius:50%;animation:l5 1s infinite linear alternate;margin:2px}.btn-loader-container{line-height:14px;margin:3px 0;display:flex;justify-content:center;width:65px}@keyframes l5{0%{box-shadow:20px 0 var(--primary-200),-20px 0 var(--primary-600);background:var(--primary-200)}33%{box-shadow:20px 0 var(--primary-200),-20px 0 var(--primary-600);background:var(--primary-600)}66%{box-shadow:20px 0 var(--primary-600),-20px 0 var(--primary-200);background:var(--primary-600)}to{box-shadow:20px 0 var(--primary-600),-20px 0 var(--primary-200);background:var(--primary-200)}}.btn-loader:before,.btn-loader:after{content:\"\";grid-area:1/1;margin:15%;border-radius:50%;background:inherit;transform:rotate(0) translate(150%);animation:l22 1s infinite}.btn-loader:after{animation-delay:-.5s}@keyframes l22-0{to{transform:rotate(1turn)}}@keyframes l22{to{transform:rotate(1turn) translate(150%)}}\n"] }]
34
34
  }], propDecorators: { text: [{
35
35
  type: Input
36
36
  }], icon: [{
@@ -88,9 +88,13 @@ function createValueAccessor() {
88
88
  return BaseValueAccessor;
89
89
  }
90
90
 
91
- const base$1 = createValueAccessor();
92
- class UicCheckboxComponent extends base$1 {
91
+ const base$2 = createValueAccessor();
92
+ class UicCheckboxComponent extends base$2 {
93
+ icon = ''; // Icono externo
94
+ iconColor = 'black';
93
95
  label = '';
96
+ tip = '';
97
+ type = 'check';
94
98
  placeholder = '';
95
99
  disabled = false;
96
100
  loading = false;
@@ -100,13 +104,13 @@ class UicCheckboxComponent extends base$1 {
100
104
  }
101
105
  }
102
106
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
103
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicCheckboxComponent, isStandalone: true, selector: "ui-checkbox", inputs: { label: "label", placeholder: "placeholder", disabled: "disabled", loading: "loading" }, providers: [
107
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicCheckboxComponent, isStandalone: true, selector: "ui-checkbox", inputs: { icon: "icon", iconColor: "iconColor", label: "label", tip: "tip", type: "type", placeholder: "placeholder", disabled: "disabled", loading: "loading" }, providers: [
104
108
  {
105
109
  provide: NG_VALUE_ACCESSOR,
106
110
  useExisting: forwardRef(() => UicCheckboxComponent),
107
111
  multi: true
108
112
  }
109
- ], usesInheritance: true, ngImport: i0, template: "@if (label){\r\n <label for=\"\">{{label}} </label>\r\n}\r\n<div class=\"check-wrapper\">\r\n <button\r\n type=\"button\"\r\n class=\"checkbox\"\r\n [disabled]=\"disabled\"\r\n [class.checked]=\"value\"\r\n (click)=\"toggle()\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"toggle()\"\r\n >\r\n <span class=\"icon\">\r\n @if (value) {\r\n \u2714\r\n }@else {\r\n \u2212\r\n }\r\n </span>\r\n </button>\r\n {{placeholder}}\r\n</div>", styles: [".check-wrapper{padding:2px;display:flex;align-items:center;font-size:1rem}.check-wrapper button{margin-right:.5rem}.checkbox{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--grey-500);border-radius:6px;background:var(--white);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:var(--secondary-400)}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px rgba(var(--secondary-400),.4)}.checkbox:disabled{background:var(--grey-300);border-color:var(--grey-300);cursor:not-allowed}.checkbox:disabled .icon{opacity:.5}.checkbox.checked{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.checked:hover:not(:disabled){background:var(--secondary-400);border-color:var(--secondary-400)}.checkbox.checked .icon{color:var(--white)}.checkbox.indeterminate{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.indeterminate .icon{color:var(--white)}.checkbox .icon{font-size:1rem;font-weight:700;color:transparent;line-height:1;transition:color .2s ease}\n"] });
113
+ ], usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\">\r\n {{label}} \r\n </div>\r\n <div class=\"check-form-container\">\r\n <div (click)=\"toggle()\" class=\"check-wrapper\">\r\n @if (type=='check') {\r\n <button\r\n type=\"button\"\r\n class=\"checkbox\"\r\n [disabled]=\"disabled\"\r\n [class.checked]=\"value\"\r\n [disabled]=\"disabled\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"toggle()\"\r\n >\r\n <span class=\"icon\">\r\n @if (value) {\r\n \u2714\r\n }@else {\r\n \u2212\r\n }\r\n </span>\r\n </button>\r\n }@else{\r\n <button\r\n type=\"button\"\r\n class=\"toggle\"\r\n [class.checked]=\"value\"\r\n [disabled]=\"disabled\"\r\n >\r\n <span class=\"thumb\"></span>\r\n </button>\r\n } \r\n {{placeholder}}\r\n </div>\r\n </div>\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n }\r\n </div>\r\n</div>\r\n", styles: [".check-form-container{height:40px;display:flex;align-items:center}.check-wrapper{padding:2px;cursor:pointer;display:flex;align-items:center;font-size:.875rem}.check-wrapper button{margin-right:.5rem}.checkbox{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--grey-500);border-radius:6px;background:var(--white);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:var(--secondary-400)}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.checkbox:disabled{background:var(--grey-300);border-color:var(--grey-300);cursor:not-allowed}.checkbox:disabled .icon{opacity:.5}.checkbox.checked{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.checked:hover:not(:disabled){background:var(--secondary-400);border-color:var(--secondary-400)}.checkbox.checked .icon{color:var(--white)}.checkbox.indeterminate{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.indeterminate .icon{color:var(--white)}.checkbox .icon{font-size:1rem;font-weight:700;color:transparent;line-height:1;transition:color .2s ease}.toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--grey-300)}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--grey-300);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"] });
110
114
  }
111
115
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicCheckboxComponent, decorators: [{
112
116
  type: Component,
@@ -116,8 +120,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
116
120
  useExisting: forwardRef(() => UicCheckboxComponent),
117
121
  multi: true
118
122
  }
119
- ], template: "@if (label){\r\n <label for=\"\">{{label}} </label>\r\n}\r\n<div class=\"check-wrapper\">\r\n <button\r\n type=\"button\"\r\n class=\"checkbox\"\r\n [disabled]=\"disabled\"\r\n [class.checked]=\"value\"\r\n (click)=\"toggle()\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"toggle()\"\r\n >\r\n <span class=\"icon\">\r\n @if (value) {\r\n \u2714\r\n }@else {\r\n \u2212\r\n }\r\n </span>\r\n </button>\r\n {{placeholder}}\r\n</div>", styles: [".check-wrapper{padding:2px;display:flex;align-items:center;font-size:1rem}.check-wrapper button{margin-right:.5rem}.checkbox{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--grey-500);border-radius:6px;background:var(--white);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:var(--secondary-400)}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px rgba(var(--secondary-400),.4)}.checkbox:disabled{background:var(--grey-300);border-color:var(--grey-300);cursor:not-allowed}.checkbox:disabled .icon{opacity:.5}.checkbox.checked{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.checked:hover:not(:disabled){background:var(--secondary-400);border-color:var(--secondary-400)}.checkbox.checked .icon{color:var(--white)}.checkbox.indeterminate{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.indeterminate .icon{color:var(--white)}.checkbox .icon{font-size:1rem;font-weight:700;color:transparent;line-height:1;transition:color .2s ease}\n"] }]
120
- }], propDecorators: { label: [{
123
+ ], template: "<div class=\"input-wrapper\">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\">\r\n {{label}} \r\n </div>\r\n <div class=\"check-form-container\">\r\n <div (click)=\"toggle()\" class=\"check-wrapper\">\r\n @if (type=='check') {\r\n <button\r\n type=\"button\"\r\n class=\"checkbox\"\r\n [disabled]=\"disabled\"\r\n [class.checked]=\"value\"\r\n [disabled]=\"disabled\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"toggle()\"\r\n >\r\n <span class=\"icon\">\r\n @if (value) {\r\n \u2714\r\n }@else {\r\n \u2212\r\n }\r\n </span>\r\n </button>\r\n }@else{\r\n <button\r\n type=\"button\"\r\n class=\"toggle\"\r\n [class.checked]=\"value\"\r\n [disabled]=\"disabled\"\r\n >\r\n <span class=\"thumb\"></span>\r\n </button>\r\n } \r\n {{placeholder}}\r\n </div>\r\n </div>\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n }\r\n </div>\r\n</div>\r\n", styles: [".check-form-container{height:40px;display:flex;align-items:center}.check-wrapper{padding:2px;cursor:pointer;display:flex;align-items:center;font-size:.875rem}.check-wrapper button{margin-right:.5rem}.checkbox{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--grey-500);border-radius:6px;background:var(--white);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:var(--secondary-400)}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.checkbox:disabled{background:var(--grey-300);border-color:var(--grey-300);cursor:not-allowed}.checkbox:disabled .icon{opacity:.5}.checkbox.checked{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.checked:hover:not(:disabled){background:var(--secondary-400);border-color:var(--secondary-400)}.checkbox.checked .icon{color:var(--white)}.checkbox.indeterminate{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.indeterminate .icon{color:var(--white)}.checkbox .icon{font-size:1rem;font-weight:700;color:transparent;line-height:1;transition:color .2s ease}.toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--grey-300)}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--grey-300);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"] }]
124
+ }], propDecorators: { icon: [{
125
+ type: Input
126
+ }], iconColor: [{
127
+ type: Input
128
+ }], label: [{
129
+ type: Input
130
+ }], tip: [{
131
+ type: Input
132
+ }], type: [{
121
133
  type: Input
122
134
  }], placeholder: [{
123
135
  type: Input
@@ -127,93 +139,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
127
139
  type: Input
128
140
  }] } });
129
141
 
130
- const fadeAndRise = trigger('fadeAndRise', [
131
- transition(':enter', [style({ opacity: 0, maxHeight: '0px' }), animate('.3s ease', style({ opacity: 1, maxHeight: '200px' }))]),
132
- transition(':leave', [animate('.3s ease', style({ opacity: 0 }))])
133
- ]);
142
+ class UicSwichComponent {
143
+ checked = false;
144
+ checkedChange = new EventEmitter();
145
+ disabled = false;
146
+ placeholder = '';
147
+ label = '';
148
+ toggle() {
149
+ if (this.disabled)
150
+ return;
151
+ this.checked = !this.checked;
152
+ this.checkedChange.emit(this.checked);
153
+ }
154
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSwichComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
155
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicSwichComponent, isStandalone: true, selector: "ui-switch", inputs: { checked: "checked", disabled: "disabled", placeholder: "placeholder", label: "label" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<button\r\n type=\"button\"\r\n class=\"toggle\"\r\n [class.checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n (click)=\"toggle()\"\r\n>\r\n <span class=\"thumb\"></span>\r\n</button>", styles: [".toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--grey-300)}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--grey-300);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"] });
156
+ }
157
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSwichComponent, decorators: [{
158
+ type: Component,
159
+ args: [{ selector: 'ui-switch', imports: [], template: "<button\r\n type=\"button\"\r\n class=\"toggle\"\r\n [class.checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n (click)=\"toggle()\"\r\n>\r\n <span class=\"thumb\"></span>\r\n</button>", styles: [".toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--grey-300)}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--grey-300);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"] }]
160
+ }], propDecorators: { checked: [{
161
+ type: Input
162
+ }], checkedChange: [{
163
+ type: Output
164
+ }], disabled: [{
165
+ type: Input
166
+ }], placeholder: [{
167
+ type: Input
168
+ }], label: [{
169
+ type: Input
170
+ }] } });
134
171
 
135
- const base = createValueAccessor();
136
- class UicSelectComponent extends base {
172
+ const base$1 = createValueAccessor();
173
+ class UicSelectComponent extends base$1 {
137
174
  icon = ''; // Icono externo
138
175
  iconColor = 'primary'; //color de ícono externo
139
176
  internalIcon = ''; //Icono interno
140
177
  size = 'm'; // tamaño general del input
178
+ // TEXT
141
179
  label = '';
142
180
  error = '';
143
181
  tip = '';
182
+ showSubtitle = false;
183
+ emptyText = '- Seleccionar -';
184
+ // FUNCTIONS
144
185
  disabled = false;
145
186
  nullable = false;
146
187
  options = [];
147
- showSubtitle = false;
188
+ dropdownTemplate;
189
+ overlayRef;
148
190
  overlayPositions = [
149
- {
150
- originX: 'start',
151
- originY: 'bottom',
152
- overlayX: 'start',
153
- overlayY: 'top'
154
- },
155
- {
156
- originX: 'start',
157
- originY: 'top',
158
- overlayX: 'start',
159
- overlayY: 'bottom'
160
- }
191
+ { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
192
+ { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
161
193
  ];
162
- open = false;
163
- emptyText = '- Seleccionar -';
164
- renderer = inject(Renderer2);
165
- toggleButton;
166
- unlistener;
194
+ overlay = inject(Overlay);
195
+ vcr = inject(ViewContainerRef);
196
+ host = inject((ElementRef));
167
197
  ngOnInit() {
168
198
  this.emptyText = this.disabled ? '-' : '- Seleccionar -';
169
199
  }
200
+ // --- Overlay ---
170
201
  openList() {
171
- if (!this.disabled) {
172
- this.open = !this.open;
173
- if (this.open) {
174
- setTimeout(() => {
175
- this.unlistener = this.renderer.listen('window', 'click', (e) => {
176
- if (!this.toggleButton.nativeElement.contains(e.target)) {
177
- this.open = false;
178
- this.unlistener();
179
- }
180
- });
181
- }, 200);
182
- }
202
+ if (this.disabled)
203
+ return;
204
+ if (this.overlayRef) {
205
+ this.closeList();
183
206
  }
207
+ const input = this.host.nativeElement.querySelector('.fakeinput');
208
+ const width = input.offsetWidth;
209
+ const positionStrategy = this.overlay.position()
210
+ .flexibleConnectedTo(input)
211
+ .withPositions(this.overlayPositions)
212
+ .withFlexibleDimensions(true)
213
+ .withPush(false);
214
+ this.overlayRef = this.overlay.create({
215
+ positionStrategy,
216
+ width,
217
+ hasBackdrop: true,
218
+ backdropClass: 'cdk-overlay-transparent-backdrop',
219
+ scrollStrategy: this.overlay.scrollStrategies.reposition(),
220
+ });
221
+ const portal = new TemplatePortal(this.dropdownTemplate, this.vcr);
222
+ this.overlayRef.attach(portal);
223
+ this.overlayRef.backdropClick().subscribe(() => this.closeList());
184
224
  }
185
225
  selectOption(option) {
186
- this.open = false;
187
- this.unlistener();
226
+ this.closeList();
188
227
  this.notifyChange(option);
189
228
  }
190
- //( overlay)
191
229
  closeList() {
192
- this.open = false;
193
- }
194
- openListOverlay() {
195
- if (!this.disabled) {
196
- this.open = !this.open;
230
+ if (this.overlayRef) {
231
+ this.overlayRef.dispose();
232
+ this.overlayRef = null;
197
233
  }
198
234
  }
199
235
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
200
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSelectComponent, isStandalone: true, selector: "ui-select", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", nullable: "nullable", options: "options", showSubtitle: "showSubtitle" }, providers: [
236
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSelectComponent, isStandalone: true, selector: "ui-select", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", showSubtitle: "showSubtitle", disabled: "disabled", nullable: "nullable", options: "options" }, providers: [
201
237
  {
202
238
  provide: NG_VALUE_ACCESSOR,
203
239
  useExisting: forwardRef(() => UicSelectComponent),
204
240
  multi: true
205
241
  }
206
- ], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["inputwrapp"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper \">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">\r\n {{label}} \r\n </div>\r\n }\r\n <div class=\"fakeinput-wrapp\" #inputwrapp cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" > \r\n\r\n <!-- INPUT -->\r\n <div (click)=\"openList()\" class=\"fakeinput\" [ngClass]=\"{'activeselect':open, 'errorinput':error, 'disabledinput':disabled}\" style=\"cursor: pointer;\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fakeinput-content\">{{(value?.text || emptyText)}}</div>\r\n @if (!disabled) {\r\n <i class=\"ri-arrow-down-s-line\"></i>\r\n }\r\n </div> \r\n <!-- DESPLEGABLE -->\r\n @if (open) {\r\n\r\n <ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"trigger\"\r\n [cdkConnectedOverlayOpen]=\"open\"\r\n [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n (backdropClick)=\"closeList()\"\r\n [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\r\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n >\r\n\r\n <div class=\"input-options\" @fadeAndRise >\r\n <!-- OPCIONES -->\r\n <div class=\"input-option-scroll\">\r\n @if (options.length > 0 && nullable) {\r\n <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >- Ninguno -</div>\r\n <div class=\"option-divider\"></div>\r\n }\r\n\r\n @for (option of options; track $index) {\r\n <div (click)=\"selectOption(option)\" class=\"input-option\">\r\n <div style=\"padding: 2px;\">\r\n <div class=\"f-medium\">{{option.text }}</div>\r\n <div *ngIf=\"showSubtitle\" class=\"f-extralight\">{{option.detail}}</div>\r\n </div>\r\n </div>\r\n @if ($index < (options.length - 1)){\r\n <div class=\"option-divider\"></div>\r\n }\r\n }\r\n @if (options.length == 0) {\r\n <div class=\"fakeinput-alert t-disabled\">No hay elementos para mostrar</div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n }\r\n\r\n </div>\r\n <!-- ALERTS -->\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n </div>\r\n</div>", styles: [":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{position:absolute;border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:.875rem;z-index:50;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-300)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 3px var(--primary-400)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-50) -disabled;color:var(--grey-800)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], animations: [fadeAndRise] });
242
+ ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper \">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">{{label}} </div>\r\n }\r\n <div class=\"fakeinput-wrapp\" > \r\n <!-- INPUT -->\r\n <div (click)=\"openList()\" class=\"fakeinput\" #fakeinput \r\n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\" style=\"cursor: pointer;\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fakeinput-content\">{{(value?.text || emptyText)}}</div>\r\n @if (!disabled) {\r\n <i class=\"ri-arrow-down-s-line\"></i>\r\n }\r\n </div> \r\n <!-- DESPLEGABLE -->\r\n <ng-template #dropdownTemplate >\r\n <div class=\"input-options\">\r\n <!-- OPCIONES -->\r\n <div class=\"input-option-scroll\">\r\n @if (options.length > 0 && nullable) {\r\n <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >- Ninguno -</div>\r\n <div class=\"option-divider\"></div>\r\n }\r\n\r\n \r\n @for (option of options; track $index) {\r\n <div (click)=\"selectOption(option)\" class=\"input-option\">\r\n <div style=\"padding: 2px;\" >\r\n <div class=\"f-medium\" >{{option.text }}</div>\r\n <div *ngIf=\"showSubtitle\" class=\"f-extralight\" >\r\n {{option.detail}}\r\n </div>\r\n </div>\r\n </div>\r\n @if ( $index < (options.length - 1) ) {\r\n <span class=\"option-divider\"></span>\r\n }\r\n \r\n }\r\n\r\n @if (options.length == 0) {\r\n <div class=\"fakeinput-alert t-disabled\">No hay elementos para mostrar</div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n </div>\r\n <!-- ALERTS -->\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n </div>\r\n</div>", styles: [":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
207
243
  }
208
244
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSelectComponent, decorators: [{
209
245
  type: Component,
210
- args: [{ selector: 'ui-select', imports: [CommonModule, OverlayModule], providers: [
246
+ args: [{ selector: 'ui-select', imports: [CommonModule], providers: [
211
247
  {
212
248
  provide: NG_VALUE_ACCESSOR,
213
249
  useExisting: forwardRef(() => UicSelectComponent),
214
250
  multi: true
215
251
  }
216
- ], animations: [fadeAndRise], template: "<div class=\"input-wrapper \">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">\r\n {{label}} \r\n </div>\r\n }\r\n <div class=\"fakeinput-wrapp\" #inputwrapp cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" > \r\n\r\n <!-- INPUT -->\r\n <div (click)=\"openList()\" class=\"fakeinput\" [ngClass]=\"{'activeselect':open, 'errorinput':error, 'disabledinput':disabled}\" style=\"cursor: pointer;\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fakeinput-content\">{{(value?.text || emptyText)}}</div>\r\n @if (!disabled) {\r\n <i class=\"ri-arrow-down-s-line\"></i>\r\n }\r\n </div> \r\n <!-- DESPLEGABLE -->\r\n @if (open) {\r\n\r\n <ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"trigger\"\r\n [cdkConnectedOverlayOpen]=\"open\"\r\n [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n (backdropClick)=\"closeList()\"\r\n [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\r\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n >\r\n\r\n <div class=\"input-options\" @fadeAndRise >\r\n <!-- OPCIONES -->\r\n <div class=\"input-option-scroll\">\r\n @if (options.length > 0 && nullable) {\r\n <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >- Ninguno -</div>\r\n <div class=\"option-divider\"></div>\r\n }\r\n\r\n @for (option of options; track $index) {\r\n <div (click)=\"selectOption(option)\" class=\"input-option\">\r\n <div style=\"padding: 2px;\">\r\n <div class=\"f-medium\">{{option.text }}</div>\r\n <div *ngIf=\"showSubtitle\" class=\"f-extralight\">{{option.detail}}</div>\r\n </div>\r\n </div>\r\n @if ($index < (options.length - 1)){\r\n <div class=\"option-divider\"></div>\r\n }\r\n }\r\n @if (options.length == 0) {\r\n <div class=\"fakeinput-alert t-disabled\">No hay elementos para mostrar</div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n }\r\n\r\n </div>\r\n <!-- ALERTS -->\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n </div>\r\n</div>", styles: [":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{position:absolute;border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:.875rem;z-index:50;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-300)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 3px var(--primary-400)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-50) -disabled;color:var(--grey-800)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"] }]
252
+ ], template: "<div class=\"input-wrapper \">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">{{label}} </div>\r\n }\r\n <div class=\"fakeinput-wrapp\" > \r\n <!-- INPUT -->\r\n <div (click)=\"openList()\" class=\"fakeinput\" #fakeinput \r\n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\" style=\"cursor: pointer;\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fakeinput-content\">{{(value?.text || emptyText)}}</div>\r\n @if (!disabled) {\r\n <i class=\"ri-arrow-down-s-line\"></i>\r\n }\r\n </div> \r\n <!-- DESPLEGABLE -->\r\n <ng-template #dropdownTemplate >\r\n <div class=\"input-options\">\r\n <!-- OPCIONES -->\r\n <div class=\"input-option-scroll\">\r\n @if (options.length > 0 && nullable) {\r\n <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >- Ninguno -</div>\r\n <div class=\"option-divider\"></div>\r\n }\r\n\r\n \r\n @for (option of options; track $index) {\r\n <div (click)=\"selectOption(option)\" class=\"input-option\">\r\n <div style=\"padding: 2px;\" >\r\n <div class=\"f-medium\" >{{option.text }}</div>\r\n <div *ngIf=\"showSubtitle\" class=\"f-extralight\" >\r\n {{option.detail}}\r\n </div>\r\n </div>\r\n </div>\r\n @if ( $index < (options.length - 1) ) {\r\n <span class=\"option-divider\"></span>\r\n }\r\n \r\n }\r\n\r\n @if (options.length == 0) {\r\n <div class=\"fakeinput-alert t-disabled\">No hay elementos para mostrar</div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n </div>\r\n <!-- ALERTS -->\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n </div>\r\n</div>", styles: [":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"] }]
217
253
  }], propDecorators: { icon: [{
218
254
  type: Input
219
255
  }], iconColor: [{
@@ -228,17 +264,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
228
264
  type: Input
229
265
  }], tip: [{
230
266
  type: Input
267
+ }], showSubtitle: [{
268
+ type: Input
231
269
  }], disabled: [{
232
270
  type: Input
233
271
  }], nullable: [{
234
272
  type: Input
235
273
  }], options: [{
236
274
  type: Input
237
- }], showSubtitle: [{
238
- type: Input
239
- }], toggleButton: [{
275
+ }], dropdownTemplate: [{
240
276
  type: ViewChild,
241
- args: ['inputwrapp']
277
+ args: ['dropdownTemplate']
242
278
  }] } });
243
279
 
244
280
  class UicInputComponent {
@@ -262,11 +298,11 @@ class UicInputComponent {
262
298
  }, 200);
263
299
  }
264
300
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
265
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicInputComponent, isStandalone: true, selector: "ui-input", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled" }, outputs: { clickButton: "clickButton" }, ngImport: i0, template: "<div class=\"input-wrapper\">\r\n \r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n \r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">\r\n {{label}} \r\n </div>\r\n }\r\n \r\n <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"input-container pad-{{size}}\" >\r\n <ng-content class=\"myinput\"></ng-content>\r\n </div> \r\n </div>\r\n\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n \r\n </div>\r\n</div>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{position:absolute;border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:.875rem;z-index:50;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-300)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 3px var(--primary-400)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-50) -disabled;color:var(--grey-800)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
301
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicInputComponent, isStandalone: true, selector: "ui-input", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled" }, outputs: { clickButton: "clickButton" }, ngImport: i0, template: "<div class=\"input-wrapper\">\r\n \r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n \r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">\r\n {{label}} \r\n </div>\r\n }\r\n \r\n <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"input-container pad-{{size}}\" >\r\n <ng-content class=\"myinput\"></ng-content>\r\n </div> \r\n </div>\r\n\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n \r\n </div>\r\n</div>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
266
302
  }
267
303
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicInputComponent, decorators: [{
268
304
  type: Component,
269
- args: [{ selector: 'ui-input', imports: [CommonModule], template: "<div class=\"input-wrapper\">\r\n \r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n \r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">\r\n {{label}} \r\n </div>\r\n }\r\n \r\n <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"input-container pad-{{size}}\" >\r\n <ng-content class=\"myinput\"></ng-content>\r\n </div> \r\n </div>\r\n\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n \r\n </div>\r\n</div>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{position:absolute;border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:.875rem;z-index:50;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-300)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 3px var(--primary-400)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-50) -disabled;color:var(--grey-800)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"] }]
305
+ args: [{ selector: 'ui-input', imports: [CommonModule], template: "<div class=\"input-wrapper\">\r\n \r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n \r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">\r\n {{label}} \r\n </div>\r\n }\r\n \r\n <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"input-container pad-{{size}}\" >\r\n <ng-content class=\"myinput\"></ng-content>\r\n </div> \r\n </div>\r\n\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n \r\n </div>\r\n</div>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"] }]
270
306
  }], propDecorators: { icon: [{
271
307
  type: Input
272
308
  }], iconColor: [{
@@ -292,11 +328,11 @@ class UicDynamicFormComponent {
292
328
  form;
293
329
  flag = false;
294
330
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
295
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", form: "form" }, ngImport: i0, template: "<div class=\"form\" [formGroup]=\"form\">\r\n @for (field of fields; track field.name) {\r\n <div class=\"col-span-{{field.colSpan || 1}}\">\r\n \r\n @if ( ['text','number','date'].includes(field.type) ) {\r\n <ui-input \r\n [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n [label]=\"field.label\">\r\n <input \r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [type]=\"field.type\"\r\n [placeholder]=\"field.placeholder??field.label\"\r\n />\r\n </ui-input>\r\n\r\n }\r\n\r\n @if (field.type === 'select') {\r\n <ui-select\r\n [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n [label]=\"field.label\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-select>\r\n }\r\n\r\n @if (field.type === 'checkbox') {\r\n <ui-checkbox\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [placeholder]=\"field.placeholder??''\"\r\n [label]=\"field.label\"\r\n ></ui-checkbox>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:1rem;padding-bottom:1.5rem}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "disabled", "nullable", "options", "showSubtitle"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "disabled"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["label", "placeholder", "disabled", "loading"] }, { kind: "ngmodule", type: FormsModule }] });
331
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", form: "form" }, ngImport: i0, template: "<div class=\"form\" [formGroup]=\"form\">\r\n @for (field of fields; track field.name) {\r\n <div class=\"col-span-{{field.colSpan || 1}}\">\r\n \r\n @if ( ['text','number','date'].includes(field.type) ) {\r\n <ui-input \r\n [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n [label]=\"field.label\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n >\r\n <input \r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [type]=\"field.type\"\r\n [placeholder]=\"field.placeholder??field.label\"\r\n />\r\n </ui-input>\r\n\r\n }\r\n @else if (field.type === 'select') {\r\n <ui-select\r\n [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n [label]=\"field.label\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-select>\r\n }\r\n @else if (field.type === 'checkbox') {\r\n <ui-checkbox\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [placeholder]=\"field.placeholder??''\"\r\n [tip]=\"field.tip??''\"\r\n [label]=\"field.label\"\r\n ></ui-checkbox>\r\n }\r\n @else if (field.type === 'switch') {\r\n <ui-checkbox\r\n type=\"switch\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [formControlName]=\"field.name\"\r\n [tip]=\"field.tip??''\"\r\n [placeholder]=\"field.placeholder??''\"\r\n [label]=\"field.label\"\r\n >\r\n </ui-checkbox>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:1rem;padding-bottom:1.5rem}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "nullable", "options"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "disabled"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "disabled", "loading"] }, { kind: "ngmodule", type: FormsModule }] });
296
332
  }
297
333
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, decorators: [{
298
334
  type: Component,
299
- args: [{ selector: 'ui-dynamic-form', imports: [ReactiveFormsModule, UicSelectComponent, UicInputComponent, UicCheckboxComponent, FormsModule], template: "<div class=\"form\" [formGroup]=\"form\">\r\n @for (field of fields; track field.name) {\r\n <div class=\"col-span-{{field.colSpan || 1}}\">\r\n \r\n @if ( ['text','number','date'].includes(field.type) ) {\r\n <ui-input \r\n [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n [label]=\"field.label\">\r\n <input \r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [type]=\"field.type\"\r\n [placeholder]=\"field.placeholder??field.label\"\r\n />\r\n </ui-input>\r\n\r\n }\r\n\r\n @if (field.type === 'select') {\r\n <ui-select\r\n [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n [label]=\"field.label\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-select>\r\n }\r\n\r\n @if (field.type === 'checkbox') {\r\n <ui-checkbox\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [placeholder]=\"field.placeholder??''\"\r\n [label]=\"field.label\"\r\n ></ui-checkbox>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:1rem;padding-bottom:1.5rem}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}\n"] }]
335
+ args: [{ selector: 'ui-dynamic-form', imports: [ReactiveFormsModule, UicSelectComponent, UicInputComponent, UicCheckboxComponent, FormsModule], template: "<div class=\"form\" [formGroup]=\"form\">\r\n @for (field of fields; track field.name) {\r\n <div class=\"col-span-{{field.colSpan || 1}}\">\r\n \r\n @if ( ['text','number','date'].includes(field.type) ) {\r\n <ui-input \r\n [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n [label]=\"field.label\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n >\r\n <input \r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [type]=\"field.type\"\r\n [placeholder]=\"field.placeholder??field.label\"\r\n />\r\n </ui-input>\r\n\r\n }\r\n @else if (field.type === 'select') {\r\n <ui-select\r\n [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n [label]=\"field.label\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-select>\r\n }\r\n @else if (field.type === 'checkbox') {\r\n <ui-checkbox\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [placeholder]=\"field.placeholder??''\"\r\n [tip]=\"field.tip??''\"\r\n [label]=\"field.label\"\r\n ></ui-checkbox>\r\n }\r\n @else if (field.type === 'switch') {\r\n <ui-checkbox\r\n type=\"switch\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [formControlName]=\"field.name\"\r\n [tip]=\"field.tip??''\"\r\n [placeholder]=\"field.placeholder??''\"\r\n [label]=\"field.label\"\r\n >\r\n </ui-checkbox>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:1rem;padding-bottom:1.5rem}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}\n"] }]
300
336
  }], propDecorators: { fields: [{
301
337
  type: Input
302
338
  }], form: [{
@@ -417,7 +453,7 @@ class UicFormWrapperComponent {
417
453
  return this.schema.steps?.[this.currentStep]?.title ?? '';
418
454
  }
419
455
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
420
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFormWrapperComponent, isStandalone: true, selector: "ui-form-wrapper", inputs: { schema: "schema", loading: "loading", initialValues: "initialValues" }, outputs: { formSubmit: "formSubmit" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n\r\n @if (useSteps) {\r\n @if (schema.steps?.length) {\r\n\r\n <div class=\"step-title\">{{ getStepTitle()}}</div>\r\n @if (loading) {\r\n <ui-skeleton-loader\r\n [cols]=\"schema.cols\"\r\n [inputs]=\"(schema.steps?.[currentStep]?.blocks?.[0]?.fields?.length) ?? 0\"\r\n ></ui-skeleton-loader>\r\n } \r\n @else {\r\n @for (block of getCurrentBlocks(); track block.title) {\r\n <section class=\"form-block\">\r\n <div class=\"block-title\">{{ block.title }}</div>\r\n <ui-dynamic-form\r\n [fields]=\"block.fields\"\r\n [form]=\"form\">\r\n </ui-dynamic-form>\r\n </section>\r\n }\r\n }\r\n <div class=\"step-controls\">\r\n <button type=\"button\" (click)=\"prevStep()\" [disabled]=\"currentStep === 0\">Anterior</button>\r\n\r\n @if ((schema.steps?.length ?? 0) > 0 && currentStep < ((schema.steps?.length ?? 1) - 1)) {\r\n <button type=\"button\" (click)=\"nextStep()\">Siguiente</button>\r\n } @else {\r\n <button type=\"submit\">Guardar</button>\r\n }\r\n </div>\r\n } \r\n } \r\n @else {\r\n @for (block of getCurrentBlocks(); track block.title) {\r\n <section class=\"form-block\">\r\n @if (block.title){\r\n <div class=\"block-title\">{{ block.title }}</div>\r\n }\r\n @if (loading) {\r\n <ui-skeleton-loader\r\n [cols]=\"schema.cols\"\r\n [inputs]=\"block.fields.length\"\r\n ></ui-skeleton-loader>\r\n } @else {\r\n <ui-dynamic-form\r\n [fields]=\"block.fields\"\r\n [form]=\"form\">\r\n </ui-dynamic-form>\r\n }\r\n </section>\r\n }\r\n }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}\n"], dependencies: [{ kind: "component", type: UicDynamicFormComponent, selector: "ui-dynamic-form", inputs: ["fields", "form"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
456
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFormWrapperComponent, isStandalone: true, selector: "ui-form-wrapper", inputs: { schema: "schema", loading: "loading", initialValues: "initialValues" }, outputs: { formSubmit: "formSubmit" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n\r\n @if (useSteps) {\r\n @if (schema.steps?.length) {\r\n\r\n <div class=\"step-title\">{{ getStepTitle()}}</div>\r\n @if (loading) {\r\n <ui-skeleton-loader\r\n [cols]=\"schema.cols\"\r\n [inputs]=\"(schema.steps?.[currentStep]?.blocks?.[0]?.fields?.length) ?? 0\"\r\n ></ui-skeleton-loader>\r\n } \r\n @else {\r\n @for (block of getCurrentBlocks(); track block.title) {\r\n <section class=\"form-block\">\r\n <div class=\"block-title\">{{ block.title }}</div>\r\n <ui-dynamic-form\r\n [fields]=\"block.fields\"\r\n [form]=\"form\">\r\n </ui-dynamic-form>\r\n </section>\r\n }\r\n }\r\n <div class=\"step-controls\">\r\n <button type=\"button\" (click)=\"prevStep()\" [disabled]=\"currentStep === 0\">Anterior</button>\r\n\r\n @if ((schema.steps?.length ?? 0) > 0 && currentStep < ((schema.steps?.length ?? 1) - 1)) {\r\n <button type=\"button\" (click)=\"nextStep()\">Siguiente</button>\r\n } @else {\r\n <button type=\"submit\">Guardar</button>\r\n }\r\n </div>\r\n } \r\n } \r\n @else {\r\n @for (block of getCurrentBlocks(); track block.title) {\r\n <section class=\"form-block\">\r\n @if (block.title){\r\n <div class=\"block-title\">{{ block.title }}</div>\r\n }\r\n @if (loading) {\r\n <ui-skeleton-loader\r\n [cols]=\"schema.cols\"\r\n [inputs]=\"block.fields.length\"\r\n ></ui-skeleton-loader>\r\n } @else {\r\n <ui-dynamic-form\r\n [fields]=\"block.fields\"\r\n [form]=\"form\">\r\n </ui-dynamic-form>\r\n }\r\n </section>\r\n }\r\n }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}\n"], dependencies: [{ kind: "component", type: UicDynamicFormComponent, selector: "ui-dynamic-form", inputs: ["fields", "form"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
421
457
  }
422
458
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, decorators: [{
423
459
  type: Component,
@@ -432,6 +468,264 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
432
468
  type: Output
433
469
  }] } });
434
470
 
471
+ const base = createValueAccessor();
472
+ class UicDatePickerComponent extends base {
473
+ icon = ''; // Icono externo
474
+ iconColor = 'black';
475
+ internalIcon = ''; //Icono interno
476
+ // TEXTO
477
+ label = '';
478
+ error = '';
479
+ tip = '';
480
+ // FUNCTIONS
481
+ disabled = false;
482
+ max = '';
483
+ min = '';
484
+ calendarTemplate;
485
+ overlayRef;
486
+ // Fijos
487
+ months = Array.from({ length: 12 }, (_, i) => new Date(2000, i, 1).toLocaleString('default', { month: 'short' }));
488
+ today = new Date();
489
+ currentYear = +this.today.getFullYear();
490
+ maxDate = null;
491
+ minDate = null;
492
+ // Dinámicos
493
+ view = 'days';
494
+ paintedDate = null;
495
+ selectedDate = new Date();
496
+ selectedYear = this.currentYear;
497
+ selectedMonth = null;
498
+ monthWeeks = []; // Arreglo de fechas
499
+ decadeRange = [];
500
+ overlay = inject(Overlay);
501
+ vcr = inject(ViewContainerRef);
502
+ host = inject((ElementRef));
503
+ ngOnInit() {
504
+ this.monthWeeks = this.getWeeks();
505
+ this.minDate = this.parseDateLimits(this.min);
506
+ this.maxDate = this.parseDateLimits(this.max);
507
+ this.paintedDate = this.parseDateLimits(this.value);
508
+ }
509
+ // --- Overlay ---
510
+ overlayPositions = [
511
+ { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
512
+ { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
513
+ ];
514
+ openCalendar() {
515
+ if (this.disabled)
516
+ return;
517
+ if (this.overlayRef) {
518
+ this.closeCalendar();
519
+ }
520
+ const positionStrategy = this.overlay.position()
521
+ .flexibleConnectedTo(this.host.nativeElement.querySelector('.fakeinput'))
522
+ .withPositions(this.overlayPositions)
523
+ .withFlexibleDimensions(false)
524
+ .withPush(false);
525
+ this.overlayRef = this.overlay.create({
526
+ positionStrategy,
527
+ hasBackdrop: true,
528
+ backdropClass: 'cdk-overlay-transparent-backdrop',
529
+ scrollStrategy: this.overlay.scrollStrategies.reposition(),
530
+ });
531
+ const portal = new TemplatePortal(this.calendarTemplate, this.vcr);
532
+ this.overlayRef.attach(portal);
533
+ this.overlayRef.backdropClick().subscribe(() => this.closeCalendar());
534
+ this.view = 'days';
535
+ }
536
+ closeCalendar() {
537
+ if (this.overlayRef) {
538
+ this.overlayRef.dispose();
539
+ this.overlayRef = null;
540
+ }
541
+ }
542
+ get monthName() {
543
+ return this.selectedDate.toLocaleString('default', { month: 'long' });
544
+ }
545
+ getDecadeRange() {
546
+ const start = Math.floor(this.selectedYear / 20) * 20;
547
+ return Array.from({ length: 20 }, (_, i) => start + i);
548
+ }
549
+ getWeeks() {
550
+ const weeks = [];
551
+ const firstDay = new Date(this.selectedYear, this.selectedDate.getMonth(), 1);
552
+ const lastDay = new Date(this.selectedYear, this.selectedDate.getMonth() + 1, 0);
553
+ let current = new Date(firstDay);
554
+ current.setDate(current.getDate() - current.getDay());
555
+ while (current <= lastDay || current.getDay() !== 0) {
556
+ const week = [];
557
+ for (let i = 0; i < 7; i++) {
558
+ week.push(current.getMonth() === this.selectedDate.getMonth()
559
+ ? new Date(current)
560
+ : null);
561
+ current.setDate(current.getDate() + 1);
562
+ }
563
+ weeks.push(week);
564
+ }
565
+ return weeks;
566
+ }
567
+ // --- Navegación ---
568
+ prev() {
569
+ if (this.view === 'days') {
570
+ const isJan = this.selectedDate.getMonth() == 0;
571
+ const offsetMonth = isJan ? -11 : 1;
572
+ if (isJan) {
573
+ this.selectedYear--;
574
+ }
575
+ this.selectedDate = new Date(this.selectedYear, this.selectedDate.getMonth() - offsetMonth, 1);
576
+ this.monthWeeks = this.getWeeks();
577
+ }
578
+ else if (this.view === 'months') {
579
+ this.selectedYear--;
580
+ this.selectedDate = new Date(this.selectedYear, this.selectedDate.getMonth(), 1);
581
+ }
582
+ else {
583
+ this.selectedYear -= 20;
584
+ this.selectedDate = new Date(this.selectedYear, this.selectedDate.getMonth(), 1);
585
+ this.decadeRange = this.getDecadeRange();
586
+ }
587
+ }
588
+ next() {
589
+ if (this.view === 'days') {
590
+ const isDec = this.selectedDate.getMonth() == 11;
591
+ const offsetMonth = isDec ? -11 : 1;
592
+ if (isDec) {
593
+ this.selectedYear++;
594
+ }
595
+ this.selectedDate = new Date(this.selectedYear, this.selectedDate.getMonth() + offsetMonth, 1);
596
+ this.monthWeeks = this.getWeeks();
597
+ }
598
+ else if (this.view === 'months') {
599
+ this.selectedYear++;
600
+ this.selectedDate = new Date(this.selectedYear, this.selectedDate.getMonth(), 1);
601
+ }
602
+ else {
603
+ this.selectedYear += 20;
604
+ this.selectedDate = new Date(this.selectedYear, this.selectedDate.getMonth(), 1);
605
+ this.decadeRange = this.getDecadeRange();
606
+ }
607
+ }
608
+ // --- Cambio de vistas ---
609
+ changeView() {
610
+ if (this.view === 'days') {
611
+ this.view = 'months';
612
+ }
613
+ else if (this.view === 'months') {
614
+ this.view = 'years';
615
+ this.decadeRange = this.getDecadeRange();
616
+ }
617
+ }
618
+ selectYear(year) {
619
+ this.selectedYear = year;
620
+ this.selectedDate = new Date(year, this.selectedDate.getMonth(), 1);
621
+ this.view = 'months';
622
+ }
623
+ selectMonth(monthIndex) {
624
+ this.selectedDate = new Date(this.selectedYear, monthIndex, 1);
625
+ this.monthWeeks = this.getWeeks();
626
+ this.view = 'days';
627
+ }
628
+ selectDate(date) {
629
+ this.value = date.toISOString().split("T")[0];
630
+ this.notifyChange(this.value);
631
+ this.paintedDate = this.parseDateLimits(this.value);
632
+ this.closeCalendar();
633
+ }
634
+ isToday(day) {
635
+ if (day) {
636
+ const dayStr = day?.toISOString().split("T")[0];
637
+ const today = (new Date()).toISOString().split("T")[0];
638
+ return dayStr == today;
639
+ }
640
+ else {
641
+ return false;
642
+ }
643
+ }
644
+ isPainted(day) {
645
+ if (day && this.paintedDate) {
646
+ const dayStr = day?.toISOString().split("T")[0];
647
+ const today = this.paintedDate.toISOString().split("T")[0];
648
+ return dayStr == today;
649
+ }
650
+ else {
651
+ return false;
652
+ }
653
+ }
654
+ isThisMonth(m) {
655
+ const monthId = this.months.findIndex(f => f === m) + 1;
656
+ const dayStr = this.selectedYear + "-" + monthId;
657
+ const thisMonth = (new Date()).toISOString().split("T")[0].substring(0, 7).replace("-0", "-");
658
+ return dayStr == thisMonth;
659
+ }
660
+ // MÍNIMO Y MÁXIMO
661
+ parseDateLimits(date) {
662
+ if (date) {
663
+ const parsed = new Date(date);
664
+ if (isNaN(parsed.getTime())) {
665
+ return null;
666
+ }
667
+ else {
668
+ return parsed;
669
+ }
670
+ }
671
+ else {
672
+ return null;
673
+ }
674
+ }
675
+ cleanInput() {
676
+ this.value = '';
677
+ this.notifyChange(this.value);
678
+ this.paintedDate = null;
679
+ this.closeCalendar();
680
+ }
681
+ pickToday() {
682
+ this.selectedDate = new Date();
683
+ this.value = this.selectedDate.toISOString().split("T")[0];
684
+ this.notifyChange(this.value);
685
+ this.paintedDate = this.parseDateLimits(this.value);
686
+ this.closeCalendar();
687
+ }
688
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDatePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
689
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDatePickerComponent, isStandalone: true, selector: "ui-date-picker", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", label: "label", error: "error", tip: "tip", disabled: "disabled", max: "max", min: "min" }, providers: [
690
+ {
691
+ provide: NG_VALUE_ACCESSOR,
692
+ useExisting: forwardRef(() => UicDatePickerComponent),
693
+ multi: true
694
+ }
695
+ ], viewQueries: [{ propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{ iconColor }} {{ icon }}\"></i>\r\n }\r\n <div\r\n class=\"input-elements\"\r\n [style]=\"icon ? 'max-width: calc(100% - 34px);' : ''\"\r\n >\r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">{{ label }}</div>\r\n }\r\n <div class=\"fakeinput-wrapp \" >\r\n <div class=\"fakeinput \" \r\n [ngClass]=\"{ errorinput: error, disabledinput: disabled }\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n }\r\n <input\r\n type=\"text\"\r\n [disabled]=\"disabled\"\r\n placeholder=\"dd-mm-yyyy\"\r\n [value]=\"value ? (value | date : 'dd/MM/yyyy') : ''\"\r\n readonly\r\n (click)=\"openCalendar()\"\r\n />\r\n </div>\r\n <!-- Overlay Template -->\r\n <ng-template #calendarTemplate>\r\n <div class=\"calendar\">\r\n <div class=\"calendar-header\">\r\n <span (click)=\"changeView()\">\r\n @if (view === 'days') {\r\n {{ monthName }} de {{ selectedYear }}\r\n } @else if (view === 'months') {\r\n {{ selectedYear }}\r\n } @else {\r\n {{ decadeRange[0] }} - {{ decadeRange[decadeRange.length - 1] }}\r\n }\r\n </span>\r\n <ui-button\r\n size=\"s\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\"\r\n icon=\"ri-arrow-drop-up-line\"\r\n (click)=\"prev()\"\r\n >&lt;</ui-button\r\n >\r\n <ui-button\r\n size=\"s\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\"\r\n icon=\"ri-arrow-drop-down-line\"\r\n (click)=\"next()\"\r\n >&gt;</ui-button\r\n >\r\n </div>\r\n <!-- Vista Days -->\r\n @if (view === 'days') {\r\n <div class=\"calendar-grid\">\r\n @for (d of ['DO','LU','MA','MI','JU','VI','SA']; track $index) {\r\n <div class=\"weekday\">{{ d }}</div>\r\n } @for (week of monthWeeks; track $index) { @for (day of week;\r\n track $index) {\r\n <button\r\n class=\"day\"\r\n [disabled]=\"\r\n (minDate && day ? day < minDate : false) ||\r\n (maxDate && day ? day > maxDate : false)\r\n \"\r\n [class.today]=\"isToday(day)\"\r\n [class.day-selected]=\"isPainted(day)\"\r\n [class.empty]=\"!day\"\r\n (click)=\"day && selectDate(day)\"\r\n >\r\n {{ day?.getDate() }}\r\n </button>\r\n } }\r\n </div>\r\n }\r\n <!-- Vista Months -->\r\n @if (view === 'months') {\r\n <div class=\"calendar-grid months\">\r\n @for (m of months; let i = $index; track i) {\r\n <button\r\n class=\"day\"\r\n [class.today]=\"isThisMonth(m)\"\r\n (click)=\"selectMonth(i)\"\r\n >\r\n {{ m }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n <!-- Vista Years -->\r\n @if (view === 'years') {\r\n <div class=\"calendar-grid years\">\r\n @for (y of decadeRange; track $index) {\r\n <button\r\n class=\"day\"\r\n [class.today]=\"y == currentYear\"\r\n (click)=\"selectYear(y)\"\r\n >\r\n {{ y }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n <div class=\"calendar-footer\">\r\n <ui-button\r\n color=\"red\"\r\n size=\"s\"\r\n type=\"ghost\"\r\n (click)=\"cleanInput()\"\r\n >Limpiar</ui-button\r\n >\r\n <ui-button\r\n color=\"blue\"\r\n size=\"s\"\r\n type=\"ghost\"\r\n (click)=\"pickToday()\"\r\n >Hoy</ui-button\r\n >\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".date-picker{position:relative}.calendar{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--input-radius);box-shadow:0 2px 6px #00000026;padding:.5rem;width:250px}.calendar-header{display:flex;gap:5px;align-items:center;margin-bottom:8px}.calendar-header span{-webkit-user-select:none;user-select:none;flex:1 1;cursor:pointer;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:ease .3s;padding:.25rem;border-radius:6px;margin-right:3px}.calendar-header span:hover{background-color:var(--primary-100)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-grid.months{grid-template-columns:repeat(3,1fr)}.calendar-grid.years{grid-template-columns:repeat(4,1fr)}.calendar-grid .empty{visibility:hidden}.weekday{font-size:.875rem}.day{padding:6px;border:none;background:transparent;border-radius:var(--button-radius);cursor:pointer;transition:ease .5s}.day:enabled:hover{color:var(--grey-950);background:var(--secondary-300)}.day:disabled{color:var(--grey-300)}.today{box-shadow:0 0 0 3px var(--secondary-alpha)}.day-selected{background-color:var(--secondary-500);color:var(--white)}.calendar-footer{display:flex;padding-top:.25rem;border-top:solid 1px var(--grey-200);justify-content:space-between}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
696
+ }
697
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDatePickerComponent, decorators: [{
698
+ type: Component,
699
+ args: [{ selector: 'ui-date-picker', imports: [DatePipe, CommonModule, UicButtonComponent], providers: [
700
+ {
701
+ provide: NG_VALUE_ACCESSOR,
702
+ useExisting: forwardRef(() => UicDatePickerComponent),
703
+ multi: true
704
+ }
705
+ ], template: "<div class=\"input-wrapper\">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{ iconColor }} {{ icon }}\"></i>\r\n }\r\n <div\r\n class=\"input-elements\"\r\n [style]=\"icon ? 'max-width: calc(100% - 34px);' : ''\"\r\n >\r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">{{ label }}</div>\r\n }\r\n <div class=\"fakeinput-wrapp \" >\r\n <div class=\"fakeinput \" \r\n [ngClass]=\"{ errorinput: error, disabledinput: disabled }\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n }\r\n <input\r\n type=\"text\"\r\n [disabled]=\"disabled\"\r\n placeholder=\"dd-mm-yyyy\"\r\n [value]=\"value ? (value | date : 'dd/MM/yyyy') : ''\"\r\n readonly\r\n (click)=\"openCalendar()\"\r\n />\r\n </div>\r\n <!-- Overlay Template -->\r\n <ng-template #calendarTemplate>\r\n <div class=\"calendar\">\r\n <div class=\"calendar-header\">\r\n <span (click)=\"changeView()\">\r\n @if (view === 'days') {\r\n {{ monthName }} de {{ selectedYear }}\r\n } @else if (view === 'months') {\r\n {{ selectedYear }}\r\n } @else {\r\n {{ decadeRange[0] }} - {{ decadeRange[decadeRange.length - 1] }}\r\n }\r\n </span>\r\n <ui-button\r\n size=\"s\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\"\r\n icon=\"ri-arrow-drop-up-line\"\r\n (click)=\"prev()\"\r\n >&lt;</ui-button\r\n >\r\n <ui-button\r\n size=\"s\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\"\r\n icon=\"ri-arrow-drop-down-line\"\r\n (click)=\"next()\"\r\n >&gt;</ui-button\r\n >\r\n </div>\r\n <!-- Vista Days -->\r\n @if (view === 'days') {\r\n <div class=\"calendar-grid\">\r\n @for (d of ['DO','LU','MA','MI','JU','VI','SA']; track $index) {\r\n <div class=\"weekday\">{{ d }}</div>\r\n } @for (week of monthWeeks; track $index) { @for (day of week;\r\n track $index) {\r\n <button\r\n class=\"day\"\r\n [disabled]=\"\r\n (minDate && day ? day < minDate : false) ||\r\n (maxDate && day ? day > maxDate : false)\r\n \"\r\n [class.today]=\"isToday(day)\"\r\n [class.day-selected]=\"isPainted(day)\"\r\n [class.empty]=\"!day\"\r\n (click)=\"day && selectDate(day)\"\r\n >\r\n {{ day?.getDate() }}\r\n </button>\r\n } }\r\n </div>\r\n }\r\n <!-- Vista Months -->\r\n @if (view === 'months') {\r\n <div class=\"calendar-grid months\">\r\n @for (m of months; let i = $index; track i) {\r\n <button\r\n class=\"day\"\r\n [class.today]=\"isThisMonth(m)\"\r\n (click)=\"selectMonth(i)\"\r\n >\r\n {{ m }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n <!-- Vista Years -->\r\n @if (view === 'years') {\r\n <div class=\"calendar-grid years\">\r\n @for (y of decadeRange; track $index) {\r\n <button\r\n class=\"day\"\r\n [class.today]=\"y == currentYear\"\r\n (click)=\"selectYear(y)\"\r\n >\r\n {{ y }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n <div class=\"calendar-footer\">\r\n <ui-button\r\n color=\"red\"\r\n size=\"s\"\r\n type=\"ghost\"\r\n (click)=\"cleanInput()\"\r\n >Limpiar</ui-button\r\n >\r\n <ui-button\r\n color=\"blue\"\r\n size=\"s\"\r\n type=\"ghost\"\r\n (click)=\"pickToday()\"\r\n >Hoy</ui-button\r\n >\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".date-picker{position:relative}.calendar{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--input-radius);box-shadow:0 2px 6px #00000026;padding:.5rem;width:250px}.calendar-header{display:flex;gap:5px;align-items:center;margin-bottom:8px}.calendar-header span{-webkit-user-select:none;user-select:none;flex:1 1;cursor:pointer;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:ease .3s;padding:.25rem;border-radius:6px;margin-right:3px}.calendar-header span:hover{background-color:var(--primary-100)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-grid.months{grid-template-columns:repeat(3,1fr)}.calendar-grid.years{grid-template-columns:repeat(4,1fr)}.calendar-grid .empty{visibility:hidden}.weekday{font-size:.875rem}.day{padding:6px;border:none;background:transparent;border-radius:var(--button-radius);cursor:pointer;transition:ease .5s}.day:enabled:hover{color:var(--grey-950);background:var(--secondary-300)}.day:disabled{color:var(--grey-300)}.today{box-shadow:0 0 0 3px var(--secondary-alpha)}.day-selected{background-color:var(--secondary-500);color:var(--white)}.calendar-footer{display:flex;padding-top:.25rem;border-top:solid 1px var(--grey-200);justify-content:space-between}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"] }]
706
+ }], propDecorators: { icon: [{
707
+ type: Input
708
+ }], iconColor: [{
709
+ type: Input
710
+ }], internalIcon: [{
711
+ type: Input
712
+ }], label: [{
713
+ type: Input
714
+ }], error: [{
715
+ type: Input
716
+ }], tip: [{
717
+ type: Input
718
+ }], disabled: [{
719
+ type: Input
720
+ }], max: [{
721
+ type: Input
722
+ }], min: [{
723
+ type: Input
724
+ }], calendarTemplate: [{
725
+ type: ViewChild,
726
+ args: ['calendarTemplate']
727
+ }] } });
728
+
435
729
  class UicSearcherComponent {
436
730
  renderer;
437
731
  overlay;
@@ -559,13 +853,13 @@ class UicSearcherComponent {
559
853
  this.overlayRef.backdropClick().subscribe(() => this.closeOverlay());
560
854
  this.overlayRef.overlayElement.style.width = `${width}px`;
561
855
  }
562
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearcherComponent, deps: [{ token: i0.Renderer2 }, { token: i1$1.Overlay }, { token: i1$1.OverlayPositionBuilder }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
563
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSearcherComponent, isStandalone: true, selector: "ui-searcher", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", showSelected: "showSelected", placeholder: "placeholder", searchFn: "searchFn", itemDisplayFn: "itemDisplayFn", itemIsEnabledFn: "itemIsEnabledFn", manualSearch: "manualSearch", selectedItem: "selectedItem" }, outputs: { selectedItemChange: "selectedItemChange" }, viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["inputwrapp"], descendants: true }, { propertyName: "dropdownTemplateRef", first: true, predicate: ["dropdownTemplate"], descendants: true }], ngImport: i0, template: "\r\n<div class=\"input-wrapper\">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\"> \r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">\r\n {{label}} \r\n </div>\r\n \r\n <div class=\"fakeinput-wrapp\" #inputwrapp >\r\n <!-- INPUT -->\r\n <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n @if (selectedItem == null) { \r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"input-container pad-{{size}}\" >\r\n <input\r\n (focus)=\"openList()\"\r\n type=\"text\"\r\n (keydown.enter)=\"triggerSearch()\"\r\n (keydown.escape)=\"clearSearch()\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"onSearchChange($event)\"\r\n [placeholder]=\"placeholder\"\r\n />\r\n </div> \r\n @if (manualSearch) {\r\n <ui-button (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n }\r\n <ui-button size=\"t\" icon=\"ri-close-large-line\" (click)=\"clearSearch()\"></ui-button>\r\n }@else {\r\n <div class=\"input-container pad-{{size}}\" >\r\n <div class=\"selected-item\" >\r\n <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn(selectedItem)\"></div> \r\n <ui-button (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n \r\n </div>\r\n</div>\r\n\r\n<ng-template #dropdownTemplate>\r\n @if (results$ | async; as items){\r\n <div class=\"results\">\r\n @if (isLoading) {\r\n <div class=\"loader\"></div>\r\n }\r\n <div class=\"input-option-scroll\">\r\n @for (item of items; track $index) {\r\n <div class=\"input-option\" [class.item-disabled]=\"!itemIsEnabledFn(item)\" (click)=\"selectItem(item)\" [innerHTML]=\"itemDisplayFn(item)\">\r\n </div>\r\n }@empty {\r\n <div class=\"t-disabled\">No hay elementos para mostrar</div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".loader{height:4px;width:100%;--c:no-repeat linear-gradient(#6100ee 0 0);background:var(--c),var(--c),#d7b8fc;background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.wrapp-fakeinput{position:relative}.selected-item{border-radius:5px;background-color:var(--primary-500);padding-left:10px;height:25px;display:flex;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}.results{background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;border:solid 1px var(--grey-200);border-radius:5px;font-size:13px;z-index:150;overflow:hidden}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{position:absolute;border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:.875rem;z-index:50;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-300)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 3px var(--primary-400)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-50) -disabled;color:var(--grey-800)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
856
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearcherComponent, deps: [{ token: i0.Renderer2 }, { token: i1$2.Overlay }, { token: i1$2.OverlayPositionBuilder }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
857
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSearcherComponent, isStandalone: true, selector: "ui-searcher", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", showSelected: "showSelected", placeholder: "placeholder", searchFn: "searchFn", itemDisplayFn: "itemDisplayFn", itemIsEnabledFn: "itemIsEnabledFn", manualSearch: "manualSearch", selectedItem: "selectedItem" }, outputs: { selectedItemChange: "selectedItemChange" }, viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["inputwrapp"], descendants: true }, { propertyName: "dropdownTemplateRef", first: true, predicate: ["dropdownTemplate"], descendants: true }], ngImport: i0, template: "\r\n<div class=\"input-wrapper\">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\"> \r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">\r\n {{label}} \r\n </div>\r\n \r\n <div class=\"fakeinput-wrapp\" #inputwrapp >\r\n <!-- INPUT -->\r\n <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n @if (selectedItem == null) { \r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"input-container pad-{{size}}\" >\r\n <input\r\n (focus)=\"openList()\"\r\n type=\"text\"\r\n (keydown.enter)=\"triggerSearch()\"\r\n (keydown.escape)=\"clearSearch()\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"onSearchChange($event)\"\r\n [placeholder]=\"placeholder\"\r\n />\r\n </div> \r\n @if (manualSearch) {\r\n <ui-button (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n }\r\n <ui-button size=\"t\" icon=\"ri-close-large-line\" (click)=\"clearSearch()\"></ui-button>\r\n }@else {\r\n <div class=\"input-container pad-{{size}}\" >\r\n <div class=\"selected-item\" >\r\n <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn(selectedItem)\"></div> \r\n <ui-button (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n \r\n </div>\r\n</div>\r\n\r\n<ng-template #dropdownTemplate>\r\n @if (results$ | async; as items){\r\n <div class=\"results\">\r\n @if (isLoading) {\r\n <div class=\"loader\"></div>\r\n }\r\n <div class=\"input-option-scroll\">\r\n @for (item of items; track $index) {\r\n <div class=\"input-option\" [class.item-disabled]=\"!itemIsEnabledFn(item)\" (click)=\"selectItem(item)\" [innerHTML]=\"itemDisplayFn(item)\">\r\n </div>\r\n }@empty {\r\n <div class=\"t-disabled\">No hay elementos para mostrar</div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".loader{height:4px;width:100%;--c:no-repeat linear-gradient(#6100ee 0 0);background:var(--c),var(--c),#d7b8fc;background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.wrapp-fakeinput{position:relative}.selected-item{border-radius:5px;background-color:var(--primary-500);padding-left:10px;height:25px;display:flex;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}.results{background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;border:solid 1px var(--grey-200);border-radius:5px;font-size:13px;z-index:150;overflow:hidden}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
564
858
  }
565
859
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearcherComponent, decorators: [{
566
860
  type: Component,
567
- args: [{ selector: 'ui-searcher', imports: [CommonModule, FormsModule, AsyncPipe, UicButtonComponent], template: "\r\n<div class=\"input-wrapper\">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\"> \r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">\r\n {{label}} \r\n </div>\r\n \r\n <div class=\"fakeinput-wrapp\" #inputwrapp >\r\n <!-- INPUT -->\r\n <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n @if (selectedItem == null) { \r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"input-container pad-{{size}}\" >\r\n <input\r\n (focus)=\"openList()\"\r\n type=\"text\"\r\n (keydown.enter)=\"triggerSearch()\"\r\n (keydown.escape)=\"clearSearch()\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"onSearchChange($event)\"\r\n [placeholder]=\"placeholder\"\r\n />\r\n </div> \r\n @if (manualSearch) {\r\n <ui-button (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n }\r\n <ui-button size=\"t\" icon=\"ri-close-large-line\" (click)=\"clearSearch()\"></ui-button>\r\n }@else {\r\n <div class=\"input-container pad-{{size}}\" >\r\n <div class=\"selected-item\" >\r\n <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn(selectedItem)\"></div> \r\n <ui-button (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n \r\n </div>\r\n</div>\r\n\r\n<ng-template #dropdownTemplate>\r\n @if (results$ | async; as items){\r\n <div class=\"results\">\r\n @if (isLoading) {\r\n <div class=\"loader\"></div>\r\n }\r\n <div class=\"input-option-scroll\">\r\n @for (item of items; track $index) {\r\n <div class=\"input-option\" [class.item-disabled]=\"!itemIsEnabledFn(item)\" (click)=\"selectItem(item)\" [innerHTML]=\"itemDisplayFn(item)\">\r\n </div>\r\n }@empty {\r\n <div class=\"t-disabled\">No hay elementos para mostrar</div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".loader{height:4px;width:100%;--c:no-repeat linear-gradient(#6100ee 0 0);background:var(--c),var(--c),#d7b8fc;background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.wrapp-fakeinput{position:relative}.selected-item{border-radius:5px;background-color:var(--primary-500);padding-left:10px;height:25px;display:flex;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}.results{background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;border:solid 1px var(--grey-200);border-radius:5px;font-size:13px;z-index:150;overflow:hidden}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{position:absolute;border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:.875rem;z-index:50;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-300)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 3px var(--primary-400)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-50) -disabled;color:var(--grey-800)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"] }]
568
- }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i1$1.Overlay }, { type: i1$1.OverlayPositionBuilder }, { type: i0.ViewContainerRef }], propDecorators: { icon: [{
861
+ args: [{ selector: 'ui-searcher', imports: [CommonModule, FormsModule, AsyncPipe, UicButtonComponent], template: "\r\n<div class=\"input-wrapper\">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\"> \r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">\r\n {{label}} \r\n </div>\r\n \r\n <div class=\"fakeinput-wrapp\" #inputwrapp >\r\n <!-- INPUT -->\r\n <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n @if (selectedItem == null) { \r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"input-container pad-{{size}}\" >\r\n <input\r\n (focus)=\"openList()\"\r\n type=\"text\"\r\n (keydown.enter)=\"triggerSearch()\"\r\n (keydown.escape)=\"clearSearch()\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"onSearchChange($event)\"\r\n [placeholder]=\"placeholder\"\r\n />\r\n </div> \r\n @if (manualSearch) {\r\n <ui-button (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n }\r\n <ui-button size=\"t\" icon=\"ri-close-large-line\" (click)=\"clearSearch()\"></ui-button>\r\n }@else {\r\n <div class=\"input-container pad-{{size}}\" >\r\n <div class=\"selected-item\" >\r\n <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn(selectedItem)\"></div> \r\n <ui-button (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n \r\n </div>\r\n</div>\r\n\r\n<ng-template #dropdownTemplate>\r\n @if (results$ | async; as items){\r\n <div class=\"results\">\r\n @if (isLoading) {\r\n <div class=\"loader\"></div>\r\n }\r\n <div class=\"input-option-scroll\">\r\n @for (item of items; track $index) {\r\n <div class=\"input-option\" [class.item-disabled]=\"!itemIsEnabledFn(item)\" (click)=\"selectItem(item)\" [innerHTML]=\"itemDisplayFn(item)\">\r\n </div>\r\n }@empty {\r\n <div class=\"t-disabled\">No hay elementos para mostrar</div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".loader{height:4px;width:100%;--c:no-repeat linear-gradient(#6100ee 0 0);background:var(--c),var(--c),#d7b8fc;background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.wrapp-fakeinput{position:relative}.selected-item{border-radius:5px;background-color:var(--primary-500);padding-left:10px;height:25px;display:flex;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}.results{background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;border:solid 1px var(--grey-200);border-radius:5px;font-size:13px;z-index:150;overflow:hidden}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"] }]
862
+ }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i1$2.Overlay }, { type: i1$2.OverlayPositionBuilder }, { type: i0.ViewContainerRef }], propDecorators: { icon: [{
569
863
  type: Input
570
864
  }], iconColor: [{
571
865
  type: Input
@@ -621,7 +915,7 @@ class UicTableUicSearcherComponent {
621
915
  }
622
916
  }
623
917
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUicSearcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
624
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicTableUicSearcherComponent, isStandalone: true, selector: "uic-table-searcher", inputs: { placeholder: "placeholder", label: "label", searchOnKeydown: "searchOnKeydown" }, outputs: { filter: "filter" }, ngImport: i0, template: "\r\n<div class=\"searcher\">\r\n <div class=\"fakeinput\">\r\n <i class=\"ri-search-line\"></i>\r\n <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" placeholder=\"{{placeholder}}\">\r\n </div>\r\n <ui-button (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"ri-search-2-line\" size=\"m\">Buscar</ui-button>\r\n <ui-button (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-circle-line\" size=\"m\">Limpiar</ui-button>\r\n</div>", styles: [".searcher{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media (max-width: 767px){.searcher{margin-bottom:16px}}.searcher .fakeinput{display:flex;align-items:center;border:solid 1px var(--grey-200);height:40px;padding:2px 1px 2px 10px;border-radius:8px;transition:ease .3s;width:350px}@media (max-width: 767px){.searcher .fakeinput{width:100%}}.searcher .fakeinput i{font-size:24px;margin-right:8px}.searcher .fakeinput input{border:none}.searcher .fakeinput:focus-within{border-color:var(--primary-600)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
918
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicTableUicSearcherComponent, isStandalone: true, selector: "uic-table-searcher", inputs: { placeholder: "placeholder", label: "label", searchOnKeydown: "searchOnKeydown" }, outputs: { filter: "filter" }, ngImport: i0, template: "\r\n<div class=\"searcher\">\r\n <div class=\"fakeinput\">\r\n <i class=\"ri-search-line\"></i>\r\n <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" placeholder=\"{{placeholder}}\">\r\n </div>\r\n <ui-button (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"ri-search-2-line\" size=\"m\">Buscar</ui-button>\r\n <ui-button (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-circle-line\" size=\"m\">Limpiar</ui-button>\r\n</div>", styles: [".searcher{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media (max-width: 767px){.searcher{margin-bottom:16px}}.searcher .fakeinput{display:flex;align-items:center;border:solid 1px var(--grey-200);height:40px;padding:2px 1px 2px 10px;border-radius:8px;transition:ease .3s;width:350px}@media (max-width: 767px){.searcher .fakeinput{width:100%}}.searcher .fakeinput i{font-size:24px;margin-right:8px}.searcher .fakeinput input{border:none}.searcher .fakeinput:focus-within{border-color:var(--primary-600)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
625
919
  }
626
920
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUicSearcherComponent, decorators: [{
627
921
  type: Component,
@@ -747,6 +1041,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
747
1041
  type: Input
748
1042
  }] } });
749
1043
 
1044
+ const fadeAndRise = trigger('fadeAndRise', [
1045
+ transition(':enter', [style({ opacity: 0, maxHeight: '0px' }), animate('.3s ease', style({ opacity: 1, maxHeight: '200px' }))]),
1046
+ transition(':leave', [animate('.3s ease', style({ opacity: 0 }))])
1047
+ ]);
1048
+
750
1049
  class UicTooltipComponent {
751
1050
  tooltip = '';
752
1051
  left = 0;
@@ -969,7 +1268,7 @@ class UicTableComponent {
969
1268
  this.checkedChange.emit([]);
970
1269
  }
971
1270
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
972
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: "columns", data: "data", loading: "loading", pages: "pages", size: "size", highlightedId: "highlightedId", headerText: "headerText", totalItems: "totalItems", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", striped: "striped", showPagination: "showPagination", showEmptyMessage: "showEmptyMessage", emptyMessage: "emptyMessage" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-filters\">\r\n @if (searchEnabled) {\r\n <uic-table-searcher (filter)=\"search($event)\" [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n }\r\n <div class=\"filter-actions\">\r\n <ng-content select=\"[actions]\"></ng-content>\r\n </div>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n @if (headerText) {\r\n <div class=\"table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n }\r\n <div class=\"table-container\"> \r\n <table [class.striped]=\"striped\">\r\n <thead>\r\n <tr>\r\n @for (header of columns; track $index) {\r\n <th>\r\n <div class=\"th-wrap\">{{header.label.toUpperCase() }} \r\n @if (header.sortEnable) {\r\n <div (click)=\"sortClick(header.key)\" [ngClass]=\"{'sort-active':header.key == sortKey}\">\r\n <i [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n </div>\r\n }\r\n @if (header.type=='checkbox') {\r\n <ui-checkbox [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n }\r\n </div>\r\n </th> \r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n\r\n @if (loading) {\r\n @for (item of [].constructor(5); track $index) {\r\n <tr class=\"\">\r\n @for (header of columns; track $index) {\r\n <td> <div class=\"row-loader\"></div> </td>\r\n }\r\n </tr> \r\n }\r\n } @else {\r\n @for (row of data; track row.id) {\r\n <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\" [class.tr-highlighted]=\"row.highlighted\">\r\n @for (header of columns; track $index) {\r\n <!-- TIPOS DE HEADERS -->\r\n <td [class]=\"getFontColor(row.data,header.key)\">\r\n @if (header.type == 'text') {\r\n {{ getValue(row.data,header.key) }} \r\n }\r\n @if (header.type == 'icon-list') {\r\n <div class=\"table-icon-wrap\">\r\n @for (alert of getList(row.data,header.key); track $index) {\r\n <i [tip]=\"alert.text\" [class]=\"alert.icon + ' alert'\" ></i>\r\n }\r\n </div>\r\n }\r\n @else if (header.type == 'list'){\r\n <uic-table-list [list]=\"getList(row.data,header.key)\"></uic-table-list> \r\n }\r\n @else if (header.type == 'user'){\r\n <uic-table-user [user]=\"getUser(row.data,header.key)\"></uic-table-user> \r\n }\r\n @else if (header.type == 'checkbox'){\r\n <ui-checkbox [ngModel]=\"checkedIds.has(row.id)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox> \r\n }\r\n @else if (header.type == 'actions') { \r\n <div class=\"table-actions\">\r\n @for (btn of header.actions; track $index) {\r\n @if (isValidRule(row.data,btn.rule)) {\r\n <ui-button \r\n [disabled]=\"loading\"\r\n [tip]=\"btn.tooltip??''\"\r\n size=\"s\"\r\n [iconOnly]=\"btn.text==null\"\r\n [text]=\"btn.text??''\"\r\n [icon]=\"btn.icon??''\"\r\n [color]=\"btn.color\"\r\n (click)=\"doAction(row.id,btn.key)\">\r\n </ui-button> \r\n }\r\n } \r\n </div>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }@empty {\r\n @if (showEmptyMessage) {\r\n <tr> \r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"empty\">{{emptyMessage}} </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n \r\n @if (showPagination) {\r\n <uic-table-pagination \r\n [loading]=\"loading\" \r\n [totalPages]=\"pages\" \r\n [size]=\"size\"\r\n (sizeChange)=\"sizeChabge($event)\"\r\n (pageChange)=\"pageChage($event)\">\r\n </uic-table-pagination>\r\n }\r\n</div>", styles: [".table-wrapper{overflow:hidden;border:solid 1px var(--grey-200);border-radius:12px}table{width:100%;font-weight:400;color:var(--grey-600)}table th{font-size:12px;height:44px;font-weight:500;background-color:var(--grey-50);border-left:solid 6px var(--grey-50)}table th .th-wrap{white-space:nowrap;display:flex;align-items:center}table th .th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}table th .th-wrap div:hover{color:var(--primary-500)}table td{font-size:14px;height:64px}table td,table th{padding:4px 24px;vertical-align:middle;border-bottom:solid 1px var(--grey-200)}table tr{transition:ease .3s}table tr:hover{background-color:var(--grey-50)}.table-container{width:100%;overflow-x:auto}.table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--grey-200)}.table-actions{display:flex;gap:2px}.table-icon-wrap{display:flex;justify-content:center;gap:8px;font-size:18px;margin-right:5px}.loader-tr{border-bottom:none!important}.loader-tr td{padding:0}.sort-active{color:var(--secondary-500)!important;border:solid 1px}.empty{text-align:center;color:var(--grey-300)}.table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}.filter-actions{display:flex;gap:8px}.alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.tr-highlighted{border-left:solid 6px var(--green-500)}.trc-primary{color:var(--primary-500)}.trc-red{color:var(--red-500)}.trc-blue{color:var(--blue-500)}.trc-green{color:var(--green-500)}.trc-yellow{color:var(--yellow-500)}.trc-black{color:var(--grey-900)}.trc-grey{color:var(--grey-300)}.row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown"], outputs: ["filter"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["currentPage", "totalPages", "size", "loading"], outputs: ["pageChange", "sizeChange"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["label", "placeholder", "disabled", "loading"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [highlightRow, animatedRow] });
1271
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: "columns", data: "data", loading: "loading", pages: "pages", size: "size", highlightedId: "highlightedId", headerText: "headerText", totalItems: "totalItems", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", striped: "striped", showPagination: "showPagination", showEmptyMessage: "showEmptyMessage", emptyMessage: "emptyMessage" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-filters\">\r\n @if (searchEnabled) {\r\n <uic-table-searcher (filter)=\"search($event)\" [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n }\r\n <div class=\"filter-actions\">\r\n <ng-content select=\"[actions]\"></ng-content>\r\n </div>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n @if (headerText) {\r\n <div class=\"table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n }\r\n <div class=\"table-container\"> \r\n <table [class.striped]=\"striped\">\r\n <thead>\r\n <tr>\r\n @for (header of columns; track $index) {\r\n <th>\r\n <div class=\"th-wrap\">{{header.label.toUpperCase() }} \r\n @if (header.sortEnable) {\r\n <div (click)=\"sortClick(header.key)\" [ngClass]=\"{'sort-active':header.key == sortKey}\">\r\n <i [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n </div>\r\n }\r\n @if (header.type=='checkbox') {\r\n <ui-checkbox [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n }\r\n </div>\r\n </th> \r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n\r\n @if (loading) {\r\n @for (item of [].constructor(5); track $index) {\r\n <tr class=\"\">\r\n @for (header of columns; track $index) {\r\n <td> <div class=\"row-loader\"></div> </td>\r\n }\r\n </tr> \r\n }\r\n } @else {\r\n @for (row of data; track row.id) {\r\n <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\" [class.tr-highlighted]=\"row.highlighted\">\r\n @for (header of columns; track $index) {\r\n <!-- TIPOS DE HEADERS -->\r\n <td [class]=\"getFontColor(row.data,header.key)\">\r\n @if (header.type == 'text') {\r\n {{ getValue(row.data,header.key) }} \r\n }\r\n @if (header.type == 'icon-list') {\r\n <div class=\"table-icon-wrap\">\r\n @for (alert of getList(row.data,header.key); track $index) {\r\n <i [tip]=\"alert.text\" [class]=\"alert.icon + ' alert'\" ></i>\r\n }\r\n </div>\r\n }\r\n @else if (header.type == 'list'){\r\n <uic-table-list [list]=\"getList(row.data,header.key)\"></uic-table-list> \r\n }\r\n @else if (header.type == 'user'){\r\n <uic-table-user [user]=\"getUser(row.data,header.key)\"></uic-table-user> \r\n }\r\n @else if (header.type == 'checkbox'){\r\n <ui-checkbox [ngModel]=\"checkedIds.has(row.id)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox> \r\n }\r\n @else if (header.type == 'actions') { \r\n <div class=\"table-actions\">\r\n @for (btn of header.actions; track $index) {\r\n @if (isValidRule(row.data,btn.rule)) {\r\n <ui-button \r\n [disabled]=\"loading\"\r\n [tip]=\"btn.tooltip??''\"\r\n size=\"s\"\r\n [iconOnly]=\"btn.text==null\"\r\n [text]=\"btn.text??''\"\r\n [icon]=\"btn.icon??''\"\r\n [color]=\"btn.color\"\r\n (click)=\"doAction(row.id,btn.key)\">\r\n </ui-button> \r\n }\r\n } \r\n </div>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }@empty {\r\n @if (showEmptyMessage) {\r\n <tr> \r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"empty\">{{emptyMessage}} </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n \r\n @if (showPagination) {\r\n <uic-table-pagination \r\n [loading]=\"loading\" \r\n [totalPages]=\"pages\" \r\n [size]=\"size\"\r\n (sizeChange)=\"sizeChabge($event)\"\r\n (pageChange)=\"pageChage($event)\">\r\n </uic-table-pagination>\r\n }\r\n</div>", styles: [".table-wrapper{overflow:hidden;border:solid 1px var(--grey-200);border-radius:12px}table{width:100%;font-weight:400;color:var(--grey-600)}table th{font-size:12px;height:44px;font-weight:500;background-color:var(--grey-50);border-left:solid 6px var(--grey-50)}table th .th-wrap{white-space:nowrap;display:flex;align-items:center}table th .th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}table th .th-wrap div:hover{color:var(--primary-500)}table td{font-size:14px;height:64px}table td,table th{padding:4px 24px;vertical-align:middle;border-bottom:solid 1px var(--grey-200)}table tr{transition:ease .3s}table tr:hover{background-color:var(--grey-50)}.table-container{width:100%;overflow-x:auto}.table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--grey-200)}.table-actions{display:flex;gap:2px}.table-icon-wrap{display:flex;justify-content:center;gap:8px;font-size:18px;margin-right:5px}.loader-tr{border-bottom:none!important}.loader-tr td{padding:0}.sort-active{color:var(--secondary-500)!important;border:solid 1px}.empty{text-align:center;color:var(--grey-300)}.table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}.filter-actions{display:flex;gap:8px}.alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.tr-highlighted{border-left:solid 6px var(--green-500)}.trc-primary{color:var(--primary-500)}.trc-red{color:var(--red-500)}.trc-blue{color:var(--blue-500)}.trc-green{color:var(--green-500)}.trc-yellow{color:var(--yellow-500)}.trc-black{color:var(--grey-900)}.trc-grey{color:var(--grey-300)}.row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown"], outputs: ["filter"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["currentPage", "totalPages", "size", "loading"], outputs: ["pageChange", "sizeChange"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "disabled", "loading"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [highlightRow, animatedRow] });
973
1272
  }
974
1273
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, decorators: [{
975
1274
  type: Component,
@@ -1013,33 +1312,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
1013
1312
  type: Output
1014
1313
  }] } });
1015
1314
 
1016
- class UicSwichComponent {
1017
- checked = false;
1018
- checkedChange = new EventEmitter();
1019
- disabled = false;
1020
- placeholder = '';
1021
- toggle() {
1022
- if (this.disabled)
1023
- return;
1024
- this.checked = !this.checked;
1025
- this.checkedChange.emit(this.checked);
1315
+ ;
1316
+ ;
1317
+
1318
+ class UiAlertComponent {
1319
+ alert;
1320
+ closeAlert = new EventEmitter();
1321
+ interval;
1322
+ progressValue = 0;
1323
+ animationIntevalMs = 100;
1324
+ pauseAnimation = false;
1325
+ id = 0;
1326
+ ngOnInit() {
1327
+ this.id = this.alert.id;
1328
+ if (this.alert.duration && this.alert.duration > 0) {
1329
+ const duration = this.alert.duration;
1330
+ let count = 0;
1331
+ this.interval = setInterval(() => {
1332
+ count = this.pauseAnimation ? count : count + this.animationIntevalMs;
1333
+ this.progressValue = Math.floor((count / duration) * 100);
1334
+ if (this.progressValue > 100) {
1335
+ this.close();
1336
+ }
1337
+ }, this.animationIntevalMs);
1338
+ }
1026
1339
  }
1027
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSwichComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1028
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicSwichComponent, isStandalone: true, selector: "ui-switch", inputs: { checked: "checked", disabled: "disabled", placeholder: "placeholder" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<div class=\"toggle-wrapper\" [class.disabled]=\"disabled\">\r\n <button\r\n type=\"button\"\r\n class=\"toggle\"\r\n [class.checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n (click)=\"toggle()\"\r\n >\r\n <span class=\"thumb\"></span>\r\n </button>\r\n {{placeholder}}\r\n</div>", styles: [".toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--grey-300)}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--grey-300);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px rgba(var(--secondary-400),.4)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n"] });
1340
+ close() {
1341
+ clearInterval(this.interval);
1342
+ this.closeAlert.emit(this.id);
1343
+ }
1344
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UiAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1345
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UiAlertComponent, isStandalone: true, selector: "ui-alert", inputs: { alert: "alert" }, outputs: { closeAlert: "closeAlert" }, ngImport: i0, template: "<div [class]=\"'alert ' + alert.type + ' ' + (alert.style??'filled')\" >\r\n @if (alert.showProgressBar) {\r\n <div class=\"alert-process\">\r\n <div class=\"alert-process-bar\" [style.width.%]=\"progressValue\"></div>\r\n </div>\r\n }\r\n <div class=\"alert-body\">\r\n <button class=\"close\" (click)=\"close()\"> \u2715 </button>\r\n @if (alert.icon) {\r\n <i [class]=\"'highlighted ' + alert.icon\"></i>\r\n }\r\n <div>\r\n <div class=\"toast-title highlighted\">{{alert.title}}</div>\r\n <div class=\"toast-body\">{{alert.message}}</div>\r\n @if ( alert.okButtonText || alert.cancelButtonText){\r\n <div class=\"toast-buttons \">\r\n @if ( alert.okButtonText ) {\r\n <button style=\"font-weight: 500;\">{{alert.okButtonText}}</button>\r\n }\r\n @if ( alert.cancelButtonText ){\r\n <button (click)=\"close()\">{{alert.cancelButtonText}}</button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [".alert{display:flex;flex-direction:column;min-width:250px;max-width:450px;overflow:hidden;animation:fadeIn .3s ease;border-radius:12px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.alert-process{width:100%;height:4px;background-color:#0000004f;display:flex}.alert-process-bar{background-color:#ffffff69;height:4px}.alert-body{position:relative;padding:16px;display:flex}.alert-body i{font-size:20;width:22px;height:22px;margin-right:16px}.toast-title{font-weight:500;font-size:16px;line-height:24px}.toast-body{font-weight:400;font-size:14px;line-height:20px}.toast-buttons{margin-top:16px;display:flex;gap:16px}.toast-buttons button{color:var(--white);border:none;background-color:transparent;font-size:16px;line-height:24px;padding:0}.toast-buttons button:hover{text-decoration:underline;cursor:pointer}.close{background:transparent;border:none;color:inherit;font-size:16px;cursor:pointer;position:absolute;right:5px;top:5px}.filled{color:var(--white)}.filled.success{background:var(--green-600)}.filled.error{background:var(--red-600)}.filled.warning{background:var(--yellow-600)}.filled.info{background:var(--blue-600)}.bordered{border:solid 1px;color:var(--grey-500)}.bordered.success{border-color:var(--green-600);background:var(--green-100)}.bordered.success .highlighted,.bordered.success button{color:var(--green-600)}.bordered.error{border-color:var(--red-600);background:var(--red-100)}.bordered.error .highlighted,.bordered.error button{color:var(--red-600)}.bordered.warning{border-color:var(--yellow-600);background:var(--yellow-100)}.bordered.warning .highlighted,.bordered.warning button{color:var(--yellow-600)}.bordered.info{border-color:var(--blue-600);background:var(--blue-100)}.bordered.info .highlighted,.bordered.info button{color:var(--blue-600)}\n"] });
1029
1346
  }
1030
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSwichComponent, decorators: [{
1347
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UiAlertComponent, decorators: [{
1031
1348
  type: Component,
1032
- args: [{ selector: 'ui-switch', imports: [], template: "<div class=\"toggle-wrapper\" [class.disabled]=\"disabled\">\r\n <button\r\n type=\"button\"\r\n class=\"toggle\"\r\n [class.checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n (click)=\"toggle()\"\r\n >\r\n <span class=\"thumb\"></span>\r\n </button>\r\n {{placeholder}}\r\n</div>", styles: [".toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--grey-300)}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--grey-300);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px rgba(var(--secondary-400),.4)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n"] }]
1033
- }], propDecorators: { checked: [{
1349
+ args: [{ selector: 'ui-alert', imports: [], template: "<div [class]=\"'alert ' + alert.type + ' ' + (alert.style??'filled')\" >\r\n @if (alert.showProgressBar) {\r\n <div class=\"alert-process\">\r\n <div class=\"alert-process-bar\" [style.width.%]=\"progressValue\"></div>\r\n </div>\r\n }\r\n <div class=\"alert-body\">\r\n <button class=\"close\" (click)=\"close()\"> \u2715 </button>\r\n @if (alert.icon) {\r\n <i [class]=\"'highlighted ' + alert.icon\"></i>\r\n }\r\n <div>\r\n <div class=\"toast-title highlighted\">{{alert.title}}</div>\r\n <div class=\"toast-body\">{{alert.message}}</div>\r\n @if ( alert.okButtonText || alert.cancelButtonText){\r\n <div class=\"toast-buttons \">\r\n @if ( alert.okButtonText ) {\r\n <button style=\"font-weight: 500;\">{{alert.okButtonText}}</button>\r\n }\r\n @if ( alert.cancelButtonText ){\r\n <button (click)=\"close()\">{{alert.cancelButtonText}}</button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [".alert{display:flex;flex-direction:column;min-width:250px;max-width:450px;overflow:hidden;animation:fadeIn .3s ease;border-radius:12px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.alert-process{width:100%;height:4px;background-color:#0000004f;display:flex}.alert-process-bar{background-color:#ffffff69;height:4px}.alert-body{position:relative;padding:16px;display:flex}.alert-body i{font-size:20;width:22px;height:22px;margin-right:16px}.toast-title{font-weight:500;font-size:16px;line-height:24px}.toast-body{font-weight:400;font-size:14px;line-height:20px}.toast-buttons{margin-top:16px;display:flex;gap:16px}.toast-buttons button{color:var(--white);border:none;background-color:transparent;font-size:16px;line-height:24px;padding:0}.toast-buttons button:hover{text-decoration:underline;cursor:pointer}.close{background:transparent;border:none;color:inherit;font-size:16px;cursor:pointer;position:absolute;right:5px;top:5px}.filled{color:var(--white)}.filled.success{background:var(--green-600)}.filled.error{background:var(--red-600)}.filled.warning{background:var(--yellow-600)}.filled.info{background:var(--blue-600)}.bordered{border:solid 1px;color:var(--grey-500)}.bordered.success{border-color:var(--green-600);background:var(--green-100)}.bordered.success .highlighted,.bordered.success button{color:var(--green-600)}.bordered.error{border-color:var(--red-600);background:var(--red-100)}.bordered.error .highlighted,.bordered.error button{color:var(--red-600)}.bordered.warning{border-color:var(--yellow-600);background:var(--yellow-100)}.bordered.warning .highlighted,.bordered.warning button{color:var(--yellow-600)}.bordered.info{border-color:var(--blue-600);background:var(--blue-100)}.bordered.info .highlighted,.bordered.info button{color:var(--blue-600)}\n"] }]
1350
+ }], propDecorators: { alert: [{
1034
1351
  type: Input
1035
- }], checkedChange: [{
1352
+ }], closeAlert: [{
1036
1353
  type: Output
1037
- }], disabled: [{
1038
- type: Input
1039
- }], placeholder: [{
1040
- type: Input
1041
1354
  }] } });
1042
1355
 
1356
+ let nextId = 1;
1357
+ function createSuccessAlert(message, options) {
1358
+ return {
1359
+ id: nextId++,
1360
+ message,
1361
+ type: 'success',
1362
+ duration: 3000,
1363
+ ...options,
1364
+ };
1365
+ }
1366
+ function createErrorAlert(message, options) {
1367
+ return {
1368
+ id: nextId++,
1369
+ message,
1370
+ type: 'error',
1371
+ duration: 5000,
1372
+ ...options,
1373
+ };
1374
+ }
1375
+ function createWarningAlert(message, options) {
1376
+ return {
1377
+ id: nextId++,
1378
+ message,
1379
+ type: 'warning',
1380
+ duration: 4000,
1381
+ ...options,
1382
+ };
1383
+ }
1384
+ function createInfoAlert(message, options) {
1385
+ return {
1386
+ id: nextId++,
1387
+ message,
1388
+ type: 'info',
1389
+ duration: 3000,
1390
+ ...options,
1391
+ };
1392
+ }
1393
+
1394
+ class UicPushAlertService {
1395
+ autoIncId = 0;
1396
+ alerts$ = new Subject();
1397
+ get stream() {
1398
+ return this.alerts$.asObservable();
1399
+ }
1400
+ show(alertData) {
1401
+ this.autoIncId++;
1402
+ const alert = { ...alertData, id: this.autoIncId };
1403
+ this.alerts$.next(alert);
1404
+ }
1405
+ success(message, options) {
1406
+ this.show(createSuccessAlert(message, options));
1407
+ }
1408
+ error(message, options) {
1409
+ this.show(createErrorAlert(message, options));
1410
+ }
1411
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPushAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1412
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPushAlertService, providedIn: 'root' });
1413
+ }
1414
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPushAlertService, decorators: [{
1415
+ type: Injectable,
1416
+ args: [{
1417
+ providedIn: 'root'
1418
+ }]
1419
+ }] });
1420
+
1421
+ class UicAlertContainerComponent {
1422
+ alertService;
1423
+ alerts = [];
1424
+ constructor(alertService) {
1425
+ this.alertService = alertService;
1426
+ }
1427
+ ngOnInit() {
1428
+ this.alertService.stream.subscribe(alert => {
1429
+ this.alerts.push(alert);
1430
+ });
1431
+ }
1432
+ dismis(id) {
1433
+ const idx = this.alerts.findIndex(f => f.id == id);
1434
+ this.alerts.splice(idx, 1);
1435
+ }
1436
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicAlertContainerComponent, deps: [{ token: UicPushAlertService }], target: i0.ɵɵFactoryTarget.Component });
1437
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicAlertContainerComponent, isStandalone: true, selector: "ui-alert-container", ngImport: i0, template: "<div class=\"alert-container\">\r\n @for (alert of alerts; track alert.id){\r\n <ui-alert\r\n (closeAlert)=\"dismis($event)\"\r\n [alert]=\"alert\">\r\n </ui-alert>\r\n } \r\n</div>\r\n", styles: [".alert-container{position:fixed;top:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:9999}\n"], dependencies: [{ kind: "component", type: UiAlertComponent, selector: "ui-alert", inputs: ["alert"], outputs: ["closeAlert"] }] });
1438
+ }
1439
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicAlertContainerComponent, decorators: [{
1440
+ type: Component,
1441
+ args: [{ selector: 'ui-alert-container', imports: [UiAlertComponent], template: "<div class=\"alert-container\">\r\n @for (alert of alerts; track alert.id){\r\n <ui-alert\r\n (closeAlert)=\"dismis($event)\"\r\n [alert]=\"alert\">\r\n </ui-alert>\r\n } \r\n</div>\r\n", styles: [".alert-container{position:fixed;top:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:9999}\n"] }]
1442
+ }], ctorParameters: () => [{ type: UicPushAlertService }] });
1443
+
1043
1444
  const pushTop = trigger('pushTop', [
1044
1445
  transition(':enter', [style({ opacity: 0, transform: 'translateY(20px)' }), animate('.3s ease', style({ opacity: 1, transform: 'translateY(0)' }))]),
1045
1446
  transition(':leave', [animate('.3s ease', style({ opacity: 0, transform: 'translateY(-20px)' }))])
@@ -1316,11 +1717,11 @@ class TinyAlertComponent {
1316
1717
  this.modalRef.closeFloating(value ? this.response : null);
1317
1718
  }
1318
1719
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, deps: [{ token: MODAL_DATA }, { token: UiModalRef }], target: i0.ɵɵFactoryTarget.Component });
1319
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TinyAlertComponent, isStandalone: true, selector: "lib-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath != '') {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }\r\n <h3> {{data.title}} </h3>\r\n <div class=\"alert-body\" [innerHTML]=\"data.body\"> </div>\r\n <div class=\"card-buttons\">\r\n @if (data.showCancelButton) {\r\n <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'primary'\" size=\"l\"> {{data.cancelButtonText??'Cancelar'}} </ui-button>\r\n }\r\n <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n </div>\r\n <button class=\"floating-close\" (click)=\"close(false)\" >\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:700;line-height:24px;text-align:center;color:var(--grey-500)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 767px){.floating-close{top:0;right:-5px}}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
1720
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TinyAlertComponent, isStandalone: true, selector: "ui-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath != '') {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }\r\n <h3> {{data.title}} </h3>\r\n <div class=\"alert-body\" [innerHTML]=\"data.body\"> </div>\r\n <div class=\"card-buttons\">\r\n @if (data.showCancelButton) {\r\n <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'primary'\" size=\"l\"> {{data.cancelButtonText??'Cancelar'}} </ui-button>\r\n }\r\n <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n </div>\r\n <button class=\"floating-close\" (click)=\"close(false)\" >\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:700;line-height:24px;text-align:center;color:var(--grey-500)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 767px){.floating-close{top:0;right:-5px}}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
1320
1721
  }
1321
1722
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, decorators: [{
1322
1723
  type: Component,
1323
- args: [{ selector: 'lib-tiny-alert', imports: [UicButtonComponent], template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath != '') {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }\r\n <h3> {{data.title}} </h3>\r\n <div class=\"alert-body\" [innerHTML]=\"data.body\"> </div>\r\n <div class=\"card-buttons\">\r\n @if (data.showCancelButton) {\r\n <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'primary'\" size=\"l\"> {{data.cancelButtonText??'Cancelar'}} </ui-button>\r\n }\r\n <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n </div>\r\n <button class=\"floating-close\" (click)=\"close(false)\" >\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:700;line-height:24px;text-align:center;color:var(--grey-500)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 767px){.floating-close{top:0;right:-5px}}\n"] }]
1724
+ args: [{ selector: 'ui-tiny-alert', imports: [UicButtonComponent], template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath != '') {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }\r\n <h3> {{data.title}} </h3>\r\n <div class=\"alert-body\" [innerHTML]=\"data.body\"> </div>\r\n <div class=\"card-buttons\">\r\n @if (data.showCancelButton) {\r\n <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'primary'\" size=\"l\"> {{data.cancelButtonText??'Cancelar'}} </ui-button>\r\n }\r\n <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n </div>\r\n <button class=\"floating-close\" (click)=\"close(false)\" >\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:700;line-height:24px;text-align:center;color:var(--grey-500)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 767px){.floating-close{top:0;right:-5px}}\n"] }]
1324
1725
  }], ctorParameters: () => [{ type: undefined, decorators: [{
1325
1726
  type: Inject,
1326
1727
  args: [MODAL_DATA]
@@ -1353,76 +1754,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
1353
1754
  }]
1354
1755
  }] });
1355
1756
 
1356
- let nextId = 1;
1357
- function createSuccessAlert(message, options) {
1358
- return {
1359
- id: nextId++,
1360
- message,
1361
- type: 'success',
1362
- duration: 3000,
1363
- ...options,
1364
- };
1365
- }
1366
- function createErrorAlert(message, options) {
1367
- return {
1368
- id: nextId++,
1369
- message,
1370
- type: 'error',
1371
- duration: 5000,
1372
- ...options,
1373
- };
1374
- }
1375
- function createWarningAlert(message, options) {
1376
- return {
1377
- id: nextId++,
1378
- message,
1379
- type: 'warning',
1380
- duration: 4000,
1381
- ...options,
1382
- };
1383
- }
1384
- function createInfoAlert(message, options) {
1385
- return {
1386
- id: nextId++,
1387
- message,
1388
- type: 'info',
1389
- duration: 3000,
1390
- ...options,
1391
- };
1392
- }
1393
-
1394
- class UicPushAlertService {
1395
- autoIncId = 0;
1396
- alerts$ = new Subject();
1397
- get stream() {
1398
- return this.alerts$.asObservable();
1399
- }
1400
- show(alertData) {
1401
- this.autoIncId++;
1402
- const alert = { ...alertData, id: this.autoIncId };
1403
- this.alerts$.next(alert);
1404
- }
1405
- success(message, options) {
1406
- this.show(createSuccessAlert(message, options));
1407
- }
1408
- error(message, options) {
1409
- this.show(createErrorAlert(message, options));
1410
- }
1411
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPushAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1412
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPushAlertService, providedIn: 'root' });
1413
- }
1414
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPushAlertService, decorators: [{
1415
- type: Injectable,
1416
- args: [{
1417
- providedIn: 'root'
1418
- }]
1419
- }] });
1420
-
1421
1757
  // COMPONENTS
1422
1758
 
1423
1759
  /**
1424
1760
  * Generated bundle index. Do not edit.
1425
1761
  */
1426
1762
 
1427
- export { MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiModalRef, UicButtonComponent, UicCheckboxComponent, UicFormWrapperComponent, UicInputComponent, UicModalService, UicNameInitsPipe, UicPushAlertService, UicSearcherComponent, UicSelectComponent, UicSkeletonLoaderComponent, UicSwichComponent, UicTableComponent, UicTinyAlertService, UicToolTipDirective, animatedRow, fadeAndRise, fadeBackdrop, highlightRow, pushTop, sideModal, simpleFade };
1763
+ export { MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiModalRef, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicFormWrapperComponent, UicInputComponent, UicModalService, UicNameInitsPipe, UicPushAlertService, UicSearcherComponent, UicSelectComponent, UicSkeletonLoaderComponent, UicSwichComponent, UicTableComponent, UicTinyAlertService, UicToolTipDirective, animatedRow, fadeAndRise, fadeBackdrop, highlightRow, pushTop, sideModal, simpleFade };
1428
1764
  //# sourceMappingURL=ui-core-abv.mjs.map