@kompasid/lit-web-components 0.6.2 → 0.6.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/demo/index.html +31 -0
  2. package/dist/src/components/kompasid-header-account/KompasHeaderAccount.d.ts +27 -0
  3. package/dist/src/components/kompasid-header-account/KompasHeaderAccount.js +233 -0
  4. package/dist/src/components/kompasid-header-account/KompasHeaderAccount.js.map +1 -0
  5. package/dist/src/components/kompasid-header-account/types.d.ts +8 -0
  6. package/dist/src/components/kompasid-header-account/types.js +2 -0
  7. package/dist/src/components/kompasid-header-account/types.js.map +1 -0
  8. package/dist/src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.d.ts +13 -0
  9. package/dist/src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js +172 -0
  10. package/dist/src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js.map +1 -0
  11. package/dist/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.d.ts +37 -0
  12. package/dist/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.js +185 -0
  13. package/dist/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.js.map +1 -0
  14. package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.d.ts +12 -0
  15. package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js +172 -0
  16. package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js.map +1 -0
  17. package/dist/src/components/kompasid-paywall/KompasPaywall.js +5 -20
  18. package/dist/src/components/kompasid-paywall/KompasPaywall.js.map +1 -1
  19. package/dist/src/components/kompasid-paywall/types.d.ts +4 -0
  20. package/dist/src/components/kompasid-paywall/types.js.map +1 -1
  21. package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js +56 -30
  22. package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js.map +1 -1
  23. package/dist/src/index.d.ts +1 -0
  24. package/dist/src/index.js +1 -0
  25. package/dist/src/index.js.map +1 -1
  26. package/dist/src/utils/text.d.ts +2 -0
  27. package/dist/src/utils/text.js +9 -0
  28. package/dist/src/utils/text.js.map +1 -0
  29. package/dist/tailwind/tailwind.js +186 -4
  30. package/dist/tailwind/tailwind.js.map +1 -1
  31. package/dist/tsconfig.tsbuildinfo +1 -1
  32. package/package.json +1 -1
  33. package/src/components/kompasid-header-account/KompasHeaderAccount.ts +197 -0
  34. package/src/components/kompasid-header-account/types.ts +8 -0
  35. package/src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.ts +177 -0
  36. package/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.ts +172 -0
  37. package/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts +161 -0
  38. package/src/components/kompasid-paywall/KompasPaywall.ts +5 -20
  39. package/src/components/kompasid-paywall/types.ts +4 -0
  40. package/src/components/kompasid-paywall-body/KompasPaywallBody.ts +64 -38
  41. package/src/index.ts +1 -0
  42. package/src/utils/text.ts +9 -0
  43. package/tailwind/tailwind.css +177 -4
  44. package/tailwind/tailwind.ts +186 -4
@@ -618,6 +618,11 @@ video {
618
618
  margin: auto;
619
619
  }
620
620
 
