@lmvz-ds/components 0.12.3-alpha.4 → 0.12.3
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/cjs/{Effect-BIlTHtLK.js → Effect-CNhHt4Xb.js} +615 -885
- package/dist/cjs/MutableQueue-Bk9tBfaK.js +462 -0
- package/dist/cjs/{aria-validation-controller-B7unOPxT.js → aria-validation-controller-B3hMkau3.js} +157 -156
- package/dist/cjs/assets-iuJtMMdw.js +60 -0
- package/dist/cjs/{icons-BFM1yQ_r.js → icons-CAiJpiUC.js} +22 -74
- package/dist/cjs/index.cjs.js +4 -2
- package/dist/cjs/lmvz-button.cjs.entry.js +3 -2
- package/dist/cjs/lmvz-card.cjs.entry.js +7 -2
- package/dist/cjs/lmvz-header.cjs.entry.js +3 -2
- package/dist/cjs/lmvz-icon.cjs.entry.js +5 -3
- package/dist/cjs/lmvz-input.cjs.entry.js +3 -2
- package/dist/cjs/lmvz-menuitem.cjs.entry.js +3 -2
- package/dist/collection/components/lmvz-card/lmvz-card.js +8 -3
- package/dist/collection/components/lmvz-icon/icons.js +3 -3
- package/dist/collection/utils/{url.js → assets.js} +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/lmvz-button.js +1 -1
- package/dist/components/lmvz-card.js +1 -1
- package/dist/components/lmvz-header.js +1 -1
- package/dist/components/lmvz-icon.js +1 -1
- package/dist/components/lmvz-input.js +1 -1
- package/dist/components/lmvz-menuitem.js +1 -1
- package/dist/components/p-3I3wZmp8.js +1 -0
- package/dist/components/p-BQTNPxka.js +1 -0
- package/dist/components/p-CdofjRtQ.js +1 -0
- package/dist/components/p-xpxyPpHZ.js +1 -0
- package/dist/esm/{Effect-D9S7OTyY.js → Effect-BhQLGXPs.js} +568 -829
- package/dist/esm/MutableQueue-CNlEFklh.js +431 -0
- package/dist/esm/{aria-validation-controller-C7nQzCCq.js → aria-validation-controller-iA4YWFG-.js} +2 -1
- package/dist/esm/assets-BymuU366.js +57 -0
- package/dist/esm/{icons-BFqdzPxR.js → icons-D7UubWaN.js} +5 -57
- package/dist/esm/index.js +4 -2
- package/dist/esm/lmvz-button.entry.js +3 -2
- package/dist/esm/lmvz-card.entry.js +8 -3
- package/dist/esm/lmvz-header.entry.js +3 -2
- package/dist/esm/lmvz-icon.entry.js +5 -3
- package/dist/esm/lmvz-input.entry.js +3 -2
- package/dist/esm/lmvz-menuitem.entry.js +3 -2
- package/dist/lmvz-components/index.esm.js +1 -1
- package/dist/lmvz-components/lmvz-components.esm.js +1 -1
- package/dist/lmvz-components/p-1d916449.entry.js +1 -0
- package/dist/lmvz-components/p-274c36df.entry.js +1 -0
- package/dist/lmvz-components/p-4b70fe08.entry.js +1 -0
- package/dist/lmvz-components/p-68001ab7.entry.js +1 -0
- package/dist/lmvz-components/p-77e26e71.entry.js +1 -0
- package/dist/lmvz-components/p-BhQLGXPs.js +1 -0
- package/dist/lmvz-components/p-CXWyvf0D.js +1 -0
- package/dist/lmvz-components/p-Ce_AL9kY.js +1 -0
- package/dist/lmvz-components/p-D7I-Bc5i.js +1 -0
- package/dist/lmvz-components/p-DohldYb4.js +1 -0
- package/dist/lmvz-components/p-de18e27e.entry.js +1 -0
- package/dist/manifest.json +1 -1
- package/dist/types/components/lmvz-card/lmvz-card.d.ts +1 -0
- package/dist/types/utils/{url.d.ts → assets.d.ts} +1 -1
- package/hydrate/index.js +487 -7
- package/hydrate/index.mjs +487 -7
- package/package.json +4 -4
- package/dist/components/p-BFwzIh71.js +0 -1
- package/dist/components/p-CfWkZ_yJ.js +0 -1
- package/dist/lmvz-components/assets/LMVZ_logo_175.svg +0 -1
- package/dist/lmvz-components/assets/card-placeholder.svg +0 -4
- package/dist/lmvz-components/assets/fonts/Router-Bold.woff +0 -0
- package/dist/lmvz-components/assets/fonts/Router-Book.woff +0 -0
- package/dist/lmvz-components/assets/fonts/Router-Medium.woff +0 -0
- package/dist/lmvz-components/assets/icons/Logo.svg +0 -10
- package/dist/lmvz-components/assets/icons/actions.svg +0 -5
- package/dist/lmvz-components/assets/icons/adduser.svg +0 -3
- package/dist/lmvz-components/assets/icons/alert.svg +0 -3
- package/dist/lmvz-components/assets/icons/apple.svg +0 -3
- package/dist/lmvz-components/assets/icons/arrow-down.svg +0 -3
- package/dist/lmvz-components/assets/icons/arrow-left.svg +0 -3
- package/dist/lmvz-components/assets/icons/arrow-right.svg +0 -3
- package/dist/lmvz-components/assets/icons/arrow-up.svg +0 -3
- package/dist/lmvz-components/assets/icons/book.svg +0 -3
- package/dist/lmvz-components/assets/icons/bookmark.svg +0 -3
- package/dist/lmvz-components/assets/icons/checkmark.svg +0 -3
- package/dist/lmvz-components/assets/icons/chevron-down.svg +0 -3
- package/dist/lmvz-components/assets/icons/chevron-left.svg +0 -3
- package/dist/lmvz-components/assets/icons/chevron-right.svg +0 -3
- package/dist/lmvz-components/assets/icons/chevron-up.svg +0 -3
- package/dist/lmvz-components/assets/icons/close-l.svg +0 -3
- package/dist/lmvz-components/assets/icons/close-sm.svg +0 -3
- package/dist/lmvz-components/assets/icons/cog.svg +0 -4
- package/dist/lmvz-components/assets/icons/computer.svg +0 -3
- package/dist/lmvz-components/assets/icons/dashboard.svg +0 -6
- package/dist/lmvz-components/assets/icons/delete.svg +0 -3
- package/dist/lmvz-components/assets/icons/download.svg +0 -3
- package/dist/lmvz-components/assets/icons/edit.svg +0 -3
- package/dist/lmvz-components/assets/icons/external.svg +0 -3
- package/dist/lmvz-components/assets/icons/facebook.svg +0 -3
- package/dist/lmvz-components/assets/icons/favorite.svg +0 -3
- package/dist/lmvz-components/assets/icons/filter.svg +0 -3
- package/dist/lmvz-components/assets/icons/group.svg +0 -3
- package/dist/lmvz-components/assets/icons/hide.svg +0 -3
- package/dist/lmvz-components/assets/icons/home.svg +0 -3
- package/dist/lmvz-components/assets/icons/info.svg +0 -3
- package/dist/lmvz-components/assets/icons/instagram.svg +0 -3
- package/dist/lmvz-components/assets/icons/letter.svg +0 -3
- package/dist/lmvz-components/assets/icons/linkedin.svg +0 -5
- package/dist/lmvz-components/assets/icons/logout.svg +0 -3
- package/dist/lmvz-components/assets/icons/map.svg +0 -3
- package/dist/lmvz-components/assets/icons/minus.svg +0 -3
- package/dist/lmvz-components/assets/icons/navigation.svg +0 -3
- package/dist/lmvz-components/assets/icons/plus.svg +0 -3
- package/dist/lmvz-components/assets/icons/qr-scan.svg +0 -3
- package/dist/lmvz-components/assets/icons/question.svg +0 -10
- package/dist/lmvz-components/assets/icons/reader.svg +0 -3
- package/dist/lmvz-components/assets/icons/reset.svg +0 -3
- package/dist/lmvz-components/assets/icons/school.svg +0 -3
- package/dist/lmvz-components/assets/icons/search.svg +0 -3
- package/dist/lmvz-components/assets/icons/send.svg +0 -3
- package/dist/lmvz-components/assets/icons/settings.svg +0 -3
- package/dist/lmvz-components/assets/icons/share.svg +0 -10
- package/dist/lmvz-components/assets/icons/shopping-cart.svg +0 -3
- package/dist/lmvz-components/assets/icons/show.svg +0 -3
- package/dist/lmvz-components/assets/icons/snapchat.svg +0 -3
- package/dist/lmvz-components/assets/icons/sort.svg +0 -3
- package/dist/lmvz-components/assets/icons/speech-bubble.svg +0 -3
- package/dist/lmvz-components/assets/icons/star.svg +0 -3
- package/dist/lmvz-components/assets/icons/student.svg +0 -3
- package/dist/lmvz-components/assets/icons/upload.svg +0 -3
- package/dist/lmvz-components/assets/icons/user.svg +0 -3
- package/dist/lmvz-components/assets/icons/warn-circle.svg +0 -3
- package/dist/lmvz-components/assets/icons/warn-triangle.svg +0 -3
- package/dist/lmvz-components/assets/icons/whatsapp.svg +0 -4
- package/dist/lmvz-components/assets/icons/world.svg +0 -10
- package/dist/lmvz-components/assets/icons/x.svg +0 -3
- package/dist/lmvz-components/assets/icons/youtube.svg +0 -3
- package/dist/lmvz-components/assets/zukunftslinie.svg +0 -3
- package/dist/lmvz-components/p-6d71c048.entry.js +0 -1
- package/dist/lmvz-components/p-CDfcYSci.js +0 -1
- package/dist/lmvz-components/p-D9S7OTyY.js +0 -1
- package/dist/lmvz-components/p-DlrjrWsu.js +0 -1
- package/dist/lmvz-components/p-a4615e4b.entry.js +0 -1
- package/dist/lmvz-components/p-a8c88454.entry.js +0 -1
- package/dist/lmvz-components/p-e63e239a.entry.js +0 -1
- package/dist/lmvz-components/p-f956a5e7.entry.js +0 -1
- package/dist/lmvz-components/p-fefd2fe4.entry.js +0 -1
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-9ZJx0550.js');
|
|
4
|
+
var Effect = require('./Effect-CNhHt4Xb.js');
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Provides a constructor for a Case Class.
|
|
8
|
+
*
|
|
9
|
+
* @since 2.0.0
|
|
10
|
+
* @category constructors
|
|
11
|
+
*/
|
|
12
|
+
const Error = /*#__PURE__*/function () {
|
|
13
|
+
const plainArgsSymbol = /*#__PURE__*/Symbol.for("effect/Data/Error/plainArgs");
|
|
14
|
+
const O = {
|
|
15
|
+
BaseEffectError: class extends Effect.YieldableError {
|
|
16
|
+
constructor(args) {
|
|
17
|
+
super(args?.message, args?.cause ? {
|
|
18
|
+
cause: args.cause
|
|
19
|
+
} : undefined);
|
|
20
|
+
if (args) {
|
|
21
|
+
Object.assign(this, args);
|
|
22
|
+
// @effect-diagnostics-next-line floatingEffect:off
|
|
23
|
+
Object.defineProperty(this, plainArgsSymbol, {
|
|
24
|
+
value: args,
|
|
25
|
+
enumerable: false
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
toJSON() {
|
|
30
|
+
return {
|
|
31
|
+
...this[plainArgsSymbol],
|
|
32
|
+
...this
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
return O.BaseEffectError;
|
|
38
|
+
}();
|
|
39
|
+
/**
|
|
40
|
+
* @since 2.0.0
|
|
41
|
+
* @category constructors
|
|
42
|
+
*/
|
|
43
|
+
const TaggedError = tag => {
|
|
44
|
+
const O = {
|
|
45
|
+
BaseEffectError: class extends Error {
|
|
46
|
+
_tag = tag;
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
O.BaseEffectError.prototype.name = tag;
|
|
50
|
+
return O.BaseEffectError;
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
class URLCreationError extends TaggedError('URLCreationError') {
|
|
54
|
+
}
|
|
55
|
+
const syncCreateAssetUrlSafely = (file) => Effect.try_(() => index.getAssetPath(['../../assets', file].join('/').replace('//', '/').replace('/./', '/'))).pipe(Effect.tapError(() => Effect.logWarning(`Failed to create URL for icon "${file}".
|
|
56
|
+
Please provide an absolute URL in your app's 'setAssetPath(...)' configuration!
|
|
57
|
+
Falling back to /assets/`)), Effect.orElseSucceed(() => window.location.origin + '/assets/' + file));
|
|
58
|
+
|
|
59
|
+
exports.TaggedError = TaggedError;
|
|
60
|
+
exports.syncCreateAssetUrlSafely = syncCreateAssetUrlSafely;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var Effect = require('./Effect-
|
|
4
|
-
var
|
|
3
|
+
var Effect = require('./Effect-CNhHt4Xb.js');
|
|
4
|
+
var MutableQueue = require('./MutableQueue-Bk9tBfaK.js');
|
|
5
|
+
var assets = require('./assets-iuJtMMdw.js');
|
|
5
6
|
|
|
6
7
|
/**
|
|
7
8
|
* This module provides types and utility functions to create and work with branded types,
|
|
@@ -158,7 +159,7 @@ const makeCacheState = (map, keys, accesses, updating, hits, misses) => ({
|
|
|
158
159
|
*
|
|
159
160
|
* @internal
|
|
160
161
|
*/
|
|
161
|
-
const initialCacheState = () => makeCacheState(Effect.empty(), makeKeySet(),
|
|
162
|
+
const initialCacheState = () => makeCacheState(Effect.empty(), makeKeySet(), MutableQueue.unbounded(), Effect.make(false), 0, 0);
|
|
162
163
|
/** @internal */
|
|
163
164
|
const CacheSymbolKey = "effect/Cache";
|
|
164
165
|
/** @internal */
|
|
@@ -272,7 +273,7 @@ class CacheImpl {
|
|
|
272
273
|
let deferred = undefined;
|
|
273
274
|
let value = Effect.getOrUndefined(Effect.get(this.cacheState.map, k));
|
|
274
275
|
if (value === undefined) {
|
|
275
|
-
deferred =
|
|
276
|
+
deferred = MutableQueue.unsafeMake(this.fiberId);
|
|
276
277
|
mapKey = makeMapKey(k);
|
|
277
278
|
if (Effect.has(this.cacheState.map, k)) {
|
|
278
279
|
value = Effect.getOrUndefined(Effect.get(this.cacheState.map, k));
|
|
@@ -317,7 +318,7 @@ class CacheImpl {
|
|
|
317
318
|
refresh(key) {
|
|
318
319
|
return Effect.clockWith(clock => Effect.suspend(() => {
|
|
319
320
|
const k = key;
|
|
320
|
-
const deferred =
|
|
321
|
+
const deferred = MutableQueue.unsafeMake(this.fiberId);
|
|
321
322
|
let value = Effect.getOrUndefined(Effect.get(this.cacheState.map, k));
|
|
322
323
|
if (value === undefined) {
|
|
323
324
|
if (Effect.has(this.cacheState.map, k)) {
|
|
@@ -352,11 +353,11 @@ class CacheImpl {
|
|
|
352
353
|
}
|
|
353
354
|
case "Pending":
|
|
354
355
|
{
|
|
355
|
-
return
|
|
356
|
+
return MutableQueue._await(value.deferred);
|
|
356
357
|
}
|
|
357
358
|
case "Refreshing":
|
|
358
359
|
{
|
|
359
|
-
return
|
|
360
|
+
return MutableQueue._await(value.deferred);
|
|
360
361
|
}
|
|
361
362
|
}
|
|
362
363
|
}
|
|
@@ -366,7 +367,7 @@ class CacheImpl {
|
|
|
366
367
|
return Effect.clockWith(clock => Effect.sync(() => {
|
|
367
368
|
const now = clock.unsafeCurrentTimeMillis();
|
|
368
369
|
const k = key;
|
|
369
|
-
const lookupResult =
|
|
370
|
+
const lookupResult = MutableQueue.succeed(value);
|
|
370
371
|
const mapValue = complete(makeMapKey(k), lookupResult, makeEntryStats(now), now + Effect.toMillis(Effect.decode(this.timeToLive(lookupResult))));
|
|
371
372
|
Effect.set(this.cacheState.map, k, mapValue);
|
|
372
373
|
}));
|
|
@@ -429,7 +430,7 @@ class CacheImpl {
|
|
|
429
430
|
if (ignorePending) {
|
|
430
431
|
return Effect.succeed$1(Effect.none());
|
|
431
432
|
}
|
|
432
|
-
return Effect.map(
|
|
433
|
+
return Effect.map(MutableQueue._await(value.deferred), Effect.some);
|
|
433
434
|
}
|
|
434
435
|
case "Refreshing":
|
|
435
436
|
{
|
|
@@ -439,7 +440,7 @@ class CacheImpl {
|
|
|
439
440
|
if (ignorePending) {
|
|
440
441
|
return Effect.succeed$1(Effect.none());
|
|
441
442
|
}
|
|
442
|
-
return Effect.map(
|
|
443
|
+
return Effect.map(MutableQueue._await(value.deferred), Effect.some);
|
|
443
444
|
}
|
|
444
445
|
return Effect.map(value.complete.exit, Effect.some);
|
|
445
446
|
}
|
|
@@ -453,12 +454,12 @@ class CacheImpl {
|
|
|
453
454
|
this.cacheState.misses = this.cacheState.misses + 1;
|
|
454
455
|
}
|
|
455
456
|
trackAccess(key) {
|
|
456
|
-
|
|
457
|
+
MutableQueue.offer(this.cacheState.accesses, key);
|
|
457
458
|
if (Effect.compareAndSet(this.cacheState.updating, false, true)) {
|
|
458
459
|
let loop = true;
|
|
459
460
|
while (loop) {
|
|
460
|
-
const key =
|
|
461
|
-
if (key ===
|
|
461
|
+
const key = MutableQueue.poll(this.cacheState.accesses, MutableQueue.EmptyMutableQueue);
|
|
462
|
+
if (key === MutableQueue.EmptyMutableQueue) {
|
|
462
463
|
loop = false;
|
|
463
464
|
} else {
|
|
464
465
|
this.cacheState.keys.add(key);
|
|
@@ -492,8 +493,8 @@ class CacheImpl {
|
|
|
492
493
|
const stats = makeEntryStats(now);
|
|
493
494
|
const value = complete(makeMapKey(key), exit, stats, now + Effect.toMillis(Effect.decode(this.timeToLive(exit))));
|
|
494
495
|
Effect.set(this.cacheState.map, key, value);
|
|
495
|
-
return Effect.zipRight(
|
|
496
|
-
}), Effect.onInterrupt(() => Effect.zipRight(
|
|
496
|
+
return Effect.zipRight(MutableQueue.done(deferred, exit), exit);
|
|
497
|
+
}), Effect.onInterrupt(() => Effect.zipRight(MutableQueue.interrupt(deferred), Effect.sync(() => {
|
|
497
498
|
Effect.remove(this.cacheState.map, key);
|
|
498
499
|
}))));
|
|
499
500
|
}));
|
|
@@ -520,56 +521,9 @@ const makeWith = options => Effect.map(Effect.all([Effect.context(), Effect.fibe
|
|
|
520
521
|
*/
|
|
521
522
|
const make = make$1;
|
|
522
523
|
|
|
523
|
-
|
|
524
|
-
* Provides a constructor for a Case Class.
|
|
525
|
-
*
|
|
526
|
-
* @since 2.0.0
|
|
527
|
-
* @category constructors
|
|
528
|
-
*/
|
|
529
|
-
const Error$1 = /*#__PURE__*/function () {
|
|
530
|
-
const plainArgsSymbol = /*#__PURE__*/Symbol.for("effect/Data/Error/plainArgs");
|
|
531
|
-
const O = {
|
|
532
|
-
BaseEffectError: class extends Effect.YieldableError {
|
|
533
|
-
constructor(args) {
|
|
534
|
-
super(args?.message, args?.cause ? {
|
|
535
|
-
cause: args.cause
|
|
536
|
-
} : undefined);
|
|
537
|
-
if (args) {
|
|
538
|
-
Object.assign(this, args);
|
|
539
|
-
// @effect-diagnostics-next-line floatingEffect:off
|
|
540
|
-
Object.defineProperty(this, plainArgsSymbol, {
|
|
541
|
-
value: args,
|
|
542
|
-
enumerable: false
|
|
543
|
-
});
|
|
544
|
-
}
|
|
545
|
-
}
|
|
546
|
-
toJSON() {
|
|
547
|
-
return {
|
|
548
|
-
...this[plainArgsSymbol],
|
|
549
|
-
...this
|
|
550
|
-
};
|
|
551
|
-
}
|
|
552
|
-
}
|
|
553
|
-
};
|
|
554
|
-
return O.BaseEffectError;
|
|
555
|
-
}();
|
|
556
|
-
/**
|
|
557
|
-
* @since 2.0.0
|
|
558
|
-
* @category constructors
|
|
559
|
-
*/
|
|
560
|
-
const TaggedError = tag => {
|
|
561
|
-
const O = {
|
|
562
|
-
BaseEffectError: class extends Error$1 {
|
|
563
|
-
_tag = tag;
|
|
564
|
-
}
|
|
565
|
-
};
|
|
566
|
-
O.BaseEffectError.prototype.name = tag;
|
|
567
|
-
return O.BaseEffectError;
|
|
568
|
-
};
|
|
569
|
-
|
|
570
|
-
class FetchError extends TaggedError('FetchError') {
|
|
524
|
+
class FetchError extends assets.TaggedError('FetchError') {
|
|
571
525
|
}
|
|
572
|
-
class NotFoundError extends TaggedError('NotFoundError') {
|
|
526
|
+
class NotFoundError extends assets.TaggedError('NotFoundError') {
|
|
573
527
|
}
|
|
574
528
|
const httpClient = (input, init) => Effect.gen(function* () {
|
|
575
529
|
const response = yield* Effect.tryPromise({
|
|
@@ -581,7 +535,7 @@ const httpClient = (input, init) => Effect.gen(function* () {
|
|
|
581
535
|
}
|
|
582
536
|
return response;
|
|
583
537
|
});
|
|
584
|
-
class ResponseTextError extends TaggedError('ResponseTextError') {
|
|
538
|
+
class ResponseTextError extends assets.TaggedError('ResponseTextError') {
|
|
585
539
|
constructor(error) {
|
|
586
540
|
super(new Error(`Failed to read response text`, { cause: error }));
|
|
587
541
|
}
|
|
@@ -591,14 +545,8 @@ const responseAsText = (res) => Effect.tryPromise({
|
|
|
591
545
|
catch: error => new ResponseTextError(error),
|
|
592
546
|
});
|
|
593
547
|
|
|
594
|
-
class URLCreationError extends TaggedError('URLCreationError') {
|
|
595
|
-
}
|
|
596
|
-
const createAssetUrlSafely = (file) => Effect.try_(() => index.getAssetPath([file].join('/').replace('//', '/'))).pipe(Effect.tapError(() => Effect.logWarning(`Failed to create URL for icon "${file}".
|
|
597
|
-
Please provide an absolute URL in your app's 'setAssetPath(...)' configuration!
|
|
598
|
-
Falling back to /assets/`)), Effect.orElseSucceed(() => window.location.origin + '/assets/' + file));
|
|
599
|
-
|
|
600
548
|
const SVGString = refined(isValidSVG, () => error('SVG data is malformed'));
|
|
601
|
-
class BrandValidationError extends TaggedError('BrandValidationError') {
|
|
549
|
+
class BrandValidationError extends assets.TaggedError('BrandValidationError') {
|
|
602
550
|
constructor(error, type) {
|
|
603
551
|
super(new Error(`Brand validation failed for type ${type}.`, { cause: error }));
|
|
604
552
|
}
|
|
@@ -627,8 +575,8 @@ const createIconCache = () => make({
|
|
|
627
575
|
timeToLive: Effect.infinity,
|
|
628
576
|
lookup: (key) => Effect.gen(function* () {
|
|
629
577
|
const name = key;
|
|
630
|
-
const icon =
|
|
631
|
-
const assetPath = yield*
|
|
578
|
+
const icon = `/icons/${name}.svg`;
|
|
579
|
+
const assetPath = yield* assets.syncCreateAssetUrlSafely(icon);
|
|
632
580
|
const res = yield* httpClient(assetPath);
|
|
633
581
|
const responseString = yield* responseAsText(res);
|
|
634
582
|
return yield* createValidSVGString(responseString);
|
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var icons = require('./icons-
|
|
4
|
-
var Effect = require('./Effect-
|
|
3
|
+
var icons = require('./icons-CAiJpiUC.js');
|
|
4
|
+
var Effect = require('./Effect-CNhHt4Xb.js');
|
|
5
|
+
require('./MutableQueue-Bk9tBfaK.js');
|
|
6
|
+
require('./assets-iuJtMMdw.js');
|
|
5
7
|
require('./index-9ZJx0550.js');
|
|
6
8
|
|
|
7
9
|
const variants = ['primary', 'secondary', 'tertiary'];
|
|
@@ -4,9 +4,10 @@ var index = require('./index-9ZJx0550.js');
|
|
|
4
4
|
var index$1 = require('./index-CVw4GUo6.js');
|
|
5
5
|
var component = require('./component-CRc6eHcV.js');
|
|
6
6
|
var elementActivationController = require('./element-activation-controller-DC_6T0Rt.js');
|
|
7
|
-
var ariaValidationController = require('./aria-validation-controller-
|
|
7
|
+
var ariaValidationController = require('./aria-validation-controller-B3hMkau3.js');
|
|
8
8
|
require('./_commonjsHelpers-CFO10eej.js');
|
|
9
|
-
require('./Effect-
|
|
9
|
+
require('./Effect-CNhHt4Xb.js');
|
|
10
|
+
require('./MutableQueue-Bk9tBfaK.js');
|
|
10
11
|
|
|
11
12
|
const lmvzButtonCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } @layer lmvz-ds.reset { h1, h2, h3, h4, h5, h6 { margin: 0; } } :host { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-selected, #f1f9fe); outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: var(--lmvz-semantic-border-width-default, 1px); --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #d4d4d4); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-padding-block: var(--lmvz-component-input-sm-padding-y, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-gap: var(--lmvz-component-input-sm-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-lg-padding-x, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-lg-padding-y, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-lg-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); } display: contents; } ::slotted(*) { --lmvz-component-color: var(--lmvz-button-color); } `;
|
|
12
13
|
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var index = require('./index-9ZJx0550.js');
|
|
4
|
+
var Effect = require('./Effect-CNhHt4Xb.js');
|
|
5
|
+
var assets = require('./assets-iuJtMMdw.js');
|
|
4
6
|
|
|
5
7
|
const lmvzCardCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } @layer lmvz-ds.reset { h1, h2, h3, h4, h5, h6 { margin: 0; } } .sc-lmvz-card-h { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-selected, #f1f9fe); outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: var(--lmvz-semantic-border-width-default, 1px); --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #d4d4d4); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-padding-block: var(--lmvz-component-input-sm-padding-y, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-gap: var(--lmvz-component-input-sm-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-lg-padding-x, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-lg-padding-y, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-lg-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); } display: flex; min-width: var(--lmvz-other-component-card-minwidth, 20.4375rem); max-width: var(--lmvz-other-component-card-maxwidth, 21.6875rem); flex-direction: column; align-items: flex-start; border-radius: var(--lmvz-semantic-border-radius-lg, 14px); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); background: var(--lmvz-semantic-color-surface-primary, #ffffff); } *.sc-lmvz-card { color: var(--lmvz-semantic-color-on-surface-primary, #000000); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } .top.sc-lmvz-card { display: flex; padding: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); flex-direction: column; justify-content: center; align-items: center; align-self: stretch; } .bottom.sc-lmvz-card { display: flex; min-width: 150px; padding: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)); flex-direction: column; align-items: flex-start; align-self: stretch; } .title.sc-lmvz-card { margin: 0; display: flex; justify-content: center; align-items: center; align-self: stretch; padding-bottom: var(--lmvz-global-s4, 4px); overflow-wrap: break-word; font: var(--lmvz-typography-heading-2xl, 500 clamp(2rem, 1.94rem + 0.26vw, 2.25rem) / 1.2 Router); } .description.sc-lmvz-card { display: flex; margin: 0; padding-bottom: var(--lmvz-component-body-sm-padding-bottom, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-items: flex-start; align-self: stretch; white-space: pre-line; font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } .image-wrapper.sc-lmvz-card { aspect-ratio: 4 / 3; width: 100%; background-size: cover; background-position: center; flex: 1 0 0; align-self: stretch; border-radius: var(--lmvz-semantic-border-radius-md, 6px); } .actions.sc-lmvz-card { margin-top: var(--lmvz-component-form-wrapper-gap-y, clamp(1.13rem, 0.97rem + 0.65vw, 1.75rem)); display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-self: stretch; } button.primary.sc-lmvz-card, lmvz-button.primary.sc-lmvz-card { display: flex; justify-content: center; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); flex: 1 0 0; }`;
|
|
6
8
|
|
|
@@ -14,6 +16,9 @@ const LmvzCard = class {
|
|
|
14
16
|
description;
|
|
15
17
|
primaryActionLabel = '';
|
|
16
18
|
primaryAction;
|
|
19
|
+
get fallbackImage() {
|
|
20
|
+
return Effect.runSync(assets.syncCreateAssetUrlSafely('card-placeholder.svg'));
|
|
21
|
+
}
|
|
17
22
|
_onPrimaryClick() {
|
|
18
23
|
this.primaryAction.emit();
|
|
19
24
|
}
|
|
@@ -22,9 +27,9 @@ const LmvzCard = class {
|
|
|
22
27
|
}
|
|
23
28
|
render() {
|
|
24
29
|
const imgStyle = {
|
|
25
|
-
backgroundImage: `url(${this.imageUrl ??
|
|
30
|
+
backgroundImage: `url(${this.imageUrl ?? this.fallbackImage})`,
|
|
26
31
|
};
|
|
27
|
-
return (index.h(index.Host, { key: '
|
|
32
|
+
return (index.h(index.Host, { key: '1438354a53604954320d01652aa1d84f8712e875', role: "article" }, index.h("div", { key: 'dcffae2c48ebf8f8769cf07c2e78806f12df6888', class: "top" }, index.h("div", { key: 'e41e1d0aafbfc5879b86022e91958ef3373b48b2', class: "image-wrapper", style: imgStyle }, index.h("div", { key: 'f6a1fc9706012f39aca9dd0b995290e6042e3407', class: "chip-slot" }, index.h("slot", { key: '4e014519c147705cc30b3268d652ea6c76c749ec', name: "chip" })))), index.h("div", { key: 'e7baf78b660e9a97edd0b6a0aa1bdb1afa593fed', class: "bottom" }, index.h("header", { key: 'a8dad9f91df60f535725328a4901833d47652678' }, index.h("h2", { key: '1cdbca46469750187856a46fa155128f1f8a677f', class: "title" }, this.cardTitle)), index.h("p", { key: 'f33c2c0af86d7be31fcbd676833b27c7d06e2dd9', class: "description" }, this.description), index.h("div", { key: 'a12595d514167fb957aac71fe3d144810b442f9d', class: "actions" }, index.h("button", { key: '9730cedbf83599c09eedaaae43331147691486d6', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), index.h("button", { key: '48e9c511c406beb75334452769beade3dec9a3f5', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, index.h("span", { key: '81cc1af42a15dddb9dbd4f373a6a047c2e2cd563', class: "icon-placeholder" }, "..."))))));
|
|
28
33
|
}
|
|
29
34
|
static get assetsDirs() { return ["../../assets"]; }
|
|
30
35
|
};
|
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-9ZJx0550.js');
|
|
4
4
|
var component = require('./component-CRc6eHcV.js');
|
|
5
|
-
var ariaValidationController = require('./aria-validation-controller-
|
|
6
|
-
require('./Effect-
|
|
5
|
+
var ariaValidationController = require('./aria-validation-controller-B3hMkau3.js');
|
|
6
|
+
require('./Effect-CNhHt4Xb.js');
|
|
7
|
+
require('./MutableQueue-Bk9tBfaK.js');
|
|
7
8
|
|
|
8
9
|
class ListKeyboardNavigationController {
|
|
9
10
|
host;
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var index = require('./index-9ZJx0550.js');
|
|
4
|
-
var Effect = require('./Effect-
|
|
5
|
-
var ariaValidationController = require('./aria-validation-controller-
|
|
6
|
-
var icons = require('./icons-
|
|
4
|
+
var Effect = require('./Effect-CNhHt4Xb.js');
|
|
5
|
+
var ariaValidationController = require('./aria-validation-controller-B3hMkau3.js');
|
|
6
|
+
var icons = require('./icons-CAiJpiUC.js');
|
|
7
|
+
require('./MutableQueue-Bk9tBfaK.js');
|
|
8
|
+
require('./assets-iuJtMMdw.js');
|
|
7
9
|
|
|
8
10
|
const lmvzIconCss = () => `.sc-lmvz-icon-h{--lmvz-icon-color:var(--lmvz-component-color, var(--lmvz-semantic-color-on-surface-input-primary, #000000));display:inline-block;line-height:0;svg{display:block}svg>path{stroke:var(--lmvz-icon-color);fill:none}}[size='xs'].sc-lmvz-icon-h{svg{width:var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));height:var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))}}[size='sm'].sc-lmvz-icon-h{svg{width:var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.81rem + 0.26vw, 1.13rem));height:var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.81rem + 0.26vw, 1.13rem))}}[size='md'].sc-lmvz-icon-h{svg{width:var(--lmvz-component-icon-size-md, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));height:var(--lmvz-component-icon-size-md, clamp(1rem, 0.88rem + 0.52vw, 1.5rem))}}[size='lg'].sc-lmvz-icon-h{svg{width:var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.38rem + 0.52vw, 2rem));height:var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.38rem + 0.52vw, 2rem))}}[size='inherit'].sc-lmvz-icon-h{svg{width:inherit;height:inherit}}[weight='light'].sc-lmvz-icon-h{svg>path{stroke-width:1}}[weight='medium'].sc-lmvz-icon-h{svg>path{stroke-width:1.5}}[weight='bold'].sc-lmvz-icon-h{svg>path{stroke-width:2}}[weight='filled'].sc-lmvz-icon-h{svg>path{stroke-width:2;fill:var(--lmvz-icon-color)}}`;
|
|
9
11
|
|
|
@@ -3,9 +3,10 @@
|
|
|
3
3
|
var index = require('./index-9ZJx0550.js');
|
|
4
4
|
var index$1 = require('./index-CVw4GUo6.js');
|
|
5
5
|
var component = require('./component-CRc6eHcV.js');
|
|
6
|
-
var ariaValidationController = require('./aria-validation-controller-
|
|
6
|
+
var ariaValidationController = require('./aria-validation-controller-B3hMkau3.js');
|
|
7
7
|
require('./_commonjsHelpers-CFO10eej.js');
|
|
8
|
-
require('./Effect-
|
|
8
|
+
require('./Effect-CNhHt4Xb.js');
|
|
9
|
+
require('./MutableQueue-Bk9tBfaK.js');
|
|
9
10
|
|
|
10
11
|
const lmvzInputCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } .sc-lmvz-input-h { display: block; font-family: var(--lmvz-global-font-family-default, Router); --input-radius: var(--lmvz-component-input-radius-default, 999px); --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7); --input-border-color-focus: var(--lmvz-semantic-color-status-on-selected, #0e7ab4); --input-border-width: var(--lmvz-semantic-border-width-default, 1px); --input-height: 48px; --input-padding-x: 16px; --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a); --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a); --error-text-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); --label-floating-scale: 0.85; --label-minimized-top: -6px; --label-minimized-bg: var(--input-bg); --label-minimized-padding-x: 4px; --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); } .input-container.sc-lmvz-input { display: flex; flex-direction: column; position: relative; width: 100%; } .input-wrapper.sc-lmvz-input { background-color: var(--input-bg); border: var(--input-border-width) solid var(--input-border-color); border-radius: var(--input-radius); display: flex; align-items: center; height: var(--input-height); padding: 0 var(--input-padding-x); position: relative; transition: border-color 0.2s ease; gap: 8px; } [disabled].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { opacity: var(--input-disabled-opacity); cursor: not-allowed; pointer-events: none; } .input-container.sc-lmvz-input:focus-within .input-wrapper.sc-lmvz-input { border-color: var(--input-border-color-focus); outline: 2px solid var(--input-border-color-focus); outline-offset: 2px; } .input-container.sc-lmvz-input:has(input:focus-visible) .input-wrapper.sc-lmvz-input { box-shadow: 0 0 0 3px rgb(0 86 214 / 20%); } [error].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { border-color: var(--error-text-color); } [error].sc-lmvz-input-h:focus-within .input-wrapper.sc-lmvz-input { border-color: var(--error-text-color); outline-color: var(--error-text-color); } .sc-lmvz-input-h:not([disabled]) .input-wrapper.sc-lmvz-input:hover { border-color: var(--input-border-color-hover); } .label-input-group.sc-lmvz-input { position: relative; flex-grow: 1; display: flex; align-items: center; height: 100%; } label.sc-lmvz-input { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--label-color); font-size: 14px; font-family: Router, sans-serif; font-weight: 400; pointer-events: none; transition: all 0.2s ease-out; background-color: transparent; padding: 0; margin: 0; line-height: normal; white-space: nowrap; } label.floating.sc-lmvz-input { top: 0; transform: translateY(-50%) scale(0.85); transform-origin: left top; background-color: var(--label-minimized-bg); padding: 0 var(--label-minimized-padding-x); left: -2px; color: var(--input-text-color); font-weight: 500; } .required-indicator.sc-lmvz-input { color: var(--error-text-color); margin-left: 2px; } input.sc-lmvz-input { border: none; background: transparent; width: 100%; height: 100%; color: var(--input-text-color); font-family: inherit; font-size: 14px; outline: none; padding: 0; margin: 0; font-weight: 400; } input.sc-lmvz-input::placeholder { color: var(--label-color); } .helper-text.sc-lmvz-input { padding-top: 8px; padding-left: 12px; font-size: 12px; color: var(--helper-text-color); font-family: Router, sans-serif; font-weight: 500; } .error-message.sc-lmvz-input { padding-top: 8px; padding-left: 12px; font-size: 12px; color: var(--error-text-color); font-family: Router, sans-serif; font-weight: 500; } .sc-lmvz-input-s > lmvz-button { --lmvz-button-padding: 4px; }`;
|
|
11
12
|
|
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-9ZJx0550.js');
|
|
4
4
|
var elementActivationController = require('./element-activation-controller-DC_6T0Rt.js');
|
|
5
|
-
var ariaValidationController = require('./aria-validation-controller-
|
|
6
|
-
require('./Effect-
|
|
5
|
+
var ariaValidationController = require('./aria-validation-controller-B3hMkau3.js');
|
|
6
|
+
require('./Effect-CNhHt4Xb.js');
|
|
7
|
+
require('./MutableQueue-Bk9tBfaK.js');
|
|
7
8
|
|
|
8
9
|
const lmvzMenuitemCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } .sc-lmvz-menuitem-h { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-lg, 14px); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); padding: var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); cursor: pointer; --lmvz-menuitem-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); background: var(--lmvz-menuitem-background); color: var(--lmvz-menuitem-color); } .sc-lmvz-menuitem-h:hover { --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } .sc-lmvz-menuitem-h:active { --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } .sc-lmvz-menuitem-h:focus-visible { z-index: 1; } [aria-expanded='true'].sc-lmvz-menuitem-h { --lmvz-menuitem-background: var(--lmvz-semantic-color-status-selected, #f1f9fe); --lmvz-menuitem-color: var(--lmvz-semantic-color-status-on-selected, #0e7ab4); }`;
|
|
9
10
|
|
|
@@ -1,10 +1,15 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { h, Host } from "@stencil/core";
|
|
2
|
+
import { runSync } from "effect/Effect";
|
|
3
|
+
import { syncCreateAssetUrlSafely } from "../../utils/assets";
|
|
2
4
|
export class LmvzCard {
|
|
3
5
|
cardTitle;
|
|
4
6
|
imageUrl;
|
|
5
7
|
description;
|
|
6
8
|
primaryActionLabel = '';
|
|
7
9
|
primaryAction;
|
|
10
|
+
get fallbackImage() {
|
|
11
|
+
return runSync(syncCreateAssetUrlSafely('card-placeholder.svg'));
|
|
12
|
+
}
|
|
8
13
|
_onPrimaryClick() {
|
|
9
14
|
this.primaryAction.emit();
|
|
10
15
|
}
|
|
@@ -13,9 +18,9 @@ export class LmvzCard {
|
|
|
13
18
|
}
|
|
14
19
|
render() {
|
|
15
20
|
const imgStyle = {
|
|
16
|
-
backgroundImage: `url(${this.imageUrl ??
|
|
21
|
+
backgroundImage: `url(${this.imageUrl ?? this.fallbackImage})`,
|
|
17
22
|
};
|
|
18
|
-
return (h(Host, { key: '
|
|
23
|
+
return (h(Host, { key: '1438354a53604954320d01652aa1d84f8712e875', role: "article" }, h("div", { key: 'dcffae2c48ebf8f8769cf07c2e78806f12df6888', class: "top" }, h("div", { key: 'e41e1d0aafbfc5879b86022e91958ef3373b48b2', class: "image-wrapper", style: imgStyle }, h("div", { key: 'f6a1fc9706012f39aca9dd0b995290e6042e3407', class: "chip-slot" }, h("slot", { key: '4e014519c147705cc30b3268d652ea6c76c749ec', name: "chip" })))), h("div", { key: 'e7baf78b660e9a97edd0b6a0aa1bdb1afa593fed', class: "bottom" }, h("header", { key: 'a8dad9f91df60f535725328a4901833d47652678' }, h("h2", { key: '1cdbca46469750187856a46fa155128f1f8a677f', class: "title" }, this.cardTitle)), h("p", { key: 'f33c2c0af86d7be31fcbd676833b27c7d06e2dd9', class: "description" }, this.description), h("div", { key: 'a12595d514167fb957aac71fe3d144810b442f9d', class: "actions" }, h("button", { key: '9730cedbf83599c09eedaaae43331147691486d6', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), h("button", { key: '48e9c511c406beb75334452769beade3dec9a3f5', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, h("span", { key: '81cc1af42a15dddb9dbd4f373a6a047c2e2cd563', class: "icon-placeholder" }, "..."))))));
|
|
19
24
|
}
|
|
20
25
|
static get is() { return "lmvz-card"; }
|
|
21
26
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Cache, Duration, Effect } from "effect";
|
|
2
|
+
import { syncCreateAssetUrlSafely } from "../../utils/assets";
|
|
2
3
|
import { httpClient, responseAsText } from "../../utils/http";
|
|
3
|
-
import { createAssetUrlSafely } from "../../utils/url";
|
|
4
4
|
import { createValidSVGString, SVGString } from "../../utils/validation/svg";
|
|
5
5
|
export const emptyDefaultSvg = () => SVGString(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"></svg>`);
|
|
6
6
|
const createIconCache = () => Cache.make({
|
|
@@ -8,8 +8,8 @@ const createIconCache = () => Cache.make({
|
|
|
8
8
|
timeToLive: Duration.infinity,
|
|
9
9
|
lookup: (key) => Effect.gen(function* () {
|
|
10
10
|
const name = key;
|
|
11
|
-
const icon =
|
|
12
|
-
const assetPath = yield*
|
|
11
|
+
const icon = `/icons/${name}.svg`;
|
|
12
|
+
const assetPath = yield* syncCreateAssetUrlSafely(icon);
|
|
13
13
|
const res = yield* httpClient(assetPath);
|
|
14
14
|
const responseString = yield* responseAsText(res);
|
|
15
15
|
return yield* createValidSVGString(responseString);
|
|
@@ -2,6 +2,6 @@ import { getAssetPath } from "@stencil/core";
|
|
|
2
2
|
import { Data, Effect } from "effect";
|
|
3
3
|
export class URLCreationError extends Data.TaggedError('URLCreationError') {
|
|
4
4
|
}
|
|
5
|
-
export const
|
|
5
|
+
export const syncCreateAssetUrlSafely = (file) => Effect.try(() => getAssetPath(['../../assets', file].join('/').replace('//', '/').replace('/./', '/'))).pipe(Effect.tapError(() => Effect.logWarning(`Failed to create URL for icon "${file}".
|
|
6
6
|
Please provide an absolute URL in your app's 'setAssetPath(...)' configuration!
|
|
7
7
|
Falling back to /assets/`)), Effect.orElseSucceed(() => window.location.origin + '/assets/' + file));
|
package/dist/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-BaPwpeMs.js";export{c as clearIconCache}from"./p-
|
|
1
|
+
export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-BaPwpeMs.js";export{c as clearIconCache}from"./p-xpxyPpHZ.js";import{r as e}from"./p-CdofjRtQ.js";export{LmvzAction,defineCustomElement as defineCustomElementLmvzAction}from"./lmvz-action.js";export{LmvzButton,defineCustomElement as defineCustomElementLmvzButton}from"./lmvz-button.js";export{LmvzCard,defineCustomElement as defineCustomElementLmvzCard}from"./lmvz-card.js";export{LmvzChip,defineCustomElement as defineCustomElementLmvzChip}from"./lmvz-chip.js";export{LmvzHeader,defineCustomElement as defineCustomElementLmvzHeader}from"./lmvz-header.js";export{LmvzIcon,defineCustomElement as defineCustomElementLmvzIcon}from"./lmvz-icon.js";export{LmvzInput,defineCustomElement as defineCustomElementLmvzInput}from"./lmvz-input.js";export{LmvzMenuitem,defineCustomElement as defineCustomElementLmvzMenuitem}from"./lmvz-menuitem.js";const t=["primary","secondary","tertiary"],o=["small","default","large"],m=["xs","sm","md","lg"],n=[...m,"xl"],l=["text","email","password","tel","url","search","number"],i=[...m,"inherit"],d=["thin","medium","bold","filled"],u=["Logo","actions","adduser","alert","apple","arrow-down","arrow-left","arrow-right","arrow-up","book","bookmark","checkmark","chevron-down","chevron-left","chevron-right","chevron-up","close-l","close-sm","cog","computer","dashboard","delete","download","edit","external","facebook","favorite","filter","group","hide","home","info","instagram","letter","linkedin","logout","map","minus","navigation","plus","qr-scan","question","reader","reset","school","search","send","settings","share","shopping-cart","show","snapchat","sort","speech-bubble","star","student","upload","user","warn-circle","warn-triangle","whatsapp","world","x","youtube"];function p(t){return e(t).catch((e=>{console.error("Unhandled error in Effect:",e)}))}export{u as iconNames,i as iconSizes,d as iconWeights,l as inputTypes,p as run,o as scaleValues,m as sizes,n as textSizes,t as variants}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,c as o,h as e,d as r,t as n}from"./p-BaPwpeMs.js";import{c as a}from"./p-DMLRPGid.js";import{i as l,f as m}from"./p-B3JVFwO1.js";import{E as i}from"./p-CN0JX9-m.js";import{R as s,A as d}from"./p-
|
|
1
|
+
import{p as t,c as o,h as e,d as r,t as n}from"./p-BaPwpeMs.js";import{c as a}from"./p-DMLRPGid.js";import{i as l,f as m}from"./p-B3JVFwO1.js";import{E as i}from"./p-CN0JX9-m.js";import{R as s,A as d}from"./p-3I3wZmp8.js";const c=t(class extends s{get el(){return this}inheritedAttributes={};formEl=null;formButtonEl=null;lmvzActivation;get ti(){return 0}scale="default";variant="secondary";disabled=!1;type="button";form;constructor(t){super(!1),!1!==t&&this.__registerHost(),this.__attachShadow(),this.lmvzActivation=o(this,"lmvzActivation"),this.addController(new d(this)),this.addController(new i(this,{localHandler:this.handleClick.bind(this),keys:["Enter"]}))}connectedCallback(){this.inheritedAttributes=l(this.el)}renderHiddenButton(){const t=this.formEl=m(this.form,this.el);if(!t)return;const{formButtonEl:o}=this;if(null!==o&&t.contains(o))return;const e=this.formButtonEl=document.createElement("button");e.type="submit",e.style.display="none",e.disabled=this.disabled,t.appendChild(e)}submitForm(t){this.formEl&&this.formButtonEl&&(t.preventDefault(),this.formButtonEl.click())}handleClick=t=>{"submit"===this.type&&this.submitForm(t)};render(){return this.renderHiddenButton(),e(r,{key:"1c96281344dd604e2e4c919ea72907a9e934e5c6","aria-disabled":this.disabled?"true":null},e("button",{key:"16728ce6fee7d121e7120aa993031777f6d8570e",disabled:this.disabled,class:a(this.variant,{[this.scale??""]:!!this.scale,disabled:this.disabled}),...this.inheritedAttributes},e("slot",{key:"e1b0d95953bdbd42885eecdeef8b457070e7e247"})))}static get delegatesFocus(){return!0}static get style(){return" @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } @layer lmvz-ds.reset { h1, h2, h3, h4, h5, h6 { margin: 0; } } :host { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-selected, #f1f9fe); outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: var(--lmvz-semantic-border-width-default, 1px); --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #d4d4d4); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-padding-block: var(--lmvz-component-input-sm-padding-y, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-gap: var(--lmvz-component-input-sm-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-lg-padding-x, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-lg-padding-y, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-lg-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); } display: contents; } ::slotted(*) { --lmvz-component-color: var(--lmvz-button-color); } "}},[785,"lmvz-button",{ti:[2562,"tabindex"],scale:[513],variant:[513],disabled:[516],type:[1],form:[1]}]),v=c,u=function(){"undefined"!=typeof customElements&&["lmvz-button"].forEach((t=>{"lmvz-button"===t&&(customElements.get(n(t))||customElements.define(n(t),c))}))};export{v as LmvzButton,u as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as r,c as t,
|
|
1
|
+
import{p as e,H as r,c as t,h as a,d as o,t as m}from"./p-BaPwpeMs.js";import{a as n}from"./p-CdofjRtQ.js";import{s as l}from"./p-BQTNPxka.js";const i=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.primaryAction=t(this,"primaryAction")}cardTitle;imageUrl;description;primaryActionLabel="";primaryAction;get fallbackImage(){return n(l("card-placeholder.svg"))}_onPrimaryClick(){this.primaryAction.emit()}_onOverflowClick(e){console.log(e)}render(){return a(o,{key:"1438354a53604954320d01652aa1d84f8712e875",role:"article"},a("div",{key:"dcffae2c48ebf8f8769cf07c2e78806f12df6888",class:"top"},a("div",{key:"e41e1d0aafbfc5879b86022e91958ef3373b48b2",class:"image-wrapper",style:{backgroundImage:`url(${this.imageUrl??this.fallbackImage})`}},a("div",{key:"f6a1fc9706012f39aca9dd0b995290e6042e3407",class:"chip-slot"},a("slot",{key:"4e014519c147705cc30b3268d652ea6c76c749ec",name:"chip"})))),a("div",{key:"e7baf78b660e9a97edd0b6a0aa1bdb1afa593fed",class:"bottom"},a("header",{key:"a8dad9f91df60f535725328a4901833d47652678"},a("h2",{key:"1cdbca46469750187856a46fa155128f1f8a677f",class:"title"},this.cardTitle)),a("p",{key:"f33c2c0af86d7be31fcbd676833b27c7d06e2dd9",class:"description"},this.description),a("div",{key:"a12595d514167fb957aac71fe3d144810b442f9d",class:"actions"},a("button",{key:"9730cedbf83599c09eedaaae43331147691486d6",class:"primary",onClick:this._onPrimaryClick.bind(this),"data-testid":"primary"},this.primaryActionLabel),a("button",{key:"48e9c511c406beb75334452769beade3dec9a3f5",class:"tertiary","aria-label":"More actions",onClick:this._onOverflowClick},a("span",{key:"81cc1af42a15dddb9dbd4f373a6a047c2e2cd563",class:"icon-placeholder"},"...")))))}static get assetsDirs(){return["../../assets"]}static get style(){return"@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } @layer lmvz-ds.reset { h1, h2, h3, h4, h5, h6 { margin: 0; } } .sc-lmvz-card-h { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-selected, #f1f9fe); outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: var(--lmvz-semantic-border-width-default, 1px); --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #d4d4d4); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-padding-block: var(--lmvz-component-input-sm-padding-y, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-gap: var(--lmvz-component-input-sm-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-lg-padding-x, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-lg-padding-y, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-lg-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); } display: flex; min-width: var(--lmvz-other-component-card-minwidth, 20.4375rem); max-width: var(--lmvz-other-component-card-maxwidth, 21.6875rem); flex-direction: column; align-items: flex-start; border-radius: var(--lmvz-semantic-border-radius-lg, 14px); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); background: var(--lmvz-semantic-color-surface-primary, #ffffff); } *.sc-lmvz-card { color: var(--lmvz-semantic-color-on-surface-primary, #000000); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } .top.sc-lmvz-card { display: flex; padding: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); flex-direction: column; justify-content: center; align-items: center; align-self: stretch; } .bottom.sc-lmvz-card { display: flex; min-width: 150px; padding: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)); flex-direction: column; align-items: flex-start; align-self: stretch; } .title.sc-lmvz-card { margin: 0; display: flex; justify-content: center; align-items: center; align-self: stretch; padding-bottom: var(--lmvz-global-s4, 4px); overflow-wrap: break-word; font: var(--lmvz-typography-heading-2xl, 500 clamp(2rem, 1.94rem + 0.26vw, 2.25rem) / 1.2 Router); } .description.sc-lmvz-card { display: flex; margin: 0; padding-bottom: var(--lmvz-component-body-sm-padding-bottom, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-items: flex-start; align-self: stretch; white-space: pre-line; font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } .image-wrapper.sc-lmvz-card { aspect-ratio: 4 / 3; width: 100%; background-size: cover; background-position: center; flex: 1 0 0; align-self: stretch; border-radius: var(--lmvz-semantic-border-radius-md, 6px); } .actions.sc-lmvz-card { margin-top: var(--lmvz-component-form-wrapper-gap-y, clamp(1.13rem, 0.97rem + 0.65vw, 1.75rem)); display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-self: stretch; } button.primary.sc-lmvz-card, lmvz-button.primary.sc-lmvz-card { display: flex; justify-content: center; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); flex: 1 0 0; }"}},[774,"lmvz-card",{cardTitle:[1,"card-title"],imageUrl:[1,"image-url"],description:[1],primaryActionLabel:[1,"primary-action-label"]}]),c=i,d=function(){"undefined"!=typeof customElements&&["lmvz-card"].forEach((e=>{"lmvz-card"===e&&(customElements.get(m(e))||customElements.define(m(e),i))}))};export{c as LmvzCard,d as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,h as a,d as t,t as r}from"./p-BaPwpeMs.js";import{g as n,c as s}from"./p-B3JVFwO1.js";import{R as i,A as l}from"./p-
|
|
1
|
+
import{p as e,h as a,d as t,t as r}from"./p-BaPwpeMs.js";import{g as n,c as s}from"./p-B3JVFwO1.js";import{R as i,A as l}from"./p-3I3wZmp8.js";import{d as o}from"./p-xpxyPpHZ.js";class c{host;elements=[];constructor(e){this.host=e}hostDidRender(){this.host.el.addEventListener("keydown",this.handleKeydown)}updateElements(e){this.elements=e}handleKeydown=e=>{const{key:a}=e;if(!["ArrowDown","ArrowRight","ArrowUp","ArrowLeft"].includes(a))return;const t=n(document),r=this.getNextFocusableElement(t,["ArrowDown","ArrowRight"].includes(a)?"down":"up");r&&(e.preventDefault(),r.focus?.())};getNextFocusableElement(e,a){const{elements:t}=this,r=t.indexOf(e);if(-1===r)return null;let n=null;if("down"===a?n=(r+1)%t.length:"up"===a&&(n=(r-1+t.length)%t.length),null==n)return null;const i=t[n];return s(i)?i:this.getNextFocusableElement(i,a)}}const d=e(class extends i{get el(){return this}primarySlot;secondarySlot;secondaryNav;keyboardNavigationController=new c(this);get primaryMenuitems(){return this.primarySlot.assignedElements({flatten:!1})}get secondaryMenuitems(){return this.secondarySlot.assignedElements({flatten:!0})}get role(){return"banner"}lmvzActiveNav;get secondarySlotName(){return"connect-nav-"+this.lmvzActiveNav}constructor(e){super(!1),!1!==e&&this.__registerHost(),this.__attachShadow(),this.addController(new l(this,{reValidateOnPropChanges:!0})),this.addController(this.keyboardNavigationController)}handleActiveNavChange(){this.updateElementsActive()}componentDidLoad(){this.primarySlot.addEventListener("slotchange",this.handlePrimaryNavChange.bind(this)),this.handlePrimaryNavChange(),this.secondarySlot.addEventListener("slotchange",this.handleSecondaryNavChange.bind(this))}handlePrimaryNavChange(){const e=this.primaryMenuitems;e.length?(e.forEach((e=>{e.setAttribute("aria-haspopup","true"),e.setAttribute("aria-controls","nav-secondary")})),this.updateElementsActive()):console.warn("Primary slot has no assigned elements. Please add navigation items to the primary slot.")}handleSecondaryNavChange(){this.secondaryMenuitems.length&&this.keyboardNavigationController.updateElements([...this.primaryMenuitems,...this.secondaryMenuitems])}updateElementsActive(){let e;this.primaryMenuitems.forEach((a=>{const t=a.id===this.lmvzActiveNav;t&&(e=a.textContent||a.id),a.setAttribute("aria-expanded",t?"true":"false")})),this.secondaryNav.setAttribute("aria-label","Untermenü für "+e)}delegateFocus(){const e=this.primaryMenuitems[0];e&&e.focus()}render(){return a(t,{key:"58934683ff442801eb34f025ac809631f93a27e8",onFocus:this.delegateFocus.bind(this)},a("div",{key:"35d3eadfabb70f83b313f946c8d31f9c223e8344",class:"brand"},a("slot",{key:"5ce98314d980d63e1c87f508d96119aca2e702a9",name:"brand"},a("lmvz-icon",{key:"b24e61a9071d81948d506a8c545e012d3f0e5dd2",id:"fallback-logo-lmvz",icon:"Logo",size:"inherit","aria-label":"Lehrmittelverlag Zürich"}))),a("nav",{key:"1d5cc9010ef90e6cebc8a7b054db595f35f9e040","aria-label":"Hauptnavigation"},a("div",{key:"488a1b1544242562b57d76169f1988d84c611de4",role:"menubar",class:"primary-menubar"},a("slot",{key:"59c6dd1442290931ed9a55f7bacc65ea4bb9ff6d",name:"nav-primary",ref:e=>this.primarySlot=e}),a("separator",{key:"2729f0e8b115614c50c4a16b6684a3bdb21856b8"}),a("div",{key:"6b5bed5951bad9173fefdc78039e71c4ccc120b2",role:"menu",id:"nav-secondary",class:"secondary-menubar",hidden:!this.lmvzActiveNav,ref:e=>this.secondaryNav=e},a("slot",{key:"02f5a13e8851372c1698e3f786a8757a0a09c32f",name:this.secondarySlotName,ref:e=>this.secondarySlot=e})))),a("div",{key:"53aafe8139bcea27d3039f64a48974cdb5aac5f9",class:"actions"},a("slot",{key:"f12ee19831073253e6ba8e251ba31ec403c21035",name:"actions"})))}static get watchers(){return{lmvzActiveNav:[{handleActiveNavChange:0}]}}static get style(){return":host{display:flex;width:100vw;flex-direction:row;align-items:center;box-sizing:border-box;background-color:var(--lmvz-semantic-color-surface-primary, #ffffff);--lmvz-header-x-spacing-level-1:var(--lmvz-dimension-8-28, clamp(0.5rem, 0.2rem + 1.29vw, 1.75rem));--lmvz-header-x-spacing-level-2:var(--lmvz-component-buttongroup-wrapper-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));padding:var(--lmvz-dimension-8-16, clamp(0.5rem, 0.38rem + 0.52vw, 1rem)) var(--lmvz-header-x-spacing-level-1);gap:var(--lmvz-header-x-spacing-level-1);.brand{display:inline-flex;justify-content:center;align-items:center}#fallback-logo-lmvz{height:34px;width:auto}nav{flex-grow:1}.primary-menubar{display:flex;flex-direction:row;align-items:center}.secondary-menubar{display:flex;flex-direction:row;align-items:center;margin-left:var(--lmvz-header-x-spacing-level-2);padding-left:var(--lmvz-header-x-spacing-level-2);border-left:1px solid var(--lmvz-semantic-color-border-default, #e0e0e0)}}"}},[769,"lmvz-header",{role:[2561],lmvzActiveNav:[1,"lmvz-active-nav"]},void 0,{lmvzActiveNav:[{handleActiveNavChange:0}]}]),m=d,h=function(){"undefined"!=typeof customElements&&["lmvz-header","lmvz-icon"].forEach((e=>{switch(e){case"lmvz-header":customElements.get(r(e))||customElements.define(r(e),d);break;case"lmvz-icon":customElements.get(r(e))||o()}}))};export{m as LmvzHeader,h as defineCustomElement}
|