@salla.sa/twilight-components 2.14.537 → 2.14.539

package/dist/collection/components/salla-loyalty-points-history/salla-loyalty-points-history.css

@@ -0,0 +1,365 @@
+/*!twlt*/:host {
+  display: block;
+}
+.table {
+  display: table;
+}
+.s-loyalty-points-history-balance-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 1rem;
+}
+.s-loyalty-points-history-balance-value {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+}
+.s-loyalty-points-history-balance-label {
+  font-weight: 400;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+.s-loyalty-points-history-balance-icon {
+  height: 52px;
+  width: 52px;
+  border-radius: 9999px;
+  background-color: var(--color-primary-reverse);
+  padding-top: 16px;
+  padding-bottom: 16px;
+  padding-left: 13px;
+  padding-right: 13px;
+  font-size: 25px;
+  color: var(--color-primary);
+}
+.s-loyalty-points-history-container > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
+}
+@media (min-width: 768px) {
+  .s-loyalty-points-history-container > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
+  }
+}
+.s-loyalty-points-history-mobile-title {
+  display: inline-block;
+  width: 8rem;
+  font-weight: 400;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+@media (min-width: 768px) {
+  .s-loyalty-points-history-mobile-title {
+    display: none;
+  }
+}
+.s-loyalty-points-history-reference-id {
+  display: none;
+}
+@media (min-width: 768px) {
+  .s-loyalty-points-history-reference-id {
+    display: inline-block;
+  }
+}
+.s-loyalty-points-history-buy-as-gift-icon {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+  display: inline-block;
+  color: var(--color-primary);
+}
+.s-loyalty-points-history-copy-to-clipboard-button {
+  display: flex;
+  align-items: center;
+}
+@media (min-width: 768px) {
+  .s-loyalty-points-history-copy-to-clipboard-button {
+    display: none;
+  }
+}
+.s-loyalty-points-history-copy-to-clipboard-button salla-button {
+  position: relative;
+}
+.s-loyalty-points-history-copy-to-clipboard-button-icon {
+  pointer-events: none;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+.s-loyalty-points-history-copy-to-clipboard-button-icon:where([dir="ltr"], [dir="ltr"] *) {
+  margin-left: 0.25rem;
+}
+.s-loyalty-points-history-copy-to-clipboard-button-icon:where([dir="rtl"], [dir="rtl"] *) {
+  margin-right: 0.25rem;
+}
+@media (min-width: 768px) {
+  .s-loyalty-points-history-status-container {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+}
+.s-loyalty-points-history-status-container:where([dir="ltr"], [dir="ltr"] *) {
+  margin-left: auto;
+}
+.s-loyalty-points-history-status-container:where([dir="rtl"], [dir="rtl"] *) {
+  margin-right: auto;
+}
+.s-loyalty-points-history-status-container i {
+  margin-top: 0.25rem;
+}
+.s-loyalty-points-history-status-container i:where([dir="ltr"], [dir="ltr"] *) {
+  margin-right: 0.25rem;
+}
+.s-loyalty-points-history-status-container i:where([dir="rtl"], [dir="rtl"] *) {
+  margin-left: 0.25rem;
+}
+.s-loyalty-points-history-rated-text {
+  --tw-text-opacity: 1;
+  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
+}
+.s-loyalty-points-history-unrated-text {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
+}
+.s-loyalty-points-history-no-content {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-top: 2.5rem;
+  padding-bottom: 5rem;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+.s-loyalty-points-history-no-content .icon {
+  margin-bottom: 1rem;
+  display: flex;
+  height: 8rem;
+  width: 8rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+  font-size: 3rem;
+  line-height: 1;
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
+}
+.s-loyalty-points-history-no-content p {
+  margin-bottom: 1rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.s-loyalty-points-history-table {
+  min-width: 100%;
+  border-collapse: separate;
+}
+@media (min-width: 768px) {
+  .s-loyalty-points-history-table {
+    margin-bottom: -0.75rem;
+    --tw-border-spacing-y: 1.25rem;
+    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+  }
+}
+.s-loyalty-points-history-table-head {
+  margin-bottom: 1.25rem;
+  display: none;
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+}
+@media (min-width: 768px) {
+  .s-loyalty-points-history-table-head {
+    display: table-header-group;
+  }
+}
+.s-loyalty-points-history-table-head-tr-th {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  text-align: start;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.s-loyalty-points-history-table-head-tr-th:where([dir="ltr"], [dir="ltr"] *) {
+  text-align: left;
+}
+.s-loyalty-points-history-table-head-tr-th:last-child:where([dir="ltr"], [dir="ltr"] *) {
+  text-align: right;
+}
+.s-loyalty-points-history-table-head-tr-th:where([dir="rtl"], [dir="rtl"] *) {
+  text-align: right;
+}
+.s-loyalty-points-history-table-head-tr-th:last-child:where([dir="rtl"], [dir="rtl"] *) {
+  text-align: left;
+}
+.s-loyalty-points-history-table-tbody-tr {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  overflow: hidden;
+  border-radius: var(--s-radius, 0.25rem);
+  border-bottom-width: 8px;
+  border-top-width: 8px;
+  --tw-border-opacity: 1;
+  border-color: rgb(249 250 251 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  padding: 0.5rem;
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 500ms;
+}
+@media (min-width: 768px) {
+  .s-loyalty-points-history-table-tbody-tr {
+    display: table-row;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    padding: 0px;
+  }
+}
+.s-loyalty-points-history-table-tbody-tr-td {
+  width: 100%;
+  white-space: nowrap;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.s-loyalty-points-history-table-tbody-tr-td:first-child {
+  font-weight: 700;
+}
+@media (min-width: 768px) {
+  .s-loyalty-points-history-table-tbody-tr-td {
+    height: 5rem;
+    width: auto;
+  }
+  .s-loyalty-points-history-table-tbody-tr-td:last-child {
+    text-align: end;
+  }
+  .s-loyalty-points-history-table-tbody-tr-td:first-child:where([dir="ltr"], [dir="ltr"] *) {
+    border-top-left-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+  }
+  .s-loyalty-points-history-table-tbody-tr-td:first-child:where([dir="rtl"], [dir="rtl"] *) {
+    border-top-right-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+  }
+}
+.s-loyalty-points-history-table-tbody-tr-td:first-child {
+  font-weight: 700;
+}
+.s-loyalty-points-history-table-tbody-tr-td-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+@media (min-width: 768px) {
+  .s-loyalty-points-history-table-tbody-tr-td-content {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+}
+.s-loyalty-points-history-table-tbody-tr-td-content:where([dir="ltr"], [dir="ltr"] *) {
+  padding-right: 0.5rem;
+}
+.s-loyalty-points-history-table-tbody-tr-td-content:where([dir="rtl"], [dir="rtl"] *) {
+  padding-left: 0.5rem;
+}
+.s-loyalty-points-history-table-tbody-tr a {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  display: block;
+  width: 100%;
+}
+.s-loyalty-points-history-table-tbody-tr a:where([dir="ltr"], [dir="ltr"] *) {
+  left: 0px;
+}
+.s-loyalty-points-history-table-tbody-tr a:where([dir="rtl"], [dir="rtl"] *) {
+  right: 0px;
+}
+.s-loyalty-points-history-table-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 80px;
+}
+.s-loyalty-points-history-table-empty-state i {
+  margin-bottom: 2rem;
+  margin-top: 4rem;
+  font-size: 80px;
+  color: var(--infinte-color);
+}
+.s-loyalty-points-history-table-placeholder-title {
+  padding: 0.75rem;
+  text-align: center;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+}
+.s-loyalty-points-history-table-placeholder-sub-title {
+  text-align: center;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+.s-loyalty-points-history-load-more {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: center;
+}
+.s-loyalty-points-history-table-transaction-status {
+  display: flex;
+  width: max-content;
+  align-items: center;
+  border-radius: 20px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 246 235 / var(--tw-bg-opacity, 1));
+  padding-top: 6px;
+  padding-bottom: 6px;
+  padding-left: 19px;
+  padding-right: 19px;
+  --tw-text-opacity: 1;
+  color: rgb(164 111 41 / var(--tw-text-opacity, 1));
+}
+.s-loyalty-points-history-table-transaction-status-pending {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 246 235 / var(--tw-bg-opacity, 1));
+  --tw-text-opacity: 1;
+  color: rgb(164 111 41 / var(--tw-text-opacity, 1));
+}
+.s-loyalty-points-history-table-transaction-status-used {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 251 246 / var(--tw-bg-opacity, 1));
+  --tw-text-opacity: 1;
+  color: rgb(0 175 108 / var(--tw-text-opacity, 1));
+}
+.s-loyalty-points-history-table-transaction-status-revoked {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 236 236 / var(--tw-bg-opacity, 1));
+  --tw-text-opacity: 1;
+  color: rgb(245 81 87 / var(--tw-text-opacity, 1));
+}
+.s-loyalty-points-history-table-transaction-status-expired {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
+  --tw-text-opacity: 1;
+  color: rgb(158 158 158 / var(--tw-text-opacity, 1));
+}

package/dist/collection/components/salla-loyalty-points-history/salla-loyalty-points-history.js

@@ -79,7 +79,7 @@ export class SallaLoyaltyPointsHistory {
         }
     }
     render() {
-        return (h(Host, { key: '2d1ecb37f0cc74c3d6c3c29bc95d6043b373155f' }, h("div", { key: '2c1a3e6af83fde1f55f6d5b5bed246a3206673c4' }, this.isLoadingLoyalty ? (h("salla-loading", null)) : (h("div", null, h("table", { class: "s-loyalty-points-history-table" }, h("tbody", null, h("tr", null, h("td", null, h("div", { class: "s-loyalty-points-history-balance-container" }, h("i", { class: "s-loyalty-points-history-balance-icon sicon-gift" }), h("div", null, h("div", { class: "s-loyalty-points-history-balance-value" }, this.balance, " ", salla.lang.get('pages.loyalty_program.point')), h("div", { class: "s-loyalty-points-history-balance-label" }, salla.lang.get('pages.loyalty_program.your_points')))))))), this.loyaltyPointsArray.length > 0 ? (h("div", null, h("table", { class: "s-loyalty-points-history-table" }, h("thead", { class: "s-loyalty-points-history-table-head" }, h("tr", null, h("th", { scope: "col", class: "s-loyalty-points-history-table-head-tr-th" }, salla.lang.get('pages.wallet.points')), h("th", { scope: "col", class: "s-loyalty-points-history-table-head-tr-th" }, salla.lang.get('pages.wallet.date')), h("th", { scope: "col", class: "s-loyalty-points-history-table-head-tr-th" }, salla.lang.get('pages.wallet.expiry_date')), h("th", { scope: "col", class: "s-loyalty-points-history-table-head-tr-th" }, salla.lang.get('common.elements.note')), h("th", { scope: "col", class: "s-loyalty-points-history-table-head-tr-th" }, salla.lang.get('common.elements.status')))), h("tbody", null, this.loyaltyPointsArray.map(point => (h("tr", { class: "s-loyalty-points-history-table-tbody-tr" }, h("td", { class: "s-loyalty-points-history-table-tbody-tr-td" }, h("div", { class: "s-loyalty-points-history-table-tbody-tr-td-content" }, h("span", { class: "s-loyalty-points-history-mobile-title" }, salla.lang.get('pages.wallet.points'), ":"), h("span", null, point?.type === 'plus' ? '+' : '', point?.amount || '', " ", salla.lang.get('pages.loyalty_program.point')))), h("td", { class: "s-loyalty-points-history-table-tbody-tr-td" }, h("div", { class: "s-loyalty-points-history-table-tbody-tr-td-content" }, h("span", { class: "s-loyalty-points-history-mobile-title" }, salla.lang.get('pages.wallet.date'), ":"), h("span", null, formatDate(point?.created_at ? Number(point.created_at) * 1000 : undefined)))), h("td", { class: "s-loyalty-points-history-table-tbody-tr-td" }, h("div", { class: "s-loyalty-points-history-table-tbody-tr-td-content" }, h("span", { class: "s-loyalty-points-history-mobile-title" }, salla.lang.get('pages.wallet.expiry_date'), ":"), h("span", null, formatDate(point?.expires_at ? Number(point.expires_at) * 1000 : undefined)))), h("td", { class: "s-loyalty-points-history-table-tbody-tr-td" }, h("div", { class: "s-loyalty-points-history-table-tbody-tr-td-content" }, h("span", { class: "s-loyalty-points-history-mobile-title" }, salla.lang.get('common.elements.note'), ":"), h("span", null, translateKey(point?.key)))), h("td", { class: "s-loyalty-points-history-table-tbody-tr-td" }, h("div", { class: "s-loyalty-points-history-table-tbody-tr-td-content" }, h("span", { class: "s-loyalty-points-history-mobile-title" }, salla.lang.get('common.elements.status'), ":"), h("div", { class: {
+        return (h(Host, { key: '2727e153c078533fa8fa48fa4b7349d5e7115b2b' }, h("div", { key: '24fa22fc520b8bb53d49a8f5ca1014fe01e60fb2' }, this.isLoadingLoyalty ? (h("salla-loading", null)) : (h("div", null, h("table", { class: "s-loyalty-points-history-table" }, h("tbody", null, h("tr", null, h("td", null, h("div", { class: "s-loyalty-points-history-balance-container" }, h("i", { class: "s-loyalty-points-history-balance-icon sicon-gift" }), h("div", null, h("div", { class: "s-loyalty-points-history-balance-value" }, this.balance, " ", salla.lang.get('pages.loyalty_program.point')), h("div", { class: "s-loyalty-points-history-balance-label" }, salla.lang.get('pages.loyalty_program.your_points')))))))), this.loyaltyPointsArray.length > 0 ? (h("div", null, h("table", { class: "s-loyalty-points-history-table" }, h("thead", { class: "s-loyalty-points-history-table-head" }, h("tr", null, h("th", { scope: "col", class: "s-loyalty-points-history-table-head-tr-th" }, salla.lang.get('pages.wallet.points')), h("th", { scope: "col", class: "s-loyalty-points-history-table-head-tr-th" }, salla.lang.get('pages.wallet.date')), h("th", { scope: "col", class: "s-loyalty-points-history-table-head-tr-th" }, salla.lang.get('pages.wallet.expiry_date')), h("th", { scope: "col", class: "s-loyalty-points-history-table-head-tr-th" }, salla.lang.get('common.elements.note')), h("th", { scope: "col", class: "s-loyalty-points-history-table-head-tr-th" }, salla.lang.get('common.elements.status')))), h("tbody", null, this.loyaltyPointsArray.map(point => (h("tr", { class: "s-loyalty-points-history-table-tbody-tr" }, h("td", { class: "s-loyalty-points-history-table-tbody-tr-td" }, h("div", { class: "s-loyalty-points-history-table-tbody-tr-td-content" }, h("span", { class: "s-loyalty-points-history-mobile-title" }, salla.lang.get('pages.wallet.points'), ":"), h("span", null, point?.type === 'plus' ? '+' : '', point?.amount || '', " ", salla.lang.get('pages.loyalty_program.point')))), h("td", { class: "s-loyalty-points-history-table-tbody-tr-td" }, h("div", { class: "s-loyalty-points-history-table-tbody-tr-td-content" }, h("span", { class: "s-loyalty-points-history-mobile-title" }, salla.lang.get('pages.wallet.date'), ":"), h("span", null, formatDate(point?.created_at ? Number(point.created_at) * 1000 : undefined)))), h("td", { class: "s-loyalty-points-history-table-tbody-tr-td" }, h("div", { class: "s-loyalty-points-history-table-tbody-tr-td-content" }, h("span", { class: "s-loyalty-points-history-mobile-title" }, salla.lang.get('pages.wallet.expiry_date'), ":"), h("span", null, formatDate(point?.expires_at ? Number(point.expires_at) * 1000 : undefined)))), h("td", { class: "s-loyalty-points-history-table-tbody-tr-td" }, h("div", { class: "s-loyalty-points-history-table-tbody-tr-td-content" }, h("span", { class: "s-loyalty-points-history-mobile-title" }, salla.lang.get('common.elements.note'), ":"), h("span", null, translateKey(point?.key)))), h("td", { class: "s-loyalty-points-history-table-tbody-tr-td" }, h("div", { class: "s-loyalty-points-history-table-tbody-tr-td-content" }, h("span", { class: "s-loyalty-points-history-mobile-title" }, salla.lang.get('common.elements.status'), ":"), h("div", { class: {
                 's-loyalty-points-history-table-transaction-status': true,
                 's-loyalty-points-history-table-transaction-status-pending': point?.status_key === 'pending',
                 's-loyalty-points-history-table-transaction-status-revoked': point?.status_key === 'revoked',
@@ -88,6 +88,16 @@ export class SallaLoyaltyPointsHistory {
             } }, point?.status)))))))), h("div", { class: "s-loyalty-points-history-load-more" }, !!this.nextPageUrlLoyalty && (h("salla-button", { onClick: this.handleClick, loading: this.isLoadingLoyalty }, salla.lang.get('common.elements.load_more')))))) : (h("div", { class: "s-loyalty-points-history-table-empty-state" }, h("span", { innerHTML: GiftIcon }), h("div", { class: "s-loyalty-points-history-table-placeholder-title" }, salla.lang.get('pages.loyalty_program.no_loyality_points_title')), h("div", { class: "s-loyalty-points-history-table-placeholder-sub-title" }, salla.lang.get('pages.loyalty_program.no_loyality_points_sub_title')))))))));
     }
     static get is() { return "salla-loyalty-points-history"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-loyalty-points-history.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-loyalty-points-history.css"]
+        };
+    }
     static get states() {
         return {
             "loyaltyPointsArray": {},