ui-core-abv 0.1.5 → 0.1.6
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.
- package/fesm2022/ui-core-abv.mjs +808 -60
- package/fesm2022/ui-core-abv.mjs.map +1 -1
- package/lib/components/dynamic-form/form.models.d.ts +5 -1
- package/lib/components/inputs/date-picker/date-picker.component.d.ts +20 -1
- package/lib/components/inputs/phone-input/phone-countries.data.d.ts +8 -0
- package/lib/components/inputs/phone-input/phone-input.component.d.ts +72 -0
- package/lib/components/inputs/select/select.component.d.ts +2 -1
- package/lib/components/inputs/time-picker/time-picker.component.d.ts +65 -0
- package/lib/components/table/table.models.d.ts +1 -4
- package/package.json +1 -1
- package/public-api.d.ts +2 -1
- package/src/lib/styles/_tokens.scss +3 -2
- package/src/lib/styles/_variables.scss +3 -1
package/fesm2022/ui-core-abv.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
|
-
import { CommonModule
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
4
|
import { Input, Component, EventEmitter, Output, Directive, forwardRef, inject, ViewContainerRef, ElementRef, ViewChild, HostListener, ViewChildren, createComponent, Pipe, Injectable, Injector, Inject, EnvironmentInjector } from '@angular/core';
|
|
5
5
|
import * as i2 from '@angular/forms';
|
|
@@ -87,8 +87,8 @@ function createValueAccessor() {
|
|
|
87
87
|
return BaseValueAccessor;
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
-
const base$
|
|
91
|
-
class UicCheckboxComponent extends base$
|
|
90
|
+
const base$8 = createValueAccessor();
|
|
91
|
+
class UicCheckboxComponent extends base$8 {
|
|
92
92
|
icon = ''; // Icono externo
|
|
93
93
|
iconColor = 'black';
|
|
94
94
|
label = '';
|
|
@@ -110,7 +110,7 @@ class UicCheckboxComponent extends base$6 {
|
|
|
110
110
|
useExisting: forwardRef(() => UicCheckboxComponent),
|
|
111
111
|
multi: true
|
|
112
112
|
}
|
|
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 }\r\n <div [class.check-form-container]=\"!noPadding\">\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 [class.placeholder-space]=\"placeholder!=''\"\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 @if (placeholder) {\r\n <span class=\"check-placeholder\">{{placeholder}}</span>\r\n }\r\n \r\n <ng-content></ng-content> \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:calc(4 * var(--form-ref));display:flex;align-items:center}.check-wrapper{padding:2px;cursor:pointer;display:flex;align-items:center;font-size:.875rem}.check-placeholder{margin-left:.5rem}.checkbox{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);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(--disabled-background);border-color:var(--disabled-background);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;
|
|
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 }\r\n <div [class.check-form-container]=\"!noPadding\">\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 [class.placeholder-space]=\"placeholder!=''\"\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 @if (placeholder) {\r\n <span class=\"check-placeholder\">{{placeholder}}</span>\r\n }\r\n \r\n <ng-content></ng-content> \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:calc(4 * var(--form-ref));display:flex;align-items:center}.check-wrapper{padding:2px;cursor:pointer;display:flex;align-items:center;font-size:.875rem}.check-placeholder{margin-left:.5rem}.checkbox{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);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(--disabled-background);border-color:var(--disabled-background);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;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{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-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{color:var(--grey-700);margin-right:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.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(--disabled-background);color:var(--disabled-color)}.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:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.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)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] });
|
|
114
114
|
}
|
|
115
115
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicCheckboxComponent, decorators: [{
|
|
116
116
|
type: Component,
|
|
@@ -120,7 +120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
120
120
|
useExisting: forwardRef(() => UicCheckboxComponent),
|
|
121
121
|
multi: true
|
|
122
122
|
}
|
|
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 }\r\n <div [class.check-form-container]=\"!noPadding\">\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 [class.placeholder-space]=\"placeholder!=''\"\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 @if (placeholder) {\r\n <span class=\"check-placeholder\">{{placeholder}}</span>\r\n }\r\n \r\n <ng-content></ng-content> \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:calc(4 * var(--form-ref));display:flex;align-items:center}.check-wrapper{padding:2px;cursor:pointer;display:flex;align-items:center;font-size:.875rem}.check-placeholder{margin-left:.5rem}.checkbox{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);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(--disabled-background);border-color:var(--disabled-background);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;
|
|
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 }\r\n <div [class.check-form-container]=\"!noPadding\">\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 [class.placeholder-space]=\"placeholder!=''\"\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 @if (placeholder) {\r\n <span class=\"check-placeholder\">{{placeholder}}</span>\r\n }\r\n \r\n <ng-content></ng-content> \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:calc(4 * var(--form-ref));display:flex;align-items:center}.check-wrapper{padding:2px;cursor:pointer;display:flex;align-items:center;font-size:.875rem}.check-placeholder{margin-left:.5rem}.checkbox{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);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(--disabled-background);border-color:var(--disabled-background);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;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{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-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{color:var(--grey-700);margin-right:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.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(--disabled-background);color:var(--disabled-color)}.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:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.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)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
124
124
|
}], propDecorators: { icon: [{
|
|
125
125
|
type: Input
|
|
126
126
|
}], iconColor: [{
|
|
@@ -154,11 +154,11 @@ class UicSwichComponent {
|
|
|
154
154
|
this.checkedChange.emit(this.checked);
|
|
155
155
|
}
|
|
156
156
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSwichComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
157
|
-
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(--disabled-color)}.toggle{position:relative;width:calc(var(--design-size-ref) * 4.4);height:calc(var(--design-size-ref) * 2.2);border:none;border-radius:calc(var(--design-size-ref) * 2.2);background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--disabled-background);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(calc(var(--design-size-ref) * 4.4 - var(--design-size-ref) * 2.2))}.toggle .thumb{width:calc(var(--design-size-ref) * 2.2 - 4px);height:calc(var(--design-size-ref) * 2.2 - 4px);background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;
|
|
157
|
+
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(--disabled-color)}.toggle{position:relative;width:calc(var(--design-size-ref) * 4.4);height:calc(var(--design-size-ref) * 2.2);border:none;border-radius:calc(var(--design-size-ref) * 2.2);background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--disabled-background);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(calc(var(--design-size-ref) * 4.4 - var(--design-size-ref) * 2.2))}.toggle .thumb{width:calc(var(--design-size-ref) * 2.2 - 4px);height:calc(var(--design-size-ref) * 2.2 - 4px);background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;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{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-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{color:var(--grey-700);margin-right:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.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(--disabled-background);color:var(--disabled-color)}.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:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.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)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] });
|
|
158
158
|
}
|
|
159
159
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSwichComponent, decorators: [{
|
|
160
160
|
type: Component,
|
|
161
|
-
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(--disabled-color)}.toggle{position:relative;width:calc(var(--design-size-ref) * 4.4);height:calc(var(--design-size-ref) * 2.2);border:none;border-radius:calc(var(--design-size-ref) * 2.2);background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--disabled-background);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(calc(var(--design-size-ref) * 4.4 - var(--design-size-ref) * 2.2))}.toggle .thumb{width:calc(var(--design-size-ref) * 2.2 - 4px);height:calc(var(--design-size-ref) * 2.2 - 4px);background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;
|
|
161
|
+
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(--disabled-color)}.toggle{position:relative;width:calc(var(--design-size-ref) * 4.4);height:calc(var(--design-size-ref) * 2.2);border:none;border-radius:calc(var(--design-size-ref) * 2.2);background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--disabled-background);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(calc(var(--design-size-ref) * 4.4 - var(--design-size-ref) * 2.2))}.toggle .thumb{width:calc(var(--design-size-ref) * 2.2 - 4px);height:calc(var(--design-size-ref) * 2.2 - 4px);background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;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{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-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{color:var(--grey-700);margin-right:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.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(--disabled-background);color:var(--disabled-color)}.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:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.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)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
162
162
|
}], propDecorators: { checked: [{
|
|
163
163
|
type: Input
|
|
164
164
|
}], checkedChange: [{
|
|
@@ -171,10 +171,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
171
171
|
type: Input
|
|
172
172
|
}] } });
|
|
173
173
|
|
|
174
|
-
const base$
|
|
175
|
-
class UicSelectComponent extends base$
|
|
174
|
+
const base$7 = createValueAccessor();
|
|
175
|
+
class UicSelectComponent extends base$7 {
|
|
176
176
|
icon = ''; // Icono externo
|
|
177
|
-
iconColor = '
|
|
177
|
+
iconColor = 'black';
|
|
178
178
|
internalIcon = ''; //Icono interno
|
|
179
179
|
size = 'm'; // tamaño general del input
|
|
180
180
|
// TEXT
|
|
@@ -251,7 +251,7 @@ class UicSelectComponent extends base$5 {
|
|
|
251
251
|
useExisting: forwardRef(() => UicSelectComponent),
|
|
252
252
|
multi: true
|
|
253
253
|
}
|
|
254
|
-
], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: 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, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon
|
|
254
|
+
], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: 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, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled && !selectedOption?.text\" >{{(selectedOption?.text || emptyText)}}</div>\r\n @if (!disabled && !loading) {\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;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{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-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{color:var(--grey-700);margin-right:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.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(--disabled-background);color:var(--disabled-color)}.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:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.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)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\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"] }] });
|
|
255
255
|
}
|
|
256
256
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSelectComponent, decorators: [{
|
|
257
257
|
type: Component,
|
|
@@ -261,7 +261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
261
261
|
useExisting: forwardRef(() => UicSelectComponent),
|
|
262
262
|
multi: true
|
|
263
263
|
}
|
|
264
|
-
], 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, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon
|
|
264
|
+
], 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, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled && !selectedOption?.text\" >{{(selectedOption?.text || emptyText)}}</div>\r\n @if (!disabled && !loading) {\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;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{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-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{color:var(--grey-700);margin-right:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.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(--disabled-background);color:var(--disabled-color)}.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:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.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)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
265
265
|
}], propDecorators: { icon: [{
|
|
266
266
|
type: Input
|
|
267
267
|
}], iconColor: [{
|
|
@@ -313,11 +313,11 @@ class UicInputComponent {
|
|
|
313
313
|
}, 200);
|
|
314
314
|
}
|
|
315
315
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
316
|
-
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", loading: "loading" }, 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
|
|
316
|
+
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", loading: "loading" }, 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 {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"input-container\" >\r\n <ng-content class=\"myinput\"></ng-content>\r\n </div> \r\n </div>\r\n <span class=\"char-counter\">\r\n <ng-content select=\"[counter]\"></ng-content>\r\n </span>\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;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{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-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{color:var(--grey-700);margin-right:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.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(--disabled-background);color:var(--disabled-color)}.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:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.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)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
317
317
|
}
|
|
318
318
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicInputComponent, decorators: [{
|
|
319
319
|
type: Component,
|
|
320
|
-
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
|
|
320
|
+
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 {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"input-container\" >\r\n <ng-content class=\"myinput\"></ng-content>\r\n </div> \r\n </div>\r\n <span class=\"char-counter\">\r\n <ng-content select=\"[counter]\"></ng-content>\r\n </span>\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;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{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-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{color:var(--grey-700);margin-right:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.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(--disabled-background);color:var(--disabled-color)}.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:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.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)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
321
321
|
}], propDecorators: { icon: [{
|
|
322
322
|
type: Input
|
|
323
323
|
}], iconColor: [{
|
|
@@ -340,8 +340,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
340
340
|
type: Output
|
|
341
341
|
}] } });
|
|
342
342
|
|
|
343
|
-
const base$
|
|
344
|
-
class UicSliderComponent extends base$
|
|
343
|
+
const base$6 = createValueAccessor();
|
|
344
|
+
class UicSliderComponent extends base$6 {
|
|
345
345
|
icon = ''; // Icono externo
|
|
346
346
|
iconColor = 'black';
|
|
347
347
|
label = '';
|
|
@@ -400,7 +400,7 @@ class UicSliderComponent extends base$4 {
|
|
|
400
400
|
useExisting: forwardRef(() => UicSliderComponent),
|
|
401
401
|
multi: true
|
|
402
402
|
}
|
|
403
|
-
], 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 }\r\n <div class=\"slider-wrapper\">\r\n <div class=\"slider\" #track\r\n (click)=\"updateFromClientX($event.clientX, track)\">\r\n <!-- barra -->\r\n <div class=\"slider-track\"></div>\r\n <div class=\"slider-filled\" [style.width.%]=\"percent\" [class.disabled-bar]=\"disabled\"></div>\r\n \r\n <!-- thumb -->\r\n <div class=\"slider-thumb\"\r\n [style.left.%]=\"percent\"\r\n [class.disabled-thumb]=\"disabled\"\r\n (mousedown)=\"onMouseDown($event, track)\"\r\n #thumb>\r\n <div class=\"slider-thumb-legend\" [class.disabled-legend]=\"disabled\">{{value}}</div>\r\n </div>\r\n \r\n <!-- markers -->\r\n <div class=\"slider-markers\">\r\n @for(m of markers; track $index){\r\n <div class=\"marker\" \r\n [style.left.%]=\"((m - min) / (max - min)) * 100\">\r\n {{ m }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\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>\r\n", styles: [".slider-wrapper{width:100%;padding:0 8px 10px;height:calc(4 * var(--form-ref));display:flex;align-items:center}.slider{position:relative;width:100%;height:16px;-webkit-user-select:none;user-select:none}.slider-track{position:absolute;top:50%;left:0;width:100%;height:4px;background:#ccc;transform:translateY(-50%);border-radius:2px}.slider-filled{position:absolute;top:50%;left:0;height:4px;background:var(--primary-500);transform:translateY(-50%);border-radius:2px}.slider-thumb{position:absolute;top:50%;padding:0;margin:0;width:16px;height:16px;background:var(--white);border:4px solid var(--primary-500);border-radius:50%;transform:translate(-50%,-50%);transition:transform .1s ease;cursor:pointer}.slider-thumb:hover{box-shadow:0 0 0 3px var(--secondary-alpha);transform:translate(-50%,-50%) scale(1.2)}.slider-thumb:focus,.slider-thumb:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.slider-thumb-legend{background-color:var(--white);box-shadow:0 4px 12px #0003;border:solid 1px var(--primary-400);position:absolute;bottom:16px;font-size:.75rem;line-height:.75rem;padding:2px 4px;left:50%;border-radius:2px;transform:translate(-50%,25%);white-space:nowrap}.slider-markers{position:absolute;top:100%;width:100%;font-size:12px}.marker{position:absolute;transform:translate(-50%)}.disabled-thumb{border-color:var(--grey-300);box-shadow:none}.disabled-thumb:hover{box-shadow:none;cursor:not-allowed;transform:translate(-50%,-50%)}.disabled-legend{box-shadow:none;border-color:var(--grey-300);background-color:var(--grey-100)}.disabled-bar{background-color:var(--grey-500)}\n", ":host{width:100%}.input-container{flex:1 1;
|
|
403
|
+
], 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 }\r\n <div class=\"slider-wrapper\">\r\n <div class=\"slider\" #track\r\n (click)=\"updateFromClientX($event.clientX, track)\">\r\n <!-- barra -->\r\n <div class=\"slider-track\"></div>\r\n <div class=\"slider-filled\" [style.width.%]=\"percent\" [class.disabled-bar]=\"disabled\"></div>\r\n \r\n <!-- thumb -->\r\n <div class=\"slider-thumb\"\r\n [style.left.%]=\"percent\"\r\n [class.disabled-thumb]=\"disabled\"\r\n (mousedown)=\"onMouseDown($event, track)\"\r\n #thumb>\r\n <div class=\"slider-thumb-legend\" [class.disabled-legend]=\"disabled\">{{value}}</div>\r\n </div>\r\n \r\n <!-- markers -->\r\n <div class=\"slider-markers\">\r\n @for(m of markers; track $index){\r\n <div class=\"marker\" \r\n [style.left.%]=\"((m - min) / (max - min)) * 100\">\r\n {{ m }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\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>\r\n", styles: [".slider-wrapper{width:100%;padding:0 8px 10px;height:calc(4 * var(--form-ref));display:flex;align-items:center}.slider{position:relative;width:100%;height:16px;-webkit-user-select:none;user-select:none}.slider-track{position:absolute;top:50%;left:0;width:100%;height:4px;background:#ccc;transform:translateY(-50%);border-radius:2px}.slider-filled{position:absolute;top:50%;left:0;height:4px;background:var(--primary-500);transform:translateY(-50%);border-radius:2px}.slider-thumb{position:absolute;top:50%;padding:0;margin:0;width:16px;height:16px;background:var(--white);border:4px solid var(--primary-500);border-radius:50%;transform:translate(-50%,-50%);transition:transform .1s ease;cursor:pointer}.slider-thumb:hover{box-shadow:0 0 0 3px var(--secondary-alpha);transform:translate(-50%,-50%) scale(1.2)}.slider-thumb:focus,.slider-thumb:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.slider-thumb-legend{background-color:var(--white);box-shadow:0 4px 12px #0003;border:solid 1px var(--primary-400);position:absolute;bottom:16px;font-size:.75rem;line-height:.75rem;padding:2px 4px;left:50%;border-radius:2px;transform:translate(-50%,25%);white-space:nowrap}.slider-markers{position:absolute;top:100%;width:100%;font-size:12px}.marker{position:absolute;transform:translate(-50%)}.disabled-thumb{border-color:var(--grey-300);box-shadow:none}.disabled-thumb:hover{box-shadow:none;cursor:not-allowed;transform:translate(-50%,-50%)}.disabled-legend{box-shadow:none;border-color:var(--grey-300);background-color:var(--grey-100)}.disabled-bar{background-color:var(--grey-500)}\n", ":host{width:100%}.input-container{flex:1 1;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{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-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{color:var(--grey-700);margin-right:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.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(--disabled-background);color:var(--disabled-color)}.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:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.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)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] });
|
|
404
404
|
}
|
|
405
405
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSliderComponent, decorators: [{
|
|
406
406
|
type: Component,
|
|
@@ -410,7 +410,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
410
410
|
useExisting: forwardRef(() => UicSliderComponent),
|
|
411
411
|
multi: true
|
|
412
412
|
}
|
|
413
|
-
], 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 }\r\n <div class=\"slider-wrapper\">\r\n <div class=\"slider\" #track\r\n (click)=\"updateFromClientX($event.clientX, track)\">\r\n <!-- barra -->\r\n <div class=\"slider-track\"></div>\r\n <div class=\"slider-filled\" [style.width.%]=\"percent\" [class.disabled-bar]=\"disabled\"></div>\r\n \r\n <!-- thumb -->\r\n <div class=\"slider-thumb\"\r\n [style.left.%]=\"percent\"\r\n [class.disabled-thumb]=\"disabled\"\r\n (mousedown)=\"onMouseDown($event, track)\"\r\n #thumb>\r\n <div class=\"slider-thumb-legend\" [class.disabled-legend]=\"disabled\">{{value}}</div>\r\n </div>\r\n \r\n <!-- markers -->\r\n <div class=\"slider-markers\">\r\n @for(m of markers; track $index){\r\n <div class=\"marker\" \r\n [style.left.%]=\"((m - min) / (max - min)) * 100\">\r\n {{ m }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\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>\r\n", styles: [".slider-wrapper{width:100%;padding:0 8px 10px;height:calc(4 * var(--form-ref));display:flex;align-items:center}.slider{position:relative;width:100%;height:16px;-webkit-user-select:none;user-select:none}.slider-track{position:absolute;top:50%;left:0;width:100%;height:4px;background:#ccc;transform:translateY(-50%);border-radius:2px}.slider-filled{position:absolute;top:50%;left:0;height:4px;background:var(--primary-500);transform:translateY(-50%);border-radius:2px}.slider-thumb{position:absolute;top:50%;padding:0;margin:0;width:16px;height:16px;background:var(--white);border:4px solid var(--primary-500);border-radius:50%;transform:translate(-50%,-50%);transition:transform .1s ease;cursor:pointer}.slider-thumb:hover{box-shadow:0 0 0 3px var(--secondary-alpha);transform:translate(-50%,-50%) scale(1.2)}.slider-thumb:focus,.slider-thumb:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.slider-thumb-legend{background-color:var(--white);box-shadow:0 4px 12px #0003;border:solid 1px var(--primary-400);position:absolute;bottom:16px;font-size:.75rem;line-height:.75rem;padding:2px 4px;left:50%;border-radius:2px;transform:translate(-50%,25%);white-space:nowrap}.slider-markers{position:absolute;top:100%;width:100%;font-size:12px}.marker{position:absolute;transform:translate(-50%)}.disabled-thumb{border-color:var(--grey-300);box-shadow:none}.disabled-thumb:hover{box-shadow:none;cursor:not-allowed;transform:translate(-50%,-50%)}.disabled-legend{box-shadow:none;border-color:var(--grey-300);background-color:var(--grey-100)}.disabled-bar{background-color:var(--grey-500)}\n", ":host{width:100%}.input-container{flex:1 1;
|
|
413
|
+
], 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 }\r\n <div class=\"slider-wrapper\">\r\n <div class=\"slider\" #track\r\n (click)=\"updateFromClientX($event.clientX, track)\">\r\n <!-- barra -->\r\n <div class=\"slider-track\"></div>\r\n <div class=\"slider-filled\" [style.width.%]=\"percent\" [class.disabled-bar]=\"disabled\"></div>\r\n \r\n <!-- thumb -->\r\n <div class=\"slider-thumb\"\r\n [style.left.%]=\"percent\"\r\n [class.disabled-thumb]=\"disabled\"\r\n (mousedown)=\"onMouseDown($event, track)\"\r\n #thumb>\r\n <div class=\"slider-thumb-legend\" [class.disabled-legend]=\"disabled\">{{value}}</div>\r\n </div>\r\n \r\n <!-- markers -->\r\n <div class=\"slider-markers\">\r\n @for(m of markers; track $index){\r\n <div class=\"marker\" \r\n [style.left.%]=\"((m - min) / (max - min)) * 100\">\r\n {{ m }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\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>\r\n", styles: [".slider-wrapper{width:100%;padding:0 8px 10px;height:calc(4 * var(--form-ref));display:flex;align-items:center}.slider{position:relative;width:100%;height:16px;-webkit-user-select:none;user-select:none}.slider-track{position:absolute;top:50%;left:0;width:100%;height:4px;background:#ccc;transform:translateY(-50%);border-radius:2px}.slider-filled{position:absolute;top:50%;left:0;height:4px;background:var(--primary-500);transform:translateY(-50%);border-radius:2px}.slider-thumb{position:absolute;top:50%;padding:0;margin:0;width:16px;height:16px;background:var(--white);border:4px solid var(--primary-500);border-radius:50%;transform:translate(-50%,-50%);transition:transform .1s ease;cursor:pointer}.slider-thumb:hover{box-shadow:0 0 0 3px var(--secondary-alpha);transform:translate(-50%,-50%) scale(1.2)}.slider-thumb:focus,.slider-thumb:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.slider-thumb-legend{background-color:var(--white);box-shadow:0 4px 12px #0003;border:solid 1px var(--primary-400);position:absolute;bottom:16px;font-size:.75rem;line-height:.75rem;padding:2px 4px;left:50%;border-radius:2px;transform:translate(-50%,25%);white-space:nowrap}.slider-markers{position:absolute;top:100%;width:100%;font-size:12px}.marker{position:absolute;transform:translate(-50%)}.disabled-thumb{border-color:var(--grey-300);box-shadow:none}.disabled-thumb:hover{box-shadow:none;cursor:not-allowed;transform:translate(-50%,-50%)}.disabled-legend{box-shadow:none;border-color:var(--grey-300);background-color:var(--grey-100)}.disabled-bar{background-color:var(--grey-500)}\n", ":host{width:100%}.input-container{flex:1 1;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{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-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{color:var(--grey-700);margin-right:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.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(--disabled-background);color:var(--disabled-color)}.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:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.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)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
414
414
|
}], propDecorators: { icon: [{
|
|
415
415
|
type: Input
|
|
416
416
|
}], iconColor: [{
|
|
@@ -441,8 +441,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
441
441
|
args: ['document:mouseup']
|
|
442
442
|
}] } });
|
|
443
443
|
|
|
444
|
-
const base$
|
|
445
|
-
class UicDatePickerComponent extends base$
|
|
444
|
+
const base$5 = createValueAccessor();
|
|
445
|
+
class UicDatePickerComponent extends base$5 {
|
|
446
446
|
icon = ''; // Icono externo
|
|
447
447
|
iconColor = 'black';
|
|
448
448
|
internalIcon = ''; //Icono interno
|
|
@@ -454,6 +454,8 @@ class UicDatePickerComponent extends base$3 {
|
|
|
454
454
|
// FUNCTIONS
|
|
455
455
|
max = '';
|
|
456
456
|
min = '';
|
|
457
|
+
justMonth = false;
|
|
458
|
+
monthDay = 'first';
|
|
457
459
|
calendarTemplate;
|
|
458
460
|
overlayRef;
|
|
459
461
|
// Fijos
|
|
@@ -470,6 +472,10 @@ class UicDatePickerComponent extends base$3 {
|
|
|
470
472
|
selectedMonth = null;
|
|
471
473
|
monthWeeks = []; // Arreglo de fechas
|
|
472
474
|
decadeRange = [];
|
|
475
|
+
displayValue = '';
|
|
476
|
+
get inputPlaceholder() {
|
|
477
|
+
return this.justMonth ? 'mm/yyyy' : 'dd/mm/yyyy';
|
|
478
|
+
}
|
|
473
479
|
overlay = inject(Overlay);
|
|
474
480
|
vcr = inject(ViewContainerRef);
|
|
475
481
|
host = inject((ElementRef));
|
|
@@ -477,7 +483,7 @@ class UicDatePickerComponent extends base$3 {
|
|
|
477
483
|
this.monthWeeks = this.getWeeks();
|
|
478
484
|
this.minDate = this.parseDateLimits(this.min);
|
|
479
485
|
this.maxDate = this.parseDateLimits(this.max);
|
|
480
|
-
this.
|
|
486
|
+
this.applyValue(this.value);
|
|
481
487
|
}
|
|
482
488
|
// --- Overlay ---
|
|
483
489
|
overlayPositions = [
|
|
@@ -504,7 +510,10 @@ class UicDatePickerComponent extends base$3 {
|
|
|
504
510
|
const portal = new TemplatePortal(this.calendarTemplate, this.vcr);
|
|
505
511
|
this.overlayRef.attach(portal);
|
|
506
512
|
this.overlayRef.backdropClick().subscribe(() => this.closeCalendar());
|
|
507
|
-
this.view = 'days';
|
|
513
|
+
this.view = this.justMonth ? 'months' : 'days';
|
|
514
|
+
if (this.justMonth) {
|
|
515
|
+
this.decadeRange = this.getDecadeRange();
|
|
516
|
+
}
|
|
508
517
|
}
|
|
509
518
|
closeCalendar() {
|
|
510
519
|
if (this.overlayRef) {
|
|
@@ -582,7 +591,9 @@ class UicDatePickerComponent extends base$3 {
|
|
|
582
591
|
// --- Cambio de vistas ---
|
|
583
592
|
changeView() {
|
|
584
593
|
if (this.view === 'days') {
|
|
585
|
-
this.
|
|
594
|
+
if (!this.justMonth) {
|
|
595
|
+
this.view = 'months';
|
|
596
|
+
}
|
|
586
597
|
}
|
|
587
598
|
else if (this.view === 'months') {
|
|
588
599
|
this.view = 'years';
|
|
@@ -595,14 +606,34 @@ class UicDatePickerComponent extends base$3 {
|
|
|
595
606
|
this.view = 'months';
|
|
596
607
|
}
|
|
597
608
|
selectMonth(monthIndex) {
|
|
609
|
+
if (this.justMonth) {
|
|
610
|
+
const monthDate = this.buildMonthDate(this.selectedYear, monthIndex);
|
|
611
|
+
if (!this.isWithinLimits(monthDate)) {
|
|
612
|
+
return;
|
|
613
|
+
}
|
|
614
|
+
this.selectedDate = new Date(this.selectedYear, monthIndex, 1);
|
|
615
|
+
this.value = this.toIsoString(monthDate);
|
|
616
|
+
this.displayValue = this.formatDisplay(monthDate);
|
|
617
|
+
this.paintedDate = monthDate;
|
|
618
|
+
this.setCurrentViewDate(monthDate);
|
|
619
|
+
this.notifyChange(this.value);
|
|
620
|
+
this.closeCalendar();
|
|
621
|
+
return;
|
|
622
|
+
}
|
|
598
623
|
this.selectedDate = new Date(this.selectedYear, monthIndex, 1);
|
|
599
624
|
this.monthWeeks = this.getWeeks();
|
|
600
625
|
this.view = 'days';
|
|
601
626
|
}
|
|
602
627
|
selectDate(date) {
|
|
603
|
-
|
|
628
|
+
if (this.justMonth) {
|
|
629
|
+
return;
|
|
630
|
+
}
|
|
631
|
+
const normalized = this.normalizeDate(date);
|
|
632
|
+
this.value = this.toIsoString(normalized);
|
|
633
|
+
this.displayValue = this.formatDisplay(normalized);
|
|
604
634
|
this.notifyChange(this.value);
|
|
605
|
-
this.paintedDate =
|
|
635
|
+
this.paintedDate = normalized;
|
|
636
|
+
this.setCurrentViewDate(normalized);
|
|
606
637
|
this.closeCalendar();
|
|
607
638
|
}
|
|
608
639
|
isToday(day) {
|
|
@@ -639,7 +670,7 @@ class UicDatePickerComponent extends base$3 {
|
|
|
639
670
|
return null;
|
|
640
671
|
}
|
|
641
672
|
else {
|
|
642
|
-
return parsed;
|
|
673
|
+
return this.normalizeDate(parsed);
|
|
643
674
|
}
|
|
644
675
|
}
|
|
645
676
|
else {
|
|
@@ -647,36 +678,177 @@ class UicDatePickerComponent extends base$3 {
|
|
|
647
678
|
}
|
|
648
679
|
}
|
|
649
680
|
cleanInput() {
|
|
650
|
-
this.
|
|
651
|
-
this.notifyChange(this.value);
|
|
652
|
-
this.paintedDate = null;
|
|
681
|
+
this.clearValue(true);
|
|
653
682
|
this.closeCalendar();
|
|
654
683
|
}
|
|
655
684
|
pickToday() {
|
|
656
|
-
|
|
657
|
-
this.
|
|
685
|
+
const today = this.normalizeDate(new Date());
|
|
686
|
+
const target = this.justMonth ? this.buildMonthDate(today.getFullYear(), today.getMonth()) : today;
|
|
687
|
+
this.value = this.toIsoString(target);
|
|
688
|
+
this.displayValue = this.formatDisplay(target);
|
|
658
689
|
this.notifyChange(this.value);
|
|
659
|
-
this.paintedDate =
|
|
690
|
+
this.paintedDate = target;
|
|
691
|
+
this.setCurrentViewDate(target);
|
|
660
692
|
this.closeCalendar();
|
|
661
693
|
}
|
|
694
|
+
onInputChange(event) {
|
|
695
|
+
this.displayValue = event.target.value;
|
|
696
|
+
}
|
|
697
|
+
onInputBlur() {
|
|
698
|
+
this.onTouched();
|
|
699
|
+
const trimmed = this.displayValue.trim();
|
|
700
|
+
if (!trimmed) {
|
|
701
|
+
this.clearValue(true);
|
|
702
|
+
return;
|
|
703
|
+
}
|
|
704
|
+
const parsed = this.parseDisplay(trimmed);
|
|
705
|
+
if (!parsed || !this.isWithinLimits(parsed)) {
|
|
706
|
+
this.clearValue(true);
|
|
707
|
+
return;
|
|
708
|
+
}
|
|
709
|
+
const normalized = this.normalizeDate(parsed);
|
|
710
|
+
this.displayValue = this.formatDisplay(normalized);
|
|
711
|
+
this.value = this.toIsoString(normalized);
|
|
712
|
+
this.paintedDate = normalized;
|
|
713
|
+
this.setCurrentViewDate(normalized);
|
|
714
|
+
this.notifyChange(this.value);
|
|
715
|
+
}
|
|
716
|
+
onInputKeydown(event) {
|
|
717
|
+
if (event.key === 'Enter') {
|
|
718
|
+
event.target.blur();
|
|
719
|
+
}
|
|
720
|
+
}
|
|
721
|
+
writeValue(value) {
|
|
722
|
+
super.writeValue(value);
|
|
723
|
+
this.applyValue(value);
|
|
724
|
+
}
|
|
725
|
+
applyValue(value) {
|
|
726
|
+
const parsed = this.parseDateLimits(value ?? '');
|
|
727
|
+
if (parsed) {
|
|
728
|
+
const effective = this.justMonth
|
|
729
|
+
? this.buildMonthDate(parsed.getFullYear(), parsed.getMonth())
|
|
730
|
+
: parsed;
|
|
731
|
+
if (this.justMonth && value) {
|
|
732
|
+
this.value = this.toIsoString(effective);
|
|
733
|
+
}
|
|
734
|
+
this.displayValue = this.formatDisplay(effective);
|
|
735
|
+
this.paintedDate = effective;
|
|
736
|
+
this.setCurrentViewDate(effective);
|
|
737
|
+
}
|
|
738
|
+
else {
|
|
739
|
+
this.clearValue(false, false);
|
|
740
|
+
}
|
|
741
|
+
}
|
|
742
|
+
clearValue(emit = false, resetValue = true) {
|
|
743
|
+
this.displayValue = '';
|
|
744
|
+
this.paintedDate = null;
|
|
745
|
+
if (resetValue) {
|
|
746
|
+
this.value = '';
|
|
747
|
+
}
|
|
748
|
+
if (emit) {
|
|
749
|
+
this.notifyChange(this.value);
|
|
750
|
+
}
|
|
751
|
+
}
|
|
752
|
+
setCurrentViewDate(date) {
|
|
753
|
+
this.selectedYear = date.getFullYear();
|
|
754
|
+
this.selectedDate = new Date(date.getFullYear(), date.getMonth(), 1);
|
|
755
|
+
this.monthWeeks = this.getWeeks();
|
|
756
|
+
this.decadeRange = this.getDecadeRange();
|
|
757
|
+
}
|
|
758
|
+
formatDisplay(date) {
|
|
759
|
+
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
760
|
+
const year = date.getFullYear();
|
|
761
|
+
if (this.justMonth) {
|
|
762
|
+
return `${month}/${year}`;
|
|
763
|
+
}
|
|
764
|
+
const day = String(date.getDate()).padStart(2, '0');
|
|
765
|
+
return `${day}/${month}/${year}`;
|
|
766
|
+
}
|
|
767
|
+
parseDisplay(text) {
|
|
768
|
+
const normalized = text.trim();
|
|
769
|
+
if (this.justMonth) {
|
|
770
|
+
const matchMonth = normalized.match(/^(\d{1,2})[\/\-.](\d{4})$/);
|
|
771
|
+
if (!matchMonth) {
|
|
772
|
+
return null;
|
|
773
|
+
}
|
|
774
|
+
const month = parseInt(matchMonth[1], 10);
|
|
775
|
+
const year = parseInt(matchMonth[2], 10);
|
|
776
|
+
if (month < 1 || month > 12)
|
|
777
|
+
return null;
|
|
778
|
+
return this.buildMonthDate(year, month - 1);
|
|
779
|
+
}
|
|
780
|
+
const match = normalized.match(/^(\d{1,2})[\/\-.](\d{1,2})[\/\-.](\d{4})$/);
|
|
781
|
+
if (!match) {
|
|
782
|
+
return null;
|
|
783
|
+
}
|
|
784
|
+
const day = parseInt(match[1], 10);
|
|
785
|
+
const month = parseInt(match[2], 10);
|
|
786
|
+
const year = parseInt(match[3], 10);
|
|
787
|
+
if (month < 1 || month > 12)
|
|
788
|
+
return null;
|
|
789
|
+
if (day < 1 || day > 31)
|
|
790
|
+
return null;
|
|
791
|
+
const candidate = new Date(year, month - 1, day);
|
|
792
|
+
if (candidate.getFullYear() !== year ||
|
|
793
|
+
candidate.getMonth() !== month - 1 ||
|
|
794
|
+
candidate.getDate() !== day) {
|
|
795
|
+
return null;
|
|
796
|
+
}
|
|
797
|
+
return candidate;
|
|
798
|
+
}
|
|
799
|
+
isWithinLimits(date) {
|
|
800
|
+
if (this.minDate && date < this.minDate) {
|
|
801
|
+
return false;
|
|
802
|
+
}
|
|
803
|
+
if (this.maxDate && date > this.maxDate) {
|
|
804
|
+
return false;
|
|
805
|
+
}
|
|
806
|
+
return true;
|
|
807
|
+
}
|
|
808
|
+
normalizeDate(date) {
|
|
809
|
+
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
|
810
|
+
}
|
|
811
|
+
toIsoString(date) {
|
|
812
|
+
return date.toISOString().split('T')[0];
|
|
813
|
+
}
|
|
814
|
+
buildMonthDate(year, monthIndex) {
|
|
815
|
+
const day = this.monthDay === 'last'
|
|
816
|
+
? new Date(year, monthIndex + 1, 0).getDate()
|
|
817
|
+
: 1;
|
|
818
|
+
return this.normalizeDate(new Date(year, monthIndex, day));
|
|
819
|
+
}
|
|
820
|
+
isMonthDisabled(monthIndex) {
|
|
821
|
+
if (!this.justMonth) {
|
|
822
|
+
return false;
|
|
823
|
+
}
|
|
824
|
+
const candidate = this.buildMonthDate(this.selectedYear, monthIndex);
|
|
825
|
+
return !this.isWithinLimits(candidate);
|
|
826
|
+
}
|
|
827
|
+
isSelectedMonth(monthIndex) {
|
|
828
|
+
if (!this.paintedDate) {
|
|
829
|
+
return false;
|
|
830
|
+
}
|
|
831
|
+
return (this.paintedDate.getFullYear() === this.selectedYear &&
|
|
832
|
+
this.paintedDate.getMonth() === monthIndex);
|
|
833
|
+
}
|
|
662
834
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDatePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
663
|
-
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", disabled: "disabled", label: "label", error: "error", tip: "tip", max: "max", min: "min" }, providers: [
|
|
835
|
+
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", disabled: "disabled", label: "label", error: "error", tip: "tip", max: "max", min: "min", justMonth: "justMonth", monthDay: "monthDay" }, providers: [
|
|
664
836
|
{
|
|
665
837
|
provide: NG_VALUE_ACCESSOR,
|
|
666
838
|
useExisting: forwardRef(() => UicDatePickerComponent),
|
|
667
839
|
multi: true
|
|
668
840
|
}
|
|
669
|
-
], 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 ><</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 >></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 <!-- 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>\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(--disabled-color)}.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{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-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)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));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}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.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(--disabled-background);color:var(--disabled-color)}.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(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.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(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\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"] }] });
|
|
841
|
+
], 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\n type=\"text\"\n [disabled]=\"disabled\"\n [placeholder]=\"inputPlaceholder\"\n [value]=\"displayValue\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onInputKeydown($event)\"\n (click)=\"openCalendar()\"\n />\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 ><</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 >></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\n class=\"day\"\n [class.today]=\"isThisMonth(m)\"\n [class.day-selected]=\"isSelectedMonth(i)\"\n [disabled]=\"isMonthDisabled(i)\"\n (click)=\"selectMonth(i)\"\n >\n {{ m }}\n </button>\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 <!-- 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>\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(--disabled-color)}.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;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{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-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{color:var(--grey-700);margin-right:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.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(--disabled-background);color:var(--disabled-color)}.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:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.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)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\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"] }] });
|
|
670
842
|
}
|
|
671
843
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDatePickerComponent, decorators: [{
|
|
672
844
|
type: Component,
|
|
673
|
-
args: [{ selector: 'ui-date-picker', imports: [
|
|
845
|
+
args: [{ selector: 'ui-date-picker', imports: [CommonModule, UicButtonComponent], providers: [
|
|
674
846
|
{
|
|
675
847
|
provide: NG_VALUE_ACCESSOR,
|
|
676
848
|
useExisting: forwardRef(() => UicDatePickerComponent),
|
|
677
849
|
multi: true
|
|
678
850
|
}
|
|
679
|
-
], 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 ><</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 >></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 <!-- 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>\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(--disabled-color)}.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{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-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)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));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}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.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(--disabled-background);color:var(--disabled-color)}.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(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.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(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
851
|
+
], 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\n type=\"text\"\n [disabled]=\"disabled\"\n [placeholder]=\"inputPlaceholder\"\n [value]=\"displayValue\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onInputKeydown($event)\"\n (click)=\"openCalendar()\"\n />\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 ><</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 >></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\n class=\"day\"\n [class.today]=\"isThisMonth(m)\"\n [class.day-selected]=\"isSelectedMonth(i)\"\n [disabled]=\"isMonthDisabled(i)\"\n (click)=\"selectMonth(i)\"\n >\n {{ m }}\n </button>\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 <!-- 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>\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(--disabled-color)}.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;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{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-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{color:var(--grey-700);margin-right:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.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(--disabled-background);color:var(--disabled-color)}.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:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.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)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
680
852
|
}], propDecorators: { icon: [{
|
|
681
853
|
type: Input
|
|
682
854
|
}], iconColor: [{
|
|
@@ -695,13 +867,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
695
867
|
type: Input
|
|
696
868
|
}], min: [{
|
|
697
869
|
type: Input
|
|
870
|
+
}], justMonth: [{
|
|
871
|
+
type: Input
|
|
872
|
+
}], monthDay: [{
|
|
873
|
+
type: Input
|
|
698
874
|
}], calendarTemplate: [{
|
|
699
875
|
type: ViewChild,
|
|
700
876
|
args: ['calendarTemplate']
|
|
701
877
|
}] } });
|
|
702
878
|
|
|
703
|
-
const base$
|
|
704
|
-
class UicPoolOptionsComponent extends base$
|
|
879
|
+
const base$4 = createValueAccessor();
|
|
880
|
+
class UicPoolOptionsComponent extends base$4 {
|
|
705
881
|
icon = ''; // Icono externo
|
|
706
882
|
iconColor = 'primary'; //color de ícono externo
|
|
707
883
|
size = 'm'; // tamaño general del input
|
|
@@ -738,7 +914,7 @@ class UicPoolOptionsComponent extends base$2 {
|
|
|
738
914
|
useExisting: forwardRef(() => UicPoolOptionsComponent),
|
|
739
915
|
multi: true
|
|
740
916
|
}
|
|
741
|
-
], 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=\"pool-wrapper\" > \r\n @for (opt of options; track opt.id) {\r\n <div (click)=\"updateOptions(opt.id??'')\" class=\"pool-option\" [class.active-opt]=\"selectedSet.has(opt.id??'')\">{{opt.text}}</div>\r\n }\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: [".pool-wrapper{display:flex;gap:var(--design-size-ref);flex-wrap:wrap}.pool-option{border:solid 1px var(--grey-300);color:var(--secondary-400);background-color:var(--secondary-50);font-size:.875rem;line-height:1.25rem;font-weight:400;padding:.5rem 1rem;border-radius:1rem;transition:ease .3s;-webkit-user-select:none;user-select:none}.pool-option:hover{cursor:pointer;border-color:var(--secondary-400)}.active-opt{background-color:var(--secondary-100)}\n", ":host{width:100%}.input-container{flex:1 1;
|
|
917
|
+
], 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=\"pool-wrapper\" > \r\n @for (opt of options; track opt.id) {\r\n <div (click)=\"updateOptions(opt.id??'')\" class=\"pool-option\" [class.active-opt]=\"selectedSet.has(opt.id??'')\">{{opt.text}}</div>\r\n }\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: [".pool-wrapper{display:flex;gap:var(--design-size-ref);flex-wrap:wrap}.pool-option{border:solid 1px var(--grey-300);color:var(--secondary-400);background-color:var(--secondary-50);font-size:.875rem;line-height:1.25rem;font-weight:400;padding:.5rem 1rem;border-radius:1rem;transition:ease .3s;-webkit-user-select:none;user-select:none}.pool-option:hover{cursor:pointer;border-color:var(--secondary-400)}.active-opt{background-color:var(--secondary-100)}\n", ":host{width:100%}.input-container{flex:1 1;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{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-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{color:var(--grey-700);margin-right:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.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(--disabled-background);color:var(--disabled-color)}.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:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.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)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] });
|
|
742
918
|
}
|
|
743
919
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPoolOptionsComponent, decorators: [{
|
|
744
920
|
type: Component,
|
|
@@ -748,7 +924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
748
924
|
useExisting: forwardRef(() => UicPoolOptionsComponent),
|
|
749
925
|
multi: true
|
|
750
926
|
}
|
|
751
|
-
], 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=\"pool-wrapper\" > \r\n @for (opt of options; track opt.id) {\r\n <div (click)=\"updateOptions(opt.id??'')\" class=\"pool-option\" [class.active-opt]=\"selectedSet.has(opt.id??'')\">{{opt.text}}</div>\r\n }\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: [".pool-wrapper{display:flex;gap:var(--design-size-ref);flex-wrap:wrap}.pool-option{border:solid 1px var(--grey-300);color:var(--secondary-400);background-color:var(--secondary-50);font-size:.875rem;line-height:1.25rem;font-weight:400;padding:.5rem 1rem;border-radius:1rem;transition:ease .3s;-webkit-user-select:none;user-select:none}.pool-option:hover{cursor:pointer;border-color:var(--secondary-400)}.active-opt{background-color:var(--secondary-100)}\n", ":host{width:100%}.input-container{flex:1 1;
|
|
927
|
+
], 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=\"pool-wrapper\" > \r\n @for (opt of options; track opt.id) {\r\n <div (click)=\"updateOptions(opt.id??'')\" class=\"pool-option\" [class.active-opt]=\"selectedSet.has(opt.id??'')\">{{opt.text}}</div>\r\n }\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: [".pool-wrapper{display:flex;gap:var(--design-size-ref);flex-wrap:wrap}.pool-option{border:solid 1px var(--grey-300);color:var(--secondary-400);background-color:var(--secondary-50);font-size:.875rem;line-height:1.25rem;font-weight:400;padding:.5rem 1rem;border-radius:1rem;transition:ease .3s;-webkit-user-select:none;user-select:none}.pool-option:hover{cursor:pointer;border-color:var(--secondary-400)}.active-opt{background-color:var(--secondary-100)}\n", ":host{width:100%}.input-container{flex:1 1;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{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-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{color:var(--grey-700);margin-right:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.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(--disabled-background);color:var(--disabled-color)}.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:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.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)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
752
928
|
}], propDecorators: { icon: [{
|
|
753
929
|
type: Input
|
|
754
930
|
}], iconColor: [{
|
|
@@ -771,8 +947,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
771
947
|
type: Input
|
|
772
948
|
}] } });
|
|
773
949
|
|
|
774
|
-
const base$
|
|
775
|
-
class UicSearcherComponent extends base$
|
|
950
|
+
const base$3 = createValueAccessor();
|
|
951
|
+
class UicSearcherComponent extends base$3 {
|
|
776
952
|
icon = ''; // Icono externo
|
|
777
953
|
iconColor = 'primary'; //color de ícono externo
|
|
778
954
|
internalIcon = 'ri-search-2-line'; //Icono interno
|
|
@@ -882,7 +1058,7 @@ class UicSearcherComponent extends base$1 {
|
|
|
882
1058
|
useExisting: forwardRef(() => UicSearcherComponent),
|
|
883
1059
|
multi: true
|
|
884
1060
|
}
|
|
885
|
-
], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: 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 @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 class=\"fakeinput\" #fakeinput \r\n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\" style=\"cursor: pointer;\">\r\n @if (selectedOption == null) { \r\n @if (internalIcon) {\r\n <i class=\"input-internalicon
|
|
1061
|
+
], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: 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 @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 class=\"fakeinput\" #fakeinput \r\n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\" style=\"cursor: pointer;\">\r\n @if (selectedOption == null) { \r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"input-container\" >\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 tip=\"Limpiar\" (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n }\r\n <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-eraser-line\" (click)=\"clearSearch()\"></ui-button>\r\n }@else {\r\n <div class=\"input-container\" >\r\n <div class=\"selected-item\" >\r\n <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn?itemDisplayFn(selectedOption):''\"></div> \r\n <ui-button [iconOnly]=\"true\" (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 <!-- 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 \r\n </div>\r\n</div>\r\n\r\n<ng-template #dropdownTemplate>\r\n @if (results$ | async; as items){\r\n <div class=\"input-options\">\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?!itemIsEnabledFn(item):false\"\r\n (click)=\"selectItem(item)\" \r\n [innerHTML]=\"itemDisplayFn?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: [".selected-item{border-radius:5px;background-color:var(--primary-100);padding-left:10px;height:25px;display:flex;gap:20px;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}\n", ":host{width:100%}.input-container{flex:1 1;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{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-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{color:var(--grey-700);margin-right:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.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(--disabled-background);color:var(--disabled-color)}.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:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.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)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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"] }] });
|
|
886
1062
|
}
|
|
887
1063
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearcherComponent, decorators: [{
|
|
888
1064
|
type: Component,
|
|
@@ -892,7 +1068,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
892
1068
|
useExisting: forwardRef(() => UicSearcherComponent),
|
|
893
1069
|
multi: true
|
|
894
1070
|
}
|
|
895
|
-
], 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 @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 class=\"fakeinput\" #fakeinput \r\n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\" style=\"cursor: pointer;\">\r\n @if (selectedOption == null) { \r\n @if (internalIcon) {\r\n <i class=\"input-internalicon
|
|
1071
|
+
], 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 @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 class=\"fakeinput\" #fakeinput \r\n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\" style=\"cursor: pointer;\">\r\n @if (selectedOption == null) { \r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"input-container\" >\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 tip=\"Limpiar\" (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n }\r\n <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-eraser-line\" (click)=\"clearSearch()\"></ui-button>\r\n }@else {\r\n <div class=\"input-container\" >\r\n <div class=\"selected-item\" >\r\n <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn?itemDisplayFn(selectedOption):''\"></div> \r\n <ui-button [iconOnly]=\"true\" (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 <!-- 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 \r\n </div>\r\n</div>\r\n\r\n<ng-template #dropdownTemplate>\r\n @if (results$ | async; as items){\r\n <div class=\"input-options\">\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?!itemIsEnabledFn(item):false\"\r\n (click)=\"selectItem(item)\" \r\n [innerHTML]=\"itemDisplayFn?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: [".selected-item{border-radius:5px;background-color:var(--primary-100);padding-left:10px;height:25px;display:flex;gap:20px;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}\n", ":host{width:100%}.input-container{flex:1 1;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{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-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{color:var(--grey-700);margin-right:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.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(--disabled-background);color:var(--disabled-color)}.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:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.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)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
896
1072
|
}], propDecorators: { icon: [{
|
|
897
1073
|
type: Input
|
|
898
1074
|
}], iconColor: [{
|
|
@@ -930,6 +1106,574 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
930
1106
|
args: ['dropdownTemplate']
|
|
931
1107
|
}] } });
|
|
932
1108
|
|
|
1109
|
+
const base$2 = createValueAccessor();
|
|
1110
|
+
class UicTimePickerComponent extends base$2 {
|
|
1111
|
+
// Iconos y estado
|
|
1112
|
+
icon = '';
|
|
1113
|
+
iconColor = 'primary';
|
|
1114
|
+
internalIcon = '';
|
|
1115
|
+
disabled = false;
|
|
1116
|
+
// Texto
|
|
1117
|
+
label = '';
|
|
1118
|
+
error = '';
|
|
1119
|
+
tip = '';
|
|
1120
|
+
// Configuracion
|
|
1121
|
+
interval = 1; // paso de minutos en el overlay
|
|
1122
|
+
// Entrada mostrada (12h) y valor (24h)
|
|
1123
|
+
displayValue = '';
|
|
1124
|
+
// Overlay
|
|
1125
|
+
overlayTemplate;
|
|
1126
|
+
hourOptions;
|
|
1127
|
+
minuteOptions;
|
|
1128
|
+
meridiemOptions;
|
|
1129
|
+
overlayRef = null;
|
|
1130
|
+
overlay = inject(Overlay);
|
|
1131
|
+
vcr = inject(ViewContainerRef);
|
|
1132
|
+
host = inject((ElementRef));
|
|
1133
|
+
overlayPositions = [
|
|
1134
|
+
{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
|
|
1135
|
+
{ originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
|
|
1136
|
+
];
|
|
1137
|
+
// Listas para construir la hora
|
|
1138
|
+
hours12 = Array.from({ length: 12 }, (_, i) => i + 1); // 1..12
|
|
1139
|
+
minutes = [];
|
|
1140
|
+
meridiems = ['am', 'pm'];
|
|
1141
|
+
selectedHour12 = null;
|
|
1142
|
+
selectedMinute = null;
|
|
1143
|
+
selectedMeridiem = null;
|
|
1144
|
+
ngOnInit() {
|
|
1145
|
+
this.rebuildMinutes();
|
|
1146
|
+
this.syncSelectionFromValue();
|
|
1147
|
+
}
|
|
1148
|
+
ngOnChanges(changes) {
|
|
1149
|
+
if (changes['interval']) {
|
|
1150
|
+
this.rebuildMinutes();
|
|
1151
|
+
this.syncSelectionFromValue();
|
|
1152
|
+
}
|
|
1153
|
+
}
|
|
1154
|
+
rebuildMinutes() {
|
|
1155
|
+
const step = Math.max(1, Math.min(60, Math.floor(this.interval || 1)));
|
|
1156
|
+
const mins = [];
|
|
1157
|
+
for (let m = 0; m < 60; m += step) {
|
|
1158
|
+
mins.push(m);
|
|
1159
|
+
}
|
|
1160
|
+
this.minutes = mins;
|
|
1161
|
+
}
|
|
1162
|
+
applySelection(parsed) {
|
|
1163
|
+
if (!parsed) {
|
|
1164
|
+
this.clearSelection();
|
|
1165
|
+
return;
|
|
1166
|
+
}
|
|
1167
|
+
this.selectedHour12 = parsed.hour12;
|
|
1168
|
+
this.selectedMinute = this.minutes.includes(parsed.minute) ? parsed.minute : null;
|
|
1169
|
+
this.selectedMeridiem = parsed.meridiem;
|
|
1170
|
+
}
|
|
1171
|
+
clearSelection() {
|
|
1172
|
+
this.selectedHour12 = null;
|
|
1173
|
+
this.selectedMinute = null;
|
|
1174
|
+
this.selectedMeridiem = null;
|
|
1175
|
+
}
|
|
1176
|
+
syncSelectionFromValue() {
|
|
1177
|
+
const parsed = this.parseValue(this.value) || this.parseDisplay(this.displayValue);
|
|
1178
|
+
this.applySelection(parsed);
|
|
1179
|
+
}
|
|
1180
|
+
// --- Overlay ---
|
|
1181
|
+
openOverlay() {
|
|
1182
|
+
if (this.disabled)
|
|
1183
|
+
return;
|
|
1184
|
+
if (this.overlayRef) {
|
|
1185
|
+
this.closeOverlay();
|
|
1186
|
+
}
|
|
1187
|
+
const inputEl = this.host.nativeElement.querySelector('.fakeinput');
|
|
1188
|
+
const width = inputEl?.clientWidth;
|
|
1189
|
+
const positionStrategy = this.overlay
|
|
1190
|
+
.position()
|
|
1191
|
+
.flexibleConnectedTo(inputEl)
|
|
1192
|
+
.withPositions(this.overlayPositions)
|
|
1193
|
+
.withFlexibleDimensions(false)
|
|
1194
|
+
.withPush(false);
|
|
1195
|
+
this.overlayRef = this.overlay.create({
|
|
1196
|
+
positionStrategy,
|
|
1197
|
+
hasBackdrop: true,
|
|
1198
|
+
backdropClass: 'cdk-overlay-transparent-backdrop',
|
|
1199
|
+
scrollStrategy: this.overlay.scrollStrategies.reposition(),
|
|
1200
|
+
width,
|
|
1201
|
+
});
|
|
1202
|
+
const portal = new TemplatePortal(this.overlayTemplate, this.vcr);
|
|
1203
|
+
this.overlayRef.attach(portal);
|
|
1204
|
+
this.overlayRef.backdropClick().subscribe(() => this.closeOverlay());
|
|
1205
|
+
this.syncSelectionFromValue();
|
|
1206
|
+
setTimeout(() => this.scrollToSelection(), 0);
|
|
1207
|
+
}
|
|
1208
|
+
closeOverlay() {
|
|
1209
|
+
if (this.overlayRef) {
|
|
1210
|
+
this.onTouched();
|
|
1211
|
+
this.overlayRef.dispose();
|
|
1212
|
+
this.overlayRef = null;
|
|
1213
|
+
}
|
|
1214
|
+
}
|
|
1215
|
+
// Selecciones desde overlay
|
|
1216
|
+
pickHour(hour) {
|
|
1217
|
+
this.selectedHour12 = hour;
|
|
1218
|
+
this.commitOverlaySelection();
|
|
1219
|
+
}
|
|
1220
|
+
pickMinute(minute) {
|
|
1221
|
+
this.selectedMinute = minute;
|
|
1222
|
+
this.commitOverlaySelection();
|
|
1223
|
+
}
|
|
1224
|
+
pickMeridiem(meridiem) {
|
|
1225
|
+
this.selectedMeridiem = meridiem;
|
|
1226
|
+
this.commitOverlaySelection();
|
|
1227
|
+
}
|
|
1228
|
+
commitOverlaySelection() {
|
|
1229
|
+
const base = this.parseDisplay(this.displayValue) ||
|
|
1230
|
+
this.parseValue(this.value) || {
|
|
1231
|
+
hour12: 12,
|
|
1232
|
+
minute: 0,
|
|
1233
|
+
meridiem: 'am',
|
|
1234
|
+
};
|
|
1235
|
+
const hour = this.selectedHour12 ?? base.hour12;
|
|
1236
|
+
const minute = this.selectedMinute ?? base.minute;
|
|
1237
|
+
const meridiem = this.selectedMeridiem ?? base.meridiem;
|
|
1238
|
+
this.displayValue = this.format12(hour, minute, meridiem);
|
|
1239
|
+
this.notifyChange(this.compose24(hour, minute, meridiem));
|
|
1240
|
+
}
|
|
1241
|
+
// --- Entrada manual ---
|
|
1242
|
+
onInput(val) {
|
|
1243
|
+
this.displayValue = val;
|
|
1244
|
+
}
|
|
1245
|
+
onBlur() {
|
|
1246
|
+
const parsed = this.parseDisplay(this.displayValue);
|
|
1247
|
+
if (parsed) {
|
|
1248
|
+
this.displayValue = this.format12(parsed.hour12, parsed.minute, parsed.meridiem);
|
|
1249
|
+
const value24 = this.compose24(parsed.hour12, parsed.minute, parsed.meridiem);
|
|
1250
|
+
this.notifyChange(value24);
|
|
1251
|
+
this.applySelection(parsed);
|
|
1252
|
+
}
|
|
1253
|
+
else {
|
|
1254
|
+
this.displayValue = '';
|
|
1255
|
+
this.notifyChange(null);
|
|
1256
|
+
this.clearSelection();
|
|
1257
|
+
}
|
|
1258
|
+
}
|
|
1259
|
+
onKeydown(event) {
|
|
1260
|
+
if (event.key === 'Enter') {
|
|
1261
|
+
event.target.blur();
|
|
1262
|
+
}
|
|
1263
|
+
}
|
|
1264
|
+
// --- ControlValueAccessor ---
|
|
1265
|
+
writeValue(value) {
|
|
1266
|
+
super.writeValue(value);
|
|
1267
|
+
const parsed = this.parseValue(value || '');
|
|
1268
|
+
if (parsed) {
|
|
1269
|
+
this.displayValue = this.format12(parsed.hour12, parsed.minute, parsed.meridiem);
|
|
1270
|
+
this.applySelection(parsed);
|
|
1271
|
+
}
|
|
1272
|
+
else {
|
|
1273
|
+
this.displayValue = '';
|
|
1274
|
+
this.clearSelection();
|
|
1275
|
+
}
|
|
1276
|
+
}
|
|
1277
|
+
// --- Helpers de formato ---
|
|
1278
|
+
format12(hour12, minute, meridiem) {
|
|
1279
|
+
const hh = String(hour12).padStart(2, '0');
|
|
1280
|
+
const mm = String(minute).padStart(2, '0');
|
|
1281
|
+
return `${hh}:${mm} ${meridiem}`;
|
|
1282
|
+
}
|
|
1283
|
+
compose24(hour12, minute, meridiem) {
|
|
1284
|
+
let h24 = hour12 % 12;
|
|
1285
|
+
if (meridiem === 'pm')
|
|
1286
|
+
h24 += 12;
|
|
1287
|
+
const hh = String(h24).padStart(2, '0');
|
|
1288
|
+
const mm = String(minute).padStart(2, '0');
|
|
1289
|
+
return `${hh}:${mm}`;
|
|
1290
|
+
}
|
|
1291
|
+
parseDisplay(text) {
|
|
1292
|
+
if (!text)
|
|
1293
|
+
return null;
|
|
1294
|
+
const match = text.trim().match(/^\s*(\d{1,2})\s*:\s*(\d{2})(?:\s*([aApP][mM]))?\s*$/);
|
|
1295
|
+
if (!match)
|
|
1296
|
+
return null;
|
|
1297
|
+
const hour = parseInt(match[1], 10);
|
|
1298
|
+
const minute = parseInt(match[2], 10);
|
|
1299
|
+
const meridiem = (match[3] ? match[3].toLowerCase() : 'am');
|
|
1300
|
+
if (hour < 1 || hour > 12)
|
|
1301
|
+
return null;
|
|
1302
|
+
if (minute < 0 || minute > 59)
|
|
1303
|
+
return null;
|
|
1304
|
+
return { hour12: hour, minute, meridiem };
|
|
1305
|
+
}
|
|
1306
|
+
parseValue(value24) {
|
|
1307
|
+
if (!value24)
|
|
1308
|
+
return null;
|
|
1309
|
+
const match = value24.match(/^(\d{2}):(\d{2})$/);
|
|
1310
|
+
if (!match)
|
|
1311
|
+
return null;
|
|
1312
|
+
const hour24 = parseInt(match[1], 10);
|
|
1313
|
+
const minute = parseInt(match[2], 10);
|
|
1314
|
+
if (hour24 < 0 || hour24 > 23)
|
|
1315
|
+
return null;
|
|
1316
|
+
if (minute < 0 || minute > 59)
|
|
1317
|
+
return null;
|
|
1318
|
+
const meridiem = hour24 < 12 ? 'am' : 'pm';
|
|
1319
|
+
let hour12 = hour24 % 12;
|
|
1320
|
+
if (hour12 === 0)
|
|
1321
|
+
hour12 = 12;
|
|
1322
|
+
return { hour12, minute, meridiem };
|
|
1323
|
+
}
|
|
1324
|
+
scrollToSelection(retries = 3) {
|
|
1325
|
+
if (!this.overlayRef || !this.overlayRef.hasAttached()) {
|
|
1326
|
+
return;
|
|
1327
|
+
}
|
|
1328
|
+
const hourScrolled = this.scrollColumn(this.hourOptions, this.hours12, this.selectedHour12);
|
|
1329
|
+
const minuteScrolled = this.scrollColumn(this.minuteOptions, this.minutes, this.selectedMinute);
|
|
1330
|
+
const meridiemScrolled = this.scrollColumn(this.meridiemOptions, this.meridiems, this.selectedMeridiem);
|
|
1331
|
+
const hasSelection = this.selectedHour12 !== null || this.selectedMinute !== null || this.selectedMeridiem !== null;
|
|
1332
|
+
if (hasSelection && !(hourScrolled || minuteScrolled || meridiemScrolled) && retries > 0) {
|
|
1333
|
+
setTimeout(() => this.scrollToSelection(retries - 1), 50);
|
|
1334
|
+
}
|
|
1335
|
+
}
|
|
1336
|
+
scrollColumn(query, values, selected) {
|
|
1337
|
+
if (!query || selected === null) {
|
|
1338
|
+
return false;
|
|
1339
|
+
}
|
|
1340
|
+
const index = values.findIndex((value) => value === selected);
|
|
1341
|
+
if (index < 0) {
|
|
1342
|
+
return false;
|
|
1343
|
+
}
|
|
1344
|
+
const elements = query.toArray();
|
|
1345
|
+
const element = elements[index]?.nativeElement;
|
|
1346
|
+
if (!element) {
|
|
1347
|
+
return false;
|
|
1348
|
+
}
|
|
1349
|
+
try {
|
|
1350
|
+
element.scrollIntoView({ block: 'center' });
|
|
1351
|
+
}
|
|
1352
|
+
catch {
|
|
1353
|
+
element.scrollIntoView();
|
|
1354
|
+
}
|
|
1355
|
+
return true;
|
|
1356
|
+
}
|
|
1357
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTimePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1358
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTimePickerComponent, isStandalone: true, selector: "ui-time-picker", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", disabled: "disabled", label: "label", error: "error", tip: "tip", interval: "interval" }, providers: [
|
|
1359
|
+
{
|
|
1360
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1361
|
+
useExisting: forwardRef(() => UicTimePickerComponent),
|
|
1362
|
+
multi: true,
|
|
1363
|
+
},
|
|
1364
|
+
], viewQueries: [{ propertyName: "overlayTemplate", first: true, predicate: ["overlayTemplate"], descendants: true }, { propertyName: "hourOptions", predicate: ["hourOption"], descendants: true }, { propertyName: "minuteOptions", predicate: ["minuteOption"], descendants: true }, { propertyName: "meridiemOptions", predicate: ["meridiemOption"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"input-wrapper\">\n @if (icon) {\n <i class=\"input-externalicon f-{{ iconColor }} {{ icon }}\"></i>\n }\n <div class=\"input-elements\" [style]=\"icon ? 'max-width: calc(100% - 34px);' : ''\">\n @if (label) {\n <div class=\"label inputlabel\" [class.font-error]=\"error\">{{ label }}</div>\n }\n <div class=\"fakeinput-wrapp\">\n <div class=\"fakeinput\" [ngClass]=\"{ errorinput: error, disabledinput: disabled }\">\n @if (internalIcon) {\n <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\n }\n <input\n type=\"text\"\n [disabled]=\"disabled\"\n placeholder=\"hh:mm am/pm\"\n [value]=\"displayValue\"\n #timeInput\n (input)=\"onInput(timeInput.value)\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\"\n />\n <ui-button class=\"side-button\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"s\" icon=\"ri-arrow-down-wide-line\" [disabled]=\"disabled\" (click)=\"openOverlay()\"></ui-button>\n </div>\n\n <!-- Overlay simple sin estilos: 3 columnas (hora, minuto, am/pm) -->\n <ng-template #overlayTemplate>\n <div class=\"input-options\">\n\n <div class=\"time-overlay\">\n <div class=\"time-col hours\">\n @for (h of hours12; track $index) {\n <div\n #hourOption\n class=\"time-item\"\n [class.selected]=\"h === selectedHour12\"\n (click)=\"pickHour(h)\"\n >\n {{ h }}\n </div>\n }\n </div>\n <div class=\"time-col minutes\">\n @for (m of minutes; track $index) {\n <div\n #minuteOption\n class=\"time-item\"\n [class.selected]=\"m === selectedMinute\"\n (click)=\"pickMinute(m)\"\n >\n {{ m < 10 ? ('0' + m) : m }}\n </div>\n }\n </div>\n <div class=\"time-col meridiem\">\n @for (md of meridiems; track $index) {\n <div\n #meridiemOption\n class=\"time-item\"\n [class.selected]=\"md === selectedMeridiem\"\n (click)=\"pickMeridiem(md)\"\n >\n {{ md }}\n </div>\n }\n </div>\n </div>\n </div>\n </ng-template>\n </div>\n\n <!-- ALERTS -->\n @if (error) {\n <div class=\"fakeinput-alert f-red\">{{ error }}</div>\n }\n @if (tip) {\n <div class=\"fakeinput-alert tip\">{{ tip }}</div>\n }\n </div>\n</div>\n", styles: [".time-overlay{width:100%;padding:5px;display:flex;background-color:#fff}.time-col{height:140px;overflow:auto;width:33%;scrollbar-width:none}.time-item{padding:5px;border-bottom:solid 1px var(--grey-200);text-align:center;border-radius:5px;transition:ease .3s;cursor:pointer}.time-item:hover{background-color:var(--grey-100)}.time-item.selected{background-color:var(--primary-200)}\n", ":host{width:100%}.input-container{flex:1 1;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{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-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{color:var(--grey-700);margin-right:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.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(--disabled-background);color:var(--disabled-color)}.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:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.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)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\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"] }] });
|
|
1365
|
+
}
|
|
1366
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTimePickerComponent, decorators: [{
|
|
1367
|
+
type: Component,
|
|
1368
|
+
args: [{ selector: 'ui-time-picker', imports: [CommonModule, UicButtonComponent], providers: [
|
|
1369
|
+
{
|
|
1370
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1371
|
+
useExisting: forwardRef(() => UicTimePickerComponent),
|
|
1372
|
+
multi: true,
|
|
1373
|
+
},
|
|
1374
|
+
], template: "<div class=\"input-wrapper\">\n @if (icon) {\n <i class=\"input-externalicon f-{{ iconColor }} {{ icon }}\"></i>\n }\n <div class=\"input-elements\" [style]=\"icon ? 'max-width: calc(100% - 34px);' : ''\">\n @if (label) {\n <div class=\"label inputlabel\" [class.font-error]=\"error\">{{ label }}</div>\n }\n <div class=\"fakeinput-wrapp\">\n <div class=\"fakeinput\" [ngClass]=\"{ errorinput: error, disabledinput: disabled }\">\n @if (internalIcon) {\n <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\n }\n <input\n type=\"text\"\n [disabled]=\"disabled\"\n placeholder=\"hh:mm am/pm\"\n [value]=\"displayValue\"\n #timeInput\n (input)=\"onInput(timeInput.value)\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\"\n />\n <ui-button class=\"side-button\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"s\" icon=\"ri-arrow-down-wide-line\" [disabled]=\"disabled\" (click)=\"openOverlay()\"></ui-button>\n </div>\n\n <!-- Overlay simple sin estilos: 3 columnas (hora, minuto, am/pm) -->\n <ng-template #overlayTemplate>\n <div class=\"input-options\">\n\n <div class=\"time-overlay\">\n <div class=\"time-col hours\">\n @for (h of hours12; track $index) {\n <div\n #hourOption\n class=\"time-item\"\n [class.selected]=\"h === selectedHour12\"\n (click)=\"pickHour(h)\"\n >\n {{ h }}\n </div>\n }\n </div>\n <div class=\"time-col minutes\">\n @for (m of minutes; track $index) {\n <div\n #minuteOption\n class=\"time-item\"\n [class.selected]=\"m === selectedMinute\"\n (click)=\"pickMinute(m)\"\n >\n {{ m < 10 ? ('0' + m) : m }}\n </div>\n }\n </div>\n <div class=\"time-col meridiem\">\n @for (md of meridiems; track $index) {\n <div\n #meridiemOption\n class=\"time-item\"\n [class.selected]=\"md === selectedMeridiem\"\n (click)=\"pickMeridiem(md)\"\n >\n {{ md }}\n </div>\n }\n </div>\n </div>\n </div>\n </ng-template>\n </div>\n\n <!-- ALERTS -->\n @if (error) {\n <div class=\"fakeinput-alert f-red\">{{ error }}</div>\n }\n @if (tip) {\n <div class=\"fakeinput-alert tip\">{{ tip }}</div>\n }\n </div>\n</div>\n", styles: [".time-overlay{width:100%;padding:5px;display:flex;background-color:#fff}.time-col{height:140px;overflow:auto;width:33%;scrollbar-width:none}.time-item{padding:5px;border-bottom:solid 1px var(--grey-200);text-align:center;border-radius:5px;transition:ease .3s;cursor:pointer}.time-item:hover{background-color:var(--grey-100)}.time-item.selected{background-color:var(--primary-200)}\n", ":host{width:100%}.input-container{flex:1 1;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{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-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{color:var(--grey-700);margin-right:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.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(--disabled-background);color:var(--disabled-color)}.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:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.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)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
1375
|
+
}], propDecorators: { icon: [{
|
|
1376
|
+
type: Input
|
|
1377
|
+
}], iconColor: [{
|
|
1378
|
+
type: Input
|
|
1379
|
+
}], internalIcon: [{
|
|
1380
|
+
type: Input
|
|
1381
|
+
}], disabled: [{
|
|
1382
|
+
type: Input
|
|
1383
|
+
}], label: [{
|
|
1384
|
+
type: Input
|
|
1385
|
+
}], error: [{
|
|
1386
|
+
type: Input
|
|
1387
|
+
}], tip: [{
|
|
1388
|
+
type: Input
|
|
1389
|
+
}], interval: [{
|
|
1390
|
+
type: Input
|
|
1391
|
+
}], overlayTemplate: [{
|
|
1392
|
+
type: ViewChild,
|
|
1393
|
+
args: ['overlayTemplate']
|
|
1394
|
+
}], hourOptions: [{
|
|
1395
|
+
type: ViewChildren,
|
|
1396
|
+
args: ['hourOption']
|
|
1397
|
+
}], minuteOptions: [{
|
|
1398
|
+
type: ViewChildren,
|
|
1399
|
+
args: ['minuteOption']
|
|
1400
|
+
}], meridiemOptions: [{
|
|
1401
|
+
type: ViewChildren,
|
|
1402
|
+
args: ['meridiemOption']
|
|
1403
|
+
}] } });
|
|
1404
|
+
|
|
1405
|
+
const PHONE_COUNTRIES = [
|
|
1406
|
+
{ name: 'Argentina', iso2: 'ar', dialCode: '54' },
|
|
1407
|
+
{ name: 'Australia', iso2: 'au', dialCode: '61' },
|
|
1408
|
+
{ name: 'Bolivia', iso2: 'bo', dialCode: '591' },
|
|
1409
|
+
{ name: 'Brazil', iso2: 'br', dialCode: '55' },
|
|
1410
|
+
{ name: 'Canada', iso2: 'ca', dialCode: '1' },
|
|
1411
|
+
{ name: 'Chile', iso2: 'cl', dialCode: '56' },
|
|
1412
|
+
{ name: 'China', iso2: 'cn', dialCode: '86' },
|
|
1413
|
+
{ name: 'Colombia', iso2: 'co', dialCode: '57' },
|
|
1414
|
+
{ name: 'Costa Rica', iso2: 'cr', dialCode: '506' },
|
|
1415
|
+
{ name: 'Dominican Republic', iso2: 'do', dialCode: '1', areaCodes: ['809', '829', '849'] },
|
|
1416
|
+
{ name: 'Ecuador', iso2: 'ec', dialCode: '593' },
|
|
1417
|
+
{ name: 'El Salvador', iso2: 'sv', dialCode: '503' },
|
|
1418
|
+
{ name: 'France', iso2: 'fr', dialCode: '33' },
|
|
1419
|
+
{ name: 'Germany', iso2: 'de', dialCode: '49' },
|
|
1420
|
+
{ name: 'Guatemala', iso2: 'gt', dialCode: '502' },
|
|
1421
|
+
{ name: 'Honduras', iso2: 'hn', dialCode: '504' },
|
|
1422
|
+
{ name: 'Italy', iso2: 'it', dialCode: '39' },
|
|
1423
|
+
{ name: 'Japan', iso2: 'jp', dialCode: '81' },
|
|
1424
|
+
{ name: 'Mexico', iso2: 'mx', dialCode: '52' },
|
|
1425
|
+
{ name: 'Netherlands', iso2: 'nl', dialCode: '31' },
|
|
1426
|
+
{ name: 'New Zealand', iso2: 'nz', dialCode: '64' },
|
|
1427
|
+
{ name: 'Panama', iso2: 'pa', dialCode: '507' },
|
|
1428
|
+
{ name: 'Paraguay', iso2: 'py', dialCode: '595' },
|
|
1429
|
+
{ name: 'Peru', iso2: 'pe', dialCode: '51' },
|
|
1430
|
+
{ name: 'Portugal', iso2: 'pt', dialCode: '351' },
|
|
1431
|
+
{ name: 'Spain', iso2: 'es', dialCode: '34' },
|
|
1432
|
+
{ name: 'United Kingdom', iso2: 'gb', dialCode: '44' },
|
|
1433
|
+
{ name: 'United States', iso2: 'us', dialCode: '1' },
|
|
1434
|
+
{ name: 'Uruguay', iso2: 'uy', dialCode: '598' },
|
|
1435
|
+
{ name: 'Venezuela', iso2: 've', dialCode: '58' }
|
|
1436
|
+
];
|
|
1437
|
+
|
|
1438
|
+
const base$1 = createValueAccessor();
|
|
1439
|
+
class UicPhoneInputComponent extends base$1 {
|
|
1440
|
+
icon = '';
|
|
1441
|
+
iconColor = 'black';
|
|
1442
|
+
internalIcon = '';
|
|
1443
|
+
size = 'm';
|
|
1444
|
+
label = '';
|
|
1445
|
+
error = '';
|
|
1446
|
+
tip = '';
|
|
1447
|
+
placeholder = 'Ingresa un numero';
|
|
1448
|
+
disabled = false;
|
|
1449
|
+
loading = false;
|
|
1450
|
+
preferredCountries = ['pe', 'es', 'us'];
|
|
1451
|
+
flagPath = 'https://flagcdn.com/{{code}}.svg';
|
|
1452
|
+
set countries(value) {
|
|
1453
|
+
this._countries = value?.length ? value : PHONE_COUNTRIES;
|
|
1454
|
+
this.resetCountryLists();
|
|
1455
|
+
}
|
|
1456
|
+
get countries() {
|
|
1457
|
+
return this._countries;
|
|
1458
|
+
}
|
|
1459
|
+
searchInput;
|
|
1460
|
+
dropdownTemplate;
|
|
1461
|
+
dropdownOpen = false;
|
|
1462
|
+
searchTerm = '';
|
|
1463
|
+
phoneNumber = '';
|
|
1464
|
+
selectedCountry;
|
|
1465
|
+
filteredCountries = [];
|
|
1466
|
+
dropdownId = `phone-dropdown-${Math.random().toString(36).slice(2, 8)}`;
|
|
1467
|
+
_countries = PHONE_COUNTRIES;
|
|
1468
|
+
host = inject((ElementRef));
|
|
1469
|
+
overlay = inject(Overlay);
|
|
1470
|
+
vcr = inject(ViewContainerRef);
|
|
1471
|
+
overlayRef;
|
|
1472
|
+
overlayPositions = [
|
|
1473
|
+
{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
|
|
1474
|
+
{ originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }
|
|
1475
|
+
];
|
|
1476
|
+
constructor() {
|
|
1477
|
+
super();
|
|
1478
|
+
this.resetCountryLists();
|
|
1479
|
+
}
|
|
1480
|
+
ngOnChanges(changes) {
|
|
1481
|
+
if (changes['preferredCountries'] && !changes['preferredCountries'].firstChange) {
|
|
1482
|
+
this.selectedCountry = this.getDefaultCountry();
|
|
1483
|
+
this.emitValue();
|
|
1484
|
+
}
|
|
1485
|
+
if (changes['disabled'] && this.disabled && this.dropdownOpen) {
|
|
1486
|
+
this.closeDropdown();
|
|
1487
|
+
}
|
|
1488
|
+
}
|
|
1489
|
+
ngOnDestroy() {
|
|
1490
|
+
this.closeDropdown();
|
|
1491
|
+
}
|
|
1492
|
+
writeValue(value) {
|
|
1493
|
+
super.writeValue(value);
|
|
1494
|
+
if (!value) {
|
|
1495
|
+
this.phoneNumber = '';
|
|
1496
|
+
this.selectedCountry = this.getDefaultCountry();
|
|
1497
|
+
return;
|
|
1498
|
+
}
|
|
1499
|
+
const matchedCountry = this.countries.find(country => country.iso2 === value.countryIso2) ??
|
|
1500
|
+
this.countries.find(country => country.dialCode === value.dialCode);
|
|
1501
|
+
this.selectedCountry = matchedCountry ?? this.getDefaultCountry();
|
|
1502
|
+
this.phoneNumber = (value.nationalNumber ?? '').replace(/\D/g, '');
|
|
1503
|
+
}
|
|
1504
|
+
toggleDropdown() {
|
|
1505
|
+
if (this.disabled || this.loading)
|
|
1506
|
+
return;
|
|
1507
|
+
if (this.dropdownOpen) {
|
|
1508
|
+
this.closeDropdown();
|
|
1509
|
+
}
|
|
1510
|
+
else {
|
|
1511
|
+
this.openDropdown();
|
|
1512
|
+
}
|
|
1513
|
+
}
|
|
1514
|
+
selectCountry(country) {
|
|
1515
|
+
this.selectedCountry = country;
|
|
1516
|
+
this.closeDropdown();
|
|
1517
|
+
this.emitValue();
|
|
1518
|
+
}
|
|
1519
|
+
onNumberInput(event) {
|
|
1520
|
+
const input = event.target;
|
|
1521
|
+
const digits = input.value.replace(/\D/g, '');
|
|
1522
|
+
this.phoneNumber = digits;
|
|
1523
|
+
input.value = digits;
|
|
1524
|
+
this.emitValue();
|
|
1525
|
+
}
|
|
1526
|
+
onBlur() {
|
|
1527
|
+
this.onTouched();
|
|
1528
|
+
}
|
|
1529
|
+
onSearchChange(event) {
|
|
1530
|
+
const term = event.target.value.trim().toLowerCase();
|
|
1531
|
+
this.searchTerm = term;
|
|
1532
|
+
if (!term) {
|
|
1533
|
+
this.filteredCountries = [...this.countries];
|
|
1534
|
+
return;
|
|
1535
|
+
}
|
|
1536
|
+
this.filteredCountries = this.countries.filter(country => {
|
|
1537
|
+
const matchesName = country.name.toLowerCase().includes(term);
|
|
1538
|
+
const matchesIso = country.iso2.toLowerCase().includes(term);
|
|
1539
|
+
const matchesDial = country.dialCode.startsWith(term.replace('+', ''));
|
|
1540
|
+
return matchesName || matchesIso || matchesDial;
|
|
1541
|
+
});
|
|
1542
|
+
}
|
|
1543
|
+
clearSearch() {
|
|
1544
|
+
this.searchTerm = '';
|
|
1545
|
+
this.filteredCountries = [...this.countries];
|
|
1546
|
+
if (this.dropdownOpen) {
|
|
1547
|
+
this.searchInput?.nativeElement.focus();
|
|
1548
|
+
}
|
|
1549
|
+
}
|
|
1550
|
+
getFlagUrl(iso) {
|
|
1551
|
+
const code = iso.toLowerCase();
|
|
1552
|
+
if (this.flagPath.includes('{{code}}')) {
|
|
1553
|
+
return this.flagPath.replace('{{code}}', code);
|
|
1554
|
+
}
|
|
1555
|
+
const safeBase = this.flagPath.replace(/\/$/, '');
|
|
1556
|
+
return `${safeBase}/${code}.svg`;
|
|
1557
|
+
}
|
|
1558
|
+
emitValue() {
|
|
1559
|
+
if (!this.phoneNumber) {
|
|
1560
|
+
this.notifyChange(null);
|
|
1561
|
+
return;
|
|
1562
|
+
}
|
|
1563
|
+
const value = {
|
|
1564
|
+
countryIso2: this.selectedCountry.iso2,
|
|
1565
|
+
dialCode: this.selectedCountry.dialCode,
|
|
1566
|
+
nationalNumber: this.phoneNumber,
|
|
1567
|
+
internationalNumber: `+${this.selectedCountry.dialCode}${this.phoneNumber}`
|
|
1568
|
+
};
|
|
1569
|
+
this.notifyChange(value);
|
|
1570
|
+
}
|
|
1571
|
+
openDropdown() {
|
|
1572
|
+
if (!this.dropdownTemplate) {
|
|
1573
|
+
return;
|
|
1574
|
+
}
|
|
1575
|
+
const trigger = this.host.nativeElement.querySelector('.fakeinput');
|
|
1576
|
+
const width = trigger?.getBoundingClientRect().width ?? undefined;
|
|
1577
|
+
const positionStrategy = this.overlay
|
|
1578
|
+
.position()
|
|
1579
|
+
.flexibleConnectedTo(trigger ?? this.host.nativeElement)
|
|
1580
|
+
.withPositions(this.overlayPositions)
|
|
1581
|
+
.withFlexibleDimensions(false)
|
|
1582
|
+
.withPush(false);
|
|
1583
|
+
this.overlayRef = this.overlay.create({
|
|
1584
|
+
positionStrategy,
|
|
1585
|
+
width,
|
|
1586
|
+
hasBackdrop: true,
|
|
1587
|
+
backdropClass: 'cdk-overlay-transparent-backdrop',
|
|
1588
|
+
scrollStrategy: this.overlay.scrollStrategies.reposition()
|
|
1589
|
+
});
|
|
1590
|
+
const portal = new TemplatePortal(this.dropdownTemplate, this.vcr);
|
|
1591
|
+
this.overlayRef.attach(portal);
|
|
1592
|
+
this.filteredCountries = [...this.countries];
|
|
1593
|
+
this.dropdownOpen = true;
|
|
1594
|
+
this.overlayRef.backdropClick().subscribe(() => this.closeDropdown());
|
|
1595
|
+
this.overlayRef.keydownEvents().subscribe(event => {
|
|
1596
|
+
if (event.key === 'Escape') {
|
|
1597
|
+
event.preventDefault();
|
|
1598
|
+
this.closeDropdown();
|
|
1599
|
+
}
|
|
1600
|
+
});
|
|
1601
|
+
setTimeout(() => this.searchInput?.nativeElement.focus());
|
|
1602
|
+
}
|
|
1603
|
+
closeDropdown() {
|
|
1604
|
+
this.dropdownOpen = false;
|
|
1605
|
+
this.resetSearch();
|
|
1606
|
+
if (this.overlayRef) {
|
|
1607
|
+
this.overlayRef.dispose();
|
|
1608
|
+
this.overlayRef = undefined;
|
|
1609
|
+
}
|
|
1610
|
+
}
|
|
1611
|
+
resetSearch() {
|
|
1612
|
+
this.searchTerm = '';
|
|
1613
|
+
this.filteredCountries = [...this.countries];
|
|
1614
|
+
}
|
|
1615
|
+
resetCountryLists() {
|
|
1616
|
+
this.filteredCountries = [...this.countries];
|
|
1617
|
+
this.selectedCountry = this.getDefaultCountry();
|
|
1618
|
+
}
|
|
1619
|
+
getDefaultCountry() {
|
|
1620
|
+
const preferred = this.preferredCountries
|
|
1621
|
+
.map(code => this.countries.find(country => country.iso2 === code))
|
|
1622
|
+
.find((country) => !!country);
|
|
1623
|
+
return preferred ?? this.countries[0];
|
|
1624
|
+
}
|
|
1625
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPhoneInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1626
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicPhoneInputComponent, isStandalone: true, selector: "ui-phone-input", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", placeholder: "placeholder", disabled: "disabled", loading: "loading", preferredCountries: "preferredCountries", flagPath: "flagPath", countries: "countries" }, providers: [
|
|
1627
|
+
{
|
|
1628
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1629
|
+
useExisting: forwardRef(() => UicPhoneInputComponent),
|
|
1630
|
+
multi: true
|
|
1631
|
+
}
|
|
1632
|
+
], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: 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\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\r\n <div\r\n class=\"fakeinput phone-input\"\r\n [ngClass]=\"{\r\n errorinput: error,\r\n disabledinput: disabled,\r\n 'loading-input': loading,\r\n open: dropdownOpen\r\n }\"\r\n >\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{ internalIcon }}\"></i>\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"phone-input__selector\"\r\n (click)=\"toggleDropdown()\"\r\n [disabled]=\"disabled || loading\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-expanded]=\"dropdownOpen\"\r\n [attr.aria-controls]=\"dropdownOpen ? dropdownId : null\"\r\n [attr.aria-label]=\"selectedCountry.name + ' codigo ' + selectedCountry.dialCode\"\r\n >\r\n <img\r\n class=\"phone-input__flag\"\r\n [src]=\"getFlagUrl(selectedCountry.iso2)\"\r\n [alt]=\"selectedCountry.name\"\r\n />\r\n <i class=\"ri-arrow-down-s-line phone-input__chevron\" aria-hidden=\"true\"></i>\r\n </button>\r\n <div class=\"phone-input__divider\" aria-hidden=\"true\"></div>\r\n <div class=\"phone-input__dial\">+{{ selectedCountry.dialCode }}</div>\r\n\r\n\r\n <input\r\n type=\"tel\"\r\n class=\"phone-input__field\"\r\n [attr.placeholder]=\"placeholder\"\r\n [disabled]=\"disabled || loading\"\r\n inputmode=\"tel\"\r\n [value]=\"phoneNumber\"\r\n (input)=\"onNumberInput($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n </div>\r\n\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{ error }}</div>\r\n }\r\n\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{ tip }}</div>\r\n }\r\n </div>\r\n</div>\r\n\r\n<ng-template #dropdownTemplate>\r\n <datalist class=\"phone-input__dropdown\" [attr.id]=\"dropdownId\">\r\n <div class=\"phone-input__search\">\r\n <i class=\"ri-search-line\"></i>\r\n <input\r\n #searchInput\r\n type=\"text\"\r\n [value]=\"searchTerm\"\r\n (input)=\"onSearchChange($event)\"\r\n placeholder=\"Buscar pais o codigo\"\r\n autocomplete=\"off\"\r\n />\r\n @if (searchTerm) {\r\n <button type=\"button\" class=\"phone-input__clear\" (click)=\"clearSearch()\" aria-label=\"Limpiar busqueda\">\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n }\r\n </div>\r\n\r\n <div class=\"phone-input__list\">\r\n @for (country of filteredCountries; track country.iso2) {\r\n <button\r\n type=\"button\"\r\n class=\"phone-input__option\"\r\n (click)=\"selectCountry(country)\"\r\n [attr.aria-selected]=\"country.iso2 === selectedCountry.iso2\"\r\n [attr.data-iso]=\"country.iso2\"\r\n [attr.title]=\"country.name + ' +' + country.dialCode\"\r\n [attr.aria-label]=\"country.name + ' +' + country.dialCode\"\r\n >\r\n <img\r\n class=\"phone-input__flag\"\r\n [src]=\"getFlagUrl(country.iso2)\"\r\n [alt]=\"country.name\"\r\n />\r\n {{country.name}}\r\n <span class=\"phone-input__dial\">(+{{ country.dialCode }})</span>\r\n </button>\r\n }\r\n\r\n @if (filteredCountries.length === 0) {\r\n <div class=\"phone-input__empty\">No se encontraron resultados</div>\r\n }\r\n </div>\r\n </datalist>\r\n</ng-template>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;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{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-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{color:var(--grey-700);margin-right:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.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(--disabled-background);color:var(--disabled-color)}.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:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.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)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".phone-input{padding:0}.phone-input.open .phone-input__chevron{transform:rotate(180deg)}.phone-input__selector{display:flex;align-items:center;background:transparent;border:none;height:calc(4 * var(--form-ref));padding:0 0 0 3px;gap:2px;color:var(--grey-900);font-size:max(var(--form-ref) + 4px,13px);cursor:pointer;transition:.2s ease}.phone-input__selector:hover{background-color:var(--grey-100)}.phone-input__selector:disabled{cursor:not-allowed;color:var(--disabled-color)}.phone-input__selector:focus-visible{outline:none}.phone-input__flag{width:18px;height:12px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px #0000000d}.phone-input__dial{padding:0 5px;font-weight:600;color:var(--grey-700)}.phone-input__chevron{font-size:1rem;color:var(--grey-500);transition:transform .2s ease}.phone-input__divider{width:1px;background-color:var(--grey-200);align-self:stretch}.phone-input__field{flex:1 1 auto;border:none;outline:none;padding:9px var(--form-ref);font-size:max(var(--form-ref) + 4px,13px);color:var(--grey-900);background:transparent}.phone-input__field::placeholder{color:var(--grey-400)}.phone-input__field:disabled{background-color:transparent;color:var(--disabled-color);cursor:not-allowed}.phone-input__dropdown{margin-top:4px;border-radius:var(--input-radius);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;border:1px solid var(--grey-200);background-color:var(--white);width:100%;max-height:280px;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:10}.phone-input__search{display:flex;align-items:center;padding:6px 10px;border-bottom:1px solid var(--grey-200);gap:6px}.phone-input__search>i{color:var(--grey-500);font-size:1rem}.phone-input__search>input{flex:1;border:none;outline:none;font-size:.875rem;color:var(--grey-900);background:transparent}.phone-input__search>input::placeholder{color:var(--grey-400)}.phone-input__clear{border:none;background:transparent;cursor:pointer;color:var(--grey-400);padding:2px;display:inline-flex;align-items:center;justify-content:center}.phone-input__clear:hover{color:var(--grey-600)}.phone-input__clear:focus-visible{outline:none}.phone-input__list{max-height:220px;overflow-y:auto;display:flex;padding:5px;flex-direction:column}.phone-input__option{display:flex;gap:5px;width:100%;background:transparent;border:none;padding:5px 8px;cursor:pointer;font-size:.75rem;color:var(--grey-900);transition:background-color .2s ease;text-align:left}.phone-input__option:hover{background-color:var(--secondary-100)}.phone-input__option[aria-selected=true]{background-color:var(--primary-100);color:var(--primary-700)}.phone-input__option .phone-input__dial{font-weight:400;padding:0;color:var(--grey-500)}.phone-input__empty{padding:12px;font-size:.875rem;color:var(--grey-500);text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1633
|
+
}
|
|
1634
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPhoneInputComponent, decorators: [{
|
|
1635
|
+
type: Component,
|
|
1636
|
+
args: [{ selector: 'ui-phone-input', imports: [CommonModule], providers: [
|
|
1637
|
+
{
|
|
1638
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1639
|
+
useExisting: forwardRef(() => UicPhoneInputComponent),
|
|
1640
|
+
multi: true
|
|
1641
|
+
}
|
|
1642
|
+
], template: "<div class=\"input-wrapper\">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{ iconColor }} {{ icon }}\"></i>\r\n }\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\r\n <div\r\n class=\"fakeinput phone-input\"\r\n [ngClass]=\"{\r\n errorinput: error,\r\n disabledinput: disabled,\r\n 'loading-input': loading,\r\n open: dropdownOpen\r\n }\"\r\n >\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{ internalIcon }}\"></i>\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"phone-input__selector\"\r\n (click)=\"toggleDropdown()\"\r\n [disabled]=\"disabled || loading\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-expanded]=\"dropdownOpen\"\r\n [attr.aria-controls]=\"dropdownOpen ? dropdownId : null\"\r\n [attr.aria-label]=\"selectedCountry.name + ' codigo ' + selectedCountry.dialCode\"\r\n >\r\n <img\r\n class=\"phone-input__flag\"\r\n [src]=\"getFlagUrl(selectedCountry.iso2)\"\r\n [alt]=\"selectedCountry.name\"\r\n />\r\n <i class=\"ri-arrow-down-s-line phone-input__chevron\" aria-hidden=\"true\"></i>\r\n </button>\r\n <div class=\"phone-input__divider\" aria-hidden=\"true\"></div>\r\n <div class=\"phone-input__dial\">+{{ selectedCountry.dialCode }}</div>\r\n\r\n\r\n <input\r\n type=\"tel\"\r\n class=\"phone-input__field\"\r\n [attr.placeholder]=\"placeholder\"\r\n [disabled]=\"disabled || loading\"\r\n inputmode=\"tel\"\r\n [value]=\"phoneNumber\"\r\n (input)=\"onNumberInput($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n </div>\r\n\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{ error }}</div>\r\n }\r\n\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{ tip }}</div>\r\n }\r\n </div>\r\n</div>\r\n\r\n<ng-template #dropdownTemplate>\r\n <datalist class=\"phone-input__dropdown\" [attr.id]=\"dropdownId\">\r\n <div class=\"phone-input__search\">\r\n <i class=\"ri-search-line\"></i>\r\n <input\r\n #searchInput\r\n type=\"text\"\r\n [value]=\"searchTerm\"\r\n (input)=\"onSearchChange($event)\"\r\n placeholder=\"Buscar pais o codigo\"\r\n autocomplete=\"off\"\r\n />\r\n @if (searchTerm) {\r\n <button type=\"button\" class=\"phone-input__clear\" (click)=\"clearSearch()\" aria-label=\"Limpiar busqueda\">\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n }\r\n </div>\r\n\r\n <div class=\"phone-input__list\">\r\n @for (country of filteredCountries; track country.iso2) {\r\n <button\r\n type=\"button\"\r\n class=\"phone-input__option\"\r\n (click)=\"selectCountry(country)\"\r\n [attr.aria-selected]=\"country.iso2 === selectedCountry.iso2\"\r\n [attr.data-iso]=\"country.iso2\"\r\n [attr.title]=\"country.name + ' +' + country.dialCode\"\r\n [attr.aria-label]=\"country.name + ' +' + country.dialCode\"\r\n >\r\n <img\r\n class=\"phone-input__flag\"\r\n [src]=\"getFlagUrl(country.iso2)\"\r\n [alt]=\"country.name\"\r\n />\r\n {{country.name}}\r\n <span class=\"phone-input__dial\">(+{{ country.dialCode }})</span>\r\n </button>\r\n }\r\n\r\n @if (filteredCountries.length === 0) {\r\n <div class=\"phone-input__empty\">No se encontraron resultados</div>\r\n }\r\n </div>\r\n </datalist>\r\n</ng-template>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;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{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-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{color:var(--grey-700);margin-right:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.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(--disabled-background);color:var(--disabled-color)}.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:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.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)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".phone-input{padding:0}.phone-input.open .phone-input__chevron{transform:rotate(180deg)}.phone-input__selector{display:flex;align-items:center;background:transparent;border:none;height:calc(4 * var(--form-ref));padding:0 0 0 3px;gap:2px;color:var(--grey-900);font-size:max(var(--form-ref) + 4px,13px);cursor:pointer;transition:.2s ease}.phone-input__selector:hover{background-color:var(--grey-100)}.phone-input__selector:disabled{cursor:not-allowed;color:var(--disabled-color)}.phone-input__selector:focus-visible{outline:none}.phone-input__flag{width:18px;height:12px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px #0000000d}.phone-input__dial{padding:0 5px;font-weight:600;color:var(--grey-700)}.phone-input__chevron{font-size:1rem;color:var(--grey-500);transition:transform .2s ease}.phone-input__divider{width:1px;background-color:var(--grey-200);align-self:stretch}.phone-input__field{flex:1 1 auto;border:none;outline:none;padding:9px var(--form-ref);font-size:max(var(--form-ref) + 4px,13px);color:var(--grey-900);background:transparent}.phone-input__field::placeholder{color:var(--grey-400)}.phone-input__field:disabled{background-color:transparent;color:var(--disabled-color);cursor:not-allowed}.phone-input__dropdown{margin-top:4px;border-radius:var(--input-radius);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;border:1px solid var(--grey-200);background-color:var(--white);width:100%;max-height:280px;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:10}.phone-input__search{display:flex;align-items:center;padding:6px 10px;border-bottom:1px solid var(--grey-200);gap:6px}.phone-input__search>i{color:var(--grey-500);font-size:1rem}.phone-input__search>input{flex:1;border:none;outline:none;font-size:.875rem;color:var(--grey-900);background:transparent}.phone-input__search>input::placeholder{color:var(--grey-400)}.phone-input__clear{border:none;background:transparent;cursor:pointer;color:var(--grey-400);padding:2px;display:inline-flex;align-items:center;justify-content:center}.phone-input__clear:hover{color:var(--grey-600)}.phone-input__clear:focus-visible{outline:none}.phone-input__list{max-height:220px;overflow-y:auto;display:flex;padding:5px;flex-direction:column}.phone-input__option{display:flex;gap:5px;width:100%;background:transparent;border:none;padding:5px 8px;cursor:pointer;font-size:.75rem;color:var(--grey-900);transition:background-color .2s ease;text-align:left}.phone-input__option:hover{background-color:var(--secondary-100)}.phone-input__option[aria-selected=true]{background-color:var(--primary-100);color:var(--primary-700)}.phone-input__option .phone-input__dial{font-weight:400;padding:0;color:var(--grey-500)}.phone-input__empty{padding:12px;font-size:.875rem;color:var(--grey-500);text-align:center}\n"] }]
|
|
1643
|
+
}], ctorParameters: () => [], propDecorators: { icon: [{
|
|
1644
|
+
type: Input
|
|
1645
|
+
}], iconColor: [{
|
|
1646
|
+
type: Input
|
|
1647
|
+
}], internalIcon: [{
|
|
1648
|
+
type: Input
|
|
1649
|
+
}], size: [{
|
|
1650
|
+
type: Input
|
|
1651
|
+
}], label: [{
|
|
1652
|
+
type: Input
|
|
1653
|
+
}], error: [{
|
|
1654
|
+
type: Input
|
|
1655
|
+
}], tip: [{
|
|
1656
|
+
type: Input
|
|
1657
|
+
}], placeholder: [{
|
|
1658
|
+
type: Input
|
|
1659
|
+
}], disabled: [{
|
|
1660
|
+
type: Input
|
|
1661
|
+
}], loading: [{
|
|
1662
|
+
type: Input
|
|
1663
|
+
}], preferredCountries: [{
|
|
1664
|
+
type: Input
|
|
1665
|
+
}], flagPath: [{
|
|
1666
|
+
type: Input
|
|
1667
|
+
}], countries: [{
|
|
1668
|
+
type: Input
|
|
1669
|
+
}], searchInput: [{
|
|
1670
|
+
type: ViewChild,
|
|
1671
|
+
args: ['searchInput']
|
|
1672
|
+
}], dropdownTemplate: [{
|
|
1673
|
+
type: ViewChild,
|
|
1674
|
+
args: ['dropdownTemplate']
|
|
1675
|
+
}] } });
|
|
1676
|
+
|
|
933
1677
|
class UicDynamicFormComponent {
|
|
934
1678
|
fields = [];
|
|
935
1679
|
form;
|
|
@@ -958,16 +1702,20 @@ class UicDynamicFormComponent {
|
|
|
958
1702
|
pattern: (_err, field) => `${field.label ?? field.name} no tiene el formato correcto.`
|
|
959
1703
|
};
|
|
960
1704
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
961
|
-
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", disabled: "disabled", cols: "cols" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n @for (field of fields; track field.name) {\r\n <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n \r\n @if ( ['text','number'].includes(field.type) ) {\r\n <ui-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!form.get(field.name)?.disabled\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" >\r\n <input #inp\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [type]=\"field.type\"\r\n [maxlength]=\"field.maxLength||null\"\r\n [placeholder]=\"field.placeholder??field.label\"/>\r\n @if (field.maxLength && field.showCounter) {\r\n <span style=\"padding-top: 4px;\" counter> {{inp.value.length}} /{{field.maxLength}}</span>\r\n }\r\n </ui-input>\r\n }\r\n @if ( field.type === 'textarea' ) {\r\n <ui-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!form.get(field.name)?.disabled\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" >\r\n <textarea #ta\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n cols=\"4\"\r\n [placeholder]=\"field.placeholder??field.label\"></textarea>\r\n @if (field.maxLength && field.showCounter) {\r\n <span style=\"padding-top: 4px;\" counter> {{ta.value.length}} /{{field.maxLength}}</span>\r\n }\r\n </ui-input>\r\n }\r\n @else if (field.type === 'date') {\r\n <ui-date-picker\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n ></ui-date-picker>\r\n }\r\n @else if (field.type === 'select') {\r\n <ui-select\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\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 === 'searcher') {\r\n <ui-searcher\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\"\r\n [searchFn]=\"field.searchFn\"\r\n [itemDisplayFn]=\"field.searchDisplayFn\"\r\n [itemIsEnabledFn]=\"field.searchIsEnabledFn\"\r\n [placeholder]=\"field.placeholder??'Buscar...'\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n ></ui-searcher>\r\n }\r\n @else if (field.type === 'pool') {\r\n <ui-pool-options\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [multy]=\"field.multyoption??false\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-pool-options>\r\n }\r\n @else if (field.type === 'checkbox') {\r\n <ui-checkbox\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\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 ></ui-checkbox>\r\n }\r\n @else if (field.type === 'slider') {\r\n <ui-slider\r\n [min]=\"field.min??0\"\r\n [max]=\"field.max??100\"\r\n [step]=\"field.sliderInterval??1\"\r\n [markerCount]=\"field.sliderMarks??5\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n ></ui-slider>\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 + (field.required ? ' *' : '')\"\r\n >\r\n </ui-checkbox>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 399px){.form{grid-template-columns:1fr}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 400px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}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}.new-line{grid-column-start:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UicDatePickerComponent, selector: "ui-date-picker", inputs: ["icon", "iconColor", "internalIcon", "disabled", "label", "error", "tip", "max", "min"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSliderComponent, selector: "ui-slider", inputs: ["icon", "iconColor", "label", "error", "tip", "min", "max", "step", "markerCount", "disabled", "loading"] }, { kind: "component", type: UicPoolOptionsComponent, selector: "ui-pool-options", inputs: ["icon", "iconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "options"] }, { kind: "component", type: UicSearcherComponent, selector: "ui-searcher", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "showSelected", "placeholder", "searchFn", "itemDisplayFn", "itemIsEnabledFn", "manualSearch"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "nullable", "options"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
1705
|
+
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", disabled: "disabled", cols: "cols" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n @for (field of fields; track field.name) {\r\n <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n \r\n @if ( ['text','number'].includes(field.type) ) {\r\n <ui-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!form.get(field.name)?.disabled\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" >\r\n <input #inp\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [type]=\"field.type\"\r\n [step]=\"field.step\"\r\n [maxlength]=\"field.maxLength||null\"\r\n [placeholder]=\"field.placeholder??field.label\"/>\r\n @if (field.maxLength && field.showCounter) {\r\n <span style=\"padding-top: 4px;\" counter> {{inp.value.length}} /{{field.maxLength}}</span>\r\n }\r\n </ui-input>\r\n }\r\n @if ( field.type === 'textarea' ) {\r\n <ui-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!form.get(field.name)?.disabled\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" >\r\n <textarea #ta\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n cols=\"4\"\r\n [placeholder]=\"field.placeholder??field.label\"></textarea>\r\n @if (field.maxLength && field.showCounter) {\r\n <span style=\"padding-top: 4px;\" counter> {{ta.value.length}} /{{field.maxLength}}</span>\r\n }\r\n </ui-input>\r\n }\r\n @if ( field.type === 'phone' ) {\r\n <ui-phone-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!form.get(field.name)?.disabled\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" \r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [placeholder]=\"field.placeholder??field.label\"\r\n >\r\n </ui-phone-input>\r\n }\r\n @else if (field.type === 'date') {\r\n <ui-date-picker\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [justMonth]=\"!!field.monthMode\"\r\n [monthDay]=\"field.monthDay||'first'\"\r\n [formControlName]=\"field.name\"\r\n ></ui-date-picker>\r\n }\r\n @else if (field.type === 'time') {\r\n <ui-time-picker\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [interval]=\"field.timeInterval??5\"\r\n [formControlName]=\"field.name\"\r\n ></ui-time-picker>\r\n }\r\n @else if (field.type === 'select') {\r\n <ui-select\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\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 === 'searcher') {\r\n <ui-searcher\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\"\r\n [searchFn]=\"field.searchFn\"\r\n [itemDisplayFn]=\"field.searchDisplayFn\"\r\n [itemIsEnabledFn]=\"field.searchIsEnabledFn\"\r\n [placeholder]=\"field.placeholder??'Buscar...'\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n ></ui-searcher>\r\n }\r\n @else if (field.type === 'pool') {\r\n <ui-pool-options\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [multy]=\"field.multyoption??false\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-pool-options>\r\n }\r\n @else if (field.type === 'checkbox') {\r\n <ui-checkbox\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\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 ></ui-checkbox>\r\n }\r\n @else if (field.type === 'slider') {\r\n <ui-slider\r\n [min]=\"field.min??0\"\r\n [max]=\"field.max??100\"\r\n [step]=\"field.sliderInterval??1\"\r\n [markerCount]=\"field.sliderMarks??5\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n ></ui-slider>\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 + (field.required ? ' *' : '')\"\r\n >\r\n </ui-checkbox>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 399px){.form{grid-template-columns:1fr}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 400px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}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}.new-line{grid-column-start:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UicDatePickerComponent, selector: "ui-date-picker", inputs: ["icon", "iconColor", "internalIcon", "disabled", "label", "error", "tip", "max", "min", "justMonth", "monthDay"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSliderComponent, selector: "ui-slider", inputs: ["icon", "iconColor", "label", "error", "tip", "min", "max", "step", "markerCount", "disabled", "loading"] }, { kind: "component", type: UicPoolOptionsComponent, selector: "ui-pool-options", inputs: ["icon", "iconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "options"] }, { kind: "component", type: UicTimePickerComponent, selector: "ui-time-picker", inputs: ["icon", "iconColor", "internalIcon", "disabled", "label", "error", "tip", "interval"] }, { kind: "component", type: UicSearcherComponent, selector: "ui-searcher", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "showSelected", "placeholder", "searchFn", "itemDisplayFn", "itemIsEnabledFn", "manualSearch"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "nullable", "options"] }, { kind: "component", type: UicPhoneInputComponent, selector: "ui-phone-input", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "placeholder", "disabled", "loading", "preferredCountries", "flagPath", "countries"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
962
1706
|
}
|
|
963
1707
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, decorators: [{
|
|
964
1708
|
type: Component,
|
|
965
1709
|
args: [{ selector: 'ui-dynamic-form', imports: [CommonModule, UicDatePickerComponent,
|
|
966
1710
|
ReactiveFormsModule, UicSliderComponent,
|
|
967
1711
|
UicPoolOptionsComponent,
|
|
1712
|
+
UicTimePickerComponent,
|
|
968
1713
|
UicSearcherComponent,
|
|
969
|
-
UicSelectComponent,
|
|
970
|
-
|
|
1714
|
+
UicSelectComponent,
|
|
1715
|
+
UicPhoneInputComponent,
|
|
1716
|
+
UicInputComponent,
|
|
1717
|
+
UicCheckboxComponent,
|
|
1718
|
+
FormsModule], template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n @for (field of fields; track field.name) {\r\n <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n \r\n @if ( ['text','number'].includes(field.type) ) {\r\n <ui-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!form.get(field.name)?.disabled\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" >\r\n <input #inp\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [type]=\"field.type\"\r\n [step]=\"field.step\"\r\n [maxlength]=\"field.maxLength||null\"\r\n [placeholder]=\"field.placeholder??field.label\"/>\r\n @if (field.maxLength && field.showCounter) {\r\n <span style=\"padding-top: 4px;\" counter> {{inp.value.length}} /{{field.maxLength}}</span>\r\n }\r\n </ui-input>\r\n }\r\n @if ( field.type === 'textarea' ) {\r\n <ui-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!form.get(field.name)?.disabled\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" >\r\n <textarea #ta\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n cols=\"4\"\r\n [placeholder]=\"field.placeholder??field.label\"></textarea>\r\n @if (field.maxLength && field.showCounter) {\r\n <span style=\"padding-top: 4px;\" counter> {{ta.value.length}} /{{field.maxLength}}</span>\r\n }\r\n </ui-input>\r\n }\r\n @if ( field.type === 'phone' ) {\r\n <ui-phone-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!form.get(field.name)?.disabled\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" \r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [placeholder]=\"field.placeholder??field.label\"\r\n >\r\n </ui-phone-input>\r\n }\r\n @else if (field.type === 'date') {\r\n <ui-date-picker\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [justMonth]=\"!!field.monthMode\"\r\n [monthDay]=\"field.monthDay||'first'\"\r\n [formControlName]=\"field.name\"\r\n ></ui-date-picker>\r\n }\r\n @else if (field.type === 'time') {\r\n <ui-time-picker\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [interval]=\"field.timeInterval??5\"\r\n [formControlName]=\"field.name\"\r\n ></ui-time-picker>\r\n }\r\n @else if (field.type === 'select') {\r\n <ui-select\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\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 === 'searcher') {\r\n <ui-searcher\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\"\r\n [searchFn]=\"field.searchFn\"\r\n [itemDisplayFn]=\"field.searchDisplayFn\"\r\n [itemIsEnabledFn]=\"field.searchIsEnabledFn\"\r\n [placeholder]=\"field.placeholder??'Buscar...'\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n ></ui-searcher>\r\n }\r\n @else if (field.type === 'pool') {\r\n <ui-pool-options\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [multy]=\"field.multyoption??false\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-pool-options>\r\n }\r\n @else if (field.type === 'checkbox') {\r\n <ui-checkbox\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\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 ></ui-checkbox>\r\n }\r\n @else if (field.type === 'slider') {\r\n <ui-slider\r\n [min]=\"field.min??0\"\r\n [max]=\"field.max??100\"\r\n [step]=\"field.sliderInterval??1\"\r\n [markerCount]=\"field.sliderMarks??5\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n ></ui-slider>\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 + (field.required ? ' *' : '')\"\r\n >\r\n </ui-checkbox>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 399px){.form{grid-template-columns:1fr}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 400px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}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}.new-line{grid-column-start:1}\n"] }]
|
|
971
1719
|
}], propDecorators: { fields: [{
|
|
972
1720
|
type: Input
|
|
973
1721
|
}], form: [{
|
|
@@ -1481,7 +2229,7 @@ class UicMultySelectComponent extends base {
|
|
|
1481
2229
|
useExisting: forwardRef(() => UicMultySelectComponent),
|
|
1482
2230
|
multi: true
|
|
1483
2231
|
}
|
|
1484
|
-
], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: 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, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon
|
|
2232
|
+
], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: 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, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled\" >TEXTO PENDIENTE</div>\r\n @if (!disabled && !loading) {\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 <div class=\"multyoptions-header\">\r\n <ui-checkbox [noPadding]=\"true\"\r\n [ngModel]=\"allSelected\" \r\n (ngModelChange)=\"toggleAll($event)\"\r\n placeholder=\"Todos\"></ui-checkbox>\r\n </div>\r\n <!-- OPCIONES -->\r\n <div class=\"input-option-scroll\"> \r\n @for (option of options; track $index) {\r\n <div (click)=\"toggleOption(option.id??option.text)\" class=\"input-multyoption\">\r\n <ui-checkbox \r\n [ngModel]=\"selectedSet.has(option.id??option.text)\"\r\n [noPadding]=\"true\" \r\n [placeholder]=\"option.text\"></ui-checkbox>\r\n </div> \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 class=\"multyoptions-footer\">\r\n <ui-button (click)=\"closeList()\" color=\"black\" type=\"bordered\" size=\"s\">Cancelar</ui-button>\r\n <ui-button (click)=\"applySelection()\" color=\"black\" size=\"s\">Aplicar</ui-button>\r\n </div> -->\r\n </div>\r\n </ng-template>\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;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{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-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{color:var(--grey-700);margin-right:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.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(--disabled-background);color:var(--disabled-color)}.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:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.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)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".input-multyoption{display:flex;align-items:center;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-multyoption-focused{background-color:var(--primary-500)}.input-multyoption:hover{background-color:var(--secondary-100);cursor:pointer}.multyoptions-header{display:flex;align-items:center;gap:10px;padding:5px 3px;border-bottom:solid 1px var(--grey-300)}.multyoptions-footer{display:flex;padding:4px;justify-content:space-around;border-top:solid 1px var(--grey-300)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
1485
2233
|
}
|
|
1486
2234
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicMultySelectComponent, decorators: [{
|
|
1487
2235
|
type: Component,
|
|
@@ -1491,7 +2239,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1491
2239
|
useExisting: forwardRef(() => UicMultySelectComponent),
|
|
1492
2240
|
multi: true
|
|
1493
2241
|
}
|
|
1494
|
-
], 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, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon
|
|
2242
|
+
], 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, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled\" >TEXTO PENDIENTE</div>\r\n @if (!disabled && !loading) {\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 <div class=\"multyoptions-header\">\r\n <ui-checkbox [noPadding]=\"true\"\r\n [ngModel]=\"allSelected\" \r\n (ngModelChange)=\"toggleAll($event)\"\r\n placeholder=\"Todos\"></ui-checkbox>\r\n </div>\r\n <!-- OPCIONES -->\r\n <div class=\"input-option-scroll\"> \r\n @for (option of options; track $index) {\r\n <div (click)=\"toggleOption(option.id??option.text)\" class=\"input-multyoption\">\r\n <ui-checkbox \r\n [ngModel]=\"selectedSet.has(option.id??option.text)\"\r\n [noPadding]=\"true\" \r\n [placeholder]=\"option.text\"></ui-checkbox>\r\n </div> \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 class=\"multyoptions-footer\">\r\n <ui-button (click)=\"closeList()\" color=\"black\" type=\"bordered\" size=\"s\">Cancelar</ui-button>\r\n <ui-button (click)=\"applySelection()\" color=\"black\" size=\"s\">Aplicar</ui-button>\r\n </div> -->\r\n </div>\r\n </ng-template>\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;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{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-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{color:var(--grey-700);margin-right:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.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(--disabled-background);color:var(--disabled-color)}.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:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.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)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".input-multyoption{display:flex;align-items:center;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-multyoption-focused{background-color:var(--primary-500)}.input-multyoption:hover{background-color:var(--secondary-100);cursor:pointer}.multyoptions-header{display:flex;align-items:center;gap:10px;padding:5px 3px;border-bottom:solid 1px var(--grey-300)}.multyoptions-footer{display:flex;padding:4px;justify-content:space-around;border-top:solid 1px var(--grey-300)}\n"] }]
|
|
1495
2243
|
}], propDecorators: { icon: [{
|
|
1496
2244
|
type: Input
|
|
1497
2245
|
}], iconColor: [{
|
|
@@ -1616,11 +2364,11 @@ class UicTableUicSearcherComponent {
|
|
|
1616
2364
|
}
|
|
1617
2365
|
}
|
|
1618
2366
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUicSearcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1619
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableUicSearcherComponent, isStandalone: true, selector: "uic-table-searcher", inputs: { placeholder: "placeholder", label: "label", searchOnKeydown: "searchOnKeydown", showButtonText: "showButtonText", showSearchButton: "showSearchButton" }, outputs: { filter: "filter" }, ngImport: i0, template: "\r\n<div class=\"searcher\">\r\n <div
|
|
2367
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableUicSearcherComponent, isStandalone: true, selector: "uic-table-searcher", inputs: { placeholder: "placeholder", label: "label", searchOnKeydown: "searchOnKeydown", showButtonText: "showButtonText", showSearchButton: "showSearchButton" }, outputs: { filter: "filter" }, ngImport: i0, template: "\r\n<div class=\"searcher\">\r\n <div style=\"width: 300px;\">\r\n <ui-input internalIcon=\"ri-search-line\">\r\n <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" placeholder=\"{{placeholder}}\">\r\n </ui-input>\r\n </div>\r\n @if (showSearchButton) {\r\n <ui-button tip=\"Buscar\" [iconOnly]=\"!showButtonText\" (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"ri-search-2-line\" size=\"m\">{{showButtonText?'Buscar':''}}</ui-button>\r\n }\r\n <ui-button tip=\"Limpiar\" [iconOnly]=\"!showButtonText\" (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-eraser-line\" size=\"m\">{{showButtonText?'Limpiar':''}}</ui-button>\r\n</div>", styles: [".searcher{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media (max-width: 399px){.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: 399px){.searcher .fakeinput{width:100%}}.searcher .fakeinput i{font-size:24px;margin-right:8px}.searcher .fakeinput input{width:100%;border:none}.searcher .fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}\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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }] });
|
|
1620
2368
|
}
|
|
1621
2369
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUicSearcherComponent, decorators: [{
|
|
1622
2370
|
type: Component,
|
|
1623
|
-
args: [{ selector: 'uic-table-searcher', imports: [UicButtonComponent, FormsModule, UicToolTipDirective], template: "\r\n<div class=\"searcher\">\r\n <div
|
|
2371
|
+
args: [{ selector: 'uic-table-searcher', imports: [UicButtonComponent, FormsModule, UicToolTipDirective, UicInputComponent], template: "\r\n<div class=\"searcher\">\r\n <div style=\"width: 300px;\">\r\n <ui-input internalIcon=\"ri-search-line\">\r\n <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" placeholder=\"{{placeholder}}\">\r\n </ui-input>\r\n </div>\r\n @if (showSearchButton) {\r\n <ui-button tip=\"Buscar\" [iconOnly]=\"!showButtonText\" (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"ri-search-2-line\" size=\"m\">{{showButtonText?'Buscar':''}}</ui-button>\r\n }\r\n <ui-button tip=\"Limpiar\" [iconOnly]=\"!showButtonText\" (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-eraser-line\" size=\"m\">{{showButtonText?'Limpiar':''}}</ui-button>\r\n</div>", styles: [".searcher{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media (max-width: 399px){.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: 399px){.searcher .fakeinput{width:100%}}.searcher .fakeinput i{font-size:24px;margin-right:8px}.searcher .fakeinput input{width:100%;border:none}.searcher .fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}\n"] }]
|
|
1624
2372
|
}], propDecorators: { placeholder: [{
|
|
1625
2373
|
type: Input
|
|
1626
2374
|
}], label: [{
|
|
@@ -1740,11 +2488,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1740
2488
|
class UicTableUserComponent {
|
|
1741
2489
|
user;
|
|
1742
2490
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1743
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableUserComponent, isStandalone: true, selector: "uic-table-user", inputs: { user: "user" }, ngImport: i0, template: "@if (user) {\r\n <div class=\"user-row\">\r\n <div class=\"user-inits\">\r\n {{user.name | nameInitials}}\r\n </div>\r\n <div class=\"user-row-data\">\r\n <div>{{user.name}}</div>\r\n <p>{{user.id}}</p>\r\n </div>\r\n </div>\r\n}@else{\r\n -\r\n}", styles: [".user-inits{width:32px;height:32px;border-radius:50px;border:solid 1px var(--secondary-600);background-color:var(--secondary-300);color:var(--secondary-600);display:flex;justify-content:center;align-items:center;margin-right:6px}.user-row{display:flex;align-items:center;width:fit-content}.user-row-data{min-width:150px;flex:1 1;font-weight:600;text-align:left;color:var(--grey-900);font-size:
|
|
2491
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableUserComponent, isStandalone: true, selector: "uic-table-user", inputs: { user: "user" }, ngImport: i0, template: "@if (user) {\r\n <div class=\"user-row\">\r\n <div class=\"user-inits\">\r\n {{user.name | nameInitials}}\r\n </div>\r\n <div class=\"user-row-data\">\r\n <div>{{user.name}}</div>\r\n <p>{{user.id}}</p>\r\n </div>\r\n </div>\r\n}@else{\r\n -\r\n}", styles: [".user-inits{width:32px;height:32px;border-radius:50px;border:solid 1px var(--secondary-600);background-color:var(--secondary-300);color:var(--secondary-600);display:flex;justify-content:center;align-items:center;margin-right:6px}.user-row{display:flex;align-items:center;width:fit-content}.user-row-data{min-width:150px;flex:1 1;font-weight:600;text-align:left;color:var(--grey-900);font-size:.875rem;line-height:1rem}.user-row-data p{color:var(--grey-500);font-weight:400;margin-bottom:0;font-size:.75rem;line-height:1rem}\n"], dependencies: [{ kind: "pipe", type: UicNameInitsPipe, name: "nameInitials" }] });
|
|
1744
2492
|
}
|
|
1745
2493
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUserComponent, decorators: [{
|
|
1746
2494
|
type: Component,
|
|
1747
|
-
args: [{ selector: 'uic-table-user', imports: [UicNameInitsPipe], template: "@if (user) {\r\n <div class=\"user-row\">\r\n <div class=\"user-inits\">\r\n {{user.name | nameInitials}}\r\n </div>\r\n <div class=\"user-row-data\">\r\n <div>{{user.name}}</div>\r\n <p>{{user.id}}</p>\r\n </div>\r\n </div>\r\n}@else{\r\n -\r\n}", styles: [".user-inits{width:32px;height:32px;border-radius:50px;border:solid 1px var(--secondary-600);background-color:var(--secondary-300);color:var(--secondary-600);display:flex;justify-content:center;align-items:center;margin-right:6px}.user-row{display:flex;align-items:center;width:fit-content}.user-row-data{min-width:150px;flex:1 1;font-weight:600;text-align:left;color:var(--grey-900);font-size:
|
|
2495
|
+
args: [{ selector: 'uic-table-user', imports: [UicNameInitsPipe], template: "@if (user) {\r\n <div class=\"user-row\">\r\n <div class=\"user-inits\">\r\n {{user.name | nameInitials}}\r\n </div>\r\n <div class=\"user-row-data\">\r\n <div>{{user.name}}</div>\r\n <p>{{user.id}}</p>\r\n </div>\r\n </div>\r\n}@else{\r\n -\r\n}", styles: [".user-inits{width:32px;height:32px;border-radius:50px;border:solid 1px var(--secondary-600);background-color:var(--secondary-300);color:var(--secondary-600);display:flex;justify-content:center;align-items:center;margin-right:6px}.user-row{display:flex;align-items:center;width:fit-content}.user-row-data{min-width:150px;flex:1 1;font-weight:600;text-align:left;color:var(--grey-900);font-size:.875rem;line-height:1rem}.user-row-data p{color:var(--grey-500);font-weight:400;margin-bottom:0;font-size:.75rem;line-height:1rem}\n"] }]
|
|
1748
2496
|
}], propDecorators: { user: [{
|
|
1749
2497
|
type: Input
|
|
1750
2498
|
}] } });
|
|
@@ -1900,7 +2648,7 @@ class UicTableComponent {
|
|
|
1900
2648
|
searchPlaceholder = 'Buscar';
|
|
1901
2649
|
striped = false;
|
|
1902
2650
|
showPagination = true;
|
|
1903
|
-
showEmptyMessage =
|
|
2651
|
+
showEmptyMessage = false;
|
|
1904
2652
|
emptyMessage = 'No hay elementos';
|
|
1905
2653
|
searcherShowButtonText = false;
|
|
1906
2654
|
action = new EventEmitter();
|
|
@@ -2007,7 +2755,7 @@ class UicTableComponent {
|
|
|
2007
2755
|
this.checkedChange.emit(Array.from(this.checkedIds));
|
|
2008
2756
|
}
|
|
2009
2757
|
areAllSelected() {
|
|
2010
|
-
this.allSelected = this.checkedIds.size === this.data.length
|
|
2758
|
+
this.allSelected = this.checkedIds.size === this.data.length;
|
|
2011
2759
|
}
|
|
2012
2760
|
ngOnChanges() {
|
|
2013
2761
|
this.areAllSelected();
|
|
@@ -2020,14 +2768,14 @@ class UicTableComponent {
|
|
|
2020
2768
|
this.checkedChange.emit([]);
|
|
2021
2769
|
}
|
|
2022
2770
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2023
|
-
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", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", totalItems: "totalItems", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", striped: "striped", showPagination: "showPagination", showEmptyMessage: "showEmptyMessage", emptyMessage: "emptyMessage", searcherShowButtonText: "searcherShowButtonText" }, 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 [showButtonText]=\"searcherShowButtonText\" (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>\r\n <ng-content select=\"[filters]\"></ng-content>\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\">\r\n @if (header.type=='checkbox') {\r\n <div>\r\n <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n </div>\r\n }\r\n {{header.label.toUpperCase() }} \r\n @if (header.sortEnable) {\r\n <div class=\"sort-arrow\" (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 </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(squeletonRows); 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 <div class=\"cell-content\" \r\n [style.justify-content]=\"header.align||null\"\r\n [style.width.px]=\"header.width || null\">\r\n @if (header.type == 'text') {\r\n {{ getValue(row.data,header.key) }} \r\n }\r\n @if (header.type == 'icon-list') {\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 }\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)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox> \r\n }\r\n @else if (header.type == 'status'){\r\n <ui-status-label [color]=\"getBackgroundColor(row.data,header.key)\"> {{getValue(row.data,header.key)}} </ui-status-label> \r\n }\r\n @else if (header.type == '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 [text]=\"btn.text??''\"\r\n [type]=\"btn.type??'filled'\"\r\n [iconOnly]=\"!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 @if ( header.moreActions && header.moreActions.length>0 ) {\r\n @for (ma of header.moreActions; track $index) {\r\n <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\" [options]=\"getMoreActions(ma.actions||[])\"></ui-action-button>\r\n }\r\n }\r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n }\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 [buttonSize]=\"buttonSize\"\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(--table-border-color);border-radius:12px}table{width:100%;font-weight:400;border-collapse:collapse}table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500;color:var(--table-header-color);background-color:var(--table-header-background)}table th .th-wrap{white-space:nowrap;display:flex;align-items:center;justify-content:center}table th .th-wrap .sort-arrow{font-size:12px;line-height:12px}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;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}table td,table th{text-align:center;padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none;border-bottom:solid 1px var(--table-border-color)}table tr{transition:ease .3s}table tr:hover{background-color:var(--grey-50)}tbody tr:last-child td{border-bottom:none}.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(--table-border-color)}.cell-content{display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.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: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown", "showButtonText", "showSearchButton"], outputs: ["filter"] }, { kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "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", "loading", "noPadding", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [highlightRow, animatedRow] });
|
|
2771
|
+
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", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", totalItems: "totalItems", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", striped: "striped", showPagination: "showPagination", showEmptyMessage: "showEmptyMessage", emptyMessage: "emptyMessage", searcherShowButtonText: "searcherShowButtonText" }, 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 [showButtonText]=\"searcherShowButtonText\" (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>\r\n <ng-content select=\"[filters]\"></ng-content>\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\">\r\n @if (header.type=='checkbox') {\r\n <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n }\r\n {{header.label.toUpperCase() }} \r\n @if (header.sortEnable) {\r\n <div class=\"sort-arrow\" (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 </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(squeletonRows); 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 <div class=\"cell-content\" \r\n [style.justify-content]=\"header.align||null\"\r\n [style.width.px]=\"header.width || null\">\r\n @if (header.type == 'text') {\r\n {{ getValue(row.data,header.key) }} \r\n }\r\n @if (header.type == 'icon-list') {\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 }\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)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox> \r\n }\r\n @else if (header.type == 'status'){\r\n <ui-status-label [color]=\"getBackgroundColor(row.data,header.key)\"> {{getValue(row.data,header.key)}} </ui-status-label> \r\n }\r\n @else if (header.type == '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 [text]=\"btn.text??''\"\r\n [type]=\"btn.type??'filled'\"\r\n [iconOnly]=\"!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 @if ( header.moreActions && header.moreActions.length>0 ) {\r\n <ui-action-button (optionSelected)=\"doAction(row.id,$event.id)\" [options]=\"getMoreActions(header.moreActions??[])\"></ui-action-button>\r\n }\r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n }\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 [buttonSize]=\"buttonSize\"\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(--table-border-color);border-radius:12px}table{width:100%;font-weight:400;border-collapse:collapse}table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500;color:var(--table-header-color);background-color:var(--table-header-background)}table th .th-wrap{white-space:nowrap;display:flex;align-items:center;justify-content:center}table th .th-wrap .sort-arrow{font-size:12px;line-height:12px}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;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}table td,table th{text-align:center;padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none;border-bottom:solid 1px var(--table-border-color)}table tr{transition:ease .3s}table tr:hover{background-color:var(--grey-50)}tbody tr:last-child td{border-bottom:none}.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(--table-border-color)}.cell-content{display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.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: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown", "showButtonText", "showSearchButton"], outputs: ["filter"] }, { kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "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", "loading", "noPadding", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [highlightRow, animatedRow] });
|
|
2024
2772
|
}
|
|
2025
2773
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, decorators: [{
|
|
2026
2774
|
type: Component,
|
|
2027
2775
|
args: [{ selector: 'ui-table', imports: [CommonModule, UicButtonComponent,
|
|
2028
2776
|
UicTableUserComponent, UicTableListComponent, UicActionButtonComponent,
|
|
2029
2777
|
UicTableUicSearcherComponent, UicStatusLabelComponent,
|
|
2030
|
-
UicTablePaginationComponent, UicToolTipDirective, UicCheckboxComponent, FormsModule], animations: [highlightRow, animatedRow], template: "<div class=\"table-filters\">\r\n @if (searchEnabled) {\r\n <uic-table-searcher [showButtonText]=\"searcherShowButtonText\" (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>\r\n <ng-content select=\"[filters]\"></ng-content>\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\">\r\n @if (header.type=='checkbox') {\r\n <div>\r\n <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n </div>\r\n }\r\n {{header.label.toUpperCase() }} \r\n @if (header.sortEnable) {\r\n <div class=\"sort-arrow\" (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 </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(squeletonRows); 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 <div class=\"cell-content\" \r\n [style.justify-content]=\"header.align||null\"\r\n [style.width.px]=\"header.width || null\">\r\n @if (header.type == 'text') {\r\n {{ getValue(row.data,header.key) }} \r\n }\r\n @if (header.type == 'icon-list') {\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 }\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)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox> \r\n }\r\n @else if (header.type == 'status'){\r\n <ui-status-label [color]=\"getBackgroundColor(row.data,header.key)\"> {{getValue(row.data,header.key)}} </ui-status-label> \r\n }\r\n @else if (header.type == '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 [text]=\"btn.text??''\"\r\n [type]=\"btn.type??'filled'\"\r\n [iconOnly]=\"!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 @if ( header.moreActions && header.moreActions.length>0 ) {\r\n @for (ma of header.moreActions; track $index) {\r\n <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\" [options]=\"getMoreActions(ma.actions||[])\"></ui-action-button>\r\n }\r\n }\r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n }\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 [buttonSize]=\"buttonSize\"\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(--table-border-color);border-radius:12px}table{width:100%;font-weight:400;border-collapse:collapse}table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500;color:var(--table-header-color);background-color:var(--table-header-background)}table th .th-wrap{white-space:nowrap;display:flex;align-items:center;justify-content:center}table th .th-wrap .sort-arrow{font-size:12px;line-height:12px}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;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}table td,table th{text-align:center;padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none;border-bottom:solid 1px var(--table-border-color)}table tr{transition:ease .3s}table tr:hover{background-color:var(--grey-50)}tbody tr:last-child td{border-bottom:none}.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(--table-border-color)}.cell-content{display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.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"] }]
|
|
2778
|
+
UicTablePaginationComponent, UicToolTipDirective, UicCheckboxComponent, FormsModule], animations: [highlightRow, animatedRow], template: "<div class=\"table-filters\">\r\n @if (searchEnabled) {\r\n <uic-table-searcher [showButtonText]=\"searcherShowButtonText\" (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>\r\n <ng-content select=\"[filters]\"></ng-content>\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\">\r\n @if (header.type=='checkbox') {\r\n <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n }\r\n {{header.label.toUpperCase() }} \r\n @if (header.sortEnable) {\r\n <div class=\"sort-arrow\" (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 </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(squeletonRows); 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 <div class=\"cell-content\" \r\n [style.justify-content]=\"header.align||null\"\r\n [style.width.px]=\"header.width || null\">\r\n @if (header.type == 'text') {\r\n {{ getValue(row.data,header.key) }} \r\n }\r\n @if (header.type == 'icon-list') {\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 }\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)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox> \r\n }\r\n @else if (header.type == 'status'){\r\n <ui-status-label [color]=\"getBackgroundColor(row.data,header.key)\"> {{getValue(row.data,header.key)}} </ui-status-label> \r\n }\r\n @else if (header.type == '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 [text]=\"btn.text??''\"\r\n [type]=\"btn.type??'filled'\"\r\n [iconOnly]=\"!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 @if ( header.moreActions && header.moreActions.length>0 ) {\r\n <ui-action-button (optionSelected)=\"doAction(row.id,$event.id)\" [options]=\"getMoreActions(header.moreActions??[])\"></ui-action-button>\r\n }\r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n }\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 [buttonSize]=\"buttonSize\"\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(--table-border-color);border-radius:12px}table{width:100%;font-weight:400;border-collapse:collapse}table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500;color:var(--table-header-color);background-color:var(--table-header-background)}table th .th-wrap{white-space:nowrap;display:flex;align-items:center;justify-content:center}table th .th-wrap .sort-arrow{font-size:12px;line-height:12px}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;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}table td,table th{text-align:center;padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none;border-bottom:solid 1px var(--table-border-color)}table tr{transition:ease .3s}table tr:hover{background-color:var(--grey-50)}tbody tr:last-child td{border-bottom:none}.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(--table-border-color)}.cell-content{display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.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"] }]
|
|
2031
2779
|
}], propDecorators: { columns: [{
|
|
2032
2780
|
type: Input
|
|
2033
2781
|
}], data: [{
|
|
@@ -2384,11 +3132,11 @@ class UicSideModalComponent {
|
|
|
2384
3132
|
this.modal.triggerSave();
|
|
2385
3133
|
}
|
|
2386
3134
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSideModalComponent, deps: [{ token: UiModalRef }, { token: MODAL_COMPONENT }, { token: MODAL_CONFIG }, { token: i0.Injector }, { token: UicModalService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2387
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSideModalComponent, isStandalone: true, selector: "ui-side-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\"> \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n (@sideModal.done)=\"onAnimationDone($event)\" \r\n class=\"sidemodal\" \r\n [style.padding-top]=\"myConfig.headerEnabled?'28px':'0'\"\r\n [style.width]=\"myConfig.width??'60%'\" \r\n (click)=\"$event.stopPropagation()\">\r\n @if (myConfig.headerEnabled) {\r\n <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n }\r\n <div class=\"sidemodal-body\" [class.body-padding]=\"myConfig.title!=''\">\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </div>\r\n @if (myConfig.footerEnabled) {\r\n <div class=\"sidemodal-footer\">\r\n @if (myConfig.showCancelButton) {\r\n <ui-button (click)=\"cancel()\" color=\"black\" size=\"l\" type=\"bordered\" [icon]=\"myConfig.footerCancelIcon??'ri-close-line'\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n }\r\n <ui-button (click)=\"save()\" color=\"black\" size=\"l\" [rightIcon]=\"myConfig.footerOkIcon??'ri-check-line'\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n </div>\r\n }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:30px;height:30px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width: 399px){.sidemodal{width:100%!important}}@media (min-width: 400px) and (max-width: 767px){.sidemodal{width:90%!important}}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:32px}.sidemodal-footer{height:
|
|
3135
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSideModalComponent, isStandalone: true, selector: "ui-side-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\"> \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n (@sideModal.done)=\"onAnimationDone($event)\" \r\n class=\"sidemodal\" \r\n [style.padding-top]=\"myConfig.headerEnabled?'28px':'0'\"\r\n [style.width]=\"myConfig.width??'60%'\" \r\n (click)=\"$event.stopPropagation()\">\r\n @if (myConfig.headerEnabled) {\r\n <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n }\r\n <div class=\"sidemodal-body\" [class.body-padding]=\"myConfig.title!=''\">\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </div>\r\n @if (myConfig.footerEnabled) {\r\n <div class=\"sidemodal-footer\">\r\n @if (myConfig.showCancelButton) {\r\n <ui-button (click)=\"cancel()\" color=\"black\" size=\"l\" type=\"bordered\" [icon]=\"myConfig.footerCancelIcon??'ri-close-line'\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n }\r\n <ui-button (click)=\"save()\" color=\"black\" size=\"l\" [rightIcon]=\"myConfig.footerOkIcon??'ri-check-line'\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n </div>\r\n }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:30px;height:30px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width: 399px){.sidemodal{width:100%!important}}@media (min-width: 400px) and (max-width: 767px){.sidemodal{width:90%!important}}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:32px}.sidemodal-footer{height:calc(9 * var(--design-size-ref));padding:0 calc(4 * var(--design-size-ref));width:100%;display:flex;align-items:center;gap:8px;justify-content:flex-end;border-top:1px solid var(--grey-300)}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [sideModal, fadeBackdrop] });
|
|
2388
3136
|
}
|
|
2389
3137
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSideModalComponent, decorators: [{
|
|
2390
3138
|
type: Component,
|
|
2391
|
-
args: [{ selector: 'ui-side-modal', imports: [PortalModule, UicButtonComponent], animations: [sideModal, fadeBackdrop], template: "<div [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\"> \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n (@sideModal.done)=\"onAnimationDone($event)\" \r\n class=\"sidemodal\" \r\n [style.padding-top]=\"myConfig.headerEnabled?'28px':'0'\"\r\n [style.width]=\"myConfig.width??'60%'\" \r\n (click)=\"$event.stopPropagation()\">\r\n @if (myConfig.headerEnabled) {\r\n <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n }\r\n <div class=\"sidemodal-body\" [class.body-padding]=\"myConfig.title!=''\">\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </div>\r\n @if (myConfig.footerEnabled) {\r\n <div class=\"sidemodal-footer\">\r\n @if (myConfig.showCancelButton) {\r\n <ui-button (click)=\"cancel()\" color=\"black\" size=\"l\" type=\"bordered\" [icon]=\"myConfig.footerCancelIcon??'ri-close-line'\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n }\r\n <ui-button (click)=\"save()\" color=\"black\" size=\"l\" [rightIcon]=\"myConfig.footerOkIcon??'ri-check-line'\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n </div>\r\n }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:30px;height:30px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width: 399px){.sidemodal{width:100%!important}}@media (min-width: 400px) and (max-width: 767px){.sidemodal{width:90%!important}}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:32px}.sidemodal-footer{height:
|
|
3139
|
+
args: [{ selector: 'ui-side-modal', imports: [PortalModule, UicButtonComponent], animations: [sideModal, fadeBackdrop], template: "<div [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\"> \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n (@sideModal.done)=\"onAnimationDone($event)\" \r\n class=\"sidemodal\" \r\n [style.padding-top]=\"myConfig.headerEnabled?'28px':'0'\"\r\n [style.width]=\"myConfig.width??'60%'\" \r\n (click)=\"$event.stopPropagation()\">\r\n @if (myConfig.headerEnabled) {\r\n <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n }\r\n <div class=\"sidemodal-body\" [class.body-padding]=\"myConfig.title!=''\">\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </div>\r\n @if (myConfig.footerEnabled) {\r\n <div class=\"sidemodal-footer\">\r\n @if (myConfig.showCancelButton) {\r\n <ui-button (click)=\"cancel()\" color=\"black\" size=\"l\" type=\"bordered\" [icon]=\"myConfig.footerCancelIcon??'ri-close-line'\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n }\r\n <ui-button (click)=\"save()\" color=\"black\" size=\"l\" [rightIcon]=\"myConfig.footerOkIcon??'ri-check-line'\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n </div>\r\n }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:30px;height:30px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width: 399px){.sidemodal{width:100%!important}}@media (min-width: 400px) and (max-width: 767px){.sidemodal{width:90%!important}}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:32px}.sidemodal-footer{height:calc(9 * var(--design-size-ref));padding:0 calc(4 * var(--design-size-ref));width:100%;display:flex;align-items:center;gap:8px;justify-content:flex-end;border-top:1px solid var(--grey-300)}\n"] }]
|
|
2392
3140
|
}], ctorParameters: () => [{ type: UiModalRef, decorators: [{
|
|
2393
3141
|
type: Inject,
|
|
2394
3142
|
args: [UiModalRef]
|
|
@@ -2528,5 +3276,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2528
3276
|
* Generated bundle index. Do not edit.
|
|
2529
3277
|
*/
|
|
2530
3278
|
|
|
2531
|
-
export { MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA,
|
|
3279
|
+
export { MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiModalRef, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicFormWrapperComponent, UicInputComponent, UicModalService, UicMultySelectComponent, UicNameInitsPipe, UicPhoneInputComponent, UicPushAlertService, UicSearcherComponent, UicSelectComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, animatedRow, fadeAndRise, fadeBackdrop, highlightRow, pushTop, sideModal, simpleFade };
|
|
2532
3280
|
//# sourceMappingURL=ui-core-abv.mjs.map
|