@sunrise-upc/sales-static-components 0.0.2 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,4 @@
1
1
  import { TimerSchema } from "./RibbonComponentTimer/RibbonComponentTimer";
2
- import Richtext from 'storyblok-js-client';
3
2
  export declare interface RibbonComponentInterface {
4
3
  content: RibbonComponentSchema;
5
4
  }
@@ -9,12 +8,14 @@ interface RibbonComponentSchema {
9
8
  buttonText: string;
10
9
  buttonType: string;
11
10
  closeIcon: Asset;
11
+ darkModeCloseIcon: Asset;
12
12
  deviceLimit: string;
13
- description: Richtext;
13
+ description: Array<object>;
14
14
  enableDarkMode: boolean;
15
15
  target: string;
16
16
  hotlineNumber: string;
17
17
  icon: Asset;
18
+ darkModeIcon: Asset;
18
19
  iconAlign: string;
19
20
  isCloseIcon: boolean;
20
21
  link: MultiLink;
@@ -16,9 +16,16 @@ export interface TimerSchema {
16
16
  mainHeading: string;
17
17
  expiryLabelColor: NativeColorPicker;
18
18
  enableCounter: boolean;
19
+ isDarkMode?: boolean;
19
20
  }
20
21
  interface Timer {
21
22
  content: TimerSchema;
22
23
  }
24
+ export interface timeleft {
25
+ days: string;
26
+ hours: string;
27
+ mins: string;
28
+ sec: string;
29
+ }
23
30
  declare const RibbonComponentTimer: ({ content }: Timer) => JSX.Element;
24
31
  export default RibbonComponentTimer;
@@ -1 +1,3 @@
1
1
  export declare const getFalconButtonClass: (type: string) => string;
2
+ export declare const dateWithTimeZone: (timeZone: string, year: number, month: number, day: number, hour: number, minute: number, second: number) => Date;
3
+ export declare const calculateDateTime: (dateObj: Date) => Date;
@@ -1,7 +1,6 @@
1
- import Richtext from 'storyblok-js-client';
2
1
  import React from 'react';
3
2
  export interface richText {
4
- content: Richtext;
3
+ content: Array<object>;
5
4
  isIFrame?: boolean;
6
5
  callBack?: (e: any) => void | undefined;
7
6
  }
package/dist/cjs/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var n=require("react"),e=require("storyblok-rich-text-react-renderer-ts");function r(n,e){void 0===e&&(e={});var r=e.insertAt;if(n&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===r&&o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.styleSheet?t.styleSheet.cssText=n:t.appendChild(document.createTextNode(n))}}r(".ribbonComponent_Card {\r\n display: flex;\r\n align-items: center;\r\n}\r\n.ribbonComponent_DarkText{\r\n color: #FFF !important;\r\n}\r\n.ribbonComponent_Image {\r\n margin-top: 5px;\r\n margin-right: 8px;\r\n}\r\n.ribbonComponent_Icon {\r\n height: 24px;\r\n width: 24px;\r\n}\r\n.ribbonComponent_TextContainer {\r\n margin: 8px 0;\r\n font-size: 16px;\r\n line-height: 24px;\r\n}\r\n.ribbonComponent_Title {\r\n font-weight: 700;\r\n}\r\n.ribbonComponent_Description {\r\n font-weight: 400;\r\n}\r\n.ribbonComponent_CloseIcon {\r\n margin-right: 16px;\r\n}\r\n.ribbonComponent_HrBreaker {\r\n width: 1px;\r\n height: 32px;\r\n margin-left: 8px;\r\n margin-right: 8px;\r\n border-radius: 1px;\r\n opacity: 0.20000000298023224px;\r\n background: #e6e3df;\r\n}\r\n.ribbonComponent_Button{\r\n text-wrap:nowrap;\r\n}\r\n.falcon-button-defaults {\r\n border-radius: 28px;\r\n cursor: pointer;\r\n display: inline-block;\r\n font-size: 16px;\r\n line-height: 24px;\r\n font-weight: 700;\r\n padding: 10px 24px;\r\n text-decoration: none;\r\n}\r\n.ribbonComponent_phoneIcon {\r\n background-size: contain;\r\n display: inline-flex;\r\n height: 24px;\r\n margin: 0 8px 0 10px;\r\n width: 24px;\r\n}\r\n.ribbonComponent_ButtonSection {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n}\r\n.ribbonComponent_descriptionBlockSection {\r\n display: flex;\r\n padding:16px 0;\r\n}\r\n/* Mobile only viewport */\r\n@media all and (max-width: 767px) {\r\n .falcon-primary-button-v1-JC:visited {\r\n background-color: #e97f77;\r\n }\r\n .ribbonComponent_Card {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n margin-left: 16px;\r\n }\r\n .ribbonComponent_CloseIcon1{\r\n margin-right: 0;\r\n position: absolute;\r\n right: 16px;\r\n margin-top: 16px;\r\n }\r\n .ribbonComponent_ButtonSection {\r\n display: flex;\r\n align-items: flex-start;\r\n flex-direction: column;\r\n padding-bottom: 16px;\r\n padding-top: 8px;\r\n margin-left: 32px;\r\n }\r\n .ribbonComponent_descriptionBlockSection {\r\n padding-top:16px;\r\n padding-right: 78px;\r\n margin-left: 16px;\r\n }\r\n .ribbonComponent_Timer{\r\n margin-left: 8px;\r\n padding-bottom: 8px;\r\n }\r\n .ribbonComponent_Button{\r\n margin-left: 16px;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n display: none;\r\n }\r\n}\r\n/* Mobile and tablet viewport */\r\n@media all and (max-width: 1023px) {\r\n .ribbonComponent_HrBreaker {\r\n display: none;\r\n }\r\n .ribbonComponent_Button {\r\n padding-bottom: 16px;\r\n }\r\n}\r\n\r\n/* Tablet only viewport */\r\n@media all and (min-width: 768px) and (max-width: 1023px) {\r\n .ribbonComponent_Card{\r\n justify-content: space-between;\r\n }\r\n .ribbonComponent_ButtonSection {\r\n display: flex;\r\n flex-direction: column;\r\n padding-right: 90px;\r\n padding-left:70px;\r\n margin: 6px 0 0 0;\r\n align-items: flex-end;\r\n }\r\n .ribbonComponent_Button{\r\n margin: 8px 0;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n display: none;\r\n }\r\n .ribbonComponent_CloseIcon1{\r\n margin-right: 0;\r\n position: absolute;\r\n right: 40px;\r\n padding-left: 16px;\r\n }\r\n .ribbonComponent_descriptionBlockSection{\r\n margin-left:40px;\r\n }\r\n}\r\n\r\n/* Desktop only viewport */\r\n@media (min-width: 1024px) {\r\n .ribbonComponent_Card{\r\n justify-content: space-between;\r\n margin-left:0;\r\n }\r\n .ribbonComponent_Button{\r\n margin: 0 16px;\r\n text-wrap:nowrap;\r\n }\r\n .ribbonComponent_descriptionBlockSection{\r\n margin:0 42px;\r\n }\r\n .ribbonComponent_ButtonSection{\r\n padding-left: 60px;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n margin-right: 42px;\r\n }\r\n .ribbonComponent_CloseIcon1{\r\n display: none;\r\n }\r\n}\r\n@media (min-width: 1440px){\r\n .ribbonComponent_descriptionBlockSection{\r\n margin:0 72px;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n margin-right: 72px;\r\n }\r\n .ribbonComponent_ButtonSection{\r\n padding-left: 80px;\r\n }\r\n \r\n}\r\n\r\n.falcon-primary-button-v1 > .falcon-button-defaults {\r\n background-color: #da291c;\r\n color: #ffffff;\r\n}\r\n.falcon-primary-button-v1:hover {\r\n background-color: #961c13;\r\n}\r\n.falcon-primary-button-v1:visited {\r\n background-color: #c7355f;\r\n}\r\n.falcon-primary-button-v1:disabled {\r\n background-color: #e6e3df;\r\n color: #b3aeaa;\r\n cursor: default;\r\n}\r\n\r\n.falcon-primary-button-v1-JC > .falcon-button-defaults {\r\n background-color: #ffffff;\r\n color: #da291c;\r\n}\r\n.falcon-primary-button-v1-JC:hover {\r\n background-color: #e97f77;\r\n color: #ffffff;\r\n}\r\n.falcon-primary-button-v1-JC:visited {\r\n background-color: #961c13;\r\n color: #ffffff;\r\n}\r\n.falcon-primary-button-v1-JC:disabled {\r\n background-color: #e6e3df;\r\n color: #b3aeaa;\r\n cursor: default;\r\n}\r\n.falcon-secondary-button-v1 > .falcon-button-defaults {\r\n background-color: transparent;\r\n border: 2px solid #da291c;\r\n color: #da291c;\r\n}\r\n.falcon-secondary-button-v1:hover {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n.falcon-secondary-button-v1:visited {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n.falcon-secondary-button-v1:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v1-JC > .falcon-button-defaults {\r\n background-color: transparent;\r\n border: 2px solid #da291c;\r\n color: #ffffff;\r\n}\r\n.falcon-secondary-button-v1-JC:hover {\r\n border-color: #f1571d;\r\n}\r\n.falcon-secondary-button-v1-JC:visited {\r\n border-color: #c7355f;\r\n}\r\n.falcon-secondary-button-v1-JC:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n.falcon-secondary-button-v4 > .falcon-button-defaults {\r\n background-color: transparent;\r\n padding-left: 0;\r\n padding-right: 0;\r\n color: #da291c;\r\n}\r\n.falcon-secondary-button-v4:hover {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n.falcon-secondary-button-v4:visited {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n.falcon-secondary-button-v4:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v4-JC > .falcon-button-defaults {\r\n background-color: transparent;\r\n padding: 0;\r\n color: #ffffff;\r\n}\r\n.falcon-secondary-button-v4-JC:hover {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n.falcon-secondary-button-v4-JC:visited {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n.falcon-secondary-button-v4-JC:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v5 > .falcon-button-defaults {\r\n background-color: transparent;\r\n padding: 0;\r\n color: #3d3935;\r\n font-weight: 400;\r\n}\r\n.falcon-secondary-button-v5 > div {\r\n text-decoration-line: underline;\r\n}\r\n\r\n.falcon-secondary-button-dark > .falcon-button-defaults {\r\n background-color: transparent;\r\n color: #3d3935;\r\n border: 2px solid #3d3935;\r\n}\r\n.falcon-primary-dark-button {\r\n background: #5f5955;\r\n padding: 10px 24px;\r\n box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);\r\n border-radius: 28px 0px 0px 28px;\r\n}\r\n.falcon-primary-dark-button:hover {\r\n background: #86807c;\r\n box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);\r\n}\r\n.falcon-primary-dark-button:visited {\r\n background: #86807c;\r\n box-sizing: border-box;\r\n box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);\r\n padding: 8px 22px;\r\n border: 2px solid #5f5955;\r\n}\r\n");const o=r=>n.createElement("div",null,e.render(r.content,{markResolvers:{link:(e,o)=>{const{href:t,target:l,linktype:a}=o;return"email"===a?n.createElement("a",{href:`mailto:${t}`,target:null===l||"_self"===l?"_top":"_blank"},e):r.isIFrame?n.createElement("a",{href:t,target:null===l||"_self"===l?"_top":"_blank"},e):n.createElement("a",{href:t,target:null===l?"":l,onClick:()=>{return n=e,void("function"==typeof(null==r?void 0:r.callBack)&&(null==r||r.callBack(n)));var n}},e)}}}));r("/* Mobile only viewport */\r\n@media all and (max-width: 767px) {\r\n .timer-wrap {\r\n text-align: center !important;\r\n margin-left: 0 !important;\r\n margin-right: 0 !important;\r\n }\r\n .timer-container {\r\n min-width: 260px;\r\n }\r\n .timer-message {\r\n margin-bottom: 10px;\r\n }\r\n .timer-section {\r\n justify-content: center;\r\n margin-top: 4px;\r\n margin-left: unset !important;\r\n margin-right: unset !important;\r\n }\r\n}\r\n/* Mobile and tablet viewport */\r\n@media all and (max-width: 1023px) {\r\n .timer-message {\r\n margin-top: unset;\r\n }\r\n}\r\n\r\n/* Tablet only viewport */\r\n@media all and (min-width: 768px) and (max-width: 1023px) {\r\n .timer-section {\r\n margin-top: unset;\r\n }\r\n}\r\n\r\n.timer-container {\r\n color: black;\r\n display: inline-block;\r\n max-width: 100%;\r\n min-width: 242px;\r\n padding-top: 10px;\r\n}\r\n.colon {\r\n font-weight: 700;\r\n font-size: 28px;\r\n line-height: 36px;\r\n}\r\n\r\n.timer-section {\r\n display: flex;\r\n /* margin-top: 12px; */\r\n padding: 8px 0;\r\n}\r\n.timer-element {\r\n display: inline-block;\r\n min-width: 42px;\r\n padding: 0 6px;\r\n text-align: center;\r\n}\r\n.timer-value {\r\n font-weight: 700;\r\n font-size: 32px;\r\n line-height: 36px;\r\n}\r\n.timer-label {\r\n font-weight: 400;\r\n font-size: 12px;\r\n line-height: 16px;\r\n}\r\n.transparent-element:first-child {\r\n padding-left: 0;\r\n}\r\n");const t=n=>{let e=new Date(n);return e=((n,e,r,o,t,l,a)=>{const i=new Date(Date.UTC(e,r,o,t,l,a)),c=new Date(i.toLocaleString("en-US",{timeZone:"Europe/Vienna"})),d=new Date(i.toLocaleString("en-US",{timeZone:n})),m=c.getTime()-d.getTime();return i.setTime(i.getTime()+m),i})("Europe/Vienna",e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds()),e},l="center",a="left",i="transparent",c="00",d=({content:e})=>{var r;return n.createElement("div",{className:"container",style:{justifyContent:e.timerAlignment===l?"center":e.timerAlignment===a?"left":"right"}},n.createElement("div",{className:"timer-section",style:{color:e.timerColor,backgroundColor:e.backgroundColor,marginLeft:e.backgroundColor===i&&e.timerAlignment===a?"-9px":"unset",marginRight:e.backgroundColor===i&&"right"===e.timerAlignment?"-24px":"unset"}},n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",c," "),n.createElement("div",{className:"timer-label"},e.dayLabel)),n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",c," "),n.createElement("div",{className:"timer-label"},e.hourLabel)),n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",c," "),n.createElement("div",{className:"timer-label"},e.minuteLabel)),n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",c),n.createElement("div",{className:"timer-label"},e.secondLabel))),n.createElement("div",{className:"timer-message",style:{color:null===(r=e.expiryLabelColor)||void 0===r?void 0:r.color}},e.expiryLabel))},m=({content:e})=>{var r,o,i,c,m,s,b,p;const u=t(new Date(null===(r=null==e?void 0:e.endTime)||void 0===r?void 0:r.replace(/-/g,"/"))),v=t(new Date(null===(o=null==e?void 0:e.startTime)||void 0===o?void 0:o.replace(/-/g,"/"))),f=(null==e?void 0:e.colorChangeTime)&&t(new Date(null===(i=null==e?void 0:e.colorChangeTime)||void 0===i?void 0:i.replace(/-/g,"/"))),[g,x]=n.useState(!1),[C,h]=n.useState(null!==(c=null==e?void 0:e.timerColor)&&void 0!==c?c:""),[y,k]=n.useState(!1),E=()=>{const n=new Date;f&&!y&&n.getTime()>f.getTime()&&(h("#da291c"),k(!0)),n.getTime()>=v.getTime()&&!g&&x(!0);const e=u.getTime()-n.getTime();if(e>0&&g){return{days:("0"+Math.floor(e/864e5)).slice(-2),hours:("0"+Math.floor(e/36e5%24)).slice(-2),mins:("0"+Math.floor(e/1e3/60%60)).slice(-2),sec:("0"+Math.floor(e/1e3%60)).slice(-2)}}return null},_={timerColor:C,backgroundColor:null==e?void 0:e.backgroundColor,expiryLabel:e.expiryLabel,timerAlignment:e.timerAlignment,dayLabel:e.dayLabel,hourLabel:e.hourLabel,minuteLabel:e.minuteLabel,secondLabel:e.secondLabel,expiryLabelColor:e.expiryLabelColor},[N,w]=n.useState(E());n.useEffect((()=>{w(E());const n=setInterval((()=>{w(E())}),1e3);return()=>{clearInterval(n)}}));const T=[{label:null!==(m=null==e?void 0:e.hourLabel)&&void 0!==m?m:"",value:null==N?void 0:N.hours},{label:null!==(s=null==e?void 0:e.minuteLabel)&&void 0!==s?s:"",value:null==N?void 0:N.mins},{label:null!==(b=null==e?void 0:e.secondLabel)&&void 0!==b?b:"",value:null==N?void 0:N.sec}];return n.createElement("div",{className:"timer-wrap",style:{textAlign:e.timerAlignment===l?"center":e.timerAlignment===a?"left":"right"}},g&&n.createElement("div",{className:"timer-container"},N?n.createElement("div",{className:"timer-section",style:{color:C,backgroundColor:null!==(p=null==e?void 0:e.backgroundColor)&&void 0!==p?p:"transparent"}},n.createElement("div",{className:" timer-element transparent-element"},n.createElement("div",{className:"timer-value"}," ",null==N?void 0:N.days),n.createElement("div",{className:"timer-label"},e.dayLabel)),T.map((e=>n.createElement(n.Fragment,null,n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",e.value),n.createElement("div",{className:"timer-label"},e.label)))))):n.createElement(d,{content:_})))},s=n=>{switch(n){case"Primary-V1":return"falcon-primary-button-v1";case"Secondary-V1":return"falcon-secondary-button-v1";case"Secondary-V4":return"falcon-secondary-button-v4";case"Secondary-Dark":return"falcon-secondary-button-dark";case"Primary-Dark-V1":return"falcon-primary-dark-button";case"Secondary-V5":return"falcon-secondary-button-v5";default:return""}};exports.RibbonComponent=({content:e})=>{var r,t,l,a,i,c,d,b,p,u,v,f,g;const[x,C]=n.useState(!1),h=((null==e?void 0:e.enableDarkMode)?"ribbonComponent_DarkText":"")+" ribbonComponent_Card",y=()=>{!1===x&&C(!0)};return n.createElement(n.Fragment,null,!1===x&&n.createElement(n.Fragment,null,n.createElement("div",{className:"ribbonComponent_Wrapper",style:{background:null==e?void 0:e.backgroundColor}},n.createElement("div",{className:h},n.createElement("div",{className:"ribbonComponent_descriptionBlockSection"},(null===(r=null==e?void 0:e.icon)||void 0===r?void 0:r.filename)&&n.createElement("div",{className:"ribbonComponent_Image"},n.createElement("img",{className:"ribbonComponent_Icon",src:null===(t=null==e?void 0:e.icon)||void 0===t?void 0:t.filename})),(null==e?void 0:e.description)&&n.createElement("div",{className:"ribbonComponent_TextContainer"},n.createElement(o,{content:null==e?void 0:e.description}),n.createElement("div",null))),n.createElement("div",{className:"ribbonComponent_ButtonSection"},(null===(l=null==e?void 0:e.teaserTimer[0])||void 0===l?void 0:l.startTime)&&n.createElement(n.Fragment,null,n.createElement("div",{className:"ribbonComponent_Timer"},n.createElement(m,{content:null==e?void 0:e.teaserTimer[0]})),n.createElement("div",{className:"ribbonComponent_HrBreaker"})),((null==e?void 0:e.buttonText)&&(null===(a=null==e?void 0:e.link)||void 0===a?void 0:a.url)||(null==e?void 0:e.hotlineNumber)&&(null===(i=null==e?void 0:e.buttonIcon)||void 0===i?void 0:i.filename))&&n.createElement("div",{className:"ribbonComponent_Button"},n.createElement("a",{href:(null==e?void 0:e.hotlineNumber)?`tel:${(null==e?void 0:e.hotlineNumber)||0}`:null===(c=null==e?void 0:e.link)||void 0===c?void 0:c.url,target:null!==(d=null==e?void 0:e.target)&&void 0!==d?d:"",rel:"_blank"===(null==e?void 0:e.target)?"opener":"noopener"},n.createElement("div",{className:s(null==e?void 0:e.buttonType)},(null==e?void 0:e.hotlineNumber)&&"left"===(null==e?void 0:e.iconAlign)&&n.createElement("img",{className:"ribbonComponent_phoneIcon",src:null===(b=null==e?void 0:e.buttonIcon)||void 0===b?void 0:b.filename}),(null==e?void 0:e.hotlineNumber)?null==e?void 0:e.hotlineNumber:null==e?void 0:e.buttonText,(null==e?void 0:e.hotlineNumber)&&"right"===(null==e?void 0:e.iconAlign)&&n.createElement("img",{className:"ribbonComponent_phoneIcon",src:null===(p=null==e?void 0:e.buttonIcon)||void 0===p?void 0:p.filename})))),(null===(u=null==e?void 0:e.closeIcon)||void 0===u?void 0:u.filename)&&(null==e?void 0:e.isCloseIcon)&&n.createElement("div",{className:"ribbonComponent_CloseIcon",onClick:()=>y()},n.createElement("img",{src:null===(v=null==e?void 0:e.closeIcon)||void 0===v?void 0:v.filename}))),(null===(f=null==e?void 0:e.closeIcon)||void 0===f?void 0:f.filename)&&(null==e?void 0:e.isCloseIcon)&&n.createElement("div",{className:"ribbonComponent_CloseIcon1",onClick:()=>y()},n.createElement("img",{src:null===(g=null==e?void 0:e.closeIcon)||void 0===g?void 0:g.filename}))))))};
1
+ "use strict";var n=require("react"),e=require("storyblok-rich-text-react-renderer-ts");function r(n,e){void 0===e&&(e={});var r=e.insertAt;if(n&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===r&&o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.styleSheet?t.styleSheet.cssText=n:t.appendChild(document.createTextNode(n))}}r(".ribbonComponent_Wrapper{\r\n width: 100%;\r\n}\r\n.ribbonComponent_Card {\r\n display: flex;\r\n align-items: center;\r\n padding:16px 0;\r\n}\r\n.ribbonComponent_DarkText{\r\n color: #FFF !important;\r\n}\r\n.ribbonComponent_DarkDescription a {\r\ncolor: #FFF;\r\n}\r\n.ribbonComponent_Image {\r\n margin-top: 5px;\r\n margin-right: 8px;\r\n}\r\n.ribbonComponent_Icon {\r\n height: 24px;\r\n width: 24px;\r\n}\r\n.ribbonComponent_TextContainer {\r\n margin: 8px 0;\r\n font-size: 16px;\r\n line-height: 24px;\r\n}\r\n.ribbonComponent_Title {\r\n font-weight: 700;\r\n}\r\n.ribbonComponent_Description {\r\n font-weight: 400;\r\n}\r\n.ribbonComponent_CloseIcon {\r\n margin-right: 16px;\r\n}\r\n.ribbonComponent_HrBreaker {\r\n width: 1px;\r\n height: 32px;\r\n margin-left: 8px;\r\n margin-right: 8px;\r\n border-radius: 1px;\r\n opacity: 0.2;\r\n flex-shrink: 0;\r\n background: #3D3935;\r\n}\r\n.ribbonComponent_OnlyTimer{\r\n width:30px;\r\n}\r\n.ribbonComponent_Button{\r\n text-wrap:nowrap;\r\n}\r\n.falcon-button-defaults {\r\n border-radius: 28px;\r\n cursor: pointer;\r\n display: inline-block;\r\n font-size: 16px;\r\n line-height: 24px;\r\n font-weight: 700;\r\n padding: 10px 24px;\r\n text-decoration: none;\r\n}\r\n.ribbonComponent_phoneIcon {\r\n background-size: contain;\r\n display: inline-flex;\r\n height: 24px;\r\n margin: 0 8px 0 10px;\r\n width: 24px;\r\n}\r\n.ribbonComponent_ButtonSection {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n}\r\n.ribbonComponent_descriptionBlockSection {\r\n display: flex;\r\n}\r\n/* Mobile only viewport */\r\n@media all and (max-width: 767px) {\r\n .falcon-primary-button-v1-JC:visited {\r\n background-color: #e97f77;\r\n }\r\n .ribbonComponent_Card {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n margin-left: 16px;\r\n }\r\n .ribbonComponent_CloseIcon1{\r\n margin-right: 0;\r\n position: absolute;\r\n right: 16px;\r\n margin-top: 16px;\r\n }\r\n .ribbonComponent_ButtonSection {\r\n display: flex;\r\n align-items: flex-start;\r\n flex-direction: column;\r\n padding-bottom: 16px;\r\n padding-top: 8px;\r\n margin-left: 32px;\r\n }\r\n .ribbonComponent_descriptionBlockSection {\r\n padding-top:16px;\r\n padding-right: 78px;\r\n margin-left: 16px;\r\n }\r\n .ribbonComponent_Timer{\r\n margin-left: 8px;\r\n padding-bottom: 8px;\r\n }\r\n .ribbonComponent_Button{\r\n margin-left: 8px;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n display: none;\r\n }\r\n}\r\n/* Mobile and tablet viewport */\r\n@media all and (max-width: 1023px) {\r\n .ribbonComponent_HrBreaker {\r\n display: none;\r\n }\r\n .ribbonComponent_Button {\r\n padding-bottom: 16px;\r\n }\r\n}\r\n\r\n/* Tablet only viewport */\r\n@media all and (min-width: 768px) and (max-width: 1023px) {\r\n .ribbonComponent_Card{\r\n justify-content: space-between;\r\n }\r\n .ribbonComponent_ButtonSection {\r\n display: flex;\r\n flex-direction: column;\r\n padding-right: 90px;\r\n padding-left:70px;\r\n margin: 6px 0 0 0;\r\n align-items: flex-end;\r\n }\r\n .ribbonComponent_Button{\r\n margin: 8px 0;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n display: none;\r\n }\r\n .ribbonComponent_CloseIcon1{\r\n margin-right: 0;\r\n position: absolute;\r\n right: 40px;\r\n padding-left: 16px;\r\n }\r\n .ribbonComponent_descriptionBlockSection{\r\n margin-left:40px;\r\n }\r\n}\r\n\r\n/* Desktop only viewport */\r\n@media (min-width: 1024px) {\r\n .ribbonComponent_Card{\r\n justify-content: space-between;\r\n margin-left:0;\r\n }\r\n .ribbonComponent_Button{\r\n margin: 0 16px;\r\n text-wrap:nowrap;\r\n }\r\n .ribbonComponent_descriptionBlockSection{\r\n margin:0 42px;\r\n }\r\n .ribbonComponent_ButtonSection{\r\n padding-left: 60px;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n margin-right: 42px;\r\n }\r\n .ribbonComponent_CloseIcon1{\r\n display: none;\r\n }\r\n}\r\n@media (min-width: 1440px){\r\n .ribbonComponent_Card{\r\n max-width: 1440px;\r\n margin: auto;\r\n }\r\n .ribbonComponent_descriptionBlockSection{\r\n margin:0 72px;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n margin-right: 72px;\r\n }\r\n .ribbonComponent_ButtonSection{\r\n padding-left: 80px;\r\n }\r\n .ribbonComponent_OnlyTimer{\r\n width:60px;\r\n } \r\n}\r\n\r\n.falcon-primary-button-v1 > .falcon-button-defaults {\r\n background-color: #da291c;\r\n color: #ffffff;\r\n}\r\n.falcon-primary-button-v1:hover {\r\n background-color: #961c13;\r\n}\r\n.falcon-primary-button-v1:visited {\r\n background-color: #c7355f;\r\n}\r\n.falcon-primary-button-v1:disabled {\r\n background-color: #e6e3df;\r\n color: #b3aeaa;\r\n cursor: default;\r\n}\r\n\r\n.falcon-primary-button-v1-JC > .falcon-button-defaults {\r\n background-color: #ffffff;\r\n color: #da291c;\r\n}\r\n.falcon-primary-button-v1-JC:hover {\r\n background-color: #e97f77;\r\n color: #ffffff;\r\n}\r\n.falcon-primary-button-v1-JC:visited {\r\n background-color: #961c13;\r\n color: #ffffff;\r\n}\r\n.falcon-primary-button-v1-JC:disabled {\r\n background-color: #e6e3df;\r\n color: #b3aeaa;\r\n cursor: default;\r\n}\r\n.falcon-secondary-button-v1 > .falcon-button-defaults {\r\n background-color: transparent;\r\n border: 2px solid #da291c;\r\n color: #da291c;\r\n}\r\n.falcon-secondary-button-v1:hover {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n.falcon-secondary-button-v1:visited {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n.falcon-secondary-button-v1:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v1-JC > .falcon-button-defaults {\r\n background-color: transparent;\r\n border: 2px solid #da291c;\r\n color: #ffffff;\r\n}\r\n.falcon-secondary-button-v1-JC:hover {\r\n border-color: #f1571d;\r\n}\r\n.falcon-secondary-button-v1-JC:visited {\r\n border-color: #c7355f;\r\n}\r\n.falcon-secondary-button-v1-JC:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n.falcon-secondary-button-v4 > .falcon-button-defaults {\r\n background-color: transparent;\r\n padding-left: 0;\r\n padding-right: 0;\r\n color: #da291c;\r\n}\r\n.falcon-secondary-button-v4:hover {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n.falcon-secondary-button-v4:visited {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n.falcon-secondary-button-v4:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v4-JC > .falcon-button-defaults {\r\n background-color: transparent;\r\n padding: 0;\r\n color: #ffffff;\r\n}\r\n.falcon-secondary-button-v4-JC:hover {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n.falcon-secondary-button-v4-JC:visited {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n.falcon-secondary-button-v4-JC:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v5 > .falcon-button-defaults {\r\n background-color: transparent;\r\n padding: 0;\r\n color: #3d3935;\r\n font-weight: 400;\r\n}\r\n.falcon-secondary-button-v5 > div {\r\n text-decoration-line: underline;\r\n}\r\n\r\n.falcon-secondary-button-dark > .falcon-button-defaults {\r\n background-color: transparent;\r\n color: #3d3935;\r\n border: 2px solid #3d3935;\r\n}\r\n.falcon-primary-dark-button {\r\n background: #5f5955;\r\n padding: 10px 24px;\r\n box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);\r\n border-radius: 28px 0px 0px 28px;\r\n}\r\n.falcon-primary-dark-button:hover {\r\n background: #86807c;\r\n box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);\r\n}\r\n.falcon-primary-dark-button:visited {\r\n background: #86807c;\r\n box-sizing: border-box;\r\n box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);\r\n padding: 8px 22px;\r\n border: 2px solid #5f5955;\r\n}\r\n");const o=r=>n.createElement("div",null,e.render(r.content,{markResolvers:{link:(e,o)=>{const{href:t,target:l,linktype:i}=o;return"email"===i?n.createElement("a",{href:`mailto:${t}`,target:null===l||"_self"===l?"_top":"_blank"},e):r.isIFrame?n.createElement("a",{href:t,target:null===l||"_self"===l?"_top":"_blank"},e):n.createElement("a",{href:t,target:null===l?"":l,onClick:()=>{return n=e,void("function"==typeof(null==r?void 0:r.callBack)&&(null==r||r.callBack(n)));var n}},e)}}}));r("/* Mobile only viewport */\r\n@media all and (max-width: 767px) {\r\n .timer-wrap {\r\n text-align: center !important;\r\n margin-left: 0 !important;\r\n margin-right: 0 !important;\r\n }\r\n .timer-container {\r\n min-width: 260px;\r\n }\r\n .timer-message {\r\n margin-bottom: 10px;\r\n }\r\n .timer-section {\r\n justify-content: center;\r\n margin-top: 4px;\r\n margin-left: unset !important;\r\n margin-right: unset !important;\r\n }\r\n}\r\n/* Mobile and tablet viewport */\r\n@media all and (max-width: 1023px) {\r\n .timer-message {\r\n margin-top: unset;\r\n }\r\n}\r\n\r\n/* Tablet only viewport */\r\n@media all and (min-width: 768px) and (max-width: 1023px) {\r\n .timer-section {\r\n margin-top: unset;\r\n }\r\n}\r\n\r\n.timer-container {\r\n color: black;\r\n display: inline-block;\r\n max-width: 100%;\r\n min-width: 242px;\r\n /* padding-top: 10px; */\r\n}\r\n.colon {\r\n font-weight: 700;\r\n font-size: 28px;\r\n line-height: 36px;\r\n}\r\n\r\n.timer-section {\r\n display: flex;\r\n /* margin-top: 12px; */\r\n padding: 8px 0;\r\n}\r\n.timer-element {\r\n display: inline-block;\r\n min-width: 42px;\r\n padding: 0 6px;\r\n text-align: center;\r\n}\r\n.timer-value {\r\n font-weight: 700;\r\n font-size: 32px;\r\n line-height: 36px;\r\n}\r\n.timer-label {\r\n font-weight: 400;\r\n font-size: 12px;\r\n line-height: 16px;\r\n}\r\n.transparent-element:first-child {\r\n padding-left: 0;\r\n}\r\n");const t=n=>{switch(n){case"Primary-V1":return"falcon-primary-button-v1";case"Secondary-V1":return"falcon-secondary-button-v1";case"Secondary-V4":return"falcon-secondary-button-v4";case"Secondary-Dark":return"falcon-secondary-button-dark";case"Primary-Dark-V1":return"falcon-primary-dark-button";case"Secondary-V5":return"falcon-secondary-button-v5";default:return""}},l=n=>{let e=new Date(n);return e=((n,e,r,o,t,l,i)=>{const a=new Date(Date.UTC(e,r,o,t,l,i)),d=new Date(a.toLocaleString("en-US",{timeZone:"Europe/Vienna"})),c=new Date(a.toLocaleString("en-US",{timeZone:n})),m=d.getTime()-c.getTime();return a.setTime(a.getTime()+m),a})("Europe/Vienna",e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds()),e},i="center",a="left",d="transparent",c="00",m=({content:e})=>{var r;return n.createElement("div",{className:"container",style:{justifyContent:e.timerAlignment===i?"center":e.timerAlignment===a?"left":"right"}},n.createElement("div",{className:"timer-section",style:{color:e.timerColor,backgroundColor:e.backgroundColor,marginLeft:e.backgroundColor===d&&e.timerAlignment===a?"-9px":"unset",marginRight:e.backgroundColor===d&&"right"===e.timerAlignment?"-24px":"unset"}},n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",c," "),n.createElement("div",{className:"timer-label"},e.dayLabel)),n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",c," "),n.createElement("div",{className:"timer-label"},e.hourLabel)),n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",c," "),n.createElement("div",{className:"timer-label"},e.minuteLabel)),n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",c),n.createElement("div",{className:"timer-label"},e.secondLabel))),n.createElement("div",{className:"timer-message",style:{color:null===(r=e.expiryLabelColor)||void 0===r?void 0:r.color}},e.expiryLabel))},s=({content:e})=>{var r,o,t,d,c,s,u,b;const p=l(new Date(null===(r=null==e?void 0:e.endTime)||void 0===r?void 0:r.replace(/-/g,"/"))),v=l(new Date(null===(o=null==e?void 0:e.startTime)||void 0===o?void 0:o.replace(/-/g,"/"))),f=(null==e?void 0:e.colorChangeTime)&&l(new Date(null===(t=null==e?void 0:e.colorChangeTime)||void 0===t?void 0:t.replace(/-/g,"/"))),[g,x]=n.useState(!1),[C,h]=n.useState(null!==(d=null==e?void 0:e.timerColor)&&void 0!==d?d:""),[y,k]=n.useState(!1),E=()=>{const n=new Date;f&&!y&&n.getTime()>f.getTime()&&(h("#da291c"),k(!0)),n.getTime()>=v.getTime()&&!g&&x(!0);const e=p.getTime()-n.getTime();if(e>0&&g){return{days:("0"+Math.floor(e/864e5)).slice(-2),hours:("0"+Math.floor(e/36e5%24)).slice(-2),mins:("0"+Math.floor(e/1e3/60%60)).slice(-2),sec:("0"+Math.floor(e/1e3%60)).slice(-2)}}return null},_={timerColor:C,backgroundColor:null==e?void 0:e.backgroundColor,expiryLabel:e.expiryLabel,timerAlignment:e.timerAlignment,dayLabel:e.dayLabel,hourLabel:e.hourLabel,minuteLabel:e.minuteLabel,secondLabel:e.secondLabel,expiryLabelColor:e.expiryLabelColor},[w,N]=n.useState(E());n.useEffect((()=>{N(E());const n=setInterval((()=>{N(E())}),1e3);return()=>{clearInterval(n)}}));const T=[{label:null!==(c=null==e?void 0:e.hourLabel)&&void 0!==c?c:"",value:null==w?void 0:w.hours},{label:null!==(s=null==e?void 0:e.minuteLabel)&&void 0!==s?s:"",value:null==w?void 0:w.mins},{label:null!==(u=null==e?void 0:e.secondLabel)&&void 0!==u?u:"",value:null==w?void 0:w.sec}];return n.createElement("div",{className:"timer-wrap",style:{textAlign:e.timerAlignment===i?"center":e.timerAlignment===a?"left":"right"}},g&&n.createElement("div",{className:"timer-container"},w?n.createElement("div",{className:"timer-section",style:{color:(null==e?void 0:e.isDarkMode)?"#FFF":C,backgroundColor:null!==(b=null==e?void 0:e.backgroundColor)&&void 0!==b?b:"transparent"}},n.createElement("div",{className:" timer-element transparent-element"},n.createElement("div",{className:"timer-value"}," ",null==w?void 0:w.days),n.createElement("div",{className:"timer-label"},e.dayLabel)),T.map((e=>n.createElement(n.Fragment,null,n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",e.value),n.createElement("div",{className:"timer-label"},e.label)))))):n.createElement(m,{content:_})))};exports.RibbonComponent=({content:e})=>{var r,i,a,d,c,m,u,b,p,v,f,g,x,C,h,y,k,E,_,w,N,T,I,D,S,B;const[L,M]=n.useState(!1),F=new Date,[J,A]=n.useState(null==e?void 0:e.teaserTimer[0]);n.useEffect((()=>{var n;if(null===(n=null==e?void 0:e.teaserTimer[0])||void 0===n?void 0:n.startTime){const n=null==e?void 0:e.teaserTimer[0];n.isDarkMode=null==e?void 0:e.enableDarkMode,A(n)}}),[]);const z=l(new Date(null===(i=null===(r=null==e?void 0:e.teaserTimer[0])||void 0===r?void 0:r.endTime)||void 0===i?void 0:i.replace(/-/g,"/"))),V=l(new Date(null===(d=null===(a=null==e?void 0:e.teaserTimer[0])||void 0===a?void 0:a.startTime)||void 0===d?void 0:d.replace(/-/g,"/"))),j=((null==e?void 0:e.enableDarkMode)?"ribbonComponent_DarkText ":"")+"ribbonComponent_Card",H=((null==e?void 0:e.enableDarkMode)?"ribbonComponent_DarkDescription ":"")+"ribbonComponent_TextContainer",[O,R]=n.useState(!1);n.useEffect((()=>{P(U()),F.getTime()>=V.getTime()&&!O&&R(!0);const n=setInterval((()=>{P(U())}),1e3);return()=>{clearInterval(n)}}));const U=()=>{const n=z.getTime()-F.getTime();if(n>0&&O){return{days:("0"+Math.floor(n/864e5)).slice(-2),hours:("0"+Math.floor(n/36e5%24)).slice(-2),mins:("0"+Math.floor(n/1e3/60%60)).slice(-2),sec:("0"+Math.floor(n/1e3%60)).slice(-2)}}return null},[q,P]=n.useState(U()),W=()=>{!1===L&&M(!0)};return n.createElement(n.Fragment,null,!1===L&&(void 0===(null===(c=null==e?void 0:e.teaserTimer[0])||void 0===c?void 0:c.startTime)&&null===q||void 0!==(null===(m=null==e?void 0:e.teaserTimer[0])||void 0===m?void 0:m.startTime)&&null!==q)&&n.createElement(n.Fragment,null,n.createElement("div",{className:"ribbonComponent_Wrapper",style:{background:null==e?void 0:e.backgroundColor}},n.createElement("div",{className:j},n.createElement("div",{className:"ribbonComponent_descriptionBlockSection"},(null===(u=null==e?void 0:e.icon)||void 0===u?void 0:u.filename)&&n.createElement("div",{className:"ribbonComponent_Image"},n.createElement("img",{className:"ribbonComponent_Icon",src:(null==e?void 0:e.enableDarkMode)?null===(b=null==e?void 0:e.darkModeIcon)||void 0===b?void 0:b.filename:null===(p=null==e?void 0:e.icon)||void 0===p?void 0:p.filename})),(null==e?void 0:e.description)&&n.createElement("div",{className:H},n.createElement(o,{content:null==e?void 0:e.description}),n.createElement("div",null))),n.createElement("div",{className:"ribbonComponent_ButtonSection"},(null===(v=null==e?void 0:e.teaserTimer[0])||void 0===v?void 0:v.startTime)&&n.createElement(n.Fragment,null,n.createElement("div",{className:"ribbonComponent_Timer"},n.createElement(s,{content:J})),(null==e?void 0:e.buttonText)||(null==e?void 0:e.hotlineNumber)?n.createElement("div",{className:"ribbonComponent_HrBreaker"}):n.createElement("div",{className:"ribbonComponent_OnlyTimer"})),((null==e?void 0:e.buttonText)&&(null===(f=null==e?void 0:e.link)||void 0===f?void 0:f.url)||(null==e?void 0:e.hotlineNumber)&&(null===(g=null==e?void 0:e.buttonIcon)||void 0===g?void 0:g.filename))&&n.createElement("div",{className:"ribbonComponent_Button"},n.createElement("a",{href:(null==e?void 0:e.hotlineNumber)?`tel:${(null==e?void 0:e.hotlineNumber)||0}`:null===(x=null==e?void 0:e.link)||void 0===x?void 0:x.url,target:null!==(C=null==e?void 0:e.target)&&void 0!==C?C:"",rel:"_blank"===(null==e?void 0:e.target)?"opener":"noopener"},n.createElement("div",{className:t(null==e?void 0:e.buttonType)},(null==e?void 0:e.hotlineNumber)&&"left"===(null==e?void 0:e.iconAlign)&&n.createElement("img",{className:"ribbonComponent_phoneIcon",src:null===(h=null==e?void 0:e.buttonIcon)||void 0===h?void 0:h.filename}),(null==e?void 0:e.hotlineNumber)?null==e?void 0:e.hotlineNumber:null==e?void 0:e.buttonText,(null==e?void 0:e.hotlineNumber)&&"right"===(null==e?void 0:e.iconAlign)&&n.createElement("img",{className:"ribbonComponent_phoneIcon",src:null===(y=null==e?void 0:e.buttonIcon)||void 0===y?void 0:y.filename})))),(null===(k=null==e?void 0:e.closeIcon)||void 0===k?void 0:k.filename)&&(null==e?void 0:e.isCloseIcon)&&n.createElement("div",{className:"ribbonComponent_CloseIcon",onClick:()=>W()},n.createElement("img",{src:(null==e?void 0:e.enableDarkMode)?null!==(_=null===(E=null==e?void 0:e.darkModeCloseIcon)||void 0===E?void 0:E.filename)&&void 0!==_?_:null===(w=null==e?void 0:e.closeIcon)||void 0===w?void 0:w.filename:null===(N=null==e?void 0:e.closeIcon)||void 0===N?void 0:N.filename}))),(null===(T=null==e?void 0:e.closeIcon)||void 0===T?void 0:T.filename)&&(null==e?void 0:e.isCloseIcon)&&n.createElement("div",{className:"ribbonComponent_CloseIcon1",onClick:()=>W()},n.createElement("img",{src:(null==e?void 0:e.enableDarkMode)?null!==(D=null===(I=null==e?void 0:e.darkModeCloseIcon)||void 0===I?void 0:I.filename)&&void 0!==D?D:null===(S=null==e?void 0:e.closeIcon)||void 0===S?void 0:S.filename:null===(B=null==e?void 0:e.closeIcon)||void 0===B?void 0:B.filename}))))))};
2
2
  //# sourceMappingURL=index.js.map
@@ -1,5 +1,4 @@
1
1
  import { TimerSchema } from "./RibbonComponentTimer/RibbonComponentTimer";
2
- import Richtext from 'storyblok-js-client';
3
2
  export declare interface RibbonComponentInterface {
4
3
  content: RibbonComponentSchema;
5
4
  }
@@ -9,12 +8,14 @@ interface RibbonComponentSchema {
9
8
  buttonText: string;
10
9
  buttonType: string;
11
10
  closeIcon: Asset;
11
+ darkModeCloseIcon: Asset;
12
12
  deviceLimit: string;
13
- description: Richtext;
13
+ description: Array<object>;
14
14
  enableDarkMode: boolean;
15
15
  target: string;
16
16
  hotlineNumber: string;
17
17
  icon: Asset;
18
+ darkModeIcon: Asset;
18
19
  iconAlign: string;
19
20
  isCloseIcon: boolean;
20
21
  link: MultiLink;
@@ -16,9 +16,16 @@ export interface TimerSchema {
16
16
  mainHeading: string;
17
17
  expiryLabelColor: NativeColorPicker;
18
18
  enableCounter: boolean;
19
+ isDarkMode?: boolean;
19
20
  }
20
21
  interface Timer {
21
22
  content: TimerSchema;
22
23
  }
24
+ export interface timeleft {
25
+ days: string;
26
+ hours: string;
27
+ mins: string;
28
+ sec: string;
29
+ }
23
30
  declare const RibbonComponentTimer: ({ content }: Timer) => JSX.Element;
24
31
  export default RibbonComponentTimer;
@@ -1 +1,3 @@
1
1
  export declare const getFalconButtonClass: (type: string) => string;
2
+ export declare const dateWithTimeZone: (timeZone: string, year: number, month: number, day: number, hour: number, minute: number, second: number) => Date;
3
+ export declare const calculateDateTime: (dateObj: Date) => Date;
@@ -1,7 +1,6 @@
1
- import Richtext from 'storyblok-js-client';
2
1
  import React from 'react';
3
2
  export interface richText {
4
- content: Richtext;
3
+ content: Array<object>;
5
4
  isIFrame?: boolean;
6
5
  callBack?: (e: any) => void | undefined;
7
6
  }
package/dist/esm/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import n,{useState as e,useEffect as r}from"react";import{render as o}from"storyblok-rich-text-react-renderer-ts";function t(n,e){void 0===e&&(e={});var r=e.insertAt;if(n&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===r&&o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.styleSheet?t.styleSheet.cssText=n:t.appendChild(document.createTextNode(n))}}t(".ribbonComponent_Card {\r\n display: flex;\r\n align-items: center;\r\n}\r\n.ribbonComponent_DarkText{\r\n color: #FFF !important;\r\n}\r\n.ribbonComponent_Image {\r\n margin-top: 5px;\r\n margin-right: 8px;\r\n}\r\n.ribbonComponent_Icon {\r\n height: 24px;\r\n width: 24px;\r\n}\r\n.ribbonComponent_TextContainer {\r\n margin: 8px 0;\r\n font-size: 16px;\r\n line-height: 24px;\r\n}\r\n.ribbonComponent_Title {\r\n font-weight: 700;\r\n}\r\n.ribbonComponent_Description {\r\n font-weight: 400;\r\n}\r\n.ribbonComponent_CloseIcon {\r\n margin-right: 16px;\r\n}\r\n.ribbonComponent_HrBreaker {\r\n width: 1px;\r\n height: 32px;\r\n margin-left: 8px;\r\n margin-right: 8px;\r\n border-radius: 1px;\r\n opacity: 0.20000000298023224px;\r\n background: #e6e3df;\r\n}\r\n.ribbonComponent_Button{\r\n text-wrap:nowrap;\r\n}\r\n.falcon-button-defaults {\r\n border-radius: 28px;\r\n cursor: pointer;\r\n display: inline-block;\r\n font-size: 16px;\r\n line-height: 24px;\r\n font-weight: 700;\r\n padding: 10px 24px;\r\n text-decoration: none;\r\n}\r\n.ribbonComponent_phoneIcon {\r\n background-size: contain;\r\n display: inline-flex;\r\n height: 24px;\r\n margin: 0 8px 0 10px;\r\n width: 24px;\r\n}\r\n.ribbonComponent_ButtonSection {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n}\r\n.ribbonComponent_descriptionBlockSection {\r\n display: flex;\r\n padding:16px 0;\r\n}\r\n/* Mobile only viewport */\r\n@media all and (max-width: 767px) {\r\n .falcon-primary-button-v1-JC:visited {\r\n background-color: #e97f77;\r\n }\r\n .ribbonComponent_Card {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n margin-left: 16px;\r\n }\r\n .ribbonComponent_CloseIcon1{\r\n margin-right: 0;\r\n position: absolute;\r\n right: 16px;\r\n margin-top: 16px;\r\n }\r\n .ribbonComponent_ButtonSection {\r\n display: flex;\r\n align-items: flex-start;\r\n flex-direction: column;\r\n padding-bottom: 16px;\r\n padding-top: 8px;\r\n margin-left: 32px;\r\n }\r\n .ribbonComponent_descriptionBlockSection {\r\n padding-top:16px;\r\n padding-right: 78px;\r\n margin-left: 16px;\r\n }\r\n .ribbonComponent_Timer{\r\n margin-left: 8px;\r\n padding-bottom: 8px;\r\n }\r\n .ribbonComponent_Button{\r\n margin-left: 16px;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n display: none;\r\n }\r\n}\r\n/* Mobile and tablet viewport */\r\n@media all and (max-width: 1023px) {\r\n .ribbonComponent_HrBreaker {\r\n display: none;\r\n }\r\n .ribbonComponent_Button {\r\n padding-bottom: 16px;\r\n }\r\n}\r\n\r\n/* Tablet only viewport */\r\n@media all and (min-width: 768px) and (max-width: 1023px) {\r\n .ribbonComponent_Card{\r\n justify-content: space-between;\r\n }\r\n .ribbonComponent_ButtonSection {\r\n display: flex;\r\n flex-direction: column;\r\n padding-right: 90px;\r\n padding-left:70px;\r\n margin: 6px 0 0 0;\r\n align-items: flex-end;\r\n }\r\n .ribbonComponent_Button{\r\n margin: 8px 0;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n display: none;\r\n }\r\n .ribbonComponent_CloseIcon1{\r\n margin-right: 0;\r\n position: absolute;\r\n right: 40px;\r\n padding-left: 16px;\r\n }\r\n .ribbonComponent_descriptionBlockSection{\r\n margin-left:40px;\r\n }\r\n}\r\n\r\n/* Desktop only viewport */\r\n@media (min-width: 1024px) {\r\n .ribbonComponent_Card{\r\n justify-content: space-between;\r\n margin-left:0;\r\n }\r\n .ribbonComponent_Button{\r\n margin: 0 16px;\r\n text-wrap:nowrap;\r\n }\r\n .ribbonComponent_descriptionBlockSection{\r\n margin:0 42px;\r\n }\r\n .ribbonComponent_ButtonSection{\r\n padding-left: 60px;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n margin-right: 42px;\r\n }\r\n .ribbonComponent_CloseIcon1{\r\n display: none;\r\n }\r\n}\r\n@media (min-width: 1440px){\r\n .ribbonComponent_descriptionBlockSection{\r\n margin:0 72px;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n margin-right: 72px;\r\n }\r\n .ribbonComponent_ButtonSection{\r\n padding-left: 80px;\r\n }\r\n \r\n}\r\n\r\n.falcon-primary-button-v1 > .falcon-button-defaults {\r\n background-color: #da291c;\r\n color: #ffffff;\r\n}\r\n.falcon-primary-button-v1:hover {\r\n background-color: #961c13;\r\n}\r\n.falcon-primary-button-v1:visited {\r\n background-color: #c7355f;\r\n}\r\n.falcon-primary-button-v1:disabled {\r\n background-color: #e6e3df;\r\n color: #b3aeaa;\r\n cursor: default;\r\n}\r\n\r\n.falcon-primary-button-v1-JC > .falcon-button-defaults {\r\n background-color: #ffffff;\r\n color: #da291c;\r\n}\r\n.falcon-primary-button-v1-JC:hover {\r\n background-color: #e97f77;\r\n color: #ffffff;\r\n}\r\n.falcon-primary-button-v1-JC:visited {\r\n background-color: #961c13;\r\n color: #ffffff;\r\n}\r\n.falcon-primary-button-v1-JC:disabled {\r\n background-color: #e6e3df;\r\n color: #b3aeaa;\r\n cursor: default;\r\n}\r\n.falcon-secondary-button-v1 > .falcon-button-defaults {\r\n background-color: transparent;\r\n border: 2px solid #da291c;\r\n color: #da291c;\r\n}\r\n.falcon-secondary-button-v1:hover {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n.falcon-secondary-button-v1:visited {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n.falcon-secondary-button-v1:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v1-JC > .falcon-button-defaults {\r\n background-color: transparent;\r\n border: 2px solid #da291c;\r\n color: #ffffff;\r\n}\r\n.falcon-secondary-button-v1-JC:hover {\r\n border-color: #f1571d;\r\n}\r\n.falcon-secondary-button-v1-JC:visited {\r\n border-color: #c7355f;\r\n}\r\n.falcon-secondary-button-v1-JC:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n.falcon-secondary-button-v4 > .falcon-button-defaults {\r\n background-color: transparent;\r\n padding-left: 0;\r\n padding-right: 0;\r\n color: #da291c;\r\n}\r\n.falcon-secondary-button-v4:hover {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n.falcon-secondary-button-v4:visited {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n.falcon-secondary-button-v4:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v4-JC > .falcon-button-defaults {\r\n background-color: transparent;\r\n padding: 0;\r\n color: #ffffff;\r\n}\r\n.falcon-secondary-button-v4-JC:hover {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n.falcon-secondary-button-v4-JC:visited {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n.falcon-secondary-button-v4-JC:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v5 > .falcon-button-defaults {\r\n background-color: transparent;\r\n padding: 0;\r\n color: #3d3935;\r\n font-weight: 400;\r\n}\r\n.falcon-secondary-button-v5 > div {\r\n text-decoration-line: underline;\r\n}\r\n\r\n.falcon-secondary-button-dark > .falcon-button-defaults {\r\n background-color: transparent;\r\n color: #3d3935;\r\n border: 2px solid #3d3935;\r\n}\r\n.falcon-primary-dark-button {\r\n background: #5f5955;\r\n padding: 10px 24px;\r\n box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);\r\n border-radius: 28px 0px 0px 28px;\r\n}\r\n.falcon-primary-dark-button:hover {\r\n background: #86807c;\r\n box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);\r\n}\r\n.falcon-primary-dark-button:visited {\r\n background: #86807c;\r\n box-sizing: border-box;\r\n box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);\r\n padding: 8px 22px;\r\n border: 2px solid #5f5955;\r\n}\r\n");const l=e=>n.createElement("div",null,o(e.content,{markResolvers:{link:(r,o)=>{const{href:t,target:l,linktype:a}=o;return"email"===a?n.createElement("a",{href:`mailto:${t}`,target:null===l||"_self"===l?"_top":"_blank"},r):e.isIFrame?n.createElement("a",{href:t,target:null===l||"_self"===l?"_top":"_blank"},r):n.createElement("a",{href:t,target:null===l?"":l,onClick:()=>{return n=r,void("function"==typeof(null==e?void 0:e.callBack)&&(null==e||e.callBack(n)));var n}},r)}}}));t("/* Mobile only viewport */\r\n@media all and (max-width: 767px) {\r\n .timer-wrap {\r\n text-align: center !important;\r\n margin-left: 0 !important;\r\n margin-right: 0 !important;\r\n }\r\n .timer-container {\r\n min-width: 260px;\r\n }\r\n .timer-message {\r\n margin-bottom: 10px;\r\n }\r\n .timer-section {\r\n justify-content: center;\r\n margin-top: 4px;\r\n margin-left: unset !important;\r\n margin-right: unset !important;\r\n }\r\n}\r\n/* Mobile and tablet viewport */\r\n@media all and (max-width: 1023px) {\r\n .timer-message {\r\n margin-top: unset;\r\n }\r\n}\r\n\r\n/* Tablet only viewport */\r\n@media all and (min-width: 768px) and (max-width: 1023px) {\r\n .timer-section {\r\n margin-top: unset;\r\n }\r\n}\r\n\r\n.timer-container {\r\n color: black;\r\n display: inline-block;\r\n max-width: 100%;\r\n min-width: 242px;\r\n padding-top: 10px;\r\n}\r\n.colon {\r\n font-weight: 700;\r\n font-size: 28px;\r\n line-height: 36px;\r\n}\r\n\r\n.timer-section {\r\n display: flex;\r\n /* margin-top: 12px; */\r\n padding: 8px 0;\r\n}\r\n.timer-element {\r\n display: inline-block;\r\n min-width: 42px;\r\n padding: 0 6px;\r\n text-align: center;\r\n}\r\n.timer-value {\r\n font-weight: 700;\r\n font-size: 32px;\r\n line-height: 36px;\r\n}\r\n.timer-label {\r\n font-weight: 400;\r\n font-size: 12px;\r\n line-height: 16px;\r\n}\r\n.transparent-element:first-child {\r\n padding-left: 0;\r\n}\r\n");const a=n=>{let e=new Date(n);return e=((n,e,r,o,t,l,a)=>{const i=new Date(Date.UTC(e,r,o,t,l,a)),c=new Date(i.toLocaleString("en-US",{timeZone:"Europe/Vienna"})),d=new Date(i.toLocaleString("en-US",{timeZone:n})),m=c.getTime()-d.getTime();return i.setTime(i.getTime()+m),i})("Europe/Vienna",e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds()),e},i="center",c="left",d="transparent",m="00",s=({content:e})=>{var r;return n.createElement("div",{className:"container",style:{justifyContent:e.timerAlignment===i?"center":e.timerAlignment===c?"left":"right"}},n.createElement("div",{className:"timer-section",style:{color:e.timerColor,backgroundColor:e.backgroundColor,marginLeft:e.backgroundColor===d&&e.timerAlignment===c?"-9px":"unset",marginRight:e.backgroundColor===d&&"right"===e.timerAlignment?"-24px":"unset"}},n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",m," "),n.createElement("div",{className:"timer-label"},e.dayLabel)),n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",m," "),n.createElement("div",{className:"timer-label"},e.hourLabel)),n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",m," "),n.createElement("div",{className:"timer-label"},e.minuteLabel)),n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",m),n.createElement("div",{className:"timer-label"},e.secondLabel))),n.createElement("div",{className:"timer-message",style:{color:null===(r=e.expiryLabelColor)||void 0===r?void 0:r.color}},e.expiryLabel))},b=({content:o})=>{var t,l,d,m,b,p,u,v;const f=a(new Date(null===(t=null==o?void 0:o.endTime)||void 0===t?void 0:t.replace(/-/g,"/"))),g=a(new Date(null===(l=null==o?void 0:o.startTime)||void 0===l?void 0:l.replace(/-/g,"/"))),x=(null==o?void 0:o.colorChangeTime)&&a(new Date(null===(d=null==o?void 0:o.colorChangeTime)||void 0===d?void 0:d.replace(/-/g,"/"))),[C,h]=e(!1),[y,k]=e(null!==(m=null==o?void 0:o.timerColor)&&void 0!==m?m:""),[E,_]=e(!1),N=()=>{const n=new Date;x&&!E&&n.getTime()>x.getTime()&&(k("#da291c"),_(!0)),n.getTime()>=g.getTime()&&!C&&h(!0);const e=f.getTime()-n.getTime();if(e>0&&C){return{days:("0"+Math.floor(e/864e5)).slice(-2),hours:("0"+Math.floor(e/36e5%24)).slice(-2),mins:("0"+Math.floor(e/1e3/60%60)).slice(-2),sec:("0"+Math.floor(e/1e3%60)).slice(-2)}}return null},w={timerColor:y,backgroundColor:null==o?void 0:o.backgroundColor,expiryLabel:o.expiryLabel,timerAlignment:o.timerAlignment,dayLabel:o.dayLabel,hourLabel:o.hourLabel,minuteLabel:o.minuteLabel,secondLabel:o.secondLabel,expiryLabelColor:o.expiryLabelColor},[T,I]=e(N());r((()=>{I(N());const n=setInterval((()=>{I(N())}),1e3);return()=>{clearInterval(n)}}));const B=[{label:null!==(b=null==o?void 0:o.hourLabel)&&void 0!==b?b:"",value:null==T?void 0:T.hours},{label:null!==(p=null==o?void 0:o.minuteLabel)&&void 0!==p?p:"",value:null==T?void 0:T.mins},{label:null!==(u=null==o?void 0:o.secondLabel)&&void 0!==u?u:"",value:null==T?void 0:T.sec}];return n.createElement("div",{className:"timer-wrap",style:{textAlign:o.timerAlignment===i?"center":o.timerAlignment===c?"left":"right"}},C&&n.createElement("div",{className:"timer-container"},T?n.createElement("div",{className:"timer-section",style:{color:y,backgroundColor:null!==(v=null==o?void 0:o.backgroundColor)&&void 0!==v?v:"transparent"}},n.createElement("div",{className:" timer-element transparent-element"},n.createElement("div",{className:"timer-value"}," ",null==T?void 0:T.days),n.createElement("div",{className:"timer-label"},o.dayLabel)),B.map((e=>n.createElement(n.Fragment,null,n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",e.value),n.createElement("div",{className:"timer-label"},e.label)))))):n.createElement(s,{content:w})))},p=n=>{switch(n){case"Primary-V1":return"falcon-primary-button-v1";case"Secondary-V1":return"falcon-secondary-button-v1";case"Secondary-V4":return"falcon-secondary-button-v4";case"Secondary-Dark":return"falcon-secondary-button-dark";case"Primary-Dark-V1":return"falcon-primary-dark-button";case"Secondary-V5":return"falcon-secondary-button-v5";default:return""}},u=({content:r})=>{var o,t,a,i,c,d,m,s,u,v,f,g,x;const[C,h]=e(!1),y=((null==r?void 0:r.enableDarkMode)?"ribbonComponent_DarkText":"")+" ribbonComponent_Card",k=()=>{!1===C&&h(!0)};return n.createElement(n.Fragment,null,!1===C&&n.createElement(n.Fragment,null,n.createElement("div",{className:"ribbonComponent_Wrapper",style:{background:null==r?void 0:r.backgroundColor}},n.createElement("div",{className:y},n.createElement("div",{className:"ribbonComponent_descriptionBlockSection"},(null===(o=null==r?void 0:r.icon)||void 0===o?void 0:o.filename)&&n.createElement("div",{className:"ribbonComponent_Image"},n.createElement("img",{className:"ribbonComponent_Icon",src:null===(t=null==r?void 0:r.icon)||void 0===t?void 0:t.filename})),(null==r?void 0:r.description)&&n.createElement("div",{className:"ribbonComponent_TextContainer"},n.createElement(l,{content:null==r?void 0:r.description}),n.createElement("div",null))),n.createElement("div",{className:"ribbonComponent_ButtonSection"},(null===(a=null==r?void 0:r.teaserTimer[0])||void 0===a?void 0:a.startTime)&&n.createElement(n.Fragment,null,n.createElement("div",{className:"ribbonComponent_Timer"},n.createElement(b,{content:null==r?void 0:r.teaserTimer[0]})),n.createElement("div",{className:"ribbonComponent_HrBreaker"})),((null==r?void 0:r.buttonText)&&(null===(i=null==r?void 0:r.link)||void 0===i?void 0:i.url)||(null==r?void 0:r.hotlineNumber)&&(null===(c=null==r?void 0:r.buttonIcon)||void 0===c?void 0:c.filename))&&n.createElement("div",{className:"ribbonComponent_Button"},n.createElement("a",{href:(null==r?void 0:r.hotlineNumber)?`tel:${(null==r?void 0:r.hotlineNumber)||0}`:null===(d=null==r?void 0:r.link)||void 0===d?void 0:d.url,target:null!==(m=null==r?void 0:r.target)&&void 0!==m?m:"",rel:"_blank"===(null==r?void 0:r.target)?"opener":"noopener"},n.createElement("div",{className:p(null==r?void 0:r.buttonType)},(null==r?void 0:r.hotlineNumber)&&"left"===(null==r?void 0:r.iconAlign)&&n.createElement("img",{className:"ribbonComponent_phoneIcon",src:null===(s=null==r?void 0:r.buttonIcon)||void 0===s?void 0:s.filename}),(null==r?void 0:r.hotlineNumber)?null==r?void 0:r.hotlineNumber:null==r?void 0:r.buttonText,(null==r?void 0:r.hotlineNumber)&&"right"===(null==r?void 0:r.iconAlign)&&n.createElement("img",{className:"ribbonComponent_phoneIcon",src:null===(u=null==r?void 0:r.buttonIcon)||void 0===u?void 0:u.filename})))),(null===(v=null==r?void 0:r.closeIcon)||void 0===v?void 0:v.filename)&&(null==r?void 0:r.isCloseIcon)&&n.createElement("div",{className:"ribbonComponent_CloseIcon",onClick:()=>k()},n.createElement("img",{src:null===(f=null==r?void 0:r.closeIcon)||void 0===f?void 0:f.filename}))),(null===(g=null==r?void 0:r.closeIcon)||void 0===g?void 0:g.filename)&&(null==r?void 0:r.isCloseIcon)&&n.createElement("div",{className:"ribbonComponent_CloseIcon1",onClick:()=>k()},n.createElement("img",{src:null===(x=null==r?void 0:r.closeIcon)||void 0===x?void 0:x.filename}))))))};export{u as RibbonComponent};
1
+ import n,{useState as e,useEffect as r}from"react";import{render as o}from"storyblok-rich-text-react-renderer-ts";function t(n,e){void 0===e&&(e={});var r=e.insertAt;if(n&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===r&&o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.styleSheet?t.styleSheet.cssText=n:t.appendChild(document.createTextNode(n))}}t(".ribbonComponent_Wrapper{\r\n width: 100%;\r\n}\r\n.ribbonComponent_Card {\r\n display: flex;\r\n align-items: center;\r\n padding:16px 0;\r\n}\r\n.ribbonComponent_DarkText{\r\n color: #FFF !important;\r\n}\r\n.ribbonComponent_DarkDescription a {\r\ncolor: #FFF;\r\n}\r\n.ribbonComponent_Image {\r\n margin-top: 5px;\r\n margin-right: 8px;\r\n}\r\n.ribbonComponent_Icon {\r\n height: 24px;\r\n width: 24px;\r\n}\r\n.ribbonComponent_TextContainer {\r\n margin: 8px 0;\r\n font-size: 16px;\r\n line-height: 24px;\r\n}\r\n.ribbonComponent_Title {\r\n font-weight: 700;\r\n}\r\n.ribbonComponent_Description {\r\n font-weight: 400;\r\n}\r\n.ribbonComponent_CloseIcon {\r\n margin-right: 16px;\r\n}\r\n.ribbonComponent_HrBreaker {\r\n width: 1px;\r\n height: 32px;\r\n margin-left: 8px;\r\n margin-right: 8px;\r\n border-radius: 1px;\r\n opacity: 0.2;\r\n flex-shrink: 0;\r\n background: #3D3935;\r\n}\r\n.ribbonComponent_OnlyTimer{\r\n width:30px;\r\n}\r\n.ribbonComponent_Button{\r\n text-wrap:nowrap;\r\n}\r\n.falcon-button-defaults {\r\n border-radius: 28px;\r\n cursor: pointer;\r\n display: inline-block;\r\n font-size: 16px;\r\n line-height: 24px;\r\n font-weight: 700;\r\n padding: 10px 24px;\r\n text-decoration: none;\r\n}\r\n.ribbonComponent_phoneIcon {\r\n background-size: contain;\r\n display: inline-flex;\r\n height: 24px;\r\n margin: 0 8px 0 10px;\r\n width: 24px;\r\n}\r\n.ribbonComponent_ButtonSection {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n}\r\n.ribbonComponent_descriptionBlockSection {\r\n display: flex;\r\n}\r\n/* Mobile only viewport */\r\n@media all and (max-width: 767px) {\r\n .falcon-primary-button-v1-JC:visited {\r\n background-color: #e97f77;\r\n }\r\n .ribbonComponent_Card {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n margin-left: 16px;\r\n }\r\n .ribbonComponent_CloseIcon1{\r\n margin-right: 0;\r\n position: absolute;\r\n right: 16px;\r\n margin-top: 16px;\r\n }\r\n .ribbonComponent_ButtonSection {\r\n display: flex;\r\n align-items: flex-start;\r\n flex-direction: column;\r\n padding-bottom: 16px;\r\n padding-top: 8px;\r\n margin-left: 32px;\r\n }\r\n .ribbonComponent_descriptionBlockSection {\r\n padding-top:16px;\r\n padding-right: 78px;\r\n margin-left: 16px;\r\n }\r\n .ribbonComponent_Timer{\r\n margin-left: 8px;\r\n padding-bottom: 8px;\r\n }\r\n .ribbonComponent_Button{\r\n margin-left: 8px;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n display: none;\r\n }\r\n}\r\n/* Mobile and tablet viewport */\r\n@media all and (max-width: 1023px) {\r\n .ribbonComponent_HrBreaker {\r\n display: none;\r\n }\r\n .ribbonComponent_Button {\r\n padding-bottom: 16px;\r\n }\r\n}\r\n\r\n/* Tablet only viewport */\r\n@media all and (min-width: 768px) and (max-width: 1023px) {\r\n .ribbonComponent_Card{\r\n justify-content: space-between;\r\n }\r\n .ribbonComponent_ButtonSection {\r\n display: flex;\r\n flex-direction: column;\r\n padding-right: 90px;\r\n padding-left:70px;\r\n margin: 6px 0 0 0;\r\n align-items: flex-end;\r\n }\r\n .ribbonComponent_Button{\r\n margin: 8px 0;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n display: none;\r\n }\r\n .ribbonComponent_CloseIcon1{\r\n margin-right: 0;\r\n position: absolute;\r\n right: 40px;\r\n padding-left: 16px;\r\n }\r\n .ribbonComponent_descriptionBlockSection{\r\n margin-left:40px;\r\n }\r\n}\r\n\r\n/* Desktop only viewport */\r\n@media (min-width: 1024px) {\r\n .ribbonComponent_Card{\r\n justify-content: space-between;\r\n margin-left:0;\r\n }\r\n .ribbonComponent_Button{\r\n margin: 0 16px;\r\n text-wrap:nowrap;\r\n }\r\n .ribbonComponent_descriptionBlockSection{\r\n margin:0 42px;\r\n }\r\n .ribbonComponent_ButtonSection{\r\n padding-left: 60px;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n margin-right: 42px;\r\n }\r\n .ribbonComponent_CloseIcon1{\r\n display: none;\r\n }\r\n}\r\n@media (min-width: 1440px){\r\n .ribbonComponent_Card{\r\n max-width: 1440px;\r\n margin: auto;\r\n }\r\n .ribbonComponent_descriptionBlockSection{\r\n margin:0 72px;\r\n }\r\n .ribbonComponent_CloseIcon{\r\n margin-right: 72px;\r\n }\r\n .ribbonComponent_ButtonSection{\r\n padding-left: 80px;\r\n }\r\n .ribbonComponent_OnlyTimer{\r\n width:60px;\r\n } \r\n}\r\n\r\n.falcon-primary-button-v1 > .falcon-button-defaults {\r\n background-color: #da291c;\r\n color: #ffffff;\r\n}\r\n.falcon-primary-button-v1:hover {\r\n background-color: #961c13;\r\n}\r\n.falcon-primary-button-v1:visited {\r\n background-color: #c7355f;\r\n}\r\n.falcon-primary-button-v1:disabled {\r\n background-color: #e6e3df;\r\n color: #b3aeaa;\r\n cursor: default;\r\n}\r\n\r\n.falcon-primary-button-v1-JC > .falcon-button-defaults {\r\n background-color: #ffffff;\r\n color: #da291c;\r\n}\r\n.falcon-primary-button-v1-JC:hover {\r\n background-color: #e97f77;\r\n color: #ffffff;\r\n}\r\n.falcon-primary-button-v1-JC:visited {\r\n background-color: #961c13;\r\n color: #ffffff;\r\n}\r\n.falcon-primary-button-v1-JC:disabled {\r\n background-color: #e6e3df;\r\n color: #b3aeaa;\r\n cursor: default;\r\n}\r\n.falcon-secondary-button-v1 > .falcon-button-defaults {\r\n background-color: transparent;\r\n border: 2px solid #da291c;\r\n color: #da291c;\r\n}\r\n.falcon-secondary-button-v1:hover {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n.falcon-secondary-button-v1:visited {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n.falcon-secondary-button-v1:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v1-JC > .falcon-button-defaults {\r\n background-color: transparent;\r\n border: 2px solid #da291c;\r\n color: #ffffff;\r\n}\r\n.falcon-secondary-button-v1-JC:hover {\r\n border-color: #f1571d;\r\n}\r\n.falcon-secondary-button-v1-JC:visited {\r\n border-color: #c7355f;\r\n}\r\n.falcon-secondary-button-v1-JC:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n.falcon-secondary-button-v4 > .falcon-button-defaults {\r\n background-color: transparent;\r\n padding-left: 0;\r\n padding-right: 0;\r\n color: #da291c;\r\n}\r\n.falcon-secondary-button-v4:hover {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n.falcon-secondary-button-v4:visited {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n.falcon-secondary-button-v4:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v4-JC > .falcon-button-defaults {\r\n background-color: transparent;\r\n padding: 0;\r\n color: #ffffff;\r\n}\r\n.falcon-secondary-button-v4-JC:hover {\r\n border-color: #c7355f;\r\n color: #c7355f;\r\n}\r\n.falcon-secondary-button-v4-JC:visited {\r\n border-color: #961c13;\r\n color: #961c13;\r\n}\r\n.falcon-secondary-button-v4-JC:disabled {\r\n border-color: #e6e3df;\r\n color: #b3aeaa;\r\n}\r\n\r\n.falcon-secondary-button-v5 > .falcon-button-defaults {\r\n background-color: transparent;\r\n padding: 0;\r\n color: #3d3935;\r\n font-weight: 400;\r\n}\r\n.falcon-secondary-button-v5 > div {\r\n text-decoration-line: underline;\r\n}\r\n\r\n.falcon-secondary-button-dark > .falcon-button-defaults {\r\n background-color: transparent;\r\n color: #3d3935;\r\n border: 2px solid #3d3935;\r\n}\r\n.falcon-primary-dark-button {\r\n background: #5f5955;\r\n padding: 10px 24px;\r\n box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);\r\n border-radius: 28px 0px 0px 28px;\r\n}\r\n.falcon-primary-dark-button:hover {\r\n background: #86807c;\r\n box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);\r\n}\r\n.falcon-primary-dark-button:visited {\r\n background: #86807c;\r\n box-sizing: border-box;\r\n box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);\r\n padding: 8px 22px;\r\n border: 2px solid #5f5955;\r\n}\r\n");const l=e=>n.createElement("div",null,o(e.content,{markResolvers:{link:(r,o)=>{const{href:t,target:l,linktype:i}=o;return"email"===i?n.createElement("a",{href:`mailto:${t}`,target:null===l||"_self"===l?"_top":"_blank"},r):e.isIFrame?n.createElement("a",{href:t,target:null===l||"_self"===l?"_top":"_blank"},r):n.createElement("a",{href:t,target:null===l?"":l,onClick:()=>{return n=r,void("function"==typeof(null==e?void 0:e.callBack)&&(null==e||e.callBack(n)));var n}},r)}}}));t("/* Mobile only viewport */\r\n@media all and (max-width: 767px) {\r\n .timer-wrap {\r\n text-align: center !important;\r\n margin-left: 0 !important;\r\n margin-right: 0 !important;\r\n }\r\n .timer-container {\r\n min-width: 260px;\r\n }\r\n .timer-message {\r\n margin-bottom: 10px;\r\n }\r\n .timer-section {\r\n justify-content: center;\r\n margin-top: 4px;\r\n margin-left: unset !important;\r\n margin-right: unset !important;\r\n }\r\n}\r\n/* Mobile and tablet viewport */\r\n@media all and (max-width: 1023px) {\r\n .timer-message {\r\n margin-top: unset;\r\n }\r\n}\r\n\r\n/* Tablet only viewport */\r\n@media all and (min-width: 768px) and (max-width: 1023px) {\r\n .timer-section {\r\n margin-top: unset;\r\n }\r\n}\r\n\r\n.timer-container {\r\n color: black;\r\n display: inline-block;\r\n max-width: 100%;\r\n min-width: 242px;\r\n /* padding-top: 10px; */\r\n}\r\n.colon {\r\n font-weight: 700;\r\n font-size: 28px;\r\n line-height: 36px;\r\n}\r\n\r\n.timer-section {\r\n display: flex;\r\n /* margin-top: 12px; */\r\n padding: 8px 0;\r\n}\r\n.timer-element {\r\n display: inline-block;\r\n min-width: 42px;\r\n padding: 0 6px;\r\n text-align: center;\r\n}\r\n.timer-value {\r\n font-weight: 700;\r\n font-size: 32px;\r\n line-height: 36px;\r\n}\r\n.timer-label {\r\n font-weight: 400;\r\n font-size: 12px;\r\n line-height: 16px;\r\n}\r\n.transparent-element:first-child {\r\n padding-left: 0;\r\n}\r\n");const i=n=>{switch(n){case"Primary-V1":return"falcon-primary-button-v1";case"Secondary-V1":return"falcon-secondary-button-v1";case"Secondary-V4":return"falcon-secondary-button-v4";case"Secondary-Dark":return"falcon-secondary-button-dark";case"Primary-Dark-V1":return"falcon-primary-dark-button";case"Secondary-V5":return"falcon-secondary-button-v5";default:return""}},a=n=>{let e=new Date(n);return e=((n,e,r,o,t,l,i)=>{const a=new Date(Date.UTC(e,r,o,t,l,i)),d=new Date(a.toLocaleString("en-US",{timeZone:"Europe/Vienna"})),c=new Date(a.toLocaleString("en-US",{timeZone:n})),m=d.getTime()-c.getTime();return a.setTime(a.getTime()+m),a})("Europe/Vienna",e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds()),e},d="center",c="left",m="transparent",s="00",u=({content:e})=>{var r;return n.createElement("div",{className:"container",style:{justifyContent:e.timerAlignment===d?"center":e.timerAlignment===c?"left":"right"}},n.createElement("div",{className:"timer-section",style:{color:e.timerColor,backgroundColor:e.backgroundColor,marginLeft:e.backgroundColor===m&&e.timerAlignment===c?"-9px":"unset",marginRight:e.backgroundColor===m&&"right"===e.timerAlignment?"-24px":"unset"}},n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",s," "),n.createElement("div",{className:"timer-label"},e.dayLabel)),n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",s," "),n.createElement("div",{className:"timer-label"},e.hourLabel)),n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",s," "),n.createElement("div",{className:"timer-label"},e.minuteLabel)),n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",s),n.createElement("div",{className:"timer-label"},e.secondLabel))),n.createElement("div",{className:"timer-message",style:{color:null===(r=e.expiryLabelColor)||void 0===r?void 0:r.color}},e.expiryLabel))},b=({content:o})=>{var t,l,i,m,s,b,p,v;const f=a(new Date(null===(t=null==o?void 0:o.endTime)||void 0===t?void 0:t.replace(/-/g,"/"))),g=a(new Date(null===(l=null==o?void 0:o.startTime)||void 0===l?void 0:l.replace(/-/g,"/"))),x=(null==o?void 0:o.colorChangeTime)&&a(new Date(null===(i=null==o?void 0:o.colorChangeTime)||void 0===i?void 0:i.replace(/-/g,"/"))),[C,h]=e(!1),[y,k]=e(null!==(m=null==o?void 0:o.timerColor)&&void 0!==m?m:""),[_,E]=e(!1),w=()=>{const n=new Date;x&&!_&&n.getTime()>x.getTime()&&(k("#da291c"),E(!0)),n.getTime()>=g.getTime()&&!C&&h(!0);const e=f.getTime()-n.getTime();if(e>0&&C){return{days:("0"+Math.floor(e/864e5)).slice(-2),hours:("0"+Math.floor(e/36e5%24)).slice(-2),mins:("0"+Math.floor(e/1e3/60%60)).slice(-2),sec:("0"+Math.floor(e/1e3%60)).slice(-2)}}return null},N={timerColor:y,backgroundColor:null==o?void 0:o.backgroundColor,expiryLabel:o.expiryLabel,timerAlignment:o.timerAlignment,dayLabel:o.dayLabel,hourLabel:o.hourLabel,minuteLabel:o.minuteLabel,secondLabel:o.secondLabel,expiryLabelColor:o.expiryLabelColor},[T,I]=e(w());r((()=>{I(w());const n=setInterval((()=>{I(w())}),1e3);return()=>{clearInterval(n)}}));const D=[{label:null!==(s=null==o?void 0:o.hourLabel)&&void 0!==s?s:"",value:null==T?void 0:T.hours},{label:null!==(b=null==o?void 0:o.minuteLabel)&&void 0!==b?b:"",value:null==T?void 0:T.mins},{label:null!==(p=null==o?void 0:o.secondLabel)&&void 0!==p?p:"",value:null==T?void 0:T.sec}];return n.createElement("div",{className:"timer-wrap",style:{textAlign:o.timerAlignment===d?"center":o.timerAlignment===c?"left":"right"}},C&&n.createElement("div",{className:"timer-container"},T?n.createElement("div",{className:"timer-section",style:{color:(null==o?void 0:o.isDarkMode)?"#FFF":y,backgroundColor:null!==(v=null==o?void 0:o.backgroundColor)&&void 0!==v?v:"transparent"}},n.createElement("div",{className:" timer-element transparent-element"},n.createElement("div",{className:"timer-value"}," ",null==T?void 0:T.days),n.createElement("div",{className:"timer-label"},o.dayLabel)),D.map((e=>n.createElement(n.Fragment,null,n.createElement("div",{className:"colon"},":"),n.createElement("div",{className:"timer-element"},n.createElement("div",{className:"timer-value"}," ",e.value),n.createElement("div",{className:"timer-label"},e.label)))))):n.createElement(u,{content:N})))},p=({content:o})=>{var t,d,c,m,s,u,p,v,f,g,x,C,h,y,k,_,E,w,N,T,I,D,B,L,M,S;const[F,J]=e(!1),A=new Date,[z,V]=e(null==o?void 0:o.teaserTimer[0]);r((()=>{var n;if(null===(n=null==o?void 0:o.teaserTimer[0])||void 0===n?void 0:n.startTime){const n=null==o?void 0:o.teaserTimer[0];n.isDarkMode=null==o?void 0:o.enableDarkMode,V(n)}}),[]);const j=a(new Date(null===(d=null===(t=null==o?void 0:o.teaserTimer[0])||void 0===t?void 0:t.endTime)||void 0===d?void 0:d.replace(/-/g,"/"))),H=a(new Date(null===(m=null===(c=null==o?void 0:o.teaserTimer[0])||void 0===c?void 0:c.startTime)||void 0===m?void 0:m.replace(/-/g,"/"))),O=((null==o?void 0:o.enableDarkMode)?"ribbonComponent_DarkText ":"")+"ribbonComponent_Card",U=((null==o?void 0:o.enableDarkMode)?"ribbonComponent_DarkDescription ":"")+"ribbonComponent_TextContainer",[P,R]=e(!1);r((()=>{$(W()),A.getTime()>=H.getTime()&&!P&&R(!0);const n=setInterval((()=>{$(W())}),1e3);return()=>{clearInterval(n)}}));const W=()=>{const n=j.getTime()-A.getTime();if(n>0&&P){return{days:("0"+Math.floor(n/864e5)).slice(-2),hours:("0"+Math.floor(n/36e5%24)).slice(-2),mins:("0"+Math.floor(n/1e3/60%60)).slice(-2),sec:("0"+Math.floor(n/1e3%60)).slice(-2)}}return null},[Z,$]=e(W()),Y=()=>{!1===F&&J(!0)};return n.createElement(n.Fragment,null,!1===F&&(void 0===(null===(s=null==o?void 0:o.teaserTimer[0])||void 0===s?void 0:s.startTime)&&null===Z||void 0!==(null===(u=null==o?void 0:o.teaserTimer[0])||void 0===u?void 0:u.startTime)&&null!==Z)&&n.createElement(n.Fragment,null,n.createElement("div",{className:"ribbonComponent_Wrapper",style:{background:null==o?void 0:o.backgroundColor}},n.createElement("div",{className:O},n.createElement("div",{className:"ribbonComponent_descriptionBlockSection"},(null===(p=null==o?void 0:o.icon)||void 0===p?void 0:p.filename)&&n.createElement("div",{className:"ribbonComponent_Image"},n.createElement("img",{className:"ribbonComponent_Icon",src:(null==o?void 0:o.enableDarkMode)?null===(v=null==o?void 0:o.darkModeIcon)||void 0===v?void 0:v.filename:null===(f=null==o?void 0:o.icon)||void 0===f?void 0:f.filename})),(null==o?void 0:o.description)&&n.createElement("div",{className:U},n.createElement(l,{content:null==o?void 0:o.description}),n.createElement("div",null))),n.createElement("div",{className:"ribbonComponent_ButtonSection"},(null===(g=null==o?void 0:o.teaserTimer[0])||void 0===g?void 0:g.startTime)&&n.createElement(n.Fragment,null,n.createElement("div",{className:"ribbonComponent_Timer"},n.createElement(b,{content:z})),(null==o?void 0:o.buttonText)||(null==o?void 0:o.hotlineNumber)?n.createElement("div",{className:"ribbonComponent_HrBreaker"}):n.createElement("div",{className:"ribbonComponent_OnlyTimer"})),((null==o?void 0:o.buttonText)&&(null===(x=null==o?void 0:o.link)||void 0===x?void 0:x.url)||(null==o?void 0:o.hotlineNumber)&&(null===(C=null==o?void 0:o.buttonIcon)||void 0===C?void 0:C.filename))&&n.createElement("div",{className:"ribbonComponent_Button"},n.createElement("a",{href:(null==o?void 0:o.hotlineNumber)?`tel:${(null==o?void 0:o.hotlineNumber)||0}`:null===(h=null==o?void 0:o.link)||void 0===h?void 0:h.url,target:null!==(y=null==o?void 0:o.target)&&void 0!==y?y:"",rel:"_blank"===(null==o?void 0:o.target)?"opener":"noopener"},n.createElement("div",{className:i(null==o?void 0:o.buttonType)},(null==o?void 0:o.hotlineNumber)&&"left"===(null==o?void 0:o.iconAlign)&&n.createElement("img",{className:"ribbonComponent_phoneIcon",src:null===(k=null==o?void 0:o.buttonIcon)||void 0===k?void 0:k.filename}),(null==o?void 0:o.hotlineNumber)?null==o?void 0:o.hotlineNumber:null==o?void 0:o.buttonText,(null==o?void 0:o.hotlineNumber)&&"right"===(null==o?void 0:o.iconAlign)&&n.createElement("img",{className:"ribbonComponent_phoneIcon",src:null===(_=null==o?void 0:o.buttonIcon)||void 0===_?void 0:_.filename})))),(null===(E=null==o?void 0:o.closeIcon)||void 0===E?void 0:E.filename)&&(null==o?void 0:o.isCloseIcon)&&n.createElement("div",{className:"ribbonComponent_CloseIcon",onClick:()=>Y()},n.createElement("img",{src:(null==o?void 0:o.enableDarkMode)?null!==(N=null===(w=null==o?void 0:o.darkModeCloseIcon)||void 0===w?void 0:w.filename)&&void 0!==N?N:null===(T=null==o?void 0:o.closeIcon)||void 0===T?void 0:T.filename:null===(I=null==o?void 0:o.closeIcon)||void 0===I?void 0:I.filename}))),(null===(D=null==o?void 0:o.closeIcon)||void 0===D?void 0:D.filename)&&(null==o?void 0:o.isCloseIcon)&&n.createElement("div",{className:"ribbonComponent_CloseIcon1",onClick:()=>Y()},n.createElement("img",{src:(null==o?void 0:o.enableDarkMode)?null!==(L=null===(B=null==o?void 0:o.darkModeCloseIcon)||void 0===B?void 0:B.filename)&&void 0!==L?L:null===(M=null==o?void 0:o.closeIcon)||void 0===M?void 0:M.filename:null===(S=null==o?void 0:o.closeIcon)||void 0===S?void 0:S.filename}))))))};export{p as RibbonComponent};
2
2
  //# sourceMappingURL=index.js.map
package/dist/index.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import { FC } from 'react';
3
- import Richtext from 'storyblok-js-client';
4
3
 
5
4
  declare interface NativeColorPicker {
6
5
  color: string;
@@ -23,6 +22,7 @@ interface TimerSchema {
23
22
  mainHeading: string;
24
23
  expiryLabelColor: NativeColorPicker;
25
24
  enableCounter: boolean;
25
+ isDarkMode?: boolean;
26
26
  }
27
27
 
28
28
  declare interface RibbonComponentInterface {
@@ -34,12 +34,14 @@ interface RibbonComponentSchema {
34
34
  buttonText: string;
35
35
  buttonType: string;
36
36
  closeIcon: Asset;
37
+ darkModeCloseIcon: Asset;
37
38
  deviceLimit: string;
38
- description: Richtext;
39
+ description: Array<object>;
39
40
  enableDarkMode: boolean;
40
41
  target: string;
41
42
  hotlineNumber: string;
42
43
  icon: Asset;
44
+ darkModeIcon: Asset;
43
45
  iconAlign: string;
44
46
  isCloseIcon: boolean;
45
47
  link: MultiLink;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sunrise-upc/sales-static-components",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
4
  "description": "Static Reusable Components Library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -52,13 +52,11 @@
52
52
  "typescript": "^4.9.4",
53
53
  "postcss": "8.4.21",
54
54
  "react": "^17.0.2",
55
- "react-dom": "^17.0.2",
56
- "axios": "^0.27.2"
55
+ "react-dom": "^17.0.2"
57
56
  },
58
57
  "peerDependencies": {
59
58
  "react": "^17.0.2",
60
59
  "react-dom": "^17.0.2",
61
- "storyblok-js-client": "^4.1.3",
62
60
  "storyblok-rich-text-react-renderer-ts": "^3.1.3"
63
61
  }
64
62
  }
@@ -1,2 +0,0 @@
1
- declare const calculateDateTime: (dateObj: Date) => Date;
2
- export default calculateDateTime;
@@ -1,2 +0,0 @@
1
- declare const dateWithTimeZone: (timeZone: string, year: number, month: number, day: number, hour: number, minute: number, second: number) => Date;
2
- export default dateWithTimeZone;
@@ -1,2 +0,0 @@
1
- declare const calculateDateTime: (dateObj: Date) => Date;
2
- export default calculateDateTime;
@@ -1,2 +0,0 @@
1
- declare const dateWithTimeZone: (timeZone: string, year: number, month: number, day: number, hour: number, minute: number, second: number) => Date;
2
- export default dateWithTimeZone;