npm - freemium-ui - Versions diffs - 1.0.213 → 1.0.214 - Mend

freemium-ui 1.0.213 → 1.0.214

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.

Files changed (3) hide show

package/lib/index.cjs.js CHANGED Viewed

@@ -1470,7 +1470,7 @@ to {right : 10px}
 `,Mv=tt("button")`
   ${({theme:{colors:{components:{toggle:e}}},size:t,on:n,disabled:r})=>`\n  width: ${"sm"===t?"28px":"36px"};\n  height: ${"sm"===t?"12px":"16px"};\n  background-color: ${n?e.backgroundColorOn:e.backgroundColorOff};\n  border-radius: 34px;\n  position: relative;\n  border: none;\n  ${r?"opacity :  0.4 ;\n                cursor :  not-allowed; ":`&:hover {\n                  span {\n                    box-shadow: ${n?"rgba(44, 91, 197, 0.5)":"rgba(82, 84, 86, 0.4)"} 0px 0px 0px 3px;\n                  }\n                }`};\n\n  span {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all ease-in 0.2s;\n    bottom: -2px;\n    position: absolute;\n    border-radius: 50%;\n    background-color: #fff;\n    border: 1px solid ${e.borderColor};\n    ${"sm"===t?`left: ${n?"12px":"0px"};\n                width : 16px;\n                height : 16px;`:`left: ${n?"16px":"-2px"};\n                width : 20px;\n                height : 20px;`};\n  }\n`}
 `,xv=ot((e=>n.createElement(Mv,Object.assign({type:"button"},e,{onClick:t=>{t.detail&&e.handleChange()},onKeyPress:t=>{" "===t.key&&e.handleChange()}}),n.createElement("span",null,e.hasIcon?n.createElement(Vn,{glyph:e.on?"check":"close",size:"md"!==e.size?"7":"9",viewBox:e.on?"0 0 8 8":"0 0 7 7"}):null))),{on:!1,size:"md",disabled:!1,hasIcon:!0}),wv=n.createContext({toasts:[],toastHovering:!1,updateToasts:e=>e,updateToastHoverStatus:()=>{}}),Hv=()=>n.useContext(wv),Cv=()=>{const[e,n]=t.useState(!1);return t.useEffect((()=>{n(Boolean("undefined"!=typeof window&&window.document&&window.document.createElement))}),[]),{isBrowser:e,isServer:!e}},Vv=()=>Math.random().toString(32).slice(2,10),kv=e=>{const t=document.createElement("div");return t.setAttribute("id",e),t},Lv=tt.div`
