@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
@@ -628,6 +628,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
628
628
  margin: auto;
629
629
  }
630
630
 
631
+ .mx-1 {
632
+ margin-left: 0.25rem;
633
+ margin-right: 0.25rem;
634
+ }
635
+
631
636
  .mx-2 {
632
637
  margin-left: 0.5rem;
633
638
  margin-right: 0.5rem;
@@ -690,6 +695,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
690
695
  margin-bottom: 1rem;
691
696
  }
692
697
 
698
+ .mb-5 {
699
+ margin-bottom: 1.25rem;
700
+ }
701
+
693
702
  .ml-0 {
694
703
  margin-left: 0px;
695
704
  }
@@ -786,6 +795,18 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
786
795
  height: 2.5rem;
787
796
  }
788
797
 
798
+ .h-16 {
799
+ height: 4rem;
800
+ }
801
+
802
+ .h-2 {
803
+ height: 0.5rem;
804
+ }
805
+
806
+ .h-2\\.5 {
807
+ height: 0.625rem;
808
+ }
809
+
789
810
  .h-20 {
790
811
  height: 5rem;
791
812
  }
@@ -806,6 +827,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
806
827
  height: 1.25rem;
807
828
  }
808
829
 
830
+ .h-6 {
831
+ height: 1.5rem;
832
+ }
833
+
809
834
  .h-8 {
810
835
  height: 2rem;
811
836
  }
@@ -818,6 +843,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
818
843
  height: 17px;
819
844
  }
820
845
 
846
+ .h-\\[49px\\] {
847
+ height: 49px;
848
+ }
849
+
821
850
  .h-\\[68px\\] {
822
851
  height: 68px;
823
852
  }
@@ -847,6 +876,18 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
847
876
  width: 2.5rem;
848
877
  }
849
878
 
879
+ .w-16 {
880
+ width: 4rem;
881
+ }
882
+
883
+ .w-2 {
884
+ width: 0.5rem;
885
+ }
886
+
887
+ .w-2\\.5 {
888
+ width: 0.625rem;
889
+ }
890
+
850
891
  .w-20 {
851
892
  width: 5rem;
852
893
  }
@@ -859,10 +900,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
859
900
  width: 1rem;
860
901
  }
861
902
 
862
- .w-4\\/5 {
863
- width: 80%;
864
- }
865
-
866
903
  .w-40 {
867
904
  width: 10rem;
868
905
  }
@@ -871,10 +908,18 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
871
908
  width: 1.25rem;
872
909
  }
873
910
 
911
+ .w-6 {
912
+ width: 1.5rem;
913
+ }
914
+
874
915
  .w-60 {
875
916
  width: 15rem;
876
917
  }
877
918
 
919
+ .w-76 {
920
+ width: 19rem;
921
+ }
922
+
878
923
  .w-8 {
879
924
  width: 2rem;
880
925
  }
@@ -931,6 +976,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
931
976
  flex: none;
932
977
  }
933
978
 
979
+ .flex-shrink-0 {
980
+ flex-shrink: 0;
981
+ }
982
+
934
983
  .shrink-0 {
935
984
  flex-shrink: 0;
936
985
  }
@@ -952,6 +1001,16 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
952
1001
  scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
953
1002
  }
954
1003
 
1004
+ @keyframes pulse {
1005
+ 50% {
1006
+ opacity: 0.5;
1007
+ }
1008
+ }
1009
+
1010
+ .animate-pulse {
1011
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
1012
+ }
1013
+
955
1014
  .cursor-pointer {
956
1015
  cursor: pointer;
957
1016
  }
@@ -1016,6 +1075,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1016
1075
  justify-content: flex-start;
1017
1076
  }
1018
1077
 
1078
+ .justify-end {
1079
+ justify-content: flex-end;
1080
+ }
1081
+
1019
1082
  .justify-center {
1020
1083
  justify-content: center;
1021
1084
  }
@@ -1040,6 +1103,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1040
1103
  gap: 2rem;
1041
1104
  }
1042
1105
 
