@ax-design/reveal-highlight 0.3.0-alpha.9 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/README.md +0 -8
  2. package/build/BaseConfig.d.ts +43 -0
  3. package/build/BaseConfig.d.ts.map +1 -0
  4. package/build/CanvasConfig.d.ts +7 -93
  5. package/build/CanvasConfig.d.ts.map +1 -1
  6. package/build/CustomElements.d.ts +18 -4
  7. package/build/CustomElements.d.ts.map +1 -1
  8. package/build/RevealBoundryStore.d.ts +50 -10
  9. package/build/RevealBoundryStore.d.ts.map +1 -1
  10. package/build/RevealStateManager.d.ts +3 -0
  11. package/build/RevealStateManager.d.ts.map +1 -1
  12. package/build/SvgConfig.d.ts +17 -0
  13. package/build/SvgConfig.d.ts.map +1 -0
  14. package/build/index.d.ts.map +1 -1
  15. package/build/main.js +169 -17
  16. package/build/utils/extractRGBValue.d.ts +2 -0
  17. package/build/utils/extractRGBValue.d.ts.map +1 -0
  18. package/build/utils/isValidateBorderDecorationType.d.ts +3 -0
  19. package/build/utils/isValidateBorderDecorationType.d.ts.map +1 -0
  20. package/build/utils/types.d.ts +103 -0
  21. package/build/utils/types.d.ts.map +1 -0
  22. package/docs/demo/index.html +70 -143
  23. package/docs/demo/ng.html +992 -0
  24. package/es/BaseConfig.d.ts +43 -0
  25. package/es/BaseConfig.d.ts.map +1 -0
  26. package/es/BaseConfig.js +220 -0
  27. package/es/BaseConfig.js.map +1 -0
  28. package/es/CanvasConfig.d.ts +7 -93
  29. package/es/CanvasConfig.d.ts.map +1 -1
  30. package/es/CanvasConfig.js +35 -239
  31. package/es/CanvasConfig.js.map +1 -1
  32. package/es/CustomElements.d.ts +18 -4
  33. package/es/CustomElements.d.ts.map +1 -1
  34. package/es/CustomElements.js +82 -7
  35. package/es/CustomElements.js.map +1 -1
  36. package/es/RevealBoundryStore.d.ts +50 -10
  37. package/es/RevealBoundryStore.d.ts.map +1 -1
  38. package/es/RevealBoundryStore.js +129 -35
  39. package/es/RevealBoundryStore.js.map +1 -1
  40. package/es/RevealStateManager.d.ts +3 -0
  41. package/es/RevealStateManager.d.ts.map +1 -1
  42. package/es/RevealStateManager.js +35 -8
  43. package/es/RevealStateManager.js.map +1 -1
  44. package/es/SvgConfig.d.ts +17 -0
  45. package/es/SvgConfig.d.ts.map +1 -0
  46. package/es/SvgConfig.js +346 -0
  47. package/es/SvgConfig.js.map +1 -0
  48. package/es/index.d.ts.map +1 -1
  49. package/es/index.js +10 -16
  50. package/es/index.js.map +1 -1
  51. package/es/utils/extractRGBValue.d.ts +2 -0
  52. package/es/utils/extractRGBValue.d.ts.map +1 -0
  53. package/es/utils/extractRGBValue.js +48 -0
  54. package/es/utils/extractRGBValue.js.map +1 -0
  55. package/es/utils/isValidateBorderDecorationType.d.ts +3 -0
  56. package/es/utils/isValidateBorderDecorationType.d.ts.map +1 -0
  57. package/es/utils/isValidateBorderDecorationType.js +10 -0
  58. package/es/utils/isValidateBorderDecorationType.js.map +1 -0
  59. package/es/utils/types.d.ts +103 -0
  60. package/es/utils/types.d.ts.map +1 -0
  61. package/es/utils/types.js +2 -0
  62. package/es/utils/types.js.map +1 -0
  63. package/package.json +30 -30
  64. package/src/BaseConfig.ts +311 -0
  65. package/src/CanvasConfig.ts +66 -387
  66. package/src/CustomElements.ts +97 -14
  67. package/src/RevealBoundryStore.ts +138 -39
  68. package/src/RevealStateManager.ts +40 -10
  69. package/src/SvgConfig.ts +422 -0
  70. package/src/index.ts +10 -16
  71. package/src/utils/extractRGBValue.ts +58 -0
  72. package/src/utils/isValidateBorderDecorationType.ts +8 -0
  73. package/src/utils/types.ts +106 -0
  74. package/.yarnrc.yml +0 -1
  75. package/docs/demo/debug.html +0 -72
