@kompasid/lit-web-components 0.4.5 → 0.5.1

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 (53) hide show
  1. package/assets/font-awesome.ts +7 -4
  2. package/demo/index.html +147 -118
  3. package/dist/assets/font-awesome.d.ts +1 -1
  4. package/dist/assets/font-awesome.js +7 -4
  5. package/dist/assets/font-awesome.js.map +1 -1
  6. package/dist/src/components/kompasid-freewall/KompasFreewall.d.ts +91 -0
  7. package/dist/src/components/kompasid-freewall/KompasFreewall.js +261 -0
  8. package/dist/src/components/kompasid-freewall/KompasFreewall.js.map +1 -0
  9. package/dist/src/components/kompasid-freewall/types.d.ts +10 -0
  10. package/dist/src/components/kompasid-freewall/types.js +2 -0
  11. package/dist/src/components/kompasid-freewall/types.js.map +1 -0
  12. package/dist/src/components/kompasid-freewall-body/KompasFreewallBody.d.ts +33 -0
  13. package/dist/src/components/kompasid-freewall-body/KompasFreewallBody.js +225 -0
  14. package/dist/src/components/kompasid-freewall-body/KompasFreewallBody.js.map +1 -0
  15. package/dist/src/components/kompasid-freewall-head/KompasFreewallHead.d.ts +37 -0
  16. package/dist/src/components/kompasid-freewall-head/KompasFreewallHead.js +127 -0
  17. package/dist/src/components/kompasid-freewall-head/KompasFreewallHead.js.map +1 -0
  18. package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.d.ts +0 -1
  19. package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js +2 -7
  20. package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js.map +1 -1
  21. package/dist/src/components/kompasid-paywall-video/KompasPaywallVideo.d.ts +12 -13
  22. package/dist/src/components/kompasid-paywall-video/KompasPaywallVideo.js +30 -49
  23. package/dist/src/components/kompasid-paywall-video/KompasPaywallVideo.js.map +1 -1
  24. package/dist/src/index.d.ts +1 -0
  25. package/dist/src/index.js +1 -0
  26. package/dist/src/index.js.map +1 -1
  27. package/dist/src/utils/cta.d.ts +6 -0
  28. package/dist/src/utils/cta.js +18 -0
  29. package/dist/src/utils/cta.js.map +1 -0
  30. package/dist/src/utils/generateCopyDuration.d.ts +1 -0
  31. package/dist/src/utils/generateCopyDuration.js +15 -0
  32. package/dist/src/utils/generateCopyDuration.js.map +1 -0
  33. package/dist/src/utils/googleFont.js +1 -0
  34. package/dist/src/utils/googleFont.js.map +1 -1
  35. package/dist/tailwind/tailwind.js +223 -0
  36. package/dist/tailwind/tailwind.js.map +1 -1
  37. package/dist/tsconfig.tsbuildinfo +1 -1
  38. package/package.json +2 -1
  39. package/src/components/kompasid-freewall/KompasFreewall.ts +211 -0
  40. package/src/components/kompasid-freewall/readme.md +63 -0
  41. package/src/components/kompasid-freewall/types.ts +10 -0
  42. package/src/components/kompasid-freewall-body/KompasFreewallBody.ts +221 -0
  43. package/src/components/kompasid-freewall-body/readme.md +13 -0
  44. package/src/components/kompasid-freewall-head/KompasFreewallHead.ts +107 -0
  45. package/src/components/kompasid-freewall-head/readme.md +17 -0
  46. package/src/components/kompasid-paywall-body/KompasPaywallBody.ts +2 -8
  47. package/src/components/kompasid-paywall-video/KompasPaywallVideo.ts +36 -51
  48. package/src/index.ts +1 -0
  49. package/src/utils/cta.ts +25 -0
  50. package/src/utils/generateCopyDuration.ts +14 -0
  51. package/src/utils/googleFont.ts +2 -0
  52. package/tailwind/tailwind.css +223 -0
  53. package/tailwind/tailwind.ts +223 -0