1106
+ .gap-y-2 {
1107
+ row-gap: 0.5rem;
1108
+ }
1109
+
1043
1110
  .gap-y-4 {
1044
1111
  row-gap: 1rem;
1045
1112
  }
@@ -1088,6 +1155,12 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1088
1155
  overflow: hidden;
1089
1156
  }
1090
1157
 
1158
+ .truncate {
1159
+ overflow: hidden;
1160
+ text-overflow: ellipsis;
1161
+ white-space: nowrap;
1162
+ }
1163
+
1091
1164
  .whitespace-nowrap {
1092
1165
  white-space: nowrap;
1093
1166
  }
@@ -1100,6 +1173,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1100
1173
  border-radius: 10px;
1101
1174
  }
1102
1175
 
1176
+ .rounded-full {
1177
+ border-radius: 9999px;
1178
+ }
1179
+
1103
1180
  .rounded-lg {
1104
1181
  border-radius: 0.5rem;
1105
1182
  }
@@ -1108,6 +1185,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1108
1185
  border-radius: 0.375rem;
1109
1186
  }
1110
1187
 
1188
+ .rounded-sm {
1189
+ border-radius: 0.125rem;
1190
+ }
1191
+
1111
1192
  .rounded-xl {
1112
1193
  border-radius: 0.75rem;
1113
1194
  }
@@ -1177,6 +1258,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1177
1258
  border-color: rgb(238 238 238 / var(--tw-border-opacity));
1178
1259
  }
1179
1260
 
1261
+ .border-grey-300 {
1262
+ --tw-border-opacity: 1;
1263
+ border-color: rgb(221 221 221 / var(--tw-border-opacity));
1264
+ }
1265
+
1180
1266
  .border-grey-400 {
1181
1267
  --tw-border-opacity: 1;
1182
1268
  border-color: rgb(153 153 153 / var(--tw-border-opacity));
@@ -1262,6 +1348,16 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1262
1348
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1263
1349
  }
1264
1350
 
1351
+ .bg-grey-200 {
1352
+ --tw-bg-opacity: 1;
1353
+ background-color: rgb(238 238 238 / var(--tw-bg-opacity));
1354
+ }
1355
+
1356
+ .bg-grey-300 {
1357
+ --tw-bg-opacity: 1;
1358
+ background-color: rgb(221 221 221 / var(--tw-bg-opacity));
1359
+ }
1360
+
1265
1361
  .bg-grey-600 {
1266
1362
  --tw-bg-opacity: 1;
1267
1363
  background-color: rgb(51 51 51 / var(--tw-bg-opacity));
@@ -1303,11 +1399,20 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1303
1399
  padding: 1rem;
1304
1400
  }
1305
1401
 
1402
+ .p-5 {
1403
+ padding: 1.25rem;
1404
+ }
1405
+
1306
1406
  .px-2 {
1307
1407
  padding-left: 0.5rem;
1308
1408
  padding-right: 0.5rem;
1309
1409
  }
1310
1410
 
1411
+ .px-3 {
1412
+ padding-left: 0.75rem;
1413
+ padding-right: 0.75rem;
1414
+ }
1415
+
1311
1416
  .px-4 {
1312
1417
  padding-left: 1rem;
1313
1418
  padding-right: 1rem;
@@ -1376,6 +1481,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1376
1481
  padding-bottom: 0.5rem;
1377
1482
  }
1378
1483
 
1484
+ .pb-20 {
1485
+ padding-bottom: 5rem;
1486
+ }
1487
+
1379
1488
  .pb-3 {
1380
1489
  padding-bottom: 0.75rem;
1381
1490
  }
@@ -1400,6 +1509,14 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1400
1509
  padding-bottom: 2rem;
1401
1510
  }
1402
1511
 
1512
+ .pl-0 {
1513
+ padding-left: 0px;
1514
+ }
1515
+
1516
+ .pl-0\\.5 {
1517
+ padding-left: 0.125rem;
1518
+ }
1519
+
1403
1520
  .pl-1 {
1404
1521
  padding-left: 0.25rem;
1405
1522
  }
@@ -1412,6 +1529,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1412
1529
  padding-left: 1rem;
