@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.
- package/dist/cjs/components/RibbonComponent/RibbonComponent.types.d.ts +3 -2
- package/dist/cjs/components/RibbonComponent/RibbonComponentTimer/RibbonComponentTimer.d.ts +7 -0
- package/dist/cjs/components/RibbonComponent/utils.d.ts +2 -0
- package/dist/cjs/components/RichText/richText.d.ts +1 -2
- package/dist/cjs/index.js +1 -1
- package/dist/esm/components/RibbonComponent/RibbonComponent.types.d.ts +3 -2
- package/dist/esm/components/RibbonComponent/RibbonComponentTimer/RibbonComponentTimer.d.ts +7 -0
- package/dist/esm/components/RibbonComponent/utils.d.ts +2 -0
- package/dist/esm/components/RichText/richText.d.ts +1 -2
- package/dist/esm/index.js +1 -1
- package/dist/index.d.ts +4 -2
- package/package.json +2 -4
- package/dist/cjs/components/RibbonComponent/RibbonComponentTimer/calculateTime.d.ts +0 -2
- package/dist/cjs/components/RibbonComponent/RibbonComponentTimer/timezone.d.ts +0 -2
- package/dist/esm/components/RibbonComponent/RibbonComponentTimer/calculateTime.d.ts +0 -2
- package/dist/esm/components/RibbonComponent/RibbonComponentTimer/timezone.d.ts +0 -2
|
@@ -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:
|
|
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;
|
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:
|
|
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;
|
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:
|
|
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.
|
|
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
|
}
|