@salla.sa/twilight-components 2.14.536 → 2.14.538

package/dist/collection/components/salla-list-tile/salla-list-tile.css

@@ -0,0 +1,190 @@
+/*!twlt*/.shadow {
+    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+.s-gifting-widget .s-list-tile-item-icon {
+    display: none
+}
+.s-gifting-widget-vertical .s-list-tile-item-icon {
+    display: block
+}
+.s-gifting-widget-vertical .s-list-tile-item-title svg {
+    fill: var(--color-primary)
+}
+.s-gifting-widget-vertical .s-list-tile-item-subtitle {
+    padding-right: 3.5rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    --tw-text-opacity: 1;
+    color: rgb(107 114 128 / var(--tw-text-opacity, 1))
+}
+.s-gifting-widget-vertical .s-list-tile-item {
+    flex-wrap: wrap;
+    padding: 0px
+}
+@media (min-width: 1024px) {
+    .s-gifting-widget-vertical .s-list-tile-item-action {
+        flex: 1 1 0%
+    }
+}
+.s-gifting-widget .s-list-tile-item {
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 1rem;
+    border-radius: 0.75rem;
+    border-width: 1px;
+    --tw-border-opacity: 1;
+    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+    padding: 1.25rem;
+    text-align: center
+}
+@media (min-width: 768px) {
+    .s-gifting-widget .s-list-tile-item {
+        text-align: left
+    }
+}
+@media (min-width: 1024px) {
+    .s-gifting-widget .s-list-tile-item {
+        flex-direction: row
+    }
+}
+@media (min-width: 768px) {
+    .s-gifting-widget .s-list-tile-item:where([dir="rtl"], [dir="rtl"] *) {
+        text-align: right
+    }
+}
+.s-list-tile-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+    padding: 0.75rem;
+    --tw-text-opacity: 1;
+    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+    text-decoration-line: none
+}
+.s-list-tile-item-href {
+    cursor: pointer
+}
+.s-list-tile-item-icon {
+    margin-right: 1rem;
+    flex-shrink: 0
+}
+.s-list-tile-item-icon:where([dir="rtl"], [dir="rtl"] *) {
+    margin-left: 1rem;
+    margin-right: 0px
+}
+.s-list-tile-item-title {
+    font-size: 1rem;
+    line-height: 1.5rem
+}
+.s-list-tile-item-subtitle {
+    font-size: 0.875rem;
+    line-height: 1.25rem
+}
+.s-loyalty-skeleton .s-list-tile-item-content {
+    display: block;
+    width: 100%
+}
+.s-loyalty-widget .s-list-tile-item {
+    padding: 0px !important
+}
+.s-loyalty-after-exchange .s-list-tile-item {
+    position: relative;
+    justify-content: space-between;
+    overflow: hidden;
+    border-radius: var(--s-radius, 0.25rem);
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem
+}
+.s-loyalty-after-exchange .s-list-tile-item::after {
+    pointer-events: none;
+    position: absolute;
+    inset: 0px;
+    display: block;
+    height: 100%;
+    width: 100%;
+    background-color: var(--color-primary);
+    opacity: .08;
+    --tw-content: '';
+    content: var(--tw-content)
+}
+.s-loyalty-after-exchange .s-list-tile-item .s-list-tile-item-title {
+    font-size: 15px
+}
+.s-loyalty-program-after-exchange .s-list-tile-item {
+    position: relative;
+    justify-content: space-between;
+    overflow: hidden;
+    border-radius: var(--s-radius, 0.25rem);
+    background-color: var(--color-primary);
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem
+}
+.s-loyalty-program-after-exchange .s-list-tile-item .s-list-tile-item-title {
+    font-size: 0.875rem;
+    line-height: 1.25rem
+}
+.s-loyalty-program-panel-widget .s-list-tile-item {
+    padding: 0px !important
+}
+.s-scopes-skeleton .s-list-tile-item-content {
+    display: block;
+    width: 100%
+}
+.s-scopes-skeleton .s-list-tile-item-icon {
+    margin-right: 2rem
+}
+.s-scopes-skeleton .s-list-tile-item-icon:where([dir="rtl"], [dir="rtl"] *) {
+    margin-right: 0px;
+    margin-left: 2rem
+}
+.s-user-settings-section .s-list-tile-item {
+    align-items: flex-start;
+    background-color: transparent;
+    padding: 1.25rem
+}
+@media (min-width: 768px) {
+    .s-user-settings-section .s-list-tile-item {
+        align-items: center
+    }
+}
+.s-user-settings-section .s-list-tile-item-action {
+    margin-left: auto
+}
+.s-user-settings-section .s-list-tile-item-action:where([dir="rtl"], [dir="rtl"] *) {
+    margin-right: auto;
+    margin-left: 0px
+}
+.s-user-settings-section .s-list-tile-item-action button {
+    width: 100%;
+    padding: 10px
+}
+.s-user-settings-section-delete-user .s-list-tile-item {
+    flex-wrap: wrap
+}
+@media (min-width: 768px) {
+    .s-user-settings-section-delete-user .s-list-tile-item {
+        flex-wrap: nowrap
+    }
+}
+.s-user-settings-section-delete-user .s-list-tile-item-icon {
+    position: relative;
+    top: 5px
+}
+@media (min-width: 768px) {
+    .s-user-settings-section-delete-user .s-list-tile-item-icon {
+        top: 0px
+    }
+}
+@media (max-width: 768px) {
+    .s-user-settings-section-delete-user .s-list-tile-item-content {
+        flex: 1 0 85%
+    }
+    .s-user-settings-section-delete-user .s-list-tile-item-action {
+        flex: 1 1 100%;
+        margin-top: 1rem
+    }
+}

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

