@wayke-se/components-react 3.5.1 → 3.5.3-beta.1

package/dist-types/utils/pubsub/Events.d.ts

@@ -2,19 +2,19 @@ interface EventBase<Callback> {
     eventName: EventNames;
     callback: Callback;
 }
-export declare type CallbackEmpty = () => void;
-export declare type CallbackHashRouteChange = (id?: string) => void;
+export type CallbackEmpty = () => void;
+export type CallbackHashRouteChange = (id?: string) => void;
 export interface EventHashRouteChange extends EventBase<CallbackHashRouteChange> {
     eventName: 'HashRouteChange';
 }
-export declare type CallbackEventItemClicked = (id: string) => void;
+export type CallbackEventItemClicked = (id: string) => void;
 export interface EventItemClicked extends EventBase<CallbackEventItemClicked> {
     eventName: 'ItemClicked';
 }
 export interface EventEcomOnInit extends EventBase<CallbackEmpty> {
     eventName: 'EcomOnInit';
 }
-export declare type CallbackEcomOnUserEvent = (userEvent: string, currentStep: string) => void;
+export type CallbackEcomOnUserEvent = (userEvent: string, currentStep: string) => void;
 export interface EventEcomOnUser extends EventBase<CallbackEcomOnUserEvent> {
     eventName: 'EcomOnUserEvent';
 }