package/docs/demo/index.html CHANGED
@@ -1,6 +1,7 @@
1
1
  <!DOCTYPE html>
2
2
 
3
3
  <head>
4
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
4
5
  <title>AxRevealHighlight Demo - Axiom Design System</title>
5
6
 
6
7
  <style>
@@ -556,96 +557,96 @@
556
557
  </div>
557
558
  <style>
558
559
  .no-top {
559
- --reveal-border-top: none;
560
+ --reveal-border-top-type: none;
560
561
  }
561
562
  .no-bottom {
562
- --reveal-border-bottom: none;
563
+ --reveal-border-bottom-type: none;
563
564
  }
564
565
  .no-left {
565
- --reveal-border-left: none;
566
+ --reveal-border-left-type: none;
566
567
  }
567
568
  .no-right {
568
- --reveal-border-right: none;
569
+ --reveal-border-right-type: none;
569
570
  }
570
571
  .horizontal {
571
- --reveal-border-left: none;
572
- --reveal-border-right: none;
572
+ --reveal-border-left-type: none;
573
+ --reveal-border-right-type: none;
573
574
  }
574
575
  .vertical {
575
- --reveal-border-top: none;
576
- --reveal-border-bottom: none;
576
+ --reveal-border-top-type: none;
577
+ --reveal-border-bottom-type: none;
577
578
  }
578
579
  .only-top {
579
- --reveal-border-bottom: none;
580
- --reveal-border-left: none;
581
- --reveal-border-right: none;
580
+ --reveal-border-bottom-type: none;
581
+ --reveal-border-left-type: none;
582
+ --reveal-border-right-type: none;
582
583
  }
583
584
  .only-bottom {
584
- --reveal-border-top: none;
585
- --reveal-border-left: none;
586
- --reveal-border-right: none;
585
+ --reveal-border-top-type: none;
586
+ --reveal-border-left-type: none;
587
+ --reveal-border-right-type: none;
587
588
  }
588
589
  .only-left {
589
- --reveal-border-top: none;
590
- --reveal-border-bottom: none;
591
- --reveal-border-right: none;
590
+ --reveal-border-top-type: none;
591
+ --reveal-border-bottom-type: none;
592
+ --reveal-border-right-type: none;
592
593
  }
593
594
  .only-right {
594
- --reveal-border-top: none;
595
- --reveal-border-bottom: none;
596
- --reveal-border-left: none;
595
+ --reveal-border-top-type: none;
596
+ --reveal-border-bottom-type: none;
597
+ --reveal-border-left-type: none;
597
598
  }
598
599
  </style>
599
600
  <div class="code">
600
601
  <h2>No border</h2>
601
602
  <pre>.no-top {
602
- --reveal-border-top: none;
603
+ --reveal-border-top-type: none;
603
604
  }
604
605
 
605
606
  .no-bottom {
606
- --reveal-border-bottom: none;
607
+ --reveal-border-bottom-type: none;
607
608
  }
608
609
 
609
610
  .no-left {
610
- --reveal-border-left: none;
611
+ --reveal-border-left-type: none;
611
612
  }
612
613
 