@@ -1,4 +1,4 @@
-.s-loading {
+/*!twlt*/.s-loading {
   animation: spin 1s linear infinite;
   fill: var(--color-primary);
 }
@@ -16,4 +16,15 @@
   100% {
     transform: rotate(360deg);
   }
-}
+}
+.border {
+  border-width: 1px;
+}
+.s-loading-fill-color {
+  fill: var(--color-primary);
+}
+.s-map-modal-body .s-loading-container {
+  position: absolute;
+  margin: 0px;
+  padding: 5rem;
+}

package/dist/collection/components/salla-localization-modal/salla-localization-modal.css

@@ -0,0 +1,170 @@
+/*!twlt*//* Styles come from the per-component Tailwind build (utilities.json). */
+.s-hidden {
+    display: none
+}
+.btn {
+    display: inline-flex;
+    flex: 1 1 0%;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    border-radius: 0.375rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    padding-bottom: 0.625rem;
+    padding-top: 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 700;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms
+}
+.btn:hover {
+    opacity: 0.8
+}
+.s-hidden {
+    display: none
+}
+.s-localization-modal-trigger-btn {
+    display: inline-flex;
+    width: 100%;
+    flex-grow: 0;
+    flex-basis: 0px;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    border-radius: 9999px;
+    background-color: rgb(229 231 235 / 0.5);
+    padding-left: 0.875rem;
+    padding-right: 0.875rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms
+}
+.s-localization-modal-trigger-btn:hover {
+    background-color: rgb(229 231 235 / 0.7)
+}
+.s-localization-modal-trigger-separator {
+    margin-left: 0.375rem;
+    margin-right: 0.375rem
+}
+.s-localization-modal-title {
+    font-size: 1rem;
+    line-height: 1.5rem;
+    font-weight: 500;
+    --tw-text-opacity: 1;
+    color: rgb(17 24 39 / var(--tw-text-opacity, 1))
+}
+.s-localization-modal-section {
+    margin-bottom: 2rem
+}
+.s-localization-modal-label-slot {
+    flex-grow: 1
+}
+.s-localization-modal-inner {
+    width: 100%
+}
+.s-localization-modal-section-inner {
+    margin-top: 1rem
+}
+.s-localization-modal-section-inner > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(1rem * var(--tw-space-y-reverse))
+}
+.s-localization-modal-item {
+    display: flex;
+    align-items: center
+}
+.s-localization-modal-input {
+    height: 1rem;
+    width: 1rem;
+    --tw-border-opacity: 1;
+    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+    color: var(--color-primary)
+}
+.s-localization-modal-input:focus {
+    --tw-ring-color: var(--color-primary)
+}
+.s-localization-modal-label {
+    display: flex;
+    flex-grow: 1;
+    cursor: pointer;
+    align-items: center;
+    justify-content: space-between;
+    font-weight: 500;
+    --tw-text-opacity: 1;
+    color: rgb(55 65 81 / var(--tw-text-opacity, 1))
+}
+.s-localization-modal-label:where([dir="ltr"], [dir="ltr"] *) {
+    margin-left: 0.75rem
+}
+.s-localization-modal-label:where([dir="rtl"], [dir="rtl"] *) {
+    margin-right: 0.75rem
+}
+.s-localization-modal-flag {
+    border-radius: 0.125rem
+}
+.s-localization-modal-currency {
+    --tw-text-opacity: 1;
+    color: rgb(156 163 175 / var(--tw-text-opacity, 1))
+}
+.s-localization-modal-select {
+    height: 2.5rem;
+    width: 100%;
+    appearance: none;
+    border-radius: 0.375rem;
+    border-width: 1px;
+    --tw-border-opacity: 1;
+    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+    background-position: right;
+    background-repeat: no-repeat;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    --tw-text-opacity: 1;
+    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms
+}
+.s-localization-modal-select:focus {
+    border-color: var(--color-primary)
+}
+.s-localization-modal-select:where([dir="rtl"], [dir="rtl"] *) {
+    background-position: left
+}
+.s-localization-modal-skeleton-content {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    display: flex;
+    flex-direction: column
+}
+.s-localization-modal-skeleton-content > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(1rem * var(--tw-space-y-reverse))
+}
+.s-localization-modal-skeleton-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between
+}
+.s-localization-modal-skeleton-item-flex {
+    display: flex;
+    align-items: center
+}
+.s-localization-modal-skeleton-item-flex salla-skeleton:nth-child(1) {
+    margin-right: 0.75rem
+}
+.s-localization-modal-skeleton-item-flex salla-skeleton:nth-child(1):where([dir="rtl"], [dir="rtl"] *) {
+    margin-right: 0px;
+    margin-left: 0.75rem
+}

