@sunrise-upc/sales-static-components 0.0.1

package/README.md

@@ -0,0 +1,9 @@
+# README #
+# Static Reusable Components Library
+This codebase is for the Static Reusable Components.
+
+# Static Reusable Components List
+# Ribbon Component 
+     <!---
+     Confluence Design Document to be added
+    -->

package/dist/cjs/components/Constants.d.ts

@@ -0,0 +1,10 @@
+export declare const CENTER = "center";
+export declare const LEFT = "left";
+export declare const RIGHT = "right";
+export declare const TRANSPARENT = "transparent";
+export declare const ZEROES = "00";
+export declare const PRIMARYCOLORS = "#da291c";
+export declare const FALCONBUTTONCLICKED = "clicked";
+export declare const AFTER = "after";
+export declare const BEFORE = "before";
+export declare const LANG = "lang";

package/dist/cjs/components/RibbonComponent/RibbonComponent.d.ts

@@ -0,0 +1,5 @@
+import { FC } from "react";
+import "./RibbonComponentStyles.css";
+import { RibbonComponentInterface } from "./RibbonComponent.types";
+declare const RibbonComponent: FC<RibbonComponentInterface>;
+export default RibbonComponent;

package/dist/cjs/components/RibbonComponent/RibbonComponent.types.d.ts

@@ -0,0 +1,40 @@
+import { TimerSchema } from "./RibbonComponentTimer/RibbonComponentTimer";
+import Richtext from 'storyblok-js-client';
+export declare interface RibbonComponentInterface {
+    content: RibbonComponentSchema;
+}
+interface RibbonComponentSchema {
+    backgroundColor: string;
+    buttonIcon: Asset;
+    buttonText: string;
+    buttonType: string;
+    closeIcon: Asset;
+    deviceLimit: string;
+    description: Richtext;
+    enableDarkMode: boolean;
+    target: string;
+    hotlineNumber: string;
+    icon: Asset;
+    iconAlign: string;
+    isCloseIcon: boolean;
+    link: MultiLink;
+    teaserTimer: TimerSchema[];
+}
+interface MultiLink {
+    id: string;
+    url: string;
+    linktype: 'url' | 'story';
+    fieldtype: 'multilink';
+    cached_url: string;
+}
+interface Asset {
+    id: number;
+    alt?: string;
+    name: string;
+    focus?: string;
+    title?: string;
+    filename: string;
+    copyright?: string;
+    fieldtype: 'asset';
+}
+export {};

package/dist/cjs/components/RibbonComponent/RibbonComponentTimer/RibbonComponentExpiredTimer.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import './RibbonComponentTimerStyles.css';
+import { NativeColorPicker } from './RibbonComponentTimer.types';
+interface RibbonComponentExpiredTimerSchema {
+    timerColor: string;
+    backgroundColor: string;
+    expiryLabel: string;
+    timerAlignment: string;
+    dayLabel: string;
+    hourLabel: string;
+    minuteLabel: string;
+    secondLabel: string;
+    expiryLabelColor: NativeColorPicker;
+}
+interface Expiry {
+    content: RibbonComponentExpiredTimerSchema;
+}
+declare const RibbonComponentExpiredTimer: ({ content }: Expiry) => JSX.Element;
+export default RibbonComponentExpiredTimer;

package/dist/cjs/components/RibbonComponent/RibbonComponentTimer/RibbonComponentTimer.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import "./RibbonComponentTimerStyles.css";
+import { NativeColorPicker } from "./RibbonComponentTimer.types";
+export interface TimerSchema {
+    startTime: string;
+    endTime: string;
+    colorChangeTime?: string;
+    expiryLabel: string;
+    timerColor?: string;
+    backgroundColor: string;
+    timerAlignment: string;
+    dayLabel: string;
+    hourLabel: string;
+    minuteLabel: string;
+    secondLabel: string;
+    mainHeading: string;
+    expiryLabelColor: NativeColorPicker;
+    enableCounter: boolean;
+}
+interface Timer {
+    content: TimerSchema;
+}
+declare const RibbonComponentTimer: ({ content }: Timer) => JSX.Element;
+export default RibbonComponentTimer;

