@crowdfarming/oliva-ds 1.4.0 → 1.5.0
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 +386 -206
- package/fesm2022/crowdfarming-oliva-ds.mjs.map +1 -1
- package/index.d.ts +5 -7
- 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 +1 -1
- package/lib/checkbox-group/src/lib/checkbox-group/checkbox-group.component.d.ts +12 -13
- package/lib/helper-text/src/lib/helper-text/helper-text.component.d.ts +8 -0
- package/lib/icon/src/index.d.ts +1 -0
- package/lib/icon/src/lib/icon/icon.component.d.ts +9 -0
- package/lib/input-date/src/index.d.ts +1 -0
- package/lib/input-date/src/lib/input-date/input-date.component.d.ts +23 -0
- package/lib/input-number/src/index.d.ts +1 -0
- package/lib/input-number/src/lib/input-number/input-number.component.d.ts +25 -0
- package/lib/input-search/src/index.d.ts +1 -0
- package/lib/input-search/src/lib/input-search/input-search.component.d.ts +22 -0
- package/lib/password-input/src/lib/password-input/password-input.component.d.ts +5 -1
- package/lib/radio/src/lib/radio/radio.component.d.ts +2 -1
- package/lib/text-input/src/lib/text-input/text-input.component.d.ts +5 -1
- package/lib/textarea/src/lib/textarea/textarea.component.d.ts +5 -1
- package/package.json +1 -1
- package/themes/crowdfarming/_tokens.css +796 -1126
- package/themes/farmeneur/_tokens.css +948 -1254
- package/lib/icon-alert/src/index.d.ts +0 -1
- package/lib/icon-alert/src/lib/icon-alert/icon-alert.component.d.ts +0 -7
- package/lib/icon-eye/src/index.d.ts +0 -1
- package/lib/icon-eye/src/lib/icon-eye/icon-eye.component.d.ts +0 -8
- package/lib/icon-spinner/src/index.d.ts +0 -1
- package/lib/icon-spinner/src/lib/icon-spinner/icon-spinner.component.d.ts +0 -6
- package/lib/icon-success/src/index.d.ts +0 -1
- package/lib/icon-success/src/lib/icon-success/icon-success.component.d.ts +0 -7
- package/lib/icon-test/src/index.d.ts +0 -1
- package/lib/icon-test/src/lib/icon-test/icon-test.component.d.ts +0 -7
- package/lib/icon-thumb/src/index.d.ts +0 -1
- package/lib/icon-thumb/src/lib/icon-thumb/icon-thumb.component.d.ts +0 -7
- package/lib/icon-user/src/index.d.ts +0 -1
- package/lib/icon-user/src/lib/icon-user/icon-user.component.d.ts +0 -7
- package/themes/crowdfarming/_tokens.scss +0 -1416
- package/themes/farmeneur/_tokens.scss +0 -1317
|
@@ -1,21 +1,27 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, Component, ElementRef, ContentChild, EventEmitter, Output,
|
|
2
|
+
import { Input, Component, ElementRef, ContentChild, EventEmitter, Output, HostListener } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
|
|
6
|
-
class
|
|
6
|
+
class IconComponent {
|
|
7
7
|
extraClass = '';
|
|
8
|
+
variant = 'default';
|
|
8
9
|
size = 'lg';
|
|
9
|
-
|
|
10
|
-
static
|
|
10
|
+
icon = '';
|
|
11
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12
|
+
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 *ngIf=\"icon==='alert'\" [ngClass]=\"['o-svg','o-svg__alert','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#BA2F1E\"/>\n</svg>\n\n<svg *ngIf=\"icon === 'arrow' && variant === 'left'\" [ngClass]=\"['o-svg','o-svg__arrow','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path 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\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"icon === 'arrow' && variant === 'right'\" [ngClass]=\"['o-svg','o-svg__arrow','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path 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\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"icon === 'arrow' && variant === 'up'\" [ngClass]=\"['o-svg','o-svg__arrow','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path 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\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"icon === 'arrow' && variant === 'down'\" [ngClass]=\"['o-svg','o-svg__arrow','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path 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\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"icon==='calendar'\" [ngClass]=\"['o-svg','o-svg__calendar','o-svg--' + size,extraClass ? 'o-svg__calendar--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"icon==='eye' && variant === 'open'\" [ngClass]=\"['o-svg','o-svg__eye','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"icon==='eye' && variant === 'close'\" [ngClass]=\"['o-svg','o-svg__eye','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"icon==='less'\" [ngClass]=\"['o-svg','o-svg__less','o-svg--' + size,extraClass ? 'o-svg__less--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path 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\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"icon==='plus'\" [ngClass]=\"['o-svg','o-svg__plus','o-svg--' + size,extraClass ? 'o-svg__plus--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"icon==='search'\" [ngClass]=\"['o-svg','o-svg__search','o-svg--' + size,extraClass ? 'o-svg__search--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#676D6C\"/>\n</svg>\n\n<svg *ngIf=\"icon==='spinner'\" [ngClass]=\"['o-svg','o-svg__spinner',extraClass ? 'o-svg__spinner--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" 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\" fill=\"#fff\"/>\n</svg>\n\n<svg *ngIf=\"icon==='success'\" [ngClass]=\"['o-svg','o-svg__success','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#35785B\"/>\n</svg>\n\n<svg *ngIf=\"icon==='test'\" fill=\"none\" [ngClass]=\"['o-svg','o-svg__test',extraClass ? 'o-svg__test--' + extraClass : '']\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\">\n <path 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\" fill=\"#217870\"/>\n</svg>\n\n<svg *ngIf=\"icon==='thumb'\" [ngClass]=\"['o-svg','o-svg__thumb','o-svg--' + size,extraClass ? 'o-svg__thumb--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path 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\" fill=\"#535858\"/>\n</svg>\n\n<svg *ngIf=\"icon==='user'\" [ngClass]=\"['o-svg','o-svg__user','o-svg--' + size,extraClass ? 'o-svg__user--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path 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\" fill=\"#535858\"/>\n</svg>\n\n<svg *ngIf=\"icon==='info'\" [ngClass]=\"['o-svg','o-svg__info','o-svg--' + size,extraClass ? 'o-svg__info--' + extraClass : '']\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#27749A\"/>\n</svg>\n\n<svg *ngIf=\"icon==='warning'\" [ngClass]=\"['o-svg','o-svg__warning','o-svg--' + size,extraClass ? 'o-svg__warning--' + extraClass : '']\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#866600\"/>\n</svg>\n\n<svg *ngIf=\"icon==='upload'\" [ngClass]=\"['o-svg','o-svg__upload','o-svg--' + size,extraClass ? 'o-svg__upload--' + extraClass : '']\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"icon==='card'\" [ngClass]=\"['o-svg','o-svg__card','o-svg--' + size,extraClass ? 'o-svg__card--' + extraClass : '']\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 20\">\n <path 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\" fill=\"#4486E4\"/>\n <path d=\"M30 4.16669H0v3h30v-3Z\" fill=\"#0F3760\"/>\n <path 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\" fill=\"#D4E3F4\"/>\n</svg>\n\n<svg *ngIf=\"icon==='card-disabled'\" [ngClass]=\"['o-svg','o-svg__card-disabled','o-svg--' + size,extraClass ? 'o-svg__card-disabled--' + extraClass : '']\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 20\">\n <path 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\" fill=\"#c7c7c7\"/>\n <path d=\"M30 4.16669H0v3h30v-3Z\" fill=\"#a7a7a7\"/>\n <path 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\" fill=\"#D4E3F4\"/>\n</svg>\n\n<svg *ngIf=\"icon==='close'\" [ngClass]=\"['o-svg','o-svg__close','o-svg--' + size,extraClass ? 'o-svg__close--' + extraClass : '']\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"icon==='close-white'\" [ngClass]=\"['o-svg','o-svg__close','o-svg--' + size,extraClass ? 'o-svg__close--' + extraClass : '']\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#ffffff\"/>\n</svg>\n\n<svg *ngIf=\"icon==='close-disabled'\" [ngClass]=\"['o-svg','o-svg__close','o-svg--' + size,extraClass ? 'o-svg__close--' + extraClass : '']\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path 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\" fill=\"#A6B0AF\"/>\n</svg>\n\n<svg *ngIf=\"icon==='check-circle'\" [ngClass]=\"['o-svg','o-svg__check-circle','o-svg--' + size,extraClass ? 'o-svg__check-circle--' + extraClass : '']\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path 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\" fill=\"#217870\"/>\n</svg>\n\n<svg *ngIf=\"icon==='elipsis'\" [ngClass]=\"['o-svg','o-svg__elipsis','o-svg--' + size,extraClass ? 'o-svg__elipsis--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 11 20\">\n <path 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\" fill=\"#535858\"/>\n</svg>", 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--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"] }] });
|
|
11
13
|
}
|
|
12
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type:
|
|
14
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconComponent, decorators: [{
|
|
13
15
|
type: Component,
|
|
14
|
-
args: [{ selector: 'lib-icon-user', imports: [CommonModule], template: "<svg [ngClass]=\"['o-svg','o-svg__user','o-svg--' + size,extraClass ? 'o-svg__user--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path 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\" fill=\"#535858\"/>\n</svg>", 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}\n"] }]
|
|
16
|
+
args: [{ selector: 'lib-icon', imports: [CommonModule], template: "<svg *ngIf=\"icon==='alert'\" [ngClass]=\"['o-svg','o-svg__alert','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#BA2F1E\"/>\n</svg>\n\n<svg *ngIf=\"icon === 'arrow' && variant === 'left'\" [ngClass]=\"['o-svg','o-svg__arrow','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path 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\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"icon === 'arrow' && variant === 'right'\" [ngClass]=\"['o-svg','o-svg__arrow','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path 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\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"icon === 'arrow' && variant === 'up'\" [ngClass]=\"['o-svg','o-svg__arrow','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path 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\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"icon === 'arrow' && variant === 'down'\" [ngClass]=\"['o-svg','o-svg__arrow','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path 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\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"icon==='calendar'\" [ngClass]=\"['o-svg','o-svg__calendar','o-svg--' + size,extraClass ? 'o-svg__calendar--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"icon==='eye' && variant === 'open'\" [ngClass]=\"['o-svg','o-svg__eye','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"icon==='eye' && variant === 'close'\" [ngClass]=\"['o-svg','o-svg__eye','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"icon==='less'\" [ngClass]=\"['o-svg','o-svg__less','o-svg--' + size,extraClass ? 'o-svg__less--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path 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\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"icon==='plus'\" [ngClass]=\"['o-svg','o-svg__plus','o-svg--' + size,extraClass ? 'o-svg__plus--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"icon==='search'\" [ngClass]=\"['o-svg','o-svg__search','o-svg--' + size,extraClass ? 'o-svg__search--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#676D6C\"/>\n</svg>\n\n<svg *ngIf=\"icon==='spinner'\" [ngClass]=\"['o-svg','o-svg__spinner',extraClass ? 'o-svg__spinner--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" 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\" fill=\"#fff\"/>\n</svg>\n\n<svg *ngIf=\"icon==='success'\" [ngClass]=\"['o-svg','o-svg__success','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#35785B\"/>\n</svg>\n\n<svg *ngIf=\"icon==='test'\" fill=\"none\" [ngClass]=\"['o-svg','o-svg__test',extraClass ? 'o-svg__test--' + extraClass : '']\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\">\n <path 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\" fill=\"#217870\"/>\n</svg>\n\n<svg *ngIf=\"icon==='thumb'\" [ngClass]=\"['o-svg','o-svg__thumb','o-svg--' + size,extraClass ? 'o-svg__thumb--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path 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\" fill=\"#535858\"/>\n</svg>\n\n<svg *ngIf=\"icon==='user'\" [ngClass]=\"['o-svg','o-svg__user','o-svg--' + size,extraClass ? 'o-svg__user--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path 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\" fill=\"#535858\"/>\n</svg>\n\n<svg *ngIf=\"icon==='info'\" [ngClass]=\"['o-svg','o-svg__info','o-svg--' + size,extraClass ? 'o-svg__info--' + extraClass : '']\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#27749A\"/>\n</svg>\n\n<svg *ngIf=\"icon==='warning'\" [ngClass]=\"['o-svg','o-svg__warning','o-svg--' + size,extraClass ? 'o-svg__warning--' + extraClass : '']\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#866600\"/>\n</svg>\n\n<svg *ngIf=\"icon==='upload'\" [ngClass]=\"['o-svg','o-svg__upload','o-svg--' + size,extraClass ? 'o-svg__upload--' + extraClass : '']\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"icon==='card'\" [ngClass]=\"['o-svg','o-svg__card','o-svg--' + size,extraClass ? 'o-svg__card--' + extraClass : '']\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 20\">\n <path 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\" fill=\"#4486E4\"/>\n <path d=\"M30 4.16669H0v3h30v-3Z\" fill=\"#0F3760\"/>\n <path 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\" fill=\"#D4E3F4\"/>\n</svg>\n\n<svg *ngIf=\"icon==='card-disabled'\" [ngClass]=\"['o-svg','o-svg__card-disabled','o-svg--' + size,extraClass ? 'o-svg__card-disabled--' + extraClass : '']\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 20\">\n <path 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\" fill=\"#c7c7c7\"/>\n <path d=\"M30 4.16669H0v3h30v-3Z\" fill=\"#a7a7a7\"/>\n <path 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\" fill=\"#D4E3F4\"/>\n</svg>\n\n<svg *ngIf=\"icon==='close'\" [ngClass]=\"['o-svg','o-svg__close','o-svg--' + size,extraClass ? 'o-svg__close--' + extraClass : '']\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"icon==='close-white'\" [ngClass]=\"['o-svg','o-svg__close','o-svg--' + size,extraClass ? 'o-svg__close--' + extraClass : '']\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#ffffff\"/>\n</svg>\n\n<svg *ngIf=\"icon==='close-disabled'\" [ngClass]=\"['o-svg','o-svg__close','o-svg--' + size,extraClass ? 'o-svg__close--' + extraClass : '']\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path 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\" fill=\"#A6B0AF\"/>\n</svg>\n\n<svg *ngIf=\"icon==='check-circle'\" [ngClass]=\"['o-svg','o-svg__check-circle','o-svg--' + size,extraClass ? 'o-svg__check-circle--' + extraClass : '']\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path 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\" fill=\"#217870\"/>\n</svg>\n\n<svg *ngIf=\"icon==='elipsis'\" [ngClass]=\"['o-svg','o-svg__elipsis','o-svg--' + size,extraClass ? 'o-svg__elipsis--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 11 20\">\n <path 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\" fill=\"#535858\"/>\n</svg>", 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--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"] }]
|
|
15
17
|
}], propDecorators: { extraClass: [{
|
|
16
18
|
type: Input
|
|
19
|
+
}], variant: [{
|
|
20
|
+
type: Input
|
|
17
21
|
}], size: [{
|
|
18
22
|
type: Input
|
|
23
|
+
}], icon: [{
|
|
24
|
+
type: Input
|
|
19
25
|
}] } });
|
|
20
26
|
|
|
21
27
|
class AvatarComponent {
|
|
@@ -24,11 +30,11 @@ class AvatarComponent {
|
|
|
24
30
|
src = '';
|
|
25
31
|
alt = '';
|
|
26
32
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
27
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: AvatarComponent, isStandalone: true, selector: "lib-avatar", inputs: { size: "size", initial: "initial", src: "src", alt: "alt" }, ngImport: i0, template: "<figure [ngClass]=\"['c-avatar','c-avatar__' + size, !src && !initial ? 'c-avatar--no-img' : '', !src && initial ? 'c-avatar--initial' : '']\">\n <img *ngIf=\"src\" [src]=\"src\" [alt]=\"alt\" class=\"c-avatar__img\" />\n <lib-icon
|
|
33
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: AvatarComponent, isStandalone: true, selector: "lib-avatar", inputs: { size: "size", initial: "initial", src: "src", alt: "alt" }, ngImport: i0, template: "<figure [ngClass]=\"['c-avatar','c-avatar__' + size, !src && !initial ? 'c-avatar--no-img' : '', !src && initial ? 'c-avatar--initial' : '']\">\n <img *ngIf=\"src\" [src]=\"src\" [alt]=\"alt\" class=\"c-avatar__img\" />\n <lib-icon icon=\"user\" *ngIf=\"!src && !initial\" [size]=\"size === 'xl' ? 'lg' : size\"/>\n <span class=\"c-avatar--initial\" *ngIf=\"!src && initial\">{{initial}}</span>\n</figure>", 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: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }] });
|
|
28
34
|
}
|
|
29
35
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
30
36
|
type: Component,
|
|
31
|
-
args: [{ selector: 'lib-avatar', imports: [CommonModule,
|
|
37
|
+
args: [{ selector: 'lib-avatar', imports: [CommonModule, IconComponent], template: "<figure [ngClass]=\"['c-avatar','c-avatar__' + size, !src && !initial ? 'c-avatar--no-img' : '', !src && initial ? 'c-avatar--initial' : '']\">\n <img *ngIf=\"src\" [src]=\"src\" [alt]=\"alt\" class=\"c-avatar__img\" />\n <lib-icon icon=\"user\" *ngIf=\"!src && !initial\" [size]=\"size === 'xl' ? 'lg' : size\"/>\n <span class=\"c-avatar--initial\" *ngIf=\"!src && initial\">{{initial}}</span>\n</figure>", 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"] }]
|
|
32
38
|
}], propDecorators: { size: [{
|
|
33
39
|
type: Input
|
|
34
40
|
}], initial: [{
|
|
@@ -39,18 +45,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
39
45
|
type: Input
|
|
40
46
|
}] } });
|
|
41
47
|
|
|
42
|
-
class IconSpinnerComponent {
|
|
43
|
-
extraClass = '';
|
|
44
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
45
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: IconSpinnerComponent, isStandalone: true, selector: "lib-icon-spinner", inputs: { extraClass: "extraClass" }, ngImport: i0, template: "<svg [ngClass]=\"['o-svg','o-svg__spinner',extraClass ? 'o-svg__spinner--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" 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\" fill=\"#fff\"/>\n</svg>", styles: ["@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"] }] });
|
|
46
|
-
}
|
|
47
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconSpinnerComponent, decorators: [{
|
|
48
|
-
type: Component,
|
|
49
|
-
args: [{ selector: 'lib-icon-spinner', imports: [CommonModule], template: "<svg [ngClass]=\"['o-svg','o-svg__spinner',extraClass ? 'o-svg__spinner--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" 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\" fill=\"#fff\"/>\n</svg>", styles: ["@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"] }]
|
|
50
|
-
}], propDecorators: { extraClass: [{
|
|
51
|
-
type: Input
|
|
52
|
-
}] } });
|
|
53
|
-
|
|
54
48
|
class ButtonComponent {
|
|
55
49
|
text;
|
|
56
50
|
ariaLabel;
|
|
@@ -83,11 +77,11 @@ class ButtonComponent {
|
|
|
83
77
|
return null;
|
|
84
78
|
}
|
|
85
79
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
86
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ButtonComponent, isStandalone: true, selector: "lib-button", inputs: { text: "text", ariaLabel: "ariaLabel", disabled: "disabled", loading: "loading", variant: "variant", size: "size", loadingText: "loadingText" }, queries: [{ propertyName: "iconBeforeContent", first: true, predicate: ["iconBefore"], descendants: true, read: ElementRef }, { propertyName: "iconAfterContent", first: true, predicate: ["iconAfter"], descendants: true, read: ElementRef }], 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__loading\" aria-hidden=\"true\"><lib-icon-spinner [extraClass]=\"disabled ? 'disabled' : variant \"></lib-icon-spinner></span>\n\n <!-- Icon antes (siempre queda el slot) -->\n <span *ngIf=\"hasIconBefore && !loading\" class=\"c-button__icon\">\n <ng-content select=\"[iconBefore]\"></ng-content>\n </span>\n\n <!-- Texto -->\n <span *ngIf=\"text && !loading\" class=\"c-button__text\">{{ text }}</span>\n <span *ngIf=\"loading\" class=\"c-button__text\">{{ loadingText }}</span>\n\n <!-- Icon despu\u00E9s -->\n <span *ngIf=\"hasIconAfter && !loading\" class=\"c-button__icon\">\n <ng-content select=\"[iconAfter]\"></ng-content>\n </span>\n</button>\n", styles: [".c-button{display:flex;align-items:center;gap:var(--mobile-space-component-gap-md);cursor:pointer;font-family:var(--mobile-typography-label-md-strong-family),sans-serif;font-weight:var(--mobile-typography-label-md-strong-weight);font-size:var(--mobile-typography-label-md-strong-size);line-height:var(--mobile-typography-label-md-strong-line-height);letter-spacing:var(--mobile-typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--mobile-space-component-padding-md) var(--mobile-space-component-padding-xl);border-radius:var(--mobile-size-button-border-radius);background-color:var(--color-button-primary-background-default);border:var(--mobile-size-button-border-width) solid var(--color-button-primary-background-default)}.c-button:hover{background-color:var(--color-button-primary-background-hover);border:var(--mobile-size-button-border-width) solid var(--color-button-primary-background-hover)}.c-button:focus{outline:2px solid var(--focus-outset)}.c-button:pressed{background-color:var(--color-button-primary-background-processed);border:var(--mobile-size-button-border-width) solid var(--color-button-primary-background-processed)}.c-button:disabled{background-color:var(--color-button-primary-background-disabled);border:var(--mobile-size-button-border-width) solid var(--color-button-primary-background-disabled);color:var(--color-button-primary-content-disabled)}.c-button__icon,.c-button__loading{width:24px;height:24px}.c-button--md{gap:var(--mobile-space-component-gap-md);font-family:var(--mobile-typography-label-md-strong-family),sans-serif;font-weight:var(--mobile-typography-label-md-strong-weight);font-size:var(--mobile-typography-label-md-strong-size);line-height:var(--mobile-typography-label-md-strong-line-height);letter-spacing:var(--mobile-typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--mobile-space-component-padding-sm) var(--mobile-space-component-padding-lg)}.c-button--sm{gap:var(--mobile-space-component-gap-md);font-family:var(--mobile-typography-label-md-strong-family),sans-serif;font-weight:var(--mobile-typography-label-md-strong-weight);font-size:var(--mobile-typography-label-md-strong-size);line-height:var(--mobile-typography-label-md-strong-line-height);letter-spacing:var(--mobile-typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--mobile-space-component-padding-xs) var(--mobile-space-component-padding-sm)}.c-button--xs{gap:var(--mobile-space-component-gap-md);font-family:var(--mobile-typography-label-sm-strong-family),sans-serif;font-weight:var(--mobile-typography-label-sm-strong-weight);font-size:var(--mobile-typography-label-sm-strong-size);line-height:var(--mobile-typography-label-sm-strong-line-height);letter-spacing:var(--mobile-typography-label-sm-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--mobile-space-component-padding-2xs) var(--mobile-space-component-padding-sm)}.c-button--xs .c-button__icon,.c-button--xs .c-button__loading{width:20px;height:20px}@media (min-width: var(--tablet-size-viewport-width)){.c-button{font-family:var(--tablet-typography-label-md-strong-family),sans-serif;font-weight:var(--tablet-typography-label-md-strong-weight);font-size:var(--tablet-typography-label-md-strong-size);line-height:var(--tablet-typography-label-md-strong-line-height);letter-spacing:var(--tablet-typography-label-md-strong-letter-spacing);padding:var(--tablet-space-component-padding-md) var(--tablet-space-component-padding-xl)}.c-button--md,.c-button--sm{font-family:var(--tablet-typography-label-md-strong-family),sans-serif;font-weight:var(--tablet-typography-label-md-strong-weight);font-size:var(--tablet-typography-label-md-strong-size);line-height:var(--tablet-typography-label-md-strong-line-height);letter-spacing:var(--tablet-typography-label-md-strong-letter-spacing)}.c-button--xs{font-family:var(--tablet-typography-label-sm-strong-family),sans-serif;font-weight:var(--tablet-typography-label-sm-strong-weight);font-size:var(--tablet-typography-label-sm-strong-size);line-height:var(--tablet-typography-label-sm-strong-line-height);letter-spacing:var(--tablet-typography-label-sm-strong-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-button{font-family:var(--widescreen-typography-label-md-strong-family),sans-serif;font-weight:var(--widescreen-typography-label-md-strong-weight);font-size:var(--widescreen-typography-label-md-strong-size);line-height:var(--widescreen-typography-label-md-strong-line-height);letter-spacing:var(--widescreen-typography-label-md-strong-letter-spacing);padding:var(--widescreen-space-component-padding-md) var(--widescreen-space-component-padding-xl)}.c-button--md,.c-button--sm{font-family:var(--widescreen-typography-label-md-strong-family),sans-serif;font-weight:var(--widescreen-typography-label-md-strong-weight);font-size:var(--widescreen-typography-label-md-strong-size);line-height:var(--widescreen-typography-label-md-strong-line-height);letter-spacing:var(--widescreen-typography-label-md-strong-letter-spacing)}.c-button--xs{font-family:var(--widescreen-typography-label-sm-strong-family),sans-serif;font-weight:var(--widescreen-typography-label-sm-strong-weight);font-size:var(--widescreen-typography-label-sm-strong-size);line-height:var(--widescreen-typography-label-sm-strong-line-height);letter-spacing:var(--widescreen-typography-label-sm-strong-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-button{font-family:var(--desktop-typography-label-md-strong-family),sans-serif;font-weight:var(--desktop-typography-label-md-strong-weight);font-size:var(--desktop-typography-label-md-strong-size);line-height:var(--desktop-typography-label-md-strong-line-height);letter-spacing:var(--desktop-typography-label-md-strong-letter-spacing);padding:var(--desktop-space-component-padding-md) var(--desktop-space-component-padding-xl)}.c-button--md,.c-button--sm{font-family:var(--desktop-typography-label-md-strong-family),sans-serif;font-weight:var(--desktop-typography-label-md-strong-weight);font-size:var(--desktop-typography-label-md-strong-size);line-height:var(--desktop-typography-label-md-strong-line-height);letter-spacing:var(--desktop-typography-label-md-strong-letter-spacing)}.c-button--xs{font-family:var(--desktop-typography-label-sm-strong-family),sans-serif;font-weight:var(--desktop-typography-label-sm-strong-weight);font-size:var(--desktop-typography-label-sm-strong-size);line-height:var(--desktop-typography-label-sm-strong-line-height);letter-spacing:var(--desktop-typography-label-sm-strong-letter-spacing)}}.c-button--secondary{background-color:transparent;border:var(--mobile-size-button-border-width) solid var(--color-button-secondary-border-default);color:var(--color-button-secondary-content-default)}.c-button--secondary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button--secondary:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button--secondary:disabled{background-color:var(--color-button-secondary-background-disabled);border:var(--mobile-size-button-border-width) solid var(--color-button-secondary-background-disabled);color:var(--color-button-secondary-content-disabled)}.c-button--tertiary{background-color:transparent;border:var(--mobile-size-button-border-width) solid transparent;color:var(--color-button-secondary-content-default)}.c-button--tertiary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button--tertiary:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button--tertiary:disabled{background-color:transparent;border:0;color:var(--color-button-secondary-content-disabled)}.c-button--danger{background-color:var(--color-button-danger-background-default);border:var(--mobile-size-button-border-width) solid var(--color-button-danger-background-default);color:var(--color-button-danger-content-default)}.c-button--danger:hover{background-color:var(--color-button-danger-background-hover);border:var(--mobile-size-button-border-width) solid var(--color-button-danger-background-hover)}.c-button--danger:pressed{background-color:var(--color-action-danger-background-pressed);border:var(--mobile-size-button-border-width) solid var(--color-button-danger-background-pressed)}.c-button--danger:disabled{background-color:var(--color-button-danger-background-disabled);color:var(--color-button-tertiary-content-disabled);border:var(--mobile-size-button-border-width) solid var(--color-button-danger-background-disabled)}.c-button--inverse{background-color:var(--color-button-inverse-background-default);border:var(--mobile-size-button-border-width) solid var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-default)}.c-button--inverse:hover{background-color:var(--color-button-inverse-background-hover);border:var(--mobile-size-button-border-width) solid var(--color-button-inverse-border-default)}.c-button--inverse:pressed{background-color:var(--color-action-inverse-background-pressed);border:var(--mobile-size-button-border-width) solid var(--color-button-inverse-background-pressed)}.c-button--inverse:disabled{background-color:var(--color-button-inverse-background-disabled);color:var(--color-button-inverse-content-disabled);border:var(--mobile-size-button-border-width) solid var(--color-button-inverse-background-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: IconSpinnerComponent, selector: "lib-icon-spinner", inputs: ["extraClass"] }] });
|
|
80
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ButtonComponent, isStandalone: true, selector: "lib-button", inputs: { text: "text", ariaLabel: "ariaLabel", disabled: "disabled", loading: "loading", variant: "variant", size: "size", loadingText: "loadingText" }, queries: [{ propertyName: "iconBeforeContent", first: true, predicate: ["iconBefore"], descendants: true, read: ElementRef }, { propertyName: "iconAfterContent", first: true, predicate: ["iconAfter"], descendants: true, read: ElementRef }], 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__loading\" aria-hidden=\"true\"><lib-icon icon=\"spinner\" [extraClass]=\"disabled ? 'disabled' : variant \"></lib-icon></span>\n\n <!-- Icon antes (siempre queda el slot) -->\n <span *ngIf=\"hasIconBefore && !loading\" class=\"c-button__icon\">\n <ng-content select=\"[iconBefore]\"></ng-content>\n </span>\n\n <!-- Texto -->\n <span *ngIf=\"text && !loading\" class=\"c-button__text\">{{ text }}</span>\n <span *ngIf=\"loading\" class=\"c-button__text\">{{ loadingText }}</span>\n\n <!-- Icon despu\u00E9s -->\n <span *ngIf=\"hasIconAfter && !loading\" class=\"c-button__icon\">\n <ng-content select=\"[iconAfter]\"></ng-content>\n </span>\n</button>\n", styles: [".c-button{display:flex;align-items:center;gap:var(--space-component-gap-md);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:var(--space-component-padding-md) var(--space-component-padding-xl);border-radius:var(--size-button-border-radius);background-color:var(--color-button-primary-border-default);border:var(--size-button-border-width) solid var(--color-button-primary-background-default)}.c-button:hover{background-color:var(--color-button-primary-border-hover);border:var(--size-button-border-width) solid var(--color-button-primary-background-hover)}.c-button:focus{outline:2px solid var(--focus-outset)}.c-button:pressed{background-color:var(--color-button-primary-border-processed);border:var(--size-button-border-width) solid var(--color-button-primary-background-processed)}.c-button: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,.c-button__loading{width:24px;height:24px}.c-button--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);padding:var(--space-component-padding-sm) var(--space-component-padding-lg)}.c-button--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);padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-button--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);padding:var(--space-component-padding-2xs) var(--space-component-padding-sm)}.c-button--xs .c-button__icon,.c-button--xs .c-button__loading{width:20px;height:20px}.c-button--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--secondary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button--secondary:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button--secondary:disabled{background-color:var(--color-button-secondary-background-disabled);border:var(--size-button-border-width) solid var(--color-button-secondary-background-disabled);color:var(--color-button-secondary-content-disabled)}.c-button--tertiary{background-color:transparent;border:var(--size-button-border-width) solid transparent;color:var(--color-button-secondary-content-default)}.c-button--tertiary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button--tertiary:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button--tertiary:disabled{background-color:transparent;border:0;color:var(--color-button-secondary-content-disabled)}.c-button--danger{background-color:var(--color-button-danger-background-default);border:var(--size-button-border-width) solid var(--color-button-danger-border-default);color:var(--color-button-danger-content-default)}.c-button--danger:hover{background-color:var(--color-button-danger-background-hover);border:var(--size-button-border-width) solid var(--color-button-danger-border-hover)}.c-button--danger:pressed{background-color:var(--color-action-danger-background-pressed);border:var(--size-button-border-width) solid var(--color-button-danger-border-pressed)}.c-button--danger:disabled{background-color:var(--color-button-danger-background-disabled);color:var(--color-button-tertiary-content-disabled);border:var(--size-button-border-width) solid var(--color-button-danger-border-disabled)}.c-button--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--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--inverse:pressed{background-color:var(--color-action-inverse-background-pressed);border:var(--size-button-border-width) solid var(--color-button-inverse-border-pressed)}.c-button--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"] }] });
|
|
87
81
|
}
|
|
88
82
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
89
83
|
type: Component,
|
|
90
|
-
args: [{ selector: 'lib-button', standalone: true, imports: [CommonModule, IconSpinnerComponent], 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__loading\" aria-hidden=\"true\"><lib-icon-spinner [extraClass]=\"disabled ? 'disabled' : variant \"></lib-icon-spinner></span>\n\n <!-- Icon antes (siempre queda el slot) -->\n <span *ngIf=\"hasIconBefore && !loading\" class=\"c-button__icon\">\n <ng-content select=\"[iconBefore]\"></ng-content>\n </span>\n\n <!-- Texto -->\n <span *ngIf=\"text && !loading\" class=\"c-button__text\">{{ text }}</span>\n <span *ngIf=\"loading\" class=\"c-button__text\">{{ loadingText }}</span>\n\n <!-- Icon despu\u00E9s -->\n <span *ngIf=\"hasIconAfter && !loading\" class=\"c-button__icon\">\n <ng-content select=\"[iconAfter]\"></ng-content>\n </span>\n</button>\n", styles: [".c-button{display:flex;align-items:center;gap:var(--mobile-space-component-gap-md);cursor:pointer;font-family:var(--mobile-typography-label-md-strong-family),sans-serif;font-weight:var(--mobile-typography-label-md-strong-weight);font-size:var(--mobile-typography-label-md-strong-size);line-height:var(--mobile-typography-label-md-strong-line-height);letter-spacing:var(--mobile-typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--mobile-space-component-padding-md) var(--mobile-space-component-padding-xl);border-radius:var(--mobile-size-button-border-radius);background-color:var(--color-button-primary-background-default);border:var(--mobile-size-button-border-width) solid var(--color-button-primary-background-default)}.c-button:hover{background-color:var(--color-button-primary-background-hover);border:var(--mobile-size-button-border-width) solid var(--color-button-primary-background-hover)}.c-button:focus{outline:2px solid var(--focus-outset)}.c-button:pressed{background-color:var(--color-button-primary-background-processed);border:var(--mobile-size-button-border-width) solid var(--color-button-primary-background-processed)}.c-button:disabled{background-color:var(--color-button-primary-background-disabled);border:var(--mobile-size-button-border-width) solid var(--color-button-primary-background-disabled);color:var(--color-button-primary-content-disabled)}.c-button__icon,.c-button__loading{width:24px;height:24px}.c-button--md{gap:var(--mobile-space-component-gap-md);font-family:var(--mobile-typography-label-md-strong-family),sans-serif;font-weight:var(--mobile-typography-label-md-strong-weight);font-size:var(--mobile-typography-label-md-strong-size);line-height:var(--mobile-typography-label-md-strong-line-height);letter-spacing:var(--mobile-typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--mobile-space-component-padding-sm) var(--mobile-space-component-padding-lg)}.c-button--sm{gap:var(--mobile-space-component-gap-md);font-family:var(--mobile-typography-label-md-strong-family),sans-serif;font-weight:var(--mobile-typography-label-md-strong-weight);font-size:var(--mobile-typography-label-md-strong-size);line-height:var(--mobile-typography-label-md-strong-line-height);letter-spacing:var(--mobile-typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--mobile-space-component-padding-xs) var(--mobile-space-component-padding-sm)}.c-button--xs{gap:var(--mobile-space-component-gap-md);font-family:var(--mobile-typography-label-sm-strong-family),sans-serif;font-weight:var(--mobile-typography-label-sm-strong-weight);font-size:var(--mobile-typography-label-sm-strong-size);line-height:var(--mobile-typography-label-sm-strong-line-height);letter-spacing:var(--mobile-typography-label-sm-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--mobile-space-component-padding-2xs) var(--mobile-space-component-padding-sm)}.c-button--xs .c-button__icon,.c-button--xs .c-button__loading{width:20px;height:20px}@media (min-width: var(--tablet-size-viewport-width)){.c-button{font-family:var(--tablet-typography-label-md-strong-family),sans-serif;font-weight:var(--tablet-typography-label-md-strong-weight);font-size:var(--tablet-typography-label-md-strong-size);line-height:var(--tablet-typography-label-md-strong-line-height);letter-spacing:var(--tablet-typography-label-md-strong-letter-spacing);padding:var(--tablet-space-component-padding-md) var(--tablet-space-component-padding-xl)}.c-button--md,.c-button--sm{font-family:var(--tablet-typography-label-md-strong-family),sans-serif;font-weight:var(--tablet-typography-label-md-strong-weight);font-size:var(--tablet-typography-label-md-strong-size);line-height:var(--tablet-typography-label-md-strong-line-height);letter-spacing:var(--tablet-typography-label-md-strong-letter-spacing)}.c-button--xs{font-family:var(--tablet-typography-label-sm-strong-family),sans-serif;font-weight:var(--tablet-typography-label-sm-strong-weight);font-size:var(--tablet-typography-label-sm-strong-size);line-height:var(--tablet-typography-label-sm-strong-line-height);letter-spacing:var(--tablet-typography-label-sm-strong-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-button{font-family:var(--widescreen-typography-label-md-strong-family),sans-serif;font-weight:var(--widescreen-typography-label-md-strong-weight);font-size:var(--widescreen-typography-label-md-strong-size);line-height:var(--widescreen-typography-label-md-strong-line-height);letter-spacing:var(--widescreen-typography-label-md-strong-letter-spacing);padding:var(--widescreen-space-component-padding-md) var(--widescreen-space-component-padding-xl)}.c-button--md,.c-button--sm{font-family:var(--widescreen-typography-label-md-strong-family),sans-serif;font-weight:var(--widescreen-typography-label-md-strong-weight);font-size:var(--widescreen-typography-label-md-strong-size);line-height:var(--widescreen-typography-label-md-strong-line-height);letter-spacing:var(--widescreen-typography-label-md-strong-letter-spacing)}.c-button--xs{font-family:var(--widescreen-typography-label-sm-strong-family),sans-serif;font-weight:var(--widescreen-typography-label-sm-strong-weight);font-size:var(--widescreen-typography-label-sm-strong-size);line-height:var(--widescreen-typography-label-sm-strong-line-height);letter-spacing:var(--widescreen-typography-label-sm-strong-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-button{font-family:var(--desktop-typography-label-md-strong-family),sans-serif;font-weight:var(--desktop-typography-label-md-strong-weight);font-size:var(--desktop-typography-label-md-strong-size);line-height:var(--desktop-typography-label-md-strong-line-height);letter-spacing:var(--desktop-typography-label-md-strong-letter-spacing);padding:var(--desktop-space-component-padding-md) var(--desktop-space-component-padding-xl)}.c-button--md,.c-button--sm{font-family:var(--desktop-typography-label-md-strong-family),sans-serif;font-weight:var(--desktop-typography-label-md-strong-weight);font-size:var(--desktop-typography-label-md-strong-size);line-height:var(--desktop-typography-label-md-strong-line-height);letter-spacing:var(--desktop-typography-label-md-strong-letter-spacing)}.c-button--xs{font-family:var(--desktop-typography-label-sm-strong-family),sans-serif;font-weight:var(--desktop-typography-label-sm-strong-weight);font-size:var(--desktop-typography-label-sm-strong-size);line-height:var(--desktop-typography-label-sm-strong-line-height);letter-spacing:var(--desktop-typography-label-sm-strong-letter-spacing)}}.c-button--secondary{background-color:transparent;border:var(--mobile-size-button-border-width) solid var(--color-button-secondary-border-default);color:var(--color-button-secondary-content-default)}.c-button--secondary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button--secondary:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button--secondary:disabled{background-color:var(--color-button-secondary-background-disabled);border:var(--mobile-size-button-border-width) solid var(--color-button-secondary-background-disabled);color:var(--color-button-secondary-content-disabled)}.c-button--tertiary{background-color:transparent;border:var(--mobile-size-button-border-width) solid transparent;color:var(--color-button-secondary-content-default)}.c-button--tertiary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button--tertiary:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button--tertiary:disabled{background-color:transparent;border:0;color:var(--color-button-secondary-content-disabled)}.c-button--danger{background-color:var(--color-button-danger-background-default);border:var(--mobile-size-button-border-width) solid var(--color-button-danger-background-default);color:var(--color-button-danger-content-default)}.c-button--danger:hover{background-color:var(--color-button-danger-background-hover);border:var(--mobile-size-button-border-width) solid var(--color-button-danger-background-hover)}.c-button--danger:pressed{background-color:var(--color-action-danger-background-pressed);border:var(--mobile-size-button-border-width) solid var(--color-button-danger-background-pressed)}.c-button--danger:disabled{background-color:var(--color-button-danger-background-disabled);color:var(--color-button-tertiary-content-disabled);border:var(--mobile-size-button-border-width) solid var(--color-button-danger-background-disabled)}.c-button--inverse{background-color:var(--color-button-inverse-background-default);border:var(--mobile-size-button-border-width) solid var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-default)}.c-button--inverse:hover{background-color:var(--color-button-inverse-background-hover);border:var(--mobile-size-button-border-width) solid var(--color-button-inverse-border-default)}.c-button--inverse:pressed{background-color:var(--color-action-inverse-background-pressed);border:var(--mobile-size-button-border-width) solid var(--color-button-inverse-background-pressed)}.c-button--inverse:disabled{background-color:var(--color-button-inverse-background-disabled);color:var(--color-button-inverse-content-disabled);border:var(--mobile-size-button-border-width) solid var(--color-button-inverse-background-disabled)}\n"] }]
|
|
84
|
+
args: [{ selector: 'lib-button', standalone: true, 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__loading\" aria-hidden=\"true\"><lib-icon icon=\"spinner\" [extraClass]=\"disabled ? 'disabled' : variant \"></lib-icon></span>\n\n <!-- Icon antes (siempre queda el slot) -->\n <span *ngIf=\"hasIconBefore && !loading\" class=\"c-button__icon\">\n <ng-content select=\"[iconBefore]\"></ng-content>\n </span>\n\n <!-- Texto -->\n <span *ngIf=\"text && !loading\" class=\"c-button__text\">{{ text }}</span>\n <span *ngIf=\"loading\" class=\"c-button__text\">{{ loadingText }}</span>\n\n <!-- Icon despu\u00E9s -->\n <span *ngIf=\"hasIconAfter && !loading\" class=\"c-button__icon\">\n <ng-content select=\"[iconAfter]\"></ng-content>\n </span>\n</button>\n", styles: [".c-button{display:flex;align-items:center;gap:var(--space-component-gap-md);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:var(--space-component-padding-md) var(--space-component-padding-xl);border-radius:var(--size-button-border-radius);background-color:var(--color-button-primary-border-default);border:var(--size-button-border-width) solid var(--color-button-primary-background-default)}.c-button:hover{background-color:var(--color-button-primary-border-hover);border:var(--size-button-border-width) solid var(--color-button-primary-background-hover)}.c-button:focus{outline:2px solid var(--focus-outset)}.c-button:pressed{background-color:var(--color-button-primary-border-processed);border:var(--size-button-border-width) solid var(--color-button-primary-background-processed)}.c-button: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,.c-button__loading{width:24px;height:24px}.c-button--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);padding:var(--space-component-padding-sm) var(--space-component-padding-lg)}.c-button--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);padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-button--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);padding:var(--space-component-padding-2xs) var(--space-component-padding-sm)}.c-button--xs .c-button__icon,.c-button--xs .c-button__loading{width:20px;height:20px}.c-button--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--secondary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button--secondary:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button--secondary:disabled{background-color:var(--color-button-secondary-background-disabled);border:var(--size-button-border-width) solid var(--color-button-secondary-background-disabled);color:var(--color-button-secondary-content-disabled)}.c-button--tertiary{background-color:transparent;border:var(--size-button-border-width) solid transparent;color:var(--color-button-secondary-content-default)}.c-button--tertiary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button--tertiary:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button--tertiary:disabled{background-color:transparent;border:0;color:var(--color-button-secondary-content-disabled)}.c-button--danger{background-color:var(--color-button-danger-background-default);border:var(--size-button-border-width) solid var(--color-button-danger-border-default);color:var(--color-button-danger-content-default)}.c-button--danger:hover{background-color:var(--color-button-danger-background-hover);border:var(--size-button-border-width) solid var(--color-button-danger-border-hover)}.c-button--danger:pressed{background-color:var(--color-action-danger-background-pressed);border:var(--size-button-border-width) solid var(--color-button-danger-border-pressed)}.c-button--danger:disabled{background-color:var(--color-button-danger-background-disabled);color:var(--color-button-tertiary-content-disabled);border:var(--size-button-border-width) solid var(--color-button-danger-border-disabled)}.c-button--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--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--inverse:pressed{background-color:var(--color-action-inverse-background-pressed);border:var(--size-button-border-width) solid var(--color-button-inverse-border-pressed)}.c-button--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"] }]
|
|
91
85
|
}], propDecorators: { text: [{
|
|
92
86
|
type: Input
|
|
93
87
|
}], ariaLabel: [{
|
|
@@ -139,11 +133,11 @@ class ButtonIconComponent {
|
|
|
139
133
|
return null;
|
|
140
134
|
}
|
|
141
135
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
142
|
-
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
|
|
136
|
+
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 icon=\"spinner\" [extraClass]=\"disabled ? 'disabled' : variant \"></lib-icon></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;gap:var(--space-component-gap-md);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:var(--space-component-padding-md) var(--space-component-padding-md);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-background-default)}.c-button-icon:hover{background-color:var(--color-button-primary-background-hover);border:var(--size-button-border-width) solid var(--color-button-primary-background-hover)}.c-button-icon:focus{outline:2px solid var(--focus-outset)}.c-button-icon:pressed{background-color:var(--color-button-primary-background-processed);border:var(--size-button-border-width) solid var(--color-button-primary-background-processed)}.c-button-icon:disabled{background-color:var(--color-button-primary-background-disabled);border:var(--size-button-border-width) solid var(--color-button-primary-background-disabled);color:var(--color-button-primary-content-disabled)}.c-button-icon__icon,.c-button-icon__loading{width:24px;height:24px}.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);padding:var(--space-component-padding-sm) var(--space-component-padding-sm)}.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);padding:var(--space-component-padding-xs) var(--space-component-padding-xs)}.c-button-icon--sm .c-button-icon__icon,.c-button-icon--sm .c-button-icon__loading{width:20px;height:20px}.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);padding:var(--space-component-padding-2xs) var(--space-component-padding-2xs)}.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:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button-icon--secondary:disabled{background-color:var(--color-button-secondary-background-disabled);border:var(--size-button-border-width) solid var(--color-button-secondary-background-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:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button-icon--tertiary:disabled{background-color:transparent;border:0;color:var(--color-button-secondary-content-disabled)}.c-button-icon--danger{background-color:var(--color-button-danger-background-default);border:var(--size-button-border-width) solid var(--color-button-danger-background-default);color:var(--color-button-danger-content-default)}.c-button-icon--danger:hover{background-color:var(--color-button-danger-background-hover);border:var(--size-button-border-width) solid var(--color-button-danger-background-hover)}.c-button-icon--danger:pressed{background-color:var(--color-action-danger-background-pressed);border:var(--size-button-border-width) solid var(--color-button-danger-background-pressed)}.c-button-icon--danger:disabled{background-color:var(--color-button-danger-background-disabled);color:var(--color-button-tertiary-content-disabled);border:var(--size-button-border-width) solid var(--color-button-danger-background-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:pressed{background-color:var(--color-action-inverse-background-pressed);border:var(--size-button-border-width) solid var(--color-button-inverse-background-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-background-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"] }] });
|
|
143
137
|
}
|
|
144
138
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonIconComponent, decorators: [{
|
|
145
139
|
type: Component,
|
|
146
|
-
args: [{ selector: 'lib-button-icon', imports: [CommonModule,
|
|
140
|
+
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 icon=\"spinner\" [extraClass]=\"disabled ? 'disabled' : variant \"></lib-icon></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;gap:var(--space-component-gap-md);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:var(--space-component-padding-md) var(--space-component-padding-md);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-background-default)}.c-button-icon:hover{background-color:var(--color-button-primary-background-hover);border:var(--size-button-border-width) solid var(--color-button-primary-background-hover)}.c-button-icon:focus{outline:2px solid var(--focus-outset)}.c-button-icon:pressed{background-color:var(--color-button-primary-background-processed);border:var(--size-button-border-width) solid var(--color-button-primary-background-processed)}.c-button-icon:disabled{background-color:var(--color-button-primary-background-disabled);border:var(--size-button-border-width) solid var(--color-button-primary-background-disabled);color:var(--color-button-primary-content-disabled)}.c-button-icon__icon,.c-button-icon__loading{width:24px;height:24px}.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);padding:var(--space-component-padding-sm) var(--space-component-padding-sm)}.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);padding:var(--space-component-padding-xs) var(--space-component-padding-xs)}.c-button-icon--sm .c-button-icon__icon,.c-button-icon--sm .c-button-icon__loading{width:20px;height:20px}.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);padding:var(--space-component-padding-2xs) var(--space-component-padding-2xs)}.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:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button-icon--secondary:disabled{background-color:var(--color-button-secondary-background-disabled);border:var(--size-button-border-width) solid var(--color-button-secondary-background-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:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button-icon--tertiary:disabled{background-color:transparent;border:0;color:var(--color-button-secondary-content-disabled)}.c-button-icon--danger{background-color:var(--color-button-danger-background-default);border:var(--size-button-border-width) solid var(--color-button-danger-background-default);color:var(--color-button-danger-content-default)}.c-button-icon--danger:hover{background-color:var(--color-button-danger-background-hover);border:var(--size-button-border-width) solid var(--color-button-danger-background-hover)}.c-button-icon--danger:pressed{background-color:var(--color-action-danger-background-pressed);border:var(--size-button-border-width) solid var(--color-button-danger-background-pressed)}.c-button-icon--danger:disabled{background-color:var(--color-button-danger-background-disabled);color:var(--color-button-tertiary-content-disabled);border:var(--size-button-border-width) solid var(--color-button-danger-background-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:pressed{background-color:var(--color-action-inverse-background-pressed);border:var(--size-button-border-width) solid var(--color-button-inverse-background-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-background-disabled)}\n"] }]
|
|
147
141
|
}], propDecorators: { ariaLabel: [{
|
|
148
142
|
type: Input
|
|
149
143
|
}], disabled: [{
|
|
@@ -172,11 +166,11 @@ class LinkComponent {
|
|
|
172
166
|
get variantClass() { return this.variant !== 'primary' ? `c-link--${this.variant}` : ''; }
|
|
173
167
|
get sizeClass() { return this.size !== 'md' ? `c-link--${this.size}` : ''; }
|
|
174
168
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
175
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: LinkComponent, isStandalone: true, selector: "lib-link", inputs: { text: "text", loadingText: "loadingText", href: "href", external: "external", disabled: "disabled", variant: "variant", size: "size", iconBefore: "iconBefore", iconAfter: "iconAfter" }, ngImport: i0, template: "<a\n [ngClass]=\"['c-link', variantClass, sizeClass, disabled ? 'c-link--disabled' : '']\"\n [href]=\"href\"\n [target]=\"target\"\n [attr.rel]=\"rel\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-label]=\"external ? text + ' (abre en una pesta\u00F1a nueva)' : null\"\n>\n <ng-container *ngIf=\"!iconBefore\">\n <span class=\"c-link__icon\"><ng-content select=\"[iconBefore]\"></ng-content></span>\n </ng-container>\n <span class=\"c-link__text\">{{ text }}</span>\n <span *ngIf=\"external\" class=\"sr-only\">(abre en una pesta\u00F1a nueva)</span>\n <ng-container *ngIf=\"!iconAfter\">\n <span class=\"c-link__icon\"><ng-content select=\"[iconAfter]\"></ng-content></span>\n </ng-container>\n</a>", styles: [".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}.c-link{display:flex;align-items:center;width:max-content;gap:var(--
|
|
169
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: LinkComponent, isStandalone: true, selector: "lib-link", inputs: { text: "text", loadingText: "loadingText", href: "href", external: "external", disabled: "disabled", variant: "variant", size: "size", iconBefore: "iconBefore", iconAfter: "iconAfter" }, ngImport: i0, template: "<a\n [ngClass]=\"['c-link', variantClass, sizeClass, disabled ? 'c-link--disabled' : '']\"\n [href]=\"href\"\n [target]=\"target\"\n [attr.rel]=\"rel\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-label]=\"external ? text + ' (abre en una pesta\u00F1a nueva)' : null\"\n>\n <ng-container *ngIf=\"!iconBefore\">\n <span class=\"c-link__icon\"><ng-content select=\"[iconBefore]\"></ng-content></span>\n </ng-container>\n <span class=\"c-link__text\">{{ text }}</span>\n <span *ngIf=\"external\" class=\"sr-only\">(abre en una pesta\u00F1a nueva)</span>\n <ng-container *ngIf=\"!iconAfter\">\n <span class=\"c-link__icon\"><ng-content select=\"[iconAfter]\"></ng-content></span>\n </ng-container>\n</a>", styles: [".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}.c-link{display:flex;align-items:center;width:max-content;gap:var(--space-component-gap-xs);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-action-primary-content-default);text-decoration:none}.c-link--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)}.c-link--xs{font-family:var(--typography-label-xs-default-family),sans-serif;font-weight:var(--typography-label-xs-default-weight);font-size:var(--typography-label-xs-default-size);line-height:var(--typography-label-xs-default-line-height);letter-spacing:var(--typography-label-xs-default-letter-spacing)}.c-link__icon{color:var(--color-action-primary-content-default);width:18px;height:18px}.c-link__icon .o-svg__test{width:100%;height:100%;fill:currentColor}.c-link:hover{color:var(--color-action-primary-content-hover);text-decoration:underline}.c-link:focus{border:2px solid var(--color-decorative-primary-default);border-radius:var(--size-border-radius-sm)}.c-link:pressed{color:var(--color-action-primary-content-pressed);text-decoration:underline}.c-link:disabled{color:var(--color-action-primary-content-disabled)}.c-link:disabled .c-link__icon{color:var(--color-action-primary-content-disabled)}.c-link--neutral{color:var(--color-action-neutral-content-default)}.c-link--neutral .c-link__icon svg path{fill:var(--color-action-neutral-content-default)}.c-link--neutral:hover{color:var(--color-action-neutral-content-hover)}.c-link--neutral:hover .c-link__icon svg path{fill:var(--color-action-neutral-content-hover)}.c-link--neutral:pressed{color:var(--color-action-neutral-content-pressed)}.c-link--neutral:pressed .c-link__icon svg path{fill:var(--color-action-neutral-content-pressed)}.c-link--neutral:disabled{color:var(--color-action-neutral-content-disabled)}.c-link--neutral:disabled .c-link__icon svg path{fill:var(--color-action-neutral-content-disabled)}.c-link--danger{color:var(--color-action-danger-border-default)}.c-link--danger .c-link__icon{fill:var(--color-action-danger-border-default)}.c-link--danger:hover{color:var(--color-action-danger-content-hover)}.c-link--danger:hover .c-link__icon svg path{fill:var(--color-action-danger-content-hover)}.c-link--danger:pressed{color:var(--color-action-danger-content-pressed)}.c-link--danger:pressed .c-link__icon svg path{fill:var(--color-action-danger-content-pressed)}.c-link--danger:disabled{color:var(--color-action-danger-content-disabled)}.c-link--danger:disabled .c-link__icon svg path{fill:var(--color-action-danger-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"] }] });
|
|
176
170
|
}
|
|
177
171
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LinkComponent, decorators: [{
|
|
178
172
|
type: Component,
|
|
179
|
-
args: [{ selector: 'lib-link', standalone: true, imports: [CommonModule], template: "<a\n [ngClass]=\"['c-link', variantClass, sizeClass, disabled ? 'c-link--disabled' : '']\"\n [href]=\"href\"\n [target]=\"target\"\n [attr.rel]=\"rel\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-label]=\"external ? text + ' (abre en una pesta\u00F1a nueva)' : null\"\n>\n <ng-container *ngIf=\"!iconBefore\">\n <span class=\"c-link__icon\"><ng-content select=\"[iconBefore]\"></ng-content></span>\n </ng-container>\n <span class=\"c-link__text\">{{ text }}</span>\n <span *ngIf=\"external\" class=\"sr-only\">(abre en una pesta\u00F1a nueva)</span>\n <ng-container *ngIf=\"!iconAfter\">\n <span class=\"c-link__icon\"><ng-content select=\"[iconAfter]\"></ng-content></span>\n </ng-container>\n</a>", styles: [".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}.c-link{display:flex;align-items:center;width:max-content;gap:var(--
|
|
173
|
+
args: [{ selector: 'lib-link', standalone: true, imports: [CommonModule], template: "<a\n [ngClass]=\"['c-link', variantClass, sizeClass, disabled ? 'c-link--disabled' : '']\"\n [href]=\"href\"\n [target]=\"target\"\n [attr.rel]=\"rel\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-label]=\"external ? text + ' (abre en una pesta\u00F1a nueva)' : null\"\n>\n <ng-container *ngIf=\"!iconBefore\">\n <span class=\"c-link__icon\"><ng-content select=\"[iconBefore]\"></ng-content></span>\n </ng-container>\n <span class=\"c-link__text\">{{ text }}</span>\n <span *ngIf=\"external\" class=\"sr-only\">(abre en una pesta\u00F1a nueva)</span>\n <ng-container *ngIf=\"!iconAfter\">\n <span class=\"c-link__icon\"><ng-content select=\"[iconAfter]\"></ng-content></span>\n </ng-container>\n</a>", styles: [".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}.c-link{display:flex;align-items:center;width:max-content;gap:var(--space-component-gap-xs);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-action-primary-content-default);text-decoration:none}.c-link--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)}.c-link--xs{font-family:var(--typography-label-xs-default-family),sans-serif;font-weight:var(--typography-label-xs-default-weight);font-size:var(--typography-label-xs-default-size);line-height:var(--typography-label-xs-default-line-height);letter-spacing:var(--typography-label-xs-default-letter-spacing)}.c-link__icon{color:var(--color-action-primary-content-default);width:18px;height:18px}.c-link__icon .o-svg__test{width:100%;height:100%;fill:currentColor}.c-link:hover{color:var(--color-action-primary-content-hover);text-decoration:underline}.c-link:focus{border:2px solid var(--color-decorative-primary-default);border-radius:var(--size-border-radius-sm)}.c-link:pressed{color:var(--color-action-primary-content-pressed);text-decoration:underline}.c-link:disabled{color:var(--color-action-primary-content-disabled)}.c-link:disabled .c-link__icon{color:var(--color-action-primary-content-disabled)}.c-link--neutral{color:var(--color-action-neutral-content-default)}.c-link--neutral .c-link__icon svg path{fill:var(--color-action-neutral-content-default)}.c-link--neutral:hover{color:var(--color-action-neutral-content-hover)}.c-link--neutral:hover .c-link__icon svg path{fill:var(--color-action-neutral-content-hover)}.c-link--neutral:pressed{color:var(--color-action-neutral-content-pressed)}.c-link--neutral:pressed .c-link__icon svg path{fill:var(--color-action-neutral-content-pressed)}.c-link--neutral:disabled{color:var(--color-action-neutral-content-disabled)}.c-link--neutral:disabled .c-link__icon svg path{fill:var(--color-action-neutral-content-disabled)}.c-link--danger{color:var(--color-action-danger-border-default)}.c-link--danger .c-link__icon{fill:var(--color-action-danger-border-default)}.c-link--danger:hover{color:var(--color-action-danger-content-hover)}.c-link--danger:hover .c-link__icon svg path{fill:var(--color-action-danger-content-hover)}.c-link--danger:pressed{color:var(--color-action-danger-content-pressed)}.c-link--danger:pressed .c-link__icon svg path{fill:var(--color-action-danger-content-pressed)}.c-link--danger:disabled{color:var(--color-action-danger-content-disabled)}.c-link--danger:disabled .c-link__icon svg path{fill:var(--color-action-danger-content-disabled)}\n"] }]
|
|
180
174
|
}], propDecorators: { text: [{
|
|
181
175
|
type: Input
|
|
182
176
|
}], loadingText: [{
|
|
@@ -215,11 +209,11 @@ class ButtonSetComponent {
|
|
|
215
209
|
console.log('Tertiary clicked');
|
|
216
210
|
}
|
|
217
211
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
218
|
-
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=\"primary\"\n (click)=\"handleSecondaryClick()\"\n ></lib-button>\n \n <lib-button\n [text]=\"primaryText\"\n variant=\"primary\"\n size=\"primary\"\n (click)=\"handlePrimaryClick()\"\n ></lib-button>\n</div>\n ", styles: [".c-button-set{display:flex;align-items:center;gap:var(--
|
|
212
|
+
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=\"primary\"\n (click)=\"handleSecondaryClick()\"\n ></lib-button>\n \n <lib-button\n [text]=\"primaryText\"\n variant=\"primary\"\n size=\"primary\"\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"] }, { kind: "component", type: LinkComponent, selector: "lib-link", inputs: ["text", "loadingText", "href", "external", "disabled", "variant", "size", "iconBefore", "iconAfter"] }] });
|
|
219
213
|
}
|
|
220
214
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonSetComponent, decorators: [{
|
|
221
215
|
type: Component,
|
|
222
|
-
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=\"primary\"\n (click)=\"handleSecondaryClick()\"\n ></lib-button>\n \n <lib-button\n [text]=\"primaryText\"\n variant=\"primary\"\n size=\"primary\"\n (click)=\"handlePrimaryClick()\"\n ></lib-button>\n</div>\n ", styles: [".c-button-set{display:flex;align-items:center;gap:var(--
|
|
216
|
+
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=\"primary\"\n (click)=\"handleSecondaryClick()\"\n ></lib-button>\n \n <lib-button\n [text]=\"primaryText\"\n variant=\"primary\"\n size=\"primary\"\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"] }]
|
|
223
217
|
}], propDecorators: { primaryText: [{
|
|
224
218
|
type: Input
|
|
225
219
|
}], secondaryText: [{
|
|
@@ -240,17 +234,18 @@ class CheckboxComponent {
|
|
|
240
234
|
changed = new EventEmitter();
|
|
241
235
|
onChange(event) {
|
|
242
236
|
const input = event.target;
|
|
237
|
+
this.checked = input.checked;
|
|
243
238
|
this.changed.emit(input.checked);
|
|
244
239
|
}
|
|
245
240
|
get ariaChecked() {
|
|
246
241
|
return this.indeterminate ? 'mixed' : String(this.checked);
|
|
247
242
|
}
|
|
248
243
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
249
|
-
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" }, outputs: { changed: "changed" }, ngImport: i0, template: "<label\n [attr.for]=\"id\"\n [class.has-error]=\"error\"\n class=\"c-checkbox\"\n>\n <input\n type=\"checkbox\"\n [id]=\"id\"\n class=\"c-checkbox__input\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n role=\"checkbox\"\n [attr.aria-checked]=\"ariaChecked\"\n (change)=\"onChange($event)\"\n />\n\n <span class=\"c-checkbox__custom\">\n <svg *ngIf=\"checked && !indeterminate\" class=\"c-checkbox__tick\" viewBox=\"0 0 24 24\">\n <polyline points=\"4 12 10 18 20 6\" />\n </svg>\n <div *ngIf=\"indeterminate\" class=\"c-checkbox__indeterminate\"></div>\n </span>\n <span class=\"c-checkbox__text\">{{ label }}</span>\n</label>\n", styles: [".c-checkbox{display:inline-flex;align-items:center;gap:var(--
|
|
244
|
+
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" }, outputs: { changed: "changed" }, ngImport: i0, template: "<label\n [attr.for]=\"id\"\n [class.has-error]=\"error\"\n class=\"c-checkbox\"\n>\n <input\n type=\"checkbox\"\n [id]=\"id\"\n class=\"c-checkbox__input\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n role=\"checkbox\"\n [attr.aria-checked]=\"ariaChecked\"\n (change)=\"onChange($event)\"\n />\n\n <span class=\"c-checkbox__custom\" [ngClass]=\"['c-checkbox__custom', indeterminate ? 'c-checkbox__custom--indeterminate' : '']\">\n <svg *ngIf=\"checked && !indeterminate\" class=\"c-checkbox__tick\" viewBox=\"0 0 24 24\">\n <polyline points=\"4 12 10 18 20 6\" />\n </svg>\n <div *ngIf=\"indeterminate\" class=\"c-checkbox__indeterminate\"></div>\n </span>\n <span class=\"c-checkbox__text\">{{ label }}</span>\n</label>\n", styles: [".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-border-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-default);border-radius:var(--size-border-radius-sm);background:#fff;transition:all .2s}.c-checkbox__custom--indeterminate{background-color:var(--color-action-primary-selected-background-default);border-color:var(--color-action-primary-selected-background-default)}.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:pressed__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"] }] });
|
|
250
245
|
}
|
|
251
246
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
252
247
|
type: Component,
|
|
253
|
-
args: [{ selector: 'lib-checkbox', standalone: true, imports: [CommonModule], template: "<label\n [attr.for]=\"id\"\n [class.has-error]=\"error\"\n class=\"c-checkbox\"\n>\n <input\n type=\"checkbox\"\n [id]=\"id\"\n class=\"c-checkbox__input\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n role=\"checkbox\"\n [attr.aria-checked]=\"ariaChecked\"\n (change)=\"onChange($event)\"\n />\n\n <span class=\"c-checkbox__custom\">\n <svg *ngIf=\"checked && !indeterminate\" class=\"c-checkbox__tick\" viewBox=\"0 0 24 24\">\n <polyline points=\"4 12 10 18 20 6\" />\n </svg>\n <div *ngIf=\"indeterminate\" class=\"c-checkbox__indeterminate\"></div>\n </span>\n <span class=\"c-checkbox__text\">{{ label }}</span>\n</label>\n", styles: [".c-checkbox{display:inline-flex;align-items:center;gap:var(--
|
|
248
|
+
args: [{ selector: 'lib-checkbox', standalone: true, imports: [CommonModule], template: "<label\n [attr.for]=\"id\"\n [class.has-error]=\"error\"\n class=\"c-checkbox\"\n>\n <input\n type=\"checkbox\"\n [id]=\"id\"\n class=\"c-checkbox__input\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n role=\"checkbox\"\n [attr.aria-checked]=\"ariaChecked\"\n (change)=\"onChange($event)\"\n />\n\n <span class=\"c-checkbox__custom\" [ngClass]=\"['c-checkbox__custom', indeterminate ? 'c-checkbox__custom--indeterminate' : '']\">\n <svg *ngIf=\"checked && !indeterminate\" class=\"c-checkbox__tick\" viewBox=\"0 0 24 24\">\n <polyline points=\"4 12 10 18 20 6\" />\n </svg>\n <div *ngIf=\"indeterminate\" class=\"c-checkbox__indeterminate\"></div>\n </span>\n <span class=\"c-checkbox__text\">{{ label }}</span>\n</label>\n", styles: [".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-border-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-default);border-radius:var(--size-border-radius-sm);background:#fff;transition:all .2s}.c-checkbox__custom--indeterminate{background-color:var(--color-action-primary-selected-background-default);border-color:var(--color-action-primary-selected-background-default)}.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:pressed__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"] }]
|
|
254
249
|
}], propDecorators: { label: [{
|
|
255
250
|
type: Input
|
|
256
251
|
}], id: [{
|
|
@@ -267,73 +262,107 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
267
262
|
type: Output
|
|
268
263
|
}] } });
|
|
269
264
|
|
|
265
|
+
class HelperTextComponent {
|
|
266
|
+
variant = 'default';
|
|
267
|
+
text = '';
|
|
268
|
+
extraClass = '';
|
|
269
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: HelperTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
270
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: HelperTextComponent, isStandalone: true, selector: "lib-helper-text", inputs: { variant: "variant", text: "text", extraClass: "extraClass" }, ngImport: i0, template: "<span [ngClass]=\"['c-helper', variant ? 'c-helper--' + variant : '', extraClass ? extraClass : '']\">\n <lib-icon *ngIf=\"variant !== 'default'\" [icon]=\"variant\" size=\"md\" />{{ text }}\n</span>", styles: [".c-helper{display:flex;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);gap:var(--space-component-gap-sm)}.c-helper.is-error{color:var(--color-textfield-helper-error)}.c-helper.is-success{color:var(--color-textfield-helper-success)}.c-helper.is-default{color:var(--color-textfield-helper-default)}.c-helper--alert{color:var(--color-feedback-danger-default)}.c-helper--warning{color:var(--color-feedback-warning-default)}.c-helper--success{color:var(--color-feedback-success-default)}.c-helper--info{color:var(--color-feedback-info-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"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }] });
|
|
271
|
+
}
|
|
272
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: HelperTextComponent, decorators: [{
|
|
273
|
+
type: Component,
|
|
274
|
+
args: [{ selector: 'lib-helper-text', imports: [CommonModule, IconComponent], template: "<span [ngClass]=\"['c-helper', variant ? 'c-helper--' + variant : '', extraClass ? extraClass : '']\">\n <lib-icon *ngIf=\"variant !== 'default'\" [icon]=\"variant\" size=\"md\" />{{ text }}\n</span>", styles: [".c-helper{display:flex;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);gap:var(--space-component-gap-sm)}.c-helper.is-error{color:var(--color-textfield-helper-error)}.c-helper.is-success{color:var(--color-textfield-helper-success)}.c-helper.is-default{color:var(--color-textfield-helper-default)}.c-helper--alert{color:var(--color-feedback-danger-default)}.c-helper--warning{color:var(--color-feedback-warning-default)}.c-helper--success{color:var(--color-feedback-success-default)}.c-helper--info{color:var(--color-feedback-info-default)}\n"] }]
|
|
275
|
+
}], propDecorators: { variant: [{
|
|
276
|
+
type: Input
|
|
277
|
+
}], text: [{
|
|
278
|
+
type: Input
|
|
279
|
+
}], extraClass: [{
|
|
280
|
+
type: Input
|
|
281
|
+
}] } });
|
|
282
|
+
|
|
283
|
+
class InputLabelComponent {
|
|
284
|
+
text = '';
|
|
285
|
+
required = false;
|
|
286
|
+
md = false;
|
|
287
|
+
disabled = false;
|
|
288
|
+
for = '';
|
|
289
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
290
|
+
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"] }] });
|
|
291
|
+
}
|
|
292
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputLabelComponent, decorators: [{
|
|
293
|
+
type: Component,
|
|
294
|
+
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"] }]
|
|
295
|
+
}], propDecorators: { text: [{
|
|
296
|
+
type: Input
|
|
297
|
+
}], required: [{
|
|
298
|
+
type: Input
|
|
299
|
+
}], md: [{
|
|
300
|
+
type: Input
|
|
301
|
+
}], disabled: [{
|
|
302
|
+
type: Input
|
|
303
|
+
}], for: [{
|
|
304
|
+
type: Input
|
|
305
|
+
}] } });
|
|
306
|
+
|
|
270
307
|
class CheckboxGroupComponent {
|
|
271
308
|
legend = '';
|
|
309
|
+
parentLabel = '';
|
|
272
310
|
name = '';
|
|
311
|
+
helperText = '';
|
|
273
312
|
options = [];
|
|
274
|
-
|
|
275
|
-
parentLabel;
|
|
276
|
-
selectionChange = new EventEmitter();
|
|
313
|
+
_selected = [];
|
|
277
314
|
allChildrenSelected = false;
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
console.log('Padre cambió', event);
|
|
315
|
+
set selected(vals) {
|
|
316
|
+
this._selected = vals ? [...vals] : [];
|
|
281
317
|
}
|
|
282
|
-
|
|
283
|
-
return this.
|
|
318
|
+
get selected() {
|
|
319
|
+
return this._selected;
|
|
284
320
|
}
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
}
|
|
289
|
-
else {
|
|
290
|
-
this.selected.push(value);
|
|
291
|
-
}
|
|
321
|
+
selectedChange = new EventEmitter();
|
|
322
|
+
get allSelected() {
|
|
323
|
+
return this.selected.length === this.options.length && this.options.length > 0;
|
|
292
324
|
}
|
|
293
|
-
get
|
|
294
|
-
return
|
|
295
|
-
this.selected.length < this.options.length);
|
|
325
|
+
get indeterminate() {
|
|
326
|
+
return this.selected.length > 0 && !this.allSelected;
|
|
296
327
|
}
|
|
297
|
-
|
|
298
|
-
|
|
328
|
+
onParentChange(checked) {
|
|
329
|
+
this._selected = checked
|
|
330
|
+
? this.options.map(o => o.value)
|
|
331
|
+
: [];
|
|
332
|
+
this.allChildrenSelected = checked;
|
|
333
|
+
this.selectedChange.emit(this._selected);
|
|
299
334
|
}
|
|
300
|
-
|
|
301
|
-
if (
|
|
302
|
-
this.
|
|
335
|
+
onChildChange(value, checked) {
|
|
336
|
+
if (checked) {
|
|
337
|
+
this._selected = Array.from(new Set([...this.selected, value]));
|
|
303
338
|
}
|
|
304
339
|
else {
|
|
305
|
-
this.
|
|
340
|
+
this._selected = this.selected.filter(v => v !== value);
|
|
306
341
|
}
|
|
342
|
+
this.selectedChange.emit(this._selected);
|
|
307
343
|
}
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
this.selected.push(value);
|
|
311
|
-
}
|
|
312
|
-
else {
|
|
313
|
-
this.selected = this.selected.filter(v => v !== value);
|
|
314
|
-
}
|
|
315
|
-
this.emitSelectionChange();
|
|
316
|
-
}
|
|
317
|
-
emitSelectionChange() {
|
|
318
|
-
this.selectionChange.emit(this.selected);
|
|
344
|
+
trackByValue(_idx, opt) {
|
|
345
|
+
return opt.value;
|
|
319
346
|
}
|
|
320
347
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
321
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: CheckboxGroupComponent, isStandalone: true, selector: "lib-checkbox-group", inputs: { legend: "legend", name: "name",
|
|
348
|
+
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"], outputs: ["changed"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
322
349
|
}
|
|
323
350
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
|
|
324
351
|
type: Component,
|
|
325
|
-
args: [{ selector: 'lib-checkbox-group', standalone: true, imports: [CommonModule, CheckboxComponent], template: "<fieldset class=\"c-checkbox-group\">\n <
|
|
352
|
+
args: [{ selector: 'lib-checkbox-group', standalone: true, imports: [CommonModule, CheckboxComponent, InputLabelComponent, IconComponent, HelperTextComponent], 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"] }]
|
|
326
353
|
}], propDecorators: { legend: [{
|
|
327
354
|
type: Input
|
|
355
|
+
}], parentLabel: [{
|
|
356
|
+
type: Input
|
|
328
357
|
}], name: [{
|
|
329
358
|
type: Input
|
|
359
|
+
}], helperText: [{
|
|
360
|
+
type: Input
|
|
330
361
|
}], options: [{
|
|
331
362
|
type: Input
|
|
332
363
|
}], selected: [{
|
|
333
364
|
type: Input
|
|
334
|
-
}],
|
|
335
|
-
type: Input
|
|
336
|
-
}], selectionChange: [{
|
|
365
|
+
}], selectedChange: [{
|
|
337
366
|
type: Output
|
|
338
367
|
}] } });
|
|
339
368
|
|
|
@@ -353,11 +382,11 @@ class ChipsComponent {
|
|
|
353
382
|
return this.selectedValues.includes(value);
|
|
354
383
|
}
|
|
355
384
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
356
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ChipsComponent, isStandalone: true, selector: "lib-chips", inputs: { options: "options", selectedValues: "selectedValues" }, ngImport: i0, template: "<div role=\"group\" class=\"c-chip\" aria-label=\"Opciones de filtro\">\n <label\n *ngFor=\"let option of options\"\n class=\"c-chip__label\"\n >\n <input\n type=\"checkbox\"\n [value]=\"option.value\"\n [checked]=\"isChecked(option.value)\"\n (change)=\"toggle(option.value)\"\n class=\"c-chip__input\"\n />\n <span class=\"c-chip__text\">{{ option.label }}</span>\n </label>\n</div>\n", styles: [".c-chip{display:inline-flex;align-items:center;gap:var(--
|
|
385
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ChipsComponent, isStandalone: true, selector: "lib-chips", inputs: { options: "options", selectedValues: "selectedValues" }, ngImport: i0, template: "<div role=\"group\" class=\"c-chip\" aria-label=\"Opciones de filtro\">\n <label\n *ngFor=\"let option of options\"\n class=\"c-chip__label\"\n >\n <input\n type=\"checkbox\"\n [value]=\"option.value\"\n [checked]=\"isChecked(option.value)\"\n (change)=\"toggle(option.value)\"\n class=\"c-chip__input\"\n />\n <span class=\"c-chip__text\">{{ option.label }}</span>\n </label>\n</div>\n", styles: [".c-chip{display:inline-flex;align-items:center;gap:var(--space-container-stack-sm);cursor:pointer;-webkit-user-select:none;user-select:none;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)}.c-chip__label{display:inline-block;padding:var(--space-container-stack-sm) var(--space-container-stack-md);background-color:var(--color-action-primary-background-default);border:1px solid var(--color-action-primary-border-default);border-radius:50px;color:var(--color-action-primary-content-default);cursor:pointer}.c-chip__label:hover{background-color:var(--color-action-primary-background-hover);border-color:var(--color-action-primary-border-hover);color:var(--color-action-primary-content-hover)}.c-chip__label:focus{outline:2px solid var(--focus-outset)}.c-chip__label:pressed{background-color:var(--color-action-primary-background-pressed);border-color:var(--color-action-primary-border-pressed);color:var(--color-action-primary-content-pressed)}.c-chip__label:has(input:disabled){background-color:var(--color-action-primary-background-disabled);border-color:var(--color-action-primary-background-disabled);color:var(--color-action-primary-content-disabled)}.c-chip__label:has(input:checked){background-color:var(--color-action-primary-selected-background-default);color:var(--base-color-basic-white);border-color:var(--color-action-primary-selected-border-default)}.c-chip__label:has(input:checked):hover{background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-border-hover)}.c-chip__label:has(input:checked):focus{outline:2px solid var(--focus-outset)}.c-chip__label:has(input:checked):pressed{background-color:var(--color-action-primary-selected-background-pressed);border-color:var(--color-action-primary-selected-border-pressed)}.c-chip__input{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
357
386
|
}
|
|
358
387
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ChipsComponent, decorators: [{
|
|
359
388
|
type: Component,
|
|
360
|
-
args: [{ selector: 'lib-chips', standalone: true, imports: [CommonModule], template: "<div role=\"group\" class=\"c-chip\" aria-label=\"Opciones de filtro\">\n <label\n *ngFor=\"let option of options\"\n class=\"c-chip__label\"\n >\n <input\n type=\"checkbox\"\n [value]=\"option.value\"\n [checked]=\"isChecked(option.value)\"\n (change)=\"toggle(option.value)\"\n class=\"c-chip__input\"\n />\n <span class=\"c-chip__text\">{{ option.label }}</span>\n </label>\n</div>\n", styles: [".c-chip{display:inline-flex;align-items:center;gap:var(--
|
|
389
|
+
args: [{ selector: 'lib-chips', standalone: true, imports: [CommonModule], template: "<div role=\"group\" class=\"c-chip\" aria-label=\"Opciones de filtro\">\n <label\n *ngFor=\"let option of options\"\n class=\"c-chip__label\"\n >\n <input\n type=\"checkbox\"\n [value]=\"option.value\"\n [checked]=\"isChecked(option.value)\"\n (change)=\"toggle(option.value)\"\n class=\"c-chip__input\"\n />\n <span class=\"c-chip__text\">{{ option.label }}</span>\n </label>\n</div>\n", styles: [".c-chip{display:inline-flex;align-items:center;gap:var(--space-container-stack-sm);cursor:pointer;-webkit-user-select:none;user-select:none;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)}.c-chip__label{display:inline-block;padding:var(--space-container-stack-sm) var(--space-container-stack-md);background-color:var(--color-action-primary-background-default);border:1px solid var(--color-action-primary-border-default);border-radius:50px;color:var(--color-action-primary-content-default);cursor:pointer}.c-chip__label:hover{background-color:var(--color-action-primary-background-hover);border-color:var(--color-action-primary-border-hover);color:var(--color-action-primary-content-hover)}.c-chip__label:focus{outline:2px solid var(--focus-outset)}.c-chip__label:pressed{background-color:var(--color-action-primary-background-pressed);border-color:var(--color-action-primary-border-pressed);color:var(--color-action-primary-content-pressed)}.c-chip__label:has(input:disabled){background-color:var(--color-action-primary-background-disabled);border-color:var(--color-action-primary-background-disabled);color:var(--color-action-primary-content-disabled)}.c-chip__label:has(input:checked){background-color:var(--color-action-primary-selected-background-default);color:var(--base-color-basic-white);border-color:var(--color-action-primary-selected-border-default)}.c-chip__label:has(input:checked):hover{background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-border-hover)}.c-chip__label:has(input:checked):focus{outline:2px solid var(--focus-outset)}.c-chip__label:has(input:checked):pressed{background-color:var(--color-action-primary-selected-background-pressed);border-color:var(--color-action-primary-selected-border-pressed)}.c-chip__input{display:none}\n"] }]
|
|
361
390
|
}], propDecorators: { options: [{
|
|
362
391
|
type: Input
|
|
363
392
|
}], selectedValues: [{
|
|
@@ -373,118 +402,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
373
402
|
args: [{ selector: 'lib-design-tokens', imports: [CommonModule], template: "<p>DesignTokens works!</p>\n" }]
|
|
374
403
|
}] });
|
|
375
404
|
|
|
376
|
-
class IconAlertComponent {
|
|
377
|
-
extraClass = '';
|
|
378
|
-
size = 'lg';
|
|
379
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
380
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: IconAlertComponent, isStandalone: true, selector: "lib-icon-alert", inputs: { extraClass: "extraClass", size: "size" }, ngImport: i0, template: "<svg [ngClass]=\"['o-svg','o-svg__alert','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#BA2F1E\"/>\n </svg>", 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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
381
|
-
}
|
|
382
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconAlertComponent, decorators: [{
|
|
383
|
-
type: Component,
|
|
384
|
-
args: [{ selector: 'lib-icon-alert', imports: [CommonModule], template: "<svg [ngClass]=\"['o-svg','o-svg__alert','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#BA2F1E\"/>\n </svg>", 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}\n"] }]
|
|
385
|
-
}], propDecorators: { extraClass: [{
|
|
386
|
-
type: Input
|
|
387
|
-
}], size: [{
|
|
388
|
-
type: Input
|
|
389
|
-
}] } });
|
|
390
|
-
|
|
391
|
-
class IconEyeComponent {
|
|
392
|
-
variant = 'open';
|
|
393
|
-
extraClass = '';
|
|
394
|
-
size = 'lg';
|
|
395
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconEyeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
396
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: IconEyeComponent, isStandalone: true, selector: "lib-icon-eye", inputs: { variant: "variant", extraClass: "extraClass", size: "size" }, ngImport: i0, template: "<svg *ngIf=\"variant === 'open'\" [ngClass]=\"['o-svg','o-svg__eye','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"variant === 'close'\" [ngClass]=\"['o-svg','o-svg__eye','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#070707\"/>\n</svg>", 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}\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"] }] });
|
|
397
|
-
}
|
|
398
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconEyeComponent, decorators: [{
|
|
399
|
-
type: Component,
|
|
400
|
-
args: [{ selector: 'lib-icon-eye', imports: [CommonModule], template: "<svg *ngIf=\"variant === 'open'\" [ngClass]=\"['o-svg','o-svg__eye','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"variant === 'close'\" [ngClass]=\"['o-svg','o-svg__eye','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#070707\"/>\n</svg>", 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}\n"] }]
|
|
401
|
-
}], propDecorators: { variant: [{
|
|
402
|
-
type: Input
|
|
403
|
-
}], extraClass: [{
|
|
404
|
-
type: Input
|
|
405
|
-
}], size: [{
|
|
406
|
-
type: Input
|
|
407
|
-
}] } });
|
|
408
|
-
|
|
409
|
-
class IconSuccessComponent {
|
|
410
|
-
extraClass = '';
|
|
411
|
-
size = 'lg';
|
|
412
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconSuccessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
413
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: IconSuccessComponent, isStandalone: true, selector: "lib-icon-success", inputs: { extraClass: "extraClass", size: "size" }, ngImport: i0, template: "<svg [ngClass]=\"['o-svg','o-svg__success','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#35785B\"/>\n</svg>", 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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
414
|
-
}
|
|
415
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconSuccessComponent, decorators: [{
|
|
416
|
-
type: Component,
|
|
417
|
-
args: [{ selector: 'lib-icon-success', imports: [CommonModule], template: "<svg [ngClass]=\"['o-svg','o-svg__success','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path 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\" fill=\"#35785B\"/>\n</svg>", 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}\n"] }]
|
|
418
|
-
}], propDecorators: { extraClass: [{
|
|
419
|
-
type: Input
|
|
420
|
-
}], size: [{
|
|
421
|
-
type: Input
|
|
422
|
-
}] } });
|
|
423
|
-
|
|
424
|
-
class IconTestComponent {
|
|
425
|
-
extraClass = '';
|
|
426
|
-
get hostClasses() {
|
|
427
|
-
const base = ['o-svg', 'o-svg__test'];
|
|
428
|
-
if (this.extraClass) {
|
|
429
|
-
base.push(`o-svg--${this.extraClass}`);
|
|
430
|
-
}
|
|
431
|
-
return base.join(' ');
|
|
432
|
-
}
|
|
433
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconTestComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
434
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: IconTestComponent, isStandalone: true, selector: "lib-icon-test", inputs: { extraClass: "extraClass" }, host: { properties: { "class.o-svg": "true", "class.o-svg__test": "true", "class": "this.hostClasses" } }, ngImport: i0, template: "<svg fill=\"none\" [ngClass]=\"['o-svg','o-svg__test',extraClass ? 'o-svg__test--' + extraClass : '']\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\">\n <path 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\" fill=\"#217870\"/>\n</svg>", styles: [".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--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)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
435
|
-
}
|
|
436
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconTestComponent, decorators: [{
|
|
437
|
-
type: Component,
|
|
438
|
-
args: [{ selector: 'lib-icon-test', imports: [CommonModule], host: {
|
|
439
|
-
'[class.o-svg]': 'true',
|
|
440
|
-
'[class.o-svg__test]': 'true'
|
|
441
|
-
}, template: "<svg fill=\"none\" [ngClass]=\"['o-svg','o-svg__test',extraClass ? 'o-svg__test--' + extraClass : '']\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\">\n <path 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\" fill=\"#217870\"/>\n</svg>", styles: [".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--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)}\n"] }]
|
|
442
|
-
}], propDecorators: { extraClass: [{
|
|
443
|
-
type: Input
|
|
444
|
-
}], hostClasses: [{
|
|
445
|
-
type: HostBinding,
|
|
446
|
-
args: ['class']
|
|
447
|
-
}] } });
|
|
448
|
-
|
|
449
|
-
class IconThumbComponent {
|
|
450
|
-
extraClass = '';
|
|
451
|
-
size = 'lg';
|
|
452
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconThumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
453
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: IconThumbComponent, isStandalone: true, selector: "lib-icon-thumb", inputs: { extraClass: "extraClass", size: "size" }, ngImport: i0, template: "<svg [ngClass]=\"['o-svg','o-svg__thumb','o-svg--' + size,extraClass ? 'o-svg__thumb--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path 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\" fill=\"#535858\"/>\n</svg>", 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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
454
|
-
}
|
|
455
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconThumbComponent, decorators: [{
|
|
456
|
-
type: Component,
|
|
457
|
-
args: [{ selector: 'lib-icon-thumb', imports: [CommonModule], template: "<svg [ngClass]=\"['o-svg','o-svg__thumb','o-svg--' + size,extraClass ? 'o-svg__thumb--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path 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\" fill=\"#535858\"/>\n</svg>", 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}\n"] }]
|
|
458
|
-
}], propDecorators: { extraClass: [{
|
|
459
|
-
type: Input
|
|
460
|
-
}], size: [{
|
|
461
|
-
type: Input
|
|
462
|
-
}] } });
|
|
463
|
-
|
|
464
|
-
class InputLabelComponent {
|
|
465
|
-
text = '';
|
|
466
|
-
required = false;
|
|
467
|
-
md = false;
|
|
468
|
-
disabled = false;
|
|
469
|
-
for = '';
|
|
470
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
471
|
-
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(--mobile-space-page-gap-sm);font-family:var(--mobile-typography-label-sm-default-family),sans-serif;font-weight:var(--mobile-typography-label-sm-default-weight);font-size:var(--mobile-typography-label-sm-default-size);line-height:var(--mobile-typography-label-sm-default-line-height);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing);color:var(--color-core-content-default)}@media (min-width: var(--tablet-size-viewport-width)){.c-input-label{gap:var(--tablet-space-page-gap-sm);font-family:var(--tablet-typography-label-sm-default-family),sans-serif;font-weight:var(--tablet-typography-label-sm-default-weight);font-size:var(--tablet-typography-label-sm-default-size);line-height:var(--tablet-typography-label-sm-default-line-height);letter-spacing:var(--tablet-typography-label-sm-default-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-input-label{gap:var(--widescreen-space-page-gap-sm);font-family:var(--widescreen-typography-label-sm-default-family),sans-serif;font-weight:var(--widescreen-typography-label-sm-default-weight);font-size:var(--widescreen-typography-label-sm-default-size);line-height:var(--widescreen-typography-label-sm-default-line-height);letter-spacing:var(--widescreen-typography-label-sm-default-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-input-label{gap:var(--desktop-space-page-gap-sm);font-family:var(--desktop-typography-label-sm-default-family),sans-serif;font-weight:var(--desktop-typography-label-sm-default-weight);font-size:var(--desktop-typography-label-sm-default-size);line-height:var(--desktop-typography-label-sm-default-line-height);letter-spacing:var(--desktop-typography-label-sm-default-letter-spacing)}}.c-input-label--md{font-family:var(--mobile-typography-label-md-default-family),sans-serif;font-weight:var(--mobile-typography-label-md-default-weight);font-size:var(--mobile-typography-label-md-default-size);line-height:var(--mobile-typography-label-md-default-line-height);letter-spacing:var(--mobile-typography-label-md-default-letter-spacing)}@media (min-width: var(--tablet-size-viewport-width)){.c-input-label--md{font-family:var(--tablet-typography-label-md-default-family),sans-serif;font-weight:var(--tablet-typography-label-md-default-weight);font-size:var(--tablet-typography-label-md-default-size);line-height:var(--tablet-typography-label-md-default-line-height);letter-spacing:var(--tablet-typography-label-md-default-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-input-label--md{font-family:var(--widescreen-typography-label-md-default-family),sans-serif;font-weight:var(--widescreen-typography-label-md-default-weight);font-size:var(--widescreen-typography-label-md-default-size);line-height:var(--widescreen-typography-label-md-default-line-height);letter-spacing:var(--widescreen-typography-label-md-default-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-input-label--md{font-family:var(--desktop-typography-label-md-default-family),sans-serif;font-weight:var(--desktop-typography-label-md-default-weight);font-size:var(--desktop-typography-label-md-default-size);line-height:var(--desktop-typography-label-md-default-line-height);letter-spacing:var(--desktop-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"] }] });
|
|
472
|
-
}
|
|
473
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputLabelComponent, decorators: [{
|
|
474
|
-
type: Component,
|
|
475
|
-
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(--mobile-space-page-gap-sm);font-family:var(--mobile-typography-label-sm-default-family),sans-serif;font-weight:var(--mobile-typography-label-sm-default-weight);font-size:var(--mobile-typography-label-sm-default-size);line-height:var(--mobile-typography-label-sm-default-line-height);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing);color:var(--color-core-content-default)}@media (min-width: var(--tablet-size-viewport-width)){.c-input-label{gap:var(--tablet-space-page-gap-sm);font-family:var(--tablet-typography-label-sm-default-family),sans-serif;font-weight:var(--tablet-typography-label-sm-default-weight);font-size:var(--tablet-typography-label-sm-default-size);line-height:var(--tablet-typography-label-sm-default-line-height);letter-spacing:var(--tablet-typography-label-sm-default-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-input-label{gap:var(--widescreen-space-page-gap-sm);font-family:var(--widescreen-typography-label-sm-default-family),sans-serif;font-weight:var(--widescreen-typography-label-sm-default-weight);font-size:var(--widescreen-typography-label-sm-default-size);line-height:var(--widescreen-typography-label-sm-default-line-height);letter-spacing:var(--widescreen-typography-label-sm-default-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-input-label{gap:var(--desktop-space-page-gap-sm);font-family:var(--desktop-typography-label-sm-default-family),sans-serif;font-weight:var(--desktop-typography-label-sm-default-weight);font-size:var(--desktop-typography-label-sm-default-size);line-height:var(--desktop-typography-label-sm-default-line-height);letter-spacing:var(--desktop-typography-label-sm-default-letter-spacing)}}.c-input-label--md{font-family:var(--mobile-typography-label-md-default-family),sans-serif;font-weight:var(--mobile-typography-label-md-default-weight);font-size:var(--mobile-typography-label-md-default-size);line-height:var(--mobile-typography-label-md-default-line-height);letter-spacing:var(--mobile-typography-label-md-default-letter-spacing)}@media (min-width: var(--tablet-size-viewport-width)){.c-input-label--md{font-family:var(--tablet-typography-label-md-default-family),sans-serif;font-weight:var(--tablet-typography-label-md-default-weight);font-size:var(--tablet-typography-label-md-default-size);line-height:var(--tablet-typography-label-md-default-line-height);letter-spacing:var(--tablet-typography-label-md-default-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-input-label--md{font-family:var(--widescreen-typography-label-md-default-family),sans-serif;font-weight:var(--widescreen-typography-label-md-default-weight);font-size:var(--widescreen-typography-label-md-default-size);line-height:var(--widescreen-typography-label-md-default-line-height);letter-spacing:var(--widescreen-typography-label-md-default-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-input-label--md{font-family:var(--desktop-typography-label-md-default-family),sans-serif;font-weight:var(--desktop-typography-label-md-default-weight);font-size:var(--desktop-typography-label-md-default-size);line-height:var(--desktop-typography-label-md-default-line-height);letter-spacing:var(--desktop-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"] }]
|
|
476
|
-
}], propDecorators: { text: [{
|
|
477
|
-
type: Input
|
|
478
|
-
}], required: [{
|
|
479
|
-
type: Input
|
|
480
|
-
}], md: [{
|
|
481
|
-
type: Input
|
|
482
|
-
}], disabled: [{
|
|
483
|
-
type: Input
|
|
484
|
-
}], for: [{
|
|
485
|
-
type: Input
|
|
486
|
-
}] } });
|
|
487
|
-
|
|
488
405
|
class PasswordInputComponent {
|
|
489
406
|
label = '';
|
|
490
407
|
value = '';
|
|
@@ -496,7 +413,9 @@ class PasswordInputComponent {
|
|
|
496
413
|
success = false;
|
|
497
414
|
disabled = false;
|
|
498
415
|
readonly = false;
|
|
416
|
+
required = false;
|
|
499
417
|
size = 'md';
|
|
418
|
+
emitValue = new EventEmitter();
|
|
500
419
|
showPassword = false;
|
|
501
420
|
get inputType() {
|
|
502
421
|
return this.showPassword ? 'text' : 'password';
|
|
@@ -517,18 +436,23 @@ class PasswordInputComponent {
|
|
|
517
436
|
togglePassword() {
|
|
518
437
|
this.showPassword = !this.showPassword;
|
|
519
438
|
}
|
|
439
|
+
onType(event) {
|
|
440
|
+
const input = event.target;
|
|
441
|
+
const value = input.value;
|
|
442
|
+
this.emitValue.emit(value);
|
|
443
|
+
}
|
|
520
444
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
521
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: PasswordInputComponent, isStandalone: true, selector: "lib-password-input", inputs: { label: "label", value: "value", placeholder: "placeholder", helperText: "helperText", alertText: "alertText", successText: "successText", error: "error", success: "success", disabled: "disabled", readonly: "readonly", size: "size" }, ngImport: i0, template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [text]=\"label\"></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 [attr.aria-describedby]=\"ariaDescribedBy\"\n />\n <button\n type=\"button\"\n class=\"c-text-input__toggle\"\n (click)=\"togglePassword()\"\n [attr.aria-label]=\"showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n >\n <lib-icon-eye size=\"md\" [variant]=\"showPassword ? 'close' : 'open'\" />\n </button>\n </div>\n \n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n {{ helperText }}\n </span>\n \n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-icon-alert size=\"md\" />{{ alertText }}\n </span>\n \n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-icon-success size=\"md\" />{{ successText }}\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(--mobile-space-component-gap-sm, .25rem);max-width:300px}.c-text-input__input{width:100%;border-radius:var(--mobile-size-component-border-radius, .5rem);border:var(--mobile-size-component-border-width, 1px) solid var(--color-textfield-border-default, #929A99);background:var(--color-textfield-background-default, #FFF);padding:var(--mobile-space-component-padding-sm, .5rem) var(--mobile-space-component-padding-lg, 1rem);align-items:center;gap:var(--mobile-space-component-gap-sm, .25rem);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--mobile-typography-label-md-default-family, Satoshi);font-size:var(--mobile-typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--mobile-typography-label-md-default-weight, 400);line-height:var(--mobile-typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--mobile-typography-label-md-default-letter-spacing, 0rem)}.c-text-input__input--sm{padding:var(--mobile-space-component-padding-xs, .25rem) var(--mobile-space-component-padding-sm, .5rem)}.c-text-input__input--md{padding:var(--mobile-space-component-padding-xs, .25rem) var(---mobile-space-component-padding-md, .75rem)}.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(--mobile-space-component-gap-sm, .25rem);color:var(--color-feedback-danger-default, #BA2F1E);font-family:var(--mobile-typography-label-sm-default-family, Satoshi);font-size:var(--mobile-typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--mobile-typography-label-sm-default-weight, 400);line-height:var(--mobile-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__success{display:flex;gap:var(--mobile-space-component-gap-sm, .25rem);color:var(--color-feedback-success-default, #35785B);font-family:var(--mobile-typography-label-sm-default-family, Satoshi);font-size:var(--mobile-typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--mobile-typography-label-sm-default-weight, 400);line-height:var(--mobile-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__helper{color:var(--color-core-content-soft, #535858);font-family:var(--mobile-typography-label-sm-default-family, Satoshi);font-size:var(--mobile-typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--mobile-typography-label-sm-default-weight, 400);line-height:var(--mobile-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing, 0rem)}.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__input{padding-right:2.3rem}.c-text-input__toggle{position:absolute;top:50%;right:var(--mobile-space-component-padding-lg);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}@media (min-width: var(--tablet-size-viewport-width)){.c-text-input__input{border-radius:var(--tablet-size-component-border-radius);border-width:var(--tablet-size-component-border-width);padding:var(--tablet-space-component-padding-sm) var(--tablet-space-component-padding-lg);gap:var(--tablet-space-component-gap-sm);font-family:var(--tablet-typography-label-md-default-family);font-size:var(--tablet-typography-label-md-default-size);font-weight:var(--tablet-typography-label-md-default-weight);line-height:var(--tablet-typography-label-md-default-line-height);letter-spacing:var(--tablet-typography-label-md-default-letter-spacing)}.c-text-input__input--sm{padding:var(--tablet-space-component-padding-xs) var(--tablet-space-component-padding-sm)}.c-text-input__input--md{padding:var(--tablet-space-component-padding-xs) var(--tablet-space-component-padding-md)}.c-text-input__alert{gap:var(--tablet-space-component-gap-sm, .25rem);font-family:var(--tablet-typography-label-sm-default-family);font-size:var(--tablet-typography-label-sm-default-size);font-weight:var(--tablet-typography-label-sm-default-weight, 400);line-height:var(--tablet-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--tablet-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__success{gap:var(--tablet-space-component-gap-sm, .25rem);font-family:var(--tablet-typography-label-sm-default-family);font-size:var(--tablet-typography-label-sm-default-size);font-weight:var(--tablet-typography-label-sm-default-weight);line-height:var(--tablet-typography-label-sm-default-line-height);letter-spacing:var(--tablet-typography-label-sm-default-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-text-input__input{border-radius:var(--widescreen-size-component-border-radius);border-width:var(--widescreen-size-component-border-width);padding:var(--widescreen-space-component-padding-sm) var(--widescreen-space-component-padding-lg);gap:var(--widescreen-space-component-gap-sm);font-family:var(--widescreen-typography-label-md-default-family);font-size:var(--widescreen-typography-label-md-default-size);font-weight:var(--widescreen-typography-label-md-default-weight);line-height:var(--widescreen-typography-label-md-default-line-height);letter-spacing:var(--widescreen-typography-label-md-default-letter-spacing)}.c-text-input__input--sm{padding:var(--widescreen-space-component-padding-xs) var(--widescreen-space-component-padding-sm)}.c-text-input__input--md{padding:var(--widescreen-space-component-padding-xs) var(--widescreen-space-component-padding-md)}.c-text-input__alert,.c-text-input__success{gap:var(--widescreen-space-component-gap-sm, .25rem);font-family:var(--widescreen-typography-label-sm-default-family);font-size:var(--widescreen-typography-label-sm-default-size);font-weight:var(--widescreen-typography-label-sm-default-weight);line-height:var(--widescreen-typography-label-sm-default-line-height);letter-spacing:var(--widescreen-typography-label-sm-default-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-text-input__input{border-radius:var(--desktop-size-component-border-radius);border-width:var(--desktop-size-component-border-width);padding:var(--desktop-space-component-padding-sm) var(--desktop-space-component-padding-lg);gap:var(--desktop-space-component-gap-sm);font-family:var(--desktop-typography-label-md-default-family);font-size:var(--desktop-typography-label-md-default-size);font-weight:var(--desktop-typography-label-md-default-weight);line-height:var(--desktop-typography-label-md-default-line-height);letter-spacing:var(--desktop-typography-label-md-default-letter-spacing)}.c-text-input__input--sm{padding:var(--desktop-space-component-padding-xs) var(--desktop-space-component-padding-sm)}.c-text-input__input--md{padding:var(--desktop-space-component-padding-xs) var(--desktop-space-component-padding-md)}.c-text-input__alert,.c-text-input__success{gap:var(--desktop-space-component-gap-sm, .25rem);font-family:var(--desktop-typography-label-sm-default-family);font-size:var(--desktop-typography-label-sm-default-size);font-weight:var(--desktop-typography-label-sm-default-weight);line-height:var(--desktop-typography-label-sm-default-line-height);letter-spacing:var(--desktop-typography-label-sm-default-letter-spacing)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: IconAlertComponent, selector: "lib-icon-alert", inputs: ["extraClass", "size"] }, { kind: "component", type: IconSuccessComponent, selector: "lib-icon-success", inputs: ["extraClass", "size"] }, { kind: "component", type: IconEyeComponent, selector: "lib-icon-eye", inputs: ["variant", "extraClass", "size"] }] });
|
|
445
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: PasswordInputComponent, isStandalone: true, selector: "lib-password-input", inputs: { label: "label", value: "value", placeholder: "placeholder", helperText: "helperText", alertText: "alertText", successText: "successText", error: "error", success: "success", disabled: "disabled", readonly: "readonly", required: "required", size: "size" }, outputs: { emitValue: "emitValue" }, ngImport: i0, template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [text]=\"label\" [required]=\"required\"></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)=\"onType($event)\"\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 icon=\"eye\" size=\"md\" iconBefore [variant]=\"showPassword ? 'close' : 'open'\" />\n </lib-button-icon>\n <!-- <button\n type=\"button\"\n class=\"c-text-input__toggle\"\n (click)=\"togglePassword()\"\n [attr.aria-label]=\"showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n >\n <lib-icon icon=\"eye\" size=\"md\" [variant]=\"showPassword ? 'close' : 'open'\" />\n </button> -->\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__input{width:100%;border-radius:var(--size-component-border-radius);border:var(--size-component-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-sm) var(--space-component-padding-sm) var(--space-component-padding-sm) 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{border:var(--size-component-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: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { 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"] }] });
|
|
522
446
|
}
|
|
523
447
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PasswordInputComponent, decorators: [{
|
|
524
448
|
type: Component,
|
|
525
449
|
args: [{ selector: 'lib-password-input', standalone: true, imports: [
|
|
526
450
|
CommonModule,
|
|
527
451
|
InputLabelComponent,
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
], template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [text]=\"label\"></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 [attr.aria-describedby]=\"ariaDescribedBy\"\n />\n <button\n type=\"button\"\n class=\"c-text-input__toggle\"\n (click)=\"togglePassword()\"\n [attr.aria-label]=\"showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n >\n <lib-icon
|
|
452
|
+
IconComponent,
|
|
453
|
+
ButtonIconComponent,
|
|
454
|
+
HelperTextComponent
|
|
455
|
+
], template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [text]=\"label\" [required]=\"required\"></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)=\"onType($event)\"\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 icon=\"eye\" size=\"md\" iconBefore [variant]=\"showPassword ? 'close' : 'open'\" />\n </lib-button-icon>\n <!-- <button\n type=\"button\"\n class=\"c-text-input__toggle\"\n (click)=\"togglePassword()\"\n [attr.aria-label]=\"showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n >\n <lib-icon icon=\"eye\" size=\"md\" [variant]=\"showPassword ? 'close' : 'open'\" />\n </button> -->\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__input{width:100%;border-radius:var(--size-component-border-radius);border:var(--size-component-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-sm) var(--space-component-padding-sm) var(--space-component-padding-sm) 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{border:var(--size-component-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"] }]
|
|
532
456
|
}], propDecorators: { label: [{
|
|
533
457
|
type: Input
|
|
534
458
|
}], value: [{
|
|
@@ -549,8 +473,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
549
473
|
type: Input
|
|
550
474
|
}], readonly: [{
|
|
551
475
|
type: Input
|
|
476
|
+
}], required: [{
|
|
477
|
+
type: Input
|
|
552
478
|
}], size: [{
|
|
553
479
|
type: Input
|
|
480
|
+
}], emitValue: [{
|
|
481
|
+
type: Output
|
|
554
482
|
}] } });
|
|
555
483
|
|
|
556
484
|
class RadioComponent {
|
|
@@ -567,17 +495,18 @@ class RadioComponent {
|
|
|
567
495
|
/** Muestra el estado de error */
|
|
568
496
|
error = false;
|
|
569
497
|
checked = false;
|
|
498
|
+
disabled = false;
|
|
570
499
|
/** Notifica al cambiar */
|
|
571
500
|
modelChange = new EventEmitter();
|
|
572
501
|
onChange() {
|
|
573
502
|
this.modelChange.emit(this.value);
|
|
574
503
|
}
|
|
575
504
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
576
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: RadioComponent, isStandalone: true, selector: "lib-radio", inputs: { id: "id", name: "name", value: "value", model: "model", label: "label", error: "error", checked: "checked" }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: "<div class=\"c-radio\">\n <label class=\"c-radio__label\" [for]=\"id || value\">\n <input\n type=\"radio\"\n class=\"c-radio__input\"\n [id]=\"id || value\"\n [name]=\"name\"\n [value]=\"value\"\n [checked]=\"value === model\"\n (change)=\"onChange()\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n role=\"radio\"\n [attr.aria-checked]=\"value === model ? 'true' : 'false'\"\n tabindex=\"{{ value === model ? '0' : '-1' }}\"\n checked=\"{{ value === model ? 'true' : 'false' }}\"\n />\n <span class=\"c-radio__custom\" [class.has-error]=\"error\" aria-hidden=\"true\"></span>\n <span class=\"c-radio__text\">{{ label }}</span>\n </label>\n</div>", styles: [".c-radio{display:flex;align-items:center;font-family:var(--
|
|
505
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: RadioComponent, isStandalone: true, selector: "lib-radio", inputs: { id: "id", name: "name", value: "value", model: "model", label: "label", error: "error", checked: "checked", disabled: "disabled" }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: "<div class=\"c-radio\">\n <label class=\"c-radio__label\" [for]=\"id || value\">\n <input\n type=\"radio\"\n class=\"c-radio__input\"\n [id]=\"id || value\"\n [name]=\"name\"\n [value]=\"value\"\n [checked]=\"value === model\"\n (change)=\"onChange()\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n role=\"radio\"\n [attr.aria-checked]=\"value === model ? 'true' : 'false'\"\n tabindex=\"{{ value === model ? '0' : '-1' }}\"\n checked=\"{{ value === model ? 'true' : 'false' }}\"\n [disabled]=\"disabled\"\n />\n <span class=\"c-radio__custom\" [class.has-error]=\"error\" aria-hidden=\"true\"></span>\n <span class=\"c-radio__text\">{{ label }}</span>\n </label>\n</div>", styles: [".c-radio{display:flex;align-items:center;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-radio__input{position:absolute;opacity:0;pointer-events:none}.c-radio__label{display:flex;align-items:center;cursor:pointer;gap:var(--space-component-gap-sm)}.c-radio__custom{display:flex;align-items:center;justify-content:center;width:.9rem;height:.9rem;border-radius:var(--size-border-radius-full);border:var(--size-border-width-md) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);position:relative;transition:all .2s}.c-radio__input:checked+.c-radio__custom{border-color:var(--color-action-primary-selected-background-default);background:var(--color-action-primary-selected-background-default)}.c-radio__input:checked+.c-radio__custom:after{content:\"\";display:flex;width:calc(100% - 6px);height:calc(100% - 6px);border-radius:var(--size-border-radius-full);background:var(--color-action-primary-selected-content-default)}.c-radio__input:checked+.c-radio__custom:hover{background-color:var(--color-action-primary-selected-background-hover)}.c-radio__input:checked+.c-radio__custom:focus{outline:2px solid var(--focus-outset)}.c-radio__input:checked+.c-radio__custom:pressed{background-color:var(--color-textfield-border-pressed)}.c-radio__input:checked+.c-radio__custom:disabled{background-color:var(--color-action-primary-selected-background-disabled)}.c-radio__input:checked:disabled+.c-radio__custom{background-color:var(--color-textfield-content-disabled);border-color:var(--color-textfield-content-disabled)}.c-radio__input:disabled+.c-radio__custom{border-color:var(--color-textfield-content-disabled)}.c-radio__custom.has-error{border-color:var(--color-feedback-danger-surface-border)}.c-radio__input:checked+.c-radio__custom.has-error{background-color:var(--color-feedback-danger-surface-border);border-color:var(--color-feedback-danger-surface-border)}.c-radio__text{font-size:1rem;line-height:1.5;color:#000}.c-radio:hover__custom{border-color:var(--color-textfield-border-hover)}.c-radio:focus__custom{outline:2px solid var(--focus-outset)}.c-radio:pressed__custom{border-color:var(--color-textfield-border-pressed)}.c-radio:disabled{color:var(--color-textfield-content-disabled)}.c-radio:disabled__custom{border-color:var(--color-textfield-border-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
577
506
|
}
|
|
578
507
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RadioComponent, decorators: [{
|
|
579
508
|
type: Component,
|
|
580
|
-
args: [{ selector: 'lib-radio', standalone: true, imports: [CommonModule], template: "<div class=\"c-radio\">\n <label class=\"c-radio__label\" [for]=\"id || value\">\n <input\n type=\"radio\"\n class=\"c-radio__input\"\n [id]=\"id || value\"\n [name]=\"name\"\n [value]=\"value\"\n [checked]=\"value === model\"\n (change)=\"onChange()\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n role=\"radio\"\n [attr.aria-checked]=\"value === model ? 'true' : 'false'\"\n tabindex=\"{{ value === model ? '0' : '-1' }}\"\n checked=\"{{ value === model ? 'true' : 'false' }}\"\n />\n <span class=\"c-radio__custom\" [class.has-error]=\"error\" aria-hidden=\"true\"></span>\n <span class=\"c-radio__text\">{{ label }}</span>\n </label>\n</div>", styles: [".c-radio{display:flex;align-items:center;font-family:var(--
|
|
509
|
+
args: [{ selector: 'lib-radio', standalone: true, imports: [CommonModule], template: "<div class=\"c-radio\">\n <label class=\"c-radio__label\" [for]=\"id || value\">\n <input\n type=\"radio\"\n class=\"c-radio__input\"\n [id]=\"id || value\"\n [name]=\"name\"\n [value]=\"value\"\n [checked]=\"value === model\"\n (change)=\"onChange()\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n role=\"radio\"\n [attr.aria-checked]=\"value === model ? 'true' : 'false'\"\n tabindex=\"{{ value === model ? '0' : '-1' }}\"\n checked=\"{{ value === model ? 'true' : 'false' }}\"\n [disabled]=\"disabled\"\n />\n <span class=\"c-radio__custom\" [class.has-error]=\"error\" aria-hidden=\"true\"></span>\n <span class=\"c-radio__text\">{{ label }}</span>\n </label>\n</div>", styles: [".c-radio{display:flex;align-items:center;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-radio__input{position:absolute;opacity:0;pointer-events:none}.c-radio__label{display:flex;align-items:center;cursor:pointer;gap:var(--space-component-gap-sm)}.c-radio__custom{display:flex;align-items:center;justify-content:center;width:.9rem;height:.9rem;border-radius:var(--size-border-radius-full);border:var(--size-border-width-md) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);position:relative;transition:all .2s}.c-radio__input:checked+.c-radio__custom{border-color:var(--color-action-primary-selected-background-default);background:var(--color-action-primary-selected-background-default)}.c-radio__input:checked+.c-radio__custom:after{content:\"\";display:flex;width:calc(100% - 6px);height:calc(100% - 6px);border-radius:var(--size-border-radius-full);background:var(--color-action-primary-selected-content-default)}.c-radio__input:checked+.c-radio__custom:hover{background-color:var(--color-action-primary-selected-background-hover)}.c-radio__input:checked+.c-radio__custom:focus{outline:2px solid var(--focus-outset)}.c-radio__input:checked+.c-radio__custom:pressed{background-color:var(--color-textfield-border-pressed)}.c-radio__input:checked+.c-radio__custom:disabled{background-color:var(--color-action-primary-selected-background-disabled)}.c-radio__input:checked:disabled+.c-radio__custom{background-color:var(--color-textfield-content-disabled);border-color:var(--color-textfield-content-disabled)}.c-radio__input:disabled+.c-radio__custom{border-color:var(--color-textfield-content-disabled)}.c-radio__custom.has-error{border-color:var(--color-feedback-danger-surface-border)}.c-radio__input:checked+.c-radio__custom.has-error{background-color:var(--color-feedback-danger-surface-border);border-color:var(--color-feedback-danger-surface-border)}.c-radio__text{font-size:1rem;line-height:1.5;color:#000}.c-radio:hover__custom{border-color:var(--color-textfield-border-hover)}.c-radio:focus__custom{outline:2px solid var(--focus-outset)}.c-radio:pressed__custom{border-color:var(--color-textfield-border-pressed)}.c-radio:disabled{color:var(--color-textfield-content-disabled)}.c-radio:disabled__custom{border-color:var(--color-textfield-border-disabled)}\n"] }]
|
|
581
510
|
}], propDecorators: { id: [{
|
|
582
511
|
type: Input
|
|
583
512
|
}], name: [{
|
|
@@ -592,6 +521,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
592
521
|
type: Input
|
|
593
522
|
}], checked: [{
|
|
594
523
|
type: Input
|
|
524
|
+
}], disabled: [{
|
|
525
|
+
type: Input
|
|
595
526
|
}], modelChange: [{
|
|
596
527
|
type: Output
|
|
597
528
|
}] } });
|
|
@@ -610,11 +541,11 @@ class RadioGroupComponent {
|
|
|
610
541
|
this.valueChange.emit(value);
|
|
611
542
|
}
|
|
612
543
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
613
|
-
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 [checked]=\"option.value === value\"\n [error]=\"error\"\n (change)=\"onChange(option.value)\"\n />\n </div>\n <p *ngIf=\"helperText\" class=\"c-radio-group__helper\"><lib-icon
|
|
544
|
+
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 [checked]=\"option.value === value\"\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", "model", "label", "error", "checked", "disabled"], outputs: ["modelChange"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }] });
|
|
614
545
|
}
|
|
615
546
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
616
547
|
type: Component,
|
|
617
|
-
args: [{ selector: 'lib-radio-group', standalone: true, imports: [CommonModule, RadioComponent, InputLabelComponent,
|
|
548
|
+
args: [{ selector: 'lib-radio-group', standalone: true, imports: [CommonModule, RadioComponent, InputLabelComponent, IconComponent], 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 [checked]=\"option.value === value\"\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"] }]
|
|
618
549
|
}], propDecorators: { label: [{
|
|
619
550
|
type: Input
|
|
620
551
|
}], name: [{
|
|
@@ -662,11 +593,11 @@ class SegmentedControlComponent {
|
|
|
662
593
|
}
|
|
663
594
|
}
|
|
664
595
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
665
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SegmentedControlComponent, isStandalone: true, selector: "lib-segmented-control", inputs: { options: "options", selectedValue: "selectedValue", fill: "fill" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "keydown": "onKeydown($event)" } }, ngImport: i0, template: "<div role=\"radiogroup\" [ngClass]=\"{'c-segmented-control': true,'c-segmented-control--fill': fill}\">\n <label\n *ngFor=\"let option of options; let i = index\"\n role=\"radio\"\n [attr.aria-checked]=\"isSelected(option)\"\n [attr.tabindex]=\"isSelected(option) ? 0 : -1\"\n class=\"c-segmented-control__item\"\n (click)=\"onSelect(option)\"\n (keydown.enter)=\"onSelect(option)\"\n (keydown.space)=\"onSelect(option)\"\n >\n <!-- Input real, oculto -->\n <input\n type=\"radio\"\n [value]=\"option.value\"\n [checked]=\"isSelected(option)\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n hidden\n />\n {{ option.label }}\n </label>\n</div>\n ", styles: ["@charset \"UTF-8\";.c-segmented-control{display:inline-flex;overflow:hidden}.c-segmented-control--fill{width:100%}.c-segmented-control__item{position:relative;width:100%;padding:var(--
|
|
596
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SegmentedControlComponent, isStandalone: true, selector: "lib-segmented-control", inputs: { options: "options", selectedValue: "selectedValue", fill: "fill" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "keydown": "onKeydown($event)" } }, ngImport: i0, template: "<div role=\"radiogroup\" [ngClass]=\"{'c-segmented-control': true,'c-segmented-control--fill': fill}\">\n <label\n *ngFor=\"let option of options; let i = index\"\n role=\"radio\"\n [attr.aria-checked]=\"isSelected(option)\"\n [attr.tabindex]=\"isSelected(option) ? 0 : -1\"\n class=\"c-segmented-control__item\"\n (click)=\"onSelect(option)\"\n (keydown.enter)=\"onSelect(option)\"\n (keydown.space)=\"onSelect(option)\"\n >\n <!-- Input real, oculto -->\n <input\n type=\"radio\"\n [value]=\"option.value\"\n [checked]=\"isSelected(option)\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n hidden\n />\n {{ option.label }}\n </label>\n</div>\n ", styles: ["@charset \"UTF-8\";.c-segmented-control{display:inline-flex;overflow:hidden}.c-segmented-control--fill{width:100%}.c-segmented-control__item{position:relative;width:100%;padding:var(--space-component-padding-sm);cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid var(--color-action-primary-border-default);text-align:center;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-action-primary-content-default)}.c-segmented-control__item:not(:last-child){border-right:none}.c-segmented-control__item:first-child{border-radius:12px 0 0 12px}.c-segmented-control__item:last-child{border-radius:0 12px 12px 0}.c-segmented-control__item:hover\\a0 {background-color:var(--color-action-primary-background-hover);color:var(--color-action-primary-content-hover)}.c-segmented-control__item:pressed{background-color:var(--color-action-primary-background-pressed);color:var(--color-core-content-default)}.c-segmented-control__item:selected{background-color:var(--color-action-primary-background-selected);color:var(--color-action-primary-selected-content-default)}.c-segmented-control__item:focus{outline:2px solid var(--color-decorative-primary-default);font-weight:var(--typography-label-sm-strong-weight);color:var(--color-action-alternative-selected);z-index:1}.c-segmented-control__item[aria-checked=true]{background:var(--color-action-primary-selected-background-default);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-action-primary-selected-content-default)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
666
597
|
}
|
|
667
598
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SegmentedControlComponent, decorators: [{
|
|
668
599
|
type: Component,
|
|
669
|
-
args: [{ selector: 'lib-segmented-control', imports: [CommonModule], template: "<div role=\"radiogroup\" [ngClass]=\"{'c-segmented-control': true,'c-segmented-control--fill': fill}\">\n <label\n *ngFor=\"let option of options; let i = index\"\n role=\"radio\"\n [attr.aria-checked]=\"isSelected(option)\"\n [attr.tabindex]=\"isSelected(option) ? 0 : -1\"\n class=\"c-segmented-control__item\"\n (click)=\"onSelect(option)\"\n (keydown.enter)=\"onSelect(option)\"\n (keydown.space)=\"onSelect(option)\"\n >\n <!-- Input real, oculto -->\n <input\n type=\"radio\"\n [value]=\"option.value\"\n [checked]=\"isSelected(option)\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n hidden\n />\n {{ option.label }}\n </label>\n</div>\n ", styles: ["@charset \"UTF-8\";.c-segmented-control{display:inline-flex;overflow:hidden}.c-segmented-control--fill{width:100%}.c-segmented-control__item{position:relative;width:100%;padding:var(--
|
|
600
|
+
args: [{ selector: 'lib-segmented-control', imports: [CommonModule], template: "<div role=\"radiogroup\" [ngClass]=\"{'c-segmented-control': true,'c-segmented-control--fill': fill}\">\n <label\n *ngFor=\"let option of options; let i = index\"\n role=\"radio\"\n [attr.aria-checked]=\"isSelected(option)\"\n [attr.tabindex]=\"isSelected(option) ? 0 : -1\"\n class=\"c-segmented-control__item\"\n (click)=\"onSelect(option)\"\n (keydown.enter)=\"onSelect(option)\"\n (keydown.space)=\"onSelect(option)\"\n >\n <!-- Input real, oculto -->\n <input\n type=\"radio\"\n [value]=\"option.value\"\n [checked]=\"isSelected(option)\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n hidden\n />\n {{ option.label }}\n </label>\n</div>\n ", styles: ["@charset \"UTF-8\";.c-segmented-control{display:inline-flex;overflow:hidden}.c-segmented-control--fill{width:100%}.c-segmented-control__item{position:relative;width:100%;padding:var(--space-component-padding-sm);cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid var(--color-action-primary-border-default);text-align:center;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-action-primary-content-default)}.c-segmented-control__item:not(:last-child){border-right:none}.c-segmented-control__item:first-child{border-radius:12px 0 0 12px}.c-segmented-control__item:last-child{border-radius:0 12px 12px 0}.c-segmented-control__item:hover\\a0 {background-color:var(--color-action-primary-background-hover);color:var(--color-action-primary-content-hover)}.c-segmented-control__item:pressed{background-color:var(--color-action-primary-background-pressed);color:var(--color-core-content-default)}.c-segmented-control__item:selected{background-color:var(--color-action-primary-background-selected);color:var(--color-action-primary-selected-content-default)}.c-segmented-control__item:focus{outline:2px solid var(--color-decorative-primary-default);font-weight:var(--typography-label-sm-strong-weight);color:var(--color-action-alternative-selected);z-index:1}.c-segmented-control__item[aria-checked=true]{background:var(--color-action-primary-selected-background-default);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-action-primary-selected-content-default)}\n"] }]
|
|
670
601
|
}], propDecorators: { options: [{
|
|
671
602
|
type: Input
|
|
672
603
|
}], selectedValue: [{
|
|
@@ -692,7 +623,9 @@ class TextInputComponent {
|
|
|
692
623
|
alertText = '';
|
|
693
624
|
disabled = false;
|
|
694
625
|
readonly = false;
|
|
626
|
+
required = false;
|
|
695
627
|
size = 'md';
|
|
628
|
+
emitValue = new EventEmitter();
|
|
696
629
|
get inputClass() {
|
|
697
630
|
return [
|
|
698
631
|
'c-text-input__input',
|
|
@@ -712,12 +645,17 @@ class TextInputComponent {
|
|
|
712
645
|
get ariaDescribedBy() {
|
|
713
646
|
return this.helperText ? 'text-input-helper' : null;
|
|
714
647
|
}
|
|
648
|
+
onType(event) {
|
|
649
|
+
const input = event.target;
|
|
650
|
+
const value = input.value;
|
|
651
|
+
this.emitValue.emit(value);
|
|
652
|
+
}
|
|
715
653
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
716
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TextInputComponent, isStandalone: true, selector: "lib-text-input", inputs: { label: "label", name: "name", value: "value", placeholder: "placeholder", helperText: "helperText", error: "error", success: "success", successText: "successText", alertText: "alertText", disabled: "disabled", readonly: "readonly", size: "size" }, ngImport: i0, template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [for]=\"name\" [text]=\"label\"></lib-input-label>\n\n <input\n type=\"text\"\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"value\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"label\"\n [attr.aria-labelledby]=\"label\"\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\"><lib-icon
|
|
654
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TextInputComponent, isStandalone: true, selector: "lib-text-input", inputs: { label: "label", name: "name", value: "value", placeholder: "placeholder", helperText: "helperText", error: "error", success: "success", successText: "successText", alertText: "alertText", disabled: "disabled", readonly: "readonly", required: "required", size: "size" }, outputs: { emitValue: "emitValue" }, ngImport: i0, template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [required]=\"required\" [for]=\"name\" [text]=\"label\"></lib-input-label>\n\n <input\n type=\"text\"\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)=\"onType($event)\"\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\"><lib-icon icon=\"alert\" size=\"md\"/>{{ alertText }}</span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\"><lib-icon icon=\"success\" size=\"md\"/>{{ successText }}</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__input{width:100%;border-radius:var(--size-component-border-radius);border:var(--size-component-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-sm) 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{border:var(--size-component-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-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: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }] });
|
|
717
655
|
}
|
|
718
656
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
719
657
|
type: Component,
|
|
720
|
-
args: [{ selector: 'lib-text-input', standalone: true, imports: [CommonModule, InputLabelComponent,
|
|
658
|
+
args: [{ selector: 'lib-text-input', standalone: true, imports: [CommonModule, InputLabelComponent, IconComponent], template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [required]=\"required\" [for]=\"name\" [text]=\"label\"></lib-input-label>\n\n <input\n type=\"text\"\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)=\"onType($event)\"\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\"><lib-icon icon=\"alert\" size=\"md\"/>{{ alertText }}</span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\"><lib-icon icon=\"success\" size=\"md\"/>{{ successText }}</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__input{width:100%;border-radius:var(--size-component-border-radius);border:var(--size-component-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-sm) 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{border:var(--size-component-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-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"] }]
|
|
721
659
|
}], propDecorators: { label: [{
|
|
722
660
|
type: Input
|
|
723
661
|
}], name: [{
|
|
@@ -740,8 +678,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
740
678
|
type: Input
|
|
741
679
|
}], readonly: [{
|
|
742
680
|
type: Input
|
|
681
|
+
}], required: [{
|
|
682
|
+
type: Input
|
|
743
683
|
}], size: [{
|
|
744
684
|
type: Input
|
|
685
|
+
}], emitValue: [{
|
|
686
|
+
type: Output
|
|
745
687
|
}] } });
|
|
746
688
|
|
|
747
689
|
class TextareaComponent {
|
|
@@ -755,7 +697,9 @@ class TextareaComponent {
|
|
|
755
697
|
alertText = '';
|
|
756
698
|
disabled = false;
|
|
757
699
|
readonly = false;
|
|
700
|
+
required = false;
|
|
758
701
|
size = 'md';
|
|
702
|
+
emitValue = new EventEmitter();
|
|
759
703
|
get inputClass() {
|
|
760
704
|
return [
|
|
761
705
|
'c-text-input__input',
|
|
@@ -775,12 +719,17 @@ class TextareaComponent {
|
|
|
775
719
|
get ariaDescribedBy() {
|
|
776
720
|
return this.helperText ? 'text-input-helper' : null;
|
|
777
721
|
}
|
|
722
|
+
onType(event) {
|
|
723
|
+
const input = event.target;
|
|
724
|
+
const value = input.value;
|
|
725
|
+
this.emitValue.emit(value);
|
|
726
|
+
}
|
|
778
727
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
779
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TextareaComponent, isStandalone: true, selector: "lib-textarea", inputs: { label: "label", value: "value", placeholder: "placeholder", helperText: "helperText", error: "error", success: "success", successText: "successText", alertText: "alertText", disabled: "disabled", readonly: "readonly", size: "size" }, ngImport: i0, template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [text]=\"label\"></lib-input-label>\n\n <textarea\n type=\"text\"\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 [attr.aria-labelledby]=\"label\"\n >{{ value }}</textarea>\n \n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"
|
|
728
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TextareaComponent, isStandalone: true, selector: "lib-textarea", inputs: { label: "label", value: "value", placeholder: "placeholder", helperText: "helperText", error: "error", success: "success", successText: "successText", alertText: "alertText", disabled: "disabled", readonly: "readonly", required: "required", size: "size" }, outputs: { emitValue: "emitValue" }, ngImport: i0, template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [required]=\"required\" [text]=\"label\"></lib-input-label>\n\n <textarea\n type=\"text\"\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 [attr.aria-labelledby]=\"label\"\n [required]=\"required\"\n (input)=\"onType($event)\"\n >{{ value }}</textarea>\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{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input__input{width:100%;border-radius:var(--size-component-border-radius);border:var(--size-component-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-sm) 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--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: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
780
729
|
}
|
|
781
730
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
782
731
|
type: Component,
|
|
783
|
-
args: [{ selector: 'lib-textarea', imports: [CommonModule, InputLabelComponent,
|
|
732
|
+
args: [{ selector: 'lib-textarea', imports: [CommonModule, InputLabelComponent, IconComponent, HelperTextComponent], template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [required]=\"required\" [text]=\"label\"></lib-input-label>\n\n <textarea\n type=\"text\"\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 [attr.aria-labelledby]=\"label\"\n [required]=\"required\"\n (input)=\"onType($event)\"\n >{{ value }}</textarea>\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{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input__input{width:100%;border-radius:var(--size-component-border-radius);border:var(--size-component-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-sm) 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--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"] }]
|
|
784
733
|
}], propDecorators: { label: [{
|
|
785
734
|
type: Input
|
|
786
735
|
}], value: [{
|
|
@@ -801,8 +750,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
801
750
|
type: Input
|
|
802
751
|
}], readonly: [{
|
|
803
752
|
type: Input
|
|
753
|
+
}], required: [{
|
|
754
|
+
type: Input
|
|
804
755
|
}], size: [{
|
|
805
756
|
type: Input
|
|
757
|
+
}], emitValue: [{
|
|
758
|
+
type: Output
|
|
806
759
|
}] } });
|
|
807
760
|
|
|
808
761
|
class ThumbnailComponent {
|
|
@@ -810,11 +763,11 @@ class ThumbnailComponent {
|
|
|
810
763
|
src = '';
|
|
811
764
|
alt = '';
|
|
812
765
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
813
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ThumbnailComponent, isStandalone: true, selector: "lib-thumbnail", inputs: { size: "size", src: "src", alt: "alt" }, ngImport: i0, template: "<figure [ngClass]=\"['c-thumbnail','c-thumbnail__' + size, !src ? 'c-thumbnail--no-img' : '']\">\n <img *ngIf=\"src\" [src]=\"src\" [alt]=\"alt\" class=\"c-thumbnail__img\" />\n <lib-icon
|
|
766
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ThumbnailComponent, isStandalone: true, selector: "lib-thumbnail", inputs: { size: "size", src: "src", alt: "alt" }, ngImport: i0, template: "<figure [ngClass]=\"['c-thumbnail','c-thumbnail__' + size, !src ? 'c-thumbnail--no-img' : '']\">\n <img *ngIf=\"src\" [src]=\"src\" [alt]=\"alt\" class=\"c-thumbnail__img\" />\n <lib-icon icon=\"thumb\" *ngIf=\"!src\" [size]=\"size === 'xl' ? 'lg' : size\"/>\n</figure>\n", styles: [".c-thumbnail{display:flex;align-items:center;justify-content:center;border-radius:var(--size-border-radius-md);overflow:hidden}.c-thumbnail__img{width:100%;height:100%;object-fit:cover;object-position:center}.c-thumbnail--no-img{border:1px solid var(--color-core-border-soft);background:var(--color-core-background-default)}.c-thumbnail__xl{width:5rem;height:5rem}.c-thumbnail__lg{width:3.75rem;height:3.75rem}.c-thumbnail__md{width:2.5rem;height:2.5rem}.c-thumbnail__sm{width:1.5rem;height:1.5rem;border-radius:var(--size-border-radius-sm)}\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"] }] });
|
|
814
767
|
}
|
|
815
768
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ThumbnailComponent, decorators: [{
|
|
816
769
|
type: Component,
|
|
817
|
-
args: [{ selector: 'lib-thumbnail', imports: [CommonModule,
|
|
770
|
+
args: [{ selector: 'lib-thumbnail', imports: [CommonModule, IconComponent], template: "<figure [ngClass]=\"['c-thumbnail','c-thumbnail__' + size, !src ? 'c-thumbnail--no-img' : '']\">\n <img *ngIf=\"src\" [src]=\"src\" [alt]=\"alt\" class=\"c-thumbnail__img\" />\n <lib-icon icon=\"thumb\" *ngIf=\"!src\" [size]=\"size === 'xl' ? 'lg' : size\"/>\n</figure>\n", styles: [".c-thumbnail{display:flex;align-items:center;justify-content:center;border-radius:var(--size-border-radius-md);overflow:hidden}.c-thumbnail__img{width:100%;height:100%;object-fit:cover;object-position:center}.c-thumbnail--no-img{border:1px solid var(--color-core-border-soft);background:var(--color-core-background-default)}.c-thumbnail__xl{width:5rem;height:5rem}.c-thumbnail__lg{width:3.75rem;height:3.75rem}.c-thumbnail__md{width:2.5rem;height:2.5rem}.c-thumbnail__sm{width:1.5rem;height:1.5rem;border-radius:var(--size-border-radius-sm)}\n"] }]
|
|
818
771
|
}], propDecorators: { size: [{
|
|
819
772
|
type: Input
|
|
820
773
|
}], src: [{
|
|
@@ -829,19 +782,19 @@ class TooltipComponent {
|
|
|
829
782
|
position = 'top';
|
|
830
783
|
triggerId = `tooltip-trigger-${++nextId}`;
|
|
831
784
|
tooltipId = `tooltip-${this.triggerId}`;
|
|
832
|
-
visible =
|
|
785
|
+
visible = true;
|
|
833
786
|
show() {
|
|
834
787
|
this.visible = true;
|
|
835
788
|
}
|
|
836
789
|
hide() {
|
|
837
|
-
this.visible = false;
|
|
790
|
+
// this.visible = false;
|
|
838
791
|
}
|
|
839
792
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
840
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TooltipComponent, isStandalone: true, selector: "lib-tooltip", inputs: { text: "text", position: "position", triggerId: "triggerId" }, ngImport: i0, template: "<div [class]=\"['c-tooltip', 'c-tooltip--' + position]\" [attr.id]=\"triggerId\">\n <ng-content></ng-content>\n \n <div\n
|
|
793
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TooltipComponent, isStandalone: true, selector: "lib-tooltip", inputs: { text: "text", position: "position", triggerId: "triggerId" }, ngImport: i0, template: "<div [attr.role]=\"'tooltip'\" *ngIf=\"visible\" [class]=\"['c-tooltip', 'c-tooltip--' + position]\" [attr.id]=\"triggerId\">\n <ng-content></ng-content>\n \n <div\n class=\"c-tooltip__text\"\n [attr.id]=\"tooltipId\"\n [class]=\"position\"\n >\n {{ text }}\n </div>\n </div>\n ", styles: [".c-tooltip{position:absolute;z-index:100;border-radius:var(--size-border-radius-sm);background:var(--color-core-background-surface-floating);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft),0 4px 8px 0 var(--color-effect-shadow-soft);display:flex;max-width:9rem;padding:var(--space-component-padding-md);flex-direction:column;justify-content:center;align-items:flex-start;color:var(--color-core-content-soft);font-family:var(--typography-body-xs-family);font-size:var(--typography-body-xs-size);font-style:normal;font-weight:var(--typography-body-xs-weight);line-height:var(--typography-body-xs-line-height);letter-spacing:var(--typography-body-xs-letter-spacing)}.c-tooltip--bottom{bottom:100%;left:50%;transform:translate(-50%) translateY(-.5rem)}.c-tooltip--bottom:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:16px solid var(--color-core-background-surface-floating);bottom:-.5rem;left:0;right:0;margin:0 auto}.c-tooltip--left{left:100%;top:50%;transform:translate(.5rem) translateY(-50%)}.c-tooltip--left:before{content:\"\";position:absolute;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-right:16px solid var(--color-core-background-surface-floating);bottom:0;left:-.5rem;top:0;margin:auto 0}.c-tooltip--top{top:100%;left:50%;transform:translate(-50%) translateY(.5rem)}.c-tooltip--top:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:16px solid var(--color-core-background-surface-floating);top:-.5rem;left:0;right:0;margin:0 auto}.c-tooltip--right{right:100%;top:50%;transform:translate(-.5rem) translateY(-50%)}.c-tooltip--right:before{content:\"\";position:absolute;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-left:16px solid var(--color-core-background-surface-floating);bottom:0;right:-.5rem;top:0;margin:auto 0}.c-tooltip--bottom-left{bottom:100%;left:50%;transform:translate(-50%) translateY(-.5rem)}.c-tooltip--bottom-left:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:16px solid var(--color-core-background-surface-floating);bottom:-.5rem;left:.75rem;margin:0 auto}.c-tooltip--bottom-right{bottom:100%;left:50%;transform:translate(-50%) translateY(-.5rem)}.c-tooltip--bottom-right:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:16px solid var(--color-core-background-surface-floating);bottom:-.5rem;right:.75rem;margin:0 auto}.c-tooltip--top-left{top:100%;left:50%;transform:translate(-50%) translateY(.5rem)}.c-tooltip--top-left:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:16px solid var(--color-core-background-surface-floating);top:-.5rem;left:.75rem;margin:0 auto}.c-tooltip--top-right{top:100%;left:50%;transform:translate(-50%) translateY(.5rem)}.c-tooltip--top-right:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:16px solid var(--color-core-background-surface-floating);top:-.5rem;right:.75rem;margin:0 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
841
794
|
}
|
|
842
795
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
843
796
|
type: Component,
|
|
844
|
-
args: [{ selector: 'lib-tooltip', standalone: true, imports: [CommonModule], template: "<div [class]=\"['c-tooltip', 'c-tooltip--' + position]\" [attr.id]=\"triggerId\">\n <ng-content></ng-content>\n \n <div\n
|
|
797
|
+
args: [{ selector: 'lib-tooltip', standalone: true, imports: [CommonModule], template: "<div [attr.role]=\"'tooltip'\" *ngIf=\"visible\" [class]=\"['c-tooltip', 'c-tooltip--' + position]\" [attr.id]=\"triggerId\">\n <ng-content></ng-content>\n \n <div\n class=\"c-tooltip__text\"\n [attr.id]=\"tooltipId\"\n [class]=\"position\"\n >\n {{ text }}\n </div>\n </div>\n ", styles: [".c-tooltip{position:absolute;z-index:100;border-radius:var(--size-border-radius-sm);background:var(--color-core-background-surface-floating);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft),0 4px 8px 0 var(--color-effect-shadow-soft);display:flex;max-width:9rem;padding:var(--space-component-padding-md);flex-direction:column;justify-content:center;align-items:flex-start;color:var(--color-core-content-soft);font-family:var(--typography-body-xs-family);font-size:var(--typography-body-xs-size);font-style:normal;font-weight:var(--typography-body-xs-weight);line-height:var(--typography-body-xs-line-height);letter-spacing:var(--typography-body-xs-letter-spacing)}.c-tooltip--bottom{bottom:100%;left:50%;transform:translate(-50%) translateY(-.5rem)}.c-tooltip--bottom:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:16px solid var(--color-core-background-surface-floating);bottom:-.5rem;left:0;right:0;margin:0 auto}.c-tooltip--left{left:100%;top:50%;transform:translate(.5rem) translateY(-50%)}.c-tooltip--left:before{content:\"\";position:absolute;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-right:16px solid var(--color-core-background-surface-floating);bottom:0;left:-.5rem;top:0;margin:auto 0}.c-tooltip--top{top:100%;left:50%;transform:translate(-50%) translateY(.5rem)}.c-tooltip--top:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:16px solid var(--color-core-background-surface-floating);top:-.5rem;left:0;right:0;margin:0 auto}.c-tooltip--right{right:100%;top:50%;transform:translate(-.5rem) translateY(-50%)}.c-tooltip--right:before{content:\"\";position:absolute;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-left:16px solid var(--color-core-background-surface-floating);bottom:0;right:-.5rem;top:0;margin:auto 0}.c-tooltip--bottom-left{bottom:100%;left:50%;transform:translate(-50%) translateY(-.5rem)}.c-tooltip--bottom-left:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:16px solid var(--color-core-background-surface-floating);bottom:-.5rem;left:.75rem;margin:0 auto}.c-tooltip--bottom-right{bottom:100%;left:50%;transform:translate(-50%) translateY(-.5rem)}.c-tooltip--bottom-right:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:16px solid var(--color-core-background-surface-floating);bottom:-.5rem;right:.75rem;margin:0 auto}.c-tooltip--top-left{top:100%;left:50%;transform:translate(-50%) translateY(.5rem)}.c-tooltip--top-left:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:16px solid var(--color-core-background-surface-floating);top:-.5rem;left:.75rem;margin:0 auto}.c-tooltip--top-right{top:100%;left:50%;transform:translate(-50%) translateY(.5rem)}.c-tooltip--top-right:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:16px solid var(--color-core-background-surface-floating);top:-.5rem;right:.75rem;margin:0 auto}\n"] }]
|
|
845
798
|
}], propDecorators: { text: [{
|
|
846
799
|
type: Input
|
|
847
800
|
}], position: [{
|
|
@@ -850,9 +803,236 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
850
803
|
type: Input
|
|
851
804
|
}] } });
|
|
852
805
|
|
|
806
|
+
class InputDateComponent {
|
|
807
|
+
label = '';
|
|
808
|
+
value = '';
|
|
809
|
+
placeholder = '';
|
|
810
|
+
helperText = '';
|
|
811
|
+
alertText = '';
|
|
812
|
+
successText = '';
|
|
813
|
+
error = false;
|
|
814
|
+
success = false;
|
|
815
|
+
disabled = false;
|
|
816
|
+
readonly = false;
|
|
817
|
+
required = false;
|
|
818
|
+
size = 'md';
|
|
819
|
+
emitValue = new EventEmitter();
|
|
820
|
+
get inputClass() {
|
|
821
|
+
return [
|
|
822
|
+
'c-text-input__input',
|
|
823
|
+
`c-text-input__input--${this.size}`,
|
|
824
|
+
this.error ? 'is-error' : '',
|
|
825
|
+
this.success ? 'is-success' : '',
|
|
826
|
+
this.disabled ? 'is-disabled' : '',
|
|
827
|
+
this.readonly ? 'is-readonly' : '',
|
|
828
|
+
].filter(Boolean);
|
|
829
|
+
}
|
|
830
|
+
get ariaDescribedBy() {
|
|
831
|
+
return this.helperText ? 'search-input-helper' : null;
|
|
832
|
+
}
|
|
833
|
+
toggleCalendar() {
|
|
834
|
+
console.log('Toggle calendar functionality not implemented yet.');
|
|
835
|
+
}
|
|
836
|
+
onType(event) {
|
|
837
|
+
const input = event.target;
|
|
838
|
+
const value = input.value;
|
|
839
|
+
this.emitValue.emit(value);
|
|
840
|
+
}
|
|
841
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
842
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InputDateComponent, isStandalone: true, selector: "lib-input-date", inputs: { label: "label", value: "value", placeholder: "placeholder", helperText: "helperText", alertText: "alertText", successText: "successText", error: "error", success: "success", disabled: "disabled", readonly: "readonly", required: "required", size: "size" }, outputs: { emitValue: "emitValue" }, ngImport: i0, template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [required]=\"required\" [text]=\"label\"></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)=\"onType($event)\"\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__input{width:100%;border-radius:var(--size-component-border-radius);border:var(--size-component-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-sm) var(--space-component-padding-sm) var(--space-component-padding-sm) 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{border:var(--size-component-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: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { 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"] }] });
|
|
843
|
+
}
|
|
844
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputDateComponent, decorators: [{
|
|
845
|
+
type: Component,
|
|
846
|
+
args: [{ selector: 'lib-input-date', imports: [
|
|
847
|
+
CommonModule,
|
|
848
|
+
InputLabelComponent,
|
|
849
|
+
IconComponent,
|
|
850
|
+
ButtonIconComponent,
|
|
851
|
+
HelperTextComponent
|
|
852
|
+
], template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [required]=\"required\" [text]=\"label\"></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)=\"onType($event)\"\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__input{width:100%;border-radius:var(--size-component-border-radius);border:var(--size-component-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-sm) var(--space-component-padding-sm) var(--space-component-padding-sm) 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{border:var(--size-component-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"] }]
|
|
853
|
+
}], propDecorators: { label: [{
|
|
854
|
+
type: Input
|
|
855
|
+
}], value: [{
|
|
856
|
+
type: Input
|
|
857
|
+
}], placeholder: [{
|
|
858
|
+
type: Input
|
|
859
|
+
}], helperText: [{
|
|
860
|
+
type: Input
|
|
861
|
+
}], alertText: [{
|
|
862
|
+
type: Input
|
|
863
|
+
}], successText: [{
|
|
864
|
+
type: Input
|
|
865
|
+
}], error: [{
|
|
866
|
+
type: Input
|
|
867
|
+
}], success: [{
|
|
868
|
+
type: Input
|
|
869
|
+
}], disabled: [{
|
|
870
|
+
type: Input
|
|
871
|
+
}], readonly: [{
|
|
872
|
+
type: Input
|
|
873
|
+
}], required: [{
|
|
874
|
+
type: Input
|
|
875
|
+
}], size: [{
|
|
876
|
+
type: Input
|
|
877
|
+
}], emitValue: [{
|
|
878
|
+
type: Output
|
|
879
|
+
}] } });
|
|
880
|
+
|
|
881
|
+
class InputNumberComponent {
|
|
882
|
+
label = '';
|
|
883
|
+
value = 0;
|
|
884
|
+
placeholder = '';
|
|
885
|
+
helperText = '';
|
|
886
|
+
alertText = '';
|
|
887
|
+
successText = '';
|
|
888
|
+
error = false;
|
|
889
|
+
success = false;
|
|
890
|
+
disabled = false;
|
|
891
|
+
required = false;
|
|
892
|
+
readonly = false;
|
|
893
|
+
size = 'md';
|
|
894
|
+
variant = 'default';
|
|
895
|
+
emitValue = new EventEmitter();
|
|
896
|
+
get inputClass() {
|
|
897
|
+
return [
|
|
898
|
+
'c-text-input__input',
|
|
899
|
+
`c-text-input__input--${this.size}`,
|
|
900
|
+
this.error ? 'is-error' : '',
|
|
901
|
+
this.success ? 'is-success' : '',
|
|
902
|
+
this.disabled ? 'is-disabled' : '',
|
|
903
|
+
this.readonly ? 'is-readonly' : '',
|
|
904
|
+
].filter(Boolean);
|
|
905
|
+
}
|
|
906
|
+
get ariaDescribedBy() {
|
|
907
|
+
return this.helperText ? 'search-input-helper' : null;
|
|
908
|
+
}
|
|
909
|
+
upNumber() {
|
|
910
|
+
this.value++;
|
|
911
|
+
}
|
|
912
|
+
downNumber() {
|
|
913
|
+
this.value--;
|
|
914
|
+
}
|
|
915
|
+
onType(event) {
|
|
916
|
+
const input = event.target;
|
|
917
|
+
const value = input.value;
|
|
918
|
+
this.emitValue.emit(value);
|
|
919
|
+
}
|
|
920
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
921
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InputNumberComponent, isStandalone: true, selector: "lib-input-number", inputs: { label: "label", value: "value", placeholder: "placeholder", helperText: "helperText", alertText: "alertText", successText: "successText", error: "error", success: "success", disabled: "disabled", required: "required", readonly: "readonly", size: "size", variant: "variant" }, outputs: { emitValue: "emitValue" }, ngImport: i0, template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [required]=\"required\" [text]=\"label\"></lib-input-label>\n\n <div class=\"c-text-input__wrapper \"\n [class.c-text-input__wrapper--right]=\"variant === 'right'\">\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 />\n <lib-button-icon\n ariaLabel=\"minor\"\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=\"up\"\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=\"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__input{width:100%;border-radius:var(--size-component-border-radius);border:var(--size-component-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-sm) 2rem var(--space-component-padding-sm) 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{border:var(--size-component-border-width) solid 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: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { 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"] }] });
|
|
922
|
+
}
|
|
923
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputNumberComponent, decorators: [{
|
|
924
|
+
type: Component,
|
|
925
|
+
args: [{ selector: 'lib-input-number', imports: [
|
|
926
|
+
CommonModule,
|
|
927
|
+
InputLabelComponent,
|
|
928
|
+
IconComponent,
|
|
929
|
+
ButtonIconComponent,
|
|
930
|
+
HelperTextComponent
|
|
931
|
+
], template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [required]=\"required\" [text]=\"label\"></lib-input-label>\n\n <div class=\"c-text-input__wrapper \"\n [class.c-text-input__wrapper--right]=\"variant === 'right'\">\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 />\n <lib-button-icon\n ariaLabel=\"minor\"\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=\"up\"\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=\"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__input{width:100%;border-radius:var(--size-component-border-radius);border:var(--size-component-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-sm) 2rem var(--space-component-padding-sm) 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{border:var(--size-component-border-width) solid 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"] }]
|
|
932
|
+
}], propDecorators: { label: [{
|
|
933
|
+
type: Input
|
|
934
|
+
}], value: [{
|
|
935
|
+
type: Input
|
|
936
|
+
}], placeholder: [{
|
|
937
|
+
type: Input
|
|
938
|
+
}], helperText: [{
|
|
939
|
+
type: Input
|
|
940
|
+
}], alertText: [{
|
|
941
|
+
type: Input
|
|
942
|
+
}], successText: [{
|
|
943
|
+
type: Input
|
|
944
|
+
}], error: [{
|
|
945
|
+
type: Input
|
|
946
|
+
}], success: [{
|
|
947
|
+
type: Input
|
|
948
|
+
}], disabled: [{
|
|
949
|
+
type: Input
|
|
950
|
+
}], required: [{
|
|
951
|
+
type: Input
|
|
952
|
+
}], readonly: [{
|
|
953
|
+
type: Input
|
|
954
|
+
}], size: [{
|
|
955
|
+
type: Input
|
|
956
|
+
}], variant: [{
|
|
957
|
+
type: Input
|
|
958
|
+
}], emitValue: [{
|
|
959
|
+
type: Output
|
|
960
|
+
}] } });
|
|
961
|
+
|
|
962
|
+
class InputSearchComponent {
|
|
963
|
+
label = '';
|
|
964
|
+
value = '';
|
|
965
|
+
placeholder = '';
|
|
966
|
+
helperText = '';
|
|
967
|
+
alertText = '';
|
|
968
|
+
successText = '';
|
|
969
|
+
error = false;
|
|
970
|
+
success = false;
|
|
971
|
+
disabled = false;
|
|
972
|
+
readonly = false;
|
|
973
|
+
required = false;
|
|
974
|
+
size = 'md';
|
|
975
|
+
emitValue = new EventEmitter();
|
|
976
|
+
get inputClass() {
|
|
977
|
+
return [
|
|
978
|
+
'c-text-input__input',
|
|
979
|
+
`c-text-input__input--${this.size}`,
|
|
980
|
+
this.error ? 'is-error' : '',
|
|
981
|
+
this.success ? 'is-success' : '',
|
|
982
|
+
this.disabled ? 'is-disabled' : '',
|
|
983
|
+
this.readonly ? 'is-readonly' : '',
|
|
984
|
+
].filter(Boolean);
|
|
985
|
+
}
|
|
986
|
+
get ariaDescribedBy() {
|
|
987
|
+
return this.helperText ? 'search-input-helper' : null;
|
|
988
|
+
}
|
|
989
|
+
onType(event) {
|
|
990
|
+
const input = event.target;
|
|
991
|
+
const value = input.value;
|
|
992
|
+
this.emitValue.emit(value);
|
|
993
|
+
}
|
|
994
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
995
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InputSearchComponent, isStandalone: true, selector: "lib-input-search", inputs: { label: "label", value: "value", placeholder: "placeholder", helperText: "helperText", alertText: "alertText", successText: "successText", error: "error", success: "success", disabled: "disabled", readonly: "readonly", required: "required", size: "size" }, outputs: { emitValue: "emitValue" }, ngImport: i0, template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [required]=\"required\" [text]=\"label\"></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)=\"onType($event)\"\n [attr.aria-label]=\"label ? label : 'Search input'\"\n />\n <span class=\"c-text-input__icon\"><lib-icon icon=\"search\" size=\"md\" /></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 \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__input{width:100%;border-radius:var(--size-component-border-radius);border:var(--size-component-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-sm) var(--space-component-padding-sm) var(--space-component-padding-sm) 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{border:var(--size-component-border-width) solid 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: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
996
|
+
}
|
|
997
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputSearchComponent, decorators: [{
|
|
998
|
+
type: Component,
|
|
999
|
+
args: [{ selector: 'lib-input-search', imports: [
|
|
1000
|
+
CommonModule,
|
|
1001
|
+
InputLabelComponent,
|
|
1002
|
+
IconComponent,
|
|
1003
|
+
HelperTextComponent
|
|
1004
|
+
], template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [required]=\"required\" [text]=\"label\"></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)=\"onType($event)\"\n [attr.aria-label]=\"label ? label : 'Search input'\"\n />\n <span class=\"c-text-input__icon\"><lib-icon icon=\"search\" size=\"md\" /></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 \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__input{width:100%;border-radius:var(--size-component-border-radius);border:var(--size-component-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-sm) var(--space-component-padding-sm) var(--space-component-padding-sm) 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{border:var(--size-component-border-width) solid 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"] }]
|
|
1005
|
+
}], propDecorators: { label: [{
|
|
1006
|
+
type: Input
|
|
1007
|
+
}], value: [{
|
|
1008
|
+
type: Input
|
|
1009
|
+
}], placeholder: [{
|
|
1010
|
+
type: Input
|
|
1011
|
+
}], helperText: [{
|
|
1012
|
+
type: Input
|
|
1013
|
+
}], alertText: [{
|
|
1014
|
+
type: Input
|
|
1015
|
+
}], successText: [{
|
|
1016
|
+
type: Input
|
|
1017
|
+
}], error: [{
|
|
1018
|
+
type: Input
|
|
1019
|
+
}], success: [{
|
|
1020
|
+
type: Input
|
|
1021
|
+
}], disabled: [{
|
|
1022
|
+
type: Input
|
|
1023
|
+
}], readonly: [{
|
|
1024
|
+
type: Input
|
|
1025
|
+
}], required: [{
|
|
1026
|
+
type: Input
|
|
1027
|
+
}], size: [{
|
|
1028
|
+
type: Input
|
|
1029
|
+
}], emitValue: [{
|
|
1030
|
+
type: Output
|
|
1031
|
+
}] } });
|
|
1032
|
+
|
|
853
1033
|
/**
|
|
854
1034
|
* Generated bundle index. Do not edit.
|
|
855
1035
|
*/
|
|
856
1036
|
|
|
857
|
-
export { AvatarComponent, ButtonComponent, ButtonIconComponent, ButtonSetComponent, CheckboxComponent, CheckboxGroupComponent, ChipsComponent, DesignTokensComponent,
|
|
1037
|
+
export { AvatarComponent, ButtonComponent, ButtonIconComponent, ButtonSetComponent, CheckboxComponent, CheckboxGroupComponent, ChipsComponent, DesignTokensComponent, IconComponent, InputDateComponent, InputLabelComponent, InputNumberComponent, InputSearchComponent, LinkComponent, PasswordInputComponent, RadioComponent, RadioGroupComponent, SegmentedControlComponent, TextInputComponent, TextareaComponent, ThumbnailComponent, TooltipComponent };
|
|
858
1038
|
//# sourceMappingURL=crowdfarming-oliva-ds.mjs.map
|