@zohodesk/dot 1.9.11 → 1.9.13

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 (68) hide show
  1. package/README.md +20 -0
  2. package/es/ActionButton/__tests__/ActionButton.spec.js +4 -5
  3. package/es/AttachmentViewer/AttachmentImage.js +3 -1
  4. package/es/AttachmentViewer/AttachmentViewer.js +340 -273
  5. package/es/AttachmentViewer/AttachmentViewer.module.css +8 -15
  6. package/es/AttachmentViewer/__tests__/AttachmentViewer.spec.js +104 -100
  7. package/es/AttachmentViewer/__tests__/__snapshots__/AttachmentViewer.spec.js.snap +778 -1
  8. package/es/AttachmentViewer/props/defaultProps.js +4 -2
  9. package/es/AttachmentViewer/props/propTypes.js +9 -2
  10. package/es/AttachmentViewer/utils.js +6 -7
  11. package/es/AudioPlayer/utils/utils.js +2 -5
  12. package/es/DotProvider/hooks/useDotProvider.js +14 -15
  13. package/es/DotProvider/hooks/useDownloadAssetsAndSetAttr.js +12 -13
  14. package/es/DotProvider/props/defaultProps.js +1 -1
  15. package/es/DotProvider/utils/assetPromiseHandlers/themeAppearanceAssetPromise.js +3 -4
  16. package/es/DotProvider/utils/assetPromiseHandlers/themeColorAssetPromise.js +4 -5
  17. package/es/DotProvider/utils/errorValidation.js +5 -6
  18. package/es/DotProvider/utils/getAssetsImportPromises.js +4 -5
  19. package/es/Drawer/Drawer.js +6 -8
  20. package/es/FreezeLayer/css/cssJSLogic.js +4 -5
  21. package/es/Hooks/Dragger/useDragger.js +5 -6
  22. package/es/Hooks/Dragger/utils/DraggerUtil.js +7 -8
  23. package/es/Hooks/useFreezeLayer.js +4 -5
  24. package/es/Link/Link.js +4 -3
  25. package/es/Link/props/propTypes.js +1 -0
  26. package/es/Onboarding/CarouselDots/CarouselDots.js +29 -32
  27. package/es/Onboarding/Onboarding.js +23 -24
  28. package/es/Onboarding/hooks/useOnboarding.js +4 -5
  29. package/es/Onboarding/hooks/useOnboardingSlider.js +5 -6
  30. package/es/deprecated/SelectDropdown/SelectDropdown.js +43 -47
  31. package/es/dropdown/ToggleDropDown/ToggleDropDown.js +214 -225
  32. package/es/errorstate/Inconvenience/Inconvenience.js +32 -36
  33. package/es/errorstate/NoRequestFound/NoRequestFound.js +32 -36
  34. package/es/errorstate/PermissionPlay/PermissionPlay.js +31 -35
  35. package/es/errorstate/RequestUrlNotFound/RequestUrlNotFound.js +32 -36
  36. package/es/errorstate/UnableToProcess/UnableToProcess.js +32 -36
  37. package/es/errorstate/UnauthorizedLogin/UnauthorizedLogin.js +32 -36
  38. package/es/errorstate/WillBack/WillBack.js +30 -34
  39. package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js +81 -85
  40. package/es/list/status/StatusDropdown/StatusDropdown.js +109 -113
  41. package/es/list/status/StatusDropdown/__tests__/StatusDropdown.spec.js +3 -4
  42. package/es/lookup/header/Search/Search.js +4 -5
  43. package/es/lookup/header/Search/__tests__/Search.spec.js +3 -4
  44. package/es/lookup/header/ViewDropDown/ViewDropDown.js +67 -75
  45. package/es/utils/General.js +2 -7
  46. package/es/utils/editorUtils.js +1 -5
  47. package/es/version2/lookup/AlertHeader/AlertHeader.js +5 -3
  48. package/es/version2/lookup/AlertHeader/__tests__/AlertHeader.spec.js +24 -0
  49. package/es/version2/lookup/AlertHeader/__tests__/__snapshots__/AlertHeader.spec.js.snap +34 -0
  50. package/es/version2/lookup/AlertHeader/css/cssJSLogic.js +4 -5
  51. package/es/version2/lookup/AlertHeader/props/propTypes.js +2 -1
  52. package/es/version2/notification/DesktopNotification/DesktopNotification.js +59 -63
  53. package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.js +40 -44
  54. package/lib/AttachmentViewer/AttachmentImage.js +3 -1
  55. package/lib/AttachmentViewer/AttachmentViewer.js +158 -82
  56. package/lib/AttachmentViewer/AttachmentViewer.module.css +8 -15
  57. package/lib/AttachmentViewer/__tests__/AttachmentViewer.spec.js +100 -100
  58. package/lib/AttachmentViewer/__tests__/__snapshots__/AttachmentViewer.spec.js.snap +778 -1
  59. package/lib/AttachmentViewer/props/defaultProps.js +6 -2
  60. package/lib/AttachmentViewer/props/propTypes.js +9 -2
  61. package/lib/DotProvider/props/defaultProps.js +2 -2
  62. package/lib/Link/Link.js +4 -3
  63. package/lib/Link/props/propTypes.js +1 -0
  64. package/lib/version2/lookup/AlertHeader/AlertHeader.js +5 -2
  65. package/lib/version2/lookup/AlertHeader/__tests__/AlertHeader.spec.js +26 -0
  66. package/lib/version2/lookup/AlertHeader/__tests__/__snapshots__/AlertHeader.spec.js.snap +34 -0
  67. package/lib/version2/lookup/AlertHeader/props/propTypes.js +2 -1
  68. package/package.json +26 -24