1413
1530
  }
1414
1531
 
1532
+ .pl-px {
1533
+ padding-left: 1px;
1534
+ }
1535
+
1415
1536
  .pr-14 {
1416
1537
  padding-right: 3.5rem;
1417
1538
  }
@@ -1420,6 +1541,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1420
1541
  padding-right: 0.5rem;
1421
1542
  }
1422
1543
 
1544
+ .pr-3 {
1545
+ padding-right: 0.75rem;
1546
+ }
1547
+
1423
1548
  .pt-0 {
1424
1549
  padding-top: 0px;
1425
1550
  }
@@ -1456,10 +1581,19 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1456
1581
  text-align: start;
1457
1582
  }
1458
1583
 
1584
+ .text-end {
1585
+ text-align: end;
1586
+ }
1587
+
1459
1588
  .font-serif {
1460
1589
  font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
1461
1590
  }
1462
1591
 
1592
+ .text-2xl {
1593
+ font-size: 1.5rem;
1594
+ line-height: 2rem;
1595
+ }
1596
+
1463
1597
  .text-\\[11px\\] {
1464
1598
  font-size: 11px;
1465
1599
  }
@@ -1484,6 +1618,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1484
1618
  line-height: 1rem;
1485
1619
  }
1486
1620
 
1621
+ .text-xxs {
1622
+ font-size: 0.625rem;
1623
+ }
1624
+
1487
1625
  .font-bold {
1488
1626
  font-weight: 700;
1489
1627
  }
@@ -1496,6 +1634,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1496
1634
  font-weight: 400;
1497
1635
  }
1498
1636
 
1637
+ .capitalize {
1638
+ text-transform: capitalize;
1639
+ }
1640
+
1499
1641
  .leading-4 {
1500
1642
  line-height: 1rem;
1501
1643
  }
@@ -1622,6 +1764,15 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1622
1764
  text-decoration-line: underline;
1623
1765
  }
1624
1766
 
1767
+ .shadow-lg {
1768
+ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
1769
+ 0 4px 6px -4px rgb(0 0 0 / 0.1);
1770
+ --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
1771
+ 0 4px 6px -4px var(--tw-shadow-color);
1772
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
1773
+ var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1774
+ }
1775
+
1625
1776
  .shadow-sm {
1626
1777
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1627
1778
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -1629,7 +1780,34 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1629
1780
  var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1630
1781
  }
1631
1782
 
1783
+ .transition {
1784
+ transition-property: color, background-color, border-color,
1785
+ text-decoration-color, fill, stroke, opacity, box-shadow, transform,
1786
+ filter, -webkit-backdrop-filter;
1787
+ transition-property: color, background-color, border-color,
1788
+ text-decoration-color, fill, stroke, opacity, box-shadow, transform,
1789
+ filter, backdrop-filter;
1790
+ transition-property: color, background-color, border-color,
1791
+ text-decoration-color, fill, stroke, opacity, box-shadow, transform,
1792
+ filter, backdrop-filter, -webkit-backdrop-filter;
1793
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1794
+ transition-duration: 150ms;
1795
+ }
1796
+
1797
+ .hover\\:underline:hover {
1798
+ text-decoration-line: underline;
1799
+ }
1800
+
1801
+ .focus\\:outline-none:focus {
1802
+ outline: 2px solid transparent;
1803
+ outline-offset: 2px;
1804
+ }
1805
+
1632
1806
  @media (min-width: 640px) {
1807
+ .sm\\:max-w-lg {
1808
+ max-width: 32rem;
1809
+ }
1810
+
1633
1811
  .sm\\:grid-cols-4 {
1634
1812
  grid-template-columns: repeat(4, minmax(0, 1fr));
1635
1813
  }
@@ -1768,6 +1946,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1768
1946
  max-width: 137px;
1769
1947
  }
1770
1948
 
1949
+ .md\\:max-w-full {
1950
+ max-width: 100%;
1951
+ }
1952
+
1771
1953
  .md\\:max-w-sm {
1772
1954
  max-width: 24rem;
1773
1955
  }