@crowdfarming/oliva-ds 1.10.0 → 1.11.0-hotfix.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/crowdfarming-oliva-ds.mjs +89 -88
- package/fesm2022/crowdfarming-oliva-ds.mjs.map +1 -1
- package/lib/alert/src/lib/alert/alert.component.d.ts +7 -7
- package/lib/avatar/src/lib/avatar/avatar.component.d.ts +6 -5
- package/lib/button/src/lib/button/button.component.d.ts +1 -1
- package/lib/button-icon/src/lib/button-icon/button-icon.component.d.ts +4 -2
- package/lib/button-set/src/lib/button-set/button-set.component.d.ts +1 -1
- package/lib/checkbox/src/lib/checkbox/checkbox.component.d.ts +4 -1
- package/lib/input-label/src/lib/input-label/input-label.component.d.ts +7 -6
- package/package.json +1 -1
|
@@ -11,11 +11,11 @@ class IconComponent {
|
|
|
11
11
|
size = 'lg';
|
|
12
12
|
icon = '';
|
|
13
13
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: IconComponent, isStandalone: true, selector: "lib-icon", inputs: { extraClass: "extraClass", variant: "variant", size: "size", icon: "icon" }, ngImport: i0, template: "<svg\n *ngIf=\"icon === 'alert'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__alert',\n 'o-svg--' + size,\n extraClass ? 'o-svg__alert--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"m18.5001 14.6946-6.832-11.86486c-.1708-.29068-.4145-.53171-.7071-.69917-.2925-.16747-.6238-.25557-.9609-.25557-.33711 0-.66836.0881-.96094.25557-.29257.16746-.5363.40849-.70702.69917L1.50011 14.6946c-.16427.2811-.25084.6009-.25084.9265 0 .3257.08657.6454.25084.9266.16854.2924.41185.5348.70497.7021.29311.1674.62548.2538.96299.2503H16.8321c.3373.0032.6693-.0833.9621-.2507.2929-.1673.5359-.4095.7043-.7017.1645-.281.2514-.6007.2517-.9263.0002-.3257-.0861-.6455-.2501-.9268Zm-1.0836 1.2273c-.0595.1016-.1451.1856-.2477.2432-.1027.0577-.2189.087-.3367.085H3.16807c-.11775.002-.23392-.0273-.33661-.085-.10269-.0576-.1882-.1416-.24776-.2432-.05395-.0913-.08241-.1955-.08241-.3015 0-.1061.02846-.2103.08241-.3016L9.41573 3.45396c.06076-.10112.14666-.18479.24933-.24288.10268-.05808.21864-.08861.33664-.08861.1179 0 .2339.03053.3366.08861.1026.05809.1885.14176.2493.24288l6.832 11.86484c.0535.0916.0814.1959.0809.302-.0006.1061-.0296.2101-.084.3011Zm-8.04139-4.6718V8.12505c0-.16576.06584-.32473.18305-.44194.11721-.11721.27618-.18306.44194-.18306.1658 0 .3247.06585.4419.18306.1173.11721.1831.27618.1831.44194v3.12505c0 .1657-.0658.3247-.1831.4419-.1172.1172-.2761.1831-.4419.1831-.16576 0-.32473-.0659-.44194-.1831-.11721-.1172-.18305-.2762-.18305-.4419Zm1.56249 2.8125c0 .1854-.055.3666-.158.5208-.103.1542-.2494.2743-.4207.3453-.1713.0709-.35983.0895-.54169.0533-.18186-.0361-.34891-.1254-.48002-.2565s-.2204-.2982-.25657-.4801c-.03617-.1818-.01761-.3703.05335-.5416.07096-.1713.19112-.3177.34529-.4208.15417-.103.33543-.1579.52084-.1579.2486 0 .4871.0987.6629.2745.1758.1759.2746.4143.2746.663Z\"\n fill=\"#BA2F1E\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'arrow' && variant === 'left'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__arrow',\n 'o-svg--' + size,\n extraClass ? 'o-svg__alert--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"M15.5302 18.9694c.0697.0697.125.1524.1627.2435.0377.091.0571.1886.0571.2872 0 .0985-.0194.1961-.0571.2871-.0377.0911-.093.1738-.1627.2435-.0696.0697-.1524.1249-.2434.1626-.0911.0378-.1886.0572-.2872.0572-.0985 0-.1961-.0194-.2872-.0572-.091-.0377-.1737-.0929-.2434-.1626l-7.50001-7.5c-.06973-.0697-.12505-.1524-.1628-.2434-.03774-.0911-.05717-.1887-.05717-.2872 0-.0986.01943-.1962.05717-.2873.03775-.091.09307-.1737.1628-.2434L14.469 3.96943c.1407-.14073.3316-.2198.5306-.2198.199 0 .3899.07907.5306.2198.1408.14073.2198.3316.2198.53062 0 .19902-.079.3899-.2198.53063L8.55993 12.0001l6.97027 6.9693Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'arrow' && variant === 'right'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__arrow',\n 'o-svg--' + size,\n extraClass ? 'o-svg__alert--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"m17.031 12.5307-7.49996 7.5c-.06968.0697-.15241.1249-.24345.1626-.09105.0378-.18863.0572-.28717.0572-.09855 0-.19613-.0194-.28718-.0572-.09104-.0377-.17377-.0929-.24345-.1626-.06968-.0697-.12496-.1524-.16267-.2435-.03771-.091-.05712-.1886-.05712-.2871 0-.0986.01941-.1962.05712-.2872.03771-.0911.09299-.1738.16267-.2435l6.97031-6.9693-6.97031-6.96942C8.32906 4.88995 8.25 4.69907 8.25 4.50005c0-.19902.07906-.38989.21979-.53062.14073-.14073.3316-.2198.53063-.2198.19902 0 .38989.07907.53062.2198L17.031 11.4694c.0698.0697.1251.1524.1628.2434.0378.0911.0572.1887.0572.2873 0 .0985-.0194.1961-.0572.2872-.0377.091-.093.1737-.1628.2434Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'arrow' && variant === 'up'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__arrow',\n 'o-svg--' + size,\n extraClass ? 'o-svg__alert--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"M20.0306 15.5306c-.0696.0697-.1524.1251-.2434.1628-.0911.0377-.1886.0572-.2872.0572-.0986 0-.1962-.0195-.2872-.0572-.0911-.0377-.1738-.0931-.2434-.1628L12 8.56029 5.03061 15.5306c-.14073.1407-.3316.2198-.53062.2198-.19902 0-.38989-.0791-.53063-.2198-.14073-.1407-.21979-.3316-.21979-.5306 0-.199.07906-.3899.21979-.5306l7.50004-7.50005c.0696-.06973.1523-.12505.2434-.16279.091-.03774.1886-.05717.2872-.05717.0986 0 .1961.01943.2872.05717.091.03774.1738.09306.2434.16279l7.5 7.50005c.0697.0696.1251.1523.1628.2434.0378.091.0572.1886.0572.2872 0 .0985-.0194.1961-.0572.2872-.0377.091-.0931.1737-.1628.2434Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'arrow' && variant === 'down'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__arrow',\n 'o-svg--' + size,\n extraClass ? 'o-svg__alert--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"m20.0306 9.53062-7.5 7.49998c-.0696.0697-.1524.1251-.2434.1628-.0911.0378-.1886.0572-.2872.0572-.0986 0-.1962-.0194-.2872-.0572-.0911-.0377-.1738-.0931-.2434-.1628L3.96936 9.53062c-.14073-.14074-.21979-.33161-.21979-.53063 0-.19902.07906-.3899.21979-.53063.14074-.14073.33161-.21979.53063-.21979.19902 0 .38989.07906.53062.21979L12 15.4397l6.9694-6.97034c.0696-.06968.1524-.12495.2434-.16267.0911-.03771.1886-.05712.2872-.05712.0985 0 .1961.01941.2872.05712.091.03772.1737.09299.2434.16267.0697.06969.125.15241.1627.24346.0377.09104.0571.18862.0571.28717 0 .09855-.0194.19613-.0571.28717-.0377.09105-.093.17377-.1627.24346Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'calendar'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__calendar',\n 'o-svg--' + size,\n extraClass ? 'o-svg__calendar--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M16.25 2.5h-1.875v-.625c0-.16576-.0658-.32473-.1831-.44194-.1172-.11721-.2761-.18306-.4419-.18306s-.3247.06585-.4419.18306c-.1173.11721-.1831.27618-.1831.44194V2.5h-6.25v-.625c0-.16576-.06585-.32473-.18306-.44194C6.57473 1.31585 6.41576 1.25 6.25 1.25c-.16576 0-.32473.06585-.44194.18306-.11721.11721-.18306.27618-.18306.44194V2.5H3.75c-.33152 0-.64946.1317-.88388.36612C2.6317 3.10054 2.5 3.41848 2.5 3.75v12.5c0 .3315.1317.6495.36612.8839.23442.2344.55236.3661.88388.3661h12.5c.3315 0 .6495-.1317.8839-.3661.2344-.2344.3661-.5524.3661-.8839V3.75c0-.33152-.1317-.64946-.3661-.88388C16.8995 2.6317 16.5815 2.5 16.25 2.5ZM5.625 3.75v.625c0 .16576.06585.32473.18306.44194C5.92527 4.93415 6.08424 5 6.25 5c.16576 0 .32473-.06585.44194-.18306.11721-.11721.18306-.27618.18306-.44194V3.75h6.25v.625c0 .16576.0658.32473.1831.44194.1172.11721.2761.18306.4419.18306s.3247-.06585.4419-.18306c.1173-.11721.1831-.27618.1831-.44194V3.75h1.875v2.5H3.75v-2.5h1.875Zm10.625 12.5H3.75V7.5h12.5v8.75Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'eye' && variant === 'open'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__eye',\n 'o-svg--' + size,\n extraClass ? 'o-svg__alert--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M19.3211 9.74688c-.0274-.06172-.6891-1.52969-2.1602-3.00079C15.2008 4.78594 12.725 3.75 9.99999 3.75c-2.725 0-5.20078 1.03594-7.16094 2.99609C1.36796 8.21719.703118 9.6875.678899 9.74688.643362 9.82681.625 9.91331.625 10.0008c0 .0875.018362.174.053899.2539.027344.0617.689061 1.5289 2.160151 3C4.79921 15.2141 7.27499 16.25 9.99999 16.25c2.72501 0 5.20081-1.0359 7.16091-2.9953 1.4711-1.4711 2.1328-2.9383 2.1602-3 .0355-.0799.0539-.1664.0539-.2539 0-.08749-.0184-.17399-.0539-.25392ZM9.99999 15c-2.40469 0-4.50547-.8742-6.24453-2.5977C3.0419 11.6927 2.43483 10.8836 1.95312 10c.48158-.88364 1.08867-1.69283 1.80234-2.40234C5.49452 5.87422 7.5953 5 9.99999 5c2.40471 0 4.50551.87422 6.24451 2.59766.715.70934 1.3234 1.51853 1.8063 2.40234-.5633 1.0516-3.0172 5-8.05081 5Zm0-8.75c-.74168 0-1.4667.21993-2.08339.63199-.61668.41205-1.09733.99772-1.38116 1.68295-.28382.68522-.35809 1.43926-.21339 2.16666.14469.7274.50184 1.3956 1.02629 1.9201.52445.5244 1.19263.8816 1.92006 1.0262.72743.1447 1.4814.0705 2.1667-.2134.6852-.2838 1.2708-.7644 1.6829-1.3811.4121-.6167.632-1.3417.632-2.0834-.001-.99424-.3965-1.94747-1.0995-2.65051-.703-.70304-1.6563-1.09846-2.65051-1.09949Zm0 6.25c-.49445 0-.9778-.1466-1.38892-.4213-.41113-.2747-.73156-.6652-.92078-1.122-.18922-.4568-.23872-.95947-.14226-1.44443.09646-.48495.33456-.93041.68419-1.28004.34964-.34963.79509-.58773 1.28005-.68419.48495-.09647.98763-.04696 1.44443.14226.4568.18922.8473.50965 1.122.92077.2747.41113.4213.89448.4213 1.38893 0 .663-.2634 1.2989-.7322 1.7678-.4689.4688-1.1048.7322-1.76781.7322Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'eye' && variant === 'close'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__eye',\n 'o-svg--' + size,\n extraClass ? 'o-svg__alert--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M4.21249 2.70468c-.05488-.06187-.1215-.11223-.196-.14816-.07449-.03594-.15538-.05673-.23796-.06117-.08259-.00444-.16524.00755-.24316.03528-.07791.02774-.14955.07066-.21076.12628-.06121.05563-.11077.12285-.1458.19776-.03504.07492-.05486.15605-.05831.23869-.00346.08263.00953.16513.03819.24271.02867.07758.07245.1487.1288.20923l1.50313 1.65391C1.95312 6.94062.732805 9.62499.678899 9.74687.643362 9.8268.625 9.9133.625 10.0008c0 .0874.018362.1739.053899.2539.027344.0617.689061 1.5289 2.160151 3C4.79921 15.2141 7.27499 16.25 9.99999 16.25c1.40051.008 2.78681-.2804 4.06801-.8461l1.7187 1.8914c.0549.0619.1215.1122.196.1482.0745.0359.1554.0567.238.0611.0826.0045.1652-.0075.2431-.0352.0779-.0278.1496-.0707.2108-.1263.0612-.0557.1108-.1229.1458-.1978.035-.0749.0549-.156.0583-.2387.0035-.0826-.0095-.1651-.0382-.2427-.0287-.0776-.0724-.1487-.1288-.2092L4.21249 2.70468Zm3.69766 5.925 3.25545 3.58202c-.4902.2579-1.0522.3457-1.59777.2496-.54554-.0962-1.0437-.3707-1.41626-.7807-.37256-.4099-.59843-.932-.64212-1.4842-.0437-.5522.09725-1.10329.4007-1.56672ZM9.99999 15c-2.40469 0-4.50547-.8742-6.24453-2.5977-.71382-.7094-1.32092-1.5186-1.80234-2.40231.3664-.68672 1.53593-2.60859 3.69922-3.85781l1.40625 1.54297c-.54443.69727-.82482 1.56456-.79162 2.44855.0332.884.37786 1.7278.97305 2.3823.59519.6545 1.40259 1.0775 2.2795 1.1942.87688.1167 1.76688-.0803 2.51248-.5563l1.1508 1.2656c-1.0156.3897-2.095.5865-3.18281.5805Zm.46871-7.45548c-.1628-.03108-.3067-.12558-.3998-.26272-.09322-.13713-.12811-.30567-.09703-.46853.03103-.16286.12563-.3067.26273-.39988.1371-.09318.3057-.12807.4685-.09699.7966.15443 1.5219.56222 2.0677 1.16257.5459.60034.8831 1.36105.9612 2.16868.0155.16503-.0353.32944-.1411.45705-.1058.1276-.2579.208-.4229.2234-.0196.0012-.0391.0012-.0586 0-.1562.0007-.307-.0572-.4227-.1621-.1157-.105-.1879-.24952-.2023-.40507-.0526-.53719-.2772-1.04306-.6404-1.44239-.3631-.39933-.8455-.67079-1.3753-.77402Zm8.85 2.71018c-.0328.0734-.8242 1.8258-2.6062 3.4219-.0609.0562-.1324.0998-.2103.1282-.0779.0284-.1607.041-.2435.0371-.0828-.004-.164-.0243-.2389-.0599-.0749-.0357-.1419-.0858-.1972-.1476-.0553-.0618-.0977-.1339-.1249-.2123-.0271-.0783-.0384-.1613-.0332-.244.0053-.0828.0269-.1637.0637-.238.0368-.0743.088-.1405.1507-.1948.8743-.7854 1.6087-1.7138 2.1719-2.74531-.4825-.88455-1.0909-1.69431-1.8063-2.4039-1.739-1.72188-3.8398-2.5961-6.24451-2.5961-.50667-.00062-1.01254.04041-1.5125.12266-.0813.01438-.16465.0125-.24522-.00551-.08057-.01802-.15678-.05182-.22422-.09946-.06743-.04763-.12476-.10816-.16867-.17808-.04391-.06992-.07354-.14784-.08716-.22927-.01362-.08143-.01098-.16476.00778-.24516.01877-.08041.05327-.1563.10153-.22329s.10932-.12375.17964-.16702c.07032-.04326.14852-.07216.23007-.08502.5681-.09381 1.14296-.14058 1.71875-.13985 2.72501 0 5.20081 1.03594 7.16091 2.9961 1.4711 1.47109 2.1328 2.93906 2.1602 3.00078.0355.07993.0539.16643.0539.25393 0 .0874-.0184.1739-.0539.2539h-.0024Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'less'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__less',\n 'o-svg--' + size,\n extraClass ? 'o-svg__less--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n>\n <path\n d=\"M14 8c0 .13261-.0527.25979-.1464.35355-.0938.09377-.221.14645-.3536.14645h-11c-.13261 0-.25979-.05268-.35355-.14645C2.05268 8.25979 2 8.13261 2 8c0-.13261.05268-.25979.14645-.35355C2.24021 7.55268 2.36739 7.5 2.5 7.5h11c.1326 0 .2598.05268.3536.14645C13.9473 7.74021 14 7.86739 14 8Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'plus'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__plus',\n 'o-svg--' + size,\n extraClass ? 'o-svg__plus--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M17.5 10c0 .1658-.0658.3247-.1831.4419-.1172.1173-.2761.1831-.4419.1831h-6.25v6.25c0 .1658-.0658.3247-.1831.4419-.1172.1173-.2761.1831-.4419.1831-.16576 0-.32473-.0658-.44194-.1831-.11721-.1172-.18306-.2761-.18306-.4419v-6.25h-6.25c-.16576 0-.32473-.0658-.44194-.1831C2.56585 10.3247 2.5 10.1658 2.5 10c0-.16576.06585-.32473.18306-.44194.11721-.11721.27618-.18306.44194-.18306h6.25v-6.25c0-.16576.06585-.32473.18306-.44194C9.67527 2.56585 9.83424 2.5 10 2.5c.1658 0 .3247.06585.4419.18306.1173.11721.1831.27618.1831.44194v6.25h6.25c.1658 0 .3247.06585.4419.18306.1173.11721.1831.27618.1831.44194Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'search'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__search',\n 'o-svg--' + size,\n extraClass ? 'o-svg__search--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"m17.9422 17.0578-3.9117-3.9109c1.1337-1.3612 1.6991-3.1071 1.5784-4.87446-.1206-1.76738-.918-3.42021-2.2263-4.61465-1.3082-1.19445-3.0266-1.83853-4.79767-1.79828-1.77105.04025-3.45839.76174-4.71104 2.01438-1.25264 1.25264-1.97413 2.93999-2.01438 4.71103-.04025 1.77108.60384 3.48948 1.79828 4.79768 1.19444 1.3083 2.84727 2.1057 4.61466 2.2263 1.76735.1207 3.51325-.4447 4.87445-1.5784l3.9109 3.9117c.0581.0581.127.1041.2029.1355.0759.0315.1572.0476.2393.0476s.1634-.0161.2393-.0476c.0759-.0314.1448-.0774.2029-.1355.0581-.0581.1041-.127.1355-.2029.0315-.0759.0477-.1572.0477-.2393s-.0162-.1634-.0477-.2393c-.0314-.0759-.0774-.1448-.1355-.2029ZM3.125 8.75c0-1.11252.3299-2.20006.94799-3.12509.61808-.92502 1.49658-1.64599 2.52442-2.07174 1.02783-.42574 2.15883-.53713 3.24998-.32009 1.09111.21704 2.09341.75277 2.88011 1.53944.7866.78667 1.3224 1.78895 1.5394 2.88009.2171 1.09115.1057 2.22214-.3201 3.24999-.4257 1.0278-1.1467 1.9063-2.0717 2.5244-.925.6181-2.01258.948-3.1251.948-1.49133-.0017-2.92111-.5948-3.97565-1.6494C3.71982 11.6711 3.12666 10.2413 3.125 8.75Z\"\n fill=\"#676D6C\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'spinner'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__spinner',\n extraClass ? 'o-svg__spinner--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M9.0145 1.80949c.20184.66019-.16972 1.359-.82991 1.56084-1.11797.3418-2.12799.96809-2.93117 1.81753-.80318.84945-1.37198 1.89294-1.65069 3.02827s-.25778 2.32357.06074 3.44837c.31853 1.1248.92372 2.1476 1.75632 2.9683.8326.8206 1.86405 1.4109 2.99336 1.7131 1.1293.3023 2.31775.306 3.44895.0109 1.1311-.2951 2.1663-.879 3.004-1.6944.8378-.8154 1.4494-1.8343 1.7749-2.9571.1923-.6631.8857-1.0447 1.5487-.8525.6631.1923 1.0447.8857.8524 1.5487-.4461 1.5387-1.2843 2.935-2.4323 4.0524-1.148 1.1174-2.5665 1.9175-4.1166 2.3219-1.5502.4044-3.17876.3993-4.72633-.0148-1.54756-.4142-2.96104-1.2231-4.10201-2.3477-1.14097-1.1246-1.97031-2.5262-2.4068-4.0676-.436495-1.5414-.465178-3.16977-.08324-4.7256.38194-1.55582 1.1614-2.98578 2.26205-4.14984C4.53753 2.3062 5.92164 1.44796 7.45366.979572c.66019-.20184 1.359.169728 1.56084.829918Z\"\n fill=\"#fff\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'success'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__success',\n 'o-svg--' + size,\n extraClass ? 'o-svg__alert--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M13.5672 7.68281c.0581.05805.1042.12698.1357.20285.0314.07588.0476.15721.0476.23934 0 .08213-.0162.16346-.0476.23934-.0315.07587-.0776.1448-.1357.20285L9.19219 12.9422c-.05804.0581-.12697.1042-.20285.1357-.07587.0314-.1572.0476-.23934.0476-.08213 0-.16346-.0162-.23933-.0476-.07588-.0315-.14481-.0776-.20285-.1357l-1.875-1.875c-.11728-.1173-.18316-.2763-.18316-.4422s.06588-.3249.18316-.4422c.11727-.1173.27633-.18315.44218-.18315.16586 0 .32492.06585.44219.18315L8.75 11.6164l3.9328-3.93359c.0581-.05811.127-.10421.2029-.13566.0758-.03145.1572-.04764.2393-.04764s.1635.01619.2393.04764c.0759.03145.1448.07755.2029.13566ZM18.125 10c0 1.607-.4765 3.1779-1.3693 4.514-.8928 1.3362-2.1617 2.3776-3.6464 2.9925-1.4846.615-3.11831.7759-4.6944.4624-1.5761-.3135-3.02384-1.0874-4.16014-2.2237-1.1363-1.1363-1.91013-2.584-2.22364-4.1601-.3135-1.5761-.1526-3.20975.46236-4.6944.61496-1.48465 1.65637-2.7536 2.99252-3.64639C6.82214 2.35152 8.39303 1.875 10 1.875c2.1542.00227 4.2195.85903 5.7427 2.38227C17.266 5.78051 18.1227 7.84581 18.125 10Zm-1.25 0c0-1.35975-.4032-2.68896-1.1586-3.81955-.7555-1.13058-1.8292-2.01177-3.0854-2.53212-1.2563-.52035-2.63862-.6565-3.97224-.39123-1.33362.26527-2.55863.92006-3.52012 1.88154-.96148.96149-1.61626 2.18649-1.88154 3.52011-.26527 1.33362-.12912 2.71595.39123 3.97215.52035 1.2563 1.40154 2.33 2.53213 3.0855C7.31105 16.4718 8.64026 16.875 10 16.875c1.8227-.0021 3.5702-.7271 4.8591-2.0159 1.2888-1.2889 2.0138-3.0364 2.0159-4.8591Z\"\n fill=\"#35785B\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'test'\"\n fill=\"none\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__test',\n extraClass ? 'o-svg__test--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 18 18\"\n>\n <path\n d=\"M16.5 0h-15C1.10218 0 .720644.158035.43934.43934.158035.720644 0 1.10218 0 1.5v15c0 .3978.158035.7794.43934 1.0607C.720644 17.842 1.10218 18 1.5 18h15c.3978 0 .7794-.158 1.0607-.4393S18 16.8978 18 16.5v-15c0-.39782-.158-.779356-.4393-1.06066C17.2794.158035 16.8978 0 16.5 0Zm-15 16.5V2.56031L15.4397 16.5H1.5Zm1.06031-15H16.5v13.9406L2.56031 1.5Z\"\n fill=\"#217870\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'thumb'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__thumb',\n 'o-svg--' + size,\n extraClass ? 'o-svg__thumb--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"M19.5 3h-15c-.39782 0-.77936.15804-1.06066.43934C3.15804 3.72064 3 4.10218 3 4.5v15c0 .3978.15804.7794.43934 1.0607S4.10218 21 4.5 21h15c.3978 0 .7794-.158 1.0607-.4393S21 19.8978 21 19.5v-15c0-.39782-.158-.77936-.4393-1.06066C20.2794 3.15804 19.8978 3 19.5 3Zm-15 1.5h15v7.2544l-2.3147-2.31565c-.2813-.28109-.6626-.43899-1.0603-.43899-.3977 0-.779.1579-1.0603.43899L5.00344 19.5H4.5v-15Zm15 15H7.125l9-9 3.375 3.375V19.5ZM9 11.25c.44501 0 .88002-.132 1.25-.3792.37-.2472.6584-.5986.8287-1.00976.1703-.41114.2149-.86354.1281-1.29999-.0868-.43646-.3011-.83737-.6158-1.15204-.3147-.31467-.71559-.52896-1.15205-.61578-.43645-.08681-.88885-.04226-1.29999.12804-.41113.1703-.76253.45869-1.00977.8287C6.88196 8.11998 6.75 8.55499 6.75 9c0 .59674.23705 1.169.65901 1.591.42196.4219.99425.659 1.59099.659Zm0-3c.14834 0 .29334.04399.41668.1264.12333.08241.21946.19954.27623.33659.05677.13704.07162.28784.04268.43333-.02894.14548-.10037.27912-.20526.38401-.10489.10489-.23853.17632-.38401.20526-.14549.02894-.29629.01409-.43333-.04268-.13705-.05677-.25418-.1529-.33659-.27623C8.29399 9.29334 8.25 9.14834 8.25 9c0-.19891.07902-.38968.21967-.53033C8.61032 8.32902 8.80109 8.25 9 8.25Z\"\n fill=\"#535858\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'user'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__user',\n 'o-svg--' + size,\n extraClass ? 'o-svg__user--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"M21.6488 19.8751c-1.4279-2.4684-3.6282-4.2384-6.196-5.0775 1.2702-.7561 2.257-1.9083 2.809-3.2796.5519-1.3712.6385-2.88576.2464-4.31099-.3921-1.42523-1.2412-2.68234-2.417-3.57828-1.1757-.89594-2.613-1.38117-4.0912-1.38117-1.4782 0-2.91549.48523-4.09122 1.38117-1.17572.89594-2.02484 2.15305-2.41695 3.57828-.39212 1.42523-.30554 2.93979.24642 4.31099.55196 1.3713 1.53879 2.5235 2.80895 3.2796-2.56782.8381-4.76813 2.6081-6.19594 5.0775-.05236.0854-.08709.1804-.10214.2794-.01505.099-.01012.2.01451.2971.02462.0971.06844.1883.12887.2681.06043.0799.13624.1469.22297.197.08673.05.18261.0823.28198.0947.09938.0124.20025.0049.29664-.0223.0964-.0272.18638-.0734.26463-.1359.07825-.0625.14318-.1401.19098-.2281 1.76625-3.0525 4.88812-4.875 8.3503-4.875 3.4622 0 6.5841 1.8225 8.3503 4.875.0478.088.1128.1656.191.2281.0783.0625.1682.1087.2646.1359.0964.0272.1973.0347.2967.0223.0993-.0124.1952-.0447.2819-.0947.0868-.0501.1626-.1171.223-.197.0604-.0798.1043-.171.1289-.2681.0246-.0971.0296-.1981.0145-.2971-.0151-.099-.0498-.194-.1021-.2794ZM6.75001 9.00011c0-1.03835.30791-2.05339.88478-2.91674.57688-.86336 1.39682-1.53627 2.35613-1.93363.95928-.39736 2.01488-.50133 3.03328-.29875 1.0184.20257 1.9539.70258 2.6881 1.43681.7342.73422 1.2343 1.66968 1.4368 2.68809.2026 1.0184.0986 2.07401-.2987 3.03331-.3974.9593-1.0703 1.7792-1.9336 2.3561-.8634.5769-1.8784.8848-2.9168.8848-1.3919-.0015-2.72641-.5551-3.71066-1.5393-.98424-.9843-1.53784-2.3188-1.53933-3.71069Z\"\n fill=\"#535858\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'info'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__info',\n 'o-svg--' + size,\n extraClass ? 'o-svg__info--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M10 1.87601c-1.60697 0-3.17786.47652-4.514 1.36931-1.33615.89278-2.37756 2.16173-2.99252 3.64638-.61496 1.48465-.77586 3.1183-.46236 4.6944.31351 1.5761 1.08734 3.0238 2.22364 4.1602 1.1363 1.1363 2.58404 1.9101 4.16014 2.2236 1.57609.3135 3.2098.1526 4.6944-.4624 1.4847-.6149 2.7536-1.6563 3.6464-2.9925.8928-1.3361 1.3693-2.907 1.3693-4.514-.0023-2.15418-.859-4.21948-2.3823-5.74272-1.5232-1.52324-3.5885-2.38-5.7427-2.38227ZM10 16.876c-1.35974 0-2.68895-.4032-3.81954-1.1586-1.13059-.7555-2.01178-1.8292-2.53213-3.0854-.52035-1.2563-.6565-2.63862-.39123-3.97224.26528-1.33362.92006-2.55863 1.88154-3.52011.96149-.96149 2.1865-1.61627 3.52012-1.88154 1.33362-.26528 2.71594-.12913 3.97224.39123 1.2562.52035 2.3299 1.40153 3.0854 2.53212.7554 1.13059 1.1586 2.4598 1.1586 3.81954-.0021 1.8227-.7271 3.5702-2.0159 4.8591-1.2889 1.2888-3.0364 2.0138-4.8591 2.0159Zm1.25-3.125c0 .1658-.0658.3247-.1831.4419-.1172.1173-.2761.1831-.4419.1831-.3315 0-.64946-.1317-.88388-.3661-.23442-.2344-.36612-.5524-.36612-.8839v-3.125c-.16576 0-.32473-.06584-.44194-.18305-.11721-.11721-.18306-.27618-.18306-.44194 0-.16576.06585-.32473.18306-.44194.11721-.11721.27618-.18306.44194-.18306.33152 0 .6495.13169.8839.36611.2344.23442.3661.55237.3661.88388v3.125c.1658 0 .3247.0659.4419.1831.1173.1172.1831.2761.1831.4419Zm-2.5-7.18749c0-.18542.05499-.36668.158-.52085.10301-.15417.24943-.27433.42074-.34529.1713-.07096.3598-.08952.54166-.05335.1819.03617.3489.12546.48.25657.1311.13112.2204.29816.2566.48002.0362.18186.0176.37036-.0534.54166-.0709.17131-.1911.31773-.3452.42074-.1542.10301-.33548.158-.5209.158-.24864 0-.48709-.09877-.66291-.27459C8.84878 7.0506 8.75 6.81215 8.75 6.56351Z\"\n fill=\"#27749A\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'warning'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__warning',\n 'o-svg--' + size,\n extraClass ? 'o-svg__warning--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M10 1.87601c-1.60697 0-3.17786.47652-4.514 1.36931-1.33615.89278-2.37756 2.16173-2.99252 3.64638-.61496 1.48465-.77586 3.1183-.46236 4.6944.31351 1.5761 1.08734 3.0238 2.22364 4.1602 1.1363 1.1363 2.58404 1.9101 4.16014 2.2236 1.57609.3135 3.2098.1526 4.6944-.4624 1.4847-.6149 2.7536-1.6563 3.6464-2.9925.8928-1.3361 1.3693-2.907 1.3693-4.514-.0023-2.15418-.859-4.21948-2.3823-5.74272-1.5232-1.52324-3.5885-2.38-5.7427-2.38227ZM10 16.876c-1.35974 0-2.68895-.4032-3.81954-1.1586-1.13059-.7555-2.01178-1.8292-2.53213-3.0854-.52035-1.2563-.6565-2.63862-.39123-3.97224.26528-1.33362.92006-2.55863 1.88154-3.52011.96149-.96149 2.1865-1.61627 3.52012-1.88154 1.33362-.26528 2.71594-.12913 3.97224.39123 1.2562.52035 2.3299 1.40153 3.0854 2.53212.7554 1.13059 1.1586 2.4598 1.1586 3.81954-.0021 1.8227-.7271 3.5702-2.0159 4.8591-1.2889 1.2888-3.0364 2.0138-4.8591 2.0159Zm-.625-6.25V6.25101c0-.16576.06585-.32473.18306-.44194.11721-.11721.27618-.18306.44194-.18306.1658 0 .3247.06585.4419.18306.1173.11721.1831.27618.1831.44194V10.626c0 .1658-.0658.3247-.1831.4419-.1172.1173-.2761.1831-.4419.1831-.16576 0-.32473-.0658-.44194-.1831-.11721-.1172-.18306-.2761-.18306-.4419Zm1.5625 2.8125c0 .1854-.055.3667-.158.5209-.103.1541-.2494.2743-.4207.3452-.1713.071-.35984.0896-.54169.0534-.18186-.0362-.34891-.1255-.48002-.2566s-.2204-.2981-.25657-.48c-.03618-.1819-.01761-.3704.05335-.5417.07095-.1713.19112-.3177.34529-.4207.15417-.103.33542-.158.52084-.158.2486 0 .4871.0988.6629.2746.1758.1758.2746.4143.2746.6629Z\"\n fill=\"#866600\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'upload'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__upload',\n 'o-svg--' + size,\n extraClass ? 'o-svg__upload--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M17.5 11.25v5c0 .1658-.0658.3247-.1831.4419-.1172.1173-.2761.1831-.4419.1831H3.125c-.16576 0-.32473-.0658-.44194-.1831C2.56585 16.5747 2.5 16.4158 2.5 16.25v-5c0-.1658.06585-.3247.18306-.4419.11721-.1172.27618-.1831.44194-.1831.16576 0 .32473.0659.44194.1831.11721.1172.18306.2761.18306.4419v4.375h12.5V11.25c0-.1658.0658-.3247.1831-.4419.1172-.1172.2761-.1831.4419-.1831s.3247.0659.4419.1831c.1173.1172.1831.2761.1831.4419ZM7.31719 6.06719 9.375 4.0086V11.25c0 .1658.06585.3247.18306.4419.11721.1173.27618.1831.44194.1831.1658 0 .3247-.0658.4419-.1831.1173-.1172.1831-.2761.1831-.4419V4.0086l2.0578 2.05859c.1173.11728.2763.18316.4422.18316s.3249-.06588.4422-.18316c.1173-.11727.1831-.27633.1831-.44219 0-.16585-.0658-.32491-.1831-.44218l-3.125-3.125c-.0581-.05811-.127-.10421-.2029-.13567-.0758-.03145-.1572-.04764-.2393-.04764-.08213 0-.16346.01619-.23934.04764-.07587.03146-.1448.07756-.20285.13567l-3.125 3.125c-.11727.11727-.18316.27633-.18316.44218 0 .16586.06589.32492.18316.44219.11728.11728.27634.18316.44219.18316.16585 0 .32491-.06588.44219-.18316Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'card'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__card',\n 'o-svg--' + size,\n extraClass ? 'o-svg__card--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 30 20\"\n>\n <path\n d=\"M26.0526 0H3.94737C1.7673 0 0 1.86548 0 4.16667V15.8333C0 18.1345 1.7673 20 3.94737 20H26.0526C28.2327 20 30 18.1345 30 15.8333V4.16667C30 1.86548 28.2327 0 26.0526 0Z\"\n fill=\"#4486E4\"\n />\n <path d=\"M30 4.16669H0v3h30v-3Z\" fill=\"#0F3760\" />\n <path\n d=\"M21.5 16h3c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5h-3c-.8284 0-1.5.6716-1.5 1.5s.6716 1.5 1.5 1.5Z\"\n fill=\"#D4E3F4\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'card-disabled'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__card-disabled',\n 'o-svg--' + size,\n extraClass ? 'o-svg__card-disabled--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 30 20\"\n>\n <path\n d=\"M26.0526 0H3.94737C1.7673 0 0 1.86548 0 4.16667V15.8333C0 18.1345 1.7673 20 3.94737 20H26.0526C28.2327 20 30 18.1345 30 15.8333V4.16667C30 1.86548 28.2327 0 26.0526 0Z\"\n fill=\"#c7c7c7\"\n />\n <path d=\"M30 4.16669H0v3h30v-3Z\" fill=\"#a7a7a7\" />\n <path\n d=\"M21.5 16h3c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5h-3c-.8284 0-1.5.6716-1.5 1.5s.6716 1.5 1.5 1.5Z\"\n fill=\"#D4E3F4\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'close'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__close',\n 'o-svg--' + size,\n extraClass ? 'o-svg__close--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M16.0672 15.1828c.058.0581.1041.127.1355.2029.0315.0758.0476.1572.0476.2393s-.0161.1634-.0476.2393c-.0314.0759-.0775.1448-.1355.2029-.0581.058-.127.1041-.2029.1355-.0759.0315-.1572.0476-.2393.0476s-.1635-.0161-.2393-.0476c-.0759-.0314-.1448-.0775-.2029-.1355l-5.18282-5.1836-5.18281 5.1836c-.11728.1172-.27634.1831-.44219.1831-.16585 0-.32491-.0659-.44219-.1831-.11727-.1173-.18316-.2764-.18316-.4422 0-.1659.06589-.3249.18316-.4422l5.1836-5.18282-5.1836-5.18281c-.11727-.11728-.18316-.27634-.18316-.44219 0-.16585.06589-.32491.18316-.44219.11728-.11727.27634-.18316.44219-.18316.16585 0 .32491.06589.44219.18316l5.18281 5.1836 5.18282-5.1836c.1173-.11727.2763-.18316.4422-.18316.1658 0 .3249.06589.4422.18316.1172.11728.1831.27634.1831.44219 0 .16585-.0659.32491-.1831.44219l-5.1836 5.18281 5.1836 5.18282Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'close-white'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__close',\n 'o-svg--' + size,\n extraClass ? 'o-svg__close--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M16.0672 15.1828c.058.0581.1041.127.1355.2029.0315.0758.0476.1572.0476.2393s-.0161.1634-.0476.2393c-.0314.0759-.0775.1448-.1355.2029-.0581.058-.127.1041-.2029.1355-.0759.0315-.1572.0476-.2393.0476s-.1635-.0161-.2393-.0476c-.0759-.0314-.1448-.0775-.2029-.1355l-5.18282-5.1836-5.18281 5.1836c-.11728.1172-.27634.1831-.44219.1831-.16585 0-.32491-.0659-.44219-.1831-.11727-.1173-.18316-.2764-.18316-.4422 0-.1659.06589-.3249.18316-.4422l5.1836-5.18282-5.1836-5.18281c-.11727-.11728-.18316-.27634-.18316-.44219 0-.16585.06589-.32491.18316-.44219.11728-.11727.27634-.18316.44219-.18316.16585 0 .32491.06589.44219.18316l5.18281 5.1836 5.18282-5.1836c.1173-.11727.2763-.18316.4422-.18316.1658 0 .3249.06589.4422.18316.1172.11728.1831.27634.1831.44219 0 .16585-.0659.32491-.1831.44219l-5.1836 5.18281 5.1836 5.18282Z\"\n fill=\"#ffffff\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'close-disabled'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__close',\n 'o-svg--' + size,\n extraClass ? 'o-svg__close--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n>\n <path\n d=\"M12.8537 12.1463c.0465.0464.0833.1016.1085.1623.0251.0607.0381.1257.0381.1914 0 .0657-.013.1308-.0381.1915-.0252.0607-.062.1158-.1085.1623-.0464.0464-.1016.0833-.1623.1084-.0607.0252-.1257.0381-.1914.0381-.0657 0-.1308-.0129-.1915-.0381-.0607-.0251-.1158-.062-.1623-.1084L7.99997 8.70691 3.85372 12.8538c-.09382.0938-.22107.1465-.35375.1465-.13268 0-.25993-.0527-.35375-.1465-.09382-.0938-.14653-.2211-.14653-.3538 0-.1326.05271-.2599.14653-.3537L7.2931 8.00003 3.14622 3.85378c-.09382-.09382-.14653-.22106-.14653-.35375 0-.13268.05271-.25993.14653-.35375.09382-.09382.22107-.14652.35375-.14652.13268 0 .25993.0527.35375.14652l4.14625 4.14688 4.14623-4.14688c.0938-.09382.2211-.14652.3538-.14652s.2599.0527.3537.14652c.0938.09382.1466.22107.1466.35375 0 .13269-.0528.25993-.1466.35375L8.70685 8.00003l4.14685 4.14627Z\"\n fill=\"#A6B0AF\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'check-circle'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__check-circle',\n 'o-svg--' + size,\n extraClass ? 'o-svg__check-circle--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"M12 2.25c-1.9284 0-3.81343.57183-5.41681 1.64317-1.60337 1.07134-2.85306 2.59409-3.59101 4.37567-.73796 1.78156-.93104 3.74196-.55483 5.63326.3762 1.8913 1.3048 3.6286 2.66836 4.9922 1.36357 1.3636 3.10085 2.2922 4.99219 2.6684 1.8913.3762 3.8517.1831 5.6333-.5549 1.7815-.7379 3.3043-1.9876 4.3756-3.591C21.1782 15.8134 21.75 13.9284 21.75 12c-.0027-2.58502-1.0308-5.06339-2.8587-6.89128C17.0634 3.28084 14.585 2.25273 12 2.25Zm4.2806 8.0306-5.25 5.25c-.0696.0698-.1523.1251-.2434.1628-.091.0378-.1886.0572-.2872.0572-.0986 0-.1962-.0194-.2872-.0572-.091-.0377-.1738-.093-.24342-.1628l-2.25-2.25c-.14073-.1407-.21979-.3316-.21979-.5306 0-.199.07906-.3899.21979-.5306.14073-.1408.3316-.2198.53062-.2198.19903 0 .3899.079.53063.2198L10.5 13.9397l4.7194-4.72033c.0697-.06968.1524-.12495.2434-.16267.0911-.03771.1887-.05712.2872-.05712.0986 0 .1961.01941.2872.05712.091.03772.1737.09299.2434.16267.0697.06969.125.15241.1627.24346.0377.09104.0571.18862.0571.28717 0 .09855-.0194.19613-.0571.2872-.0377.091-.093.1737-.1627.2434Z\"\n fill=\"#217870\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'elipsis'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__elipsis',\n 'o-svg--' + size,\n extraClass ? 'o-svg__elipsis--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 11 20\"\n>\n <path\n d=\"M1.162 15.296c.672 0 1.162-.504 1.162-1.148 0-.63-.49-1.148-1.162-1.148C.49 13 0 13.518 0 14.148c0 .644.49 1.148 1.162 1.148ZM5.22255 15.296c.672 0 1.162-.504 1.162-1.148 0-.63-.49-1.148-1.162-1.148-.672 0-1.162.518-1.162 1.148 0 .644.49 1.148 1.162 1.148ZM9.28309 15.296c.672 0 1.16201-.504 1.16201-1.148 0-.63-.49001-1.148-1.16201-1.148-.672 0-1.162.518-1.162 1.148 0 .644.49 1.148 1.162 1.148Z\"\n fill=\"#535858\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'apple'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__apple',\n 'o-svg--' + size,\n extraClass ? 'o-svg__elipsis--' + extraClass : ''\n ]\"\n viewBox=\"0 0 25 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M20.8578 8.65962C20.7331 8.75412 18.5319 9.96595 18.5319 12.6605C18.5319 15.7772 21.3328 16.8798 21.4167 16.9071C21.4038 16.9743 20.9717 18.4172 19.9399 19.8873C19.0199 21.1811 18.059 22.4727 16.5972 22.4727C15.1355 22.4727 14.7593 21.6431 13.0719 21.6431C11.4274 21.6431 10.8427 22.5 9.50567 22.5C8.16861 22.5 7.23567 21.3029 6.16302 19.8327C4.92054 18.1064 3.91667 15.4244 3.91667 12.8789C3.91667 8.79613 6.63378 6.63081 9.3079 6.63081C10.7288 6.63081 11.9132 7.5423 12.8053 7.5423C13.6544 7.5423 14.9786 6.57621 16.5951 6.57621C17.2077 6.57621 19.4089 6.63081 20.8578 8.65962ZM15.8277 4.84773C16.4962 4.07276 16.9691 2.99745 16.9691 1.92214C16.9691 1.77303 16.9562 1.62181 16.9283 1.5C15.8406 1.5399 14.5465 2.20777 13.7662 3.09196C13.1536 3.77243 12.5818 4.84773 12.5818 5.93774C12.5818 6.10156 12.6097 6.26538 12.6226 6.31788C12.6914 6.33048 12.8032 6.34518 12.915 6.34518C13.8909 6.34518 15.1183 5.70672 15.8277 4.84773Z\"\n fill=\"black\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'google'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__google',\n 'o-svg--' + size,\n extraClass ? 'o-svg__elipsis--' + extraClass : ''\n ]\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <mask\n id=\"mask0_2162_5756\"\n style=\"mask-type: luminance\"\n maskUnits=\"userSpaceOnUse\"\n x=\"1\"\n y=\"1\"\n width=\"22\"\n height=\"22\"\n >\n <path\n d=\"M22.2983 10.052H12.2237V14.0889H18.0126C17.9196 14.6602 17.7106 15.2223 17.4046 15.7347C17.054 16.3219 16.6206 16.7689 16.1763 17.1093C14.8456 18.1291 13.2941 18.3376 12.2166 18.3376C9.49479 18.3376 7.16915 16.5784 6.26885 14.188C6.23252 14.1013 6.20839 14.0117 6.17901 13.9231C5.98007 13.3147 5.87136 12.6704 5.87136 12.0007C5.87136 11.3037 5.98908 10.6365 6.2037 10.0064C7.05029 7.52124 9.42836 5.66505 12.2186 5.66505C12.7798 5.66505 13.3203 5.73186 13.8328 5.8651C15.0041 6.16962 15.8326 6.76936 16.3403 7.24375L19.4036 4.24379C17.5402 2.53527 15.1111 1.5 12.2135 1.5C9.89707 1.49995 7.75844 2.22168 6.0059 3.44144C4.58465 4.43062 3.41902 5.75502 2.63236 7.29316C1.90065 8.71933 1.5 10.2998 1.5 11.9991C1.5 13.6985 1.90127 15.2954 2.63297 16.7083V16.7179C3.40584 18.2179 4.53603 19.5095 5.90965 20.4942C7.10966 21.3544 9.2614 22.5 12.2135 22.5C13.9112 22.5 15.4158 22.1939 16.7427 21.6203C17.7 21.2065 18.5481 20.6668 19.316 19.9732C20.3306 19.0566 21.1252 17.923 21.6675 16.6187C22.2099 15.3144 22.5 13.8394 22.5 12.2403C22.5 11.4956 22.4252 10.7393 22.2983 10.0519V10.052Z\"\n fill=\"white\"\n />\n </mask>\n <g mask=\"url(#mask0_2162_5756)\">\n <g filter=\"url(#filter0_f_2162_5756)\">\n <path\n d=\"M1.34552 12.0704C1.35666 13.743 1.83324 15.4687 2.55464 16.8617V16.8713C3.07589 17.883 3.78828 18.6821 4.59968 19.474L9.50033 17.6858C8.57316 17.2148 8.43168 16.9263 7.76705 16.3997C7.08785 15.7148 6.58164 14.9285 6.26639 14.0066H6.25369L6.26639 13.997C6.059 13.3882 6.03854 12.742 6.03089 12.0704H1.34552Z\"\n fill=\"url(#paint0_radial_2162_5756)\"\n />\n </g>\n <g filter=\"url(#filter1_f_2162_5756)\">\n <path\n d=\"M12.2238 1.42365C11.7394 3.12534 11.9246 4.77944 12.2238 5.74187C12.7831 5.74229 13.3219 5.80896 13.8329 5.94179C15.0042 6.2463 15.8326 6.84606 16.3403 7.32045L19.482 4.24385C17.6208 2.53737 15.381 1.42633 12.2238 1.42365Z\"\n fill=\"url(#paint1_radial_2162_5756)\"\n />\n </g>\n <g filter=\"url(#filter2_f_2162_5756)\">\n <path\n d=\"M12.2132 1.41019C9.83733 1.41014 7.6438 2.1504 5.84628 3.40147C5.17885 3.86599 4.56637 4.40259 4.02099 4.9993C3.87812 6.33968 5.09053 7.98715 7.49146 7.97351C8.65638 6.61844 10.3793 5.74172 12.2969 5.74172C12.2986 5.74172 12.3003 5.74186 12.302 5.74187L12.2237 1.41049C12.2202 1.41049 12.2168 1.41019 12.2132 1.41019Z\"\n fill=\"url(#paint2_radial_2162_5756)\"\n />\n </g>\n <g filter=\"url(#filter3_f_2162_5756)\">\n <path\n d=\"M20.055 12.5554L17.9343 14.0123C17.8413 14.5836 17.6322 15.1456 17.3262 15.6581C16.9756 16.2453 16.5422 16.6923 16.0979 17.0327C14.7699 18.0503 13.2226 18.2599 12.1454 18.2607C11.032 20.157 10.8368 21.1069 12.2237 22.6373C13.9398 22.6361 15.4613 22.3263 16.8033 21.7462C17.7733 21.3268 18.6328 20.7799 19.411 20.0769C20.4392 19.1481 21.2446 17.9992 21.7942 16.6774C22.3439 15.3556 22.6378 13.8609 22.6378 12.2404L20.055 12.5554Z\"\n fill=\"url(#paint3_radial_2162_5756)\"\n />\n </g>\n <g filter=\"url(#filter4_f_2162_5756)\">\n <path\n d=\"M12.0671 9.89865V14.2423H22.2701C22.3598 13.6474 22.6566 12.8777 22.6566 12.2404C22.6566 11.4957 22.5818 10.586 22.455 9.89865H12.0671Z\"\n fill=\"#3086FF\"\n />\n </g>\n <g filter=\"url(#filter5_f_2162_5756)\">\n <path\n d=\"M4.06967 4.84595C3.44004 5.53485 2.90214 6.30592 2.47565 7.13983C1.74396 8.566 1.34332 10.2998 1.34332 11.9991C1.34332 12.0231 1.3453 12.0465 1.34546 12.0704C1.66951 12.6917 5.82155 12.5727 6.03083 12.0704C6.03057 12.047 6.02793 12.0241 6.02793 12.0006C6.02793 11.3036 6.14568 10.7899 6.3603 10.1598C6.62507 9.38257 7.03965 8.66683 7.56977 8.05017C7.68995 7.89675 8.01049 7.56692 8.10401 7.36908C8.13964 7.29373 8.03934 7.25143 8.03373 7.22491C8.02745 7.19524 7.89298 7.2191 7.86285 7.197C7.76719 7.12683 7.57777 7.0902 7.46274 7.05763C7.21689 6.98801 6.80945 6.8345 6.58314 6.67537C5.86779 6.17234 4.75141 5.57149 4.06967 4.84595Z\"\n fill=\"url(#paint4_radial_2162_5756)\"\n />\n </g>\n <g filter=\"url(#filter6_f_2162_5756)\">\n <path\n d=\"M6.59854 7.22788C8.25737 8.23272 8.73442 6.72068 9.83731 6.24753L7.91879 2.26904C7.21306 2.56566 6.54628 2.93419 5.92761 3.36477C5.00368 4.00782 4.18778 4.79253 3.51379 5.68553L6.59854 7.22788Z\"\n fill=\"url(#paint5_radial_2162_5756)\"\n />\n </g>\n <g filter=\"url(#filter7_f_2162_5756)\">\n <path\n d=\"M7.2736 17.3784C5.04684 18.1823 4.69823 18.2112 4.49326 19.5912C4.88495 19.9734 5.3058 20.327 5.75301 20.6475C6.95302 21.5077 9.26132 22.6534 12.2134 22.6534C12.2169 22.6534 12.2202 22.6531 12.2237 22.6531V18.1841C12.2214 18.1841 12.2189 18.1842 12.2166 18.1842C11.1112 18.1842 10.2278 17.8938 9.32207 17.3889C9.09876 17.2644 8.69361 17.5987 8.48765 17.4493C8.20359 17.2432 7.51998 17.6269 7.2736 17.3784Z\"\n fill=\"url(#paint6_radial_2162_5756)\"\n />\n </g>\n <g opacity=\"0.5\" filter=\"url(#filter8_f_2162_5756)\">\n <path\n d=\"M10.9197 18.0433V22.5756C11.3327 22.624 11.7626 22.6534 12.2135 22.6534C12.6656 22.6534 13.1029 22.6302 13.5279 22.5875V18.0738C13.0517 18.1552 12.6031 18.1842 12.2167 18.1842C11.7718 18.1842 11.339 18.1324 10.9197 18.0433Z\"\n fill=\"url(#paint7_linear_2162_5756)\"\n />\n </g>\n </g>\n <defs>\n <filter\n id=\"filter0_f_2162_5756\"\n x=\"0.875441\"\n y=\"11.6004\"\n width=\"9.09497\"\n height=\"8.34369\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter1_f_2162_5756\"\n x=\"11.4559\"\n y=\"0.953566\"\n width=\"8.49622\"\n height=\"6.83698\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter2_f_2162_5756\"\n x=\"3.53959\"\n y=\"0.940107\"\n width=\"9.23255\"\n height=\"7.50357\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter3_f_2162_5756\"\n x=\"10.7764\"\n y=\"11.7703\"\n width=\"12.3315\"\n height=\"11.3371\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter4_f_2162_5756\"\n x=\"11.597\"\n y=\"9.42857\"\n width=\"11.5297\"\n height=\"5.28382\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter5_f_2162_5756\"\n x=\"0.873243\"\n y=\"4.37587\"\n width=\"7.70847\"\n height=\"8.58716\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter6_f_2162_5756\"\n x=\"0.208944\"\n y=\"-1.03581\"\n width=\"12.9332\"\n height=\"11.9063\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"1.65243\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter7_f_2162_5756\"\n x=\"4.02318\"\n y=\"16.8905\"\n width=\"8.6706\"\n height=\"6.23301\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter8_f_2162_5756\"\n x=\"10.4496\"\n y=\"17.5732\"\n width=\"3.54837\"\n height=\"5.55027\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <radialGradient\n id=\"paint0_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(9.40223 19.3164) rotate(-92.3894) scale(10.467 15.7022)\"\n >\n <stop offset=\"0.141612\" stop-color=\"#1ABD4D\" />\n <stop offset=\"0.247515\" stop-color=\"#6EC30D\" />\n <stop offset=\"0.311547\" stop-color=\"#8AC502\" />\n <stop offset=\"0.366013\" stop-color=\"#A2C600\" />\n <stop offset=\"0.445673\" stop-color=\"#C8C903\" />\n <stop offset=\"0.540305\" stop-color=\"#EBCB03\" />\n <stop offset=\"0.615636\" stop-color=\"#F7CD07\" />\n <stop offset=\"0.699345\" stop-color=\"#FDCD04\" />\n <stop offset=\"0.771242\" stop-color=\"#FDCE05\" />\n <stop offset=\"0.860566\" stop-color=\"#FFCE0A\" />\n </radialGradient>\n <radialGradient\n id=\"paint1_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(19.1881 7.09785) scale(7.41096 9.3706)\"\n >\n <stop offset=\"0.408458\" stop-color=\"#FB4E5A\" />\n <stop offset=\"1\" stop-color=\"#FF4540\" />\n </radialGradient>\n <radialGradient\n id=\"paint2_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(15.1409 0.0537589) rotate(151.53) scale(11.8117 15.847)\"\n >\n <stop offset=\"0.231273\" stop-color=\"#FF4541\" />\n <stop offset=\"0.311547\" stop-color=\"#FF4540\" />\n <stop offset=\"0.457516\" stop-color=\"#FF4640\" />\n <stop offset=\"0.540305\" stop-color=\"#FF473F\" />\n <stop offset=\"0.699346\" stop-color=\"#FF5138\" />\n <stop offset=\"0.771242\" stop-color=\"#FF5B33\" />\n <stop offset=\"0.860566\" stop-color=\"#FF6C29\" />\n <stop offset=\"1\" stop-color=\"#FF8C18\" />\n </radialGradient>\n <radialGradient\n id=\"paint3_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(12.3781 21.2782) rotate(-128.041) scale(30.5579 11.3396)\"\n >\n <stop offset=\"0.131546\" stop-color=\"#0CBA65\" />\n <stop offset=\"0.209784\" stop-color=\"#0BB86D\" />\n <stop offset=\"0.297297\" stop-color=\"#09B479\" />\n <stop offset=\"0.396257\" stop-color=\"#08AD93\" />\n <stop offset=\"0.477124\" stop-color=\"#0AA6A9\" />\n <stop offset=\"0.568425\" stop-color=\"#0D9CC6\" />\n <stop offset=\"0.667385\" stop-color=\"#1893DD\" />\n <stop offset=\"0.768727\" stop-color=\"#258BF1\" />\n <stop offset=\"0.858506\" stop-color=\"#3086FF\" />\n </radialGradient>\n <radialGradient\n id=\"paint4_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(11.3035 3.39356) rotate(96.7579) scale(11.3243 15.9833)\"\n >\n <stop offset=\"0.366013\" stop-color=\"#FF4E3A\" />\n <stop offset=\"0.457516\" stop-color=\"#FF8A1B\" />\n <stop offset=\"0.540305\" stop-color=\"#FFA312\" />\n <stop offset=\"0.615636\" stop-color=\"#FFB60C\" />\n <stop offset=\"0.771242\" stop-color=\"#FFCD0A\" />\n <stop offset=\"0.860566\" stop-color=\"#FECF0A\" />\n <stop offset=\"0.915033\" stop-color=\"#FECF08\" />\n <stop offset=\"1\" stop-color=\"#FDCD01\" />\n </radialGradient>\n <radialGradient\n id=\"paint5_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(9.42961 3.27692) rotate(132.723) scale(5.67745 16.044)\"\n >\n <stop offset=\"0.315904\" stop-color=\"#FF4C3C\" />\n <stop offset=\"0.603818\" stop-color=\"#FF692C\" />\n <stop offset=\"0.726837\" stop-color=\"#FF7825\" />\n <stop offset=\"0.884534\" stop-color=\"#FF8D1B\" />\n <stop offset=\"1\" stop-color=\"#FF9F13\" />\n </radialGradient>\n <radialGradient\n id=\"paint6_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(15.1408 23.946) rotate(-151.53) scale(11.8117 15.847)\"\n >\n <stop offset=\"0.231273\" stop-color=\"#0FBC5F\" />\n <stop offset=\"0.311547\" stop-color=\"#0FBC5F\" />\n <stop offset=\"0.366013\" stop-color=\"#0FBC5E\" />\n <stop offset=\"0.457516\" stop-color=\"#0FBC5D\" />\n <stop offset=\"0.540305\" stop-color=\"#12BC58\" />\n <stop offset=\"0.699346\" stop-color=\"#28BF3C\" />\n <stop offset=\"0.771242\" stop-color=\"#38C02B\" />\n <stop offset=\"0.860566\" stop-color=\"#52C218\" />\n <stop offset=\"0.915033\" stop-color=\"#67C30F\" />\n <stop offset=\"1\" stop-color=\"#86C504\" />\n </radialGradient>\n <linearGradient\n id=\"paint7_linear_2162_5756\"\n x1=\"10.9197\"\n y1=\"20.3483\"\n x2=\"13.5279\"\n y2=\"20.3483\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#0FBC5C\" />\n <stop offset=\"1\" stop-color=\"#0CBA65\" />\n </linearGradient>\n </defs>\n</svg>\n\n<svg\n *ngIf=\"icon === 'facebook'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__facebook',\n 'o-svg--' + size,\n extraClass ? 'o-svg__elipsis--' + extraClass : ''\n ]\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20102 1.5 1.5 6.20101 1.5 12C1.5 16.9243 4.89003 21.0561 9.46345 22.1908V15.2086H7.29827V12H9.46345V10.6174C9.46345 7.04353 11.0808 5.38705 14.5895 5.38705C15.2547 5.38705 16.4025 5.51746 16.872 5.64792V8.55658C16.6242 8.5305 16.1938 8.51744 15.659 8.51744C13.9373 8.51744 13.2721 9.16962 13.2721 10.8652V12H16.7017L16.1126 15.2086H13.2721V22.4231C18.4711 21.7952 22.5 17.3684 22.5 12Z\"\n fill=\"#0866FF\"\n />\n <path\n d=\"M16.1125 15.2086L16.7017 12H13.272V10.8652C13.272 9.16958 13.9372 8.51745 15.6589 8.51745C16.1937 8.51745 16.6241 8.53047 16.872 8.55655V5.64792C16.4024 5.51747 15.2546 5.38702 14.5894 5.38702C11.0808 5.38702 9.4634 7.04354 9.4634 10.6174V12H7.29822V15.2086H9.4634V22.1908C10.2758 22.3923 11.1253 22.5 11.9999 22.5C12.4306 22.5 12.855 22.4735 13.272 22.4231V15.2086H16.1125Z\"\n fill=\"white\"\n />\n</svg>\n", styles: [".o-svg{display:flex}.o-svg--lg{width:1.5rem;height:1.5rem}.o-svg--md{width:1.3rem;height:1.3rem}.o-svg--sm{width:1rem;height:1rem}.o-svg--xs{width:.9rem;height:.9rem}.o-svg__alert{display:inline-block}.o-svg__test--neutral path{fill:var(--color-action-neutral-content-default)}.o-svg__test--danger path{fill:var(--color-action-danger-border-default)}.o-svg__test--inverse path{fill:var(--color-action-inverse-content-default)}.o-svg__test--button-primary path{fill:#fff}.o-svg__test--disabled path{fill:var(--color-button-primary-content-disabled)}.o-svg__test--button-secondary path{fill:var(--color-button-secondary-content-default)}.o-svg__test--button-tertiary path{fill:var(--color-button-secondary-content-default)}.o-svg__test--button-danger path{fill:#fff}.o-svg__test--button-inverse path{fill:var(--color-button-inverse-content-default)}@keyframes spin{to{transform:rotate(360deg)}}.o-svg__spinner{width:100%;height:100%;display:inline-block;animation:spin 1s linear infinite;transform-origin:center center}.o-svg__spinner--secondary path{fill:var(--color-button-secondary-content-default)}.o-svg__spinner--tertiary path{fill:var(--color-button-secondary-content-default)}.o-svg__spinner--disabled path{fill:var(--color-button-secondary-content-disabled)}.o-svg__spinner--inverse path{fill:var(--color-button-inverse-content-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
14
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: IconComponent, isStandalone: true, selector: "lib-icon", inputs: { extraClass: "extraClass", variant: "variant", size: "size", icon: "icon" }, ngImport: i0, template: "<svg\n *ngIf=\"icon === 'alert'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__alert',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"m18.5001 14.6946-6.832-11.86486c-.1708-.29068-.4145-.53171-.7071-.69917-.2925-.16747-.6238-.25557-.9609-.25557-.33711 0-.66836.0881-.96094.25557-.29257.16746-.5363.40849-.70702.69917L1.50011 14.6946c-.16427.2811-.25084.6009-.25084.9265 0 .3257.08657.6454.25084.9266.16854.2924.41185.5348.70497.7021.29311.1674.62548.2538.96299.2503H16.8321c.3373.0032.6693-.0833.9621-.2507.2929-.1673.5359-.4095.7043-.7017.1645-.281.2514-.6007.2517-.9263.0002-.3257-.0861-.6455-.2501-.9268Zm-1.0836 1.2273c-.0595.1016-.1451.1856-.2477.2432-.1027.0577-.2189.087-.3367.085H3.16807c-.11775.002-.23392-.0273-.33661-.085-.10269-.0576-.1882-.1416-.24776-.2432-.05395-.0913-.08241-.1955-.08241-.3015 0-.1061.02846-.2103.08241-.3016L9.41573 3.45396c.06076-.10112.14666-.18479.24933-.24288.10268-.05808.21864-.08861.33664-.08861.1179 0 .2339.03053.3366.08861.1026.05809.1885.14176.2493.24288l6.832 11.86484c.0535.0916.0814.1959.0809.302-.0006.1061-.0296.2101-.084.3011Zm-8.04139-4.6718V8.12505c0-.16576.06584-.32473.18305-.44194.11721-.11721.27618-.18306.44194-.18306.1658 0 .3247.06585.4419.18306.1173.11721.1831.27618.1831.44194v3.12505c0 .1657-.0658.3247-.1831.4419-.1172.1172-.2761.1831-.4419.1831-.16576 0-.32473-.0659-.44194-.1831-.11721-.1172-.18305-.2762-.18305-.4419Zm1.56249 2.8125c0 .1854-.055.3666-.158.5208-.103.1542-.2494.2743-.4207.3453-.1713.0709-.35983.0895-.54169.0533-.18186-.0361-.34891-.1254-.48002-.2565s-.2204-.2982-.25657-.4801c-.03617-.1818-.01761-.3703.05335-.5416.07096-.1713.19112-.3177.34529-.4208.15417-.103.33543-.1579.52084-.1579.2486 0 .4871.0987.6629.2745.1758.1759.2746.4143.2746.663Z\"\n fill=\"#BA2F1E\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'arrow' && variant === 'left'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__arrow',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"M15.5302 18.9694c.0697.0697.125.1524.1627.2435.0377.091.0571.1886.0571.2872 0 .0985-.0194.1961-.0571.2871-.0377.0911-.093.1738-.1627.2435-.0696.0697-.1524.1249-.2434.1626-.0911.0378-.1886.0572-.2872.0572-.0985 0-.1961-.0194-.2872-.0572-.091-.0377-.1737-.0929-.2434-.1626l-7.50001-7.5c-.06973-.0697-.12505-.1524-.1628-.2434-.03774-.0911-.05717-.1887-.05717-.2872 0-.0986.01943-.1962.05717-.2873.03775-.091.09307-.1737.1628-.2434L14.469 3.96943c.1407-.14073.3316-.2198.5306-.2198.199 0 .3899.07907.5306.2198.1408.14073.2198.3316.2198.53062 0 .19902-.079.3899-.2198.53063L8.55993 12.0001l6.97027 6.9693Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'arrow' && variant === 'right'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__arrow',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"m17.031 12.5307-7.49996 7.5c-.06968.0697-.15241.1249-.24345.1626-.09105.0378-.18863.0572-.28717.0572-.09855 0-.19613-.0194-.28718-.0572-.09104-.0377-.17377-.0929-.24345-.1626-.06968-.0697-.12496-.1524-.16267-.2435-.03771-.091-.05712-.1886-.05712-.2871 0-.0986.01941-.1962.05712-.2872.03771-.0911.09299-.1738.16267-.2435l6.97031-6.9693-6.97031-6.96942C8.32906 4.88995 8.25 4.69907 8.25 4.50005c0-.19902.07906-.38989.21979-.53062.14073-.14073.3316-.2198.53063-.2198.19902 0 .38989.07907.53062.2198L17.031 11.4694c.0698.0697.1251.1524.1628.2434.0378.0911.0572.1887.0572.2873 0 .0985-.0194.1961-.0572.2872-.0377.091-.093.1737-.1628.2434Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'arrow' && variant === 'up'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__arrow',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"M20.0306 15.5306c-.0696.0697-.1524.1251-.2434.1628-.0911.0377-.1886.0572-.2872.0572-.0986 0-.1962-.0195-.2872-.0572-.0911-.0377-.1738-.0931-.2434-.1628L12 8.56029 5.03061 15.5306c-.14073.1407-.3316.2198-.53062.2198-.19902 0-.38989-.0791-.53063-.2198-.14073-.1407-.21979-.3316-.21979-.5306 0-.199.07906-.3899.21979-.5306l7.50004-7.50005c.0696-.06973.1523-.12505.2434-.16279.091-.03774.1886-.05717.2872-.05717.0986 0 .1961.01943.2872.05717.091.03774.1738.09306.2434.16279l7.5 7.50005c.0697.0696.1251.1523.1628.2434.0378.091.0572.1886.0572.2872 0 .0985-.0194.1961-.0572.2872-.0377.091-.0931.1737-.1628.2434Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'arrow' && variant === 'down'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__arrow',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"m20.0306 9.53062-7.5 7.49998c-.0696.0697-.1524.1251-.2434.1628-.0911.0378-.1886.0572-.2872.0572-.0986 0-.1962-.0194-.2872-.0572-.0911-.0377-.1738-.0931-.2434-.1628L3.96936 9.53062c-.14073-.14074-.21979-.33161-.21979-.53063 0-.19902.07906-.3899.21979-.53063.14074-.14073.33161-.21979.53063-.21979.19902 0 .38989.07906.53062.21979L12 15.4397l6.9694-6.97034c.0696-.06968.1524-.12495.2434-.16267.0911-.03771.1886-.05712.2872-.05712.0985 0 .1961.01941.2872.05712.091.03772.1737.09299.2434.16267.0697.06969.125.15241.1627.24346.0377.09104.0571.18862.0571.28717 0 .09855-.0194.19613-.0571.28717-.0377.09105-.093.17377-.1627.24346Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'calendar'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__calendar',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M16.25 2.5h-1.875v-.625c0-.16576-.0658-.32473-.1831-.44194-.1172-.11721-.2761-.18306-.4419-.18306s-.3247.06585-.4419.18306c-.1173.11721-.1831.27618-.1831.44194V2.5h-6.25v-.625c0-.16576-.06585-.32473-.18306-.44194C6.57473 1.31585 6.41576 1.25 6.25 1.25c-.16576 0-.32473.06585-.44194.18306-.11721.11721-.18306.27618-.18306.44194V2.5H3.75c-.33152 0-.64946.1317-.88388.36612C2.6317 3.10054 2.5 3.41848 2.5 3.75v12.5c0 .3315.1317.6495.36612.8839.23442.2344.55236.3661.88388.3661h12.5c.3315 0 .6495-.1317.8839-.3661.2344-.2344.3661-.5524.3661-.8839V3.75c0-.33152-.1317-.64946-.3661-.88388C16.8995 2.6317 16.5815 2.5 16.25 2.5ZM5.625 3.75v.625c0 .16576.06585.32473.18306.44194C5.92527 4.93415 6.08424 5 6.25 5c.16576 0 .32473-.06585.44194-.18306.11721-.11721.18306-.27618.18306-.44194V3.75h6.25v.625c0 .16576.0658.32473.1831.44194.1172.11721.2761.18306.4419.18306s.3247-.06585.4419-.18306c.1173-.11721.1831-.27618.1831-.44194V3.75h1.875v2.5H3.75v-2.5h1.875Zm10.625 12.5H3.75V7.5h12.5v8.75Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'eye' && variant === 'open'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__eye',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M19.3211 9.74688c-.0274-.06172-.6891-1.52969-2.1602-3.00079C15.2008 4.78594 12.725 3.75 9.99999 3.75c-2.725 0-5.20078 1.03594-7.16094 2.99609C1.36796 8.21719.703118 9.6875.678899 9.74688.643362 9.82681.625 9.91331.625 10.0008c0 .0875.018362.174.053899.2539.027344.0617.689061 1.5289 2.160151 3C4.79921 15.2141 7.27499 16.25 9.99999 16.25c2.72501 0 5.20081-1.0359 7.16091-2.9953 1.4711-1.4711 2.1328-2.9383 2.1602-3 .0355-.0799.0539-.1664.0539-.2539 0-.08749-.0184-.17399-.0539-.25392ZM9.99999 15c-2.40469 0-4.50547-.8742-6.24453-2.5977C3.0419 11.6927 2.43483 10.8836 1.95312 10c.48158-.88364 1.08867-1.69283 1.80234-2.40234C5.49452 5.87422 7.5953 5 9.99999 5c2.40471 0 4.50551.87422 6.24451 2.59766.715.70934 1.3234 1.51853 1.8063 2.40234-.5633 1.0516-3.0172 5-8.05081 5Zm0-8.75c-.74168 0-1.4667.21993-2.08339.63199-.61668.41205-1.09733.99772-1.38116 1.68295-.28382.68522-.35809 1.43926-.21339 2.16666.14469.7274.50184 1.3956 1.02629 1.9201.52445.5244 1.19263.8816 1.92006 1.0262.72743.1447 1.4814.0705 2.1667-.2134.6852-.2838 1.2708-.7644 1.6829-1.3811.4121-.6167.632-1.3417.632-2.0834-.001-.99424-.3965-1.94747-1.0995-2.65051-.703-.70304-1.6563-1.09846-2.65051-1.09949Zm0 6.25c-.49445 0-.9778-.1466-1.38892-.4213-.41113-.2747-.73156-.6652-.92078-1.122-.18922-.4568-.23872-.95947-.14226-1.44443.09646-.48495.33456-.93041.68419-1.28004.34964-.34963.79509-.58773 1.28005-.68419.48495-.09647.98763-.04696 1.44443.14226.4568.18922.8473.50965 1.122.92077.2747.41113.4213.89448.4213 1.38893 0 .663-.2634 1.2989-.7322 1.7678-.4689.4688-1.1048.7322-1.76781.7322Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'eye' && variant === 'close'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__eye',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M4.21249 2.70468c-.05488-.06187-.1215-.11223-.196-.14816-.07449-.03594-.15538-.05673-.23796-.06117-.08259-.00444-.16524.00755-.24316.03528-.07791.02774-.14955.07066-.21076.12628-.06121.05563-.11077.12285-.1458.19776-.03504.07492-.05486.15605-.05831.23869-.00346.08263.00953.16513.03819.24271.02867.07758.07245.1487.1288.20923l1.50313 1.65391C1.95312 6.94062.732805 9.62499.678899 9.74687.643362 9.8268.625 9.9133.625 10.0008c0 .0874.018362.1739.053899.2539.027344.0617.689061 1.5289 2.160151 3C4.79921 15.2141 7.27499 16.25 9.99999 16.25c1.40051.008 2.78681-.2804 4.06801-.8461l1.7187 1.8914c.0549.0619.1215.1122.196.1482.0745.0359.1554.0567.238.0611.0826.0045.1652-.0075.2431-.0352.0779-.0278.1496-.0707.2108-.1263.0612-.0557.1108-.1229.1458-.1978.035-.0749.0549-.156.0583-.2387.0035-.0826-.0095-.1651-.0382-.2427-.0287-.0776-.0724-.1487-.1288-.2092L4.21249 2.70468Zm3.69766 5.925 3.25545 3.58202c-.4902.2579-1.0522.3457-1.59777.2496-.54554-.0962-1.0437-.3707-1.41626-.7807-.37256-.4099-.59843-.932-.64212-1.4842-.0437-.5522.09725-1.10329.4007-1.56672ZM9.99999 15c-2.40469 0-4.50547-.8742-6.24453-2.5977-.71382-.7094-1.32092-1.5186-1.80234-2.40231.3664-.68672 1.53593-2.60859 3.69922-3.85781l1.40625 1.54297c-.54443.69727-.82482 1.56456-.79162 2.44855.0332.884.37786 1.7278.97305 2.3823.59519.6545 1.40259 1.0775 2.2795 1.1942.87688.1167 1.76688-.0803 2.51248-.5563l1.1508 1.2656c-1.0156.3897-2.095.5865-3.18281.5805Zm.46871-7.45548c-.1628-.03108-.3067-.12558-.3998-.26272-.09322-.13713-.12811-.30567-.09703-.46853.03103-.16286.12563-.3067.26273-.39988.1371-.09318.3057-.12807.4685-.09699.7966.15443 1.5219.56222 2.0677 1.16257.5459.60034.8831 1.36105.9612 2.16868.0155.16503-.0353.32944-.1411.45705-.1058.1276-.2579.208-.4229.2234-.0196.0012-.0391.0012-.0586 0-.1562.0007-.307-.0572-.4227-.1621-.1157-.105-.1879-.24952-.2023-.40507-.0526-.53719-.2772-1.04306-.6404-1.44239-.3631-.39933-.8455-.67079-1.3753-.77402Zm8.85 2.71018c-.0328.0734-.8242 1.8258-2.6062 3.4219-.0609.0562-.1324.0998-.2103.1282-.0779.0284-.1607.041-.2435.0371-.0828-.004-.164-.0243-.2389-.0599-.0749-.0357-.1419-.0858-.1972-.1476-.0553-.0618-.0977-.1339-.1249-.2123-.0271-.0783-.0384-.1613-.0332-.244.0053-.0828.0269-.1637.0637-.238.0368-.0743.088-.1405.1507-.1948.8743-.7854 1.6087-1.7138 2.1719-2.74531-.4825-.88455-1.0909-1.69431-1.8063-2.4039-1.739-1.72188-3.8398-2.5961-6.24451-2.5961-.50667-.00062-1.01254.04041-1.5125.12266-.0813.01438-.16465.0125-.24522-.00551-.08057-.01802-.15678-.05182-.22422-.09946-.06743-.04763-.12476-.10816-.16867-.17808-.04391-.06992-.07354-.14784-.08716-.22927-.01362-.08143-.01098-.16476.00778-.24516.01877-.08041.05327-.1563.10153-.22329s.10932-.12375.17964-.16702c.07032-.04326.14852-.07216.23007-.08502.5681-.09381 1.14296-.14058 1.71875-.13985 2.72501 0 5.20081 1.03594 7.16091 2.9961 1.4711 1.47109 2.1328 2.93906 2.1602 3.00078.0355.07993.0539.16643.0539.25393 0 .0874-.0184.1739-.0539.2539h-.0024Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'less'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__less',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n>\n <path\n d=\"M14 8c0 .13261-.0527.25979-.1464.35355-.0938.09377-.221.14645-.3536.14645h-11c-.13261 0-.25979-.05268-.35355-.14645C2.05268 8.25979 2 8.13261 2 8c0-.13261.05268-.25979.14645-.35355C2.24021 7.55268 2.36739 7.5 2.5 7.5h11c.1326 0 .2598.05268.3536.14645C13.9473 7.74021 14 7.86739 14 8Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'plus'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__plus',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M17.5 10c0 .1658-.0658.3247-.1831.4419-.1172.1173-.2761.1831-.4419.1831h-6.25v6.25c0 .1658-.0658.3247-.1831.4419-.1172.1173-.2761.1831-.4419.1831-.16576 0-.32473-.0658-.44194-.1831-.11721-.1172-.18306-.2761-.18306-.4419v-6.25h-6.25c-.16576 0-.32473-.0658-.44194-.1831C2.56585 10.3247 2.5 10.1658 2.5 10c0-.16576.06585-.32473.18306-.44194.11721-.11721.27618-.18306.44194-.18306h6.25v-6.25c0-.16576.06585-.32473.18306-.44194C9.67527 2.56585 9.83424 2.5 10 2.5c.1658 0 .3247.06585.4419.18306.1173.11721.1831.27618.1831.44194v6.25h6.25c.1658 0 .3247.06585.4419.18306.1173.11721.1831.27618.1831.44194Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'search'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__search',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"m17.9422 17.0578-3.9117-3.9109c1.1337-1.3612 1.6991-3.1071 1.5784-4.87446-.1206-1.76738-.918-3.42021-2.2263-4.61465-1.3082-1.19445-3.0266-1.83853-4.79767-1.79828-1.77105.04025-3.45839.76174-4.71104 2.01438-1.25264 1.25264-1.97413 2.93999-2.01438 4.71103-.04025 1.77108.60384 3.48948 1.79828 4.79768 1.19444 1.3083 2.84727 2.1057 4.61466 2.2263 1.76735.1207 3.51325-.4447 4.87445-1.5784l3.9109 3.9117c.0581.0581.127.1041.2029.1355.0759.0315.1572.0476.2393.0476s.1634-.0161.2393-.0476c.0759-.0314.1448-.0774.2029-.1355.0581-.0581.1041-.127.1355-.2029.0315-.0759.0477-.1572.0477-.2393s-.0162-.1634-.0477-.2393c-.0314-.0759-.0774-.1448-.1355-.2029ZM3.125 8.75c0-1.11252.3299-2.20006.94799-3.12509.61808-.92502 1.49658-1.64599 2.52442-2.07174 1.02783-.42574 2.15883-.53713 3.24998-.32009 1.09111.21704 2.09341.75277 2.88011 1.53944.7866.78667 1.3224 1.78895 1.5394 2.88009.2171 1.09115.1057 2.22214-.3201 3.24999-.4257 1.0278-1.1467 1.9063-2.0717 2.5244-.925.6181-2.01258.948-3.1251.948-1.49133-.0017-2.92111-.5948-3.97565-1.6494C3.71982 11.6711 3.12666 10.2413 3.125 8.75Z\"\n fill=\"#676D6C\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'spinner'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__spinner',\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M9.0145 1.80949c.20184.66019-.16972 1.359-.82991 1.56084-1.11797.3418-2.12799.96809-2.93117 1.81753-.80318.84945-1.37198 1.89294-1.65069 3.02827s-.25778 2.32357.06074 3.44837c.31853 1.1248.92372 2.1476 1.75632 2.9683.8326.8206 1.86405 1.4109 2.99336 1.7131 1.1293.3023 2.31775.306 3.44895.0109 1.1311-.2951 2.1663-.879 3.004-1.6944.8378-.8154 1.4494-1.8343 1.7749-2.9571.1923-.6631.8857-1.0447 1.5487-.8525.6631.1923 1.0447.8857.8524 1.5487-.4461 1.5387-1.2843 2.935-2.4323 4.0524-1.148 1.1174-2.5665 1.9175-4.1166 2.3219-1.5502.4044-3.17876.3993-4.72633-.0148-1.54756-.4142-2.96104-1.2231-4.10201-2.3477-1.14097-1.1246-1.97031-2.5262-2.4068-4.0676-.436495-1.5414-.465178-3.16977-.08324-4.7256.38194-1.55582 1.1614-2.98578 2.26205-4.14984C4.53753 2.3062 5.92164 1.44796 7.45366.979572c.66019-.20184 1.359.169728 1.56084.829918Z\"\n fill=\"#fff\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'success'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__success',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M13.5672 7.68281c.0581.05805.1042.12698.1357.20285.0314.07588.0476.15721.0476.23934 0 .08213-.0162.16346-.0476.23934-.0315.07587-.0776.1448-.1357.20285L9.19219 12.9422c-.05804.0581-.12697.1042-.20285.1357-.07587.0314-.1572.0476-.23934.0476-.08213 0-.16346-.0162-.23933-.0476-.07588-.0315-.14481-.0776-.20285-.1357l-1.875-1.875c-.11728-.1173-.18316-.2763-.18316-.4422s.06588-.3249.18316-.4422c.11727-.1173.27633-.18315.44218-.18315.16586 0 .32492.06585.44219.18315L8.75 11.6164l3.9328-3.93359c.0581-.05811.127-.10421.2029-.13566.0758-.03145.1572-.04764.2393-.04764s.1635.01619.2393.04764c.0759.03145.1448.07755.2029.13566ZM18.125 10c0 1.607-.4765 3.1779-1.3693 4.514-.8928 1.3362-2.1617 2.3776-3.6464 2.9925-1.4846.615-3.11831.7759-4.6944.4624-1.5761-.3135-3.02384-1.0874-4.16014-2.2237-1.1363-1.1363-1.91013-2.584-2.22364-4.1601-.3135-1.5761-.1526-3.20975.46236-4.6944.61496-1.48465 1.65637-2.7536 2.99252-3.64639C6.82214 2.35152 8.39303 1.875 10 1.875c2.1542.00227 4.2195.85903 5.7427 2.38227C17.266 5.78051 18.1227 7.84581 18.125 10Zm-1.25 0c0-1.35975-.4032-2.68896-1.1586-3.81955-.7555-1.13058-1.8292-2.01177-3.0854-2.53212-1.2563-.52035-2.63862-.6565-3.97224-.39123-1.33362.26527-2.55863.92006-3.52012 1.88154-.96148.96149-1.61626 2.18649-1.88154 3.52011-.26527 1.33362-.12912 2.71595.39123 3.97215.52035 1.2563 1.40154 2.33 2.53213 3.0855C7.31105 16.4718 8.64026 16.875 10 16.875c1.8227-.0021 3.5702-.7271 4.8591-2.0159 1.2888-1.2889 2.0138-3.0364 2.0159-4.8591Z\"\n fill=\"#35785B\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'test'\"\n fill=\"none\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__test',\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 18 18\"\n>\n <path\n d=\"M16.5 0h-15C1.10218 0 .720644.158035.43934.43934.158035.720644 0 1.10218 0 1.5v15c0 .3978.158035.7794.43934 1.0607C.720644 17.842 1.10218 18 1.5 18h15c.3978 0 .7794-.158 1.0607-.4393S18 16.8978 18 16.5v-15c0-.39782-.158-.779356-.4393-1.06066C17.2794.158035 16.8978 0 16.5 0Zm-15 16.5V2.56031L15.4397 16.5H1.5Zm1.06031-15H16.5v13.9406L2.56031 1.5Z\"\n fill=\"#217870\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'thumb'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__thumb',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"M19.5 3h-15c-.39782 0-.77936.15804-1.06066.43934C3.15804 3.72064 3 4.10218 3 4.5v15c0 .3978.15804.7794.43934 1.0607S4.10218 21 4.5 21h15c.3978 0 .7794-.158 1.0607-.4393S21 19.8978 21 19.5v-15c0-.39782-.158-.77936-.4393-1.06066C20.2794 3.15804 19.8978 3 19.5 3Zm-15 1.5h15v7.2544l-2.3147-2.31565c-.2813-.28109-.6626-.43899-1.0603-.43899-.3977 0-.779.1579-1.0603.43899L5.00344 19.5H4.5v-15Zm15 15H7.125l9-9 3.375 3.375V19.5ZM9 11.25c.44501 0 .88002-.132 1.25-.3792.37-.2472.6584-.5986.8287-1.00976.1703-.41114.2149-.86354.1281-1.29999-.0868-.43646-.3011-.83737-.6158-1.15204-.3147-.31467-.71559-.52896-1.15205-.61578-.43645-.08681-.88885-.04226-1.29999.12804-.41113.1703-.76253.45869-1.00977.8287C6.88196 8.11998 6.75 8.55499 6.75 9c0 .59674.23705 1.169.65901 1.591.42196.4219.99425.659 1.59099.659Zm0-3c.14834 0 .29334.04399.41668.1264.12333.08241.21946.19954.27623.33659.05677.13704.07162.28784.04268.43333-.02894.14548-.10037.27912-.20526.38401-.10489.10489-.23853.17632-.38401.20526-.14549.02894-.29629.01409-.43333-.04268-.13705-.05677-.25418-.1529-.33659-.27623C8.29399 9.29334 8.25 9.14834 8.25 9c0-.19891.07902-.38968.21967-.53033C8.61032 8.32902 8.80109 8.25 9 8.25Z\"\n fill=\"#535858\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'user'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__user',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"M21.6488 19.8751c-1.4279-2.4684-3.6282-4.2384-6.196-5.0775 1.2702-.7561 2.257-1.9083 2.809-3.2796.5519-1.3712.6385-2.88576.2464-4.31099-.3921-1.42523-1.2412-2.68234-2.417-3.57828-1.1757-.89594-2.613-1.38117-4.0912-1.38117-1.4782 0-2.91549.48523-4.09122 1.38117-1.17572.89594-2.02484 2.15305-2.41695 3.57828-.39212 1.42523-.30554 2.93979.24642 4.31099.55196 1.3713 1.53879 2.5235 2.80895 3.2796-2.56782.8381-4.76813 2.6081-6.19594 5.0775-.05236.0854-.08709.1804-.10214.2794-.01505.099-.01012.2.01451.2971.02462.0971.06844.1883.12887.2681.06043.0799.13624.1469.22297.197.08673.05.18261.0823.28198.0947.09938.0124.20025.0049.29664-.0223.0964-.0272.18638-.0734.26463-.1359.07825-.0625.14318-.1401.19098-.2281 1.76625-3.0525 4.88812-4.875 8.3503-4.875 3.4622 0 6.5841 1.8225 8.3503 4.875.0478.088.1128.1656.191.2281.0783.0625.1682.1087.2646.1359.0964.0272.1973.0347.2967.0223.0993-.0124.1952-.0447.2819-.0947.0868-.0501.1626-.1171.223-.197.0604-.0798.1043-.171.1289-.2681.0246-.0971.0296-.1981.0145-.2971-.0151-.099-.0498-.194-.1021-.2794ZM6.75001 9.00011c0-1.03835.30791-2.05339.88478-2.91674.57688-.86336 1.39682-1.53627 2.35613-1.93363.95928-.39736 2.01488-.50133 3.03328-.29875 1.0184.20257 1.9539.70258 2.6881 1.43681.7342.73422 1.2343 1.66968 1.4368 2.68809.2026 1.0184.0986 2.07401-.2987 3.03331-.3974.9593-1.0703 1.7792-1.9336 2.3561-.8634.5769-1.8784.8848-2.9168.8848-1.3919-.0015-2.72641-.5551-3.71066-1.5393-.98424-.9843-1.53784-2.3188-1.53933-3.71069Z\"\n fill=\"#535858\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'info'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__info',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M10 1.87601c-1.60697 0-3.17786.47652-4.514 1.36931-1.33615.89278-2.37756 2.16173-2.99252 3.64638-.61496 1.48465-.77586 3.1183-.46236 4.6944.31351 1.5761 1.08734 3.0238 2.22364 4.1602 1.1363 1.1363 2.58404 1.9101 4.16014 2.2236 1.57609.3135 3.2098.1526 4.6944-.4624 1.4847-.6149 2.7536-1.6563 3.6464-2.9925.8928-1.3361 1.3693-2.907 1.3693-4.514-.0023-2.15418-.859-4.21948-2.3823-5.74272-1.5232-1.52324-3.5885-2.38-5.7427-2.38227ZM10 16.876c-1.35974 0-2.68895-.4032-3.81954-1.1586-1.13059-.7555-2.01178-1.8292-2.53213-3.0854-.52035-1.2563-.6565-2.63862-.39123-3.97224.26528-1.33362.92006-2.55863 1.88154-3.52011.96149-.96149 2.1865-1.61627 3.52012-1.88154 1.33362-.26528 2.71594-.12913 3.97224.39123 1.2562.52035 2.3299 1.40153 3.0854 2.53212.7554 1.13059 1.1586 2.4598 1.1586 3.81954-.0021 1.8227-.7271 3.5702-2.0159 4.8591-1.2889 1.2888-3.0364 2.0138-4.8591 2.0159Zm1.25-3.125c0 .1658-.0658.3247-.1831.4419-.1172.1173-.2761.1831-.4419.1831-.3315 0-.64946-.1317-.88388-.3661-.23442-.2344-.36612-.5524-.36612-.8839v-3.125c-.16576 0-.32473-.06584-.44194-.18305-.11721-.11721-.18306-.27618-.18306-.44194 0-.16576.06585-.32473.18306-.44194.11721-.11721.27618-.18306.44194-.18306.33152 0 .6495.13169.8839.36611.2344.23442.3661.55237.3661.88388v3.125c.1658 0 .3247.0659.4419.1831.1173.1172.1831.2761.1831.4419Zm-2.5-7.18749c0-.18542.05499-.36668.158-.52085.10301-.15417.24943-.27433.42074-.34529.1713-.07096.3598-.08952.54166-.05335.1819.03617.3489.12546.48.25657.1311.13112.2204.29816.2566.48002.0362.18186.0176.37036-.0534.54166-.0709.17131-.1911.31773-.3452.42074-.1542.10301-.33548.158-.5209.158-.24864 0-.48709-.09877-.66291-.27459C8.84878 7.0506 8.75 6.81215 8.75 6.56351Z\"\n fill=\"#27749A\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'warning'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__warning',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M10 1.87601c-1.60697 0-3.17786.47652-4.514 1.36931-1.33615.89278-2.37756 2.16173-2.99252 3.64638-.61496 1.48465-.77586 3.1183-.46236 4.6944.31351 1.5761 1.08734 3.0238 2.22364 4.1602 1.1363 1.1363 2.58404 1.9101 4.16014 2.2236 1.57609.3135 3.2098.1526 4.6944-.4624 1.4847-.6149 2.7536-1.6563 3.6464-2.9925.8928-1.3361 1.3693-2.907 1.3693-4.514-.0023-2.15418-.859-4.21948-2.3823-5.74272-1.5232-1.52324-3.5885-2.38-5.7427-2.38227ZM10 16.876c-1.35974 0-2.68895-.4032-3.81954-1.1586-1.13059-.7555-2.01178-1.8292-2.53213-3.0854-.52035-1.2563-.6565-2.63862-.39123-3.97224.26528-1.33362.92006-2.55863 1.88154-3.52011.96149-.96149 2.1865-1.61627 3.52012-1.88154 1.33362-.26528 2.71594-.12913 3.97224.39123 1.2562.52035 2.3299 1.40153 3.0854 2.53212.7554 1.13059 1.1586 2.4598 1.1586 3.81954-.0021 1.8227-.7271 3.5702-2.0159 4.8591-1.2889 1.2888-3.0364 2.0138-4.8591 2.0159Zm-.625-6.25V6.25101c0-.16576.06585-.32473.18306-.44194.11721-.11721.27618-.18306.44194-.18306.1658 0 .3247.06585.4419.18306.1173.11721.1831.27618.1831.44194V10.626c0 .1658-.0658.3247-.1831.4419-.1172.1173-.2761.1831-.4419.1831-.16576 0-.32473-.0658-.44194-.1831-.11721-.1172-.18306-.2761-.18306-.4419Zm1.5625 2.8125c0 .1854-.055.3667-.158.5209-.103.1541-.2494.2743-.4207.3452-.1713.071-.35984.0896-.54169.0534-.18186-.0362-.34891-.1255-.48002-.2566s-.2204-.2981-.25657-.48c-.03618-.1819-.01761-.3704.05335-.5417.07095-.1713.19112-.3177.34529-.4207.15417-.103.33542-.158.52084-.158.2486 0 .4871.0988.6629.2746.1758.1758.2746.4143.2746.6629Z\"\n fill=\"#866600\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'upload'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__upload',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M17.5 11.25v5c0 .1658-.0658.3247-.1831.4419-.1172.1173-.2761.1831-.4419.1831H3.125c-.16576 0-.32473-.0658-.44194-.1831C2.56585 16.5747 2.5 16.4158 2.5 16.25v-5c0-.1658.06585-.3247.18306-.4419.11721-.1172.27618-.1831.44194-.1831.16576 0 .32473.0659.44194.1831.11721.1172.18306.2761.18306.4419v4.375h12.5V11.25c0-.1658.0658-.3247.1831-.4419.1172-.1172.2761-.1831.4419-.1831s.3247.0659.4419.1831c.1173.1172.1831.2761.1831.4419ZM7.31719 6.06719 9.375 4.0086V11.25c0 .1658.06585.3247.18306.4419.11721.1173.27618.1831.44194.1831.1658 0 .3247-.0658.4419-.1831.1173-.1172.1831-.2761.1831-.4419V4.0086l2.0578 2.05859c.1173.11728.2763.18316.4422.18316s.3249-.06588.4422-.18316c.1173-.11727.1831-.27633.1831-.44219 0-.16585-.0658-.32491-.1831-.44218l-3.125-3.125c-.0581-.05811-.127-.10421-.2029-.13567-.0758-.03145-.1572-.04764-.2393-.04764-.08213 0-.16346.01619-.23934.04764-.07587.03146-.1448.07756-.20285.13567l-3.125 3.125c-.11727.11727-.18316.27633-.18316.44218 0 .16586.06589.32492.18316.44219.11728.11728.27634.18316.44219.18316.16585 0 .32491-.06588.44219-.18316Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'card'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__card',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 30 20\"\n>\n <path\n d=\"M26.0526 0H3.94737C1.7673 0 0 1.86548 0 4.16667V15.8333C0 18.1345 1.7673 20 3.94737 20H26.0526C28.2327 20 30 18.1345 30 15.8333V4.16667C30 1.86548 28.2327 0 26.0526 0Z\"\n fill=\"#4486E4\"\n />\n <path d=\"M30 4.16669H0v3h30v-3Z\" fill=\"#0F3760\" />\n <path\n d=\"M21.5 16h3c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5h-3c-.8284 0-1.5.6716-1.5 1.5s.6716 1.5 1.5 1.5Z\"\n fill=\"#D4E3F4\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'card-disabled'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__card-disabled',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 30 20\"\n>\n <path\n d=\"M26.0526 0H3.94737C1.7673 0 0 1.86548 0 4.16667V15.8333C0 18.1345 1.7673 20 3.94737 20H26.0526C28.2327 20 30 18.1345 30 15.8333V4.16667C30 1.86548 28.2327 0 26.0526 0Z\"\n fill=\"#c7c7c7\"\n />\n <path d=\"M30 4.16669H0v3h30v-3Z\" fill=\"#a7a7a7\" />\n <path\n d=\"M21.5 16h3c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5h-3c-.8284 0-1.5.6716-1.5 1.5s.6716 1.5 1.5 1.5Z\"\n fill=\"#D4E3F4\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'close'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__close',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M16.0672 15.1828c.058.0581.1041.127.1355.2029.0315.0758.0476.1572.0476.2393s-.0161.1634-.0476.2393c-.0314.0759-.0775.1448-.1355.2029-.0581.058-.127.1041-.2029.1355-.0759.0315-.1572.0476-.2393.0476s-.1635-.0161-.2393-.0476c-.0759-.0314-.1448-.0775-.2029-.1355l-5.18282-5.1836-5.18281 5.1836c-.11728.1172-.27634.1831-.44219.1831-.16585 0-.32491-.0659-.44219-.1831-.11727-.1173-.18316-.2764-.18316-.4422 0-.1659.06589-.3249.18316-.4422l5.1836-5.18282-5.1836-5.18281c-.11727-.11728-.18316-.27634-.18316-.44219 0-.16585.06589-.32491.18316-.44219.11728-.11727.27634-.18316.44219-.18316.16585 0 .32491.06589.44219.18316l5.18281 5.1836 5.18282-5.1836c.1173-.11727.2763-.18316.4422-.18316.1658 0 .3249.06589.4422.18316.1172.11728.1831.27634.1831.44219 0 .16585-.0659.32491-.1831.44219l-5.1836 5.18281 5.1836 5.18282Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'close-white'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__close',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M16.0672 15.1828c.058.0581.1041.127.1355.2029.0315.0758.0476.1572.0476.2393s-.0161.1634-.0476.2393c-.0314.0759-.0775.1448-.1355.2029-.0581.058-.127.1041-.2029.1355-.0759.0315-.1572.0476-.2393.0476s-.1635-.0161-.2393-.0476c-.0759-.0314-.1448-.0775-.2029-.1355l-5.18282-5.1836-5.18281 5.1836c-.11728.1172-.27634.1831-.44219.1831-.16585 0-.32491-.0659-.44219-.1831-.11727-.1173-.18316-.2764-.18316-.4422 0-.1659.06589-.3249.18316-.4422l5.1836-5.18282-5.1836-5.18281c-.11727-.11728-.18316-.27634-.18316-.44219 0-.16585.06589-.32491.18316-.44219.11728-.11727.27634-.18316.44219-.18316.16585 0 .32491.06589.44219.18316l5.18281 5.1836 5.18282-5.1836c.1173-.11727.2763-.18316.4422-.18316.1658 0 .3249.06589.4422.18316.1172.11728.1831.27634.1831.44219 0 .16585-.0659.32491-.1831.44219l-5.1836 5.18281 5.1836 5.18282Z\"\n fill=\"#ffffff\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'close-disabled'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__close',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n>\n <path\n d=\"M12.8537 12.1463c.0465.0464.0833.1016.1085.1623.0251.0607.0381.1257.0381.1914 0 .0657-.013.1308-.0381.1915-.0252.0607-.062.1158-.1085.1623-.0464.0464-.1016.0833-.1623.1084-.0607.0252-.1257.0381-.1914.0381-.0657 0-.1308-.0129-.1915-.0381-.0607-.0251-.1158-.062-.1623-.1084L7.99997 8.70691 3.85372 12.8538c-.09382.0938-.22107.1465-.35375.1465-.13268 0-.25993-.0527-.35375-.1465-.09382-.0938-.14653-.2211-.14653-.3538 0-.1326.05271-.2599.14653-.3537L7.2931 8.00003 3.14622 3.85378c-.09382-.09382-.14653-.22106-.14653-.35375 0-.13268.05271-.25993.14653-.35375.09382-.09382.22107-.14652.35375-.14652.13268 0 .25993.0527.35375.14652l4.14625 4.14688 4.14623-4.14688c.0938-.09382.2211-.14652.3538-.14652s.2599.0527.3537.14652c.0938.09382.1466.22107.1466.35375 0 .13269-.0528.25993-.1466.35375L8.70685 8.00003l4.14685 4.14627Z\"\n fill=\"#A6B0AF\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'check-circle'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__check-circle',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"M12 2.25c-1.9284 0-3.81343.57183-5.41681 1.64317-1.60337 1.07134-2.85306 2.59409-3.59101 4.37567-.73796 1.78156-.93104 3.74196-.55483 5.63326.3762 1.8913 1.3048 3.6286 2.66836 4.9922 1.36357 1.3636 3.10085 2.2922 4.99219 2.6684 1.8913.3762 3.8517.1831 5.6333-.5549 1.7815-.7379 3.3043-1.9876 4.3756-3.591C21.1782 15.8134 21.75 13.9284 21.75 12c-.0027-2.58502-1.0308-5.06339-2.8587-6.89128C17.0634 3.28084 14.585 2.25273 12 2.25Zm4.2806 8.0306-5.25 5.25c-.0696.0698-.1523.1251-.2434.1628-.091.0378-.1886.0572-.2872.0572-.0986 0-.1962-.0194-.2872-.0572-.091-.0377-.1738-.093-.24342-.1628l-2.25-2.25c-.14073-.1407-.21979-.3316-.21979-.5306 0-.199.07906-.3899.21979-.5306.14073-.1408.3316-.2198.53062-.2198.19903 0 .3899.079.53063.2198L10.5 13.9397l4.7194-4.72033c.0697-.06968.1524-.12495.2434-.16267.0911-.03771.1887-.05712.2872-.05712.0986 0 .1961.01941.2872.05712.091.03772.1737.09299.2434.16267.0697.06969.125.15241.1627.24346.0377.09104.0571.18862.0571.28717 0 .09855-.0194.19613-.0571.2872-.0377.091-.093.1737-.1627.2434Z\"\n fill=\"#217870\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'elipsis'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__elipsis',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 11 20\"\n>\n <path\n d=\"M1.162 15.296c.672 0 1.162-.504 1.162-1.148 0-.63-.49-1.148-1.162-1.148C.49 13 0 13.518 0 14.148c0 .644.49 1.148 1.162 1.148ZM5.22255 15.296c.672 0 1.162-.504 1.162-1.148 0-.63-.49-1.148-1.162-1.148-.672 0-1.162.518-1.162 1.148 0 .644.49 1.148 1.162 1.148ZM9.28309 15.296c.672 0 1.16201-.504 1.16201-1.148 0-.63-.49001-1.148-1.16201-1.148-.672 0-1.162.518-1.162 1.148 0 .644.49 1.148 1.162 1.148Z\"\n fill=\"#535858\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'apple'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__apple',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n viewBox=\"0 0 25 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M20.8578 8.65962C20.7331 8.75412 18.5319 9.96595 18.5319 12.6605C18.5319 15.7772 21.3328 16.8798 21.4167 16.9071C21.4038 16.9743 20.9717 18.4172 19.9399 19.8873C19.0199 21.1811 18.059 22.4727 16.5972 22.4727C15.1355 22.4727 14.7593 21.6431 13.0719 21.6431C11.4274 21.6431 10.8427 22.5 9.50567 22.5C8.16861 22.5 7.23567 21.3029 6.16302 19.8327C4.92054 18.1064 3.91667 15.4244 3.91667 12.8789C3.91667 8.79613 6.63378 6.63081 9.3079 6.63081C10.7288 6.63081 11.9132 7.5423 12.8053 7.5423C13.6544 7.5423 14.9786 6.57621 16.5951 6.57621C17.2077 6.57621 19.4089 6.63081 20.8578 8.65962ZM15.8277 4.84773C16.4962 4.07276 16.9691 2.99745 16.9691 1.92214C16.9691 1.77303 16.9562 1.62181 16.9283 1.5C15.8406 1.5399 14.5465 2.20777 13.7662 3.09196C13.1536 3.77243 12.5818 4.84773 12.5818 5.93774C12.5818 6.10156 12.6097 6.26538 12.6226 6.31788C12.6914 6.33048 12.8032 6.34518 12.915 6.34518C13.8909 6.34518 15.1183 5.70672 15.8277 4.84773Z\"\n fill=\"black\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'google'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__google',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <mask\n id=\"mask0_2162_5756\"\n style=\"mask-type: luminance\"\n maskUnits=\"userSpaceOnUse\"\n x=\"1\"\n y=\"1\"\n width=\"22\"\n height=\"22\"\n >\n <path\n d=\"M22.2983 10.052H12.2237V14.0889H18.0126C17.9196 14.6602 17.7106 15.2223 17.4046 15.7347C17.054 16.3219 16.6206 16.7689 16.1763 17.1093C14.8456 18.1291 13.2941 18.3376 12.2166 18.3376C9.49479 18.3376 7.16915 16.5784 6.26885 14.188C6.23252 14.1013 6.20839 14.0117 6.17901 13.9231C5.98007 13.3147 5.87136 12.6704 5.87136 12.0007C5.87136 11.3037 5.98908 10.6365 6.2037 10.0064C7.05029 7.52124 9.42836 5.66505 12.2186 5.66505C12.7798 5.66505 13.3203 5.73186 13.8328 5.8651C15.0041 6.16962 15.8326 6.76936 16.3403 7.24375L19.4036 4.24379C17.5402 2.53527 15.1111 1.5 12.2135 1.5C9.89707 1.49995 7.75844 2.22168 6.0059 3.44144C4.58465 4.43062 3.41902 5.75502 2.63236 7.29316C1.90065 8.71933 1.5 10.2998 1.5 11.9991C1.5 13.6985 1.90127 15.2954 2.63297 16.7083V16.7179C3.40584 18.2179 4.53603 19.5095 5.90965 20.4942C7.10966 21.3544 9.2614 22.5 12.2135 22.5C13.9112 22.5 15.4158 22.1939 16.7427 21.6203C17.7 21.2065 18.5481 20.6668 19.316 19.9732C20.3306 19.0566 21.1252 17.923 21.6675 16.6187C22.2099 15.3144 22.5 13.8394 22.5 12.2403C22.5 11.4956 22.4252 10.7393 22.2983 10.0519V10.052Z\"\n fill=\"white\"\n />\n </mask>\n <g mask=\"url(#mask0_2162_5756)\">\n <g filter=\"url(#filter0_f_2162_5756)\">\n <path\n d=\"M1.34552 12.0704C1.35666 13.743 1.83324 15.4687 2.55464 16.8617V16.8713C3.07589 17.883 3.78828 18.6821 4.59968 19.474L9.50033 17.6858C8.57316 17.2148 8.43168 16.9263 7.76705 16.3997C7.08785 15.7148 6.58164 14.9285 6.26639 14.0066H6.25369L6.26639 13.997C6.059 13.3882 6.03854 12.742 6.03089 12.0704H1.34552Z\"\n fill=\"url(#paint0_radial_2162_5756)\"\n />\n </g>\n <g filter=\"url(#filter1_f_2162_5756)\">\n <path\n d=\"M12.2238 1.42365C11.7394 3.12534 11.9246 4.77944 12.2238 5.74187C12.7831 5.74229 13.3219 5.80896 13.8329 5.94179C15.0042 6.2463 15.8326 6.84606 16.3403 7.32045L19.482 4.24385C17.6208 2.53737 15.381 1.42633 12.2238 1.42365Z\"\n fill=\"url(#paint1_radial_2162_5756)\"\n />\n </g>\n <g filter=\"url(#filter2_f_2162_5756)\">\n <path\n d=\"M12.2132 1.41019C9.83733 1.41014 7.6438 2.1504 5.84628 3.40147C5.17885 3.86599 4.56637 4.40259 4.02099 4.9993C3.87812 6.33968 5.09053 7.98715 7.49146 7.97351C8.65638 6.61844 10.3793 5.74172 12.2969 5.74172C12.2986 5.74172 12.3003 5.74186 12.302 5.74187L12.2237 1.41049C12.2202 1.41049 12.2168 1.41019 12.2132 1.41019Z\"\n fill=\"url(#paint2_radial_2162_5756)\"\n />\n </g>\n <g filter=\"url(#filter3_f_2162_5756)\">\n <path\n d=\"M20.055 12.5554L17.9343 14.0123C17.8413 14.5836 17.6322 15.1456 17.3262 15.6581C16.9756 16.2453 16.5422 16.6923 16.0979 17.0327C14.7699 18.0503 13.2226 18.2599 12.1454 18.2607C11.032 20.157 10.8368 21.1069 12.2237 22.6373C13.9398 22.6361 15.4613 22.3263 16.8033 21.7462C17.7733 21.3268 18.6328 20.7799 19.411 20.0769C20.4392 19.1481 21.2446 17.9992 21.7942 16.6774C22.3439 15.3556 22.6378 13.8609 22.6378 12.2404L20.055 12.5554Z\"\n fill=\"url(#paint3_radial_2162_5756)\"\n />\n </g>\n <g filter=\"url(#filter4_f_2162_5756)\">\n <path\n d=\"M12.0671 9.89865V14.2423H22.2701C22.3598 13.6474 22.6566 12.8777 22.6566 12.2404C22.6566 11.4957 22.5818 10.586 22.455 9.89865H12.0671Z\"\n fill=\"#3086FF\"\n />\n </g>\n <g filter=\"url(#filter5_f_2162_5756)\">\n <path\n d=\"M4.06967 4.84595C3.44004 5.53485 2.90214 6.30592 2.47565 7.13983C1.74396 8.566 1.34332 10.2998 1.34332 11.9991C1.34332 12.0231 1.3453 12.0465 1.34546 12.0704C1.66951 12.6917 5.82155 12.5727 6.03083 12.0704C6.03057 12.047 6.02793 12.0241 6.02793 12.0006C6.02793 11.3036 6.14568 10.7899 6.3603 10.1598C6.62507 9.38257 7.03965 8.66683 7.56977 8.05017C7.68995 7.89675 8.01049 7.56692 8.10401 7.36908C8.13964 7.29373 8.03934 7.25143 8.03373 7.22491C8.02745 7.19524 7.89298 7.2191 7.86285 7.197C7.76719 7.12683 7.57777 7.0902 7.46274 7.05763C7.21689 6.98801 6.80945 6.8345 6.58314 6.67537C5.86779 6.17234 4.75141 5.57149 4.06967 4.84595Z\"\n fill=\"url(#paint4_radial_2162_5756)\"\n />\n </g>\n <g filter=\"url(#filter6_f_2162_5756)\">\n <path\n d=\"M6.59854 7.22788C8.25737 8.23272 8.73442 6.72068 9.83731 6.24753L7.91879 2.26904C7.21306 2.56566 6.54628 2.93419 5.92761 3.36477C5.00368 4.00782 4.18778 4.79253 3.51379 5.68553L6.59854 7.22788Z\"\n fill=\"url(#paint5_radial_2162_5756)\"\n />\n </g>\n <g filter=\"url(#filter7_f_2162_5756)\">\n <path\n d=\"M7.2736 17.3784C5.04684 18.1823 4.69823 18.2112 4.49326 19.5912C4.88495 19.9734 5.3058 20.327 5.75301 20.6475C6.95302 21.5077 9.26132 22.6534 12.2134 22.6534C12.2169 22.6534 12.2202 22.6531 12.2237 22.6531V18.1841C12.2214 18.1841 12.2189 18.1842 12.2166 18.1842C11.1112 18.1842 10.2278 17.8938 9.32207 17.3889C9.09876 17.2644 8.69361 17.5987 8.48765 17.4493C8.20359 17.2432 7.51998 17.6269 7.2736 17.3784Z\"\n fill=\"url(#paint6_radial_2162_5756)\"\n />\n </g>\n <g opacity=\"0.5\" filter=\"url(#filter8_f_2162_5756)\">\n <path\n d=\"M10.9197 18.0433V22.5756C11.3327 22.624 11.7626 22.6534 12.2135 22.6534C12.6656 22.6534 13.1029 22.6302 13.5279 22.5875V18.0738C13.0517 18.1552 12.6031 18.1842 12.2167 18.1842C11.7718 18.1842 11.339 18.1324 10.9197 18.0433Z\"\n fill=\"url(#paint7_linear_2162_5756)\"\n />\n </g>\n </g>\n <defs>\n <filter\n id=\"filter0_f_2162_5756\"\n x=\"0.875441\"\n y=\"11.6004\"\n width=\"9.09497\"\n height=\"8.34369\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter1_f_2162_5756\"\n x=\"11.4559\"\n y=\"0.953566\"\n width=\"8.49622\"\n height=\"6.83698\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter2_f_2162_5756\"\n x=\"3.53959\"\n y=\"0.940107\"\n width=\"9.23255\"\n height=\"7.50357\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter3_f_2162_5756\"\n x=\"10.7764\"\n y=\"11.7703\"\n width=\"12.3315\"\n height=\"11.3371\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter4_f_2162_5756\"\n x=\"11.597\"\n y=\"9.42857\"\n width=\"11.5297\"\n height=\"5.28382\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter5_f_2162_5756\"\n x=\"0.873243\"\n y=\"4.37587\"\n width=\"7.70847\"\n height=\"8.58716\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter6_f_2162_5756\"\n x=\"0.208944\"\n y=\"-1.03581\"\n width=\"12.9332\"\n height=\"11.9063\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"1.65243\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter7_f_2162_5756\"\n x=\"4.02318\"\n y=\"16.8905\"\n width=\"8.6706\"\n height=\"6.23301\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter8_f_2162_5756\"\n x=\"10.4496\"\n y=\"17.5732\"\n width=\"3.54837\"\n height=\"5.55027\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <radialGradient\n id=\"paint0_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(9.40223 19.3164) rotate(-92.3894) scale(10.467 15.7022)\"\n >\n <stop offset=\"0.141612\" stop-color=\"#1ABD4D\" />\n <stop offset=\"0.247515\" stop-color=\"#6EC30D\" />\n <stop offset=\"0.311547\" stop-color=\"#8AC502\" />\n <stop offset=\"0.366013\" stop-color=\"#A2C600\" />\n <stop offset=\"0.445673\" stop-color=\"#C8C903\" />\n <stop offset=\"0.540305\" stop-color=\"#EBCB03\" />\n <stop offset=\"0.615636\" stop-color=\"#F7CD07\" />\n <stop offset=\"0.699345\" stop-color=\"#FDCD04\" />\n <stop offset=\"0.771242\" stop-color=\"#FDCE05\" />\n <stop offset=\"0.860566\" stop-color=\"#FFCE0A\" />\n </radialGradient>\n <radialGradient\n id=\"paint1_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(19.1881 7.09785) scale(7.41096 9.3706)\"\n >\n <stop offset=\"0.408458\" stop-color=\"#FB4E5A\" />\n <stop offset=\"1\" stop-color=\"#FF4540\" />\n </radialGradient>\n <radialGradient\n id=\"paint2_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(15.1409 0.0537589) rotate(151.53) scale(11.8117 15.847)\"\n >\n <stop offset=\"0.231273\" stop-color=\"#FF4541\" />\n <stop offset=\"0.311547\" stop-color=\"#FF4540\" />\n <stop offset=\"0.457516\" stop-color=\"#FF4640\" />\n <stop offset=\"0.540305\" stop-color=\"#FF473F\" />\n <stop offset=\"0.699346\" stop-color=\"#FF5138\" />\n <stop offset=\"0.771242\" stop-color=\"#FF5B33\" />\n <stop offset=\"0.860566\" stop-color=\"#FF6C29\" />\n <stop offset=\"1\" stop-color=\"#FF8C18\" />\n </radialGradient>\n <radialGradient\n id=\"paint3_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(12.3781 21.2782) rotate(-128.041) scale(30.5579 11.3396)\"\n >\n <stop offset=\"0.131546\" stop-color=\"#0CBA65\" />\n <stop offset=\"0.209784\" stop-color=\"#0BB86D\" />\n <stop offset=\"0.297297\" stop-color=\"#09B479\" />\n <stop offset=\"0.396257\" stop-color=\"#08AD93\" />\n <stop offset=\"0.477124\" stop-color=\"#0AA6A9\" />\n <stop offset=\"0.568425\" stop-color=\"#0D9CC6\" />\n <stop offset=\"0.667385\" stop-color=\"#1893DD\" />\n <stop offset=\"0.768727\" stop-color=\"#258BF1\" />\n <stop offset=\"0.858506\" stop-color=\"#3086FF\" />\n </radialGradient>\n <radialGradient\n id=\"paint4_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(11.3035 3.39356) rotate(96.7579) scale(11.3243 15.9833)\"\n >\n <stop offset=\"0.366013\" stop-color=\"#FF4E3A\" />\n <stop offset=\"0.457516\" stop-color=\"#FF8A1B\" />\n <stop offset=\"0.540305\" stop-color=\"#FFA312\" />\n <stop offset=\"0.615636\" stop-color=\"#FFB60C\" />\n <stop offset=\"0.771242\" stop-color=\"#FFCD0A\" />\n <stop offset=\"0.860566\" stop-color=\"#FECF0A\" />\n <stop offset=\"0.915033\" stop-color=\"#FECF08\" />\n <stop offset=\"1\" stop-color=\"#FDCD01\" />\n </radialGradient>\n <radialGradient\n id=\"paint5_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(9.42961 3.27692) rotate(132.723) scale(5.67745 16.044)\"\n >\n <stop offset=\"0.315904\" stop-color=\"#FF4C3C\" />\n <stop offset=\"0.603818\" stop-color=\"#FF692C\" />\n <stop offset=\"0.726837\" stop-color=\"#FF7825\" />\n <stop offset=\"0.884534\" stop-color=\"#FF8D1B\" />\n <stop offset=\"1\" stop-color=\"#FF9F13\" />\n </radialGradient>\n <radialGradient\n id=\"paint6_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(15.1408 23.946) rotate(-151.53) scale(11.8117 15.847)\"\n >\n <stop offset=\"0.231273\" stop-color=\"#0FBC5F\" />\n <stop offset=\"0.311547\" stop-color=\"#0FBC5F\" />\n <stop offset=\"0.366013\" stop-color=\"#0FBC5E\" />\n <stop offset=\"0.457516\" stop-color=\"#0FBC5D\" />\n <stop offset=\"0.540305\" stop-color=\"#12BC58\" />\n <stop offset=\"0.699346\" stop-color=\"#28BF3C\" />\n <stop offset=\"0.771242\" stop-color=\"#38C02B\" />\n <stop offset=\"0.860566\" stop-color=\"#52C218\" />\n <stop offset=\"0.915033\" stop-color=\"#67C30F\" />\n <stop offset=\"1\" stop-color=\"#86C504\" />\n </radialGradient>\n <linearGradient\n id=\"paint7_linear_2162_5756\"\n x1=\"10.9197\"\n y1=\"20.3483\"\n x2=\"13.5279\"\n y2=\"20.3483\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#0FBC5C\" />\n <stop offset=\"1\" stop-color=\"#0CBA65\" />\n </linearGradient>\n </defs>\n</svg>\n\n<svg\n *ngIf=\"icon === 'facebook'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__facebook',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20102 1.5 1.5 6.20101 1.5 12C1.5 16.9243 4.89003 21.0561 9.46345 22.1908V15.2086H7.29827V12H9.46345V10.6174C9.46345 7.04353 11.0808 5.38705 14.5895 5.38705C15.2547 5.38705 16.4025 5.51746 16.872 5.64792V8.55658C16.6242 8.5305 16.1938 8.51744 15.659 8.51744C13.9373 8.51744 13.2721 9.16962 13.2721 10.8652V12H16.7017L16.1126 15.2086H13.2721V22.4231C18.4711 21.7952 22.5 17.3684 22.5 12Z\"\n fill=\"#0866FF\"\n />\n <path\n d=\"M16.1125 15.2086L16.7017 12H13.272V10.8652C13.272 9.16958 13.9372 8.51745 15.6589 8.51745C16.1937 8.51745 16.6241 8.53047 16.872 8.55655V5.64792C16.4024 5.51747 15.2546 5.38702 14.5894 5.38702C11.0808 5.38702 9.4634 7.04354 9.4634 10.6174V12H7.29822V15.2086H9.4634V22.1908C10.2758 22.3923 11.1253 22.5 11.9999 22.5C12.4306 22.5 12.855 22.4735 13.272 22.4231V15.2086H16.1125Z\"\n fill=\"white\"\n />\n</svg>\n", styles: [".o-svg{display:flex}.o-svg--lg{width:1.5rem;height:1.5rem}.o-svg--md{width:1.25rem;height:1.25rem}.o-svg--sm{width:1rem;height:1rem}.o-svg--xs{width:.875rem;height:.875rem}.o-svg__alert{display:inline-block}.o-svg__extra-class--primary path{fill:var(--color-button-primary-content-default)}.o-svg__extra-class--secondary path{fill:var(--color-button-secondary-content-default)}.o-svg__extra-class--tertiary path{fill:var(--color-button-tertiary-content-default)}.o-svg__extra-class--neutral path{fill:var(--color-button-neutral-content-default)}.o-svg__extra-class--danger path{fill:var(--color-action-danger-border-default)}.o-svg__extra-class--inverse path{fill:var(--color-action-inverse-content-default)}.o-svg__extra-class--disabled path{fill:var(--color-button-primary-content-disabled)}.o-svg__extra-class--button-primary path{fill:var(--color-button-primary-content-default)}.o-svg__extra-class--button-secondary path{fill:var(--color-button-secondary-content-default)}.o-svg__extra-class--button-tertiary path{fill:var(--color-button-tertiary-content-default)}.o-svg__extra-class--button-danger path{fill:#fff}.o-svg__extra-class--button-inverse path{fill:var(--color-button-inverse-content-default)}.o-svg__extra-class--button-neutral path{fill:var(--color-action-neutral-content-default)}@keyframes spin{to{transform:rotate(360deg)}}.o-svg__spinner{width:100%;height:100%;display:inline-block;animation:spin 1s linear infinite;transform-origin:center center}.o-svg__spinner--secondary path{fill:var(--color-button-secondary-content-default)}.o-svg__spinner--tertiary path{fill:var(--color-button-tertiary-content-default)}.o-svg__spinner--disabled path{fill:var(--color-button-secondary-content-disabled)}.o-svg__spinner--inverse path{fill:var(--color-button-inverse-content-default)}.o-svg__spinner--neutral path{fill:var(--color-button-neutral-content-default)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
15
15
|
}
|
|
16
16
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconComponent, decorators: [{
|
|
17
17
|
type: Component,
|
|
18
|
-
args: [{ selector: 'lib-icon', imports: [CommonModule], template: "<svg\n *ngIf=\"icon === 'alert'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__alert',\n 'o-svg--' + size,\n extraClass ? 'o-svg__alert--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"m18.5001 14.6946-6.832-11.86486c-.1708-.29068-.4145-.53171-.7071-.69917-.2925-.16747-.6238-.25557-.9609-.25557-.33711 0-.66836.0881-.96094.25557-.29257.16746-.5363.40849-.70702.69917L1.50011 14.6946c-.16427.2811-.25084.6009-.25084.9265 0 .3257.08657.6454.25084.9266.16854.2924.41185.5348.70497.7021.29311.1674.62548.2538.96299.2503H16.8321c.3373.0032.6693-.0833.9621-.2507.2929-.1673.5359-.4095.7043-.7017.1645-.281.2514-.6007.2517-.9263.0002-.3257-.0861-.6455-.2501-.9268Zm-1.0836 1.2273c-.0595.1016-.1451.1856-.2477.2432-.1027.0577-.2189.087-.3367.085H3.16807c-.11775.002-.23392-.0273-.33661-.085-.10269-.0576-.1882-.1416-.24776-.2432-.05395-.0913-.08241-.1955-.08241-.3015 0-.1061.02846-.2103.08241-.3016L9.41573 3.45396c.06076-.10112.14666-.18479.24933-.24288.10268-.05808.21864-.08861.33664-.08861.1179 0 .2339.03053.3366.08861.1026.05809.1885.14176.2493.24288l6.832 11.86484c.0535.0916.0814.1959.0809.302-.0006.1061-.0296.2101-.084.3011Zm-8.04139-4.6718V8.12505c0-.16576.06584-.32473.18305-.44194.11721-.11721.27618-.18306.44194-.18306.1658 0 .3247.06585.4419.18306.1173.11721.1831.27618.1831.44194v3.12505c0 .1657-.0658.3247-.1831.4419-.1172.1172-.2761.1831-.4419.1831-.16576 0-.32473-.0659-.44194-.1831-.11721-.1172-.18305-.2762-.18305-.4419Zm1.56249 2.8125c0 .1854-.055.3666-.158.5208-.103.1542-.2494.2743-.4207.3453-.1713.0709-.35983.0895-.54169.0533-.18186-.0361-.34891-.1254-.48002-.2565s-.2204-.2982-.25657-.4801c-.03617-.1818-.01761-.3703.05335-.5416.07096-.1713.19112-.3177.34529-.4208.15417-.103.33543-.1579.52084-.1579.2486 0 .4871.0987.6629.2745.1758.1759.2746.4143.2746.663Z\"\n fill=\"#BA2F1E\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'arrow' && variant === 'left'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__arrow',\n 'o-svg--' + size,\n extraClass ? 'o-svg__alert--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"M15.5302 18.9694c.0697.0697.125.1524.1627.2435.0377.091.0571.1886.0571.2872 0 .0985-.0194.1961-.0571.2871-.0377.0911-.093.1738-.1627.2435-.0696.0697-.1524.1249-.2434.1626-.0911.0378-.1886.0572-.2872.0572-.0985 0-.1961-.0194-.2872-.0572-.091-.0377-.1737-.0929-.2434-.1626l-7.50001-7.5c-.06973-.0697-.12505-.1524-.1628-.2434-.03774-.0911-.05717-.1887-.05717-.2872 0-.0986.01943-.1962.05717-.2873.03775-.091.09307-.1737.1628-.2434L14.469 3.96943c.1407-.14073.3316-.2198.5306-.2198.199 0 .3899.07907.5306.2198.1408.14073.2198.3316.2198.53062 0 .19902-.079.3899-.2198.53063L8.55993 12.0001l6.97027 6.9693Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'arrow' && variant === 'right'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__arrow',\n 'o-svg--' + size,\n extraClass ? 'o-svg__alert--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"m17.031 12.5307-7.49996 7.5c-.06968.0697-.15241.1249-.24345.1626-.09105.0378-.18863.0572-.28717.0572-.09855 0-.19613-.0194-.28718-.0572-.09104-.0377-.17377-.0929-.24345-.1626-.06968-.0697-.12496-.1524-.16267-.2435-.03771-.091-.05712-.1886-.05712-.2871 0-.0986.01941-.1962.05712-.2872.03771-.0911.09299-.1738.16267-.2435l6.97031-6.9693-6.97031-6.96942C8.32906 4.88995 8.25 4.69907 8.25 4.50005c0-.19902.07906-.38989.21979-.53062.14073-.14073.3316-.2198.53063-.2198.19902 0 .38989.07907.53062.2198L17.031 11.4694c.0698.0697.1251.1524.1628.2434.0378.0911.0572.1887.0572.2873 0 .0985-.0194.1961-.0572.2872-.0377.091-.093.1737-.1628.2434Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'arrow' && variant === 'up'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__arrow',\n 'o-svg--' + size,\n extraClass ? 'o-svg__alert--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"M20.0306 15.5306c-.0696.0697-.1524.1251-.2434.1628-.0911.0377-.1886.0572-.2872.0572-.0986 0-.1962-.0195-.2872-.0572-.0911-.0377-.1738-.0931-.2434-.1628L12 8.56029 5.03061 15.5306c-.14073.1407-.3316.2198-.53062.2198-.19902 0-.38989-.0791-.53063-.2198-.14073-.1407-.21979-.3316-.21979-.5306 0-.199.07906-.3899.21979-.5306l7.50004-7.50005c.0696-.06973.1523-.12505.2434-.16279.091-.03774.1886-.05717.2872-.05717.0986 0 .1961.01943.2872.05717.091.03774.1738.09306.2434.16279l7.5 7.50005c.0697.0696.1251.1523.1628.2434.0378.091.0572.1886.0572.2872 0 .0985-.0194.1961-.0572.2872-.0377.091-.0931.1737-.1628.2434Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'arrow' && variant === 'down'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__arrow',\n 'o-svg--' + size,\n extraClass ? 'o-svg__alert--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"m20.0306 9.53062-7.5 7.49998c-.0696.0697-.1524.1251-.2434.1628-.0911.0378-.1886.0572-.2872.0572-.0986 0-.1962-.0194-.2872-.0572-.0911-.0377-.1738-.0931-.2434-.1628L3.96936 9.53062c-.14073-.14074-.21979-.33161-.21979-.53063 0-.19902.07906-.3899.21979-.53063.14074-.14073.33161-.21979.53063-.21979.19902 0 .38989.07906.53062.21979L12 15.4397l6.9694-6.97034c.0696-.06968.1524-.12495.2434-.16267.0911-.03771.1886-.05712.2872-.05712.0985 0 .1961.01941.2872.05712.091.03772.1737.09299.2434.16267.0697.06969.125.15241.1627.24346.0377.09104.0571.18862.0571.28717 0 .09855-.0194.19613-.0571.28717-.0377.09105-.093.17377-.1627.24346Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'calendar'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__calendar',\n 'o-svg--' + size,\n extraClass ? 'o-svg__calendar--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M16.25 2.5h-1.875v-.625c0-.16576-.0658-.32473-.1831-.44194-.1172-.11721-.2761-.18306-.4419-.18306s-.3247.06585-.4419.18306c-.1173.11721-.1831.27618-.1831.44194V2.5h-6.25v-.625c0-.16576-.06585-.32473-.18306-.44194C6.57473 1.31585 6.41576 1.25 6.25 1.25c-.16576 0-.32473.06585-.44194.18306-.11721.11721-.18306.27618-.18306.44194V2.5H3.75c-.33152 0-.64946.1317-.88388.36612C2.6317 3.10054 2.5 3.41848 2.5 3.75v12.5c0 .3315.1317.6495.36612.8839.23442.2344.55236.3661.88388.3661h12.5c.3315 0 .6495-.1317.8839-.3661.2344-.2344.3661-.5524.3661-.8839V3.75c0-.33152-.1317-.64946-.3661-.88388C16.8995 2.6317 16.5815 2.5 16.25 2.5ZM5.625 3.75v.625c0 .16576.06585.32473.18306.44194C5.92527 4.93415 6.08424 5 6.25 5c.16576 0 .32473-.06585.44194-.18306.11721-.11721.18306-.27618.18306-.44194V3.75h6.25v.625c0 .16576.0658.32473.1831.44194.1172.11721.2761.18306.4419.18306s.3247-.06585.4419-.18306c.1173-.11721.1831-.27618.1831-.44194V3.75h1.875v2.5H3.75v-2.5h1.875Zm10.625 12.5H3.75V7.5h12.5v8.75Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'eye' && variant === 'open'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__eye',\n 'o-svg--' + size,\n extraClass ? 'o-svg__alert--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M19.3211 9.74688c-.0274-.06172-.6891-1.52969-2.1602-3.00079C15.2008 4.78594 12.725 3.75 9.99999 3.75c-2.725 0-5.20078 1.03594-7.16094 2.99609C1.36796 8.21719.703118 9.6875.678899 9.74688.643362 9.82681.625 9.91331.625 10.0008c0 .0875.018362.174.053899.2539.027344.0617.689061 1.5289 2.160151 3C4.79921 15.2141 7.27499 16.25 9.99999 16.25c2.72501 0 5.20081-1.0359 7.16091-2.9953 1.4711-1.4711 2.1328-2.9383 2.1602-3 .0355-.0799.0539-.1664.0539-.2539 0-.08749-.0184-.17399-.0539-.25392ZM9.99999 15c-2.40469 0-4.50547-.8742-6.24453-2.5977C3.0419 11.6927 2.43483 10.8836 1.95312 10c.48158-.88364 1.08867-1.69283 1.80234-2.40234C5.49452 5.87422 7.5953 5 9.99999 5c2.40471 0 4.50551.87422 6.24451 2.59766.715.70934 1.3234 1.51853 1.8063 2.40234-.5633 1.0516-3.0172 5-8.05081 5Zm0-8.75c-.74168 0-1.4667.21993-2.08339.63199-.61668.41205-1.09733.99772-1.38116 1.68295-.28382.68522-.35809 1.43926-.21339 2.16666.14469.7274.50184 1.3956 1.02629 1.9201.52445.5244 1.19263.8816 1.92006 1.0262.72743.1447 1.4814.0705 2.1667-.2134.6852-.2838 1.2708-.7644 1.6829-1.3811.4121-.6167.632-1.3417.632-2.0834-.001-.99424-.3965-1.94747-1.0995-2.65051-.703-.70304-1.6563-1.09846-2.65051-1.09949Zm0 6.25c-.49445 0-.9778-.1466-1.38892-.4213-.41113-.2747-.73156-.6652-.92078-1.122-.18922-.4568-.23872-.95947-.14226-1.44443.09646-.48495.33456-.93041.68419-1.28004.34964-.34963.79509-.58773 1.28005-.68419.48495-.09647.98763-.04696 1.44443.14226.4568.18922.8473.50965 1.122.92077.2747.41113.4213.89448.4213 1.38893 0 .663-.2634 1.2989-.7322 1.7678-.4689.4688-1.1048.7322-1.76781.7322Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'eye' && variant === 'close'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__eye',\n 'o-svg--' + size,\n extraClass ? 'o-svg__alert--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M4.21249 2.70468c-.05488-.06187-.1215-.11223-.196-.14816-.07449-.03594-.15538-.05673-.23796-.06117-.08259-.00444-.16524.00755-.24316.03528-.07791.02774-.14955.07066-.21076.12628-.06121.05563-.11077.12285-.1458.19776-.03504.07492-.05486.15605-.05831.23869-.00346.08263.00953.16513.03819.24271.02867.07758.07245.1487.1288.20923l1.50313 1.65391C1.95312 6.94062.732805 9.62499.678899 9.74687.643362 9.8268.625 9.9133.625 10.0008c0 .0874.018362.1739.053899.2539.027344.0617.689061 1.5289 2.160151 3C4.79921 15.2141 7.27499 16.25 9.99999 16.25c1.40051.008 2.78681-.2804 4.06801-.8461l1.7187 1.8914c.0549.0619.1215.1122.196.1482.0745.0359.1554.0567.238.0611.0826.0045.1652-.0075.2431-.0352.0779-.0278.1496-.0707.2108-.1263.0612-.0557.1108-.1229.1458-.1978.035-.0749.0549-.156.0583-.2387.0035-.0826-.0095-.1651-.0382-.2427-.0287-.0776-.0724-.1487-.1288-.2092L4.21249 2.70468Zm3.69766 5.925 3.25545 3.58202c-.4902.2579-1.0522.3457-1.59777.2496-.54554-.0962-1.0437-.3707-1.41626-.7807-.37256-.4099-.59843-.932-.64212-1.4842-.0437-.5522.09725-1.10329.4007-1.56672ZM9.99999 15c-2.40469 0-4.50547-.8742-6.24453-2.5977-.71382-.7094-1.32092-1.5186-1.80234-2.40231.3664-.68672 1.53593-2.60859 3.69922-3.85781l1.40625 1.54297c-.54443.69727-.82482 1.56456-.79162 2.44855.0332.884.37786 1.7278.97305 2.3823.59519.6545 1.40259 1.0775 2.2795 1.1942.87688.1167 1.76688-.0803 2.51248-.5563l1.1508 1.2656c-1.0156.3897-2.095.5865-3.18281.5805Zm.46871-7.45548c-.1628-.03108-.3067-.12558-.3998-.26272-.09322-.13713-.12811-.30567-.09703-.46853.03103-.16286.12563-.3067.26273-.39988.1371-.09318.3057-.12807.4685-.09699.7966.15443 1.5219.56222 2.0677 1.16257.5459.60034.8831 1.36105.9612 2.16868.0155.16503-.0353.32944-.1411.45705-.1058.1276-.2579.208-.4229.2234-.0196.0012-.0391.0012-.0586 0-.1562.0007-.307-.0572-.4227-.1621-.1157-.105-.1879-.24952-.2023-.40507-.0526-.53719-.2772-1.04306-.6404-1.44239-.3631-.39933-.8455-.67079-1.3753-.77402Zm8.85 2.71018c-.0328.0734-.8242 1.8258-2.6062 3.4219-.0609.0562-.1324.0998-.2103.1282-.0779.0284-.1607.041-.2435.0371-.0828-.004-.164-.0243-.2389-.0599-.0749-.0357-.1419-.0858-.1972-.1476-.0553-.0618-.0977-.1339-.1249-.2123-.0271-.0783-.0384-.1613-.0332-.244.0053-.0828.0269-.1637.0637-.238.0368-.0743.088-.1405.1507-.1948.8743-.7854 1.6087-1.7138 2.1719-2.74531-.4825-.88455-1.0909-1.69431-1.8063-2.4039-1.739-1.72188-3.8398-2.5961-6.24451-2.5961-.50667-.00062-1.01254.04041-1.5125.12266-.0813.01438-.16465.0125-.24522-.00551-.08057-.01802-.15678-.05182-.22422-.09946-.06743-.04763-.12476-.10816-.16867-.17808-.04391-.06992-.07354-.14784-.08716-.22927-.01362-.08143-.01098-.16476.00778-.24516.01877-.08041.05327-.1563.10153-.22329s.10932-.12375.17964-.16702c.07032-.04326.14852-.07216.23007-.08502.5681-.09381 1.14296-.14058 1.71875-.13985 2.72501 0 5.20081 1.03594 7.16091 2.9961 1.4711 1.47109 2.1328 2.93906 2.1602 3.00078.0355.07993.0539.16643.0539.25393 0 .0874-.0184.1739-.0539.2539h-.0024Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'less'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__less',\n 'o-svg--' + size,\n extraClass ? 'o-svg__less--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n>\n <path\n d=\"M14 8c0 .13261-.0527.25979-.1464.35355-.0938.09377-.221.14645-.3536.14645h-11c-.13261 0-.25979-.05268-.35355-.14645C2.05268 8.25979 2 8.13261 2 8c0-.13261.05268-.25979.14645-.35355C2.24021 7.55268 2.36739 7.5 2.5 7.5h11c.1326 0 .2598.05268.3536.14645C13.9473 7.74021 14 7.86739 14 8Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'plus'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__plus',\n 'o-svg--' + size,\n extraClass ? 'o-svg__plus--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M17.5 10c0 .1658-.0658.3247-.1831.4419-.1172.1173-.2761.1831-.4419.1831h-6.25v6.25c0 .1658-.0658.3247-.1831.4419-.1172.1173-.2761.1831-.4419.1831-.16576 0-.32473-.0658-.44194-.1831-.11721-.1172-.18306-.2761-.18306-.4419v-6.25h-6.25c-.16576 0-.32473-.0658-.44194-.1831C2.56585 10.3247 2.5 10.1658 2.5 10c0-.16576.06585-.32473.18306-.44194.11721-.11721.27618-.18306.44194-.18306h6.25v-6.25c0-.16576.06585-.32473.18306-.44194C9.67527 2.56585 9.83424 2.5 10 2.5c.1658 0 .3247.06585.4419.18306.1173.11721.1831.27618.1831.44194v6.25h6.25c.1658 0 .3247.06585.4419.18306.1173.11721.1831.27618.1831.44194Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'search'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__search',\n 'o-svg--' + size,\n extraClass ? 'o-svg__search--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"m17.9422 17.0578-3.9117-3.9109c1.1337-1.3612 1.6991-3.1071 1.5784-4.87446-.1206-1.76738-.918-3.42021-2.2263-4.61465-1.3082-1.19445-3.0266-1.83853-4.79767-1.79828-1.77105.04025-3.45839.76174-4.71104 2.01438-1.25264 1.25264-1.97413 2.93999-2.01438 4.71103-.04025 1.77108.60384 3.48948 1.79828 4.79768 1.19444 1.3083 2.84727 2.1057 4.61466 2.2263 1.76735.1207 3.51325-.4447 4.87445-1.5784l3.9109 3.9117c.0581.0581.127.1041.2029.1355.0759.0315.1572.0476.2393.0476s.1634-.0161.2393-.0476c.0759-.0314.1448-.0774.2029-.1355.0581-.0581.1041-.127.1355-.2029.0315-.0759.0477-.1572.0477-.2393s-.0162-.1634-.0477-.2393c-.0314-.0759-.0774-.1448-.1355-.2029ZM3.125 8.75c0-1.11252.3299-2.20006.94799-3.12509.61808-.92502 1.49658-1.64599 2.52442-2.07174 1.02783-.42574 2.15883-.53713 3.24998-.32009 1.09111.21704 2.09341.75277 2.88011 1.53944.7866.78667 1.3224 1.78895 1.5394 2.88009.2171 1.09115.1057 2.22214-.3201 3.24999-.4257 1.0278-1.1467 1.9063-2.0717 2.5244-.925.6181-2.01258.948-3.1251.948-1.49133-.0017-2.92111-.5948-3.97565-1.6494C3.71982 11.6711 3.12666 10.2413 3.125 8.75Z\"\n fill=\"#676D6C\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'spinner'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__spinner',\n extraClass ? 'o-svg__spinner--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M9.0145 1.80949c.20184.66019-.16972 1.359-.82991 1.56084-1.11797.3418-2.12799.96809-2.93117 1.81753-.80318.84945-1.37198 1.89294-1.65069 3.02827s-.25778 2.32357.06074 3.44837c.31853 1.1248.92372 2.1476 1.75632 2.9683.8326.8206 1.86405 1.4109 2.99336 1.7131 1.1293.3023 2.31775.306 3.44895.0109 1.1311-.2951 2.1663-.879 3.004-1.6944.8378-.8154 1.4494-1.8343 1.7749-2.9571.1923-.6631.8857-1.0447 1.5487-.8525.6631.1923 1.0447.8857.8524 1.5487-.4461 1.5387-1.2843 2.935-2.4323 4.0524-1.148 1.1174-2.5665 1.9175-4.1166 2.3219-1.5502.4044-3.17876.3993-4.72633-.0148-1.54756-.4142-2.96104-1.2231-4.10201-2.3477-1.14097-1.1246-1.97031-2.5262-2.4068-4.0676-.436495-1.5414-.465178-3.16977-.08324-4.7256.38194-1.55582 1.1614-2.98578 2.26205-4.14984C4.53753 2.3062 5.92164 1.44796 7.45366.979572c.66019-.20184 1.359.169728 1.56084.829918Z\"\n fill=\"#fff\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'success'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__success',\n 'o-svg--' + size,\n extraClass ? 'o-svg__alert--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M13.5672 7.68281c.0581.05805.1042.12698.1357.20285.0314.07588.0476.15721.0476.23934 0 .08213-.0162.16346-.0476.23934-.0315.07587-.0776.1448-.1357.20285L9.19219 12.9422c-.05804.0581-.12697.1042-.20285.1357-.07587.0314-.1572.0476-.23934.0476-.08213 0-.16346-.0162-.23933-.0476-.07588-.0315-.14481-.0776-.20285-.1357l-1.875-1.875c-.11728-.1173-.18316-.2763-.18316-.4422s.06588-.3249.18316-.4422c.11727-.1173.27633-.18315.44218-.18315.16586 0 .32492.06585.44219.18315L8.75 11.6164l3.9328-3.93359c.0581-.05811.127-.10421.2029-.13566.0758-.03145.1572-.04764.2393-.04764s.1635.01619.2393.04764c.0759.03145.1448.07755.2029.13566ZM18.125 10c0 1.607-.4765 3.1779-1.3693 4.514-.8928 1.3362-2.1617 2.3776-3.6464 2.9925-1.4846.615-3.11831.7759-4.6944.4624-1.5761-.3135-3.02384-1.0874-4.16014-2.2237-1.1363-1.1363-1.91013-2.584-2.22364-4.1601-.3135-1.5761-.1526-3.20975.46236-4.6944.61496-1.48465 1.65637-2.7536 2.99252-3.64639C6.82214 2.35152 8.39303 1.875 10 1.875c2.1542.00227 4.2195.85903 5.7427 2.38227C17.266 5.78051 18.1227 7.84581 18.125 10Zm-1.25 0c0-1.35975-.4032-2.68896-1.1586-3.81955-.7555-1.13058-1.8292-2.01177-3.0854-2.53212-1.2563-.52035-2.63862-.6565-3.97224-.39123-1.33362.26527-2.55863.92006-3.52012 1.88154-.96148.96149-1.61626 2.18649-1.88154 3.52011-.26527 1.33362-.12912 2.71595.39123 3.97215.52035 1.2563 1.40154 2.33 2.53213 3.0855C7.31105 16.4718 8.64026 16.875 10 16.875c1.8227-.0021 3.5702-.7271 4.8591-2.0159 1.2888-1.2889 2.0138-3.0364 2.0159-4.8591Z\"\n fill=\"#35785B\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'test'\"\n fill=\"none\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__test',\n extraClass ? 'o-svg__test--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 18 18\"\n>\n <path\n d=\"M16.5 0h-15C1.10218 0 .720644.158035.43934.43934.158035.720644 0 1.10218 0 1.5v15c0 .3978.158035.7794.43934 1.0607C.720644 17.842 1.10218 18 1.5 18h15c.3978 0 .7794-.158 1.0607-.4393S18 16.8978 18 16.5v-15c0-.39782-.158-.779356-.4393-1.06066C17.2794.158035 16.8978 0 16.5 0Zm-15 16.5V2.56031L15.4397 16.5H1.5Zm1.06031-15H16.5v13.9406L2.56031 1.5Z\"\n fill=\"#217870\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'thumb'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__thumb',\n 'o-svg--' + size,\n extraClass ? 'o-svg__thumb--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"M19.5 3h-15c-.39782 0-.77936.15804-1.06066.43934C3.15804 3.72064 3 4.10218 3 4.5v15c0 .3978.15804.7794.43934 1.0607S4.10218 21 4.5 21h15c.3978 0 .7794-.158 1.0607-.4393S21 19.8978 21 19.5v-15c0-.39782-.158-.77936-.4393-1.06066C20.2794 3.15804 19.8978 3 19.5 3Zm-15 1.5h15v7.2544l-2.3147-2.31565c-.2813-.28109-.6626-.43899-1.0603-.43899-.3977 0-.779.1579-1.0603.43899L5.00344 19.5H4.5v-15Zm15 15H7.125l9-9 3.375 3.375V19.5ZM9 11.25c.44501 0 .88002-.132 1.25-.3792.37-.2472.6584-.5986.8287-1.00976.1703-.41114.2149-.86354.1281-1.29999-.0868-.43646-.3011-.83737-.6158-1.15204-.3147-.31467-.71559-.52896-1.15205-.61578-.43645-.08681-.88885-.04226-1.29999.12804-.41113.1703-.76253.45869-1.00977.8287C6.88196 8.11998 6.75 8.55499 6.75 9c0 .59674.23705 1.169.65901 1.591.42196.4219.99425.659 1.59099.659Zm0-3c.14834 0 .29334.04399.41668.1264.12333.08241.21946.19954.27623.33659.05677.13704.07162.28784.04268.43333-.02894.14548-.10037.27912-.20526.38401-.10489.10489-.23853.17632-.38401.20526-.14549.02894-.29629.01409-.43333-.04268-.13705-.05677-.25418-.1529-.33659-.27623C8.29399 9.29334 8.25 9.14834 8.25 9c0-.19891.07902-.38968.21967-.53033C8.61032 8.32902 8.80109 8.25 9 8.25Z\"\n fill=\"#535858\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'user'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__user',\n 'o-svg--' + size,\n extraClass ? 'o-svg__user--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"M21.6488 19.8751c-1.4279-2.4684-3.6282-4.2384-6.196-5.0775 1.2702-.7561 2.257-1.9083 2.809-3.2796.5519-1.3712.6385-2.88576.2464-4.31099-.3921-1.42523-1.2412-2.68234-2.417-3.57828-1.1757-.89594-2.613-1.38117-4.0912-1.38117-1.4782 0-2.91549.48523-4.09122 1.38117-1.17572.89594-2.02484 2.15305-2.41695 3.57828-.39212 1.42523-.30554 2.93979.24642 4.31099.55196 1.3713 1.53879 2.5235 2.80895 3.2796-2.56782.8381-4.76813 2.6081-6.19594 5.0775-.05236.0854-.08709.1804-.10214.2794-.01505.099-.01012.2.01451.2971.02462.0971.06844.1883.12887.2681.06043.0799.13624.1469.22297.197.08673.05.18261.0823.28198.0947.09938.0124.20025.0049.29664-.0223.0964-.0272.18638-.0734.26463-.1359.07825-.0625.14318-.1401.19098-.2281 1.76625-3.0525 4.88812-4.875 8.3503-4.875 3.4622 0 6.5841 1.8225 8.3503 4.875.0478.088.1128.1656.191.2281.0783.0625.1682.1087.2646.1359.0964.0272.1973.0347.2967.0223.0993-.0124.1952-.0447.2819-.0947.0868-.0501.1626-.1171.223-.197.0604-.0798.1043-.171.1289-.2681.0246-.0971.0296-.1981.0145-.2971-.0151-.099-.0498-.194-.1021-.2794ZM6.75001 9.00011c0-1.03835.30791-2.05339.88478-2.91674.57688-.86336 1.39682-1.53627 2.35613-1.93363.95928-.39736 2.01488-.50133 3.03328-.29875 1.0184.20257 1.9539.70258 2.6881 1.43681.7342.73422 1.2343 1.66968 1.4368 2.68809.2026 1.0184.0986 2.07401-.2987 3.03331-.3974.9593-1.0703 1.7792-1.9336 2.3561-.8634.5769-1.8784.8848-2.9168.8848-1.3919-.0015-2.72641-.5551-3.71066-1.5393-.98424-.9843-1.53784-2.3188-1.53933-3.71069Z\"\n fill=\"#535858\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'info'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__info',\n 'o-svg--' + size,\n extraClass ? 'o-svg__info--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M10 1.87601c-1.60697 0-3.17786.47652-4.514 1.36931-1.33615.89278-2.37756 2.16173-2.99252 3.64638-.61496 1.48465-.77586 3.1183-.46236 4.6944.31351 1.5761 1.08734 3.0238 2.22364 4.1602 1.1363 1.1363 2.58404 1.9101 4.16014 2.2236 1.57609.3135 3.2098.1526 4.6944-.4624 1.4847-.6149 2.7536-1.6563 3.6464-2.9925.8928-1.3361 1.3693-2.907 1.3693-4.514-.0023-2.15418-.859-4.21948-2.3823-5.74272-1.5232-1.52324-3.5885-2.38-5.7427-2.38227ZM10 16.876c-1.35974 0-2.68895-.4032-3.81954-1.1586-1.13059-.7555-2.01178-1.8292-2.53213-3.0854-.52035-1.2563-.6565-2.63862-.39123-3.97224.26528-1.33362.92006-2.55863 1.88154-3.52011.96149-.96149 2.1865-1.61627 3.52012-1.88154 1.33362-.26528 2.71594-.12913 3.97224.39123 1.2562.52035 2.3299 1.40153 3.0854 2.53212.7554 1.13059 1.1586 2.4598 1.1586 3.81954-.0021 1.8227-.7271 3.5702-2.0159 4.8591-1.2889 1.2888-3.0364 2.0138-4.8591 2.0159Zm1.25-3.125c0 .1658-.0658.3247-.1831.4419-.1172.1173-.2761.1831-.4419.1831-.3315 0-.64946-.1317-.88388-.3661-.23442-.2344-.36612-.5524-.36612-.8839v-3.125c-.16576 0-.32473-.06584-.44194-.18305-.11721-.11721-.18306-.27618-.18306-.44194 0-.16576.06585-.32473.18306-.44194.11721-.11721.27618-.18306.44194-.18306.33152 0 .6495.13169.8839.36611.2344.23442.3661.55237.3661.88388v3.125c.1658 0 .3247.0659.4419.1831.1173.1172.1831.2761.1831.4419Zm-2.5-7.18749c0-.18542.05499-.36668.158-.52085.10301-.15417.24943-.27433.42074-.34529.1713-.07096.3598-.08952.54166-.05335.1819.03617.3489.12546.48.25657.1311.13112.2204.29816.2566.48002.0362.18186.0176.37036-.0534.54166-.0709.17131-.1911.31773-.3452.42074-.1542.10301-.33548.158-.5209.158-.24864 0-.48709-.09877-.66291-.27459C8.84878 7.0506 8.75 6.81215 8.75 6.56351Z\"\n fill=\"#27749A\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'warning'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__warning',\n 'o-svg--' + size,\n extraClass ? 'o-svg__warning--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M10 1.87601c-1.60697 0-3.17786.47652-4.514 1.36931-1.33615.89278-2.37756 2.16173-2.99252 3.64638-.61496 1.48465-.77586 3.1183-.46236 4.6944.31351 1.5761 1.08734 3.0238 2.22364 4.1602 1.1363 1.1363 2.58404 1.9101 4.16014 2.2236 1.57609.3135 3.2098.1526 4.6944-.4624 1.4847-.6149 2.7536-1.6563 3.6464-2.9925.8928-1.3361 1.3693-2.907 1.3693-4.514-.0023-2.15418-.859-4.21948-2.3823-5.74272-1.5232-1.52324-3.5885-2.38-5.7427-2.38227ZM10 16.876c-1.35974 0-2.68895-.4032-3.81954-1.1586-1.13059-.7555-2.01178-1.8292-2.53213-3.0854-.52035-1.2563-.6565-2.63862-.39123-3.97224.26528-1.33362.92006-2.55863 1.88154-3.52011.96149-.96149 2.1865-1.61627 3.52012-1.88154 1.33362-.26528 2.71594-.12913 3.97224.39123 1.2562.52035 2.3299 1.40153 3.0854 2.53212.7554 1.13059 1.1586 2.4598 1.1586 3.81954-.0021 1.8227-.7271 3.5702-2.0159 4.8591-1.2889 1.2888-3.0364 2.0138-4.8591 2.0159Zm-.625-6.25V6.25101c0-.16576.06585-.32473.18306-.44194.11721-.11721.27618-.18306.44194-.18306.1658 0 .3247.06585.4419.18306.1173.11721.1831.27618.1831.44194V10.626c0 .1658-.0658.3247-.1831.4419-.1172.1173-.2761.1831-.4419.1831-.16576 0-.32473-.0658-.44194-.1831-.11721-.1172-.18306-.2761-.18306-.4419Zm1.5625 2.8125c0 .1854-.055.3667-.158.5209-.103.1541-.2494.2743-.4207.3452-.1713.071-.35984.0896-.54169.0534-.18186-.0362-.34891-.1255-.48002-.2566s-.2204-.2981-.25657-.48c-.03618-.1819-.01761-.3704.05335-.5417.07095-.1713.19112-.3177.34529-.4207.15417-.103.33542-.158.52084-.158.2486 0 .4871.0988.6629.2746.1758.1758.2746.4143.2746.6629Z\"\n fill=\"#866600\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'upload'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__upload',\n 'o-svg--' + size,\n extraClass ? 'o-svg__upload--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M17.5 11.25v5c0 .1658-.0658.3247-.1831.4419-.1172.1173-.2761.1831-.4419.1831H3.125c-.16576 0-.32473-.0658-.44194-.1831C2.56585 16.5747 2.5 16.4158 2.5 16.25v-5c0-.1658.06585-.3247.18306-.4419.11721-.1172.27618-.1831.44194-.1831.16576 0 .32473.0659.44194.1831.11721.1172.18306.2761.18306.4419v4.375h12.5V11.25c0-.1658.0658-.3247.1831-.4419.1172-.1172.2761-.1831.4419-.1831s.3247.0659.4419.1831c.1173.1172.1831.2761.1831.4419ZM7.31719 6.06719 9.375 4.0086V11.25c0 .1658.06585.3247.18306.4419.11721.1173.27618.1831.44194.1831.1658 0 .3247-.0658.4419-.1831.1173-.1172.1831-.2761.1831-.4419V4.0086l2.0578 2.05859c.1173.11728.2763.18316.4422.18316s.3249-.06588.4422-.18316c.1173-.11727.1831-.27633.1831-.44219 0-.16585-.0658-.32491-.1831-.44218l-3.125-3.125c-.0581-.05811-.127-.10421-.2029-.13567-.0758-.03145-.1572-.04764-.2393-.04764-.08213 0-.16346.01619-.23934.04764-.07587.03146-.1448.07756-.20285.13567l-3.125 3.125c-.11727.11727-.18316.27633-.18316.44218 0 .16586.06589.32492.18316.44219.11728.11728.27634.18316.44219.18316.16585 0 .32491-.06588.44219-.18316Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'card'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__card',\n 'o-svg--' + size,\n extraClass ? 'o-svg__card--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 30 20\"\n>\n <path\n d=\"M26.0526 0H3.94737C1.7673 0 0 1.86548 0 4.16667V15.8333C0 18.1345 1.7673 20 3.94737 20H26.0526C28.2327 20 30 18.1345 30 15.8333V4.16667C30 1.86548 28.2327 0 26.0526 0Z\"\n fill=\"#4486E4\"\n />\n <path d=\"M30 4.16669H0v3h30v-3Z\" fill=\"#0F3760\" />\n <path\n d=\"M21.5 16h3c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5h-3c-.8284 0-1.5.6716-1.5 1.5s.6716 1.5 1.5 1.5Z\"\n fill=\"#D4E3F4\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'card-disabled'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__card-disabled',\n 'o-svg--' + size,\n extraClass ? 'o-svg__card-disabled--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 30 20\"\n>\n <path\n d=\"M26.0526 0H3.94737C1.7673 0 0 1.86548 0 4.16667V15.8333C0 18.1345 1.7673 20 3.94737 20H26.0526C28.2327 20 30 18.1345 30 15.8333V4.16667C30 1.86548 28.2327 0 26.0526 0Z\"\n fill=\"#c7c7c7\"\n />\n <path d=\"M30 4.16669H0v3h30v-3Z\" fill=\"#a7a7a7\" />\n <path\n d=\"M21.5 16h3c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5h-3c-.8284 0-1.5.6716-1.5 1.5s.6716 1.5 1.5 1.5Z\"\n fill=\"#D4E3F4\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'close'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__close',\n 'o-svg--' + size,\n extraClass ? 'o-svg__close--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M16.0672 15.1828c.058.0581.1041.127.1355.2029.0315.0758.0476.1572.0476.2393s-.0161.1634-.0476.2393c-.0314.0759-.0775.1448-.1355.2029-.0581.058-.127.1041-.2029.1355-.0759.0315-.1572.0476-.2393.0476s-.1635-.0161-.2393-.0476c-.0759-.0314-.1448-.0775-.2029-.1355l-5.18282-5.1836-5.18281 5.1836c-.11728.1172-.27634.1831-.44219.1831-.16585 0-.32491-.0659-.44219-.1831-.11727-.1173-.18316-.2764-.18316-.4422 0-.1659.06589-.3249.18316-.4422l5.1836-5.18282-5.1836-5.18281c-.11727-.11728-.18316-.27634-.18316-.44219 0-.16585.06589-.32491.18316-.44219.11728-.11727.27634-.18316.44219-.18316.16585 0 .32491.06589.44219.18316l5.18281 5.1836 5.18282-5.1836c.1173-.11727.2763-.18316.4422-.18316.1658 0 .3249.06589.4422.18316.1172.11728.1831.27634.1831.44219 0 .16585-.0659.32491-.1831.44219l-5.1836 5.18281 5.1836 5.18282Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'close-white'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__close',\n 'o-svg--' + size,\n extraClass ? 'o-svg__close--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M16.0672 15.1828c.058.0581.1041.127.1355.2029.0315.0758.0476.1572.0476.2393s-.0161.1634-.0476.2393c-.0314.0759-.0775.1448-.1355.2029-.0581.058-.127.1041-.2029.1355-.0759.0315-.1572.0476-.2393.0476s-.1635-.0161-.2393-.0476c-.0759-.0314-.1448-.0775-.2029-.1355l-5.18282-5.1836-5.18281 5.1836c-.11728.1172-.27634.1831-.44219.1831-.16585 0-.32491-.0659-.44219-.1831-.11727-.1173-.18316-.2764-.18316-.4422 0-.1659.06589-.3249.18316-.4422l5.1836-5.18282-5.1836-5.18281c-.11727-.11728-.18316-.27634-.18316-.44219 0-.16585.06589-.32491.18316-.44219.11728-.11727.27634-.18316.44219-.18316.16585 0 .32491.06589.44219.18316l5.18281 5.1836 5.18282-5.1836c.1173-.11727.2763-.18316.4422-.18316.1658 0 .3249.06589.4422.18316.1172.11728.1831.27634.1831.44219 0 .16585-.0659.32491-.1831.44219l-5.1836 5.18281 5.1836 5.18282Z\"\n fill=\"#ffffff\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'close-disabled'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__close',\n 'o-svg--' + size,\n extraClass ? 'o-svg__close--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n>\n <path\n d=\"M12.8537 12.1463c.0465.0464.0833.1016.1085.1623.0251.0607.0381.1257.0381.1914 0 .0657-.013.1308-.0381.1915-.0252.0607-.062.1158-.1085.1623-.0464.0464-.1016.0833-.1623.1084-.0607.0252-.1257.0381-.1914.0381-.0657 0-.1308-.0129-.1915-.0381-.0607-.0251-.1158-.062-.1623-.1084L7.99997 8.70691 3.85372 12.8538c-.09382.0938-.22107.1465-.35375.1465-.13268 0-.25993-.0527-.35375-.1465-.09382-.0938-.14653-.2211-.14653-.3538 0-.1326.05271-.2599.14653-.3537L7.2931 8.00003 3.14622 3.85378c-.09382-.09382-.14653-.22106-.14653-.35375 0-.13268.05271-.25993.14653-.35375.09382-.09382.22107-.14652.35375-.14652.13268 0 .25993.0527.35375.14652l4.14625 4.14688 4.14623-4.14688c.0938-.09382.2211-.14652.3538-.14652s.2599.0527.3537.14652c.0938.09382.1466.22107.1466.35375 0 .13269-.0528.25993-.1466.35375L8.70685 8.00003l4.14685 4.14627Z\"\n fill=\"#A6B0AF\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'check-circle'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__check-circle',\n 'o-svg--' + size,\n extraClass ? 'o-svg__check-circle--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"M12 2.25c-1.9284 0-3.81343.57183-5.41681 1.64317-1.60337 1.07134-2.85306 2.59409-3.59101 4.37567-.73796 1.78156-.93104 3.74196-.55483 5.63326.3762 1.8913 1.3048 3.6286 2.66836 4.9922 1.36357 1.3636 3.10085 2.2922 4.99219 2.6684 1.8913.3762 3.8517.1831 5.6333-.5549 1.7815-.7379 3.3043-1.9876 4.3756-3.591C21.1782 15.8134 21.75 13.9284 21.75 12c-.0027-2.58502-1.0308-5.06339-2.8587-6.89128C17.0634 3.28084 14.585 2.25273 12 2.25Zm4.2806 8.0306-5.25 5.25c-.0696.0698-.1523.1251-.2434.1628-.091.0378-.1886.0572-.2872.0572-.0986 0-.1962-.0194-.2872-.0572-.091-.0377-.1738-.093-.24342-.1628l-2.25-2.25c-.14073-.1407-.21979-.3316-.21979-.5306 0-.199.07906-.3899.21979-.5306.14073-.1408.3316-.2198.53062-.2198.19903 0 .3899.079.53063.2198L10.5 13.9397l4.7194-4.72033c.0697-.06968.1524-.12495.2434-.16267.0911-.03771.1887-.05712.2872-.05712.0986 0 .1961.01941.2872.05712.091.03772.1737.09299.2434.16267.0697.06969.125.15241.1627.24346.0377.09104.0571.18862.0571.28717 0 .09855-.0194.19613-.0571.2872-.0377.091-.093.1737-.1627.2434Z\"\n fill=\"#217870\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'elipsis'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__elipsis',\n 'o-svg--' + size,\n extraClass ? 'o-svg__elipsis--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 11 20\"\n>\n <path\n d=\"M1.162 15.296c.672 0 1.162-.504 1.162-1.148 0-.63-.49-1.148-1.162-1.148C.49 13 0 13.518 0 14.148c0 .644.49 1.148 1.162 1.148ZM5.22255 15.296c.672 0 1.162-.504 1.162-1.148 0-.63-.49-1.148-1.162-1.148-.672 0-1.162.518-1.162 1.148 0 .644.49 1.148 1.162 1.148ZM9.28309 15.296c.672 0 1.16201-.504 1.16201-1.148 0-.63-.49001-1.148-1.16201-1.148-.672 0-1.162.518-1.162 1.148 0 .644.49 1.148 1.162 1.148Z\"\n fill=\"#535858\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'apple'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__apple',\n 'o-svg--' + size,\n extraClass ? 'o-svg__elipsis--' + extraClass : ''\n ]\"\n viewBox=\"0 0 25 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M20.8578 8.65962C20.7331 8.75412 18.5319 9.96595 18.5319 12.6605C18.5319 15.7772 21.3328 16.8798 21.4167 16.9071C21.4038 16.9743 20.9717 18.4172 19.9399 19.8873C19.0199 21.1811 18.059 22.4727 16.5972 22.4727C15.1355 22.4727 14.7593 21.6431 13.0719 21.6431C11.4274 21.6431 10.8427 22.5 9.50567 22.5C8.16861 22.5 7.23567 21.3029 6.16302 19.8327C4.92054 18.1064 3.91667 15.4244 3.91667 12.8789C3.91667 8.79613 6.63378 6.63081 9.3079 6.63081C10.7288 6.63081 11.9132 7.5423 12.8053 7.5423C13.6544 7.5423 14.9786 6.57621 16.5951 6.57621C17.2077 6.57621 19.4089 6.63081 20.8578 8.65962ZM15.8277 4.84773C16.4962 4.07276 16.9691 2.99745 16.9691 1.92214C16.9691 1.77303 16.9562 1.62181 16.9283 1.5C15.8406 1.5399 14.5465 2.20777 13.7662 3.09196C13.1536 3.77243 12.5818 4.84773 12.5818 5.93774C12.5818 6.10156 12.6097 6.26538 12.6226 6.31788C12.6914 6.33048 12.8032 6.34518 12.915 6.34518C13.8909 6.34518 15.1183 5.70672 15.8277 4.84773Z\"\n fill=\"black\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'google'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__google',\n 'o-svg--' + size,\n extraClass ? 'o-svg__elipsis--' + extraClass : ''\n ]\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <mask\n id=\"mask0_2162_5756\"\n style=\"mask-type: luminance\"\n maskUnits=\"userSpaceOnUse\"\n x=\"1\"\n y=\"1\"\n width=\"22\"\n height=\"22\"\n >\n <path\n d=\"M22.2983 10.052H12.2237V14.0889H18.0126C17.9196 14.6602 17.7106 15.2223 17.4046 15.7347C17.054 16.3219 16.6206 16.7689 16.1763 17.1093C14.8456 18.1291 13.2941 18.3376 12.2166 18.3376C9.49479 18.3376 7.16915 16.5784 6.26885 14.188C6.23252 14.1013 6.20839 14.0117 6.17901 13.9231C5.98007 13.3147 5.87136 12.6704 5.87136 12.0007C5.87136 11.3037 5.98908 10.6365 6.2037 10.0064C7.05029 7.52124 9.42836 5.66505 12.2186 5.66505C12.7798 5.66505 13.3203 5.73186 13.8328 5.8651C15.0041 6.16962 15.8326 6.76936 16.3403 7.24375L19.4036 4.24379C17.5402 2.53527 15.1111 1.5 12.2135 1.5C9.89707 1.49995 7.75844 2.22168 6.0059 3.44144C4.58465 4.43062 3.41902 5.75502 2.63236 7.29316C1.90065 8.71933 1.5 10.2998 1.5 11.9991C1.5 13.6985 1.90127 15.2954 2.63297 16.7083V16.7179C3.40584 18.2179 4.53603 19.5095 5.90965 20.4942C7.10966 21.3544 9.2614 22.5 12.2135 22.5C13.9112 22.5 15.4158 22.1939 16.7427 21.6203C17.7 21.2065 18.5481 20.6668 19.316 19.9732C20.3306 19.0566 21.1252 17.923 21.6675 16.6187C22.2099 15.3144 22.5 13.8394 22.5 12.2403C22.5 11.4956 22.4252 10.7393 22.2983 10.0519V10.052Z\"\n fill=\"white\"\n />\n </mask>\n <g mask=\"url(#mask0_2162_5756)\">\n <g filter=\"url(#filter0_f_2162_5756)\">\n <path\n d=\"M1.34552 12.0704C1.35666 13.743 1.83324 15.4687 2.55464 16.8617V16.8713C3.07589 17.883 3.78828 18.6821 4.59968 19.474L9.50033 17.6858C8.57316 17.2148 8.43168 16.9263 7.76705 16.3997C7.08785 15.7148 6.58164 14.9285 6.26639 14.0066H6.25369L6.26639 13.997C6.059 13.3882 6.03854 12.742 6.03089 12.0704H1.34552Z\"\n fill=\"url(#paint0_radial_2162_5756)\"\n />\n </g>\n <g filter=\"url(#filter1_f_2162_5756)\">\n <path\n d=\"M12.2238 1.42365C11.7394 3.12534 11.9246 4.77944 12.2238 5.74187C12.7831 5.74229 13.3219 5.80896 13.8329 5.94179C15.0042 6.2463 15.8326 6.84606 16.3403 7.32045L19.482 4.24385C17.6208 2.53737 15.381 1.42633 12.2238 1.42365Z\"\n fill=\"url(#paint1_radial_2162_5756)\"\n />\n </g>\n <g filter=\"url(#filter2_f_2162_5756)\">\n <path\n d=\"M12.2132 1.41019C9.83733 1.41014 7.6438 2.1504 5.84628 3.40147C5.17885 3.86599 4.56637 4.40259 4.02099 4.9993C3.87812 6.33968 5.09053 7.98715 7.49146 7.97351C8.65638 6.61844 10.3793 5.74172 12.2969 5.74172C12.2986 5.74172 12.3003 5.74186 12.302 5.74187L12.2237 1.41049C12.2202 1.41049 12.2168 1.41019 12.2132 1.41019Z\"\n fill=\"url(#paint2_radial_2162_5756)\"\n />\n </g>\n <g filter=\"url(#filter3_f_2162_5756)\">\n <path\n d=\"M20.055 12.5554L17.9343 14.0123C17.8413 14.5836 17.6322 15.1456 17.3262 15.6581C16.9756 16.2453 16.5422 16.6923 16.0979 17.0327C14.7699 18.0503 13.2226 18.2599 12.1454 18.2607C11.032 20.157 10.8368 21.1069 12.2237 22.6373C13.9398 22.6361 15.4613 22.3263 16.8033 21.7462C17.7733 21.3268 18.6328 20.7799 19.411 20.0769C20.4392 19.1481 21.2446 17.9992 21.7942 16.6774C22.3439 15.3556 22.6378 13.8609 22.6378 12.2404L20.055 12.5554Z\"\n fill=\"url(#paint3_radial_2162_5756)\"\n />\n </g>\n <g filter=\"url(#filter4_f_2162_5756)\">\n <path\n d=\"M12.0671 9.89865V14.2423H22.2701C22.3598 13.6474 22.6566 12.8777 22.6566 12.2404C22.6566 11.4957 22.5818 10.586 22.455 9.89865H12.0671Z\"\n fill=\"#3086FF\"\n />\n </g>\n <g filter=\"url(#filter5_f_2162_5756)\">\n <path\n d=\"M4.06967 4.84595C3.44004 5.53485 2.90214 6.30592 2.47565 7.13983C1.74396 8.566 1.34332 10.2998 1.34332 11.9991C1.34332 12.0231 1.3453 12.0465 1.34546 12.0704C1.66951 12.6917 5.82155 12.5727 6.03083 12.0704C6.03057 12.047 6.02793 12.0241 6.02793 12.0006C6.02793 11.3036 6.14568 10.7899 6.3603 10.1598C6.62507 9.38257 7.03965 8.66683 7.56977 8.05017C7.68995 7.89675 8.01049 7.56692 8.10401 7.36908C8.13964 7.29373 8.03934 7.25143 8.03373 7.22491C8.02745 7.19524 7.89298 7.2191 7.86285 7.197C7.76719 7.12683 7.57777 7.0902 7.46274 7.05763C7.21689 6.98801 6.80945 6.8345 6.58314 6.67537C5.86779 6.17234 4.75141 5.57149 4.06967 4.84595Z\"\n fill=\"url(#paint4_radial_2162_5756)\"\n />\n </g>\n <g filter=\"url(#filter6_f_2162_5756)\">\n <path\n d=\"M6.59854 7.22788C8.25737 8.23272 8.73442 6.72068 9.83731 6.24753L7.91879 2.26904C7.21306 2.56566 6.54628 2.93419 5.92761 3.36477C5.00368 4.00782 4.18778 4.79253 3.51379 5.68553L6.59854 7.22788Z\"\n fill=\"url(#paint5_radial_2162_5756)\"\n />\n </g>\n <g filter=\"url(#filter7_f_2162_5756)\">\n <path\n d=\"M7.2736 17.3784C5.04684 18.1823 4.69823 18.2112 4.49326 19.5912C4.88495 19.9734 5.3058 20.327 5.75301 20.6475C6.95302 21.5077 9.26132 22.6534 12.2134 22.6534C12.2169 22.6534 12.2202 22.6531 12.2237 22.6531V18.1841C12.2214 18.1841 12.2189 18.1842 12.2166 18.1842C11.1112 18.1842 10.2278 17.8938 9.32207 17.3889C9.09876 17.2644 8.69361 17.5987 8.48765 17.4493C8.20359 17.2432 7.51998 17.6269 7.2736 17.3784Z\"\n fill=\"url(#paint6_radial_2162_5756)\"\n />\n </g>\n <g opacity=\"0.5\" filter=\"url(#filter8_f_2162_5756)\">\n <path\n d=\"M10.9197 18.0433V22.5756C11.3327 22.624 11.7626 22.6534 12.2135 22.6534C12.6656 22.6534 13.1029 22.6302 13.5279 22.5875V18.0738C13.0517 18.1552 12.6031 18.1842 12.2167 18.1842C11.7718 18.1842 11.339 18.1324 10.9197 18.0433Z\"\n fill=\"url(#paint7_linear_2162_5756)\"\n />\n </g>\n </g>\n <defs>\n <filter\n id=\"filter0_f_2162_5756\"\n x=\"0.875441\"\n y=\"11.6004\"\n width=\"9.09497\"\n height=\"8.34369\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter1_f_2162_5756\"\n x=\"11.4559\"\n y=\"0.953566\"\n width=\"8.49622\"\n height=\"6.83698\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter2_f_2162_5756\"\n x=\"3.53959\"\n y=\"0.940107\"\n width=\"9.23255\"\n height=\"7.50357\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter3_f_2162_5756\"\n x=\"10.7764\"\n y=\"11.7703\"\n width=\"12.3315\"\n height=\"11.3371\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter4_f_2162_5756\"\n x=\"11.597\"\n y=\"9.42857\"\n width=\"11.5297\"\n height=\"5.28382\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter5_f_2162_5756\"\n x=\"0.873243\"\n y=\"4.37587\"\n width=\"7.70847\"\n height=\"8.58716\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter6_f_2162_5756\"\n x=\"0.208944\"\n y=\"-1.03581\"\n width=\"12.9332\"\n height=\"11.9063\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"1.65243\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter7_f_2162_5756\"\n x=\"4.02318\"\n y=\"16.8905\"\n width=\"8.6706\"\n height=\"6.23301\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter8_f_2162_5756\"\n x=\"10.4496\"\n y=\"17.5732\"\n width=\"3.54837\"\n height=\"5.55027\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <radialGradient\n id=\"paint0_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(9.40223 19.3164) rotate(-92.3894) scale(10.467 15.7022)\"\n >\n <stop offset=\"0.141612\" stop-color=\"#1ABD4D\" />\n <stop offset=\"0.247515\" stop-color=\"#6EC30D\" />\n <stop offset=\"0.311547\" stop-color=\"#8AC502\" />\n <stop offset=\"0.366013\" stop-color=\"#A2C600\" />\n <stop offset=\"0.445673\" stop-color=\"#C8C903\" />\n <stop offset=\"0.540305\" stop-color=\"#EBCB03\" />\n <stop offset=\"0.615636\" stop-color=\"#F7CD07\" />\n <stop offset=\"0.699345\" stop-color=\"#FDCD04\" />\n <stop offset=\"0.771242\" stop-color=\"#FDCE05\" />\n <stop offset=\"0.860566\" stop-color=\"#FFCE0A\" />\n </radialGradient>\n <radialGradient\n id=\"paint1_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(19.1881 7.09785) scale(7.41096 9.3706)\"\n >\n <stop offset=\"0.408458\" stop-color=\"#FB4E5A\" />\n <stop offset=\"1\" stop-color=\"#FF4540\" />\n </radialGradient>\n <radialGradient\n id=\"paint2_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(15.1409 0.0537589) rotate(151.53) scale(11.8117 15.847)\"\n >\n <stop offset=\"0.231273\" stop-color=\"#FF4541\" />\n <stop offset=\"0.311547\" stop-color=\"#FF4540\" />\n <stop offset=\"0.457516\" stop-color=\"#FF4640\" />\n <stop offset=\"0.540305\" stop-color=\"#FF473F\" />\n <stop offset=\"0.699346\" stop-color=\"#FF5138\" />\n <stop offset=\"0.771242\" stop-color=\"#FF5B33\" />\n <stop offset=\"0.860566\" stop-color=\"#FF6C29\" />\n <stop offset=\"1\" stop-color=\"#FF8C18\" />\n </radialGradient>\n <radialGradient\n id=\"paint3_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(12.3781 21.2782) rotate(-128.041) scale(30.5579 11.3396)\"\n >\n <stop offset=\"0.131546\" stop-color=\"#0CBA65\" />\n <stop offset=\"0.209784\" stop-color=\"#0BB86D\" />\n <stop offset=\"0.297297\" stop-color=\"#09B479\" />\n <stop offset=\"0.396257\" stop-color=\"#08AD93\" />\n <stop offset=\"0.477124\" stop-color=\"#0AA6A9\" />\n <stop offset=\"0.568425\" stop-color=\"#0D9CC6\" />\n <stop offset=\"0.667385\" stop-color=\"#1893DD\" />\n <stop offset=\"0.768727\" stop-color=\"#258BF1\" />\n <stop offset=\"0.858506\" stop-color=\"#3086FF\" />\n </radialGradient>\n <radialGradient\n id=\"paint4_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(11.3035 3.39356) rotate(96.7579) scale(11.3243 15.9833)\"\n >\n <stop offset=\"0.366013\" stop-color=\"#FF4E3A\" />\n <stop offset=\"0.457516\" stop-color=\"#FF8A1B\" />\n <stop offset=\"0.540305\" stop-color=\"#FFA312\" />\n <stop offset=\"0.615636\" stop-color=\"#FFB60C\" />\n <stop offset=\"0.771242\" stop-color=\"#FFCD0A\" />\n <stop offset=\"0.860566\" stop-color=\"#FECF0A\" />\n <stop offset=\"0.915033\" stop-color=\"#FECF08\" />\n <stop offset=\"1\" stop-color=\"#FDCD01\" />\n </radialGradient>\n <radialGradient\n id=\"paint5_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(9.42961 3.27692) rotate(132.723) scale(5.67745 16.044)\"\n >\n <stop offset=\"0.315904\" stop-color=\"#FF4C3C\" />\n <stop offset=\"0.603818\" stop-color=\"#FF692C\" />\n <stop offset=\"0.726837\" stop-color=\"#FF7825\" />\n <stop offset=\"0.884534\" stop-color=\"#FF8D1B\" />\n <stop offset=\"1\" stop-color=\"#FF9F13\" />\n </radialGradient>\n <radialGradient\n id=\"paint6_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(15.1408 23.946) rotate(-151.53) scale(11.8117 15.847)\"\n >\n <stop offset=\"0.231273\" stop-color=\"#0FBC5F\" />\n <stop offset=\"0.311547\" stop-color=\"#0FBC5F\" />\n <stop offset=\"0.366013\" stop-color=\"#0FBC5E\" />\n <stop offset=\"0.457516\" stop-color=\"#0FBC5D\" />\n <stop offset=\"0.540305\" stop-color=\"#12BC58\" />\n <stop offset=\"0.699346\" stop-color=\"#28BF3C\" />\n <stop offset=\"0.771242\" stop-color=\"#38C02B\" />\n <stop offset=\"0.860566\" stop-color=\"#52C218\" />\n <stop offset=\"0.915033\" stop-color=\"#67C30F\" />\n <stop offset=\"1\" stop-color=\"#86C504\" />\n </radialGradient>\n <linearGradient\n id=\"paint7_linear_2162_5756\"\n x1=\"10.9197\"\n y1=\"20.3483\"\n x2=\"13.5279\"\n y2=\"20.3483\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#0FBC5C\" />\n <stop offset=\"1\" stop-color=\"#0CBA65\" />\n </linearGradient>\n </defs>\n</svg>\n\n<svg\n *ngIf=\"icon === 'facebook'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__facebook',\n 'o-svg--' + size,\n extraClass ? 'o-svg__elipsis--' + extraClass : ''\n ]\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20102 1.5 1.5 6.20101 1.5 12C1.5 16.9243 4.89003 21.0561 9.46345 22.1908V15.2086H7.29827V12H9.46345V10.6174C9.46345 7.04353 11.0808 5.38705 14.5895 5.38705C15.2547 5.38705 16.4025 5.51746 16.872 5.64792V8.55658C16.6242 8.5305 16.1938 8.51744 15.659 8.51744C13.9373 8.51744 13.2721 9.16962 13.2721 10.8652V12H16.7017L16.1126 15.2086H13.2721V22.4231C18.4711 21.7952 22.5 17.3684 22.5 12Z\"\n fill=\"#0866FF\"\n />\n <path\n d=\"M16.1125 15.2086L16.7017 12H13.272V10.8652C13.272 9.16958 13.9372 8.51745 15.6589 8.51745C16.1937 8.51745 16.6241 8.53047 16.872 8.55655V5.64792C16.4024 5.51747 15.2546 5.38702 14.5894 5.38702C11.0808 5.38702 9.4634 7.04354 9.4634 10.6174V12H7.29822V15.2086H9.4634V22.1908C10.2758 22.3923 11.1253 22.5 11.9999 22.5C12.4306 22.5 12.855 22.4735 13.272 22.4231V15.2086H16.1125Z\"\n fill=\"white\"\n />\n</svg>\n", styles: [".o-svg{display:flex}.o-svg--lg{width:1.5rem;height:1.5rem}.o-svg--md{width:1.3rem;height:1.3rem}.o-svg--sm{width:1rem;height:1rem}.o-svg--xs{width:.9rem;height:.9rem}.o-svg__alert{display:inline-block}.o-svg__test--neutral path{fill:var(--color-action-neutral-content-default)}.o-svg__test--danger path{fill:var(--color-action-danger-border-default)}.o-svg__test--inverse path{fill:var(--color-action-inverse-content-default)}.o-svg__test--button-primary path{fill:#fff}.o-svg__test--disabled path{fill:var(--color-button-primary-content-disabled)}.o-svg__test--button-secondary path{fill:var(--color-button-secondary-content-default)}.o-svg__test--button-tertiary path{fill:var(--color-button-secondary-content-default)}.o-svg__test--button-danger path{fill:#fff}.o-svg__test--button-inverse path{fill:var(--color-button-inverse-content-default)}@keyframes spin{to{transform:rotate(360deg)}}.o-svg__spinner{width:100%;height:100%;display:inline-block;animation:spin 1s linear infinite;transform-origin:center center}.o-svg__spinner--secondary path{fill:var(--color-button-secondary-content-default)}.o-svg__spinner--tertiary path{fill:var(--color-button-secondary-content-default)}.o-svg__spinner--disabled path{fill:var(--color-button-secondary-content-disabled)}.o-svg__spinner--inverse path{fill:var(--color-button-inverse-content-disabled)}\n"] }]
|
|
18
|
+
args: [{ selector: 'lib-icon', imports: [CommonModule], template: "<svg\n *ngIf=\"icon === 'alert'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__alert',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"m18.5001 14.6946-6.832-11.86486c-.1708-.29068-.4145-.53171-.7071-.69917-.2925-.16747-.6238-.25557-.9609-.25557-.33711 0-.66836.0881-.96094.25557-.29257.16746-.5363.40849-.70702.69917L1.50011 14.6946c-.16427.2811-.25084.6009-.25084.9265 0 .3257.08657.6454.25084.9266.16854.2924.41185.5348.70497.7021.29311.1674.62548.2538.96299.2503H16.8321c.3373.0032.6693-.0833.9621-.2507.2929-.1673.5359-.4095.7043-.7017.1645-.281.2514-.6007.2517-.9263.0002-.3257-.0861-.6455-.2501-.9268Zm-1.0836 1.2273c-.0595.1016-.1451.1856-.2477.2432-.1027.0577-.2189.087-.3367.085H3.16807c-.11775.002-.23392-.0273-.33661-.085-.10269-.0576-.1882-.1416-.24776-.2432-.05395-.0913-.08241-.1955-.08241-.3015 0-.1061.02846-.2103.08241-.3016L9.41573 3.45396c.06076-.10112.14666-.18479.24933-.24288.10268-.05808.21864-.08861.33664-.08861.1179 0 .2339.03053.3366.08861.1026.05809.1885.14176.2493.24288l6.832 11.86484c.0535.0916.0814.1959.0809.302-.0006.1061-.0296.2101-.084.3011Zm-8.04139-4.6718V8.12505c0-.16576.06584-.32473.18305-.44194.11721-.11721.27618-.18306.44194-.18306.1658 0 .3247.06585.4419.18306.1173.11721.1831.27618.1831.44194v3.12505c0 .1657-.0658.3247-.1831.4419-.1172.1172-.2761.1831-.4419.1831-.16576 0-.32473-.0659-.44194-.1831-.11721-.1172-.18305-.2762-.18305-.4419Zm1.56249 2.8125c0 .1854-.055.3666-.158.5208-.103.1542-.2494.2743-.4207.3453-.1713.0709-.35983.0895-.54169.0533-.18186-.0361-.34891-.1254-.48002-.2565s-.2204-.2982-.25657-.4801c-.03617-.1818-.01761-.3703.05335-.5416.07096-.1713.19112-.3177.34529-.4208.15417-.103.33543-.1579.52084-.1579.2486 0 .4871.0987.6629.2745.1758.1759.2746.4143.2746.663Z\"\n fill=\"#BA2F1E\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'arrow' && variant === 'left'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__arrow',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"M15.5302 18.9694c.0697.0697.125.1524.1627.2435.0377.091.0571.1886.0571.2872 0 .0985-.0194.1961-.0571.2871-.0377.0911-.093.1738-.1627.2435-.0696.0697-.1524.1249-.2434.1626-.0911.0378-.1886.0572-.2872.0572-.0985 0-.1961-.0194-.2872-.0572-.091-.0377-.1737-.0929-.2434-.1626l-7.50001-7.5c-.06973-.0697-.12505-.1524-.1628-.2434-.03774-.0911-.05717-.1887-.05717-.2872 0-.0986.01943-.1962.05717-.2873.03775-.091.09307-.1737.1628-.2434L14.469 3.96943c.1407-.14073.3316-.2198.5306-.2198.199 0 .3899.07907.5306.2198.1408.14073.2198.3316.2198.53062 0 .19902-.079.3899-.2198.53063L8.55993 12.0001l6.97027 6.9693Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'arrow' && variant === 'right'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__arrow',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"m17.031 12.5307-7.49996 7.5c-.06968.0697-.15241.1249-.24345.1626-.09105.0378-.18863.0572-.28717.0572-.09855 0-.19613-.0194-.28718-.0572-.09104-.0377-.17377-.0929-.24345-.1626-.06968-.0697-.12496-.1524-.16267-.2435-.03771-.091-.05712-.1886-.05712-.2871 0-.0986.01941-.1962.05712-.2872.03771-.0911.09299-.1738.16267-.2435l6.97031-6.9693-6.97031-6.96942C8.32906 4.88995 8.25 4.69907 8.25 4.50005c0-.19902.07906-.38989.21979-.53062.14073-.14073.3316-.2198.53063-.2198.19902 0 .38989.07907.53062.2198L17.031 11.4694c.0698.0697.1251.1524.1628.2434.0378.0911.0572.1887.0572.2873 0 .0985-.0194.1961-.0572.2872-.0377.091-.093.1737-.1628.2434Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'arrow' && variant === 'up'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__arrow',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"M20.0306 15.5306c-.0696.0697-.1524.1251-.2434.1628-.0911.0377-.1886.0572-.2872.0572-.0986 0-.1962-.0195-.2872-.0572-.0911-.0377-.1738-.0931-.2434-.1628L12 8.56029 5.03061 15.5306c-.14073.1407-.3316.2198-.53062.2198-.19902 0-.38989-.0791-.53063-.2198-.14073-.1407-.21979-.3316-.21979-.5306 0-.199.07906-.3899.21979-.5306l7.50004-7.50005c.0696-.06973.1523-.12505.2434-.16279.091-.03774.1886-.05717.2872-.05717.0986 0 .1961.01943.2872.05717.091.03774.1738.09306.2434.16279l7.5 7.50005c.0697.0696.1251.1523.1628.2434.0378.091.0572.1886.0572.2872 0 .0985-.0194.1961-.0572.2872-.0377.091-.0931.1737-.1628.2434Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'arrow' && variant === 'down'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__arrow',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"m20.0306 9.53062-7.5 7.49998c-.0696.0697-.1524.1251-.2434.1628-.0911.0378-.1886.0572-.2872.0572-.0986 0-.1962-.0194-.2872-.0572-.0911-.0377-.1738-.0931-.2434-.1628L3.96936 9.53062c-.14073-.14074-.21979-.33161-.21979-.53063 0-.19902.07906-.3899.21979-.53063.14074-.14073.33161-.21979.53063-.21979.19902 0 .38989.07906.53062.21979L12 15.4397l6.9694-6.97034c.0696-.06968.1524-.12495.2434-.16267.0911-.03771.1886-.05712.2872-.05712.0985 0 .1961.01941.2872.05712.091.03772.1737.09299.2434.16267.0697.06969.125.15241.1627.24346.0377.09104.0571.18862.0571.28717 0 .09855-.0194.19613-.0571.28717-.0377.09105-.093.17377-.1627.24346Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'calendar'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__calendar',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M16.25 2.5h-1.875v-.625c0-.16576-.0658-.32473-.1831-.44194-.1172-.11721-.2761-.18306-.4419-.18306s-.3247.06585-.4419.18306c-.1173.11721-.1831.27618-.1831.44194V2.5h-6.25v-.625c0-.16576-.06585-.32473-.18306-.44194C6.57473 1.31585 6.41576 1.25 6.25 1.25c-.16576 0-.32473.06585-.44194.18306-.11721.11721-.18306.27618-.18306.44194V2.5H3.75c-.33152 0-.64946.1317-.88388.36612C2.6317 3.10054 2.5 3.41848 2.5 3.75v12.5c0 .3315.1317.6495.36612.8839.23442.2344.55236.3661.88388.3661h12.5c.3315 0 .6495-.1317.8839-.3661.2344-.2344.3661-.5524.3661-.8839V3.75c0-.33152-.1317-.64946-.3661-.88388C16.8995 2.6317 16.5815 2.5 16.25 2.5ZM5.625 3.75v.625c0 .16576.06585.32473.18306.44194C5.92527 4.93415 6.08424 5 6.25 5c.16576 0 .32473-.06585.44194-.18306.11721-.11721.18306-.27618.18306-.44194V3.75h6.25v.625c0 .16576.0658.32473.1831.44194.1172.11721.2761.18306.4419.18306s.3247-.06585.4419-.18306c.1173-.11721.1831-.27618.1831-.44194V3.75h1.875v2.5H3.75v-2.5h1.875Zm10.625 12.5H3.75V7.5h12.5v8.75Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'eye' && variant === 'open'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__eye',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M19.3211 9.74688c-.0274-.06172-.6891-1.52969-2.1602-3.00079C15.2008 4.78594 12.725 3.75 9.99999 3.75c-2.725 0-5.20078 1.03594-7.16094 2.99609C1.36796 8.21719.703118 9.6875.678899 9.74688.643362 9.82681.625 9.91331.625 10.0008c0 .0875.018362.174.053899.2539.027344.0617.689061 1.5289 2.160151 3C4.79921 15.2141 7.27499 16.25 9.99999 16.25c2.72501 0 5.20081-1.0359 7.16091-2.9953 1.4711-1.4711 2.1328-2.9383 2.1602-3 .0355-.0799.0539-.1664.0539-.2539 0-.08749-.0184-.17399-.0539-.25392ZM9.99999 15c-2.40469 0-4.50547-.8742-6.24453-2.5977C3.0419 11.6927 2.43483 10.8836 1.95312 10c.48158-.88364 1.08867-1.69283 1.80234-2.40234C5.49452 5.87422 7.5953 5 9.99999 5c2.40471 0 4.50551.87422 6.24451 2.59766.715.70934 1.3234 1.51853 1.8063 2.40234-.5633 1.0516-3.0172 5-8.05081 5Zm0-8.75c-.74168 0-1.4667.21993-2.08339.63199-.61668.41205-1.09733.99772-1.38116 1.68295-.28382.68522-.35809 1.43926-.21339 2.16666.14469.7274.50184 1.3956 1.02629 1.9201.52445.5244 1.19263.8816 1.92006 1.0262.72743.1447 1.4814.0705 2.1667-.2134.6852-.2838 1.2708-.7644 1.6829-1.3811.4121-.6167.632-1.3417.632-2.0834-.001-.99424-.3965-1.94747-1.0995-2.65051-.703-.70304-1.6563-1.09846-2.65051-1.09949Zm0 6.25c-.49445 0-.9778-.1466-1.38892-.4213-.41113-.2747-.73156-.6652-.92078-1.122-.18922-.4568-.23872-.95947-.14226-1.44443.09646-.48495.33456-.93041.68419-1.28004.34964-.34963.79509-.58773 1.28005-.68419.48495-.09647.98763-.04696 1.44443.14226.4568.18922.8473.50965 1.122.92077.2747.41113.4213.89448.4213 1.38893 0 .663-.2634 1.2989-.7322 1.7678-.4689.4688-1.1048.7322-1.76781.7322Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'eye' && variant === 'close'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__eye',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M4.21249 2.70468c-.05488-.06187-.1215-.11223-.196-.14816-.07449-.03594-.15538-.05673-.23796-.06117-.08259-.00444-.16524.00755-.24316.03528-.07791.02774-.14955.07066-.21076.12628-.06121.05563-.11077.12285-.1458.19776-.03504.07492-.05486.15605-.05831.23869-.00346.08263.00953.16513.03819.24271.02867.07758.07245.1487.1288.20923l1.50313 1.65391C1.95312 6.94062.732805 9.62499.678899 9.74687.643362 9.8268.625 9.9133.625 10.0008c0 .0874.018362.1739.053899.2539.027344.0617.689061 1.5289 2.160151 3C4.79921 15.2141 7.27499 16.25 9.99999 16.25c1.40051.008 2.78681-.2804 4.06801-.8461l1.7187 1.8914c.0549.0619.1215.1122.196.1482.0745.0359.1554.0567.238.0611.0826.0045.1652-.0075.2431-.0352.0779-.0278.1496-.0707.2108-.1263.0612-.0557.1108-.1229.1458-.1978.035-.0749.0549-.156.0583-.2387.0035-.0826-.0095-.1651-.0382-.2427-.0287-.0776-.0724-.1487-.1288-.2092L4.21249 2.70468Zm3.69766 5.925 3.25545 3.58202c-.4902.2579-1.0522.3457-1.59777.2496-.54554-.0962-1.0437-.3707-1.41626-.7807-.37256-.4099-.59843-.932-.64212-1.4842-.0437-.5522.09725-1.10329.4007-1.56672ZM9.99999 15c-2.40469 0-4.50547-.8742-6.24453-2.5977-.71382-.7094-1.32092-1.5186-1.80234-2.40231.3664-.68672 1.53593-2.60859 3.69922-3.85781l1.40625 1.54297c-.54443.69727-.82482 1.56456-.79162 2.44855.0332.884.37786 1.7278.97305 2.3823.59519.6545 1.40259 1.0775 2.2795 1.1942.87688.1167 1.76688-.0803 2.51248-.5563l1.1508 1.2656c-1.0156.3897-2.095.5865-3.18281.5805Zm.46871-7.45548c-.1628-.03108-.3067-.12558-.3998-.26272-.09322-.13713-.12811-.30567-.09703-.46853.03103-.16286.12563-.3067.26273-.39988.1371-.09318.3057-.12807.4685-.09699.7966.15443 1.5219.56222 2.0677 1.16257.5459.60034.8831 1.36105.9612 2.16868.0155.16503-.0353.32944-.1411.45705-.1058.1276-.2579.208-.4229.2234-.0196.0012-.0391.0012-.0586 0-.1562.0007-.307-.0572-.4227-.1621-.1157-.105-.1879-.24952-.2023-.40507-.0526-.53719-.2772-1.04306-.6404-1.44239-.3631-.39933-.8455-.67079-1.3753-.77402Zm8.85 2.71018c-.0328.0734-.8242 1.8258-2.6062 3.4219-.0609.0562-.1324.0998-.2103.1282-.0779.0284-.1607.041-.2435.0371-.0828-.004-.164-.0243-.2389-.0599-.0749-.0357-.1419-.0858-.1972-.1476-.0553-.0618-.0977-.1339-.1249-.2123-.0271-.0783-.0384-.1613-.0332-.244.0053-.0828.0269-.1637.0637-.238.0368-.0743.088-.1405.1507-.1948.8743-.7854 1.6087-1.7138 2.1719-2.74531-.4825-.88455-1.0909-1.69431-1.8063-2.4039-1.739-1.72188-3.8398-2.5961-6.24451-2.5961-.50667-.00062-1.01254.04041-1.5125.12266-.0813.01438-.16465.0125-.24522-.00551-.08057-.01802-.15678-.05182-.22422-.09946-.06743-.04763-.12476-.10816-.16867-.17808-.04391-.06992-.07354-.14784-.08716-.22927-.01362-.08143-.01098-.16476.00778-.24516.01877-.08041.05327-.1563.10153-.22329s.10932-.12375.17964-.16702c.07032-.04326.14852-.07216.23007-.08502.5681-.09381 1.14296-.14058 1.71875-.13985 2.72501 0 5.20081 1.03594 7.16091 2.9961 1.4711 1.47109 2.1328 2.93906 2.1602 3.00078.0355.07993.0539.16643.0539.25393 0 .0874-.0184.1739-.0539.2539h-.0024Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'less'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__less',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n>\n <path\n d=\"M14 8c0 .13261-.0527.25979-.1464.35355-.0938.09377-.221.14645-.3536.14645h-11c-.13261 0-.25979-.05268-.35355-.14645C2.05268 8.25979 2 8.13261 2 8c0-.13261.05268-.25979.14645-.35355C2.24021 7.55268 2.36739 7.5 2.5 7.5h11c.1326 0 .2598.05268.3536.14645C13.9473 7.74021 14 7.86739 14 8Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'plus'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__plus',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M17.5 10c0 .1658-.0658.3247-.1831.4419-.1172.1173-.2761.1831-.4419.1831h-6.25v6.25c0 .1658-.0658.3247-.1831.4419-.1172.1173-.2761.1831-.4419.1831-.16576 0-.32473-.0658-.44194-.1831-.11721-.1172-.18306-.2761-.18306-.4419v-6.25h-6.25c-.16576 0-.32473-.0658-.44194-.1831C2.56585 10.3247 2.5 10.1658 2.5 10c0-.16576.06585-.32473.18306-.44194.11721-.11721.27618-.18306.44194-.18306h6.25v-6.25c0-.16576.06585-.32473.18306-.44194C9.67527 2.56585 9.83424 2.5 10 2.5c.1658 0 .3247.06585.4419.18306.1173.11721.1831.27618.1831.44194v6.25h6.25c.1658 0 .3247.06585.4419.18306.1173.11721.1831.27618.1831.44194Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'search'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__search',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"m17.9422 17.0578-3.9117-3.9109c1.1337-1.3612 1.6991-3.1071 1.5784-4.87446-.1206-1.76738-.918-3.42021-2.2263-4.61465-1.3082-1.19445-3.0266-1.83853-4.79767-1.79828-1.77105.04025-3.45839.76174-4.71104 2.01438-1.25264 1.25264-1.97413 2.93999-2.01438 4.71103-.04025 1.77108.60384 3.48948 1.79828 4.79768 1.19444 1.3083 2.84727 2.1057 4.61466 2.2263 1.76735.1207 3.51325-.4447 4.87445-1.5784l3.9109 3.9117c.0581.0581.127.1041.2029.1355.0759.0315.1572.0476.2393.0476s.1634-.0161.2393-.0476c.0759-.0314.1448-.0774.2029-.1355.0581-.0581.1041-.127.1355-.2029.0315-.0759.0477-.1572.0477-.2393s-.0162-.1634-.0477-.2393c-.0314-.0759-.0774-.1448-.1355-.2029ZM3.125 8.75c0-1.11252.3299-2.20006.94799-3.12509.61808-.92502 1.49658-1.64599 2.52442-2.07174 1.02783-.42574 2.15883-.53713 3.24998-.32009 1.09111.21704 2.09341.75277 2.88011 1.53944.7866.78667 1.3224 1.78895 1.5394 2.88009.2171 1.09115.1057 2.22214-.3201 3.24999-.4257 1.0278-1.1467 1.9063-2.0717 2.5244-.925.6181-2.01258.948-3.1251.948-1.49133-.0017-2.92111-.5948-3.97565-1.6494C3.71982 11.6711 3.12666 10.2413 3.125 8.75Z\"\n fill=\"#676D6C\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'spinner'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__spinner',\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M9.0145 1.80949c.20184.66019-.16972 1.359-.82991 1.56084-1.11797.3418-2.12799.96809-2.93117 1.81753-.80318.84945-1.37198 1.89294-1.65069 3.02827s-.25778 2.32357.06074 3.44837c.31853 1.1248.92372 2.1476 1.75632 2.9683.8326.8206 1.86405 1.4109 2.99336 1.7131 1.1293.3023 2.31775.306 3.44895.0109 1.1311-.2951 2.1663-.879 3.004-1.6944.8378-.8154 1.4494-1.8343 1.7749-2.9571.1923-.6631.8857-1.0447 1.5487-.8525.6631.1923 1.0447.8857.8524 1.5487-.4461 1.5387-1.2843 2.935-2.4323 4.0524-1.148 1.1174-2.5665 1.9175-4.1166 2.3219-1.5502.4044-3.17876.3993-4.72633-.0148-1.54756-.4142-2.96104-1.2231-4.10201-2.3477-1.14097-1.1246-1.97031-2.5262-2.4068-4.0676-.436495-1.5414-.465178-3.16977-.08324-4.7256.38194-1.55582 1.1614-2.98578 2.26205-4.14984C4.53753 2.3062 5.92164 1.44796 7.45366.979572c.66019-.20184 1.359.169728 1.56084.829918Z\"\n fill=\"#fff\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'success'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__success',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M13.5672 7.68281c.0581.05805.1042.12698.1357.20285.0314.07588.0476.15721.0476.23934 0 .08213-.0162.16346-.0476.23934-.0315.07587-.0776.1448-.1357.20285L9.19219 12.9422c-.05804.0581-.12697.1042-.20285.1357-.07587.0314-.1572.0476-.23934.0476-.08213 0-.16346-.0162-.23933-.0476-.07588-.0315-.14481-.0776-.20285-.1357l-1.875-1.875c-.11728-.1173-.18316-.2763-.18316-.4422s.06588-.3249.18316-.4422c.11727-.1173.27633-.18315.44218-.18315.16586 0 .32492.06585.44219.18315L8.75 11.6164l3.9328-3.93359c.0581-.05811.127-.10421.2029-.13566.0758-.03145.1572-.04764.2393-.04764s.1635.01619.2393.04764c.0759.03145.1448.07755.2029.13566ZM18.125 10c0 1.607-.4765 3.1779-1.3693 4.514-.8928 1.3362-2.1617 2.3776-3.6464 2.9925-1.4846.615-3.11831.7759-4.6944.4624-1.5761-.3135-3.02384-1.0874-4.16014-2.2237-1.1363-1.1363-1.91013-2.584-2.22364-4.1601-.3135-1.5761-.1526-3.20975.46236-4.6944.61496-1.48465 1.65637-2.7536 2.99252-3.64639C6.82214 2.35152 8.39303 1.875 10 1.875c2.1542.00227 4.2195.85903 5.7427 2.38227C17.266 5.78051 18.1227 7.84581 18.125 10Zm-1.25 0c0-1.35975-.4032-2.68896-1.1586-3.81955-.7555-1.13058-1.8292-2.01177-3.0854-2.53212-1.2563-.52035-2.63862-.6565-3.97224-.39123-1.33362.26527-2.55863.92006-3.52012 1.88154-.96148.96149-1.61626 2.18649-1.88154 3.52011-.26527 1.33362-.12912 2.71595.39123 3.97215.52035 1.2563 1.40154 2.33 2.53213 3.0855C7.31105 16.4718 8.64026 16.875 10 16.875c1.8227-.0021 3.5702-.7271 4.8591-2.0159 1.2888-1.2889 2.0138-3.0364 2.0159-4.8591Z\"\n fill=\"#35785B\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'test'\"\n fill=\"none\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__test',\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 18 18\"\n>\n <path\n d=\"M16.5 0h-15C1.10218 0 .720644.158035.43934.43934.158035.720644 0 1.10218 0 1.5v15c0 .3978.158035.7794.43934 1.0607C.720644 17.842 1.10218 18 1.5 18h15c.3978 0 .7794-.158 1.0607-.4393S18 16.8978 18 16.5v-15c0-.39782-.158-.779356-.4393-1.06066C17.2794.158035 16.8978 0 16.5 0Zm-15 16.5V2.56031L15.4397 16.5H1.5Zm1.06031-15H16.5v13.9406L2.56031 1.5Z\"\n fill=\"#217870\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'thumb'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__thumb',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"M19.5 3h-15c-.39782 0-.77936.15804-1.06066.43934C3.15804 3.72064 3 4.10218 3 4.5v15c0 .3978.15804.7794.43934 1.0607S4.10218 21 4.5 21h15c.3978 0 .7794-.158 1.0607-.4393S21 19.8978 21 19.5v-15c0-.39782-.158-.77936-.4393-1.06066C20.2794 3.15804 19.8978 3 19.5 3Zm-15 1.5h15v7.2544l-2.3147-2.31565c-.2813-.28109-.6626-.43899-1.0603-.43899-.3977 0-.779.1579-1.0603.43899L5.00344 19.5H4.5v-15Zm15 15H7.125l9-9 3.375 3.375V19.5ZM9 11.25c.44501 0 .88002-.132 1.25-.3792.37-.2472.6584-.5986.8287-1.00976.1703-.41114.2149-.86354.1281-1.29999-.0868-.43646-.3011-.83737-.6158-1.15204-.3147-.31467-.71559-.52896-1.15205-.61578-.43645-.08681-.88885-.04226-1.29999.12804-.41113.1703-.76253.45869-1.00977.8287C6.88196 8.11998 6.75 8.55499 6.75 9c0 .59674.23705 1.169.65901 1.591.42196.4219.99425.659 1.59099.659Zm0-3c.14834 0 .29334.04399.41668.1264.12333.08241.21946.19954.27623.33659.05677.13704.07162.28784.04268.43333-.02894.14548-.10037.27912-.20526.38401-.10489.10489-.23853.17632-.38401.20526-.14549.02894-.29629.01409-.43333-.04268-.13705-.05677-.25418-.1529-.33659-.27623C8.29399 9.29334 8.25 9.14834 8.25 9c0-.19891.07902-.38968.21967-.53033C8.61032 8.32902 8.80109 8.25 9 8.25Z\"\n fill=\"#535858\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'user'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__user',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"M21.6488 19.8751c-1.4279-2.4684-3.6282-4.2384-6.196-5.0775 1.2702-.7561 2.257-1.9083 2.809-3.2796.5519-1.3712.6385-2.88576.2464-4.31099-.3921-1.42523-1.2412-2.68234-2.417-3.57828-1.1757-.89594-2.613-1.38117-4.0912-1.38117-1.4782 0-2.91549.48523-4.09122 1.38117-1.17572.89594-2.02484 2.15305-2.41695 3.57828-.39212 1.42523-.30554 2.93979.24642 4.31099.55196 1.3713 1.53879 2.5235 2.80895 3.2796-2.56782.8381-4.76813 2.6081-6.19594 5.0775-.05236.0854-.08709.1804-.10214.2794-.01505.099-.01012.2.01451.2971.02462.0971.06844.1883.12887.2681.06043.0799.13624.1469.22297.197.08673.05.18261.0823.28198.0947.09938.0124.20025.0049.29664-.0223.0964-.0272.18638-.0734.26463-.1359.07825-.0625.14318-.1401.19098-.2281 1.76625-3.0525 4.88812-4.875 8.3503-4.875 3.4622 0 6.5841 1.8225 8.3503 4.875.0478.088.1128.1656.191.2281.0783.0625.1682.1087.2646.1359.0964.0272.1973.0347.2967.0223.0993-.0124.1952-.0447.2819-.0947.0868-.0501.1626-.1171.223-.197.0604-.0798.1043-.171.1289-.2681.0246-.0971.0296-.1981.0145-.2971-.0151-.099-.0498-.194-.1021-.2794ZM6.75001 9.00011c0-1.03835.30791-2.05339.88478-2.91674.57688-.86336 1.39682-1.53627 2.35613-1.93363.95928-.39736 2.01488-.50133 3.03328-.29875 1.0184.20257 1.9539.70258 2.6881 1.43681.7342.73422 1.2343 1.66968 1.4368 2.68809.2026 1.0184.0986 2.07401-.2987 3.03331-.3974.9593-1.0703 1.7792-1.9336 2.3561-.8634.5769-1.8784.8848-2.9168.8848-1.3919-.0015-2.72641-.5551-3.71066-1.5393-.98424-.9843-1.53784-2.3188-1.53933-3.71069Z\"\n fill=\"#535858\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'info'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__info',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M10 1.87601c-1.60697 0-3.17786.47652-4.514 1.36931-1.33615.89278-2.37756 2.16173-2.99252 3.64638-.61496 1.48465-.77586 3.1183-.46236 4.6944.31351 1.5761 1.08734 3.0238 2.22364 4.1602 1.1363 1.1363 2.58404 1.9101 4.16014 2.2236 1.57609.3135 3.2098.1526 4.6944-.4624 1.4847-.6149 2.7536-1.6563 3.6464-2.9925.8928-1.3361 1.3693-2.907 1.3693-4.514-.0023-2.15418-.859-4.21948-2.3823-5.74272-1.5232-1.52324-3.5885-2.38-5.7427-2.38227ZM10 16.876c-1.35974 0-2.68895-.4032-3.81954-1.1586-1.13059-.7555-2.01178-1.8292-2.53213-3.0854-.52035-1.2563-.6565-2.63862-.39123-3.97224.26528-1.33362.92006-2.55863 1.88154-3.52011.96149-.96149 2.1865-1.61627 3.52012-1.88154 1.33362-.26528 2.71594-.12913 3.97224.39123 1.2562.52035 2.3299 1.40153 3.0854 2.53212.7554 1.13059 1.1586 2.4598 1.1586 3.81954-.0021 1.8227-.7271 3.5702-2.0159 4.8591-1.2889 1.2888-3.0364 2.0138-4.8591 2.0159Zm1.25-3.125c0 .1658-.0658.3247-.1831.4419-.1172.1173-.2761.1831-.4419.1831-.3315 0-.64946-.1317-.88388-.3661-.23442-.2344-.36612-.5524-.36612-.8839v-3.125c-.16576 0-.32473-.06584-.44194-.18305-.11721-.11721-.18306-.27618-.18306-.44194 0-.16576.06585-.32473.18306-.44194.11721-.11721.27618-.18306.44194-.18306.33152 0 .6495.13169.8839.36611.2344.23442.3661.55237.3661.88388v3.125c.1658 0 .3247.0659.4419.1831.1173.1172.1831.2761.1831.4419Zm-2.5-7.18749c0-.18542.05499-.36668.158-.52085.10301-.15417.24943-.27433.42074-.34529.1713-.07096.3598-.08952.54166-.05335.1819.03617.3489.12546.48.25657.1311.13112.2204.29816.2566.48002.0362.18186.0176.37036-.0534.54166-.0709.17131-.1911.31773-.3452.42074-.1542.10301-.33548.158-.5209.158-.24864 0-.48709-.09877-.66291-.27459C8.84878 7.0506 8.75 6.81215 8.75 6.56351Z\"\n fill=\"#27749A\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'warning'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__warning',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M10 1.87601c-1.60697 0-3.17786.47652-4.514 1.36931-1.33615.89278-2.37756 2.16173-2.99252 3.64638-.61496 1.48465-.77586 3.1183-.46236 4.6944.31351 1.5761 1.08734 3.0238 2.22364 4.1602 1.1363 1.1363 2.58404 1.9101 4.16014 2.2236 1.57609.3135 3.2098.1526 4.6944-.4624 1.4847-.6149 2.7536-1.6563 3.6464-2.9925.8928-1.3361 1.3693-2.907 1.3693-4.514-.0023-2.15418-.859-4.21948-2.3823-5.74272-1.5232-1.52324-3.5885-2.38-5.7427-2.38227ZM10 16.876c-1.35974 0-2.68895-.4032-3.81954-1.1586-1.13059-.7555-2.01178-1.8292-2.53213-3.0854-.52035-1.2563-.6565-2.63862-.39123-3.97224.26528-1.33362.92006-2.55863 1.88154-3.52011.96149-.96149 2.1865-1.61627 3.52012-1.88154 1.33362-.26528 2.71594-.12913 3.97224.39123 1.2562.52035 2.3299 1.40153 3.0854 2.53212.7554 1.13059 1.1586 2.4598 1.1586 3.81954-.0021 1.8227-.7271 3.5702-2.0159 4.8591-1.2889 1.2888-3.0364 2.0138-4.8591 2.0159Zm-.625-6.25V6.25101c0-.16576.06585-.32473.18306-.44194.11721-.11721.27618-.18306.44194-.18306.1658 0 .3247.06585.4419.18306.1173.11721.1831.27618.1831.44194V10.626c0 .1658-.0658.3247-.1831.4419-.1172.1173-.2761.1831-.4419.1831-.16576 0-.32473-.0658-.44194-.1831-.11721-.1172-.18306-.2761-.18306-.4419Zm1.5625 2.8125c0 .1854-.055.3667-.158.5209-.103.1541-.2494.2743-.4207.3452-.1713.071-.35984.0896-.54169.0534-.18186-.0362-.34891-.1255-.48002-.2566s-.2204-.2981-.25657-.48c-.03618-.1819-.01761-.3704.05335-.5417.07095-.1713.19112-.3177.34529-.4207.15417-.103.33542-.158.52084-.158.2486 0 .4871.0988.6629.2746.1758.1758.2746.4143.2746.6629Z\"\n fill=\"#866600\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'upload'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__upload',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M17.5 11.25v5c0 .1658-.0658.3247-.1831.4419-.1172.1173-.2761.1831-.4419.1831H3.125c-.16576 0-.32473-.0658-.44194-.1831C2.56585 16.5747 2.5 16.4158 2.5 16.25v-5c0-.1658.06585-.3247.18306-.4419.11721-.1172.27618-.1831.44194-.1831.16576 0 .32473.0659.44194.1831.11721.1172.18306.2761.18306.4419v4.375h12.5V11.25c0-.1658.0658-.3247.1831-.4419.1172-.1172.2761-.1831.4419-.1831s.3247.0659.4419.1831c.1173.1172.1831.2761.1831.4419ZM7.31719 6.06719 9.375 4.0086V11.25c0 .1658.06585.3247.18306.4419.11721.1173.27618.1831.44194.1831.1658 0 .3247-.0658.4419-.1831.1173-.1172.1831-.2761.1831-.4419V4.0086l2.0578 2.05859c.1173.11728.2763.18316.4422.18316s.3249-.06588.4422-.18316c.1173-.11727.1831-.27633.1831-.44219 0-.16585-.0658-.32491-.1831-.44218l-3.125-3.125c-.0581-.05811-.127-.10421-.2029-.13567-.0758-.03145-.1572-.04764-.2393-.04764-.08213 0-.16346.01619-.23934.04764-.07587.03146-.1448.07756-.20285.13567l-3.125 3.125c-.11727.11727-.18316.27633-.18316.44218 0 .16586.06589.32492.18316.44219.11728.11728.27634.18316.44219.18316.16585 0 .32491-.06588.44219-.18316Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'card'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__card',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 30 20\"\n>\n <path\n d=\"M26.0526 0H3.94737C1.7673 0 0 1.86548 0 4.16667V15.8333C0 18.1345 1.7673 20 3.94737 20H26.0526C28.2327 20 30 18.1345 30 15.8333V4.16667C30 1.86548 28.2327 0 26.0526 0Z\"\n fill=\"#4486E4\"\n />\n <path d=\"M30 4.16669H0v3h30v-3Z\" fill=\"#0F3760\" />\n <path\n d=\"M21.5 16h3c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5h-3c-.8284 0-1.5.6716-1.5 1.5s.6716 1.5 1.5 1.5Z\"\n fill=\"#D4E3F4\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'card-disabled'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__card-disabled',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 30 20\"\n>\n <path\n d=\"M26.0526 0H3.94737C1.7673 0 0 1.86548 0 4.16667V15.8333C0 18.1345 1.7673 20 3.94737 20H26.0526C28.2327 20 30 18.1345 30 15.8333V4.16667C30 1.86548 28.2327 0 26.0526 0Z\"\n fill=\"#c7c7c7\"\n />\n <path d=\"M30 4.16669H0v3h30v-3Z\" fill=\"#a7a7a7\" />\n <path\n d=\"M21.5 16h3c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5h-3c-.8284 0-1.5.6716-1.5 1.5s.6716 1.5 1.5 1.5Z\"\n fill=\"#D4E3F4\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'close'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__close',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M16.0672 15.1828c.058.0581.1041.127.1355.2029.0315.0758.0476.1572.0476.2393s-.0161.1634-.0476.2393c-.0314.0759-.0775.1448-.1355.2029-.0581.058-.127.1041-.2029.1355-.0759.0315-.1572.0476-.2393.0476s-.1635-.0161-.2393-.0476c-.0759-.0314-.1448-.0775-.2029-.1355l-5.18282-5.1836-5.18281 5.1836c-.11728.1172-.27634.1831-.44219.1831-.16585 0-.32491-.0659-.44219-.1831-.11727-.1173-.18316-.2764-.18316-.4422 0-.1659.06589-.3249.18316-.4422l5.1836-5.18282-5.1836-5.18281c-.11727-.11728-.18316-.27634-.18316-.44219 0-.16585.06589-.32491.18316-.44219.11728-.11727.27634-.18316.44219-.18316.16585 0 .32491.06589.44219.18316l5.18281 5.1836 5.18282-5.1836c.1173-.11727.2763-.18316.4422-.18316.1658 0 .3249.06589.4422.18316.1172.11728.1831.27634.1831.44219 0 .16585-.0659.32491-.1831.44219l-5.1836 5.18281 5.1836 5.18282Z\"\n fill=\"#070707\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'close-white'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__close',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n>\n <path\n d=\"M16.0672 15.1828c.058.0581.1041.127.1355.2029.0315.0758.0476.1572.0476.2393s-.0161.1634-.0476.2393c-.0314.0759-.0775.1448-.1355.2029-.0581.058-.127.1041-.2029.1355-.0759.0315-.1572.0476-.2393.0476s-.1635-.0161-.2393-.0476c-.0759-.0314-.1448-.0775-.2029-.1355l-5.18282-5.1836-5.18281 5.1836c-.11728.1172-.27634.1831-.44219.1831-.16585 0-.32491-.0659-.44219-.1831-.11727-.1173-.18316-.2764-.18316-.4422 0-.1659.06589-.3249.18316-.4422l5.1836-5.18282-5.1836-5.18281c-.11727-.11728-.18316-.27634-.18316-.44219 0-.16585.06589-.32491.18316-.44219.11728-.11727.27634-.18316.44219-.18316.16585 0 .32491.06589.44219.18316l5.18281 5.1836 5.18282-5.1836c.1173-.11727.2763-.18316.4422-.18316.1658 0 .3249.06589.4422.18316.1172.11728.1831.27634.1831.44219 0 .16585-.0659.32491-.1831.44219l-5.1836 5.18281 5.1836 5.18282Z\"\n fill=\"#ffffff\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'close-disabled'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__close',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n>\n <path\n d=\"M12.8537 12.1463c.0465.0464.0833.1016.1085.1623.0251.0607.0381.1257.0381.1914 0 .0657-.013.1308-.0381.1915-.0252.0607-.062.1158-.1085.1623-.0464.0464-.1016.0833-.1623.1084-.0607.0252-.1257.0381-.1914.0381-.0657 0-.1308-.0129-.1915-.0381-.0607-.0251-.1158-.062-.1623-.1084L7.99997 8.70691 3.85372 12.8538c-.09382.0938-.22107.1465-.35375.1465-.13268 0-.25993-.0527-.35375-.1465-.09382-.0938-.14653-.2211-.14653-.3538 0-.1326.05271-.2599.14653-.3537L7.2931 8.00003 3.14622 3.85378c-.09382-.09382-.14653-.22106-.14653-.35375 0-.13268.05271-.25993.14653-.35375.09382-.09382.22107-.14652.35375-.14652.13268 0 .25993.0527.35375.14652l4.14625 4.14688 4.14623-4.14688c.0938-.09382.2211-.14652.3538-.14652s.2599.0527.3537.14652c.0938.09382.1466.22107.1466.35375 0 .13269-.0528.25993-.1466.35375L8.70685 8.00003l4.14685 4.14627Z\"\n fill=\"#A6B0AF\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'check-circle'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__check-circle',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n>\n <path\n d=\"M12 2.25c-1.9284 0-3.81343.57183-5.41681 1.64317-1.60337 1.07134-2.85306 2.59409-3.59101 4.37567-.73796 1.78156-.93104 3.74196-.55483 5.63326.3762 1.8913 1.3048 3.6286 2.66836 4.9922 1.36357 1.3636 3.10085 2.2922 4.99219 2.6684 1.8913.3762 3.8517.1831 5.6333-.5549 1.7815-.7379 3.3043-1.9876 4.3756-3.591C21.1782 15.8134 21.75 13.9284 21.75 12c-.0027-2.58502-1.0308-5.06339-2.8587-6.89128C17.0634 3.28084 14.585 2.25273 12 2.25Zm4.2806 8.0306-5.25 5.25c-.0696.0698-.1523.1251-.2434.1628-.091.0378-.1886.0572-.2872.0572-.0986 0-.1962-.0194-.2872-.0572-.091-.0377-.1738-.093-.24342-.1628l-2.25-2.25c-.14073-.1407-.21979-.3316-.21979-.5306 0-.199.07906-.3899.21979-.5306.14073-.1408.3316-.2198.53062-.2198.19903 0 .3899.079.53063.2198L10.5 13.9397l4.7194-4.72033c.0697-.06968.1524-.12495.2434-.16267.0911-.03771.1887-.05712.2872-.05712.0986 0 .1961.01941.2872.05712.091.03772.1737.09299.2434.16267.0697.06969.125.15241.1627.24346.0377.09104.0571.18862.0571.28717 0 .09855-.0194.19613-.0571.2872-.0377.091-.093.1737-.1627.2434Z\"\n fill=\"#217870\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'elipsis'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__elipsis',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 11 20\"\n>\n <path\n d=\"M1.162 15.296c.672 0 1.162-.504 1.162-1.148 0-.63-.49-1.148-1.162-1.148C.49 13 0 13.518 0 14.148c0 .644.49 1.148 1.162 1.148ZM5.22255 15.296c.672 0 1.162-.504 1.162-1.148 0-.63-.49-1.148-1.162-1.148-.672 0-1.162.518-1.162 1.148 0 .644.49 1.148 1.162 1.148ZM9.28309 15.296c.672 0 1.16201-.504 1.16201-1.148 0-.63-.49001-1.148-1.16201-1.148-.672 0-1.162.518-1.162 1.148 0 .644.49 1.148 1.162 1.148Z\"\n fill=\"#535858\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'apple'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__apple',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n viewBox=\"0 0 25 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M20.8578 8.65962C20.7331 8.75412 18.5319 9.96595 18.5319 12.6605C18.5319 15.7772 21.3328 16.8798 21.4167 16.9071C21.4038 16.9743 20.9717 18.4172 19.9399 19.8873C19.0199 21.1811 18.059 22.4727 16.5972 22.4727C15.1355 22.4727 14.7593 21.6431 13.0719 21.6431C11.4274 21.6431 10.8427 22.5 9.50567 22.5C8.16861 22.5 7.23567 21.3029 6.16302 19.8327C4.92054 18.1064 3.91667 15.4244 3.91667 12.8789C3.91667 8.79613 6.63378 6.63081 9.3079 6.63081C10.7288 6.63081 11.9132 7.5423 12.8053 7.5423C13.6544 7.5423 14.9786 6.57621 16.5951 6.57621C17.2077 6.57621 19.4089 6.63081 20.8578 8.65962ZM15.8277 4.84773C16.4962 4.07276 16.9691 2.99745 16.9691 1.92214C16.9691 1.77303 16.9562 1.62181 16.9283 1.5C15.8406 1.5399 14.5465 2.20777 13.7662 3.09196C13.1536 3.77243 12.5818 4.84773 12.5818 5.93774C12.5818 6.10156 12.6097 6.26538 12.6226 6.31788C12.6914 6.33048 12.8032 6.34518 12.915 6.34518C13.8909 6.34518 15.1183 5.70672 15.8277 4.84773Z\"\n fill=\"black\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'google'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__google',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <mask\n id=\"mask0_2162_5756\"\n style=\"mask-type: luminance\"\n maskUnits=\"userSpaceOnUse\"\n x=\"1\"\n y=\"1\"\n width=\"22\"\n height=\"22\"\n >\n <path\n d=\"M22.2983 10.052H12.2237V14.0889H18.0126C17.9196 14.6602 17.7106 15.2223 17.4046 15.7347C17.054 16.3219 16.6206 16.7689 16.1763 17.1093C14.8456 18.1291 13.2941 18.3376 12.2166 18.3376C9.49479 18.3376 7.16915 16.5784 6.26885 14.188C6.23252 14.1013 6.20839 14.0117 6.17901 13.9231C5.98007 13.3147 5.87136 12.6704 5.87136 12.0007C5.87136 11.3037 5.98908 10.6365 6.2037 10.0064C7.05029 7.52124 9.42836 5.66505 12.2186 5.66505C12.7798 5.66505 13.3203 5.73186 13.8328 5.8651C15.0041 6.16962 15.8326 6.76936 16.3403 7.24375L19.4036 4.24379C17.5402 2.53527 15.1111 1.5 12.2135 1.5C9.89707 1.49995 7.75844 2.22168 6.0059 3.44144C4.58465 4.43062 3.41902 5.75502 2.63236 7.29316C1.90065 8.71933 1.5 10.2998 1.5 11.9991C1.5 13.6985 1.90127 15.2954 2.63297 16.7083V16.7179C3.40584 18.2179 4.53603 19.5095 5.90965 20.4942C7.10966 21.3544 9.2614 22.5 12.2135 22.5C13.9112 22.5 15.4158 22.1939 16.7427 21.6203C17.7 21.2065 18.5481 20.6668 19.316 19.9732C20.3306 19.0566 21.1252 17.923 21.6675 16.6187C22.2099 15.3144 22.5 13.8394 22.5 12.2403C22.5 11.4956 22.4252 10.7393 22.2983 10.0519V10.052Z\"\n fill=\"white\"\n />\n </mask>\n <g mask=\"url(#mask0_2162_5756)\">\n <g filter=\"url(#filter0_f_2162_5756)\">\n <path\n d=\"M1.34552 12.0704C1.35666 13.743 1.83324 15.4687 2.55464 16.8617V16.8713C3.07589 17.883 3.78828 18.6821 4.59968 19.474L9.50033 17.6858C8.57316 17.2148 8.43168 16.9263 7.76705 16.3997C7.08785 15.7148 6.58164 14.9285 6.26639 14.0066H6.25369L6.26639 13.997C6.059 13.3882 6.03854 12.742 6.03089 12.0704H1.34552Z\"\n fill=\"url(#paint0_radial_2162_5756)\"\n />\n </g>\n <g filter=\"url(#filter1_f_2162_5756)\">\n <path\n d=\"M12.2238 1.42365C11.7394 3.12534 11.9246 4.77944 12.2238 5.74187C12.7831 5.74229 13.3219 5.80896 13.8329 5.94179C15.0042 6.2463 15.8326 6.84606 16.3403 7.32045L19.482 4.24385C17.6208 2.53737 15.381 1.42633 12.2238 1.42365Z\"\n fill=\"url(#paint1_radial_2162_5756)\"\n />\n </g>\n <g filter=\"url(#filter2_f_2162_5756)\">\n <path\n d=\"M12.2132 1.41019C9.83733 1.41014 7.6438 2.1504 5.84628 3.40147C5.17885 3.86599 4.56637 4.40259 4.02099 4.9993C3.87812 6.33968 5.09053 7.98715 7.49146 7.97351C8.65638 6.61844 10.3793 5.74172 12.2969 5.74172C12.2986 5.74172 12.3003 5.74186 12.302 5.74187L12.2237 1.41049C12.2202 1.41049 12.2168 1.41019 12.2132 1.41019Z\"\n fill=\"url(#paint2_radial_2162_5756)\"\n />\n </g>\n <g filter=\"url(#filter3_f_2162_5756)\">\n <path\n d=\"M20.055 12.5554L17.9343 14.0123C17.8413 14.5836 17.6322 15.1456 17.3262 15.6581C16.9756 16.2453 16.5422 16.6923 16.0979 17.0327C14.7699 18.0503 13.2226 18.2599 12.1454 18.2607C11.032 20.157 10.8368 21.1069 12.2237 22.6373C13.9398 22.6361 15.4613 22.3263 16.8033 21.7462C17.7733 21.3268 18.6328 20.7799 19.411 20.0769C20.4392 19.1481 21.2446 17.9992 21.7942 16.6774C22.3439 15.3556 22.6378 13.8609 22.6378 12.2404L20.055 12.5554Z\"\n fill=\"url(#paint3_radial_2162_5756)\"\n />\n </g>\n <g filter=\"url(#filter4_f_2162_5756)\">\n <path\n d=\"M12.0671 9.89865V14.2423H22.2701C22.3598 13.6474 22.6566 12.8777 22.6566 12.2404C22.6566 11.4957 22.5818 10.586 22.455 9.89865H12.0671Z\"\n fill=\"#3086FF\"\n />\n </g>\n <g filter=\"url(#filter5_f_2162_5756)\">\n <path\n d=\"M4.06967 4.84595C3.44004 5.53485 2.90214 6.30592 2.47565 7.13983C1.74396 8.566 1.34332 10.2998 1.34332 11.9991C1.34332 12.0231 1.3453 12.0465 1.34546 12.0704C1.66951 12.6917 5.82155 12.5727 6.03083 12.0704C6.03057 12.047 6.02793 12.0241 6.02793 12.0006C6.02793 11.3036 6.14568 10.7899 6.3603 10.1598C6.62507 9.38257 7.03965 8.66683 7.56977 8.05017C7.68995 7.89675 8.01049 7.56692 8.10401 7.36908C8.13964 7.29373 8.03934 7.25143 8.03373 7.22491C8.02745 7.19524 7.89298 7.2191 7.86285 7.197C7.76719 7.12683 7.57777 7.0902 7.46274 7.05763C7.21689 6.98801 6.80945 6.8345 6.58314 6.67537C5.86779 6.17234 4.75141 5.57149 4.06967 4.84595Z\"\n fill=\"url(#paint4_radial_2162_5756)\"\n />\n </g>\n <g filter=\"url(#filter6_f_2162_5756)\">\n <path\n d=\"M6.59854 7.22788C8.25737 8.23272 8.73442 6.72068 9.83731 6.24753L7.91879 2.26904C7.21306 2.56566 6.54628 2.93419 5.92761 3.36477C5.00368 4.00782 4.18778 4.79253 3.51379 5.68553L6.59854 7.22788Z\"\n fill=\"url(#paint5_radial_2162_5756)\"\n />\n </g>\n <g filter=\"url(#filter7_f_2162_5756)\">\n <path\n d=\"M7.2736 17.3784C5.04684 18.1823 4.69823 18.2112 4.49326 19.5912C4.88495 19.9734 5.3058 20.327 5.75301 20.6475C6.95302 21.5077 9.26132 22.6534 12.2134 22.6534C12.2169 22.6534 12.2202 22.6531 12.2237 22.6531V18.1841C12.2214 18.1841 12.2189 18.1842 12.2166 18.1842C11.1112 18.1842 10.2278 17.8938 9.32207 17.3889C9.09876 17.2644 8.69361 17.5987 8.48765 17.4493C8.20359 17.2432 7.51998 17.6269 7.2736 17.3784Z\"\n fill=\"url(#paint6_radial_2162_5756)\"\n />\n </g>\n <g opacity=\"0.5\" filter=\"url(#filter8_f_2162_5756)\">\n <path\n d=\"M10.9197 18.0433V22.5756C11.3327 22.624 11.7626 22.6534 12.2135 22.6534C12.6656 22.6534 13.1029 22.6302 13.5279 22.5875V18.0738C13.0517 18.1552 12.6031 18.1842 12.2167 18.1842C11.7718 18.1842 11.339 18.1324 10.9197 18.0433Z\"\n fill=\"url(#paint7_linear_2162_5756)\"\n />\n </g>\n </g>\n <defs>\n <filter\n id=\"filter0_f_2162_5756\"\n x=\"0.875441\"\n y=\"11.6004\"\n width=\"9.09497\"\n height=\"8.34369\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter1_f_2162_5756\"\n x=\"11.4559\"\n y=\"0.953566\"\n width=\"8.49622\"\n height=\"6.83698\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter2_f_2162_5756\"\n x=\"3.53959\"\n y=\"0.940107\"\n width=\"9.23255\"\n height=\"7.50357\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter3_f_2162_5756\"\n x=\"10.7764\"\n y=\"11.7703\"\n width=\"12.3315\"\n height=\"11.3371\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter4_f_2162_5756\"\n x=\"11.597\"\n y=\"9.42857\"\n width=\"11.5297\"\n height=\"5.28382\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter5_f_2162_5756\"\n x=\"0.873243\"\n y=\"4.37587\"\n width=\"7.70847\"\n height=\"8.58716\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter6_f_2162_5756\"\n x=\"0.208944\"\n y=\"-1.03581\"\n width=\"12.9332\"\n height=\"11.9063\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"1.65243\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter7_f_2162_5756\"\n x=\"4.02318\"\n y=\"16.8905\"\n width=\"8.6706\"\n height=\"6.23301\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <filter\n id=\"filter8_f_2162_5756\"\n x=\"10.4496\"\n y=\"17.5732\"\n width=\"3.54837\"\n height=\"5.55027\"\n filterUnits=\"userSpaceOnUse\"\n color-interpolation-filters=\"sRGB\"\n >\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n />\n <feGaussianBlur\n stdDeviation=\"0.23504\"\n result=\"effect1_foregroundBlur_2162_5756\"\n />\n </filter>\n <radialGradient\n id=\"paint0_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(9.40223 19.3164) rotate(-92.3894) scale(10.467 15.7022)\"\n >\n <stop offset=\"0.141612\" stop-color=\"#1ABD4D\" />\n <stop offset=\"0.247515\" stop-color=\"#6EC30D\" />\n <stop offset=\"0.311547\" stop-color=\"#8AC502\" />\n <stop offset=\"0.366013\" stop-color=\"#A2C600\" />\n <stop offset=\"0.445673\" stop-color=\"#C8C903\" />\n <stop offset=\"0.540305\" stop-color=\"#EBCB03\" />\n <stop offset=\"0.615636\" stop-color=\"#F7CD07\" />\n <stop offset=\"0.699345\" stop-color=\"#FDCD04\" />\n <stop offset=\"0.771242\" stop-color=\"#FDCE05\" />\n <stop offset=\"0.860566\" stop-color=\"#FFCE0A\" />\n </radialGradient>\n <radialGradient\n id=\"paint1_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(19.1881 7.09785) scale(7.41096 9.3706)\"\n >\n <stop offset=\"0.408458\" stop-color=\"#FB4E5A\" />\n <stop offset=\"1\" stop-color=\"#FF4540\" />\n </radialGradient>\n <radialGradient\n id=\"paint2_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(15.1409 0.0537589) rotate(151.53) scale(11.8117 15.847)\"\n >\n <stop offset=\"0.231273\" stop-color=\"#FF4541\" />\n <stop offset=\"0.311547\" stop-color=\"#FF4540\" />\n <stop offset=\"0.457516\" stop-color=\"#FF4640\" />\n <stop offset=\"0.540305\" stop-color=\"#FF473F\" />\n <stop offset=\"0.699346\" stop-color=\"#FF5138\" />\n <stop offset=\"0.771242\" stop-color=\"#FF5B33\" />\n <stop offset=\"0.860566\" stop-color=\"#FF6C29\" />\n <stop offset=\"1\" stop-color=\"#FF8C18\" />\n </radialGradient>\n <radialGradient\n id=\"paint3_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(12.3781 21.2782) rotate(-128.041) scale(30.5579 11.3396)\"\n >\n <stop offset=\"0.131546\" stop-color=\"#0CBA65\" />\n <stop offset=\"0.209784\" stop-color=\"#0BB86D\" />\n <stop offset=\"0.297297\" stop-color=\"#09B479\" />\n <stop offset=\"0.396257\" stop-color=\"#08AD93\" />\n <stop offset=\"0.477124\" stop-color=\"#0AA6A9\" />\n <stop offset=\"0.568425\" stop-color=\"#0D9CC6\" />\n <stop offset=\"0.667385\" stop-color=\"#1893DD\" />\n <stop offset=\"0.768727\" stop-color=\"#258BF1\" />\n <stop offset=\"0.858506\" stop-color=\"#3086FF\" />\n </radialGradient>\n <radialGradient\n id=\"paint4_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(11.3035 3.39356) rotate(96.7579) scale(11.3243 15.9833)\"\n >\n <stop offset=\"0.366013\" stop-color=\"#FF4E3A\" />\n <stop offset=\"0.457516\" stop-color=\"#FF8A1B\" />\n <stop offset=\"0.540305\" stop-color=\"#FFA312\" />\n <stop offset=\"0.615636\" stop-color=\"#FFB60C\" />\n <stop offset=\"0.771242\" stop-color=\"#FFCD0A\" />\n <stop offset=\"0.860566\" stop-color=\"#FECF0A\" />\n <stop offset=\"0.915033\" stop-color=\"#FECF08\" />\n <stop offset=\"1\" stop-color=\"#FDCD01\" />\n </radialGradient>\n <radialGradient\n id=\"paint5_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(9.42961 3.27692) rotate(132.723) scale(5.67745 16.044)\"\n >\n <stop offset=\"0.315904\" stop-color=\"#FF4C3C\" />\n <stop offset=\"0.603818\" stop-color=\"#FF692C\" />\n <stop offset=\"0.726837\" stop-color=\"#FF7825\" />\n <stop offset=\"0.884534\" stop-color=\"#FF8D1B\" />\n <stop offset=\"1\" stop-color=\"#FF9F13\" />\n </radialGradient>\n <radialGradient\n id=\"paint6_radial_2162_5756\"\n cx=\"0\"\n cy=\"0\"\n r=\"1\"\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(15.1408 23.946) rotate(-151.53) scale(11.8117 15.847)\"\n >\n <stop offset=\"0.231273\" stop-color=\"#0FBC5F\" />\n <stop offset=\"0.311547\" stop-color=\"#0FBC5F\" />\n <stop offset=\"0.366013\" stop-color=\"#0FBC5E\" />\n <stop offset=\"0.457516\" stop-color=\"#0FBC5D\" />\n <stop offset=\"0.540305\" stop-color=\"#12BC58\" />\n <stop offset=\"0.699346\" stop-color=\"#28BF3C\" />\n <stop offset=\"0.771242\" stop-color=\"#38C02B\" />\n <stop offset=\"0.860566\" stop-color=\"#52C218\" />\n <stop offset=\"0.915033\" stop-color=\"#67C30F\" />\n <stop offset=\"1\" stop-color=\"#86C504\" />\n </radialGradient>\n <linearGradient\n id=\"paint7_linear_2162_5756\"\n x1=\"10.9197\"\n y1=\"20.3483\"\n x2=\"13.5279\"\n y2=\"20.3483\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"#0FBC5C\" />\n <stop offset=\"1\" stop-color=\"#0CBA65\" />\n </linearGradient>\n </defs>\n</svg>\n\n<svg\n *ngIf=\"icon === 'facebook'\"\n [ngClass]=\"[\n 'o-svg',\n 'o-svg__facebook',\n 'o-svg--' + size,\n extraClass ? 'o-svg__extra-class--' + extraClass : ''\n ]\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20102 1.5 1.5 6.20101 1.5 12C1.5 16.9243 4.89003 21.0561 9.46345 22.1908V15.2086H7.29827V12H9.46345V10.6174C9.46345 7.04353 11.0808 5.38705 14.5895 5.38705C15.2547 5.38705 16.4025 5.51746 16.872 5.64792V8.55658C16.6242 8.5305 16.1938 8.51744 15.659 8.51744C13.9373 8.51744 13.2721 9.16962 13.2721 10.8652V12H16.7017L16.1126 15.2086H13.2721V22.4231C18.4711 21.7952 22.5 17.3684 22.5 12Z\"\n fill=\"#0866FF\"\n />\n <path\n d=\"M16.1125 15.2086L16.7017 12H13.272V10.8652C13.272 9.16958 13.9372 8.51745 15.6589 8.51745C16.1937 8.51745 16.6241 8.53047 16.872 8.55655V5.64792C16.4024 5.51747 15.2546 5.38702 14.5894 5.38702C11.0808 5.38702 9.4634 7.04354 9.4634 10.6174V12H7.29822V15.2086H9.4634V22.1908C10.2758 22.3923 11.1253 22.5 11.9999 22.5C12.4306 22.5 12.855 22.4735 13.272 22.4231V15.2086H16.1125Z\"\n fill=\"white\"\n />\n</svg>\n", styles: [".o-svg{display:flex}.o-svg--lg{width:1.5rem;height:1.5rem}.o-svg--md{width:1.25rem;height:1.25rem}.o-svg--sm{width:1rem;height:1rem}.o-svg--xs{width:.875rem;height:.875rem}.o-svg__alert{display:inline-block}.o-svg__extra-class--primary path{fill:var(--color-button-primary-content-default)}.o-svg__extra-class--secondary path{fill:var(--color-button-secondary-content-default)}.o-svg__extra-class--tertiary path{fill:var(--color-button-tertiary-content-default)}.o-svg__extra-class--neutral path{fill:var(--color-button-neutral-content-default)}.o-svg__extra-class--danger path{fill:var(--color-action-danger-border-default)}.o-svg__extra-class--inverse path{fill:var(--color-action-inverse-content-default)}.o-svg__extra-class--disabled path{fill:var(--color-button-primary-content-disabled)}.o-svg__extra-class--button-primary path{fill:var(--color-button-primary-content-default)}.o-svg__extra-class--button-secondary path{fill:var(--color-button-secondary-content-default)}.o-svg__extra-class--button-tertiary path{fill:var(--color-button-tertiary-content-default)}.o-svg__extra-class--button-danger path{fill:#fff}.o-svg__extra-class--button-inverse path{fill:var(--color-button-inverse-content-default)}.o-svg__extra-class--button-neutral path{fill:var(--color-action-neutral-content-default)}@keyframes spin{to{transform:rotate(360deg)}}.o-svg__spinner{width:100%;height:100%;display:inline-block;animation:spin 1s linear infinite;transform-origin:center center}.o-svg__spinner--secondary path{fill:var(--color-button-secondary-content-default)}.o-svg__spinner--tertiary path{fill:var(--color-button-tertiary-content-default)}.o-svg__spinner--disabled path{fill:var(--color-button-secondary-content-disabled)}.o-svg__spinner--inverse path{fill:var(--color-button-inverse-content-default)}.o-svg__spinner--neutral path{fill:var(--color-button-neutral-content-default)}\n"] }]
|
|
19
19
|
}], propDecorators: { extraClass: [{
|
|
20
20
|
type: Input
|
|
21
21
|
}], variant: [{
|
|
@@ -48,11 +48,11 @@ class AccordionComponent {
|
|
|
48
48
|
this.toggled.emit(this.expanded);
|
|
49
49
|
}
|
|
50
50
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
51
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
51
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: AccordionComponent, isStandalone: true, selector: "lib-accordion", inputs: { id: "id", expanded: "expanded", size: "size", title: "title", showText: "showText", text: "text", showSlot: "showSlot", swapTemplate: "swapTemplate" }, outputs: { expandedChange: "expandedChange", toggled: "toggled" }, ngImport: i0, template: "<div\n class=\"c-accordion\"\n [class.c-accordion--expanded]=\"expanded\"\n [class.c-accordion--sm]=\"size==='sm'\"\n [class.c-accordion--md]=\"size==='md'\"\n>\n <div\n class=\"c-accordion__header\"\n role=\"button\"\n [id]=\"id + '-header'\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-controls]=\"id + '-content'\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n <span class=\"c-accordion__title\">{{ title }}</span>\n <span class=\"c-accordion__arrow\" *ngIf=\"!expanded\" [class.open]=\"expanded\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'down'\" />\n </span>\n <span class=\"c-accordion__arrow\" *ngIf=\"expanded\" [class.open]=\"expanded\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'up'\" />\n </span>\n </div>\n\n <div\n class=\"c-accordion__content\"\n *ngIf=\"expanded\"\n [id]=\"id + '-content'\"\n role=\"region\"\n [attr.aria-labelledby]=\"id + '-header'\"\n >\n <ng-container *ngIf=\"swapTemplate; else normalContent\">\n <ng-container *ngTemplateOutlet=\"swapTemplate\"></ng-container>\n </ng-container>\n <ng-template #normalContent>\n <div class=\"c-accordion__text\" *ngIf=\"showText\">\n {{ text }}\n </div>\n @if (showSlot) {\n <ng-content></ng-content>\n }\n </ng-template>\n </div>\n</div>\n", styles: [".c-accordion{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft, #d6e0df)}.c-accordion--sm .c-accordion__header{padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.c-accordion--sm .c-accordion__title{font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__text{font-size:var(--typography-body-sm-size, .875rem);font-style:normal;font-weight:var(--typography-body-sm-weight, 400);line-height:var(--typography-body-sm-line-height, 1.25rem);letter-spacing:var(--typography-body-sm-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__content{display:flex;padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__header{display:flex;justify-content:space-between;align-items:center;background:var(--color-textfield-background-default, #f7f7f7);padding:var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-lg, 1rem);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s;align-self:stretch;box-sizing:border-box;gap:var(--space-component-gap-md, .5rem)}.c-accordion__header:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-accordion__header:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-accordion__header:active{background:var(--color-action-neutral-background-pressed, rgba(0, 0, 0, .06))}.c-accordion__title{flex:1;color:var(--color-core-content-default, #070707);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-strong-size, 1.125rem);font-style:normal;font-weight:var(--typography-label-lg-strong-weight, 700);line-height:var(--typography-label-lg-strong-line-height, 1.75rem);letter-spacing:var(--typography-label-lg-strong-letter-spacing, 0rem)}.c-accordion__content{display:flex;padding:0rem var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__text{color:var(--color-core-content-soft, #535858);font-family:var(--typography-body-md-family, Satoshi);font-size:var(--typography-body-md-size, 1rem);font-style:normal;font-weight:var(--typography-body-md-weight, 400);line-height:var(--typography-body-md-line-height, 1.5rem);letter-spacing:var(--typography-body-md-letter-spacing, 0rem)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }] });
|
|
52
52
|
}
|
|
53
53
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
54
54
|
type: Component,
|
|
55
|
-
args: [{ selector: 'lib-accordion', standalone: true, imports: [CommonModule, IconComponent], template: "<div\n class=\"c-accordion\"\n [class.c-accordion--expanded]=\"expanded\"\n [class.c-accordion--sm]=\"size==='sm'\"\n [class.c-accordion--md]=\"size==='md'\"\n>\n <div\n class=\"c-accordion__header\"\n role=\"button\"\n [id]=\"id + '-header'\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-controls]=\"id + '-content'\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n <span class=\"c-accordion__title\">{{ title }}</span>\n <span class=\"c-accordion__arrow\" *ngIf=\"!expanded\" [class.open]=\"expanded\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'down'\" />\n </span>\n <span class=\"c-accordion__arrow\" *ngIf=\"expanded\" [class.open]=\"expanded\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'up'\" />\n </span>\n </div>\n\n <div\n class=\"c-accordion__content\"\n *ngIf=\"expanded\"\n [id]=\"id + '-content'\"\n role=\"region\"\n [attr.aria-labelledby]=\"id + '-header'\"\n >\n <ng-container *ngIf=\"swapTemplate; else normalContent\">\n <ng-container *ngTemplateOutlet=\"swapTemplate\"></ng-container>\n </ng-container>\n <ng-template #normalContent>\n <
|
|
55
|
+
args: [{ selector: 'lib-accordion', standalone: true, imports: [CommonModule, IconComponent], template: "<div\n class=\"c-accordion\"\n [class.c-accordion--expanded]=\"expanded\"\n [class.c-accordion--sm]=\"size==='sm'\"\n [class.c-accordion--md]=\"size==='md'\"\n>\n <div\n class=\"c-accordion__header\"\n role=\"button\"\n [id]=\"id + '-header'\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-controls]=\"id + '-content'\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n <span class=\"c-accordion__title\">{{ title }}</span>\n <span class=\"c-accordion__arrow\" *ngIf=\"!expanded\" [class.open]=\"expanded\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'down'\" />\n </span>\n <span class=\"c-accordion__arrow\" *ngIf=\"expanded\" [class.open]=\"expanded\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'up'\" />\n </span>\n </div>\n\n <div\n class=\"c-accordion__content\"\n *ngIf=\"expanded\"\n [id]=\"id + '-content'\"\n role=\"region\"\n [attr.aria-labelledby]=\"id + '-header'\"\n >\n <ng-container *ngIf=\"swapTemplate; else normalContent\">\n <ng-container *ngTemplateOutlet=\"swapTemplate\"></ng-container>\n </ng-container>\n <ng-template #normalContent>\n <div class=\"c-accordion__text\" *ngIf=\"showText\">\n {{ text }}\n </div>\n @if (showSlot) {\n <ng-content></ng-content>\n }\n </ng-template>\n </div>\n</div>\n", styles: [".c-accordion{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft, #d6e0df)}.c-accordion--sm .c-accordion__header{padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.c-accordion--sm .c-accordion__title{font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__text{font-size:var(--typography-body-sm-size, .875rem);font-style:normal;font-weight:var(--typography-body-sm-weight, 400);line-height:var(--typography-body-sm-line-height, 1.25rem);letter-spacing:var(--typography-body-sm-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__content{display:flex;padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__header{display:flex;justify-content:space-between;align-items:center;background:var(--color-textfield-background-default, #f7f7f7);padding:var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-lg, 1rem);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s;align-self:stretch;box-sizing:border-box;gap:var(--space-component-gap-md, .5rem)}.c-accordion__header:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-accordion__header:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-accordion__header:active{background:var(--color-action-neutral-background-pressed, rgba(0, 0, 0, .06))}.c-accordion__title{flex:1;color:var(--color-core-content-default, #070707);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-strong-size, 1.125rem);font-style:normal;font-weight:var(--typography-label-lg-strong-weight, 700);line-height:var(--typography-label-lg-strong-line-height, 1.75rem);letter-spacing:var(--typography-label-lg-strong-letter-spacing, 0rem)}.c-accordion__content{display:flex;padding:0rem var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__text{color:var(--color-core-content-soft, #535858);font-family:var(--typography-body-md-family, Satoshi);font-size:var(--typography-body-md-size, 1rem);font-style:normal;font-weight:var(--typography-body-md-weight, 400);line-height:var(--typography-body-md-line-height, 1.5rem);letter-spacing:var(--typography-body-md-letter-spacing, 0rem)}\n"] }]
|
|
56
56
|
}], propDecorators: { id: [{
|
|
57
57
|
type: Input
|
|
58
58
|
}], expanded: [{
|
|
@@ -85,7 +85,7 @@ class ButtonIconComponent {
|
|
|
85
85
|
/** Variant: afecta colores y contraste */
|
|
86
86
|
variant = 'primary';
|
|
87
87
|
/** Tamaño */
|
|
88
|
-
size = '
|
|
88
|
+
size = 'lg';
|
|
89
89
|
/** Combina clases BEM según inputs */
|
|
90
90
|
get classes() {
|
|
91
91
|
const c = [
|
|
@@ -103,12 +103,21 @@ class ButtonIconComponent {
|
|
|
103
103
|
return this.ariaLabel;
|
|
104
104
|
return null;
|
|
105
105
|
}
|
|
106
|
+
/** Mapea el tamaño del botón al tamaño del icono */
|
|
107
|
+
get iconSize() {
|
|
108
|
+
// Si el botón es xs, el icono debe ser sm
|
|
109
|
+
if (this.size === 'xs') {
|
|
110
|
+
return 'sm';
|
|
111
|
+
}
|
|
112
|
+
// Para todos los demás tamaños, el icono es md
|
|
113
|
+
return 'md';
|
|
114
|
+
}
|
|
106
115
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
107
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ButtonIconComponent, isStandalone: true, selector: "lib-button-icon", inputs: { ariaLabel: "ariaLabel", disabled: "disabled", loading: "loading", variant: "variant", size: "size" }, ngImport: i0, template: "<button\n type=\"button\"\n [ngClass]=\"classes\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"computedAriaLabel\"\n [attr.aria-busy]=\"loading ? 'true' : null\"\n>\n <!-- Spinner visual -->\n <span *ngIf=\"loading\" class=\"c-button-icon__loading\" aria-hidden=\"true\"><lib-icon
|
|
116
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ButtonIconComponent, isStandalone: true, selector: "lib-button-icon", inputs: { ariaLabel: "ariaLabel", disabled: "disabled", loading: "loading", variant: "variant", size: "size" }, ngImport: i0, template: "<button\n type=\"button\"\n [ngClass]=\"classes\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"computedAriaLabel\"\n [attr.aria-busy]=\"loading ? 'true' : null\"\n>\n <!-- Spinner visual -->\n <span *ngIf=\"loading\" class=\"c-button-icon__loading\" aria-hidden=\"true\"\n ><lib-icon\n icon=\"spinner\"\n [extraClass]=\"disabled ? 'disabled' : variant\"\n ></lib-icon\n ></span>\n <!-- Icon antes (siempre queda el slot) -->\n <span *ngIf=\"!loading\" class=\"c-button-icon__icon\">\n <ng-content select=\"[iconBefore]\"></ng-content>\n </span>\n</button>\n", styles: [".c-button-icon{display:flex;align-items:center;justify-content:center;height:48px;width:48px;cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:0;border-radius:var(--size-button-border-radius);background-color:var(--color-button-primary-background-default);border:var(--size-button-border-width) solid var(--color-button-primary-border-default)}.c-button-icon:hover{background-color:var(--color-button-primary-background-hover);border:var(--size-button-border-width) solid var(--color-button-primary-border-hover)}.c-button-icon:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-button-icon:active{background-color:var(--color-button-primary-background-pressed);border:var(--size-button-border-width) solid var(--color-button-primary-border-pressed)}.c-button-icon:disabled{background-color:var(--color-button-primary-background-disabled);border:var(--size-button-border-width) solid var(--color-button-primary-border-disabled);color:var(--color-button-primary-content-disabled)}.c-button-icon__loading{width:20px;height:20px}.c-button-icon--md{gap:var(--space-component-gap-md);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);height:40px;width:40px}.c-button-icon--sm{gap:var(--space-component-gap-md);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);height:32px;width:32px}.c-button-icon--xs{gap:var(--space-component-gap-md);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing);color:var(--color-button-primary-content-default);height:24px;width:24px}.c-button-icon--xs .c-button-icon__icon,.c-button-icon--xs .c-button-icon__loading{width:16px;height:16px}.c-button-icon--secondary{background-color:transparent;border:var(--size-button-border-width) solid var(--color-button-secondary-border-default);color:var(--color-button-secondary-content-default)}.c-button-icon--secondary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button-icon--secondary:active{background-color:var(--color-button-secondary-background-pressed)}.c-button-icon--secondary:disabled{background-color:var(--color-button-secondary-background-disabled);border:var(--size-button-border-width) solid var(--color-button-secondary-border-disabled);color:var(--color-button-secondary-content-disabled)}.c-button-icon--tertiary{background-color:transparent;border:var(--size-button-border-width) solid transparent;color:var(--color-button-secondary-content-default)}.c-button-icon--tertiary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button-icon--tertiary:active{background-color:var(--color-button-secondary-background-pressed)}.c-button-icon--tertiary:disabled{background-color:transparent;border:0;color:var(--color-button-secondary-content-disabled)}.c-button-icon--neutral{background-color:var(--color-button-neutral-background-default);border:var(--size-button-border-width) solid var(--color-button-neutral-border-default);color:var(--color-button-neutral-content-default)}.c-button-icon--neutral:hover{background-color:var(--color-button-neutral-background-hover);border:var(--size-button-border-width) solid var(--color-button-neutral-border-hover)}.c-button-icon--neutral:active{background-color:var(--color-button-neutral-background-pressed);border:var(--size-button-border-width) solid var(--color-button-neutral-border-pressed)}.c-button-icon--neutral:disabled{background-color:var(--color-button-neutral-background-disabled);color:var(--color-button-neutral-content-disabled);border:var(--size-button-border-width) solid var(--color-button-neutral-border-disabled)}.c-button-icon--inverse{background-color:var(--color-button-inverse-background-default);border:var(--size-button-border-width) solid var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-default)}.c-button-icon--inverse:hover{background-color:var(--color-button-inverse-background-hover);border:var(--size-button-border-width) solid var(--color-button-inverse-border-default)}.c-button-icon--inverse:active{background-color:var(--color-button-inverse-background-pressed);border:var(--size-button-border-width) solid var(--color-button-inverse-border-pressed)}.c-button-icon--inverse:disabled{background-color:var(--color-button-inverse-background-disabled);color:var(--color-button-inverse-content-disabled);border:var(--size-button-border-width) solid var(--color-button-inverse-border-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }] });
|
|
108
117
|
}
|
|
109
118
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonIconComponent, decorators: [{
|
|
110
119
|
type: Component,
|
|
111
|
-
args: [{ selector: 'lib-button-icon', imports: [CommonModule, IconComponent], template: "<button\n type=\"button\"\n [ngClass]=\"classes\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"computedAriaLabel\"\n [attr.aria-busy]=\"loading ? 'true' : null\"\n>\n <!-- Spinner visual -->\n <span *ngIf=\"loading\" class=\"c-button-icon__loading\" aria-hidden=\"true\"><lib-icon
|
|
120
|
+
args: [{ selector: 'lib-button-icon', imports: [CommonModule, IconComponent], template: "<button\n type=\"button\"\n [ngClass]=\"classes\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"computedAriaLabel\"\n [attr.aria-busy]=\"loading ? 'true' : null\"\n>\n <!-- Spinner visual -->\n <span *ngIf=\"loading\" class=\"c-button-icon__loading\" aria-hidden=\"true\"\n ><lib-icon\n icon=\"spinner\"\n [extraClass]=\"disabled ? 'disabled' : variant\"\n ></lib-icon\n ></span>\n <!-- Icon antes (siempre queda el slot) -->\n <span *ngIf=\"!loading\" class=\"c-button-icon__icon\">\n <ng-content select=\"[iconBefore]\"></ng-content>\n </span>\n</button>\n", styles: [".c-button-icon{display:flex;align-items:center;justify-content:center;height:48px;width:48px;cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:0;border-radius:var(--size-button-border-radius);background-color:var(--color-button-primary-background-default);border:var(--size-button-border-width) solid var(--color-button-primary-border-default)}.c-button-icon:hover{background-color:var(--color-button-primary-background-hover);border:var(--size-button-border-width) solid var(--color-button-primary-border-hover)}.c-button-icon:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-button-icon:active{background-color:var(--color-button-primary-background-pressed);border:var(--size-button-border-width) solid var(--color-button-primary-border-pressed)}.c-button-icon:disabled{background-color:var(--color-button-primary-background-disabled);border:var(--size-button-border-width) solid var(--color-button-primary-border-disabled);color:var(--color-button-primary-content-disabled)}.c-button-icon__loading{width:20px;height:20px}.c-button-icon--md{gap:var(--space-component-gap-md);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);height:40px;width:40px}.c-button-icon--sm{gap:var(--space-component-gap-md);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);height:32px;width:32px}.c-button-icon--xs{gap:var(--space-component-gap-md);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing);color:var(--color-button-primary-content-default);height:24px;width:24px}.c-button-icon--xs .c-button-icon__icon,.c-button-icon--xs .c-button-icon__loading{width:16px;height:16px}.c-button-icon--secondary{background-color:transparent;border:var(--size-button-border-width) solid var(--color-button-secondary-border-default);color:var(--color-button-secondary-content-default)}.c-button-icon--secondary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button-icon--secondary:active{background-color:var(--color-button-secondary-background-pressed)}.c-button-icon--secondary:disabled{background-color:var(--color-button-secondary-background-disabled);border:var(--size-button-border-width) solid var(--color-button-secondary-border-disabled);color:var(--color-button-secondary-content-disabled)}.c-button-icon--tertiary{background-color:transparent;border:var(--size-button-border-width) solid transparent;color:var(--color-button-secondary-content-default)}.c-button-icon--tertiary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button-icon--tertiary:active{background-color:var(--color-button-secondary-background-pressed)}.c-button-icon--tertiary:disabled{background-color:transparent;border:0;color:var(--color-button-secondary-content-disabled)}.c-button-icon--neutral{background-color:var(--color-button-neutral-background-default);border:var(--size-button-border-width) solid var(--color-button-neutral-border-default);color:var(--color-button-neutral-content-default)}.c-button-icon--neutral:hover{background-color:var(--color-button-neutral-background-hover);border:var(--size-button-border-width) solid var(--color-button-neutral-border-hover)}.c-button-icon--neutral:active{background-color:var(--color-button-neutral-background-pressed);border:var(--size-button-border-width) solid var(--color-button-neutral-border-pressed)}.c-button-icon--neutral:disabled{background-color:var(--color-button-neutral-background-disabled);color:var(--color-button-neutral-content-disabled);border:var(--size-button-border-width) solid var(--color-button-neutral-border-disabled)}.c-button-icon--inverse{background-color:var(--color-button-inverse-background-default);border:var(--size-button-border-width) solid var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-default)}.c-button-icon--inverse:hover{background-color:var(--color-button-inverse-background-hover);border:var(--size-button-border-width) solid var(--color-button-inverse-border-default)}.c-button-icon--inverse:active{background-color:var(--color-button-inverse-background-pressed);border:var(--size-button-border-width) solid var(--color-button-inverse-border-pressed)}.c-button-icon--inverse:disabled{background-color:var(--color-button-inverse-background-disabled);color:var(--color-button-inverse-content-disabled);border:var(--size-button-border-width) solid var(--color-button-inverse-border-disabled)}\n"] }]
|
|
112
121
|
}], propDecorators: { ariaLabel: [{
|
|
113
122
|
type: Input
|
|
114
123
|
}], disabled: [{
|
|
@@ -122,18 +131,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
122
131
|
}] } });
|
|
123
132
|
|
|
124
133
|
class AlertComponent {
|
|
125
|
-
variant = 'neutral';
|
|
126
|
-
text = '';
|
|
127
|
-
title = '';
|
|
128
|
-
time = 10;
|
|
129
|
-
extraClass = '';
|
|
130
|
-
showIcon = true;
|
|
134
|
+
variant = input('neutral');
|
|
135
|
+
text = input('');
|
|
136
|
+
title = input('');
|
|
137
|
+
time = input(10);
|
|
138
|
+
extraClass = input('');
|
|
139
|
+
showIcon = input(true);
|
|
131
140
|
visibility = true;
|
|
132
141
|
closeActive = false;
|
|
133
142
|
ngOnInit() {
|
|
134
143
|
setTimeout(() => {
|
|
135
144
|
this.close();
|
|
136
|
-
}, this.time * 1000);
|
|
145
|
+
}, this.time() * 1000);
|
|
137
146
|
}
|
|
138
147
|
close() {
|
|
139
148
|
this.closeActive = true;
|
|
@@ -142,24 +151,12 @@ class AlertComponent {
|
|
|
142
151
|
}, 1000);
|
|
143
152
|
}
|
|
144
153
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
145
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
154
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: AlertComponent, isStandalone: true, selector: "lib-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, time: { classPropertyName: "time", publicName: "time", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n role=\"alert\"\n *ngIf=\"visibility\"\n [ngClass]=\"[\n 'c-alert',\n variant() ? 'c-alert--' + variant() : '',\n extraClass() ? extraClass() : '',\n closeActive ? 'c-alert--hide' : ''\n ]\"\n>\n <lib-icon *ngIf=\"showIcon()\" [icon]=\"variant()\" size=\"lg\" />\n <div class=\"c-alert__content\">\n <p class=\"c-alert__title\">{{ title() }}</p>\n <p class=\"c-alert__text\">{{ text() }}</p>\n </div>\n <lib-button-icon\n role=\"button\"\n [ariaLabel]=\"variant()\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-alert__close\"\n (click)=\"close()\"\n >\n <lib-icon icon=\"close\" size=\"sm\" iconBefore />\n </lib-button-icon>\n</div>\n", styles: ["@keyframes toast-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}.c-alert{position:fixed;width:100%;width:-moz-available;width:-webkit-fill-available;width:stretch;top:0;right:0;margin:var(--space-component-padding-lg);z-index:10;padding:var(--space-component-padding-md);border-radius:var(--size-textfield-border-radius);border:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-surface-raised);gap:var(--space-component-gap-md);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft),0 4px 8px 0 var(--color-effect-shadow-soft);display:flex;align-items:flex-start;transition:opacity .3s ease,transform .3s ease;animation:toast-in .3s ease forwards}.c-alert--alert{border-color:var(--color-feedback-danger-surface-border);background:var(--color-feedback-danger-surface-background)}.c-alert--success{border-color:var(--color-feedback-success-surface-border);background:var(--color-feedback-success-surface-background)}.c-alert--warning{border-color:var(--color-feedback-warning-surface-border);background:var(--color-feedback-warning-surface-background)}.c-alert--info{border-color:var(--color-feedback-info-surface-border);background:var(--color-feedback-info-surface-background)}.c-alert--neutral{border-color:var(--color-core-border-default);background:var(--color-core-background-neutral-soft)}.c-alert__content{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--space-component-gap-sm)}.c-alert__close{justify-self:flex-end;margin:0 0 0 auto}.c-alert__title{color:var(--color-core-content-default);font-family:var(--typography-title-sm-family);font-size:var(--typography-title-sm-size);font-style:normal;font-weight:var(--typography-title-sm-weight);line-height:var(--typography-title-sm-line-height);letter-spacing:var(--typography-title-sm-letter-spacing);margin:0 0 auto}.c-alert__text{color:var(--color-core-content-soft);font-family:var(--typography-body-sm-family);font-size:var(--typography-body-sm-size);font-style:normal;font-weight:var(--typography-body-sm-weight);line-height:var(--typography-body-sm-line-height);letter-spacing:var(--typography-body-sm-letter-spacing);margin:0 0 auto}.c-alert--hide{animation:toast-out .3s ease forwards}@media (min-width: 48rem){.c-alert{width:336px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "disabled", "loading", "variant", "size"] }] });
|
|
146
155
|
}
|
|
147
156
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AlertComponent, decorators: [{
|
|
148
157
|
type: Component,
|
|
149
|
-
args: [{ selector: 'lib-alert', imports: [CommonModule, IconComponent, ButtonIconComponent], template: "<div
|
|
150
|
-
}]
|
|
151
|
-
type: Input
|
|
152
|
-
}], text: [{
|
|
153
|
-
type: Input
|
|
154
|
-
}], title: [{
|
|
155
|
-
type: Input
|
|
156
|
-
}], time: [{
|
|
157
|
-
type: Input
|
|
158
|
-
}], extraClass: [{
|
|
159
|
-
type: Input
|
|
160
|
-
}], showIcon: [{
|
|
161
|
-
type: Input
|
|
162
|
-
}] } });
|
|
158
|
+
args: [{ selector: 'lib-alert', imports: [CommonModule, IconComponent, ButtonIconComponent], template: "<div\n role=\"alert\"\n *ngIf=\"visibility\"\n [ngClass]=\"[\n 'c-alert',\n variant() ? 'c-alert--' + variant() : '',\n extraClass() ? extraClass() : '',\n closeActive ? 'c-alert--hide' : ''\n ]\"\n>\n <lib-icon *ngIf=\"showIcon()\" [icon]=\"variant()\" size=\"lg\" />\n <div class=\"c-alert__content\">\n <p class=\"c-alert__title\">{{ title() }}</p>\n <p class=\"c-alert__text\">{{ text() }}</p>\n </div>\n <lib-button-icon\n role=\"button\"\n [ariaLabel]=\"variant()\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-alert__close\"\n (click)=\"close()\"\n >\n <lib-icon icon=\"close\" size=\"sm\" iconBefore />\n </lib-button-icon>\n</div>\n", styles: ["@keyframes toast-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}.c-alert{position:fixed;width:100%;width:-moz-available;width:-webkit-fill-available;width:stretch;top:0;right:0;margin:var(--space-component-padding-lg);z-index:10;padding:var(--space-component-padding-md);border-radius:var(--size-textfield-border-radius);border:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-surface-raised);gap:var(--space-component-gap-md);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft),0 4px 8px 0 var(--color-effect-shadow-soft);display:flex;align-items:flex-start;transition:opacity .3s ease,transform .3s ease;animation:toast-in .3s ease forwards}.c-alert--alert{border-color:var(--color-feedback-danger-surface-border);background:var(--color-feedback-danger-surface-background)}.c-alert--success{border-color:var(--color-feedback-success-surface-border);background:var(--color-feedback-success-surface-background)}.c-alert--warning{border-color:var(--color-feedback-warning-surface-border);background:var(--color-feedback-warning-surface-background)}.c-alert--info{border-color:var(--color-feedback-info-surface-border);background:var(--color-feedback-info-surface-background)}.c-alert--neutral{border-color:var(--color-core-border-default);background:var(--color-core-background-neutral-soft)}.c-alert__content{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--space-component-gap-sm)}.c-alert__close{justify-self:flex-end;margin:0 0 0 auto}.c-alert__title{color:var(--color-core-content-default);font-family:var(--typography-title-sm-family);font-size:var(--typography-title-sm-size);font-style:normal;font-weight:var(--typography-title-sm-weight);line-height:var(--typography-title-sm-line-height);letter-spacing:var(--typography-title-sm-letter-spacing);margin:0 0 auto}.c-alert__text{color:var(--color-core-content-soft);font-family:var(--typography-body-sm-family);font-size:var(--typography-body-sm-size);font-style:normal;font-weight:var(--typography-body-sm-weight);line-height:var(--typography-body-sm-line-height);letter-spacing:var(--typography-body-sm-letter-spacing);margin:0 0 auto}.c-alert--hide{animation:toast-out .3s ease forwards}@media (min-width: 48rem){.c-alert{width:336px}}\n"] }]
|
|
159
|
+
}] });
|
|
163
160
|
|
|
164
161
|
class ArrowsComponent {
|
|
165
162
|
fullWidth = input(false);
|
|
@@ -195,25 +192,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
195
192
|
}] });
|
|
196
193
|
|
|
197
194
|
class AvatarComponent {
|
|
198
|
-
size = 'lg';
|
|
199
|
-
initial = '';
|
|
200
|
-
src = '';
|
|
201
|
-
alt = '';
|
|
195
|
+
size = input('lg');
|
|
196
|
+
initial = input('');
|
|
197
|
+
src = input('');
|
|
198
|
+
alt = input('');
|
|
199
|
+
iconName = input('');
|
|
202
200
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
203
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
201
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: AvatarComponent, isStandalone: true, selector: "lib-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, initial: { classPropertyName: "initial", publicName: "initial", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<figure\n [ngClass]=\"[\n 'c-avatar',\n 'c-avatar__' + size(),\n !src() && !initial() ? 'c-avatar--no-img' : '',\n !src() && initial() ? 'c-avatar--initial' : ''\n ]\"\n>\n <img *ngIf=\"src()\" [src]=\"src()\" [alt]=\"alt()\" class=\"c-avatar__img\" />\n <lib-icon [icon]=\"iconName()\" *ngIf=\"!src() && !initial()\" [size]=\"size()\" />\n <span class=\"c-avatar--initial\" *ngIf=\"!src() && initial()\">{{\n initial() | uppercase\n }}</span>\n</figure>\n", styles: [".c-avatar{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;background:transparent;display:flex;align-items:center;justify-content:center;border-radius:var(--size-border-radius-full);background:var(--color-feedback-neutral-surface-background);overflow:hidden;cursor:pointer}.c-avatar__img{width:100%;height:100%;object-fit:cover;object-position:center}.c-avatar__lg{width:3rem;height:3rem}.c-avatar__lg .c-avatar--initial{color:var(--color-feedback-neutral-default);text-align:center;font-family:var(--typography-title-lg-family);font-size:var(--typography-title-lg-size);font-style:normal;font-weight:var(--typography-title-lg-weight);line-height:var(--typography-title-lg-line-height);letter-spacing:var(--typography-title-lg-letter-spacing)}.c-avatar__md{width:2.5rem;height:2.5rem}.c-avatar__md .c-avatar--initial{color:var(--color-feedback-neutral-default);text-align:center;font-family:var(--typography-title-md-family);font-size:var(--typography-title-md-size);font-style:normal;font-weight:var(--typography-title-md-weight);line-height:var(--typography-title-md-line-height);letter-spacing:var(--typography-title-md-letter-spacing)}.c-avatar__sm{width:2rem;height:2rem}.c-avatar__sm .c-avatar--initial{color:var(--color-feedback-neutral-default);text-align:center;font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-avatar__xs{width:1.5rem;height:1.5rem}.c-avatar__xs .c-avatar--initial{color:var(--color-feedback-neutral-default);text-align:center;font-family:var(--typography-label-sm-strong-family);font-size:var(--typography-label-sm-strong-size);font-style:normal;font-weight:var(--typography-label-sm-strong-weight);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }] });
|
|
204
202
|
}
|
|
205
203
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
206
204
|
type: Component,
|
|
207
|
-
args: [{ selector: 'lib-avatar', imports: [CommonModule, IconComponent], template: "<figure
|
|
208
|
-
}]
|
|
209
|
-
type: Input
|
|
210
|
-
}], initial: [{
|
|
211
|
-
type: Input
|
|
212
|
-
}], src: [{
|
|
213
|
-
type: Input
|
|
214
|
-
}], alt: [{
|
|
215
|
-
type: Input
|
|
216
|
-
}] } });
|
|
205
|
+
args: [{ selector: 'lib-avatar', imports: [CommonModule, IconComponent], template: "<figure\n [ngClass]=\"[\n 'c-avatar',\n 'c-avatar__' + size(),\n !src() && !initial() ? 'c-avatar--no-img' : '',\n !src() && initial() ? 'c-avatar--initial' : ''\n ]\"\n>\n <img *ngIf=\"src()\" [src]=\"src()\" [alt]=\"alt()\" class=\"c-avatar__img\" />\n <lib-icon [icon]=\"iconName()\" *ngIf=\"!src() && !initial()\" [size]=\"size()\" />\n <span class=\"c-avatar--initial\" *ngIf=\"!src() && initial()\">{{\n initial() | uppercase\n }}</span>\n</figure>\n", styles: [".c-avatar{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;background:transparent;display:flex;align-items:center;justify-content:center;border-radius:var(--size-border-radius-full);background:var(--color-feedback-neutral-surface-background);overflow:hidden;cursor:pointer}.c-avatar__img{width:100%;height:100%;object-fit:cover;object-position:center}.c-avatar__lg{width:3rem;height:3rem}.c-avatar__lg .c-avatar--initial{color:var(--color-feedback-neutral-default);text-align:center;font-family:var(--typography-title-lg-family);font-size:var(--typography-title-lg-size);font-style:normal;font-weight:var(--typography-title-lg-weight);line-height:var(--typography-title-lg-line-height);letter-spacing:var(--typography-title-lg-letter-spacing)}.c-avatar__md{width:2.5rem;height:2.5rem}.c-avatar__md .c-avatar--initial{color:var(--color-feedback-neutral-default);text-align:center;font-family:var(--typography-title-md-family);font-size:var(--typography-title-md-size);font-style:normal;font-weight:var(--typography-title-md-weight);line-height:var(--typography-title-md-line-height);letter-spacing:var(--typography-title-md-letter-spacing)}.c-avatar__sm{width:2rem;height:2rem}.c-avatar__sm .c-avatar--initial{color:var(--color-feedback-neutral-default);text-align:center;font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-avatar__xs{width:1.5rem;height:1.5rem}.c-avatar__xs .c-avatar--initial{color:var(--color-feedback-neutral-default);text-align:center;font-family:var(--typography-label-sm-strong-family);font-size:var(--typography-label-sm-strong-size);font-style:normal;font-weight:var(--typography-label-sm-strong-weight);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}\n"] }]
|
|
206
|
+
}] });
|
|
217
207
|
|
|
218
208
|
class BadgeComponent {
|
|
219
209
|
extraClass = '';
|
|
@@ -239,7 +229,7 @@ class ButtonComponent {
|
|
|
239
229
|
disabled = false;
|
|
240
230
|
loading = false;
|
|
241
231
|
variant = 'primary';
|
|
242
|
-
size = '
|
|
232
|
+
size = 'lg';
|
|
243
233
|
loadingText = '';
|
|
244
234
|
fullWidth = false;
|
|
245
235
|
iconBeforeContent;
|
|
@@ -377,11 +367,11 @@ class ButtonSetComponent {
|
|
|
377
367
|
console.log('Tertiary clicked');
|
|
378
368
|
}
|
|
379
369
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
380
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ButtonSetComponent, isStandalone: true, selector: "lib-button-set", inputs: { primaryText: "primaryText", secondaryText: "secondaryText", tertiaryText: "tertiaryText", align: "align" }, ngImport: i0, template: "<div class=\"c-button-set\" [ngClass]=\"alignmentClass\">\n
|
|
370
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ButtonSetComponent, isStandalone: true, selector: "lib-button-set", inputs: { primaryText: "primaryText", secondaryText: "secondaryText", tertiaryText: "tertiaryText", align: "align" }, ngImport: i0, template: "<div class=\"c-button-set\" [ngClass]=\"alignmentClass\">\n <lib-link\n [text]=\"tertiaryText\"\n variant=\"primary\"\n (click)=\"handleTertiaryClick()\"\n ></lib-link>\n\n <lib-button\n [text]=\"secondaryText\"\n variant=\"secondary\"\n size=\"lg\"\n (click)=\"handleSecondaryClick()\"\n ></lib-button>\n\n <lib-button\n [text]=\"primaryText\"\n variant=\"primary\"\n size=\"lg\"\n (click)=\"handlePrimaryClick()\"\n ></lib-button>\n</div>\n", styles: [".c-button-set{display:flex;align-items:center;gap:var(--space-container-stack-md)}.c-button-set--right{flex-direction:row}.c-button-set--left{flex-direction:row-reverse}.c-button-set--stacked{flex-direction:column-reverse}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "ariaLabel", "disabled", "loading", "variant", "size", "loadingText", "fullWidth"] }, { kind: "component", type: LinkComponent, selector: "lib-link", inputs: ["text", "loadingText", "href", "external", "disabled", "variant", "size", "weight"] }] });
|
|
381
371
|
}
|
|
382
372
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonSetComponent, decorators: [{
|
|
383
373
|
type: Component,
|
|
384
|
-
args: [{ selector: 'lib-button-set', standalone: true, imports: [CommonModule, ButtonComponent, LinkComponent], template: "<div class=\"c-button-set\" [ngClass]=\"alignmentClass\">\n
|
|
374
|
+
args: [{ selector: 'lib-button-set', standalone: true, imports: [CommonModule, ButtonComponent, LinkComponent], template: "<div class=\"c-button-set\" [ngClass]=\"alignmentClass\">\n <lib-link\n [text]=\"tertiaryText\"\n variant=\"primary\"\n (click)=\"handleTertiaryClick()\"\n ></lib-link>\n\n <lib-button\n [text]=\"secondaryText\"\n variant=\"secondary\"\n size=\"lg\"\n (click)=\"handleSecondaryClick()\"\n ></lib-button>\n\n <lib-button\n [text]=\"primaryText\"\n variant=\"primary\"\n size=\"lg\"\n (click)=\"handlePrimaryClick()\"\n ></lib-button>\n</div>\n", styles: [".c-button-set{display:flex;align-items:center;gap:var(--space-container-stack-md)}.c-button-set--right{flex-direction:row}.c-button-set--left{flex-direction:row-reverse}.c-button-set--stacked{flex-direction:column-reverse}\n"] }]
|
|
385
375
|
}], propDecorators: { primaryText: [{
|
|
386
376
|
type: Input
|
|
387
377
|
}], secondaryText: [{
|
|
@@ -410,6 +400,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
410
400
|
type: Input
|
|
411
401
|
}] } });
|
|
412
402
|
|
|
403
|
+
class InputLabelComponent {
|
|
404
|
+
text = input('');
|
|
405
|
+
required = input(false);
|
|
406
|
+
size = input('md');
|
|
407
|
+
disabled = input(false);
|
|
408
|
+
for = input('');
|
|
409
|
+
innerHTML = input('');
|
|
410
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
411
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: InputLabelComponent, isStandalone: true, selector: "lib-input-label", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, innerHTML: { classPropertyName: "innerHTML", publicName: "innerHTML", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<label\n [for]=\"for()\"\n class=\"c-input-label\"\n [ngClass]=\"{\n 'c-input-label--md': size() === 'md',\n 'c-input-label--disabled': disabled()\n }\"\n>\n @if (innerHTML()) {\n <span [innerHTML]=\"innerHTML()\"></span>\n } @else {\n <span>{{ text() }}</span>\n } @if (!required()) {\n <span\n class=\"c-input-label__optional\"\n [ngClass]=\"{\n 'c-input-label__optional--disabled': disabled()\n }\"\n >(Opcional)</span\n >\n }\n</label>\n", styles: [".c-input-label{display:flex;gap:var(--space-component-gap-sm);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing);color:var(--color-core-content-default)}.c-input-label--disabled{color:var(--color-textfield-content-disabled)}.c-input-label--md{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-input-label__optional{color:var(--color-core-content-soft)}.c-input-label__optional--disabled{color:var(--color-textfield-content-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
412
|
+
}
|
|
413
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputLabelComponent, decorators: [{
|
|
414
|
+
type: Component,
|
|
415
|
+
args: [{ selector: 'lib-input-label', imports: [CommonModule], template: "<label\n [for]=\"for()\"\n class=\"c-input-label\"\n [ngClass]=\"{\n 'c-input-label--md': size() === 'md',\n 'c-input-label--disabled': disabled()\n }\"\n>\n @if (innerHTML()) {\n <span [innerHTML]=\"innerHTML()\"></span>\n } @else {\n <span>{{ text() }}</span>\n } @if (!required()) {\n <span\n class=\"c-input-label__optional\"\n [ngClass]=\"{\n 'c-input-label__optional--disabled': disabled()\n }\"\n >(Opcional)</span\n >\n }\n</label>\n", styles: [".c-input-label{display:flex;gap:var(--space-component-gap-sm);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing);color:var(--color-core-content-default)}.c-input-label--disabled{color:var(--color-textfield-content-disabled)}.c-input-label--md{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-input-label__optional{color:var(--color-core-content-soft)}.c-input-label__optional--disabled{color:var(--color-textfield-content-disabled)}\n"] }]
|
|
416
|
+
}] });
|
|
417
|
+
|
|
413
418
|
class CheckboxComponent {
|
|
414
419
|
label = '';
|
|
415
420
|
id = '';
|
|
@@ -418,6 +423,7 @@ class CheckboxComponent {
|
|
|
418
423
|
error = false;
|
|
419
424
|
indeterminate = false;
|
|
420
425
|
innerHTML = '';
|
|
426
|
+
required = false;
|
|
421
427
|
changed = new EventEmitter();
|
|
422
428
|
onChangeFn = () => { };
|
|
423
429
|
onTouchedFn = () => { };
|
|
@@ -446,24 +452,41 @@ class CheckboxComponent {
|
|
|
446
452
|
get ariaChecked() {
|
|
447
453
|
return this.indeterminate ? 'mixed' : String(this.checked);
|
|
448
454
|
}
|
|
455
|
+
onKeydown(event) {
|
|
456
|
+
if ((event.code === 'Space' || event.key === ' ') && !this.disabled) {
|
|
457
|
+
event.preventDefault();
|
|
458
|
+
this.checked = !this.checked;
|
|
459
|
+
this.onChangeFn(this.checked);
|
|
460
|
+
this.changed.emit(this.checked);
|
|
461
|
+
this.onTouchedFn();
|
|
462
|
+
}
|
|
463
|
+
}
|
|
464
|
+
handleClick() {
|
|
465
|
+
if (this.disabled)
|
|
466
|
+
return;
|
|
467
|
+
this.checked = !this.checked;
|
|
468
|
+
this.onChangeFn(this.checked);
|
|
469
|
+
this.changed.emit(this.checked);
|
|
470
|
+
this.onTouchedFn();
|
|
471
|
+
}
|
|
449
472
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
450
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
473
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: CheckboxComponent, isStandalone: true, selector: "lib-checkbox", inputs: { label: "label", id: "id", checked: "checked", disabled: "disabled", error: "error", indeterminate: "indeterminate", innerHTML: "innerHTML", required: "required" }, outputs: { changed: "changed" }, providers: [
|
|
451
474
|
{
|
|
452
475
|
provide: NG_VALUE_ACCESSOR,
|
|
453
476
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
454
477
|
multi: true
|
|
455
478
|
}
|
|
456
|
-
], ngImport: i0, template: "<
|
|
479
|
+
], ngImport: i0, template: "<div class=\"c-checkbox\" [class.has-error]=\"error\">\n <input\n type=\"checkbox\"\n [id]=\"id\"\n class=\"c-checkbox__input\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"handleChange($event)\"\n (blur)=\"onBlur()\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n />\n\n <span\n class=\"c-checkbox__custom\"\n [ngClass]=\"[\n 'c-checkbox__custom',\n indeterminate ? 'c-checkbox__custom--indeterminate' : ''\n ]\"\n [attr.role]=\"'checkbox'\"\n [attr.aria-checked]=\"ariaChecked\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.aria-disabled]=\"disabled\"\n (click)=\"handleClick()\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n [class.checked]=\"checked\"\n [class.disabled]=\"disabled\"\n >\n <svg\n *ngIf=\"checked && !indeterminate\"\n class=\"c-checkbox__tick\"\n viewBox=\"0 0 24 24\"\n >\n <polyline points=\"4 12 10 18 20 6\"></polyline>\n </svg>\n <div *ngIf=\"indeterminate\" class=\"c-checkbox__indeterminate\"></div>\n </span>\n\n <lib-input-label\n [attr.for]=\"id\"\n class=\"c-checkbox__text\"\n [text]=\"label\"\n [innerHTML]=\"innerHTML\"\n [required]=\"required\"\n ></lib-input-label>\n</div>\n", styles: [":host{display:block;height:20px}.c-checkbox{display:inline-flex;align-items:center;gap:var(--space-component-gap-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);color:var(--color-core-content-default)}.c-checkbox__input{display:none}.c-checkbox__input:checked+.c-checkbox__custom{background-color:var(--color-action-primary-selected-background-default);border-color:var(--color-action-primary-selected-background-default)}.c-checkbox__input:checked:hover+.c-checkbox__custom{background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-background-hover)}.c-checkbox__input:focus+.c-checkbox__custom{outline:2px solid var(--focus-outset)}.c-checkbox__input:disabled+.c-checkbox__custom{border-color:var(--color-textfield-border-disabled)}.c-checkbox__input:disabled:checked+.c-checkbox__custom{border-color:var(--color-textfield-border-disabled);background-color:var(--color-textfield-background-disabled)}.c-checkbox__input:disabled:checked~.c-checkbox__text,.c-checkbox__input:disabled~.c-checkbox__text{color:var(--color-textfield-content-disabled)}.c-checkbox__input:checked+.c-checkbox__custom .c-checkbox__tick{display:block}.c-checkbox.has-error .c-checkbox__custom{border-color:var(--color-feedback-danger-surface-border)}.c-checkbox.has-error .c-checkbox__input:checked+.c-checkbox__custom{background-color:var(--color-feedback-danger-surface-border);border-color:var(--color-feedback-danger-surface-border)}.c-checkbox__custom{display:flex;align-items:center;justify-content:center;width:.9rem;height:.9rem;border:var(--size-border-width-md) solid var(--color-textfield-border-hover);border-radius:var(--size-border-radius-sm);background:#fff;transition:all .2s}.c-checkbox__custom--indeterminate{background-color:var(--color-feedback-danger-default);border-color:var(--color-feedback-danger-default)}.c-checkbox__custom:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-checkbox__tick{width:12px;height:12px;stroke:#fff;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;fill:none;display:none}.c-checkbox:hover__custom{border-color:var(--color-textfield-border-hover)}.c-checkbox:active__custom{border-color:var(--color-textfield-border-pressed)}.c-checkbox__text{font-size:.875rem}.c-checkbox__indeterminate{width:12px;height:2px;border-radius:1px;background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }] });
|
|
457
480
|
}
|
|
458
481
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
459
482
|
type: Component,
|
|
460
|
-
args: [{ selector: 'lib-checkbox', standalone: true, imports: [CommonModule], providers: [
|
|
483
|
+
args: [{ selector: 'lib-checkbox', standalone: true, imports: [CommonModule, InputLabelComponent], providers: [
|
|
461
484
|
{
|
|
462
485
|
provide: NG_VALUE_ACCESSOR,
|
|
463
486
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
464
487
|
multi: true
|
|
465
488
|
}
|
|
466
|
-
], template: "<
|
|
489
|
+
], template: "<div class=\"c-checkbox\" [class.has-error]=\"error\">\n <input\n type=\"checkbox\"\n [id]=\"id\"\n class=\"c-checkbox__input\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"handleChange($event)\"\n (blur)=\"onBlur()\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n />\n\n <span\n class=\"c-checkbox__custom\"\n [ngClass]=\"[\n 'c-checkbox__custom',\n indeterminate ? 'c-checkbox__custom--indeterminate' : ''\n ]\"\n [attr.role]=\"'checkbox'\"\n [attr.aria-checked]=\"ariaChecked\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.aria-disabled]=\"disabled\"\n (click)=\"handleClick()\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n [class.checked]=\"checked\"\n [class.disabled]=\"disabled\"\n >\n <svg\n *ngIf=\"checked && !indeterminate\"\n class=\"c-checkbox__tick\"\n viewBox=\"0 0 24 24\"\n >\n <polyline points=\"4 12 10 18 20 6\"></polyline>\n </svg>\n <div *ngIf=\"indeterminate\" class=\"c-checkbox__indeterminate\"></div>\n </span>\n\n <lib-input-label\n [attr.for]=\"id\"\n class=\"c-checkbox__text\"\n [text]=\"label\"\n [innerHTML]=\"innerHTML\"\n [required]=\"required\"\n ></lib-input-label>\n</div>\n", styles: [":host{display:block;height:20px}.c-checkbox{display:inline-flex;align-items:center;gap:var(--space-component-gap-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);color:var(--color-core-content-default)}.c-checkbox__input{display:none}.c-checkbox__input:checked+.c-checkbox__custom{background-color:var(--color-action-primary-selected-background-default);border-color:var(--color-action-primary-selected-background-default)}.c-checkbox__input:checked:hover+.c-checkbox__custom{background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-background-hover)}.c-checkbox__input:focus+.c-checkbox__custom{outline:2px solid var(--focus-outset)}.c-checkbox__input:disabled+.c-checkbox__custom{border-color:var(--color-textfield-border-disabled)}.c-checkbox__input:disabled:checked+.c-checkbox__custom{border-color:var(--color-textfield-border-disabled);background-color:var(--color-textfield-background-disabled)}.c-checkbox__input:disabled:checked~.c-checkbox__text,.c-checkbox__input:disabled~.c-checkbox__text{color:var(--color-textfield-content-disabled)}.c-checkbox__input:checked+.c-checkbox__custom .c-checkbox__tick{display:block}.c-checkbox.has-error .c-checkbox__custom{border-color:var(--color-feedback-danger-surface-border)}.c-checkbox.has-error .c-checkbox__input:checked+.c-checkbox__custom{background-color:var(--color-feedback-danger-surface-border);border-color:var(--color-feedback-danger-surface-border)}.c-checkbox__custom{display:flex;align-items:center;justify-content:center;width:.9rem;height:.9rem;border:var(--size-border-width-md) solid var(--color-textfield-border-hover);border-radius:var(--size-border-radius-sm);background:#fff;transition:all .2s}.c-checkbox__custom--indeterminate{background-color:var(--color-feedback-danger-default);border-color:var(--color-feedback-danger-default)}.c-checkbox__custom:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-checkbox__tick{width:12px;height:12px;stroke:#fff;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;fill:none;display:none}.c-checkbox:hover__custom{border-color:var(--color-textfield-border-hover)}.c-checkbox:active__custom{border-color:var(--color-textfield-border-pressed)}.c-checkbox__text{font-size:.875rem}.c-checkbox__indeterminate{width:12px;height:2px;border-radius:1px;background-color:#fff}\n"] }]
|
|
467
490
|
}], propDecorators: { label: [{
|
|
468
491
|
type: Input
|
|
469
492
|
}], id: [{
|
|
@@ -478,32 +501,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
478
501
|
type: Input
|
|
479
502
|
}], innerHTML: [{
|
|
480
503
|
type: Input
|
|
481
|
-
}], changed: [{
|
|
482
|
-
type: Output
|
|
483
|
-
}] } });
|
|
484
|
-
|
|
485
|
-
class InputLabelComponent {
|
|
486
|
-
text = '';
|
|
487
|
-
required = false;
|
|
488
|
-
md = false;
|
|
489
|
-
disabled = false;
|
|
490
|
-
for = '';
|
|
491
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
492
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InputLabelComponent, isStandalone: true, selector: "lib-input-label", inputs: { text: "text", required: "required", md: "md", disabled: "disabled", for: "for" }, ngImport: i0, template: "<label [for]=\"for\" [ngClass]=\"{'c-input-label': !md,'c-input-label--md': md, 'c-input-label--disabled': disabled}\">\n {{ text }}\n <span *ngIf=\"!required\" class=\"c-input-label__optional\">(Opcional)</span>\n</label>", styles: [".c-input-label{display:flex;gap:var(--space-page-gap-sm);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing);color:var(--color-core-content-default)}.c-input-label--md{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-input-label__optional{color:var(--color-core-content-soft)}.c-input-label--disabled,.c-input-label--disabled__optional{color:var(--color-textfield-content-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
493
|
-
}
|
|
494
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputLabelComponent, decorators: [{
|
|
495
|
-
type: Component,
|
|
496
|
-
args: [{ selector: 'lib-input-label', imports: [CommonModule], template: "<label [for]=\"for\" [ngClass]=\"{'c-input-label': !md,'c-input-label--md': md, 'c-input-label--disabled': disabled}\">\n {{ text }}\n <span *ngIf=\"!required\" class=\"c-input-label__optional\">(Opcional)</span>\n</label>", styles: [".c-input-label{display:flex;gap:var(--space-page-gap-sm);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing);color:var(--color-core-content-default)}.c-input-label--md{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-input-label__optional{color:var(--color-core-content-soft)}.c-input-label--disabled,.c-input-label--disabled__optional{color:var(--color-textfield-content-disabled)}\n"] }]
|
|
497
|
-
}], propDecorators: { text: [{
|
|
498
|
-
type: Input
|
|
499
504
|
}], required: [{
|
|
500
505
|
type: Input
|
|
501
|
-
}],
|
|
502
|
-
type:
|
|
503
|
-
}], disabled: [{
|
|
504
|
-
type: Input
|
|
505
|
-
}], for: [{
|
|
506
|
-
type: Input
|
|
506
|
+
}], changed: [{
|
|
507
|
+
type: Output
|
|
507
508
|
}] } });
|
|
508
509
|
|
|
509
510
|
class CheckboxGroupComponent {
|
|
@@ -547,7 +548,7 @@ class CheckboxGroupComponent {
|
|
|
547
548
|
return opt.value;
|
|
548
549
|
}
|
|
549
550
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
550
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: CheckboxGroupComponent, isStandalone: true, selector: "lib-checkbox-group", inputs: { legend: "legend", parentLabel: "parentLabel", name: "name", helperText: "helperText", options: "options", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, ngImport: i0, template: "<fieldset class=\"c-checkbox-group\">\n <lib-input-label *ngIf=\"legend\" [text]=\"legend\"></lib-input-label>\n \n <lib-checkbox\n [label]=\"parentLabel\"\n [checked]=\"allSelected\"\n [indeterminate]=\"indeterminate\"\n (click)=\"onParentChange(!allChildrenSelected)\"\n class=\"c-checkbox-group__parent\"\n ></lib-checkbox>\n \n <div class=\"c-checkbox-group__childrens\">\n <lib-checkbox\n *ngFor=\"let option of options; trackBy: trackByValue\"\n [id]=\"name + '-' + option.value\"\n [label]=\"option.label\"\n [checked]=\"selected.includes(option.value)\"\n (changed)=\"onChildChange(option.value, $event)\"\n class=\"c-checkbox-group__child\"\n ></lib-checkbox>\n </div>\n <p *ngIf=\"helperText\" class=\"c-checkbox-group__helper\">\n <lib-helper-text variant=\"alert\" [text]=\"helperText\"></lib-helper-text>\n </p>\n </fieldset>\n ", styles: [".c-checkbox-group{display:flex;flex-direction:column;gap:var(--space-container-gap-sm);border:0;padding:0}.c-checkbox-group__options{display:flex;flex-direction:column;gap:var(--space-container-gap-md);padding-left:6px}.c-checkbox-group__childrens{display:flex;flex-direction:column;gap:var(--space-container-gap-sm);padding-left:var(--space-container-padding-md)}.c-checkbox-group__helper{display:flex;align-items:center;gap:var(--space-component-gap-sm);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-size);line-height:var(--typography-label-sm-line-height);letter-spacing:var(--typography-label-sm-letter-spacing);color:var(--color-feedback-danger-default);padding:0;margin:0;padding-left:var(--space-container-padding-md)}.c-checkbox-group__icon{display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "id", "checked", "disabled", "error", "indeterminate", "innerHTML"], outputs: ["changed"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "
|
|
551
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: CheckboxGroupComponent, isStandalone: true, selector: "lib-checkbox-group", inputs: { legend: "legend", parentLabel: "parentLabel", name: "name", helperText: "helperText", options: "options", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, ngImport: i0, template: "<fieldset class=\"c-checkbox-group\">\n <lib-input-label *ngIf=\"legend\" [text]=\"legend\"></lib-input-label>\n \n <lib-checkbox\n [label]=\"parentLabel\"\n [checked]=\"allSelected\"\n [indeterminate]=\"indeterminate\"\n (click)=\"onParentChange(!allChildrenSelected)\"\n class=\"c-checkbox-group__parent\"\n ></lib-checkbox>\n \n <div class=\"c-checkbox-group__childrens\">\n <lib-checkbox\n *ngFor=\"let option of options; trackBy: trackByValue\"\n [id]=\"name + '-' + option.value\"\n [label]=\"option.label\"\n [checked]=\"selected.includes(option.value)\"\n (changed)=\"onChildChange(option.value, $event)\"\n class=\"c-checkbox-group__child\"\n ></lib-checkbox>\n </div>\n <p *ngIf=\"helperText\" class=\"c-checkbox-group__helper\">\n <lib-helper-text variant=\"alert\" [text]=\"helperText\"></lib-helper-text>\n </p>\n </fieldset>\n ", styles: [".c-checkbox-group{display:flex;flex-direction:column;gap:var(--space-container-gap-sm);border:0;padding:0}.c-checkbox-group__options{display:flex;flex-direction:column;gap:var(--space-container-gap-md);padding-left:6px}.c-checkbox-group__childrens{display:flex;flex-direction:column;gap:var(--space-container-gap-sm);padding-left:var(--space-container-padding-md)}.c-checkbox-group__helper{display:flex;align-items:center;gap:var(--space-component-gap-sm);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-size);line-height:var(--typography-label-sm-line-height);letter-spacing:var(--typography-label-sm-letter-spacing);color:var(--color-feedback-danger-default);padding:0;margin:0;padding-left:var(--space-container-padding-md)}.c-checkbox-group__icon{display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "id", "checked", "disabled", "error", "indeterminate", "innerHTML", "required"], outputs: ["changed"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
551
552
|
}
|
|
552
553
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
|
|
553
554
|
type: Component,
|
|
@@ -665,7 +666,7 @@ class InputDateComponent {
|
|
|
665
666
|
useExisting: forwardRef(() => InputDateComponent),
|
|
666
667
|
multi: true,
|
|
667
668
|
},
|
|
668
|
-
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n aria-label=\"date\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"Calendario\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n (click)=\"toggleCalendar()\"\n >\n <lib-icon icon=\"calendar\" size=\"md\" iconBefore />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__toggle{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "
|
|
669
|
+
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n aria-label=\"date\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"Calendario\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n (click)=\"toggleCalendar()\"\n >\n <lib-icon icon=\"calendar\" size=\"md\" iconBefore />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__toggle{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "disabled", "loading", "variant", "size"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
669
670
|
}
|
|
670
671
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputDateComponent, decorators: [{
|
|
671
672
|
type: Component,
|
|
@@ -781,7 +782,7 @@ class InputNumberComponent {
|
|
|
781
782
|
useExisting: forwardRef(() => InputNumberComponent),
|
|
782
783
|
multi: true,
|
|
783
784
|
},
|
|
784
|
-
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div\n class=\"c-text-input__wrapper\"\n [class.c-text-input__wrapper--right]=\"variant === 'right'\"\n >\n <input\n type=\"number\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n aria-label=\"number\"\n (input)=\"onType($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"menos\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__less\"\n (click)=\"downNumber()\"\n >\n <lib-icon icon=\"less\" size=\"md\" iconBefore />\n </lib-button-icon>\n <lib-button-icon\n ariaLabel=\"m\u00E1s\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__up\"\n (click)=\"upNumber()\"\n >\n <lib-icon icon=\"plus\" size=\"md\" iconBefore />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"search-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) 2rem var(--space-component-padding-md) 2rem;align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);text-align:center}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm,.c-text-input__input--md{padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__less{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__wrapper--right .c-text-input__less{position:absolute;top:50%;right:calc(2rem + var(--space-component-padding-sm));transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;left:initial}.c-text-input__wrapper--right .c-text-input__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "
|
|
785
|
+
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div\n class=\"c-text-input__wrapper\"\n [class.c-text-input__wrapper--right]=\"variant === 'right'\"\n >\n <input\n type=\"number\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n aria-label=\"number\"\n (input)=\"onType($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"menos\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__less\"\n (click)=\"downNumber()\"\n >\n <lib-icon icon=\"less\" size=\"md\" iconBefore />\n </lib-button-icon>\n <lib-button-icon\n ariaLabel=\"m\u00E1s\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__up\"\n (click)=\"upNumber()\"\n >\n <lib-icon icon=\"plus\" size=\"md\" iconBefore />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"search-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) 2rem var(--space-component-padding-md) 2rem;align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);text-align:center}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm,.c-text-input__input--md{padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__less{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__wrapper--right .c-text-input__less{position:absolute;top:50%;right:calc(2rem + var(--space-component-padding-sm));transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;left:initial}.c-text-input__wrapper--right .c-text-input__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "disabled", "loading", "variant", "size"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
785
786
|
}
|
|
786
787
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputNumberComponent, decorators: [{
|
|
787
788
|
type: Component,
|
|
@@ -946,7 +947,7 @@ class InputPaymentComponent {
|
|
|
946
947
|
useExisting: forwardRef(() => InputPaymentComponent),
|
|
947
948
|
multi: true,
|
|
948
949
|
},
|
|
949
|
-
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n inputmode=\"numeric\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"cardNumberDisplay\"\n (input)=\"onCardInput($event)\"\n (blur)=\"onBlur()\"\n />\n <input\n #dateInput\n type=\"text\"\n inputmode=\"numeric\"\n placeholder=\"dd/mm\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n class=\"c-text-input__mini\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"dateNumberDisplay\"\n (input)=\"onDateInput($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon\n [icon]=\"disabled ? 'card-disabled' : 'card'\"\n size=\"md\"\n ></lib-icon>\n </span>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) 2rem;align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm,.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 2rem}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__wrapper:focus-within input:first-of-type{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-text-input__icon{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__mini{position:absolute;right:7px;border:0;height:calc(100% - 4px);top:0;bottom:0;margin:auto;border-radius:8px;width:81px;text-align:right;font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__mini:focus-visible{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "
|
|
950
|
+
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n inputmode=\"numeric\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"cardNumberDisplay\"\n (input)=\"onCardInput($event)\"\n (blur)=\"onBlur()\"\n />\n <input\n #dateInput\n type=\"text\"\n inputmode=\"numeric\"\n placeholder=\"dd/mm\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n class=\"c-text-input__mini\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"dateNumberDisplay\"\n (input)=\"onDateInput($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon\n [icon]=\"disabled ? 'card-disabled' : 'card'\"\n size=\"md\"\n ></lib-icon>\n </span>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) 2rem;align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm,.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 2rem}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__wrapper:focus-within input:first-of-type{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-text-input__icon{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__mini{position:absolute;right:7px;border:0;height:calc(100% - 4px);top:0;bottom:0;margin:auto;border-radius:8px;width:81px;text-align:right;font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__mini:focus-visible{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
950
951
|
}
|
|
951
952
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputPaymentComponent, decorators: [{
|
|
952
953
|
type: Component,
|
|
@@ -1055,7 +1056,7 @@ class InputSearchComponent {
|
|
|
1055
1056
|
useExisting: forwardRef(() => InputSearchComponent),
|
|
1056
1057
|
multi: true,
|
|
1057
1058
|
},
|
|
1058
|
-
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [attr.aria-label]=\"label ? label : 'Search input'\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon icon=\"search\" size=\"md\"></lib-icon>\n </span>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"search-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) 2rem;align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm,.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 2rem}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__icon{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "
|
|
1059
|
+
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [attr.aria-label]=\"label ? label : 'Search input'\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon icon=\"search\" size=\"md\"></lib-icon>\n </span>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"search-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) 2rem;align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm,.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 2rem}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__icon{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
1059
1060
|
}
|
|
1060
1061
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputSearchComponent, decorators: [{
|
|
1061
1062
|
type: Component,
|
|
@@ -1182,7 +1183,7 @@ class InputUploadComponent {
|
|
|
1182
1183
|
useExisting: forwardRef(() => InputUploadComponent),
|
|
1183
1184
|
multi: true,
|
|
1184
1185
|
},
|
|
1185
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n #fileInput\n type=\"file\"\n id=\"upload-input\"\n style=\"display: none\"\n [attr.accept]=\"acceptString\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileSelected($event)\"\n (blur)=\"onBlur()\"\n />\n <label\n for=\"upload-input\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n >\n {{ fileName || placeholder }}\n </label>\n <lib-button-icon\n ariaLabel=\"Upload\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n (click)=\"fileInput.click()\"\n >\n <lib-icon icon=\"upload\" size=\"md\" iconBefore />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input--no-file{color:var(--color-textfield-content-placeholder)}.c-text-input__input:focus-visible{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__toggle{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "
|
|
1186
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n #fileInput\n type=\"file\"\n id=\"upload-input\"\n style=\"display: none\"\n [attr.accept]=\"acceptString\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileSelected($event)\"\n (blur)=\"onBlur()\"\n />\n <label\n for=\"upload-input\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n >\n {{ fileName || placeholder }}\n </label>\n <lib-button-icon\n ariaLabel=\"Upload\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n (click)=\"fileInput.click()\"\n >\n <lib-icon icon=\"upload\" size=\"md\" iconBefore />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input--no-file{color:var(--color-textfield-content-placeholder)}.c-text-input__input:focus-visible{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__toggle{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "disabled", "loading", "variant", "size"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
1186
1187
|
}
|
|
1187
1188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputUploadComponent, decorators: [{
|
|
1188
1189
|
type: Component,
|
|
@@ -1368,7 +1369,7 @@ class PasswordInputComponent {
|
|
|
1368
1369
|
useExisting: forwardRef(() => PasswordInputComponent),
|
|
1369
1370
|
multi: true,
|
|
1370
1371
|
},
|
|
1371
|
-
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [text]=\"label\"\n [required]=\"required\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n [type]=\"inputType\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n [ariaLabel]=\"showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n (click)=\"togglePassword()\"\n >\n <lib-icon\n icon=\"eye\"\n size=\"md\"\n iconBefore\n [variant]=\"showPassword ? 'close' : 'open'\"\n />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__toggle{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "
|
|
1372
|
+
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [text]=\"label\"\n [required]=\"required\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n [type]=\"inputType\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n [ariaLabel]=\"showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n (click)=\"togglePassword()\"\n >\n <lib-icon\n icon=\"eye\"\n size=\"md\"\n iconBefore\n [variant]=\"showPassword ? 'close' : 'open'\"\n />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-md) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__toggle{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "disabled", "loading", "variant", "size"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
1372
1373
|
}
|
|
1373
1374
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PasswordInputComponent, decorators: [{
|
|
1374
1375
|
type: Component,
|
|
@@ -1493,7 +1494,7 @@ class RadioGroupComponent {
|
|
|
1493
1494
|
this.valueChange.emit(value);
|
|
1494
1495
|
}
|
|
1495
1496
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1496
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: RadioGroupComponent, isStandalone: true, selector: "lib-radio-group", inputs: { label: "label", name: "name", options: "options", value: "value", error: "error", helperText: "helperText", required: "required" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<fieldset [attr.aria-invalid]=\"error\" class=\"c-radio-group\">\n <legend class=\"sr-only\">{{ label }}</legend>\n <lib-input-label [text]=\"label\" [required]=\"required\" />\n \n <div class=\"c-radio-group__options\">\n <lib-radio\n *ngFor=\"let option of options\"\n [label]=\"option.label\"\n [value]=\"option.value\"\n [name]=\"name\"\n [error]=\"error\"\n (change)=\"onChange(option.value)\"\n />\n </div>\n <p *ngIf=\"helperText\" class=\"c-radio-group__helper\"><lib-icon icon=\"alert\" class=\"c-radio-group__icon\" size=\"md\"/>{{ helperText }}</p>\n</fieldset>\n", styles: [".c-radio-group{display:flex;flex-direction:column;gap:var(--space-container-gap-sm);border:0;padding:0}.c-radio-group__options{display:flex;flex-direction:column;gap:var(--space-container-gap-md);padding-left:6px}.c-radio-group__helper{display:flex;align-items:center;gap:var(--space-component-gap-sm);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-size);line-height:var(--typography-label-sm-line-height);letter-spacing:var(--typography-label-sm-letter-spacing);color:var(--color-feedback-danger-default);padding:0;margin:0}.c-radio-group__icon{display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["id", "name", "value", "label", "error", "disabled"], outputs: ["modelChange"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "
|
|
1497
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: RadioGroupComponent, isStandalone: true, selector: "lib-radio-group", inputs: { label: "label", name: "name", options: "options", value: "value", error: "error", helperText: "helperText", required: "required" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<fieldset [attr.aria-invalid]=\"error\" class=\"c-radio-group\">\n <legend class=\"sr-only\">{{ label }}</legend>\n <lib-input-label [text]=\"label\" [required]=\"required\" />\n \n <div class=\"c-radio-group__options\">\n <lib-radio\n *ngFor=\"let option of options\"\n [label]=\"option.label\"\n [value]=\"option.value\"\n [name]=\"name\"\n [error]=\"error\"\n (change)=\"onChange(option.value)\"\n />\n </div>\n <p *ngIf=\"helperText\" class=\"c-radio-group__helper\"><lib-icon icon=\"alert\" class=\"c-radio-group__icon\" size=\"md\"/>{{ helperText }}</p>\n</fieldset>\n", styles: [".c-radio-group{display:flex;flex-direction:column;gap:var(--space-container-gap-sm);border:0;padding:0}.c-radio-group__options{display:flex;flex-direction:column;gap:var(--space-container-gap-md);padding-left:6px}.c-radio-group__helper{display:flex;align-items:center;gap:var(--space-component-gap-sm);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-size);line-height:var(--typography-label-sm-line-height);letter-spacing:var(--typography-label-sm-letter-spacing);color:var(--color-feedback-danger-default);padding:0;margin:0}.c-radio-group__icon{display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["id", "name", "value", "label", "error", "disabled"], outputs: ["modelChange"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }] });
|
|
1497
1498
|
}
|
|
1498
1499
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
1499
1500
|
type: Component,
|
|
@@ -1730,7 +1731,7 @@ class SelectComponent {
|
|
|
1730
1731
|
useExisting: forwardRef(() => SelectComponent),
|
|
1731
1732
|
multi: true,
|
|
1732
1733
|
},
|
|
1733
|
-
], viewQueries: [{ propertyName: "container", first: true, predicate: ["selectionContainer"], descendants: true, static: true }, { propertyName: "badgeElems", predicate: ["badgeElem"], descendants: true }], ngImport: i0, template: "<div\n class=\"c-select\"\n [class.c-select--multiple]=\"multiple\"\n [class.c-select--full-width]=\"fullWidth\"\n>\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div\n class=\"c-select__wrapper\"\n aria-expanded=\"false\"\n (click)=\"toggleDropdown()\"\n (keydown.enter)=\"toggleDropdown()\"\n (blur)=\"onBlur()\"\n tabindex=\"0\"\n role=\"combobox\"\n aria-controls=\"selectionContainer\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"label ? label : 'Select'\"\n >\n <div\n class=\"c-select__selection\"\n [class.is-error]=\"error\"\n [class.is-success]=\"success\"\n [class.is-disabled]=\"disabled\"\n [class.is-readonly]=\"readonly\"\n [class.c-select__selection--md]=\"size === 'md'\"\n [class.c-select__selection--sm]=\"size === 'sm'\"\n [class.c-select__selection--lg]=\"size === 'lg'\"\n #selectionContainer\n id=\"selectionContainer\"\n >\n <ng-container *ngIf=\"selectedOptions.length; else placeholderTpl\">\n <span\n #badgeElem\n *ngFor=\"let sel of visibleBadges\"\n class=\"c-select__badge\"\n [class.c-select__badge--multiple]=\"multiple\"\n [class.is-disabled]=\"disabled\"\n >\n {{ sel.label }}\n <lib-icon\n icon=\"close\"\n *ngIf=\"multiple && !disabled\"\n size=\"sm\"\n (click)=\"onDelete(sel)\"\n iconBefore\n />\n <lib-icon\n icon=\"close-disabled\"\n *ngIf=\"multiple && disabled\"\n size=\"sm\"\n iconBefore\n />\n </span>\n\n <span\n *ngIf=\"hiddenCount > 0\"\n class=\"c-select__badge c-select__badge--more\"\n >\n +{{ hiddenCount }}\n </span>\n </ng-container>\n <ng-template #placeholderTpl>{{ placeholder }}</ng-template>\n\n <span class=\"c-select__arrow\" *ngIf=\"!isOpen\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'down'\" />\n </span>\n <span class=\"c-select__arrow\" *ngIf=\"isOpen\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'up'\" />\n </span>\n </div>\n\n <div class=\"c-select__dropdown\" *ngIf=\"isOpen\" role=\"listbox\">\n <div class=\"c-select__search-wrapper\" *ngIf=\"searchable\">\n <lib-input-search\n [(ngModel)]=\"filterText\"\n (emitValue)=\"onSearch($event)\"\n (input)=\"filterOptions()\"\n placeholder=\"Search...\"\n (click)=\"$event.stopPropagation()\"\n aria-label=\"Filtrar opciones\"\n />\n </div>\n\n <div *ngFor=\"let group of filteredOptions\">\n <div class=\"c-select__group-label\">{{ group.label }}</div>\n\n <div\n class=\"c-select__option\"\n *ngFor=\"let opt of group.options\"\n [class.is-selected]=\"isSelected(opt)\"\n (click)=\"$event.stopPropagation(); selectOption(opt)\"\n (keydown.enter)=\"$event.stopPropagation(); selectOption(opt)\"\n tabindex=\"0\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(opt)\"\n >\n <lib-checkbox\n *ngIf=\"multiple\"\n label=\"\"\n [disabled]=\"disabled\"\n [checked]=\"isSelected(opt)\"\n class=\"c-tile__check\"\n ></lib-checkbox>\n <span class=\"c-select__option-label\">{{ opt.label }}</span>\n <lib-icon\n icon=\"check-circle\"\n *ngIf=\"!multiple && !disabled && isSelected(opt)\"\n size=\"sm\"\n iconBefore\n />\n </div>\n </div>\n </div>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-select{display:flex;flex-direction:column;gap:var(--space-component-gap-sm, .25rem);max-width:300px}.c-select--full-width{max-width:100%}.c-select__search-wrapper{padding:var(--space-container-padding-sm, 1rem)}.c-select__dropdown{position:absolute;width:100%;max-height:25rem;overflow-y:auto;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-core-border-soft, #d6e0df);background:var(--color-core-background-surface-raised, #fff);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16));scrollbar-width:thin;scrollbar-color:var(--color-effect-overlay, rgba(0, 0, 0, .16)) transparent}.c-select__badge{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge.is-disabled{background:var(--color-action-neutral-background-disabled, rgba(255, 255, 255, 0))}.c-select__badge--more{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge--multiple{display:flex;height:1.5rem;padding-left:var(--space-component-padding-sm, .5rem);padding-right:var(--space-component-padding-sm, .5rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);border-radius:var(--size-textfield-border-radius, .5rem);background:var(--color-feedback-neutral-surface-background, #dee7e6);color:var(--color-feedback-neutral-default, #535858);text-align:center;font-family:var(--typography-label-xs-strong-family, Satoshi);font-size:var(--typography-label-xs-strong-size, .75rem);font-style:normal;font-weight:var(--typography-label-xs-strong-weight, 700);line-height:var(--typography-label-xs-strong-line-height, 1rem);letter-spacing:var(--typography-label-xs-strong-letter-spacing, 0rem)}.c-select__wrapper{position:relative}.c-select__group-label{display:flex;min-height:3rem;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);color:var(--color-core-content-soft, #535858);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option{display:flex;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);background:var(--color-action-neutral-background-default, rgba(255, 255, 255, 0));color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-default-family, Satoshi);font-size:var(--typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-default-weight, 400);line-height:var(--typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-default-letter-spacing, 0rem);cursor:pointer;justify-content:space-between}.c-select__option.is-selected{color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-select__option-label{display:flex;justify-self:flex-start;margin:0 auto 0 0}.c-select__selection{display:flex;padding:var(--space-component-padding-md, .75rem) 2.5rem var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);align-self:stretch;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-textfield-border-default, #929a99);background:var(--color-textfield-background-default, #fff);color:var(--color-textfield-content-placeholder, #676d6c);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem);cursor:pointer;overflow:hidden;position:relative}.c-select__selection:focus-visible{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-select__selection--sm,.c-select__selection--md{padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-select__selection.is-error{border-color:var(--color-textfield-border-error)}.c-select__selection.is-success{border-color:var(--color-feedback-success-surface-border)}.c-select__selection.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-select__selection.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-select__arrow{position:absolute;right:1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: InputSearchComponent, selector: "lib-input-search", inputs: ["label", "placeholder", "helperText", "alertText", "successText", "error", "success", "disabled", "readonly", "required", "size", "fullWidth"], outputs: ["emitValue"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "id", "checked", "disabled", "error", "indeterminate", "innerHTML"], outputs: ["changed"] }] });
|
|
1734
|
+
], viewQueries: [{ propertyName: "container", first: true, predicate: ["selectionContainer"], descendants: true, static: true }, { propertyName: "badgeElems", predicate: ["badgeElem"], descendants: true }], ngImport: i0, template: "<div\n class=\"c-select\"\n [class.c-select--multiple]=\"multiple\"\n [class.c-select--full-width]=\"fullWidth\"\n>\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div\n class=\"c-select__wrapper\"\n aria-expanded=\"false\"\n (click)=\"toggleDropdown()\"\n (keydown.enter)=\"toggleDropdown()\"\n (blur)=\"onBlur()\"\n tabindex=\"0\"\n role=\"combobox\"\n aria-controls=\"selectionContainer\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"label ? label : 'Select'\"\n >\n <div\n class=\"c-select__selection\"\n [class.is-error]=\"error\"\n [class.is-success]=\"success\"\n [class.is-disabled]=\"disabled\"\n [class.is-readonly]=\"readonly\"\n [class.c-select__selection--md]=\"size === 'md'\"\n [class.c-select__selection--sm]=\"size === 'sm'\"\n [class.c-select__selection--lg]=\"size === 'lg'\"\n #selectionContainer\n id=\"selectionContainer\"\n >\n <ng-container *ngIf=\"selectedOptions.length; else placeholderTpl\">\n <span\n #badgeElem\n *ngFor=\"let sel of visibleBadges\"\n class=\"c-select__badge\"\n [class.c-select__badge--multiple]=\"multiple\"\n [class.is-disabled]=\"disabled\"\n >\n {{ sel.label }}\n <lib-icon\n icon=\"close\"\n *ngIf=\"multiple && !disabled\"\n size=\"sm\"\n (click)=\"onDelete(sel)\"\n iconBefore\n />\n <lib-icon\n icon=\"close-disabled\"\n *ngIf=\"multiple && disabled\"\n size=\"sm\"\n iconBefore\n />\n </span>\n\n <span\n *ngIf=\"hiddenCount > 0\"\n class=\"c-select__badge c-select__badge--more\"\n >\n +{{ hiddenCount }}\n </span>\n </ng-container>\n <ng-template #placeholderTpl>{{ placeholder }}</ng-template>\n\n <span class=\"c-select__arrow\" *ngIf=\"!isOpen\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'down'\" />\n </span>\n <span class=\"c-select__arrow\" *ngIf=\"isOpen\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'up'\" />\n </span>\n </div>\n\n <div class=\"c-select__dropdown\" *ngIf=\"isOpen\" role=\"listbox\">\n <div class=\"c-select__search-wrapper\" *ngIf=\"searchable\">\n <lib-input-search\n [(ngModel)]=\"filterText\"\n (emitValue)=\"onSearch($event)\"\n (input)=\"filterOptions()\"\n placeholder=\"Search...\"\n (click)=\"$event.stopPropagation()\"\n aria-label=\"Filtrar opciones\"\n />\n </div>\n\n <div *ngFor=\"let group of filteredOptions\">\n <div class=\"c-select__group-label\">{{ group.label }}</div>\n\n <div\n class=\"c-select__option\"\n *ngFor=\"let opt of group.options\"\n [class.is-selected]=\"isSelected(opt)\"\n (click)=\"$event.stopPropagation(); selectOption(opt)\"\n (keydown.enter)=\"$event.stopPropagation(); selectOption(opt)\"\n tabindex=\"0\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(opt)\"\n >\n <lib-checkbox\n *ngIf=\"multiple\"\n label=\"\"\n [disabled]=\"disabled\"\n [checked]=\"isSelected(opt)\"\n class=\"c-tile__check\"\n ></lib-checkbox>\n <span class=\"c-select__option-label\">{{ opt.label }}</span>\n <lib-icon\n icon=\"check-circle\"\n *ngIf=\"!multiple && !disabled && isSelected(opt)\"\n size=\"sm\"\n iconBefore\n />\n </div>\n </div>\n </div>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-select{display:flex;flex-direction:column;gap:var(--space-component-gap-sm, .25rem);max-width:300px}.c-select--full-width{max-width:100%}.c-select__search-wrapper{padding:var(--space-container-padding-sm, 1rem)}.c-select__dropdown{position:absolute;width:100%;max-height:25rem;overflow-y:auto;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-core-border-soft, #d6e0df);background:var(--color-core-background-surface-raised, #fff);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16));scrollbar-width:thin;scrollbar-color:var(--color-effect-overlay, rgba(0, 0, 0, .16)) transparent}.c-select__badge{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge.is-disabled{background:var(--color-action-neutral-background-disabled, rgba(255, 255, 255, 0))}.c-select__badge--more{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge--multiple{display:flex;height:1.5rem;padding-left:var(--space-component-padding-sm, .5rem);padding-right:var(--space-component-padding-sm, .5rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);border-radius:var(--size-textfield-border-radius, .5rem);background:var(--color-feedback-neutral-surface-background, #dee7e6);color:var(--color-feedback-neutral-default, #535858);text-align:center;font-family:var(--typography-label-xs-strong-family, Satoshi);font-size:var(--typography-label-xs-strong-size, .75rem);font-style:normal;font-weight:var(--typography-label-xs-strong-weight, 700);line-height:var(--typography-label-xs-strong-line-height, 1rem);letter-spacing:var(--typography-label-xs-strong-letter-spacing, 0rem)}.c-select__wrapper{position:relative}.c-select__group-label{display:flex;min-height:3rem;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);color:var(--color-core-content-soft, #535858);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option{display:flex;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);background:var(--color-action-neutral-background-default, rgba(255, 255, 255, 0));color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-default-family, Satoshi);font-size:var(--typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-default-weight, 400);line-height:var(--typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-default-letter-spacing, 0rem);cursor:pointer;justify-content:space-between}.c-select__option.is-selected{color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-select__option-label{display:flex;justify-self:flex-start;margin:0 auto 0 0}.c-select__selection{display:flex;padding:var(--space-component-padding-md, .75rem) 2.5rem var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);align-self:stretch;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-textfield-border-default, #929a99);background:var(--color-textfield-background-default, #fff);color:var(--color-textfield-content-placeholder, #676d6c);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem);cursor:pointer;overflow:hidden;position:relative}.c-select__selection:focus-visible{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-select__selection--sm,.c-select__selection--md{padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-select__selection.is-error{border-color:var(--color-textfield-border-error)}.c-select__selection.is-success{border-color:var(--color-feedback-success-surface-border)}.c-select__selection.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-select__selection.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-select__arrow{position:absolute;right:1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { kind: "component", type: InputSearchComponent, selector: "lib-input-search", inputs: ["label", "placeholder", "helperText", "alertText", "successText", "error", "success", "disabled", "readonly", "required", "size", "fullWidth"], outputs: ["emitValue"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "id", "checked", "disabled", "error", "indeterminate", "innerHTML", "required"], outputs: ["changed"] }] });
|
|
1734
1735
|
}
|
|
1735
1736
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, decorators: [{
|
|
1736
1737
|
type: Component,
|
|
@@ -1832,7 +1833,7 @@ class SwitchComponent {
|
|
|
1832
1833
|
this.checkedChange.emit(this.checked);
|
|
1833
1834
|
}
|
|
1834
1835
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1835
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SwitchComponent, isStandalone: true, selector: "lib-switch", inputs: { checked: "checked", disabled: "disabled", label: "label", required: "required" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<div\n class=\"c-switch\"\n [class.c-switch--checked]=\"checked\"\n [class.c-switch--disabled]=\"disabled\"\n>\n <button\n type=\"button\"\n class=\"c-switch__track\"\n role=\"switch\"\n [attr.aria-checked]=\"checked\"\n [disabled]=\"disabled\"\n (click)=\"onToggle()\"\n [attr.aria-label]=\"label\"\n >\n <span class=\"c-switch__thumb\"></span>\n </button>\n\n <lib-input-label *ngIf=\"label\" [required]=\"required\" [text]=\"label\"></lib-input-label>\n</div>\n", styles: [".c-switch{display:flex;width:19.5rem;min-width:2.75rem;align-items:center;gap:var(--space-component-gap-md)}.c-switch__track{position:relative;width:2rem;height:1rem;border:none;cursor:pointer;transition:background .2s;display:flex;padding:var(--space-component-padding-xs, .25rem) var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-xs, .25rem) var(--space-component-padding-xs, .25rem);align-items:center;gap:.5rem;border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-unchecked-background-default, #929A99)}.c-switch__track:hover{background:var(--color-switch-unchecked-background-hover, #7D8483)}.c-switch__track:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-switch__thumb{position:absolute;top:.125rem;left:.125rem;width:.75rem;height:.75rem;background:#fff;border-radius:50%;transition:transform .2s}.c-switch--checked .c-switch__track{border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-checked-background-default, #217870)}.c-switch--checked .c-switch__track:hover{background:var(--color-switch-checked-background-hover, #19625B)}.c-switch--checked .c-switch__thumb{transform:translate(1rem)}.c-switch--disabled{cursor:not-allowed}.c-switch--disabled .c-switch__track{background:var(--color-switch-unchecked-background-disabled, rgba(0, 0, 0, .08))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "
|
|
1836
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SwitchComponent, isStandalone: true, selector: "lib-switch", inputs: { checked: "checked", disabled: "disabled", label: "label", required: "required" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<div\n class=\"c-switch\"\n [class.c-switch--checked]=\"checked\"\n [class.c-switch--disabled]=\"disabled\"\n>\n <button\n type=\"button\"\n class=\"c-switch__track\"\n role=\"switch\"\n [attr.aria-checked]=\"checked\"\n [disabled]=\"disabled\"\n (click)=\"onToggle()\"\n [attr.aria-label]=\"label\"\n >\n <span class=\"c-switch__thumb\"></span>\n </button>\n\n <lib-input-label *ngIf=\"label\" [required]=\"required\" [text]=\"label\"></lib-input-label>\n</div>\n", styles: [".c-switch{display:flex;width:19.5rem;min-width:2.75rem;align-items:center;gap:var(--space-component-gap-md)}.c-switch__track{position:relative;width:2rem;height:1rem;border:none;cursor:pointer;transition:background .2s;display:flex;padding:var(--space-component-padding-xs, .25rem) var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-xs, .25rem) var(--space-component-padding-xs, .25rem);align-items:center;gap:.5rem;border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-unchecked-background-default, #929A99)}.c-switch__track:hover{background:var(--color-switch-unchecked-background-hover, #7D8483)}.c-switch__track:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-switch__thumb{position:absolute;top:.125rem;left:.125rem;width:.75rem;height:.75rem;background:#fff;border-radius:50%;transition:transform .2s}.c-switch--checked .c-switch__track{border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-checked-background-default, #217870)}.c-switch--checked .c-switch__track:hover{background:var(--color-switch-checked-background-hover, #19625B)}.c-switch--checked .c-switch__thumb{transform:translate(1rem)}.c-switch--disabled{cursor:not-allowed}.c-switch--disabled .c-switch__track{background:var(--color-switch-unchecked-background-disabled, rgba(0, 0, 0, .08))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }] });
|
|
1836
1837
|
}
|
|
1837
1838
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
1838
1839
|
type: Component,
|
|
@@ -1973,7 +1974,7 @@ class TextInputComponent {
|
|
|
1973
1974
|
useExisting: forwardRef(() => TextInputComponent),
|
|
1974
1975
|
multi: true,
|
|
1975
1976
|
},
|
|
1976
|
-
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [for]=\"name\"\n [text]=\"label\"\n ></lib-input-label>\n\n <input\n [type]=\"type\"\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"_value\"\n [required]=\"required\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"label\"\n [attr.aria-labelledby]=\"label\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-input-helper\"\n class=\"c-text-input__helper\"\n [class]=\"helperClass\"\n >\n {{ helperText }}\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-icon icon=\"alert\" size=\"md\"></lib-icon>{{ alertText }}\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-icon icon=\"success\" size=\"md\"></lib-icon>{{ successText }}\n </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "
|
|
1977
|
+
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [for]=\"name\"\n [text]=\"label\"\n ></lib-input-label>\n\n <input\n [type]=\"type\"\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"_value\"\n [required]=\"required\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"label\"\n [attr.aria-labelledby]=\"label\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-input-helper\"\n class=\"c-text-input__helper\"\n [class]=\"helperClass\"\n >\n {{ helperText }}\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-icon icon=\"alert\" size=\"md\"></lib-icon>{{ alertText }}\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-icon icon=\"success\" size=\"md\"></lib-icon>{{ successText }}\n </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }] });
|
|
1977
1978
|
}
|
|
1978
1979
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
1979
1980
|
type: Component,
|
|
@@ -2079,7 +2080,7 @@ class TextareaComponent {
|
|
|
2079
2080
|
useExisting: forwardRef(() => TextareaComponent),
|
|
2080
2081
|
multi: true,
|
|
2081
2082
|
},
|
|
2082
|
-
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <textarea\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"label\"\n [required]=\"required\"\n [value]=\"_value\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [name]=\"name\"\n ></textarea>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "
|
|
2083
|
+
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <textarea\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"label\"\n [required]=\"required\"\n [value]=\"_value\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [name]=\"name\"\n ></textarea>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
2083
2084
|
}
|
|
2084
2085
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
2085
2086
|
type: Component,
|
|
@@ -2159,7 +2160,7 @@ class TileComponent {
|
|
|
2159
2160
|
this.valueExport.emit(this.value);
|
|
2160
2161
|
}
|
|
2161
2162
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2162
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TileComponent, isStandalone: true, selector: "lib-tile", inputs: { variant: "variant", title: "title", name: "name", value: "value", disabled: "disabled" }, outputs: { valueExport: "valueExport" }, ngImport: i0, template: "<div class=\"c-tile\" [class.c-tile--selected]=\"value\" [class.c-tile--neutral]=\"variant === 'neutral'\" [class.c-tile--disabled]=\"disabled\" tabindex=\"0\" role=\"button\" (click)=\"onClick()\" (keyup.enter)=\"onClick()\">\n <div class=\"c-tile__wrapper\">\n <p class=\"c-tile__title\">{{ title }}</p>\n <lib-radio *ngIf=\"variant === 'radio'\" [name]=\"name\" label=\"\" [disabled]=\"disabled\" [value]=\"value ? 'true' : ''\" class=\"c-tile__check\"></lib-radio>\n <lib-checkbox *ngIf=\"variant === 'checkbox'\" label=\"\" [disabled]=\"disabled\" [checked]=\"value\" class=\"c-tile__check\"></lib-checkbox>\n </div>\n <div class=\"c-tile__content\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [".c-tile{display:flex;width:18rem;padding:var(--space-page-padding-sm) var(--space-container-padding-sm);flex-direction:column;align-items:flex-start;gap:var(--space-container-gap-sm);border-radius:var(--size-border-radius-md);border:var(--size-border-width-sm) solid var(--color-tile-border-default);background:var(--color-tile-background-default);cursor:pointer}.c-tile:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-hover);background:var(--color-tile-background-hover)}.c-tile--disabled,.c-tile--disabled:hover,.c-tile--disabled.c-tile--selected{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled)}.c-tile__wrapper{display:flex;width:100%;height:100%;justify-content:space-between;align-items:center}.c-tile--selected,.c-tile--selected:hover{border:var(--size-border-width-sm, 1px) solid var(--color-tile-checked-border-default, #217870);background:var(--color-tile-checked-background-default, #EDFDFA)}.c-tile--neutral:focus-visible{box-shadow:0 0 0 2px var(--color-effect-focus-contrast),0 0 0 4px var(--color-effect-focus-color)}.c-tile:focus-visible .c-tile__check{box-shadow:0 0 0 2px var(--color-effect-focus-contrast),0 0 0 4px var(--color-effect-focus-color)}.c-tile__title{margin:0;color:var(--color-tile-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tile__check{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["id", "name", "value", "label", "error", "disabled"], outputs: ["modelChange"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "id", "checked", "disabled", "error", "indeterminate", "innerHTML"], outputs: ["changed"] }] });
|
|
2163
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TileComponent, isStandalone: true, selector: "lib-tile", inputs: { variant: "variant", title: "title", name: "name", value: "value", disabled: "disabled" }, outputs: { valueExport: "valueExport" }, ngImport: i0, template: "<div class=\"c-tile\" [class.c-tile--selected]=\"value\" [class.c-tile--neutral]=\"variant === 'neutral'\" [class.c-tile--disabled]=\"disabled\" tabindex=\"0\" role=\"button\" (click)=\"onClick()\" (keyup.enter)=\"onClick()\">\n <div class=\"c-tile__wrapper\">\n <p class=\"c-tile__title\">{{ title }}</p>\n <lib-radio *ngIf=\"variant === 'radio'\" [name]=\"name\" label=\"\" [disabled]=\"disabled\" [value]=\"value ? 'true' : ''\" class=\"c-tile__check\"></lib-radio>\n <lib-checkbox *ngIf=\"variant === 'checkbox'\" label=\"\" [disabled]=\"disabled\" [checked]=\"value\" class=\"c-tile__check\"></lib-checkbox>\n </div>\n <div class=\"c-tile__content\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [".c-tile{display:flex;width:18rem;padding:var(--space-page-padding-sm) var(--space-container-padding-sm);flex-direction:column;align-items:flex-start;gap:var(--space-container-gap-sm);border-radius:var(--size-border-radius-md);border:var(--size-border-width-sm) solid var(--color-tile-border-default);background:var(--color-tile-background-default);cursor:pointer}.c-tile:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-hover);background:var(--color-tile-background-hover)}.c-tile--disabled,.c-tile--disabled:hover,.c-tile--disabled.c-tile--selected{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled)}.c-tile__wrapper{display:flex;width:100%;height:100%;justify-content:space-between;align-items:center}.c-tile--selected,.c-tile--selected:hover{border:var(--size-border-width-sm, 1px) solid var(--color-tile-checked-border-default, #217870);background:var(--color-tile-checked-background-default, #EDFDFA)}.c-tile--neutral:focus-visible{box-shadow:0 0 0 2px var(--color-effect-focus-contrast),0 0 0 4px var(--color-effect-focus-color)}.c-tile:focus-visible .c-tile__check{box-shadow:0 0 0 2px var(--color-effect-focus-contrast),0 0 0 4px var(--color-effect-focus-color)}.c-tile__title{margin:0;color:var(--color-tile-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tile__check{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["id", "name", "value", "label", "error", "disabled"], outputs: ["modelChange"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "id", "checked", "disabled", "error", "indeterminate", "innerHTML", "required"], outputs: ["changed"] }] });
|
|
2163
2164
|
}
|
|
2164
2165
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TileComponent, decorators: [{
|
|
2165
2166
|
type: Component,
|