@leavittsoftware/web 4.11.2 → 4.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@leavittsoftware/web",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.12.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"description": "",
|
|
6
6
|
"files": [
|
|
@@ -40,5 +40,5 @@
|
|
|
40
40
|
"url": "https://github.com/LeavittSoftware/titanium-elements/issues"
|
|
41
41
|
},
|
|
42
42
|
"homepage": "https://github.com/LeavittSoftware/titanium-elements/#readme",
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "acfa38b9a4de290bbff670cf80ffb7cf24cde209"
|
|
44
44
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { Person } from '@leavittsoftware/lg-core-typescript';
|
|
2
2
|
import { LitElement, PropertyValues } from 'lit';
|
|
3
3
|
import '@leavittsoftware/web/leavitt/profile-picture/profile-picture';
|
|
4
|
-
import '@material/web/icon/icon';
|
|
5
4
|
/**
|
|
6
5
|
* A smart profile picture stack component
|
|
7
6
|
*
|
|
@@ -32,6 +31,10 @@ export declare class TitaniumProfilePictureStack extends LitElement {
|
|
|
32
31
|
* Size of the profile picture.
|
|
33
32
|
*/
|
|
34
33
|
accessor size: number;
|
|
34
|
+
/**
|
|
35
|
+
* Size of the overlap between profile pictures. (Default is 8)
|
|
36
|
+
*/
|
|
37
|
+
accessor overlap: number;
|
|
35
38
|
/**
|
|
36
39
|
* Used internally by the resize observer to keep track of the max number of people to display in a stack.
|
|
37
40
|
* @ignore
|
|
@@ -5,7 +5,6 @@ import { isDevelopment } from '../helpers/is-development';
|
|
|
5
5
|
import { p } from '../styles/p';
|
|
6
6
|
import { ellipsis } from '../styles/ellipsis';
|
|
7
7
|
import '@leavittsoftware/web/leavitt/profile-picture/profile-picture';
|
|
8
|
-
import '@material/web/icon/icon';
|
|
9
8
|
/**
|
|
10
9
|
* A smart profile picture stack component
|
|
11
10
|
*
|
|
@@ -45,6 +44,12 @@ let TitaniumProfilePictureStack = class TitaniumProfilePictureStack extends LitE
|
|
|
45
44
|
*/
|
|
46
45
|
get size() { return this.#size_accessor_storage; }
|
|
47
46
|
set size(value) { this.#size_accessor_storage = value; }
|
|
47
|
+
#overlap_accessor_storage = 8;
|
|
48
|
+
/**
|
|
49
|
+
* Size of the overlap between profile pictures. (Default is 8)
|
|
50
|
+
*/
|
|
51
|
+
get overlap() { return this.#overlap_accessor_storage; }
|
|
52
|
+
set overlap(value) { this.#overlap_accessor_storage = value; }
|
|
48
53
|
#autoMax_accessor_storage = 0;
|
|
49
54
|
/**
|
|
50
55
|
* Used internally by the resize observer to keep track of the max number of people to display in a stack.
|
|
@@ -62,57 +67,74 @@ let TitaniumProfilePictureStack = class TitaniumProfilePictureStack extends LitE
|
|
|
62
67
|
this.#resizeObserver?.disconnect?.();
|
|
63
68
|
}
|
|
64
69
|
}
|
|
70
|
+
if (changedProperties.has('overlap')) {
|
|
71
|
+
this.style.setProperty('--profile-picture-stack-overlap', `${this.overlap}px`);
|
|
72
|
+
}
|
|
65
73
|
}
|
|
66
74
|
#setUpResizeObserver() {
|
|
67
75
|
this.#resizeObserver = new ResizeObserver((entries) => {
|
|
68
76
|
for (const entry of entries) {
|
|
69
|
-
|
|
70
|
-
const inlineSize = entry.contentBoxSize[0].inlineSize;
|
|
71
|
-
this.autoMax = Math.floor(inlineSize / this.size);
|
|
72
|
-
}
|
|
77
|
+
this.autoMax = this.#calculateMaxElements(this.size, this.overlap, entry?.contentBoxSize?.[0]?.inlineSize || 0);
|
|
73
78
|
}
|
|
74
79
|
});
|
|
75
80
|
this.#resizeObserver.observe(this);
|
|
76
81
|
}
|
|
82
|
+
#calculateMaxElements(elementWidth, overlap, totalWidth) {
|
|
83
|
+
if (totalWidth < elementWidth) {
|
|
84
|
+
return 0; // If total width is smaller than one element
|
|
85
|
+
}
|
|
86
|
+
return Math.floor((totalWidth - elementWidth) / (elementWidth - overlap));
|
|
87
|
+
}
|
|
77
88
|
static { this.styles = [
|
|
78
89
|
p,
|
|
79
90
|
ellipsis,
|
|
80
91
|
css `
|
|
81
92
|
:host {
|
|
82
93
|
display: flex;
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
94
|
+
padding-left: var(--profile-picture-stack-overlap, 10px);
|
|
95
|
+
flex-direction: row-reverse;
|
|
96
|
+
justify-content: flex-end;
|
|
86
97
|
}
|
|
87
98
|
|
|
88
99
|
profile-picture {
|
|
89
|
-
|
|
100
|
+
box-sizing: border-box;
|
|
101
|
+
transition: all 0.25s ease-in-out;
|
|
90
102
|
transform-origin: bottom;
|
|
91
103
|
background-color: var(--titanium-profile-picture-stack-bg-color, var(--md-sys-color-surface));
|
|
92
104
|
border-radius: 50%;
|
|
93
105
|
border: 2px solid transparent;
|
|
94
106
|
}
|
|
95
107
|
|
|
96
|
-
profile-picture:not(:first-child) {
|
|
97
|
-
margin-left: -10px;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
108
|
profile-picture:hover {
|
|
101
|
-
transform:
|
|
102
|
-
position: relative;
|
|
109
|
+
transform: translateY(-5px);
|
|
103
110
|
z-index: 1;
|
|
104
111
|
}
|
|
105
112
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
margin-top: 25px;
|
|
110
|
-
margin-left: -4px;
|
|
113
|
+
p[full-name] {
|
|
114
|
+
align-self: center;
|
|
115
|
+
margin-left: 6px;
|
|
111
116
|
}
|
|
112
117
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
118
|
+
additional-users {
|
|
119
|
+
display: grid;
|
|
120
|
+
box-sizing: border-box;
|
|
121
|
+
transition: all 0.25s ease-in-out;
|
|
122
|
+
border-radius: 50%;
|
|
123
|
+
background: var(--md-sys-color-surface-container);
|
|
124
|
+
place-items: center;
|
|
125
|
+
border: 2px solid transparent;
|
|
126
|
+
cursor: default;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
additional-users p {
|
|
130
|
+
font-weight: 500;
|
|
131
|
+
font-size: 13px;
|
|
132
|
+
max-width: 75%;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
additional-users:hover {
|
|
136
|
+
transform: translateY(-5px);
|
|
137
|
+
z-index: 1;
|
|
116
138
|
}
|
|
117
139
|
|
|
118
140
|
:host([enable-directory-href]) profile-picture {
|
|
@@ -123,21 +145,33 @@ let TitaniumProfilePictureStack = class TitaniumProfilePictureStack extends LitE
|
|
|
123
145
|
render() {
|
|
124
146
|
const max = this.autoResize ? this.autoMax : this.max;
|
|
125
147
|
return html `
|
|
126
|
-
${this.people?.
|
|
127
|
-
|
|
128
|
-
|
|
148
|
+
${this.people?.length > max
|
|
149
|
+
? html `<additional-users
|
|
150
|
+
style="width:${this.size}px;height:${this.size}px;margin-left:-${this.overlap}px"
|
|
151
|
+
part="additional-users"
|
|
152
|
+
title="${(this.people?.length || 0) - max} more"
|
|
153
|
+
>
|
|
154
|
+
<p ellipsis>+${(this.people?.length || 0) - max}</p>
|
|
155
|
+
</additional-users>`
|
|
156
|
+
: nothing}
|
|
157
|
+
${this.people
|
|
158
|
+
?.slice(0, max)
|
|
159
|
+
?.reverse()
|
|
160
|
+
?.map((o) => html `
|
|
161
|
+
${this.people?.length === 1 ? html `<p part="name" ellipsis full-name>${o?.FullName ?? ''}</p>` : nothing}
|
|
162
|
+
<profile-picture
|
|
163
|
+
@click=${() => {
|
|
129
164
|
if (this.enableDirectoryHref && o?.Id) {
|
|
130
165
|
window.open(`https://${isDevelopment ? 'dev' : ''}directory.leavitt.com/profile/${o?.Id}`, '_blank');
|
|
131
166
|
}
|
|
132
167
|
}}
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
${this.people?.length > max ? html `<md-icon part="more-icon" title="Shared with ${this.people.length} total users">more_horiz</md-icon>` : nothing}
|
|
168
|
+
title=${o?.FullName ?? ''}
|
|
169
|
+
size=${this.size}
|
|
170
|
+
style="margin-left:-${this.overlap}px;"
|
|
171
|
+
.fileName=${o?.ProfilePictureCdnFileName ?? null}
|
|
172
|
+
part="profile-picture"
|
|
173
|
+
></profile-picture>
|
|
174
|
+
`)}
|
|
141
175
|
`;
|
|
142
176
|
}
|
|
143
177
|
};
|
|
@@ -156,6 +190,9 @@ __decorate([
|
|
|
156
190
|
__decorate([
|
|
157
191
|
property({ type: Number })
|
|
158
192
|
], TitaniumProfilePictureStack.prototype, "size", null);
|
|
193
|
+
__decorate([
|
|
194
|
+
property({ type: Number })
|
|
195
|
+
], TitaniumProfilePictureStack.prototype, "overlap", null);
|
|
159
196
|
__decorate([
|
|
160
197
|
state()
|
|
161
198
|
], TitaniumProfilePictureStack.prototype, "autoMax", null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profile-picture-stack.js","sourceRoot":"","sources":["profile-picture-stack.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,CAAC,EAAE,MAAM,aAAa,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,OAAO,8DAA8D,CAAC;
|
|
1
|
+
{"version":3,"file":"profile-picture-stack.js","sourceRoot":"","sources":["profile-picture-stack.ts"],"names":[],"mappings":"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"}
|