@@ -544,6 +544,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
544
544
  --tw-backdrop-sepia: ;
545
545
  }
546
546
 
547
+ .collapse {
548
+ visibility: collapse;
549
+ }
550
+
547
551
  .static {
548
552
  position: static;
549
553
  }
@@ -592,6 +596,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
592
596
  z-index: 0;
593
597
  }
594
598
 
599
+ .z-10 {
600
+ z-index: 10;
601
+ }
602
+
595
603
  .z-20 {
596
604
  z-index: 20;
597
605
  }
@@ -634,6 +642,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
634
642
  margin-bottom: 1.5rem;
635
643
  }
636
644
 
645
+ .-ml-2 {
646
+ margin-left: -0.5rem;
647
+ }
648
+
637
649
  .-mt-24 {
638
650
  margin-top: -6rem;
639
651
  }
@@ -654,6 +666,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
654
666
  margin-bottom: 0.5rem;
655
667
  }
656
668
 
669
+ .mb-4 {
670
+ margin-bottom: 1rem;
671
+ }
672
+
657
673
  .ml-0 {
658
674
  margin-left: 0px;
659
675
  }
@@ -662,6 +678,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
662
678
  margin-left: 0.125rem;
663
679
  }
664
680
 
681
+ .ml-1 {
682
+ margin-left: 0.25rem;
683
+ }
684
+
665
685
  .ml-8 {
666
686
  margin-left: 2rem;
667
687
  }
@@ -710,6 +730,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
710
730
  margin-top: 2rem;
711
731
  }
712
732
 
733
+ .block {
734
+ display: block;
735
+ }
736
+
713
737
  .flex {
714
738
  display: flex;
715
739
  }
@@ -746,6 +770,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
746
770
  height: 2rem;
747
771
  }
748
772
 
773
+ .h-9 {
774
+ height: 2.25rem;
775
+ }
776
+
749
777
  .h-auto {
750
778
  height: auto;
751
779
  }
@@ -786,10 +814,18 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
786
814
  width: 1.25rem;
787
815
  }
788
816
 
817
+ .w-60 {
818
+ width: 15rem;
819
+ }
820
+
789
821
  .w-8 {
790
822
  width: 2rem;
791
823
  }
792
824
 
825
+ .w-9 {
826
+ width: 2.25rem;
827
+ }
828
+
793
829
  .w-\\[120px\\] {
794
830
  width: 120px;
795
831
  }
@@ -802,6 +838,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
802
838
  width: 296px;
803
839
  }
804
840
 
841
+ .w-\\[328px\\] {
842
+ width: 328px;
843
+ }
844
+
805
845
  .w-auto {
806
846
  width: auto;
807
847
  }
@@ -814,6 +854,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
814
854
  max-width: 80rem;
815
855
  }
816
856
 
857
+ .max-w-\\[280px\\] {
858
+ max-width: 280px;
859
+ }
860
+
817
861
  .max-w-screen-md {
818
862
  max-width: 768px;
819
863
  }
@@ -899,6 +943,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
899
943
  place-items: center;
900
944
  }
901
945
 
946
+ .items-start {
947
+ align-items: flex-start;
948
+ }
949
+
902
950
  .items-center {
903
951
  align-items: center;
904
952
  }
@@ -935,26 +983,52 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
935
983
  row-gap: 1rem;
936
984
  }
937
985
 
986
+ .space-x-3 > :not([hidden]) ~ :not([hidden]) {
987
+ --tw-space-x-reverse: 0;
988
+ margin-right: calc(0.75rem * var(--tw-space-x-reverse));
989
+ margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
990
+ }
991
+
938
992
  .space-x-4 > :not([hidden]) ~ :not([hidden]) {
939
993
  --tw-space-x-reverse: 0;
940
994
  margin-right: calc(1rem * var(--tw-space-x-reverse));
941
995
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
942
996
  }
943
997
 
