@inlaylab/opaline-angular 0.0.0-stage → 1.1.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/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Inlaylab
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,3 +1,30 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @inlaylab/opaline-angular
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Seeded avatars for Angular: a standalone, zoneless, SSR-safe component with signal inputs.
|
|
4
|
+
|
|
5
|
+
```sh
|
|
6
|
+
npm i @inlaylab/opaline-angular
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { Component } from '@angular/core'
|
|
11
|
+
import { OpalineAvatar } from '@inlaylab/opaline-angular'
|
|
12
|
+
import { clay } from '@inlaylab/opaline/clay'
|
|
13
|
+
|
|
14
|
+
@Component({
|
|
15
|
+
selector: 'app-user-avatar',
|
|
16
|
+
imports: [OpalineAvatar],
|
|
17
|
+
template: `<op-avatar [seed]="email" [look]="clay" [src]="photo" alt="Ada" />`,
|
|
18
|
+
})
|
|
19
|
+
export class UserAvatar {
|
|
20
|
+
protected readonly clay = clay
|
|
21
|
+
email = 'ada@inlay.dev'
|
|
22
|
+
photo?: string
|
|
23
|
+
}
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
Inputs: `seed`, `look`, `size`, `src`, `alt`, `palette`, `finish`, `expression`, `mood`, `face`, `family`, `backdrop`, `shape`, `body` and `ears`. Works with Angular 22 and inside Ivorie's `<iv-avatar-fallback>`.
|
|
27
|
+
|
|
28
|
+
Same seed, same avatar: from 1.0, the same seed and options give a byte-identical SVG in every 1.x release.
|
|
29
|
+
|
|
30
|
+
[Playground and docs](https://inlaylab.github.io/Opaline/) · [GitHub](https://github.com/Inlaylab/Opaline) · MIT for code and art.
|
|
@@ -0,0 +1,452 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
import { ChangeDetectionStrategy, Component, Injectable, afterNextRender, computed, effect, inject, input, signal, untracked, viewChild } from "@angular/core";
|
|
3
|
+
import { DomSanitizer } from "@angular/platform-browser";
|
|
4
|
+
import { createAvatar } from "@inlaylab/opaline";
|
|
5
|
+
var OpalineIds = class OpalineIds {
|
|
6
|
+
count = 0;
|
|
7
|
+
next() {
|
|
8
|
+
return `n${++this.count}`;
|
|
9
|
+
}
|
|
10
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
11
|
+
minVersion: "12.0.0",
|
|
12
|
+
version: "22.2.4",
|
|
13
|
+
ngImport: i0,
|
|
14
|
+
type: OpalineIds,
|
|
15
|
+
deps: [],
|
|
16
|
+
target: i0.ɵɵFactoryTarget.Injectable
|
|
17
|
+
});
|
|
18
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({
|
|
19
|
+
minVersion: "12.0.0",
|
|
20
|
+
version: "22.2.4",
|
|
21
|
+
ngImport: i0,
|
|
22
|
+
type: OpalineIds,
|
|
23
|
+
providedIn: "root"
|
|
24
|
+
});
|
|
25
|
+
};
|
|
26
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
27
|
+
minVersion: "12.0.0",
|
|
28
|
+
version: "22.2.4",
|
|
29
|
+
ngImport: i0,
|
|
30
|
+
type: OpalineIds,
|
|
31
|
+
decorators: [{
|
|
32
|
+
type: Injectable,
|
|
33
|
+
args: [{ providedIn: "root" }]
|
|
34
|
+
}]
|
|
35
|
+
});
|
|
36
|
+
var OpalineAvatar = class OpalineAvatar {
|
|
37
|
+
sanitizer = inject(DomSanitizer);
|
|
38
|
+
instance = inject(OpalineIds).next();
|
|
39
|
+
img = viewChild("img", ...ngDevMode ? [{ debugName: "img" }] : /* istanbul ignore next */ []);
|
|
40
|
+
seed = input(...ngDevMode ? [void 0, { debugName: "seed" }] : /* istanbul ignore next */ []);
|
|
41
|
+
look = input.required(...ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []);
|
|
42
|
+
size = input(64, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
|
|
43
|
+
src = input(...ngDevMode ? [void 0, { debugName: "src" }] : /* istanbul ignore next */ []);
|
|
44
|
+
alt = input(...ngDevMode ? [void 0, { debugName: "alt" }] : /* istanbul ignore next */ []);
|
|
45
|
+
palette = input(...ngDevMode ? [void 0, { debugName: "palette" }] : /* istanbul ignore next */ []);
|
|
46
|
+
family = input(...ngDevMode ? [void 0, { debugName: "family" }] : /* istanbul ignore next */ []);
|
|
47
|
+
face = input(...ngDevMode ? [void 0, { debugName: "face" }] : /* istanbul ignore next */ []);
|
|
48
|
+
mood = input(...ngDevMode ? [void 0, { debugName: "mood" }] : /* istanbul ignore next */ []);
|
|
49
|
+
expression = input(...ngDevMode ? [void 0, { debugName: "expression" }] : /* istanbul ignore next */ []);
|
|
50
|
+
backdrop = input(...ngDevMode ? [void 0, { debugName: "backdrop" }] : /* istanbul ignore next */ []);
|
|
51
|
+
shape = input(...ngDevMode ? [void 0, { debugName: "shape" }] : /* istanbul ignore next */ []);
|
|
52
|
+
finish = input(...ngDevMode ? [void 0, { debugName: "finish" }] : /* istanbul ignore next */ []);
|
|
53
|
+
body = input(...ngDevMode ? [void 0, { debugName: "body" }] : /* istanbul ignore next */ []);
|
|
54
|
+
ears = input(...ngDevMode ? [void 0, { debugName: "ears" }] : /* istanbul ignore next */ []);
|
|
55
|
+
text = input(...ngDevMode ? [void 0, { debugName: "text" }] : /* istanbul ignore next */ []);
|
|
56
|
+
state = signal("loading", ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
|
|
57
|
+
svg = computed(() => {
|
|
58
|
+
const svg = createAvatar(this.look(), {
|
|
59
|
+
seed: this.seed(),
|
|
60
|
+
size: this.size(),
|
|
61
|
+
instance: this.instance,
|
|
62
|
+
palette: this.palette(),
|
|
63
|
+
family: this.family(),
|
|
64
|
+
face: this.face(),
|
|
65
|
+
mood: this.mood(),
|
|
66
|
+
expression: this.expression(),
|
|
67
|
+
backdrop: this.backdrop(),
|
|
68
|
+
shape: this.shape(),
|
|
69
|
+
finish: this.finish(),
|
|
70
|
+
body: this.body(),
|
|
71
|
+
ears: this.ears(),
|
|
72
|
+
text: this.text()
|
|
73
|
+
}).svg;
|
|
74
|
+
return this.sanitizer.bypassSecurityTrustHtml(svg);
|
|
75
|
+
}, ...ngDevMode ? [{ debugName: "svg" }] : /* istanbul ignore next */ []);
|
|
76
|
+
constructor() {
|
|
77
|
+
effect(() => {
|
|
78
|
+
this.src();
|
|
79
|
+
untracked(() => this.state.set("loading"));
|
|
80
|
+
});
|
|
81
|
+
afterNextRender(() => {
|
|
82
|
+
const img = this.img()?.nativeElement;
|
|
83
|
+
if (img?.complete) this.state.set(img.naturalWidth > 0 ? "loaded" : "error");
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
87
|
+
minVersion: "12.0.0",
|
|
88
|
+
version: "22.2.4",
|
|
89
|
+
ngImport: i0,
|
|
90
|
+
type: OpalineAvatar,
|
|
91
|
+
deps: [],
|
|
92
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
93
|
+
});
|
|
94
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
95
|
+
minVersion: "17.0.0",
|
|
96
|
+
version: "22.2.4",
|
|
97
|
+
type: OpalineAvatar,
|
|
98
|
+
isStandalone: true,
|
|
99
|
+
selector: "op-avatar",
|
|
100
|
+
inputs: {
|
|
101
|
+
seed: {
|
|
102
|
+
classPropertyName: "seed",
|
|
103
|
+
publicName: "seed",
|
|
104
|
+
isSignal: true,
|
|
105
|
+
isRequired: false,
|
|
106
|
+
transformFunction: null
|
|
107
|
+
},
|
|
108
|
+
look: {
|
|
109
|
+
classPropertyName: "look",
|
|
110
|
+
publicName: "look",
|
|
111
|
+
isSignal: true,
|
|
112
|
+
isRequired: true,
|
|
113
|
+
transformFunction: null
|
|
114
|
+
},
|
|
115
|
+
size: {
|
|
116
|
+
classPropertyName: "size",
|
|
117
|
+
publicName: "size",
|
|
118
|
+
isSignal: true,
|
|
119
|
+
isRequired: false,
|
|
120
|
+
transformFunction: null
|
|
121
|
+
},
|
|
122
|
+
src: {
|
|
123
|
+
classPropertyName: "src",
|
|
124
|
+
publicName: "src",
|
|
125
|
+
isSignal: true,
|
|
126
|
+
isRequired: false,
|
|
127
|
+
transformFunction: null
|
|
128
|
+
},
|
|
129
|
+
alt: {
|
|
130
|
+
classPropertyName: "alt",
|
|
131
|
+
publicName: "alt",
|
|
132
|
+
isSignal: true,
|
|
133
|
+
isRequired: false,
|
|
134
|
+
transformFunction: null
|
|
135
|
+
},
|
|
136
|
+
palette: {
|
|
137
|
+
classPropertyName: "palette",
|
|
138
|
+
publicName: "palette",
|
|
139
|
+
isSignal: true,
|
|
140
|
+
isRequired: false,
|
|
141
|
+
transformFunction: null
|
|
142
|
+
},
|
|
143
|
+
family: {
|
|
144
|
+
classPropertyName: "family",
|
|
145
|
+
publicName: "family",
|
|
146
|
+
isSignal: true,
|
|
147
|
+
isRequired: false,
|
|
148
|
+
transformFunction: null
|
|
149
|
+
},
|
|
150
|
+
face: {
|
|
151
|
+
classPropertyName: "face",
|
|
152
|
+
publicName: "face",
|
|
153
|
+
isSignal: true,
|
|
154
|
+
isRequired: false,
|
|
155
|
+
transformFunction: null
|
|
156
|
+
},
|
|
157
|
+
mood: {
|
|
158
|
+
classPropertyName: "mood",
|
|
159
|
+
publicName: "mood",
|
|
160
|
+
isSignal: true,
|
|
161
|
+
isRequired: false,
|
|
162
|
+
transformFunction: null
|
|
163
|
+
},
|
|
164
|
+
expression: {
|
|
165
|
+
classPropertyName: "expression",
|
|
166
|
+
publicName: "expression",
|
|
167
|
+
isSignal: true,
|
|
168
|
+
isRequired: false,
|
|
169
|
+
transformFunction: null
|
|
170
|
+
},
|
|
171
|
+
backdrop: {
|
|
172
|
+
classPropertyName: "backdrop",
|
|
173
|
+
publicName: "backdrop",
|
|
174
|
+
isSignal: true,
|
|
175
|
+
isRequired: false,
|
|
176
|
+
transformFunction: null
|
|
177
|
+
},
|
|
178
|
+
shape: {
|
|
179
|
+
classPropertyName: "shape",
|
|
180
|
+
publicName: "shape",
|
|
181
|
+
isSignal: true,
|
|
182
|
+
isRequired: false,
|
|
183
|
+
transformFunction: null
|
|
184
|
+
},
|
|
185
|
+
finish: {
|
|
186
|
+
classPropertyName: "finish",
|
|
187
|
+
publicName: "finish",
|
|
188
|
+
isSignal: true,
|
|
189
|
+
isRequired: false,
|
|
190
|
+
transformFunction: null
|
|
191
|
+
},
|
|
192
|
+
body: {
|
|
193
|
+
classPropertyName: "body",
|
|
194
|
+
publicName: "body",
|
|
195
|
+
isSignal: true,
|
|
196
|
+
isRequired: false,
|
|
197
|
+
transformFunction: null
|
|
198
|
+
},
|
|
199
|
+
ears: {
|
|
200
|
+
classPropertyName: "ears",
|
|
201
|
+
publicName: "ears",
|
|
202
|
+
isSignal: true,
|
|
203
|
+
isRequired: false,
|
|
204
|
+
transformFunction: null
|
|
205
|
+
},
|
|
206
|
+
text: {
|
|
207
|
+
classPropertyName: "text",
|
|
208
|
+
publicName: "text",
|
|
209
|
+
isSignal: true,
|
|
210
|
+
isRequired: false,
|
|
211
|
+
transformFunction: null
|
|
212
|
+
}
|
|
213
|
+
},
|
|
214
|
+
host: {
|
|
215
|
+
attributes: { "data-opaline": "" },
|
|
216
|
+
properties: {
|
|
217
|
+
"style.width.px": "size()",
|
|
218
|
+
"style.height.px": "size()",
|
|
219
|
+
"attr.role": "alt() ? \"img\" : null",
|
|
220
|
+
"attr.aria-label": "alt() || null",
|
|
221
|
+
"attr.aria-hidden": "alt() ? null : \"true\"",
|
|
222
|
+
"attr.seed": "null",
|
|
223
|
+
"attr.look": "null",
|
|
224
|
+
"attr.size": "null",
|
|
225
|
+
"attr.src": "null",
|
|
226
|
+
"attr.alt": "null",
|
|
227
|
+
"attr.palette": "null",
|
|
228
|
+
"attr.family": "null",
|
|
229
|
+
"attr.face": "null",
|
|
230
|
+
"attr.mood": "null",
|
|
231
|
+
"attr.expression": "null",
|
|
232
|
+
"attr.backdrop": "null",
|
|
233
|
+
"attr.shape": "null",
|
|
234
|
+
"attr.text": "null",
|
|
235
|
+
"attr.finish": "null",
|
|
236
|
+
"attr.body": "null",
|
|
237
|
+
"attr.ears": "null"
|
|
238
|
+
},
|
|
239
|
+
styleAttribute: "display:inline-block;position:relative"
|
|
240
|
+
},
|
|
241
|
+
viewQueries: [{
|
|
242
|
+
propertyName: "img",
|
|
243
|
+
first: true,
|
|
244
|
+
predicate: ["img"],
|
|
245
|
+
descendants: true,
|
|
246
|
+
isSignal: true
|
|
247
|
+
}],
|
|
248
|
+
ngImport: i0,
|
|
249
|
+
template: `<span style="display:contents" [innerHTML]="svg()"></span>
|
|
250
|
+
@if (src() && state() !== 'error') {
|
|
251
|
+
<img
|
|
252
|
+
#img
|
|
253
|
+
[src]="src()"
|
|
254
|
+
alt=""
|
|
255
|
+
style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit"
|
|
256
|
+
[hidden]="state() !== 'loaded'"
|
|
257
|
+
(load)="state.set('loaded')"
|
|
258
|
+
(error)="state.set('error')"
|
|
259
|
+
/>
|
|
260
|
+
}`,
|
|
261
|
+
isInline: true,
|
|
262
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
263
|
+
});
|
|
264
|
+
};
|
|
265
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
266
|
+
minVersion: "12.0.0",
|
|
267
|
+
version: "22.2.4",
|
|
268
|
+
ngImport: i0,
|
|
269
|
+
type: OpalineAvatar,
|
|
270
|
+
decorators: [{
|
|
271
|
+
type: Component,
|
|
272
|
+
args: [{
|
|
273
|
+
selector: "op-avatar",
|
|
274
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
275
|
+
host: {
|
|
276
|
+
"data-opaline": "",
|
|
277
|
+
style: "display:inline-block;position:relative",
|
|
278
|
+
"[style.width.px]": "size()",
|
|
279
|
+
"[style.height.px]": "size()",
|
|
280
|
+
"[attr.role]": "alt() ? \"img\" : null",
|
|
281
|
+
"[attr.aria-label]": "alt() || null",
|
|
282
|
+
"[attr.aria-hidden]": "alt() ? null : \"true\"",
|
|
283
|
+
"[attr.seed]": "null",
|
|
284
|
+
"[attr.look]": "null",
|
|
285
|
+
"[attr.size]": "null",
|
|
286
|
+
"[attr.src]": "null",
|
|
287
|
+
"[attr.alt]": "null",
|
|
288
|
+
"[attr.palette]": "null",
|
|
289
|
+
"[attr.family]": "null",
|
|
290
|
+
"[attr.face]": "null",
|
|
291
|
+
"[attr.mood]": "null",
|
|
292
|
+
"[attr.expression]": "null",
|
|
293
|
+
"[attr.backdrop]": "null",
|
|
294
|
+
"[attr.shape]": "null",
|
|
295
|
+
"[attr.text]": "null",
|
|
296
|
+
"[attr.finish]": "null",
|
|
297
|
+
"[attr.body]": "null",
|
|
298
|
+
"[attr.ears]": "null"
|
|
299
|
+
},
|
|
300
|
+
template: `<span style="display:contents" [innerHTML]="svg()"></span>
|
|
301
|
+
@if (src() && state() !== 'error') {
|
|
302
|
+
<img
|
|
303
|
+
#img
|
|
304
|
+
[src]="src()"
|
|
305
|
+
alt=""
|
|
306
|
+
style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit"
|
|
307
|
+
[hidden]="state() !== 'loaded'"
|
|
308
|
+
(load)="state.set('loaded')"
|
|
309
|
+
(error)="state.set('error')"
|
|
310
|
+
/>
|
|
311
|
+
}`
|
|
312
|
+
}]
|
|
313
|
+
}],
|
|
314
|
+
ctorParameters: () => [],
|
|
315
|
+
propDecorators: {
|
|
316
|
+
img: [{
|
|
317
|
+
type: i0.ViewChild,
|
|
318
|
+
args: ["img", { isSignal: true }]
|
|
319
|
+
}],
|
|
320
|
+
seed: [{
|
|
321
|
+
type: i0.Input,
|
|
322
|
+
args: [{
|
|
323
|
+
isSignal: true,
|
|
324
|
+
alias: "seed",
|
|
325
|
+
required: false
|
|
326
|
+
}]
|
|
327
|
+
}],
|
|
328
|
+
look: [{
|
|
329
|
+
type: i0.Input,
|
|
330
|
+
args: [{
|
|
331
|
+
isSignal: true,
|
|
332
|
+
alias: "look",
|
|
333
|
+
required: true
|
|
334
|
+
}]
|
|
335
|
+
}],
|
|
336
|
+
size: [{
|
|
337
|
+
type: i0.Input,
|
|
338
|
+
args: [{
|
|
339
|
+
isSignal: true,
|
|
340
|
+
alias: "size",
|
|
341
|
+
required: false
|
|
342
|
+
}]
|
|
343
|
+
}],
|
|
344
|
+
src: [{
|
|
345
|
+
type: i0.Input,
|
|
346
|
+
args: [{
|
|
347
|
+
isSignal: true,
|
|
348
|
+
alias: "src",
|
|
349
|
+
required: false
|
|
350
|
+
}]
|
|
351
|
+
}],
|
|
352
|
+
alt: [{
|
|
353
|
+
type: i0.Input,
|
|
354
|
+
args: [{
|
|
355
|
+
isSignal: true,
|
|
356
|
+
alias: "alt",
|
|
357
|
+
required: false
|
|
358
|
+
}]
|
|
359
|
+
}],
|
|
360
|
+
palette: [{
|
|
361
|
+
type: i0.Input,
|
|
362
|
+
args: [{
|
|
363
|
+
isSignal: true,
|
|
364
|
+
alias: "palette",
|
|
365
|
+
required: false
|
|
366
|
+
}]
|
|
367
|
+
}],
|
|
368
|
+
family: [{
|
|
369
|
+
type: i0.Input,
|
|
370
|
+
args: [{
|
|
371
|
+
isSignal: true,
|
|
372
|
+
alias: "family",
|
|
373
|
+
required: false
|
|
374
|
+
}]
|
|
375
|
+
}],
|
|
376
|
+
face: [{
|
|
377
|
+
type: i0.Input,
|
|
378
|
+
args: [{
|
|
379
|
+
isSignal: true,
|
|
380
|
+
alias: "face",
|
|
381
|
+
required: false
|
|
382
|
+
}]
|
|
383
|
+
}],
|
|
384
|
+
mood: [{
|
|
385
|
+
type: i0.Input,
|
|
386
|
+
args: [{
|
|
387
|
+
isSignal: true,
|
|
388
|
+
alias: "mood",
|
|
389
|
+
required: false
|
|
390
|
+
}]
|
|
391
|
+
}],
|
|
392
|
+
expression: [{
|
|
393
|
+
type: i0.Input,
|
|
394
|
+
args: [{
|
|
395
|
+
isSignal: true,
|
|
396
|
+
alias: "expression",
|
|
397
|
+
required: false
|
|
398
|
+
}]
|
|
399
|
+
}],
|
|
400
|
+
backdrop: [{
|
|
401
|
+
type: i0.Input,
|
|
402
|
+
args: [{
|
|
403
|
+
isSignal: true,
|
|
404
|
+
alias: "backdrop",
|
|
405
|
+
required: false
|
|
406
|
+
}]
|
|
407
|
+
}],
|
|
408
|
+
shape: [{
|
|
409
|
+
type: i0.Input,
|
|
410
|
+
args: [{
|
|
411
|
+
isSignal: true,
|
|
412
|
+
alias: "shape",
|
|
413
|
+
required: false
|
|
414
|
+
}]
|
|
415
|
+
}],
|
|
416
|
+
finish: [{
|
|
417
|
+
type: i0.Input,
|
|
418
|
+
args: [{
|
|
419
|
+
isSignal: true,
|
|
420
|
+
alias: "finish",
|
|
421
|
+
required: false
|
|
422
|
+
}]
|
|
423
|
+
}],
|
|
424
|
+
body: [{
|
|
425
|
+
type: i0.Input,
|
|
426
|
+
args: [{
|
|
427
|
+
isSignal: true,
|
|
428
|
+
alias: "body",
|
|
429
|
+
required: false
|
|
430
|
+
}]
|
|
431
|
+
}],
|
|
432
|
+
ears: [{
|
|
433
|
+
type: i0.Input,
|
|
434
|
+
args: [{
|
|
435
|
+
isSignal: true,
|
|
436
|
+
alias: "ears",
|
|
437
|
+
required: false
|
|
438
|
+
}]
|
|
439
|
+
}],
|
|
440
|
+
text: [{
|
|
441
|
+
type: i0.Input,
|
|
442
|
+
args: [{
|
|
443
|
+
isSignal: true,
|
|
444
|
+
alias: "text",
|
|
445
|
+
required: false
|
|
446
|
+
}]
|
|
447
|
+
}]
|
|
448
|
+
}
|
|
449
|
+
});
|
|
450
|
+
export { OpalineAvatar, OpalineIds };
|
|
451
|
+
|
|
452
|
+
//# sourceMappingURL=inlaylab-opaline-angular.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"inlaylab-opaline-angular.mjs","names":[],"sources":["../../src/ids.ts","../../src/avatar.ts"],"sourcesContent":["import { Injectable } from '@angular/core'\n\n/** Per-app counter. Server and client render in the same order, so IDs match on hydration. */\n@Injectable({ providedIn: 'root' })\nexport class OpalineIds {\n private count = 0\n\n next(): string {\n return `n${++this.count}`\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n afterNextRender,\n computed,\n effect,\n inject,\n input,\n signal,\n untracked,\n viewChild,\n} from '@angular/core'\nimport { DomSanitizer, type SafeHtml } from '@angular/platform-browser'\nimport {\n createAvatar,\n type BlobOptions,\n type ClayOptions,\n type Finish,\n type Expression,\n type Family,\n type Mood,\n type PaletteName,\n type Shape,\n type Style,\n} from '@inlaylab/opaline'\nimport { OpalineIds } from './ids'\n\ntype ImageState = 'loading' | 'loaded' | 'error'\n\n/** `<op-avatar seed=\"ada@inlay.dev\" [look]=\"morph\" />`: a seeded avatar with an optional photo. */\n@Component({\n selector: 'op-avatar',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n 'data-opaline': '',\n style: 'display:inline-block;position:relative',\n '[style.width.px]': 'size()',\n '[style.height.px]': 'size()',\n '[attr.role]': 'alt() ? \"img\" : null',\n '[attr.aria-label]': 'alt() || null',\n '[attr.aria-hidden]': 'alt() ? null : \"true\"',\n // Static template attributes (`seed=\"ada@inlay.dev\"`) stay on the host; the seed is often an\n // email. Clear them so the root carries only the markup contract, on the server too.\n '[attr.seed]': 'null',\n '[attr.look]': 'null',\n '[attr.size]': 'null',\n '[attr.src]': 'null',\n '[attr.alt]': 'null',\n '[attr.palette]': 'null',\n '[attr.family]': 'null',\n '[attr.face]': 'null',\n '[attr.mood]': 'null',\n '[attr.expression]': 'null',\n '[attr.backdrop]': 'null',\n '[attr.shape]': 'null',\n '[attr.text]': 'null',\n '[attr.finish]': 'null',\n '[attr.body]': 'null',\n '[attr.ears]': 'null',\n },\n template: `<span style=\"display:contents\" [innerHTML]=\"svg()\"></span>\n @if (src() && state() !== 'error') {\n <img\n #img\n [src]=\"src()\"\n alt=\"\"\n style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit\"\n [hidden]=\"state() !== 'loaded'\"\n (load)=\"state.set('loaded')\"\n (error)=\"state.set('error')\"\n />\n }`,\n})\nexport class OpalineAvatar {\n private readonly sanitizer = inject(DomSanitizer)\n // Unique per instance, so the same avatar twice on a page never shares gradient IDs.\n private readonly instance = inject(OpalineIds).next()\n private readonly img = viewChild<ElementRef<HTMLImageElement>>('img')\n\n readonly seed = input<string | number | null | undefined>()\n readonly look = input.required<Style<any>>()\n readonly size = input(64)\n readonly src = input<string>()\n readonly alt = input<string>()\n readonly palette = input<PaletteName>()\n readonly family = input<Family>()\n readonly face = input<boolean>()\n readonly mood = input<Mood>()\n readonly expression = input<Expression>()\n readonly backdrop = input<BlobOptions['backdrop']>()\n readonly shape = input<Shape>()\n readonly finish = input<Finish>()\n readonly body = input<ClayOptions['body']>()\n readonly ears = input<ClayOptions['ears']>()\n /** Initials only: letters to show instead of the ones from the seed. */\n readonly text = input<string>()\n\n protected readonly state = signal<ImageState>('loading')\n\n protected readonly svg = computed<SafeHtml>(() => {\n const svg = createAvatar(this.look(), {\n seed: this.seed(),\n size: this.size(),\n instance: this.instance,\n palette: this.palette(),\n family: this.family(),\n face: this.face(),\n mood: this.mood(),\n expression: this.expression(),\n backdrop: this.backdrop(),\n shape: this.shape(),\n finish: this.finish(),\n body: this.body(),\n ears: this.ears(),\n text: this.text(),\n }).svg\n // Safe: the core escapes every input that reaches the SVG, and the default sanitizer strips SVG.\n return this.sanitizer.bypassSecurityTrustHtml(svg)\n })\n\n constructor() {\n // A new src is a new image: hide it until it loads.\n effect(() => {\n this.src()\n untracked(() => this.state.set('loading'))\n })\n // With SSR the image can finish before hydration, so its load event is missed. Read it once.\n afterNextRender(() => {\n const img = this.img()?.nativeElement\n if (img?.complete) this.state.set(img.naturalWidth > 0 ? 'loaded' : 'error')\n })\n }\n}\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,54 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@inlaylab/opaline-angular",
|
|
3
|
-
"version": "
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "1.1.0",
|
|
4
|
+
"description": "Seeded avatars for Angular: a standalone, zoneless, SSR-safe component.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"avatar",
|
|
7
|
+
"avatars",
|
|
8
|
+
"svg",
|
|
9
|
+
"seed",
|
|
10
|
+
"deterministic",
|
|
11
|
+
"identicon",
|
|
12
|
+
"profile-picture",
|
|
13
|
+
"placeholder",
|
|
14
|
+
"angular",
|
|
15
|
+
"angular-component",
|
|
16
|
+
"ssr",
|
|
17
|
+
"zoneless"
|
|
18
|
+
],
|
|
19
|
+
"homepage": "https://inlaylab.github.io/Opaline/",
|
|
20
|
+
"bugs": {
|
|
21
|
+
"url": "https://github.com/Inlaylab/Opaline/issues"
|
|
22
|
+
},
|
|
23
|
+
"license": "MIT",
|
|
24
|
+
"repository": {
|
|
25
|
+
"type": "git",
|
|
26
|
+
"url": "git+https://github.com/Inlaylab/Opaline.git",
|
|
27
|
+
"directory": "packages/angular"
|
|
28
|
+
},
|
|
29
|
+
"publishConfig": {
|
|
30
|
+
"access": "public",
|
|
31
|
+
"directory": "dist"
|
|
32
|
+
},
|
|
33
|
+
"sideEffects": false,
|
|
34
|
+
"peerDependencies": {
|
|
35
|
+
"@angular/core": ">=22.0.0 <23.0.0",
|
|
36
|
+
"@angular/platform-browser": ">=22.0.0 <23.0.0"
|
|
37
|
+
},
|
|
38
|
+
"dependencies": {
|
|
39
|
+
"@inlaylab/opaline": "1.1.0",
|
|
40
|
+
"tslib": "^2.3.0"
|
|
41
|
+
},
|
|
42
|
+
"module": "fesm2022/inlaylab-opaline-angular.mjs",
|
|
43
|
+
"typings": "types/inlaylab-opaline-angular.d.ts",
|
|
44
|
+
"exports": {
|
|
45
|
+
"./package.json": {
|
|
46
|
+
"default": "./package.json"
|
|
47
|
+
},
|
|
48
|
+
".": {
|
|
49
|
+
"types": "./types/inlaylab-opaline-angular.d.ts",
|
|
50
|
+
"default": "./fesm2022/inlaylab-opaline-angular.mjs"
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
"type": "module"
|
|
6
54
|
}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { SafeHtml } from "@angular/platform-browser";
|
|
2
|
+
import { Expression, Family, Finish, Mood, PaletteName, Shape, Style } from "@inlaylab/opaline";
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
type ImageState = 'loading' | 'loaded' | 'error';
|
|
5
|
+
/** `<op-avatar seed="ada@inlay.dev" [look]="morph" />`: a seeded avatar with an optional photo. */
|
|
6
|
+
export declare class OpalineAvatar {
|
|
7
|
+
private readonly sanitizer;
|
|
8
|
+
private readonly instance;
|
|
9
|
+
private readonly img;
|
|
10
|
+
readonly seed: import("@angular/core").InputSignal<string | number | null | undefined>;
|
|
11
|
+
readonly look: import("@angular/core").InputSignal<Style<any>>;
|
|
12
|
+
readonly size: import("@angular/core").InputSignal<number>;
|
|
13
|
+
readonly src: import("@angular/core").InputSignal<string | undefined>;
|
|
14
|
+
readonly alt: import("@angular/core").InputSignal<string | undefined>;
|
|
15
|
+
readonly palette: import("@angular/core").InputSignal<PaletteName | undefined>;
|
|
16
|
+
readonly family: import("@angular/core").InputSignal<Family | undefined>;
|
|
17
|
+
readonly face: import("@angular/core").InputSignal<boolean | undefined>;
|
|
18
|
+
readonly mood: import("@angular/core").InputSignal<Mood | undefined>;
|
|
19
|
+
readonly expression: import("@angular/core").InputSignal<Expression | undefined>;
|
|
20
|
+
readonly backdrop: import("@angular/core").InputSignal<"none" | "tint" | undefined>;
|
|
21
|
+
readonly shape: import("@angular/core").InputSignal<Shape | undefined>;
|
|
22
|
+
readonly finish: import("@angular/core").InputSignal<Finish | undefined>;
|
|
23
|
+
readonly body: import("@angular/core").InputSignal<"jelly" | "hood" | undefined>;
|
|
24
|
+
readonly ears: import("@angular/core").InputSignal<"cat" | "bear" | "bunny" | undefined>;
|
|
25
|
+
/** Initials only: letters to show instead of the ones from the seed. */
|
|
26
|
+
readonly text: import("@angular/core").InputSignal<string | undefined>;
|
|
27
|
+
protected readonly state: import("@angular/core").WritableSignal<ImageState>;
|
|
28
|
+
protected readonly svg: import("@angular/core").Signal<SafeHtml>;
|
|
29
|
+
constructor();
|
|
30
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<OpalineAvatar, never>;
|
|
31
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<OpalineAvatar, "op-avatar", never, {
|
|
32
|
+
"seed": {
|
|
33
|
+
"alias": "seed";
|
|
34
|
+
"required": false;
|
|
35
|
+
"isSignal": true;
|
|
36
|
+
};
|
|
37
|
+
"look": {
|
|
38
|
+
"alias": "look";
|
|
39
|
+
"required": true;
|
|
40
|
+
"isSignal": true;
|
|
41
|
+
};
|
|
42
|
+
"size": {
|
|
43
|
+
"alias": "size";
|
|
44
|
+
"required": false;
|
|
45
|
+
"isSignal": true;
|
|
46
|
+
};
|
|
47
|
+
"src": {
|
|
48
|
+
"alias": "src";
|
|
49
|
+
"required": false;
|
|
50
|
+
"isSignal": true;
|
|
51
|
+
};
|
|
52
|
+
"alt": {
|
|
53
|
+
"alias": "alt";
|
|
54
|
+
"required": false;
|
|
55
|
+
"isSignal": true;
|
|
56
|
+
};
|
|
57
|
+
"palette": {
|
|
58
|
+
"alias": "palette";
|
|
59
|
+
"required": false;
|
|
60
|
+
"isSignal": true;
|
|
61
|
+
};
|
|
62
|
+
"family": {
|
|
63
|
+
"alias": "family";
|
|
64
|
+
"required": false;
|
|
65
|
+
"isSignal": true;
|
|
66
|
+
};
|
|
67
|
+
"face": {
|
|
68
|
+
"alias": "face";
|
|
69
|
+
"required": false;
|
|
70
|
+
"isSignal": true;
|
|
71
|
+
};
|
|
72
|
+
"mood": {
|
|
73
|
+
"alias": "mood";
|
|
74
|
+
"required": false;
|
|
75
|
+
"isSignal": true;
|
|
76
|
+
};
|
|
77
|
+
"expression": {
|
|
78
|
+
"alias": "expression";
|
|
79
|
+
"required": false;
|
|
80
|
+
"isSignal": true;
|
|
81
|
+
};
|
|
82
|
+
"backdrop": {
|
|
83
|
+
"alias": "backdrop";
|
|
84
|
+
"required": false;
|
|
85
|
+
"isSignal": true;
|
|
86
|
+
};
|
|
87
|
+
"shape": {
|
|
88
|
+
"alias": "shape";
|
|
89
|
+
"required": false;
|
|
90
|
+
"isSignal": true;
|
|
91
|
+
};
|
|
92
|
+
"finish": {
|
|
93
|
+
"alias": "finish";
|
|
94
|
+
"required": false;
|
|
95
|
+
"isSignal": true;
|
|
96
|
+
};
|
|
97
|
+
"body": {
|
|
98
|
+
"alias": "body";
|
|
99
|
+
"required": false;
|
|
100
|
+
"isSignal": true;
|
|
101
|
+
};
|
|
102
|
+
"ears": {
|
|
103
|
+
"alias": "ears";
|
|
104
|
+
"required": false;
|
|
105
|
+
"isSignal": true;
|
|
106
|
+
};
|
|
107
|
+
"text": {
|
|
108
|
+
"alias": "text";
|
|
109
|
+
"required": false;
|
|
110
|
+
"isSignal": true;
|
|
111
|
+
};
|
|
112
|
+
}, {}, never, never, true, never>;
|
|
113
|
+
}
|
|
114
|
+
/** Per-app counter. Server and client render in the same order, so IDs match on hydration. */
|
|
115
|
+
export declare class OpalineIds {
|
|
116
|
+
private count;
|
|
117
|
+
next(): string;
|
|
118
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<OpalineIds, never>;
|
|
119
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<any>;
|
|
120
|
+
}
|
|
121
|
+
export {};
|
|
122
|
+
//# sourceMappingURL=inlaylab-opaline-angular.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"inlaylab-opaline-angular.d.ts","names":[],"sources":["../../src/avatar.ts","../../src/ids.ts"],"mappings":";;;KA4BK;;qBA8CQ;mBACM;mBAEA;mBACA;WAER,8BAAI;WACJ,8BAAI,YAAA;WACJ,8BAAI;WACJ,6BAAG;WACH,6BAAG;WACH,iCAAO,YAAA;WACP,gCAAM,YAAA;WACN,8BAAI;WACJ,8BAAI,YAAA;WACJ,oCAAU,YAAA;WACV,kCAAQ;WACR,+BAAK,YAAA;WACL,gCAAM,YAAA;WACN,8BAAI;WACJ,8BAAI;;WAEJ,8BAAI;qBAEM,+BAAK,eAAA;qBAEL,6BAAG,OAAA;;SA1BX,MAAA,GAAA,qBAAA;SAAA,MAAA,GAAA,uBAAA;IAAa;MAAA;MAAA;MAAA;;IAAA;MAAA;MAAA;MAAA;;IAAA;MAAA;MAAA;MAAA;;IAAA;MAAA;MAAA;MAAA;;IAAA;MAAA;MAAA;MAAA;;IAAA;MAAA;MAAA;MAAA;;IAAA;MAAA;MAAA;MAAA;;IAAA;MAAA;MAAA;MAAA;;IAAA;MAAA;MAAA;MAAA;;IAAA;MAAA;MAAA;MAAA;;IAAA;MAAA;MAAA;MAAA;;IAAA;MAAA;MAAA;MAAA;;IAAA;MAAA;MAAA;MAAA;;IAAA;MAAA;MAAA;MAAA;;IAAA;MAAA;MAAA;MAAA;;IAAA;MAAA;MAAA;MAAA;;;;;qBCtEb;UACH;EAER;SAHW,MAAA,GAAA,qBAAA"}
|