613
614
  .no-right {
614
- --reveal-border-right: none;
615
+ --reveal-border-right-type: none;
615
616
  }
616
617
 
617
618
  .horizontal {
618
- --reveal-border-left: none;
619
- --reveal-border-right: none;
619
+ --reveal-border-left-type: none;
620
+ --reveal-border-right-type: none;
620
621
  }
621
622
 
622
623
  .vertical {
623
- --reveal-border-top: none;
624
- --reveal-border-bottom: none;
624
+ --reveal-border-top-type: none;
625
+ --reveal-border-bottom-type: none;
625
626
  }
626
627
 
627
628
  .only-top {
628
- --reveal-border-bottom: none;
629
- --reveal-border-left: none;
630
- --reveal-border-right: none;
629
+ --reveal-border-bottom-type: none;
630
+ --reveal-border-left-type: none;
631
+ --reveal-border-right-type: none;
631
632
  }
632
633
 
633
634
  .only-bottom {
634
- --reveal-border-top: none;
635
- --reveal-border-left: none;
636
- --reveal-border-right: none;
635
+ --reveal-border-top-type: none;
636
+ --reveal-border-left-type: none;
637
+ --reveal-border-right-type: none;
637
638
  }
638
639
 
639
640
  .only-left {
640
- --reveal-border-top: none;
641
- --reveal-border-bottom: none;
642
- --reveal-border-right: none;
641
+ --reveal-border-top-type: none;
642
+ --reveal-border-bottom-type: none;
643
+ --reveal-border-right-type: none;
643
644
  }
644
645
 
645
646
  .only-right {
646
- --reveal-border-top: none;
647
- --reveal-border-bottom: none;
648
- --reveal-border-right: none;
647
+ --reveal-border-top-type: none;
648
+ --reveal-border-bottom-type: none;
649
+ --reveal-border-right-type: none;
649
650
  }</pre>
650
651
  </div>
651
652
  </section>
@@ -858,116 +859,43 @@
858
859
 
859
860
  <section class="demo-block">
860
861
  <div class="demo">
