@litigiovirtual/ius-design-components 1.0.169 → 1.0.171
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/esm2022/lib/input-card/index.mjs +2 -0
- package/esm2022/lib/input-card/input-card.component.mjs +158 -0
- package/esm2022/lib/simple-card-contador/simple-card-contador.component.mjs +16 -30
- package/esm2022/public-api.mjs +2 -2
- package/fesm2022/litigiovirtual-ius-design-components.mjs +152 -82
- package/fesm2022/litigiovirtual-ius-design-components.mjs.map +1 -1
- package/lib/input-card/index.d.ts +1 -0
- package/lib/input-card/input-card.component.d.ts +43 -0
- package/lib/simple-card-contador/simple-card-contador.component.d.ts +3 -5
- package/package.json +1 -1
- package/public-api.d.ts +1 -1
- package/esm2022/lib/alert/alert.component.mjs +0 -76
- package/esm2022/lib/alert/index.mjs +0 -2
- package/lib/alert/alert.component.d.ts +0 -22
- package/lib/alert/index.d.ts +0 -1
|
@@ -10,7 +10,7 @@ import * as i1$2 from '@angular/forms';
|
|
|
10
10
|
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
11
11
|
import * as i1$3 from '@angular/router';
|
|
12
12
|
import { RouterLink, RouterLinkActive } from '@angular/router';
|
|
13
|
-
import { ComponentPortal, PortalModule
|
|
13
|
+
import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
|
|
14
14
|
import localeEs from '@angular/common/locales/es';
|
|
15
15
|
|
|
16
16
|
const ICONS = {
|
|
@@ -5041,51 +5041,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
5041
5041
|
class SimpleCardContadorComponent {
|
|
5042
5042
|
constructor() {
|
|
5043
5043
|
this.title = '';
|
|
5044
|
-
this.value =
|
|
5045
|
-
this.maxValue = 0;
|
|
5044
|
+
this.value = 0;
|
|
5046
5045
|
this.valueChange = new EventEmitter();
|
|
5047
|
-
this.errorMaxValue = new EventEmitter();
|
|
5048
5046
|
}
|
|
5049
5047
|
step(el, dir) {
|
|
5050
|
-
|
|
5051
|
-
|
|
5052
|
-
|
|
5048
|
+
if (dir > 0)
|
|
5049
|
+
el.stepUp();
|
|
5050
|
+
else
|
|
5051
|
+
el.stepDown();
|
|
5052
|
+
this.syncAndEmit(el.value);
|
|
5053
5053
|
}
|
|
5054
|
-
onTyped(
|
|
5055
|
-
|
|
5056
|
-
this.applyLimitsAndEmit(n, el);
|
|
5054
|
+
onTyped(raw) {
|
|
5055
|
+
this.syncAndEmit(raw);
|
|
5057
5056
|
}
|
|
5058
|
-
|
|
5059
|
-
|
|
5060
|
-
|
|
5061
|
-
|
|
5062
|
-
|
|
5063
|
-
if (this.maxValue > 0 && value > this.maxValue) {
|
|
5064
|
-
value = this.maxValue;
|
|
5065
|
-
this.errorMaxValue.emit('El valor sobrepasa el limite que puedes asignar');
|
|
5066
|
-
}
|
|
5067
|
-
this.value = value;
|
|
5068
|
-
if (el) {
|
|
5069
|
-
el.value = String(value);
|
|
5070
|
-
}
|
|
5071
|
-
this.valueChange.emit(value);
|
|
5057
|
+
syncAndEmit(raw) {
|
|
5058
|
+
const n = Number(raw);
|
|
5059
|
+
const val = Number.isNaN(n) ? 0 : n;
|
|
5060
|
+
this.value = val;
|
|
5061
|
+
this.valueChange.emit(val);
|
|
5072
5062
|
}
|
|
5073
5063
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SimpleCardContadorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5074
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SimpleCardContadorComponent, isStandalone: true, selector: "ius-simple-card-contador", inputs: { title: "title", value: "value"
|
|
5064
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SimpleCardContadorComponent, isStandalone: true, selector: "ius-simple-card-contador", inputs: { title: "title", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"general-container\">\r\n <div class=\"container\">\r\n <div class=\"left\">\r\n <p>{{ title }}</p>\r\n </div>\r\n\r\n <div class=\"right\">\r\n <div class=\"num-wrapper\">\r\n <input\r\n #num\r\n type=\"number\"\r\n [step]=\"1\"\r\n [value]=\"value\"\r\n (input)=\"onTyped(num.value)\"\r\n />\r\n <button\r\n class=\"spin up\"\r\n (click)=\"step(num, +1)\"\r\n >\r\n <ius-icon-xl\r\n [iconName]=\"'icon-keyboard-arrow-up'\"\r\n ></ius-icon-xl>\r\n </button>\r\n\r\n <button\r\n class=\"spin down\"\r\n (click)=\"step(num, -1)\"\r\n >\r\n <ius-icon-xl\r\n [iconName]=\"'icon-keyboard-arrow-down'\"\r\n ></ius-icon-xl>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.general-container{position:relative}.container{display:flex;padding:4px 4px 4px 12px;align-items:center;gap:0;align-self:stretch;border-radius:8px;border:1px solid #eaeaea;background:#fff;justify-content:space-between}.container .left{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;flex:1 1 auto;min-width:0;width:55%}.container .left p{display:flex;align-items:center;gap:10px;margin:0;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Rubik;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.container .right{padding:var(--Spacing-Spacing-xs, 8px);display:flex;align-items:center;width:45%}.container .right .num-wrapper{position:relative;display:inline-flex;align-items:center;height:40px;border-radius:14px;background:#f5f5f5;padding:6px 44px 6px 12px}.container .right .num-wrapper input[type=number]{appearance:textfield;-moz-appearance:textfield;-webkit-appearance:none;border:0;outline:0;width:100%;background:transparent;color:#8c8c8c;font-family:Rubik;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.container .right .num-wrapper input::-webkit-outer-spin-button,.container .right .num-wrapper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.container .right .num-wrapper .spin{position:absolute;right:8px;width:28px;height:18px;border:0;background:transparent;cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center}.container .right .num-wrapper .up{top:15px}.container .right .num-wrapper .down{bottom:-1px}\n"], dependencies: [{ kind: "component", type: IconXlComponent, selector: "ius-icon-xl", inputs: ["iconName", "color"] }] }); }
|
|
5075
5065
|
}
|
|
5076
5066
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SimpleCardContadorComponent, decorators: [{
|
|
5077
5067
|
type: Component,
|
|
5078
|
-
args: [{ selector: 'ius-simple-card-contador', standalone: true, imports: [IconXlComponent], template: "<div class=\"general-container\">\r\n <div class=\"container\">\r\n <div class=\"left\">\r\n <p>{{ title }}</p>\r\n </div>\r\n\r\n <div class=\"right\">\r\n <div class=\"num-wrapper\">\r\n <input\r\n #num\r\n type=\"number\"\r\n [step]=\"1\"\r\n [
|
|
5068
|
+
args: [{ selector: 'ius-simple-card-contador', standalone: true, imports: [IconXlComponent], template: "<div class=\"general-container\">\r\n <div class=\"container\">\r\n <div class=\"left\">\r\n <p>{{ title }}</p>\r\n </div>\r\n\r\n <div class=\"right\">\r\n <div class=\"num-wrapper\">\r\n <input\r\n #num\r\n type=\"number\"\r\n [step]=\"1\"\r\n [value]=\"value\"\r\n (input)=\"onTyped(num.value)\"\r\n />\r\n <button\r\n class=\"spin up\"\r\n (click)=\"step(num, +1)\"\r\n >\r\n <ius-icon-xl\r\n [iconName]=\"'icon-keyboard-arrow-up'\"\r\n ></ius-icon-xl>\r\n </button>\r\n\r\n <button\r\n class=\"spin down\"\r\n (click)=\"step(num, -1)\"\r\n >\r\n <ius-icon-xl\r\n [iconName]=\"'icon-keyboard-arrow-down'\"\r\n ></ius-icon-xl>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.general-container{position:relative}.container{display:flex;padding:4px 4px 4px 12px;align-items:center;gap:0;align-self:stretch;border-radius:8px;border:1px solid #eaeaea;background:#fff;justify-content:space-between}.container .left{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;flex:1 1 auto;min-width:0;width:55%}.container .left p{display:flex;align-items:center;gap:10px;margin:0;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Rubik;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.container .right{padding:var(--Spacing-Spacing-xs, 8px);display:flex;align-items:center;width:45%}.container .right .num-wrapper{position:relative;display:inline-flex;align-items:center;height:40px;border-radius:14px;background:#f5f5f5;padding:6px 44px 6px 12px}.container .right .num-wrapper input[type=number]{appearance:textfield;-moz-appearance:textfield;-webkit-appearance:none;border:0;outline:0;width:100%;background:transparent;color:#8c8c8c;font-family:Rubik;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.container .right .num-wrapper input::-webkit-outer-spin-button,.container .right .num-wrapper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.container .right .num-wrapper .spin{position:absolute;right:8px;width:28px;height:18px;border:0;background:transparent;cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center}.container .right .num-wrapper .up{top:15px}.container .right .num-wrapper .down{bottom:-1px}\n"] }]
|
|
5079
5069
|
}], propDecorators: { title: [{
|
|
5080
5070
|
type: Input
|
|
5081
5071
|
}], value: [{
|
|
5082
5072
|
type: Input
|
|
5083
|
-
}], maxValue: [{
|
|
5084
|
-
type: Input
|
|
5085
5073
|
}], valueChange: [{
|
|
5086
5074
|
type: Output
|
|
5087
|
-
}], errorMaxValue: [{
|
|
5088
|
-
type: Output
|
|
5089
5075
|
}] } });
|
|
5090
5076
|
|
|
5091
5077
|
class SegmentComponent {
|
|
@@ -6647,70 +6633,154 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
6647
6633
|
type: Input
|
|
6648
6634
|
}] } });
|
|
6649
6635
|
|
|
6650
|
-
class
|
|
6651
|
-
constructor(
|
|
6652
|
-
this.
|
|
6653
|
-
this.
|
|
6654
|
-
this.
|
|
6655
|
-
this.
|
|
6656
|
-
this.
|
|
6657
|
-
this.
|
|
6658
|
-
this.
|
|
6659
|
-
this.
|
|
6636
|
+
class InputCardComponent {
|
|
6637
|
+
constructor() {
|
|
6638
|
+
this.textInputCvv = '';
|
|
6639
|
+
this.textInputMonth = '';
|
|
6640
|
+
this.textInputYear = '';
|
|
6641
|
+
this.isFocused = false;
|
|
6642
|
+
this.isAlertText = false;
|
|
6643
|
+
this.required = false;
|
|
6644
|
+
this.disabled = false;
|
|
6645
|
+
this.isEnableClearText = false;
|
|
6646
|
+
this.showHelpText = false;
|
|
6647
|
+
this.onChangesValueMonth = new EventEmitter();
|
|
6648
|
+
this.onChangesValueYear = new EventEmitter();
|
|
6649
|
+
this.onChangesValueCVV = new EventEmitter();
|
|
6650
|
+
this.onEnterKey = new EventEmitter();
|
|
6651
|
+
this.month = '';
|
|
6652
|
+
this.year = '';
|
|
6653
|
+
this.numeroCVV = '';
|
|
6660
6654
|
}
|
|
6661
|
-
|
|
6662
|
-
|
|
6663
|
-
.
|
|
6664
|
-
.
|
|
6665
|
-
|
|
6666
|
-
this.
|
|
6667
|
-
|
|
6668
|
-
|
|
6669
|
-
|
|
6670
|
-
|
|
6671
|
-
|
|
6672
|
-
|
|
6673
|
-
}
|
|
6674
|
-
const portal = new TemplatePortal(this.modalTpl, this.vcr);
|
|
6675
|
-
this.overlayRef.attach(portal);
|
|
6676
|
-
this.overlayRef.keydownEvents().subscribe((ev) => {
|
|
6677
|
-
if (ev.key === 'Escape')
|
|
6678
|
-
this.close();
|
|
6679
|
-
});
|
|
6655
|
+
ngOnInit() {
|
|
6656
|
+
if (this.initialTextCvv) {
|
|
6657
|
+
this.textInputCvv = this.initialTextCvv;
|
|
6658
|
+
this.numeroCVV = this.initialTextCvv;
|
|
6659
|
+
}
|
|
6660
|
+
if (this.initialTextMonth) {
|
|
6661
|
+
this.textInputMonth = this.initialTextMonth;
|
|
6662
|
+
this.month = this.initialTextMonth;
|
|
6663
|
+
}
|
|
6664
|
+
if (this.initialTextYear) {
|
|
6665
|
+
this.textInputYear = this.initialTextYear;
|
|
6666
|
+
this.year = this.initialTextYear;
|
|
6667
|
+
}
|
|
6680
6668
|
}
|
|
6681
|
-
|
|
6682
|
-
this.
|
|
6683
|
-
this.
|
|
6684
|
-
this.
|
|
6669
|
+
clearSearch() {
|
|
6670
|
+
this.month = '';
|
|
6671
|
+
this.year = '';
|
|
6672
|
+
this.numeroCVV = '';
|
|
6673
|
+
this.onChangesValueMonth.emit(this.month);
|
|
6674
|
+
this.onChangesValueYear.emit(this.year);
|
|
6675
|
+
this.onChangesValueCVV.emit(this.numeroCVV);
|
|
6676
|
+
}
|
|
6677
|
+
onChangeCVV(event) {
|
|
6678
|
+
const value = event.target.value ?? '';
|
|
6679
|
+
let soloDigitos = value.replace(/\D+/g, '');
|
|
6680
|
+
if (soloDigitos.length > 3) {
|
|
6681
|
+
soloDigitos = soloDigitos.substring(0, 3);
|
|
6682
|
+
}
|
|
6683
|
+
if (soloDigitos === '0') {
|
|
6684
|
+
soloDigitos = '';
|
|
6685
|
+
}
|
|
6686
|
+
this.numeroCVV = soloDigitos;
|
|
6687
|
+
event.target.value = this.numeroCVV;
|
|
6688
|
+
this.onChangesValueCVV.emit(this.numeroCVV);
|
|
6689
|
+
}
|
|
6690
|
+
onChangeMonth(e) {
|
|
6691
|
+
let value = e.target.value.replace(/\D/g, '');
|
|
6692
|
+
// limitar 01-12
|
|
6693
|
+
if (value.length === 2) {
|
|
6694
|
+
let num = parseInt(value, 10);
|
|
6695
|
+
if (num < 1)
|
|
6696
|
+
value = '01';
|
|
6697
|
+
if (num > 12)
|
|
6698
|
+
value = '12';
|
|
6699
|
+
}
|
|
6700
|
+
this.month = value;
|
|
6701
|
+
e.target.value = value;
|
|
6702
|
+
// auto focus al año
|
|
6703
|
+
if (value.length === 2) {
|
|
6704
|
+
this.yearInput?.nativeElement.focus();
|
|
6705
|
+
}
|
|
6706
|
+
this.onChangesValueMonth.emit(this.month);
|
|
6707
|
+
}
|
|
6708
|
+
onChangeYear(e) {
|
|
6709
|
+
let value = e.target.value.replace(/\D/g, '');
|
|
6710
|
+
if (value.length > 4) {
|
|
6711
|
+
value = value.substring(0, 4);
|
|
6712
|
+
}
|
|
6713
|
+
if (value.length === 4) {
|
|
6714
|
+
const year = parseInt(value, 10);
|
|
6715
|
+
if (year < 2025 || year > 2099) {
|
|
6716
|
+
value = '';
|
|
6717
|
+
}
|
|
6718
|
+
}
|
|
6719
|
+
this.year = value;
|
|
6720
|
+
e.target.value = value;
|
|
6721
|
+
this.onChangesValueYear.emit(this.year);
|
|
6685
6722
|
}
|
|
6686
|
-
|
|
6687
|
-
|
|
6688
|
-
|
|
6689
|
-
|
|
6723
|
+
onKeyDown(event) {
|
|
6724
|
+
const allowedKeys = ['Backspace', 'Tab', 'ArrowLeft', 'ArrowRight', 'Delete', 'Home', 'End'];
|
|
6725
|
+
if (!/[0-9]/.test(event.key) &&
|
|
6726
|
+
!allowedKeys.includes(event.key)) {
|
|
6727
|
+
event.preventDefault();
|
|
6728
|
+
}
|
|
6690
6729
|
}
|
|
6691
|
-
|
|
6692
|
-
|
|
6730
|
+
/**
|
|
6731
|
+
* Bloquea el drop de contenido
|
|
6732
|
+
*/
|
|
6733
|
+
onDropBlock(event) {
|
|
6734
|
+
event.preventDefault();
|
|
6735
|
+
}
|
|
6736
|
+
/**
|
|
6737
|
+
* Bloquea el dragover para evitar drop
|
|
6738
|
+
*/
|
|
6739
|
+
onDragOverBlock(event) {
|
|
6740
|
+
event.preventDefault();
|
|
6693
6741
|
}
|
|
6694
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type:
|
|
6695
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
6742
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6743
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputCardComponent, isStandalone: true, selector: "ius-input-card", inputs: { textInputCvv: "textInputCvv", textInputMonth: "textInputMonth", textInputYear: "textInputYear", required: "required", disabled: "disabled", isEnableClearText: "isEnableClearText", showHelpText: "showHelpText", labelSuperior: "labelSuperior", labelInferior: "labelInferior", iconInput: "iconInput", initialTextCvv: "initialTextCvv", initialTextMonth: "initialTextMonth", initialTextYear: "initialTextYear" }, outputs: { onChangesValueMonth: "onChangesValueMonth", onChangesValueYear: "onChangesValueYear", onChangesValueCVV: "onChangesValueCVV", onEnterKey: "onEnterKey" }, viewQueries: [{ propertyName: "yearInput", first: true, predicate: ["yearInput"], descendants: true }], ngImport: i0, template: "<div class=\"container-general\">\r\n @if (labelSuperior) {\r\n <div class=\"container-label-sup\" [ngClass]=\"{\r\n disabled: disabled\r\n }\">\r\n @if(!disabled && required){\r\n <div class=\"icon-dot\" aria-hidden=\"true\"></div>\r\n }\r\n <label class=\"label-text\" [id]=\"'label-' + labelSuperior\">{{ labelSuperior }}</label>\r\n @if(!disabled && showHelpText){\r\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\" role=\"img\"\r\n aria-label=\"Informaci\u00F3n de ayuda\"></ius-icon-md>\r\n }\r\n <span aria-hidden=\"true\">:</span>\r\n </div>\r\n }\r\n\r\n <div class=\"inputs-wrapper\">\r\n <div class=\"inputs-container\">\r\n @if (iconInput) {\r\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\" aria-hidden=\"true\"></ius-icon-md>\r\n }\r\n\r\n <div class=\"card-date-container container-card\" role=\"group\" aria-labelledby=\"label-fecha\" [ngClass]=\"{\r\n disabled: disabled,\r\n focused: isFocused,\r\n alert: !isFocused && isAlertText && !disabled\r\n }\">\r\n <!-- MES -->\r\n <input type=\"text\" maxlength=\"2\" inputmode=\"numeric\" class=\"date-input\" id=\"month-input\" placeholder=\"MM\"\r\n aria-label=\"Mes (MM)\" [disabled]=\"disabled\" (input)=\"onChangeMonth($event)\" (keydown)=\"onKeyDown($event)\"\r\n [(ngModel)]=\"textInputMonth\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\" />\r\n\r\n <span class=\"separator\" aria-hidden=\"true\">/</span>\r\n\r\n <!-- A\u00D1O -->\r\n <input type=\"text\" maxlength=\"4\" inputmode=\"numeric\" class=\"date-input year\" id=\"year-input\" placeholder=\"AAAA\"\r\n aria-label=\"A\u00F1o (AAAA)\" [disabled]=\"disabled\" (input)=\"onChangeYear($event)\" (keydown)=\"onKeyDown($event)\"\r\n [(ngModel)]=\"textInputYear\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\" #yearInput />\r\n </div>\r\n\r\n <div class=\"container-card cvv-container\" role=\"group\" aria-labelledby=\"label-cvv\" [ngClass]=\"{\r\n disabled: disabled,\r\n focused: isFocused,\r\n alert: !isFocused && isAlertText && !disabled\r\n }\">\r\n <input type=\"text\" maxlength=\"3\" inputmode=\"numeric\" class=\"cvv-input\" id=\"cvv-input\" placeholder=\"CVV\"\r\n aria-label=\"CVV (3 d\u00EDgitos)\" [disabled]=\"disabled\" (input)=\"onChangeCVV($event)\" (keydown)=\"onKeyDown($event)\"\r\n [(ngModel)]=\"textInputCvv\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\" />\r\n </div>\r\n </div>\r\n\r\n @if (!disabled && isEnableClearText) {\r\n <button class=\"button-delete\" type=\"button\" aria-label=\"Limpiar formulario\" (click)=\"clearSearch()\">\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\" aria-hidden=\"true\"></ius-icon-md>\r\n </button>\r\n }\r\n </div>\r\n\r\n @if (labelInferior && isFocused) {\r\n <span class=\"label-inf\" role=\"status\" aria-live=\"polite\">{{ labelInferior }}</span>\r\n } @if (labelInferior && !isFocused && isAlertText) {\r\n <span class=\"label-inf\" role=\"alert\" [ngClass]=\"{\r\n alert: !isFocused && isAlertText && !disabled\r\n }\">{{ labelInferior }}</span>\r\n }\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-card{display:flex;padding:10px 12px;justify-content:flex-start;align-items:center;gap:4px;border:1px solid #f5f5f5;border-radius:8px;background:#f5f5f5;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px;transition:all .2s ease-in-out}.container-card:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-card.focused{border:1px solid #0581BC;background:#edf6ff}.container-card.disabled{background:#f5f5f5}.container-card.disabled .icon-color,.container-card.disabled input{color:#bfbfbf}.container-card.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-card.alert{border:1px solid #DB2E2A;background:#fff4f0}.icon-color{color:#595959}.icon-color-cancel{color:#013169}.container-card input,.card-date-container input{display:flex;align-items:center;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.container-card input:disabled,.card-date-container input:disabled{color:#bfbfbf}.button-delete{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;color:#595959}.button-delete:hover{color:#013169}.container-label-sup{display:flex;align-items:center;gap:4px;margin-bottom:8px;color:#333;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.container-label-sup.disabled{color:#bfbfbf}.icon-dot{display:flex;align-items:center;width:4px;height:4px;aspect-ratio:1/1;background-color:#db2e2a;border-radius:100px}.icon-color-help{color:#8c8c8c}.label-inf{display:flex;position:absolute;top:calc(100% + 4px);left:0;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.label-inf.alert{color:#931224}.label-text{cursor:pointer}.inputs-wrapper{position:relative}.inputs-container{display:flex;gap:12px;align-items:center}.cvv-container{padding:10px 8px;flex-shrink:0}.cvv-input{display:flex;align-items:center;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px;text-align:center;width:45px;flex:0 0 auto}.card-date-container{display:flex;align-items:center;justify-content:center;gap:4px;flex:1 1 auto}.date-input{border:none;outline:none;background:transparent;font-size:.875rem;width:30px;text-align:center;flex:0 0 auto}.date-input.year{width:50px}.separator{margin:0 4px;opacity:.6;flex:0 0 auto}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
6696
6744
|
}
|
|
6697
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type:
|
|
6745
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputCardComponent, decorators: [{
|
|
6698
6746
|
type: Component,
|
|
6699
|
-
args: [{ selector: 'ius-
|
|
6700
|
-
}],
|
|
6747
|
+
args: [{ selector: 'ius-input-card', standalone: true, imports: [IconMdComponent, FormsModule, CommonModule], template: "<div class=\"container-general\">\r\n @if (labelSuperior) {\r\n <div class=\"container-label-sup\" [ngClass]=\"{\r\n disabled: disabled\r\n }\">\r\n @if(!disabled && required){\r\n <div class=\"icon-dot\" aria-hidden=\"true\"></div>\r\n }\r\n <label class=\"label-text\" [id]=\"'label-' + labelSuperior\">{{ labelSuperior }}</label>\r\n @if(!disabled && showHelpText){\r\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\" role=\"img\"\r\n aria-label=\"Informaci\u00F3n de ayuda\"></ius-icon-md>\r\n }\r\n <span aria-hidden=\"true\">:</span>\r\n </div>\r\n }\r\n\r\n <div class=\"inputs-wrapper\">\r\n <div class=\"inputs-container\">\r\n @if (iconInput) {\r\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\" aria-hidden=\"true\"></ius-icon-md>\r\n }\r\n\r\n <div class=\"card-date-container container-card\" role=\"group\" aria-labelledby=\"label-fecha\" [ngClass]=\"{\r\n disabled: disabled,\r\n focused: isFocused,\r\n alert: !isFocused && isAlertText && !disabled\r\n }\">\r\n <!-- MES -->\r\n <input type=\"text\" maxlength=\"2\" inputmode=\"numeric\" class=\"date-input\" id=\"month-input\" placeholder=\"MM\"\r\n aria-label=\"Mes (MM)\" [disabled]=\"disabled\" (input)=\"onChangeMonth($event)\" (keydown)=\"onKeyDown($event)\"\r\n [(ngModel)]=\"textInputMonth\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\" />\r\n\r\n <span class=\"separator\" aria-hidden=\"true\">/</span>\r\n\r\n <!-- A\u00D1O -->\r\n <input type=\"text\" maxlength=\"4\" inputmode=\"numeric\" class=\"date-input year\" id=\"year-input\" placeholder=\"AAAA\"\r\n aria-label=\"A\u00F1o (AAAA)\" [disabled]=\"disabled\" (input)=\"onChangeYear($event)\" (keydown)=\"onKeyDown($event)\"\r\n [(ngModel)]=\"textInputYear\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\" #yearInput />\r\n </div>\r\n\r\n <div class=\"container-card cvv-container\" role=\"group\" aria-labelledby=\"label-cvv\" [ngClass]=\"{\r\n disabled: disabled,\r\n focused: isFocused,\r\n alert: !isFocused && isAlertText && !disabled\r\n }\">\r\n <input type=\"text\" maxlength=\"3\" inputmode=\"numeric\" class=\"cvv-input\" id=\"cvv-input\" placeholder=\"CVV\"\r\n aria-label=\"CVV (3 d\u00EDgitos)\" [disabled]=\"disabled\" (input)=\"onChangeCVV($event)\" (keydown)=\"onKeyDown($event)\"\r\n [(ngModel)]=\"textInputCvv\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\" />\r\n </div>\r\n </div>\r\n\r\n @if (!disabled && isEnableClearText) {\r\n <button class=\"button-delete\" type=\"button\" aria-label=\"Limpiar formulario\" (click)=\"clearSearch()\">\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\" aria-hidden=\"true\"></ius-icon-md>\r\n </button>\r\n }\r\n </div>\r\n\r\n @if (labelInferior && isFocused) {\r\n <span class=\"label-inf\" role=\"status\" aria-live=\"polite\">{{ labelInferior }}</span>\r\n } @if (labelInferior && !isFocused && isAlertText) {\r\n <span class=\"label-inf\" role=\"alert\" [ngClass]=\"{\r\n alert: !isFocused && isAlertText && !disabled\r\n }\">{{ labelInferior }}</span>\r\n }\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-card{display:flex;padding:10px 12px;justify-content:flex-start;align-items:center;gap:4px;border:1px solid #f5f5f5;border-radius:8px;background:#f5f5f5;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px;transition:all .2s ease-in-out}.container-card:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-card.focused{border:1px solid #0581BC;background:#edf6ff}.container-card.disabled{background:#f5f5f5}.container-card.disabled .icon-color,.container-card.disabled input{color:#bfbfbf}.container-card.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-card.alert{border:1px solid #DB2E2A;background:#fff4f0}.icon-color{color:#595959}.icon-color-cancel{color:#013169}.container-card input,.card-date-container input{display:flex;align-items:center;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.container-card input:disabled,.card-date-container input:disabled{color:#bfbfbf}.button-delete{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;color:#595959}.button-delete:hover{color:#013169}.container-label-sup{display:flex;align-items:center;gap:4px;margin-bottom:8px;color:#333;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.container-label-sup.disabled{color:#bfbfbf}.icon-dot{display:flex;align-items:center;width:4px;height:4px;aspect-ratio:1/1;background-color:#db2e2a;border-radius:100px}.icon-color-help{color:#8c8c8c}.label-inf{display:flex;position:absolute;top:calc(100% + 4px);left:0;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.label-inf.alert{color:#931224}.label-text{cursor:pointer}.inputs-wrapper{position:relative}.inputs-container{display:flex;gap:12px;align-items:center}.cvv-container{padding:10px 8px;flex-shrink:0}.cvv-input{display:flex;align-items:center;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px;text-align:center;width:45px;flex:0 0 auto}.card-date-container{display:flex;align-items:center;justify-content:center;gap:4px;flex:1 1 auto}.date-input{border:none;outline:none;background:transparent;font-size:.875rem;width:30px;text-align:center;flex:0 0 auto}.date-input.year{width:50px}.separator{margin:0 4px;opacity:.6;flex:0 0 auto}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
|
|
6748
|
+
}], propDecorators: { yearInput: [{
|
|
6701
6749
|
type: ViewChild,
|
|
6702
|
-
args: ['
|
|
6703
|
-
}],
|
|
6750
|
+
args: ['yearInput']
|
|
6751
|
+
}], textInputCvv: [{
|
|
6704
6752
|
type: Input
|
|
6705
|
-
}],
|
|
6753
|
+
}], textInputMonth: [{
|
|
6754
|
+
type: Input
|
|
6755
|
+
}], textInputYear: [{
|
|
6706
6756
|
type: Input
|
|
6707
|
-
}],
|
|
6757
|
+
}], required: [{
|
|
6708
6758
|
type: Input
|
|
6709
|
-
}],
|
|
6759
|
+
}], disabled: [{
|
|
6710
6760
|
type: Input
|
|
6711
|
-
}],
|
|
6761
|
+
}], isEnableClearText: [{
|
|
6762
|
+
type: Input
|
|
6763
|
+
}], showHelpText: [{
|
|
6764
|
+
type: Input
|
|
6765
|
+
}], labelSuperior: [{
|
|
6766
|
+
type: Input
|
|
6767
|
+
}], labelInferior: [{
|
|
6768
|
+
type: Input
|
|
6769
|
+
}], iconInput: [{
|
|
6770
|
+
type: Input
|
|
6771
|
+
}], initialTextCvv: [{
|
|
6772
|
+
type: Input
|
|
6773
|
+
}], initialTextMonth: [{
|
|
6774
|
+
type: Input
|
|
6775
|
+
}], initialTextYear: [{
|
|
6776
|
+
type: Input
|
|
6777
|
+
}], onChangesValueMonth: [{
|
|
6712
6778
|
type: Output
|
|
6713
|
-
}],
|
|
6779
|
+
}], onChangesValueYear: [{
|
|
6780
|
+
type: Output
|
|
6781
|
+
}], onChangesValueCVV: [{
|
|
6782
|
+
type: Output
|
|
6783
|
+
}], onEnterKey: [{
|
|
6714
6784
|
type: Output
|
|
6715
6785
|
}] } });
|
|
6716
6786
|
|
|
@@ -6718,5 +6788,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
6718
6788
|
* Generated bundle index. Do not edit.
|
|
6719
6789
|
*/
|
|
6720
6790
|
|
|
6721
|
-
export {
|
|
6791
|
+
export { AvatarIconComponent, BadgeComponent, BreadcrumbComponent, ButtonAccountsComponent, ButtonAuthComponent, ButtonCircleSecondaryComponent, ButtonCircleTertiaryComponent, ButtonDynamicComponent, ButtonFilterComponent, ButtonMenuLinkComponent, ButtonOrderComponent, ButtonSquaredSecondaryComponent, ButtonSquaredTertiaryComponent, ButtonStandardPrimaryComponent, ButtonStandardSecondaryComponent, ButtonStandardTertiaryComponent, ButtonStandardTertiarySmallComponent, CalificationComponent, CardActividadEventoComponent, CardAgendaJudicialComponent, CardBlockComponent, CardButtonCheckboxComponent, CardCollapseDetalleProcesoComponent, CardDynamicContentComponent, CardEtapaSubetapaComponent, CardGestionCupoComponent, CardImpulsoProcesalComponent, CardInfoFacturacionComponent, CardListConsumoComponent, CardListDragOnComponent, CardListMovimientosComponent, CardListProcesoComponent, CardLogComponent, CardPlanSmallComponent, CardPlanSubscriptionComponent, CardTicketComponent, CardTipoProcesoComponent, CardUsoPlanComponent, CardVigilanciaJudicialComponent, CategoriesComponent, ChartsDonutComponent, CheckboxComponent, CheckboxRadioComponent, ChipUserComponent, CustomDropdownComponent, DateHourPickerComponent, DatePickerComponent, DoubleDatePickerComponent, DrawerContainerRightComponent, DropdownComponent, DropdownContextualMenuComponent, DropdownOptionItemComponent, DropdownUserMenuComponent, FilterItemComponent, IconLgComponent, IconMdComponent, IconSmComponent, IconXlComponent, IconXsComponent, IconXxlComponent, InputCardComponent, InputLargeComponent, InputOtpComponent, InputPasswordComponent, InputSelectComponent, InputSelectFilterComponent, InputSelectNumberComponent, InputTextfieldComponent, IusChartsBarGroupedComponent, LinearProgressBarComponent, LoadingCircleComponent, MenuItemComponent, NavRailComponent, NotificationCardComponent, OptionComponent, OptionItemComponent, PopoverDirective, SearchBarComponent, SectionCollapseDrawerChildComponent, SectionCollapseDrawerParentComponent, SegmentComponent, SimpleCardContadorComponent, SimpleChipComponent, SimpleDividerComponent, SimpleUserCardComponent, SlideToggleComponent, SnackbarComponent, ToolbarComponent, ToolbarUserMenuComponent, UserCardComponent };
|
|
6722
6792
|
//# sourceMappingURL=litigiovirtual-ius-design-components.mjs.map
|