package/dist/cjs/components/RibbonComponent/RibbonComponentTimer/RibbonComponentTimer.types.d.ts

@@ -0,0 +1,5 @@
+export declare interface NativeColorPicker {
+    color: string;
+    plugin: string;
+    _uid: string;
+}

package/dist/cjs/components/RibbonComponent/RibbonComponentTimer/calculateTime.d.ts

@@ -0,0 +1,2 @@
+declare const calculateDateTime: (dateObj: Date) => Date;
+export default calculateDateTime;

package/dist/cjs/components/RibbonComponent/RibbonComponentTimer/timezone.d.ts

@@ -0,0 +1,2 @@
+declare const dateWithTimeZone: (timeZone: string, year: number, month: number, day: number, hour: number, minute: number, second: number) => Date;
+export default dateWithTimeZone;

package/dist/cjs/components/RibbonComponent/index.d.ts

@@ -0,0 +1 @@
+export { default } from './RibbonComponent';

package/dist/cjs/components/RibbonComponent/utils.d.ts

@@ -0,0 +1 @@
+export declare const getFalconButtonClass: (type: string) => string;

package/dist/cjs/components/RichText/RichText.types.d.ts

@@ -0,0 +1,8 @@
+export type LinkTarget = '_self' | '_blank' | null;
+export type LinkType = 'url' | 'story' | 'asset' | 'email';
+export declare interface LinkAttributes {
+    href: string;
+    uuid: string | null;
+    target: LinkTarget;
+    linktype: LinkType;
+}

package/dist/cjs/components/RichText/richText.d.ts

@@ -0,0 +1,9 @@
+import Richtext from 'storyblok-js-client';
+import React from 'react';
+export interface richText {
+    content: Richtext;
+    isIFrame?: boolean;
+    callBack?: (e: any) => void | undefined;
+}
+declare const RichTextComponent: React.FunctionComponent<richText>;
+export default RichTextComponent;

package/dist/cjs/components/index.d.ts

@@ -0,0 +1 @@
+export { default as RibbonComponent } from './RibbonComponent';

package/dist/cjs/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/cjs/index.js

@@ -0,0 +1,2 @@
+"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}))))))};
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/esm/components/Constants.d.ts

@@ -0,0 +1,10 @@
+export declare const CENTER = "center";
+export declare const LEFT = "left";
+export declare const RIGHT = "right";
+export declare const TRANSPARENT = "transparent";
+export declare const ZEROES = "00";
+export declare const PRIMARYCOLORS = "#da291c";
+export declare const FALCONBUTTONCLICKED = "clicked";
+export declare const AFTER = "after";
+export declare const BEFORE = "before";
+export declare const LANG = "lang";

package/dist/esm/components/RibbonComponent/RibbonComponent.d.ts

@@ -0,0 +1,5 @@
+import { FC } from "react";
+import "./RibbonComponentStyles.css";
+import { RibbonComponentInterface } from "./RibbonComponent.types";
+declare const RibbonComponent: FC<RibbonComponentInterface>;
+export default RibbonComponent;

package/dist/esm/components/RibbonComponent/RibbonComponent.types.d.ts

