@leavittsoftware/web 2.26.0 → 2.27.1
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": "2.
|
|
3
|
+
"version": "2.27.1",
|
|
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": "7a023a67172ba9f62184df98a019cbf5874e44b3"
|
|
44
44
|
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { Person } from '@leavittsoftware/lg-core-typescript';
|
|
2
|
+
import { LitElement, PropertyValues } from 'lit';
|
|
3
|
+
import '@leavittsoftware/web/leavitt/profile-picture/profile-picture';
|
|
4
|
+
import '@material/web/icon/icon';
|
|
5
|
+
/**
|
|
6
|
+
* A smart profile picture stack component
|
|
7
|
+
*
|
|
8
|
+
* @element titanium-profile-picture-stack
|
|
9
|
+
*
|
|
10
|
+
*/
|
|
11
|
+
export declare class TitaniumProfilePictureStack extends LitElement {
|
|
12
|
+
#private;
|
|
13
|
+
/**
|
|
14
|
+
* Array of people to display in a stack.
|
|
15
|
+
*/
|
|
16
|
+
accessor people: Array<Partial<Person | null | undefined>>;
|
|
17
|
+
/**
|
|
18
|
+
* Number to define the max number of people to display in a stack.
|
|
19
|
+
*/
|
|
20
|
+
accessor max: number;
|
|
21
|
+
/**
|
|
22
|
+
* Enable a link to directory for each person visible in the stack.
|
|
23
|
+
* This will open a new tab to the directory profile of the person.
|
|
24
|
+
* This will only work if the person has an Id.
|
|
25
|
+
*/
|
|
26
|
+
accessor enableDirectoryHref: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Enable auto resizing of the profile picture stack. Setting this will supersede the max property.
|
|
29
|
+
*/
|
|
30
|
+
accessor autoResize: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Size of the profile picture.
|
|
33
|
+
*/
|
|
34
|
+
accessor size: number;
|
|
35
|
+
/**
|
|
36
|
+
* Used internally by the resize observer to keep track of the max number of people to display in a stack.
|
|
37
|
+
* @ignore
|
|
38
|
+
*/
|
|
39
|
+
private accessor autoMax;
|
|
40
|
+
updated(changedProperties: PropertyValues<this>): void;
|
|
41
|
+
static styles: import("lit").CSSResult[];
|
|
42
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
43
|
+
}
|
|
44
|
+
//# sourceMappingURL=profile-picture-stack.d.ts.map
|
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { css, html, LitElement, nothing } from 'lit';
|
|
3
|
+
import { property, customElement, state } from 'lit/decorators.js';
|
|
4
|
+
import { isDevelopment } from '../helpers/is-development';
|
|
5
|
+
import { p } from '../styles/p';
|
|
6
|
+
import { ellipsis } from '../styles/ellipsis';
|
|
7
|
+
import '@leavittsoftware/web/leavitt/profile-picture/profile-picture';
|
|
8
|
+
import '@material/web/icon/icon';
|
|
9
|
+
/**
|
|
10
|
+
* A smart profile picture stack component
|
|
11
|
+
*
|
|
12
|
+
* @element titanium-profile-picture-stack
|
|
13
|
+
*
|
|
14
|
+
*/
|
|
15
|
+
let TitaniumProfilePictureStack = class TitaniumProfilePictureStack extends LitElement {
|
|
16
|
+
#people_accessor_storage;
|
|
17
|
+
/**
|
|
18
|
+
* Array of people to display in a stack.
|
|
19
|
+
*/
|
|
20
|
+
get people() { return this.#people_accessor_storage; }
|
|
21
|
+
set people(value) { this.#people_accessor_storage = value; }
|
|
22
|
+
#max_accessor_storage = 5;
|
|
23
|
+
/**
|
|
24
|
+
* Number to define the max number of people to display in a stack.
|
|
25
|
+
*/
|
|
26
|
+
get max() { return this.#max_accessor_storage; }
|
|
27
|
+
set max(value) { this.#max_accessor_storage = value; }
|
|
28
|
+
#enableDirectoryHref_accessor_storage = false;
|
|
29
|
+
/**
|
|
30
|
+
* Enable a link to directory for each person visible in the stack.
|
|
31
|
+
* This will open a new tab to the directory profile of the person.
|
|
32
|
+
* This will only work if the person has an Id.
|
|
33
|
+
*/
|
|
34
|
+
get enableDirectoryHref() { return this.#enableDirectoryHref_accessor_storage; }
|
|
35
|
+
set enableDirectoryHref(value) { this.#enableDirectoryHref_accessor_storage = value; }
|
|
36
|
+
#autoResize_accessor_storage = false;
|
|
37
|
+
/**
|
|
38
|
+
* Enable auto resizing of the profile picture stack. Setting this will supersede the max property.
|
|
39
|
+
*/
|
|
40
|
+
get autoResize() { return this.#autoResize_accessor_storage; }
|
|
41
|
+
set autoResize(value) { this.#autoResize_accessor_storage = value; }
|
|
42
|
+
#size_accessor_storage = 30;
|
|
43
|
+
/**
|
|
44
|
+
* Size of the profile picture.
|
|
45
|
+
*/
|
|
46
|
+
get size() { return this.#size_accessor_storage; }
|
|
47
|
+
set size(value) { this.#size_accessor_storage = value; }
|
|
48
|
+
#autoMax_accessor_storage = 0;
|
|
49
|
+
/**
|
|
50
|
+
* Used internally by the resize observer to keep track of the max number of people to display in a stack.
|
|
51
|
+
* @ignore
|
|
52
|
+
*/
|
|
53
|
+
get autoMax() { return this.#autoMax_accessor_storage; }
|
|
54
|
+
set autoMax(value) { this.#autoMax_accessor_storage = value; }
|
|
55
|
+
#resizeObserver;
|
|
56
|
+
updated(changedProperties) {
|
|
57
|
+
if (changedProperties.has('autoResize')) {
|
|
58
|
+
if (this.autoResize) {
|
|
59
|
+
this.#setUpResizeObserver();
|
|
60
|
+
}
|
|
61
|
+
else {
|
|
62
|
+
this.#resizeObserver?.disconnect?.();
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
#setUpResizeObserver() {
|
|
67
|
+
this.#resizeObserver = new ResizeObserver((entries) => {
|
|
68
|
+
for (const entry of entries) {
|
|
69
|
+
if (entry.contentBoxSize) {
|
|
70
|
+
const inlineSize = entry.contentBoxSize[0].inlineSize;
|
|
71
|
+
this.autoMax = Math.floor(inlineSize / this.size);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
});
|
|
75
|
+
this.#resizeObserver.observe(this);
|
|
76
|
+
}
|
|
77
|
+
static { this.styles = [
|
|
78
|
+
p,
|
|
79
|
+
ellipsis,
|
|
80
|
+
css `
|
|
81
|
+
:host {
|
|
82
|
+
display: flex;
|
|
83
|
+
flex-direction: row;
|
|
84
|
+
position: relative;
|
|
85
|
+
align-self: start;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
profile-picture {
|
|
89
|
+
transition: all 0.2s ease-in-out;
|
|
90
|
+
transform-origin: bottom;
|
|
91
|
+
background-color: var(--titanium-profile-picture-stack-bg-color, var(--md-sys-color-surface));
|
|
92
|
+
border-radius: 50%;
|
|
93
|
+
border: 2px solid transparent;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
profile-picture:not(:first-child) {
|
|
97
|
+
margin-left: -10px;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
profile-picture:hover {
|
|
101
|
+
transform: scale(var(--titanium-profile-picture-stack-transform-scale, 1.3));
|
|
102
|
+
position: relative;
|
|
103
|
+
z-index: 1;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
md-icon {
|
|
107
|
+
font-size: 12px;
|
|
108
|
+
height: 7px;
|
|
109
|
+
margin-top: 25px;
|
|
110
|
+
margin-left: -4px;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
p {
|
|
114
|
+
align-self: center;
|
|
115
|
+
margin-left: 8px;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
:host([enable-directory-href]) profile-picture {
|
|
119
|
+
cursor: pointer;
|
|
120
|
+
}
|
|
121
|
+
`,
|
|
122
|
+
]; }
|
|
123
|
+
render() {
|
|
124
|
+
const max = this.autoResize ? this.autoMax : this.max;
|
|
125
|
+
return html `
|
|
126
|
+
${this.people?.slice(0, max)?.map((o) => html `
|
|
127
|
+
<profile-picture
|
|
128
|
+
@click=${() => {
|
|
129
|
+
if (this.enableDirectoryHref && o?.Id) {
|
|
130
|
+
window.open(`https://${isDevelopment ? 'dev' : ''}directory.leavitt.com/profile/${o?.Id}`, '_blank');
|
|
131
|
+
}
|
|
132
|
+
}}
|
|
133
|
+
title=${o?.FullName ?? ''}
|
|
134
|
+
size=${this.size}
|
|
135
|
+
.fileName=${o?.ProfilePictureCdnFileName ?? null}
|
|
136
|
+
part="profile-picture"
|
|
137
|
+
></profile-picture>
|
|
138
|
+
${this.people?.length === 1 ? html `<p part="name" ellipsis>${o?.FullName ?? ''}</p>` : nothing}
|
|
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}
|
|
141
|
+
`;
|
|
142
|
+
}
|
|
143
|
+
};
|
|
144
|
+
__decorate([
|
|
145
|
+
property({ type: Array })
|
|
146
|
+
], TitaniumProfilePictureStack.prototype, "people", null);
|
|
147
|
+
__decorate([
|
|
148
|
+
property({ type: Number })
|
|
149
|
+
], TitaniumProfilePictureStack.prototype, "max", null);
|
|
150
|
+
__decorate([
|
|
151
|
+
property({ type: Boolean, attribute: 'enable-directory-href' })
|
|
152
|
+
], TitaniumProfilePictureStack.prototype, "enableDirectoryHref", null);
|
|
153
|
+
__decorate([
|
|
154
|
+
property({ type: Boolean, attribute: 'auto-resize' })
|
|
155
|
+
], TitaniumProfilePictureStack.prototype, "autoResize", null);
|
|
156
|
+
__decorate([
|
|
157
|
+
property({ type: Number })
|
|
158
|
+
], TitaniumProfilePictureStack.prototype, "size", null);
|
|
159
|
+
__decorate([
|
|
160
|
+
state()
|
|
161
|
+
], TitaniumProfilePictureStack.prototype, "autoMax", null);
|
|
162
|
+
TitaniumProfilePictureStack = __decorate([
|
|
163
|
+
customElement('titanium-profile-picture-stack')
|
|
164
|
+
], TitaniumProfilePictureStack);
|
|
165
|
+
export { TitaniumProfilePictureStack };
|
|
166
|
+
//# sourceMappingURL=profile-picture-stack.js.map
|
|
@@ -0,0 +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;AACtE,OAAO,yBAAyB,CAAC;AAEjC;;;;;GAKG;AAGI,IAAM,2BAA2B,GAAjC,MAAM,2BAA4B,SAAQ,UAAU;IAIrB,yBAAkD;IAHtF;;OAEG;IACiC,IAAA,MAAM,4CAA4C;IAAlD,IAAA,MAAM,kDAA4C;IAKjD,wBAAc,CAAC,CAAC;IAHrD;;OAEG;IACkC,IAAA,GAAG,yCAAa;IAAhB,IAAA,GAAG,+CAAa;IAOqB,wCAA+B,KAAK,CAAC;IAL/G;;;;OAIG;IACuE,IAAA,mBAAmB,yDAAkB;IAArC,IAAA,mBAAmB,+DAAkB;IAK/C,+BAAsB,KAAK,CAAC;IAH5F;;OAEG;IAC6D,IAAA,UAAU,gDAAkB;IAA5B,IAAA,UAAU,sDAAkB;IAKvD,yBAAe,EAAE,CAAC;IAHvD;;OAEG;IACkC,IAAA,IAAI,0CAAc;IAAlB,IAAA,IAAI,gDAAc;IAM7B,4BAAkB,CAAC,CAAC;IAJ9C;;;OAGG;IACuB,IAAA,OAAO,6CAAa;IAApB,IAAA,OAAO,mDAAa;IAE9C,eAAe,CAAiB;IAEhC,OAAO,CAAC,iBAAuC;QAC7C,IAAI,iBAAiB,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;YACxC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9B,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,EAAE,UAAU,EAAE,EAAE,CAAC;YACvC,CAAC;QACH,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,eAAe,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;YACpD,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;gBAC5B,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;oBACzB,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC;oBACtD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;gBACpD,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC;aAEM,WAAM,GAAG;QACd,CAAC;QACD,QAAQ;QACR,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCF;KACF,AA7CY,CA6CX;IAEF,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QACtD,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG,CAC/B,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA;;qBAEE,GAAG,EAAE;YACZ,IAAI,IAAI,CAAC,mBAAmB,IAAI,CAAC,EAAE,EAAE,EAAE,CAAC;gBACtC,MAAM,CAAC,IAAI,CAAC,WAAW,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,iCAAiC,CAAC,EAAE,EAAE,EAAE,EAAE,QAAQ,CAAC,CAAC;YACvG,CAAC;QACH,CAAC;oBACO,CAAC,EAAE,QAAQ,IAAI,EAAE;mBAClB,IAAI,CAAC,IAAI;wBACJ,CAAC,EAAE,yBAAyB,IAAI,IAAI;;;YAGhD,IAAI,CAAC,MAAM,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,2BAA2B,CAAC,EAAE,QAAQ,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO;SAC/F,CACF;QACC,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAA,gDAAgD,IAAI,CAAC,MAAM,CAAC,MAAM,oCAAoC,CAAC,CAAC,CAAC,OAAO;KACnJ,CAAC;IACJ,CAAC;;AA3HmC;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;yDAA4D;AAKjD;IAApC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAA0B;AAOqB;IAAzE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;sEAA+C;AAK/C;IAA/D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;6DAAsC;AAKvD;IAApC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA4B;AAM7B;IAAzB,KAAK,EAAE;0DAAsC;AAhCnC,2BAA2B;IADvC,aAAa,CAAC,gCAAgC,CAAC;GACnC,2BAA2B,CAgIvC"}
|