@litigiovirtual/ius-design-components 1.0.32 → 1.0.34
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/button-standard-tertiary-small/button-standard-tertiary-small.component.mjs +6 -3
- package/esm2022/lib/double-date-picker/double-date-picker.component.mjs +1 -1
- package/esm2022/lib/icons/icons-map.mjs +12 -2
- package/esm2022/lib/input-select/input-select.component.mjs +3 -6
- package/esm2022/lib/input-select-number/index.mjs +2 -0
- package/esm2022/lib/input-select-number/input-select-number.component.mjs +86 -0
- package/esm2022/lib/option/option.component.mjs +1 -1
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/litigiovirtual-ius-design-components.mjs +97 -8
- package/fesm2022/litigiovirtual-ius-design-components.mjs.map +1 -1
- package/lib/button-standard-tertiary-small/button-standard-tertiary-small.component.d.ts +2 -1
- package/lib/input-select/input-select.component.d.ts +1 -2
- package/lib/input-select-number/index.d.ts +1 -0
- package/lib/input-select-number/input-select-number.component.d.ts +21 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -123,6 +123,11 @@ const ICONS = {
|
|
|
123
123
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
|
124
124
|
<path d="M20.644 21.8837C18.3212 21.8837 16.0462 21.3994 13.819 20.4307C11.5918 19.4621 9.56992 18.0704 7.75325 16.2557C5.93659 14.4577 4.54392 12.4393 3.57525 10.2005C2.60659 7.96166 2.12225 5.68191 2.12225 3.36124C2.12225 2.97707 2.23317 2.67357 2.455 2.45074C2.67667 2.22774 2.9795 2.11624 3.3635 2.11624H8.21425C8.53925 2.11624 8.82142 2.21232 9.06075 2.40449C9.30025 2.59682 9.455 2.84316 9.525 3.14349L10.257 7.15424C10.3023 7.45141 10.293 7.71457 10.229 7.94374C10.1652 8.17291 10.0573 8.35741 9.9055 8.49724L7.2555 11.1135C7.55617 11.6443 7.91417 12.1667 8.3295 12.6805C8.745 13.1942 9.21775 13.7161 9.74775 14.2462C10.2319 14.7136 10.7163 15.1437 11.201 15.5365C11.6858 15.9292 12.173 16.2719 12.6625 16.5647L15.4005 13.9385C15.5777 13.7613 15.7749 13.6418 15.9923 13.58C16.2096 13.518 16.4366 13.5116 16.6733 13.5607L20.8185 14.457C21.132 14.5477 21.3879 14.7014 21.5863 14.9182C21.7846 15.1351 21.8838 15.3937 21.8838 15.694V20.6365C21.8838 21.0222 21.7722 21.3264 21.549 21.5492C21.3258 21.7722 21.0242 21.8837 20.644 21.8837ZM16.2018 7.80424H14.4825C14.1158 7.80424 13.8033 7.67649 13.545 7.42099C13.2867 7.16549 13.1575 6.85257 13.1575 6.48224C13.1575 6.11207 13.2853 5.79824 13.541 5.54074C13.7965 5.28307 14.1103 5.15424 14.4825 5.15424H16.2018V3.43524C16.2018 3.07024 16.3307 2.75916 16.5885 2.50199C16.8463 2.24482 17.1582 2.11624 17.524 2.11624C17.8883 2.11624 18.1997 2.24482 18.458 2.50199C18.7165 2.75916 18.8458 3.07024 18.8458 3.43524V5.15424H20.5588C20.9254 5.15424 21.2379 5.28341 21.4963 5.54174C21.7546 5.80007 21.8838 6.11257 21.8838 6.47924C21.8838 6.85157 21.756 7.16549 21.5005 7.42099C21.2448 7.67649 20.9309 7.80424 20.5588 7.80424H18.8458V9.52924C18.8458 9.89424 18.7169 10.2053 18.4593 10.4625C18.2018 10.7197 17.8903 10.8482 17.5248 10.8482C17.1594 10.8482 16.8476 10.7191 16.5893 10.4607C16.3309 10.2024 16.2018 9.88991 16.2018 9.52324V7.80424Z" fill="currentColor"/>
|
|
125
125
|
</svg>
|
|
126
|
+
`,
|
|
127
|
+
'icon-call-2': `
|
|
128
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
|
129
|
+
<path d="M19.962 21.2033C17.8543 21.2033 15.772 20.7441 13.715 19.8258C11.6578 18.9074 9.78398 17.604 8.09348 15.9155C6.40282 14.2268 5.0984 12.3533 4.18023 10.295C3.2619 8.23667 2.80273 6.153 2.80273 4.044C2.80273 3.68767 2.9209 3.39067 3.15723 3.153C3.39373 2.9155 3.68932 2.79675 4.04398 2.79675H8.08798C8.41298 2.79675 8.69107 2.89284 8.92224 3.085C9.1534 3.27717 9.29765 3.5235 9.35499 3.824L9.99898 7.19825C10.0482 7.52475 10.0408 7.80159 9.97698 8.02875C9.91298 8.25592 9.7904 8.45409 9.60923 8.62325L7.14823 11.0255C7.46573 11.5983 7.84165 12.1563 8.27598 12.6995C8.71048 13.2427 9.19473 13.7729 9.72873 14.2903C10.2256 14.7869 10.7374 15.2422 11.2642 15.656C11.7909 16.0698 12.3431 16.4441 12.9207 16.7788L15.3125 14.405C15.5063 14.215 15.744 14.0786 16.0255 13.9958C16.307 13.9128 16.5943 13.8958 16.8875 13.945L20.176 14.6273C20.4932 14.7178 20.7437 14.8714 20.9275 15.0883C21.1113 15.3051 21.2032 15.5638 21.2032 15.8643V19.956C21.2032 20.3123 21.0843 20.6093 20.8465 20.847C20.6087 21.0845 20.3138 21.2033 19.962 21.2033ZM6.06073 8.90425L7.70498 7.30825L7.29173 5.07175H5.10873C5.18407 5.72725 5.29365 6.37425 5.43748 7.01275C5.58132 7.65125 5.78907 8.28175 6.06073 8.90425ZM15.0347 17.8843C15.6609 18.1556 16.3005 18.3726 16.9535 18.5353C17.6067 18.6979 18.2649 18.8083 18.9282 18.8663V16.6963L16.6977 16.2333L15.0347 17.8843Z" fill="currentColor"/>
|
|
130
|
+
</svg>
|
|
126
131
|
`,
|
|
127
132
|
'icon-alarm-pause': `
|
|
128
133
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
|
@@ -138,6 +143,11 @@ const ICONS = {
|
|
|
138
143
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
|
139
144
|
<path d="M11.994 22.8837C10.494 22.8837 9.08152 22.5982 7.75652 22.0272C6.43169 21.4562 5.27927 20.6807 4.29927 19.7007C3.31927 18.7207 2.54377 17.5687 1.97277 16.2445C1.40177 14.9202 1.11627 13.5052 1.11627 11.9995C1.11627 10.4938 1.40177 9.07899 1.97277 7.75499C2.54377 6.43116 3.31927 5.27924 4.29927 4.29924C5.27927 3.31924 6.43136 2.54374 7.75552 1.97274C9.07986 1.40174 10.4949 1.11624 12.0005 1.11624C13.5062 1.11624 14.921 1.40174 16.245 1.97274C17.5689 2.54374 18.7208 3.31924 19.7008 4.29924C20.6808 5.27924 21.4563 6.43166 22.0273 7.75649C22.5983 9.08149 22.8838 10.494 22.8838 11.994V13.7652C22.8838 14.8591 22.5001 15.7863 21.7328 16.547C20.9656 17.3077 20.0277 17.688 18.919 17.688C18.3189 17.688 17.7484 17.5747 17.2075 17.348C16.6667 17.1215 16.1856 16.7962 15.7643 16.3722C15.2508 16.8296 14.672 17.1632 14.028 17.373C13.384 17.583 12.708 17.688 12 17.688C10.427 17.688 9.08577 17.1332 7.97627 16.0237C6.86677 14.9142 6.31202 13.573 6.31202 12C6.31202 10.427 6.86677 9.08574 7.97627 7.97624C9.08577 6.86674 10.427 6.31199 12 6.31199C13.573 6.31199 14.9143 6.86674 16.0238 7.97624C17.1333 9.08574 17.688 10.427 17.688 12V13.7175C17.688 14.0567 17.8099 14.3476 18.0535 14.5902C18.2972 14.8329 18.5876 14.9542 18.9248 14.9542C19.2581 14.9542 19.5446 14.8329 19.7843 14.5902C20.0241 14.3476 20.144 14.0567 20.144 13.7175V11.994C20.144 9.73133 19.3524 7.80932 17.769 6.22799C16.1857 4.64666 14.2627 3.85599 12 3.85599C9.73736 3.85599 7.81436 4.64766 6.23102 6.23099C4.64769 7.81432 3.85602 9.73732 3.85602 12C3.85602 14.2627 4.64669 16.1857 6.22802 17.769C7.80936 19.3523 9.73136 20.144 11.994 20.144H15.7213C16.1013 20.144 16.4241 20.2767 16.6898 20.5422C16.9553 20.8079 17.088 21.1307 17.088 21.5107C17.088 21.8934 16.9553 22.2179 16.6898 22.4842C16.4241 22.7506 16.1013 22.8837 15.7213 22.8837H11.994ZM12.004 14.9542C12.8235 14.9542 13.5201 14.6661 14.0938 14.0897C14.6674 13.5134 14.9543 12.8155 14.9543 11.996C14.9543 11.1765 14.6661 10.4799 14.0898 9.90624C13.5134 9.33257 12.8155 9.04574 11.996 9.04574C11.1765 9.04574 10.4799 9.33391 9.90627 9.91024C9.33261 10.4866 9.04577 11.1845 9.04577 12.004C9.04577 12.8235 9.33394 13.5201 9.91027 14.0937C10.4866 14.6674 11.1845 14.9542 12.004 14.9542Z" fill="currentColor"/>
|
|
140
145
|
</svg>
|
|
146
|
+
`,
|
|
147
|
+
'icon-alternate-email-2': `
|
|
148
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
|
149
|
+
<path d="M11.994 22.2033C10.5847 22.2033 9.26025 21.9358 8.02075 21.4008C6.78125 20.8658 5.7015 20.1383 4.7815 19.2185C3.86167 18.2985 3.13425 17.2181 2.59925 15.9773C2.06425 14.7363 1.79675 13.4103 1.79675 11.9995C1.79675 10.5887 2.06425 9.26292 2.59925 8.02225C3.13425 6.78175 3.86167 5.7015 4.7815 4.7815C5.7015 3.86167 6.78192 3.13425 8.02275 2.59925C9.26375 2.06425 10.5897 1.79675 12.0005 1.79675C13.4113 1.79675 14.7371 2.06425 15.9778 2.59925C17.2183 3.13425 18.2985 3.86167 19.2185 4.7815C20.1383 5.7015 20.8658 6.78125 21.4008 8.02075C21.9358 9.26025 22.2033 10.5847 22.2033 11.994V13.444C22.2033 14.4538 21.8498 15.3139 21.143 16.0243C20.436 16.7346 19.5729 17.0898 18.5538 17.0898C17.9576 17.0898 17.3954 16.9628 16.8673 16.7088C16.3391 16.4548 15.9 16.0864 15.55 15.6038C15.0827 16.1031 14.5428 16.4756 13.9305 16.7213C13.3182 16.9669 12.6747 17.0898 12 17.0898C10.5888 17.0898 9.38775 16.5943 8.39675 15.6033C7.40575 14.6123 6.91025 13.4112 6.91025 12C6.91025 10.5888 7.40575 9.38775 8.39675 8.39675C9.38775 7.40575 10.5888 6.91025 12 6.91025C13.4112 6.91025 14.6123 7.40575 15.6033 8.39675C16.5943 9.38775 17.0898 10.5888 17.0898 12V13.3963C17.0898 13.8196 17.2294 14.1778 17.5088 14.4708C17.7881 14.7638 18.1384 14.9103 18.5598 14.9103C18.9809 14.9103 19.3293 14.7638 19.6048 14.4708C19.8803 14.1778 20.018 13.8196 20.018 13.3963V11.994C20.018 9.76067 19.24 7.867 17.684 6.313C16.128 4.759 14.2333 3.982 12 3.982C9.76667 3.982 7.872 4.76 6.316 6.316C4.76 7.872 3.982 9.76667 3.982 12C3.982 14.2333 4.759 16.128 6.313 17.684C7.867 19.24 9.7615 20.018 11.9965 20.018H17V22.2033H11.994ZM12.001 14.9103C12.8098 14.9103 13.4969 14.6273 14.0623 14.0613C14.6276 13.4951 14.9103 12.8077 14.9103 11.999C14.9103 11.1902 14.6273 10.5031 14.0613 9.93775C13.4951 9.37242 12.8077 9.08975 11.999 9.08975C11.1902 9.08975 10.5031 9.37275 9.93775 9.93875C9.37242 10.5049 9.08975 11.1923 9.08975 12.001C9.08975 12.8098 9.37275 13.4969 9.93875 14.0623C10.5049 14.6276 11.1923 14.9103 12.001 14.9103Z" fill="currentColor"/>
|
|
150
|
+
</svg>
|
|
141
151
|
`,
|
|
142
152
|
'icon-app-badging': `
|
|
143
153
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
|
@@ -895,7 +905,7 @@ const ICONS = {
|
|
|
895
905
|
<g mask="url(#mask0_799_6807)">
|
|
896
906
|
<path d="M1.3999 11.9V2.45001H6.9999V4.55001H12.5999V11.9H1.3999ZM2.4499 10.85H5.9499V9.80001H2.4499V10.85ZM2.4499 8.75001H5.9499V7.70001H2.4499V8.75001ZM2.4499 6.65001H5.9499V5.60001H2.4499V6.65001ZM2.4499 4.55001H5.9499V3.50001H2.4499V4.55001ZM6.9999 10.85H11.5499V5.60001H6.9999V10.85ZM8.0499 7.70001V6.65001H10.4999V7.70001H8.0499ZM8.0499 9.80001V8.75001H10.4999V9.80001H8.0499Z" fill="currentColor"/>
|
|
897
907
|
</g>
|
|
898
|
-
</svg
|
|
908
|
+
</svg>`,
|
|
899
909
|
};
|
|
900
910
|
|
|
901
911
|
class IconLgComponent {
|
|
@@ -1043,6 +1053,7 @@ class ButtonStandardTertiarySmallComponent {
|
|
|
1043
1053
|
constructor() {
|
|
1044
1054
|
this.disabled = false;
|
|
1045
1055
|
this.iconName = '';
|
|
1056
|
+
this.iconNameRight = '';
|
|
1046
1057
|
this.buttonClicked = new EventEmitter();
|
|
1047
1058
|
}
|
|
1048
1059
|
onClick() {
|
|
@@ -1051,15 +1062,17 @@ class ButtonStandardTertiarySmallComponent {
|
|
|
1051
1062
|
}
|
|
1052
1063
|
}
|
|
1053
1064
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonStandardTertiarySmallComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1054
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1065
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ButtonStandardTertiarySmallComponent, isStandalone: true, selector: "ius-button-standard-tertiary-small", inputs: { disabled: "disabled", iconName: "iconName", iconNameRight: "iconNameRight" }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\">\r\n @if(iconName){\r\n <ius-icon-sm [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-sm>\r\n }\r\n <ng-content></ng-content>\r\n @if(iconNameRight){\r\n <ius-icon-sm [iconName]=\"iconNameRight\" class=\"icon-color\"></ius-icon-sm>\r\n }\r\n</button>", 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-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}.icon-color{color:#333}.ius-btn{display:inline-flex;padding:8px;justify-content:center;align-items:center;gap:4px;border-radius:14px;background-color:#fff;color:#333;border:none;cursor:pointer;letter-spacing:.24px;font-weight:400;font-family:Rubik,sans-serif;font-size:.75rem;line-height:16px}.ius-btn:hover:not(:disabled){background-color:#eaeaea}.ius-btn:active:not(:disabled){background-color:#02457f;color:#fff}.ius-btn:active:not(:disabled) .icon-color{color:#fff}.ius-btn:disabled{color:#bfbfbf;background-color:#fff;cursor:not-allowed}.ius-btn:disabled .icon-color{color:#bfbfbf}\n"], dependencies: [{ kind: "component", type: IconSmComponent, selector: "ius-icon-sm", inputs: ["iconName", "color"] }] }); }
|
|
1055
1066
|
}
|
|
1056
1067
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonStandardTertiarySmallComponent, decorators: [{
|
|
1057
1068
|
type: Component,
|
|
1058
|
-
args: [{ selector: 'ius-button-standard-tertiary-small', standalone: true, imports: [IconSmComponent], template: "<button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\">\r\n <ius-icon-sm [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-sm>\r\n <ng-content></ng-content>\r\n
|
|
1069
|
+
args: [{ selector: 'ius-button-standard-tertiary-small', standalone: true, imports: [IconSmComponent], template: "<button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\">\r\n @if(iconName){\r\n <ius-icon-sm [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-sm>\r\n }\r\n <ng-content></ng-content>\r\n @if(iconNameRight){\r\n <ius-icon-sm [iconName]=\"iconNameRight\" class=\"icon-color\"></ius-icon-sm>\r\n }\r\n</button>", 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-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}.icon-color{color:#333}.ius-btn{display:inline-flex;padding:8px;justify-content:center;align-items:center;gap:4px;border-radius:14px;background-color:#fff;color:#333;border:none;cursor:pointer;letter-spacing:.24px;font-weight:400;font-family:Rubik,sans-serif;font-size:.75rem;line-height:16px}.ius-btn:hover:not(:disabled){background-color:#eaeaea}.ius-btn:active:not(:disabled){background-color:#02457f;color:#fff}.ius-btn:active:not(:disabled) .icon-color{color:#fff}.ius-btn:disabled{color:#bfbfbf;background-color:#fff;cursor:not-allowed}.ius-btn:disabled .icon-color{color:#bfbfbf}\n"] }]
|
|
1059
1070
|
}], propDecorators: { disabled: [{
|
|
1060
1071
|
type: Input
|
|
1061
1072
|
}], iconName: [{
|
|
1062
1073
|
type: Input
|
|
1074
|
+
}], iconNameRight: [{
|
|
1075
|
+
type: Input
|
|
1063
1076
|
}], buttonClicked: [{
|
|
1064
1077
|
type: Output
|
|
1065
1078
|
}] } });
|
|
@@ -2163,7 +2176,6 @@ class InputSelectComponent {
|
|
|
2163
2176
|
this.textInput = '';
|
|
2164
2177
|
this.onChangesValueEvent = new EventEmitter();
|
|
2165
2178
|
this.onAddText = new EventEmitter();
|
|
2166
|
-
this.optionClick = new EventEmitter();
|
|
2167
2179
|
}
|
|
2168
2180
|
//Esta funcion permite que el se cierre el listado si el usuario da click en otro lado fuera del componente
|
|
2169
2181
|
onClickOutside(event) {
|
|
@@ -2223,11 +2235,11 @@ class InputSelectComponent {
|
|
|
2223
2235
|
this.selected = true;
|
|
2224
2236
|
}
|
|
2225
2237
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2226
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputSelectComponent, isStandalone: true, selector: "ius-input-select", inputs: { componentId: "componentId", required: "required", disabled: "disabled", showHelpText: "showHelpText", labelSuperior: "labelSuperior", labelInferior: "labelInferior", labelInput: "labelInput", iconInput: "iconInput", textInput: "textInput" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onAddText: "onAddText"
|
|
2238
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputSelectComponent, isStandalone: true, selector: "ius-input-select", inputs: { componentId: "componentId", required: "required", disabled: "disabled", showHelpText: "showHelpText", labelSuperior: "labelSuperior", labelInferior: "labelInferior", labelInput: "labelInput", iconInput: "iconInput", textInput: "textInput" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onAddText: "onAddText" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<div class=\"container-general\" [id]=\"componentId\">\n @if (labelSuperior) {\n <div class=\"container-label-sup\" [ngClass]=\"{\n 'disabled': disabled\n }\">\n @if(!disabled && required){\n <div class=\"icon-dot\"></div>\n }\n <span class=\"\">{{labelSuperior}}</span>\n @if(!disabled && showHelpText){\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\n }\n <span>:</span>\n </div>\n }\n <div class=\"container-textfield\" [ngClass]=\"{\n 'disabled': disabled,\n 'focused': isFocused,\n 'alert': !isFocused && isAlertText && !disabled\n }\">\n @if (iconInput) {\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\n }\n <input type=\"text\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" type=\"text\" (keypress)=\"onKeyPress($event)\">\n <div class=\"cnt-icon-right\">\n @if(!showList){\n <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\n }@else{\n <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\n }\n </div>\n </div>\n @if (labelInferior && isFocused) {\n <span class=\"label-inf\">{{labelInferior}}</span>\n }\n @if (labelInferior && !isFocused && isAlertText) {\n <span class=\"label-inf\" [ngClass]=\"{\n 'alert': !isFocused && isAlertText && !disabled\n }\">{{labelInferior}}</span>\n }\n @if (showList) {\n <div class=\"container-list scrollable-small\">\n <div (click)=\"onSelectOption()\">\n <ng-content selector=\"ius-option\"></ng-content>\n </div>\n </div>\n }\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-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-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;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}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled .icon-color,.container-textfield.disabled .icon-arrows{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.icon-color{color:#595959}.icon-arrows{color:#333}input{display:flex;align-items:center;flex:1 0 0;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.cnt-icon-right{display:flex;align-items:center;justify-content:center;background:none;padding:0;color:#333}.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;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}.container-list{position:absolute;max-height:144px;width:100%;display:flex;flex-direction:column;margin-top:4px;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;z-index:1000;overflow-y:auto}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:4px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}\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.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"] }] }); }
|
|
2227
2239
|
}
|
|
2228
2240
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectComponent, decorators: [{
|
|
2229
2241
|
type: Component,
|
|
2230
|
-
args: [{ selector: 'ius-input-select', standalone: true, imports: [IconMdComponent, FormsModule, CommonModule], template: "<div class=\"container-general\" [id]=\"componentId\">\
|
|
2242
|
+
args: [{ selector: 'ius-input-select', standalone: true, imports: [IconMdComponent, FormsModule, CommonModule], template: "<div class=\"container-general\" [id]=\"componentId\">\n @if (labelSuperior) {\n <div class=\"container-label-sup\" [ngClass]=\"{\n 'disabled': disabled\n }\">\n @if(!disabled && required){\n <div class=\"icon-dot\"></div>\n }\n <span class=\"\">{{labelSuperior}}</span>\n @if(!disabled && showHelpText){\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\n }\n <span>:</span>\n </div>\n }\n <div class=\"container-textfield\" [ngClass]=\"{\n 'disabled': disabled,\n 'focused': isFocused,\n 'alert': !isFocused && isAlertText && !disabled\n }\">\n @if (iconInput) {\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\n }\n <input type=\"text\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" type=\"text\" (keypress)=\"onKeyPress($event)\">\n <div class=\"cnt-icon-right\">\n @if(!showList){\n <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\n }@else{\n <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\n }\n </div>\n </div>\n @if (labelInferior && isFocused) {\n <span class=\"label-inf\">{{labelInferior}}</span>\n }\n @if (labelInferior && !isFocused && isAlertText) {\n <span class=\"label-inf\" [ngClass]=\"{\n 'alert': !isFocused && isAlertText && !disabled\n }\">{{labelInferior}}</span>\n }\n @if (showList) {\n <div class=\"container-list scrollable-small\">\n <div (click)=\"onSelectOption()\">\n <ng-content selector=\"ius-option\"></ng-content>\n </div>\n </div>\n }\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-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-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;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}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled .icon-color,.container-textfield.disabled .icon-arrows{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.icon-color{color:#595959}.icon-arrows{color:#333}input{display:flex;align-items:center;flex:1 0 0;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.cnt-icon-right{display:flex;align-items:center;justify-content:center;background:none;padding:0;color:#333}.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;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}.container-list{position:absolute;max-height:144px;width:100%;display:flex;flex-direction:column;margin-top:4px;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;z-index:1000;overflow-y:auto}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:4px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}\n"] }]
|
|
2231
2243
|
}], propDecorators: { componentId: [{
|
|
2232
2244
|
type: Input,
|
|
2233
2245
|
args: [{ required: true }]
|
|
@@ -2251,7 +2263,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2251
2263
|
type: Output
|
|
2252
2264
|
}], onAddText: [{
|
|
2253
2265
|
type: Output
|
|
2254
|
-
}],
|
|
2266
|
+
}], onClickOutside: [{
|
|
2267
|
+
type: HostListener,
|
|
2268
|
+
args: ['document:click', ['$event']]
|
|
2269
|
+
}] } });
|
|
2270
|
+
|
|
2271
|
+
class InputSelectNumberComponent {
|
|
2272
|
+
constructor() {
|
|
2273
|
+
this.isFocused = false;
|
|
2274
|
+
this.isAlertText = false;
|
|
2275
|
+
this.showList = false;
|
|
2276
|
+
this.hasClickedInside = false; //Bandera para detectar que ya dieron el primer click en el componente
|
|
2277
|
+
this.selected = false;
|
|
2278
|
+
this.componentId = ''; //Debe mandar un componenteID para llamar el input varias veces
|
|
2279
|
+
this.required = false;
|
|
2280
|
+
this.disabled = false;
|
|
2281
|
+
this.onChangesValueEvent = new EventEmitter();
|
|
2282
|
+
}
|
|
2283
|
+
onClickOutside(event) {
|
|
2284
|
+
if (!this.hasClickedInside) {
|
|
2285
|
+
return;
|
|
2286
|
+
}
|
|
2287
|
+
const target = event.target;
|
|
2288
|
+
const container = document.getElementById(this.componentId);
|
|
2289
|
+
if (container && !container.contains(target)) {
|
|
2290
|
+
this.isFocused = false;
|
|
2291
|
+
this.showList = false;
|
|
2292
|
+
if (!this.selected && !this.showList) {
|
|
2293
|
+
this.isAlertText = true;
|
|
2294
|
+
}
|
|
2295
|
+
else {
|
|
2296
|
+
this.isAlertText = false;
|
|
2297
|
+
}
|
|
2298
|
+
}
|
|
2299
|
+
}
|
|
2300
|
+
onInput() {
|
|
2301
|
+
if (this.selected) {
|
|
2302
|
+
this.selected = false;
|
|
2303
|
+
}
|
|
2304
|
+
this.onChangesValueEvent.emit(this.numberInput);
|
|
2305
|
+
}
|
|
2306
|
+
onFocus() {
|
|
2307
|
+
this.isFocused = true;
|
|
2308
|
+
this.showList = true;
|
|
2309
|
+
this.hasClickedInside = true;
|
|
2310
|
+
}
|
|
2311
|
+
onBlur() {
|
|
2312
|
+
this.isFocused = false;
|
|
2313
|
+
if (this.required) {
|
|
2314
|
+
if (!this.numberInput) {
|
|
2315
|
+
this.isAlertText = true;
|
|
2316
|
+
}
|
|
2317
|
+
else {
|
|
2318
|
+
this.isAlertText = false;
|
|
2319
|
+
}
|
|
2320
|
+
}
|
|
2321
|
+
}
|
|
2322
|
+
onSelectOption() {
|
|
2323
|
+
this.isFocused = false;
|
|
2324
|
+
this.showList = false;
|
|
2325
|
+
this.isAlertText = false;
|
|
2326
|
+
this.selected = true;
|
|
2327
|
+
}
|
|
2328
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2329
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputSelectNumberComponent, isStandalone: true, selector: "ius-input-select-number", inputs: { componentId: "componentId", required: "required", disabled: "disabled", numberInput: "numberInput" }, outputs: { onChangesValueEvent: "onChangesValueEvent" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<div class=\"container-general\" [id]=\"componentId\">\r\n @if (showList) {\r\n <div class=\"container-list scrollable-small\">\r\n <div (click)=\"onSelectOption()\">\r\n <!-- <ng-content selector=\"ius-option\"></ng-content> -->\r\n </div>\r\n </div>\r\n }\r\n <div class=\"container-textfield\" [ngClass]=\"{\r\n 'disabled': disabled,\r\n 'focused': isFocused,\r\n 'alert': !isFocused && isAlertText && !disabled\r\n }\">\r\n <input [(ngModel)]=\"numberInput\" [disabled]=\"disabled\" (input)=\"onInput()\" (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\" type=\"number\">\r\n <div class=\"cnt-icon-right\">\r\n @if(!showList){\r\n <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\r\n }@else{\r\n <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\r\n }\r\n </div>\r\n </div>\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-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-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:center;gap:4px;height:22px;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}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled .icon-color,.container-textfield.disabled .icon-arrows{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}input{display:flex;align-items:center;flex:1 0 0;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.icon-arrows{color:#333}.container-list{position:absolute;max-height:144px;width:100%;display:flex;flex-direction:column;margin-top:4px;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;z-index:1000;overflow-y:auto}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:4px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}\n"], dependencies: [{ 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }] }); }
|
|
2330
|
+
}
|
|
2331
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectNumberComponent, decorators: [{
|
|
2332
|
+
type: Component,
|
|
2333
|
+
args: [{ selector: 'ius-input-select-number', standalone: true, imports: [FormsModule, CommonModule, IconMdComponent], template: "<div class=\"container-general\" [id]=\"componentId\">\r\n @if (showList) {\r\n <div class=\"container-list scrollable-small\">\r\n <div (click)=\"onSelectOption()\">\r\n <!-- <ng-content selector=\"ius-option\"></ng-content> -->\r\n </div>\r\n </div>\r\n }\r\n <div class=\"container-textfield\" [ngClass]=\"{\r\n 'disabled': disabled,\r\n 'focused': isFocused,\r\n 'alert': !isFocused && isAlertText && !disabled\r\n }\">\r\n <input [(ngModel)]=\"numberInput\" [disabled]=\"disabled\" (input)=\"onInput()\" (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\" type=\"number\">\r\n <div class=\"cnt-icon-right\">\r\n @if(!showList){\r\n <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\r\n }@else{\r\n <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\r\n }\r\n </div>\r\n </div>\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-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-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:center;gap:4px;height:22px;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}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled .icon-color,.container-textfield.disabled .icon-arrows{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}input{display:flex;align-items:center;flex:1 0 0;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.icon-arrows{color:#333}.container-list{position:absolute;max-height:144px;width:100%;display:flex;flex-direction:column;margin-top:4px;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;z-index:1000;overflow-y:auto}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:4px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}\n"] }]
|
|
2334
|
+
}], propDecorators: { componentId: [{
|
|
2335
|
+
type: Input,
|
|
2336
|
+
args: [{ required: true }]
|
|
2337
|
+
}], required: [{
|
|
2338
|
+
type: Input
|
|
2339
|
+
}], disabled: [{
|
|
2340
|
+
type: Input
|
|
2341
|
+
}], numberInput: [{
|
|
2342
|
+
type: Input
|
|
2343
|
+
}], onChangesValueEvent: [{
|
|
2255
2344
|
type: Output
|
|
2256
2345
|
}], onClickOutside: [{
|
|
2257
2346
|
type: HostListener,
|
|
@@ -2642,5 +2731,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2642
2731
|
* Generated bundle index. Do not edit.
|
|
2643
2732
|
*/
|
|
2644
2733
|
|
|
2645
|
-
export { AvatarIconComponent, BadgeComponent, ButtonCircleSecondaryComponent, ButtonCircleTertiaryComponent, ButtonDynamicComponent, ButtonSquaredSecondaryComponent, ButtonSquaredTertiaryComponent, ButtonStandardPrimaryComponent, ButtonStandardSecondaryComponent, ButtonStandardTertiaryComponent, ButtonStandardTertiarySmallComponent, CardDynamicContentComponent, CardListMovimientosComponent, DateHourPickerComponent, DatePickerComponent, DoubleDatePickerComponent, DrawerContainerRightComponent, DropdownComponent, DropdownOptionItemComponent, DropdownUserMenuComponent, IconLgComponent, IconMdComponent, IconSmComponent, IconXlComponent, IconXsComponent, IconXxlComponent, InputSelectComponent, InputTextfieldComponent, LinearProgressBarComponent, LoadingCircleComponent, MenuItemComponent, NavRailComponent, OptionComponent, SearchBarComponent, SectionCollapseDrawerChildComponent, SectionCollapseDrawerParentComponent, SimpleDividerComponent, SlideToggleComponent };
|
|
2734
|
+
export { AvatarIconComponent, BadgeComponent, ButtonCircleSecondaryComponent, ButtonCircleTertiaryComponent, ButtonDynamicComponent, ButtonSquaredSecondaryComponent, ButtonSquaredTertiaryComponent, ButtonStandardPrimaryComponent, ButtonStandardSecondaryComponent, ButtonStandardTertiaryComponent, ButtonStandardTertiarySmallComponent, CardDynamicContentComponent, CardListMovimientosComponent, DateHourPickerComponent, DatePickerComponent, DoubleDatePickerComponent, DrawerContainerRightComponent, DropdownComponent, DropdownOptionItemComponent, DropdownUserMenuComponent, IconLgComponent, IconMdComponent, IconSmComponent, IconXlComponent, IconXsComponent, IconXxlComponent, InputSelectComponent, InputSelectNumberComponent, InputTextfieldComponent, LinearProgressBarComponent, LoadingCircleComponent, MenuItemComponent, NavRailComponent, OptionComponent, SearchBarComponent, SectionCollapseDrawerChildComponent, SectionCollapseDrawerParentComponent, SimpleDividerComponent, SlideToggleComponent };
|
|
2646
2735
|
//# sourceMappingURL=litigiovirtual-ius-design-components.mjs.map
|