lct-components
Version:
LCT basic components
698 lines (690 loc) • 148 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}} m\u00E1s)</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 ButtonComponent {
constructor(renderer) {
this.renderer = renderer;
this.title = 'Insert Title';
this.buttonType = 'primary';
this.disabled = 'false';
this.shape = 'normal';
this.icon = '';
this.width = '';
this.height = '';
this.bold = 'false';
this.iconWidth = 30;
this.iconHeight = 30;
this.counter = -1;
this.id = ''; // ID en Button Opcional
this.disabledValue = false;
this.boldValue = false;
}
// Propiedad calculada para generar el id dinámico
get buttonId() {
return this.id ? `btn-${this.id}` : null;
}
ngAfterViewInit() {
var _a, _b;
this.renderButtonType();
if (this.width) {
this.renderer.setStyle((_a = this.button) === null || _a === void 0 ? void 0 : _a.nativeElement, 'width', this.width);
}
if (this.height) {
this.renderer.setStyle((_b = this.button) === null || _b === void 0 ? void 0 : _b.nativeElement, 'height', this.height);
}
}
ngOnInit() {
if (this.disabled === true || this.disabled == 'true' || this.disabled === '') {
this.disabledValue = true;
}
else {
this.disabledValue = false;
}
if (this.bold === true || this.bold == 'true') {
this.boldValue = true;
}
else {
this.boldValue = false;
}
}
ngOnChanges(changes) {
var _a, _b, _c;
if (changes['buttonType'] && !changes['buttonType'].firstChange) {
this.buttonType = (_a = changes.buttonType) === null || _a === void 0 ? void 0 : _a.currentValue;
this.renderer.removeClass((_b = this.button) === null || _b === void 0 ? void 0 : _b.nativeElement, (_c = changes.buttonType) === null || _c === void 0 ? void 0 : _c.previousValue);
this.renderButtonType();
}
else if (changes['disabled'] && !changes['disabled'].firstChange) {
console.log('disabled:', changes);
if (changes['disabled'].currentValue === true || changes['disabled'].currentValue == 'true' || changes['disabled'].currentValue === '') {
this.disabledValue = true;
}
else {
this.disabledValue = false;
}
}
}
renderButtonType() {
var _a;
this.renderer.addClass((_a = this.button) === null || _a === void 0 ? void 0 : _a.nativeElement, this.buttonType);
}
}
ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ButtonComponent, selector: "lct-button", inputs: { title: "title", buttonType: "buttonType", disabled: "disabled", shape: "shape", icon: "icon", width: "width", height: "height", bold: "bold", iconWidth: "iconWidth", iconHeight: "iconHeight", counter: "counter", id: "id" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], usesOnChanges: true, ngImport: i0, templ