998
+ .space-y-1 > :not([hidden]) ~ :not([hidden]) {
999
+ --tw-space-y-reverse: 0;
1000
+ margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
1001
+ margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
1002
+ }
1003
+
944
1004
  .space-y-2 > :not([hidden]) ~ :not([hidden]) {
945
1005
  --tw-space-y-reverse: 0;
946
1006
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
947
1007
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
948
1008
  }
949
1009
 
1010
+ .space-y-4 > :not([hidden]) ~ :not([hidden]) {
1011
+ --tw-space-y-reverse: 0;
1012
+ margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
1013
+ margin-bottom: calc(1rem * var(--tw-space-y-reverse));
1014
+ }
1015
+
950
1016
  .self-center {
951
1017
  align-self: center;
952
1018
  }
953
1019
 
1020
+ .whitespace-nowrap {
1021
+ white-space: nowrap;
1022
+ }
1023
+
954
1024
  .rounded {
955
1025
  border-radius: 0.25rem;
956
1026
  }
957
1027
 
1028
+ .rounded-\\[10px\\] {
1029
+ border-radius: 10px;
1030
+ }
1031
+
958
1032
  .rounded-lg {
959
1033
  border-radius: 0.5rem;
960
1034
  }
@@ -997,6 +1071,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
997
1071
  border-color: rgb(147 200 253 / var(--tw-border-opacity));
998
1072
  }
999
1073
 
1074
+ .border-brand-1 {
1075
+ --tw-border-opacity: 1;
1076
+ border-color: rgb(0 85 154 / var(--tw-border-opacity));
1077
+ }
1078
+
1000
1079
  .border-dark-6 {
1001
1080
  --tw-border-opacity: 1;
1002
1081
  border-color: rgb(46 46 46 / var(--tw-border-opacity));
@@ -1052,6 +1131,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1052
1131
  background-color: rgb(225 240 255 / var(--tw-bg-opacity));
1053
1132
  }
1054
1133
 
1134
+ .bg-blue-200 {
1135
+ --tw-bg-opacity: 1;
1136
+ background-color: rgb(147 200 253 / var(--tw-bg-opacity));
1137
+ }
1138
+
1055
1139
  .bg-blue-600 {
1056
1140
  --tw-bg-opacity: 1;
1057
1141
  background-color: rgb(3 86 168 / var(--tw-bg-opacity));
@@ -1163,6 +1247,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1163
1247
  padding-right: 2rem;
1164
1248
  }
1165
1249
 
1250
+ .px-\\[10px\\] {
1251
+ padding-left: 10px;
1252
+ padding-right: 10px;
1253
+ }
1254
+
1166
1255
  .py-0 {
1167
1256
  padding-top: 0px;
1168
1257
  padding-bottom: 0px;
@@ -1213,6 +1302,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1213
1302
  padding-bottom: 1rem;
1214
1303
  }
1215
1304
 
1305
+ .pb-5 {
1306
+ padding-bottom: 1.25rem;
1307
+ }
1308
+
1216
1309
  .pb-6 {
1217
1310
  padding-bottom: 1.5rem;
1218
1311
  }
@@ -1253,10 +1346,18 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1253
1346
  padding-top: 2.5rem;
1254
1347
  }
1255
1348
 
1349
+ .pt-4 {
1350
+ padding-top: 1rem;
1351
+ }
1352
+
1256
1353
  .pt-6 {
1257
1354
  padding-top: 1.5rem;
1258
1355
  }
1259
1356
 
1357
+ .pt-\\[5px\\] {
1358
+ padding-top: 5px;
1359
+ }
1360
+
1260
1361
  .text-left {
1261
1362
  text-align: left;
1262
1363
  }
@@ -1265,15 +1366,28 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1265
1366
  text-align: center;
1266
1367
  }
1267
1368
 
1369
+ .text-start {
1370
+ text-align: start;
1371
+ }
1372
+
1268
1373
  .font-serif {
1269
1374
  font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
1270
1375
  }
1271
1376
 
