@zanichelli/albe-web-components 19.3.0-rc1 → 19.4.0

package/dist/types/constants/iconset.d.ts

@@ -59,7 +59,7 @@ export declare const STROKE_ICONS: {
     readonly "back-top": "M461 356L301 528 254 483 500 221 746 483 699 528 539 356 539 980 461 980ZM220 20L780 20 780 92 220 92Z";
     readonly "barrage-questions": "M167 59Q167 41 177 30.5 187 20 206 20L426 20Q444 20 454.5 30.5 465 41 465 59L465 275Q465 293 454.5 303.5 444 314 426 314L206 314Q187 314 177 303.5 167 293 167 275L167 59ZM403 254L403 80 229 80 229 254ZM534 59Q534 41 544.5 30.5 555 20 573 20L794 20Q812 20 822.5 30.5 833 41 833 59L833 275Q833 293 822.5 303.5 812 314 794 314L573 314Q555 314 544.5 303.5 534 293 534 275L534 59ZM768 88L663 187 615 139 582 170 663 251 798 121ZM534 392Q534 374 544 363.5 554 353 573 353L793 353Q811 353 821.5 363.5 832 374 832 392L832 608Q832 626 821.5 636.5 811 647 793 647L573 647Q554 647 544 636.5 534 626 534 608L534 392ZM770 587L770 413 596 413 596 587ZM166 392Q166 374 176.5 363.5 187 353 205 353L426 353Q444 353 454.5 363.5 465 374 465 392L465 608Q465 626 454.5 636.5 444 647 426 647L205 647Q187 647 176.5 636.5 166 626 166 608L166 392ZM400 421L295 520 247 472 214 503 295 584 430 454ZM167 725Q167 707 177 696.5 187 686 206 686L426 686Q444 686 454.5 696.5 465 707 465 725L465 941Q465 959 454.5 969.5 444 980 426 980L206 980Q187 980 177 969.5 167 959 167 941L167 725ZM403 920L403 746 229 746 229 920ZM534 725Q534 707 544.5 696.5 555 686 573 686L794 686Q812 686 822.5 696.5 833 707 833 725L833 941Q833 959 822.5 969.5 812 980 794 980L573 980Q555 980 544.5 969.5 534 959 534 941L534 725ZM768 754L663 853 615 805 582 836 663 917 798 787Z";
     readonly "bg-color": "M420 652Q401 671 376 671 352 671 331 652L116 435Q97 416 97 390 97 365 116 346L273 190 202 119 245 76 316 147 443 20Q462 1 488 1 513 1 532 20L748 235Q767 253 767 280 767 306 748 324L420 652ZM486 67L361 192 433 263 389 307 318 235 194 359 575 407 701 281ZM789 686Q749 686 726 662 703 638 703 604 703 584 712 566 721 548 740 518 774 463 789 429 805 464 837 516 857 547 865.5 565.5 874 584 874 604 874 638 851 662 828 686 789 686ZM103 980Q50 980 50 927L50 822Q50 770 103 770L897 770Q950 770 950 823L950 927Q950 980 897 980L103 980ZM876 940Q897 940 903.5 933 910 926 910 910L910 839Q910 823 903.5 816.5 897 810 876 810L124 810Q103 810 96.5 816.5 90 823 90 839L90 910Q90 926 96.5 933 103 940 124 940L876 940Z";
-    readonly "bg-color-trasparent": "M420 652Q401 671 376 671 352 671 331 652L116 435Q97 416 97 390 97 365 116 346L273 190 202 119 245 76 316 147 443 20Q462 1 488 1 513 1 532 20L748 235Q767 253 767 280 767 306 748 324L420 652ZM486 67L361 192 433 263 389 307 318 235 194 359 575 407 701 281ZM789 686Q749 686 726 662 703 638 703 604 703 584 712 566 721 548 740 518 774 463 789 429 805 464 837 516 857 547 865.5 565.5 874 584 874 604 874 638 851 662 828 686 789 686Z";
+    readonly "bg-color-transparent": "M420 652Q401 671 376 671 352 671 331 652L116 435Q97 416 97 390 97 365 116 346L273 190 202 119 245 76 316 147 443 20Q462 1 488 1 513 1 532 20L748 235Q767 253 767 280 767 306 748 324L420 652ZM486 67L361 192 433 263 389 307 318 235 194 359 575 407 701 281ZM789 686Q749 686 726 662 703 638 703 604 703 584 712 566 721 548 740 518 774 463 789 429 805 464 837 516 857 547 865.5 565.5 874 584 874 604 874 638 851 662 828 686 789 686Z";
     readonly biology: "M583 550Q619 611 619 678 619 764 559 855L469 997 415 964 456 902 148 702 109 763 55 730 146 588Q191 518 252.5 482 314 446 387 446 406 446 427 449 385 381 385 306 385 221 441 136L533-5 586 29 545 90 853 289 892 228 945 262 854 403Q756 552 614 552 603 552 583 550ZM491 848L507 823Q527 792 541 757L246 567Q223 589 200 623L184 647ZM557 690Q558 683 558 671 558 627 539 591 520 555 482 531 435 502 388 502 345 502 303 524L557 690ZM445 302Q442 352 462 394.5 482 437 524 464 566 493 614 493 657 493 701 468L445 302ZM755 426Q779 402 801 369L817 344 510 144 493 169Q472 200 460 234L755 426Z";
     readonly "black-diamond": "M194 500L500 92 806 504 500 910Z";
     readonly blockquote: "M852 349L583 347 583 102 930 104 930 351 792 888 715 888ZM359 349L90 347 90 102 437 105 437 353 299 888 222 888Z";
@@ -473,7 +473,7 @@ export declare const FILLED_ICONS: {
     readonly "back-top-filled": "M461 356L301 528 254 483 500 221 746 483 699 528 539 356 539 980 461 980ZM220 20L780 20 780 92 220 92Z";
     readonly "barrage-questions-filled": "M167 59Q167 41 177 30.5 187 20 206 20L426 20Q444 20 454.5 30.5 465 41 465 59L465 275Q465 293 454.5 303.5 444 314 426 314L206 314Q187 314 177 303.5 167 293 167 275L167 59ZM403 254L403 80 229 80 229 254ZM534 59Q534 41 544.5 30.5 555 20 573 20L794 20Q812 20 822.5 30.5 833 41 833 59L833 275Q833 293 822.5 303.5 812 314 794 314L573 314Q555 314 544.5 303.5 534 293 534 275L534 59ZM768 88L663 187 615 139 582 170 663 251 798 121ZM534 392Q534 374 544 363.5 554 353 573 353L793 353Q811 353 821.5 363.5 832 374 832 392L832 608Q832 626 821.5 636.5 811 647 793 647L573 647Q554 647 544 636.5 534 626 534 608L534 392ZM770 587L770 413 596 413 596 587ZM166 392Q166 374 176.5 363.5 187 353 205 353L426 353Q444 353 454.5 363.5 465 374 465 392L465 608Q465 626 454.5 636.5 444 647 426 647L205 647Q187 647 176.5 636.5 166 626 166 608L166 392ZM400 421L295 520 247 472 214 503 295 584 430 454ZM167 725Q167 707 177 696.5 187 686 206 686L426 686Q444 686 454.5 696.5 465 707 465 725L465 941Q465 959 454.5 969.5 444 980 426 980L206 980Q187 980 177 969.5 167 959 167 941L167 725ZM403 920L403 746 229 746 229 920ZM534 725Q534 707 544.5 696.5 555 686 573 686L794 686Q812 686 822.5 696.5 833 707 833 725L833 941Q833 959 822.5 969.5 812 980 794 980L573 980Q555 980 544.5 969.5 534 959 534 941L534 725ZM768 754L663 853 615 805 582 836 663 917 798 787Z";
     readonly "bg-color-filled": "M420 652Q401 671 376 671 352 671 331 652L116 435Q97 416 97 390 97 365 116 346L273 190 202 119 245 76 316 147 443 20Q462 1 488 1 513 1 532 20L748 235Q767 253 767 280 767 306 748 324L420 652ZM486 67L361 192 433 263 389 307 318 235 194 359 575 407 701 281ZM789 686Q749 686 726 662 703 638 703 604 703 584 712 566 721 548 740 518 774 463 789 429 805 464 837 516 857 547 865.5 565.5 874 584 874 604 874 638 851 662 828 686 789 686ZM103 980Q50 980 50 927L50 822Q50 770 103 770L897 770Q950 770 950 823L950 927Q950 980 897 980L103 980ZM876 940Q897 940 903.5 933 910 926 910 910L910 839Q910 823 903.5 816.5 897 810 876 810L124 810Q103 810 96.5 816.5 90 823 90 839L90 910Q90 926 96.5 933 103 940 124 940L876 940Z";
-    readonly "bg-color-trasparent-filled": "M420 652Q401 671 376 671 352 671 331 652L116 435Q97 416 97 390 97 365 116 346L273 190 202 119 245 76 316 147 443 20Q462 1 488 1 513 1 532 20L748 235Q767 253 767 280 767 306 748 324L420 652ZM486 67L361 192 433 263 389 307 318 235 194 359 575 407 701 281ZM789 686Q749 686 726 662 703 638 703 604 703 584 712 566 721 548 740 518 774 463 789 429 805 464 837 516 857 547 865.5 565.5 874 584 874 604 874 638 851 662 828 686 789 686Z";
+    readonly "bg-color-transparent-filled": "M420 652Q401 671 376 671 352 671 331 652L116 435Q97 416 97 390 97 365 116 346L273 190 202 119 245 76 316 147 443 20Q462 1 488 1 513 1 532 20L748 235Q767 253 767 280 767 306 748 324L420 652ZM486 67L361 192 433 263 389 307 318 235 194 359 575 407 701 281ZM789 686Q749 686 726 662 703 638 703 604 703 584 712 566 721 548 740 518 774 463 789 429 805 464 837 516 857 547 865.5 565.5 874 584 874 604 874 638 851 662 828 686 789 686Z";
     readonly "biology-filled": "M583 550Q619 611 619 678 619 764 559 855L469 997 415 964 456 902 149 702 109 763 55 730 146 588Q191 518 252.5 482 314 446 387 446 406 446 427 449 385 381 385 306 385 221 441 136L533-5 586 29 545 90 853 290 892 228 945 262 854 403Q756 552 614 552 603 552 583 550ZM491 848L507 823Q530 786 541 757L245 566Q221 590 200 623L184 647ZM557 690Q558 683 558 669 558 626 539 590.5 520 555 482 531 437 502 388 502 344 502 303 525L557 690ZM446 303Q442 352 462 394.5 482 437 524 464 566 493 613 493 656 493 700 468L446 303ZM756 426Q785 394 801 369L817 344 510 144 493 169Q469 210 460 234L756 426Z";
     readonly "black-diamond-filled": "M194 500L500 92 806 504 500 910Z";
     readonly "blockquote-filled": "M852 349L583 347 583 102 930 104 930 351 792 888 715 888ZM359 349L90 347 90 102 437 105 437 353 299 888 222 888Z";
@@ -1233,7 +1233,7 @@ export declare const ICONS: {
     readonly "back-top-filled": "M461 356L301 528 254 483 500 221 746 483 699 528 539 356 539 980 461 980ZM220 20L780 20 780 92 220 92Z";
     readonly "barrage-questions-filled": "M167 59Q167 41 177 30.5 187 20 206 20L426 20Q444 20 454.5 30.5 465 41 465 59L465 275Q465 293 454.5 303.5 444 314 426 314L206 314Q187 314 177 303.5 167 293 167 275L167 59ZM403 254L403 80 229 80 229 254ZM534 59Q534 41 544.5 30.5 555 20 573 20L794 20Q812 20 822.5 30.5 833 41 833 59L833 275Q833 293 822.5 303.5 812 314 794 314L573 314Q555 314 544.5 303.5 534 293 534 275L534 59ZM768 88L663 187 615 139 582 170 663 251 798 121ZM534 392Q534 374 544 363.5 554 353 573 353L793 353Q811 353 821.5 363.5 832 374 832 392L832 608Q832 626 821.5 636.5 811 647 793 647L573 647Q554 647 544 636.5 534 626 534 608L534 392ZM770 587L770 413 596 413 596 587ZM166 392Q166 374 176.5 363.5 187 353 205 353L426 353Q444 353 454.5 363.5 465 374 465 392L465 608Q465 626 454.5 636.5 444 647 426 647L205 647Q187 647 176.5 636.5 166 626 166 608L166 392ZM400 421L295 520 247 472 214 503 295 584 430 454ZM167 725Q167 707 177 696.5 187 686 206 686L426 686Q444 686 454.5 696.5 465 707 465 725L465 941Q465 959 454.5 969.5 444 980 426 980L206 980Q187 980 177 969.5 167 959 167 941L167 725ZM403 920L403 746 229 746 229 920ZM534 725Q534 707 544.5 696.5 555 686 573 686L794 686Q812 686 822.5 696.5 833 707 833 725L833 941Q833 959 822.5 969.5 812 980 794 980L573 980Q555 980 544.5 969.5 534 959 534 941L534 725ZM768 754L663 853 615 805 582 836 663 917 798 787Z";
     readonly "bg-color-filled": "M420 652Q401 671 376 671 352 671 331 652L116 435Q97 416 97 390 97 365 116 346L273 190 202 119 245 76 316 147 443 20Q462 1 488 1 513 1 532 20L748 235Q767 253 767 280 767 306 748 324L420 652ZM486 67L361 192 433 263 389 307 318 235 194 359 575 407 701 281ZM789 686Q749 686 726 662 703 638 703 604 703 584 712 566 721 548 740 518 774 463 789 429 805 464 837 516 857 547 865.5 565.5 874 584 874 604 874 638 851 662 828 686 789 686ZM103 980Q50 980 50 927L50 822Q50 770 103 770L897 770Q950 770 950 823L950 927Q950 980 897 980L103 980ZM876 940Q897 940 903.5 933 910 926 910 910L910 839Q910 823 903.5 816.5 897 810 876 810L124 810Q103 810 96.5 816.5 90 823 90 839L90 910Q90 926 96.5 933 103 940 124 940L876 940Z";
-    readonly "bg-color-trasparent-filled": "M420 652Q401 671 376 671 352 671 331 652L116 435Q97 416 97 390 97 365 116 346L273 190 202 119 245 76 316 147 443 20Q462 1 488 1 513 1 532 20L748 235Q767 253 767 280 767 306 748 324L420 652ZM486 67L361 192 433 263 389 307 318 235 194 359 575 407 701 281ZM789 686Q749 686 726 662 703 638 703 604 703 584 712 566 721 548 740 518 774 463 789 429 805 464 837 516 857 547 865.5 565.5 874 584 874 604 874 638 851 662 828 686 789 686Z";
+    readonly "bg-color-transparent-filled": "M420 652Q401 671 376 671 352 671 331 652L116 435Q97 416 97 390 97 365 116 346L273 190 202 119 245 76 316 147 443 20Q462 1 488 1 513 1 532 20L748 235Q767 253 767 280 767 306 748 324L420 652ZM486 67L361 192 433 263 389 307 318 235 194 359 575 407 701 281ZM789 686Q749 686 726 662 703 638 703 604 703 584 712 566 721 548 740 518 774 463 789 429 805 464 837 516 857 547 865.5 565.5 874 584 874 604 874 638 851 662 828 686 789 686Z";
     readonly "biology-filled": "M583 550Q619 611 619 678 619 764 559 855L469 997 415 964 456 902 149 702 109 763 55 730 146 588Q191 518 252.5 482 314 446 387 446 406 446 427 449 385 381 385 306 385 221 441 136L533-5 586 29 545 90 853 290 892 228 945 262 854 403Q756 552 614 552 603 552 583 550ZM491 848L507 823Q530 786 541 757L245 566Q221 590 200 623L184 647ZM557 690Q558 683 558 669 558 626 539 590.5 520 555 482 531 437 502 388 502 344 502 303 525L557 690ZM446 303Q442 352 462 394.5 482 437 524 464 566 493 613 493 656 493 700 468L446 303ZM756 426Q785 394 801 369L817 344 510 144 493 169Q469 210 460 234L756 426Z";
     readonly "black-diamond-filled": "M194 500L500 92 806 504 500 910Z";
     readonly "blockquote-filled": "M852 349L583 347 583 102 930 104 930 351 792 888 715 888ZM359 349L90 347 90 102 437 105 437 353 299 888 222 888Z";
@@ -1641,7 +1641,7 @@ export declare const ICONS: {
     readonly "back-top": "M461 356L301 528 254 483 500 221 746 483 699 528 539 356 539 980 461 980ZM220 20L780 20 780 92 220 92Z";
     readonly "barrage-questions": "M167 59Q167 41 177 30.5 187 20 206 20L426 20Q444 20 454.5 30.5 465 41 465 59L465 275Q465 293 454.5 303.5 444 314 426 314L206 314Q187 314 177 303.5 167 293 167 275L167 59ZM403 254L403 80 229 80 229 254ZM534 59Q534 41 544.5 30.5 555 20 573 20L794 20Q812 20 822.5 30.5 833 41 833 59L833 275Q833 293 822.5 303.5 812 314 794 314L573 314Q555 314 544.5 303.5 534 293 534 275L534 59ZM768 88L663 187 615 139 582 170 663 251 798 121ZM534 392Q534 374 544 363.5 554 353 573 353L793 353Q811 353 821.5 363.5 832 374 832 392L832 608Q832 626 821.5 636.5 811 647 793 647L573 647Q554 647 544 636.5 534 626 534 608L534 392ZM770 587L770 413 596 413 596 587ZM166 392Q166 374 176.5 363.5 187 353 205 353L426 353Q444 353 454.5 363.5 465 374 465 392L465 608Q465 626 454.5 636.5 444 647 426 647L205 647Q187 647 176.5 636.5 166 626 166 608L166 392ZM400 421L295 520 247 472 214 503 295 584 430 454ZM167 725Q167 707 177 696.5 187 686 206 686L426 686Q444 686 454.5 696.5 465 707 465 725L465 941Q465 959 454.5 969.5 444 980 426 980L206 980Q187 980 177 969.5 167 959 167 941L167 725ZM403 920L403 746 229 746 229 920ZM534 725Q534 707 544.5 696.5 555 686 573 686L794 686Q812 686 822.5 696.5 833 707 833 725L833 941Q833 959 822.5 969.5 812 980 794 980L573 980Q555 980 544.5 969.5 534 959 534 941L534 725ZM768 754L663 853 615 805 582 836 663 917 798 787Z";
     readonly "bg-color": "M420 652Q401 671 376 671 352 671 331 652L116 435Q97 416 97 390 97 365 116 346L273 190 202 119 245 76 316 147 443 20Q462 1 488 1 513 1 532 20L748 235Q767 253 767 280 767 306 748 324L420 652ZM486 67L361 192 433 263 389 307 318 235 194 359 575 407 701 281ZM789 686Q749 686 726 662 703 638 703 604 703 584 712 566 721 548 740 518 774 463 789 429 805 464 837 516 857 547 865.5 565.5 874 584 874 604 874 638 851 662 828 686 789 686ZM103 980Q50 980 50 927L50 822Q50 770 103 770L897 770Q950 770 950 823L950 927Q950 980 897 980L103 980ZM876 940Q897 940 903.5 933 910 926 910 910L910 839Q910 823 903.5 816.5 897 810 876 810L124 810Q103 810 96.5 816.5 90 823 90 839L90 910Q90 926 96.5 933 103 940 124 940L876 940Z";
-    readonly "bg-color-trasparent": "M420 652Q401 671 376 671 352 671 331 652L116 435Q97 416 97 390 97 365 116 346L273 190 202 119 245 76 316 147 443 20Q462 1 488 1 513 1 532 20L748 235Q767 253 767 280 767 306 748 324L420 652ZM486 67L361 192 433 263 389 307 318 235 194 359 575 407 701 281ZM789 686Q749 686 726 662 703 638 703 604 703 584 712 566 721 548 740 518 774 463 789 429 805 464 837 516 857 547 865.5 565.5 874 584 874 604 874 638 851 662 828 686 789 686Z";
+    readonly "bg-color-transparent": "M420 652Q401 671 376 671 352 671 331 652L116 435Q97 416 97 390 97 365 116 346L273 190 202 119 245 76 316 147 443 20Q462 1 488 1 513 1 532 20L748 235Q767 253 767 280 767 306 748 324L420 652ZM486 67L361 192 433 263 389 307 318 235 194 359 575 407 701 281ZM789 686Q749 686 726 662 703 638 703 604 703 584 712 566 721 548 740 518 774 463 789 429 805 464 837 516 857 547 865.5 565.5 874 584 874 604 874 638 851 662 828 686 789 686Z";
     readonly biology: "M583 550Q619 611 619 678 619 764 559 855L469 997 415 964 456 902 148 702 109 763 55 730 146 588Q191 518 252.5 482 314 446 387 446 406 446 427 449 385 381 385 306 385 221 441 136L533-5 586 29 545 90 853 289 892 228 945 262 854 403Q756 552 614 552 603 552 583 550ZM491 848L507 823Q527 792 541 757L246 567Q223 589 200 623L184 647ZM557 690Q558 683 558 671 558 627 539 591 520 555 482 531 435 502 388 502 345 502 303 524L557 690ZM445 302Q442 352 462 394.5 482 437 524 464 566 493 614 493 657 493 701 468L445 302ZM755 426Q779 402 801 369L817 344 510 144 493 169Q472 200 460 234L755 426Z";
     readonly "black-diamond": "M194 500L500 92 806 504 500 910Z";
     readonly blockquote: "M852 349L583 347 583 102 930 104 930 351 792 888 715 888ZM359 349L90 347 90 102 437 105 437 353 299 888 222 888Z";

package/dist/types/snowflakes/myz/card/z-myz-card/index.d.ts

@@ -1,7 +1,7 @@
 import { ComponentInterface } from "../../../../stencil-public-runtime";
 import { LicenseType } from "../../../../beans/index";
 /**
- * @slot  - generic card slot
+ * @slot - generic card slot
  */
 export declare class ZMyzCardComponent implements ComponentInterface {
     /** faded status */

package/dist/types/snowflakes/myz/card/z-myz-card-info/index.d.ts

@@ -1,7 +1,7 @@
 import { ComponentInterface, EventEmitter } from "../../../../stencil-public-runtime";
 import { DictionaryData } from "../../../../beans";
 /**
- * @slot  - content
+ * @slot - content
  */
 export declare class ZMyzCardInfo implements ComponentInterface {
     /** dictionary info */

package/dist/types/utils/focus-trap-controller.d.ts

@@ -0,0 +1,53 @@
+import { createFocusTrap, type Options as FocusTrapOptions } from "focus-trap";
+import { ReactiveController, ReactiveControllerHost } from "./reactive-controller";
+/**
+ * Focus trap controller configuration plus the options for `focus-trap` library.
+ * @see https://github.com/focus-trap/focus-trap#trap-configuration-options
+ */
+type FocusTrapControllerConfig = {
+    /** Root element of the trap. Defaults to the host element if not provided. */
+    getTrapRoot?: () => HTMLElement;
+    /** List of tabbable elements or custom function to override the default retrieval. */
+    tabbableElements?: HTMLElement[] | (() => HTMLElement[]);
+    /** Function to determine if the trap is active. */
+    isActive: () => boolean;
+} & FocusTrapOptions;
+/**
+ * Reactive controller for focus trapping.
+ *
+ * It creates and syncs a `focus-trap` instance based on host state,
+ * manages wrap-around Tab navigation, and cleans up on disconnect.
+ */
+export declare class FocusTrapController implements ReactiveController {
+    private readonly config;
+    /** Instance of the component using the controller. */
+    private host;
+    /** Root element of the component using the controller (the same provided by `@Element` decorator). */
+    private hostElement;
+    /** Instance of the focus trap. */
+    focusTrap: ReturnType<typeof createFocusTrap> | undefined;
+    constructor(host: ReactiveControllerHost, config: FocusTrapControllerConfig);
+    private get trapRoot();
+    private getTabbableElements;
+    private focusFirstTrapElement;
+    private focusLastTrapElement;
+    /** Create focus trap and activate/deactivate it according to `isActive()`. */
+    sync(): void;
+    /**
+     * Handle manual wrap-around on TAB key when focus is on the first/last tabbable element.
+     * This complements the trap to support nested shadow DOM tabbables reliably.
+     *
+     * @example Manual wrap-around handling in a component:
+     * ```ts
+     * @Listen("keydown", {target: "document"})
+     * handleKeyDown(event: KeyboardEvent): void {
+     *   this.focusTrapController.handleWrapTab(event);
+     * }
+     * ```
+     */
+    handleWrapTab(event: KeyboardEvent): void;
+    /** Deactivate trap and restore focus management state. */
+    deactivate(): void;
+    hostDisconnected(): void;
+}
+export {};

package/dist/types/utils/reactive-controller.d.ts

@@ -0,0 +1,39 @@
+import { ComponentInterface } from "../stencil-public-runtime";
+/**
+ * Contract implemented by composable controllers.
+ * Each method mirrors a host lifecycle hook.
+ * @see Stencil doc on composition pattern https://stenciljs.com/docs/extends#composition
+ */
+export interface ReactiveController {
+    hostConnected?(): any;
+    hostDisconnected?(): any;
+    hostWillLoad?(): Promise<void> | void;
+    hostDidLoad?(): any;
+    hostWillRender?(): Promise<void> | void;
+    hostDidRender?(): any;
+    hostWillUpdate?(): Promise<void> | void;
+    hostDidUpdate?(): any;
+}
+/**
+ * Minimal host implementation to register and invoke controllers across Stencil lifecycle hooks.
+ *
+ * Usage:
+ * - extend this class in a component
+ * - register controllers in the constructor via `addController(...)`
+ * - call `super.*` when overriding lifecycle hooks used by controllers
+ */
+export declare class ReactiveControllerHost implements ComponentInterface {
+    private readonly controllers;
+    /** Register a controller instance for lifecycle delegation. */
+    addController(controller: ReactiveController): void;
+    /** Unregister a controller instance from lifecycle delegation. */
+    removeController(controller: ReactiveController): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentWillRender(): void;
+    componentDidRender(): void;
+    componentWillUpdate(): void;
+    componentDidUpdate(): void;
+}

package/dist/types/utils/storybook-utils.d.ts

@@ -1,5 +1,5 @@
-import { OptionsConfig } from "@storybook/blocks";
-import { Args } from "@storybook/web-components";
+import type { OptionsConfig } from "@storybook/addon-docs/blocks";
+import type { Args } from "storybook/internal/csf";
 type CSSCustomProp = `--${string}`;
 type EnsurePrefix<T extends string, P extends string> = T extends `${P}${string}` ? T : `${P}${T}`;
 export type CSSVarsArguments<T extends string = string> = {
@@ -79,4 +79,9 @@ export declare function getThemeColorTokens(name: string, variant?: string | und
  * ```
  */
 export declare function getColorTokenArgConfig(nullable?: boolean): Args;
+/**
+ * Extract CSS variables from an object.
+ * Returns only the entries with keys starting with `--`.
+ */
+export declare function extractCSSVars(args: Args): CSSVarsArguments;
 export {};

package/dist/types/utils/utils.d.ts

@@ -36,6 +36,11 @@ export declare function isSelectorValid(selector: string): boolean;
  * @param descendant Descendant element
  */
 export declare function containsElement(ancestor: HTMLElement, descendant: Node): boolean;
+/**
+ * Get the currently active element, descending into open shadow roots.
+ * @param root Document or ShadowRoot to start from.
+ */
+export declare function getDeepActiveElement(root?: Document | ShadowRoot): Element | null;
 /** Get the parent of passed element, accounting for shadow DOM.
  * @param element The element whose parent is to be found.
  */
@@ -46,6 +51,11 @@ export declare function getParentElement(element: Element): Element | null;
  * @param container The container to check against, which must be the nearest scrollable ancestor.
  */
 export declare function isElementVisibleInContainer(element: HTMLElement, container: HTMLElement): boolean;
+/**
+ * Get tabbable elements in the passed root element, including descendants inside shadow roots.
+ * Returned list is sorted by light DOM order first and by shadow DOM order inside each host.
+ */
+export declare function getTabbableElements(root: HTMLElement): HTMLElement[];
 /**
  * Find the nearest containing block ancestor of an element.
  * The containing block is determined based on the element's `position` value:
@@ -61,4 +71,6 @@ export declare function isElementVisibleInContainer(element: HTMLElement, contai
 export declare function findContainingBlockAncestor(element: HTMLElement): HTMLElement;
 /** Convert HTML to plain text */
 export declare const getPlainText: (html: string) => string;
+/** Convert string to hex */
+export declare const encodeString: (string: string) => string;
 export {};

package/dist/web-components-library/index.esm.js

@@ -1 +1,2 @@
-import{c as aa}from"./p-CPsEG702.js";export{_ as AccordionVariant,o as AlertType,A as AvatarSize,Y as BookCardDeprecatedVariant,X as BookCardVariant,V as BreadcrumbHomepageVariant,U as BreadcrumbPathStyle,d as ButtonSize,c as ButtonType,B as ButtonVariant,C as CardVariant,Q as CarouselArrowsPosition,R as CarouselProgressMode,a0 as ColorPickerPalette,e as ControlSize,M as CoverHeroContentPosition,J as CoverHeroVariant,p as Device,h as DividerOrientation,D as DividerSize,j as ExpandableListButtonAlign,E as ExpandableListStyle,$ as IconPosition,H as InfoRevealPosition,f as InputStatus,I as InputType,g as KeyboardCode,K as KeyboardKeyCode,k as LabelPosition,L as LicenseType,l as ListDividerType,i as ListSize,m as ListType,b as NavigationTabsKeyboardEvents,N as NavigationTabsOrientation,a as NavigationTabsSize,n as NotificationType,O as OffCanvasVariant,P as PopoverPosition,S as SortDirection,T as ThemeVariant,q as ToastNotification,s as ToastNotificationPosition,r as ToastNotificationTransition,u as TransitionDirection,W as VisibilityCondition,t as ZAriaAlertMode,w as ZChipType,y as ZDatePickerMode,z as ZDatePickerModeValue,F as ZDatePickerPosition,v as ZFileUploadType,G as ZRangePickerMode,x as ZSectionTitleDividerPosition,Z as ZTableRowExpandedType}from"./p-BKCj6NR2.js";export{I as ICONS}from"./p-CjHS9zeM.js";import"./p-Q-tWjk7P.js";const ia={colorFromId:aa};export{ia as Utils}
+import{c as aa}from"./p-C8pbzcmM.js";export{$ as AccordionVariant,o as AlertType,A as AvatarSize,_ as BookCardDeprecatedVariant,Y as BookCardVariant,W as BreadcrumbHomepageVariant,V as BreadcrumbPathStyle,d as ButtonSize,c as ButtonType,B as ButtonVariant,C as CardVariant,R as CarouselArrowsPosition,U as CarouselProgressMode,a1 as ColorPickerPalette,e as ControlSize,Q as CoverHeroContentPosition,M as CoverHeroVariant,p as Device,h as DividerOrientation,D as DividerSize,j as ExpandableListButtonAlign,E as ExpandableListStyle,a0 as IconPosition,J as InfoRevealPosition,f as InputStatus,I as InputType,g as KeyboardCode,K as KeyboardKeyCode,k as LabelPosition,L as LicenseType,l as ListDividerType,i as ListSize,m as ListType,b as NavigationTabsKeyboardEvents,N as NavigationTabsOrientation,a as NavigationTabsSize,n as NotificationType,v as OffCanvasVariant,O as Orientation,P as PopoverPosition,S as SortDirection,T as ThemeVariant,q as ToastNotification,s as ToastNotificationPosition,r as ToastNotificationTransition,u as TransitionDirection,X as VisibilityCondition,t as ZAriaAlertMode,x as ZChipType,z as ZDatePickerMode,F as ZDatePickerModeValue,G as ZDatePickerPosition,w as ZFileUploadType,H as ZRangePickerMode,y as ZSectionTitleDividerPosition,Z as ZTableRowExpandedType}from"./p-B3nR3-Jw.js";export{I as ICONS}from"./p-AwzX9V8L.js";import"./p-Q-tWjk7P.js";const ia={colorFromId:aa};export{ia as Utils};
+//# sourceMappingURL=index.esm.js.map

package/dist/web-components-library/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["src/index.ts"],"sourcesContent":["import {colorFromId} from \"./utils/utils\";\n\nconst UTILS = {\n  colorFromId,\n};\n\nexport * from \"./beans\";\nexport * from \"./components\";\nexport {ICONS, IconName} from \"./constants/iconset\";\nexport {UTILS as Utils};\n"],"names":[],"mappings":";;;;;AAEA,MAAM,KAAK,GAAG;IACZ,WAAW;;;;;"}

package/dist/web-components-library/p-01d2d4e2.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as o,H as a,d as r}from"./p-BcDWN4F1.js";import{P as l,e as s,B as c}from"./p-B3nR3-Jw.js";const i=()=>`:host{position:relative;display:flex;max-width:100%;align-items:center;background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host,*{box-sizing:border-box}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([menu-open]){z-index:2}.cell--content{display:flex;width:100%;height:100%;align-items:center}:host([show-menu]) .cell--content{column-gap:var(--space-unit)}.cell--menu-container{margin-left:auto}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{z-index:1;opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@media (min-width: 768px) and (hover: hover){:host([show-menu="hover"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu="hover"]:hover) .cell--menu-container{z-index:1;opacity:1;pointer-events:all}}`;const n=()=>`z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover>tbody>tr:hover>td,table.z-table-hover>tfoot>tr:hover>td{position:relative;background-color:var(--color-surface02)}table.z-table-hover>tbody>tr:hover>td::after,table.z-table-hover>tfoot>tr:hover>td::after{position:absolute;z-index:1;top:0;right:0;bottom:0;left:-1px;box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);content:""}table.z-table-hover>tbody>tr:hover>td:first-child::after,table.z-table-hover>thead>tr:hover>th:first-child::after,table.z-table-hover>tfoot>tr:hover>td:first-child::after{left:0}`;const b=class{constructor(o){e(this,o);this.colspanChange=t(this,"colspanChange",6);this.sticky=false;this.showMenu=null;this.popoverPosition=l.AUTO;this.isMenuOpen=false}updateColspan(){if(this.colspan){this.host.style.gridColumn=`span ${this.colspan}`}else{this.host.style.removeProperty("grid-column")}this.colspanChange.emit(this.colspan||1)}onMenuButtonClick(e){e.stopPropagation();this.popoverEl.open=!this.popoverEl.open}componentWillLoad(){this.updateColspan()}render(){return o(a,{key:"2c3552c5c30611595ac619e6ca3a1e93b3d37366",role:"cell","menu-open":this.isMenuOpen},o("div",{key:"d13012a1f16aaa6ab44b4eea1dafa63cf1ebbd3a",class:"cell--content"},o("slot",{key:"b4571116c24bb99dc6ec76486fc948da89a5393b"}),this.showMenu&&o("div",{key:"6ebd3bfc1fcf8dce3afb91931309c4644efc2e49",class:"cell--menu-container prevent-expand"},o("z-button",{key:"3d01c8956127276eb765c3a9f4aabb4ed710b404",variant:c.TERTIARY,icon:"contextual-menu",size:s.X_SMALL,ref:e=>this.menuTrigger=e,onClick:this.onMenuButtonClick.bind(this)}),o("z-popover",{key:"d04c06677e2e8efb5d80bfbfd7cc91c9cbff7231",class:"cell-popover",ref:e=>this.popoverEl=e,bindTo:this.menuTrigger,onOpenChange:e=>this.isMenuOpen=e.detail.open,position:this.popoverPosition},o("slot",{key:"c389c6fdf131aeef86eae687df9c2f7fb6fbc3be",name:"contextual-menu"})))))}get host(){return r(this)}static get watchers(){return{colspan:[{updateColspan:0}]}}};b.style=i()+n();export{b as z_td};
+//# sourceMappingURL=p-01d2d4e2.entry.js.map

package/dist/web-components-library/p-01d2d4e2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["zTableCellsCss","stylesCss","ZTd","constructor","hostRef","this","sticky","showMenu","popoverPosition","PopoverPosition","AUTO","isMenuOpen","updateColspan","colspan","host","style","gridColumn","removeProperty","colspanChange","emit","onMenuButtonClick","ev","stopPropagation","popoverEl","open","componentWillLoad","render","h","Host","key","role","class","variant","ButtonVariant","TERTIARY","icon","size","ControlSize","X_SMALL","ref","el","menuTrigger","onClick","bind","bindTo","onOpenChange","event","detail","position","name"],"sources":["src/components/table/cells/z-table-cells.css?tag=z-td&encapsulation=shadow","src/components/css-components/z-table/styles.css?tag=z-td&encapsulation=shadow","src/components/table/cells/z-td/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  max-width: 100%;\n  align-items: center;\n  background-color: var(--color-surface01);\n  gap: calc(var(--space-unit) * 2) var(--space-unit);\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  box-shadow: 8px 0 16px -8px var(--shadow-color-base);\n}\n\n:host([menu-open]) {\n  z-index: 2;\n}\n\n.cell--content {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n}\n\n:host([show-menu]) .cell--content {\n  column-gap: var(--space-unit);\n}\n\n.cell--menu-container {\n  margin-left: auto;\n}\n\n:host(:not([show-menu])) .cell--menu-container {\n  opacity: 0;\n  pointer-events: none;\n}\n\n:host(:is([show-menu], [menu-open])) .cell--menu-container,\n:host([show-menu]) .cell--menu-container:focus-within {\n  z-index: 1;\n  opacity: 1;\n  pointer-events: all;\n}\n\n:host .cell-popover {\n  z-index: 100;\n}\n\n@media (min-width: 768px) and (hover: hover) {\n  :host([show-menu=\"hover\"]) .cell--menu-container {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  :host([show-menu=\"hover\"]:hover) .cell--menu-container {\n    z-index: 1;\n    opacity: 1;\n    pointer-events: all;\n  }\n}\n","z-table,\ntable.z-table {\n  background-color: var(--color-surface01);\n\n  --z-table--cells-padding: calc(var(--space-unit) * 2);\n}\n\ntable.z-table {\n  border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n  background-color: var(--color-background);\n\n  --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n  border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n  text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n  border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n  --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n  position: relative;\n  background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: -1px;\n  box-shadow:\n    inset 0 var(--border-size-small) 0 var(--color-surface04),\n    inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n  content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n  left: 0;\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTd component.\n * @slot - ZTd content.\n */\n@Component({\n  tag: \"z-td\",\n  styleUrls: [\"../z-table-cells.css\", \"../../../css-components/z-table/styles.css\"],\n  shadow: true,\n})\nexport class ZTd implements ComponentInterface {\n  @Element() host: HTMLZTdElement;\n\n  /**\n   * Number of columns that the cell should span.\n   */\n  @Prop()\n  colspan: number;\n\n  /**\n   * Whether the cell should stick.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * Enables the contextual menu.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the menu button.\n   */\n  @Prop({reflect: true})\n  showMenu: VisibilityCondition = null;\n\n  /**\n   * Set the popover position, the default is \"auto\".\n   */\n  @Prop()\n  popoverPosition?: PopoverPosition = PopoverPosition.AUTO;\n\n  /**\n   * Store the open state of the menu.\n   */\n  @State()\n  isMenuOpen = false;\n\n  private menuTrigger: HTMLZButtonElement;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  /**\n   * Emitted when the value of the `colspan` changes.\n   */\n  @Event({\n    bubbles: true,\n    cancelable: false,\n  })\n  colspanChange: EventEmitter<number>;\n\n  @Watch(\"colspan\")\n  protected updateColspan(): void {\n    if (this.colspan) {\n      this.host.style.gridColumn = `span ${this.colspan}`;\n    } else {\n      this.host.style.removeProperty(\"grid-column\");\n    }\n\n    this.colspanChange.emit(this.colspan || 1);\n  }\n\n  private onMenuButtonClick(ev: MouseEvent): void {\n    ev.stopPropagation();\n    this.popoverEl.open = !this.popoverEl.open;\n  }\n\n  componentWillLoad(): void {\n    this.updateColspan();\n  }\n\n  render(): HTMLZTdElement {\n    return (\n      <Host\n        role=\"cell\"\n        menu-open={this.isMenuOpen}\n      >\n        <div class=\"cell--content\">\n          <slot></slot>\n          {this.showMenu && (\n            <div class=\"cell--menu-container prevent-expand\">\n              <z-button\n                variant={ButtonVariant.TERTIARY}\n                icon=\"contextual-menu\"\n                size={ControlSize.X_SMALL}\n                ref={(el) => (this.menuTrigger = el as HTMLZButtonElement)}\n                onClick={this.onMenuButtonClick.bind(this)}\n              />\n              <z-popover\n                class=\"cell-popover\"\n                ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n                bindTo={this.menuTrigger as HTMLElement}\n                onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n                position={this.popoverPosition}\n              >\n                <slot name=\"contextual-menu\"></slot>\n              </z-popover>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kHAAA,MAAMA,EAAiB,IAAM,q9BCA7B,MAAMC,EAAY,IAAM,6sD,MCYXC,EAAG,MALhB,WAAAC,CAAAC,G,uDAkBEC,KAAAC,OAAS,MAQTD,KAAAE,SAAgC,KAMhCF,KAAAG,gBAAoCC,EAAgBC,KAMpDL,KAAAM,WAAa,KAmEd,CAnDW,aAAAC,GACR,GAAIP,KAAKQ,QAAS,CAChBR,KAAKS,KAAKC,MAAMC,WAAa,QAAQX,KAAKQ,S,KACrC,CACLR,KAAKS,KAAKC,MAAME,eAAe,c,CAGjCZ,KAAKa,cAAcC,KAAKd,KAAKQ,SAAW,E,CAGlC,iBAAAO,CAAkBC,GACxBA,EAAGC,kBACHjB,KAAKkB,UAAUC,MAAQnB,KAAKkB,UAAUC,I,CAGxC,iBAAAC,GACEpB,KAAKO,e,CAGP,MAAAc,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,OAAM,YACAzB,KAAKM,YAEhBgB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,iBACTJ,EAAA,QAAAE,IAAA,6CACCxB,KAAKE,UACJoB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,uCACTJ,EAAA,YAAAE,IAAA,2CACEG,QAASC,EAAcC,SACvBC,KAAK,kBACLC,KAAMC,EAAYC,QAClBC,IAAMC,GAAQnC,KAAKoC,YAAcD,EACjCE,QAASrC,KAAKe,kBAAkBuB,KAAKtC,QAEvCsB,EAAA,aAAAE,IAAA,2CACEE,MAAM,eACNQ,IAAMC,GAAQnC,KAAKkB,UAAYiB,EAC/BI,OAAQvC,KAAKoC,YACbI,aAAeC,GAAWzC,KAAKM,WAAamC,EAAMC,OAAOvB,KACzDwB,SAAU3C,KAAKG,iBAEfmB,EAAA,QAAAE,IAAA,2CAAMoB,KAAK,uB","ignoreList":[]}

package/dist/web-components-library/p-02a5c216.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as r}from"./p-BcDWN4F1.js";import{f as o}from"./p-B3nR3-Jw.js";const a=()=>`input:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}:host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}.digits-container{display:flex;justify-content:flex-start}input{width:calc(var(--space-unit) * 5);height:72px;box-sizing:border-box;padding:0;caret-color:transparent;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:32px;font-weight:300;text-align:center}input.error{border:1px solid;border-color:var(--color-default-error);background-color:var(--color-inverse-error);border-radius:4px}input:not(:last-of-type){margin-right:var(--space-unit)}@media only screen and (min-width: 768px){input:not(:last-of-type){margin-right:calc(var(--space-unit) * 2)}}@media only screen and (min-width: 1025px){input{width:calc(var(--space-unit) * 6)}}`;const e=class{constructor(r){t(this,r);this.otpChange=i(this,"otpChange",7);this.inputNum=6}emitInputChange(t){this.otpChange.emit({value:t})}componentWillLoad(){this.otp=[...Array(this.inputNum)];this.otpRef=[...Array(this.inputNum)]}render(){return r("div",{key:"82943f654f3601a203981bc476a5e58378604331",class:"otp-container"},r("div",{key:"0e069bb23f23ff9e97bb094b3ccce57d5adeb1b1",class:"digits-container"},this.otp.map(((t,i)=>r("input",{class:this.status==o.ERROR?"error":null,onKeyDown:t=>{if(t.keyCode>47){this.otpRef[i].value=""}},onKeyUp:t=>{if(t.keyCode>47){if(i<this.inputNum-1){this.otpRef[i+1].focus()}}},onInput:t=>{this.otp[i]=t.target.value;this.emitInputChange(this.otp.join(""))},type:"text",minlength:"1",maxlength:"1",autoComplete:"off",ref:t=>this.otpRef[i]=t})))),r("z-input-message",{key:"752f2b63c997e9b6ff2e239537e15b1a1a2719c7",message:this.message,status:this.status}))}};e.style=a();export{e as z_otp};
+//# sourceMappingURL=p-02a5c216.entry.js.map

package/dist/web-components-library/p-02a5c216.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZOtp","constructor","hostRef","this","inputNum","emitInputChange","value","otpChange","emit","componentWillLoad","otp","Array","otpRef","render","h","key","class","map","_val","i","status","InputStatus","ERROR","onKeyDown","e","keyCode","onKeyUp","focus","onInput","target","join","type","minlength","maxlength","autoComplete","ref","el","message"],"sources":["src/snowflakes/myz/z-otp/styles.css?tag=z-otp&encapsulation=shadow","src/snowflakes/myz/z-otp/index.tsx"],"sourcesContent":["input:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n:host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.digits-container {\n  display: flex;\n  justify-content: flex-start;\n}\n\ninput {\n  width: calc(var(--space-unit) * 5);\n  height: 72px;\n  box-sizing: border-box;\n  padding: 0;\n  caret-color: transparent;\n  color: var(--color-surface05);\n  font-family: var(--font-family-sans);\n  font-size: 32px;\n  font-weight: 300;\n  text-align: center;\n}\n\ninput.error {\n  border: 1px solid;\n  border-color: var(--color-default-error);\n  background-color: var(--color-inverse-error);\n  border-radius: 4px;\n}\n\ninput:not(:last-of-type) {\n  margin-right: var(--space-unit);\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  input:not(:last-of-type) {\n    margin-right: calc(var(--space-unit) * 2);\n  }\n}\n\n/* Desktop breakpoint */\n@media only screen and (min-width: 1025px) {\n  input {\n    width: calc(var(--space-unit) * 6);\n  }\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {InputStatus} from \"../../../beans\";\n\n@Component({\n  tag: \"z-otp\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZOtp implements ComponentInterface {\n  /** Input number */\n  @Prop()\n  inputNum?: number = 6;\n\n  /** Input status */\n  @Prop()\n  status?: InputStatus;\n\n  /** Input message */\n  @Prop()\n  message?: string;\n\n  private otp: string[];\n\n  private otpRef: HTMLInputElement[];\n\n  /** Otp change event */\n  @Event()\n  otpChange: EventEmitter;\n\n  private emitInputChange(value: string): void {\n    this.otpChange.emit({value});\n  }\n\n  componentWillLoad(): void {\n    this.otp = [...Array(this.inputNum)];\n    this.otpRef = [...Array(this.inputNum)];\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class=\"otp-container\">\n        <div class=\"digits-container\">\n          {this.otp.map((_val, i) => (\n            <input\n              class={this.status == InputStatus.ERROR ? \"error\" : null}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (e.keyCode > 47) {\n                  this.otpRef[i].value = \"\";\n                }\n              }}\n              onKeyUp={(e: KeyboardEvent) => {\n                if (e.keyCode > 47) {\n                  if (i < this.inputNum - 1) {\n                    this.otpRef[i + 1].focus();\n                  }\n                }\n              }}\n              onInput={(e: InputEvent) => {\n                this.otp[i] = (e.target as HTMLInputElement).value;\n                this.emitInputChange(this.otp.join(\"\"));\n              }}\n              type=\"text\"\n              minlength=\"1\"\n              maxlength=\"1\"\n              autoComplete=\"off\"\n              ref={(el) => (this.otpRef[i] = el)}\n            />\n          ))}\n        </div>\n        <z-input-message\n          message={this.message}\n          status={this.status}\n        ></z-input-message>\n      </div>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAY,IAAM,uyB,MCQXC,EAAI,MALjB,WAAAC,CAAAC,G,+CAQEC,KAAAC,SAAoB,CAiErB,CA/CS,eAAAC,CAAgBC,GACtBH,KAAKI,UAAUC,KAAK,CAACF,S,CAGvB,iBAAAG,GACEN,KAAKO,IAAM,IAAIC,MAAMR,KAAKC,WAC1BD,KAAKS,OAAS,IAAID,MAAMR,KAAKC,U,CAG/B,MAAAS,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iBACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACRb,KAAKO,IAAIO,KAAI,CAACC,EAAMC,IACnBL,EAAA,SACEE,MAAOb,KAAKiB,QAAUC,EAAYC,MAAQ,QAAU,KACpDC,UAAYC,IACV,GAAIA,EAAEC,QAAU,GAAI,CAClBtB,KAAKS,OAAOO,GAAGb,MAAQ,E,GAG3BoB,QAAUF,IACR,GAAIA,EAAEC,QAAU,GAAI,CAClB,GAAIN,EAAIhB,KAAKC,SAAW,EAAG,CACzBD,KAAKS,OAAOO,EAAI,GAAGQ,O,IAIzBC,QAAUJ,IACRrB,KAAKO,IAAIS,GAAMK,EAAEK,OAA4BvB,MAC7CH,KAAKE,gBAAgBF,KAAKO,IAAIoB,KAAK,IAAI,EAEzCC,KAAK,OACLC,UAAU,IACVC,UAAU,IACVC,aAAa,MACbC,IAAMC,GAAQjC,KAAKS,OAAOO,GAAKiB,OAIrCtB,EAAA,mBAAAC,IAAA,2CACEsB,QAASlC,KAAKkC,QACdjB,OAAQjB,KAAKiB,S","ignoreList":[]}

package/dist/web-components-library/p-0673b282.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as o,H as i,d as a}from"./p-BcDWN4F1.js";const s=()=>`:host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host(:is([active],[open])) .label,.label:hover{border-color:var(--color-primary01)}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}.label{display:flex;width:100%;align-items:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);border:0;border-bottom:var(--border-size-small) solid var(--color-surface05);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / "";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items>::slotted([slot="item"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-2);line-height:1.4;outline:none}.items>::slotted([slot="item"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-primary01)}.items>::slotted([slot="item"]:hover),.items>::slotted([slot="item"]:focus:focus-visible),.items>::slotted([slot="item"][active]){color:var(--color-primary01);font-weight:var(--font-bd)}`;const l=class{constructor(o){t(this,o);this.opened=e(this,"opened",7);this.closed=e(this,"closed",7)}toggle(){if(!this.hasContent){return}this.open=!this.open;if(this.open){this.opened.emit()}else{this.closed.emit()}}handleClick(t){if(!this.open||this.hostElement.contains(t.target)){return}this.open=false;this.closed.emit()}checkContent(){this.hasContent=this.hostElement.querySelectorAll('[slot="item"]').length>0}onLabelSlotChange(t){const e=t.target.assignedElements()[0];e.dataset.text=(e===null||e===void 0?void 0:e.innerText)||null}componentWillLoad(){this.checkContent()}render(){return o(i,{key:"a65fd5af1f2b3b6c9d21c30336b806395624af59",role:"menu",open:this.open},o("button",{key:"88460e785ca428d4a40f4dc9bdd56194a2b64d3e",class:"label","aria-pressed":this.open?"true":"false",onClick:this.toggle.bind(this)},o("slot",{key:"b0198e42f9819b2e9c622d4672510d7a9584a1b1",onSlotchange:this.onLabelSlotChange.bind(this)}),this.hasContent&&o("z-icon",{key:"6b6f41288e53ef83b6817eda49e1a77135552345",name:this.open?"chevron-up":"chevron-down"})),this.open&&o("div",{key:"7721c370a48044d60749f366a718ca266d9afc73",class:"items"},o("slot",{key:"1738da8320d0931abaf8a7dd854456e28bba9781",name:"item",onSlotchange:this.checkContent.bind(this)})))}get hostElement(){return a(this)}};l.style=s();export{l as z_menu_section_deprecated};
+//# sourceMappingURL=p-0673b282.entry.js.map

package/dist/web-components-library/p-0673b282.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZMenuSectionDeprecated","toggle","this","hasContent","open","opened","emit","closed","handleClick","ev","hostElement","contains","target","checkContent","querySelectorAll","length","onLabelSlotChange","labelElement","assignedElements","dataset","text","innerText","componentWillLoad","render","h","Host","key","role","class","onClick","bind","onSlotchange","name"],"sources":["src/components/deprecated/z-menu-section-deprecated/styles.css?tag=z-menu-section-deprecated&encapsulation=shadow","src/components/deprecated/z-menu-section-deprecated/index.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 0;\n  font-family: var(--font-family-sans);\n}\n\n:host,\n::slotted(*),\n* {\n  box-sizing: border-box;\n}\n\n::slotted(a) {\n  text-decoration: none;\n}\n\n::slotted(*) {\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host(:is([active], [open])) .label,\n.label:hover {\n  border-color: var(--color-primary01);\n}\n\n:host(:is([active], [open])) .label ::slotted(*),\n.label:focus:focus-visible ::slotted(*),\n.label:hover ::slotted(*) {\n  font-weight: var(--font-bd);\n}\n\n.label {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);\n  border: 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface05);\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  text-align: left;\n}\n\n::slotted([data-text]) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n/* Trick to prevent layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text])::after {\n  overflow: hidden;\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\n  pointer-events: none;\n  user-select: none;\n  visibility: hidden;\n}\n\n@media speech {\n  ::slotted([data-text])::after {\n    display: none;\n  }\n}\n\n.label ::slotted(*) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.25;\n}\n\n.label:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.label z-icon {\n  margin-left: calc(var(--space-unit) * 4);\n  fill: var(--color-default-icon);\n}\n\n.items {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  padding: calc(var(--space-unit) / 2);\n  padding-bottom: calc(var(--space-unit) * 1.5);\n}\n\n.items > ::slotted([slot=\"item\"]) {\n  display: inline-flex;\n  padding: calc(var(--space-unit) / 2);\n  margin: 0;\n  font-size: var(--font-size-2);\n  line-height: 1.4;\n  outline: none;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-primary01);\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"][active]) {\n  color: var(--color-primary01);\n  font-weight: var(--font-bd);\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Host, Listen, Prop, State, h} from \"@stencil/core\";\n\n/**\n * A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.\n */\n@Component({\n  tag: \"z-menu-section-deprecated\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenuSectionDeprecated implements ComponentInterface {\n  @Element() hostElement: HTMLZMenuSectionDeprecatedElement;\n\n  /** Active state */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  @State()\n  open: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  /** The section has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The section has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n    if (this.open) {\n      this.opened.emit();\n    } else {\n      this.closed.emit();\n    }\n  }\n\n  /** Close the list when a click is performed outside of this Element. */\n  @Listen(\"click\", {target: \"document\"})\n  handleClick(ev: MouseEvent): void {\n    if (!this.open || this.hostElement.contains(ev.target as Node)) {\n      return;\n    }\n\n    this.open = false;\n    this.closed.emit();\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasContent = this.hostElement.querySelectorAll('[slot=\"item\"]').length > 0;\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.innerText || null;\n  }\n\n  componentWillLoad(): void {\n    this.checkContent();\n  }\n\n  render(): HTMLZMenuSectionElement {\n    return (\n      <Host\n        role=\"menu\"\n        open={this.open}\n      >\n        <button\n          class=\"label\"\n          aria-pressed={this.open ? \"true\" : \"false\"}\n          onClick={this.toggle.bind(this)}\n        >\n          <slot onSlotchange={this.onLabelSlotChange.bind(this)}></slot>\n          {this.hasContent && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n        </button>\n        {this.open && (\n          <div class=\"items\">\n            <slot\n              name=\"item\"\n              onSlotchange={this.checkContent.bind(this)}\n            ></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAY,IAAM,67D,MCYXC,EAAsB,M,uFAqBzB,MAAAC,GACN,IAAKC,KAAKC,WAAY,CACpB,M,CAGFD,KAAKE,MAAQF,KAAKE,KAClB,GAAIF,KAAKE,KAAM,CACbF,KAAKG,OAAOC,M,KACP,CACLJ,KAAKK,OAAOD,M,EAMhB,WAAAE,CAAYC,GACV,IAAKP,KAAKE,MAAQF,KAAKQ,YAAYC,SAASF,EAAGG,QAAiB,CAC9D,M,CAGFV,KAAKE,KAAO,MACZF,KAAKK,OAAOD,M,CAMN,YAAAO,GACNX,KAAKC,WAAaD,KAAKQ,YAAYI,iBAAiB,iBAAiBC,OAAS,C,CAOxE,iBAAAC,CAAkBP,GACxB,MAAMQ,EAAgBR,EAAGG,OAA2BM,mBAAmB,GACvED,EAAaE,QAAQC,MAAOH,IAAY,MAAZA,SAAY,SAAZA,EAAcI,YAAa,I,CAGzD,iBAAAC,GACEpB,KAAKW,c,CAGP,MAAAU,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,OACLvB,KAAMF,KAAKE,MAEXoB,EAAA,UAAAE,IAAA,2CACEE,MAAM,QAAO,eACC1B,KAAKE,KAAO,OAAS,QACnCyB,QAAS3B,KAAKD,OAAO6B,KAAK5B,OAE1BsB,EAAA,QAAAE,IAAA,2CAAMK,aAAc7B,KAAKc,kBAAkBc,KAAK5B,QAC/CA,KAAKC,YAAcqB,EAAA,UAAAE,IAAA,2CAAQM,KAAM9B,KAAKE,KAAO,aAAe,kBAE9DF,KAAKE,MACJoB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,SACTJ,EAAA,QAAAE,IAAA,2CACEM,KAAK,OACLD,aAAc7B,KAAKW,aAAaiB,KAAK5B,S","ignoreList":[]}

package/dist/web-components-library/p-06aba4ff.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as t,h as i}from"./p-BcDWN4F1.js";const a=()=>`:host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{display:flex;width:inherit;padding:calc(var(--space-unit) * 2);background:var(--color-primary03);border-radius:var(--border-radius)}:host>div>slot{color:var(--color-default-text);font-size:14px}:host>div>z-icon{margin-left:calc(var(--space-unit) * 2);cursor:pointer;fill:var(--color-primary01)}`;const r=class{constructor(i){o(this,i);this.infoBoxClose=t(this,"infoBoxClose",7);this.isclosable=true}emitInfoBoxClose(){this.infoBoxClose.emit({boxid:this.boxid})}render(){return i("div",{key:"c3062d082fff5558ebcc44b6c15feaa9d4fdf9f9",id:this.boxid},i("slot",{key:"d4d4b0bdb644a777c22489afa52c990748bf1da7",name:"content"}),this.isclosable&&i("z-icon",{key:"4b02226c9a11e800ad1ac956471683f4546d39c3",name:"multiply","data-action":"infoBoxClose",onClick:()=>this.emitInfoBoxClose()}))}};r.style=a();export{r as z_info_box};
+//# sourceMappingURL=p-06aba4ff.entry.js.map

package/dist/web-components-library/p-06aba4ff.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZInfoBox","constructor","hostRef","this","isclosable","emitInfoBoxClose","infoBoxClose","emit","boxid","render","h","key","id","name","onClick"],"sources":["src/components/z-info-box/styles.css?tag=z-info-box&encapsulation=shadow","src/components/z-info-box/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > div {\n  display: flex;\n  width: inherit;\n  padding: calc(var(--space-unit) * 2);\n  background: var(--color-primary03);\n  border-radius: var(--border-radius);\n}\n\n:host > div > slot {\n  color: var(--color-default-text);\n  font-size: 14px;\n}\n\n:host > div > z-icon {\n  margin-left: calc(var(--space-unit) * 2);\n  cursor: pointer;\n  fill: var(--color-primary01);\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Prop, h} from \"@stencil/core\";\n\n/**\n * @slot content - set the info box content\n */\n@Component({\n  tag: \"z-info-box\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInfoBox implements ComponentInterface {\n  /** info box unique id */\n  @Prop()\n  boxid: string;\n\n  /** render close icon flag */\n  @Prop()\n  isclosable = true;\n\n  /** emitted on close icon click */\n  @Event()\n  infoBoxClose: EventEmitter;\n\n  private emitInfoBoxClose(): void {\n    this.infoBoxClose.emit({boxid: this.boxid});\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div id={this.boxid}>\n        <slot name=\"content\" />\n        {this.isclosable && (\n          <z-icon\n            name=\"multiply\"\n            data-action=\"infoBoxClose\"\n            onClick={() => this.emitInfoBoxClose()}\n          />\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,IAAM,wX,MCUXC,EAAQ,MALrB,WAAAC,CAAAC,G,qDAYEC,KAAAC,WAAa,IAwBd,CAlBS,gBAAAC,GACNF,KAAKG,aAAaC,KAAK,CAACC,MAAOL,KAAKK,O,CAGtC,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,GAAIT,KAAKK,OACZE,EAAA,QAAAC,IAAA,2CAAME,KAAK,YACVV,KAAKC,YACJM,EAAA,UAAAC,IAAA,2CACEE,KAAK,WAAU,cACH,eACZC,QAAS,IAAMX,KAAKE,qB","ignoreList":[]}

package/dist/web-components-library/p-076d802a.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as i,H as t,d as o}from"./p-BcDWN4F1.js";import{J as a,e as r}from"./p-B3nR3-Jw.js";const n=()=>`:host{--z-info-reveal-panel-width:384px;--trigger-size:44px;position:relative}:host *{box-sizing:border-box}button{--trigger-icon-size:calc(var(--trigger-size) / 2);display:flex;align-items:center;justify-content:center;padding:0;border:none;background-color:transparent;cursor:pointer;font-family:inherit;letter-spacing:inherit}button:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-info-reveal-trigger{min-width:var(--trigger-size);height:var(--trigger-size);padding:calc((var(--trigger-size) - var(--trigger-icon-size)) / 2);background-color:var(--color-surface05);border-radius:var(--border-radius);color:var(--color-text-inverse);column-gap:var(--space-unit);font-weight:var(--font-sb);line-height:1rem}:host([size="big"]) .z-info-reveal-trigger{font-size:var(--font-size-2)}:host([size="small"]) .z-info-reveal-trigger{--trigger-size:36px;font-size:var(--font-size-2)}:host([size="x-small"]) .z-info-reveal-trigger{--trigger-size:32px;padding:var(--space-unit);font-size:var(--font-size-1)}:host>.z-info-reveal-trigger z-icon{--z-icon-width:var(--trigger-icon-size);--z-icon-height:var(--trigger-icon-size);display:flex;fill:var(--color-inverse-icon)}:host([size="small"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:var(--trigger-icon-size-small, 18px)}:host([size="x-small"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:var(--trigger-icon-size-x-small, 16px)}.z-info-reveal-panel{position:absolute;z-index:19;display:flex;width:var(--z-info-reveal-panel-width);height:fit-content;align-items:flex-start;padding:calc(var(--space-unit) * 1.5);background-color:var(--color-surface05);border-radius:var(--border-radius);box-shadow:var(--shadow-4);color:var(--color-text-inverse);column-gap:var(--space-unit)}.z-info-reveal-panel[hidden]{display:none}:host([position="top_left"]) .z-info-reveal-panel,:host([position="top_right"]) .z-info-reveal-panel{top:0}:host([position="bottom_left"]) .z-info-reveal-panel,:host([position="bottom_right"]) .z-info-reveal-panel{bottom:0}:host([position="top_right"]) .z-info-reveal-panel,:host([position="bottom_right"]) .z-info-reveal-panel{right:0}:host([position="top_left"]) .z-info-reveal-panel,:host([position="bottom_left"]) .z-info-reveal-panel{left:0}.z-info-reveal-panel .z-info-reveal-close{margin-left:auto}.z-info-reveal-panel z-icon{fill:var(--color-inverse-icon)}@media (max-width: 767px){.z-info-reveal-panel{top:auto !important;bottom:auto !important;width:calc(var(--z-info-reveal-panel-width) - (var(--grid-margin) * 4)) !important;margin-top:calc(var(--trigger-size) * -1)}}`;const s=class{constructor(i){e(this,i);this.icon="informationsource";this.position=a.BOTTOM_RIGHT;this.ariaLabel="Apri pannello informazioni";this.size=r.BIG;this.open=false}adjustPanelPosition(){if(!this.open||!this.panel){return}const e=this.host.getBoundingClientRect();const i=parseInt(getComputedStyle(document.documentElement).getPropertyValue("--grid-margin"),10);const t=document.documentElement.offsetWidth;const o=Math.round((this.position.includes("left")?t-e.left:e.right)-i);this.panel.style.maxWidth=`${o}px`}togglePanel(){this.open=!this.open}closePanel(){this.open=false}handleEscapeKey(e){if(e.key==="Escape"&&this.open){this.closePanel()}}render(){return i(t,{key:"f9bc69d9bdbc9b2e30687f54877b241b51df3e45",open:this.open},i("button",{key:"f0dc5ceaf6f24d5597699b3158074403bac8f641",class:"z-info-reveal-trigger",type:"button",onClick:this.togglePanel.bind(this),"aria-label":!this.label?this.ariaLabel:undefined,"aria-expanded":this.open?"true":"false","aria-controls":"z-info-reveal-panel"},this.icon&&i("z-icon",{key:"5cddcacfd8d9e5f3dc8a1c171aa50621d6e2b044",name:this.icon}),this.label&&i("span",{key:"5417e101306098a399a9f8e6a39d1637be4f8901",class:"z-info-reveal-label"},this.label)),i("div",{key:"bd57a9686560c17c5d670a6fa87396a509ffb50a",class:"z-info-reveal-panel",id:"z-info-reveal-panel",ref:e=>this.panel=e,hidden:!this.open},i("slot",{key:"bd5fd2a1cf9c2a95fbb9ea966a0f09ec1940c9f9"}),i("button",{key:"73a9178e3ea240abad5d91f2fd82879313d2df24",class:"z-info-reveal-close",type:"button",onClick:this.closePanel.bind(this),"aria-label":"Chiudi pannello informazioni"},i("z-icon",{key:"de404809d5ea1fd51b36abc74518448c7502927e",name:"multiply"}))))}get host(){return o(this)}static get watchers(){return{position:[{adjustPanelPosition:0}],open:[{adjustPanelPosition:0}]}}};s.style=n();export{s as z_info_reveal};
+//# sourceMappingURL=p-076d802a.entry.js.map

package/dist/web-components-library/p-076d802a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZInfoReveal","constructor","hostRef","this","icon","position","InfoRevealPosition","BOTTOM_RIGHT","ariaLabel","size","ControlSize","BIG","open","adjustPanelPosition","panel","rect","host","getBoundingClientRect","gridMargin","parseInt","getComputedStyle","document","documentElement","getPropertyValue","pageWidth","offsetWidth","availableSpace","Math","round","includes","left","right","style","maxWidth","togglePanel","closePanel","handleEscapeKey","event","key","render","h","Host","class","type","onClick","bind","label","undefined","name","id","ref","el","hidden"],"sources":["src/components/z-info-reveal/styles.css?tag=z-info-reveal&encapsulation=shadow","src/components/z-info-reveal/index.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --z-info-reveal-panel-width: Width of the info panel.\n   * @prop --trigger-icon-size: Size of the trigger icon for big size.\n   * @prop --trigger-icon-size-small: Size of the trigger icon for small size.\n   * @prop --trigger-icon-size-x-small: Size of the trigger icon for x-small size.\n   */\n  --z-info-reveal-panel-width: 384px; /* defaults to half the maximum size of the mobile breakpoint */\n  --trigger-size: 44px;\n\n  position: relative;\n}\n\n:host * {\n  box-sizing: border-box;\n}\n\nbutton {\n  --trigger-icon-size: calc(var(--trigger-size) / 2);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  font-family: inherit;\n  letter-spacing: inherit;\n}\n\nbutton:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.z-info-reveal-trigger {\n  min-width: var(--trigger-size);\n  height: var(--trigger-size);\n  padding: calc((var(--trigger-size) - var(--trigger-icon-size)) / 2);\n  background-color: var(--color-surface05);\n  border-radius: var(--border-radius);\n  color: var(--color-text-inverse);\n  column-gap: var(--space-unit);\n  font-weight: var(--font-sb);\n  line-height: 1rem;\n}\n\n:host([size=\"big\"]) .z-info-reveal-trigger {\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"small\"]) .z-info-reveal-trigger {\n  --trigger-size: 36px;\n\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) .z-info-reveal-trigger {\n  --trigger-size: 32px;\n\n  padding: var(--space-unit);\n  font-size: var(--font-size-1);\n}\n\n:host > .z-info-reveal-trigger z-icon {\n  --z-icon-width: var(--trigger-icon-size);\n  --z-icon-height: var(--trigger-icon-size);\n\n  display: flex;\n  fill: var(--color-inverse-icon);\n}\n\n:host([size=\"small\"]) > .z-info-reveal-trigger z-icon {\n  --trigger-icon-size: var(--trigger-icon-size-small, 18px);\n}\n\n:host([size=\"x-small\"]) > .z-info-reveal-trigger z-icon {\n  --trigger-icon-size: var(--trigger-icon-size-x-small, 16px);\n}\n\n.z-info-reveal-panel {\n  position: absolute;\n  z-index: 19;\n  display: flex;\n  width: var(--z-info-reveal-panel-width);\n  height: fit-content;\n  align-items: flex-start;\n  padding: calc(var(--space-unit) * 1.5);\n  background-color: var(--color-surface05);\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-4);\n  color: var(--color-text-inverse);\n  column-gap: var(--space-unit);\n}\n\n.z-info-reveal-panel[hidden] {\n  display: none;\n}\n\n:host([position=\"top_left\"]) .z-info-reveal-panel,\n:host([position=\"top_right\"]) .z-info-reveal-panel {\n  top: 0;\n}\n\n:host([position=\"bottom_left\"]) .z-info-reveal-panel,\n:host([position=\"bottom_right\"]) .z-info-reveal-panel {\n  bottom: 0;\n}\n\n:host([position=\"top_right\"]) .z-info-reveal-panel,\n:host([position=\"bottom_right\"]) .z-info-reveal-panel {\n  right: 0;\n}\n\n:host([position=\"top_left\"]) .z-info-reveal-panel,\n:host([position=\"bottom_left\"]) .z-info-reveal-panel {\n  left: 0;\n}\n\n.z-info-reveal-panel .z-info-reveal-close {\n  margin-left: auto;\n}\n\n.z-info-reveal-panel z-icon {\n  fill: var(--color-inverse-icon);\n}\n\n@media (max-width: 767px) {\n  .z-info-reveal-panel {\n    top: auto !important;\n    bottom: auto !important;\n    width: calc(var(--z-info-reveal-panel-width) - (var(--grid-margin) * 4)) !important;\n    margin-top: calc(var(--trigger-size) * -1);\n  }\n}\n","import {Component, ComponentInterface, Element, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ControlSize, InfoRevealPosition} from \"../../beans\";\n\n/**\n * Info reveal component.\n *\n * @slot - content of the info panel.\n */\n@Component({\n  tag: \"z-info-reveal\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInfoReveal implements ComponentInterface {\n  /** Name of the icon for the trigger button */\n  @Prop()\n  icon? = \"informationsource\";\n\n  /**\n   * The position of the z-info-reveal in the page. This helps to correctly place the info panel.\n   * The panel will grow in the opposite direction of the position.\n   * For example, with the default position `BOTTOM_RIGHT`, the panel will grow vertically upwards and horizontally to the left.\n   */\n  @Prop({reflect: true})\n  position?: InfoRevealPosition = InfoRevealPosition.BOTTOM_RIGHT;\n\n  /** Label of the trigger button. */\n  @Prop()\n  label?: string;\n\n  /** Aria label of the trigger button. It will be only used when `label` prop is empty. */\n  @Prop()\n  ariaLabel = \"Apri pannello informazioni\";\n\n  /** Size of the trigger button */\n  @Prop({reflect: true})\n  size?: ControlSize = ControlSize.BIG;\n\n  /** Whether the info panel is open. */\n  @State()\n  open = false;\n\n  @Element() host: HTMLZInfoRevealElement;\n\n  private panel: HTMLDivElement;\n\n  /**\n   * Adjust the position of the info panel to prevent exiting the viewport.\n   */\n  @Watch(\"position\")\n  @Watch(\"open\")\n  @Listen(\"resize\", {target: \"window\", passive: true})\n  adjustPanelPosition(): void {\n    if (!this.open || !this.panel) {\n      return;\n    }\n\n    const rect = this.host.getBoundingClientRect();\n    const gridMargin = parseInt(getComputedStyle(document.documentElement).getPropertyValue(\"--grid-margin\"), 10);\n    const pageWidth = document.documentElement.offsetWidth;\n    // Available space for the info panel to grow towards the edge of the page, based on the `position` prop.\n    const availableSpace = Math.round(\n      (this.position.includes(\"left\") ? pageWidth - rect.left : rect.right) - gridMargin\n    );\n    this.panel.style.maxWidth = `${availableSpace}px`;\n  }\n\n  /**\n   * Toggle the open state of the info panel.\n   */\n  private togglePanel(): void {\n    this.open = !this.open;\n  }\n\n  /**\n   * Close the info panel.\n   */\n  private closePanel(): void {\n    this.open = false;\n  }\n\n  @Listen(\"keydown\", {target: \"window\", capture: true})\n  handleEscapeKey(event: KeyboardEvent): void {\n    if (event.key === \"Escape\" && this.open) {\n      this.closePanel();\n    }\n  }\n\n  render(): HTMLZInfoRevealElement {\n    return (\n      <Host open={this.open}>\n        <button\n          class=\"z-info-reveal-trigger\"\n          type=\"button\"\n          onClick={this.togglePanel.bind(this)}\n          aria-label={!this.label ? this.ariaLabel : undefined}\n          aria-expanded={this.open ? \"true\" : \"false\"}\n          aria-controls=\"z-info-reveal-panel\"\n        >\n          {this.icon && <z-icon name={this.icon} />}\n          {this.label && <span class=\"z-info-reveal-label\">{this.label}</span>}\n        </button>\n        <div\n          class=\"z-info-reveal-panel\"\n          id=\"z-info-reveal-panel\"\n          ref={(el) => (this.panel = el)}\n          hidden={!this.open}\n        >\n          <slot></slot>\n          <button\n            class=\"z-info-reveal-close\"\n            type=\"button\"\n            onClick={this.closePanel.bind(this)}\n            aria-label=\"Chiudi pannello informazioni\"\n          >\n            <z-icon name=\"multiply\" />\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAY,IAAM,ghF,MCaXC,EAAW,MALxB,WAAAC,CAAAC,G,UAQEC,KAAAC,KAAQ,oBAQRD,KAAAE,SAAgCC,EAAmBC,aAQnDJ,KAAAK,UAAY,6BAIZL,KAAAM,KAAqBC,EAAYC,IAIjCR,KAAAS,KAAO,KAiFR,CArEC,mBAAAC,GACE,IAAKV,KAAKS,OAAST,KAAKW,MAAO,CAC7B,M,CAGF,MAAMC,EAAOZ,KAAKa,KAAKC,wBACvB,MAAMC,EAAaC,SAASC,iBAAiBC,SAASC,iBAAiBC,iBAAiB,iBAAkB,IAC1G,MAAMC,EAAYH,SAASC,gBAAgBG,YAE3C,MAAMC,EAAiBC,KAAKC,OACzBzB,KAAKE,SAASwB,SAAS,QAAUL,EAAYT,EAAKe,KAAOf,EAAKgB,OAASb,GAE1Ef,KAAKW,MAAMkB,MAAMC,SAAW,GAAGP,K,CAMzB,WAAAQ,GACN/B,KAAKS,MAAQT,KAAKS,I,CAMZ,UAAAuB,GACNhC,KAAKS,KAAO,K,CAId,eAAAwB,CAAgBC,GACd,GAAIA,EAAMC,MAAQ,UAAYnC,KAAKS,KAAM,CACvCT,KAAKgC,Y,EAIT,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAH,IAAA,2CAAC1B,KAAMT,KAAKS,MACf4B,EAAA,UAAAF,IAAA,2CACEI,MAAM,wBACNC,KAAK,SACLC,QAASzC,KAAK+B,YAAYW,KAAK1C,MAAK,cACvBA,KAAK2C,MAAQ3C,KAAKK,UAAYuC,UAAS,gBACrC5C,KAAKS,KAAO,OAAS,QAAO,gBAC7B,uBAEbT,KAAKC,MAAQoC,EAAA,UAAAF,IAAA,2CAAQU,KAAM7C,KAAKC,OAChCD,KAAK2C,OAASN,EAAA,QAAAF,IAAA,2CAAMI,MAAM,uBAAuBvC,KAAK2C,QAEzDN,EAAA,OAAAF,IAAA,2CACEI,MAAM,sBACNO,GAAG,sBACHC,IAAMC,GAAQhD,KAAKW,MAAQqC,EAC3BC,QAASjD,KAAKS,MAEd4B,EAAA,QAAAF,IAAA,6CACAE,EAAA,UAAAF,IAAA,2CACEI,MAAM,sBACNC,KAAK,SACLC,QAASzC,KAAKgC,WAAWU,KAAK1C,MAAK,aACxB,gCAEXqC,EAAA,UAAAF,IAAA,2CAAQU,KAAK,e","ignoreList":[]}

package/dist/web-components-library/p-10ad3d7c.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as o,h as r,H as e,d as a}from"./p-BcDWN4F1.js";import{a1 as s}from"./p-B3nR3-Jw.js";import{a as i}from"./p-C8pbzcmM.js";import"./p-Q-tWjk7P.js";const c=()=>`:host{display:grid;width:fit-content;padding:calc(var(--space-unit) * 2);background:var(--color-surface01);gap:var(--space-unit);grid-template-columns:repeat(9, calc(var(--space-unit) * 3));grid-template-rows:repeat(5, calc(var(--space-unit) * 3))}:host,*{box-sizing:border-box}button{--border-color:var(--color-surface05);padding:0;border:none;appearance:none;background:none;border-radius:var(--border-radius);cursor:pointer}button[data-color="#FFFFFF00"]{position:relative}button[data-color="#FFFFFF00"]::after{position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(     -45deg,     transparent 48%,     var(--border-color) 48%,     var(--border-color) 52%,     transparent 52%   );border-radius:var(--border-radius);content:""}button[aria-selected="true"]{box-shadow:0 0 0 1px var(--color-white),     0 0 0 3px var(--color-active-primary)}button:focus-visible{box-shadow:var(--shadow-focus-primary)}button .color-swatch{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--border-color);border-radius:var(--border-radius)}button[data-color="#FFFFFF00"]:disabled{--border-color:var(--color-disabled01-icon);cursor:not-allowed}button[data-color="#FFFFFF00"]:disabled .color-swatch{background-color:var(--color-disabled02)}`;const l={it:{"Select a color":"Seleziona un colore","Color swatch":"Campione di colore"},en:{"Select a color":"Select a color","Color swatch":"Color swatch"}};const n=5;const d=9;const h=class{constructor(r){t(this,r);this.colorSelected=o(this,"colorSelected",7);this.lng="it";this.disableTransparent=false;this.colorKeysByRow=[];this._colorButtons=[]}get colorButtons(){if(!this._colorButtons.length){this._colorButtons=Array.from(this.host.shadowRoot.querySelectorAll("button"))}return this._colorButtons}sortColorKeysByRow(){const t=Object.keys(s);const o=[];for(let r=0;r<n;r++){for(let e=0;e<d;e++){const a=e*n+r;if(a<t.length){o.push(t[a])}}}return o}moveFocusTo(t){this.colorButtons.forEach(((o,r)=>o.tabIndex=r===t?0:-1));this.colorButtons[t].focus()}validateTransparentSelection(){if(this.disableTransparent&&this.selectedColor==="#FFFFFF00"){this.selectedColor="#333333"}}emitColorSelected(){this.colorSelected.emit(this.selectedColor)}async setFocus(){this.colorButtons.forEach((t=>t.tabIndex=-1));const t=this.colorButtons.find((t=>t.ariaSelected==="true"))||this.colorButtons.find((t=>!t.disabled));if(!t){return}t.tabIndex=0;setTimeout((()=>{t.focus()}),50);this.host.tabIndex=-1}getNextIndexByKey(t,o,r){const e=Math.floor(t/d);const a=t%d;let s=t;switch(o){case"ArrowRight":{const t=a+1;const o=t>=d?(e+1)%n:e;s=o*d+t%d;if(s>=r){s=0}break}case"ArrowLeft":{const t=a-1;const o=t<0?(e-1+n)%n:e;s=o*d+(t+d)%d;if(s>=r){s=r-1}break}case"ArrowDown":{let t=e+1;let o=a;if(t>=n){t=0;o=(a+1)%d}s=t*d+o;if(s>=r){s=0}break}case"ArrowUp":{let t=e-1;let o=a;if(t<0){t=n-1;o=(a-1+d)%d}s=t*d+o;if(s>=r){s=r-1}break}}return s}handleKeyDown(t){var o,r;const e=t.composedPath()[0];if(!e.dataset.color){return}const a=this.colorButtons.indexOf(e);const s=this.colorButtons.length;if(a<0||!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp"].includes(t.key)){return}let i=a;let c=0;do{i=this.getNextIndexByKey(i,t.key,s);c++}while(c<s&&((o=this.colorButtons[i])===null||o===void 0?void 0:o.disabled));if(i!==a&&i>=0&&i<s&&!((r=this.colorButtons[i])===null||r===void 0?void 0:r.disabled)){this.moveFocusTo(i);t.preventDefault();t.stopPropagation()}}handleBlur(t){const o=t.relatedTarget;if(!i(this.host,o)){this.host.tabIndex=0;this.colorButtons.forEach((t=>t.tabIndex=-1))}}componentWillLoad(){this.colorKeysByRow=this.sortColorKeysByRow()}render(){return r(e,{key:"8ab27c4b68bd295e1bda15e78f1f41bfbfc66b47",role:"listbox","aria-label":this.htmlAriaLabel||l[this.lng]["Select a color"],tabIndex:0},this.colorKeysByRow.map((t=>{var o;return r("button",{class:"color-swatch","data-color":t,role:"option","aria-selected":((o=this.selectedColor)===null||o===void 0?void 0:o.toUpperCase())===t.toUpperCase()?"true":"false",tabIndex:-1,onClick:()=>this.selectedColor=t,disabled:this.disableTransparent&&t==="#FFFFFF00"},r("div",{class:"color-swatch",role:"img","aria-roledescription":l[this.lng]["Color swatch"],"aria-label":s[t][this.lng],title:s[t][this.lng],style:{backgroundColor:t}}))})))}get host(){return a(this)}static get watchers(){return{disableTransparent:[{validateTransparentSelection:0}],selectedColor:[{validateTransparentSelection:0},{emitColorSelected:0}]}}};h.style=c();export{h as z_color_picker};
+//# sourceMappingURL=p-10ad3d7c.entry.js.map

package/dist/web-components-library/p-10ad3d7c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","LOCALES","it","en","COLOR_GROUP_SIZE","COLOR_GROUPS","ZColorPicker","constructor","hostRef","this","lng","disableTransparent","colorKeysByRow","_colorButtons","colorButtons","length","Array","from","host","shadowRoot","querySelectorAll","sortColorKeysByRow","allKeys","Object","keys","ColorPickerPalette","ordered","row","col","columnMajorIndex","push","moveFocusTo","index","forEach","btn","i","tabIndex","focus","validateTransparentSelection","selectedColor","emitColorSelected","colorSelected","emit","setFocus","firstSelectedOrEnabled","find","ariaSelected","disabled","setTimeout","getNextIndexByKey","currentIndex","key","totalColors","Math","floor","newIndex","newCol","newRow","handleKeyDown","event","target","composedPath","dataset","color","indexOf","includes","attempts","_a","_b","preventDefault","stopPropagation","handleBlur","relatedTarget","containsElement","componentWillLoad","render","h","Host","role","htmlAriaLabel","map","colorKey","class","toUpperCase","onClick","title","style","backgroundColor"],"sources":["src/components/z-color-picker/styles.css?tag=z-color-picker&encapsulation=shadow","src/components/z-color-picker/index.tsx"],"sourcesContent":[":host {\n  display: grid;\n  width: fit-content;\n  padding: calc(var(--space-unit) * 2);\n  background: var(--color-surface01);\n  gap: var(--space-unit);\n  grid-template-columns: repeat(9, calc(var(--space-unit) * 3));\n  grid-template-rows: repeat(5, calc(var(--space-unit) * 3));\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\nbutton {\n  --border-color: var(--color-surface05);\n\n  padding: 0;\n  border: none;\n  appearance: none;\n  background: none;\n  border-radius: var(--border-radius);\n  cursor: pointer;\n}\n\nbutton[data-color=\"#FFFFFF00\"] {\n  position: relative;\n}\n\n/* draw a diagonal line from top right corner */\nbutton[data-color=\"#FFFFFF00\"]::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    -45deg,\n    transparent 48%,\n    var(--border-color) 48%,\n    var(--border-color) 52%,\n    transparent 52%\n  );\n  border-radius: var(--border-radius);\n  content: \"\";\n}\n\nbutton[aria-selected=\"true\"] {\n  box-shadow:\n    0 0 0 1px var(--color-white),\n    0 0 0 3px var(--color-active-primary);\n}\n\nbutton:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n}\n\nbutton .color-swatch {\n  width: calc(var(--space-unit) * 3);\n  height: calc(var(--space-unit) * 3);\n  border: var(--border-size-small) solid var(--border-color);\n  border-radius: var(--border-radius);\n}\n\nbutton[data-color=\"#FFFFFF00\"]:disabled {\n  --border-color: var(--color-disabled01-icon);\n\n  cursor: not-allowed;\n}\n\nbutton[data-color=\"#FFFFFF00\"]:disabled .color-swatch {\n  background-color: var(--color-disabled02);\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {ColorPickerPalette} from \"../../beans\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst LOCALES = {\n  it: {\n    \"Select a color\": \"Seleziona un colore\",\n    \"Color swatch\": \"Campione di colore\",\n  },\n  en: {\n    \"Select a color\": \"Select a color\",\n    \"Color swatch\": \"Color swatch\",\n  },\n} as const;\n\n/** Number of colors in each group (column) of the grid. */\nconst COLOR_GROUP_SIZE = 5;\n\n/** Number of color groups (columns) in the grid. */\nconst COLOR_GROUPS = 9;\n\n/**\n * Color picker component.\n * This component allows the user to pick a color from a predefined set.\n */\n@Component({\n  tag: \"z-color-picker\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZColorPicker implements ComponentInterface {\n  @Element() host: HTMLZColorPickerElement;\n\n  /**\n   * The selected color to highlight.\n   */\n  @Prop({mutable: true})\n  selectedColor: ColorPickerPalette;\n\n  /**\n   * The language for the aria labels inside the color picker.\n   */\n  @Prop()\n  lng: \"it\" | \"en\" = \"it\";\n\n  /**\n   * The aria-label for the color picker, e.g. \"Select a background color for the label\".\n   */\n  @Prop()\n  htmlAriaLabel: string;\n\n  /**\n   * Disables the transparent color option.\n   * Setting `selectedColor` prop to `#FFFFFF00` while `disableTransparent` is true will default to `#333333` (\"dark gray 2\").\n   */\n  @Prop()\n  disableTransparent = false;\n\n  /**\n   * Event emitted when a color is selected.\n   */\n  @Event()\n  colorSelected: EventEmitter<ColorPickerPalette>;\n\n  /**\n   * The color keys arranged in row-major order for rendering and navigation.\n   */\n  private colorKeysByRow: ColorPickerPalette[] = [];\n\n  private _colorButtons: HTMLButtonElement[] = [];\n\n  private get colorButtons(): HTMLButtonElement[] {\n    if (!this._colorButtons.length) {\n      this._colorButtons = Array.from(this.host.shadowRoot.querySelectorAll(\"button\")) as HTMLButtonElement[];\n    }\n\n    return this._colorButtons;\n  }\n\n  /**\n   * Reorders color keys from column-major (the format of the `ColorPickerPalette` object) to row-major (visual/navigation order).\n   * This ensures button indices in the DOM match their visual position in the grid.\n   */\n  private sortColorKeysByRow(): ColorPickerPalette[] {\n    const allKeys = Object.keys(ColorPickerPalette) as ColorPickerPalette[];\n    const ordered: ColorPickerPalette[] = [];\n\n    // Iterate through visual positions (row by row, left to right)\n    for (let row = 0; row < COLOR_GROUP_SIZE; row++) {\n      for (let col = 0; col < COLOR_GROUPS; col++) {\n        const columnMajorIndex = col * COLOR_GROUP_SIZE + row;\n        if (columnMajorIndex < allKeys.length) {\n          ordered.push(allKeys[columnMajorIndex]);\n        }\n      }\n    }\n\n    return ordered;\n  }\n\n  /** Move focus to the specified color button by index. */\n  private moveFocusTo(index: number): void {\n    // Reset tabindex of other buttons and set tabindex to 0 on selected button\n    this.colorButtons.forEach((btn, i) => (btn.tabIndex = i === index ? 0 : -1));\n    this.colorButtons[index].focus();\n  }\n\n  @Watch(\"disableTransparent\")\n  @Watch(\"selectedColor\")\n  validateTransparentSelection(): void {\n    if (this.disableTransparent && this.selectedColor === \"#FFFFFF00\") {\n      this.selectedColor = \"#333333\"; // Default to dark gray 2 if transparent is disabled and currently selected\n    }\n  }\n\n  @Watch(\"selectedColor\")\n  emitColorSelected(): void {\n    this.colorSelected.emit(this.selectedColor);\n  }\n\n  /**\n   * Focuses the selected or first enabled color button and makes the container non-tabbable.\n   */\n  @Listen(\"focus\")\n  @Method()\n  async setFocus(): Promise<void> {\n    // Reset tabindex of all buttons\n    this.colorButtons.forEach((btn) => (btn.tabIndex = -1));\n    const firstSelectedOrEnabled =\n      this.colorButtons.find((btn) => btn.ariaSelected === \"true\") || this.colorButtons.find((btn) => !btn.disabled);\n    if (!firstSelectedOrEnabled) {\n      return;\n    }\n\n    firstSelectedOrEnabled.tabIndex = 0;\n    setTimeout(() => {\n      firstSelectedOrEnabled.focus();\n    }, 50);\n    // Set container as non-tabbable\n    this.host.tabIndex = -1;\n  }\n\n  /**\n   * Compute next index in row-major grid according to keyboard direction.\n   */\n  private getNextIndexByKey(currentIndex: number, key: string, totalColors: number): number {\n    const row = Math.floor(currentIndex / COLOR_GROUPS);\n    const col = currentIndex % COLOR_GROUPS;\n    let newIndex = currentIndex;\n\n    switch (key) {\n      case \"ArrowRight\": {\n        const newCol = col + 1;\n        const newRow = newCol >= COLOR_GROUPS ? (row + 1) % COLOR_GROUP_SIZE : row;\n        newIndex = newRow * COLOR_GROUPS + (newCol % COLOR_GROUPS);\n        if (newIndex >= totalColors) {\n          newIndex = 0; // Wrap to first item\n        }\n\n        break;\n      }\n      case \"ArrowLeft\": {\n        const newCol = col - 1;\n        const newRow = newCol < 0 ? (row - 1 + COLOR_GROUP_SIZE) % COLOR_GROUP_SIZE : row;\n        newIndex = newRow * COLOR_GROUPS + ((newCol + COLOR_GROUPS) % COLOR_GROUPS);\n        if (newIndex >= totalColors) {\n          newIndex = totalColors - 1; // Wrap to last item\n        }\n\n        break;\n      }\n      case \"ArrowDown\": {\n        let newRow = row + 1;\n        let newCol = col;\n        if (newRow >= COLOR_GROUP_SIZE) {\n          // Wrap to first item of next column\n          newRow = 0;\n          newCol = (col + 1) % COLOR_GROUPS;\n        }\n        newIndex = newRow * COLOR_GROUPS + newCol;\n        if (newIndex >= totalColors) {\n          newIndex = 0; // Wrap to first item\n        }\n\n        break;\n      }\n      case \"ArrowUp\": {\n        let newRow = row - 1;\n        let newCol = col;\n        if (newRow < 0) {\n          // Wrap to last item of previous column\n          newRow = COLOR_GROUP_SIZE - 1;\n          newCol = (col - 1 + COLOR_GROUPS) % COLOR_GROUPS;\n        }\n        newIndex = newRow * COLOR_GROUPS + newCol;\n        if (newIndex >= totalColors) {\n          newIndex = totalColors - 1; // Wrap to last item\n        }\n\n        break;\n      }\n    }\n\n    return newIndex;\n  }\n\n  /**\n   * Handle keyboard navigation within the color picker.\n   * Arrow keys move focus in the expected direction, wrapping around edges. The grid is navigated in row-major order.\n   */\n  @Listen(\"keydown\")\n  handleKeyDown(event: KeyboardEvent): void {\n    const target = event.composedPath()[0] as HTMLElement;\n    if (!target.dataset.color) {\n      return;\n    }\n\n    const currentIndex = this.colorButtons.indexOf(target as HTMLButtonElement);\n    const totalColors = this.colorButtons.length;\n    if (currentIndex < 0 || ![\"ArrowRight\", \"ArrowLeft\", \"ArrowDown\", \"ArrowUp\"].includes(event.key)) {\n      return;\n    }\n\n    let newIndex = currentIndex;\n    let attempts = 0;\n\n    do {\n      newIndex = this.getNextIndexByKey(newIndex, event.key, totalColors);\n      attempts++;\n    } while (attempts < totalColors && this.colorButtons[newIndex]?.disabled);\n\n    if (\n      newIndex !== currentIndex &&\n      newIndex >= 0 &&\n      newIndex < totalColors &&\n      !this.colorButtons[newIndex]?.disabled\n    ) {\n      this.moveFocusTo(newIndex);\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  /**\n   * When focus leaves the color picker (e.g. user tabs away), reset all buttons to non-tabbable and make the container tabbable again.\n   */\n  @Listen(\"blur\")\n  handleBlur(event: FocusEvent): void {\n    const relatedTarget = event.relatedTarget as HTMLElement;\n    if (!containsElement(this.host, relatedTarget)) {\n      this.host.tabIndex = 0;\n      this.colorButtons.forEach((btn) => (btn.tabIndex = -1));\n    }\n  }\n\n  componentWillLoad(): void {\n    this.colorKeysByRow = this.sortColorKeysByRow();\n  }\n\n  render(): HTMLZColorPickerElement {\n    return (\n      <Host\n        role=\"listbox\"\n        aria-label={this.htmlAriaLabel || LOCALES[this.lng][\"Select a color\"]}\n        tabIndex={0}\n      >\n        {this.colorKeysByRow.map((colorKey: ColorPickerPalette) => (\n          <button\n            class=\"color-swatch\"\n            data-color={colorKey}\n            role=\"option\"\n            aria-selected={this.selectedColor?.toUpperCase() === colorKey.toUpperCase() ? \"true\" : \"false\"}\n            tabIndex={-1}\n            onClick={() => (this.selectedColor = colorKey)}\n            disabled={this.disableTransparent && colorKey === \"#FFFFFF00\"}\n          >\n            <div\n              class=\"color-swatch\"\n              role=\"img\"\n              aria-roledescription={LOCALES[this.lng][\"Color swatch\"]}\n              aria-label={ColorPickerPalette[colorKey][this.lng]}\n              title={ColorPickerPalette[colorKey][this.lng]}\n              style={{backgroundColor: colorKey}}\n            ></div>\n          </button>\n        ))}\n      </Host>\n    );\n  }\n}\n"],"mappings":"iKAAA,MAAMA,EAAY,IAAM,kyCCgBxB,MAAMC,EAAU,CACdC,GAAI,CACF,iBAAkB,sBAClB,eAAgB,sBAElBC,GAAI,CACF,iBAAkB,iBAClB,eAAgB,iBAKpB,MAAMC,EAAmB,EAGzB,MAAMC,EAAe,E,MAWRC,EAAY,MALzB,WAAAC,CAAAC,G,uDAkBEC,KAAAC,IAAmB,KAanBD,KAAAE,mBAAqB,MAWbF,KAAAG,eAAuC,GAEvCH,KAAAI,cAAqC,EA4N9C,CA1NC,gBAAYC,GACV,IAAKL,KAAKI,cAAcE,OAAQ,CAC9BN,KAAKI,cAAgBG,MAAMC,KAAKR,KAAKS,KAAKC,WAAWC,iBAAiB,U,CAGxE,OAAOX,KAAKI,a,CAON,kBAAAQ,GACN,MAAMC,EAAUC,OAAOC,KAAKC,GAC5B,MAAMC,EAAgC,GAGtC,IAAK,IAAIC,EAAM,EAAGA,EAAMvB,EAAkBuB,IAAO,CAC/C,IAAK,IAAIC,EAAM,EAAGA,EAAMvB,EAAcuB,IAAO,CAC3C,MAAMC,EAAmBD,EAAMxB,EAAmBuB,EAClD,GAAIE,EAAmBP,EAAQP,OAAQ,CACrCW,EAAQI,KAAKR,EAAQO,G,GAK3B,OAAOH,C,CAID,WAAAK,CAAYC,GAElBvB,KAAKK,aAAamB,SAAQ,CAACC,EAAKC,IAAOD,EAAIE,SAAWD,IAAMH,EAAQ,GAAI,IACxEvB,KAAKK,aAAakB,GAAOK,O,CAK3B,4BAAAC,GACE,GAAI7B,KAAKE,oBAAsBF,KAAK8B,gBAAkB,YAAa,CACjE9B,KAAK8B,cAAgB,S,EAKzB,iBAAAC,GACE/B,KAAKgC,cAAcC,KAAKjC,KAAK8B,c,CAQ/B,cAAMI,GAEJlC,KAAKK,aAAamB,SAASC,GAASA,EAAIE,UAAW,IACnD,MAAMQ,EACJnC,KAAKK,aAAa+B,MAAMX,GAAQA,EAAIY,eAAiB,UAAWrC,KAAKK,aAAa+B,MAAMX,IAASA,EAAIa,WACvG,IAAKH,EAAwB,CAC3B,M,CAGFA,EAAuBR,SAAW,EAClCY,YAAW,KACTJ,EAAuBP,OAAO,GAC7B,IAEH5B,KAAKS,KAAKkB,UAAW,C,CAMf,iBAAAa,CAAkBC,EAAsBC,EAAaC,GAC3D,MAAMzB,EAAM0B,KAAKC,MAAMJ,EAAe7C,GACtC,MAAMuB,EAAMsB,EAAe7C,EAC3B,IAAIkD,EAAWL,EAEf,OAAQC,GACN,IAAK,aAAc,CACjB,MAAMK,EAAS5B,EAAM,EACrB,MAAM6B,EAASD,GAAUnD,GAAgBsB,EAAM,GAAKvB,EAAmBuB,EACvE4B,EAAWE,EAASpD,EAAgBmD,EAASnD,EAC7C,GAAIkD,GAAYH,EAAa,CAC3BG,EAAW,C,CAGb,K,CAEF,IAAK,YAAa,CAChB,MAAMC,EAAS5B,EAAM,EACrB,MAAM6B,EAASD,EAAS,GAAK7B,EAAM,EAAIvB,GAAoBA,EAAmBuB,EAC9E4B,EAAWE,EAASpD,GAAiBmD,EAASnD,GAAgBA,EAC9D,GAAIkD,GAAYH,EAAa,CAC3BG,EAAWH,EAAc,C,CAG3B,K,CAEF,IAAK,YAAa,CAChB,IAAIK,EAAS9B,EAAM,EACnB,IAAI6B,EAAS5B,EACb,GAAI6B,GAAUrD,EAAkB,CAE9BqD,EAAS,EACTD,GAAU5B,EAAM,GAAKvB,C,CAEvBkD,EAAWE,EAASpD,EAAemD,EACnC,GAAID,GAAYH,EAAa,CAC3BG,EAAW,C,CAGb,K,CAEF,IAAK,UAAW,CACd,IAAIE,EAAS9B,EAAM,EACnB,IAAI6B,EAAS5B,EACb,GAAI6B,EAAS,EAAG,CAEdA,EAASrD,EAAmB,EAC5BoD,GAAU5B,EAAM,EAAIvB,GAAgBA,C,CAEtCkD,EAAWE,EAASpD,EAAemD,EACnC,GAAID,GAAYH,EAAa,CAC3BG,EAAWH,EAAc,C,CAG3B,K,EAIJ,OAAOG,C,CAQT,aAAAG,CAAcC,G,QACZ,MAAMC,EAASD,EAAME,eAAe,GACpC,IAAKD,EAAOE,QAAQC,MAAO,CACzB,M,CAGF,MAAMb,EAAezC,KAAKK,aAAakD,QAAQJ,GAC/C,MAAMR,EAAc3C,KAAKK,aAAaC,OACtC,GAAImC,EAAe,IAAM,CAAC,aAAc,YAAa,YAAa,WAAWe,SAASN,EAAMR,KAAM,CAChG,M,CAGF,IAAII,EAAWL,EACf,IAAIgB,EAAW,EAEf,EAAG,CACDX,EAAW9C,KAAKwC,kBAAkBM,EAAUI,EAAMR,IAAKC,GACvDc,GACF,OAASA,EAAWd,KAAee,EAAA1D,KAAKK,aAAayC,MAAS,MAAAY,SAAA,SAAAA,EAAEpB,WAEhE,GACEQ,IAAaL,GACbK,GAAY,GACZA,EAAWH,MACVgB,EAAA3D,KAAKK,aAAayC,MAAS,MAAAa,SAAA,SAAAA,EAAErB,UAC9B,CACAtC,KAAKsB,YAAYwB,GACjBI,EAAMU,iBACNV,EAAMW,iB,EAQV,UAAAC,CAAWZ,GACT,MAAMa,EAAgBb,EAAMa,cAC5B,IAAKC,EAAgBhE,KAAKS,KAAMsD,GAAgB,CAC9C/D,KAAKS,KAAKkB,SAAW,EACrB3B,KAAKK,aAAamB,SAASC,GAASA,EAAIE,UAAW,G,EAIvD,iBAAAsC,GACEjE,KAAKG,eAAiBH,KAAKY,oB,CAG7B,MAAAsD,GACE,OACEC,EAACC,EAAI,CAAA1B,IAAA,2CACH2B,KAAK,UAAS,aACFrE,KAAKsE,eAAiB9E,EAAQQ,KAAKC,KAAK,kBACpD0B,SAAU,GAET3B,KAAKG,eAAeoE,KAAKC,I,MAAiC,OACzDL,EAAA,UACEM,MAAM,eAAc,aACRD,EACZH,KAAK,SAAQ,kBACEX,EAAA1D,KAAK8B,iBAAa,MAAA4B,SAAA,SAAAA,EAAEgB,iBAAkBF,EAASE,cAAgB,OAAS,QACvF/C,UAAU,EACVgD,QAAS,IAAO3E,KAAK8B,cAAgB0C,EACrClC,SAAUtC,KAAKE,oBAAsBsE,IAAa,aAElDL,EAAA,OACEM,MAAM,eACNJ,KAAK,MAAK,uBACY7E,EAAQQ,KAAKC,KAAK,gBAAe,aAC3Ce,EAAmBwD,GAAUxE,KAAKC,KAC9C2E,MAAO5D,EAAmBwD,GAAUxE,KAAKC,KACzC4E,MAAO,CAACC,gBAAiBN,KAEpB,I","ignoreList":[]}

package/dist/web-components-library/p-164b8342.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as i,h as s,H as t,d as o}from"./p-BcDWN4F1.js";import{x as a,P as c}from"./p-B3nR3-Jw.js";import{B as n}from"./p-Q-tWjk7P.js";const l=()=>`.sc-z-file-h{position:relative;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.sc-z-file-h>z-popover.sc-z-file{z-index:10}.sc-z-file-h>z-popover.sc-z-file>.tooltip-content.sc-z-file{white-space:nowrap}.sc-z-file-h>z-chip.sc-z-file span.sc-z-file{display:block;overflow:hidden;max-width:250px;letter-spacing:0.32px;line-height:1.33;text-overflow:ellipsis;white-space:nowrap}`;const r=class{constructor(s){e(this,s);this.removeFile=i(this,"removeFile",7);this.allowPopover=false;this.popoverVisible=false}removeFileHandler(){this.removeFile.emit({fileName:this.fileName});this.el.remove()}onMouseOver(){this.popoverVisible=true}onMouseLeave(){this.popoverVisible=false}onInteractiveIconClick(){this.removeFileHandler()}componentDidLoad(){var e,i;if(this.elementHasEllipsis()&&window.innerWidth>n.TABLET){this.allowPopover=true}(i=(e=this.icon)===null||e===void 0?void 0:e.focus)===null||i===void 0?void 0:i.call(e)}elementHasEllipsis(){return this.ellipsis.offsetWidth<this.ellipsis.scrollWidth}render(){return s(t,{key:"12ffcf9cd4e06418f8ef0c0fe6f901519ea81578"},this.allowPopover&&s("z-popover",{key:"b77adda2c9f80584b3e74ab82d5c8b5198b50d88",open:this.popoverVisible,position:c.AUTO,bindTo:this.chip},s("span",{key:"9d0bb9bbdb210ce143a129ca4f46a6409b85b393",class:"body-5 tooltip-content"},this.ellipsis.innerText)),s("z-chip",{key:"9d9c8f64f63c4723c2f6540be7d6c534650a847d",ref:e=>this.chip=e,id:`chip-${this.fileNumber}`,interactiveIcon:"multiply-circled",type:a.DEFAULT},s("span",{key:"959647e217388cad43c3bb3536a44ce22b548067",ref:e=>this.ellipsis=e,tabIndex:-1},this.fileName)))}get el(){return o(this)}};r.style=l();export{r as z_file};
+//# sourceMappingURL=p-164b8342.entry.js.map

package/dist/web-components-library/p-164b8342.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZFile","constructor","hostRef","this","allowPopover","popoverVisible","removeFileHandler","removeFile","emit","fileName","el","remove","onMouseOver","onMouseLeave","onInteractiveIconClick","componentDidLoad","elementHasEllipsis","window","innerWidth","Breakpoints","TABLET","_b","_a","icon","focus","call","ellipsis","offsetWidth","scrollWidth","render","h","Host","key","open","position","PopoverPosition","AUTO","bindTo","chip","class","innerText","ref","id","fileNumber","interactiveIcon","type","ZChipType","DEFAULT","tabIndex"],"sources":["src/components/file-upload/z-file/styles.css?tag=z-file&encapsulation=scoped","src/components/file-upload/z-file/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > z-popover {\n  z-index: 10;\n}\n\n:host > z-popover > .tooltip-content {\n  white-space: nowrap;\n}\n\n:host > z-chip span {\n  display: block;\n  overflow: hidden;\n  max-width: 250px;\n  letter-spacing: 0.32px;\n  line-height: 1.33;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Host, Listen, Prop, State, h} from \"@stencil/core\";\nimport {PopoverPosition, ZChipType} from \"../../../beans\";\nimport {Breakpoints} from \"../../../constants/breakpoints\";\n\n@Component({\n  tag: \"z-file\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZFile implements ComponentInterface {\n  private icon: HTMLElement;\n\n  private ellipsis?: HTMLSpanElement;\n\n  private chip?: HTMLZChipElement;\n\n  /** File chip id */\n  @Prop()\n  fileNumber: number;\n\n  /** File name */\n  @Prop()\n  fileName: string;\n\n  @State()\n  allowPopover = false;\n\n  @State()\n  popoverVisible = false;\n\n  @Element() el: HTMLZFileElement;\n\n  /** Emitted when a z-file component is removed from the DOM */\n  @Event()\n  removeFile: EventEmitter;\n\n  private removeFileHandler(): void {\n    this.removeFile.emit({fileName: this.fileName});\n    this.el.remove();\n  }\n\n  @Listen(\"mouseover\")\n  onMouseOver(): void {\n    this.popoverVisible = true;\n  }\n\n  @Listen(\"mouseleave\")\n  onMouseLeave(): void {\n    this.popoverVisible = false;\n  }\n\n  @Listen(\"interactiveIconClick\")\n  onInteractiveIconClick(): void {\n    this.removeFileHandler();\n  }\n\n  componentDidLoad(): void {\n    if (this.elementHasEllipsis() && window.innerWidth > Breakpoints.TABLET) {\n      this.allowPopover = true;\n    }\n\n    this.icon?.focus?.();\n  }\n\n  private elementHasEllipsis(): boolean {\n    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n  }\n\n  render(): HTMLZFileElement {\n    return (\n      <Host>\n        {this.allowPopover && (\n          <z-popover\n            open={this.popoverVisible}\n            position={PopoverPosition.AUTO}\n            bindTo={this.chip}\n          >\n            <span class=\"body-5 tooltip-content\">{this.ellipsis.innerText}</span>\n          </z-popover>\n        )}\n        <z-chip\n          ref={(el) => (this.chip = el as HTMLZChipElement)}\n          id={`chip-${this.fileNumber}`}\n          interactiveIcon=\"multiply-circled\"\n          type={ZChipType.DEFAULT}\n        >\n          <span\n            ref={(el) => (this.ellipsis = el as HTMLSpanElement)}\n            tabIndex={-1}\n          >\n            {this.fileName}\n          </span>\n        </z-chip>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+IAAA,MAAMA,EAAY,IAAM,wY,MCUXC,EAAK,MANlB,WAAAC,CAAAC,G,iDAsBEC,KAAAC,aAAe,MAGfD,KAAAE,eAAiB,KAoElB,CA5DS,iBAAAC,GACNH,KAAKI,WAAWC,KAAK,CAACC,SAAUN,KAAKM,WACrCN,KAAKO,GAAGC,Q,CAIV,WAAAC,GACET,KAAKE,eAAiB,I,CAIxB,YAAAQ,GACEV,KAAKE,eAAiB,K,CAIxB,sBAAAS,GACEX,KAAKG,mB,CAGP,gBAAAS,G,QACE,GAAIZ,KAAKa,sBAAwBC,OAAOC,WAAaC,EAAYC,OAAQ,CACvEjB,KAAKC,aAAe,I,EAGtBiB,GAAAC,EAAAnB,KAAKoB,QAAI,MAAAD,SAAA,SAAAA,EAAEE,SAAK,MAAAH,SAAA,SAAAA,EAAAI,KAAAH,E,CAGV,kBAAAN,GACN,OAAOb,KAAKuB,SAASC,YAAcxB,KAAKuB,SAASE,W,CAGnD,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACF7B,KAAKC,cACJ0B,EAAA,aAAAE,IAAA,2CACEC,KAAM9B,KAAKE,eACX6B,SAAUC,EAAgBC,KAC1BC,OAAQlC,KAAKmC,MAEbR,EAAA,QAAAE,IAAA,2CAAMO,MAAM,0BAA0BpC,KAAKuB,SAASc,YAGxDV,EAAA,UAAAE,IAAA,2CACES,IAAM/B,GAAQP,KAAKmC,KAAO5B,EAC1BgC,GAAI,QAAQvC,KAAKwC,aACjBC,gBAAgB,mBAChBC,KAAMC,EAAUC,SAEhBjB,EAAA,QAAAE,IAAA,2CACES,IAAM/B,GAAQP,KAAKuB,SAAWhB,EAC9BsC,UAAU,GAET7C,KAAKM,W","ignoreList":[]}

package/dist/web-components-library/p-1ba5aa7a.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,H as n,d as o}from"./p-BcDWN4F1.js";import{O as a,P as r}from"./p-B3nR3-Jw.js";import{r as s}from"./p-C8pbzcmM.js";import"./p-Q-tWjk7P.js";const h=()=>`:host,*{box-sizing:border-box}:host{--progress:0%;--progress-ratio:0;--z-input-range-thumb-size:calc(var(--space-unit) * 3);display:flex;width:fit-content;height:fit-content;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host([size="small"]){--z-input-range-thumb-size:calc(var(--space-unit) * 2)}:host([size="x-small"]){--z-input-range-thumb-size:calc(var(--space-unit) * 1.5)}:host([orientation="vertical"]){height:100%;flex-direction:row}.input-container{--z-input-range-track-size:calc(var(--z-input-range-thumb-size) / 3);position:relative;display:flex;width:100%;height:100%}label.z-label{padding:0;margin-bottom:calc(var(--space-unit) * 1.5)}:host([orientation="vertical"]) label.z-label{display:none}input[type="range"]{--main-color:var(--color-primary01);width:100%;height:var(--z-input-range-thumb-size);padding:0;margin:0;appearance:none;background:transparent;writing-mode:horizontal-tb}input[type="range"]:hover,input[type="range"]:hover~z-tooltip{--main-color:var(--color-hover-primary)}input[type="range"]:focus:focus-visible{outline:none}input[type="range"]:disabled,input[type="range"]:disabled~z-tooltip{--main-color:var(--color-form-disabled03);cursor:default}input[type="range"]::-webkit-slider-runnable-track{width:100%;height:var(--z-input-range-track-size);border:none;appearance:none;background:linear-gradient(var(--main-color), var(--main-color)) 0 / var(--progress) 100% no-repeat,     var(--color-surface03);border-radius:var(--border-radius)}:host([orientation="vertical"]) input[type="range"]{width:var(--z-input-range-thumb-size);height:100%;direction:rtl;writing-mode:vertical-lr}:host([orientation="vertical"]) input[type="range"]::-webkit-slider-runnable-track{width:var(--z-input-range-track-size);height:100%;background:linear-gradient(var(--main-color), var(--main-color)) 0 100% / 100% var(--progress) no-repeat,     var(--color-surface03)}input[type="range"]::-webkit-slider-thumb{width:var(--z-input-range-thumb-size);height:var(--z-input-range-thumb-size);box-sizing:border-box;border:calc(var(--z-input-range-thumb-size) / 4.8) solid var(--main-color);margin-top:calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);appearance:none;background-color:var(--color-surface01);border-radius:50%}:host([orientation="vertical"]) input[type="range"]::-webkit-slider-thumb{margin-top:0;margin-left:calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2)}input[type="range"]:not(:disabled)::-webkit-slider-runnable-track{cursor:pointer}input[type="range"]:not(:disabled)::-webkit-slider-thumb{cursor:grab}input[type="range"]:focus:not(:active)::-webkit-slider-thumb{box-shadow:var(--shadow-focus-primary)}input[type="range"]:active:not(:disabled)::-webkit-slider-thumb{cursor:grabbing}input[type="range"]::-moz-range-track{width:100%;height:var(--z-input-range-track-size);border:none;appearance:none;background:var(--color-surface03);border-radius:var(--border-radius)}:host([orientation="vertical"]) input[type="range"]::-moz-range-track{width:var(--z-input-range-track-size);height:100%}input[type="range"]::-moz-range-progress{height:var(--z-input-range-track-size);border:none;background:var(--main-color);border-radius:var(--border-radius)}:host([orientation="vertical"]) input[type="range"]::-moz-range-progress{width:var(--z-input-range-track-size);height:auto}input[type="range"]::-moz-range-thumb{width:var(--z-input-range-thumb-size);height:var(--z-input-range-thumb-size);box-sizing:border-box;border:calc(var(--z-input-range-thumb-size) / 4.8) solid var(--main-color);margin-top:calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);appearance:none;background-color:var(--color-surface01);border-radius:50%}:host([orientation="vertical"]) input[type="range"]::-moz-range-thumb{margin-top:0;margin-left:calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2)}input[type="range"]:not(:disabled)::-moz-range-track,input[type="range"]:not(:disabled)::-moz-range-progress{cursor:pointer}input[type="range"]:not(:disabled)::-moz-range-thumb{cursor:grab}input[type="range"]:active:not(:disabled)::-moz-range-thumb{cursor:grabbing}input[type="range"]:focus:not(:active)::-moz-range-thumb{box-shadow:var(--shadow-focus-primary)}.tooltip-guide{--progress-position:calc(     (var(--progress-ratio) * (100% - var(--z-input-range-thumb-size))) + (var(--z-input-range-thumb-size) / 2)   );position:absolute;z-index:-1;top:0;left:var(--progress-position);width:var(--z-input-range-thumb-size);height:var(--z-input-range-thumb-size);background:transparent;pointer-events:none;transform:translateX(-50%)}:host([orientation="vertical"]) .tooltip-guide{top:auto;bottom:var(--progress-position);left:0;transform:translateY(50%)}z-tooltip{--main-color:var(--color-primary01);--z-tooltip-theme--surface:var(--main-color);--z-tooltip-theme--text:var(--color-text-inverse);--z-tooltip-padding:calc(var(--space-unit) / 2)}z-tooltip .current-value{min-width:calc(var(--space-unit) * 3.5)}.edges{display:flex;justify-content:space-between}.edges :is(.min,.max){min-width:var(--z-input-range-thumb-size);text-align:center}:host([orientation="vertical"]) .edges{display:none}`;const g=()=>`:root{--font-family-sans:"IBM Plex Sans", sans-serif;--font-family-serif:"IBM Plex Serif", serif;--font-lt:300;--font-rg:400;--font-sb:600;--font-bd:700;--font-size-1:0.75rem;--font-size-2:0.875rem;--font-size-3:1rem;--font-size-4:1.125rem;--font-size-5:1.25rem;--font-size-6:1.5rem;--font-size-7:1.75rem;--font-size-8:2rem;--font-size-9:2.25rem;--font-size-10:2.625rem;--font-size-11:3rem;--font-size-12:3.375rem;--font-size-13:3.75rem;--font-size-14:4.25rem;--font-size-15:4.75rem;--font-size-16:5.25rem;--font-size-17:5.75rem;--section-title-1:var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);--section-title-2:var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);--section-title-3:var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);--section-title-4:var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);--section-title-5:var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);--section-title-6:var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif)}.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-3,.heading-3-sb,.heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-4,.heading-4-sb,.heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-1,.body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-2,.body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.body-3,.body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.body-4,.body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.body-5,.body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.interactive-1,.interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.interactive-2,.interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.interactive-3,.interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.helper,.helper-sb{font-size:var(--font-size-1);font-style:italic;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.section-title-1{font:var(--section-title-1)}.section-title-2{font:var(--section-title-2)}.section-title-3{font:var(--section-title-3)}.section-title-4{font:var(--section-title-4)}.section-title-5{font:var(--section-title-5)}.section-title-6{font:var(--section-title-6)}@media (min-width: 1152px){.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}}@media (max-width: 767px){.mobile-heading-1,.mobile-heading-1-sb,.mobile-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.mobile-heading-2,.mobile-heading-2-sb,.mobile-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-3,.mobile-heading-3-sb,.mobile-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-4,.mobile-heading-4-sb,.mobile-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-1,.mobile-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-2,.mobile-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.mobile-body-3,.mobile-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-body-4,.mobile-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-body-5,.mobile-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-interactive-1,.mobile-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-interactive-2,.mobile-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-interactive-3,.mobile-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-section-title-1{font:var(--section-title-1)}.mobile-section-title-2{font:var(--section-title-2)}.mobile-section-title-3{font:var(--section-title-3)}.mobile-section-title-4{font:var(--section-title-4)}.mobile-section-title-5{font:var(--section-title-5)}.mobile-section-title-6{font:var(--section-title-6)}.mobile-heading-1-lt,.mobile-heading-2-lt,.mobile-heading-3-lt,.mobile-heading-4-lt{font-weight:var(--font-lt)}.mobile-heading-1-sb,.mobile-heading-2-sb,.mobile-heading-3-sb,.mobile-heading-4-sb,.mobile-body-1-sb,.mobile-body-2-sb,.mobile-body-3-sb,.mobile-body-4-sb,.mobile-body-5-sb,.mobile-interactive-1-sb,.mobile-interactive-2-sb,.mobile-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 768px) and (max-width: 1151px){.tablet-heading-1,.tablet-heading-1-sb,.tablet-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.tablet-heading-2,.tablet-heading-2-sb,.tablet-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-3,.tablet-heading-3-sb,.tablet-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-4,.tablet-heading-4-sb,.tablet-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-1,.tablet-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-2,.tablet-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.tablet-body-3,.tablet-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-body-4,.tablet-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-body-5,.tablet-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-interactive-1,.tablet-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-interactive-2,.tablet-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-interactive-3,.tablet-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-section-title-1{font:var(--section-title-1)}.tablet-section-title-2{font:var(--section-title-2)}.tablet-section-title-3{font:var(--section-title-3)}.tablet-section-title-4{font:var(--section-title-4)}.tablet-section-title-5{font:var(--section-title-5)}.tablet-section-title-6{font:var(--section-title-6)}.tablet-heading-1-lt,.tablet-heading-2-lt,.tablet-heading-3-lt,.tablet-heading-4-lt{font-weight:var(--font-lt)}.tablet-heading-1-sb,.tablet-heading-2-sb,.tablet-heading-3-sb,.tablet-heading-4-sb,.tablet-body-1-sb,.tablet-body-2-sb,.tablet-body-3-sb,.tablet-body-4-sb,.tablet-body-5-sb,.tablet-interactive-1-sb,.tablet-interactive-2-sb,.tablet-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1152px) and (max-width: 1365px){.desktop-heading-1,.desktop-heading-1-sb,.desktop-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.desktop-heading-2,.desktop-heading-2-sb,.desktop-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.desktop-heading-3,.desktop-heading-3-sb,.desktop-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.desktop-heading-4,.desktop-heading-4-sb,.desktop-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-1,.desktop-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-2,.desktop-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.desktop-body-3,.desktop-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-body-4,.desktop-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-body-5,.desktop-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-interactive-1,.desktop-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-interactive-2,.desktop-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-interactive-3,.desktop-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-section-title-1{font:var(--section-title-1)}.desktop-section-title-2{font:var(--section-title-2)}.desktop-section-title-3{font:var(--section-title-3)}.desktop-section-title-4{font:var(--section-title-4)}.desktop-section-title-5{font:var(--section-title-5)}.desktop-section-title-6{font:var(--section-title-6)}.desktop-heading-1-lt,.desktop-heading-2-lt,.desktop-heading-3-lt,.desktop-heading-4-lt{font-weight:var(--font-lt)}.desktop-heading-1-sb,.desktop-heading-2-sb,.desktop-heading-3-sb,.desktop-heading-4-sb,.desktop-body-1-sb,.desktop-body-2-sb,.desktop-body-3-sb,.desktop-body-4-sb,.desktop-body-5-sb,.desktop-interactive-1-sb,.desktop-interactive-2-sb,.desktop-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1366px){.wide-heading-1,.wide-heading-1-sb,.wide-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.wide-heading-2,.wide-heading-2-sb,.wide-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.wide-heading-3,.wide-heading-3-sb,.wide-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.wide-heading-4,.wide-heading-4-sb,.wide-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-1,.wide-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-2,.wide-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.wide-body-3,.wide-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-body-4,.wide-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-body-5,.wide-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-interactive-1,.wide-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-interactive-2,.wide-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-interactive-3,.wide-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-section-title-1{font:var(--section-title-1)}.wide-section-title-2{font:var(--section-title-2)}.wide-section-title-3{font:var(--section-title-3)}.wide-section-title-4{font:var(--section-title-4)}.wide-section-title-5{font:var(--section-title-5)}.wide-section-title-6{font:var(--section-title-6)}.wide-heading-1-lt,.wide-heading-2-lt,.wide-heading-3-lt,.wide-heading-4-lt{font-weight:var(--font-lt)}.wide-heading-1-sb,.wide-heading-2-sb,.wide-heading-3-sb,.wide-heading-4-sb,.wide-body-1-sb,.wide-body-2-sb,.wide-body-3-sb,.wide-body-4-sb,.wide-body-5-sb,.wide-interactive-1-sb,.wide-interactive-2-sb,.wide-interactive-3-sb{font-weight:var(--font-sb)}}.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt{font-weight:var(--font-lt)}.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-1-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.interactive-1-sb,.interactive-2-sb,.interactive-3-sb,.helper-sb{font-weight:var(--font-sb)}`;const l=class{constructor(i){t(this,i);this.rangeInput=e(this,"rangeInput",7);this.rangeChange=e(this,"rangeChange",7);if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}this.disabled=false;this.htmlId=`z-input-range-${s()}`;this.max=100;this.min=0;this.showEdges=false;this.step=1;this.value=0;this.currentValue=this.value;this.showValueTooltip=false;this.needsNativeValueSync=false}get ariaLabel(){var t;return(t=this.htmlAriaLabel)!==null&&t!==void 0?t:this.orientation===a.VERTICAL?this.label:undefined}get tooltipPosition(){var t;return(t=this.valuePosition)!==null&&t!==void 0?t:this.orientation===a.VERTICAL?r.LEFT:r.TOP}updateCurrentValue(t){if(Number.isNaN(t)||t===this.currentValue){return}this.currentValue=t;this.internals.setFormValue(this.currentValue.toString())}getCurrentRatio(){const t=this.max-this.min;if(t<=0){return 0}const e=(this.currentValue-this.min)/t;return Math.min(1,Math.max(0,e))}updateProgress(){var t,e;const i=this.getCurrentRatio();const n=i*100;(t=this.host)===null||t===void 0?void 0:t.style.setProperty("--progress-ratio",`${i}`);(e=this.host)===null||e===void 0?void 0:e.style.setProperty("--progress",`${n}%`)}syncCurrentValueFromNativeInput(){if(!this.inputRef){return}this.updateCurrentValue(this.inputRef.valueAsNumber);this.updateProgress()}onInput(t){t.stopPropagation();this.syncCurrentValueFromNativeInput();this.rangeInput.emit(this.currentValue)}onChange(t){t.stopPropagation();this.syncCurrentValueFromNativeInput();this.rangeChange.emit(this.currentValue)}onConstraintsChange(){this.needsNativeValueSync=true}componentDidLoad(){this.needsNativeValueSync=true;this.syncCurrentValueFromNativeInput()}componentDidRender(){if(!this.needsNativeValueSync){return}this.syncCurrentValueFromNativeInput();this.needsNativeValueSync=false}render(){return i(n,{key:"4297a1ce9ebf313882a70733661321a2f5bde38d"},this.label&&i("label",{key:"933af2d529a852f226e0fe9eb18109fc5b7feccd",class:"z-label",htmlFor:this.htmlId},this.label),i("div",{key:"5a6a44ec7bc2fe7a292474027c1f39fc6d7cb9aa",class:"input-container body-3"},i("input",{key:"2759d81abdf6106cd29a261081b2d60495d2fe8d",ref:t=>this.inputRef=t,type:"range","aria-label":this.ariaLabel,id:this.htmlId,disabled:this.disabled,min:this.min,max:this.max,step:this.step,value:this.currentValue,onInput:t=>this.onInput(t),onChange:t=>this.onChange(t),onFocus:()=>this.showValueTooltip=true,onBlur:()=>this.showValueTooltip=false}),i("div",{key:"252ee3a382b279cf6bb397d066300dd97cca2537",class:"tooltip-guide",ref:t=>this.tooltipGuideRef=t}),i("z-tooltip",{key:"e8795cd4df104297809f79f13fdf5317cbb20ec1",position:this.tooltipPosition,bindTo:this.tooltipGuideRef,open:this.showValueTooltip,closable:false},i("div",{key:"92186a95ac641beaff9afdd95537f85161ab7186",class:"current-value"},this.currentValue))),this.showEdges&&i("div",{key:"d09e29dc8bef5b376a5d04d138f70c5c43f8bebe",class:"edges body-3"},i("span",{key:"fea33d9d289b5f31da1b0c756b347fa25892940f",class:"min"},this.min),i("span",{key:"602ac1fc4957b2262bb2bb2c802898c6296e31f6",class:"max"},this.max)))}static get formAssociated(){return true}get host(){return o(this)}static get watchers(){return{min:[{onConstraintsChange:0}],max:[{onConstraintsChange:0}],step:[{onConstraintsChange:0}],value:[{onConstraintsChange:0}]}}};l.style=h()+g();export{l as z_input_range};
+//# sourceMappingURL=p-1ba5aa7a.entry.js.map