lct-components
Version:
LCT basic components
646 lines (638 loc) • 178 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, EventEmitter, Input, Output, ViewChild, Pipe, Directive, HostListener, NgModule } from '@angular/core';
import { HttpHeaders } from '@angular/common/http';
import * as i1 from '@angular/platform-browser';
import { __awaiter } from 'tslib';
import { Subject, BehaviorSubject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import * as i4 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
class LctComponentsService {
constructor() { }
storeSelected() {
const sessionStore = sessionStorage.getItem('storeSelected');
return JSON.parse(sessionStore);
}
getCorporativeCommerce(_commerce) {
const c = _commerce === null || _commerce === void 0 ? void 0 : _commerce.toLowerCase();
switch (c) {
case 'falabella':
case 'fal':
return 'FAL';
case 'sodimac':
case 'sod':
return 'SOD';
case 'tottus':
case 'tot':
return 'TOT';
case 'corp':
return 'CORP';
case 'mall plaza':
case 'mpl':
return 'MPL';
case 'ikea':
case 'iks':
return 'IKS';
case 'metro':
return 'Metro';
default:
return 'CORP';
}
}
createHeader() {
const { commerce, country } = this.storeSelected();
const headers = {
'Content-Type': 'application/json',
Accept: 'application/json',
'x-commerce': this.getCorporativeCommerce(commerce),
'x-country': country || 'CL',
};
const httpOptions = { headers: new HttpHeaders(Object.assign({}, headers)) };
return httpOptions;
}
getHeaderJson() {
const { commerce, country } = this.storeSelected();
const headers = {
'Content-Type': 'application/json',
Accept: 'application/json',
'x-commerce': commerce || 'Falabella',
'x-country': country || 'CL',
'X-chRef': 'WEB',
};
return headers;
}
getSimpleHeader() {
const { commerce, country } = this.storeSelected();
const headers = {
'x-commerce': this.getCorporativeCommerce(commerce),
'x-country': country || 'CL',
'X-chRef': 'WEB',
};
const httpOptions = { headers: new HttpHeaders(Object.assign({}, headers)) };
return httpOptions;
}
}
LctComponentsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LctComponentsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
LctComponentsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LctComponentsService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LctComponentsService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: function () { return []; } });
class LctComponentsComponent {
constructor() { }
ngOnInit() {
}
}
LctComponentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LctComponentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
LctComponentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: LctComponentsComponent, selector: "lct-lctComponents", ngImport: i0, template: `
<p>
lct-components works!
</p>
`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LctComponentsComponent, decorators: [{
type: Component,
args: [{
selector: 'lct-lctComponents',
template: `
<p>
lct-components works!
</p>
`,
styles: []
}]
}], ctorParameters: function () { return []; } });
class InputTextComponent {
constructor(render) {
this.render = render;
this.disabled = false;
this.icon = '';
this.iconPosition = 'right';
this.pdaAutoEnter = false;
this.placeholder = '';
this.showIcon = false;
this.title = 'Insert Title';
this.type = 'text';
this.error = false;
this.id = ''; // ID en Button Opcional
this.transparent = false; // transparent style
this.enterEmitted = new EventEmitter();
this.iconClick = new EventEmitter();
this.inputClick = new EventEmitter();
this.inputValue = '';
this.selectionStart = 0;
this.selectionEnd = 0;
this.lpnUpdate = new Subject();
this.propagateChange = (_) => { };
this.lpnUpdate
.pipe(debounceTime(200)
/* distinctUntilChanged() */ // esto previene que el valor ser repita
)
.subscribe((value) => __awaiter(this, void 0, void 0, function* () {
if (value && this.pdaAutoEnter) {
this.enterEmit();
}
else {
if (!value) {
this.selectionStart = 0;
this.selectionEnd = 0;
}
return;
}
}));
}
// Propiedad calculada para generar el id dinámico
get inputId() {
return this.id ? `input-${this.id}` : null;
}
ngAfterViewInit() {
var _a, _b, _c, _d, _e, _f;
if (this.iconPosition === "left" && this.showIcon) {
this.render.addClass((_a = this.inputScan) === null || _a === void 0 ? void 0 : _a.nativeElement, 'iconLeft');
this.render.addClass((_b = this.iconDiv) === null || _b === void 0 ? void 0 : _b.nativeElement, 'iconLeft');
}
if (this.error) {
this.render.addClass((_c = this.inputScan) === null || _c === void 0 ? void 0 : _c.nativeElement, 'error');
this.render.addClass((_d = this.titleRef) === null || _d === void 0 ? void 0 : _d.nativeElement, 'error');
}
if (this.transparent) {
this.render.addClass((_e = this.inputScan) === null || _e === void 0 ? void 0 : _e.nativeElement, 'transparent');
this.render.addClass((_f = this.titleRef) === null || _f === void 0 ? void 0 : _f.nativeElement, 'transparent');
}
}
ngOnInit() {
}
ngOnChanges(changes) {
var _a, _b, _c, _d, _e, _f, _g, _h;
if (changes['pdaAutoEnter'] && !changes['pdaAutoEnter'].firstChange) {
this.pdaAutoEnter = changes['pdaAutoEnter'].currentValue;
}
if (changes['error'] && !changes['error'].firstChange) {
if (changes.error.currentValue) {
this.render.addClass((_a = this.inputScan) === null || _a === void 0 ? void 0 : _a.nativeElement, 'error');
this.render.addClass((_b = this.titleRef) === null || _b === void 0 ? void 0 : _b.nativeElement, 'error');
}
else {
this.render.removeClass((_c = this.inputScan) === null || _c === void 0 ? void 0 : _c.nativeElement, 'error');
this.render.removeClass((_d = this.titleRef) === null || _d === void 0 ? void 0 : _d.nativeElement, 'error');
}
}
if (changes['transparent'] && !changes['transparent'].firstChange) {
if (changes.error.currentValue) {
this.render.addClass((_e = this.inputScan) === null || _e === void 0 ? void 0 : _e.nativeElement, 'transparent');
this.render.addClass((_f = this.titleRef) === null || _f === void 0 ? void 0 : _f.nativeElement, 'transparent');
}
else {
this.render.addClass((_g = this.inputScan) === null || _g === void 0 ? void 0 : _g.nativeElement, 'transparent');
this.render.addClass((_h = this.titleRef) === null || _h === void 0 ? void 0 : _h.nativeElement, 'transparent');
}
}
}
writeValue(value) {
if (typeof value !== 'undefined') {
this.onKeyUpHandler(value);
}
}
registerOnChange(fn) {
this.propagateChange = fn;
}
registerOnTouched(fn) {
// console.log('reg touch', fn)
}
onKeyUpHandler(event) {
if (!this.inputValue && typeof event === 'string') {
this.inputValue = event;
}
if (this.inputValue && event === null) {
this.inputValue = '';
}
if (this.inputValue && typeof event === 'string' && event === '') {
this.inputValue = '';
}
this.propagateChange(this.inputValue);
}
click() {
if (!this.disabled) {
this.iconClick.emit('iconClick');
}
}
clickInput() {
if (!this.disabled) {
this.inputClick.emit('inputClick');
}
}
enterEmit() {
if (this.inputValue) {
this.enterEmitted.emit(this.inputValue);
}
}
onPaste(ev) {
var _a, _b, _c, _d;
ev.preventDefault();
const clipboard = (_a = ev.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('Text');
if (clipboard) {
if (this.selectionEnd && this.selectionStart === ((_b = this.inputScan) === null || _b === void 0 ? void 0 : _b.nativeElement.selectionStart)) {
const slice1 = this.inputValue.slice(0, this.selectionStart);
const slice2 = this.inputValue.slice(this.selectionEnd);
this.inputValue = slice1 + clipboard + slice2;
setTimeout(() => {
var _a;
(_a = this.inputScan) === null || _a === void 0 ? void 0 : _a.nativeElement.setSelectionRange(slice1.length + clipboard.length, slice1.length + clipboard.length);
}, 20);
this.selectionStart = 0;
this.selectionEnd = 0;
}
else {
const slice1 = this.inputValue.slice(0, (_c = this.inputScan) === null || _c === void 0 ? void 0 : _c.nativeElement.selectionStart);
const slice2 = this.inputValue.slice((_d = this.inputScan) === null || _d === void 0 ? void 0 : _d.nativeElement.selectionStart);
this.inputValue = slice1 + clipboard + slice2;
setTimeout(() => {
var _a;
(_a = this.inputScan) === null || _a === void 0 ? void 0 : _a.nativeElement.setSelectionRange(slice1.length + clipboard.length, slice1.length + clipboard.length);
}, 20);
// this.inputValue = this.inputValue+clipboard;
}
}
}
selectionChange(ev) {
// console.log('selection asdf:', ev.target.value.substring(ev.target.selectionStart, ev.target.selectionEnd));
// console.log('start: ',ev.target.selectionStart, 'end:', ev.target.selectionEnd)
// this.selectedText = ev.target.value.substring(ev.target.selectionStart, ev.target.selectionEnd);
this.selectionStart = ev.target.selectionStart;
this.selectionEnd = ev.target.selectionEnd;
}
}
InputTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: InputTextComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
InputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: InputTextComponent, selector: "lct-input-text", inputs: { disabled: "disabled", icon: "icon", iconPosition: "iconPosition", pdaAutoEnter: "pdaAutoEnter", placeholder: "placeholder", showIcon: "showIcon", title: "title", type: "type", error: "error", id: "id", transparent: "transparent" }, outputs: { enterEmitted: "enterEmitted", iconClick: "iconClick", inputClick: "inputClick" }, providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: InputTextComponent,
multi: true
}], viewQueries: [{ propertyName: "inputScan", first: true, predicate: ["inputScan"], descendants: true }, { propertyName: "titleRef", first: true, predicate: ["titleRef"], descendants: true }, { propertyName: "iconDiv", first: true, predicate: ["iconDiv"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div>\n <div #titleRef class=\"title\">\n {{title}}\n </div>\n <div class=\"input-with-icon iconLeft\">\n <input [attr.id]=\"inputId\"\n [type]=\"type\"\n class=\"form-control-lct\"\n #inputScan\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"inputValue\"\n (keydown.enter)=\"enterEmit()\"\n (keydown.tab)=\"enterEmit()\"\n (keyup)=\"onKeyUpHandler($event)\"\n (click)=\"clickInput()\"\n (ngModelChange)=\"lpnUpdate.next(inputScan.value);\"\n (paste)=\"onPaste($event)\"\n (select)=\"selectionChange($event)\"\n >\n <div class=\"icon\" #iconDiv *ngIf=\"showIcon\">\n <img [src]=\"icon\" [ngStyle]=\"{'cursor': disabled ? 'not-allowed' : 'pointer'}\" alt=\"\" (click)=\"click()\">\n </div>\n </div>\n</div>\n", styles: ["*{font-family:\"Barlow\",\"Open Sans\",\"Helvetica Neue\",\"Segoe UI\",\"Calibri\",\"Arial\",sans-serif}.title{color:#3c4149;font-size:12px;letter-spacing:0;line-height:15px;margin-left:2px;margin-bottom:5px}.title.error{color:#c60e4c}.input-with-icon{box-sizing:border-box;position:relative;height:40px}.form-control-lct::placeholder{color:#3c4149}.input-with-icon .form-control-lct{height:100%;width:100%;border:0;border-radius:4px;background-color:#e0e5ee;box-sizing:border-box;color:#3c4149;font-size:14px;font-weight:400;letter-spacing:0;line-height:17px;padding:12px 20px 12px 15px}.input-with-icon .form-control-lct.error{color:#c60e4c;border:1px solid #C60E4C}.input-with-icon .form-control-lct.iconLeft{padding:12px 20px 12px 60px}.input-with-icon .form-control-lct:disabled{cursor:not-allowed;background-color:#f5f7fa;color:#c8ccd4}.input-with-icon .form-control-lct:focus-visible{outline:unset}.input-with-icon .form-control-lct.transparent{background-color:#fff;color:#fff}.input-with-icon .icon{position:absolute;right:1%;top:.01rem;width:2.6rem;height:2.6rem;border-radius:.3rem;display:flex;justify-content:center;align-items:center;box-sizing:border-box}.input-with-icon .icon :hover{cursor:pointer}@media (max-width: 375px){.input-with-icon .icon{top:.3rem}}.input-with-icon .icon.iconLeft{left:15px}\n"], directives: [{ type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: InputTextComponent, decorators: [{
type: Component,
args: [{
selector: 'lct-input-text',
templateUrl: './input-text.component.html',
styleUrls: ['./input-text.component.scss'],
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: InputTextComponent,
multi: true
}]
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { disabled: [{
type: Input
}], icon: [{
type: Input
}], iconPosition: [{
type: Input
}], pdaAutoEnter: [{
type: Input
}], placeholder: [{
type: Input
}], showIcon: [{
type: Input
}], title: [{
type: Input
}], type: [{
type: Input
}], error: [{
type: Input
}], id: [{
type: Input
}], transparent: [{
type: Input
}], enterEmitted: [{
type: Output
}], iconClick: [{
type: Output
}], inputClick: [{
type: Output
}], inputScan: [{
type: ViewChild,
args: ['inputScan']
}], titleRef: [{
type: ViewChild,
args: ['titleRef']
}], iconDiv: [{
type: ViewChild,
args: ['iconDiv']
}] } });
class LabelTitlePipe {
transform(value) {
const isMobile = window.innerWidth < 576;
if (isMobile && (value === null || value === void 0 ? void 0 : value.length) > 26)
return (value === null || value === void 0 ? void 0 : value.substring(0, 26)) + '...';
if ((value === null || value === void 0 ? void 0 : value.length) > 32)
return (value === null || value === void 0 ? void 0 : value.substring(0, 32)) + '...';
return value;
}
}
LabelTitlePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LabelTitlePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
LabelTitlePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LabelTitlePipe, name: "labelTitlePipe" });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LabelTitlePipe, decorators: [{
type: Pipe,
args: [{
name: 'labelTitlePipe'
}]
}] });
class LabelPipe {
transform(value) {
const isMobile = window.innerWidth < 576;
if (isMobile && (value === null || value === void 0 ? void 0 : value.length) > 32)
return (value === null || value === void 0 ? void 0 : value.substring(0, 32)) + '...';
if ((value === null || value === void 0 ? void 0 : value.length) > 34)
return (value === null || value === void 0 ? void 0 : value.substring(0, 34)) + '...';
return value;
}
}
LabelPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
LabelPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LabelPipe, name: "labelPipe" });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LabelPipe, decorators: [{
type: Pipe,
args: [{
name: 'labelPipe'
}]
}] });
class SelectMultipleComponent {
constructor(sanitizer) {
this.sanitizer = sanitizer;
this.list = [];
this.listFiltered = [];
this.title = 'Insert title';
this.disabled = 'false';
this.showIcon = true;
this.placeholder = 'Insert placeholder';
this.placeholderFilter = 'Buscar';
this.quantityToFilter = 6;
this.heightOptions = '200px';
this.id = ''; // ID en Button Opcional
this.shareCheckedList = new EventEmitter();
this.shareIndividualCheckedList = new EventEmitter();
this.setAutofocusEvent = new EventEmitter();
this.disabledValue = false;
this.filter = '';
this.showDropDown = false;
this.iconFinder = this.sanitizer.bypassSecurityTrustResourceUrl(`data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjE1MDMgMTIuNDE2M0MxMi4yOTUgMTIuMjcxNyAxMi41MTk1IDEyLjI1NTYgMTIuNjgxOSAxMi4zNjgxTDEyLjczOTYgMTIuNDE2M0wxNi40MDYxIDE2LjA4MjhDMTYuNTY4OCAxNi4yNDU1IDE2LjU2ODggMTYuNTA5MyAxNi40MDYxIDE2LjY3MkMxNi4yNjE0IDE2LjgxNjcgMTYuMDM2OSAxNi44MzI4IDE1Ljg3NDUgMTYuNzIwM0wxNS44MTY4IDE2LjY3MkwxMi4xNTAzIDEzLjAwNTZDMTEuOTg3NiAxMi44NDI4IDExLjk4NzYgMTIuNTc5IDEyLjE1MDMgMTIuNDE2M1oiIGZpbGw9IiMyNjQ5QjYiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi4zOTcxIDUuNTkxOTFDMTAuNDQ0NSAzLjYzOTI5IDcuMjc4NjggMy42MzkyOSA1LjMyNjA2IDUuNTkxOTFDMy4zNzM0NCA3LjU0NDUzIDMuMzczNDQgMTAuNzEwNCA1LjMyNjA2IDEyLjY2M0M3LjI3ODY4IDE0LjYxNTYgMTAuNDQ0NSAxNC42MTU2IDEyLjM5NzEgMTIuNjYzQzE0LjM0OTggMTAuNzEwNCAxNC4zNDk4IDcuNTQ0NTMgMTIuMzk3MSA1LjU5MTkxWk01LjkxNTMyIDEyLjA3MzdDNC4yODgxMyAxMC40NDY1IDQuMjg4MTMgNy44MDgzNSA1LjkxNTMyIDYuMTgxMTZDNy41NDI1IDQuNTUzOTggMTAuMTgwNyA0LjU1Mzk4IDExLjgwNzkgNi4xODExNkMxMy40MzUxIDcuODA4MzUgMTMuNDM1MSAxMC40NDY1IDExLjgwNzkgMTIuMDczN0MxMC4xODA3IDEzLjcwMDkgNy41NDI1IDEzLjcwMDkgNS45MTUzMiAxMi4wNzM3WiIgZmlsbD0iIzI2NDlCNiIvPgo8L3N2Zz4K`);
}
// Propiedad calculada para generar el id dinámico
get selectId() {
return this.id ? `select-${this.id}` : null;
}
ngOnInit() {
this.disabledValue = this.disabled === true || this.disabled == 'true' || this.disabled === '';
}
ngOnChanges(changes) {
if (changes['disabled'] && !changes['disabled'].firstChange) {
if (changes['disabled'].currentValue === true || changes['disabled'].currentValue == 'true' || changes['disabled'].currentValue === '') {
this.disabledValue = true;
}
else {
this.disabledValue = false;
}
}
}
getListChecked() {
return this.list.filter((o => { return o.checked === true; }));
}
getSelectedValue(status, name, value) {
if (value) {
this.currentSelected = { checked: status, name: name, value: value, quantity: 10 };
}
else {
this.currentSelected = { checked: status, name: name, quantity: 10 };
}
//share checked list
this.shareChecked();
//share individual selected item
this.shareIndividualStatus();
}
shareChecked() {
this.shareCheckedList.emit(this.getListChecked());
}
shareIndividualStatus() {
this.shareIndividualCheckedList.emit(this.currentSelected);
}
uncheck(name, value) {
this.list.filter((el) => { return el.name === name; })[0].checked = false;
this.getSelectedValue(false, name, value);
}
cleanSelecteds() {
var _a;
this.list = (_a = this.list) === null || _a === void 0 ? void 0 : _a.map((item) => {
return { name: item.name, value: item.value, checked: false, quantity: 0 };
});
}
clickFilterComponent() {
var _a;
this.showDropDown = !this.showDropDown;
//Desactivar autofocus externo cuando se muestra el buscador
if (this.list.length >= this.quantityToFilter) {
(_a = this.setAutofocusEvent) === null || _a === void 0 ? void 0 : _a.emit(this.showDropDown);
}
}
leaveComponent() {
var _a;
this.showDropDown = false;
//Desactivar autofocus externo cuando se muestra el buscador
if (this.list.length >= this.quantityToFilter) {
(_a = this.setAutofocusEvent) === null || _a === void 0 ? void 0 : _a.emit(this.showDropDown);
}
}
filterData(value) {
if (!value) {
return;
}
const normalizar = (str) => str
.normalize('NFD') // Descompone los caracteres con tilde
.replace(/[\u0300-\u036f]/g, '') // Elimina los signos diacríticos
.toLowerCase();
this.listFiltered = this.list.filter((opt) => normalizar(opt.name).includes(normalizar(value)));
}
}
SelectMultipleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: SelectMultipleComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
SelectMultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: SelectMultipleComponent, selector: "lct-select-multiple", inputs: { list: "list", listFiltered: "listFiltered", title: "title", disabled: "disabled", showIcon: "showIcon", placeholder: "placeholder", placeholderFilter: "placeholderFilter", quantityToFilter: "quantityToFilter", heightOptions: "heightOptions", id: "id" }, outputs: { shareCheckedList: "shareCheckedList", shareIndividualCheckedList: "shareIndividualCheckedList", setAutofocusEvent: "setAutofocusEvent" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"lct-filter\">\n <div class=\"title\">{{title}}</div>\n <div class=\"containerSelectMultiple\" (mouseleave)=\"leaveComponent()\">\n <button [attr.id]=\"selectId\" class=\"drop-toggle\" [disabled]=\"disabledValue\" (click)=\"clickFilterComponent()\">\n <span *ngIf=\"getListChecked().length<=0\">{{placeholder}}</span>\n <span *ngIf=\"getListChecked().length>0\">\n <div class=\"selected\">\n <span [ngClass]=\"{'text-disabled':getListChecked()[0].disabled?true: false}\">{{getListChecked()[0].name | labelTitlePipe}}</span>\n <div class=\"icon\" (click)=\"uncheck(getListChecked()[0].name, getListChecked()[0].value)\" [ngClass]=\"{'icon-disabled':getListChecked()[0].disabled?true: false}\">\n <svg [ngClass]=\"{'text-disabled':getListChecked()[0].disabled?true: false}\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 4 24 24\"\n fill=\"none\"\n style=\"color: #2649B6\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n </div>\n <span class=\"moreSelected\" *ngIf=\"getListChecked().length > 1 \">(+ {{getListChecked().length - 1}})</span>\n <!--{{getListChecked().join(', ')}}-->\n </span>\n <img *ngIf=\"showIcon\"\n class=\"select-box__icon\"\n [ngStyle]=\"{'transform': showDropDown ? 'translateY(-50%) rotate(180deg)' : 'translateY(-50%) rotate(0deg)' }\"\n src=\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gU3ZnIFZlY3RvciBJY29ucyA6IGh0dHA6Ly93d3cub25saW5ld2ViZm9udHMuY29tL2ljb24gLS0+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAwIDEwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPG1ldGFkYXRhPiBTdmcgVmVjdG9yIEljb25zIDogaHR0cDovL3d3dy5vbmxpbmV3ZWJmb250cy5jb20vaWNvbiA8L21ldGFkYXRhPg0KPGc+PHBhdGggZD0iTTUwMCw3NzUuNEwxMCwyODcuMmw2NC40LTYyLjZMNTAwLDY1MC4ybDQyNS42LTQyNS42bDY0LjQsNjIuNkw1MDAsNzc1LjR6Ii8+PC9nPg0KPC9zdmc+\" alt=\"Arrow Icon\"\n aria-hidden=\"true\"/>\n </button>\n <div class=\"drop-show\" *ngIf=\"showDropDown && list.length>0\">\n <div *ngIf=\"list.length>=quantityToFilter\" class=\"main\">\n <lct-input-text [placeholder]=\"placeholderFilter\" title=\"\"\n [(ngModel)]=\"filter\"\n (ngModelChange)=\"filterData($event)\"\n [icon]=\"iconFinder\"\n [showIcon]=\"true\"\n ></lct-input-text>\n </div>\n <div [ngStyle]=\"{'height': list.length>=quantityToFilter ? heightOptions : 'auto','overflow-y':list.length>=quantityToFilter ? 'auto':''}\" *ngIf=\"!filter.length\">\n <label class=\"main\" *ngFor=\"let a of list\">\n <span class=\"text\" [ngClass]=\"{'text-disabled': a.disabled?true: false}\">{{a.name | labelPipe}} </span>\n <span *ngIf=\"a.quantity\">({{a.quantity}})</span>\n <input type=\"checkbox\" [(ngModel)]=\"a.checked\"\n (change)=\"getSelectedValue(a.checked,a.name, a?.value)\" [disabled]=\"a.disabled?true: false\">\n <span class=\"mark\" [ngClass]=\"{'mark-disabled': a.disabled?true: false}\"></span>\n </label>\n\n </div>\n <div [ngStyle]=\"{'height': list.length>=quantityToFilter ? heightOptions : 'auto','overflow-y':list.length>=quantityToFilter ? 'auto':''}\" *ngIf=\"filter.length\">\n <label class=\"main\" *ngFor=\"let a of listFiltered\">\n <span class=\"text\" >{{a.name | labelPipe}} </span>\n <span *ngIf=\"a.quantity\">({{a.quantity}})</span>\n <input type=\"checkbox\" [(ngModel)]=\"a.checked\"\n (change)=\"getSelectedValue(a.checked,a.name, a?.value)\" [disabled]=\"a.disabled?true: false\">\n <span class=\"mark\"></span>\n </label>\n </div>\n </div>\n <div class=\"drop-empty\" *ngIf=\"showDropDown && list.length===0\">\n Sin informaci\u00F3n\n </div>\n </div>\n</div>\n", styles: ["*{font-family:\"Barlow\",\"Open Sans\",\"Helvetica Neue\",\"Segoe UI\",\"Calibri\",\"Arial\",sans-serif}.title{color:#3c4149;font-size:12px;letter-spacing:0;line-height:15px;margin-left:2px;margin-bottom:5px}.containerSelectMultiple{width:100%;position:relative}.drop-toggle{background-color:#e0e5ee;cursor:pointer;box-sizing:border-box;height:41px;width:100%;border:0;border-radius:5px;text-align:left;font-size:14px;padding-left:12px;color:#3c4149;overflow:hidden}.select-box__icon{position:absolute;right:15px;width:20px;top:50%;transform:translateY(-50%) rotate(0);opacity:.3;transition:.2s ease}button:disabled{background-color:#f5f7fa;cursor:not-allowed;color:#c8ccd4}.drop-toggle i{float:right}.drop-show{box-sizing:border-box;width:100%;border:1px solid #E0E5EE;border-radius:5px;background-color:#fff;position:absolute;z-index:2;box-shadow:0 6px 10px #00000026;margin-left:1px}.mark-disabled{background-color:#c8ccd4!important}.text-disabled{color:#c8ccd4!important}.icon-disabled{pointer-events:none}.selected{display:inline-block;position:relative;margin-right:5px;box-sizing:border-box;height:26px;border:1px solid #C2C2C2;border-radius:3px;background-color:#f5f7fa;font-size:13px;letter-spacing:0;line-height:16px;padding:5px}.selected span{vertical-align:top}.selected .icon{display:inline;margin-left:2px}.moreSelected{position:absolute;margin-top:8px;color:#3c4149;font-size:12px;letter-spacing:0;line-height:15px}.drop-empty{width:100%;border:1px solid #E0E5EE;border-radius:5px;background-color:#fff;position:absolute;z-index:2;box-shadow:0 6px 10px #00000026;padding:12px;cursor:no-drop}.main{display:block;position:relative;margin-left:17px;margin-right:17px;margin-bottom:5px;cursor:pointer;color:#3c4149;font-size:13px;letter-spacing:0;line-height:27px}.text{margin-left:27px}input[type=checkbox]{visibility:hidden}.mark{position:absolute;top:5px;left:0;box-sizing:border-box;height:17px;width:17px;border:1px solid #D6D6D6;border-radius:2px;background-color:#f4f4f4}.main:hover input~.mark{background-color:#c2c2c2}.main input:active~.mark{background-color:#546c84}.main input:checked~.mark{background-color:#2649b6}.mark:after{content:\"\";position:absolute;display:none}.main input:checked~.mark:after{display:block}.main .mark:after{left:5px;bottom:5px;width:3px;height:6px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}\n"], components: [{ type: InputTextComponent, selector: "lct-input-text", inputs: ["disabled", "icon", "iconPosition", "pdaAutoEnter", "placeholder", "showIcon", "title", "type", "error", "id", "transparent"], outputs: ["enterEmitted", "iconClick", "inputClick"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }], pipes: { "labelTitlePipe": LabelTitlePipe, "labelPipe": LabelPipe } });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: SelectMultipleComponent, decorators: [{
type: Component,
args: [{
selector: 'lct-select-multiple',
templateUrl: './select-multiple.component.html',
styleUrls: ['./select-multiple.component.css']
}]
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; }, propDecorators: { list: [{
type: Input
}], listFiltered: [{
type: Input
}], title: [{
type: Input
}], disabled: [{
type: Input
}], showIcon: [{
type: Input
}], placeholder: [{
type: Input
}], placeholderFilter: [{
type: Input
}], quantityToFilter: [{
type: Input
}], heightOptions: [{
type: Input
}], id: [{
type: Input
}], shareCheckedList: [{
type: Output
}], shareIndividualCheckedList: [{
type: Output
}], setAutofocusEvent: [{
type: Output
}] } });
class SelectComponent {
constructor(sanitizer) {
this.sanitizer = sanitizer;
this.options = ['Insert Values as string array'];
this.sort = undefined; //Indica si el array se debe ordenar, 'asc' o 'desc'
this.title = 'Insert title';
this.disabled = 'false';
this.showIcon = true;
this.placeholder = 'Insert placeholder';
this.quantityToFilter = 7;
this.id = ''; // ID en Button Opcional
this.selectedUser = '';
this.value = new EventEmitter();
this.setAutofocusEvent = new EventEmitter();
this.filterStore = '';
this.filteredOptions = [];
this.disabledValue = false;
this.showDropDown = false;
this.selected = '';
this.iconFinder = this.sanitizer.bypassSecurityTrustResourceUrl(`data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjE1MDMgMTIuNDE2M0MxMi4yOTUgMTIuMjcxNyAxMi41MTk1IDEyLjI1NTYgMTIuNjgxOSAxMi4zNjgxTDEyLjczOTYgMTIuNDE2M0wxNi40MDYxIDE2LjA4MjhDMTYuNTY4OCAxNi4yNDU1IDE2LjU2ODggMTYuNTA5MyAxNi40MDYxIDE2LjY3MkMxNi4yNjE0IDE2LjgxNjcgMTYuMDM2OSAxNi44MzI4IDE1Ljg3NDUgMTYuNzIwM0wxNS44MTY4IDE2LjY3MkwxMi4xNTAzIDEzLjAwNTZDMTEuOTg3NiAxMi44NDI4IDExLjk4NzYgMTIuNTc5IDEyLjE1MDMgMTIuNDE2M1oiIGZpbGw9IiMyNjQ5QjYiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi4zOTcxIDUuNTkxOTFDMTAuNDQ0NSAzLjYzOTI5IDcuMjc4NjggMy42MzkyOSA1LjMyNjA2IDUuNTkxOTFDMy4zNzM0NCA3LjU0NDUzIDMuMzczNDQgMTAuNzEwNCA1LjMyNjA2IDEyLjY2M0M3LjI3ODY4IDE0LjYxNTYgMTAuNDQ0NSAxNC42MTU2IDEyLjM5NzEgMTIuNjYzQzE0LjM0OTggMTAuNzEwNCAxNC4zNDk4IDcuNTQ0NTMgMTIuMzk3MSA1LjU5MTkxWk01LjkxNTMyIDEyLjA3MzdDNC4yODgxMyAxMC40NDY1IDQuMjg4MTMgNy44MDgzNSA1LjkxNTMyIDYuMTgxMTZDNy41NDI1IDQuNTUzOTggMTAuMTgwNyA0LjU1Mzk4IDExLjgwNzkgNi4xODExNkMxMy40MzUxIDcuODA4MzUgMTMuNDM1MSAxMC40NDY1IDExLjgwNzkgMTIuMDczN0MxMC4xODA3IDEzLjcwMDkgNy41NDI1IDEzLjcwMDkgNS45MTUzMiAxMi4wNzM3WiIgZmlsbD0iIzI2NDlCNiIvPgo8L3N2Zz4K`);
}
// Propiedad calculada para generar el id dinámico
get selectId() {
return this.id ? `select-${this.id}` : null;
}
ngOnInit() {
this.disabledValue =
this.disabled === true || this.disabled == 'true' || this.disabled === '';
this.filteredOptions = this.options;
if (this.sort) {
this.sortData();
}
}
ngOnChanges(changes) {
if (changes['selectedUser']) {
this.selected = changes['selectedUser'].currentValue;
}
if (changes['disabled'] && !changes['disabled'].firstChange) {
if (changes['disabled'].currentValue === true ||
changes['disabled'].currentValue == 'true' ||
changes['disabled'].currentValue === '') {
this.disabledValue = true;
}
else {
this.disabledValue = false;
}
}
if (changes['options'] && !changes['options'].firstChange) {
this.filteredOptions = this.options = changes['options'].currentValue;
if (this.sort) {
this.sortData();
}
}
}
filterData(value) {
const normalizar = (str) => str
.normalize('NFD') // Descompone los caracteres con tilde
.replace(/[\u0300-\u036f]/g, '') // Elimina los signos diacríticos
.toLowerCase();
this.filteredOptions = this.options.filter((opt) => normalizar(opt).includes(normalizar(value)));
}
clickFilterComponent() {
var _a;
this.showDropDown = !this.showDropDown;
//Desactivar autofocus externo cuando se muestra el buscador
if (this.options.length >= this.quantityToFilter) {
(_a = this.setAutofocusEvent) === null || _a === void 0 ? void 0 : _a.emit(this.showDropDown);
}
}
leaveComponent() {
var _a;
this.showDropDown = false;
//Desactivar autofocus externo cuando se muestra el buscador
if (this.options.length >= this.quantityToFilter) {
(_a = this.setAutofocusEvent) === null || _a === void 0 ? void 0 : _a.emit(this.showDropDown);
}
}
sortData() {
this.filteredOptions.sort((a, b) => {
if ((a === null || a === void 0 ? void 0 : a.toLowerCase()) > (b === null || b === void 0 ? void 0 : b.toLowerCase())) {
return this.sort === 'asc' ? 1 : -1;
}
if ((a === null || a === void 0 ? void 0 : a.toLowerCase()) < (b === null || b === void 0 ? void 0 : b.toLowerCase())) {
return this.sort === 'asc' ? -1 : 1;
}
return 0;
});
}
changeValue(value) {
var _a;
//Activar autofocus externo
this.selected = value;
this.showDropDown = false;
(_a = this.setAutofocusEvent) === null || _a === void 0 ? void 0 : _a.emit(false);
this.value.emit(this.selected);
}
}
SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: SelectComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: SelectComponent, selector: "lct-select", inputs: { options: "options", sort: "sort", title: "title", disabled: "disabled", showIcon: "showIcon", placeholder: "placeholder", quantityToFilter: "quantityToFilter", id: "id", selectedUser: "selectedUser" }, outputs: { value: "value", setAutofocusEvent: "setAutofocusEvent" }, usesOnChanges: true, ngImport: i0, template: "<div>\n <div class=\"title\">{{title}}</div>\n <div class=\"containerSelectMultiple\" (mouseleave)=\"leaveComponent()\" >\n <button [attr.id]=\"selectId\" class=\"drop-toggle\" [disabled]=\"disabledValue\" (click)=\"clickFilterComponent();\">\n <span *ngIf=\"!selected\">{{placeholder}}</span>\n <span *ngIf=\"selected\">\n <div>\n <span>{{selected | labelPipe}}</span>\n </div>\n </span>\n <img *ngIf=\"showIcon\"\n class=\"select-box__icon\"\n [ngStyle]=\"{'transform': showDropDown ? 'translateY(-50%) rotate(180deg)' : 'translateY(-50%) rotate(0deg)' }\"\n src=\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gU3ZnIFZlY3RvciBJY29ucyA6IGh0dHA6Ly93d3cub25saW5ld2ViZm9udHMuY29tL2ljb24gLS0+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAwIDEwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPG1ldGFkYXRhPiBTdmcgVmVjdG9yIEljb25zIDogaHR0cDovL3d3dy5vbmxpbmV3ZWJmb250cy5jb20vaWNvbiA8L21ldGFkYXRhPg0KPGc+PHBhdGggZD0iTTUwMCw3NzUuNEwxMCwyODcuMmw2NC40LTYyLjZMNTAwLDY1MC4ybDQyNS42LTQyNS42bDY0LjQsNjIuNkw1MDAsNzc1LjR6Ii8+PC9nPg0KPC9zdmc+\" alt=\"Arrow Icon\"\n aria-hidden=\"true\"/>\n </button>\n <div class=\"drop-show\" *ngIf=\"showDropDown && options.length>0\" >\n <div *ngIf=\"options.length>=quantityToFilter\" style=\"width: 95%;padding-left:5%;\">\n <lct-input-text placeholder=\"Buscar\" title=\"\"\n [(ngModel)]=\"filterStore\"\n (ngModelChange)=\"filterData($event)\"\n [icon]=\"iconFinder\"\n [showIcon]=\"true\"\n ></lct-input-text>\n </div>\n <div [ngStyle]=\"{'height': options.length>7 ? '200px' : 'auto','overflow-y':options.length>7 ? 'auto':''}\">\n <label class=\"main\" *ngFor=\"let option of filteredOptions; let i = index\" >\n <span class=\"text\" [ngStyle]=\"{'padding-top': i===0 ? '8px' : ''}\" (click)=\"changeValue(option)\">{{option | labelPipe}}</span>\n </label>\n </div>\n\n </div>\n <div class=\"drop-empty\" *ngIf=\"showDropDown && options.length===0\">\n Sin informaci\u00F3n\n </div>\n </div>\n</div>\n", styles: ["*{font-family:\"Barlow\",\"Open Sans\",\"Helvetica Neue\",\"Segoe UI\",\"Calibri\",\"Arial\",sans-serif}.title{color:#3c4149;font-size:12px;letter-spacing:0;line-height:15px;margin-left:2px;margin-bottom:5px}.containerSelectMultiple{width:100%;position:relative}.drop-toggle{background-color:#e0e5ee;cursor:pointer;box-sizing:border-box;height:41px;width:100%;border:0;border-radius:5px;text-align:left;font-size:14px;padding-left:12px;color:#3c4149;overflow:hidden}.select-box__icon{position:absolute;right:15px;width:20px;top:50%;transform:translateY(-50%) rotate(0);opacity:.3;transition:.2s ease}button:disabled{background-color:#f5f7fa;cursor:not-allowed;color:#c8ccd4}.drop-toggle i{float:right}.drop-show{width:100%;border:1px solid #E0E5EE;border-radius:5px;background-color:#fff;position:absolute;z-index:2;box-shadow:0 6px 10px #00000026;margin-left:1px}.drop-empty{width:100%;border:1px solid #E0E5EE;border-radius:5px;background-color:#fff;position:absolute;z-index:2;box-shadow:0 6px 10px #00000026;padding:12px;cursor:no-drop}.main{display:block;position:relative;margin-left:17px;margin-right:5px;margin-bottom:5px;cursor:pointer;color:#3c4149;font-size:13px;letter-spacing:0;line-height:27px}.text{width:100%;display:block}input[type=checkbox]{visibility:hidden}.mark{position:absolute;top:5px;left:0;box-sizing:border-box;height:17px;width:17px;border:1px solid #D6D6D6;border-radius:2px;background-color:#f4f4f4}.main:hover input~.mark{background-color:#c2c2c2}.main input:active~.mark{background-color:#546c84}.main input:checked~.mark{background-color:#2649b6}.mark:after{content:\"\";position:absolute;display:none}.main input:checked~.mark:after{display:block}.main .mark:after{left:5px;bottom:5px;width:3px;height:6px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}\n"], components: [{ type: InputTextComponent, selector: "lct-input-text", inputs: ["disabled", "icon", "iconPosition", "pdaAutoEnter", "placeholder", "showIcon", "title", "type", "error", "id", "transparent"], outputs: ["enterEmitted", "iconClick", "inputClick"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "labelPipe": LabelPipe } });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: SelectComponent, decorators: [{
type: Component,
args: [{
selector: 'lct-select',
templateUrl: './select.component.html',
styleUrls: ['./select.component.css'],
}]
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; }, propDecorators: { options: [{
type: Input
}], sort: [{
type: Input
}], title: [{
type: Input
}], disabled: [{
type: Input
}], showIcon: [{
type: Input
}], placeholder: [{
type: Input
}], quantityToFilter: [{
type: Input
}], id: [{
type: Input
}], selectedUser: [{
type: Input
}], value: [{
type: Output
}], setAutofocusEvent: [{
type: Output
}] } });
class ModalManualInputAlertComponent {
constructor() {
this.widthModalConfig = '100px';
this.heightModalConfig = '100px';
this.alertIconPath = 'assets/img/ico-tit-alerta.svg';
this.closeModalStore = new BehaviorSubject({ finish: false, type: 'keyboard' });
}
ngOnInit() {
}
cerrarModal() {
this.closeModalStore.next({ finish: false });
}
clickButtonAlert(type) {
this.closeModalStore.next({ finish: true, type: type });
}
}
ModalManualInputAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ModalManualInputAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ModalManualInputAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ModalManualInputAlertComponent, selector: "lct-modal-manual-input-alert", inputs: { widthModalConfig: "widthModalConfig", heightModalConfig: "heightModalConfig", alertIconPath: "alertIconPath" }, ngImport: i0, template: "<div class=\"modalmask open\">\n <div class=\"modalbox movedown\" [style.width]=\"widthModalConfig\" [style.height]=\"heightModalConfig\">\n <div class=\"modal-header\">\n <span class=\"alert-icon\">\n <svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"30\" cy=\"30\" r=\"30\" fill=\"#F5F7FA\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.4606 37.5462L26.9943 18.1672C28.2691 15.8226 31.4386 15.7074 32.8641 17.9276L33.0058 18.1673L43.5394 37.5461C44.8027 39.8695 43.3256 42.8063 40.7572 42.9922L40.5337 42.9998H19.4664C16.8916 42.9998 15.2445 40.1617 16.3566 37.7526L16.4606 37.5462ZM31.8463 18.825L31.7421 18.648C30.8642 17.2807 28.9562 17.35 28.1657 18.804L17.6421 38.1637L17.5577 38.331C16.8504 39.8638 17.8966 41.6665 19.4664 41.6665L40.5096 41.6669L40.685 41.6611C42.2377 41.5484 43.1796 39.6756 42.368 38.1829L31.8463 18.825Z\" fill=\"#2649B6\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30.8082 32.6821C30.7745 32.9639 30.7375 33.261 30.6971 33.5734H29.3637C29.3233 33.261 29.2863 32.9639 29.2526 32.6821C29.2189 32.4003 29.1903 32.1261 29.1667 31.8596C29.1432 31.5932 29.1247 31.3282 29.1112 31.0648C29.0977 30.8014 29.091 30.5318 29.091 30.2561V25H30.9698V30.2561C30.9698 30.5318 30.963 30.8014 30.9496 31.0648C30.9361 31.3282 30.9176 31.5932 30.894 31.8596C30.8705 32.1261 30.8418 32.4003 30.8082 32.6821ZM30.5152 38.2414C30.3536 38.3027 30.1819 38.3333 30.0001 38.3333C29.8115 38.3333 29.6364 38.3027 29.4748 38.2414C29.3132 38.1802 29.1718 38.0944 29.0506 37.9841C28.9294 37.8739 28.8351 37.7452 28.7678 37.5982C28.7004 37.4512 28.6667 37.2919 28.6667 37.1204C28.6667 36.955 28.7004 36.7988 28.7678 36.6517C28.8351 36.5047 28.9294 36.3761 29.0506 36.2658C29.1718 36.1555 29.3132 36.0682 29.4748 36.0039C29.6364 35.9396 29.8115 35.9074 30.0001 35.9074C30.1819 35.9074 30.3536 35.9396 30.5152 36.0039C30.6768 36.0682 30.8183 36.1555 30.9395 36.2658C31.0607 36.3761 31.1566 36.5047 31.2274 36.6517C31.2981 36.7988 31.3334 36.955 31.3334 37.1204C31.3334 37.2919 31.2981 37.4512 31.2274 37.5982C31.1566 37.7452 31.0607