1377
+ .text-\\[11px\\] {
1378
+ font-size: 11px;
1379
+ }
1380
+
1272
1381
  .text-base {
1273
1382
  font-size: 1rem;
1274
1383
  line-height: 1.5rem;
1275
1384
  }
1276
1385
 
1386
+ .text-lg {
1387
+ font-size: 1.125rem;
1388
+ line-height: 1.75rem;
1389
+ }
1390
+
1277
1391
  .text-sm {
1278
1392
  font-size: 0.875rem;
1279
1393
  line-height: 1.25rem;
@@ -1288,6 +1402,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1288
1402
  font-weight: 700;
1289
1403
  }
1290
1404
 
1405
+ .font-medium {
1406
+ font-weight: 500;
1407
+ }
1408
+
1291
1409
  .font-normal {
1292
1410
  font-weight: 400;
1293
1411
  }
@@ -1304,6 +1422,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1304
1422
  line-height: 22px;
1305
1423
  }
1306
1424
 
1425
+ .leading-\\[30px\\] {
1426
+ line-height: 30px;
1427
+ }
1428
+
1307
1429
  .leading-none {
1308
1430
  line-height: 1;
1309
1431
  }
@@ -1336,6 +1458,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1336
1458
  color: rgb(90 171 252 / var(--tw-text-opacity));
1337
1459
  }
1338
1460
 
1461
+ .text-blue-500 {
1462
+ --tw-text-opacity: 1;
1463
+ color: rgb(4 104 203 / var(--tw-text-opacity));
1464
+ }
1465
+
1339
1466
  .text-blue-600 {
1340
1467
  --tw-text-opacity: 1;
1341
1468
  color: rgb(3 86 168 / var(--tw-text-opacity));
@@ -1438,6 +1565,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1438
1565
  margin-bottom: 0px;
1439
1566
  }
1440
1567
 
1568
+ .md\\:mb-5 {
1569
+ margin-bottom: 1.25rem;
1570
+ }
1571
+
1441
1572
  .md\\:ml-1 {
1442
1573
  margin-left: 0.25rem;
1443
1574
  }
@@ -1474,6 +1605,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1474
1605
  height: 3rem;
1475
1606
  }
1476
1607
 
1608
+ .md\\:min-h-\\[244px\\] {
1609
+ min-height: 244px;
1610
+ }
1611
+
1477
1612
  .md\\:w-3\\/5 {
1478
1613
  width: 60%;
1479
1614
  }
@@ -1486,14 +1621,34 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1486
1621
  width: 13rem;
1487
1622
  }
1488
1623
 
1624
+ .md\\:w-\\[350px\\] {
1625
+ width: 350px;
1626
+ }
1627
+
1628
+ .md\\:w-\\[370px\\] {
1629
+ width: 370px;
1630
+ }
1631
+
1632
+ .md\\:w-\\[374px\\] {
1633
+ width: 374px;
1634
+ }
1635
+
1489
1636
  .md\\:w-\\[400px\\] {
1490
1637
  width: 400px;
1491
1638
  }
1492
1639
 
1640
+ .md\\:w-\\[580px\\] {
1641
+ width: 580px;
1642
+ }
1643
+
1493
1644
  .md\\:w-full {
1494
1645
  width: 100%;
1495
1646
  }
1496
1647
 
1648
+ .md\\:max-w-full {
1649
+ max-width: 100%;
1650
+ }
1651
+
1497
1652
  .md\\:max-w-sm {
1498
1653
  max-width: 24rem;
1499
1654
  }
@@ -1506,6 +1661,22 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1506
1661
  flex-direction: row;
1507
1662
  }
1508
1663
 
1664
+ .md\\:justify-start {
1665
+ justify-content: flex-start;
1666
+ }
1667
+
1668
+ .md\\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
1669
+ --tw-space-x-reverse: 0;
1670
+ margin-right: calc(1.25rem * var(--tw-space-x-reverse));
1671
+ margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
1672
+ }
1673
+
1674
+ .md\\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
1675
+ --tw-space-y-reverse: 0;
1676
+ margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
1677
+ margin-bottom: calc(0px * var(--tw-space-y-reverse));
1678
+ }
1679
+
1509
1680
  .md\\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