@@ -0,0 +1,40 @@
+import { TimerSchema } from "./RibbonComponentTimer/RibbonComponentTimer";
+import Richtext from 'storyblok-js-client';
+export declare interface RibbonComponentInterface {
+    content: RibbonComponentSchema;
+}
+interface RibbonComponentSchema {
+    backgroundColor: string;
+    buttonIcon: Asset;
+    buttonText: string;
+    buttonType: string;
+    closeIcon: Asset;
+    deviceLimit: string;
+    description: Richtext;
+    enableDarkMode: boolean;
+    target: string;
+    hotlineNumber: string;
+    icon: Asset;
+    iconAlign: string;
+    isCloseIcon: boolean;
+    link: MultiLink;
+    teaserTimer: TimerSchema[];
+}
+interface MultiLink {
+    id: string;
+    url: string;
+    linktype: 'url' | 'story';
+    fieldtype: 'multilink';
+    cached_url: string;
+}
+interface Asset {
+    id: number;
+    alt?: string;
+    name: string;
+    focus?: string;
+    title?: string;
+    filename: string;
+    copyright?: string;
+    fieldtype: 'asset';
+}
+export {};

package/dist/esm/components/RibbonComponent/RibbonComponentTimer/RibbonComponentExpiredTimer.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import './RibbonComponentTimerStyles.css';
+import { NativeColorPicker } from './RibbonComponentTimer.types';
+interface RibbonComponentExpiredTimerSchema {
+    timerColor: string;
+    backgroundColor: string;
+    expiryLabel: string;
+    timerAlignment: string;
+    dayLabel: string;
+    hourLabel: string;
+    minuteLabel: string;
+    secondLabel: string;
+    expiryLabelColor: NativeColorPicker;
+}
+interface Expiry {
+    content: RibbonComponentExpiredTimerSchema;
+}
+declare const RibbonComponentExpiredTimer: ({ content }: Expiry) => JSX.Element;
+export default RibbonComponentExpiredTimer;

package/dist/esm/components/RibbonComponent/RibbonComponentTimer/RibbonComponentTimer.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import "./RibbonComponentTimerStyles.css";
+import { NativeColorPicker } from "./RibbonComponentTimer.types";
+export interface TimerSchema {
+    startTime: string;
+    endTime: string;
+    colorChangeTime?: string;
+    expiryLabel: string;
+    timerColor?: string;
+    backgroundColor: string;
+    timerAlignment: string;
+    dayLabel: string;
+    hourLabel: string;
+    minuteLabel: string;
+    secondLabel: string;
+    mainHeading: string;
+    expiryLabelColor: NativeColorPicker;
+    enableCounter: boolean;
+}
+interface Timer {
+    content: TimerSchema;
+}
+declare const RibbonComponentTimer: ({ content }: Timer) => JSX.Element;
+export default RibbonComponentTimer;

package/dist/esm/components/RibbonComponent/RibbonComponentTimer/RibbonComponentTimer.types.d.ts

@@ -0,0 +1,5 @@
+export declare interface NativeColorPicker {
+    color: string;
+    plugin: string;
+    _uid: string;
+}

package/dist/esm/components/RibbonComponent/RibbonComponentTimer/calculateTime.d.ts

@@ -0,0 +1,2 @@
+declare const calculateDateTime: (dateObj: Date) => Date;
+export default calculateDateTime;

package/dist/esm/components/RibbonComponent/RibbonComponentTimer/timezone.d.ts

@@ -0,0 +1,2 @@
+declare const dateWithTimeZone: (timeZone: string, year: number, month: number, day: number, hour: number, minute: number, second: number) => Date;
+export default dateWithTimeZone;

package/dist/esm/components/RibbonComponent/index.d.ts

@@ -0,0 +1 @@
+export { default } from './RibbonComponent';

package/dist/esm/components/RibbonComponent/utils.d.ts

@@ -0,0 +1 @@
+export declare const getFalconButtonClass: (type: string) => string;

package/dist/esm/components/RichText/RichText.types.d.ts

@@ -0,0 +1,8 @@
+export type LinkTarget = '_self' | '_blank' | null;
+export type LinkType = 'url' | 'story' | 'asset' | 'email';
+export declare interface LinkAttributes {
+    href: string;
+    uuid: string | null;
+    target: LinkTarget;
+    linktype: LinkType;
+}

package/dist/esm/components/RichText/richText.d.ts

