@salla.sa/twilight-components 1.0.62 → 1.0.63

package/dist/collection/components/salla-search/salla-search.js

@@ -71,7 +71,7 @@ export class SallaSearch {
       h("div", { class: "s-search-results" }, (_a = this.results) === null || _a === void 0 ? void 0 :
         _a.data.map(item => h("a", { href: item.url, class: "s-search-product", innerHTML: this.productSlot
             .replace(/\{name\}/g, item.name)
-            .replace(/\{price\}/g, item.price) //todo:: get discounted price too
+            .replace(/\{price\}/g, salla.money(item.price)) //todo:: get discounted price too
             .replace(/\{image\}/g, item.image_url) })),
         h("p", { ref: el => this.noResults = el, class: "s-search-no-results-placeholder" }, this.noResultsText)));
     return (this.inline ?

package/dist/collection/components/salla-tel-input/salla-tel-input.css

@@ -1,13 +1,226 @@
 @charset "UTF-8";
-/**
- * Initial Variables
- */
-/**
- * Functions
- */
-/**
- * Delivered variables
- */
+/*
+* Global flags style [imported from Int-tel-input]
+*/
+.iti {
+  width: 100%;
+  position: relative;
+  display: inline-block;
+}
+.iti * {
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+}
+.iti__hide {
+  display: none;
+}
+.iti__v-hide {
+  visibility: hidden;
+}
+.iti input, .iti input[type=text], .iti input[type=tel] {
+  position: relative;
+  z-index: 0;
+  direction: ltr !important;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  padding-left: 95px !important;
+  padding-right: 15px !important;
+  margin-left: 0 !important;
+}
+.iti__flag-container {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  padding: 1px;
+}
+.iti__selected-flag {
+  width: 80px;
+  z-index: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  float: left;
+  padding: 0 15px;
+  box-shadow: none !important;
+  outline: none !important;
+}
+.ltr .iti__selected-flag {
+  justify-content: flex-end;
+}
+.iti__selected-flag:before {
+  content: "";
+  display: block;
+  width: 1px;
+  height: 70%;
+  background: #eee;
+  position: absolute;
+  top: 15%;
+  right: 0;
+}
+.iti__selected-flag .iti__flag {
+  display: none;
+}
+.iti__arrow {
+  width: 15px;
+  height: 15px;
+  line-height: 15px;
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.iti__arrow:after {
+  content: "";
+  font-family: sallaicons;
+  font-size: 16px;
+  color: #999;
+  opacity: 0.65;
+}
+.iti__arrow--up:after {
+  transform: rotate(180deg);
+}
+.iti__country-list {
+  width: 100%;
+  max-height: 160px;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 2;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  margin: 5px 0 0 0;
+  border-radius: 5px;
+  box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.05);
+  border: 1px solid #f5f7f9;
+  background-color: white;
+  white-space: nowrap;
+  overflow: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.iti__country-list::-webkit-scrollbar {
+  width: 4px;
+}
+.dark .iti__country-list {
+  background-color: #52525b;
+  border-color: #52525b;
+}
+.iti__country-list li {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: row;
+  padding: 8px 10px;
+  transition: background-color 0.3s;
+}
+.iti__country-list li span {
+  font-size: 12px;
+}
+.iti__country-list li:hover, .iti__country-list li.highlighted {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.iti__country-list--dropup {
+  bottom: 100%;
+  top: unset;
+  margin: 0 0 5px 0;
+}
+@media (max-width: 500px) {
+  .iti__country-list {
+    white-space: normal;
+  }
+}
+.iti__flag-box {
+  display: inline-block;
+  width: 20px;
+  margin: 0 0 0 5px;
+}
+.iti__divider {
+  padding-bottom: 5px;
+  margin-bottom: 5px;
+  border-bottom: 1px solid #eee;
+}
+.iti__country {
+  padding: 5px 10px;
+  outline: none;
+}
+.iti__dial-code {
+  font-family: Arial;
+  color: #999;
+  unicode-bidi: plaintext;
+  letter-spacing: 1px;
+}
+.iti__country.iti__highlight {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.iti__flag-box, .iti__country-name, .iti__dial-code {
+  vertical-align: middle;
+}
+.iti__country-name {
+  flex: auto;
+  margin: 0;
+  padding: 0 10px;
+  white-space: normal;
+  line-height: 1.3;
+}
+.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
+  left: 0;
+}
+.iti--allow-dropdown .iti__flag-container:hover {
+  cursor: pointer;
+}
+.iti--allow-dropdown input[disabled] + .iti__flag-container:hover,
+.iti--allow-dropdown input[readonly] + .iti__flag-container:hover {
+  cursor: default;
+}
+.iti--allow-dropdown input[disabled] + .iti__flag-container:hover .iti__selected-flag,
+.iti--allow-dropdown input[readonly] + .iti__flag-container:hover .iti__selected-flag {
+  background-color: transparent;
+}
+.iti--separate-dial-code .iti__selected-dial-code {
+  unicode-bidi: plaintext;
+  direction: ltr;
+  letter-spacing: 1px;
+  font-family: "Arial", serif;
+  font-size: 13px;
+}
+.iti--container {
+  position: absolute;
+  top: -1000px;
+  z-index: 1060;
+  padding: 1px;
+}
+.iti--container:hover {
+  cursor: pointer;
+}
+
+.iti-mobile .iti--container {
+  inset: 0;
+  margin: 20px;
+  width: calc(100% - 40px);
+  position: fixed;
+  z-index: 9999;
+}
+.iti-mobile .iti__country-list {
+  max-height: 100%;
+  width: 100%;
+  inset: 0;
+}
+.iti-mobile .iti__country {
+  padding: 10px 10px;
+  line-height: 1.5em;
+}
+
+/*
+* Salla Tel Input Component: used to get the telephone input, in login and register steps and also in user profile.
+* You can use these classes to target the elements in the component.
+*/
+/*
+* Global flag style
+*/
 .iti__flag {
   width: 20px;
 }
@@ -1083,221 +1296,4 @@
 }
 .iti__flag.iti__np {
   background-color: transparent;
-}
-
-.iti {
-  width: 100%;
-  position: relative;
-  display: inline-block;
-}
-.iti * {
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-}
-.iti__hide {
-  display: none;
-}
-.iti__v-hide {
-  visibility: hidden;
-}
-.iti input, .iti input[type=text], .iti input[type=tel] {
-  position: relative;
-  z-index: 0;
-  direction: ltr !important;
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  padding-left: 95px !important;
-  padding-right: 15px !important;
-  margin-left: 0 !important;
-}
-.iti__flag-container {
-  width: 100%;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  padding: 1px;
-}
-.iti__selected-flag {
-  width: 80px;
-  z-index: 1;
-  position: relative;
-  display: flex;
-  align-items: center;
-  height: 100%;
-  float: left;
-  padding: 0 15px;
-  box-shadow: none !important;
-  outline: none !important;
-}
-.ltr .iti__selected-flag {
-  justify-content: flex-end;
-}
-.iti__selected-flag:before {
-  content: "";
-  display: block;
-  width: 1px;
-  height: 70%;
-  background: #eee;
-  position: absolute;
-  top: 15%;
-  right: 0;
-}
-.iti__selected-flag .iti__flag {
-  display: none;
-}
-.iti__arrow {
-  width: 15px;
-  height: 15px;
-  line-height: 15px;
-  position: absolute;
-  left: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.iti__arrow:after {
-  content: "";
-  font-family: sallaicons;
-  font-size: 16px;
-  color: #999;
-  opacity: 0.65;
-}
-.iti__arrow--up:after {
-  transform: rotate(180deg);
-}
-.iti__country-list {
-  width: 100%;
-  max-height: 160px;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 2;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  margin: 5px 0 0 0;
-  border-radius: 5px;
-  box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.05);
-  border: 1px solid #f5f7f9;
-  background-color: white;
-  white-space: nowrap;
-  overflow: hidden;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
-.iti__country-list::-webkit-scrollbar {
-  width: 4px;
-}
-.dark .iti__country-list {
-  background-color: #52525b;
-  border-color: #52525b;
-}
-.iti__country-list li {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  flex-direction: row;
-  padding: 8px 10px;
-  transition: background-color 0.3s;
-}
-.iti__country-list li span {
-  font-size: 12px;
-}
-.iti__country-list li:hover, .iti__country-list li.highlighted {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-.iti__country-list--dropup {
-  bottom: 100%;
-  top: unset;
-  margin: 0 0 5px 0;
-}
-@media (max-width: 500px) {
-  .iti__country-list {
-    white-space: normal;
-  }
-}
-.iti__flag-box {
-  display: inline-block;
-  width: 20px;
-  margin: 0 0 0 5px;
-}
-.iti__divider {
-  padding-bottom: 5px;
-  margin-bottom: 5px;
-  border-bottom: 1px solid #eee;
-}
-.iti__country {
-  padding: 5px 10px;
-  outline: none;
-}
-.iti__dial-code {
-  font-family: Arial;
-  color: #999;
-  unicode-bidi: plaintext;
-  letter-spacing: 1px;
-}
-.iti__country.iti__highlight {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-.iti__flag-box, .iti__country-name, .iti__dial-code {
-  vertical-align: middle;
-}
-.iti__country-name {
-  flex: auto;
-  margin: 0;
-  padding: 0 10px;
-  white-space: normal;
-  line-height: 1.3;
-}
-.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
-  left: 0;
-}
-.iti--allow-dropdown .iti__flag-container:hover {
-  cursor: pointer;
-}
-.iti--allow-dropdown input[disabled] + .iti__flag-container:hover,
-.iti--allow-dropdown input[readonly] + .iti__flag-container:hover {
-  cursor: default;
-}
-.iti--allow-dropdown input[disabled] + .iti__flag-container:hover .iti__selected-flag,
-.iti--allow-dropdown input[readonly] + .iti__flag-container:hover .iti__selected-flag {
-  background-color: transparent;
-}
-.iti--separate-dial-code .iti__selected-dial-code {
-  unicode-bidi: plaintext;
-  direction: ltr;
-  letter-spacing: 1px;
-  font-family: "Arial", serif;
-  font-size: 13px;
-}
-.iti--container {
-  position: absolute;
-  top: -1000px;
-  z-index: 1060;
-  padding: 1px;
-}
-.iti--container:hover {
-  cursor: pointer;
-}
-
-.iti-mobile .iti--container {
-  inset: 0;
-  margin: 20px;
-  width: calc(100% - 40px);
-  position: fixed;
-  z-index: 9999;
-}
-.iti-mobile .iti__country-list {
-  max-height: 100%;
-  width: 100%;
-  inset: 0;
-}
-.iti-mobile .iti__country {
-  padding: 10px 10px;
-  line-height: 1.5em;
-}
-
-/*
-* Salla Tel Input Component: used to get the telephone input, in login and register steps and also in user profile.
-* You can use these classes to target the elements in the component.
-*/
+}