-  ${({theme:e,reverseIndex:t,type:n,translate:r,bgColor:a,color:o})=>`\n    .outline {\n      border-radius: 5px 5px 0 0;\n      background-color: ${"success"===n?e.palette.jungle:"error"===n?e.palette.ferrari:"info"===n?e.palette.azure:e.palette.sunrise};\n      position: absolute;\n      top: -4px;\n      left: 0px;\n      width: 100%;\n      height: 4px;\n      border: none;\n    }\n\n    .close-button {\n      border: none;\n      cursor: pointer;\n      position: absolute;\n      right: 11px;\n      top: 9px;\n      background-color: inherit;\n      padding: 0;\n    }\n\n    .icon-wrapper {\n      position: relative;\n      top: 6px;\n    }\n    .toast-content {\n      display: flex;\n      align-items: center;\n    }\n\n  .toast {\n    width: 420px;\n    max-width: 90vw;\n    max-height: 75px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    color: ${e.palette.foreground};\n    background-color: ${a};\n    color: ${o};\n    border: 0;\n    border-radius: ${e.layout.radius};\n    padding: 12px ${e.layout.gap} 20px;\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    opacity: ${t>4?0:1};\n    box-shadow: ${t>4?"none":"0 5px 10px rgba(0, 0, 0, 0.11)"};\n    transform: translate3d(0, -100%, 0px) scale(1);\n    transition: transform 400ms ease 0ms, visibility 200ms ease 0ms, opacity 200ms ease 0ms;\n  }\n  .toast.visible {\n    opacity: 1;\n    transform: ${r};\n  }\n  .toast.hide {\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n  }\n  .message {\n    align-items: center;\n    height: 100%;\n    transition: opacity 0.4s ease;\n    font-size: 0.875rem;\n    display: -webkit-box;\n    word-break: break-all;\n    padding-right: ${e.layout.gapHalf};\n    overflow: hidden;\n    max-height: 100%;\n    text-overflow: ellipsis;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    line-height: 1.1rem;\n  }\n  .toast :global(button + button) {\n    margin-left: ${e.layout.gapQuarter};\n  }\n  \n  `}
+  ${({theme:e,reverseIndex:t,type:n,translate:r,bgColor:a,color:o})=>`\n    .outline {\n      border-radius: 5px 5px 0 0;\n      background-color: ${"success"===n?e.palette.jungle:"error"===n?e.palette.ferrari:"info"===n?e.palette.azure:e.palette.sunrise};\n      position: absolute;\n      top: -4px;\n      left: 0px;\n      width: 100%;\n      height: 4px;\n      border: none;\n    }\n\n    .close-button {\n      border: none;\n      cursor: pointer;\n      position: absolute;\n      right: 11px;\n      top: 9px;\n      background-color: inherit;\n      padding: 0;\n    }\n\n    .icon-wrapper {\n      position: relative;\n      top: 6px;\n    }\n    .toast-content {\n      display: flex;\n      align-items: center;\n    }\n\n  .toast {\n    width: 420px;\n    max-width: 90vw;\n    max-height: 75px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    color: ${e.palette.foreground};\n    background-color: ${a};\n    color: ${o};\n    border: 0;\n    border-radius: ${e.layout.radius};\n    padding: 12px ${e.layout.gap} 20px;\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    opacity: ${t>4?0:1};\n    box-shadow: ${t>4?"none":"0 5px 10px rgba(0, 0, 0, 0.11)"};\n    transform: translate3d(0, -100%, 0px) scale(1);\n    transition: transform 400ms ease 0ms, visibility 200ms ease 0ms, opacity 200ms ease 0ms;\n  }\n  .toast.visible {\n    opacity: 1;\n    transform: ${r};\n  }\n  .toast.hide {\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n  }\n  .message {\n    align-items: center;\n    height: 100%;\n    transition: opacity 0.4s ease;\n    font-size: 0.875rem;\n    display: -webkit-box;\n    word-break: break-word;\n    padding-right: ${e.layout.gapHalf};\n    overflow: hidden;\n    max-height: 100%;\n    text-overflow: ellipsis;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    line-height: 1.1rem;\n  }\n  .toast :global(button + button) {\n    margin-left: ${e.layout.gapQuarter};\n  }\n  \n  `}
 `,Ev=(e,t)=>e&&e.length?e.map(((e,r)=>n.createElement(po,{inline:!0,size:"mini",type:e.passive?"primary":"secondary",key:`action-${r}`,onClick:n=>((e,n)=>{n&&n(e,t)})(n,e.handler)},e.name))):null,Sv=n.memo((({index:e,total:r,toast:a,onHover:o})=>{const[c,i]=t.useState(!1),[s,l]=t.useState(!1),h=t.useMemo((()=>r-(e+1)),[r,e]),u=t.useMemo((()=>h>=4?`translate3d(0, -75px, -${h}px) scale(.7)`:o?`translate3d(0, ${75*h}px, -${h}px) scale(${1===r?1:.98205})`:`translate3d(0, calc(${`100% + -75px + ${20*h}px`}), -${h}px) scale(${1-.05*h})`),[o,e,r,h]);return t.useEffect((()=>{const e=setTimeout((()=>{i(!0),clearTimeout(e)}),10);return()=>clearTimeout(e)}),[]),t.useEffect((()=>{let e=!1;if(!(h>2||a.willBeDestroy)||e)return;const t=setTimeout((()=>{l(!0),clearTimeout(t)}),150);return()=>{e=!0,clearTimeout(t)}}),[h,a.willBeDestroy]),h>10?null:n.createElement(Lv,{color:"#222",bgColor:"#fff",type:a.type,translate:u,reverseIndex:h},n.createElement("div",{key:`${a.id}-${e}`,className:`toast ${c?"visible":""} ${s?"hide":""}`},n.createElement("div",{className:"outline"}),n.createElement("button",{className:"close-button",onClick:()=>a.cancel()},n.createElement(Vn,{glyph:"close",size:"10",viewBox:"0 0 7 7"})),n.createElement("div",{className:"toast-content"},n.createElement("div",{className:"icon-wrapper"},a.customIcon?a.customIcon:n.createElement(Vn,{glyph:`toast-${a.type}`,size:"32",viewBox:"-4 -5 32 32"})),n.createElement("div",null,n.createElement("div",{className:"message"},a.text),n.createElement("div",{className:"action"},Ev(a.actions,a.cancel))))))})),_v=tt.div`
   .toast-container {
     position: fixed;

package/lib/index.esm.js CHANGED Viewed

@@ -1470,7 +1470,7 @@ to {right : 10px}
 `,lf=Et("button")`
   ${({theme:{colors:{components:{toggle:e}}},size:t,on:n,disabled:r})=>`\n  width: ${"sm"===t?"28px":"36px"};\n  height: ${"sm"===t?"12px":"16px"};\n  background-color: ${n?e.backgroundColorOn:e.backgroundColorOff};\n  border-radius: 34px;\n  position: relative;\n  border: none;\n  ${r?"opacity :  0.4 ;\n                cursor :  not-allowed; ":`&:hover {\n                  span {\n                    box-shadow: ${n?"rgba(44, 91, 197, 0.5)":"rgba(82, 84, 86, 0.4)"} 0px 0px 0px 3px;\n                  }\n                }`};\n\n  span {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all ease-in 0.2s;\n    bottom: -2px;\n    position: absolute;\n    border-radius: 50%;\n    background-color: #fff;\n    border: 1px solid ${e.borderColor};\n    ${"sm"===t?`left: ${n?"12px":"0px"};\n                width : 16px;\n                height : 16px;`:`left: ${n?"16px":"-2px"};\n                width : 20px;\n                height : 20px;`};\n  }\n`}
 `,hf=Dt((t=>e.createElement(lf,Object.assign({type:"button"},t,{onClick:e=>{e.detail&&t.handleChange()},onKeyPress:e=>{" "===e.key&&t.handleChange()}}),e.createElement("span",null,t.hasIcon?e.createElement(er,{glyph:t.on?"check":"close",size:"md"!==t.size?"7":"9",viewBox:t.on?"0 0 8 8":"0 0 7 7"}):null))),{on:!1,size:"md",disabled:!1,hasIcon:!0}),pf=e.createContext({toasts:[],toastHovering:!1,updateToasts:e=>e,updateToastHoverStatus:()=>{}}),df=()=>e.useContext(pf),uf=()=>{const[e,t]=l(!1);return h((()=>{t(Boolean("undefined"!=typeof window&&window.document&&window.document.createElement))}),[]),{isBrowser:e,isServer:!e}},mf=()=>Math.random().toString(32).slice(2,10),vf=e=>{const t=document.createElement("div");return t.setAttribute("id",e),t},ff=Et.div`
-  ${({theme:e,reverseIndex:t,type:n,translate:r,bgColor:a,color:o})=>`\n    .outline {\n      border-radius: 5px 5px 0 0;\n      background-color: ${"success"===n?e.palette.jungle:"error"===n?e.palette.ferrari:"info"===n?e.palette.azure:e.palette.sunrise};\n      position: absolute;\n      top: -4px;\n      left: 0px;\n      width: 100%;\n      height: 4px;\n      border: none;\n    }\n\n    .close-button {\n      border: none;\n      cursor: pointer;\n      position: absolute;\n      right: 11px;\n      top: 9px;\n      background-color: inherit;\n      padding: 0;\n    }\n\n    .icon-wrapper {\n      position: relative;\n      top: 6px;\n    }\n    .toast-content {\n      display: flex;\n      align-items: center;\n    }\n\n  .toast {\n    width: 420px;\n    max-width: 90vw;\n    max-height: 75px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    color: ${e.palette.foreground};\n    background-color: ${a};\n    color: ${o};\n    border: 0;\n    border-radius: ${e.layout.radius};\n    padding: 12px ${e.layout.gap} 20px;\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    opacity: ${t>4?0:1};\n    box-shadow: ${t>4?"none":"0 5px 10px rgba(0, 0, 0, 0.11)"};\n    transform: translate3d(0, -100%, 0px) scale(1);\n    transition: transform 400ms ease 0ms, visibility 200ms ease 0ms, opacity 200ms ease 0ms;\n  }\n  .toast.visible {\n    opacity: 1;\n    transform: ${r};\n  }\n  .toast.hide {\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n  }\n  .message {\n    align-items: center;\n    height: 100%;\n    transition: opacity 0.4s ease;\n    font-size: 0.875rem;\n    display: -webkit-box;\n    word-break: break-all;\n    padding-right: ${e.layout.gapHalf};\n    overflow: hidden;\n    max-height: 100%;\n    text-overflow: ellipsis;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    line-height: 1.1rem;\n  }\n  .toast :global(button + button) {\n    margin-left: ${e.layout.gapQuarter};\n  }\n  \n  `}
+  ${({theme:e,reverseIndex:t,type:n,translate:r,bgColor:a,color:o})=>`\n    .outline {\n      border-radius: 5px 5px 0 0;\n      background-color: ${"success"===n?e.palette.jungle:"error"===n?e.palette.ferrari:"info"===n?e.palette.azure:e.palette.sunrise};\n      position: absolute;\n      top: -4px;\n      left: 0px;\n      width: 100%;\n      height: 4px;\n      border: none;\n    }\n\n    .close-button {\n      border: none;\n      cursor: pointer;\n      position: absolute;\n      right: 11px;\n      top: 9px;\n      background-color: inherit;\n      padding: 0;\n    }\n\n    .icon-wrapper {\n      position: relative;\n      top: 6px;\n    }\n    .toast-content {\n      display: flex;\n      align-items: center;\n    }\n\n  .toast {\n    width: 420px;\n    max-width: 90vw;\n    max-height: 75px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    color: ${e.palette.foreground};\n    background-color: ${a};\n    color: ${o};\n    border: 0;\n    border-radius: ${e.layout.radius};\n    padding: 12px ${e.layout.gap} 20px;\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    opacity: ${t>4?0:1};\n    box-shadow: ${t>4?"none":"0 5px 10px rgba(0, 0, 0, 0.11)"};\n    transform: translate3d(0, -100%, 0px) scale(1);\n    transition: transform 400ms ease 0ms, visibility 200ms ease 0ms, opacity 200ms ease 0ms;\n  }\n  .toast.visible {\n    opacity: 1;\n    transform: ${r};\n  }\n  .toast.hide {\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n  }\n  .message {\n    align-items: center;\n    height: 100%;\n    transition: opacity 0.4s ease;\n    font-size: 0.875rem;\n    display: -webkit-box;\n    word-break: break-word;\n    padding-right: ${e.layout.gapHalf};\n    overflow: hidden;\n    max-height: 100%;\n    text-overflow: ellipsis;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    line-height: 1.1rem;\n  }\n  .toast :global(button + button) {\n    margin-left: ${e.layout.gapQuarter};\n  }\n  \n  `}
 `,gf=(t,n)=>t&&t.length?t.map(((t,r)=>e.createElement(Fo,{inline:!0,size:"mini",type:t.passive?"primary":"secondary",key:`action-${r}`,onClick:e=>((e,t)=>{t&&t(e,n)})(e,t.handler)},t.name))):null,bf=e.memo((({index:t,total:r,toast:a,onHover:o})=>{const[c,i]=l(!1),[s,p]=l(!1),d=n((()=>r-(t+1)),[r,t]),u=n((()=>d>=4?`translate3d(0, -75px, -${d}px) scale(.7)`:o?`translate3d(0, ${75*d}px, -${d}px) scale(${1===r?1:.98205})`:`translate3d(0, calc(${`100% + -75px + ${20*d}px`}), -${d}px) scale(${1-.05*d})`),[o,t,r,d]);return h((()=>{const e=setTimeout((()=>{i(!0),clearTimeout(e)}),10);return()=>clearTimeout(e)}),[]),h((()=>{let e=!1;if(!(d>2||a.willBeDestroy)||e)return;const t=setTimeout((()=>{p(!0),clearTimeout(t)}),150);return()=>{e=!0,clearTimeout(t)}}),[d,a.willBeDestroy]),d>10?null:e.createElement(ff,{color:"#222",bgColor:"#fff",type:a.type,translate:u,reverseIndex:d},e.createElement("div",{key:`${a.id}-${t}`,className:`toast ${c?"visible":""} ${s?"hide":""}`},e.createElement("div",{className:"outline"}),e.createElement("button",{className:"close-button",onClick:()=>a.cancel()},e.createElement(er,{glyph:"close",size:"10",viewBox:"0 0 7 7"})),e.createElement("div",{className:"toast-content"},e.createElement("div",{className:"icon-wrapper"},a.customIcon?a.customIcon:e.createElement(er,{glyph:`toast-${a.type}`,size:"32",viewBox:"-4 -5 32 32"})),e.createElement("div",null,e.createElement("div",{className:"message"},a.text),e.createElement("div",{className:"action"},gf(a.actions,a.cancel))))))})),zf=Et.div`
   .toast-container {
     position: fixed;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "freemium-ui",
-  "version": "1.0.213",
+  "version": "1.0.214",
   "description": "React Ui Components for Freemium Apps",
   "main": "lib/index.cjs.js",
   "module": "lib/index.esm.js",