1510
1681
  --tw-space-y-reverse: 0;
1511
1682
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1516,10 +1687,18 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1516
1687
  align-self: flex-end;
1517
1688
  }
1518
1689
 
1690
+ .md\\:rounded {
1691
+ border-radius: 0.25rem;
1692
+ }
1693
+
1519
1694
  .md\\:rounded-lg {
1520
1695
  border-radius: 0.5rem;
1521
1696
  }
1522
1697
 
1698
+ .md\\:p-5 {
1699
+ padding: 1.25rem;
1700
+ }
1701
+
1523
1702
  .md\\:px-0 {
1524
1703
  padding-left: 0px;
1525
1704
  padding-right: 0px;
@@ -1530,11 +1709,26 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1530
1709
  padding-right: 5rem;
1531
1710
  }
1532
1711
 
1712
+ .md\\:px-4 {
1713
+ padding-left: 1rem;
1714
+ padding-right: 1rem;
1715
+ }
1716
+
1717
+ .md\\:px-5 {
1718
+ padding-left: 1.25rem;
1719
+ padding-right: 1.25rem;
1720
+ }
1721
+
1533
1722
  .md\\:px-6 {
1534
1723
  padding-left: 1.5rem;
1535
1724
  padding-right: 1.5rem;
1536
1725
  }
1537
1726
 
1727
+ .md\\:py-2 {
1728
+ padding-top: 0.5rem;
1729
+ padding-bottom: 0.5rem;
1730
+ }
1731
+
1538
1732
  .md\\:py-6 {
1539
1733
  padding-top: 1.5rem;
1540
1734
  padding-bottom: 1.5rem;
@@ -1544,6 +1738,14 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1544
1738
  padding-bottom: 1rem;
1545
1739
  }
1546
1740
 
1741
+ .md\\:pb-7 {
1742
+ padding-bottom: 1.75rem;
1743
+ }
1744
+
1745
+ .md\\:pt-3 {
1746
+ padding-top: 0.75rem;
1747
+ }
1748
+
1547
1749
  .md\\:pt-8 {
1548
1750
  padding-top: 2rem;
1549
1751
  }
@@ -1607,6 +1809,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1607
1809
  margin-bottom: 0px;
1608
1810
  }
1609
1811
 
1812
+ .lg\\:mt-0 {
1813
+ margin-top: 0px;
1814
+ }
1815
+
1610
1816
  .lg\\:mt-2 {
1611
1817
  margin-top: 0.5rem;
1612
1818
  }
@@ -1623,6 +1829,14 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1623
1829
  display: none;
1624
1830
  }
1625
1831
 
1832
+ .lg\\:min-h-\\[220px\\] {
1833
+ min-height: 220px;
1834
+ }
1835
+
1836
+ .lg\\:w-\\[410px\\] {
1837
+ width: 410px;
1838
+ }
1839
+
1626
1840
  .lg\\:grid-cols-12 {
1627
1841
  grid-template-columns: repeat(12, minmax(0, 1fr));
1628
1842
  }
@@ -1639,6 +1853,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1639
1853
  flex-direction: column;
1640
1854
  }
1641
1855
 
1856
+ .lg\\:items-center {
1857
+ align-items: center;
1858
+ }
1859
+
1642
1860
  .lg\\:justify-end {
1643
1861
  justify-content: flex-end;
1644
1862
  }
@@ -1665,6 +1883,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1665
1883
  padding-right: 0px;
1666
1884
  }
1667
1885
 
1886
+ .lg\\:px-24 {
1887
+ padding-left: 6rem;
1888
+ padding-right: 6rem;
1889
+ }
1890
+
1668
1891
  .lg\\:py-10 {
1669
1892
  padding-top: 2.5rem;
1670
1893
  padding-bottom: 2.5rem;