@novu/js 3.1.0 → 3.3.0
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/README.md +1 -1
- package/dist/cjs/{chunk-WONVNOTK.js → chunk-KIOGWIKT.js} +176 -29
- package/dist/cjs/index.d.ts +2 -2
- package/dist/cjs/index.js +8 -8
- package/dist/{esm/novu-DDPQzl99.d.mts → cjs/novu-DJTVB7VN.d.ts} +53 -15
- package/dist/cjs/themes/index.d.ts +2 -2
- package/dist/cjs/types-BPv1rvbm.d.ts +121 -0
- package/dist/cjs/ui/index.d.ts +4 -4
- package/dist/cjs/ui/index.js +1529 -343
- package/dist/esm/{chunk-WQDFFXIB.mjs → chunk-GTZM2EDR.mjs} +176 -29
- package/dist/esm/index.d.mts +2 -2
- package/dist/esm/index.mjs +1 -1
- package/dist/{cjs/novu-DDPQzl99.d.ts → esm/novu-DJTVB7VN.d.mts} +53 -15
- package/dist/esm/themes/index.d.mts +2 -2
- package/dist/esm/types-CYgpCW2I.d.mts +121 -0
- package/dist/esm/ui/index.d.mts +4 -4
- package/dist/esm/ui/index.mjs +1527 -341
- package/dist/index.css +1 -1
- package/dist/novu.min.js +10 -10
- package/dist/novu.min.js.gz +0 -0
- package/package.json +3 -3
- package/dist/cjs/types-CVvP6EyP.d.ts +0 -103
- package/dist/esm/types-DFXwHejb.d.mts +0 -103
package/dist/cjs/ui/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkKIOGWIKT_js = require('../chunk-KIOGWIKT.js');
|
|
4
4
|
var chunkERC62PGI_js = require('../chunk-ERC62PGI.js');
|
|
5
5
|
var chunk7B52C2XE_js = require('../chunk-7B52C2XE.js');
|
|
6
6
|
var web = require('solid-js/web');
|
|
@@ -17,16 +17,19 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
|
17
17
|
|
|
18
18
|
var clsx__default = /*#__PURE__*/_interopDefault(clsx);
|
|
19
19
|
|
|
20
|
-
//
|
|
21
|
-
var ui_default = `.novu{scrollbar-color:var(--nv-color-secondary-foreground-alpha-300) #0000;:where(*),:where(*) :after,:where(*) :before,:where(*):after,:where(*):before{border:0 solid #e5e7eb;box-sizing:border-box}:where(html,:host){line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;tab-size:4;-webkit-tap-highlight-color:transparent}:where(body){line-height:inherit;margin:0}:where(hr){border-top-width:1px;color:inherit;height:0}:where(abbr:where([title])){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(h1,h2,h3,h4,h5,h6){font-size:inherit;font-weight:inherit}:where(a){color:inherit;text-decoration:inherit}:where(b,strong){font-weight:bolder}:where(code,kbd,samp,pre){font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}:where(small){font-size:80%}:where(sub,sup){font-size:75%;line-height:0;position:relative;vertical-align:initial}:where(sub){bottom:-.25em}:where(sup){top:-.5em}:where(table){border-collapse:collapse;border-color:inherit;text-indent:0}:where(button,input,optgroup,select,textarea){color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}:where(button,select){text-transform:none}:where(button,input:where([type=button]),input:where([type=reset]),input:where([type=submit])){-webkit-appearance:button;background-color:initial;background-image:none}:where(:-moz-focusring){outline:auto}:where(:-moz-ui-invalid){box-shadow:none}:where(progress){vertical-align:initial}:where(*)::-webkit-inner-spin-button,:where(*)::-webkit-outer-spin-button{height:auto}:where([type=search]){-webkit-appearance:textfield;outline-offset:-2px}:where(*)::-webkit-search-decoration{-webkit-appearance:none}:where(*)::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(summary){display:list-item}:where(blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre){margin:0}:where(fieldset){margin:0;padding:0}:where(legend){padding:0}:where(ol,ul,menu){list-style:none;margin:0;padding:0}:where(dialog){padding:0}:where(textarea){resize:vertical}:where(input)::placeholder,:where(textarea)::placeholder{color:#9ca3af;opacity:1}:where(button,[role=button]){cursor:pointer}:where(:disabled){cursor:default}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block;vertical-align:middle}:where(img,video){height:auto;max-width:100%}:where([hidden]){display:none}:where(*),:where(*) :after,:where(*) :before,:where(*):after,:where(*):before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }:where(*) ::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::-webkit-scrollbar{height:.5rem;width:.5rem}::-webkit-scrollbar-thumb{background-clip:"padding-box";background-color:var(--nv-color-secondary-foreground-alpha-300);border-radius:.25rem}::-webkit-scrollbar-corner,::-webkit-scrollbar-track{background-color:initial}}.nt-sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.nt-invisible{visibility:hidden}.nt-absolute{position:absolute}.nt-relative{position:relative}.nt-inset-0{inset:0}.nt-inset-2{inset:.5rem}.nt-left-0{left:0}.nt-left-0\\.5{left:.125rem}.nt-right-0{right:0}.nt-right-3{right:.75rem}.nt-top-0{top:0}.nt-top-0\\.5{top:.125rem}.nt-top-3{top:.75rem}.nt-z-10{z-index:10}.nt-z-\\[-1\\]{z-index:-1}.nt-mx-auto{margin-left:auto;margin-right:auto}.nt-mb-4{margin-bottom:1rem}.nt-mb-\\[0\\.625rem\\]{margin-bottom:.625rem}.nt-ml-auto{margin-left:auto}.nt-mr-auto{margin-right:auto}.nt-mt-auto{margin-top:auto}.nt-block{display:block}.nt-flex{display:flex}.nt-inline-flex{display:inline-flex}.nt-hidden{display:none}.nt-aspect-square{aspect-ratio:1/1}.nt-size-1{height:.25rem;width:.25rem}.nt-size-1\\.5{height:.375rem;width:.375rem}.nt-size-2{height:.5rem;width:.5rem}.nt-size-2\\.5{height:.625rem;width:.625rem}.nt-size-3{height:.75rem;width:.75rem}.nt-size-4{height:1rem;width:1rem}.nt-size-5{height:1.25rem;width:1.25rem}.nt-size-8{height:2rem;width:2rem}.nt-size-full{height:100%;width:100%}.nt-h-2{height:.5rem}.nt-h-3{height:.75rem}.nt-h-4{height:1rem}.nt-h-8{height:2rem}.nt-h-\\[600px\\]{height:600px}.nt-h-fit{height:-moz-fit-content;height:fit-content}.nt-h-full{height:100%}.nt-min-h-0{min-height:0}.nt-w-1\\/3{width:33.333333%}.nt-w-2\\/3{width:66.666667%}.nt-w-7{width:1.75rem}.nt-w-8{width:2rem}.nt-w-\\[400px\\]{width:400px}.nt-w-fit{width:-moz-fit-content;width:fit-content}.nt-w-full{width:100%}.nt-w-max{width:max-content}.nt-min-w-52{min-width:13rem}.nt-flex-1{flex:1 1 0%}.nt-shrink-0{flex-shrink:0}.nt-transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nt-cursor-default{cursor:default}.nt-cursor-pointer{cursor:pointer}.nt-flex-col{flex-direction:column}.nt-flex-wrap{flex-wrap:wrap}.nt-flex-nowrap{flex-wrap:nowrap}.nt-items-start{align-items:flex-start}.nt-items-center{align-items:center}.nt-justify-center{justify-content:center}.nt-justify-between{justify-content:space-between}.nt-gap-0{gap:0}.nt-gap-0\\.5{gap:.125rem}.nt-gap-1{gap:.25rem}.nt-gap-2{gap:.5rem}.nt-gap-3{gap:.75rem}.nt-gap-4{gap:1rem}.nt-gap-6{gap:1.5rem}.nt-gap-8{gap:2rem}.nt-self-stretch{align-self:stretch}.nt-overflow-auto{overflow:auto}.nt-overflow-hidden{overflow:hidden}.nt-overflow-y-auto{overflow-y:auto}.nt-truncate{overflow:hidden;text-overflow:ellipsis}.nt-truncate,.nt-whitespace-nowrap{white-space:nowrap}.nt-whitespace-pre-wrap{white-space:pre-wrap}.nt-rounded{border-radius:var(--nv-radius-base)}.nt-rounded-full{border-radius:var(--nv-radius-full)}.nt-rounded-lg{border-radius:var(--nv-radius-lg)}.nt-rounded-md{border-radius:var(--nv-radius-md)}.nt-rounded-xl{border-radius:var(--nv-radius-xl)}.nt-border{border-width:1px}.nt-border-b{border-bottom-width:1px}.nt-border-t{border-top-width:1px}.nt-border-background{border-color:var(--nv-color-background)}.nt-border-border,.nt-border-neutral-alpha-100{border-color:var(--nv-color-neutral-alpha-100)}.nt-border-neutral-alpha-50{border-color:var(--nv-color-neutral-alpha-50)}.nt-border-t-neutral-alpha-200{border-top-color:var(--nv-color-neutral-alpha-200)}.nt-bg-\\[oklch\\(from_var\\(--nv-color-stripes\\)_l_c_h_\\/_0\\.1\\)\\]{background-color:oklch(from var(--nv-color-stripes) l c h/.1)}.nt-bg-background{background-color:var(--nv-color-background)}.nt-bg-counter{background-color:var(--nv-color-counter)}.nt-bg-foreground{background-color:var(--nv-color-foreground)}.nt-bg-neutral-alpha-100{background-color:var(--nv-color-neutral-alpha-100)}.nt-bg-neutral-alpha-25{background-color:var(--nv-color-neutral-alpha-25)}.nt-bg-neutral-alpha-300{background-color:var(--nv-color-neutral-alpha-300)}.nt-bg-neutral-alpha-50{background-color:var(--nv-color-neutral-alpha-50)}.nt-bg-primary{background-color:var(--nv-color-primary)}.nt-bg-secondary{background-color:var(--nv-color-secondary)}.nt-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.nt-bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.nt-from-foreground-alpha-50{--tw-gradient-from:var(--nv-color-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-primary-foreground-alpha-200{--tw-gradient-from:var(--nv-color-primary-foreground-alpha-200) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-transparent{--tw-gradient-from:#0000 var(--tw-gradient-from-position);--tw-gradient-to:#0000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-20\\%{--tw-gradient-from-position:20%}.nt-to-background{--tw-gradient-to:var(--nv-color-background) var(--tw-gradient-to-position)}.nt-to-transparent{--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.nt-object-cover{object-fit:cover}.nt-p-0{padding:0}.nt-p-0\\.5{padding:.125rem}.nt-p-1{padding:.25rem}.nt-p-2{padding:.5rem}.nt-p-2\\.5{padding:.625rem}.nt-p-3{padding:.75rem}.nt-p-4{padding:1rem}.nt-px-1{padding-left:.25rem;padding-right:.25rem}.nt-px-2{padding-left:.5rem;padding-right:.5rem}.nt-px-3{padding-left:.75rem;padding-right:.75rem}.nt-px-4{padding-left:1rem;padding-right:1rem}.nt-px-8{padding-left:2rem;padding-right:2rem}.nt-px-\\[6px\\]{padding-left:6px;padding-right:6px}.nt-py-1{padding-bottom:.25rem;padding-top:.25rem}.nt-py-2{padding-bottom:.5rem;padding-top:.5rem}.nt-py-3{padding-bottom:.75rem;padding-top:.75rem}.nt-py-3\\.5{padding-bottom:.875rem;padding-top:.875rem}.nt-py-4{padding-bottom:1rem;padding-top:1rem}.nt-py-px{padding-bottom:1px;padding-top:1px}.nt-pb-2{padding-bottom:.5rem}.nt-pb-\\[0\\.625rem\\]{padding-bottom:.625rem}.nt-pt-2{padding-top:.5rem}.nt-pt-2\\.5{padding-top:.625rem}.nt-text-center{text-align:center}.nt-text-start{text-align:start}.nt-text-base{font-size:var(--nv-font-size-base);line-height:var(--nv-line-height-base)}.nt-text-sm{font-size:var(--nv-font-size-sm);line-height:var(--nv-line-height-sm)}.nt-text-xs{font-size:var(--nv-font-size-xs);line-height:var(--nv-line-height-xs)}.nt-font-medium{font-weight:500}.nt-font-semibold{font-weight:600}.nt-leading-none{line-height:1}.nt-text-background{color:var(--nv-color-background)}.nt-text-counter-foreground{color:var(--nv-color-counter-foreground)}.nt-text-foreground{color:var(--nv-color-foreground)}.nt-text-foreground-alpha-300{color:var(--nv-color-foreground-alpha-300)}.nt-text-foreground-alpha-400{color:var(--nv-color-foreground-alpha-400)}.nt-text-foreground-alpha-600{color:var(--nv-color-foreground-alpha-600)}.nt-text-foreground-alpha-700{color:var(--nv-color-foreground-alpha-700)}.nt-text-primary-foreground{color:var(--nv-color-primary-foreground)}.nt-text-secondary-foreground{color:var(--nv-color-secondary-foreground)}.nt-text-stripes{color:var(--nv-color-stripes)}.nt-opacity-0{opacity:0}.nt-shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-\\[0_0_0_0\\.5px_var\\(--nv-color-primary-600\\)\\]{--tw-shadow:0 0 0 0.5px var(--nv-color-primary-600);--tw-shadow-colored:0 0 0 0.5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-\\[0_0_0_0\\.5px_var\\(--nv-color-secondary-600\\)\\]{--tw-shadow:0 0 0 0.5px var(--nv-color-secondary-600);--tw-shadow-colored:0 0 0 0.5px var(--tw-shadow-color)}.nt-shadow-\\[0_0_0_0\\.5px_var\\(--nv-color-secondary-600\\)\\],.nt-shadow-dropdown{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-dropdown{--tw-shadow:0px 12px 16px -4px oklch(from var(--nv-color-shadow) l c h/0.08),0px 4px 6px -2px oklch(from var(--nv-color-shadow) l c h/0.03);--tw-shadow-colored:0px 12px 16px -4px var(--tw-shadow-color),0px 4px 6px -2px var(--tw-shadow-color)}.nt-shadow-popover{--tw-shadow:0px 8px 26px 0px oklch(from var(--nv-color-shadow) l c h/0.08),0px 2px 6px 0px oklch(from var(--nv-color-shadow) l c h/0.12);--tw-shadow-colored:0px 8px 26px 0px var(--tw-shadow-color),0px 2px 6px 0px var(--tw-shadow-color)}.nt-shadow-popover,.nt-shadow-tooltip{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-tooltip{--tw-shadow:0 5px 20px 0 oklch(from var(--nv-color-shadow) l c h/0.08);--tw-shadow-colored:0 5px 20px 0 var(--tw-shadow-color)}.nt-outline-none{outline:2px solid #0000;outline-offset:2px}.nt-backdrop-blur-lg{--tw-backdrop-blur:blur(16px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.nt-transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-duration-100{transition-duration:.1s}.nt-duration-200{transition-duration:.2s}.nt-ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.nt-animate-in{animation-duration:.15s;animation-name:enter;--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial}.nt-fade-in{--tw-enter-opacity:0}.nt-slide-in-from-top-2{--tw-enter-translate-y:-0.5rem}.nt-duration-100{animation-duration:.1s}.nt-duration-200{animation-duration:.2s}.nt-ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.before\\:nt-absolute:before{content:var(--tw-content);position:absolute}.before\\:nt-inset-0:before{content:var(--tw-content);inset:0}.before\\:-nt-right-\\[calc\\(0\\+var\\(--stripes-size\\)\\)\\]:before{content:var(--tw-content);right:calc(var(--stripes-size)*-1)}@keyframes nt-stripes{0%{content:var(--tw-content);transform:translateX(0)}to{content:var(--tw-content);transform:translateX(calc(var(--stripes-size)*-1))}}.before\\:nt-animate-stripes:before{animation:nt-stripes 1s linear infinite paused;content:var(--tw-content)}.before\\:nt-rounded-lg:before{border-radius:var(--nv-radius-lg);content:var(--tw-content)}.before\\:nt-rounded-md:before{border-radius:var(--nv-radius-md);content:var(--tw-content)}.before\\:nt-rounded-xl:before{border-radius:var(--nv-radius-xl);content:var(--tw-content)}.before\\:nt-border:before{border-width:1px;content:var(--tw-content)}.before\\:nt-border-primary-foreground-alpha-100:before{border-color:var(--nv-color-primary-foreground-alpha-100);content:var(--tw-content)}.before\\:nt-border-secondary-foreground-alpha-100:before{border-color:var(--nv-color-secondary-foreground-alpha-100);content:var(--tw-content)}.before\\:nt-bg-dev-stripes-gradient:before{background-image:repeating-linear-gradient(135deg,oklch(from var(--nv-color-stripes) l c h/.1) 25%,oklch(from var(--nv-color-stripes) l c h/.1) 50%,oklch(from var(--nv-color-stripes) l c h/.2) 50%,oklch(from var(--nv-color-stripes) l c h/.2) 75%);content:var(--tw-content)}.before\\:nt-bg-\\[length\\:var\\(--stripes-size\\)_var\\(--stripes-size\\)\\]:before{background-size:var(--stripes-size) var(--stripes-size);content:var(--tw-content)}.before\\:nt-content-\\[\\"\\"\\]:before{--tw-content:"";content:var(--tw-content)}.before\\:\\[mask-image\\:linear-gradient\\(transparent_0\\%\\2c black\\)\\]:before{content:var(--tw-content);-webkit-mask-image:linear-gradient(#0000,#000);mask-image:linear-gradient(#0000,#000)}.after\\:nt-absolute:after{content:var(--tw-content);position:absolute}.after\\:nt-inset-0:after{content:var(--tw-content);inset:0}.after\\:-nt-top-12:after{content:var(--tw-content);top:-3rem}.after\\:nt-bottom-0:after{bottom:0;content:var(--tw-content)}.after\\:nt-left-0:after{content:var(--tw-content);left:0}.after\\:nt-left-0\\.5:after{content:var(--tw-content);left:.125rem}.after\\:nt-top-0:after{content:var(--tw-content);top:0}.after\\:nt-top-0\\.5:after{content:var(--tw-content);top:.125rem}.after\\:nt-size-3:after{content:var(--tw-content);height:.75rem;width:.75rem}.after\\:nt-h-\\[2px\\]:after{content:var(--tw-content);height:2px}.after\\:nt-w-full:after{content:var(--tw-content);width:100%}.after\\:nt-rounded-full:after{border-radius:var(--nv-radius-full);content:var(--tw-content)}.after\\:nt-rounded-lg:after{border-radius:var(--nv-radius-lg);content:var(--tw-content)}.after\\:nt-rounded-md:after{border-radius:var(--nv-radius-md);content:var(--tw-content)}.after\\:nt-rounded-xl:after{border-radius:var(--nv-radius-xl);content:var(--tw-content)}.after\\:nt-border-b-2:after{border-bottom-width:2px;content:var(--tw-content)}.after\\:nt-border-b-primary:after{border-bottom-color:var(--nv-color-primary);content:var(--tw-content)}.after\\:nt-border-b-transparent:after{border-bottom-color:#0000;content:var(--tw-content)}.after\\:nt-bg-background:after{background-color:var(--nv-color-background);content:var(--tw-content)}.after\\:nt-bg-\\[linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-background\\)_l_c_h_\\/_0\\.9\\)_55\\%\\2c transparent\\)\\]:after{background-image:linear-gradient(180deg,#0000,oklch(from var(--nv-color-background) l c h/.9) 55%,#0000);content:var(--tw-content)}.after\\:nt-bg-\\[linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-stripes\\)_l_c_h_\\/_0\\.07\\)_55\\%\\2c transparent\\)\\2c linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-background\\)_l_c_h_\\/_0\\.9\\)_55\\%\\2c transparent\\)\\]:after{background-image:linear-gradient(180deg,#0000,oklch(from var(--nv-color-stripes) l c h/.07) 55%,#0000),linear-gradient(180deg,#0000,oklch(from var(--nv-color-background) l c h/.9) 55%,#0000);content:var(--tw-content)}.after\\:nt-bg-gradient-to-b:after{background-image:linear-gradient(to bottom,var(--tw-gradient-stops));content:var(--tw-content)}.after\\:nt-from-primary-foreground-alpha-50:after{content:var(--tw-content);--tw-gradient-from:var(--nv-color-primary-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.after\\:nt-from-secondary-foreground-alpha-50:after{content:var(--tw-content);--tw-gradient-from:var(--nv-color-secondary-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.after\\:nt-to-transparent:after{content:var(--tw-content);--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.after\\:nt-opacity-0:after{content:var(--tw-content);opacity:0}.after\\:nt-transition-all:after{content:var(--tw-content);transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.after\\:nt-transition-opacity:after{content:var(--tw-content);transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.after\\:nt-duration-200:after{transition-duration:.2s}.after\\:nt-content-\\[\\"\\"\\]:after,.after\\:nt-content-\\[\\'\\'\\]:after{--tw-content:"";content:var(--tw-content)}.after\\:nt-duration-200:after{animation-duration:.2s;content:var(--tw-content)}.hover\\:nt-bg-neutral-alpha-100:hover{background-color:var(--nv-color-neutral-alpha-100)}.hover\\:nt-bg-neutral-alpha-50:hover{background-color:var(--nv-color-neutral-alpha-50)}.hover\\:nt-bg-primary-600:hover{background-color:var(--nv-color-primary-600)}.hover\\:nt-bg-primary-alpha-25:hover{background-color:var(--nv-color-primary-alpha-25)}.hover\\:nt-text-foreground-alpha-800:hover{color:var(--nv-color-foreground-alpha-800)}.before\\:hover\\:\\[animation-play-state\\:running\\]:hover:before{animation-play-state:running;content:var(--tw-content)}.hover\\:after\\:nt-opacity-100:hover:after{content:var(--tw-content);opacity:1}.focus\\:nt-outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus-visible\\:nt-rounded-lg:focus-visible{border-radius:var(--nv-radius-lg)}.focus-visible\\:nt-rounded-md:focus-visible{border-radius:var(--nv-radius-md)}.focus-visible\\:nt-rounded-xl:focus-visible{border-radius:var(--nv-radius-xl)}.focus-visible\\:nt-bg-neutral-alpha-50:focus-visible{background-color:var(--nv-color-neutral-alpha-50)}.focus-visible\\:nt-outline-none:focus-visible{outline:2px solid #0000;outline-offset:2px}.focus-visible\\:nt-ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\\:nt-ring-primary:focus-visible{--tw-ring-color:var(--nv-color-primary)}.focus-visible\\:nt-ring-ring:focus-visible{--tw-ring-color:var(--nv-color-ring)}.focus-visible\\:nt-ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled\\:nt-pointer-events-none:disabled{pointer-events:none}.disabled\\:nt-opacity-50:disabled{opacity:.5}.nt-group:focus-within .group-focus-within\\:nt-opacity-100,.nt-group:hover .group-hover\\:nt-opacity-100{opacity:1}.nt-peer:checked~.peer-checked\\:nt-border-neutral-alpha-400{border-color:var(--nv-color-neutral-alpha-400)}.nt-peer:checked~.peer-checked\\:nt-bg-primary{background-color:var(--nv-color-primary)}.nt-peer:checked~.peer-checked\\:nt-shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-peer:checked~.peer-checked\\:after\\:nt-translate-x-full:after{content:var(--tw-content);--tw-translate-x:100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nt-peer:checked~.peer-checked\\:after\\:nt-border-background:after{border-color:var(--nv-color-background);content:var(--tw-content)}.data-\\[open\\=true\\]\\:nt-rotate-180[data-open=true]{--tw-rotate:180deg}.data-\\[open\\=true\\]\\:nt-rotate-180[data-open=true],.data-\\[open\\=true\\]\\:nt-transform[data-open=true]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\\[disabled\\=true\\]\\:nt-text-foreground-alpha-400[data-disabled=true]{color:var(--nv-color-foreground-alpha-400)}.data-\\[disabled\\=true\\]\\:nt-text-foreground-alpha-600[data-disabled=true]{color:var(--nv-color-foreground-alpha-600)}.data-\\[state\\=active\\]\\:nt-text-foreground[data-state=active]{color:var(--nv-color-foreground)}.data-\\[state\\=active\\]\\:after\\:nt-border-b-2[data-state=active]:after{border-bottom-width:2px;content:var(--tw-content)}.data-\\[state\\=active\\]\\:after\\:nt-border-primary[data-state=active]:after{border-color:var(--nv-color-primary);content:var(--tw-content)}.data-\\[state\\=active\\]\\:after\\:nt-opacity-100[data-state=active]:after{content:var(--tw-content);opacity:1}.\\[\\&\\:not\\(\\:first-child\\)\\]\\:nt-border-t:not(:first-child){border-top-width:1px}.\\[\\&_svg\\]\\:nt-pointer-events-none svg{pointer-events:none}.\\[\\&_svg\\]\\:nt-shrink-0 svg{flex-shrink:0}`;
|
|
20
|
+
// _qrqgolsn3:/Users/sokratisvidros/Workspace/novu/packages/js/src/ui/index.directcss
|
|
21
|
+
var ui_default = `.novu{scrollbar-color:var(--nv-color-secondary-foreground-alpha-300) #0000;:where(*),:where(*) :after,:where(*) :before,:where(*):after,:where(*):before{border:0 solid #e5e7eb;box-sizing:border-box}:where(html,:host){line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;tab-size:4;-webkit-tap-highlight-color:transparent}:where(body){line-height:inherit;margin:0}:where(hr){border-top-width:1px;color:inherit;height:0}:where(abbr:where([title])){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(h1,h2,h3,h4,h5,h6){font-size:inherit;font-weight:inherit}:where(a){color:inherit;text-decoration:inherit}:where(b,strong){font-weight:bolder}:where(code,kbd,samp,pre){font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}:where(small){font-size:80%}:where(sub,sup){font-size:75%;line-height:0;position:relative;vertical-align:initial}:where(sub){bottom:-.25em}:where(sup){top:-.5em}:where(table){border-collapse:collapse;border-color:inherit;text-indent:0}:where(button,input,optgroup,select,textarea){color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}:where(button,select){text-transform:none}:where(button,input:where([type=button]),input:where([type=reset]),input:where([type=submit])){-webkit-appearance:button;background-color:initial;background-image:none}:where(:-moz-focusring){outline:auto}:where(:-moz-ui-invalid){box-shadow:none}:where(progress){vertical-align:initial}:where(*)::-webkit-inner-spin-button,:where(*)::-webkit-outer-spin-button{height:auto}:where([type=search]){-webkit-appearance:textfield;outline-offset:-2px}:where(*)::-webkit-search-decoration{-webkit-appearance:none}:where(*)::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(summary){display:list-item}:where(blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre){margin:0}:where(fieldset){margin:0;padding:0}:where(legend){padding:0}:where(ol,ul,menu){list-style:none;margin:0;padding:0}:where(dialog){padding:0}:where(textarea){resize:vertical}:where(input)::placeholder,:where(textarea)::placeholder{color:#9ca3af;opacity:1}:where(button,[role=button]){cursor:pointer}:where(:disabled){cursor:default}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block;vertical-align:middle}:where(img,video){height:auto;max-width:100%}:where([hidden]){display:none}:where(*),:where(*) :after,:where(*) :before,:where(*):after,:where(*):before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }:where(*) ::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::-webkit-scrollbar{height:.5rem;width:.5rem}::-webkit-scrollbar-thumb{background-clip:"padding-box";background-color:var(--nv-color-secondary-foreground-alpha-300);border-radius:.25rem}::-webkit-scrollbar-corner,::-webkit-scrollbar-track{background-color:initial}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}}.nt-sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.\\!nt-pointer-events-auto{pointer-events:auto!important}.nt-invisible{visibility:hidden}.nt-absolute{position:absolute}.nt-relative{position:relative}.nt-inset-0{inset:0}.nt-inset-2{inset:.5rem}.nt-left-0\\.5{left:.125rem}.nt-right-0{right:0}.nt-right-3{right:.75rem}.nt-top-0{top:0}.nt-top-0\\.5{top:.125rem}.nt-top-3{top:.75rem}.nt-z-10{z-index:10}.nt-z-\\[-1\\]{z-index:-1}.nt-mx-auto{margin-left:auto;margin-right:auto}.nt-mb-2{margin-bottom:.5rem}.nt-mb-4{margin-bottom:1rem}.nt-mb-\\[0\\.625rem\\]{margin-bottom:.625rem}.nt-ml-2{margin-left:.5rem}.nt-ml-auto{margin-left:auto}.nt-mr-2{margin-right:.5rem}.nt-mr-auto{margin-right:auto}.nt-mt-auto{margin-top:auto}.nt-block{display:block}.nt-flex{display:flex}.nt-inline-flex{display:inline-flex}.nt-grid{display:grid}.nt-hidden{display:none}.nt-aspect-square{aspect-ratio:1/1}.nt-size-1\\.5{height:.375rem;width:.375rem}.nt-size-2{height:.5rem;width:.5rem}.nt-size-2\\.5{height:.625rem;width:.625rem}.nt-size-3{height:.75rem;width:.75rem}.nt-size-4{height:1rem;width:1rem}.nt-size-5{height:1.25rem;width:1.25rem}.nt-size-8{height:2rem;width:2rem}.nt-size-fit{height:fit-content;width:fit-content}.nt-size-full{height:100%;width:100%}.nt-h-2{height:.5rem}.nt-h-3{height:.75rem}.nt-h-4{height:1rem}.nt-h-5{height:1.25rem}.nt-h-7{height:1.75rem}.nt-h-8{height:2rem}.nt-h-9{height:2.25rem}.nt-h-\\[600px\\]{height:600px}.nt-h-fit{height:fit-content}.nt-h-full{height:100%}.nt-min-h-0{min-height:0}.nt-w-1\\/3{width:33.333333%}.nt-w-2\\/3{width:66.666667%}.nt-w-5{width:1.25rem}.nt-w-7{width:1.75rem}.nt-w-8{width:2rem}.nt-w-\\[260px\\]{width:260px}.nt-w-\\[400px\\]{width:400px}.nt-w-\\[60px\\]{width:60px}.nt-w-\\[calc\\(2ch\\+2rem\\)\\]{width:calc(2ch + 2rem)}.nt-w-fit{width:fit-content}.nt-w-full{width:100%}.nt-w-max{width:max-content}.nt-min-w-52{min-width:13rem}.nt-flex-1{flex:1 1 0%}.nt-shrink-0{flex-shrink:0}.nt-transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nt-cursor-default{cursor:default}.nt-cursor-pointer{cursor:pointer}.nt-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.nt-flex-row{flex-direction:row}.nt-flex-col{flex-direction:column}.nt-flex-wrap{flex-wrap:wrap}.nt-flex-nowrap{flex-wrap:nowrap}.nt-items-start{align-items:flex-start}.nt-items-center{align-items:center}.nt-justify-end{justify-content:flex-end}.nt-justify-center{justify-content:center}.nt-justify-between{justify-content:space-between}.nt-gap-0\\.5{gap:.125rem}.nt-gap-1{gap:.25rem}.nt-gap-1\\.5{gap:.375rem}.nt-gap-2{gap:.5rem}.nt-gap-3{gap:.75rem}.nt-gap-4{gap:1rem}.nt-gap-6{gap:1.5rem}.nt-gap-8{gap:2rem}.nt-self-stretch{align-self:stretch}.nt-overflow-auto{overflow:auto}.nt-overflow-hidden{overflow:hidden}.nt-overflow-y-auto{overflow-y:auto}.nt-truncate{overflow:hidden;text-overflow:ellipsis}.nt-truncate,.nt-whitespace-nowrap{white-space:nowrap}.nt-whitespace-pre-wrap{white-space:pre-wrap}.nt-rounded{border-radius:var(--nv-radius-base)}.nt-rounded-full{border-radius:var(--nv-radius-full)}.nt-rounded-lg{border-radius:var(--nv-radius-lg)}.nt-rounded-md{border-radius:var(--nv-radius-md)}.nt-rounded-sm{border-radius:var(--nv-radius-sm)}.nt-rounded-xl{border-radius:var(--nv-radius-xl)}.nt-border{border-width:1px}.nt-border-b{border-bottom-width:1px}.nt-border-t{border-top-width:1px}.nt-border-background{border-color:var(--nv-color-background)}.nt-border-border{border-color:var(--nv-color-neutral-alpha-100)}.nt-border-neutral-200{--tw-border-opacity:1;border-color:rgb(229 229 229/var(--tw-border-opacity,1))}.nt-border-neutral-alpha-100{border-color:var(--nv-color-neutral-alpha-100)}.nt-border-neutral-alpha-50{border-color:var(--nv-color-neutral-alpha-50)}.nt-border-t-neutral-alpha-200{border-top-color:var(--nv-color-neutral-alpha-200)}.nt-bg-\\[oklch\\(from_var\\(--nv-color-stripes\\)_l_c_h_\\/_0\\.1\\)\\]{background-color:oklch(from var(--nv-color-stripes) l c h/.1)}.nt-bg-background{background-color:var(--nv-color-background)}.nt-bg-counter{background-color:var(--nv-color-counter)}.nt-bg-foreground{background-color:var(--nv-color-foreground)}.nt-bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.nt-bg-neutral-alpha-100{background-color:var(--nv-color-neutral-alpha-100)}.nt-bg-neutral-alpha-25{background-color:var(--nv-color-neutral-alpha-25)}.nt-bg-neutral-alpha-300{background-color:var(--nv-color-neutral-alpha-300)}.nt-bg-neutral-alpha-50{background-color:var(--nv-color-neutral-alpha-50)}.nt-bg-primary{background-color:var(--nv-color-primary)}.nt-bg-primary-alpha-300{background-color:var(--nv-color-primary-alpha-300)}.nt-bg-primary-alpha-400{background-color:var(--nv-color-primary-alpha-400)}.nt-bg-secondary{background-color:var(--nv-color-secondary)}.nt-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.nt-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.nt-bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.nt-from-foreground-alpha-50{--tw-gradient-from:var(--nv-color-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-primary-foreground-alpha-200{--tw-gradient-from:var(--nv-color-primary-foreground-alpha-200) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-transparent{--tw-gradient-from:#0000 var(--tw-gradient-from-position);--tw-gradient-to:#0000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-20\\%{--tw-gradient-from-position:20%}.nt-to-background{--tw-gradient-to:var(--nv-color-background) var(--tw-gradient-to-position)}.nt-to-transparent{--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.nt-object-cover{object-fit:cover}.nt-p-0{padding:0}.nt-p-0\\.5{padding:.125rem}.nt-p-1{padding:.25rem}.nt-p-2{padding:.5rem}.nt-p-2\\.5{padding:.625rem}.nt-p-3{padding:.75rem}.nt-p-4{padding:1rem}.nt-px-1{padding-left:.25rem;padding-right:.25rem}.nt-px-2{padding-left:.5rem;padding-right:.5rem}.nt-px-3{padding-left:.75rem;padding-right:.75rem}.nt-px-4{padding-left:1rem;padding-right:1rem}.nt-px-8{padding-left:2rem;padding-right:2rem}.nt-px-\\[6px\\]{padding-left:6px;padding-right:6px}.nt-py-1{padding-bottom:.25rem;padding-top:.25rem}.nt-py-2{padding-bottom:.5rem;padding-top:.5rem}.nt-py-3{padding-bottom:.75rem;padding-top:.75rem}.nt-py-3\\.5{padding-bottom:.875rem;padding-top:.875rem}.nt-py-4{padding-bottom:1rem;padding-top:1rem}.nt-py-px{padding-bottom:1px;padding-top:1px}.nt-pb-2{padding-bottom:.5rem}.nt-pb-\\[0\\.625rem\\]{padding-bottom:.625rem}.nt-pt-2\\.5{padding-top:.625rem}.nt-text-center{text-align:center}.nt-text-start{text-align:start}.nt-font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.nt-text-\\[0\\.8rem\\]{font-size:.8rem}.nt-text-base{font-size:var(--nv-font-size-base);line-height:var(--nv-line-height-base)}.nt-text-sm{font-size:var(--nv-font-size-sm);line-height:var(--nv-line-height-sm)}.nt-text-xl{font-size:var(--nv-font-size-xl);line-height:var(--nv-line-height-xl)}.nt-text-xs{font-size:var(--nv-font-size-xs);line-height:var(--nv-line-height-xs)}.nt-font-medium{font-weight:500}.nt-font-normal{font-weight:400}.nt-font-semibold{font-weight:600}.nt-leading-none{line-height:1}.nt-text-background{color:var(--nv-color-background)}.nt-text-counter-foreground{color:var(--nv-color-counter-foreground)}.nt-text-foreground{color:var(--nv-color-foreground)}.nt-text-foreground-alpha-300{color:var(--nv-color-foreground-alpha-300)}.nt-text-foreground-alpha-400{color:var(--nv-color-foreground-alpha-400)}.nt-text-foreground-alpha-600{color:var(--nv-color-foreground-alpha-600)}.nt-text-foreground-alpha-700{color:var(--nv-color-foreground-alpha-700)}.nt-text-primary-foreground{color:var(--nv-color-primary-foreground)}.nt-text-secondary-foreground{color:var(--nv-color-secondary-foreground)}.nt-text-stripes{color:var(--nv-color-stripes)}.nt-opacity-0{opacity:0}.nt-opacity-20{opacity:.2}.nt-shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-\\[0_0_0_0\\.5px_var\\(--nv-color-primary-600\\)\\]{--tw-shadow:0 0 0 0.5px var(--nv-color-primary-600);--tw-shadow-colored:0 0 0 0.5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-\\[0_0_0_0\\.5px_var\\(--nv-color-secondary-600\\)\\]{--tw-shadow:0 0 0 0.5px var(--nv-color-secondary-600);--tw-shadow-colored:0 0 0 0.5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-\\[0px_1px_2px_0px_rgba\\(10\\,13\\,20\\,0\\.03\\)\\]{--tw-shadow:0px 1px 2px 0px #0a0d1408;--tw-shadow-colored:0px 1px 2px 0px var(--tw-shadow-color)}.nt-shadow-\\[0px_1px_2px_0px_rgba\\(10\\,13\\,20\\,0\\.03\\)\\],.nt-shadow-dropdown{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-dropdown{--tw-shadow:0px 12px 16px -4px oklch(from var(--nv-color-shadow) l c h/0.08),0px 4px 6px -2px oklch(from var(--nv-color-shadow) l c h/0.03);--tw-shadow-colored:0px 12px 16px -4px var(--tw-shadow-color),0px 4px 6px -2px var(--tw-shadow-color)}.nt-shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.nt-shadow-lg,.nt-shadow-popover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-popover{--tw-shadow:0px 8px 26px 0px oklch(from var(--nv-color-shadow) l c h/0.08),0px 2px 6px 0px oklch(from var(--nv-color-shadow) l c h/0.12);--tw-shadow-colored:0px 8px 26px 0px var(--tw-shadow-color),0px 2px 6px 0px var(--tw-shadow-color)}.nt-shadow-tooltip{--tw-shadow:0 5px 20px 0 oklch(from var(--nv-color-shadow) l c h/0.08);--tw-shadow-colored:0 5px 20px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-outline-none{outline:2px solid #0000;outline-offset:2px}.nt-backdrop-blur-lg{--tw-backdrop-blur:blur(16px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.nt-transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-duration-100{transition-duration:.1s}.nt-duration-200{transition-duration:.2s}.nt-ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.nt-animate-in{animation-duration:.15s;animation-name:enter;--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial}.nt-fade-in{--tw-enter-opacity:0}.nt-slide-in-from-top-2{--tw-enter-translate-y:-0.5rem}.nt-duration-100{animation-duration:.1s}.nt-duration-200{animation-duration:.2s}.nt-ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.before\\:nt-absolute:before{content:var(--tw-content);position:absolute}.before\\:nt-inset-0:before{content:var(--tw-content);inset:0}.before\\:-nt-right-\\[calc\\(0\\+var\\(--stripes-size\\)\\)\\]:before{content:var(--tw-content);right:calc(var(--stripes-size)*-1)}@keyframes nt-stripes{0%{content:var(--tw-content);transform:translateX(0)}to{content:var(--tw-content);transform:translateX(calc(var(--stripes-size)*-1))}}.before\\:nt-animate-stripes:before{animation:nt-stripes 1s linear infinite paused;content:var(--tw-content)}.before\\:nt-rounded-lg:before{border-radius:var(--nv-radius-lg);content:var(--tw-content)}.before\\:nt-rounded-md:before{border-radius:var(--nv-radius-md);content:var(--tw-content)}.before\\:nt-rounded-xl:before{border-radius:var(--nv-radius-xl);content:var(--tw-content)}.before\\:nt-border:before{border-width:1px;content:var(--tw-content)}.before\\:nt-border-primary-foreground-alpha-100:before{border-color:var(--nv-color-primary-foreground-alpha-100);content:var(--tw-content)}.before\\:nt-border-secondary-foreground-alpha-100:before{border-color:var(--nv-color-secondary-foreground-alpha-100);content:var(--tw-content)}.before\\:nt-bg-dev-stripes-gradient:before{background-image:repeating-linear-gradient(135deg,oklch(from var(--nv-color-stripes) l c h/.1) 25%,oklch(from var(--nv-color-stripes) l c h/.1) 50%,oklch(from var(--nv-color-stripes) l c h/.2) 50%,oklch(from var(--nv-color-stripes) l c h/.2) 75%);content:var(--tw-content)}.before\\:nt-bg-\\[length\\:var\\(--stripes-size\\)_var\\(--stripes-size\\)\\]:before{background-size:var(--stripes-size) var(--stripes-size);content:var(--tw-content)}.before\\:nt-content-\\[\\"\\"\\]:before{--tw-content:"";content:var(--tw-content)}.before\\:\\[mask-image\\:linear-gradient\\(transparent_0\\%\\2c black\\)\\]:before{content:var(--tw-content);-webkit-mask-image:linear-gradient(#0000,#000);mask-image:linear-gradient(#0000,#000)}.after\\:nt-absolute:after{content:var(--tw-content);position:absolute}.after\\:nt-inset-0:after{content:var(--tw-content);inset:0}.after\\:-nt-top-12:after{content:var(--tw-content);top:-3rem}.after\\:nt-bottom-0:after{bottom:0;content:var(--tw-content)}.after\\:nt-left-0:after{content:var(--tw-content);left:0}.after\\:nt-left-0\\.5:after{content:var(--tw-content);left:.125rem}.after\\:nt-top-0\\.5:after{content:var(--tw-content);top:.125rem}.after\\:nt-size-3:after{content:var(--tw-content);height:.75rem;width:.75rem}.after\\:nt-h-\\[2px\\]:after{content:var(--tw-content);height:2px}.after\\:nt-w-full:after{content:var(--tw-content);width:100%}.after\\:nt-rounded-full:after{border-radius:var(--nv-radius-full);content:var(--tw-content)}.after\\:nt-rounded-lg:after{border-radius:var(--nv-radius-lg);content:var(--tw-content)}.after\\:nt-rounded-md:after{border-radius:var(--nv-radius-md);content:var(--tw-content)}.after\\:nt-rounded-xl:after{border-radius:var(--nv-radius-xl);content:var(--tw-content)}.after\\:nt-border-b-2:after{border-bottom-width:2px;content:var(--tw-content)}.after\\:nt-border-b-primary:after{border-bottom-color:var(--nv-color-primary);content:var(--tw-content)}.after\\:nt-border-b-transparent:after{border-bottom-color:#0000;content:var(--tw-content)}.after\\:nt-bg-background:after{background-color:var(--nv-color-background);content:var(--tw-content)}.after\\:nt-bg-\\[linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-background\\)_l_c_h_\\/_0\\.9\\)_55\\%\\2c transparent\\)\\]:after{background-image:linear-gradient(180deg,#0000,oklch(from var(--nv-color-background) l c h/.9) 55%,#0000);content:var(--tw-content)}.after\\:nt-bg-\\[linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-stripes\\)_l_c_h_\\/_0\\.07\\)_55\\%\\2c transparent\\)\\2c linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-background\\)_l_c_h_\\/_0\\.9\\)_55\\%\\2c transparent\\)\\]:after{background-image:linear-gradient(180deg,#0000,oklch(from var(--nv-color-stripes) l c h/.07) 55%,#0000),linear-gradient(180deg,#0000,oklch(from var(--nv-color-background) l c h/.9) 55%,#0000);content:var(--tw-content)}.after\\:nt-bg-gradient-to-b:after{background-image:linear-gradient(to bottom,var(--tw-gradient-stops));content:var(--tw-content)}.after\\:nt-from-primary-foreground-alpha-50:after{content:var(--tw-content);--tw-gradient-from:var(--nv-color-primary-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.after\\:nt-from-secondary-foreground-alpha-50:after{content:var(--tw-content);--tw-gradient-from:var(--nv-color-secondary-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.after\\:nt-to-transparent:after{content:var(--tw-content);--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.after\\:nt-opacity-0:after{content:var(--tw-content);opacity:0}.after\\:nt-transition-all:after{content:var(--tw-content);transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.after\\:nt-transition-opacity:after{content:var(--tw-content);transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.after\\:nt-duration-200:after{transition-duration:.2s}.after\\:nt-content-\\[\\"\\"\\]:after,.after\\:nt-content-\\[\\'\\'\\]:after{--tw-content:"";content:var(--tw-content)}.after\\:nt-duration-200:after{animation-duration:.2s;content:var(--tw-content)}.hover\\:nt-bg-neutral-alpha-100:hover{background-color:var(--nv-color-neutral-alpha-100)}.hover\\:nt-bg-neutral-alpha-50:hover{background-color:var(--nv-color-neutral-alpha-50)}.hover\\:nt-bg-primary-600:hover{background-color:var(--nv-color-primary-600)}.hover\\:nt-bg-primary-alpha-25:hover{background-color:var(--nv-color-primary-alpha-25)}.hover\\:nt-bg-primary-alpha-400:hover{background-color:var(--nv-color-primary-alpha-400)}.hover\\:nt-text-foreground-alpha-800:hover{color:var(--nv-color-foreground-alpha-800)}.before\\:hover\\:\\[animation-play-state\\:running\\]:hover:before{animation-play-state:running;content:var(--tw-content)}.hover\\:after\\:nt-opacity-100:hover:after{content:var(--tw-content);opacity:1}.focus\\:nt-outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus-visible\\:nt-rounded-lg:focus-visible{border-radius:var(--nv-radius-lg)}.focus-visible\\:nt-rounded-md:focus-visible{border-radius:var(--nv-radius-md)}.focus-visible\\:nt-rounded-xl:focus-visible{border-radius:var(--nv-radius-xl)}.focus-visible\\:nt-bg-neutral-alpha-50:focus-visible{background-color:var(--nv-color-neutral-alpha-50)}.focus-visible\\:nt-outline-none:focus-visible{outline:2px solid #0000;outline-offset:2px}.focus-visible\\:nt-ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\\:nt-ring-primary:focus-visible{--tw-ring-color:var(--nv-color-primary)}.focus-visible\\:nt-ring-ring:focus-visible{--tw-ring-color:var(--nv-color-ring)}.focus-visible\\:nt-ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled\\:nt-pointer-events-none:disabled{pointer-events:none}.disabled\\:nt-opacity-20:disabled{opacity:.2}.disabled\\:nt-opacity-50:disabled{opacity:.5}.nt-group:focus-within .group-focus-within\\:nt-opacity-100,.nt-group:hover .group-hover\\:nt-opacity-100{opacity:1}.nt-peer:checked~.peer-checked\\:nt-border-neutral-alpha-400{border-color:var(--nv-color-neutral-alpha-400)}.nt-peer:checked~.peer-checked\\:nt-bg-primary{background-color:var(--nv-color-primary)}.nt-peer:checked~.peer-checked\\:nt-shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-peer:checked~.peer-checked\\:after\\:nt-translate-x-full:after{content:var(--tw-content);--tw-translate-x:100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nt-peer:checked~.peer-checked\\:after\\:nt-border-background:after{border-color:var(--nv-color-background);content:var(--tw-content)}.data-\\[open\\=true\\]\\:nt-rotate-180[data-open=true]{--tw-rotate:180deg}.data-\\[open\\=true\\]\\:nt-rotate-180[data-open=true],.data-\\[open\\=true\\]\\:nt-transform[data-open=true]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\\[disabled\\=true\\]\\:nt-text-foreground-alpha-400[data-disabled=true]{color:var(--nv-color-foreground-alpha-400)}.data-\\[disabled\\=true\\]\\:nt-text-foreground-alpha-600[data-disabled=true]{color:var(--nv-color-foreground-alpha-600)}.data-\\[state\\=active\\]\\:nt-text-foreground[data-state=active]{color:var(--nv-color-foreground)}.data-\\[state\\=active\\]\\:after\\:nt-border-b-2[data-state=active]:after{border-bottom-width:2px;content:var(--tw-content)}.data-\\[state\\=active\\]\\:after\\:nt-border-primary[data-state=active]:after{border-color:var(--nv-color-primary);content:var(--tw-content)}.data-\\[state\\=active\\]\\:after\\:nt-opacity-100[data-state=active]:after{content:var(--tw-content);opacity:1}.\\[\\&\\:not\\(\\:first-child\\)\\]\\:nt-border-t:not(:first-child){border-top-width:1px}.\\[\\&_svg\\]\\:nt-pointer-events-none svg{pointer-events:none}.\\[\\&_svg\\]\\:nt-shrink-0 svg{flex-shrink:0}`;
|
|
22
22
|
|
|
23
23
|
// src/ui/config/appearanceKeys.ts
|
|
24
24
|
var appearanceKeys = [
|
|
25
25
|
// Primitives
|
|
26
26
|
"button",
|
|
27
|
+
"input",
|
|
27
28
|
"icon",
|
|
29
|
+
"badge",
|
|
28
30
|
"popoverContent",
|
|
29
31
|
"popoverTrigger",
|
|
32
|
+
"popoverClose",
|
|
30
33
|
"dropdownContent",
|
|
31
34
|
"dropdownTrigger",
|
|
32
35
|
"dropdownItem",
|
|
@@ -38,6 +41,34 @@ var appearanceKeys = [
|
|
|
38
41
|
"collapsible",
|
|
39
42
|
"tooltipContent",
|
|
40
43
|
"tooltipTrigger",
|
|
44
|
+
"datePicker",
|
|
45
|
+
"datePickerGrid",
|
|
46
|
+
"datePickerGridRow",
|
|
47
|
+
"datePickerGridCell",
|
|
48
|
+
"datePickerGridCellTrigger",
|
|
49
|
+
"datePickerTrigger",
|
|
50
|
+
"datePickerGridHeader",
|
|
51
|
+
"datePickerControl",
|
|
52
|
+
"datePickerControlPrevTrigger",
|
|
53
|
+
"datePickerControlNextTrigger",
|
|
54
|
+
"datePickerControlPrevTrigger__icon",
|
|
55
|
+
"datePickerControlNextTrigger__icon",
|
|
56
|
+
"datePickerCalendar",
|
|
57
|
+
"datePickerHeaderMonth",
|
|
58
|
+
"datePickerCalendarDay__button",
|
|
59
|
+
"timePicker",
|
|
60
|
+
"timePicker__hourSelect",
|
|
61
|
+
"timePicker__minuteSelect",
|
|
62
|
+
"timePicker__periodSelect",
|
|
63
|
+
"timePicker__separator",
|
|
64
|
+
"timePickerHour__input",
|
|
65
|
+
"timePickerMinute__input",
|
|
66
|
+
"snoozeDatePicker",
|
|
67
|
+
"snoozeDatePicker__actions",
|
|
68
|
+
"snoozeDatePickerCancel__button",
|
|
69
|
+
"snoozeDatePickerApply__button",
|
|
70
|
+
"snoozeDatePicker__timePickerContainer",
|
|
71
|
+
"snoozeDatePicker__timePickerLabel",
|
|
41
72
|
"back__button",
|
|
42
73
|
"skeletonText",
|
|
43
74
|
"skeletonAvatar",
|
|
@@ -95,10 +126,14 @@ var appearanceKeys = [
|
|
|
95
126
|
"notificationUnread__button",
|
|
96
127
|
"notificationArchive__button",
|
|
97
128
|
"notificationUnarchive__button",
|
|
129
|
+
"notificationSnooze__button",
|
|
130
|
+
"notificationUnsnooze__button",
|
|
98
131
|
"notificationRead__icon",
|
|
99
132
|
"notificationUnread__icon",
|
|
100
133
|
"notificationArchive__icon",
|
|
101
134
|
"notificationUnarchive__icon",
|
|
135
|
+
"notificationSnooze__icon",
|
|
136
|
+
"notificationUnsnooze__icon",
|
|
102
137
|
// Notifications tabs
|
|
103
138
|
"notificationsTabs__tabsRoot",
|
|
104
139
|
"notificationsTabs__tabsList",
|
|
@@ -171,6 +206,15 @@ var appearanceKeys = [
|
|
|
171
206
|
"preferencesList__skeletonSwitch",
|
|
172
207
|
"preferencesList__skeletonSwitchThumb",
|
|
173
208
|
"preferencesList__skeletonText",
|
|
209
|
+
// Notification Snooze
|
|
210
|
+
"notificationSnooze__dropdownContent",
|
|
211
|
+
"notificationSnooze__dropdownItem",
|
|
212
|
+
"notificationSnooze__dropdownItem__icon",
|
|
213
|
+
"notificationSnoozeCustomTime_popoverContent",
|
|
214
|
+
// Notification Delivered At
|
|
215
|
+
"notificationDeliveredAt__badge",
|
|
216
|
+
"notificationDeliveredAt__icon",
|
|
217
|
+
"notificationSnoozedUntil__icon",
|
|
174
218
|
// Text formatting
|
|
175
219
|
"strong"
|
|
176
220
|
];
|
|
@@ -179,9 +223,11 @@ var defaultLocalization = {
|
|
|
179
223
|
"inbox.filters.dropdownOptions.unread": "Unread only",
|
|
180
224
|
"inbox.filters.dropdownOptions.default": "Unread & read",
|
|
181
225
|
"inbox.filters.dropdownOptions.archived": "Archived",
|
|
226
|
+
"inbox.filters.dropdownOptions.snoozed": "Snoozed",
|
|
182
227
|
"inbox.filters.labels.unread": "Unread",
|
|
183
228
|
"inbox.filters.labels.default": "Inbox",
|
|
184
229
|
"inbox.filters.labels.archived": "Archived",
|
|
230
|
+
"inbox.filters.labels.snoozed": "Snoozed",
|
|
185
231
|
"notifications.emptyNotice": "Quiet for now. Check back later.",
|
|
186
232
|
"notifications.actions.readAll": "Mark all as read",
|
|
187
233
|
"notifications.actions.archiveAll": "Archive all",
|
|
@@ -191,11 +237,24 @@ var defaultLocalization = {
|
|
|
191
237
|
"notification.actions.unread.tooltip": "Mark as unread",
|
|
192
238
|
"notification.actions.archive.tooltip": "Archive",
|
|
193
239
|
"notification.actions.unarchive.tooltip": "Unarchive",
|
|
240
|
+
"notification.actions.snooze.tooltip": "Snooze",
|
|
241
|
+
"notification.actions.unsnooze.tooltip": "Unsnooze",
|
|
242
|
+
"notification.snoozedUntil": "Snoozed until",
|
|
194
243
|
"preferences.title": "Preferences",
|
|
195
244
|
"preferences.emptyNotice": "No notification specific preferences yet.",
|
|
196
245
|
"preferences.global": "Global Preferences",
|
|
197
246
|
"preferences.workflow.disabled.notice": "Contact admin to enable subscription management for this critical notification.",
|
|
198
|
-
"preferences.workflow.disabled.tooltip": "Contact admin to edit"
|
|
247
|
+
"preferences.workflow.disabled.tooltip": "Contact admin to edit",
|
|
248
|
+
"snooze.datePicker.timePickerLabel": "Time",
|
|
249
|
+
"snooze.datePicker.apply": "Apply",
|
|
250
|
+
"snooze.datePicker.cancel": "Cancel",
|
|
251
|
+
"snooze.options.anHourFromNow": "An hour from now",
|
|
252
|
+
"snooze.datePicker.pastDateTooltip": "Selected time must be at least 3 minutes in the future",
|
|
253
|
+
"snooze.datePicker.noDateSelectedTooltip": "Please select a date",
|
|
254
|
+
"snooze.datePicker.exceedingLimitTooltip": ({ days }) => `Selected time cannot exceed ${days === 1 ? "24 hours" : `${days} days`} from now`,
|
|
255
|
+
"snooze.options.customTime": "Custom time...",
|
|
256
|
+
"snooze.options.inOneDay": "Tomorrow",
|
|
257
|
+
"snooze.options.inOneWeek": "Next week"
|
|
199
258
|
};
|
|
200
259
|
var [dynamicLocalization, setDynamicLocalization] = solidJs.createSignal({});
|
|
201
260
|
|
|
@@ -344,18 +403,39 @@ function formatToRelativeTime({
|
|
|
344
403
|
const elapsed = toDate.getTime() - fromDate.getTime();
|
|
345
404
|
const formatter = new Intl.RelativeTimeFormat(locale, { style: "narrow" });
|
|
346
405
|
const diffInSeconds = Math.floor(elapsed / 1e3);
|
|
347
|
-
if (diffInSeconds < SECONDS.inMinute) {
|
|
406
|
+
if (Math.abs(diffInSeconds) < SECONDS.inMinute) {
|
|
348
407
|
return "Just now";
|
|
349
|
-
} else if (diffInSeconds < SECONDS.inHour) {
|
|
408
|
+
} else if (Math.abs(diffInSeconds) < SECONDS.inHour) {
|
|
350
409
|
return formatter.format(Math.floor(-diffInSeconds / SECONDS.inMinute), "minute");
|
|
351
|
-
} else if (diffInSeconds < SECONDS.inDay) {
|
|
410
|
+
} else if (Math.abs(diffInSeconds) < SECONDS.inDay) {
|
|
352
411
|
return formatter.format(Math.floor(-diffInSeconds / SECONDS.inHour), "hour");
|
|
353
|
-
} else if (diffInSeconds < SECONDS.inMonth) {
|
|
412
|
+
} else if (Math.abs(diffInSeconds) < SECONDS.inMonth) {
|
|
354
413
|
return formatter.format(Math.floor(-diffInSeconds / SECONDS.inDay), "day");
|
|
355
414
|
} else {
|
|
356
415
|
return new Intl.DateTimeFormat(locale, { month: "short", day: "numeric" }).format(fromDate);
|
|
357
416
|
}
|
|
358
417
|
}
|
|
418
|
+
function formatSnoozedUntil({ untilDate, locale = DEFAULT_LOCALE }) {
|
|
419
|
+
const remaining = untilDate.getTime() - (/* @__PURE__ */ new Date()).getTime();
|
|
420
|
+
const diffInSeconds = Math.floor(remaining / 1e3);
|
|
421
|
+
if (diffInSeconds < 0) {
|
|
422
|
+
return "soon";
|
|
423
|
+
}
|
|
424
|
+
if (diffInSeconds < SECONDS.inMinute) {
|
|
425
|
+
return "a moment";
|
|
426
|
+
} else if (diffInSeconds < SECONDS.inHour) {
|
|
427
|
+
const minutes = Math.floor(diffInSeconds / SECONDS.inMinute);
|
|
428
|
+
return `${minutes} ${minutes === 1 ? "minute" : "minutes"}`;
|
|
429
|
+
} else if (diffInSeconds < SECONDS.inDay) {
|
|
430
|
+
const hours = Math.floor(diffInSeconds / SECONDS.inHour);
|
|
431
|
+
return `${hours} ${hours === 1 ? "hour" : "hours"}`;
|
|
432
|
+
} else if (diffInSeconds < SECONDS.inWeek) {
|
|
433
|
+
const days = Math.floor(diffInSeconds / SECONDS.inDay);
|
|
434
|
+
return `${days} ${days === 1 ? "day" : "days"}`;
|
|
435
|
+
} else {
|
|
436
|
+
return new Intl.DateTimeFormat(locale, { month: "short", day: "numeric" }).format(untilDate);
|
|
437
|
+
}
|
|
438
|
+
}
|
|
359
439
|
var twMerge = tailwindMerge.extendTailwindMerge({
|
|
360
440
|
prefix: "nt-"
|
|
361
441
|
});
|
|
@@ -556,7 +636,6 @@ var useStyle = () => {
|
|
|
556
636
|
setIsServer(false);
|
|
557
637
|
});
|
|
558
638
|
const styleFuncMemo = solidJs.createMemo(() => (appearanceKey, className) => {
|
|
559
|
-
var _a, _b;
|
|
560
639
|
const appearanceKeyParts = appearanceKey.split("__");
|
|
561
640
|
let finalAppearanceKeys = [];
|
|
562
641
|
for (let i = 0; i < appearanceKeyParts.length; i += 1) {
|
|
@@ -579,9 +658,10 @@ var useStyle = () => {
|
|
|
579
658
|
});
|
|
580
659
|
const finalClassName = classes.filter((className2) => !finalAppearanceKeys.includes(className2)).join(" ");
|
|
581
660
|
let appearanceClassnames = [];
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
661
|
+
const reversedFinalAppearanceKeys = finalAppearanceKeys.reverse();
|
|
662
|
+
for (let i = 0; i < reversedFinalAppearanceKeys.length; i += 1) {
|
|
663
|
+
if (typeof appearance.elements()[reversedFinalAppearanceKeys[i]] === "string") {
|
|
664
|
+
appearanceClassnames.push(appearance.elements()[reversedFinalAppearanceKeys[i]]);
|
|
585
665
|
}
|
|
586
666
|
}
|
|
587
667
|
appearanceClassnames = [publicFacingTwMerge(appearanceClassnames)];
|
|
@@ -820,6 +900,7 @@ var NotificationStatus = /* @__PURE__ */ ((NotificationStatus2) => {
|
|
|
820
900
|
NotificationStatus2["UNREAD_READ"] = "unreadRead";
|
|
821
901
|
NotificationStatus2["UNREAD"] = "unread";
|
|
822
902
|
NotificationStatus2["ARCHIVED"] = "archived";
|
|
903
|
+
NotificationStatus2["SNOOZED"] = "snoozed";
|
|
823
904
|
return NotificationStatus2;
|
|
824
905
|
})(NotificationStatus || {});
|
|
825
906
|
|
|
@@ -827,13 +908,18 @@ var NotificationStatus = /* @__PURE__ */ ((NotificationStatus2) => {
|
|
|
827
908
|
var InboxContext = solidJs.createContext(void 0);
|
|
828
909
|
var STATUS_TO_FILTER = {
|
|
829
910
|
["unreadRead" /* UNREAD_READ */]: {
|
|
830
|
-
archived: false
|
|
911
|
+
archived: false,
|
|
912
|
+
snoozed: false
|
|
831
913
|
},
|
|
832
914
|
["unread" /* UNREAD */]: {
|
|
833
|
-
read: false
|
|
915
|
+
read: false,
|
|
916
|
+
snoozed: false
|
|
834
917
|
},
|
|
835
918
|
["archived" /* ARCHIVED */]: {
|
|
836
919
|
archived: true
|
|
920
|
+
},
|
|
921
|
+
["snoozed" /* SNOOZED */]: {
|
|
922
|
+
snoozed: true
|
|
837
923
|
}
|
|
838
924
|
};
|
|
839
925
|
var DEFAULT_LIMIT = 10;
|
|
@@ -849,6 +935,8 @@ var InboxProvider = (props) => {
|
|
|
849
935
|
}));
|
|
850
936
|
const [hideBranding, setHideBranding] = solidJs.createSignal(false);
|
|
851
937
|
const [isDevelopmentMode, setIsDevelopmentMode] = solidJs.createSignal(false);
|
|
938
|
+
const [maxSnoozeDurationHours, setMaxSnoozeDurationHours] = solidJs.createSignal(0);
|
|
939
|
+
const isSnoozeEnabled = solidJs.createMemo(() => maxSnoozeDurationHours() > 0);
|
|
852
940
|
const [preferencesFilter, setPreferencesFilter] = solidJs.createSignal(props.preferencesFilter);
|
|
853
941
|
const setNewStatus = (newStatus) => {
|
|
854
942
|
setStatus(newStatus);
|
|
@@ -905,6 +993,7 @@ var InboxProvider = (props) => {
|
|
|
905
993
|
}
|
|
906
994
|
setHideBranding(data.removeNovuBranding);
|
|
907
995
|
setIsDevelopmentMode(data.isDevelopmentMode);
|
|
996
|
+
setMaxSnoozeDurationHours(data.maxSnoozeDurationHours);
|
|
908
997
|
}
|
|
909
998
|
});
|
|
910
999
|
return web.createComponent(InboxContext.Provider, {
|
|
@@ -922,7 +1011,9 @@ var InboxProvider = (props) => {
|
|
|
922
1011
|
navigate,
|
|
923
1012
|
hideBranding,
|
|
924
1013
|
preferencesFilter,
|
|
925
|
-
isDevelopmentMode
|
|
1014
|
+
isDevelopmentMode,
|
|
1015
|
+
maxSnoozeDurationHours,
|
|
1016
|
+
isSnoozeEnabled
|
|
926
1017
|
},
|
|
927
1018
|
get children() {
|
|
928
1019
|
return props.children;
|
|
@@ -938,7 +1029,7 @@ var useInboxContext = () => {
|
|
|
938
1029
|
};
|
|
939
1030
|
var NovuContext = solidJs.createContext(void 0);
|
|
940
1031
|
function NovuProvider(props) {
|
|
941
|
-
const novu = solidJs.createMemo(() => props.novu || new
|
|
1032
|
+
const novu = solidJs.createMemo(() => props.novu || new chunkKIOGWIKT_js.Novu(props.options));
|
|
942
1033
|
return web.createComponent(NovuContext.Provider, {
|
|
943
1034
|
get value() {
|
|
944
1035
|
return novu();
|
|
@@ -977,7 +1068,8 @@ var CountProvider = (props) => {
|
|
|
977
1068
|
const filters = tabs().map((tab) => ({
|
|
978
1069
|
tags: getTagsFromTab(tab),
|
|
979
1070
|
read: false,
|
|
980
|
-
archived: false
|
|
1071
|
+
archived: false,
|
|
1072
|
+
snoozed: false
|
|
981
1073
|
}));
|
|
982
1074
|
const {
|
|
983
1075
|
data
|
|
@@ -1054,7 +1146,7 @@ var CountProvider = (props) => {
|
|
|
1054
1146
|
eventHandler: (_0) => chunk7B52C2XE_js.__async(void 0, [_0], function* ({
|
|
1055
1147
|
result: notification
|
|
1056
1148
|
}) {
|
|
1057
|
-
if (filter().archived) {
|
|
1149
|
+
if (filter().archived || filter().snoozed) {
|
|
1058
1150
|
return;
|
|
1059
1151
|
}
|
|
1060
1152
|
const tagsMap = tabs().reduce((acc, tab) => {
|
|
@@ -1306,7 +1398,7 @@ var InApp = (props) => {
|
|
|
1306
1398
|
return _el$;
|
|
1307
1399
|
})();
|
|
1308
1400
|
};
|
|
1309
|
-
var _tmpl$10 = /* @__PURE__ */ web.template(`<svg xmlns=http://www.w3.org/2000/svg
|
|
1401
|
+
var _tmpl$10 = /* @__PURE__ */ web.template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M2.29671 10C1.78742 10 1.39807 9.85716 1.12864 9.57149C0.862497 9.28581 0.729426 8.86623 0.729426 8.31274V2.64594H1.69543V8.29668C1.69543 8.52163 1.74964 8.69487 1.85806 8.81624C1.96978 8.93408 2.12914 8.99301 2.33614 8.99301H7.66389C7.86764 8.99301 8.02366 8.93408 8.13209 8.81624C8.24385 8.69487 8.29965 8.52163 8.29965 8.29668V2.64594H9.27059V8.31274C9.27059 8.8627 9.13591 9.28048 8.86648 9.56608C8.59705 9.85536 8.20931 10 7.70333 10H2.29671ZM3.41056 5.34543C3.29556 5.34543 3.20028 5.30438 3.1247 5.22226C3.04913 5.14015 3.01134 5.03304 3.01134 4.90089V4.72949C3.01134 4.59737 3.04749 4.49204 3.11977 4.41348C3.19535 4.33492 3.29227 4.29564 3.41056 4.29564H6.5944C6.71271 4.29564 6.80795 4.33492 6.88026 4.41348C6.95582 4.49204 6.9936 4.59737 6.9936 4.72949V4.90089C6.9936 5.03304 6.95582 5.14015 6.88026 5.22226C6.8047 5.30438 6.70939 5.34543 6.5944 5.34543H3.41056ZM1.05964 3.16014C0.724502 3.16014 0.463285 3.05301 0.276004 2.83877C0.0920037 2.62095 0 2.33172 0 1.97107V1.18907C0 0.824846 0.0952841 0.535614 0.28586 0.321373C0.476428 0.107124 0.734358 0 1.05964 0H8.94536C9.27715 0 9.53511 0.107124 9.71911 0.321373C9.90642 0.535614 10 0.824846 10 1.18907V1.97107C10 2.33172 9.90642 2.62095 9.71911 2.83877C9.53511 3.05301 9.27715 3.16014 8.94536 3.16014H1.05964ZM1.24693 2.19067H8.75805C8.87304 2.19067 8.95516 2.16211 9.00448 2.10497C9.05372 2.04427 9.07838 1.95322 9.07838 1.83181V1.32833C9.07838 1.20335 9.05372 1.1123 9.00448 1.05517C8.95516 0.99803 8.87304 0.969462 8.75805 0.969462H1.24693C1.13193 0.969462 1.04814 0.99803 0.995567 1.05517C0.946281 1.1123 0.921638 1.20335 0.921638 1.32833V1.83181C0.921638 1.95322 0.946281 2.04427 0.995567 2.10497C1.04814 2.16211 1.13193 2.19067 1.24693 2.19067Z"fill=currentColor>`);
|
|
1310
1402
|
var MarkAsArchived = (props) => {
|
|
1311
1403
|
return (() => {
|
|
1312
1404
|
var _el$ = _tmpl$10();
|
|
@@ -1314,7 +1406,7 @@ var MarkAsArchived = (props) => {
|
|
|
1314
1406
|
return _el$;
|
|
1315
1407
|
})();
|
|
1316
1408
|
};
|
|
1317
|
-
var _tmpl$11 = /* @__PURE__ */ web.template(`<svg xmlns=http://www.w3.org/2000/svg
|
|
1409
|
+
var _tmpl$11 = /* @__PURE__ */ web.template(`<svg viewBox="0 0 11 11"fill=none xmlns=http://www.w3.org/2000/svg><path d="M2.17256 10.999C1.69081 10.999 1.3225 10.8562 1.06763 10.5705C0.815875 10.2848 0.689997 9.86525 0.689997 9.31177V3.64497H1.60378V9.2957C1.60378 9.52066 1.65506 9.6939 1.75763 9.81526C1.8633 9.93311 2.01405 9.99203 2.20986 9.99203H7.24963C7.44236 9.99203 7.58995 9.93311 7.69252 9.81526C7.79823 9.6939 7.85102 9.52066 7.85102 9.2957V3.64497H8.76947V9.31177C8.76947 9.86173 8.64208 10.2795 8.38721 10.5651C8.13235 10.8544 7.76556 10.999 7.28693 10.999H2.17256ZM1.00236 4.15916C0.68534 4.15916 0.438242 4.05204 0.261085 3.83779C0.0870305 3.61997 0 3.33074 0 2.97009V2.18809C0 1.82387 0.0901336 1.53464 0.270408 1.3204C0.450675 1.10615 0.694663 0.999023 1.00236 0.999023H8.46182C8.77568 0.999023 9.0197 1.10615 9.19375 1.3204C9.37094 1.53464 9.45946 1.82387 9.45946 2.18809V2.97009C9.45946 3.33074 9.37094 3.61997 9.19375 3.83779C9.0197 4.05204 8.77568 4.15916 8.46182 4.15916H1.00236ZM1.17953 3.1897H8.28464C8.39342 3.1897 8.4711 3.16113 8.51775 3.10399C8.56433 3.04329 8.58765 2.95224 8.58765 2.83083V2.32735C8.58765 2.20238 8.56433 2.11132 8.51775 2.05419C8.4711 1.99705 7.51461 1.96849 7.40583 1.96849H1.17953C1.07074 1.96849 0.991485 1.99705 0.941753 2.05419C0.895131 2.11132 0.87182 2.20238 0.87182 2.32735V2.83083C0.87182 2.95224 0.895131 3.04329 0.941753 3.10399C0.991485 3.16113 1.07074 3.1897 1.17953 3.1897Z"fill=currentColor></path><path d="M9.67298 0.553711C9.84703 0.556646 10.0146 0.614475 10.1535 0.716797L10.2208 0.771484L10.2814 0.833008C10.3958 0.960612 10.4679 1.11928 10.4913 1.28711L10.4992 1.37109L10.4982 1.45605C10.4872 1.64689 10.4124 1.8301 10.2833 1.97559L10.2843 1.97656L7.55482 5.15039L7.55384 5.14941C7.40234 5.3265 7.18382 5.43557 6.94642 5.44336L6.93861 5.44434H6.92005V5.44336C6.69203 5.44397 6.47619 5.35201 6.31947 5.19141L6.31849 5.18945L5.29505 4.13184C5.08531 3.91498 5.00658 3.60427 5.08118 3.31641L5.11634 3.21094C5.2129 2.97124 5.41476 2.78187 5.67396 2.70996L5.78626 2.68652C6.01138 2.65637 6.23763 2.72008 6.41419 2.85938L6.49818 2.93555L6.8849 3.33496L9.0138 0.859375V0.860352C9.15512 0.688807 9.35911 0.576792 9.58509 0.556641L9.67298 0.553711Z"fill=currentColor stroke=white>`);
|
|
1318
1410
|
var MarkAsArchivedRead = (props) => {
|
|
1319
1411
|
return (() => {
|
|
1320
1412
|
var _el$ = _tmpl$11();
|
|
@@ -1322,7 +1414,7 @@ var MarkAsArchivedRead = (props) => {
|
|
|
1322
1414
|
return _el$;
|
|
1323
1415
|
})();
|
|
1324
1416
|
};
|
|
1325
|
-
var _tmpl$12 = /* @__PURE__ */ web.template(`<svg xmlns=http://www.w3.org/2000/svg
|
|
1417
|
+
var _tmpl$12 = /* @__PURE__ */ web.template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><g clip-path=url(#clip0_3445_1172)><path d="M9 9.99902H1C0.867383 9.99902 0.7402 9.94635 0.64645 9.85257C0.552667 9.75882 0.5 9.63164 0.5 9.49902V0.499023C0.5 0.366407 0.552669 0.239223 0.64645 0.145473C0.7402 0.0516901 0.867383 -0.000976562 1 -0.000976562H6.25C6.42865 -0.000976562 6.59368 0.0943401 6.68301 0.249023C6.77233 0.403707 6.77233 0.59434 6.68301 0.749023C6.59368 0.903707 6.42865 0.999023 6.25 0.999023H1.5V8.99902H8.5V4.49902C8.5 4.32037 8.59532 4.15534 8.75 4.06602C8.90468 3.97669 9.09532 3.97669 9.25 4.06602C9.40468 4.15534 9.5 4.32037 9.5 4.49902V9.49902C9.5 9.63164 9.44733 9.75882 9.35355 9.85257C9.2598 9.94636 9.13262 9.99902 9 9.99902Z"fill=currentColor></path><path d="M7.5 8.24902H2.5C2.32135 8.24902 2.15632 8.15371 2.06699 7.99902C1.97767 7.84434 1.97767 7.65371 2.06699 7.49902C2.15632 7.34434 2.32135 7.24902 2.5 7.24902H7.5C7.67865 7.24902 7.84368 7.34434 7.93301 7.49902C8.02233 7.65371 8.02233 7.84434 7.93301 7.99902C7.84368 8.15371 7.67865 8.24902 7.5 8.24902Z"fill=currentColor></path><path d="M4.75 6.49901C4.61709 6.49979 4.48936 6.44761 4.39498 6.35403L2.89498 4.85403C2.76816 4.72717 2.71865 4.54235 2.76507 4.36907C2.81149 4.19583 2.94681 4.06051 3.12005 4.01409C3.29332 3.96767 3.47816 4.01718 3.60501 4.14401L4.73001 5.269L8.37501 1.16901C8.46056 1.06279 8.58578 0.996155 8.72169 0.984497C8.8576 0.972843 8.99233 1.01718 9.09474 1.10728C9.19712 1.19738 9.25825 1.32541 9.26398 1.46167C9.26968 1.59796 9.21948 1.73065 9.12502 1.82902L5.12502 6.32902C5.03371 6.43306 4.90337 6.49461 4.76502 6.49901L4.75 6.49901Z"fill=currentColor></path></g><defs><clipPath id=clip0_3445_1172><rect width=10 height=10 fill=white transform="translate(0 -0.000976562)">`);
|
|
1326
1418
|
var MarkAsRead = (props) => {
|
|
1327
1419
|
return (() => {
|
|
1328
1420
|
var _el$ = _tmpl$12();
|
|
@@ -1338,7 +1430,7 @@ var MarkAsUnarchived = (props) => {
|
|
|
1338
1430
|
return _el$;
|
|
1339
1431
|
})();
|
|
1340
1432
|
};
|
|
1341
|
-
var _tmpl$14 = /* @__PURE__ */ web.template(`<svg xmlns=http://www.w3.org/2000/svg
|
|
1433
|
+
var _tmpl$14 = /* @__PURE__ */ web.template(`<svg viewBox="0 0 11 11"fill=none xmlns=http://www.w3.org/2000/svg><path d="M6.8 1.49902H1.5C0.947715 1.49902 0.5 1.94674 0.5 2.49902V9.49902C0.5 10.0513 0.947715 10.499 1.5 10.499H8.5C9.05228 10.499 9.5 10.0513 9.5 9.49902V4.19902"stroke=currentColor stroke-miterlimit=1 stroke-linecap=round></path><circle cx=9.25 cy=1.74902 r=1.25 fill=currentColor>`);
|
|
1342
1434
|
var MarkAsUnread = (props) => {
|
|
1343
1435
|
return (() => {
|
|
1344
1436
|
var _el$ = _tmpl$14();
|
|
@@ -1378,7 +1470,7 @@ var Sms = (props) => {
|
|
|
1378
1470
|
return _el$;
|
|
1379
1471
|
})();
|
|
1380
1472
|
};
|
|
1381
|
-
var _tmpl$19 = /* @__PURE__ */ web.template(`<svg xmlns=http://www.w3.org/2000/svg
|
|
1473
|
+
var _tmpl$19 = /* @__PURE__ */ web.template(`<svg viewBox="0 0 10 8"fill=none xmlns=http://www.w3.org/2000/svg><path d="M1.0119 0.347055C1.06274 0.143703 1.26565 -0.000976562 1.5 -0.000976562H8.5C8.73435 -0.000976562 8.93725 0.143703 8.9881 0.347055L9.9881 4.34707C9.996 4.37871 10 4.41102 10 4.44347V7.55458C10 7.80005 9.77615 7.99902 9.5 7.99902H0.5C0.22386 7.99902 0 7.80005 0 7.55458V4.44347C0 4.41102 0.00399495 4.37871 0.011905 4.34707L1.0119 0.347055ZM1.90108 0.887912L1.12331 3.99902H3.5C3.5 4.73542 4.17155 5.33236 5 5.33236C5.82845 5.33236 6.5 4.73542 6.5 3.99902H8.8767L8.0989 0.887912H1.90108ZM7.292 4.88791C6.9062 5.67276 6.02515 6.22125 5 6.22125C3.97484 6.22125 3.0938 5.67276 2.70802 4.88791H1V7.11013H9V4.88791H7.292Z"fill=currentColor>`);
|
|
1382
1474
|
var UnreadRead = (props) => {
|
|
1383
1475
|
return (() => {
|
|
1384
1476
|
var _el$ = _tmpl$19();
|
|
@@ -1558,7 +1650,8 @@ var PopoverClose = (props) => {
|
|
|
1558
1650
|
const {
|
|
1559
1651
|
onClose
|
|
1560
1652
|
} = usePopover();
|
|
1561
|
-
const
|
|
1653
|
+
const style = useStyle();
|
|
1654
|
+
const [local, rest] = solidJs.splitProps(props, ["onClick", "asChild", "appearanceKey", "class"]);
|
|
1562
1655
|
const handleClick = (e) => {
|
|
1563
1656
|
if (typeof local.onClick === "function") {
|
|
1564
1657
|
local.onClick(e);
|
|
@@ -1576,38 +1669,41 @@ var PopoverClose = (props) => {
|
|
|
1576
1669
|
return (() => {
|
|
1577
1670
|
var _el$ = _tmpl$24();
|
|
1578
1671
|
_el$.$$click = handleClick;
|
|
1579
|
-
web.spread(_el$,
|
|
1672
|
+
web.spread(_el$, web.mergeProps({
|
|
1673
|
+
get ["class"]() {
|
|
1674
|
+
return style(local.appearanceKey || "popoverClose", local.class);
|
|
1675
|
+
}
|
|
1676
|
+
}, rest), false, false);
|
|
1580
1677
|
return _el$;
|
|
1581
1678
|
})();
|
|
1582
1679
|
};
|
|
1583
1680
|
web.delegateEvents(["click"]);
|
|
1584
1681
|
var _tmpl$25 = /* @__PURE__ */ web.template(`<div>`);
|
|
1585
|
-
var
|
|
1586
|
-
const
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
} = useAppearance();
|
|
1590
|
-
const style = useStyle();
|
|
1591
|
-
const {
|
|
1592
|
-
hideBranding
|
|
1593
|
-
} = useInboxContext();
|
|
1594
|
-
return [web.createComponent(solidJs.Show, {
|
|
1595
|
-
get when() {
|
|
1596
|
-
return !hideBranding();
|
|
1597
|
-
},
|
|
1598
|
-
children: new Comment(" Powered by Novu - https://novu.co ")
|
|
1599
|
-
}), (() => {
|
|
1682
|
+
var Portal = (props) => {
|
|
1683
|
+
const appearance = useAppearance();
|
|
1684
|
+
let currentElement;
|
|
1685
|
+
return [(() => {
|
|
1600
1686
|
var _el$ = _tmpl$25();
|
|
1601
|
-
web.
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
get ["class"]() {
|
|
1606
|
-
return style("root"), cn("novu", id(), "nt-text-foreground nt-h-full");
|
|
1607
|
-
}
|
|
1608
|
-
}, rest), false, false);
|
|
1687
|
+
web.use((el) => {
|
|
1688
|
+
currentElement = el;
|
|
1689
|
+
}, _el$);
|
|
1690
|
+
_el$.style.setProperty("display", "none");
|
|
1609
1691
|
return _el$;
|
|
1610
|
-
})()
|
|
1692
|
+
})(), web.createComponent(web.Portal, web.mergeProps({
|
|
1693
|
+
get mount() {
|
|
1694
|
+
return closestNovuRootParent(currentElement, appearance.id());
|
|
1695
|
+
}
|
|
1696
|
+
}, props))];
|
|
1697
|
+
};
|
|
1698
|
+
var closestNovuRootParent = (el, id) => {
|
|
1699
|
+
let element = el;
|
|
1700
|
+
while (element && element.id !== `novu-root-${id}`) {
|
|
1701
|
+
element = element.parentElement;
|
|
1702
|
+
}
|
|
1703
|
+
if (element && element.id === `novu-root-${id}`) {
|
|
1704
|
+
return element;
|
|
1705
|
+
}
|
|
1706
|
+
return void 0;
|
|
1611
1707
|
};
|
|
1612
1708
|
var PopoverContext = solidJs.createContext(void 0);
|
|
1613
1709
|
function PopoverRoot(props) {
|
|
@@ -1624,7 +1720,7 @@ function PopoverRoot(props) {
|
|
|
1624
1720
|
const [reference, setReference] = solidJs.createSignal(null);
|
|
1625
1721
|
const [floating, setFloating] = solidJs.createSignal(null);
|
|
1626
1722
|
const position = solidFloatingUi.useFloating(reference, floating, {
|
|
1627
|
-
strategy: "
|
|
1723
|
+
strategy: "absolute",
|
|
1628
1724
|
placement: props.placement,
|
|
1629
1725
|
whileElementsMounted: dom.autoUpdate,
|
|
1630
1726
|
middleware: [dom.offset(10), dom.flip({
|
|
@@ -1671,7 +1767,7 @@ function usePopover() {
|
|
|
1671
1767
|
|
|
1672
1768
|
// src/ui/components/primitives/Popover/PopoverContent.tsx
|
|
1673
1769
|
var _tmpl$26 = /* @__PURE__ */ web.template(`<div>`);
|
|
1674
|
-
var popoverContentVariants = () => cn("nt-w-[400px] nt-h-[600px] nt-rounded-xl nt-bg-background", "nt-shadow-popover nt-animate-in nt-slide-in-from-top-2 nt-fade-in nt-
|
|
1770
|
+
var popoverContentVariants = () => cn("nt-w-[400px] nt-h-[600px] nt-rounded-xl nt-bg-background", "nt-shadow-popover nt-animate-in nt-slide-in-from-top-2 nt-fade-in nt-cursor-default nt-flex nt-flex-col nt-overflow-hidden nt-border nt-border-border nt-z-10");
|
|
1675
1771
|
var PopoverContentBody = (props) => {
|
|
1676
1772
|
const {
|
|
1677
1773
|
open,
|
|
@@ -1697,7 +1793,7 @@ var PopoverContentBody = (props) => {
|
|
|
1697
1793
|
web.use(setFloating, _el$);
|
|
1698
1794
|
web.spread(_el$, web.mergeProps({
|
|
1699
1795
|
get ["class"]() {
|
|
1700
|
-
return
|
|
1796
|
+
return style(local.appearanceKey || "popoverContent", cn(popoverContentVariants(), local.class));
|
|
1701
1797
|
},
|
|
1702
1798
|
get style() {
|
|
1703
1799
|
return floatingStyles();
|
|
@@ -1710,7 +1806,6 @@ var PopoverContentBody = (props) => {
|
|
|
1710
1806
|
})();
|
|
1711
1807
|
};
|
|
1712
1808
|
var PopoverContent = (props) => {
|
|
1713
|
-
const [local, rest] = solidJs.splitProps(props, ["portal"]);
|
|
1714
1809
|
const {
|
|
1715
1810
|
open,
|
|
1716
1811
|
onClose,
|
|
@@ -1751,28 +1846,26 @@ var PopoverContent = (props) => {
|
|
|
1751
1846
|
return open();
|
|
1752
1847
|
},
|
|
1753
1848
|
get children() {
|
|
1754
|
-
return web.createComponent(
|
|
1755
|
-
get when() {
|
|
1756
|
-
return local.portal;
|
|
1757
|
-
},
|
|
1758
|
-
get fallback() {
|
|
1759
|
-
return web.createComponent(PopoverContentBody, rest);
|
|
1760
|
-
},
|
|
1849
|
+
return web.createComponent(Portal, {
|
|
1761
1850
|
get children() {
|
|
1762
|
-
return web.createComponent(
|
|
1763
|
-
get children() {
|
|
1764
|
-
return web.createComponent(Root, {
|
|
1765
|
-
get children() {
|
|
1766
|
-
return web.createComponent(PopoverContentBody, rest);
|
|
1767
|
-
}
|
|
1768
|
-
});
|
|
1769
|
-
}
|
|
1770
|
-
});
|
|
1851
|
+
return web.createComponent(PopoverContentBody, props);
|
|
1771
1852
|
}
|
|
1772
1853
|
});
|
|
1773
1854
|
}
|
|
1774
1855
|
});
|
|
1775
1856
|
};
|
|
1857
|
+
|
|
1858
|
+
// src/ui/helpers/mergeRefs.ts
|
|
1859
|
+
function chain(callbacks) {
|
|
1860
|
+
return (...args) => {
|
|
1861
|
+
for (const callback of callbacks) callback && callback(...args);
|
|
1862
|
+
};
|
|
1863
|
+
}
|
|
1864
|
+
function mergeRefs(...refs) {
|
|
1865
|
+
return chain(refs);
|
|
1866
|
+
}
|
|
1867
|
+
|
|
1868
|
+
// src/ui/components/primitives/Popover/PopoverTrigger.tsx
|
|
1776
1869
|
var _tmpl$27 = /* @__PURE__ */ web.template(`<button>`);
|
|
1777
1870
|
var PopoverTrigger = (props) => {
|
|
1778
1871
|
const {
|
|
@@ -1780,26 +1873,31 @@ var PopoverTrigger = (props) => {
|
|
|
1780
1873
|
onToggle
|
|
1781
1874
|
} = usePopover();
|
|
1782
1875
|
const style = useStyle();
|
|
1783
|
-
const [local, rest] = solidJs.splitProps(props, ["appearanceKey", "asChild", "onClick"]);
|
|
1876
|
+
const [local, rest] = solidJs.splitProps(props, ["appearanceKey", "asChild", "onClick", "ref"]);
|
|
1784
1877
|
const handleClick = (e) => {
|
|
1785
1878
|
if (typeof local.onClick === "function") {
|
|
1786
1879
|
local.onClick(e);
|
|
1787
1880
|
}
|
|
1788
1881
|
onToggle();
|
|
1789
1882
|
};
|
|
1883
|
+
const ref = solidJs.createMemo(() => local.ref ? mergeRefs(setReference, local.ref) : setReference);
|
|
1790
1884
|
if (local.asChild) {
|
|
1791
1885
|
return web.createComponent(web.Dynamic, web.mergeProps({
|
|
1792
1886
|
get component() {
|
|
1793
1887
|
return local.asChild;
|
|
1794
1888
|
},
|
|
1795
|
-
ref
|
|
1889
|
+
ref(r$) {
|
|
1890
|
+
var _ref$ = ref();
|
|
1891
|
+
typeof _ref$ === "function" && _ref$(r$);
|
|
1892
|
+
},
|
|
1796
1893
|
onClick: handleClick
|
|
1797
1894
|
}, rest));
|
|
1798
1895
|
}
|
|
1799
1896
|
return (() => {
|
|
1800
1897
|
var _el$ = _tmpl$27();
|
|
1801
1898
|
_el$.$$click = handleClick;
|
|
1802
|
-
|
|
1899
|
+
var _ref$2 = ref();
|
|
1900
|
+
typeof _ref$2 === "function" && web.use(_ref$2, _el$);
|
|
1803
1901
|
web.spread(_el$, web.mergeProps({
|
|
1804
1902
|
get ["class"]() {
|
|
1805
1903
|
return style(local.appearanceKey || "dropdownTrigger");
|
|
@@ -1829,26 +1927,44 @@ var Popover = {
|
|
|
1829
1927
|
*/
|
|
1830
1928
|
Close: PopoverClose
|
|
1831
1929
|
};
|
|
1832
|
-
var dropdownContentVariants = () => "nt-
|
|
1930
|
+
var dropdownContentVariants = () => "nt-p-1 nt-text-sm nt-min-w-52 nt-shadow-dropdown nt-h-fit nt-min-w-52 nt-w-max";
|
|
1833
1931
|
var DropdownContent = (props) => {
|
|
1834
|
-
const
|
|
1835
|
-
const [local, rest] = solidJs.splitProps(props, ["appearanceKey"]);
|
|
1932
|
+
const [local, rest] = solidJs.splitProps(props, ["appearanceKey", "class"]);
|
|
1836
1933
|
return web.createComponent(Popover.Content, web.mergeProps({
|
|
1934
|
+
get appearanceKey() {
|
|
1935
|
+
return local.appearanceKey || "dropdownContent";
|
|
1936
|
+
},
|
|
1837
1937
|
get ["class"]() {
|
|
1838
|
-
return
|
|
1938
|
+
return cn(dropdownContentVariants(), local.class);
|
|
1839
1939
|
}
|
|
1840
1940
|
}, rest));
|
|
1841
1941
|
};
|
|
1842
|
-
var dropdownItemVariants = () => "focus:nt-outline-none nt-text-sm nt-rounded-lg nt-items-center hover:nt-bg-neutral-alpha-50 focus-visible:nt-bg-neutral-alpha-50 nt-py-1 nt-px-2";
|
|
1942
|
+
var dropdownItemVariants = () => "focus:nt-outline-none nt-flex nt-items-center nt-gap-1.5 nt-text-sm nt-rounded-lg nt-items-center hover:nt-bg-neutral-alpha-50 focus-visible:nt-bg-neutral-alpha-50 nt-py-1 nt-px-2";
|
|
1843
1943
|
var DropdownItem = (props) => {
|
|
1844
|
-
const
|
|
1845
|
-
const [local, rest] = solidJs.splitProps(props, ["appearanceKey", "onClick", "class"]);
|
|
1944
|
+
const [local, rest] = solidJs.splitProps(props, ["appearanceKey", "onClick", "class", "asChild"]);
|
|
1846
1945
|
const {
|
|
1847
1946
|
onClose
|
|
1848
1947
|
} = usePopover();
|
|
1948
|
+
const handleClick = (e) => {
|
|
1949
|
+
if (typeof local.onClick === "function") {
|
|
1950
|
+
local.onClick(e);
|
|
1951
|
+
}
|
|
1952
|
+
onClose();
|
|
1953
|
+
};
|
|
1954
|
+
if (local.asChild) {
|
|
1955
|
+
return web.createComponent(web.Dynamic, web.mergeProps({
|
|
1956
|
+
get component() {
|
|
1957
|
+
return local.asChild;
|
|
1958
|
+
},
|
|
1959
|
+
onClick: handleClick
|
|
1960
|
+
}, rest));
|
|
1961
|
+
}
|
|
1849
1962
|
return web.createComponent(Popover.Close, web.mergeProps({
|
|
1963
|
+
get appearanceKey() {
|
|
1964
|
+
return local.appearanceKey || "dropdownItem";
|
|
1965
|
+
},
|
|
1850
1966
|
get ["class"]() {
|
|
1851
|
-
return
|
|
1967
|
+
return cn(dropdownItemVariants(), local.class);
|
|
1852
1968
|
},
|
|
1853
1969
|
onClick: (e) => {
|
|
1854
1970
|
if (typeof local.onClick === "function") {
|
|
@@ -1867,10 +1983,10 @@ var DropdownRoot = (props) => {
|
|
|
1867
1983
|
var dropdownTriggerButtonVariants = () => `nt-relative nt-transition nt-outline-none focus-visible:nt-outline-nonefocus-visible:nt-ring-2 focus-visible:nt-ring-primary focus-visible:nt-ring-offset-2`;
|
|
1868
1984
|
var DropdownTrigger = (props) => {
|
|
1869
1985
|
const style = useStyle();
|
|
1870
|
-
const [local, rest] = solidJs.splitProps(props, ["appearanceKey"]);
|
|
1986
|
+
const [local, rest] = solidJs.splitProps(props, ["appearanceKey", "class"]);
|
|
1871
1987
|
return web.createComponent(Popover.Trigger, web.mergeProps({
|
|
1872
1988
|
get ["class"]() {
|
|
1873
|
-
return style(local.appearanceKey || "dropdownTrigger", dropdownTriggerButtonVariants());
|
|
1989
|
+
return style(local.appearanceKey || "dropdownTrigger", cn(dropdownTriggerButtonVariants(), local.class));
|
|
1874
1990
|
}
|
|
1875
1991
|
}, rest));
|
|
1876
1992
|
};
|
|
@@ -2125,27 +2241,50 @@ var Tabs = {
|
|
|
2125
2241
|
var notificationStatusOptionsLocalizationKeys = {
|
|
2126
2242
|
unreadRead: "inbox.filters.dropdownOptions.default",
|
|
2127
2243
|
unread: "inbox.filters.dropdownOptions.unread",
|
|
2128
|
-
archived: "inbox.filters.dropdownOptions.archived"
|
|
2244
|
+
archived: "inbox.filters.dropdownOptions.archived",
|
|
2245
|
+
snoozed: "inbox.filters.dropdownOptions.snoozed"
|
|
2129
2246
|
};
|
|
2130
2247
|
var inboxFilterLocalizationKeys = {
|
|
2131
2248
|
unreadRead: "inbox.filters.labels.default",
|
|
2132
2249
|
unread: "inbox.filters.labels.unread",
|
|
2133
|
-
archived: "inbox.filters.labels.archived"
|
|
2250
|
+
archived: "inbox.filters.labels.archived",
|
|
2251
|
+
snoozed: "inbox.filters.labels.snoozed"
|
|
2252
|
+
};
|
|
2253
|
+
var _tmpl$31 = /* @__PURE__ */ web.template(`<svg viewBox="0 0 12 12"fill=none xmlns=http://www.w3.org/2000/svg><path d="M6 2.99902V5.99902H8.25M11 5.99902C11 8.76045 8.76142 10.999 6 10.999C3.23858 10.999 1 8.76045 1 5.99902C1 3.2376 3.23858 0.999023 6 0.999023C8.76142 0.999023 11 3.2376 11 5.99902Z"stroke=currentColor stroke-linecap=round stroke-linejoin=round>`);
|
|
2254
|
+
var Snooze = (props) => {
|
|
2255
|
+
return (() => {
|
|
2256
|
+
var _el$ = _tmpl$31();
|
|
2257
|
+
web.spread(_el$, props, true, true);
|
|
2258
|
+
return _el$;
|
|
2259
|
+
})();
|
|
2134
2260
|
};
|
|
2135
|
-
|
|
2261
|
+
|
|
2262
|
+
// src/ui/components/elements/InboxStatus/InboxStatusOptions.tsx
|
|
2263
|
+
var _tmpl$33 = /* @__PURE__ */ web.template(`<span><span></span><span>`);
|
|
2136
2264
|
var cases = [{
|
|
2137
2265
|
status: "unreadRead" /* UNREAD_READ */,
|
|
2138
2266
|
icon: UnreadRead
|
|
2139
2267
|
}, {
|
|
2140
2268
|
status: "unread" /* UNREAD */,
|
|
2141
2269
|
icon: MarkAsUnread
|
|
2270
|
+
}, {
|
|
2271
|
+
status: "snoozed" /* SNOOZED */,
|
|
2272
|
+
icon: Snooze
|
|
2142
2273
|
}, {
|
|
2143
2274
|
status: "archived" /* ARCHIVED */,
|
|
2144
2275
|
icon: MarkAsArchived
|
|
2145
2276
|
}];
|
|
2146
2277
|
var StatusOptions = (props) => {
|
|
2278
|
+
const {
|
|
2279
|
+
isSnoozeEnabled
|
|
2280
|
+
} = useInboxContext();
|
|
2281
|
+
const filteredCases = () => {
|
|
2282
|
+
return cases.filter((c) => c.status !== "snoozed" /* SNOOZED */ || isSnoozeEnabled());
|
|
2283
|
+
};
|
|
2147
2284
|
return web.createComponent(solidJs.For, {
|
|
2148
|
-
each
|
|
2285
|
+
get each() {
|
|
2286
|
+
return filteredCases();
|
|
2287
|
+
},
|
|
2149
2288
|
children: (c) => web.createComponent(StatusItem, {
|
|
2150
2289
|
get localizationKey() {
|
|
2151
2290
|
return notificationStatusOptionsLocalizationKeys[c.status];
|
|
@@ -2176,11 +2315,11 @@ var StatusItem = (props) => {
|
|
|
2176
2315
|
},
|
|
2177
2316
|
get children() {
|
|
2178
2317
|
return [(() => {
|
|
2179
|
-
var _el$ = _tmpl$
|
|
2318
|
+
var _el$ = _tmpl$33(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
|
|
2180
2319
|
web.insert(_el$2, () => props.icon());
|
|
2181
2320
|
web.insert(_el$3, () => t(props.localizationKey));
|
|
2182
2321
|
web.effect((_p$) => {
|
|
2183
|
-
var _v$ = style("inboxStatus__dropdownItemLabelContainer", "nt-flex nt-gap-2 nt-items-center"), _v$2 = style("inboxStatus__dropdownItemLeft__icon", "nt-size-
|
|
2322
|
+
var _v$ = style("inboxStatus__dropdownItemLabelContainer", "nt-flex nt-gap-2 nt-items-center"), _v$2 = style("inboxStatus__dropdownItemLeft__icon", "nt-size-3"), _v$3 = props.localizationKey, _v$4 = style("inboxStatus__dropdownItemLabel", "nt-leading-none");
|
|
2184
2323
|
_v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
|
|
2185
2324
|
_v$2 !== _p$.t && web.className(_el$2, _p$.t = _v$2);
|
|
2186
2325
|
_v$3 !== _p$.a && web.setAttribute(_el$3, "data-localization", _p$.a = _v$3);
|
|
@@ -2210,7 +2349,7 @@ var StatusItem = (props) => {
|
|
|
2210
2349
|
};
|
|
2211
2350
|
|
|
2212
2351
|
// src/ui/components/elements/InboxStatus/InboxStatusDropdown.tsx
|
|
2213
|
-
var _tmpl$
|
|
2352
|
+
var _tmpl$34 = /* @__PURE__ */ web.template(`<span>`);
|
|
2214
2353
|
var StatusDropdown = () => {
|
|
2215
2354
|
const style = useStyle();
|
|
2216
2355
|
const {
|
|
@@ -2235,7 +2374,7 @@ var StatusDropdown = () => {
|
|
|
2235
2374
|
}, triggerProps, {
|
|
2236
2375
|
get children() {
|
|
2237
2376
|
return [(() => {
|
|
2238
|
-
var _el$ = _tmpl$
|
|
2377
|
+
var _el$ = _tmpl$34();
|
|
2239
2378
|
web.insert(_el$, () => t(inboxFilterLocalizationKeys[status()]));
|
|
2240
2379
|
web.effect((_p$) => {
|
|
2241
2380
|
var _v$ = inboxFilterLocalizationKeys[status()], _v$2 = style("inboxStatus__title", "nt-text-base");
|
|
@@ -2313,7 +2452,7 @@ var useNotificationsInfiniteScroll = (props) => {
|
|
|
2313
2452
|
);
|
|
2314
2453
|
solidJs.onMount(() => {
|
|
2315
2454
|
const listener = ({ data: data2 }) => {
|
|
2316
|
-
if (!data2 || !
|
|
2455
|
+
if (!data2 || !chunkKIOGWIKT_js.isSameFilter(filter, data2.filter)) {
|
|
2317
2456
|
return;
|
|
2318
2457
|
}
|
|
2319
2458
|
mutate({ data: data2.notifications, hasMore: data2.hasMore });
|
|
@@ -2323,7 +2462,7 @@ var useNotificationsInfiniteScroll = (props) => {
|
|
|
2323
2462
|
});
|
|
2324
2463
|
solidJs.createEffect(() => chunk7B52C2XE_js.__async(void 0, null, function* () {
|
|
2325
2464
|
const newFilter = chunk7B52C2XE_js.__spreadValues({}, props.options());
|
|
2326
|
-
if (
|
|
2465
|
+
if (chunkKIOGWIKT_js.isSameFilter(filter, newFilter)) {
|
|
2327
2466
|
return;
|
|
2328
2467
|
}
|
|
2329
2468
|
novu.notifications.clearCache();
|
|
@@ -2380,7 +2519,7 @@ var useReadAll = (props) => {
|
|
|
2380
2519
|
};
|
|
2381
2520
|
|
|
2382
2521
|
// src/ui/components/elements/Header/MoreActionsOptions.tsx
|
|
2383
|
-
var _tmpl$
|
|
2522
|
+
var _tmpl$35 = /* @__PURE__ */ web.template(`<span>`);
|
|
2384
2523
|
var MoreActionsOptions = () => {
|
|
2385
2524
|
const {
|
|
2386
2525
|
filter
|
|
@@ -2428,12 +2567,12 @@ var ActionsItem = (props) => {
|
|
|
2428
2567
|
},
|
|
2429
2568
|
get children() {
|
|
2430
2569
|
return [(() => {
|
|
2431
|
-
var _el$ = _tmpl$
|
|
2570
|
+
var _el$ = _tmpl$35();
|
|
2432
2571
|
web.insert(_el$, () => props.icon());
|
|
2433
|
-
web.effect(() => web.className(_el$, style("moreActions__dropdownItemLeft__icon", "nt-size-
|
|
2572
|
+
web.effect(() => web.className(_el$, style("moreActions__dropdownItemLeft__icon", "nt-size-3")));
|
|
2434
2573
|
return _el$;
|
|
2435
2574
|
})(), (() => {
|
|
2436
|
-
var _el$2 = _tmpl$
|
|
2575
|
+
var _el$2 = _tmpl$35();
|
|
2437
2576
|
web.insert(_el$2, () => t(props.localizationKey));
|
|
2438
2577
|
web.effect((_p$) => {
|
|
2439
2578
|
var _v$ = props.localizationKey, _v$2 = style("moreActions__dropdownItemLabel", "nt-leading-none");
|
|
@@ -2458,7 +2597,7 @@ var MoreActionsDropdown = () => {
|
|
|
2458
2597
|
} = useInboxContext();
|
|
2459
2598
|
return web.createComponent(solidJs.Show, {
|
|
2460
2599
|
get when() {
|
|
2461
|
-
return status() !== "archived" /* ARCHIVED */;
|
|
2600
|
+
return web.memo(() => status() !== "archived" /* ARCHIVED */)() && status() !== "snoozed" /* SNOOZED */;
|
|
2462
2601
|
},
|
|
2463
2602
|
get children() {
|
|
2464
2603
|
return web.createComponent(Dropdown.Root, {
|
|
@@ -2492,11 +2631,11 @@ var MoreActionsDropdown = () => {
|
|
|
2492
2631
|
};
|
|
2493
2632
|
|
|
2494
2633
|
// src/ui/components/elements/Header/ActionsContainer.tsx
|
|
2495
|
-
var _tmpl$
|
|
2634
|
+
var _tmpl$36 = /* @__PURE__ */ web.template(`<div>`);
|
|
2496
2635
|
var ActionsContainer = (props) => {
|
|
2497
2636
|
const style = useStyle();
|
|
2498
2637
|
return (() => {
|
|
2499
|
-
var _el$ = _tmpl$
|
|
2638
|
+
var _el$ = _tmpl$36();
|
|
2500
2639
|
web.insert(_el$, web.createComponent(MoreActionsDropdown, {}), null);
|
|
2501
2640
|
web.insert(_el$, web.createComponent(solidJs.Show, {
|
|
2502
2641
|
get when() {
|
|
@@ -2524,11 +2663,11 @@ var ActionsContainer = (props) => {
|
|
|
2524
2663
|
};
|
|
2525
2664
|
|
|
2526
2665
|
// src/ui/components/elements/Header/Header.tsx
|
|
2527
|
-
var _tmpl$
|
|
2666
|
+
var _tmpl$37 = /* @__PURE__ */ web.template(`<div>`);
|
|
2528
2667
|
var Header = (props) => {
|
|
2529
2668
|
const style = useStyle();
|
|
2530
2669
|
return (() => {
|
|
2531
|
-
var _el$ = _tmpl$
|
|
2670
|
+
var _el$ = _tmpl$37();
|
|
2532
2671
|
web.insert(_el$, web.createComponent(StatusDropdown, {}), null);
|
|
2533
2672
|
web.insert(_el$, web.createComponent(ActionsContainer, {
|
|
2534
2673
|
get showPreferences() {
|
|
@@ -2539,7 +2678,35 @@ var Header = (props) => {
|
|
|
2539
2678
|
return _el$;
|
|
2540
2679
|
})();
|
|
2541
2680
|
};
|
|
2542
|
-
var _tmpl$
|
|
2681
|
+
var _tmpl$38 = /* @__PURE__ */ web.template(`<div>`);
|
|
2682
|
+
var Root = (props) => {
|
|
2683
|
+
const [_, rest] = solidJs.splitProps(props, ["class"]);
|
|
2684
|
+
const {
|
|
2685
|
+
id
|
|
2686
|
+
} = useAppearance();
|
|
2687
|
+
const style = useStyle();
|
|
2688
|
+
const {
|
|
2689
|
+
hideBranding
|
|
2690
|
+
} = useInboxContext();
|
|
2691
|
+
return [web.createComponent(solidJs.Show, {
|
|
2692
|
+
get when() {
|
|
2693
|
+
return !hideBranding();
|
|
2694
|
+
},
|
|
2695
|
+
children: new Comment(" Powered by Novu - https://novu.co ")
|
|
2696
|
+
}), (() => {
|
|
2697
|
+
var _el$ = _tmpl$38();
|
|
2698
|
+
web.spread(_el$, web.mergeProps({
|
|
2699
|
+
get id() {
|
|
2700
|
+
return `novu-root-${id()}`;
|
|
2701
|
+
},
|
|
2702
|
+
get ["class"]() {
|
|
2703
|
+
return style("root"), cn("novu", id(), "nt-text-foreground nt-h-full");
|
|
2704
|
+
}
|
|
2705
|
+
}, rest), false, false);
|
|
2706
|
+
return _el$;
|
|
2707
|
+
})()];
|
|
2708
|
+
};
|
|
2709
|
+
var _tmpl$39 = /* @__PURE__ */ web.template(`<div>`);
|
|
2543
2710
|
var Collapsible = (props) => {
|
|
2544
2711
|
const style = useStyle();
|
|
2545
2712
|
let contentRef;
|
|
@@ -2548,7 +2715,7 @@ var Collapsible = (props) => {
|
|
|
2548
2715
|
requestAnimationFrame(() => setEnableTransition(true));
|
|
2549
2716
|
});
|
|
2550
2717
|
return (() => {
|
|
2551
|
-
var _el$ = _tmpl$
|
|
2718
|
+
var _el$ = _tmpl$39();
|
|
2552
2719
|
var _ref$ = contentRef;
|
|
2553
2720
|
typeof _ref$ === "function" ? web.use(_ref$, _el$) : contentRef = _el$;
|
|
2554
2721
|
web.spread(_el$, web.mergeProps({
|
|
@@ -2567,11 +2734,11 @@ var Collapsible = (props) => {
|
|
|
2567
2734
|
return _el$;
|
|
2568
2735
|
})();
|
|
2569
2736
|
};
|
|
2570
|
-
var _tmpl$
|
|
2737
|
+
var _tmpl$40 = /* @__PURE__ */ web.template(`<label><input type=checkbox class="nt-peer nt-sr-only"><div>`);
|
|
2571
2738
|
var Switch = (props) => {
|
|
2572
2739
|
const style = useStyle();
|
|
2573
2740
|
return (() => {
|
|
2574
|
-
var _el$ = _tmpl$
|
|
2741
|
+
var _el$ = _tmpl$40(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
|
|
2575
2742
|
_el$2.addEventListener("change", (e) => {
|
|
2576
2743
|
props.onChange(e.target.checked);
|
|
2577
2744
|
});
|
|
@@ -2592,7 +2759,7 @@ var Switch = (props) => {
|
|
|
2592
2759
|
};
|
|
2593
2760
|
|
|
2594
2761
|
// src/ui/components/elements/Preferences/ChannelRow.tsx
|
|
2595
|
-
var _tmpl$
|
|
2762
|
+
var _tmpl$41 = /* @__PURE__ */ web.template(`<div><div><div></div><span></span></div><div>`);
|
|
2596
2763
|
var ChannelRow = (props) => {
|
|
2597
2764
|
const style = useStyle();
|
|
2598
2765
|
const updatePreference = (enabled) => chunk7B52C2XE_js.__async(void 0, null, function* () {
|
|
@@ -2606,7 +2773,7 @@ var ChannelRow = (props) => {
|
|
|
2606
2773
|
yield updatePreference(checked);
|
|
2607
2774
|
});
|
|
2608
2775
|
return (() => {
|
|
2609
|
-
var _el$ = _tmpl$
|
|
2776
|
+
var _el$ = _tmpl$41(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling;
|
|
2610
2777
|
web.insert(_el$3, web.createComponent(ChannelIcon, {
|
|
2611
2778
|
appearanceKey: "channel__icon",
|
|
2612
2779
|
get channel() {
|
|
@@ -2692,12 +2859,12 @@ var getLabel = (channel) => {
|
|
|
2692
2859
|
return "";
|
|
2693
2860
|
}
|
|
2694
2861
|
};
|
|
2695
|
-
var _tmpl$
|
|
2862
|
+
var _tmpl$43 = /* @__PURE__ */ web.template(`<div>`);
|
|
2696
2863
|
var _tmpl$211 = /* @__PURE__ */ web.template(`<div><div></div><div>`);
|
|
2697
2864
|
var SkeletonText = (props) => {
|
|
2698
2865
|
const style = useStyle();
|
|
2699
2866
|
return (() => {
|
|
2700
|
-
var _el$ = _tmpl$
|
|
2867
|
+
var _el$ = _tmpl$43();
|
|
2701
2868
|
web.effect(() => web.className(_el$, style(props.appearanceKey, cn("nt-w-full nt-h-3 nt-rounded nt-bg-gradient-to-r nt-from-foreground-alpha-50 nt-to-transparent", props.class))));
|
|
2702
2869
|
return _el$;
|
|
2703
2870
|
})();
|
|
@@ -2705,7 +2872,7 @@ var SkeletonText = (props) => {
|
|
|
2705
2872
|
var SkeletonAvatar = (props) => {
|
|
2706
2873
|
const style = useStyle();
|
|
2707
2874
|
return (() => {
|
|
2708
|
-
var _el$2 = _tmpl$
|
|
2875
|
+
var _el$2 = _tmpl$43();
|
|
2709
2876
|
web.effect(() => web.className(_el$2, style(props.appearanceKey, cn("nt-size-8 nt-rounded-lg nt-bg-gradient-to-r nt-from-foreground-alpha-50 nt-to-transparent", props.class))));
|
|
2710
2877
|
return _el$2;
|
|
2711
2878
|
})();
|
|
@@ -2730,7 +2897,7 @@ var SkeletonSwitch = (props) => {
|
|
|
2730
2897
|
};
|
|
2731
2898
|
|
|
2732
2899
|
// src/ui/components/elements/Preferences/PreferencesListSkeleton.tsx
|
|
2733
|
-
var _tmpl$
|
|
2900
|
+
var _tmpl$44 = /* @__PURE__ */ web.template(`<div>`);
|
|
2734
2901
|
var channelIcons = [InApp, Email, Sms, Push, Chat];
|
|
2735
2902
|
var PreferencesListSkeleton = (props) => {
|
|
2736
2903
|
const style = useStyle();
|
|
@@ -2738,7 +2905,7 @@ var PreferencesListSkeleton = (props) => {
|
|
|
2738
2905
|
t
|
|
2739
2906
|
} = useLocalization();
|
|
2740
2907
|
return (() => {
|
|
2741
|
-
var _el$ = _tmpl$
|
|
2908
|
+
var _el$ = _tmpl$44();
|
|
2742
2909
|
web.insert(_el$, web.createComponent(Motion.div, {
|
|
2743
2910
|
get animate() {
|
|
2744
2911
|
return {
|
|
@@ -2780,7 +2947,7 @@ var PreferencesListSkeleton = (props) => {
|
|
|
2780
2947
|
return style("preferencesList__skeletonIcon", "nt-size-8 nt-p-2 nt-rounded-lg nt-bg-neutral-alpha-100");
|
|
2781
2948
|
}
|
|
2782
2949
|
}), (() => {
|
|
2783
|
-
var _el$3 = _tmpl$
|
|
2950
|
+
var _el$3 = _tmpl$44();
|
|
2784
2951
|
web.insert(_el$3, web.createComponent(SkeletonText, {
|
|
2785
2952
|
appearanceKey: "notificationList__skeletonText",
|
|
2786
2953
|
"class": "nt-h-2 nt-w-1/3 nt-bg-neutral-alpha-50 nt-rounded"
|
|
@@ -2798,7 +2965,7 @@ var PreferencesListSkeleton = (props) => {
|
|
|
2798
2965
|
}
|
|
2799
2966
|
});
|
|
2800
2967
|
})), (() => {
|
|
2801
|
-
var _el$2 = _tmpl$
|
|
2968
|
+
var _el$2 = _tmpl$44();
|
|
2802
2969
|
web.effect(() => web.className(_el$2, style("notificationListEmptyNoticeOverlay", "nt-absolute nt-size-full nt-z-10 nt-inset-0 nt-bg-gradient-to-b nt-from-transparent nt-to-background")));
|
|
2803
2970
|
return _el$2;
|
|
2804
2971
|
})()];
|
|
@@ -2843,7 +3010,7 @@ var PreferencesListSkeleton = (props) => {
|
|
|
2843
3010
|
};
|
|
2844
3011
|
|
|
2845
3012
|
// src/ui/components/elements/Preferences/Preferences.tsx
|
|
2846
|
-
var _tmpl$
|
|
3013
|
+
var _tmpl$45 = /* @__PURE__ */ web.template(`<div>`);
|
|
2847
3014
|
var _tmpl$212 = /* @__PURE__ */ web.template(`<span>`);
|
|
2848
3015
|
var _tmpl$310 = /* @__PURE__ */ web.template(`<div><div><div><div></div></div><span>`);
|
|
2849
3016
|
var Preferences = () => {
|
|
@@ -2892,7 +3059,7 @@ var Preferences = () => {
|
|
|
2892
3059
|
});
|
|
2893
3060
|
});
|
|
2894
3061
|
return (() => {
|
|
2895
|
-
var _el$ = _tmpl$
|
|
3062
|
+
var _el$ = _tmpl$45();
|
|
2896
3063
|
web.insert(_el$, web.createComponent(PreferencesRow, {
|
|
2897
3064
|
localizationKey: "preferences.global",
|
|
2898
3065
|
get channels() {
|
|
@@ -2971,7 +3138,7 @@ var WorkflowDescription = (props) => {
|
|
|
2971
3138
|
return channels.map((c, index) => [c, web.memo(() => index < channels.length - 1 && ", ")]);
|
|
2972
3139
|
};
|
|
2973
3140
|
return (() => {
|
|
2974
|
-
var _el$3 = _tmpl$
|
|
3141
|
+
var _el$3 = _tmpl$45();
|
|
2975
3142
|
web.insert(_el$3, channelNames);
|
|
2976
3143
|
web.effect(() => web.className(_el$3, style(props.appearanceKey, cn("nt-text-sm nt-text-foreground-alpha-600 nt-text-start", props.class))));
|
|
2977
3144
|
return _el$3;
|
|
@@ -3020,7 +3187,7 @@ var PreferencesRow = (props) => {
|
|
|
3020
3187
|
return isOpenChannels();
|
|
3021
3188
|
},
|
|
3022
3189
|
get children() {
|
|
3023
|
-
var _el$9 = _tmpl$
|
|
3190
|
+
var _el$9 = _tmpl$45();
|
|
3024
3191
|
web.insert(_el$9, web.createComponent(solidJs.For, {
|
|
3025
3192
|
get each() {
|
|
3026
3193
|
return channels();
|
|
@@ -3070,14 +3237,14 @@ var PreferencesRow = (props) => {
|
|
|
3070
3237
|
});
|
|
3071
3238
|
};
|
|
3072
3239
|
web.delegateEvents(["click"]);
|
|
3073
|
-
var _tmpl$
|
|
3240
|
+
var _tmpl$46 = /* @__PURE__ */ web.template(`<div><div data-localization=preferences.title>`);
|
|
3074
3241
|
var PreferencesHeader = (props) => {
|
|
3075
3242
|
const style = useStyle();
|
|
3076
3243
|
const {
|
|
3077
3244
|
t
|
|
3078
3245
|
} = useLocalization();
|
|
3079
3246
|
return (() => {
|
|
3080
|
-
var _el$ = _tmpl$
|
|
3247
|
+
var _el$ = _tmpl$46(), _el$2 = _el$.firstChild;
|
|
3081
3248
|
web.insert(_el$, web.createComponent(solidJs.Show, {
|
|
3082
3249
|
get when() {
|
|
3083
3250
|
return props.navigateToNotifications;
|
|
@@ -3141,20 +3308,28 @@ var useTabsDropdown = ({ tabs }) => {
|
|
|
3141
3308
|
});
|
|
3142
3309
|
return { dropdownTabs, setTabsList, visibleTabs };
|
|
3143
3310
|
};
|
|
3144
|
-
var _tmpl$
|
|
3311
|
+
var _tmpl$47 = /* @__PURE__ */ web.template(`<svg viewBox="0 0 20 20"fill=none xmlns=http://www.w3.org/2000/svg><path d="M10.0001 10.879L13.7126 7.1665L14.7731 8.227L10.0001 13L5.22705 8.227L6.28755 7.1665L10.0001 10.879Z"fill=currentColor>`);
|
|
3145
3312
|
var ArrowDown = (props) => {
|
|
3146
3313
|
return (() => {
|
|
3147
|
-
var _el$ = _tmpl$
|
|
3314
|
+
var _el$ = _tmpl$47();
|
|
3315
|
+
web.spread(_el$, props, true, true);
|
|
3316
|
+
return _el$;
|
|
3317
|
+
})();
|
|
3318
|
+
};
|
|
3319
|
+
var _tmpl$48 = /* @__PURE__ */ web.template(`<svg viewBox="0 0 12 12"fill=none xmlns=http://www.w3.org/2000/svg><g clip-path=url(#clip0_3188_15050)><path d="M6 3V6L8 7M11 6C11 8.76142 8.76142 11 6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6Z"stroke=currentColor stroke-linecap=round stroke-linejoin=round>`);
|
|
3320
|
+
var Clock = (props) => {
|
|
3321
|
+
return (() => {
|
|
3322
|
+
var _el$ = _tmpl$48();
|
|
3148
3323
|
web.spread(_el$, props, true, true);
|
|
3149
3324
|
return _el$;
|
|
3150
3325
|
})();
|
|
3151
3326
|
};
|
|
3152
|
-
var _tmpl$
|
|
3327
|
+
var _tmpl$49 = /* @__PURE__ */ web.template(`<strong>`);
|
|
3153
3328
|
var _tmpl$213 = /* @__PURE__ */ web.template(`<p>`);
|
|
3154
3329
|
var Bold = (props) => {
|
|
3155
3330
|
const style = useStyle();
|
|
3156
3331
|
return (() => {
|
|
3157
|
-
var _el$ = _tmpl$
|
|
3332
|
+
var _el$ = _tmpl$49();
|
|
3158
3333
|
web.insert(_el$, () => props.children);
|
|
3159
3334
|
web.effect(() => web.className(_el$, style(props.appearanceKey || "strong", "nt-font-semibold")));
|
|
3160
3335
|
return _el$;
|
|
@@ -3199,12 +3374,58 @@ var Markdown = (props) => {
|
|
|
3199
3374
|
})();
|
|
3200
3375
|
};
|
|
3201
3376
|
var Markdown_default = Markdown;
|
|
3377
|
+
var _tmpl$50 = /* @__PURE__ */ web.template(`<span>`);
|
|
3378
|
+
var badgeVariants = classVarianceAuthority.cva(cn("nt-inline-flex nt-flex-row nt-gap-1 nt-items-center"), {
|
|
3379
|
+
variants: {
|
|
3380
|
+
variant: {
|
|
3381
|
+
secondary: "nt-bg-neutral-alpha-50"
|
|
3382
|
+
},
|
|
3383
|
+
size: {
|
|
3384
|
+
default: "nt-px-1 nt-py-px nt-rounded-sm nt-text-xs nt-px-1"
|
|
3385
|
+
}
|
|
3386
|
+
},
|
|
3387
|
+
defaultVariants: {
|
|
3388
|
+
variant: "secondary",
|
|
3389
|
+
size: "default"
|
|
3390
|
+
}
|
|
3391
|
+
});
|
|
3392
|
+
var Badge = (props) => {
|
|
3393
|
+
const [local, rest] = solidJs.splitProps(props, ["class", "appearanceKey"]);
|
|
3394
|
+
const style = useStyle();
|
|
3395
|
+
return (() => {
|
|
3396
|
+
var _el$ = _tmpl$50();
|
|
3397
|
+
web.spread(_el$, web.mergeProps({
|
|
3398
|
+
get ["data-variant"]() {
|
|
3399
|
+
return props.variant;
|
|
3400
|
+
},
|
|
3401
|
+
get ["data-size"]() {
|
|
3402
|
+
return props.size;
|
|
3403
|
+
},
|
|
3404
|
+
get ["class"]() {
|
|
3405
|
+
return style(local.appearanceKey || "badge", cn(badgeVariants({
|
|
3406
|
+
variant: props.variant,
|
|
3407
|
+
size: props.size
|
|
3408
|
+
}), local.class));
|
|
3409
|
+
}
|
|
3410
|
+
}, rest), false, false);
|
|
3411
|
+
return _el$;
|
|
3412
|
+
})();
|
|
3413
|
+
};
|
|
3414
|
+
var _tmpl$51 = /* @__PURE__ */ web.template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M4.99992 2.91634V4.99967M4.79992 5.39616L3.27392 6.46553M1.66659 1.66634L8.33325 8.33301M9.16658 4.99967C9.16658 7.30086 7.30111 9.16634 4.99992 9.16634C2.69873 9.16634 0.833252 7.30086 0.833252 4.99967C0.833252 2.69849 2.69873 0.833008 4.99992 0.833008C7.30111 0.833008 9.16658 2.69849 9.16658 4.99967Z"stroke=currentColor stroke-linecap=round stroke-linejoin=round>`);
|
|
3415
|
+
var Unsnooze = (props) => {
|
|
3416
|
+
return (() => {
|
|
3417
|
+
var _el$ = _tmpl$51();
|
|
3418
|
+
web.spread(_el$, props, true, true);
|
|
3419
|
+
return _el$;
|
|
3420
|
+
})();
|
|
3421
|
+
};
|
|
3202
3422
|
var TooltipContext = solidJs.createContext(void 0);
|
|
3203
3423
|
function TooltipRoot(props) {
|
|
3204
3424
|
const [reference, setReference] = solidJs.createSignal(null);
|
|
3205
3425
|
const [floating, setFloating] = solidJs.createSignal(null);
|
|
3206
3426
|
const position = solidFloatingUi.useFloating(reference, floating, {
|
|
3207
3427
|
placement: props.placement || "top",
|
|
3428
|
+
strategy: "absolute",
|
|
3208
3429
|
whileElementsMounted: dom.autoUpdate,
|
|
3209
3430
|
middleware: [dom.offset(10), dom.flip({
|
|
3210
3431
|
fallbackPlacements: props.fallbackPlacements || ["bottom"]
|
|
@@ -3245,7 +3466,7 @@ function useTooltip() {
|
|
|
3245
3466
|
}
|
|
3246
3467
|
|
|
3247
3468
|
// src/ui/components/primitives/Tooltip/TooltipContent.tsx
|
|
3248
|
-
var _tmpl$
|
|
3469
|
+
var _tmpl$52 = /* @__PURE__ */ web.template(`<div>`);
|
|
3249
3470
|
var tooltipContentVariants = () => "nt-bg-foreground nt-p-2 nt-shadow-tooltip nt-rounded-lg nt-text-background nt-text-xs";
|
|
3250
3471
|
var TooltipContentBody = (props) => {
|
|
3251
3472
|
const {
|
|
@@ -3268,7 +3489,7 @@ var TooltipContentBody = (props) => {
|
|
|
3268
3489
|
});
|
|
3269
3490
|
});
|
|
3270
3491
|
return (() => {
|
|
3271
|
-
var _el$ = _tmpl$
|
|
3492
|
+
var _el$ = _tmpl$52();
|
|
3272
3493
|
web.use(setFloating, _el$);
|
|
3273
3494
|
web.spread(_el$, web.mergeProps({
|
|
3274
3495
|
get ["class"]() {
|
|
@@ -3307,37 +3528,50 @@ var TooltipContent = (props) => {
|
|
|
3307
3528
|
}
|
|
3308
3529
|
});
|
|
3309
3530
|
};
|
|
3310
|
-
var _tmpl$
|
|
3531
|
+
var _tmpl$53 = /* @__PURE__ */ web.template(`<button>`);
|
|
3311
3532
|
var TooltipTrigger = (props) => {
|
|
3312
3533
|
const {
|
|
3313
3534
|
setReference,
|
|
3314
3535
|
setOpen
|
|
3315
3536
|
} = useTooltip();
|
|
3316
3537
|
const style = useStyle();
|
|
3317
|
-
const [local, rest] = solidJs.splitProps(props, ["appearanceKey", "asChild", "onClick"]);
|
|
3538
|
+
const [local, rest] = solidJs.splitProps(props, ["appearanceKey", "asChild", "onClick", "onMouseEnter", "onMouseLeave", "ref"]);
|
|
3539
|
+
const handleMouseEnter = (e) => {
|
|
3540
|
+
if (typeof local.onMouseEnter === "function") {
|
|
3541
|
+
local.onMouseEnter(e);
|
|
3542
|
+
}
|
|
3543
|
+
setOpen(true);
|
|
3544
|
+
};
|
|
3545
|
+
const ref = solidJs.createMemo(() => local.ref ? mergeRefs(setReference, local.ref) : setReference);
|
|
3546
|
+
const handleMouseLeave = (e) => {
|
|
3547
|
+
if (typeof local.onMouseLeave === "function") {
|
|
3548
|
+
local.onMouseLeave(e);
|
|
3549
|
+
}
|
|
3550
|
+
setOpen(false);
|
|
3551
|
+
};
|
|
3318
3552
|
if (local.asChild) {
|
|
3319
3553
|
return web.createComponent(web.Dynamic, web.mergeProps({
|
|
3320
3554
|
get component() {
|
|
3321
3555
|
return local.asChild;
|
|
3322
3556
|
},
|
|
3323
|
-
ref
|
|
3324
|
-
|
|
3325
|
-
|
|
3557
|
+
ref(r$) {
|
|
3558
|
+
var _ref$ = ref();
|
|
3559
|
+
typeof _ref$ === "function" && _ref$(r$);
|
|
3326
3560
|
},
|
|
3327
|
-
|
|
3328
|
-
|
|
3329
|
-
}
|
|
3561
|
+
onMouseEnter: handleMouseEnter,
|
|
3562
|
+
onMouseLeave: handleMouseLeave
|
|
3330
3563
|
}, rest));
|
|
3331
3564
|
}
|
|
3332
3565
|
return (() => {
|
|
3333
|
-
var _el$ = _tmpl$
|
|
3566
|
+
var _el$ = _tmpl$53();
|
|
3334
3567
|
_el$.addEventListener("mouseleave", () => {
|
|
3335
3568
|
setOpen(false);
|
|
3336
3569
|
});
|
|
3337
3570
|
_el$.addEventListener("mouseenter", () => {
|
|
3338
3571
|
setOpen(true);
|
|
3339
3572
|
});
|
|
3340
|
-
|
|
3573
|
+
var _ref$2 = ref();
|
|
3574
|
+
typeof _ref$2 === "function" && web.use(_ref$2, _el$);
|
|
3341
3575
|
web.spread(_el$, web.mergeProps({
|
|
3342
3576
|
get ["class"]() {
|
|
3343
3577
|
return style(local.appearanceKey || "tooltipTrigger");
|
|
@@ -3360,75 +3594,1108 @@ var Tooltip = {
|
|
|
3360
3594
|
*/
|
|
3361
3595
|
Content: TooltipContent
|
|
3362
3596
|
};
|
|
3597
|
+
var _tmpl$54 = /* @__PURE__ */ web.template(`<svg viewBox="0 0 20 20"fill=none xmlns=http://www.w3.org/2000/svg><path d="M10.7957 10.0009L7.08325 6.2884L8.14375 5.2279L12.9168 10.0009L8.14375 14.7739L7.08325 13.7134L10.7957 10.0009Z"fill=currentColor>`);
|
|
3598
|
+
var ArrowRight = (props) => {
|
|
3599
|
+
return (() => {
|
|
3600
|
+
var _el$ = _tmpl$54();
|
|
3601
|
+
web.spread(_el$, props, true, true);
|
|
3602
|
+
return _el$;
|
|
3603
|
+
})();
|
|
3604
|
+
};
|
|
3363
3605
|
|
|
3364
|
-
// src/ui/components/
|
|
3365
|
-
var _tmpl$
|
|
3366
|
-
var _tmpl$214 = /* @__PURE__ */ web.template(`<div>`);
|
|
3367
|
-
var
|
|
3368
|
-
|
|
3369
|
-
|
|
3606
|
+
// src/ui/components/primitives/DatePicker.tsx
|
|
3607
|
+
var _tmpl$55 = /* @__PURE__ */ web.template(`<div>`);
|
|
3608
|
+
var _tmpl$214 = /* @__PURE__ */ web.template(`<div><span>`);
|
|
3609
|
+
var DatePickerContext = solidJs.createContext({
|
|
3610
|
+
currentDate: () => /* @__PURE__ */ new Date(),
|
|
3611
|
+
setCurrentDate: () => {
|
|
3612
|
+
},
|
|
3613
|
+
viewMonth: () => /* @__PURE__ */ new Date(),
|
|
3614
|
+
setViewMonth: () => {
|
|
3615
|
+
},
|
|
3616
|
+
selectedDate: () => null,
|
|
3617
|
+
setSelectedDate: () => {
|
|
3618
|
+
},
|
|
3619
|
+
maxDays: () => 0
|
|
3620
|
+
});
|
|
3621
|
+
var useDatePicker = () => solidJs.useContext(DatePickerContext);
|
|
3622
|
+
var DatePicker = (props) => {
|
|
3623
|
+
const [local, rest] = solidJs.splitProps(props, ["children", "value", "onDateChange", "class", "maxDays"]);
|
|
3370
3624
|
const style = useStyle();
|
|
3371
|
-
const
|
|
3372
|
-
|
|
3373
|
-
|
|
3374
|
-
|
|
3375
|
-
const
|
|
3376
|
-
|
|
3377
|
-
|
|
3378
|
-
|
|
3379
|
-
|
|
3380
|
-
const date = solidJs.createMemo(() => {
|
|
3381
|
-
minutesPassed();
|
|
3382
|
-
return formatToRelativeTime({
|
|
3383
|
-
fromDate: new Date(props.notification.createdAt),
|
|
3384
|
-
locale: locale()
|
|
3385
|
-
});
|
|
3386
|
-
});
|
|
3387
|
-
solidJs.createEffect(() => {
|
|
3388
|
-
const interval = setInterval(() => {
|
|
3389
|
-
setMinutesPassed((prev) => prev + 1);
|
|
3390
|
-
}, 1e3 * 60);
|
|
3391
|
-
return () => clearInterval(interval);
|
|
3392
|
-
});
|
|
3393
|
-
const handleNotificationClick = (e) => chunk7B52C2XE_js.__async(void 0, null, function* () {
|
|
3394
|
-
var _a, _b, _c;
|
|
3395
|
-
e.stopPropagation();
|
|
3396
|
-
e.preventDefault();
|
|
3397
|
-
if (!props.notification.isRead) {
|
|
3398
|
-
yield props.notification.read();
|
|
3625
|
+
const today = /* @__PURE__ */ new Date();
|
|
3626
|
+
today.setHours(0, 0, 0, 0);
|
|
3627
|
+
const [currentDate, setCurrentDate] = solidJs.createSignal(today);
|
|
3628
|
+
const [viewMonth, setViewMonth] = solidJs.createSignal(today);
|
|
3629
|
+
const [selectedDate, setSelectedDate] = solidJs.createSignal(local.value ? new Date(local.value) : null);
|
|
3630
|
+
const handleDateSelect = (date) => {
|
|
3631
|
+
setSelectedDate(date);
|
|
3632
|
+
if (local.onDateChange) {
|
|
3633
|
+
local.onDateChange(date);
|
|
3399
3634
|
}
|
|
3400
|
-
|
|
3401
|
-
|
|
3402
|
-
|
|
3403
|
-
|
|
3404
|
-
|
|
3405
|
-
|
|
3406
|
-
|
|
3407
|
-
|
|
3408
|
-
|
|
3409
|
-
|
|
3410
|
-
}
|
|
3411
|
-
|
|
3412
|
-
|
|
3413
|
-
|
|
3635
|
+
};
|
|
3636
|
+
return web.createComponent(DatePickerContext.Provider, {
|
|
3637
|
+
value: {
|
|
3638
|
+
currentDate,
|
|
3639
|
+
setCurrentDate,
|
|
3640
|
+
viewMonth,
|
|
3641
|
+
setViewMonth,
|
|
3642
|
+
selectedDate,
|
|
3643
|
+
setSelectedDate: handleDateSelect,
|
|
3644
|
+
maxDays: () => props.maxDays
|
|
3645
|
+
},
|
|
3646
|
+
get children() {
|
|
3647
|
+
var _el$ = _tmpl$55();
|
|
3648
|
+
web.spread(_el$, web.mergeProps({
|
|
3649
|
+
get ["class"]() {
|
|
3650
|
+
return style("datePicker", cn("nt-p-2", local.class));
|
|
3651
|
+
}
|
|
3652
|
+
}, rest), false, true);
|
|
3653
|
+
web.insert(_el$, () => local.children);
|
|
3654
|
+
return _el$;
|
|
3414
3655
|
}
|
|
3415
3656
|
});
|
|
3416
|
-
|
|
3417
|
-
|
|
3418
|
-
|
|
3657
|
+
};
|
|
3658
|
+
var DatePickerHeader = (props) => {
|
|
3659
|
+
const [local, rest] = solidJs.splitProps(props, ["class", "appearanceKey", "children"]);
|
|
3660
|
+
const style = useStyle();
|
|
3661
|
+
const {
|
|
3662
|
+
viewMonth,
|
|
3663
|
+
setViewMonth,
|
|
3664
|
+
currentDate,
|
|
3665
|
+
maxDays
|
|
3666
|
+
} = useDatePicker();
|
|
3667
|
+
const handlePrevMonth = () => {
|
|
3668
|
+
const date = new Date(viewMonth());
|
|
3669
|
+
date.setMonth(date.getMonth() - 1);
|
|
3670
|
+
const currentMonth = currentDate();
|
|
3671
|
+
if (date.getFullYear() < currentMonth.getFullYear() || date.getFullYear() === currentMonth.getFullYear() && date.getMonth() < currentMonth.getMonth()) {
|
|
3672
|
+
return;
|
|
3673
|
+
}
|
|
3674
|
+
setViewMonth(date);
|
|
3675
|
+
};
|
|
3676
|
+
const handleNextMonth = () => {
|
|
3677
|
+
const date = new Date(viewMonth());
|
|
3678
|
+
date.setMonth(date.getMonth() + 1);
|
|
3679
|
+
const maxDaysValue = maxDays();
|
|
3680
|
+
if (maxDaysValue > 0) {
|
|
3681
|
+
const maxDate = new Date(currentDate());
|
|
3682
|
+
maxDate.setDate(maxDate.getDate() + maxDaysValue);
|
|
3683
|
+
if (date.getFullYear() > maxDate.getFullYear() || date.getFullYear() === maxDate.getFullYear() && date.getMonth() > maxDate.getMonth()) {
|
|
3684
|
+
return;
|
|
3685
|
+
}
|
|
3686
|
+
}
|
|
3687
|
+
setViewMonth(date);
|
|
3688
|
+
};
|
|
3689
|
+
const isPrevDisabled = () => {
|
|
3690
|
+
const current = currentDate();
|
|
3691
|
+
const view = viewMonth();
|
|
3692
|
+
return view.getFullYear() === current.getFullYear() && view.getMonth() === current.getMonth();
|
|
3693
|
+
};
|
|
3694
|
+
const isNextDisabled = () => {
|
|
3695
|
+
const maxDaysValue = maxDays();
|
|
3696
|
+
if (maxDaysValue === 0) return false;
|
|
3697
|
+
const view = viewMonth();
|
|
3698
|
+
const maxDate = new Date(currentDate());
|
|
3699
|
+
maxDate.setDate(maxDate.getDate() + maxDaysValue);
|
|
3700
|
+
return view.getFullYear() === maxDate.getFullYear() && view.getMonth() === maxDate.getMonth();
|
|
3701
|
+
};
|
|
3702
|
+
return (() => {
|
|
3703
|
+
var _el$2 = _tmpl$214(), _el$3 = _el$2.firstChild;
|
|
3704
|
+
web.spread(_el$2, web.mergeProps({
|
|
3705
|
+
get ["class"]() {
|
|
3706
|
+
return style(local.appearanceKey || "datePickerControl", cn("nt-flex nt-items-center nt-justify-between nt-gap-1.5 nt-h-7 nt-p-1 nt-mb-2 nt-rounded-lg nt-bg-neutral-50", local.class));
|
|
3707
|
+
}
|
|
3708
|
+
}, rest), false, true);
|
|
3709
|
+
web.insert(_el$2, web.createComponent(Button, {
|
|
3710
|
+
appearanceKey: "datePickerControlPrevTrigger",
|
|
3711
|
+
variant: "ghost",
|
|
3712
|
+
onClick: (e) => {
|
|
3713
|
+
e.stopPropagation();
|
|
3714
|
+
handlePrevMonth();
|
|
3715
|
+
},
|
|
3716
|
+
get disabled() {
|
|
3717
|
+
return isPrevDisabled();
|
|
3718
|
+
},
|
|
3719
|
+
"class": "nt-flex nt-justify-center nt-items-center nt-gap-0.5 nt-w-5 nt-h-5 nt-p-0 nt-rounded-md nt-bg-white nt-shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]",
|
|
3720
|
+
get children() {
|
|
3721
|
+
return web.createComponent(ArrowLeft, {
|
|
3722
|
+
get ["class"]() {
|
|
3723
|
+
return style("datePickerControlPrevTrigger__icon", "nt-size-4 nt-text-foreground-alpha-700");
|
|
3724
|
+
}
|
|
3725
|
+
});
|
|
3726
|
+
}
|
|
3727
|
+
}), _el$3);
|
|
3728
|
+
web.insert(_el$3, () => viewMonth().toLocaleDateString("en-US", {
|
|
3729
|
+
month: "long",
|
|
3730
|
+
year: "numeric"
|
|
3731
|
+
}));
|
|
3732
|
+
web.insert(_el$2, web.createComponent(Button, {
|
|
3733
|
+
appearanceKey: "datePickerControlNextTrigger",
|
|
3734
|
+
variant: "ghost",
|
|
3735
|
+
onClick: (e) => {
|
|
3736
|
+
e.stopPropagation();
|
|
3737
|
+
handleNextMonth();
|
|
3738
|
+
},
|
|
3739
|
+
get disabled() {
|
|
3740
|
+
return isNextDisabled();
|
|
3741
|
+
},
|
|
3742
|
+
"class": "nt-flex nt-justify-center nt-items-center nt-gap-0.5 nt-w-5 nt-h-5 nt-p-0 nt-rounded-md nt-bg-white nt-shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]",
|
|
3743
|
+
get children() {
|
|
3744
|
+
return web.createComponent(ArrowRight, {
|
|
3745
|
+
get ["class"]() {
|
|
3746
|
+
return style("datePickerControlNextTrigger__icon", "nt-size-4 nt-text-foreground-alpha-700");
|
|
3747
|
+
}
|
|
3748
|
+
});
|
|
3749
|
+
}
|
|
3750
|
+
}), null);
|
|
3751
|
+
web.effect(() => web.className(_el$3, style("datePickerHeaderMonth", "nt-text-sm nt-font-medium nt-text-foreground-alpha-700")));
|
|
3752
|
+
return _el$2;
|
|
3753
|
+
})();
|
|
3754
|
+
};
|
|
3755
|
+
var DatePickerGridCellTrigger = (props) => {
|
|
3756
|
+
const [local, rest] = solidJs.splitProps(props, ["class", "appearanceKey", "date"]);
|
|
3757
|
+
const {
|
|
3758
|
+
selectedDate,
|
|
3759
|
+
viewMonth,
|
|
3760
|
+
setSelectedDate,
|
|
3761
|
+
currentDate,
|
|
3762
|
+
maxDays
|
|
3763
|
+
} = useDatePicker();
|
|
3764
|
+
const {
|
|
3765
|
+
t
|
|
3766
|
+
} = useLocalization();
|
|
3767
|
+
const isCurrentMonth = props.date.getMonth() === viewMonth().getMonth();
|
|
3768
|
+
const isPastDate = () => {
|
|
3769
|
+
const today = currentDate();
|
|
3770
|
+
return props.date < today;
|
|
3771
|
+
};
|
|
3772
|
+
const isFutureDate = () => {
|
|
3773
|
+
const maxDaysValue = maxDays();
|
|
3774
|
+
if (maxDaysValue === 0) return false;
|
|
3775
|
+
const maxDate = new Date(currentDate());
|
|
3776
|
+
maxDate.setDate(maxDate.getDate() + maxDaysValue);
|
|
3777
|
+
return props.date > maxDate;
|
|
3778
|
+
};
|
|
3779
|
+
const isDisabled = !isCurrentMonth || isPastDate() || isFutureDate();
|
|
3780
|
+
const isExceedingLimit = () => {
|
|
3781
|
+
return isCurrentMonth && isFutureDate();
|
|
3782
|
+
};
|
|
3783
|
+
const buttonElement = web.createComponent(Button, web.mergeProps({
|
|
3784
|
+
appearanceKey: "datePickerCalendarDay__button",
|
|
3785
|
+
variant: "ghost",
|
|
3786
|
+
disabled: isDisabled,
|
|
3787
|
+
onClick: (e) => {
|
|
3788
|
+
e.stopPropagation();
|
|
3789
|
+
setSelectedDate(local.date);
|
|
3790
|
+
},
|
|
3791
|
+
get ["class"]() {
|
|
3792
|
+
var _a;
|
|
3793
|
+
return cn("nt-size-8 nt-w-full nt-rounded-md nt-flex nt-items-center nt-justify-center", {
|
|
3794
|
+
"nt-text-muted-foreground disabled:nt-opacity-20": !isCurrentMonth || isPastDate(),
|
|
3795
|
+
"nt-text-foreground-alpha-700": isCurrentMonth && !isPastDate() && !isFutureDate()
|
|
3796
|
+
}, {
|
|
3797
|
+
"nt-bg-primary-alpha-300 hover:nt-bg-primary-alpha-400": ((_a = selectedDate()) == null ? void 0 : _a.toDateString()) === local.date.toDateString()
|
|
3798
|
+
});
|
|
3799
|
+
}
|
|
3800
|
+
}, rest, {
|
|
3801
|
+
get children() {
|
|
3802
|
+
return local.date.getDate();
|
|
3803
|
+
}
|
|
3804
|
+
}));
|
|
3805
|
+
if (isExceedingLimit()) {
|
|
3806
|
+
return web.createComponent(Tooltip.Root, {
|
|
3807
|
+
get children() {
|
|
3808
|
+
return [web.createComponent(Tooltip.Trigger, {
|
|
3809
|
+
children: buttonElement
|
|
3810
|
+
}), web.createComponent(Tooltip.Content, {
|
|
3811
|
+
get children() {
|
|
3812
|
+
return t("snooze.datePicker.exceedingLimitTooltip", {
|
|
3813
|
+
days: maxDays()
|
|
3814
|
+
});
|
|
3815
|
+
}
|
|
3816
|
+
})];
|
|
3817
|
+
}
|
|
3818
|
+
});
|
|
3819
|
+
}
|
|
3820
|
+
return buttonElement;
|
|
3821
|
+
};
|
|
3822
|
+
var DatePickerCalendar = (props) => {
|
|
3823
|
+
const [local, rest] = solidJs.splitProps(props, ["class", "appearanceKey"]);
|
|
3824
|
+
const style = useStyle();
|
|
3825
|
+
const {
|
|
3826
|
+
viewMonth
|
|
3827
|
+
} = useDatePicker();
|
|
3828
|
+
const getDaysInMonth = () => {
|
|
3829
|
+
const year = viewMonth().getFullYear();
|
|
3830
|
+
const month = viewMonth().getMonth();
|
|
3831
|
+
const firstDay = new Date(year, month, 1);
|
|
3832
|
+
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
3833
|
+
const startingDay = firstDay.getDay();
|
|
3834
|
+
const days = [];
|
|
3835
|
+
for (let i = 0; i < startingDay; i += 1) {
|
|
3836
|
+
const prevMonthDay = new Date(year, month, -i);
|
|
3837
|
+
days.unshift(prevMonthDay);
|
|
3838
|
+
}
|
|
3839
|
+
for (let i = 1; i <= daysInMonth; i += 1) {
|
|
3840
|
+
days.push(new Date(year, month, i));
|
|
3841
|
+
}
|
|
3842
|
+
const remainingCells = 7 - days.length % 7;
|
|
3843
|
+
if (remainingCells < 7) {
|
|
3844
|
+
for (let i = 1; i <= remainingCells; i += 1) {
|
|
3845
|
+
days.push(new Date(year, month + 1, i));
|
|
3846
|
+
}
|
|
3847
|
+
}
|
|
3848
|
+
return days;
|
|
3849
|
+
};
|
|
3850
|
+
return (() => {
|
|
3851
|
+
var _el$8 = _tmpl$55();
|
|
3852
|
+
_el$8.$$click = (e) => e.stopPropagation();
|
|
3853
|
+
web.spread(_el$8, web.mergeProps({
|
|
3854
|
+
get ["class"]() {
|
|
3855
|
+
return style(local.appearanceKey || "datePickerCalendar", cn("nt-grid nt-grid-cols-7 nt-gap-1", local.class));
|
|
3856
|
+
}
|
|
3857
|
+
}, rest), false, true);
|
|
3858
|
+
web.insert(_el$8, () => getDaysInMonth().map((date) => {
|
|
3859
|
+
return web.createComponent(DatePickerGridCellTrigger, {
|
|
3860
|
+
date
|
|
3861
|
+
});
|
|
3862
|
+
}));
|
|
3863
|
+
return _el$8;
|
|
3864
|
+
})();
|
|
3865
|
+
};
|
|
3866
|
+
web.delegateEvents(["click"]);
|
|
3867
|
+
var _tmpl$56 = /* @__PURE__ */ web.template(`<input>`);
|
|
3868
|
+
var inputVariants = classVarianceAuthority.cva(cn(`focus-visible:nt-outline-none focus-visible:nt-ring-2 focus-visible:nt-rounded-md focus-visible:nt-ring-ring focus-visible:nt-ring-offset-2`), {
|
|
3869
|
+
variants: {
|
|
3870
|
+
variant: {
|
|
3871
|
+
default: "nt-border nt-border-neutral-200 nt-rounded-md nt-p-1 nt-bg-background"
|
|
3872
|
+
},
|
|
3873
|
+
size: {
|
|
3874
|
+
default: "nt-h-9",
|
|
3875
|
+
sm: "nt-h-8 nt-text-sm"
|
|
3876
|
+
}
|
|
3877
|
+
},
|
|
3878
|
+
defaultVariants: {
|
|
3879
|
+
variant: "default",
|
|
3880
|
+
size: "default"
|
|
3881
|
+
}
|
|
3882
|
+
});
|
|
3883
|
+
var Input = (props) => {
|
|
3884
|
+
const [local, rest] = solidJs.splitProps(props, ["class", "appearanceKey"]);
|
|
3885
|
+
const style = useStyle();
|
|
3886
|
+
return (() => {
|
|
3887
|
+
var _el$ = _tmpl$56();
|
|
3888
|
+
web.spread(_el$, web.mergeProps({
|
|
3889
|
+
get ["data-variant"]() {
|
|
3890
|
+
return props.variant;
|
|
3891
|
+
},
|
|
3892
|
+
get ["data-size"]() {
|
|
3893
|
+
return props.size;
|
|
3894
|
+
},
|
|
3895
|
+
get ["class"]() {
|
|
3896
|
+
return style(local.appearanceKey || "input", cn(inputVariants({
|
|
3897
|
+
variant: props.variant,
|
|
3898
|
+
size: props.size
|
|
3899
|
+
}), local.class));
|
|
3900
|
+
}
|
|
3901
|
+
}, rest), false, false);
|
|
3902
|
+
return _el$;
|
|
3903
|
+
})();
|
|
3904
|
+
};
|
|
3905
|
+
|
|
3906
|
+
// src/ui/components/primitives/TimePicker.tsx
|
|
3907
|
+
var _tmpl$57 = /* @__PURE__ */ web.template(`<div><span>:</span><select><option value=AM>AM</option><option value=PM>PM`);
|
|
3908
|
+
var TimePicker = (props) => {
|
|
3909
|
+
const [local, rest] = solidJs.splitProps(props, ["value", "onChange", "class", "appearanceKey"]);
|
|
3910
|
+
const style = useStyle();
|
|
3911
|
+
const initialValue = local.value || {
|
|
3912
|
+
hour: 12,
|
|
3913
|
+
minute: 0,
|
|
3914
|
+
isPM: true
|
|
3915
|
+
};
|
|
3916
|
+
const [hour, setHour] = solidJs.createSignal(initialValue.hour);
|
|
3917
|
+
const [minute, setMinute] = solidJs.createSignal(initialValue.minute);
|
|
3918
|
+
const [isPM, setIsPM] = solidJs.createSignal(initialValue.isPM);
|
|
3919
|
+
const notifyChange = () => {
|
|
3920
|
+
if (local.onChange) {
|
|
3921
|
+
local.onChange({
|
|
3922
|
+
hour: hour(),
|
|
3923
|
+
minute: minute(),
|
|
3924
|
+
isPM: isPM()
|
|
3925
|
+
});
|
|
3926
|
+
}
|
|
3927
|
+
};
|
|
3928
|
+
const handleHourChange = (newHour) => {
|
|
3929
|
+
setHour(newHour);
|
|
3930
|
+
notifyChange();
|
|
3931
|
+
};
|
|
3932
|
+
const handleMinuteChange = (newMinute) => {
|
|
3933
|
+
setMinute(newMinute);
|
|
3934
|
+
notifyChange();
|
|
3935
|
+
};
|
|
3936
|
+
const handlePeriodChange = (newIsPM) => {
|
|
3937
|
+
setIsPM(newIsPM);
|
|
3938
|
+
notifyChange();
|
|
3939
|
+
};
|
|
3940
|
+
const handleKeyDown = (e) => {
|
|
3941
|
+
const allowedKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Backspace", "Delete", "Tab"];
|
|
3942
|
+
if (!allowedKeys.includes(e.key)) {
|
|
3943
|
+
e.preventDefault();
|
|
3944
|
+
}
|
|
3945
|
+
};
|
|
3946
|
+
return (() => {
|
|
3947
|
+
var _el$ = _tmpl$57(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
|
|
3948
|
+
_el$.$$click = (e) => e.stopPropagation();
|
|
3949
|
+
web.spread(_el$, web.mergeProps({
|
|
3950
|
+
get ["class"]() {
|
|
3951
|
+
return style(local.appearanceKey || "timePicker", cn("nt-flex nt-items-center nt-gap-1", local.class));
|
|
3952
|
+
}
|
|
3953
|
+
}, rest), false, true);
|
|
3954
|
+
web.insert(_el$, web.createComponent(Input, {
|
|
3955
|
+
size: "sm",
|
|
3956
|
+
type: "number",
|
|
3957
|
+
min: "1",
|
|
3958
|
+
max: "12",
|
|
3959
|
+
onKeyDown: (e) => {
|
|
3960
|
+
e.stopPropagation();
|
|
3961
|
+
handleKeyDown(e);
|
|
3962
|
+
},
|
|
3963
|
+
get value() {
|
|
3964
|
+
return hour().toString();
|
|
3965
|
+
},
|
|
3966
|
+
onInput: (e) => {
|
|
3967
|
+
e.stopPropagation();
|
|
3968
|
+
enforceMinMax(e.currentTarget);
|
|
3969
|
+
handleHourChange(Number(e.currentTarget.value));
|
|
3970
|
+
},
|
|
3971
|
+
get ["class"]() {
|
|
3972
|
+
return style("timePickerHour__input", "nt-flex nt-font-mono nt-justify-center nt-items-center nt-text-center nt-h-7 nt-w-[calc(2ch+2rem)] nt-px-2");
|
|
3973
|
+
}
|
|
3974
|
+
}), _el$2);
|
|
3975
|
+
web.insert(_el$, web.createComponent(Input, {
|
|
3976
|
+
size: "sm",
|
|
3977
|
+
type: "number",
|
|
3978
|
+
min: "0",
|
|
3979
|
+
max: "59",
|
|
3980
|
+
onKeyDown: (e) => {
|
|
3981
|
+
e.stopPropagation();
|
|
3982
|
+
handleKeyDown(e);
|
|
3983
|
+
},
|
|
3984
|
+
get value() {
|
|
3985
|
+
return minute().toString().padStart(2, "0");
|
|
3986
|
+
},
|
|
3987
|
+
onInput: (e) => {
|
|
3988
|
+
e.stopPropagation();
|
|
3989
|
+
enforceMinMax(e.currentTarget);
|
|
3990
|
+
handleMinuteChange(Number(e.currentTarget.value));
|
|
3991
|
+
},
|
|
3992
|
+
get ["class"]() {
|
|
3993
|
+
return style("timePickerHour__input", "nt-flex nt-font-mono nt-justify-center nt-items-center nt-text-center nt-h-7 nt-w-[calc(2ch+2rem)] nt-px-2");
|
|
3994
|
+
}
|
|
3995
|
+
}), _el$3);
|
|
3996
|
+
_el$3.addEventListener("change", (e) => {
|
|
3997
|
+
e.stopPropagation();
|
|
3998
|
+
handlePeriodChange(e.target.value === "PM");
|
|
3999
|
+
});
|
|
4000
|
+
_el$3.$$click = (e) => e.stopPropagation();
|
|
4001
|
+
web.effect((_p$) => {
|
|
4002
|
+
var _v$ = style("timePicker__separator", "nt-text-xl"), _v$2 = style("timePicker__periodSelect", `${inputVariants({
|
|
4003
|
+
size: "sm"
|
|
4004
|
+
})} nt-h-7 nt-font-mono`);
|
|
4005
|
+
_v$ !== _p$.e && web.className(_el$2, _p$.e = _v$);
|
|
4006
|
+
_v$2 !== _p$.t && web.className(_el$3, _p$.t = _v$2);
|
|
4007
|
+
return _p$;
|
|
4008
|
+
}, {
|
|
4009
|
+
e: void 0,
|
|
4010
|
+
t: void 0
|
|
4011
|
+
});
|
|
4012
|
+
web.effect(() => _el$3.value = isPM() ? "PM" : "AM");
|
|
4013
|
+
return _el$;
|
|
4014
|
+
})();
|
|
4015
|
+
};
|
|
4016
|
+
var enforceMinMax = (el) => {
|
|
4017
|
+
if (el.value !== "") {
|
|
4018
|
+
const value = parseInt(el.value, 10);
|
|
4019
|
+
const min = parseInt(el.min, 10);
|
|
4020
|
+
const max = parseInt(el.max, 10);
|
|
4021
|
+
if (value < min || value > max) {
|
|
4022
|
+
el.value = el.value.slice(0, -1);
|
|
4023
|
+
const newValue = parseInt(el.value, 10);
|
|
4024
|
+
if (Number.isNaN(newValue) || newValue < min) {
|
|
4025
|
+
el.value = el.min;
|
|
4026
|
+
} else if (newValue > max) {
|
|
4027
|
+
el.value = el.max;
|
|
4028
|
+
}
|
|
4029
|
+
}
|
|
4030
|
+
}
|
|
4031
|
+
};
|
|
4032
|
+
web.delegateEvents(["click"]);
|
|
4033
|
+
|
|
4034
|
+
// src/ui/components/Notification/SnoozeDateTimePicker.tsx
|
|
4035
|
+
var _tmpl$58 = /* @__PURE__ */ web.template(`<div><div><p></p></div><div>`);
|
|
4036
|
+
var fiveMinutesFromNow = () => {
|
|
4037
|
+
const futureTime = new Date(Date.now() + 5 * 60 * 1e3);
|
|
4038
|
+
const hours = futureTime.getHours();
|
|
4039
|
+
const isPM = hours >= 12;
|
|
4040
|
+
let hour;
|
|
4041
|
+
if (hours === 0) {
|
|
4042
|
+
hour = 12;
|
|
4043
|
+
} else if (hours === 12) {
|
|
4044
|
+
hour = 12;
|
|
4045
|
+
} else {
|
|
4046
|
+
hour = hours % 12;
|
|
4047
|
+
}
|
|
4048
|
+
return {
|
|
4049
|
+
hour,
|
|
4050
|
+
minute: futureTime.getMinutes(),
|
|
4051
|
+
isPM
|
|
4052
|
+
};
|
|
4053
|
+
};
|
|
4054
|
+
var convertTo24Hour = (time) => {
|
|
4055
|
+
if (time.isPM) {
|
|
4056
|
+
return time.hour === 12 ? 12 : time.hour + 12;
|
|
4057
|
+
} else {
|
|
4058
|
+
return time.hour === 12 ? 0 : time.hour;
|
|
4059
|
+
}
|
|
4060
|
+
};
|
|
4061
|
+
var REFRESH_INTERVAL = 5e3;
|
|
4062
|
+
var SnoozeDateTimePicker = (props) => {
|
|
4063
|
+
const style = useStyle();
|
|
4064
|
+
const {
|
|
4065
|
+
t
|
|
4066
|
+
} = useLocalization();
|
|
4067
|
+
const [selectedDate, setSelectedDate] = solidJs.createSignal(null);
|
|
4068
|
+
const [timeValue, setTimeValue] = solidJs.createSignal(fiveMinutesFromNow());
|
|
4069
|
+
const [currentTime, setCurrentTime] = solidJs.createSignal(/* @__PURE__ */ new Date());
|
|
4070
|
+
solidJs.createEffect(() => {
|
|
4071
|
+
const interval = setInterval(() => {
|
|
4072
|
+
setCurrentTime(/* @__PURE__ */ new Date());
|
|
4073
|
+
}, REFRESH_INTERVAL);
|
|
4074
|
+
solidJs.onCleanup(() => clearInterval(interval));
|
|
4075
|
+
});
|
|
4076
|
+
const onDateTimeSelect = () => {
|
|
4077
|
+
var _a;
|
|
4078
|
+
if (selectedDate() && timeValue()) {
|
|
4079
|
+
const date = new Date(selectedDate());
|
|
4080
|
+
const hours = convertTo24Hour(timeValue());
|
|
4081
|
+
date.setHours(hours, timeValue().minute, 0, 0);
|
|
4082
|
+
(_a = props.onSelect) == null ? void 0 : _a.call(props, date);
|
|
4083
|
+
}
|
|
4084
|
+
};
|
|
4085
|
+
const maxDays = () => {
|
|
4086
|
+
if (!props.maxDurationHours) return 0;
|
|
4087
|
+
return Math.ceil(props.maxDurationHours / 24);
|
|
4088
|
+
};
|
|
4089
|
+
const getSelectedDateTime = () => {
|
|
4090
|
+
if (!selectedDate() || !timeValue()) return null;
|
|
4091
|
+
const date = new Date(selectedDate());
|
|
4092
|
+
const hours = convertTo24Hour(timeValue());
|
|
4093
|
+
date.setHours(hours, timeValue().minute, 0, 0);
|
|
4094
|
+
return date;
|
|
4095
|
+
};
|
|
4096
|
+
const isTimeInPast = solidJs.createMemo(() => {
|
|
4097
|
+
const dateTime = getSelectedDateTime();
|
|
4098
|
+
if (!dateTime) return false;
|
|
4099
|
+
const minAllowedDateTime = new Date(currentTime().getTime() + 3 * 60 * 1e3);
|
|
4100
|
+
return dateTime < minAllowedDateTime;
|
|
4101
|
+
});
|
|
4102
|
+
const isTimeExceedingMaxDuration = solidJs.createMemo(() => {
|
|
4103
|
+
const dateTime = getSelectedDateTime();
|
|
4104
|
+
if (!dateTime || !props.maxDurationHours) return false;
|
|
4105
|
+
const maxAllowedDateTime = new Date(currentTime().getTime() + props.maxDurationHours * 60 * 60 * 1e3);
|
|
4106
|
+
return dateTime > maxAllowedDateTime;
|
|
4107
|
+
});
|
|
4108
|
+
const applyButtonEnabled = solidJs.createMemo(() => {
|
|
4109
|
+
if (!selectedDate() || !timeValue()) {
|
|
4110
|
+
return false;
|
|
4111
|
+
}
|
|
4112
|
+
if (isTimeInPast()) {
|
|
4113
|
+
return false;
|
|
4114
|
+
}
|
|
4115
|
+
if (props.maxDurationHours && isTimeExceedingMaxDuration()) {
|
|
4116
|
+
return false;
|
|
4117
|
+
}
|
|
4118
|
+
return true;
|
|
4119
|
+
});
|
|
4120
|
+
const getTooltipMessage = solidJs.createMemo(() => {
|
|
4121
|
+
if (isTimeInPast()) {
|
|
4122
|
+
return t("snooze.datePicker.pastDateTooltip");
|
|
4123
|
+
}
|
|
4124
|
+
if (isTimeExceedingMaxDuration()) {
|
|
4125
|
+
return t("snooze.datePicker.exceedingLimitTooltip", {
|
|
4126
|
+
days: maxDays()
|
|
4127
|
+
});
|
|
4128
|
+
}
|
|
4129
|
+
return t("snooze.datePicker.noDateSelectedTooltip");
|
|
4130
|
+
});
|
|
4131
|
+
return (() => {
|
|
4132
|
+
var _el$ = _tmpl$58(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
|
|
4133
|
+
_el$.$$click = (e) => e.stopPropagation();
|
|
4134
|
+
web.insert(_el$, web.createComponent(DatePicker, {
|
|
4135
|
+
onDateChange: (date) => setSelectedDate(date),
|
|
4136
|
+
get maxDays() {
|
|
4137
|
+
return maxDays();
|
|
4138
|
+
},
|
|
4139
|
+
get children() {
|
|
4140
|
+
return [web.createComponent(DatePickerHeader, {}), web.createComponent(DatePickerCalendar, {})];
|
|
4141
|
+
}
|
|
4142
|
+
}), _el$2);
|
|
4143
|
+
web.insert(_el$3, () => t("snooze.datePicker.timePickerLabel"));
|
|
4144
|
+
web.insert(_el$2, web.createComponent(TimePicker, {
|
|
4145
|
+
get value() {
|
|
4146
|
+
return timeValue();
|
|
4147
|
+
},
|
|
4148
|
+
onChange: setTimeValue
|
|
4149
|
+
}), null);
|
|
4150
|
+
web.insert(_el$4, web.createComponent(Button, {
|
|
4151
|
+
appearanceKey: "snoozeDatePickerCancel__button",
|
|
4152
|
+
variant: "secondary",
|
|
4153
|
+
"class": "nt-h-7 nt-w-[60px] nt-px-2",
|
|
4154
|
+
get onClick() {
|
|
4155
|
+
return props.onCancel;
|
|
4156
|
+
},
|
|
4157
|
+
get children() {
|
|
4158
|
+
return t("snooze.datePicker.cancel");
|
|
4159
|
+
}
|
|
4160
|
+
}), null);
|
|
4161
|
+
web.insert(_el$4, web.createComponent(solidJs.Show, {
|
|
4162
|
+
get when() {
|
|
4163
|
+
return applyButtonEnabled();
|
|
4164
|
+
},
|
|
4165
|
+
get fallback() {
|
|
4166
|
+
return web.createComponent(Tooltip.Root, {
|
|
4167
|
+
get children() {
|
|
4168
|
+
return [web.createComponent(Tooltip.Trigger, {
|
|
4169
|
+
asChild: (props2) => web.createComponent(Button, web.mergeProps({
|
|
4170
|
+
appearanceKey: "snoozeDatePickerApply__button",
|
|
4171
|
+
"class": "nt-h-7 nt-w-[60px] nt-px-2 !nt-pointer-events-auto",
|
|
4172
|
+
onClick: onDateTimeSelect,
|
|
4173
|
+
disabled: true
|
|
4174
|
+
}, props2, {
|
|
4175
|
+
get children() {
|
|
4176
|
+
return t("snooze.datePicker.apply");
|
|
4177
|
+
}
|
|
4178
|
+
}))
|
|
4179
|
+
}), web.createComponent(Tooltip.Content, {
|
|
4180
|
+
get children() {
|
|
4181
|
+
return getTooltipMessage();
|
|
4182
|
+
}
|
|
4183
|
+
})];
|
|
4184
|
+
}
|
|
4185
|
+
});
|
|
4186
|
+
},
|
|
4187
|
+
get children() {
|
|
4188
|
+
return web.createComponent(Button, {
|
|
4189
|
+
appearanceKey: "snoozeDatePickerApply__button",
|
|
4190
|
+
"class": "nt-h-7 nt-w-[60px] nt-px-2",
|
|
4191
|
+
onClick: onDateTimeSelect,
|
|
4192
|
+
get children() {
|
|
4193
|
+
return t("snooze.datePicker.apply");
|
|
4194
|
+
}
|
|
4195
|
+
});
|
|
4196
|
+
}
|
|
4197
|
+
}), null);
|
|
4198
|
+
web.effect((_p$) => {
|
|
4199
|
+
var _v$ = style("snoozeDatePicker", "nt-bg-white nt-rounded-md nt-shadow-lg nt-w-[260px]"), _v$2 = style("snoozeDatePicker__timePickerContainer", "nt-flex nt-flex-row nt-justify-between nt-p-2 nt-items-center nt-border-t nt-border-neutral-200 nt-border-b"), _v$3 = style("snoozeDatePicker__timePickerLabel", "nt-text-sm nt-font-medium nt-text-foreground-alpha-700 nt-p-2"), _v$4 = style("snoozeDatePicker__actions", "nt-flex nt-flex-row nt-justify-end nt-gap-2 nt-p-2");
|
|
4200
|
+
_v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
|
|
4201
|
+
_v$2 !== _p$.t && web.className(_el$2, _p$.t = _v$2);
|
|
4202
|
+
_v$3 !== _p$.a && web.className(_el$3, _p$.a = _v$3);
|
|
4203
|
+
_v$4 !== _p$.o && web.className(_el$4, _p$.o = _v$4);
|
|
4204
|
+
return _p$;
|
|
4205
|
+
}, {
|
|
4206
|
+
e: void 0,
|
|
4207
|
+
t: void 0,
|
|
4208
|
+
a: void 0,
|
|
4209
|
+
o: void 0
|
|
4210
|
+
});
|
|
4211
|
+
return _el$;
|
|
4212
|
+
})();
|
|
4213
|
+
};
|
|
4214
|
+
web.delegateEvents(["click"]);
|
|
4215
|
+
|
|
4216
|
+
// src/ui/components/Notification/NotificationActions.tsx
|
|
4217
|
+
var _tmpl$59 = /* @__PURE__ */ web.template(`<div><span>`);
|
|
4218
|
+
var _tmpl$215 = /* @__PURE__ */ web.template(`<span>`);
|
|
4219
|
+
var SNOOZE_PRESETS = [{
|
|
4220
|
+
key: "snooze.options.anHourFromNow",
|
|
4221
|
+
hours: 1,
|
|
4222
|
+
getDate: () => new Date(Date.now() + 1 * 60 * 60 * 1e3)
|
|
4223
|
+
}, {
|
|
4224
|
+
key: "snooze.options.inOneDay",
|
|
4225
|
+
hours: 24,
|
|
4226
|
+
getDate: () => {
|
|
4227
|
+
const date = new Date(Date.now() + 1 * 24 * 60 * 60 * 1e3);
|
|
4228
|
+
date.setHours(9, 0, 0, 0);
|
|
4229
|
+
return date;
|
|
4230
|
+
}
|
|
4231
|
+
}, {
|
|
4232
|
+
key: "snooze.options.inOneWeek",
|
|
4233
|
+
hours: 168,
|
|
4234
|
+
getDate: () => {
|
|
4235
|
+
const date = new Date(Date.now() + 7 * 24 * 60 * 60 * 1e3);
|
|
4236
|
+
date.setHours(9, 0, 0, 0);
|
|
4237
|
+
return date;
|
|
4238
|
+
}
|
|
4239
|
+
}];
|
|
4240
|
+
var formatSnoozeOption = (preset, t, locale) => {
|
|
4241
|
+
const date = preset.getDate();
|
|
4242
|
+
const dayName = new Intl.DateTimeFormat(locale, {
|
|
4243
|
+
weekday: "short"
|
|
4244
|
+
}).format(date);
|
|
4245
|
+
const dateMonth = new Intl.DateTimeFormat(locale, {
|
|
4246
|
+
day: "numeric",
|
|
4247
|
+
month: "short"
|
|
4248
|
+
}).format(date);
|
|
4249
|
+
const timeString = new Intl.DateTimeFormat(locale, {
|
|
4250
|
+
hour: "numeric",
|
|
4251
|
+
minute: "numeric"
|
|
4252
|
+
}).format(date);
|
|
4253
|
+
return {
|
|
4254
|
+
label: t(preset.key),
|
|
4255
|
+
time: `${dayName}, ${dateMonth}, ${timeString}`
|
|
4256
|
+
};
|
|
4257
|
+
};
|
|
4258
|
+
var SnoozeDropdownItem = (props) => {
|
|
4259
|
+
const style = useStyle();
|
|
4260
|
+
const content = [(() => {
|
|
4261
|
+
var _el$ = _tmpl$59(), _el$2 = _el$.firstChild;
|
|
4262
|
+
web.insert(_el$, web.createComponent(Clock, {
|
|
4263
|
+
get ["class"]() {
|
|
4264
|
+
return style("notificationSnooze__dropdownItem__icon", "nt-size-3 nt-text-foreground-alpha-400 nt-mr-2");
|
|
4265
|
+
}
|
|
4266
|
+
}), _el$2);
|
|
4267
|
+
web.insert(_el$2, () => props.label);
|
|
4268
|
+
web.effect((_p$) => {
|
|
4269
|
+
var _v$ = style("dropdownItem", "nt-flex nt-items-center nt-flex-1"), _v$2 = style("dropdownItemLabel");
|
|
4270
|
+
_v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
|
|
4271
|
+
_v$2 !== _p$.t && web.className(_el$2, _p$.t = _v$2);
|
|
4272
|
+
return _p$;
|
|
4273
|
+
}, {
|
|
4274
|
+
e: void 0,
|
|
4275
|
+
t: void 0
|
|
4276
|
+
});
|
|
4277
|
+
return _el$;
|
|
4278
|
+
})(), (() => {
|
|
4279
|
+
var _el$3 = _tmpl$215();
|
|
4280
|
+
web.insert(_el$3, () => props.time);
|
|
4281
|
+
web.effect(() => web.className(_el$3, style("dropdownItemRight__icon", "nt-text-foreground-alpha-300 nt-ml-2 nt-text-xs")));
|
|
4282
|
+
return _el$3;
|
|
4283
|
+
})()];
|
|
4284
|
+
if (props.asChild) {
|
|
4285
|
+
return props.asChild({
|
|
4286
|
+
class: style("notificationSnooze__dropdownItem", dropdownItemVariants()),
|
|
4287
|
+
onClick: props.onClick,
|
|
4288
|
+
children: content
|
|
4289
|
+
});
|
|
4290
|
+
}
|
|
4291
|
+
return web.createComponent(Dropdown.Item, {
|
|
4292
|
+
appearanceKey: "notificationSnooze__dropdownItem",
|
|
4293
|
+
get onClick() {
|
|
4294
|
+
return props.onClick;
|
|
4295
|
+
},
|
|
4296
|
+
get ["class"]() {
|
|
4297
|
+
return style("dropdownItem", "nt-justify-between");
|
|
4298
|
+
},
|
|
4299
|
+
children: content
|
|
4300
|
+
});
|
|
4301
|
+
};
|
|
4302
|
+
var ReadButton = (props) => {
|
|
4303
|
+
const style = useStyle();
|
|
4304
|
+
const {
|
|
4305
|
+
t
|
|
4306
|
+
} = useLocalization();
|
|
4307
|
+
return web.createComponent(Tooltip.Root, {
|
|
4308
|
+
get children() {
|
|
4309
|
+
return [web.createComponent(Tooltip.Trigger, {
|
|
4310
|
+
asChild: (childProps) => web.createComponent(Button, web.mergeProps({
|
|
4311
|
+
appearanceKey: "notificationRead__button",
|
|
4312
|
+
size: "iconSm",
|
|
4313
|
+
variant: "ghost"
|
|
4314
|
+
}, childProps, {
|
|
4315
|
+
onClick: (e) => chunk7B52C2XE_js.__async(this, null, function* () {
|
|
4316
|
+
e.stopPropagation();
|
|
4317
|
+
yield props.notification.read();
|
|
4318
|
+
}),
|
|
4319
|
+
get children() {
|
|
4320
|
+
return web.createComponent(MarkAsRead, {
|
|
4321
|
+
get ["class"]() {
|
|
4322
|
+
return style("notificationRead__icon", "nt-size-3");
|
|
4323
|
+
}
|
|
4324
|
+
});
|
|
4325
|
+
}
|
|
4326
|
+
}))
|
|
4327
|
+
}), web.createComponent(Tooltip.Content, {
|
|
4328
|
+
"data-localization": "notification.actions.read.tooltip",
|
|
4329
|
+
get children() {
|
|
4330
|
+
return t("notification.actions.read.tooltip");
|
|
4331
|
+
}
|
|
4332
|
+
})];
|
|
4333
|
+
}
|
|
4334
|
+
});
|
|
4335
|
+
};
|
|
4336
|
+
var UnreadButton = (props) => {
|
|
4337
|
+
const style = useStyle();
|
|
4338
|
+
const {
|
|
4339
|
+
t
|
|
4340
|
+
} = useLocalization();
|
|
4341
|
+
return web.createComponent(Tooltip.Root, {
|
|
4342
|
+
get children() {
|
|
4343
|
+
return [web.createComponent(Tooltip.Trigger, {
|
|
4344
|
+
asChild: (childProps) => web.createComponent(Button, web.mergeProps({
|
|
4345
|
+
appearanceKey: "notificationUnread__button",
|
|
4346
|
+
size: "iconSm",
|
|
4347
|
+
variant: "ghost"
|
|
4348
|
+
}, childProps, {
|
|
4349
|
+
onClick: (e) => chunk7B52C2XE_js.__async(this, null, function* () {
|
|
4350
|
+
e.stopPropagation();
|
|
4351
|
+
yield props.notification.unread();
|
|
4352
|
+
}),
|
|
4353
|
+
get children() {
|
|
4354
|
+
return web.createComponent(MarkAsUnread, {
|
|
4355
|
+
get ["class"]() {
|
|
4356
|
+
return style("notificationUnread__icon", "nt-size-3");
|
|
4357
|
+
}
|
|
4358
|
+
});
|
|
4359
|
+
}
|
|
4360
|
+
}))
|
|
4361
|
+
}), web.createComponent(Tooltip.Content, {
|
|
4362
|
+
"data-localization": "notification.actions.unread.tooltip",
|
|
4363
|
+
get children() {
|
|
4364
|
+
return t("notification.actions.unread.tooltip");
|
|
4365
|
+
}
|
|
4366
|
+
})];
|
|
4367
|
+
}
|
|
4368
|
+
});
|
|
4369
|
+
};
|
|
4370
|
+
var ArchiveButton = (props) => {
|
|
4371
|
+
const style = useStyle();
|
|
4372
|
+
const {
|
|
4373
|
+
t
|
|
4374
|
+
} = useLocalization();
|
|
4375
|
+
return web.createComponent(Tooltip.Root, {
|
|
4376
|
+
get children() {
|
|
4377
|
+
return [web.createComponent(Tooltip.Trigger, {
|
|
4378
|
+
asChild: (childProps) => web.createComponent(Button, web.mergeProps({
|
|
4379
|
+
appearanceKey: "notificationArchive__button",
|
|
4380
|
+
size: "iconSm",
|
|
4381
|
+
variant: "ghost"
|
|
4382
|
+
}, childProps, {
|
|
4383
|
+
onClick: (e) => chunk7B52C2XE_js.__async(this, null, function* () {
|
|
4384
|
+
e.stopPropagation();
|
|
4385
|
+
yield props.notification.archive();
|
|
4386
|
+
}),
|
|
4387
|
+
get children() {
|
|
4388
|
+
return web.createComponent(MarkAsArchived, {
|
|
4389
|
+
get ["class"]() {
|
|
4390
|
+
return style("notificationArchive__icon", "nt-size-3");
|
|
4391
|
+
}
|
|
4392
|
+
});
|
|
4393
|
+
}
|
|
4394
|
+
}))
|
|
4395
|
+
}), web.createComponent(Tooltip.Content, {
|
|
4396
|
+
"data-localization": "notification.actions.archive.tooltip",
|
|
4397
|
+
get children() {
|
|
4398
|
+
return t("notification.actions.archive.tooltip");
|
|
4399
|
+
}
|
|
4400
|
+
})];
|
|
4401
|
+
}
|
|
4402
|
+
});
|
|
4403
|
+
};
|
|
4404
|
+
var UnarchiveButton = (props) => {
|
|
4405
|
+
const style = useStyle();
|
|
4406
|
+
const {
|
|
4407
|
+
t
|
|
4408
|
+
} = useLocalization();
|
|
4409
|
+
return web.createComponent(Tooltip.Root, {
|
|
4410
|
+
get children() {
|
|
4411
|
+
return [web.createComponent(Tooltip.Trigger, {
|
|
4412
|
+
asChild: (childProps) => web.createComponent(Button, web.mergeProps({
|
|
4413
|
+
appearanceKey: "notificationUnarchive__button",
|
|
4414
|
+
size: "iconSm",
|
|
4415
|
+
variant: "ghost"
|
|
4416
|
+
}, childProps, {
|
|
4417
|
+
onClick: (e) => chunk7B52C2XE_js.__async(this, null, function* () {
|
|
4418
|
+
e.stopPropagation();
|
|
4419
|
+
yield props.notification.unarchive();
|
|
4420
|
+
}),
|
|
4421
|
+
get children() {
|
|
4422
|
+
return web.createComponent(MarkAsUnarchived, {
|
|
4423
|
+
get ["class"]() {
|
|
4424
|
+
return style("notificationArchive__icon", "nt-size-3");
|
|
4425
|
+
}
|
|
4426
|
+
});
|
|
4427
|
+
}
|
|
4428
|
+
}))
|
|
4429
|
+
}), web.createComponent(Tooltip.Content, {
|
|
4430
|
+
"data-localization": "notification.actions.unarchive.tooltip",
|
|
4431
|
+
get children() {
|
|
4432
|
+
return t("notification.actions.unarchive.tooltip");
|
|
4433
|
+
}
|
|
4434
|
+
})];
|
|
4435
|
+
}
|
|
4436
|
+
});
|
|
4437
|
+
};
|
|
4438
|
+
var UnsnoozeButton = (props) => {
|
|
4439
|
+
const style = useStyle();
|
|
4440
|
+
const {
|
|
4441
|
+
t
|
|
4442
|
+
} = useLocalization();
|
|
4443
|
+
return web.createComponent(Tooltip.Root, {
|
|
4444
|
+
get children() {
|
|
4445
|
+
return [web.createComponent(Tooltip.Trigger, {
|
|
4446
|
+
asChild: (childProps) => web.createComponent(Button, web.mergeProps({
|
|
4447
|
+
appearanceKey: "notificationUnsnooze__button",
|
|
4448
|
+
size: "iconSm",
|
|
4449
|
+
variant: "ghost"
|
|
4450
|
+
}, childProps, {
|
|
4451
|
+
onClick: (e) => chunk7B52C2XE_js.__async(this, null, function* () {
|
|
4452
|
+
e.stopPropagation();
|
|
4453
|
+
yield props.notification.unsnooze();
|
|
4454
|
+
}),
|
|
4455
|
+
get children() {
|
|
4456
|
+
return web.createComponent(Unsnooze, {
|
|
4457
|
+
get ["class"]() {
|
|
4458
|
+
return style("notificationUnsnooze__icon", "nt-size-3");
|
|
4459
|
+
}
|
|
4460
|
+
});
|
|
4461
|
+
}
|
|
4462
|
+
}))
|
|
4463
|
+
}), web.createComponent(Tooltip.Content, {
|
|
4464
|
+
"data-localization": "notification.actions.unsnooze.tooltip",
|
|
4465
|
+
get children() {
|
|
4466
|
+
return t("notification.actions.unsnooze.tooltip");
|
|
4467
|
+
}
|
|
4468
|
+
})];
|
|
4469
|
+
}
|
|
4470
|
+
});
|
|
4471
|
+
};
|
|
4472
|
+
var SnoozeButton = (props) => {
|
|
4473
|
+
const style = useStyle();
|
|
4474
|
+
const {
|
|
4475
|
+
t,
|
|
4476
|
+
locale
|
|
4477
|
+
} = useLocalization();
|
|
4478
|
+
const {
|
|
4479
|
+
maxSnoozeDurationHours
|
|
4480
|
+
} = useInboxContext();
|
|
4481
|
+
const [isSnoozeDateTimePickerOpen, setIsSnoozeDateTimePickerOpen] = solidJs.createSignal(false);
|
|
4482
|
+
const availableSnoozePresets = solidJs.createMemo(() => {
|
|
4483
|
+
if (!maxSnoozeDurationHours()) return SNOOZE_PRESETS;
|
|
4484
|
+
return SNOOZE_PRESETS.filter((preset) => preset.hours <= maxSnoozeDurationHours());
|
|
4485
|
+
});
|
|
4486
|
+
return web.createComponent(Tooltip.Root, {
|
|
4487
|
+
get children() {
|
|
4488
|
+
return [web.createComponent(Tooltip.Trigger, {
|
|
4489
|
+
asChild: (tooltipProps) => web.createComponent(Dropdown.Root, {
|
|
4490
|
+
get children() {
|
|
4491
|
+
return [web.createComponent(Dropdown.Trigger, web.mergeProps(tooltipProps, {
|
|
4492
|
+
asChild: (popoverProps) => web.createComponent(Button, web.mergeProps({
|
|
4493
|
+
appearanceKey: "notificationSnooze__button",
|
|
4494
|
+
size: "iconSm",
|
|
4495
|
+
variant: "ghost"
|
|
4496
|
+
}, popoverProps, {
|
|
4497
|
+
onClick: (e) => {
|
|
4498
|
+
var _a;
|
|
4499
|
+
e.stopPropagation();
|
|
4500
|
+
(_a = popoverProps.onClick) == null ? void 0 : _a.call(popoverProps, e);
|
|
4501
|
+
},
|
|
4502
|
+
get children() {
|
|
4503
|
+
return web.createComponent(Snooze, {
|
|
4504
|
+
get ["class"]() {
|
|
4505
|
+
return style("notificationSnooze__icon", "nt-size-3");
|
|
4506
|
+
}
|
|
4507
|
+
});
|
|
4508
|
+
}
|
|
4509
|
+
}))
|
|
4510
|
+
})), web.createComponent(Dropdown.Content, {
|
|
4511
|
+
portal: true,
|
|
4512
|
+
appearanceKey: "notificationSnooze__dropdownContent",
|
|
4513
|
+
get children() {
|
|
4514
|
+
return [web.createComponent(solidJs.For, {
|
|
4515
|
+
get each() {
|
|
4516
|
+
return availableSnoozePresets();
|
|
4517
|
+
},
|
|
4518
|
+
children: (preset) => {
|
|
4519
|
+
const option = formatSnoozeOption(preset, t, locale());
|
|
4520
|
+
return web.createComponent(SnoozeDropdownItem, {
|
|
4521
|
+
get label() {
|
|
4522
|
+
return option.label;
|
|
4523
|
+
},
|
|
4524
|
+
get time() {
|
|
4525
|
+
return option.time;
|
|
4526
|
+
},
|
|
4527
|
+
onClick: (e) => chunk7B52C2XE_js.__async(this, null, function* () {
|
|
4528
|
+
e.stopPropagation();
|
|
4529
|
+
yield props.notification.snooze(preset.getDate().toISOString());
|
|
4530
|
+
})
|
|
4531
|
+
});
|
|
4532
|
+
}
|
|
4533
|
+
}), web.createComponent(Popover.Root, {
|
|
4534
|
+
get open() {
|
|
4535
|
+
return isSnoozeDateTimePickerOpen();
|
|
4536
|
+
},
|
|
4537
|
+
onOpenChange: setIsSnoozeDateTimePickerOpen,
|
|
4538
|
+
placement: "bottom-start",
|
|
4539
|
+
get children() {
|
|
4540
|
+
return [web.createComponent(SnoozeDropdownItem, {
|
|
4541
|
+
get label() {
|
|
4542
|
+
return t("snooze.options.customTime");
|
|
4543
|
+
},
|
|
4544
|
+
time: "",
|
|
4545
|
+
asChild: (childProps) => web.createComponent(Popover.Trigger, web.mergeProps(childProps, {
|
|
4546
|
+
onClick: (e) => {
|
|
4547
|
+
var _a;
|
|
4548
|
+
e.stopPropagation();
|
|
4549
|
+
(_a = childProps.onClick) == null ? void 0 : _a.call(childProps, e);
|
|
4550
|
+
}
|
|
4551
|
+
}))
|
|
4552
|
+
}), web.createComponent(Popover.Content, {
|
|
4553
|
+
portal: true,
|
|
4554
|
+
get ["class"]() {
|
|
4555
|
+
return style("notificationSnoozeCustomTime_popoverContent", "nt-size-fit nt-w-[260px]");
|
|
4556
|
+
},
|
|
4557
|
+
get children() {
|
|
4558
|
+
return web.createComponent(SnoozeDateTimePicker, {
|
|
4559
|
+
get maxDurationHours() {
|
|
4560
|
+
return maxSnoozeDurationHours();
|
|
4561
|
+
},
|
|
4562
|
+
onSelect: (date) => chunk7B52C2XE_js.__async(this, null, function* () {
|
|
4563
|
+
yield props.notification.snooze(date.toISOString());
|
|
4564
|
+
}),
|
|
4565
|
+
onCancel: () => {
|
|
4566
|
+
setIsSnoozeDateTimePickerOpen(false);
|
|
4567
|
+
}
|
|
4568
|
+
});
|
|
4569
|
+
}
|
|
4570
|
+
})];
|
|
4571
|
+
}
|
|
4572
|
+
})];
|
|
4573
|
+
}
|
|
4574
|
+
})];
|
|
4575
|
+
}
|
|
4576
|
+
})
|
|
4577
|
+
}), web.createComponent(Tooltip.Content, {
|
|
4578
|
+
"data-localization": "notification.actions.snooze.tooltip",
|
|
4579
|
+
get children() {
|
|
4580
|
+
return t("notification.actions.snooze.tooltip");
|
|
4581
|
+
}
|
|
4582
|
+
})];
|
|
4583
|
+
}
|
|
4584
|
+
});
|
|
4585
|
+
};
|
|
4586
|
+
var renderNotificationActions = (notification, status) => {
|
|
4587
|
+
const {
|
|
4588
|
+
isSnoozeEnabled
|
|
4589
|
+
} = useInboxContext();
|
|
4590
|
+
if (notification.isSnoozed) {
|
|
4591
|
+
return web.createComponent(UnsnoozeButton, {
|
|
4592
|
+
notification
|
|
4593
|
+
});
|
|
4594
|
+
}
|
|
4595
|
+
if (notification.isArchived) {
|
|
4596
|
+
return web.createComponent(UnarchiveButton, {
|
|
4597
|
+
notification
|
|
4598
|
+
});
|
|
4599
|
+
}
|
|
4600
|
+
return [web.memo(() => web.memo(() => status() !== "archived" /* ARCHIVED */)() && (notification.isRead ? web.createComponent(UnreadButton, {
|
|
4601
|
+
notification
|
|
4602
|
+
}) : web.createComponent(ReadButton, {
|
|
4603
|
+
notification
|
|
4604
|
+
}))), web.memo(() => web.memo(() => !!isSnoozeEnabled())() && web.createComponent(SnoozeButton, {
|
|
4605
|
+
notification
|
|
4606
|
+
})), web.createComponent(ArchiveButton, {
|
|
4607
|
+
notification
|
|
4608
|
+
})];
|
|
4609
|
+
};
|
|
4610
|
+
|
|
4611
|
+
// src/ui/components/Notification/DefaultNotification.tsx
|
|
4612
|
+
var _tmpl$60 = /* @__PURE__ */ web.template(`<img>`);
|
|
4613
|
+
var _tmpl$216 = /* @__PURE__ */ web.template(`<div>`);
|
|
4614
|
+
var _tmpl$311 = /* @__PURE__ */ web.template(`<span>`);
|
|
4615
|
+
var _tmpl$410 = /* @__PURE__ */ web.template(`<a><div><div></div><div></div><div>`);
|
|
4616
|
+
var DefaultNotification = (props) => {
|
|
4617
|
+
const style = useStyle();
|
|
4618
|
+
const {
|
|
4619
|
+
t,
|
|
4620
|
+
locale
|
|
4621
|
+
} = useLocalization();
|
|
4622
|
+
const {
|
|
4623
|
+
navigate,
|
|
4624
|
+
status
|
|
4625
|
+
} = useInboxContext();
|
|
4626
|
+
const [minutesPassed, setMinutesPassed] = solidJs.createSignal(0);
|
|
4627
|
+
const createdAt = solidJs.createMemo(() => {
|
|
4628
|
+
minutesPassed();
|
|
4629
|
+
return formatToRelativeTime({
|
|
4630
|
+
fromDate: new Date(props.notification.createdAt),
|
|
4631
|
+
locale: locale()
|
|
4632
|
+
});
|
|
4633
|
+
});
|
|
4634
|
+
const snoozedUntil = solidJs.createMemo(() => {
|
|
4635
|
+
minutesPassed();
|
|
4636
|
+
if (!props.notification.snoozedUntil) {
|
|
4637
|
+
return null;
|
|
4638
|
+
}
|
|
4639
|
+
return formatSnoozedUntil({
|
|
4640
|
+
untilDate: new Date(props.notification.snoozedUntil),
|
|
4641
|
+
locale: locale()
|
|
4642
|
+
});
|
|
4643
|
+
});
|
|
4644
|
+
const deliveredAt = solidJs.createMemo(() => {
|
|
4645
|
+
minutesPassed();
|
|
4646
|
+
if (!props.notification.deliveredAt || !Array.isArray(props.notification.deliveredAt)) {
|
|
4647
|
+
return null;
|
|
4648
|
+
}
|
|
4649
|
+
return props.notification.deliveredAt.map((date) => formatToRelativeTime({
|
|
4650
|
+
fromDate: new Date(date),
|
|
4651
|
+
locale: locale()
|
|
4652
|
+
}));
|
|
4653
|
+
});
|
|
4654
|
+
solidJs.createEffect(() => {
|
|
4655
|
+
const interval = setInterval(() => {
|
|
4656
|
+
setMinutesPassed((prev) => prev + 1);
|
|
4657
|
+
}, 1e3 * 60);
|
|
4658
|
+
return () => clearInterval(interval);
|
|
4659
|
+
});
|
|
4660
|
+
const handleNotificationClick = (e) => chunk7B52C2XE_js.__async(void 0, null, function* () {
|
|
4661
|
+
var _a, _b, _c;
|
|
4662
|
+
e.stopPropagation();
|
|
4663
|
+
e.preventDefault();
|
|
4664
|
+
if (!props.notification.isRead) {
|
|
4665
|
+
yield props.notification.read();
|
|
4666
|
+
}
|
|
4667
|
+
(_a = props.onNotificationClick) == null ? void 0 : _a.call(props, props.notification);
|
|
4668
|
+
navigate((_b = props.notification.redirect) == null ? void 0 : _b.url, (_c = props.notification.redirect) == null ? void 0 : _c.target);
|
|
4669
|
+
});
|
|
4670
|
+
const handleActionButtonClick = (action, e) => chunk7B52C2XE_js.__async(void 0, null, function* () {
|
|
4671
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
|
|
4672
|
+
e.stopPropagation();
|
|
4673
|
+
if (action === "primary" /* PRIMARY */) {
|
|
4674
|
+
yield props.notification.completePrimary();
|
|
4675
|
+
(_a = props.onPrimaryActionClick) == null ? void 0 : _a.call(props, props.notification);
|
|
4676
|
+
navigate((_c = (_b = props.notification.primaryAction) == null ? void 0 : _b.redirect) == null ? void 0 : _c.url, (_e = (_d = props.notification.primaryAction) == null ? void 0 : _d.redirect) == null ? void 0 : _e.target);
|
|
4677
|
+
} else {
|
|
4678
|
+
yield props.notification.completeSecondary();
|
|
4679
|
+
(_f = props.onSecondaryActionClick) == null ? void 0 : _f.call(props, props.notification);
|
|
4680
|
+
navigate((_h = (_g = props.notification.secondaryAction) == null ? void 0 : _g.redirect) == null ? void 0 : _h.url, (_j = (_i = props.notification.secondaryAction) == null ? void 0 : _i.redirect) == null ? void 0 : _j.target);
|
|
4681
|
+
}
|
|
4682
|
+
});
|
|
4683
|
+
return (() => {
|
|
4684
|
+
var _el$ = _tmpl$410(), _el$3 = _el$.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$7 = _el$5.nextSibling;
|
|
4685
|
+
_el$.$$click = handleNotificationClick;
|
|
3419
4686
|
web.insert(_el$, web.createComponent(solidJs.Show, {
|
|
3420
4687
|
get when() {
|
|
3421
4688
|
return props.notification.avatar;
|
|
3422
4689
|
},
|
|
3423
4690
|
get fallback() {
|
|
3424
4691
|
return (() => {
|
|
3425
|
-
var _el$9 = _tmpl$
|
|
4692
|
+
var _el$9 = _tmpl$216();
|
|
3426
4693
|
web.effect(() => web.className(_el$9, style("notificationImageLoadingFallback", "nt-size-8 nt-rounded-lg nt-shrink-0 nt-aspect-square")));
|
|
3427
4694
|
return _el$9;
|
|
3428
4695
|
})();
|
|
3429
4696
|
},
|
|
3430
4697
|
get children() {
|
|
3431
|
-
var _el$2 = _tmpl$
|
|
4698
|
+
var _el$2 = _tmpl$60();
|
|
3432
4699
|
web.effect((_p$) => {
|
|
3433
4700
|
var _v$ = style("notificationImage", "nt-size-8 nt-rounded-lg nt-object-cover nt-aspect-square"), _v$2 = props.notification.avatar;
|
|
3434
4701
|
_v$ !== _p$.e && web.className(_el$2, _p$.e = _v$);
|
|
@@ -3482,149 +4749,13 @@ var DefaultNotification = (props) => {
|
|
|
3482
4749
|
render: (el) => renderBody()(el, props.notification)
|
|
3483
4750
|
})
|
|
3484
4751
|
}), null);
|
|
3485
|
-
web.insert(_el$5,
|
|
3486
|
-
get when() {
|
|
3487
|
-
return status() !== "archived" /* ARCHIVED */;
|
|
3488
|
-
},
|
|
3489
|
-
get children() {
|
|
3490
|
-
return web.createComponent(solidJs.Show, {
|
|
3491
|
-
get when() {
|
|
3492
|
-
return props.notification.isRead;
|
|
3493
|
-
},
|
|
3494
|
-
get fallback() {
|
|
3495
|
-
return web.createComponent(Tooltip.Root, {
|
|
3496
|
-
get children() {
|
|
3497
|
-
return [web.createComponent(Tooltip.Trigger, {
|
|
3498
|
-
asChild: (childProps) => web.createComponent(Button, web.mergeProps({
|
|
3499
|
-
appearanceKey: "notificationRead__button",
|
|
3500
|
-
size: "iconSm",
|
|
3501
|
-
variant: "ghost"
|
|
3502
|
-
}, childProps, {
|
|
3503
|
-
onClick: (e) => chunk7B52C2XE_js.__async(this, null, function* () {
|
|
3504
|
-
e.stopPropagation();
|
|
3505
|
-
yield props.notification.read();
|
|
3506
|
-
}),
|
|
3507
|
-
get children() {
|
|
3508
|
-
return web.createComponent(MarkAsRead, {
|
|
3509
|
-
get ["class"]() {
|
|
3510
|
-
return style("notificationRead__icon", "nt-size-3");
|
|
3511
|
-
}
|
|
3512
|
-
});
|
|
3513
|
-
}
|
|
3514
|
-
}))
|
|
3515
|
-
}), web.createComponent(Tooltip.Content, {
|
|
3516
|
-
"data-localization": "notification.actions.read.tooltip",
|
|
3517
|
-
get children() {
|
|
3518
|
-
return t("notification.actions.read.tooltip");
|
|
3519
|
-
}
|
|
3520
|
-
})];
|
|
3521
|
-
}
|
|
3522
|
-
});
|
|
3523
|
-
},
|
|
3524
|
-
get children() {
|
|
3525
|
-
return web.createComponent(Tooltip.Root, {
|
|
3526
|
-
get children() {
|
|
3527
|
-
return [web.createComponent(Tooltip.Trigger, {
|
|
3528
|
-
asChild: (childProps) => web.createComponent(Button, web.mergeProps({
|
|
3529
|
-
appearanceKey: "notificationUnread__button",
|
|
3530
|
-
size: "iconSm",
|
|
3531
|
-
variant: "ghost"
|
|
3532
|
-
}, childProps, {
|
|
3533
|
-
onClick: (e) => chunk7B52C2XE_js.__async(this, null, function* () {
|
|
3534
|
-
e.stopPropagation();
|
|
3535
|
-
yield props.notification.unread();
|
|
3536
|
-
}),
|
|
3537
|
-
get children() {
|
|
3538
|
-
return web.createComponent(MarkAsUnread, {
|
|
3539
|
-
get ["class"]() {
|
|
3540
|
-
return style("notificationUnread__icon", "nt-size-3");
|
|
3541
|
-
}
|
|
3542
|
-
});
|
|
3543
|
-
}
|
|
3544
|
-
}))
|
|
3545
|
-
}), web.createComponent(Tooltip.Content, {
|
|
3546
|
-
"data-localization": "notification.actions.unread.tooltip",
|
|
3547
|
-
get children() {
|
|
3548
|
-
return t("notification.actions.unread.tooltip");
|
|
3549
|
-
}
|
|
3550
|
-
})];
|
|
3551
|
-
}
|
|
3552
|
-
});
|
|
3553
|
-
}
|
|
3554
|
-
});
|
|
3555
|
-
}
|
|
3556
|
-
}), null);
|
|
3557
|
-
web.insert(_el$5, web.createComponent(solidJs.Show, {
|
|
3558
|
-
get when() {
|
|
3559
|
-
return props.notification.isArchived;
|
|
3560
|
-
},
|
|
3561
|
-
get fallback() {
|
|
3562
|
-
return web.createComponent(Tooltip.Root, {
|
|
3563
|
-
get children() {
|
|
3564
|
-
return [web.createComponent(Tooltip.Trigger, {
|
|
3565
|
-
asChild: (childProps) => web.createComponent(Button, web.mergeProps({
|
|
3566
|
-
appearanceKey: "notificationArchive__button",
|
|
3567
|
-
size: "iconSm",
|
|
3568
|
-
variant: "ghost"
|
|
3569
|
-
}, childProps, {
|
|
3570
|
-
onClick: (e) => chunk7B52C2XE_js.__async(this, null, function* () {
|
|
3571
|
-
e.stopPropagation();
|
|
3572
|
-
yield props.notification.archive();
|
|
3573
|
-
}),
|
|
3574
|
-
get children() {
|
|
3575
|
-
return web.createComponent(MarkAsArchived, {
|
|
3576
|
-
get ["class"]() {
|
|
3577
|
-
return style("notificationArchive__icon", "nt-size-3");
|
|
3578
|
-
}
|
|
3579
|
-
});
|
|
3580
|
-
}
|
|
3581
|
-
}))
|
|
3582
|
-
}), web.createComponent(Tooltip.Content, {
|
|
3583
|
-
"data-localization": "notification.actions.archive.tooltip",
|
|
3584
|
-
get children() {
|
|
3585
|
-
return t("notification.actions.archive.tooltip");
|
|
3586
|
-
}
|
|
3587
|
-
})];
|
|
3588
|
-
}
|
|
3589
|
-
});
|
|
3590
|
-
},
|
|
3591
|
-
get children() {
|
|
3592
|
-
return web.createComponent(Tooltip.Root, {
|
|
3593
|
-
get children() {
|
|
3594
|
-
return [web.createComponent(Tooltip.Trigger, {
|
|
3595
|
-
asChild: (childProps) => web.createComponent(Button, web.mergeProps({
|
|
3596
|
-
appearanceKey: "notificationUnarchive__button",
|
|
3597
|
-
size: "iconSm",
|
|
3598
|
-
variant: "ghost"
|
|
3599
|
-
}, childProps, {
|
|
3600
|
-
onClick: (e) => chunk7B52C2XE_js.__async(this, null, function* () {
|
|
3601
|
-
e.stopPropagation();
|
|
3602
|
-
yield props.notification.unarchive();
|
|
3603
|
-
}),
|
|
3604
|
-
get children() {
|
|
3605
|
-
return web.createComponent(MarkAsUnarchived, {
|
|
3606
|
-
get ["class"]() {
|
|
3607
|
-
return style("notificationArchive__icon", "nt-size-3");
|
|
3608
|
-
}
|
|
3609
|
-
});
|
|
3610
|
-
}
|
|
3611
|
-
}))
|
|
3612
|
-
}), web.createComponent(Tooltip.Content, {
|
|
3613
|
-
"data-localization": "notification.actions.unarchive.tooltip",
|
|
3614
|
-
get children() {
|
|
3615
|
-
return t("notification.actions.unarchive.tooltip");
|
|
3616
|
-
}
|
|
3617
|
-
})];
|
|
3618
|
-
}
|
|
3619
|
-
});
|
|
3620
|
-
}
|
|
3621
|
-
}), null);
|
|
4752
|
+
web.insert(_el$5, () => renderNotificationActions(props.notification, status));
|
|
3622
4753
|
web.insert(_el$3, web.createComponent(solidJs.Show, {
|
|
3623
4754
|
get when() {
|
|
3624
4755
|
return props.notification.primaryAction || props.notification.secondaryAction;
|
|
3625
4756
|
},
|
|
3626
4757
|
get children() {
|
|
3627
|
-
var _el$6 = _tmpl$
|
|
4758
|
+
var _el$6 = _tmpl$216();
|
|
3628
4759
|
web.insert(_el$6, web.createComponent(solidJs.Show, {
|
|
3629
4760
|
get when() {
|
|
3630
4761
|
return props.notification.primaryAction;
|
|
@@ -3657,7 +4788,62 @@ var DefaultNotification = (props) => {
|
|
|
3657
4788
|
return _el$6;
|
|
3658
4789
|
}
|
|
3659
4790
|
}), _el$7);
|
|
3660
|
-
web.insert(_el$7,
|
|
4791
|
+
web.insert(_el$7, web.createComponent(solidJs.Show, {
|
|
4792
|
+
get when() {
|
|
4793
|
+
return snoozedUntil();
|
|
4794
|
+
},
|
|
4795
|
+
get fallback() {
|
|
4796
|
+
return web.createComponent(solidJs.Show, {
|
|
4797
|
+
get when() {
|
|
4798
|
+
return deliveredAt();
|
|
4799
|
+
},
|
|
4800
|
+
get fallback() {
|
|
4801
|
+
return web.memo(createdAt);
|
|
4802
|
+
},
|
|
4803
|
+
children: (deliveredAt2) => web.createComponent(solidJs.Show, {
|
|
4804
|
+
get when() {
|
|
4805
|
+
return deliveredAt2().length >= 2;
|
|
4806
|
+
},
|
|
4807
|
+
get children() {
|
|
4808
|
+
return [" ", web.createComponent(solidJs.For, {
|
|
4809
|
+
get each() {
|
|
4810
|
+
return deliveredAt2().slice(-2);
|
|
4811
|
+
},
|
|
4812
|
+
children: (date, index) => [web.createComponent(solidJs.Show, {
|
|
4813
|
+
get when() {
|
|
4814
|
+
return index() === 0;
|
|
4815
|
+
},
|
|
4816
|
+
get children() {
|
|
4817
|
+
return [date, " \xB7"];
|
|
4818
|
+
}
|
|
4819
|
+
}), web.createComponent(solidJs.Show, {
|
|
4820
|
+
get when() {
|
|
4821
|
+
return index() === 1;
|
|
4822
|
+
},
|
|
4823
|
+
get children() {
|
|
4824
|
+
return web.createComponent(Badge, {
|
|
4825
|
+
appearanceKey: "notificationDeliveredAt__badge",
|
|
4826
|
+
get children() {
|
|
4827
|
+
return [web.createComponent(Clock, {
|
|
4828
|
+
get ["class"]() {
|
|
4829
|
+
return style("notificationDeliveredAt__icon", "nt-size-3");
|
|
4830
|
+
}
|
|
4831
|
+
}), date];
|
|
4832
|
+
}
|
|
4833
|
+
});
|
|
4834
|
+
}
|
|
4835
|
+
})]
|
|
4836
|
+
})];
|
|
4837
|
+
}
|
|
4838
|
+
})
|
|
4839
|
+
});
|
|
4840
|
+
},
|
|
4841
|
+
children: (snoozedUntil2) => [web.createComponent(Clock, {
|
|
4842
|
+
get ["class"]() {
|
|
4843
|
+
return style("notificationSnoozedUntil__icon", "nt-size-3");
|
|
4844
|
+
}
|
|
4845
|
+
}), web.memo(() => t("notification.snoozedUntil")), " \xB7 ", web.memo(snoozedUntil2)]
|
|
4846
|
+
}));
|
|
3661
4847
|
web.insert(_el$, web.createComponent(solidJs.Show, {
|
|
3662
4848
|
get when() {
|
|
3663
4849
|
return !props.notification.isRead;
|
|
@@ -3672,7 +4858,7 @@ var DefaultNotification = (props) => {
|
|
|
3672
4858
|
var _a;
|
|
3673
4859
|
var _v$3 = style("notification", cn("nt-w-full nt-text-sm hover:nt-bg-primary-alpha-25 nt-group nt-relative nt-flex nt-items-start nt-p-4 nt-gap-2", "[&:not(:first-child)]:nt-border-t nt-border-neutral-alpha-100", {
|
|
3674
4860
|
"nt-cursor-pointer": !props.notification.isRead || !!((_a = props.notification.redirect) == null ? void 0 : _a.url)
|
|
3675
|
-
})), _v$4 = style("notificationContent", "nt-flex nt-flex-col nt-gap-2 nt-w-full"), _v$5 = style("notificationTextContainer"), _v$6 = style("notificationDefaultActions",
|
|
4861
|
+
})), _v$4 = style("notificationContent", "nt-flex nt-flex-col nt-gap-2 nt-w-full"), _v$5 = style("notificationTextContainer"), _v$6 = style("notificationDefaultActions", `nt-absolute nt-transition nt-duration-100 nt-ease-out nt-gap-0.5 nt-flex nt-shrink-0 nt-opacity-0 group-hover:nt-opacity-100 group-focus-within:nt-opacity-100 nt-justify-center nt-items-center nt-bg-background/90 nt-right-3 nt-top-3 nt-border nt-border-neutral-alpha-100 nt-rounded-lg nt-backdrop-blur-lg nt-p-0.5`), _v$7 = style("notificationDate", "nt-text-foreground-alpha-400 nt-flex nt-items-center nt-gap-1");
|
|
3676
4862
|
_v$3 !== _p$.e && web.className(_el$, _p$.e = _v$3);
|
|
3677
4863
|
_v$4 !== _p$.t && web.className(_el$3, _p$.t = _v$4);
|
|
3678
4864
|
_v$5 !== _p$.a && web.className(_el$4, _p$.a = _v$5);
|
|
@@ -3752,14 +4938,14 @@ var NewMessagesCta = (props) => {
|
|
|
3752
4938
|
}
|
|
3753
4939
|
});
|
|
3754
4940
|
};
|
|
3755
|
-
var _tmpl$
|
|
4941
|
+
var _tmpl$61 = /* @__PURE__ */ web.template(`<div>`);
|
|
3756
4942
|
var NotificationListSkeleton = (props) => {
|
|
3757
4943
|
const style = useStyle();
|
|
3758
4944
|
const {
|
|
3759
4945
|
t
|
|
3760
4946
|
} = useLocalization();
|
|
3761
4947
|
return (() => {
|
|
3762
|
-
var _el$ = _tmpl$
|
|
4948
|
+
var _el$ = _tmpl$61();
|
|
3763
4949
|
web.insert(_el$, web.createComponent(Motion.div, {
|
|
3764
4950
|
get animate() {
|
|
3765
4951
|
return {
|
|
@@ -3798,7 +4984,7 @@ var NotificationListSkeleton = (props) => {
|
|
|
3798
4984
|
appearanceKey: "notificationList__skeletonAvatar",
|
|
3799
4985
|
"class": "nt-w-8 nt-h-8 nt-rounded-full nt-bg-neutral-alpha-100"
|
|
3800
4986
|
}), (() => {
|
|
3801
|
-
var _el$3 = _tmpl$
|
|
4987
|
+
var _el$3 = _tmpl$61();
|
|
3802
4988
|
web.insert(_el$3, web.createComponent(SkeletonText, {
|
|
3803
4989
|
appearanceKey: "notificationList__skeletonText",
|
|
3804
4990
|
"class": "nt-h-2 nt-w-1/3 nt-bg-neutral-alpha-50 nt-rounded"
|
|
@@ -3812,7 +4998,7 @@ var NotificationListSkeleton = (props) => {
|
|
|
3812
4998
|
})()];
|
|
3813
4999
|
}
|
|
3814
5000
|
}))), (() => {
|
|
3815
|
-
var _el$2 = _tmpl$
|
|
5001
|
+
var _el$2 = _tmpl$61();
|
|
3816
5002
|
web.effect(() => web.className(_el$2, style("notificationListEmptyNoticeOverlay", "nt-absolute nt-size-full nt-z-10 nt-inset-0 nt-bg-gradient-to-b nt-from-transparent nt-to-background")));
|
|
3817
5003
|
return _el$2;
|
|
3818
5004
|
})()];
|
|
@@ -3857,8 +5043,8 @@ var NotificationListSkeleton = (props) => {
|
|
|
3857
5043
|
};
|
|
3858
5044
|
|
|
3859
5045
|
// src/ui/components/Notification/NotificationList.tsx
|
|
3860
|
-
var _tmpl$
|
|
3861
|
-
var _tmpl$
|
|
5046
|
+
var _tmpl$62 = /* @__PURE__ */ web.template(`<div>`);
|
|
5047
|
+
var _tmpl$217 = /* @__PURE__ */ web.template(`<div><div>`);
|
|
3862
5048
|
var NotificationList = (props) => {
|
|
3863
5049
|
var _a, _b;
|
|
3864
5050
|
const options = solidJs.createMemo(() => chunk7B52C2XE_js.__spreadProps(chunk7B52C2XE_js.__spreadValues({}, props.filter), {
|
|
@@ -3901,7 +5087,7 @@ var NotificationList = (props) => {
|
|
|
3901
5087
|
});
|
|
3902
5088
|
});
|
|
3903
5089
|
return (() => {
|
|
3904
|
-
var _el$ = _tmpl$
|
|
5090
|
+
var _el$ = _tmpl$217(), _el$2 = _el$.firstChild;
|
|
3905
5091
|
web.insert(_el$, web.createComponent(NewMessagesCta, {
|
|
3906
5092
|
get count() {
|
|
3907
5093
|
return count();
|
|
@@ -3958,7 +5144,7 @@ var NotificationList = (props) => {
|
|
|
3958
5144
|
return !end();
|
|
3959
5145
|
},
|
|
3960
5146
|
get children() {
|
|
3961
|
-
var _el$3 = _tmpl$
|
|
5147
|
+
var _el$3 = _tmpl$62();
|
|
3962
5148
|
web.use(setEl, _el$3);
|
|
3963
5149
|
web.insert(_el$3, web.createComponent(NotificationListSkeleton, {
|
|
3964
5150
|
loading: true
|
|
@@ -3980,13 +5166,13 @@ var NotificationList = (props) => {
|
|
|
3980
5166
|
return _el$;
|
|
3981
5167
|
})();
|
|
3982
5168
|
};
|
|
3983
|
-
var _tmpl$
|
|
5169
|
+
var _tmpl$63 = /* @__PURE__ */ web.template(`<span>`);
|
|
3984
5170
|
var getDisplayCount = (count) => count >= 100 ? "99+" : count;
|
|
3985
5171
|
var InboxTabUnreadNotificationsCount = (props) => {
|
|
3986
5172
|
const style = useStyle();
|
|
3987
5173
|
const displayCount = solidJs.createMemo(() => getDisplayCount(props.count));
|
|
3988
5174
|
return (() => {
|
|
3989
|
-
var _el$ = _tmpl$
|
|
5175
|
+
var _el$ = _tmpl$63();
|
|
3990
5176
|
web.insert(_el$, displayCount);
|
|
3991
5177
|
web.effect(() => web.className(_el$, style("notificationsTabsTriggerCount", "nt-rounded-full nt-bg-counter nt-px-[6px] nt-text-counter-foreground nt-text-sm")));
|
|
3992
5178
|
return _el$;
|
|
@@ -4011,7 +5197,7 @@ var InboxTab = (props) => {
|
|
|
4011
5197
|
},
|
|
4012
5198
|
get children() {
|
|
4013
5199
|
return [(() => {
|
|
4014
|
-
var _el$2 = _tmpl$
|
|
5200
|
+
var _el$2 = _tmpl$63();
|
|
4015
5201
|
web.insert(_el$2, () => props.label);
|
|
4016
5202
|
web.effect(() => web.className(_el$2, style("notificationsTabsTriggerLabel", "nt-text-sm nt-font-medium")));
|
|
4017
5203
|
return _el$2;
|
|
@@ -4049,7 +5235,7 @@ var InboxDropdownTab = (props) => {
|
|
|
4049
5235
|
},
|
|
4050
5236
|
get children() {
|
|
4051
5237
|
return [(() => {
|
|
4052
|
-
var _el$3 = _tmpl$
|
|
5238
|
+
var _el$3 = _tmpl$63();
|
|
4053
5239
|
web.insert(_el$3, () => props.label);
|
|
4054
5240
|
web.effect(() => web.className(_el$3, style("moreTabs__dropdownItemLabel", "nt-mr-auto")));
|
|
4055
5241
|
return _el$3;
|
|
@@ -4230,7 +5416,7 @@ var InboxTabs = (props) => {
|
|
|
4230
5416
|
};
|
|
4231
5417
|
|
|
4232
5418
|
// src/ui/components/Inbox.tsx
|
|
4233
|
-
var _tmpl$
|
|
5419
|
+
var _tmpl$64 = /* @__PURE__ */ web.template(`<div>`);
|
|
4234
5420
|
var InboxPage = /* @__PURE__ */ function(InboxPage2) {
|
|
4235
5421
|
InboxPage2["Notifications"] = "notifications";
|
|
4236
5422
|
InboxPage2["Preferences"] = "preferences";
|
|
@@ -4252,7 +5438,7 @@ var InboxContent = (props) => {
|
|
|
4252
5438
|
};
|
|
4253
5439
|
});
|
|
4254
5440
|
return (() => {
|
|
4255
|
-
var _el$ = _tmpl$
|
|
5441
|
+
var _el$ = _tmpl$64();
|
|
4256
5442
|
web.insert(_el$, web.createComponent(solidJs.Switch, {
|
|
4257
5443
|
get children() {
|
|
4258
5444
|
return [web.createComponent(solidJs.Match, {
|