package/es/AttachmentViewer/__tests__/__snapshots__/AttachmentViewer.spec.js.snap CHANGED
@@ -72,7 +72,7 @@ exports[`AttachmentViewer rendering the when isActive is true 1`] = `
72
72
  class="container "
73
73
  data-id="AttachmentViewer_downloadAttach"
74
74
  data-test-id="AttachmentViewer_downloadAttach"
75
- download=""
75
+ download="slack0.jpg"
76
76
  href="https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG"
77
77
  rel="noopener noreferrer"
78
78
  target="_parent"
@@ -380,3 +380,780 @@ exports[`AttachmentViewer rendering the when isActive is true 1`] = `
380
380
  </div>
381
381
  </DocumentFragment>
382
382
  `;
383
+
384
+ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
385
+ <DocumentFragment>
386
+ <div
387
+ class="container index5 dark"
388
+ data-drag-parent="true"
389
+ style="z-index: 4;"
390
+ >
391
+ <div
392
+ class="flex cover rowdir"
393
+ data-id="reactFreezeLayer"
394
+ data-selector-id="container"
395
+ data-test-id="reactFreezeLayer"
396
+ >
397
+ <div
398
+ class="flex cover coldir scrollnone"
399
+ data-id="containerComponent"
400
+ data-scroll-palette="dark"
401
+ data-selector-id="container"
402
+ data-test-id="containerComponent"
403
+ >
404
+ <div
405
+ class="shrinkOff"
406
+ data-id="boxComponent"
407
+ data-selector-id="box"
408
+ data-test-id="boxComponent"
409
+ >
410
+ <div
411
+ class="header flex cover rowdir between"
412
+ data-id="containerComponent"
413
+ data-selector-id="container"
414
+ data-test-id="containerComponent"
415
+ tabindex="0"
416
+ >
417
+ <div
418
+ class="title shrinkOn"
419
+ data-id="attachName"
420
+ data-selector-id="box"
421
+ data-test-id="attachName"
422
+ data-title="slack0.jpg"
423
+ id="1"
424
+ >
425
+ slack0.jpg
426
+ </div>
427
+ <div
428
+ class="count grow basis shrinkOff"
429
+ data-id="attachCountContainer"
430
+ data-selector-id="box"
431
+ data-test-id="attachCountContainer"
432
+ >
433
+ 1/7
434
+ </div>
435
+ <div
436
+ class="menuBar shrinkOff"
437
+ data-id="boxComponent"
438
+ data-selector-id="box"
439
+ data-test-id="boxComponent"
440
+ >
441
+ <div
442
+ class="inflex rowdir wrap"
443
+ data-id="containerComponent"
444
+ data-selector-id="container"
445
+ data-test-id="containerComponent"
446
+ >
447
+ <div
448
+ data-id="customIcons"
449
+ >
450
+ <span
451
+ data-id="customIcons_name"
452
+ >
453
+ slack0.jpg
454
+ </span>
455
+ <span
456
+ data-id="customIcons_index"
457
+ >
458
+ 1/7
459
+ </span>
460
+ </div>
461
+ <div
462
+ class="menu"
463
+ >
464
+ <a
465
+ class="container "
466
+ data-id="AttachmentViewer_downloadAttach"
467
+ data-test-id="AttachmentViewer_downloadAttach"
468
+ download="slack0.jpg"
469
+ href="https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG"
470
+ rel="noopener noreferrer"
471
+ target="_parent"
472
+ >
473
+ <div
474
+ aria-pressed="false"
475
+ class="large wrapper menuIcon undefined effect default border borderHover hoverEffect inflex coldir both"
476
+ data-id="iconContainer"
477
+ data-ishtml="false"
478
+ data-selector-id="iconButton"
479
+ data-test-id="iconContainer"
480
+ >
481
+ <i
482
+ aria-hidden="true"
483
+ class="zd_font_icons basic icon-download icon_button_center "
484
+ data-id="fontIcon"
485
+ data-selector-id="fontIcon"
486
+ data-test-id="fontIcon"
487
+ style="--zd-iconfont-size: var(--zd_font_size16);"
488
+ />
489
+ </div>
490
+ </a>
491
+ </div>
492
+ <div
493
+ class="menu"
494
+ data-id="closeAttach"
495
+ data-test-id="closeAttach"
496
+ >
497
+ <button
498
+ aria-pressed="false"
499
+ class="buttonReset large wrapper menuIcon undefined effect default border borderHover hoverEffect inflex coldir both"
500
+ data-id="iconContainer"
501
+ data-ishtml="false"
502
+ data-selector-id="iconButton"
503
+ data-test-id="iconContainer"
504
+ >
505
+ <i
506
+ aria-hidden="true"
507
+ class="zd_font_icons basic icon-cross icon_button_center "
508
+ data-id="fontIcon"
509
+ data-selector-id="fontIcon"
510
+ data-test-id="fontIcon"
511
+ style="--zd-iconfont-size: var(--zd_font_size15);"
512
+ />
513
+ </button>
514
+ </div>
515
+ </div>
516
+ </div>
517
+ </div>
518
+ </div>
519
+ <div
520
+ class="grow basis shrinkOff"
521
+ data-id="boxComponent"
522
+ data-selector-id="box"
523
+ data-test-id="boxComponent"
524
+ role="toolbar"
525
+ tabindex="0"
526
+ >
527
+ <div
528
+ class="flex cover rowdir"
529
+ data-id="containerComponent"
530
+ data-selector-id="container"
531
+ data-test-id="containerComponent"
532
+ >
533
+ <div
534
+ class="arrowBox nrmlArrowBox hidden shrinkOff"
535
+ data-id="boxComponent"
536
+ data-selector-id="box"
537
+ data-test-id="boxComponent"
538
+ data-title-position="left"
539
+ >
540
+ <button
541
+ class="btn"
542
+ >
543
+ <i
544
+ aria-hidden="true"
545
+ class="zd_font_icons basic icon-arrow-left3 fbold arrow rtl "
546
+ data-id="leftAttachNav"
547
+ data-selector-id="fontIcon"
548
+ data-test-id="leftAttachNav"
549
+ />
550
+ </button>
551
+ </div>
552
+ <div
553
+ aria-describedby="1"
554
+ class="previewBox grow basis shrinkOff scrollboth"
555
+ data-id="boxComponent"
556
+ data-selector-id="box"
557
+ data-test-id="boxComponent"
558
+ tabindex="0"
559
+ >
560
+ <div
561
+ class="imgBox flex cover rowdir both"
562
+ data-id="containerComponent"
563
+ data-selector-id="container"
564
+ data-test-id="containerComponent"
565
+ id="imgBox0"
566
+ style="transform: translateX(0%); opacity: 1;"
567
+ >
568
+ <div
569
+ class="imgRef shrinkOff"
570
+ data-id="boxComponent"
571
+ data-selector-id="box"
572
+ data-test-id="boxComponent"
573
+ id="imgPreviewRef0"
574
+ >
575
+ <div
576
+ class="spinLoad"
577
+ data-id="attachViewer_loader"
578
+ data-test-id="attachViewer_loader"
579
+ >
580
+ <div
581
+ class="loader"
582
+ />
583
+ </div>
584
+ </div>
585
+ </div>
586
+ </div>
587
+ <div
588
+ class="arrowBox nrmlArrowBox shrinkOff"
589
+ data-id="boxComponent"
590
+ data-selector-id="box"
591
+ data-test-id="boxComponent"
592
+ data-title-position="right"
593
+ >
594
+ <button
595
+ class="btn"
596
+ >
597
+ <i
598
+ aria-hidden="true"
599
+ class="zd_font_icons basic icon-arrow-right3 fbold arrow rtl "
600
+ data-id="rightAttachNav"
601
+ data-selector-id="fontIcon"
602
+ data-test-id="rightAttachNav"
603
+ />
604
+ </button>
605
+ </div>
606
+ </div>
607
+ </div>
608
+ <div
609
+ class="footer footerHeight shrinkOff"
610
+ data-id="AttachmentViewer_attachPreviewFooter"
611
+ data-selector-id="box"
612
+ data-test-id="AttachmentViewer_attachPreviewFooter"
613
+ >
614
+ <div
615
+ class="footerHeight flex cover rowdir vCenter"
616
+ data-id="containerComponent"
617
+ data-selector-id="container"
618
+ data-test-id="containerComponent"
619
+ >
620
+ <div
621
+ class="grow basis shrinkOff"
622
+ data-id="boxComponent"
623
+ data-selector-id="box"
624
+ data-test-id="boxComponent"
625
+ >
626
+ <div
627
+ class="listContainer flex cover rowdir vCenter scrollx"
628
+ data-id="containerComponent"
629
+ data-selector-id="container"
630
+ data-test-id="containerComponent"
631
+ >
632
+ <div
633
+ class="imgItem selected shrinkOff"
634
+ data-id="attachPreviewList"
635
+ data-selector-id="box"
636
+ data-test-id="attachPreviewList"
637
+ data-title="slack0.jpg"
638
+ >
639
+ <div
640
+ class="spinLoad"
641
+ data-id="AttachmentImage_loader"
642
+ data-test-id="AttachmentImage_loader"
643
+ >
644
+ <div
645
+ class="loader"
646
+ />
647
+ </div>
648
+ </div>
649
+ <div
650
+ class="imgItem shrinkOff"
651
+ data-id="attachPreviewList"
652
+ data-selector-id="box"
653
+ data-test-id="attachPreviewList"
654
+ data-title="slack1.jpg"
655
+ >
656
+ <div
657
+ class="spinLoad"
658
+ data-id="AttachmentImage_loader"
659
+ data-test-id="AttachmentImage_loader"
660
+ >
661
+ <div
662
+ class="loader"
663
+ />
664
+ </div>
665
+ </div>
666
+ <div
667
+ class="imgItem shrinkOff"
668
+ data-id="attachPreviewList"
669
+ data-selector-id="box"
670
+ data-test-id="attachPreviewList"
671
+ data-title="slack2.jpg"
672
+ >
673
+ <div
674
+ class="spinLoad"
675
+ data-id="AttachmentImage_loader"
676
+ data-test-id="AttachmentImage_loader"
677
+ >
678
+ <div
679
+ class="loader"
680
+ />
681
+ </div>
682
+ </div>
683
+ <div
684
+ class="imgItem shrinkOff"
685
+ data-id="attachPreviewList"
686
+ data-selector-id="box"
687
+ data-test-id="attachPreviewList"
688
+ data-title="slack3.jpg"
689
+ >
690
+ <div
691
+ class="spinLoad"
692
+ data-id="AttachmentImage_loader"
693
+ data-test-id="AttachmentImage_loader"
694
+ >
695
+ <div
696
+ class="loader"
697
+ />
698
+ </div>
699
+ </div>
700
+ <div
701
+ class="imgItem shrinkOff"
702
+ data-id="attachPreviewList"
703
+ data-selector-id="box"
704
+ data-test-id="attachPreviewList"
705
+ data-title="slack4.jpg"
706
+ >
707
+ <div
708
+ class="spinLoad"
709
+ data-id="AttachmentImage_loader"
710
+ data-test-id="AttachmentImage_loader"
711
+ >
712
+ <div
713
+ class="loader"
714
+ />
715
+ </div>
716
+ </div>
717
+ <div
718
+ class="imgItem shrinkOff"
719
+ data-id="attachPreviewList"
720
+ data-selector-id="box"
721
+ data-test-id="attachPreviewList"
722
+ data-title="slack5.jpg"
723
+ >
724
+ <div
725
+ class="spinLoad"
726
+ data-id="AttachmentImage_loader"
727
+ data-test-id="AttachmentImage_loader"
728
+ >
729
+ <div
730
+ class="loader"
731
+ />
732
+ </div>
733
+ </div>
734
+ <div
735
+ class="imgItem previewIconDiv shrinkOff"
736
+ data-id="attachPreviewList"
737
+ data-selector-id="box"
738
+ data-test-id="attachPreviewList"
739
+ data-title="slack5.mp3"
740
+ >
741
+ <i
742
+ aria-hidden="true"
743
+ class="zd_font_icons basic icon-fileMp3 prevFooterIcon "
744
+ data-id="fontIcon"
745
+ data-selector-id="fontIcon"
746
+ data-test-id="fontIcon"
747
+ style="--zd-iconfont-size: var(--zd_font_size40);"
748
+ />
749
+ </div>
750
+ </div>
751
+ </div>
752
+ </div>
753
+ </div>
754
+ <button
755
+ aria-pressed="false"
756
+ class="buttonReset large wrapper button undefined effect default border borderHover hoverEffect inflex coldir both"
757
+ data-id="attachToggle"
758
+ data-ishtml="false"
759
+ data-selector-id="iconButton"
760
+ data-test-id="attachToggle"
761
+ >
762
+ <i
763
+ aria-hidden="true"
764
+ class="zd_font_icons basic icon-hideTab thumpIcon thumpIconActive icon_button_center "
765
+ data-id="fontIcon"
766
+ data-selector-id="fontIcon"
767
+ data-test-id="fontIcon"
768
+ style="--zd-iconfont-size: var(--zd_font_size14);"
769
+ />
770
+ </button>
771
+ </div>
772
+ </div>
773
+ </div>
774
+ </DocumentFragment>
775
+ `;
776
+
777
+ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
778
+ <DocumentFragment>
779
+ <div
780
+ class="container index5 dark"
781
+ data-drag-parent="true"
782
+ style="z-index: 4;"
783
+ >
784
+ <div
785
+ class="flex cover rowdir"
786
+ data-id="reactFreezeLayer"
787
+ data-selector-id="container"
788
+ data-test-id="reactFreezeLayer"
789
+ >
790
+ <div
791
+ class="flex cover coldir scrollnone"
792
+ data-id="containerComponent"
793
+ data-scroll-palette="dark"
794
+ data-selector-id="container"
795
+ data-test-id="containerComponent"
796
+ >
797
+ <div
798
+ class="shrinkOff"
799
+ data-id="boxComponent"
800
+ data-selector-id="box"
801
+ data-test-id="boxComponent"
802
+ >
803
+ <div
804
+ class="header flex cover rowdir between"
805
+ data-id="containerComponent"
806
+ data-selector-id="container"
807
+ data-test-id="containerComponent"
808
+ tabindex="0"
809
+ >
810
+ <div
811
+ class="title shrinkOn"
812
+ data-id="attachName"
813
+ data-selector-id="box"
814
+ data-test-id="attachName"
815
+ data-title="slack0.jpg"
816
+ id="1"
817
+ >
818
+ slack0.jpg
819
+ </div>
820
+ <div
821
+ class="count grow basis shrinkOff"
822
+ data-id="attachCountContainer"
823
+ data-selector-id="box"
824
+ data-test-id="attachCountContainer"
825
+ >
826
+ 1/7
827
+ </div>
828
+ <div
829
+ class="menuBar shrinkOff"
830
+ data-id="boxComponent"
831
+ data-selector-id="box"
832
+ data-test-id="boxComponent"
833
+ >
834
+ <div
835
+ class="inflex rowdir wrap"
836
+ data-id="containerComponent"
837
+ data-selector-id="container"
838
+ data-test-id="containerComponent"
839
+ >
840
+ <div
841
+ class="menu"
842
+ >
843
+ <a
844
+ class="container "
845
+ data-id="AttachmentViewer_downloadAttach"
846
+ data-test-id="AttachmentViewer_downloadAttach"
847
+ download="slack0.jpg"
848
+ href="https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG"
849
+ rel="noopener noreferrer"
850
+ target="_parent"
851
+ >
852
+ <div
853
+ aria-pressed="false"
854
+ class="large wrapper menuIcon undefined effect default border borderHover hoverEffect inflex coldir both"
855
+ data-id="iconContainer"
856
+ data-ishtml="false"
857
+ data-selector-id="iconButton"
858
+ data-test-id="iconContainer"
859
+ >
860
+ <i
861
+ aria-hidden="true"
862
+ class="zd_font_icons basic icon-download icon_button_center "
863
+ data-id="fontIcon"
864
+ data-selector-id="fontIcon"
865
+ data-test-id="fontIcon"
866
+ style="--zd-iconfont-size: var(--zd_font_size16);"
867
+ />
868
+ </div>
869
+ </a>
870
+ </div>
871
+ <div
872
+ class="menu"
873
+ data-id="closeAttach"
874
+ data-test-id="closeAttach"
875
+ >
876
+ <button
877
+ aria-pressed="false"
878
+ class="buttonReset large wrapper menuIcon undefined effect default border borderHover hoverEffect inflex coldir both"
879
+ data-id="iconContainer"
880
+ data-ishtml="false"
881
+ data-selector-id="iconButton"
882
+ data-test-id="iconContainer"
883
+ >
884
+ <i
885
+ aria-hidden="true"
886
+ class="zd_font_icons basic icon-cross icon_button_center "
887
+ data-id="fontIcon"
888
+ data-selector-id="fontIcon"
889
+ data-test-id="fontIcon"
890
+ style="--zd-iconfont-size: var(--zd_font_size15);"
891
+ />
892
+ </button>
893
+ </div>
894
+ </div>
895
+ </div>
896
+ </div>
897
+ </div>
898
+ <div
899
+ class="grow basis shrinkOff"
900
+ data-id="boxComponent"
901
+ data-selector-id="box"
902
+ data-test-id="boxComponent"
903
+ role="toolbar"
904
+ tabindex="0"
905
+ >
906
+ <div
907
+ class="flex cover rowdir"
908
+ data-id="containerComponent"
909
+ data-selector-id="container"
910
+ data-test-id="containerComponent"
911
+ >
912
+ <div
913
+ class="arrowBox nrmlArrowBox hidden shrinkOff"
914
+ data-id="boxComponent"
915
+ data-selector-id="box"
916
+ data-test-id="boxComponent"
917
+ data-title-position="left"
918
+ >
919
+ <button
920
+ class="btn"
921
+ >
922
+ <i
923
+ aria-hidden="true"
924
+ class="zd_font_icons basic icon-arrow-left3 fbold arrow rtl "
925
+ data-id="leftAttachNav"
926
+ data-selector-id="fontIcon"
927
+ data-test-id="leftAttachNav"
928
+ />
929
+ </button>
930
+ </div>
931
+ <div
932
+ aria-describedby="1"
933
+ class="previewBox grow basis shrinkOff scrollboth"
934
+ data-id="boxComponent"
935
+ data-selector-id="box"
936
+ data-test-id="boxComponent"
937
+ tabindex="0"
938
+ >
939
+ <div
940
+ class="imgBox flex cover rowdir both"
941
+ data-id="containerComponent"
942
+ data-selector-id="container"
943
+ data-test-id="containerComponent"
944
+ id="imgBox0"
945
+ style="transform: translateX(0%); opacity: 1;"
946
+ >
947
+ <div
948
+ class="imgRef shrinkOff"
949
+ data-id="boxComponent"
950
+ data-selector-id="box"
951
+ data-test-id="boxComponent"
952
+ id="imgPreviewRef0"
953
+ >
954
+ <div
955
+ data-id="customImagePreview"
956
+ >
957
+ <span
958
+ data-id="customImagePreview_name"
959
+ >
960
+ slack0.jpg
961
+ </span>
962
+ <span
963
+ data-id="customImagePreview_index"
964
+ >
965
+ 1/
966
+ </span>
967
+ </div>
968
+ </div>
969
+ </div>
970
+ </div>
971
+ <div
972
+ class="arrowBox nrmlArrowBox shrinkOff"
973
+ data-id="boxComponent"
974
+ data-selector-id="box"
975
+ data-test-id="boxComponent"
976
+ data-title-position="right"
977
+ >
978
+ <button
979
+ class="btn"
980
+ >
981
+ <i
982
+ aria-hidden="true"
983
+ class="zd_font_icons basic icon-arrow-right3 fbold arrow rtl "
984
+ data-id="rightAttachNav"
985
+ data-selector-id="fontIcon"
986
+ data-test-id="rightAttachNav"
987
+ />
988
+ </button>
989
+ </div>
990
+ </div>
991
+ </div>
992
+ <div
993
+ class="footer footerHeight shrinkOff"
994
+ data-id="AttachmentViewer_attachPreviewFooter"
995
+ data-selector-id="box"
996
+ data-test-id="AttachmentViewer_attachPreviewFooter"
997
+ >
998
+ <div
999
+ class="footerHeight flex cover rowdir vCenter"
1000
+ data-id="containerComponent"
1001
+ data-selector-id="container"
1002
+ data-test-id="containerComponent"
1003
+ >
1004
+ <div
1005
+ class="grow basis shrinkOff"
1006
+ data-id="boxComponent"
1007
+ data-selector-id="box"
1008
+ data-test-id="boxComponent"
1009
+ >
1010
+ <div
1011
+ class="listContainer flex cover rowdir vCenter scrollx"
1012
+ data-id="containerComponent"
1013
+ data-selector-id="container"
1014
+ data-test-id="containerComponent"
1015
+ >
1016
+ <div
1017
+ class="imgItem selected shrinkOff"
1018
+ data-id="attachPreviewList"
1019
+ data-selector-id="box"
1020
+ data-test-id="attachPreviewList"
1021
+ data-title="slack0.jpg"
1022
+ >
1023
+ <div
1024
+ class="spinLoad"
1025
+ data-id="AttachmentImage_loader"
1026
+ data-test-id="AttachmentImage_loader"
1027
+ >
1028
+ <div
1029
+ class="loader"
1030
+ />
1031
+ </div>
1032
+ </div>
1033
+ <div
1034
+ class="imgItem shrinkOff"
1035
+ data-id="attachPreviewList"
1036
+ data-selector-id="box"
1037
+ data-test-id="attachPreviewList"
1038
+ data-title="slack1.jpg"
1039
+ >
1040
+ <div
1041
+ class="spinLoad"
1042
+ data-id="AttachmentImage_loader"
1043
+ data-test-id="AttachmentImage_loader"
1044
+ >
1045
+ <div
1046
+ class="loader"
1047
+ />
1048
+ </div>
1049
+ </div>
1050
+ <div
1051
+ class="imgItem shrinkOff"
1052
+ data-id="attachPreviewList"
1053
+ data-selector-id="box"
1054
+ data-test-id="attachPreviewList"
1055
+ data-title="slack2.jpg"
1056
+ >
1057
+ <div
1058
+ class="spinLoad"
1059
+ data-id="AttachmentImage_loader"
1060
+ data-test-id="AttachmentImage_loader"
1061
+ >
1062
+ <div
1063
+ class="loader"
1064
+ />
1065
+ </div>
1066
+ </div>
1067
+ <div
1068
+ class="imgItem shrinkOff"
1069
+ data-id="attachPreviewList"
1070
+ data-selector-id="box"
1071
+ data-test-id="attachPreviewList"
1072
+ data-title="slack3.jpg"
1073
+ >
1074
+ <div
1075
+ class="spinLoad"
1076
+ data-id="AttachmentImage_loader"
1077
+ data-test-id="AttachmentImage_loader"
1078
+ >
1079
+ <div
1080
+ class="loader"
1081
+ />
1082
+ </div>
1083
+ </div>
1084
+ <div
1085
+ class="imgItem shrinkOff"
1086
+ data-id="attachPreviewList"
1087
+ data-selector-id="box"
1088
+ data-test-id="attachPreviewList"
1089
+ data-title="slack4.jpg"
1090
+ >
1091
+ <div
1092
+ class="spinLoad"
1093
+ data-id="AttachmentImage_loader"
1094
+ data-test-id="AttachmentImage_loader"
1095
+ >
1096
+ <div
1097
+ class="loader"
1098
+ />
1099
+ </div>
1100
+ </div>
1101
+ <div
1102
+ class="imgItem shrinkOff"
1103
+ data-id="attachPreviewList"
1104
+ data-selector-id="box"
1105
+ data-test-id="attachPreviewList"
1106
+ data-title="slack5.jpg"
1107
+ >
1108
+ <div
1109
+ class="spinLoad"
1110
+ data-id="AttachmentImage_loader"
1111
+ data-test-id="AttachmentImage_loader"
1112
+ >
1113
+ <div
1114
+ class="loader"
1115
+ />
1116
+ </div>
1117
+ </div>
1118
+ <div
1119
+ class="imgItem previewIconDiv shrinkOff"
1120
+ data-id="attachPreviewList"
1121
+ data-selector-id="box"
1122
+ data-test-id="attachPreviewList"
1123
+ data-title="slack5.mp3"
1124
+ >
1125
+ <i
1126
+ aria-hidden="true"
1127
+ class="zd_font_icons basic icon-fileMp3 prevFooterIcon "
1128
+ data-id="fontIcon"
1129
+ data-selector-id="fontIcon"
1130
+ data-test-id="fontIcon"
1131
+ style="--zd-iconfont-size: var(--zd_font_size40);"
1132
+ />
1133
+ </div>
1134
+ </div>
1135
+ </div>
1136
+ </div>
1137
+ </div>
1138
+ <button
1139
+ aria-pressed="false"
1140
+ class="buttonReset large wrapper button undefined effect default border borderHover hoverEffect inflex coldir both"
1141
+ data-id="attachToggle"
1142
+ data-ishtml="false"
1143
+ data-selector-id="iconButton"
1144
+ data-test-id="attachToggle"
1145
+ >
1146
+ <i
1147
+ aria-hidden="true"
1148
+ class="zd_font_icons basic icon-hideTab thumpIcon thumpIconActive icon_button_center "
1149
+ data-id="fontIcon"
1150
+ data-selector-id="fontIcon"
1151
+ data-test-id="fontIcon"
1152
+ style="--zd-iconfont-size: var(--zd_font_size14);"
1153
+ />
1154
+ </button>
1155
+ </div>
1156
+ </div>
1157
+ </div>
1158
+ </DocumentFragment>
1159
+ `;