@@ -0,0 +1,9 @@
+import Richtext from 'storyblok-js-client';
+import React from 'react';
+export interface richText {
+    content: Richtext;
+    isIFrame?: boolean;
+    callBack?: (e: any) => void | undefined;
+}
+declare const RichTextComponent: React.FunctionComponent<richText>;
+export default RichTextComponent;

package/dist/esm/components/index.d.ts

@@ -0,0 +1 @@
+export { default as RibbonComponent } from './RibbonComponent';

package/dist/esm/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+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};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/index.d.ts

@@ -0,0 +1,68 @@
+/// <reference types="react" />
+import { FC } from 'react';
+import Richtext from 'storyblok-js-client';
+
+declare interface NativeColorPicker {
+    color: string;
+    plugin: string;
+    _uid: string;
+}
+
+interface TimerSchema {
+    startTime: string;
+    endTime: string;
+    colorChangeTime?: string;
+    expiryLabel: string;
+    timerColor?: string;
+    backgroundColor: string;
+    timerAlignment: string;
+    dayLabel: string;
+    hourLabel: string;
+    minuteLabel: string;
+    secondLabel: string;
+    mainHeading: string;
+    expiryLabelColor: NativeColorPicker;
+    enableCounter: boolean;
+}
+
+declare interface RibbonComponentInterface {
+    content: RibbonComponentSchema;
+}
+interface RibbonComponentSchema {
+    backgroundColor: string;
+    buttonIcon: Asset;
+    buttonText: string;
+    buttonType: string;
+    closeIcon: Asset;
+    deviceLimit: string;
+    description: Richtext;
+    enableDarkMode: boolean;
+    target: string;
+    hotlineNumber: string;
+    icon: Asset;
+    iconAlign: string;
+    isCloseIcon: boolean;
+    link: MultiLink;
+    teaserTimer: TimerSchema[];
+}
+interface MultiLink {
+    id: string;
+    url: string;
+    linktype: 'url' | 'story';
+    fieldtype: 'multilink';
+    cached_url: string;
+}
+interface Asset {
+    id: number;
+    alt?: string;
+    name: string;
+    focus?: string;
+    title?: string;
+    filename: string;
+    copyright?: string;
+    fieldtype: 'asset';
+}
+
+declare const RibbonComponent: FC<RibbonComponentInterface>;
+
+export { RibbonComponent };

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@sunrise-upc/sales-static-components",
+  "version": "0.0.1",
+  "description": "Static Reusable Components Library",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "typings": "dist/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "clean": "rimraf dist",
+    "build": "npm run clean && rollup -c",
+    "prepare": "npm run build",
+    "dev": "npm run clean && rollup -c -w",
+    "prepatch": "npm --no-git-tag-version version prepatch",
+    "release:major": "npm version major && npm publish --access public --tag latest",
+    "release:minor": "npm version minor && npm publish --access public --tag latest",
+    "release:patch": "npm version patch && npm publish --access public --tag latest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://Angles_Kathirvel@bitbucket.org/sunrisedigitalbusiness/sunrise-ch-b2c-sales-static-components.git"
+  },
+  "author": "Angles Kathirvel",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://bitbucket.org/sunrisedigitalbusiness/sunrise-ch-b2c-sales-static-components/issues"
+  },
+  "homepage": "https://bitbucket.org/sunrisedigitalbusiness/sunrise-ch-b2c-sales-static-components#readme",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-terser": "^0.2.1",
+    "@rollup/plugin-typescript": "^10.0.1",
+    "@sunrise-upc/ajax-lib": "1.0.1",
+    "@types/node": "^16.18.11",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "rimraf": "^3.0.2",
+    "rollup": "^3.9.1",
+    "rollup-plugin-dts": "^5.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-scss": "^3.0.0",
+    "sass": "^1.57.1",
+    "semver": "^7.3.8",
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.4",
+    "postcss": "8.4.21",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "storyblok-js-client": "^5.12.1",
+    "storyblok-rich-text-react-renderer-ts": "^3.2.0"
+  }
+}