@salla.sa/twilight-components 1.0.160 → 1.1.4

package/dist/types/components.d.ts

@@ -116,6 +116,28 @@ export namespace Components {
          */
         "price": string;
     }
+    interface SallaListTile {
+        "href": string | undefined;
+        "target": "_blank" | "_self" | "_parent" | "_top" | "framename";
+    }
+    interface SallaLoading {
+        /**
+          * Spinner background color.
+         */
+        "bgColor": string;
+        /**
+          * Spinner content color.
+         */
+        "color": string;
+        /**
+          * Sets the diameter of the circle in pixels, Defaults to `32`
+         */
+        "size": number | string;
+        /**
+          * Sets the stroke of the circle (border) in pixels, Defaults to `4`
+         */
+        "width": number | string;
+    }
     interface SallaLocalizationModal {
         /**
           * Hide the component
@@ -147,6 +169,20 @@ export namespace Components {
          */
         "open": (event?: any) => Promise<HTMLElement>;
     }
+    interface SallaLoyalty {
+        /**
+          * Hide loyalty modal
+         */
+        "close": () => Promise<HTMLElement>;
+        /**
+          * @param loyalty_prize_id
+         */
+        "exchangeLoyaltyPoint": () => Promise<any>;
+        /**
+          * Show loyalty modal
+         */
+        "open": () => Promise<any>;
+    }
     interface SallaModal {
         /**
           * close the modal
@@ -211,6 +247,20 @@ export namespace Components {
          */
         "showOffer": (offer: any) => Promise<HTMLElement>;
     }
+    interface SallaPlaceholder {
+        /**
+          * Defines the alignment of contents. Defaults to [`left`]
+         */
+        "alignment": 'left' | 'center' | 'right';
+        /**
+          * Custom icon to display, defaults to [`sicon-inbox`]
+         */
+        "icon": string;
+        /**
+          * The size of the icon. Defaults to [`md`]
+         */
+        "iconSize": 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    }
     interface SallaProductAvailability {
         /**
           * Notification channels
@@ -225,6 +275,16 @@ export namespace Components {
          */
         "productId": number;
     }