@@ -42,10 +42,10 @@ export interface EventInsuranceInterest extends EventBase<CallbackEmpty> {
 export interface EventFinanceInterest extends EventBase<CallbackEmpty> {
     eventName: 'FinanceInterest';
 }
-export declare type CallbackAll = (eventName: Omit<EventNames, 'All'>, data: any) => void;
+export type CallbackAll = (eventName: Omit<EventNames, 'All'>, data: any) => void;
 export interface EventAll extends EventBase<CallbackAll> {
     eventName: 'All';
 }
-export declare type EventType = EventHashRouteChange | EventItemClicked | EventEcomOnInit | EventEcomOnUser | EventEcomOnExit | EventImagesClick | EventOptionsClick | EventPhonenumberVisible | EventPhonenumberCall | EventMailVisible | EventInsuranceInterest | EventFinanceInterest | EventAll;
-export declare type EventNames = Pick<EventType, 'eventName'>['eventName'];
+export type EventType = EventHashRouteChange | EventItemClicked | EventEcomOnInit | EventEcomOnUser | EventEcomOnExit | EventImagesClick | EventOptionsClick | EventPhonenumberVisible | EventPhonenumberCall | EventMailVisible | EventInsuranceInterest | EventFinanceInterest | EventAll;
+export type EventNames = Pick<EventType, 'eventName'>['eventName'];
 export {};

package/dist-types/utils/pubsub/pubsub.d.ts

@@ -1,6 +1,6 @@
 import { ActionAll, ActionNames, ActionOnFilterUpdate, ActionTypes } from './Actions';
 import { EventHashRouteChange, EventItemClicked, EventEcomOnInit, EventEcomOnUser, EventEcomOnExit, EventImagesClick, EventOptionsClick, EventPhonenumberVisible, EventPhonenumberCall, EventMailVisible, EventInsuranceInterest, EventFinanceInterest, EventAll, EventType, EventNames } from './Events';
-export declare type EventSubscriptions = {
+export type EventSubscriptions = {
     HashRouteChange: EventHashRouteChange[];
     ItemClicked: EventItemClicked[];
     EcomOnInit: EventEcomOnInit[];
@@ -15,7 +15,7 @@ export declare type EventSubscriptions = {
     FinanceInterest: EventFinanceInterest[];
     All: EventAll[];
 };
-export declare type ActionSubscriptions = {
+export type ActionSubscriptions = {
     onFilterUpdate: ActionOnFilterUpdate[];
     All: ActionAll[];
 };

package/dist-types/utils/sortOptions.d.ts

@@ -8,6 +8,6 @@ declare const SortOptionDisplayName: {
     MileageAsc: string;
     Mileagedesc: string;
 };
-declare type SortOptionDisplayName = 'relevance' | 'published-asc' | 'published-desc' | 'price-asc' | 'price-desc' | 'model-asc' | 'model-desc' | 'mileage-asc' | 'mileage-desc';
+type SortOptionDisplayName = 'relevance' | 'published-asc' | 'published-desc' | 'price-asc' | 'price-desc' | 'model-asc' | 'model-desc' | 'mileage-asc' | 'mileage-desc';
 export declare const getTranslatedSortOptionDisplayName: (str: string | SortOptionDisplayName) => string;
 export {};

package/dist-types/utils/specification.d.ts

@@ -8,7 +8,7 @@ export interface ItemPropertyType {
     value: string | null;
     modal?: ItemPropertModalType;
 }
-declare type ValueTypes = number | string | null | undefined | string[] | boolean | {
+type ValueTypes = number | string | null | undefined | string[] | boolean | {
     [key: string]: string | number | boolean;
 };
 export interface SpecPropertyType {

package/dist-web/index.js

@@ -2821,6 +2821,76 @@ const SliderWrapper = styled.div `
     bottom: 0;
     left: 0;
     right: 0;
+    user-select: none;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+
+    .slick-list,
+    .slick-track {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  .slick-list {
+    position: relative;
+    display: block;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+
+    &:focus {
+      outline: none;
+    }
+
+    &.dragging {
+      cursor: pointer;
+      cursor: hand;
+    }
+  }
+
+  .slick-track {
+    position: relative;
+    top: 0;
+    left: 0;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+
+    &::before,
+    &::after {
+      content: '';
+      display: table;
+    }
+
+    &::after {
+      clear: both;
+    }
+  }
+
+  .slick-slide {
+    display: none;
+    float: left;
+    min-height: 1px;
+  }
+
+  .slick-loading {
+    .slick-track {
+      visibility: hidden;
+    }
+
+    img {
+      display: none;
+    }
+  }
+
+  .slick-initialized {
+    .slick-slide {
+      display: block;
+    }
+  }
+
+  .slick-slide.dragging img {
+    pointer-events: none;
   }
 
   ${(props) => props.theme.breakpoint.LtMd} {
@@ -2833,7 +2903,6 @@ const SliderWrapper = styled.div `
 
     .slick-slide {
       border-right: ${size(1)} solid ${(props) => props.theme.color.bg};
-      //transform: scale(0.95);
       transform-origin: 0 50%;
       transition: transform 150ms ease;
     }
@@ -4448,10 +4517,11 @@ const DataList = ({ items }) => (React__default.createElement(List$7, null, item
 const Leasing = ({ financialOption }) => {
     const [modal, setModal] = useState(false);
     const toggleModal = useCallback(() => setModal(!modal), [modal]);
-    const { image, description, monthlyCost, duration, mileage } = financialOption;
+    const { image, description, monthlyCost, duration, mileage, type, name } = financialOption;
+    const title = type === 'leasing' ? 'Privatleasa' : type === 'business-leasing' ? 'Företagsleasa' : type;
     return (React__default.createElement(React__default.Fragment, null,
-        modal && (React__default.createElement(Modal, { title: "Privatleasing", onClose: toggleModal },
-            image && React__default.createElement(Image$2, { src: image, alt: "Privatleasing" }),
+        modal && (React__default.createElement(Modal, { title: title, onClose: toggleModal },
+            image && React__default.createElement(Image$2, { src: image, alt: title }),
             description && React__default.createElement(Content$2, { dangerouslySetInnerHTML: { __html: description } }),
             React__default.createElement(ModalFoldout, null,
                 React__default.createElement(ModalFoldoutBody, null,
@@ -4473,7 +4543,7 @@ const Leasing = ({ financialOption }) => {
             React__default.createElement(React__default.Fragment, null, monthlyCost !== null && monthlyCost !== undefined && (React__default.createElement(OptionBoxHeading, null, `ca ${numberSeparator(monthlyCost)} kr/mån`))),
             React__default.createElement(OptionBoxContent, null,
                 React__default.createElement("p", null,
-                    "Privatleasing",
+                    title,
                     ' ',
                     mileage?.current && duration?.current && (React__default.createElement(React__default.Fragment, null,
                         React__default.createElement(UtilityTextPrimary, null,
@@ -4486,8 +4556,8 @@ const Leasing = ({ financialOption }) => {
                             " m\u00E5n"),
                         ".",
                         ' '))),
-                React__default.createElement("p", null,
-                    React__default.createElement(ButtonInline, { onClick: toggleModal }, "L\u00E4s mer"))))));
+                name && (React__default.createElement("p", null,
+                    React__default.createElement(ButtonInline, { onClick: toggleModal }, "L\u00E4s mer")))))));
 };
 
 const FinancialOptionDetail$1 = gql `
@@ -4782,7 +4852,7 @@ const FinancialOptions = ({ id, financialOptions }) => (React__default.createEle
     React__default.createElement(RepeatTiny, null,
         React__default.createElement(VisualHeading, null, "Andra finansieringsalternativ")),
     React__default.createElement(RepeatTiny, null, financialOptions.map((financialOption, index) => (React__default.createElement(Fragment, { key: index },
-        financialOption.type === 'leasing' && React__default.createElement(Leasing, { financialOption: financialOption }),
+        (financialOption.type === 'leasing' || financialOption.type === 'business-leasing') && (React__default.createElement(Leasing, { financialOption: financialOption })),
         financialOption.type === 'loan' && React__default.createElement(Loan, { id: id, financialOption: financialOption })))))));
 
 const Wrapper$n = styled.article `