package/dist/collection/components/salla-localization-modal/salla-localization-modal.js

@@ -244,7 +244,7 @@ export class SallaLocalizationModal {
             this.showTrigger
                 ? h("button", { type: "button", onClick: () => this.open(), class: "s-localization-modal-trigger-btn" }, h("span", null, this.getLanguageName()), h("span", { class: "s-localization-modal-trigger-separator" }, "|"), " ", h("span", { innerHTML: this.getCurrencySymbol() }))
                 : '',
-            h("salla-modal", { key: 'ef56534e6aadef517af7e5af725cd3b27afe8827', isLoading: true, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, h("div", { key: '47072c8447350fb18a5bd960335f9a907ffcdae5', slot: 'loading' }, h("div", { key: '96cf1ac3b2dc9f67ae831393285f20935d0312fd', class: "s-localization-modal-skeleton" }, h("salla-skeleton", { key: '7c2ca11ecb4d3fd62ad4c74e5187acfa313d7dbf', width: '25%', height: '15px' }), h("div", { key: '96e7d7eadf414867716fd513b1daa3417b1a02c4', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '3e02caddbc6de924dc902516f74e93f488556545', width: '25%', height: '15px' }), h("div", { key: 'fd93fce5cd7ce64dfd356ea9f105f53368d7faf6', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '0a8a92e3a2d99c2188767f5065e4efdae26d21c1', height: '40px', width: '100%' }))), !!this.hasError ?
+            h("salla-modal", { key: 'cbdef87e1e274ce8f92acdef8897baa5d236f886', isLoading: true, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, h("div", { key: '5ea731383d53abe6ee38152916410ec28e464954', slot: 'loading' }, h("div", { key: 'b702af172bdd41607d91fe85a01cd09e870a72c4', class: "s-localization-modal-skeleton" }, h("salla-skeleton", { key: '9b1812a5c07fb9eac7ca988684865dfdf2137067', width: '25%', height: '15px' }), h("div", { key: '6ef371224ca0d4a8cffd6a6827ea10835d4cf2ac', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '98af20fb407efc0ec3ddd69c3ca31e2a29e4c935', width: '25%', height: '15px' }), h("div", { key: 'fd885a869fc32836609048032f1bbdc7b26b0f9c', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '284cfd1563668f251b3a76977b92eb03d01654df', height: '40px', width: '100%' }))), !!this.hasError ?
                 h("salla-placeholder", { alignment: "center" }, h("span", { slot: "description" }, this.errorMessage)) :
                 h("div", { class: "s-localization-modal-inner" }, this.languages.length > 1 ?
                     h("div", { class: "s-localization-modal-section" }, h("label", { class: "s-localization-modal-title" }, Salla.lang.get('common.titles.language')), h("div", { class: "s-localization-modal-section-inner" }, this.languages.length < 6 ?
@@ -272,6 +272,16 @@ export class SallaLocalizationModal {
         this.host.querySelectorAll('#language-slot').forEach(el => el.replaceWith(el.firstChild));
     }
     static get is() { return "salla-localization-modal"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-localization-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-localization-modal.css"]
+        };
+    }
     static get properties() {
         return {
             "language": {

package/dist/collection/components/salla-login-modal/salla-login-modal.css

@@ -1,4 +1,4 @@
-/*
+/*!twlt*//*
 * Salla Login Component: login popup modal
 * You can use these classes to target the elements in the component.
 */
@@ -9,4 +9,10 @@ iframe {
   -webkit-transition: height 0.3s;
   transition: height 0.3s;
   width: 100%;
-}
+}
+.inline {
+  display: inline;
+}
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}