@grasco/profile-picture 0.2.0 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/angular.cjs +62 -53
- package/dist/angular.cjs.map +1 -1
- package/dist/angular.d.cts +11 -2
- package/dist/angular.d.ts +11 -2
- package/dist/angular.js +62 -53
- package/dist/angular.js.map +1 -1
- package/dist/index.cjs +63 -54
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +24 -10
- package/dist/index.d.ts +24 -10
- package/dist/index.js +63 -54
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +68 -59
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +21 -3
- package/dist/react.d.ts +21 -3
- package/dist/react.js +68 -59
- package/dist/react.js.map +1 -1
- package/dist/standalone.d.ts +14 -2
- package/dist/standalone.standalone.js +61 -52
- package/dist/standalone.standalone.js.map +1 -1
- package/dist/styles.css +2 -2
- package/dist/svelte.cjs +62 -53
- package/dist/svelte.cjs.map +1 -1
- package/dist/svelte.d.cts +10 -1
- package/dist/svelte.d.ts +10 -1
- package/dist/svelte.js +62 -53
- package/dist/svelte.js.map +1 -1
- package/dist/vue.cjs +62 -53
- package/dist/vue.cjs.map +1 -1
- package/dist/vue.d.cts +10 -1
- package/dist/vue.d.ts +10 -1
- package/dist/vue.js +62 -53
- package/dist/vue.js.map +1 -1
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/*! tailwindcss v4.1
|
|
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-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\: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-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-border-style{syntax:"*";inherits:false;initial-value:solid}
|
|
1
|
+
/*! tailwindcss v4.2.1 | 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-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\: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-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-border-style{syntax:"*";inherits:false;initial-value:solid}
|
package/dist/svelte.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
'use strict';var lit=require('lit'),decorators_js=require('lit/decorators.js'),styleMap_js=require('lit/directives/style-map.js');var _documentCurrentScript=typeof document!=='undefined'?document.currentScript:null;var
|
|
1
|
+
'use strict';var lit=require('lit'),decorators_js=require('lit/decorators.js'),styleMap_js=require('lit/directives/style-map.js');var _documentCurrentScript=typeof document!=='undefined'?document.currentScript:null;var Ce=Object.defineProperty;var s=(r,o,e,t)=>{for(var n=void 0,i=r.length-1,p;i>=0;i--)(p=r[i])&&(n=(p(o,e,n))||n);return n&&Ce(o,e,n),n};var j="grasco-profile-picture-styles",T=false,K=false;function J(){if(T||typeof document>"u")return;if(document.getElementById(j)){T=true;return}if(document.querySelector('link[href*="profile-picture"][href$="styles.css"]')){T=true;return}K||(K=true,ke());}function ke(){(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>$e());}function $e(){if(T||typeof document>"u")return;if(document.getElementById(j)){T=true;return}let r=Ie();if(!r)return;let o=document.createElement("link");o.id=j,o.rel="stylesheet",o.href=r,document.head.appendChild(o),T=true;}function Ie(){if(typeof window<"u"&&window.__GRASCO_PROFILE_PICTURE_CSS__)return window.__GRASCO_PROFILE_PICTURE_CSS__;try{let o=(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('svelte.cjs', document.baseURI).href));if(o)return `${o.substring(0,o.lastIndexOf("/")+1)}styles.css`}catch{}let r=document.currentScript;if(r?.src){let o=new URL(r.src);return `${o.href.substring(0,o.href.lastIndexOf("/")+1)}dist/styles.css`}return null}var M={"2xs":20,xs:24,sm:32,md:40,lg:48,xl:64,"2xl":80,"3xl":120},X={online:"#30D158",away:"#FFD60A",busy:"#FF453A",offline:"#8E8E93",dnd:"#FF453A"},Z={none:"none",sm:"0 1px 2px 0 rgba(0, 0, 0, 0.05)",md:"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",lg:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",glow:"0 0 20px 0 rgba(99, 102, 241, 0.3)"},w={size:"md",variant:"circle",loading:"lazy",placeholder:"shimmer",borderWidth:2,borderColor:"#ffffff",placeholderColor:"#f3f4f6",shadow:"sm",zoom:1.2};var A={circle:"9999px",rounded:"12px",squircle:"30%",square:"0px"},S={max:4,direction:"ltr",overlap:.3,size:"md",tooltipDelay:300,dropdownMaxHeight:280,animated:true};function k(...r){return r.filter(Boolean).join(" ")}function _(r){return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(r)}function L(r){let e=r.trim().replace(/[^\w\s]/g,"").split(/\s+/).filter(Boolean);return e.length===0?"?":e.length===1?e[0].slice(0,1).toUpperCase():(e[0][0]+(e.at(-1)?.[0]??"")).toUpperCase()}function H(r){return Math.round(r*.38)}function ee(r,o){let e;if(o){let n=Math.round(r*.31);e=Math.min(24,Math.max(14,n));}else {let n=Math.round(r*.22);e=Math.min(14,Math.max(8,n));}let t=Math.max(9,Math.round(e*.55));return {size:e,fontSize:t}}function te(r,o){let e=Math.min(16,Math.max(8,Math.round(r*.2)));return Math.min(18,e+(o-1)*2)}function re(r,o){return typeof r=="string"?r:o&&r>o?`${o}+`:r.toString()}function ne(r){return r.length===0?"transparent":r.length===1?r[0]:`conic-gradient(${r.map((e,t)=>{let n=t/r.length*360,i=(t+1)/r.length*360;return `${e} ${n}deg ${i}deg`}).join(", ")})`}function U(r){let o=0;for(let e=0;e<r.length;e++){let t=r.charCodeAt(e);o=(o<<5)-o+t,o&=o;}return Math.abs(o)}function oe(r,o,e){let n=Math.max(0,Math.min(100,r))/100*360;return `conic-gradient(from 270deg, ${o} 0deg ${n}deg, ${e} ${n}deg 360deg)`}function P(r){let o=["linear-gradient(135deg, #667eea 0%, #764ba2 100%)","linear-gradient(135deg, #f093fb 0%, #f5576c 100%)","linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)","linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)","linear-gradient(135deg, #fa709a 0%, #fee140 100%)","linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)","linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)","linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)","linear-gradient(135deg, #cd9cf2 0%, #f6f3ff 100%)","linear-gradient(135deg, #fddb92 0%, #d1fdff 100%)"],e=U(r)%o.length;return o[e]}var Q=[["#f4a261","#e76f51","#d4a5a5"],["#f2a9b0","#e07a5f","#d4c4a8"],["#c9b1d0","#e8a0bf","#f0d1ce"],["#89c2d9","#a3c4bc","#d5c6e0"],["#f7c59f","#f2a07b","#efcfe3"],["#b5a7d5","#d4a5c9","#f0c3d7"],["#7ec8c8","#6a9fb5","#c2b5d6"],["#f0b3ba","#d4a5c9","#c9d1d9"],["#e8b960","#d4956a","#c9a5b8"],["#a7c4a0","#c9d4a5","#e0c9b1"],["#c4819b","#d9a5b8","#b5aed4"],["#f0c27f","#e0a87c","#d4b5c9"]];function ie(r){let o=U(r),e=Q[o%Q.length],t=U(r+"pos1"),n=U(r+"pos2"),i=20+o%61,p=20+(o>>4)%61,d=20+t%61,c=20+(t>>4)%61,u=20+n%61,f=20+(n>>4)%61;return [`radial-gradient(circle at ${i}% ${p}%, ${e[0]} 0%, transparent 70%)`,`radial-gradient(circle at ${d}% ${c}%, ${e[1]} 0%, transparent 70%)`,`radial-gradient(circle at ${u}% ${f}%, ${e[2]} 0%, transparent 70%)`].join(", ")}function ae(r){return typeof r=="number"?r:M[r]??M[S.size]}function V(r,o,e){let t=e?o-1:o;if(r<=t)return {visible:r,hidden:0,showCounter:false};let n=t-1,i=r-n;return {visible:n,hidden:i,showCounter:true}}function O(r,o,e,t,n){let i=n??o*(1-e);return r*i}function se(r,o,e){return e==="ltr"?o-r:r+1}function pe(r,o,e,t){if(r===0)return 0;if(r===1)return o;let n=t??o*(1-e);return o+n*(r-1)}function de(r){return r>99?"+99":`+${r}`}function le(r){return r<=80?"120":r<=120?"240":r<=240?"480":("960")}function ce(r,o,e,t,n){let i=r.endsWith("/")?r.slice(0,-1):r,p=`${o}_${e}_${t}.webp`;return `${i}/api/profile-picture/cdn/${p}?hostname=${n}`}function ge(r){return {circle:"np:rounded-full",rounded:"np:rounded-xl",squircle:"np:rounded-[30%]",square:"np:rounded-none"}[r]}function ue(r,o){return {className:{1:"np:border",2:"np:border-2",3:"np:border-[3px]",4:"np:border-4",5:"np:border-[5px]",6:"np:border-[6px]",8:"np:border-8"}[r],style:{borderColor:o,borderStyle:"solid"}}}function fe(r,o){return o?{className:"",style:{background:o}}:r?r.includes("gradient")?{className:"",style:{background:r}}:{className:"",style:{backgroundColor:r}}:{className:"",style:{backgroundColor:"transparent"}}}function he(r){return {boxShadow:Z[r]}}var ze={shimmer:`
|
|
2
2
|
@keyframes pp-shimmer {
|
|
3
3
|
0% { transform: translateX(-100%); }
|
|
4
4
|
100% { transform: translateX(100%); }
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
0% { transform: scale(0.8); opacity: 0; }
|
|
37
37
|
50% { transform: scale(1.05); }
|
|
38
38
|
100% { transform: scale(1); opacity: 1; }
|
|
39
|
-
}`},
|
|
39
|
+
}`},Ee=Object.values(ze).join(`
|
|
40
40
|
`),Te=`
|
|
41
41
|
/* Profile Picture Component Styles */
|
|
42
42
|
.pp-container {
|
|
@@ -53,6 +53,7 @@
|
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
/* Inner container for image clipping - allows badges/rings to overflow */
|
|
56
|
+
/* Background is applied here (not on container) to prevent sub-pixel bleed-through */
|
|
56
57
|
.pp-inner {
|
|
57
58
|
position: absolute;
|
|
58
59
|
inset: 0;
|
|
@@ -240,8 +241,8 @@
|
|
|
240
241
|
transition: none !important;
|
|
241
242
|
}
|
|
242
243
|
}
|
|
243
|
-
`,
|
|
244
|
-
${Te}`,
|
|
244
|
+
`,be=`${Ee}
|
|
245
|
+
${Te}`,me=`
|
|
245
246
|
@keyframes np-shimmer {
|
|
246
247
|
0% { background-position: -200% 0; }
|
|
247
248
|
100% { background-position: 200% 0; }
|
|
@@ -251,7 +252,7 @@ ${Te}`,he=`
|
|
|
251
252
|
background-size: 200% 100%;
|
|
252
253
|
animation: np-shimmer 1.5s infinite;
|
|
253
254
|
}
|
|
254
|
-
`;function
|
|
255
|
+
`;function xe(r,o=.3){if(_(r)){let e=Number.parseInt(r.slice(1,3),16),t=Number.parseInt(r.slice(3,5),16),n=Number.parseInt(r.slice(5,7),16);return `0 0 20px 0 rgba(${e}, ${t}, ${n}, ${o})`}return `0 0 20px 0 ${r}`}var Me=`
|
|
255
256
|
@keyframes ppg-tooltip-in {
|
|
256
257
|
from {
|
|
257
258
|
opacity: 0;
|
|
@@ -747,34 +748,39 @@ ${Te}`,he=`
|
|
|
747
748
|
box-shadow: 0 0 0 1.5px rgba(44, 44, 46, 0.95), 0 0 6px rgba(48, 209, 88, 0.5);
|
|
748
749
|
}
|
|
749
750
|
}
|
|
750
|
-
`,
|
|
751
|
-
${Ae}`;var a=class a extends lit.LitElement{constructor(){super(...arguments);this.src="";this.alt="";this.size=
|
|
752
|
-
${this.placeholder==="shimmer"?lit.html`<style>${
|
|
751
|
+
`,we=`${Me}
|
|
752
|
+
${Ae}`;var a=class a extends lit.LitElement{constructor(){super(...arguments);this.src="";this.alt="";this.size=w.size;this.variant=w.variant;this.shadow=w.shadow;this.border=false;this.borderWidth=w.borderWidth;this.borderColor=w.borderColor;this.rotation=0;this.zoom=w.zoom;this.loading=w.loading;this.placeholder=w.placeholder;this.placeholderColor=w.placeholderColor;this.imageMode="original";this.isLoaded=false;this.hasError=false;this.cdnLoadFailed=false;this.previousSrc="";this.randomSeed=Math.random().toString(36).slice(2);this.RETRY_DELAY_MS=3e4;}static{this.stylesInjected=false;}static{this.cdnBaseUrl="";}static{this.instances=new Set;}static setCdnBaseUrl(e){a.cdnBaseUrl=e,a.instances.forEach(t=>{t.extCustomerId&&!t.cdnImageUrl&&(t.cdnLoadFailed=false,t.retryTimeoutId&&(clearTimeout(t.retryTimeoutId),t.retryTimeoutId=void 0),t.previousExtCustomerId||(t.previousExtCustomerId=t.extCustomerId),t.loadCdnImage());});}static getCdnBaseUrl(){return a.cdnBaseUrl}createRenderRoot(){return a.injectStylesOnce(),this}static injectStylesOnce(){if(a.stylesInjected||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:t=>setTimeout(t,1))(()=>{if(a.stylesInjected)return;let t=document.createElement("style");t.textContent=be,document.head.appendChild(t),a.stylesInjected=true;});}get pixelSize(){let e=this.size;return typeof e=="number"?e:M[e]??M[w.size]}get gradientSeed(){return this.extCustomerId||this.alt||this.src||this.randomSeed}connectedCallback(){super.connectedCallback(),a.instances.add(this);}disconnectedCallback(){super.disconnectedCallback(),a.instances.delete(this),this.retryTimeoutId&&(clearTimeout(this.retryTimeoutId),this.retryTimeoutId=void 0);}firstUpdated(){this.extCustomerId&&a.cdnBaseUrl&&(this.previousExtCustomerId=this.extCustomerId,this.loadCdnImage());}updated(e){super.updated(e),this.extCustomerId&&a.cdnBaseUrl&&!this.cdnImageUrl&&!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);let t=e.has("extCustomerId")&&this.extCustomerId!==this.previousExtCustomerId,n=e.has("size")||e.has("imageMode");(t||n&&this.extCustomerId)&&(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}));}handleClick(e){this.interactive?.pressable&&this.dispatchEvent(new CustomEvent("profile-picture-click",{bubbles:true,composed:true,detail:{extCustomerId:this.extCustomerId,alt:this.alt,src:this.src}}));}handleKeyDown(e){this.interactive?.pressable&&(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.handleClick(e));}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&&a.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&&a.cdnBaseUrl)){this.cdnLoadFailed=true;return}let e=le(this.pixelSize),t=typeof window<"u"?window.location.hostname:"localhost";this.cdnImageUrl=ce(a.cdnBaseUrl,this.extCustomerId,e,this.imageMode,t);}getContainerStyles(){let e=fe(this.bgColor,this.bgGradient),t=this.border?ue(this.borderWidth,this.borderColor):null,n=he(this.shadow),i={};if(this.glow){let d=this.glow.color??this.borderColor??"#6366f1";i={"--pp-glow-color":d,boxShadow:xe(d,this.glow.intensity??.3)};}let p=this.interactive?.hoverable||this.interactive?.pressable;return {classes:k("pp-container",ge(this.variant),t?.className,p&&"pp-interactive",this.glow?.animate&&"pp-glow"),styles:{width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,borderRadius:A[this.variant],...t?.style,...n,...i,cursor:this.interactive?.cursor??(p?"pointer":"default"),transform:this.rotation?`rotate(${this.rotation}deg)`:void 0},innerStyles:e.style??{},innerClasses:e.className}}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`
|
|
753
|
+
${this.placeholder==="shimmer"?lit.html`<style>${me}</style>`:lit.nothing}
|
|
753
754
|
<div
|
|
754
755
|
class=${k("np:absolute np:inset-0",e)}
|
|
755
756
|
style=${styleMap_js.styleMap({backgroundColor:this.placeholderColor,borderRadius:"inherit"})}>
|
|
756
757
|
</div>
|
|
757
|
-
`}renderFallback(){if(this.
|
|
758
|
+
`}renderFallback(){let e=!!(this.bgColor||this.bgGradient);if(this.fallbackMode==="gradient"){let n=ie(this.gradientSeed);return lit.html`
|
|
759
|
+
<div
|
|
760
|
+
class="pp-fallback np:absolute np:inset-0"
|
|
761
|
+
style=${styleMap_js.styleMap({background:e?"transparent":n})}>
|
|
762
|
+
</div>
|
|
763
|
+
`}if(this.fallback)return lit.html`
|
|
758
764
|
<span
|
|
759
765
|
class="pp-fallback"
|
|
760
|
-
style=${styleMap_js.styleMap({fontSize:`${
|
|
766
|
+
style=${styleMap_js.styleMap({fontSize:`${H(this.pixelSize)}px`})}>
|
|
761
767
|
${this.fallback}
|
|
762
768
|
</span>
|
|
763
|
-
`;if(this.alt){let
|
|
769
|
+
`;if(this.alt){let n=P(this.alt);return lit.html`
|
|
764
770
|
<div
|
|
765
771
|
class="pp-fallback np:absolute np:inset-0"
|
|
766
|
-
style=${styleMap_js.styleMap({background:
|
|
767
|
-
${
|
|
772
|
+
style=${styleMap_js.styleMap({background:e?"transparent":n,fontSize:`${H(this.pixelSize)}px`})}>
|
|
773
|
+
${L(this.alt)}
|
|
768
774
|
</div>
|
|
769
|
-
`}let
|
|
775
|
+
`}let t=this.pixelSize*.5;return lit.html`
|
|
770
776
|
<svg
|
|
771
777
|
class="pp-fallback-icon"
|
|
772
|
-
style="width: ${
|
|
778
|
+
style="width: ${t}px; height: ${t}px;"
|
|
773
779
|
fill="currentColor"
|
|
774
780
|
viewBox="0 0 24 24">
|
|
775
781
|
<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" />
|
|
776
782
|
</svg>
|
|
777
|
-
`}renderImage(){let e=!!(this.extCustomerId&&a.cdnBaseUrl),t;
|
|
783
|
+
`}renderImage(){let e=!!(this.extCustomerId&&a.cdnBaseUrl),t;if(this.cdnImageUrl?t=this.cdnImageUrl:(!e||this.cdnLoadFailed)&&(t=this.src),this.hasError||!t)return this.renderFallback();let n=this.zoom&&this.zoom!==1?styleMap_js.styleMap({transform:`scale(${this.zoom})`}):lit.nothing;return lit.html`
|
|
778
784
|
<img
|
|
779
785
|
src=${t}
|
|
780
786
|
alt=${this.alt}
|
|
@@ -783,24 +789,25 @@ ${Ae}`;var a=class a extends lit.LitElement{constructor(){super(...arguments);th
|
|
|
783
789
|
@load=${this.handleLoad}
|
|
784
790
|
@error=${this.handleError}
|
|
785
791
|
class=${k("pp-image",this.isLoaded?"pp-image-loaded":"pp-image-loading")}
|
|
792
|
+
style=${n}
|
|
786
793
|
draggable="false" />
|
|
787
|
-
`}renderRing(){if(!this.ring?.show)return lit.nothing;let e=this.ring.width??3,t=this.ring.gap??3,
|
|
794
|
+
`}renderRing(){if(!this.ring?.show)return lit.nothing;let e=this.ring.width??3,t=this.ring.gap??3,n=e+t,i,p=this.ring.progress!==void 0;if(p){let d=this.ring.progress??0,c=this.ring.color??"#30D158",u=this.ring.emptyColor??"#8E8E93";i=oe(d,c,u);}else this.ring.gradient&&this.ring.gradient.length>0?i=ne(this.ring.gradient):i=this.ring.color??"linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)";return lit.html`
|
|
788
795
|
<div
|
|
789
796
|
class=${k("pp-ring",this.ring.animate&&!p&&"pp-ring-animated",p&&"pp-ring-progress")}
|
|
790
|
-
style=${styleMap_js.styleMap({inset:`-${
|
|
797
|
+
style=${styleMap_js.styleMap({inset:`-${n}px`,padding:`${e}px`,background:i,borderRadius:A[this.variant]})}>
|
|
791
798
|
</div>
|
|
792
|
-
`}getCornerOffset(){let e=this.
|
|
799
|
+
`}getCornerOffset(){let e=this.pixelSize/2,n={circle:1-Math.SQRT2/2,square:0,rounded:.04,squircle:.08}[this.variant];return e*n}renderPresence(){if(!this.presence)return lit.nothing;let e=this.presence.thickness??2,t=te(this.pixelSize,e),n=X[this.presence.status],p=this.getCornerOffset()-t/2;return lit.html`
|
|
793
800
|
<div
|
|
794
801
|
class=${k("pp-presence",this.presence.animate&&"pp-presence-animated")}
|
|
795
|
-
style=${styleMap_js.styleMap({width:`${t}px`,height:`${t}px`,backgroundColor:
|
|
802
|
+
style=${styleMap_js.styleMap({width:`${t}px`,height:`${t}px`,backgroundColor:n,bottom:`${p}px`,right:`${p}px`,color:n})}
|
|
796
803
|
title=${this.presence.status}>
|
|
797
804
|
</div>
|
|
798
|
-
`}renderBadge(){if(!this.badge)return lit.nothing;let e=this.badge.position??"bottom-right",t=this.badge.content!==void 0,
|
|
805
|
+
`}renderBadge(){if(!this.badge)return lit.nothing;let e=this.badge.position??"bottom-right",t=this.badge.content!==void 0,n=this.badge.icon!==void 0,i=t||n,{size:p,fontSize:d}=ee(this.pixelSize,i),c=this.badge.bgColor??"#22c55e",u=this.badge.color??"#ffffff",f=this.badge.borderRadius??"9999px",b=t&&this.badge.content!==void 0?re(this.badge.content,this.badge.max):null,E=n?this.badge.icon:null,G=d*.9,h=`${this.getCornerOffset()-p/2}px`,B={"top-left":{top:h,left:h},"top-center":{top:h,left:"50%",transform:"translateX(-50%)"},"top-right":{top:h,right:h},"bottom-left":{bottom:h,left:h},"bottom-center":{bottom:h,left:"50%",transform:"translateX(-50%)"},"bottom-right":{bottom:h,right:h}};return lit.html`
|
|
799
806
|
<div
|
|
800
|
-
class=${k("pp-badge",this.badge.pulse&&"pp-badge-pulse",this.badge.glow&&"pp-badge-glow",
|
|
801
|
-
style=${styleMap_js.styleMap({width:i?"auto":`${p}px`,minWidth:`${p}px`,height:`${p}px`,padding:i?"0 6px":"0",fontSize:`${d}px`,backgroundColor:
|
|
802
|
-
${
|
|
803
|
-
${
|
|
807
|
+
class=${k("pp-badge",this.badge.pulse&&"pp-badge-pulse",this.badge.glow&&"pp-badge-glow",n&&"pp-badge-with-icon")}
|
|
808
|
+
style=${styleMap_js.styleMap({width:i?"auto":`${p}px`,minWidth:`${p}px`,height:`${p}px`,padding:i?"0 6px":"0",fontSize:`${d}px`,backgroundColor:c,color:u,borderRadius:f,"--pp-badge-glow-color":c,gap:n&&t?"4px":"0",...B[e]})}>
|
|
809
|
+
${E?lit.html`<span class="pp-badge-icon" style=${styleMap_js.styleMap({fontSize:`${G}px`})}>${E}</span>`:lit.nothing}
|
|
810
|
+
${b??lit.nothing}
|
|
804
811
|
</div>
|
|
805
812
|
`}render(){let e=this.getContainerStyles(),t=this.interactive?.focusable||this.interactive?.pressable?0:void 0;return lit.html`
|
|
806
813
|
<div
|
|
@@ -809,6 +816,8 @@ ${Ae}`;var a=class a extends lit.LitElement{constructor(){super(...arguments);th
|
|
|
809
816
|
tabindex=${t??lit.nothing}
|
|
810
817
|
role=${this.interactive?.pressable?"button":lit.nothing}
|
|
811
818
|
aria-label=${this.alt||lit.nothing}
|
|
819
|
+
@click=${this.handleClick}
|
|
820
|
+
@keydown=${this.handleKeyDown}
|
|
812
821
|
data-profile-picture>
|
|
813
822
|
|
|
814
823
|
<!-- Ring Effect (behind everything) -->
|
|
@@ -816,8 +825,8 @@ ${Ae}`;var a=class a extends lit.LitElement{constructor(){super(...arguments);th
|
|
|
816
825
|
|
|
817
826
|
<!-- Inner container for image clipping -->
|
|
818
827
|
<div
|
|
819
|
-
class
|
|
820
|
-
style=${styleMap_js.styleMap({borderRadius:A[this.variant]})}>
|
|
828
|
+
class=${k("pp-inner",e.innerClasses)}
|
|
829
|
+
style=${styleMap_js.styleMap({borderRadius:A[this.variant],...e.innerStyles})}>
|
|
821
830
|
<!-- Placeholder -->
|
|
822
831
|
${this.renderPlaceholder()}
|
|
823
832
|
|
|
@@ -831,7 +840,7 @@ ${Ae}`;var a=class a extends lit.LitElement{constructor(){super(...arguments);th
|
|
|
831
840
|
<!-- Presence Indicator -->
|
|
832
841
|
${this.renderPresence()}
|
|
833
842
|
</div>
|
|
834
|
-
`}};s([decorators_js.property({type:String})],a.prototype,"src"),s([decorators_js.property({type:String})],a.prototype,"alt"),s([decorators_js.property({type:String,attribute:"ext-customer-id"})],a.prototype,"extCustomerId"),s([decorators_js.property({type:String})],a.prototype,"size"),s([decorators_js.property({type:String})],a.prototype,"variant"),s([decorators_js.property({type:String})],a.prototype,"shadow"),s([decorators_js.property({type:Boolean})],a.prototype,"border"),s([decorators_js.property({type:Number,attribute:"border-width"})],a.prototype,"borderWidth"),s([decorators_js.property({type:String,attribute:"border-color"})],a.prototype,"borderColor"),s([decorators_js.property({type:Number})],a.prototype,"rotation"),s([decorators_js.property({type:String,attribute:"bg-color"})],a.prototype,"bgColor"),s([decorators_js.property({type:String,attribute:"bg-gradient"})],a.prototype,"bgGradient"),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}})],a.prototype,"ring"),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}})],a.prototype,"presence"),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}})],a.prototype,"glow"),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}})],a.prototype,"badge"),s([decorators_js.property({type:String})],a.prototype,"loading"),s([decorators_js.property({type:String})],a.prototype,"placeholder"),s([decorators_js.property({type:String,attribute:"placeholder-color"})],a.prototype,"placeholderColor"),s([decorators_js.property({type:String})],a.prototype,"fallback"),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}})],a.prototype,"interactive"),s([decorators_js.state()],a.prototype,"isLoaded"),s([decorators_js.state()],a.prototype,"hasError"),s([decorators_js.state()],a.prototype,"cdnImageUrl"),s([decorators_js.state()],a.prototype,"cdnLoadFailed");var D=a;customElements.get("profile-picture")||customElements.define("profile-picture",D);var
|
|
843
|
+
`}};s([decorators_js.property({type:String})],a.prototype,"src"),s([decorators_js.property({type:String})],a.prototype,"alt"),s([decorators_js.property({type:String,attribute:"ext-customer-id"})],a.prototype,"extCustomerId"),s([decorators_js.property({type:String})],a.prototype,"size"),s([decorators_js.property({type:String})],a.prototype,"variant"),s([decorators_js.property({type:String})],a.prototype,"shadow"),s([decorators_js.property({type:Boolean})],a.prototype,"border"),s([decorators_js.property({type:Number,attribute:"border-width"})],a.prototype,"borderWidth"),s([decorators_js.property({type:String,attribute:"border-color"})],a.prototype,"borderColor"),s([decorators_js.property({type:Number})],a.prototype,"rotation"),s([decorators_js.property({type:Number})],a.prototype,"zoom"),s([decorators_js.property({type:String,attribute:"bg-color"})],a.prototype,"bgColor"),s([decorators_js.property({type:String,attribute:"bg-gradient"})],a.prototype,"bgGradient"),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}})],a.prototype,"ring"),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}})],a.prototype,"presence"),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}})],a.prototype,"glow"),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}})],a.prototype,"badge"),s([decorators_js.property({type:String})],a.prototype,"loading"),s([decorators_js.property({type:String})],a.prototype,"placeholder"),s([decorators_js.property({type:String,attribute:"placeholder-color"})],a.prototype,"placeholderColor"),s([decorators_js.property({type:String})],a.prototype,"fallback"),s([decorators_js.property({type:String,attribute:"fallback-mode"})],a.prototype,"fallbackMode"),s([decorators_js.property({type:String,attribute:"image-mode"})],a.prototype,"imageMode"),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}})],a.prototype,"interactive"),s([decorators_js.state()],a.prototype,"isLoaded"),s([decorators_js.state()],a.prototype,"hasError"),s([decorators_js.state()],a.prototype,"cdnImageUrl"),s([decorators_js.state()],a.prototype,"cdnLoadFailed");var D=a;customElements.get("profile-picture")||customElements.define("profile-picture",D);var Y=false;function Be(){if(Y||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>{if(Y)return;let o=document.createElement("style");o.textContent=we,document.head.appendChild(o),Y=true;});}var g=class extends lit.LitElement{constructor(){super(...arguments);this.max=S.max;this.direction=S.direction;this.overlap=S.overlap;this.size=S.size;this.showAddButton=false;this.addButtonLabel="Add user";this.animated=S.animated;this.rotationAmount=0;this.users=[];this.dropdownOpen=false;this.tooltipData=null;this.tooltipTimeout=null;this.slotObserver=null;this.portalContainer=null;this.counterRef=null;this.handleBackdropClick=()=>{this.dropdownOpen=false,this.destroyPortal();};}createRenderRoot(){return Be(),this}get pixelSize(){return ae(this.size)}get tooltipEnabled(){return this.tooltip?.enabled!==false}get tooltipPosition(){return this.tooltip?.position??"top"}get tooltipDelay(){return this.tooltip?.delay??S.tooltipDelay}get dropdownMaxHeight(){return this.dropdown?.maxHeight??S.dropdownMaxHeight}get showPresence(){return this.dropdown?.showPresence!==false}get dropdownPosition(){return this.dropdown?.position??"bottom"}connectedCallback(){super.connectedCallback(),this.updateUsers(),this.setupSlotObserver();}disconnectedCallback(){super.disconnectedCallback(),this.slotObserver?.disconnect(),this.clearTooltipTimeout(),this.destroyPortal();}setupSlotObserver(){this.slotObserver=new MutationObserver(()=>{this.updateUsers();}),this.slotObserver.observe(this,{childList:true,subtree:true,attributes:true,attributeFilter:["src","alt","ext-customer-id","data-user-id","data-status","variant","shadow","border","border-width","border-color","bg-color","bg-gradient"]});}updateUsers(){let e=Array.from(this.children).filter(t=>t.tagName.toLowerCase()==="profile-picture"&&t.getAttribute("slot")!=="internal");this.users=e.map((t,n)=>{let i=(c,u)=>{let f=u??c,b=t[c];return b!=null&&b!==""?String(b):t.getAttribute(f)??void 0},p=i("borderWidth","border-width"),d=p?Number.parseInt(String(p),10):void 0;return {id:i("dataUserId","data-user-id"),name:i("alt")??`User ${n+1}`,src:i("src"),extCustomerId:i("extCustomerId","ext-customer-id"),status:i("dataStatus","data-status"),element:t,index:n,variant:i("variant"),shadow:i("shadow"),border:!!(t.border??t.hasAttribute("border")),borderWidth:d,borderColor:i("borderColor","border-color"),bgColor:i("bgColor","bg-color"),bgGradient:i("bgGradient","bg-gradient")}});for(let t of this.users)t.element&&(t.element.style.display="none");}createPortal(){this.portalContainer||(this.portalContainer=document.createElement("div"),this.portalContainer.className="ppg-portal",this.portalContainer.style.cssText="position: fixed; z-index: 99999; pointer-events: none;",document.body.appendChild(this.portalContainer),document.body.style.overflow="hidden");}destroyPortal(){this.portalContainer&&(lit.render(lit.nothing,this.portalContainer),this.portalContainer.remove(),this.portalContainer=null,document.body.style.overflow="");}updatePortalContent(e){if(!(this.portalContainer&&this.counterRef))return;let t=this.counterRef.getBoundingClientRect(),n=10,i=280,p=Math.min(this.dropdownMaxHeight+60,e.length*56+60),d=window.innerWidth,c=window.innerHeight;if(d<480){let N=lit.html`
|
|
835
844
|
<div
|
|
836
845
|
class="ppg-backdrop ppg-backdrop-visible"
|
|
837
846
|
style="pointer-events: auto; background: rgba(0,0,0,0.5);"
|
|
@@ -852,10 +861,10 @@ ${Ae}`;var a=class a extends lit.LitElement{constructor(){super(...arguments);th
|
|
|
852
861
|
class="ppg-dropdown-list"
|
|
853
862
|
style=${styleMap_js.styleMap({maxHeight:"calc(70vh - 60px)"})}
|
|
854
863
|
>
|
|
855
|
-
${e.map(
|
|
864
|
+
${e.map(ve=>this.renderDropdownItem(ve))}
|
|
856
865
|
</div>
|
|
857
866
|
</div>
|
|
858
|
-
`;lit.render(
|
|
867
|
+
`;lit.render(N,this.portalContainer);return}let f=c-t.bottom-n,b=t.top-n,E=d-t.left,G=t.right,I=this.dropdownPosition;I==="bottom"&&f<p&&b>f?I="top":I==="top"&&b<p&&f>b&&(I="bottom");let z;E>=i?z=t.left:G>=i?z=t.right-i:z=(d-i)/2,z=Math.max(8,Math.min(z,d-i-8));let h=I==="bottom"?t.bottom+n:void 0,B=I==="top"?c-t.top+n:void 0,ye=lit.html`
|
|
859
868
|
<div
|
|
860
869
|
class="ppg-backdrop"
|
|
861
870
|
style="pointer-events: auto;"
|
|
@@ -864,7 +873,7 @@ ${Ae}`;var a=class a extends lit.LitElement{constructor(){super(...arguments);th
|
|
|
864
873
|
></div>
|
|
865
874
|
<div
|
|
866
875
|
class="ppg-dropdown ppg-dropdown-portal"
|
|
867
|
-
style=${styleMap_js.styleMap({position:"fixed",pointerEvents:"auto",top:
|
|
876
|
+
style=${styleMap_js.styleMap({position:"fixed",pointerEvents:"auto",top:h!==void 0?`${h}px`:"auto",bottom:B!==void 0?`${B}px`:"auto",left:`${z}px`,width:`${i}px`})}
|
|
868
877
|
data-position=${I}
|
|
869
878
|
role="menu"
|
|
870
879
|
aria-label="Hidden users"
|
|
@@ -876,10 +885,10 @@ ${Ae}`;var a=class a extends lit.LitElement{constructor(){super(...arguments);th
|
|
|
876
885
|
class="ppg-dropdown-list"
|
|
877
886
|
style=${styleMap_js.styleMap({maxHeight:`${this.dropdownMaxHeight}px`})}
|
|
878
887
|
>
|
|
879
|
-
${e.map(
|
|
888
|
+
${e.map(N=>this.renderDropdownItem(N))}
|
|
880
889
|
</div>
|
|
881
890
|
</div>
|
|
882
|
-
`;lit.render(
|
|
891
|
+
`;lit.render(ye,this.portalContainer);}handleAvatarClick(e){this.dispatchEvent(new CustomEvent("avatar-click",{detail:{user:e},bubbles:true,composed:true}));}handleAvatarHover(e,t){if(!this.tooltipEnabled)return;this.clearTooltipTimeout();let n=t.currentTarget;this.tooltipTimeout=window.setTimeout(()=>{this.tooltipData={user:e,rect:n.getBoundingClientRect()};},this.tooltipDelay),this.dispatchEvent(new CustomEvent("avatar-hover",{detail:{user:e},bubbles:true,composed:true}));}handleAvatarLeave(){this.clearTooltipTimeout(),this.tooltipData=null;}clearTooltipTimeout(){this.tooltipTimeout&&(window.clearTimeout(this.tooltipTimeout),this.tooltipTimeout=null);}handleCounterClick(e){this.dropdownOpen=!this.dropdownOpen,this.dropdownOpen?(this.createPortal(),this.updatePortalContent(e)):this.destroyPortal(),this.dispatchEvent(new CustomEvent("counter-click",{detail:{hiddenUsers:e,open:this.dropdownOpen},bubbles:true,composed:true}));}handleDropdownItemClick(e){this.dropdownOpen=false,this.destroyPortal(),this.dispatchEvent(new CustomEvent("dropdown-item-click",{detail:{user:e},bubbles:true,composed:true}));}handleAddClick(){this.dispatchEvent(new CustomEvent("add-click",{bubbles:true,composed:true}));}handleKeyDown(e,t){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),t());}renderAvatar(e,t,n){let i=O(t,this.pixelSize,this.overlap,this.direction,this.spacing),p=se(t,n,this.direction),d=e.variant??"circle",c=e.shadow??"none",u=this.rotationAmount?t%2===0?-this.rotationAmount:this.rotationAmount:0;return lit.html`
|
|
883
892
|
<div
|
|
884
893
|
class="ppg-avatar-wrapper"
|
|
885
894
|
style=${styleMap_js.styleMap({left:`${i}px`,zIndex:String(p),width:`${this.pixelSize}px`,height:`${this.pixelSize}px`})}
|
|
@@ -887,39 +896,39 @@ ${Ae}`;var a=class a extends lit.LitElement{constructor(){super(...arguments);th
|
|
|
887
896
|
role="button"
|
|
888
897
|
aria-label=${e.name}
|
|
889
898
|
@click=${()=>this.handleAvatarClick(e)}
|
|
890
|
-
@mouseenter=${
|
|
899
|
+
@mouseenter=${f=>this.handleAvatarHover(e,f)}
|
|
891
900
|
@mouseleave=${this.handleAvatarLeave}
|
|
892
|
-
@keydown=${
|
|
901
|
+
@keydown=${f=>this.handleKeyDown(f,()=>this.handleAvatarClick(e))}
|
|
893
902
|
>
|
|
894
|
-
${this.renderProfilePicture(e,d,
|
|
903
|
+
${this.renderProfilePicture(e,d,c,u)}
|
|
895
904
|
</div>
|
|
896
|
-
`}renderProfilePicture(e,t,
|
|
905
|
+
`}renderProfilePicture(e,t,n,i){return lit.html`
|
|
897
906
|
<profile-picture
|
|
898
907
|
.src=${e.src||void 0}
|
|
899
908
|
.alt=${e.name}
|
|
900
909
|
.size=${this.pixelSize}
|
|
901
910
|
.variant=${t}
|
|
902
|
-
.shadow=${
|
|
911
|
+
.shadow=${n}
|
|
903
912
|
.rotation=${i}
|
|
904
913
|
.extCustomerId=${e.extCustomerId}
|
|
905
914
|
?border=${e.border}
|
|
906
915
|
.borderWidth=${e.border?e.borderWidth??2:2}
|
|
907
916
|
.borderColor=${e.border?e.borderColor??"#ffffff":"#ffffff"}
|
|
908
|
-
.bgColor=${e.bgGradient?void 0:e.bgColor
|
|
917
|
+
.bgColor=${e.bgGradient?void 0:e.bgColor||void 0}
|
|
909
918
|
.bgGradient=${e.bgGradient??void 0}
|
|
910
919
|
data-user-id=${e.id??""}
|
|
911
920
|
data-status=${e.status??""}
|
|
912
921
|
></profile-picture>
|
|
913
|
-
`}renderCounter(e,t,
|
|
922
|
+
`}renderCounter(e,t,n){return lit.html`
|
|
914
923
|
<button
|
|
915
924
|
class="ppg-counter"
|
|
916
925
|
style=${styleMap_js.styleMap({left:`${t}px`,width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,zIndex:"1"})}
|
|
917
926
|
aria-label=${`${e} more users`}
|
|
918
927
|
aria-expanded=${this.dropdownOpen}
|
|
919
928
|
aria-haspopup="true"
|
|
920
|
-
@click=${()=>this.handleCounterClick(
|
|
929
|
+
@click=${()=>this.handleCounterClick(n)}
|
|
921
930
|
>
|
|
922
|
-
${
|
|
931
|
+
${de(e)}
|
|
923
932
|
</button>
|
|
924
933
|
`}renderAddButton(e){let t=Math.round(this.pixelSize*.4);return lit.html`
|
|
925
934
|
<button
|
|
@@ -943,16 +952,16 @@ ${Ae}`;var a=class a extends lit.LitElement{constructor(){super(...arguments);th
|
|
|
943
952
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
944
953
|
</svg>
|
|
945
954
|
</button>
|
|
946
|
-
`}renderTooltip(){if(!this.tooltipData)return lit.nothing;let{user:e,rect:t}=this.tooltipData,
|
|
955
|
+
`}renderTooltip(){if(!this.tooltipData)return lit.nothing;let{user:e,rect:t}=this.tooltipData,n=8,i=this.getBoundingClientRect(),p=t.left-i.left+t.width/2,d=t.top-i.top,c=t.bottom-i.top,u=this.tooltipPosition==="top";return lit.html`
|
|
947
956
|
<div
|
|
948
957
|
class="ppg-tooltip"
|
|
949
|
-
style=${styleMap_js.styleMap({top:
|
|
958
|
+
style=${styleMap_js.styleMap({top:u?"auto":`${c+n}px`,bottom:u?`${i.height-d+n}px`:"auto",left:`${p}px`})}
|
|
950
959
|
data-position=${this.tooltipPosition}
|
|
951
960
|
role="tooltip"
|
|
952
961
|
>
|
|
953
962
|
${e.name}
|
|
954
963
|
</div>
|
|
955
|
-
`}renderDropdownItem(e){let t=
|
|
964
|
+
`}renderDropdownItem(e){let t=P(e.name),n=e.src||e.extCustomerId;return lit.html`
|
|
956
965
|
<div
|
|
957
966
|
class="ppg-dropdown-item"
|
|
958
967
|
role="menuitem"
|
|
@@ -960,7 +969,7 @@ ${Ae}`;var a=class a extends lit.LitElement{constructor(){super(...arguments);th
|
|
|
960
969
|
@click=${()=>this.handleDropdownItemClick(e)}
|
|
961
970
|
@keydown=${i=>this.handleKeyDown(i,()=>this.handleDropdownItemClick(e))}
|
|
962
971
|
>
|
|
963
|
-
${
|
|
972
|
+
${n?lit.html`<profile-picture
|
|
964
973
|
class="ppg-dropdown-avatar"
|
|
965
974
|
.src=${e.src||void 0}
|
|
966
975
|
.alt=${e.name}
|
|
@@ -972,7 +981,7 @@ ${Ae}`;var a=class a extends lit.LitElement{constructor(){super(...arguments);th
|
|
|
972
981
|
class="ppg-dropdown-avatar-fallback"
|
|
973
982
|
style=${styleMap_js.styleMap({background:t})}
|
|
974
983
|
>
|
|
975
|
-
${
|
|
984
|
+
${L(e.name)}
|
|
976
985
|
</div>`}
|
|
977
986
|
<div class="ppg-dropdown-info">
|
|
978
987
|
<div class="ppg-dropdown-name">${e.name}</div>
|
|
@@ -987,10 +996,10 @@ ${Ae}`;var a=class a extends lit.LitElement{constructor(){super(...arguments);th
|
|
|
987
996
|
`:lit.nothing}
|
|
988
997
|
</div>
|
|
989
998
|
</div>
|
|
990
|
-
`}formatStatus(e){return {online:"Online",away:"Away",busy:"Busy",offline:"Offline",dnd:"Do not disturb"}[e]??e}updated(e){super.updated(e);let t=this.querySelector(".ppg-counter");if(t&&(this.counterRef=t),this.dropdownOpen&&this.portalContainer){let{visible:
|
|
999
|
+
`}formatStatus(e){return {online:"Online",away:"Away",busy:"Busy",offline:"Offline",dnd:"Do not disturb"}[e]??e}updated(e){super.updated(e);let t=this.querySelector(".ppg-counter");if(t&&(this.counterRef=t),this.dropdownOpen&&this.portalContainer){let{visible:n}=V(this.users.length,this.max,this.showAddButton),i=this.users.slice(n);this.updatePortalContent(i);}}render(){let{visible:e,hidden:t,showCounter:n}=V(this.users.length,this.max,this.showAddButton),i=this.direction==="ltr"?this.users.slice(0,e):this.users.slice(0,e).reverse(),p=this.users.slice(e),d=e;n&&d++,this.showAddButton&&d++;let c=pe(d,this.pixelSize,this.overlap,this.spacing),u=n?O(e,this.pixelSize,this.overlap,this.direction,this.spacing):0,f=O(e+(n?1:0),this.pixelSize,this.overlap,this.direction,this.spacing);return lit.html`
|
|
991
1000
|
<div
|
|
992
1001
|
class=${k("ppg-container",this.animated&&"ppg-animated")}
|
|
993
|
-
style=${styleMap_js.styleMap({width:`${
|
|
1002
|
+
style=${styleMap_js.styleMap({width:`${c}px`,height:`${this.pixelSize}px`})}
|
|
994
1003
|
role="group"
|
|
995
1004
|
aria-label="User avatars"
|
|
996
1005
|
>
|
|
@@ -998,16 +1007,16 @@ ${Ae}`;var a=class a extends lit.LitElement{constructor(){super(...arguments);th
|
|
|
998
1007
|
<slot style="display: none;"></slot>
|
|
999
1008
|
|
|
1000
1009
|
<!-- Visible avatars -->
|
|
1001
|
-
${i.map((
|
|
1010
|
+
${i.map((b,E)=>this.renderAvatar(b,E,e))}
|
|
1002
1011
|
|
|
1003
1012
|
<!-- Counter -->
|
|
1004
|
-
${
|
|
1013
|
+
${n?this.renderCounter(t,u,p):lit.nothing}
|
|
1005
1014
|
|
|
1006
1015
|
<!-- Add button -->
|
|
1007
|
-
${this.showAddButton?this.renderAddButton(
|
|
1016
|
+
${this.showAddButton?this.renderAddButton(f):lit.nothing}
|
|
1008
1017
|
|
|
1009
1018
|
<!-- Tooltip -->
|
|
1010
1019
|
${this.renderTooltip()}
|
|
1011
1020
|
</div>
|
|
1012
|
-
`}};s([decorators_js.property({type:Number})],
|
|
1021
|
+
`}};s([decorators_js.property({type:Number})],g.prototype,"max"),s([decorators_js.property({type:String})],g.prototype,"direction"),s([decorators_js.property({type:Number})],g.prototype,"overlap"),s([decorators_js.property({type:String})],g.prototype,"size"),s([decorators_js.property({type:Number})],g.prototype,"spacing"),s([decorators_js.property({type:Object})],g.prototype,"tooltip"),s([decorators_js.property({type:Object})],g.prototype,"dropdown"),s([decorators_js.property({type:Boolean,attribute:"show-add-button"})],g.prototype,"showAddButton"),s([decorators_js.property({type:String,attribute:"add-button-label"})],g.prototype,"addButtonLabel"),s([decorators_js.property({type:Boolean})],g.prototype,"animated"),s([decorators_js.property({type:Number,attribute:"rotation-amount"})],g.prototype,"rotationAmount"),s([decorators_js.state()],g.prototype,"users"),s([decorators_js.state()],g.prototype,"dropdownOpen"),s([decorators_js.state()],g.prototype,"tooltipData");customElements.get("profile-picture-group")||customElements.define("profile-picture-group",g);function pt(r){D.setCdnBaseUrl(r);}function dt(){return D.getCdnBaseUrl()}J();exports.getCdnBaseUrl=dt;exports.setCdnBaseUrl=pt;//# sourceMappingURL=svelte.cjs.map
|
|
1013
1022
|
//# sourceMappingURL=svelte.cjs.map
|