861
- <div class="long-list">
862
- <ax-reveal-bound>
863
- <div class="ax-reveal-container">
864
- <ax-reveal>
865
- <button class="ax-reveal-button">A lovely item</button>
866
- </ax-reveal>
867
- <ax-reveal>
868
- <button class="ax-reveal-button">A lovely item</button>
869
- </ax-reveal>
870
- <ax-reveal>
871
- <button class="ax-reveal-button">A lovely item</button>
872
- </ax-reveal>
873
- <ax-reveal>
874
- <button class="ax-reveal-button">A lovely item</button>
875
- </ax-reveal>
876
- <ax-reveal>
877
- <button class="ax-reveal-button">A lovely item</button>
878
- </ax-reveal>
879
- <ax-reveal>
880
- <button class="ax-reveal-button">A lovely item</button>
881
- </ax-reveal>
882
- <ax-reveal>
883
- <button class="ax-reveal-button">A lovely item</button>
884
- </ax-reveal>
885
- <ax-reveal>
886
- <button class="ax-reveal-button">A lovely item</button>
887
- </ax-reveal>
888
- <ax-reveal>
889
- <button class="ax-reveal-button">A lovely item</button>
890
- </ax-reveal>
891
- <ax-reveal>
892
- <button class="ax-reveal-button">A lovely item</button>
893
- </ax-reveal>
894
- <ax-reveal>
895
- <button class="ax-reveal-button">A lovely item</button>
896
- </ax-reveal>
897
- <ax-reveal>
898
- <button class="ax-reveal-button">A lovely item</button>
899
- </ax-reveal>
900
- <ax-reveal>
901
- <button class="ax-reveal-button">A lovely item</button>
902
- </ax-reveal>
903
- <ax-reveal>
904
- <button class="ax-reveal-button">A lovely item</button>
905
- </ax-reveal>
906
- <ax-reveal>
907
- <button class="ax-reveal-button">A lovely item</button>
908
- </ax-reveal>
909
- <ax-reveal>
910
- <button class="ax-reveal-button">A lovely item</button>
911
- </ax-reveal>
912
- <ax-reveal>
913
- <button class="ax-reveal-button">A lovely item</button>
914
- </ax-reveal>
915
- <ax-reveal>
916
- <button class="ax-reveal-button">A lovely item</button>
917
- </ax-reveal>
918
- <ax-reveal>
919
- <button class="ax-reveal-button">A lovely item</button>
920
- </ax-reveal>
921
- <ax-reveal>
922
- <button class="ax-reveal-button">A lovely item</button>
923
- </ax-reveal>
924
- <ax-reveal>
925
- <button class="ax-reveal-button">A lovely item</button>
926
- </ax-reveal>
927
- <ax-reveal>
928
- <button class="ax-reveal-button">A lovely item</button>
929
- </ax-reveal>
930
- <ax-reveal>
931
- <button class="ax-reveal-button">A lovely item</button>
932
- </ax-reveal>
933
- <ax-reveal>
934
- <button class="ax-reveal-button">A lovely item</button>
935
- </ax-reveal>
936
- <ax-reveal>
937
- <button class="ax-reveal-button">A lovely item</button>
938
- </ax-reveal>
939
- <ax-reveal>
940
- <button class="ax-reveal-button">A lovely item</button>
941
- </ax-reveal>
942
- <ax-reveal>
943
- <button class="ax-reveal-button">A lovely item</button>
944
- </ax-reveal>
945
- </div>
946
- </div>
862
+ <ax-reveal-bound class="dynamic-size">
863
+ <div class="ax-reveal-container">
864
+ <ax-reveal>
865
+ <button class="ax-reveal-button">Welcome</button>
866
+ </ax-reveal>
867
+ <ax-reveal>
868
+ <button class="ax-reveal-button">To</button>
869
+ </ax-reveal>
870
+ </div>
871
+ <div class="ax-reveal-container">
872
+ <ax-reveal>
873
+ <button class="ax-reveal-button">Project</button>
874
+ </ax-reveal>
875
+ <ax-reveal>
876
+ <button class="ax-reveal-button">Axiom!</button>
877
+ </ax-reveal>
878
+ </div>
947
879
  </ax-reveal-bound>
948
880
  </div>
949
881
  <style>
950
- .long-list {
951
- --reveal-border-style: half;
952
- height: 300px;
953
- width: 250px;
954
- margin-bottom: 15px;
955
- overflow-y: scroll;
956
- }
957
-
958
- .long-list .ax-reveal-container {
959
- flex-direction: column;
882
+ .dynamic-size.large ax-reveal {
883
+ width: 160px;
884
+ height: 160px;
960
885
  }
961
886
 
962
- .long-list .ax-reveal-container>ax-reveal {
963
- margin: 0;
887
+ .dynamic-size.large .ax-reveal-button {
888
+ min-width: 160px;
889
+ height: 160px;
964
890
  }
965
891
  </style>
966
892
  <div class="code">
967
- <h2>List style</h2>
968
- <pre>.my-reveal-container{
969
- --reveal-border-style: half;
970
- }</pre>
893
+ <h2>Dynamic size</h2>
894
+ <button
895
+ onclick="document.querySelector('.dynamic-size')?.classList.toggle('large')"
896
+ >
897
+ Click here
898
+ </button>
971
899
  </div>
972
900
  </section>
973
901
 
@@ -1005,7 +933,6 @@
1005
933
  <div class="code">
1006
934
  <h2>No diffuse</h2>
1007
935
  <pre>.my-reveal-container{
1008
- --reveal-border-style: half;
1009
936
  --reveal-diffuse: false;
1010
937
  }</pre>
1011
938
  </div>