@salla.sa/twilight-components 2.9.49 → 2.10.1

package/dist/collection/components/salla-quick-order/salla-quick-order.js

@@ -1,17 +1,14 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { Component, Host, h, Prop, State, Event } from '@stencil/core';
-import HideIcon from '../../assets/svg/eye-off.svg';
+import { Component, Host, h, Prop, State, Event, Element } from '@stencil/core';
 import CelebrationIcon from '../../assets/svg/party-horn.svg';
+import PortraitIcon from '../../assets/svg/portrait.svg';
+import IphoneXIcon from '../../assets/svg/iphone-x.svg';
+import MailIcon from '../../assets/svg/mail.svg';
+import CancelIcon from '../../assets/svg/cancel.svg';
 export class SallaQuickOrder {
   constructor() {
-    this.errorMessages = {
-      terms: 'Terms should be agreed.',
-      name: 'Name with at least 3 chars is required.',
-      email: 'Correct email is required.',
-      phone: 'Correct Phone is required.',
-    };
     /**
      * quick order title
      */
@@ -45,7 +42,6 @@ export class SallaQuickOrder {
     this.expanded = false;
     this.isTermsRequired = false;
     this.countryCode = salla.config.get('user.country_code', 'SA') || 'SA';
-    this.errors = [];
     this.submitSucess = false;
     //Langugae states
     this.placeHolderEmail = salla.lang.get('common.elements.email');
@@ -61,36 +57,22 @@ export class SallaQuickOrder {
       this.agreementShowText = salla.lang.get('pages.checkout.show_full_agreement');
       this.agreementModalHead = salla.lang.get('pages.checkout.full_agreement');
       this.userNameLabel = salla.lang.get('pages.products.your_name');
-      this.errorMessages.terms = salla.lang.get('pages.checkout.check_agreement');
-      this.errorMessages.email = salla.lang.get('pages.checkout.email_required');
-      this.errorMessages.phone = salla.lang.get('common.errors.field_required', { attribute: salla.lang.get('common.elements.mobile') });
-      this.errorMessages.name = salla.lang.get('common.errors.field_required', { attribute: this.userNameLabel });
     });
   }
-  fetchQuickCheckout() {
-    return salla.api.withoutNotifier(() => salla.api.cart.getQuickCheckoutSettings().then(res => {
-      var _a, _b;
-      this.isAvailable = true;
-      this.quickOrderTitle = res.data.title;
-      this.subTitle = res.data.sub_title;
-      this.payButtonTitle = res.data.order_now_button;
-      this.isEmailRequired = res.data.is_email_required;
-      this.isTermsRequired = res.data.show_agreement;
-      this.agreementText = res.data.agreement;
-      this.confirmPayButtonTitle = res.data.confirm_button;
-      this.thanksMessage = res.data.thanks_message;
-      this.quickOrderStyle = res.data.style;
-      this.user = salla.config.get('user') || salla.storage.get('user') || {};
-      this.countryCode = ((_a = this.user) === null || _a === void 0 ? void 0 : _a.country_code) || this.countryCode;
-      // make email required if user is gust or is required from server
-      this.isEmailRequired = ((_b = this.user) === null || _b === void 0 ? void 0 : _b.email) ? false : this.isEmailRequired;
-      // check if one click is available
-      this.oneClick = !(this.isTermsRequired || this.isEmailRequired) && this.user !== null;
-    }));
-  }
   getBtnColor() {
     return this.quickOrderStyle === 'default' ? 'light' : 'primary';
   }
+  async setWrapperHeight() {
+    let expandable = this.host.querySelector('.s-quick-order-expandable');
+    setTimeout(() => {
+      if (expandable.style.maxHeight || this.oneClick) {
+        expandable.style.maxHeight = null;
+      }
+      else {
+        expandable.style.maxHeight = expandable.scrollHeight + "px";
+      }
+    }, 50);
+  }
   getDarkOrLight() {
     return this.quickOrderStyle === 'default' && salla.config.get('theme.color.is_dark') ? 'dark' : 'light';
   }
@@ -101,9 +83,11 @@ export class SallaQuickOrder {
       default: salla.config.get('theme.color.primary'),
     }[this.quickOrderStyle] || '#f3f3f3';
   }
-  async submit(checkOneClick = false) {
+  async submit(e, checkOneClick = false) {
+    e.preventDefault();
     if (checkOneClick && !this.oneClick) {
       this.expanded = !this.expanded;
+      this.setWrapperHeight();
       return;
     }
     return this.getPayload()
@@ -114,40 +98,6 @@ export class SallaQuickOrder {
     })
       .catch(error => error && console.error(error));
   }
