@asantemedia-org/edwardsvacuum-design-system 1.6.44 → 1.6.45

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 (11) hide show
  1. package/dist/index.css +90 -3
  2. package/dist/index.esm.css +90 -3
  3. package/dist/index.esm.js +0 -1
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/index.js +0 -1
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.scss +90 -3
  8. package/dist/stories/experiences/QRFormJourney/FormFieldType.d.ts +0 -1
  9. package/dist/stories/experiences/QRFormJourney/Qr-form/Qr-form.d.ts +1 -0
  10. package/dist/tsconfig.tsbuildinfo +1 -1
  11. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -1651,30 +1651,117 @@
1651
1651
  font-size: 12px;
1652
1652
  line-height: 18px;
1653
1653
  }
1654
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector {
1655
+ position: relative;
1656
+ }
1654
1657
  .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container {
1658
+ display: flex;
1655
1659
  width: 100%;
1656
1660
  }
1657
1661
  .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button {
1662
+ display: flex;
1658
1663
  height: calc(2.3em + 20px);
1664
+ box-sizing: border-box;
1665
+ align-items: center;
1666
+ justify-content: center;
1667
+ padding: 0 10px;
1659
1668
  border: 1px solid;
1660
1669
  border-right: none;
1661
- padding: 0 10px;
1670
+ margin: 0;
1662
1671
  background: white;
1663
1672
  border-radius: 0;
1673
+ cursor: pointer;
1674
+ -webkit-user-select: none;
1675
+ -moz-user-select: none;
1676
+ user-select: none;
1677
+ }
1678
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button:hover {
1679
+ background-color: #f5f5f5;
1680
+ }
1681
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button__button-content {
1682
+ display: flex;
1683
+ align-items: center;
1684
+ justify-content: center;
1685
+ }
1686
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button__flag-emoji,
1687
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-flag-emoji {
1688
+ width: 24px;
1689
+ height: 24px;
1690
+ margin: 0 4px;
1691
+ box-sizing: border-box;
1692
+ }
1693
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button__dropdown-arrow {
1694
+ border-top: 4px solid #777;
1695
+ border-right: 4px solid transparent;
1696
+ border-left: 4px solid transparent;
1697
+ margin-right: 4px;
1698
+ transition: all 0.1s ease-out;
1699
+ }
1700
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button__dropdown-arrow--active {
1701
+ transform: rotateX(180deg);
1664
1702
  }
1665
1703
  .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input {
1666
1704
  width: 100%;
1667
- height: calc(2.3em - 2px);
1705
+ height: calc(2.3em + 20px);
1706
+ box-sizing: border-box;
1668
1707
  line-height: 1em;
1669
1708
  padding: 10px 18px;
1670
1709
  border: 1px solid;
1671
1710
  font-size: 18px;
1672
1711
  border-radius: 0;
1712
+ margin: 0;
1713
+ font-family: inherit;
1714
+ }
1715
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:focus {
1716
+ outline: none;
1717
+ border: 2px solid #678B3B;
1673
1718
  }
1674
- .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:active, .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:focus-visible {
1719
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:active, .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:focus-visible {
1675
1720
  border: 2px solid #678B3B;
1676
1721
  outline: none;
1677
1722
  }
1723
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown {
1724
+ position: absolute;
1725
+ z-index: 100;
1726
+ top: 44px;
1727
+ left: 0;
1728
+ display: flex;
1729
+ width: 300px;
1730
+ max-height: 200px;
1731
+ flex-direction: column;
1732
+ padding: 4px 0;
1733
+ margin: 0;
1734
+ background-color: white;
1735
+ box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.25);
1736
+ color: #222;
1737
+ list-style: none;
1738
+ overflow-y: scroll;
1739
+ }
1740
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item {
1741
+ display: flex;
1742
+ min-height: 28px;
1743
+ box-sizing: border-box;
1744
+ align-items: center;
1745
+ padding: 2px 8px;
1746
+ cursor: pointer;
1747
+ }
1748
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item:hover, .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item--selected, .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item--focused {
1749
+ background-color: #f5f5f5;
1750
+ }
1751
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item-flag-emoji {
1752
+ margin-right: 8px;
1753
+ }
1754
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item-country-name {
1755
+ overflow: hidden;
1756
+ margin-right: 8px;
1757
+ font-size: 14px;
1758
+ text-overflow: ellipsis;
1759
+ white-space: nowrap;
1760
+ }
1761
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item-dial-code {
1762
+ color: gray;
1763
+ font-size: 14px;
1764
+ }
1678
1765
  .qr-journey-form-wrapper .disabled-product-fields-section {
1679
1766
  background-color: rgb(243, 243, 243);
1680
1767
  padding: 1rem;
package/dist/index.esm.css CHANGED
@@ -1651,30 +1651,117 @@
1651
1651
  font-size: 12px;
1652
1652
  line-height: 18px;
1653
1653
  }