621
+ .mx-1 {
622
+ margin-left: 0.25rem;
623
+ margin-right: 0.25rem;
624
+ }
625
+
621
626
  .mx-2 {
622
627
  margin-left: 0.5rem;
623
628
  margin-right: 0.5rem;
@@ -680,6 +685,10 @@ video {
680
685
  margin-bottom: 1rem;
681
686
  }
682
687
 
688
+ .mb-5 {
689
+ margin-bottom: 1.25rem;
690
+ }
691
+
683
692
  .ml-0 {
684
693
  margin-left: 0px;
685
694
  }
@@ -776,6 +785,18 @@ video {
776
785
  height: 2.5rem;
777
786
  }
778
787
 
788
+ .h-16 {
789
+ height: 4rem;
790
+ }
791
+
792
+ .h-2 {
793
+ height: 0.5rem;
794
+ }
795
+
796
+ .h-2\.5 {
797
+ height: 0.625rem;
798
+ }
799
+
779
800
  .h-20 {
780
801
  height: 5rem;
781
802
  }
@@ -796,6 +817,10 @@ video {
796
817
  height: 1.25rem;
797
818
  }
798
819
 
820
+ .h-6 {
821
+ height: 1.5rem;
822
+ }
823
+
799
824
  .h-8 {
800
825
  height: 2rem;
801
826
  }
@@ -808,6 +833,10 @@ video {
808
833
  height: 17px;
809
834
  }
810
835
 
836
+ .h-\[49px\] {
837
+ height: 49px;
838
+ }
839
+
811
840
  .h-\[68px\] {
812
841
  height: 68px;
813
842
  }
@@ -837,6 +866,18 @@ video {
837
866
  width: 2.5rem;
838
867
  }
839
868
 
869
+ .w-16 {
870
+ width: 4rem;
871
+ }
872
+
873
+ .w-2 {
874
+ width: 0.5rem;
875
+ }
876
+
877
+ .w-2\.5 {
878
+ width: 0.625rem;
879
+ }
880
+
840
881
  .w-20 {
841
882
  width: 5rem;
842
883
  }
@@ -849,10 +890,6 @@ video {
849
890
  width: 1rem;
850
891
  }
851
892
 
852
- .w-4\/5 {
853
- width: 80%;
854
- }
855
-
856
893
  .w-40 {
857
894
  width: 10rem;
858
895
  }
@@ -861,10 +898,18 @@ video {
861
898
  width: 1.25rem;
862
899
  }
863
900
 
901
+ .w-6 {
902
+ width: 1.5rem;
903
+ }
904
+
864
905
  .w-60 {
865
906
  width: 15rem;
866
907
  }
867
908
 
909
+ .w-76 {
910
+ width: 19rem;
911
+ }
912
+
868
913
  .w-8 {
869
914
  width: 2rem;
870
915
  }
@@ -921,6 +966,10 @@ video {
921
966
  flex: none;
922
967
  }
923
968
 
969
+ .flex-shrink-0 {
970
+ flex-shrink: 0;
971
+ }
972
+
924
973
  .shrink-0 {
925
974
  flex-shrink: 0;
926
975
  }
@@ -938,6 +987,16 @@ video {
938
987
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
939
988
  }
940
989
 
990
+ @keyframes pulse {
991
+ 50% {
992
+ opacity: .5;
993
+ }
994
+ }
995
+
996
+ .animate-pulse {
997
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
998
+ }
999
+
941
1000
  .cursor-pointer {
942
1001
  cursor: pointer;
943
1002
  }
@@ -1002,6 +1061,10 @@ video {
1002
1061
  justify-content: flex-start;
1003
1062
  }
1004
1063
 
1064
+ .justify-end {
1065
+ justify-content: flex-end;
1066
+ }
1067
+
1005
1068
  .justify-center {
1006
1069
  justify-content: center;
1007
1070
  }
@@ -1026,6 +1089,10 @@ video {
1026
1089
  gap: 2rem;
1027
1090
  }
1028
1091
 
1092
+ .gap-y-2 {
1093
+ row-gap: 0.5rem;
1094
+ }
1095
+
1029
1096
  .gap-y-4 {
1030
1097
  row-gap: 1rem;
1031
1098
  }
@@ -1074,6 +1141,12 @@ video {
1074
1141
  overflow: hidden;
1075
1142
  }
1076
1143
 
1144
+ .truncate {
1145
+ overflow: hidden;
1146
+ text-overflow: ellipsis;
1147
+ white-space: nowrap;
1148
+ }
1149
+
1077
1150
  .whitespace-nowrap {
1078
1151
  white-space: nowrap;
1079
1152
  }
@@ -1086,6 +1159,10 @@ video {
1086
1159
  border-radius: 10px;
1087
1160
  }
1088
1161
 
1162
+ .rounded-full {
1163
+ border-radius: 9999px;
1164
+ }
1165
+
1089
1166
  .rounded-lg {
1090
1167
  border-radius: 0.5rem;
1091
1168
  }
@@ -1094,6 +1171,10 @@ video {
1094
1171
  border-radius: 0.375rem;
1095
1172
  }
1096
1173
 
1174
+ .rounded-sm {
1175
+ border-radius: 0.125rem;
1176
+ }
1177
+
1097
1178
  .rounded-xl {
1098
1179
  border-radius: 0.75rem;
1099
1180
  }
@@ -1163,6 +1244,11 @@ video {
1163
1244
  border-color: rgb(238 238 238 / var(--tw-border-opacity));
1164
1245
  }
1165
1246
 
1247
+ .border-grey-300 {
1248
+ --tw-border-opacity: 1;
1249
+ border-color: rgb(221 221 221 / var(--tw-border-opacity));
1250
+ }
1251
+
1166
1252
  .border-grey-400 {
1167
1253
  --tw-border-opacity: 1;
1168
1254
  border-color: rgb(153 153 153 / var(--tw-border-opacity));
@@ -1248,6 +1334,16 @@ video {
1248
1334
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1249
1335
  }
1250
1336
 
1337
+ .bg-grey-200 {
1338
+ --tw-bg-opacity: 1;
1339
+ background-color: rgb(238 238 238 / var(--tw-bg-opacity));
1340
+ }
1341
+
1342
+ .bg-grey-300 {
1343
+ --tw-bg-opacity: 1;
1344
+ background-color: rgb(221 221 221 / var(--tw-bg-opacity));
1345
+ }
1346
+
1251
1347
  .bg-grey-600 {
1252
1348
  --tw-bg-opacity: 1;
1253
1349
  background-color: rgb(51 51 51 / var(--tw-bg-opacity));
@@ -1289,11 +1385,20 @@ video {
1289
1385
  padding: 1rem;
1290
1386
  }
1291
1387
 
1388
+ .p-5 {
1389
+ padding: 1.25rem;
1390
+ }
1391
+
1292
1392
  .px-2 {
1293
1393
  padding-left: 0.5rem;
1294
1394
  padding-right: 0.5rem;
1295
1395
  }
1296
1396
 
1397
+ .px-3 {
1398
+ padding-left: 0.75rem;
1399
+ padding-right: 0.75rem;
1400
+ }
1401
+
1297
1402
  .px-4 {
1298
1403
  padding-left: 1rem;
1299
1404
  padding-right: 1rem;
@@ -1362,6 +1467,10 @@ video {
1362
1467
  padding-bottom: 0.5rem;
1363
1468
  }
1364
1469
 
1470
+ .pb-20 {
1471
+ padding-bottom: 5rem;
1472
+ }
1473
+
1365
1474
  .pb-3 {
1366
1475
  padding-bottom: 0.75rem;
1367
1476
  }
@@ -1386,6 +1495,14 @@ video {
1386
1495
  padding-bottom: 2rem;
1387
1496
  }
1388
1497
 
1498
+ .pl-0 {
1499
+ padding-left: 0px;
1500
+ }
1501
+
1502
+ .pl-0\.5 {
1503
+ padding-left: 0.125rem;
1504
+ }
1505
+
1389
1506
  .pl-1 {
1390
1507
  padding-left: 0.25rem;
1391
1508
  }
@@ -1398,6 +1515,10 @@ video {
1398
1515
  padding-left: 1rem;
1399
1516
  }
1400
1517
 
1518
+ .pl-px {
1519
+ padding-left: 1px;
1520
+ }
1521
+
1401
1522
  .pr-14 {
1402
1523
  padding-right: 3.5rem;
1403
1524
  }
@@ -1406,6 +1527,10 @@ video {
1406
1527
  padding-right: 0.5rem;
1407
1528
  }
1408
1529
 
1530
+ .pr-3 {
1531
+ padding-right: 0.75rem;
1532
+ }
1533
+
1409
1534
  .pt-0 {
1410
1535
  padding-top: 0px;
1411
1536
  }
@@ -1442,10 +1567,19 @@ video {
1442
1567
  text-align: start;
1443
1568
  }
1444
1569
 
1570
+ .text-end {
1571
+ text-align: end;
1572
+ }
1573
+
1445
1574
  .font-serif {
1446
1575
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
1447
1576
  }
1448
1577
 
1578
+ .text-2xl {
1579
+ font-size: 1.5rem;
1580
+ line-height: 2rem;
1581
+ }
1582
+
1449
1583
  .text-\[11px\] {
1450
1584
  font-size: 11px;
1451
1585
  }
@@ -1470,6 +1604,10 @@ video {
1470
1604
  line-height: 1rem;
1471
1605
  }
1472
1606
 
1607
+ .text-xxs {
1608
+ font-size: 0.625rem;
1609
+ }
1610
+
1473
1611
  .font-bold {
1474
1612
  font-weight: 700;
1475
1613
  }
@@ -1482,6 +1620,10 @@ video {
1482
1620
  font-weight: 400;
1483
1621
  }
1484
1622
 
1623
+ .capitalize {
1624
+ text-transform: capitalize;
1625
+ }
1626
+
1485
1627
  .leading-4 {
1486
1628
  line-height: 1rem;
1487
1629
  }
@@ -1608,13 +1750,40 @@ video {
1608
1750
  text-decoration-line: underline;
1609
1751
  }
1610
1752
 
1753
+ .shadow-lg {
1754
+ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
1755
+ --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
1756
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1757
+ }
1758
+
1611
1759
  .shadow-sm {
1612
1760
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1613
1761
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1614
1762
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1615
1763
  }
1616
1764
 
1765
+ .transition {
1766
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
1767
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1768
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
1769
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1770
+ transition-duration: 150ms;
1771
+ }
1772
+
1773
+ .hover\:underline:hover {
1774
+ text-decoration-line: underline;
1775
+ }
1776
+
1777
+ .focus\:outline-none:focus {
1778
+ outline: 2px solid transparent;
1779
+ outline-offset: 2px;
1780
+ }
1781
+
1617
1782
  @media (min-width: 640px) {
1783
+ .sm\:max-w-lg {
1784
+ max-width: 32rem;
1785
+ }
1786
+
1618
1787
  .sm\:grid-cols-4 {
1619
1788
  grid-template-columns: repeat(4, minmax(0, 1fr));
1620
1789
  }
@@ -1753,6 +1922,10 @@ video {
1753
1922
  max-width: 137px;
1754
1923
  }
1755
1924
 
1925
+ .md\:max-w-full {
1926
+ max-width: 100%;
1927
+ }
1928
+
1756
1929
  .md\:max-w-sm {
1757
1930
  max-width: 24rem;
1758
1931
  }