@secondstaxorg/sscomp 1.9.28 → 1.9.31

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.
package/dist/index.js CHANGED
@@ -32514,7 +32514,7 @@ const SwitcherContainer = styled.button`
32514
32514
  &.rotate{
32515
32515
  rotate: -180deg;
32516
32516
  }
32517
- }
32517
+ }
32518
32518
  }
32519
32519
  `;
32520
32520
 
@@ -32531,6 +32531,7 @@ const DropdownContainer = styled.div`
32531
32531
  max-height: 150px;
32532
32532
  animation: pull-down 0.3s ease-out;
32533
32533
  opacity: 1;
32534
+ z-index: 10;
32534
32535
  @keyframes pull-down{
32535
32536
  from{
32536
32537
  transform: scaleY(0);
@@ -32557,23 +32558,48 @@ const DropdownContainer = styled.div`
32557
32558
  const _jsxFileName$4 = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\components\\LanguageSwitcher\\LanguageSwitcher.tsx";
32558
32559
  const LanguageSwitcher = (props) => {
32559
32560
  const {languages,onClick,initialLanguage} = props;
32560
- const [toggleList,setToggleList] = React$1.useState(false);
32561
32561
  const [selectedLang,setSelectedLang] = React$1.useState({flag: "", language: "", shortName: ""});
32562
32562
 
32563
32563
  React$1.useEffect(() => {
32564
32564
  document.addEventListener('click',clickOutside);
32565
32565
 
32566
32566
  function clickOutside(e){
32567
- const ddContainer = document.querySelector('.lang-switcher');
32568
- if (ddContainer){
32569
- const contains = ddContainer.contains((e.target) );
32570
- setToggleList(contains);
32571
- }
32567
+ const ddContainers = document.querySelectorAll('.lang-switcher');
32568
+ ddContainers.forEach((ddContainer) => {
32569
+ if (ddContainer){
32570
+ const contains = ddContainer.contains((e.target) );
32571
+ if (!contains){
32572
+ ddContainer.querySelector('.caret-icon').classList.remove('rotate');
32573
+ ddContainer.querySelector('.dropdown-container').style.display = 'none';
32574
+ }
32575
+ }
32576
+ });
32572
32577
  }
32573
-
32574
32578
  return ()=>document.removeEventListener('click',clickOutside)
32575
32579
  }, []);
32576
32580
 
32581
+ React$1.useEffect(()=>{
32582
+ function toggleFlyout(e){
32583
+ const caret = e.currentTarget.querySelector('.caret-icon');
32584
+ const ddContainer = e.currentTarget.querySelector('.dropdown-container');
32585
+ if (ddContainer.style.display == 'none'){
32586
+ ddContainer.style.display = 'block';
32587
+ caret.classList.add('rotate');
32588
+ }else {
32589
+ ddContainer.style.display = 'none';
32590
+ caret.classList.remove('rotate');
32591
+ }
32592
+ }
32593
+
32594
+ const langSwitchers = document.querySelectorAll('.lang-switcher');
32595
+ langSwitchers.forEach((langSwitcher) => {
32596
+ langSwitcher.addEventListener('click',toggleFlyout);
32597
+ });
32598
+
32599
+ return ()=>document.removeEventListener('click',toggleFlyout)
32600
+ },[]);
32601
+
32602
+
32577
32603
  React$1.useEffect(()=>{
32578
32604
  if (initialLanguage) switchLanguage(initialLanguage);
32579
32605
  },[initialLanguage]);
@@ -32584,42 +32610,41 @@ const LanguageSwitcher = (props) => {
32584
32610
  }
32585
32611
 
32586
32612
  return (
32587
- React$1.createElement('div', { className: "lang-switcher", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 37}}
32588
- , React$1.createElement(SwitcherContainer, { type: "button", onClick: ()=>{
32589
- setTimeout(()=>{
32590
- setToggleList(!toggleList);
32591
- },0);
32592
- }, __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 38}}
32593
- , React$1.createElement('div', { className: "selected-language", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 43}}
32594
- , React$1.createElement('img', { src: selectedLang.flag || img, alt: selectedLang.language, __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 44}})
32595
- , React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 45}}, selectedLang.language)
32596
- /*caret icon*/
32597
- , React$1.createElement('svg', { width: "16", height: "16", viewBox: "0 0 16 16" , fill: "none", xmlns: "http://www.w3.org/2000/svg", className: toggleList ? 'rotate' : '', __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 47}}
32598
- , React$1.createElement('g', { clipPath: "url(#clip0_2662_482)", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 48}}
32599
- , React$1.createElement('path', { d: "M11.3333 6.11336C11.2084 5.98919 11.0395 5.91949 10.8633 5.91949C10.6872 5.91949 10.5182 5.98919 10.3933 6.11336L8.00001 8.47336L5.64001 6.11336C5.5151 5.98919 5.34613 5.91949 5.17001 5.91949C4.99388 5.91949 4.82491 5.98919 4.70001 6.11336C4.63752 6.17533 4.58792 6.24907 4.55408 6.33031C4.52023 6.41154 4.50281 6.49868 4.50281 6.58669C4.50281 6.6747 4.52023 6.76183 4.55408 6.84307C4.58792 6.92431 4.63752 6.99805 4.70001 7.06002L7.52667 9.88669C7.58865 9.94918 7.66238 9.99877 7.74362 10.0326C7.82486 10.0665 7.912 10.0839 8.00001 10.0839C8.08801 10.0839 8.17515 10.0665 8.25639 10.0326C8.33763 9.99877 8.41136 9.94918 8.47334 9.88669L11.3333 7.06002C11.3958 6.99805 11.4454 6.92431 11.4793 6.84307C11.5131 6.76183 11.5305 6.6747 11.5305 6.58669C11.5305 6.49868 11.5131 6.41154 11.4793 6.33031C11.4454 6.24907 11.3958 6.17533 11.3333 6.11336Z" , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 49}})
32600
- )
32601
- , React$1.createElement('defs', {__self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 51}}
32602
- , React$1.createElement('clipPath', { id: "clip0_2662_482", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 52}}
32603
- , React$1.createElement('rect', { width: "16", height: "16", fill: "white", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 53}})
32613
+ React$1.createElement('div', { style: {display:'flex', gap:8}, __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 62}}
32614
+ , React$1.createElement('div', { className: "lang-switcher", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 63}}
32615
+ , React$1.createElement(SwitcherContainer, { type: "button", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 64}}
32616
+ , React$1.createElement('div', { className: "selected-language", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 65}}
32617
+ , React$1.createElement('img', { src: selectedLang.flag || img, alt: selectedLang.language, __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 66}})
32618
+ , React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 67}}, selectedLang.language)
32619
+ /*caret icon*/
32620
+ , React$1.createElement('svg', { width: "16", height: "16", viewBox: "0 0 16 16" , fill: "none", xmlns: "http://www.w3.org/2000/svg",
32621
+ className: `caret-icon`, __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 69}}
32622
+ , React$1.createElement('g', { clipPath: "url(#clip0_2662_482)", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 71}}
32623
+ , React$1.createElement('path', {
32624
+ d: "M11.3333 6.11336C11.2084 5.98919 11.0395 5.91949 10.8633 5.91949C10.6872 5.91949 10.5182 5.98919 10.3933 6.11336L8.00001 8.47336L5.64001 6.11336C5.5151 5.98919 5.34613 5.91949 5.17001 5.91949C4.99388 5.91949 4.82491 5.98919 4.70001 6.11336C4.63752 6.17533 4.58792 6.24907 4.55408 6.33031C4.52023 6.41154 4.50281 6.49868 4.50281 6.58669C4.50281 6.6747 4.52023 6.76183 4.55408 6.84307C4.58792 6.92431 4.63752 6.99805 4.70001 7.06002L7.52667 9.88669C7.58865 9.94918 7.66238 9.99877 7.74362 10.0326C7.82486 10.0665 7.912 10.0839 8.00001 10.0839C8.08801 10.0839 8.17515 10.0665 8.25639 10.0326C8.33763 9.99877 8.41136 9.94918 8.47334 9.88669L11.3333 7.06002C11.3958 6.99805 11.4454 6.92431 11.4793 6.84307C11.5131 6.76183 11.5305 6.6747 11.5305 6.58669C11.5305 6.49868 11.5131 6.41154 11.4793 6.33031C11.4454 6.24907 11.3958 6.17533 11.3333 6.11336Z" ,
32625
+ fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 72}})
32626
+ )
32627
+ , React$1.createElement('defs', {__self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 76}}
32628
+ , React$1.createElement('clipPath', { id: "clip0_2662_482", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 77}}
32629
+ , React$1.createElement('rect', { width: "16", height: "16", fill: "white", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 78}})
32630
+ )
32604
32631
  )