+    interface SallaProductSizeGuide {
+        /**
+          * Hide the size-guide modal window
+         */
+        "close": () => Promise<HTMLElement>;
+        /**
+          * Show the size-guide modal window
+         */
+        "open": (product_id: number) => Promise<any>;
+    }
     interface SallaQuantityInput {
         /**
           * decrease quantity by one.
@@ -266,6 +326,46 @@ export namespace Components {
         "inline": boolean;
         "oval": boolean;
     }
+    interface SallaSwiper {
+        "direction": string;
+        "itemPerView": "auto" | number;
+        "loop": boolean;
+        "spaceBetweenItems": number;
+        "speed": number;
+    }
+    interface SallaTabContent {
+        "getChild": () => Promise<{ select: any; unselect: any; name: string; }>;
+        "name": string;
+    }
+    interface SallaTabHeader {
+        /**
+          * The class applied to the currently active(selected) tab
+         */
+        "activeClass": string;
+        /**
+          * Center tab items in the given flex.
+         */
+        "centered": boolean;
+        "getChild": () => Promise<{ select: any; unselect: any; name: string; id: string; }>;
+        /**
+          * Set the height of the tab bar
+         */
+        "height": number | string;
+        /**
+          * Header identifier name to sync with the
+         */
+        "name": string;
+    }
+    interface SallaTabs {
+        /**
+          * Background color
+         */
+        "backgroundColor": string;
+        /**
+          * Align tabs vertically.
+         */
+        "vertical": boolean;
+    }
     interface SallaTelInput {
         /**
           * Current country_code
@@ -319,6 +419,10 @@ export interface SallaAddProductButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSallaAddProductButtonElement;
 }
+export interface SallaTabHeaderCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSallaTabHeaderElement;
+}
 export interface SallaTelInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSallaTelInputElement;
@@ -364,6 +468,18 @@ declare global {
         prototype: HTMLSallaInstallmentElement;
         new (): HTMLSallaInstallmentElement;
     };
+    interface HTMLSallaListTileElement extends Components.SallaListTile, HTMLStencilElement {
+    }
+    var HTMLSallaListTileElement: {
+        prototype: HTMLSallaListTileElement;
+        new (): HTMLSallaListTileElement;
+    };
+    interface HTMLSallaLoadingElement extends Components.SallaLoading, HTMLStencilElement {
+    }
+    var HTMLSallaLoadingElement: {
+        prototype: HTMLSallaLoadingElement;
+        new (): HTMLSallaLoadingElement;
+    };
     interface HTMLSallaLocalizationModalElement extends Components.SallaLocalizationModal, HTMLStencilElement {
     }
     var HTMLSallaLocalizationModalElement: {
@@ -376,6 +492,12 @@ declare global {
         prototype: HTMLSallaLoginModalElement;
         new (): HTMLSallaLoginModalElement;
     };
+    interface HTMLSallaLoyaltyElement extends Components.SallaLoyalty, HTMLStencilElement {
+    }
+    var HTMLSallaLoyaltyElement: {
+        prototype: HTMLSallaLoyaltyElement;
+        new (): HTMLSallaLoyaltyElement;
+    };
     interface HTMLSallaModalElement extends Components.SallaModal, HTMLStencilElement {
     }
     var HTMLSallaModalElement: {
@@ -388,12 +510,24 @@ declare global {
         prototype: HTMLSallaOfferModalElement;
         new (): HTMLSallaOfferModalElement;
     };
+    interface HTMLSallaPlaceholderElement extends Components.SallaPlaceholder, HTMLStencilElement {
+    }
+    var HTMLSallaPlaceholderElement: {
+        prototype: HTMLSallaPlaceholderElement;
+        new (): HTMLSallaPlaceholderElement;
+    };
     interface HTMLSallaProductAvailabilityElement extends Components.SallaProductAvailability, HTMLStencilElement {
     }
     var HTMLSallaProductAvailabilityElement: {
         prototype: HTMLSallaProductAvailabilityElement;
         new (): HTMLSallaProductAvailabilityElement;
     };
+    interface HTMLSallaProductSizeGuideElement extends Components.SallaProductSizeGuide, HTMLStencilElement {
+    }
+    var HTMLSallaProductSizeGuideElement: {
+        prototype: HTMLSallaProductSizeGuideElement;
+        new (): HTMLSallaProductSizeGuideElement;
+    };
     interface HTMLSallaQuantityInputElement extends Components.SallaQuantityInput, HTMLStencilElement {
     }
     var HTMLSallaQuantityInputElement: {
@@ -418,6 +552,30 @@ declare global {
         prototype: HTMLSallaSearchElement;
         new (): HTMLSallaSearchElement;
     };
+    interface HTMLSallaSwiperElement extends Components.SallaSwiper, HTMLStencilElement {
+    }
+    var HTMLSallaSwiperElement: {
+        prototype: HTMLSallaSwiperElement;
+        new (): HTMLSallaSwiperElement;
+    };
+    interface HTMLSallaTabContentElement extends Components.SallaTabContent, HTMLStencilElement {
+    }
+    var HTMLSallaTabContentElement: {
+        prototype: HTMLSallaTabContentElement;
+        new (): HTMLSallaTabContentElement;
+    };
+    interface HTMLSallaTabHeaderElement extends Components.SallaTabHeader, HTMLStencilElement {
+    }
+    var HTMLSallaTabHeaderElement: {
+        prototype: HTMLSallaTabHeaderElement;
+        new (): HTMLSallaTabHeaderElement;
+    };
+    interface HTMLSallaTabsElement extends Components.SallaTabs, HTMLStencilElement {
+    }
+    var HTMLSallaTabsElement: {
+        prototype: HTMLSallaTabsElement;
+        new (): HTMLSallaTabsElement;
+    };
     interface HTMLSallaTelInputElement extends Components.SallaTelInput, HTMLStencilElement {
     }
     var HTMLSallaTelInputElement: {
@@ -437,15 +595,24 @@ declare global {
         "salla-conditional-fields": HTMLSallaConditionalFieldsElement;
         "salla-infinite-scroll": HTMLSallaInfiniteScrollElement;
         "salla-installment": HTMLSallaInstallmentElement;
+        "salla-list-tile": HTMLSallaListTileElement;
+        "salla-loading": HTMLSallaLoadingElement;
         "salla-localization-modal": HTMLSallaLocalizationModalElement;
         "salla-login-modal": HTMLSallaLoginModalElement;
+        "salla-loyalty": HTMLSallaLoyaltyElement;
         "salla-modal": HTMLSallaModalElement;
         "salla-offer-modal": HTMLSallaOfferModalElement;
+        "salla-placeholder": HTMLSallaPlaceholderElement;
         "salla-product-availability": HTMLSallaProductAvailabilityElement;
+        "salla-product-size-guide": HTMLSallaProductSizeGuideElement;
         "salla-quantity-input": HTMLSallaQuantityInputElement;
         "salla-rating-modal": HTMLSallaRatingModalElement;
         "salla-rating-stars": HTMLSallaRatingStarsElement;
         "salla-search": HTMLSallaSearchElement;
+        "salla-swiper": HTMLSallaSwiperElement;
+        "salla-tab-content": HTMLSallaTabContentElement;
+        "salla-tab-header": HTMLSallaTabHeaderElement;
+        "salla-tabs": HTMLSallaTabsElement;
         "salla-tel-input": HTMLSallaTelInputElement;
         "salla-verify": HTMLSallaVerifyElement;
     }
@@ -540,6 +707,28 @@ declare namespace LocalJSX {
          */
         "price"?: string;
     }
