@grasco/profile-picture 0.1.2 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/dist/angular.cjs +1 -370
- package/dist/angular.cjs.map +1 -1
- package/dist/angular.d.cts +188 -2
- package/dist/angular.d.ts +188 -2
- package/dist/angular.js +1 -370
- package/dist/angular.js.map +1 -1
- package/dist/index.cjs +246 -110
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +130 -43
- package/dist/index.d.ts +130 -43
- package/dist/index.js +246 -110
- package/dist/index.js.map +1 -1
- package/dist/standalone.d.ts +9 -2
- package/dist/standalone.standalone.js +280 -144
- package/dist/standalone.standalone.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/svelte.cjs +1 -370
- package/dist/svelte.cjs.map +1 -1
- package/dist/svelte.d.cts +188 -2
- package/dist/svelte.d.ts +188 -2
- package/dist/svelte.js +1 -370
- package/dist/svelte.js.map +1 -1
- package/dist/vue.cjs +1 -370
- package/dist/vue.cjs.map +1 -1
- package/dist/vue.d.cts +188 -2
- package/dist/vue.d.ts +188 -2
- package/dist/vue.js +1 -370
- package/dist/vue.js.map +1 -1
- package/package.json +9 -2
package/dist/styles.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid}}}@layer theme{:root,:host{--np-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--np-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--np-spacing:.25rem;--np-radius-xl:.75rem;--np-default-font-family:var(--np-font-sans);--np-default-mono-font-family:var(--np-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--np-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--np-default-font-feature-settings,normal);font-variation-settings:var(--np-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--np-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--np-default-mono-font-feature-settings,normal);font-variation-settings:var(--np-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.np\:absolute{position:absolute}.np\:inset-0{inset:calc(var(--np-spacing)*0)}.np\:top-0{top:calc(var(--np-spacing)*0)}.np\:right-0{right:calc(var(--np-spacing)*0)}.np\:bottom-0{bottom:calc(var(--np-spacing)*0)}.np\:left-0{left:calc(var(--np-spacing)*0)}.np\:origin-center{transform-origin:50%}.np\:-translate-x-1\/4{--tw-translate-x:calc(calc(1/4*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.np\:translate-x-1\/4{--tw-translate-x:calc(1/4*100%);translate:var(--tw-translate-x)var(--tw-translate-y)}.np\:-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.np\:translate-y-1\/2{--tw-translate-y:calc(1/2*100%);translate:var(--tw-translate-x)var(--tw-translate-y)}.np\:-rotate-45{rotate:-45deg}.np\:rotate-45{rotate:45deg}.np\:transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.np\:rounded-\[30\%\]{border-radius:30%}.np\:rounded-full{border-radius:3.40282e38px}.np\:rounded-none{border-radius:0}.np\:rounded-xl{border-radius:var(--np-radius-xl)}.np\:border{border-style:var(--tw-border-style);border-width:1px}.np\:border-2{border-style:var(--tw-border-style);border-width:2px}.np\:border-4{border-style:var(--tw-border-style);border-width:4px}.np\:border-8{border-style:var(--tw-border-style);border-width:8px}.np\:border-\[3px\]{border-style:var(--tw-border-style);border-width:3px}.np\:border-\[5px\]{border-style:var(--tw-border-style);border-width:5px}.np\:border-\[6px\]{border-style:var(--tw-border-style);border-width:6px}}:root{--pp-duration-fast:.15s;--pp-duration-normal:.2s;--pp-duration-slow:.3s;--pp-ease-default:cubic-bezier(.4,0,.2,1);--pp-ease-spring:cubic-bezier(.34,1.56,.64,1);--pp-ease-bounce:cubic-bezier(.68,-.55,.265,1.55);--pp-color-primary:#007aff;--pp-color-success:#30d158;--pp-color-warning:#ffd60a;--pp-color-error:#ff453a;--pp-color-gray:#8e8e93;--pp-shadow-sm:0 1px 2px 0 #0000000d;--pp-shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--pp-shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--pp-shadow-glow:0 0 20px 0 #6366f14d;--pp-focus-ring:0 0 0 3px #007aff66}@keyframes pp-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes pp-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.98)}}@keyframes pp-skeleton{0%,to{opacity:1}50%{opacity:.5}}@keyframes pp-badge-bounce{0%{opacity:0;transform:scale(0)translateY(10px)}50%{transform:scale(1.2)translateY(-2px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes pp-ring-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pp-presence-pulse{0%,to{box-shadow:0 0}50%{box-shadow:0 0 0 4px #0000}}@keyframes pp-glow{0%,to{box-shadow:0 0 20px 0 var(--pp-glow-color,#6366f14d)}50%{box-shadow:0 0 30px 5px var(--pp-glow-color,#6366f180)}}@keyframes pp-fade-in{0%{opacity:0}to{opacity:1}}@keyframes pp-scale-in{0%{opacity:0;transform:scale(.8)}50%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes np-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.np-shimmer{background:linear-gradient(90deg,#0000 0%,#fff6 50%,#0000 100%) 0 0/200% 100%;animation:1.5s infinite np-shimmer}.pp-container{--pp-transition-duration:var(--pp-duration-normal);--pp-transition-timing:var(--pp-ease-default);--pp-spring-timing:var(--pp-ease-spring);-webkit-user-select:none;user-select:none;backface-visibility:hidden;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative;transform:translateZ(0)}.pp-inner{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.pp-interactive{cursor:pointer;transition:transform var(--pp-transition-duration)var(--pp-spring-timing),box-shadow var(--pp-transition-duration)var(--pp-transition-timing),filter var(--pp-transition-duration)var(--pp-transition-timing)}.pp-interactive:hover{filter:brightness(1.02);transform:scale(1.05)}.pp-interactive:active{filter:brightness(.98);transform:scale(.95)}.pp-interactive:focus-visible{box-shadow:var(--pp-focus-ring);outline:none}.pp-image{object-fit:cover;width:100%;height:100%;transition:opacity var(--pp-transition-duration)var(--pp-transition-timing);position:absolute;inset:0}.pp-image-loading{opacity:0}.pp-image-loaded{opacity:1}.pp-fallback{color:#fffffff2;text-shadow:0 1px 2px #0000001a;letter-spacing:.02em;justify-content:center;align-items:center;width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,sans-serif;font-weight:500;display:flex}.pp-fallback-icon{color:#9ca3afcc}.pp-shimmer{position:absolute;inset:0;overflow:hidden}.pp-shimmer:after{content:"";background:linear-gradient(90deg,#0000 0%,#fff6 50%,#0000 100%);animation:1.5s infinite pp-shimmer;position:absolute;inset:0}.pp-pulse{animation:2s ease-in-out infinite pp-pulse}.pp-skeleton{background:linear-gradient(90deg,#e5e7eb 0%,#f3f4f6 50%,#e5e7eb 100%) 0 0/200% 100%;animation:1.5s ease-in-out infinite pp-skeleton}.pp-badge{animation:pp-badge-bounce .4s var(--pp-spring-timing);z-index:10;border-radius:9999px;justify-content:center;align-items:center;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,sans-serif;font-weight:600;line-height:1;display:flex;position:absolute;box-shadow:0 2px 4px #00000026}.pp-badge-pulse{animation:pp-badge-bounce .4s var(--pp-spring-timing),pp-presence-pulse 2s ease-in-out infinite .4s}.pp-badge-glow{box-shadow:0 0 10px 2px var(--pp-badge-glow-color,currentColor)}.pp-ribbon-container{z-index:10;pointer-events:none;position:absolute;overflow:hidden}.pp-ribbon{text-align:center;text-transform:uppercase;letter-spacing:.05em;width:100%;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,sans-serif;font-weight:600;position:absolute;box-shadow:0 2px 4px #0003}.pp-ring{border-radius:inherit;-webkit-mask-composite:xor;pointer-events:none;-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;position:absolute;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.pp-ring-animated{animation:3s linear infinite pp-ring-rotate}.pp-presence{z-index:10;border:2px solid #fff;border-radius:9999px;position:absolute;box-shadow:0 1px 3px #00000026}.pp-presence-animated{animation:2s ease-in-out infinite pp-presence-pulse}.pp-glow{animation:2s ease-in-out infinite pp-glow}@media (prefers-reduced-motion:reduce){.pp-container,.pp-interactive,.pp-image,.pp-shimmer:after,.pp-pulse,.pp-skeleton,.pp-badge,.pp-badge-pulse,.pp-ring-animated,.pp-presence-animated,.pp-glow,.np-shimmer{transition:none!important;animation:none!important}.pp-interactive:hover,.pp-interactive:active{transform:none!important}}@media (prefers-contrast:high){.pp-badge,.pp-presence{border-width:3px}.pp-container{outline:2px solid #0000}.pp-interactive:focus-visible{outline-offset:2px;outline:3px solid}}@media (prefers-color-scheme:dark){:root{--pp-shadow-sm:0 1px 2px 0 #0003;--pp-shadow-md:0 4px 6px -1px #0000004d,0 2px 4px -2px #0003;--pp-shadow-lg:0 10px 15px -3px #0006,0 4px 6px -4px #0000004d}.pp-skeleton{background:linear-gradient(90deg,#374151 0%,#4b5563 50%,#374151 100%)}.pp-fallback-icon{color:#d1d5db99}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid}}}@layer theme{:root,:host{--np-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--np-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--np-spacing:.25rem;--np-radius-xl:.75rem;--np-default-font-family:var(--np-font-sans);--np-default-mono-font-family:var(--np-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--np-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--np-default-font-feature-settings,normal);font-variation-settings:var(--np-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--np-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--np-default-mono-font-feature-settings,normal);font-variation-settings:var(--np-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.np\:absolute{position:absolute}.np\:inset-0{inset:calc(var(--np-spacing)*0)}.np\:top-0{top:calc(var(--np-spacing)*0)}.np\:right-0{right:calc(var(--np-spacing)*0)}.np\:bottom-0{bottom:calc(var(--np-spacing)*0)}.np\:left-0{left:calc(var(--np-spacing)*0)}.np\:left-1\/2{left:50%}.np\:origin-center{transform-origin:50%}.np\:-translate-x-1\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.np\:-translate-x-1\/4{--tw-translate-x:calc(calc(1/4*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.np\:translate-x-1\/4{--tw-translate-x:calc(1/4*100%);translate:var(--tw-translate-x)var(--tw-translate-y)}.np\:-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.np\:translate-y-1\/2{--tw-translate-y:calc(1/2*100%);translate:var(--tw-translate-x)var(--tw-translate-y)}.np\:-rotate-45{rotate:-45deg}.np\:rotate-0{rotate:none}.np\:rotate-45{rotate:45deg}.np\:transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.np\:rounded-\[30\%\]{border-radius:30%}.np\:rounded-full{border-radius:3.40282e38px}.np\:rounded-none{border-radius:0}.np\:rounded-xl{border-radius:var(--np-radius-xl)}.np\:border{border-style:var(--tw-border-style);border-width:1px}.np\:border-2{border-style:var(--tw-border-style);border-width:2px}.np\:border-4{border-style:var(--tw-border-style);border-width:4px}.np\:border-8{border-style:var(--tw-border-style);border-width:8px}.np\:border-\[3px\]{border-style:var(--tw-border-style);border-width:3px}.np\:border-\[5px\]{border-style:var(--tw-border-style);border-width:5px}.np\:border-\[6px\]{border-style:var(--tw-border-style);border-width:6px}}:root{--pp-duration-fast:.15s;--pp-duration-normal:.2s;--pp-duration-slow:.3s;--pp-ease-default:cubic-bezier(.4,0,.2,1);--pp-ease-spring:cubic-bezier(.34,1.56,.64,1);--pp-ease-bounce:cubic-bezier(.68,-.55,.265,1.55);--pp-color-primary:#007aff;--pp-color-success:#30d158;--pp-color-warning:#ffd60a;--pp-color-error:#ff453a;--pp-color-gray:#8e8e93;--pp-shadow-sm:0 1px 2px 0 #0000000d;--pp-shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--pp-shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--pp-shadow-glow:0 0 20px 0 #6366f14d;--pp-focus-ring:0 0 0 3px #007aff66}@keyframes pp-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes pp-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.98)}}@keyframes pp-skeleton{0%,to{opacity:1}50%{opacity:.5}}@keyframes pp-badge-bounce{0%{opacity:0;transform:scale(0)translateY(10px)}50%{transform:scale(1.2)translateY(-2px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes pp-ring-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pp-presence-pulse{0%,to{box-shadow:0 0}50%{box-shadow:0 0 0 4px #0000}}@keyframes pp-glow{0%,to{box-shadow:0 0 20px 0 var(--pp-glow-color,#6366f14d)}50%{box-shadow:0 0 30px 5px var(--pp-glow-color,#6366f180)}}@keyframes pp-fade-in{0%{opacity:0}to{opacity:1}}@keyframes pp-scale-in{0%{opacity:0;transform:scale(.8)}50%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes np-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.np-shimmer{background:linear-gradient(90deg,#0000 0%,#fff6 50%,#0000 100%) 0 0/200% 100%;animation:1.5s infinite np-shimmer}.pp-container{--pp-transition-duration:var(--pp-duration-normal);--pp-transition-timing:var(--pp-ease-default);--pp-spring-timing:var(--pp-ease-spring);-webkit-user-select:none;user-select:none;backface-visibility:hidden;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative;transform:translateZ(0)}.pp-inner{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.pp-interactive{cursor:pointer;transition:transform var(--pp-transition-duration)var(--pp-spring-timing),box-shadow var(--pp-transition-duration)var(--pp-transition-timing),filter var(--pp-transition-duration)var(--pp-transition-timing)}.pp-interactive:hover{filter:brightness(1.02);transform:scale(1.05)}.pp-interactive:active{filter:brightness(.98);transform:scale(.95)}.pp-interactive:focus-visible{box-shadow:var(--pp-focus-ring);outline:none}.pp-image{object-fit:cover;width:100%;height:100%;transition:opacity var(--pp-transition-duration)var(--pp-transition-timing);position:absolute;inset:0}.pp-image-loading{opacity:0}.pp-image-loaded{opacity:1}.pp-fallback{color:#fffffff2;text-shadow:0 1px 2px #0000001a;letter-spacing:.02em;justify-content:center;align-items:center;width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,sans-serif;font-weight:500;display:flex}.pp-fallback-icon{color:#9ca3afcc}.pp-shimmer{position:absolute;inset:0;overflow:hidden}.pp-shimmer:after{content:"";background:linear-gradient(90deg,#0000 0%,#fff6 50%,#0000 100%);animation:1.5s infinite pp-shimmer;position:absolute;inset:0}.pp-pulse{animation:2s ease-in-out infinite pp-pulse}.pp-skeleton{background:linear-gradient(90deg,#e5e7eb 0%,#f3f4f6 50%,#e5e7eb 100%) 0 0/200% 100%;animation:1.5s ease-in-out infinite pp-skeleton}.pp-badge{animation:pp-badge-bounce .4s var(--pp-spring-timing);z-index:10;border-radius:9999px;justify-content:center;align-items:center;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,sans-serif;font-weight:600;line-height:1;display:flex;position:absolute;box-shadow:0 2px 4px #00000026}.pp-badge-pulse{animation:pp-badge-bounce .4s var(--pp-spring-timing),pp-presence-pulse 2s ease-in-out infinite .4s}.pp-badge-glow{box-shadow:0 0 10px 2px var(--pp-badge-glow-color,currentColor)}.pp-ribbon-container{z-index:10;pointer-events:none;position:absolute;overflow:hidden}.pp-ribbon{text-align:center;text-transform:uppercase;letter-spacing:.05em;width:100%;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,sans-serif;font-weight:600;position:absolute;box-shadow:0 2px 4px #0003}.pp-ring{border-radius:inherit;-webkit-mask-composite:xor;pointer-events:none;-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;position:absolute;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.pp-ring-animated{animation:3s linear infinite pp-ring-rotate}.pp-presence{z-index:10;border:2px solid #fff;border-radius:9999px;position:absolute;box-shadow:0 1px 3px #00000026}.pp-presence-animated{animation:2s ease-in-out infinite pp-presence-pulse}.pp-glow{animation:2s ease-in-out infinite pp-glow}@media (prefers-reduced-motion:reduce){.pp-container,.pp-interactive,.pp-image,.pp-shimmer:after,.pp-pulse,.pp-skeleton,.pp-badge,.pp-badge-pulse,.pp-ring-animated,.pp-presence-animated,.pp-glow,.np-shimmer{transition:none!important;animation:none!important}.pp-interactive:hover,.pp-interactive:active{transform:none!important}}@media (prefers-contrast:high){.pp-badge,.pp-presence{border-width:3px}.pp-container{outline:2px solid #0000}.pp-interactive:focus-visible{outline-offset:2px;outline:3px solid}}@media (prefers-color-scheme:dark){:root{--pp-shadow-sm:0 1px 2px 0 #0003;--pp-shadow-md:0 4px 6px -1px #0000004d,0 2px 4px -2px #0003;--pp-shadow-lg:0 10px 15px -3px #0006,0 4px 6px -4px #0000004d}.pp-skeleton{background:linear-gradient(90deg,#374151 0%,#4b5563 50%,#374151 100%)}.pp-fallback-icon{color:#d1d5db99}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}
|
package/dist/svelte.cjs
CHANGED
|
@@ -1,371 +1,2 @@
|
|
|
1
|
-
'use strict';var
|
|
2
|
-
@keyframes pp-shimmer {
|
|
3
|
-
0% { transform: translateX(-100%); }
|
|
4
|
-
100% { transform: translateX(100%); }
|
|
5
|
-
}`,pulse:`
|
|
6
|
-
@keyframes pp-pulse {
|
|
7
|
-
0%, 100% { opacity: 1; transform: scale(1); }
|
|
8
|
-
50% { opacity: 0.7; transform: scale(0.98); }
|
|
9
|
-
}`,skeleton:`
|
|
10
|
-
@keyframes pp-skeleton {
|
|
11
|
-
0%, 100% { opacity: 1; }
|
|
12
|
-
50% { opacity: 0.5; }
|
|
13
|
-
}`,badgeBounce:`
|
|
14
|
-
@keyframes pp-badge-bounce {
|
|
15
|
-
0% { transform: scale(0) translateY(10px); opacity: 0; }
|
|
16
|
-
50% { transform: scale(1.2) translateY(-2px); }
|
|
17
|
-
100% { transform: scale(1) translateY(0); opacity: 1; }
|
|
18
|
-
}`,ringRotate:`
|
|
19
|
-
@keyframes pp-ring-rotate {
|
|
20
|
-
from { transform: rotate(0deg); }
|
|
21
|
-
to { transform: rotate(360deg); }
|
|
22
|
-
}`,presencePulse:`
|
|
23
|
-
@keyframes pp-presence-pulse {
|
|
24
|
-
0%, 100% { box-shadow: 0 0 0 0 currentColor; }
|
|
25
|
-
50% { box-shadow: 0 0 0 4px transparent; }
|
|
26
|
-
}`,glow:`
|
|
27
|
-
@keyframes pp-glow {
|
|
28
|
-
0%, 100% { box-shadow: 0 0 20px 0 var(--pp-glow-color, rgba(99, 102, 241, 0.3)); }
|
|
29
|
-
50% { box-shadow: 0 0 30px 5px var(--pp-glow-color, rgba(99, 102, 241, 0.5)); }
|
|
30
|
-
}`,fadeIn:`
|
|
31
|
-
@keyframes pp-fade-in {
|
|
32
|
-
from { opacity: 0; }
|
|
33
|
-
to { opacity: 1; }
|
|
34
|
-
}`,scaleIn:`
|
|
35
|
-
@keyframes pp-scale-in {
|
|
36
|
-
0% { transform: scale(0.8); opacity: 0; }
|
|
37
|
-
50% { transform: scale(1.05); }
|
|
38
|
-
100% { transform: scale(1); opacity: 1; }
|
|
39
|
-
}`},ne=Object.values(te).join(`
|
|
40
|
-
`),re=`
|
|
41
|
-
/* Profile Picture Component Styles */
|
|
42
|
-
.pp-container {
|
|
43
|
-
--pp-transition-duration: 200ms;
|
|
44
|
-
--pp-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
|
|
45
|
-
--pp-spring-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
46
|
-
position: relative;
|
|
47
|
-
display: inline-flex;
|
|
48
|
-
align-items: center;
|
|
49
|
-
justify-content: center;
|
|
50
|
-
user-select: none;
|
|
51
|
-
-webkit-user-select: none;
|
|
52
|
-
flex-shrink: 0;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
/* Inner container for image clipping - allows badges/rings to overflow */
|
|
56
|
-
.pp-inner {
|
|
57
|
-
position: absolute;
|
|
58
|
-
inset: 0;
|
|
59
|
-
overflow: hidden;
|
|
60
|
-
border-radius: inherit;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
/* Interactive states */
|
|
64
|
-
.pp-interactive {
|
|
65
|
-
cursor: pointer;
|
|
66
|
-
transition: transform var(--pp-transition-duration) var(--pp-spring-timing),
|
|
67
|
-
box-shadow var(--pp-transition-duration) var(--pp-transition-timing);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.pp-interactive:hover {
|
|
71
|
-
transform: scale(1.05);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.pp-interactive:active {
|
|
75
|
-
transform: scale(0.95);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.pp-interactive:focus-visible {
|
|
79
|
-
outline: none;
|
|
80
|
-
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
/* Image styles */
|
|
84
|
-
.pp-image {
|
|
85
|
-
position: absolute;
|
|
86
|
-
inset: 0;
|
|
87
|
-
width: 100%;
|
|
88
|
-
height: 100%;
|
|
89
|
-
object-fit: cover;
|
|
90
|
-
transition: opacity var(--pp-transition-duration) var(--pp-transition-timing);
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.pp-image-loading {
|
|
94
|
-
opacity: 0;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.pp-image-loaded {
|
|
98
|
-
opacity: 1;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
/* Fallback styles */
|
|
102
|
-
.pp-fallback {
|
|
103
|
-
display: flex;
|
|
104
|
-
align-items: center;
|
|
105
|
-
justify-content: center;
|
|
106
|
-
width: 100%;
|
|
107
|
-
height: 100%;
|
|
108
|
-
font-weight: 500;
|
|
109
|
-
color: rgba(255, 255, 255, 0.9);
|
|
110
|
-
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
111
|
-
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
|
|
112
|
-
letter-spacing: 0.02em;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
.pp-fallback-icon {
|
|
116
|
-
color: rgba(156, 163, 175, 0.8);
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
/* Shimmer placeholder */
|
|
120
|
-
.pp-shimmer {
|
|
121
|
-
position: absolute;
|
|
122
|
-
inset: 0;
|
|
123
|
-
overflow: hidden;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
.pp-shimmer::after {
|
|
127
|
-
content: '';
|
|
128
|
-
position: absolute;
|
|
129
|
-
inset: 0;
|
|
130
|
-
background: linear-gradient(
|
|
131
|
-
90deg,
|
|
132
|
-
transparent 0%,
|
|
133
|
-
rgba(255, 255, 255, 0.4) 50%,
|
|
134
|
-
transparent 100%
|
|
135
|
-
);
|
|
136
|
-
animation: pp-shimmer 1.5s infinite;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
/* Pulse placeholder */
|
|
140
|
-
.pp-pulse {
|
|
141
|
-
animation: pp-pulse 2s ease-in-out infinite;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
/* Skeleton placeholder */
|
|
145
|
-
.pp-skeleton {
|
|
146
|
-
background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
|
|
147
|
-
background-size: 200% 100%;
|
|
148
|
-
animation: pp-skeleton 1.5s ease-in-out infinite;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
/* Badge styles */
|
|
152
|
-
.pp-badge {
|
|
153
|
-
position: absolute;
|
|
154
|
-
display: flex;
|
|
155
|
-
align-items: center;
|
|
156
|
-
justify-content: center;
|
|
157
|
-
border-radius: 9999px;
|
|
158
|
-
font-weight: 600;
|
|
159
|
-
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
|
|
160
|
-
line-height: 1;
|
|
161
|
-
animation: pp-badge-bounce 0.4s var(--pp-spring-timing);
|
|
162
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
.pp-badge-with-icon {
|
|
166
|
-
gap: 4px;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
.pp-badge-icon {
|
|
170
|
-
display: inline-flex;
|
|
171
|
-
align-items: center;
|
|
172
|
-
justify-content: center;
|
|
173
|
-
line-height: 1;
|
|
174
|
-
flex-shrink: 0;
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
.pp-badge-pulse {
|
|
178
|
-
animation: pp-badge-bounce 0.4s var(--pp-spring-timing),
|
|
179
|
-
pp-presence-pulse 2s ease-in-out infinite 0.4s;
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
.pp-badge-glow {
|
|
183
|
-
box-shadow: 0 0 10px 2px var(--pp-badge-glow-color, currentColor);
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
/* Ribbon styles */
|
|
187
|
-
.pp-ribbon-container {
|
|
188
|
-
position: absolute;
|
|
189
|
-
z-index: 10;
|
|
190
|
-
overflow: hidden;
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
.pp-ribbon {
|
|
194
|
-
position: absolute;
|
|
195
|
-
width: 100%;
|
|
196
|
-
text-align: center;
|
|
197
|
-
font-weight: 600;
|
|
198
|
-
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
|
|
199
|
-
text-transform: uppercase;
|
|
200
|
-
letter-spacing: 0.05em;
|
|
201
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
/* Ring effect (Instagram-style) */
|
|
205
|
-
.pp-ring {
|
|
206
|
-
position: absolute;
|
|
207
|
-
inset: -4px;
|
|
208
|
-
border-radius: inherit;
|
|
209
|
-
padding: 3px;
|
|
210
|
-
background: var(--pp-ring-color, linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888));
|
|
211
|
-
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
212
|
-
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
213
|
-
-webkit-mask-composite: xor;
|
|
214
|
-
mask-composite: exclude;
|
|
215
|
-
transition: background 0.3s ease;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
.pp-ring-animated {
|
|
219
|
-
animation: pp-ring-rotate 3s linear infinite;
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
.pp-ring-progress {
|
|
223
|
-
/* Progress rings should not animate rotation */
|
|
224
|
-
animation: none;
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
/* Presence indicator */
|
|
228
|
-
.pp-presence {
|
|
229
|
-
position: absolute;
|
|
230
|
-
bottom: 0;
|
|
231
|
-
right: 0;
|
|
232
|
-
border-radius: 9999px;
|
|
233
|
-
border: 2px solid white;
|
|
234
|
-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
.pp-presence-animated {
|
|
238
|
-
animation: pp-presence-pulse 2s ease-in-out infinite;
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
/* Glow effect */
|
|
242
|
-
.pp-glow {
|
|
243
|
-
animation: pp-glow 2s ease-in-out infinite;
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
/* Reduced motion support */
|
|
247
|
-
@media (prefers-reduced-motion: reduce) {
|
|
248
|
-
.pp-container,
|
|
249
|
-
.pp-interactive,
|
|
250
|
-
.pp-image,
|
|
251
|
-
.pp-shimmer::after,
|
|
252
|
-
.pp-pulse,
|
|
253
|
-
.pp-skeleton,
|
|
254
|
-
.pp-badge,
|
|
255
|
-
.pp-ring-animated,
|
|
256
|
-
.pp-presence-animated,
|
|
257
|
-
.pp-glow {
|
|
258
|
-
animation: none !important;
|
|
259
|
-
transition: none !important;
|
|
260
|
-
}
|
|
261
|
-
}
|
|
262
|
-
`,W=`${ne}
|
|
263
|
-
${re}`,J=`
|
|
264
|
-
@keyframes np-shimmer {
|
|
265
|
-
0% { background-position: -200% 0; }
|
|
266
|
-
100% { background-position: 200% 0; }
|
|
267
|
-
}
|
|
268
|
-
.np-shimmer {
|
|
269
|
-
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
|
|
270
|
-
background-size: 200% 100%;
|
|
271
|
-
animation: np-shimmer 1.5s infinite;
|
|
272
|
-
}
|
|
273
|
-
`;function q(t,r=.3){if(y(t)){let e=Number.parseInt(t.slice(1,3),16),n=Number.parseInt(t.slice(3,5),16),i=Number.parseInt(t.slice(5,7),16);return `0 0 20px 0 rgba(${e}, ${n}, ${i}, ${r})`}return `0 0 20px 0 ${t}`}var o=class extends lit.LitElement{constructor(){super(...arguments);this.src="";this.alt="";this.size=u.size;this.variant=u.variant;this.shadow=u.shadow;this.border=false;this.borderWidth=u.borderWidth;this.borderColor=u.borderColor;this.rotation=0;this.loading=u.loading;this.placeholder=u.placeholder;this.placeholderColor=u.placeholderColor;this.isLoaded=false;this.hasError=false;this.cdnLoadFailed=false;this.previousSrc="";this.RETRY_DELAY_MS=3e4;}static setCdnBaseUrl(e){o.cdnBaseUrl=e,o.instances.forEach(n=>{n.extCustomerId&&!n.cdnImageUrl&&(n.cdnLoadFailed=false,n.retryTimeoutId&&(clearTimeout(n.retryTimeoutId),n.retryTimeoutId=void 0),n.previousExtCustomerId||(n.previousExtCustomerId=n.extCustomerId),n.loadCdnImage());});}static getCdnBaseUrl(){return o.cdnBaseUrl}createRenderRoot(){return o.injectStylesOnce(),this}static injectStylesOnce(){if(o.stylesInjected||typeof document>"u")return;let e=document.createElement("style");e.textContent=W,document.head.appendChild(e),o.stylesInjected=true;}get pixelSize(){let e=this.size;return typeof e=="number"?e:v[e]??v[u.size]}connectedCallback(){super.connectedCallback(),o.instances.add(this);}disconnectedCallback(){super.disconnectedCallback(),o.instances.delete(this),this.retryTimeoutId&&(clearTimeout(this.retryTimeoutId),this.retryTimeoutId=void 0);}firstUpdated(){this.extCustomerId&&o.cdnBaseUrl&&(this.previousExtCustomerId=this.extCustomerId,this.loadCdnImage());}updated(e){super.updated(e),this.extCustomerId&&o.cdnBaseUrl&&!this.cdnImageUrl&&(this.cdnLoadFailed||!this.previousExtCustomerId)&&(this.previousExtCustomerId||(this.previousExtCustomerId=this.extCustomerId),this.cdnLoadFailed=false,this.loadCdnImage());}willUpdate(e){e.has("src")&&this.src!==this.previousSrc&&(this.isLoaded=false,this.hasError=false,this.previousSrc=this.src),(e.has("extCustomerId")||e.has("size")||e.has("bgColor"))&&this.extCustomerId!==this.previousExtCustomerId&&(this.previousExtCustomerId=this.extCustomerId,this.cdnImageUrl=void 0,this.cdnLoadFailed=false,this.isLoaded=false,this.hasError=false,this.retryTimeoutId&&(clearTimeout(this.retryTimeoutId),this.retryTimeoutId=void 0),this.loadCdnImage());}handleLoad(){this.isLoaded=true,this.dispatchEvent(new CustomEvent("load",{bubbles:true,composed:true}));}handleError(){if(this.cdnImageUrl&&!this.cdnLoadFailed){this.cdnLoadFailed=true,this.cdnImageUrl=void 0,this.dispatchEvent(new CustomEvent("cdn-error",{bubbles:true,composed:true,detail:{error:"Image load failed"}})),this.retryTimeoutId&&clearTimeout(this.retryTimeoutId),this.retryTimeoutId=setTimeout(()=>{this.retryTimeoutId=void 0,this.extCustomerId&&o.cdnBaseUrl&&(this.cdnLoadFailed=false,this.hasError=false,this.isLoaded=false,this.loadCdnImage());},this.RETRY_DELAY_MS);return}this.hasError=true,this.isLoaded=true,this.dispatchEvent(new CustomEvent("error",{bubbles:true,composed:true}));}loadCdnImage(){if(!(this.extCustomerId&&o.cdnBaseUrl)){this.cdnLoadFailed=true;return}let e=N(this.pixelSize),n=O(this.bgColor),i=typeof window<"u"?window.location.hostname:"localhost";this.cdnImageUrl=G(o.cdnBaseUrl,this.extCustomerId,e,n,i);}getContainerStyles(){let e=Y(this.bgColor,this.bgGradient),n=this.border?V(this.borderWidth,this.borderColor):null,i=H(this.shadow),a={};if(this.glow){let f=this.glow.color??this.borderColor??"#6366f1";a={"--pp-glow-color":f,boxShadow:q(f,this.glow.intensity??.3)};}let d=this.interactive?.hoverable||this.interactive?.pressable;return {classes:b("pp-container",j(this.variant),e.className,n?.className,d&&"pp-interactive",this.glow?.animate&&"pp-glow"),styles:{width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,borderRadius:x[this.variant],...e.style,...n?.style,...i,...a,cursor:this.interactive?.cursor??(d?"pointer":"default"),transform:this.rotation?`rotate(${this.rotation}deg)`:void 0}}}renderPlaceholder(){if(this.isLoaded||this.placeholder==="none")return lit.nothing;let e={shimmer:"pp-shimmer",pulse:"pp-pulse",skeleton:"pp-skeleton",blur:"",none:""}[this.placeholder];return lit.html`
|
|
274
|
-
${this.placeholder==="shimmer"?lit.html`<style>${J}</style>`:lit.nothing}
|
|
275
|
-
<div
|
|
276
|
-
class=${b("np:absolute np:inset-0",e)}
|
|
277
|
-
style=${styleMap_js.styleMap({backgroundColor:this.placeholderColor,borderRadius:"inherit"})}>
|
|
278
|
-
</div>
|
|
279
|
-
`}renderFallback(){if(this.fallback)return lit.html`
|
|
280
|
-
<span
|
|
281
|
-
class="pp-fallback"
|
|
282
|
-
style=${styleMap_js.styleMap({fontSize:`${S(this.pixelSize)}px`})}>
|
|
283
|
-
${this.fallback}
|
|
284
|
-
</span>
|
|
285
|
-
`;if(this.alt){let n=D(this.alt);return lit.html`
|
|
286
|
-
<div
|
|
287
|
-
class="pp-fallback np:absolute np:inset-0"
|
|
288
|
-
style=${styleMap_js.styleMap({background:this.bgColor??n,fontSize:`${S(this.pixelSize)}px`})}>
|
|
289
|
-
${T(this.alt)}
|
|
290
|
-
</div>
|
|
291
|
-
`}let e=this.pixelSize*.5;return lit.html`
|
|
292
|
-
<svg
|
|
293
|
-
class="pp-fallback-icon"
|
|
294
|
-
style="width: ${e}px; height: ${e}px;"
|
|
295
|
-
fill="currentColor"
|
|
296
|
-
viewBox="0 0 24 24">
|
|
297
|
-
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
|
|
298
|
-
</svg>
|
|
299
|
-
`}renderImage(){let e=!!(this.extCustomerId&&o.cdnBaseUrl),n;return this.cdnImageUrl?n=this.cdnImageUrl:(!e||this.cdnLoadFailed)&&(n=this.src),this.hasError||!n?this.renderFallback():lit.html`
|
|
300
|
-
<img
|
|
301
|
-
src=${n}
|
|
302
|
-
alt=${this.alt}
|
|
303
|
-
loading=${this.loading}
|
|
304
|
-
decoding="async"
|
|
305
|
-
@load=${this.handleLoad}
|
|
306
|
-
@error=${this.handleError}
|
|
307
|
-
class=${b("pp-image",this.isLoaded?"pp-image-loaded":"pp-image-loading")}
|
|
308
|
-
draggable="false" />
|
|
309
|
-
`}renderRing(){if(!this.ring?.show)return lit.nothing;let e=this.ring.width??3,n=this.ring.gap??3,i=e+n,a,d=this.ring.progress!==void 0;if(d){let f=this.ring.progress??0,m=this.ring.color??"#30D158",h=this.ring.emptyColor??"#8E8E93";a=M(f,m,h);}else this.ring.gradient&&this.ring.gradient.length>0?a=F(this.ring.gradient):a=this.ring.color??"linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)";return lit.html`
|
|
310
|
-
<div
|
|
311
|
-
class=${b("pp-ring",this.ring.animate&&!d&&"pp-ring-animated",d&&"pp-ring-progress")}
|
|
312
|
-
style=${styleMap_js.styleMap({inset:`-${i}px`,padding:`${e}px`,background:a,borderRadius:x[this.variant]})}>
|
|
313
|
-
</div>
|
|
314
|
-
`}renderPresence(){if(!this.presence)return lit.nothing;let e=this.presence.thickness??2,n=B(this.pixelSize,e),i=R[this.presence.status],a=Math.max(0,this.pixelSize*.02);return lit.html`
|
|
315
|
-
<div
|
|
316
|
-
class=${b("pp-presence",this.presence.animate&&"pp-presence-animated")}
|
|
317
|
-
style=${styleMap_js.styleMap({width:`${n}px`,height:`${n}px`,backgroundColor:i,bottom:`${a}px`,right:`${a}px`,color:i})}
|
|
318
|
-
title=${this.presence.status}>
|
|
319
|
-
</div>
|
|
320
|
-
`}renderBadge(){if(!this.badge)return lit.nothing;let e=this.badge.position??"bottom-right",n=this.badge.content!==void 0,i=this.badge.icon!==void 0,a=n||i,{size:d,fontSize:f}=L(this.pixelSize,a),m=this.badge.bgColor??"#22c55e",h=this.badge.color??"#ffffff",Z=n&&this.badge.content!==void 0?U(this.badge.content,this.badge.max):null,k=i?this.badge.icon:null,K=f*.9,X={"top-left":{top:"-4px",left:"-4px"},"top-right":{top:"-4px",right:"-4px"},"bottom-left":{bottom:"-4px",left:"-4px"},"bottom-right":{bottom:"-4px",right:"-4px"}};return lit.html`
|
|
321
|
-
<div
|
|
322
|
-
class=${b("pp-badge",this.badge.pulse&&"pp-badge-pulse",this.badge.glow&&"pp-badge-glow",i&&"pp-badge-with-icon")}
|
|
323
|
-
style=${styleMap_js.styleMap({width:a?"auto":`${d}px`,minWidth:`${d}px`,height:`${d}px`,padding:a?"0 6px":"0",fontSize:`${f}px`,backgroundColor:m,color:h,"--pp-badge-glow-color":m,gap:i&&n?"4px":"0",...X[e]})}>
|
|
324
|
-
${k?lit.html`<span class="pp-badge-icon" style=${styleMap_js.styleMap({fontSize:`${K}px`})}>${k}</span>`:lit.nothing}
|
|
325
|
-
${Z??lit.nothing}
|
|
326
|
-
</div>
|
|
327
|
-
`}renderRibbon(){if(!this.ribbon)return lit.nothing;let e=this.ribbon.position??"top-right",n=this.ribbon.bgColor??"#ef4444",i=this.ribbon.color??"#ffffff",a=y(n)?{backgroundColor:n}:{background:n},d={color:i},f=this.pixelSize*.9,m=this.pixelSize*.4,h=Math.max(8,this.pixelSize*.11);return lit.html`
|
|
328
|
-
<div
|
|
329
|
-
class=${b("pp-ribbon-container",E(e))}
|
|
330
|
-
style=${styleMap_js.styleMap({width:`${f}px`,height:`${m}px`})}>
|
|
331
|
-
<div
|
|
332
|
-
class=${b("pp-ribbon np:origin-center np:transform",A(e))}
|
|
333
|
-
style=${styleMap_js.styleMap({fontSize:`${h}px`,padding:`${h*.3}px 0`,...a,...d})}>
|
|
334
|
-
${this.ribbon.icon?lit.html`<span style="margin-right: 2px">${this.ribbon.icon}</span>`:lit.nothing}
|
|
335
|
-
${this.ribbon.text}
|
|
336
|
-
</div>
|
|
337
|
-
</div>
|
|
338
|
-
`}render(){let e=this.getContainerStyles(),n=this.interactive?.focusable||this.interactive?.pressable?0:void 0;return lit.html`
|
|
339
|
-
<div
|
|
340
|
-
class=${e.classes}
|
|
341
|
-
style=${styleMap_js.styleMap(e.styles)}
|
|
342
|
-
tabindex=${n??lit.nothing}
|
|
343
|
-
role=${this.interactive?.pressable?"button":lit.nothing}
|
|
344
|
-
aria-label=${this.alt||lit.nothing}
|
|
345
|
-
data-profile-picture>
|
|
346
|
-
|
|
347
|
-
<!-- Ring Effect (behind everything) -->
|
|
348
|
-
${this.renderRing()}
|
|
349
|
-
|
|
350
|
-
<!-- Inner container for image clipping -->
|
|
351
|
-
<div
|
|
352
|
-
class="pp-inner"
|
|
353
|
-
style=${styleMap_js.styleMap({borderRadius:x[this.variant]})}>
|
|
354
|
-
<!-- Placeholder -->
|
|
355
|
-
${this.renderPlaceholder()}
|
|
356
|
-
|
|
357
|
-
<!-- Main Image or Fallback -->
|
|
358
|
-
${this.renderImage()}
|
|
359
|
-
</div>
|
|
360
|
-
|
|
361
|
-
<!-- Ribbon -->
|
|
362
|
-
${this.renderRibbon()}
|
|
363
|
-
|
|
364
|
-
<!-- Badge -->
|
|
365
|
-
${this.renderBadge()}
|
|
366
|
-
|
|
367
|
-
<!-- Presence Indicator -->
|
|
368
|
-
${this.renderPresence()}
|
|
369
|
-
</div>
|
|
370
|
-
`}};o.stylesInjected=false,o.cdnBaseUrl="",o.instances=new Set,s([decorators_js.property({type:String})],o.prototype,"src",2),s([decorators_js.property({type:String})],o.prototype,"alt",2),s([decorators_js.property({type:String,attribute:"ext-customer-id"})],o.prototype,"extCustomerId",2),s([decorators_js.property({type:String})],o.prototype,"size",2),s([decorators_js.property({type:String})],o.prototype,"variant",2),s([decorators_js.property({type:String})],o.prototype,"shadow",2),s([decorators_js.property({type:Boolean})],o.prototype,"border",2),s([decorators_js.property({type:Number,attribute:"border-width"})],o.prototype,"borderWidth",2),s([decorators_js.property({type:String,attribute:"border-color"})],o.prototype,"borderColor",2),s([decorators_js.property({type:Number})],o.prototype,"rotation",2),s([decorators_js.property({type:String,attribute:"bg-color"})],o.prototype,"bgColor",2),s([decorators_js.property({type:String,attribute:"bg-gradient"})],o.prototype,"bgGradient",2),s([decorators_js.property({type:Object,attribute:"ring",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],o.prototype,"ring",2),s([decorators_js.property({type:Object,attribute:"presence",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],o.prototype,"presence",2),s([decorators_js.property({type:Object,attribute:"glow",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],o.prototype,"glow",2),s([decorators_js.property({type:Object,attribute:"ribbon",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],o.prototype,"ribbon",2),s([decorators_js.property({type:Object,attribute:"badge",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],o.prototype,"badge",2),s([decorators_js.property({type:String})],o.prototype,"loading",2),s([decorators_js.property({type:String})],o.prototype,"placeholder",2),s([decorators_js.property({type:String,attribute:"placeholder-color"})],o.prototype,"placeholderColor",2),s([decorators_js.property({type:String})],o.prototype,"fallback",2),s([decorators_js.property({type:Object,attribute:"interactive",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],o.prototype,"interactive",2),s([decorators_js.state()],o.prototype,"isLoaded",2),s([decorators_js.state()],o.prototype,"hasError",2),s([decorators_js.state()],o.prototype,"cdnImageUrl",2),s([decorators_js.state()],o.prototype,"cdnLoadFailed",2),o=s([decorators_js.customElement("profile-picture")],o);$();//# sourceMappingURL=svelte.cjs.map
|
|
1
|
+
'use strict';var _documentCurrentScript=typeof document!=='undefined'?document.currentScript:null;var s="grasco-profile-picture-styles",n=false;function i(){if(n||typeof document>"u")return;if(document.getElementById(s)){n=true;return}if(document.querySelector('link[href*="profile-picture"][href$="styles.css"]')){n=true;return}let t=o();if(!t)return;let e=document.createElement("link");e.id=s,e.rel="stylesheet",e.href=t,document.head.appendChild(e),n=true;}function o(){if(typeof window<"u"&&window.__GRASCO_PROFILE_PICTURE_CSS__)return window.__GRASCO_PROFILE_PICTURE_CSS__;try{let t=(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('svelte.cjs', document.baseURI).href));if(t)return `${t.substring(0,t.lastIndexOf("/")+1)}dist/styles.css`}catch{}let r=document.currentScript;if(r?.src){let t=new URL(r.src);return `${t.href.substring(0,t.href.lastIndexOf("/")+1)}dist/styles.css`}return null}i();//# sourceMappingURL=svelte.cjs.map
|
|
371
2
|
//# sourceMappingURL=svelte.cjs.map
|