32605
32632
  )
32606
32633
  )
32607
32634
  )
32608
- )
32609
- , toggleList &&
32610
- React$1.createElement(DropdownContainer, { className: "dropdown-container transition" , __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 60}}
32611
- , languages.map((language,index) => (
32612
- React$1.createElement('button', { key: index, type: "button", className: "option-item", onClick: ()=>{
32635
+ , React$1.createElement(DropdownContainer, { className: "dropdown-container transition" , style: {display:'none'}, __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 84}}
32636
+ , languages.map((language, index) => (
32637
+ React$1.createElement('button', { key: index, type: "button", className: "option-item", onClick: (e) => {
32613
32638
  switchLanguage(language.language);
32614
- setToggleList(false);
32615
32639
  onClick(language);
32616
- }, __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 62}}
32617
- , React$1.createElement('img', { src: language.flag || img, alt: language.language, __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 67}})
32618
- , React$1.createElement('span', { className: "paragraph2Regular", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 68}}, language.language)
32640
+ (e.currentTarget.parentNode ).style.display = 'none';
32641
+ }, __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 86}}
32642
+ , React$1.createElement('img', { src: language.flag || img, alt: language.language, __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 91}})
32643
+ , React$1.createElement('span', { className: "paragraph2Regular", __self: undefined, __source: {fileName: _jsxFileName$4, lineNumber: 92}}, language.language)
32619
32644
  )
32620
32645
  ))
32621
- )
32622
-
32646
+ )
32647
+ )
32623
32648
  )
32624
32649
  )
32625
32650
  };