-  async isValid() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const inputErrorClass = 's-has-error';
-    this.errors = [];
-    if (this.isTermsRequired && !this.termsChecked) {
-      this.termsInput.classList.add(inputErrorClass);
-      this.errors.push(this.errorMessages.terms);
-    }
-    const emailValue = (_a = this.emailInput) === null || _a === void 0 ? void 0 : _a.value;
-    const nameValue = (_b = this.nameInput) === null || _b === void 0 ? void 0 : _b.value;
-    const phone = await ((_c = this.phoneInput) === null || _c === void 0 ? void 0 : _c.getValues());
-    const phoneValue = phone === null || phone === void 0 ? void 0 : phone.phone;
-    if (Salla.config.isGuest()) {
-      (_d = this.nameInput) === null || _d === void 0 ? void 0 : _d.classList.remove(inputErrorClass);
-      (_e = this.emailInput) === null || _e === void 0 ? void 0 : _e.classList.remove(inputErrorClass);
-      (_f = this.phoneInput) === null || _f === void 0 ? void 0 : _f.classList.remove(inputErrorClass);
-      // email check
-      if (this.isEmailRequired && (!emailValue || !/\S+@\S+\.\S+/.test(emailValue))) {
-        (_g = this.emailInput) === null || _g === void 0 ? void 0 : _g.classList.add(inputErrorClass);
-        this.errors.push(this.errorMessages.email);
-      }
-      // phone check
-      if (!phoneValue || !/^\d+$/.test(phoneValue)) {
-        (_h = this.phoneInput) === null || _h === void 0 ? void 0 : _h.classList.add(inputErrorClass);
-        this.errors.push(this.errorMessages.phone);
-      }
-      // name check
-      if (!nameValue || nameValue.length < 3) {
-        (_j = this.nameInput) === null || _j === void 0 ? void 0 : _j.classList.add(inputErrorClass);
-        this.errors.push(this.errorMessages.name);
-      }
-    }
-    return this.errors.length === 0;
-  }
   async getPayload() {
     var _a, _b, _c, _d, _e, _f;
     if (this.oneClick) {
@@ -156,14 +106,10 @@ export class SallaQuickOrder {
         agreement: true,
       };
     }
-    if (!(await this.isValid())) {
-      this.errors.forEach(error => console.error(error));
-      throw 'Validation failed.';
-    }
     return {
       product_ids: [this.productId],
       email: (_a = this.emailInput) === null || _a === void 0 ? void 0 : _a.value,
-      phone: (_c = (await ((_b = this.phoneInput) === null || _b === void 0 ? void 0 : _b.getValues()))) === null || _c === void 0 ? void 0 : _c.phone,
+      phone: Number((_c = (await ((_b = this.phoneInput) === null || _b === void 0 ? void 0 : _b.getValues()))) === null || _c === void 0 ? void 0 : _c.phone),
       country_code: ((_e = (await ((_d = this.phoneInput) === null || _d === void 0 ? void 0 : _d.getValues()))) === null || _e === void 0 ? void 0 : _e.countryCode) || this.countryCode,
       name: (_f = this.nameInput) === null || _f === void 0 ? void 0 : _f.value,
       agreement: this.termsChecked,
@@ -177,14 +123,6 @@ export class SallaQuickOrder {
     const parsedToDOM = new DOMParser().parseFromString(agreement_text, 'text/html');
     return parsedToDOM.documentElement.innerText.substring(0, length) + '...';
   }
-  clearErrors() {
-    var _a, _b, _c, _d;
-    this.errors = [];
-    (_a = this.termsInput) === null || _a === void 0 ? void 0 : _a.classList.remove('s-has-error');
-    (_b = this.emailInput) === null || _b === void 0 ? void 0 : _b.classList.remove('s-has-error');
-    (_c = this.nameInput) === null || _c === void 0 ? void 0 : _c.classList.remove('s-has-error');
-    (_d = this.phoneInput) === null || _d === void 0 ? void 0 : _d.classList.remove('s-has-error');
-  }
   render() {
     if (!this.isAvailable) {
       return;
@@ -199,29 +137,54 @@ export class SallaQuickOrder {
       h("div", { class: `s-quick-order-container s-quick-order-${this.quickOrderStyle}`, style: { backgroundColor: this.getStyleColor() } },
         h("div", { class: "s-quick-order-button-cont" },
           h("div", null,
-            h("h1", null, this.quickOrderTitle),
+            h("h3", null, this.quickOrderTitle),
             h("p", null, this.subTitle)),
-          h("salla-button", { onClick: () => this.submit(true), color: this.getBtnColor() }, this.oneClick
-            ? this.confirmPayButtonTitle : this.expanded ? h("i", { innerHTML: HideIcon }) : this.confirmPayButtonTitle)),
-        h("div", { class: 's-quick-order-expandable ' + (this.expanded ? 's-quick-order-show' : '') },
-          Salla.config.isGuest() && [
-            h("input", { type: "text", value: this.user.name, placeholder: this.user.name || this.userNameLabel, ref: el => (this.nameInput = el), onFocus: () => this.clearErrors() }),
-            h("div", { class: 's-quick-order-flex-input' },
-              h("input", { type: "email", value: this.user.email, required: this.isEmailRequired, placeholder: this.placeHolderEmail + ' ' + (this.isEmailRequired ? '' : this.emailOptional), ref: el => (this.emailInput = el), onFocus: () => this.clearErrors() }),
-              h("salla-tel-input", { phone: this.user.mobile, ref: el => (this.phoneInput = el), onFocus: () => this.clearErrors(), onBlur: () => this.clearErrors() })),
-          ],
-          this.isTermsRequired && (h("label", { class: "s-quick-order-checkbox-container" },
-            h("input", { onChange: () => (this.termsChecked = this.termsInput.checked), ref: el => (this.termsInput = el), type: "checkbox", onFocus: () => this.clearErrors() }),
-            this.agreementText && (h("div", { innerHTML: this.formatAgreementText(this.agreementText, 150) }, this.agreementText.length > 150 && (h("salla-button", { shape: "link", onClick: () => this.agreementModal.open() }, this.agreementShowText)))))),
-          this.errors.length > 0 && (h("div", { class: "s-quick-order-errors" }, this.errors.map(error => h("p", null,
-            "- ",
-            error)))),
-          h("salla-button", { color: this.getBtnColor(), width: "wide", onClick: () => this.submit() }, this.payButtonTitle)),
+          h("salla-button", { onClick: (e) => this.submit(e, true), color: this.getBtnColor() }, this.oneClick
+            ? this.confirmPayButtonTitle : this.expanded ? h("i", { innerHTML: CancelIcon }) : this.confirmPayButtonTitle)),
+        h("form", { onSubmit: (e) => this.submit(e), class: 's-quick-order-expandable ' + (this.expanded ? 's-quick-order-shown' : '') },
+          Salla.config.isGuest() &&
+            [
+              h("div", { class: "s-form-group" },
+                h("span", { innerHTML: PortraitIcon }),
+                h("input", { type: "text", required: true, class: "s-form-control", placeholder: this.userNameLabel, ref: el => (this.nameInput = el) })),
+              h("div", { class: "s-quick-order-flex-input" },
+                h("div", { class: "s-form-group" },
+                  h("span", { innerHTML: IphoneXIcon }),
+                  h("salla-tel-input", { ref: el => (this.phoneInput = el) })),
+                h("div", { class: "s-form-group" },
+                  h("span", { innerHTML: MailIcon }),
+                  h("input", { type: "email", class: "s-form-control", required: this.isEmailRequired, placeholder: this.placeHolderEmail + ' ' + (this.isEmailRequired ? '' : this.emailOptional), ref: el => (this.emailInput = el) }))),
+            ],
+          this.isTermsRequired && (h("label", { htmlFor: "terms", class: "s-quick-order-terms" },
+            h("input", { type: "checkbox", required: true, name: 'terms', id: 'terms', ref: el => (this.termsInput = el), onChange: () => (this.termsChecked = this.termsInput.checked), class: "s-checkbox" }),
+            h("span", { class: "s-form-label" },
+              " ",
+              h("div", { innerHTML: this.formatAgreementText(this.agreementText, 150) }, this.agreementText.length > 150 && (h("salla-button", { shape: "link", onClick: () => this.agreementModal.open() }, this.agreementShowText))),
+              " "))),
+          h("salla-button", { type: "submit", color: this.getBtnColor(), width: "wide" }, this.payButtonTitle)),
         h("salla-modal", { "modal-title": this.agreementModalHead, ref: modal => (this.agreementModal = modal) },
           h("article", { innerHTML: this.agreementText })))));
   }
-  componentDidLoad() {
-    this.fetchQuickCheckout();
+  componentWillLoad() {
+    return salla.api.withoutNotifier(() => salla.api.cart.getQuickCheckoutSettings().then(res => {
+      var _a, _b;
+      this.isAvailable = true;
+      this.quickOrderTitle = res.data.title;
+      this.subTitle = res.data.sub_title;
+      this.payButtonTitle = res.data.order_now_button;
+      this.isEmailRequired = res.data.is_email_required;
+      this.isTermsRequired = res.data.show_agreement;
+      this.agreementText = res.data.agreement;
+      this.confirmPayButtonTitle = res.data.confirm_button;
+      this.thanksMessage = res.data.thanks_message;
+      this.quickOrderStyle = res.data.style;
+      this.user = salla.config.get('user') || salla.storage.get('user') || {};
+      this.countryCode = ((_a = this.user) === null || _a === void 0 ? void 0 : _a.country_code) || this.countryCode;
+      // make email required if user is gust or is required from server
+      this.isEmailRequired = ((_b = this.user) === null || _b === void 0 ? void 0 : _b.email) ? false : this.isEmailRequired;
+      // check if one click is available
+      this.oneClick = !(this.isTermsRequired || this.isEmailRequired) && this.user !== null;
+    }));
   }
   static get is() { return "salla-quick-order"; }
   static get originalStyleUrls() { return {
@@ -399,7 +362,6 @@ export class SallaQuickOrder {
     "expanded": {},
     "isTermsRequired": {},
     "countryCode": {},
-    "errors": {},
     "submitSucess": {},
     "placeHolderEmail": {},
     "emailOptional": {},
@@ -424,4 +386,5 @@ export class SallaQuickOrder {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "host"; }
 }

package/dist/collection/components/salla-rating-stars/salla-rating-stars.js

@@ -59,16 +59,20 @@ export class SallaRatingStars {
     return stars;
   }
   render() {
-    return (h(Host, null, this.value || this.value == 0 ?
-      h("div", { class: "s-rating-stars-wrapper" },
-        " ",
-        this.createStars(this.value),
-        " ")
-      :
-        h("div", { class: "s-rating-stars-element", ref: (el) => this.startsElem = el },
-          h("input", { type: "hidden", class: "rating_hidden_input", name: this.name, value: "" }),
-          [1, 2, 3, 4, 5].map(star => h("button", { class: `s-rating-stars-btn-star s-rating-stars-` + this.size, "data-star": star },
-            h("span", { innerHTML: Star2 }))))));
+    var _a;
+    //TODO:: find a better fix, this is a patch for issue that duplicates the stars twice @see the screenshot inside this folder
+    return ((_a = this.host.closest('.swiper-slide')) === null || _a === void 0 ? void 0 : _a.classList.contains('swiper-slide-duplicate'))
+      ? ''
+      : (h(Host, null, this.value || this.value == 0 ?
+        h("div", { class: "s-rating-stars-wrapper" },
+          " ",
+          this.createStars(this.value),
+          " ")
+        :
+          h("div", { class: "s-rating-stars-element", ref: (el) => this.startsElem = el },
+            h("input", { type: "hidden", class: "rating_hidden_input", name: this.name, value: "" }),
+            [1, 2, 3, 4, 5].map(star => h("button", { class: `s-rating-stars-btn-star s-rating-stars-` + this.size, "data-star": star },
+              h("span", { innerHTML: Star2 }))))));
   }
   componentDidLoad() {
     this.initiateRating();

package/dist/collection/components/salla-slider/salla-slider.css

@@ -170,4 +170,246 @@
 }
 .swiper-centered > .swiper-wrapper > .swiper-slide {
   scroll-snap-align: center center;
+}
+
+:root {
+  /*
+  --swiper-pagination-color: var(--swiper-theme-color);
+  --swiper-pagination-bullet-size: 8px;
+  --swiper-pagination-bullet-width: 8px;
+  --swiper-pagination-bullet-height: 8px;
+  --swiper-pagination-bullet-inactive-color: #000;
+  --swiper-pagination-bullet-inactive-opacity: 0.2;
+  --swiper-pagination-bullet-opacity: 1;
+  --swiper-pagination-bullet-horizontal-gap: 4px;
+  --swiper-pagination-bullet-vertical-gap: 6px;
+  */
+}
+
+.swiper-pagination {
+  position: absolute;
+  text-align: center;
+  transition: 300ms opacity;
+  transform: translate3d(0, 0, 0);
+  z-index: 10;
+}
+.swiper-pagination.swiper-pagination-hidden {
+  opacity: 0;
+}
+.swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled {
+  display: none !important;
+}
+
+/* Common Styles */
+.swiper-pagination-fraction,
+.swiper-pagination-custom,
+.swiper-horizontal > .swiper-pagination-bullets,
+.swiper-pagination-bullets.swiper-pagination-horizontal {
+  bottom: 10px;
+  left: 0;
+  width: 100%;
+}
+
+/* Bullets */
+.swiper-pagination-bullets-dynamic {
+  overflow: hidden;
+  font-size: 0;
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transform: scale(0.33);
+  position: relative;
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
+  transform: scale(1);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
+  transform: scale(1);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
+  transform: scale(0.66);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
+  transform: scale(0.33);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
+  transform: scale(0.66);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
+  transform: scale(0.33);
+}
+
+.swiper-pagination-bullet {
+  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
+  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
+  display: inline-block;
+  border-radius: 50%;
+  background: var(--swiper-pagination-bullet-inactive-color, #000);
+  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
+}
+button.swiper-pagination-bullet {
+  border: none;
+  margin: 0;
+  padding: 0;
+  box-shadow: none;
+  appearance: none;
+}
+
+.swiper-pagination-clickable .swiper-pagination-bullet {
+  cursor: pointer;
+}
+.swiper-pagination-bullet:only-child {
+  display: none !important;
+}
+
+.swiper-pagination-bullet-active {
+  opacity: var(--swiper-pagination-bullet-opacity, 1);
+  background: var(--swiper-pagination-color, var(--swiper-theme-color));
+}
+
+.swiper-vertical > .swiper-pagination-bullets,
+.swiper-pagination-vertical.swiper-pagination-bullets {
+  right: 10px;
+  top: 50%;
+  transform: translate3d(0px, -50%, 0);
+}
+.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
+.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
+  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
+  display: block;
+}
+.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
+.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+}
+.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
+.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  display: inline-block;
+  transition: 200ms transform, 200ms top;
+}
+
+.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
+.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
+  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
+}
+.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
+.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
+.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transition: 200ms transform, 200ms left;
+}
+
+.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transition: 200ms transform, 200ms right;
+}
+
+/* Progress */
+.swiper-pagination-progressbar {
+  background: rgba(0, 0, 0, 0.25);
+  position: absolute;
+}
+.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+  background: var(--swiper-pagination-color, var(--swiper-theme-color));
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  transform: scale(0);
+  transform-origin: left top;
+}
+.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+  transform-origin: right top;
+}
+.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
+  width: 100%;
+  height: 4px;
+  left: 0;
+  top: 0;
+}
+.swiper-vertical > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
+  width: 4px;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+.swiper-pagination-lock {
+  display: none;
+}
+
+:root {
+  --swiper-navigation-size: 44px;
+  /*
+  --swiper-navigation-color: var(--swiper-theme-color);
+  */
+}
+
+.swiper-button-prev,
+.swiper-button-next {
+  position: absolute;
+  top: 50%;
+  width: calc(var(--swiper-navigation-size) / 44 * 27);
+  height: var(--swiper-navigation-size);
+  margin-top: calc(0px - var(--swiper-navigation-size) / 2);
+  z-index: 10;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--swiper-navigation-color, var(--swiper-theme-color));
+}
+.swiper-button-prev.swiper-button-disabled,
+.swiper-button-next.swiper-button-disabled {
+  opacity: 0.35;
+  cursor: auto;
+  pointer-events: none;
+}
+.swiper-button-prev.swiper-button-hidden,
+.swiper-button-next.swiper-button-hidden {
+  opacity: 0;
+  cursor: auto;
+  pointer-events: none;
+}
+.swiper-navigation-disabled .swiper-button-prev,
+.swiper-navigation-disabled .swiper-button-next {
+  display: none !important;
+}
+.swiper-button-prev:after,
+.swiper-button-next:after {
+  font-family: swiper-icons;
+  font-size: var(--swiper-navigation-size);
+  text-transform: none !important;
+  letter-spacing: 0;
+  font-variant: initial;
+  line-height: 1;
+}
+
+.swiper-button-prev,
+.swiper-rtl .swiper-button-next {
+  left: 10px;
+  right: auto;
+}
+.swiper-button-prev:after,
+.swiper-rtl .swiper-button-next:after {
+  content: "prev";
+}
+
+.swiper-button-next,
+.swiper-rtl .swiper-button-prev {
+  right: 10px;
+  left: auto;
+}
+.swiper-button-next:after,
+.swiper-rtl .swiper-button-prev:after {
+  content: "next";
+}
+
+.swiper-button-lock {
+  display: none;
 }