+    interface SallaListTile {
+        "href"?: string | undefined;
+        "target"?: "_blank" | "_self" | "_parent" | "_top" | "framename";
+    }
+    interface SallaLoading {
+        /**
+          * Spinner background color.
+         */
+        "bgColor"?: string;
+        /**
+          * Spinner content color.
+         */
+        "color"?: string;
+        /**
+          * Sets the diameter of the circle in pixels, Defaults to `32`
+         */
+        "size"?: number | string;
+        /**
+          * Sets the stroke of the circle (border) in pixels, Defaults to `4`
+         */
+        "width"?: number | string;
+    }
     interface SallaLocalizationModal {
         "currency"?: string;
         "language"?: string;
@@ -558,6 +747,8 @@ declare namespace LocalJSX {
          */
         "isMobileAllowed"?: boolean;
     }
+    interface SallaLoyalty {
+    }
     interface SallaModal {
         /**
           * Icon css class, default for types `error` is `sicon-alert-engine`, `success` is `sicon-check-circle2`
@@ -591,6 +782,20 @@ declare namespace LocalJSX {
     }
     interface SallaOfferModal {
     }
+    interface SallaPlaceholder {
+        /**
+          * Defines the alignment of contents. Defaults to [`left`]
+         */
+        "alignment"?: 'left' | 'center' | 'right';
+        /**
+          * Custom icon to display, defaults to [`sicon-inbox`]
+         */
+        "icon"?: string;
+        /**
+          * The size of the icon. Defaults to [`md`]
+         */
+        "iconSize"?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    }
     interface SallaProductAvailability {
         /**
           * Notification channels
@@ -605,6 +810,8 @@ declare namespace LocalJSX {
          */
         "productId"?: number;
     }
+    interface SallaProductSizeGuide {
+    }
     interface SallaQuantityInput {
     }
     interface SallaRatingModal {
@@ -623,6 +830,45 @@ declare namespace LocalJSX {
         "inline"?: boolean;
         "oval"?: boolean;
     }
+    interface SallaSwiper {
+        "direction"?: string;
+        "itemPerView"?: "auto" | number;
+        "loop"?: boolean;
+        "spaceBetweenItems"?: number;
+        "speed"?: number;
+    }
+    interface SallaTabContent {
+        "name"?: string;
+    }
+    interface SallaTabHeader {
+        /**
+          * The class applied to the currently active(selected) tab
+         */
+        "activeClass"?: string;
+        /**
+          * Center tab items in the given flex.
+         */
+        "centered"?: boolean;
+        /**
+          * Set the height of the tab bar
+         */
+        "height"?: number | string;
+        /**
+          * Header identifier name to sync with the
+         */
+        "name"?: string;
+        "onOnSelect"?: (event: SallaTabHeaderCustomEvent<any>) => void;
+    }
+    interface SallaTabs {
+        /**
+          * Background color
+         */
+        "backgroundColor"?: string;
+        /**
+          * Align tabs vertically.
+         */
+        "vertical"?: boolean;
+    }
     interface SallaTelInput {
         /**
           * Current country_code
@@ -663,15 +909,24 @@ declare namespace LocalJSX {
         "salla-conditional-fields": SallaConditionalFields;
         "salla-infinite-scroll": SallaInfiniteScroll;
         "salla-installment": SallaInstallment;
+        "salla-list-tile": SallaListTile;
+        "salla-loading": SallaLoading;
         "salla-localization-modal": SallaLocalizationModal;
         "salla-login-modal": SallaLoginModal;
+        "salla-loyalty": SallaLoyalty;
         "salla-modal": SallaModal;
         "salla-offer-modal": SallaOfferModal;
+        "salla-placeholder": SallaPlaceholder;
         "salla-product-availability": SallaProductAvailability;
+        "salla-product-size-guide": SallaProductSizeGuide;
         "salla-quantity-input": SallaQuantityInput;
         "salla-rating-modal": SallaRatingModal;
         "salla-rating-stars": SallaRatingStars;
         "salla-search": SallaSearch;
+        "salla-swiper": SallaSwiper;
+        "salla-tab-content": SallaTabContent;
+        "salla-tab-header": SallaTabHeader;
+        "salla-tabs": SallaTabs;
         "salla-tel-input": SallaTelInput;
         "salla-verify": SallaVerify;
     }
@@ -686,15 +941,24 @@ declare module "@stencil/core" {
             "salla-conditional-fields": LocalJSX.SallaConditionalFields & JSXBase.HTMLAttributes<HTMLSallaConditionalFieldsElement>;
             "salla-infinite-scroll": LocalJSX.SallaInfiniteScroll & JSXBase.HTMLAttributes<HTMLSallaInfiniteScrollElement>;
             "salla-installment": LocalJSX.SallaInstallment & JSXBase.HTMLAttributes<HTMLSallaInstallmentElement>;
+            "salla-list-tile": LocalJSX.SallaListTile & JSXBase.HTMLAttributes<HTMLSallaListTileElement>;
+            "salla-loading": LocalJSX.SallaLoading & JSXBase.HTMLAttributes<HTMLSallaLoadingElement>;
             "salla-localization-modal": LocalJSX.SallaLocalizationModal & JSXBase.HTMLAttributes<HTMLSallaLocalizationModalElement>;
             "salla-login-modal": LocalJSX.SallaLoginModal & JSXBase.HTMLAttributes<HTMLSallaLoginModalElement>;
+            "salla-loyalty": LocalJSX.SallaLoyalty & JSXBase.HTMLAttributes<HTMLSallaLoyaltyElement>;
             "salla-modal": LocalJSX.SallaModal & JSXBase.HTMLAttributes<HTMLSallaModalElement>;
             "salla-offer-modal": LocalJSX.SallaOfferModal & JSXBase.HTMLAttributes<HTMLSallaOfferModalElement>;
+            "salla-placeholder": LocalJSX.SallaPlaceholder & JSXBase.HTMLAttributes<HTMLSallaPlaceholderElement>;
             "salla-product-availability": LocalJSX.SallaProductAvailability & JSXBase.HTMLAttributes<HTMLSallaProductAvailabilityElement>;
+            "salla-product-size-guide": LocalJSX.SallaProductSizeGuide & JSXBase.HTMLAttributes<HTMLSallaProductSizeGuideElement>;
             "salla-quantity-input": LocalJSX.SallaQuantityInput & JSXBase.HTMLAttributes<HTMLSallaQuantityInputElement>;
             "salla-rating-modal": LocalJSX.SallaRatingModal & JSXBase.HTMLAttributes<HTMLSallaRatingModalElement>;
             "salla-rating-stars": LocalJSX.SallaRatingStars & JSXBase.HTMLAttributes<HTMLSallaRatingStarsElement>;
             "salla-search": LocalJSX.SallaSearch & JSXBase.HTMLAttributes<HTMLSallaSearchElement>;
+            "salla-swiper": LocalJSX.SallaSwiper & JSXBase.HTMLAttributes<HTMLSallaSwiperElement>;
+            "salla-tab-content": LocalJSX.SallaTabContent & JSXBase.HTMLAttributes<HTMLSallaTabContentElement>;
+            "salla-tab-header": LocalJSX.SallaTabHeader & JSXBase.HTMLAttributes<HTMLSallaTabHeaderElement>;
+            "salla-tabs": LocalJSX.SallaTabs & JSXBase.HTMLAttributes<HTMLSallaTabsElement>;
             "salla-tel-input": LocalJSX.SallaTelInput & JSXBase.HTMLAttributes<HTMLSallaTelInputElement>;
             "salla-verify": LocalJSX.SallaVerify & JSXBase.HTMLAttributes<HTMLSallaVerifyElement>;
         }

package/example/assets/tailwind.css

@@ -633,6 +633,10 @@ video {
   grid-column: span 3 / span 3 !important;
 }
 
+.col-span-2 {
+  grid-column: span 2 / span 2 !important;
+}
+
 .mx-auto {
   margin-left: auto !important;
   margin-right: auto !important;
@@ -767,6 +771,10 @@ video {
   flex: none !important;
 }
 
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
+}
+
 .grid-cols-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
 }
@@ -1086,6 +1094,14 @@ video {
   --tw-ring-opacity: 0.05 !important;
 }
 
+.transition {
+  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter !important;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter !important;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
+  transition-duration: 150ms !important;
+}
+
 .transition-colors {
   transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color !important;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
@@ -2144,13 +2160,6 @@ video {
   }
 }
 
-.s-modal-loader-wrap {
-  display: flex;
-  height: 6rem;
-  align-items: center;
-  justify-content: center;
-}
-
 .s-modal-loader {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -4053,4 +4062,8 @@ unicode {
   .xl\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
   }
+
+  .xl\:grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/twilight-components",
-  "version": "1.0.160",
+  "version": "1.1.4",
   "license": "MIT",
   "author": "Salla Team <support@salla.dev> (https://salla.dev)",
   "bugs": {
@@ -37,7 +37,7 @@
     "docs": "stencil build --docs",
     "start": "stencil build --dev --watch --serve",
     "watch": "npm run start",
-    "test": "stencil test --spec --coverage -- salla-verify",
+    "test": "stencil test --e2e --coverage -- salla-product-size",
     "test.spec": "stencil test --spec",
     "test.e2e": "stencil test --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
@@ -68,17 +68,17 @@
     "promisify-child-process": "^3.1.4",
     "puppeteer": "^10.0.0",
     "rollup-plugin-node-polyfills": "^0.2.1",
+    "stencil-inline-svg": "^1.1.0",
     "stencil-tailwind-plugin": "^1.4.1",
     "tailwindcss": "^3.0.0",
     "tailwindcss-rtl": "^0.9.0",
-    "typescript": "^4.4.3"
+    "typescript": "^4.4.3",
+    "form-data": "^4.0.0"
   },
   "dependencies": {
-    "@salla.sa/twilight": "~2.0",
-    "@salla.sa/twilight-tailwind-theme": "^1.0.122",
-    "form-data": "^4.0.0",
+    "@salla.sa/twilight": "^2.1.12",
+    "@salla.sa/twilight-tailwind-theme": "^1.0.133",
     "intl-tel-input": "^17.0.13",
-    "module-alias": "^2.2.2",
-    "store": "^2.0.12"
+    "swiper": "^8.3.1"
   }
 }