1654
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector {
1655
+ position: relative;
1656
+ }
1654
1657
  .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container {
1658
+ display: flex;
1655
1659
  width: 100%;
1656
1660
  }
1657
1661
  .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button {
1662
+ display: flex;
1658
1663
  height: calc(2.3em + 20px);
1664
+ box-sizing: border-box;
1665
+ align-items: center;
1666
+ justify-content: center;
1667
+ padding: 0 10px;
1659
1668
  border: 1px solid;
1660
1669
  border-right: none;
1661
- padding: 0 10px;
1670
+ margin: 0;
1662
1671
  background: white;
1663
1672
  border-radius: 0;
1673
+ cursor: pointer;
1674
+ -webkit-user-select: none;
1675
+ -moz-user-select: none;
1676
+ user-select: none;
1677
+ }
1678
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button:hover {
1679
+ background-color: #f5f5f5;
1680
+ }
1681
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button__button-content {
1682
+ display: flex;
1683
+ align-items: center;
1684
+ justify-content: center;
1685
+ }
1686
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button__flag-emoji,
1687
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-flag-emoji {
1688
+ width: 24px;
1689
+ height: 24px;
1690
+ margin: 0 4px;
1691
+ box-sizing: border-box;
1692
+ }
1693
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button__dropdown-arrow {
1694
+ border-top: 4px solid #777;
1695
+ border-right: 4px solid transparent;
1696
+ border-left: 4px solid transparent;
1697
+ margin-right: 4px;
1698
+ transition: all 0.1s ease-out;
1699
+ }
1700
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button__dropdown-arrow--active {
1701
+ transform: rotateX(180deg);
1664
1702
  }
1665
1703
  .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input {
1666
1704
  width: 100%;
1667
- height: calc(2.3em - 2px);
1705
+ height: calc(2.3em + 20px);
1706
+ box-sizing: border-box;
1668
1707
  line-height: 1em;
1669
1708
  padding: 10px 18px;
1670
1709
  border: 1px solid;
1671
1710
  font-size: 18px;
1672
1711
  border-radius: 0;
1712
+ margin: 0;
1713
+ font-family: inherit;
1714
+ }
1715
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:focus {
1716
+ outline: none;
1717
+ border: 2px solid #678B3B;
1673
1718
  }
1674
- .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:active, .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:focus-visible {
1719
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:active, .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:focus-visible {
1675
1720
  border: 2px solid #678B3B;
1676
1721
  outline: none;
1677
1722
  }
1723
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown {
1724
+ position: absolute;
1725
+ z-index: 100;
1726
+ top: 44px;
1727
+ left: 0;
1728
+ display: flex;
1729
+ width: 300px;
1730
+ max-height: 200px;
1731
+ flex-direction: column;
1732
+ padding: 4px 0;
1733
+ margin: 0;
1734
+ background-color: white;
1735
+ box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.25);
1736
+ color: #222;
1737
+ list-style: none;
1738
+ overflow-y: scroll;
1739
+ }
1740
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item {
1741
+ display: flex;
1742
+ min-height: 28px;
1743
+ box-sizing: border-box;
1744
+ align-items: center;
1745
+ padding: 2px 8px;
1746
+ cursor: pointer;
1747
+ }
1748
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item:hover, .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item--selected, .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item--focused {
1749
+ background-color: #f5f5f5;
1750
+ }
1751
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item-flag-emoji {
1752
+ margin-right: 8px;
1753
+ }
1754
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item-country-name {
1755
+ overflow: hidden;
1756
+ margin-right: 8px;
1757
+ font-size: 14px;
1758
+ text-overflow: ellipsis;
1759
+ white-space: nowrap;
1760
+ }
1761
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item-dial-code {
1762
+ color: gray;
1763
+ font-size: 14px;
1764
+ }
1678
1765
  .qr-journey-form-wrapper .disabled-product-fields-section {
1679
1766
  background-color: rgb(243, 243, 243);
1680
1767
  padding: 1rem;
package/dist/index.esm.js CHANGED
@@ -3,7 +3,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3
3
  import { faChevronDown, faChevronRight, faArrowRight } from '@fortawesome/pro-solid-svg-icons';
4
4
  import { v4 } from 'uuid';
5
5
  import { PhoneInput } from 'react-international-phone';
6
- import 'react-international-phone/style.css';
7
6
 
8
7
  /******************************************************************************
9
8
  Copyright (c) Microsoft Corporation.