@magmonium/one 0.2.8 → 0.2.10

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.
@@ -5390,6 +5390,10 @@ class ImgComponent {
5390
5390
  sizes = input(...(ngDevMode ? [undefined, { debugName: "sizes" }] : /* istanbul ignore next */ []));
5391
5391
  attrWidth = computed(() => this.width() ?? 1200, ...(ngDevMode ? [{ debugName: "attrWidth" }] : /* istanbul ignore next */ []));
5392
5392
  attrHeight = computed(() => this.height() ?? 1800, ...(ngDevMode ? [{ debugName: "attrHeight" }] : /* istanbul ignore next */ []));
5393
+ // On the tag only when the picture is not filling its box — a filling
5394
+ // picture is sized by its box, the others carry the reservation figures.
5395
+ widthAttr = computed(() => (this.fill() ? undefined : this.attrWidth()), ...(ngDevMode ? [{ debugName: "widthAttr" }] : /* istanbul ignore next */ []));
5396
+ heightAttr = computed(() => (this.fill() ? undefined : this.attrHeight()), ...(ngDevMode ? [{ debugName: "heightAttr" }] : /* istanbul ignore next */ []));
5393
5397
  // Null unless the picture is drawn at a size it was told: a filling picture
5394
5398
  // takes its size from the box around it, and an unnamed figure leaves the
5395
5399
  // stylesheet's `width: 100%` in charge.
@@ -5409,8 +5413,9 @@ class ImgComponent {
5409
5413
  return undefined;
5410
5414
  }, ...(ngDevMode ? [{ debugName: "autoNgSrcset" }] : /* istanbul ignore next */ []));
5411
5415
  // --- State ---
5412
- isLoaded = signal(false, ...(ngDevMode ? [{ debugName: "isLoaded" }] : /* istanbul ignore next */ []));
5413
- hasError = signal(false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
5416
+ // One signal rather than a loaded/error pair: the three states are
5417
+ // exclusive, and two booleans could say both or neither.
5418
+ status = signal('loading', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
5414
5419
  effectiveSrc = computed(() => {
5415
5420
  const d = this.data();
5416
5421
  if (d)
@@ -5426,24 +5431,26 @@ class ImgComponent {
5426
5431
  }
5427
5432
  return src;
5428
5433
  }, ...(ngDevMode ? [{ debugName: "effectiveSrc" }] : /* istanbul ignore next */ []));
5434
+ // The one stand-in this component draws, for every case that has no picture
5435
+ // to show: a load that failed, a url nobody set, and design mode, where a
5436
+ // picture is placed on the canvas long before it points anywhere.
5437
+ showFallback = computed(() => this.status() === 'error' || !this.effectiveSrc(), ...(ngDevMode ? [{ debugName: "showFallback" }] : /* istanbul ignore next */ []));
5429
5438
  isDataUri = computed(() => {
5430
5439
  const s = this.effectiveSrc();
5431
5440
  return !!s && (s.startsWith('data:') || s.startsWith('blob:'));
5432
5441
  }, ...(ngDevMode ? [{ debugName: "isDataUri" }] : /* istanbul ignore next */ []));
5433
5442
  constructor() {
5434
5443
  effect(() => {
5444
+ // A source change starts the wait over.
5435
5445
  const source = this.effectiveSrc();
5436
- this.isLoaded.set(false);
5437
- this.hasError.set(!source);
5446
+ this.status.set(source ? 'loading' : 'error');
5438
5447
  });
5439
5448
  }
5440
5449
  onLoad() {
5441
- this.isLoaded.set(true);
5442
- this.hasError.set(false);
5450
+ this.status.set('loaded');
5443
5451
  }
5444
5452
  onError() {
5445
- this.hasError.set(true);
5446
- this.isLoaded.set(false);
5453
+ this.status.set('error');
5447
5454
  }
5448
5455
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ImgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5449
5456
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ImgComponent, isStandalone: true, selector: "m-img", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, remote: { classPropertyName: "remote", publicName: "remote", isSignal: true, isRequired: false, transformFunction: null }, ngSrcset: { classPropertyName: "ngSrcset", publicName: "ngSrcset", isSignal: true, isRequired: false, transformFunction: null }, sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width.px": "boxWidth()", "style.height.px": "boxHeight()" } }, providers: [
@@ -5463,103 +5470,54 @@ class ImgComponent {
5463
5470
  ], ngImport: i0, template: `
5464
5471
  <div
5465
5472
  class="m-img"
5466
- [class.m-img--loaded]="isLoaded()"
5467
- [class.m-img--error]="hasError()"
5473
+ [class.m-img--loaded]="status() === 'loaded'"
5474
+ [class.m-img--error]="showFallback()"
5468
5475
  [class.m-img--fill]="fill()"
5469
5476
  [class.m-img--priority]="priority()"
5470
5477
  [class.m-img--sized]="isSized()"
5471
5478
  >
5472
- @if (hasError()) {
5479
+ @if (showFallback()) {
5473
5480
  <div class="m-img__fallback" role="img" [attr.aria-label]="alt()">
5474
- <svg
5475
- viewBox="0 0 24 24"
5476
- fill="none"
5477
- xmlns="http://www.w3.org/2000/svg"
5478
- >
5479
- <path
5480
- d="M2 13V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V13"
5481
- stroke="currentColor"
5482
- stroke-width="1.5"
5483
- stroke-linecap="round"
5484
- />
5485
- <path
5486
- d="M22 8V5C22 3.34315 20.6569 2 19 2H5C3.34315 2 2 3.34315 2 5V8"
5487
- stroke="currentColor"
5488
- stroke-width="1.5"
5489
- stroke-linecap="round"
5490
- />
5491
- <circle
5492
- cx="8.5"
5493
- cy="8.5"
5494
- r="2.5"
5495
- stroke="currentColor"
5496
- stroke-width="1.5"
5497
- opacity="0.4"
5498
- />
5499
- <path
5500
- d="M22 13L17 8L10 15L7 12L2 17"
5501
- stroke="currentColor"
5502
- stroke-width="1.5"
5503
- stroke-linecap="round"
5504
- stroke-linejoin="round"
5505
- opacity="0.4"
5506
- />
5481
+ <svg viewBox="0 0 24 24" fill="none">
5482
+ <path d="M2 13V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V13" />
5483
+ <path d="M22 8V5C22 3.34315 20.6569 2 19 2H5C3.34315 2 2 3.34315 2 5V8" />
5484
+ <circle cx="8.5" cy="8.5" r="2.5" opacity="0.4" />
5485
+ <path d="M22 13L17 8L10 15L7 12L2 17" stroke-linejoin="round" opacity="0.4" />
5507
5486
  </svg>
5508
5487
  </div>
5509
- } @else if (effectiveSrc()) {
5510
- <div class="m-img__wrapper">
5511
- @if (isDataUri()) {
5512
- <img
5513
- class="m-img__img"
5514
- [src]="effectiveSrc()!"
5515
- [alt]="alt()"
5516
- (load)="onLoad()"
5517
- (error)="onError()"
5518
- [width]="!fill() ? attrWidth() : undefined"
5519
- [height]="!fill() ? attrHeight() : undefined"
5520
- referrerpolicy="no-referrer"
5521
- />
5522
- } @else {
5523
- @if (autoNgSrcset()) {
5524
- <img
5525
- class="m-img__img"
5526
- [ngSrc]="effectiveSrc()!"
5527
- [alt]="alt()"
5528
- [priority]="priority()"
5529
- (load)="onLoad()"
5530
- (error)="onError()"
5531
- [fill]="fill()"
5532
- [width]="!fill() ? attrWidth() : undefined"
5533
- [height]="!fill() ? attrHeight() : undefined"
5534
- [ngSrcset]="autoNgSrcset()!"
5535
- [sizes]="sizes() || undefined"
5536
- decoding="async"
5537
- referrerpolicy="no-referrer"
5538
- />
5539
- } @else {
5540
- <img
5541
- class="m-img__img"
5542
- [ngSrc]="effectiveSrc()!"
5543
- [alt]="alt()"
5544
- [priority]="priority()"
5545
- (load)="onLoad()"
5546
- (error)="onError()"
5547
- [fill]="fill()"
5548
- [width]="!fill() ? attrWidth() : undefined"
5549
- [height]="!fill() ? attrHeight() : undefined"
5550
- [sizes]="sizes() || undefined"
5551
- decoding="async"
5552
- referrerpolicy="no-referrer"
5553
- />
5554
- }
5555
- }
5556
- @if (!isLoaded() && !priority()) {
5557
- <div class="m-img__skeleton"></div>
5558
- }
5559
- </div>
5488
+ } @else if (isDataUri()) {
5489
+ <img
5490
+ class="m-img__img"
5491
+ [src]="effectiveSrc()!"
5492
+ [alt]="alt()"
5493
+ (load)="onLoad()"
5494
+ (error)="onError()"
5495
+ [width]="widthAttr()"
5496
+ [height]="heightAttr()"
5497
+ referrerpolicy="no-referrer"
5498
+ />
5499
+ } @else {
5500
+ <img
5501
+ class="m-img__img"
5502
+ [ngSrc]="effectiveSrc()!"
5503
+ [alt]="alt()"
5504
+ [priority]="priority()"
5505
+ (load)="onLoad()"
5506
+ (error)="onError()"
5507
+ [fill]="fill()"
5508
+ [width]="widthAttr()"
5509
+ [height]="heightAttr()"
5510
+ [ngSrcset]="autoNgSrcset()!"
5511
+ [sizes]="sizes() || undefined"
5512
+ decoding="async"
5513
+ referrerpolicy="no-referrer"
5514
+ />
5515
+ }
5516
+ @if (status() === 'loading' && !priority()) {
5517
+ <div class="m-img__skeleton"></div>
5560
5518
  }
5561
5519
  </div>
5562
- `, isInline: true, styles: [":host{display:block;width:100%;height:100%;max-width:100%;overflow:hidden;border-radius:inherit;contain:paint}.m-img{position:relative;width:100%;height:100%;background:#ffffff05;border-radius:inherit;transition:transform .6s cubic-bezier(.2,0,.2,1);display:flex;flex-direction:column}.m-img--error{background:#0003}.m-img__wrapper{position:relative;width:100%;height:100%;overflow:hidden;border-radius:inherit}.m-img__img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05) translateZ(0);filter:blur(10px) brightness(.8);transition:opacity 1.2s cubic-bezier(.4,0,.2,1),transform 1.2s cubic-bezier(.2,0,.2,1),filter 1s ease-out}.m-img--loaded .m-img__img,.m-img--priority .m-img__img{opacity:1;transform:scale(1) translateZ(0);filter:blur(0) brightness(1)}.m-img__skeleton{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,#fff0,#ffffff0d,#fff0);background-size:200% 100%;animation:shimmer 2s infinite linear,pulse 2.5s infinite ease-in-out;border-radius:inherit}.m-img__fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#ffffff80;border-radius:inherit}.m-img__fallback svg{width:clamp(1.5rem,20%,3.5rem);height:auto;aspect-ratio:1;stroke:currentColor;stroke-width:1.5;opacity:.8}@media(hover:hover){.m-img:hover .m-img__img{transform:scale(1.04) translateZ(0);transition-duration:2s}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5520
+ `, isInline: true, styles: [":host{display:block;width:100%;height:100%;max-width:100%;overflow:hidden;border-radius:inherit;contain:paint}.m-img{position:relative;width:100%;height:100%;background:#ffffff05;border-radius:inherit;transition:transform .6s cubic-bezier(.2,0,.2,1);display:flex;flex-direction:column}.m-img__img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05) translateZ(0);filter:blur(10px) brightness(.8);transition:opacity 1.2s cubic-bezier(.4,0,.2,1),transform 1.2s cubic-bezier(.2,0,.2,1),filter 1s ease-out}.m-img--loaded .m-img__img,.m-img--priority .m-img__img{opacity:1;transform:scale(1) translateZ(0);filter:blur(0) brightness(1)}.m-img__skeleton{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,#fff0,#ffffff0d,#fff0);background-size:200% 100%;animation:shimmer 2s infinite linear,pulse 2.5s infinite ease-in-out;border-radius:inherit}.m-img__fallback{background:#0003;display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#ffffff80;border-radius:inherit}.m-img__fallback svg{width:clamp(1.5rem,20%,3.5rem);height:auto;aspect-ratio:1;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;opacity:.8}@media(hover:hover){.m-img:hover .m-img__img{transform:scale(1.04) translateZ(0);transition-duration:2s}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5563
5521
  }
5564
5522
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ImgComponent, decorators: [{
5565
5523
  type: Component,
@@ -5585,103 +5543,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
5585
5543
  ], template: `
5586
5544
  <div
5587
5545
  class="m-img"
5588
- [class.m-img--loaded]="isLoaded()"
5589
- [class.m-img--error]="hasError()"
5546
+ [class.m-img--loaded]="status() === 'loaded'"
5547
+ [class.m-img--error]="showFallback()"
5590
5548
  [class.m-img--fill]="fill()"
5591
5549
  [class.m-img--priority]="priority()"
5592
5550
  [class.m-img--sized]="isSized()"
5593
5551
  >
5594
- @if (hasError()) {
5552
+ @if (showFallback()) {
5595
5553
  <div class="m-img__fallback" role="img" [attr.aria-label]="alt()">
5596
- <svg
5597
- viewBox="0 0 24 24"
5598
- fill="none"
5599
- xmlns="http://www.w3.org/2000/svg"
5600
- >
5601
- <path
5602
- d="M2 13V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V13"
5603
- stroke="currentColor"
5604
- stroke-width="1.5"
5605
- stroke-linecap="round"
5606
- />
5607
- <path
5608
- d="M22 8V5C22 3.34315 20.6569 2 19 2H5C3.34315 2 2 3.34315 2 5V8"
5609
- stroke="currentColor"
5610
- stroke-width="1.5"
5611
- stroke-linecap="round"
5612
- />
5613
- <circle
5614
- cx="8.5"
5615
- cy="8.5"
5616
- r="2.5"
5617
- stroke="currentColor"
5618
- stroke-width="1.5"
5619
- opacity="0.4"
5620
- />
5621
- <path
5622
- d="M22 13L17 8L10 15L7 12L2 17"
5623
- stroke="currentColor"
5624
- stroke-width="1.5"
5625
- stroke-linecap="round"
5626
- stroke-linejoin="round"
5627
- opacity="0.4"
5628
- />
5554
+ <svg viewBox="0 0 24 24" fill="none">
5555
+ <path d="M2 13V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V13" />
5556
+ <path d="M22 8V5C22 3.34315 20.6569 2 19 2H5C3.34315 2 2 3.34315 2 5V8" />
5557
+ <circle cx="8.5" cy="8.5" r="2.5" opacity="0.4" />
5558
+ <path d="M22 13L17 8L10 15L7 12L2 17" stroke-linejoin="round" opacity="0.4" />
5629
5559
  </svg>
5630
5560
  </div>
5631
- } @else if (effectiveSrc()) {
5632
- <div class="m-img__wrapper">
5633
- @if (isDataUri()) {
5634
- <img
5635
- class="m-img__img"
5636
- [src]="effectiveSrc()!"
5637
- [alt]="alt()"
5638
- (load)="onLoad()"
5639
- (error)="onError()"
5640
- [width]="!fill() ? attrWidth() : undefined"
5641
- [height]="!fill() ? attrHeight() : undefined"
5642
- referrerpolicy="no-referrer"
5643
- />
5644
- } @else {
5645
- @if (autoNgSrcset()) {
5646
- <img
5647
- class="m-img__img"
5648
- [ngSrc]="effectiveSrc()!"
5649
- [alt]="alt()"
5650
- [priority]="priority()"
5651
- (load)="onLoad()"
5652
- (error)="onError()"
5653
- [fill]="fill()"
5654
- [width]="!fill() ? attrWidth() : undefined"
5655
- [height]="!fill() ? attrHeight() : undefined"
5656
- [ngSrcset]="autoNgSrcset()!"
5657
- [sizes]="sizes() || undefined"
5658
- decoding="async"
5659
- referrerpolicy="no-referrer"
5660
- />
5661
- } @else {
5662
- <img
5663
- class="m-img__img"
5664
- [ngSrc]="effectiveSrc()!"
5665
- [alt]="alt()"
5666
- [priority]="priority()"
5667
- (load)="onLoad()"
5668
- (error)="onError()"
5669
- [fill]="fill()"
5670
- [width]="!fill() ? attrWidth() : undefined"
5671
- [height]="!fill() ? attrHeight() : undefined"
5672
- [sizes]="sizes() || undefined"
5673
- decoding="async"
5674
- referrerpolicy="no-referrer"
5675
- />
5676
- }
5677
- }
5678
- @if (!isLoaded() && !priority()) {
5679
- <div class="m-img__skeleton"></div>
5680
- }
5681
- </div>
5561
+ } @else if (isDataUri()) {
5562
+ <img
5563
+ class="m-img__img"
5564
+ [src]="effectiveSrc()!"
5565
+ [alt]="alt()"
5566
+ (load)="onLoad()"
5567
+ (error)="onError()"
5568
+ [width]="widthAttr()"
5569
+ [height]="heightAttr()"
5570
+ referrerpolicy="no-referrer"
5571
+ />
5572
+ } @else {
5573
+ <img
5574
+ class="m-img__img"
5575
+ [ngSrc]="effectiveSrc()!"
5576
+ [alt]="alt()"
5577
+ [priority]="priority()"
5578
+ (load)="onLoad()"
5579
+ (error)="onError()"
5580
+ [fill]="fill()"
5581
+ [width]="widthAttr()"
5582
+ [height]="heightAttr()"
5583
+ [ngSrcset]="autoNgSrcset()!"
5584
+ [sizes]="sizes() || undefined"
5585
+ decoding="async"
5586
+ referrerpolicy="no-referrer"
5587
+ />
5588
+ }
5589
+ @if (status() === 'loading' && !priority()) {
5590
+ <div class="m-img__skeleton"></div>
5682
5591
  }
5683
5592
  </div>
5684
- `, styles: [":host{display:block;width:100%;height:100%;max-width:100%;overflow:hidden;border-radius:inherit;contain:paint}.m-img{position:relative;width:100%;height:100%;background:#ffffff05;border-radius:inherit;transition:transform .6s cubic-bezier(.2,0,.2,1);display:flex;flex-direction:column}.m-img--error{background:#0003}.m-img__wrapper{position:relative;width:100%;height:100%;overflow:hidden;border-radius:inherit}.m-img__img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05) translateZ(0);filter:blur(10px) brightness(.8);transition:opacity 1.2s cubic-bezier(.4,0,.2,1),transform 1.2s cubic-bezier(.2,0,.2,1),filter 1s ease-out}.m-img--loaded .m-img__img,.m-img--priority .m-img__img{opacity:1;transform:scale(1) translateZ(0);filter:blur(0) brightness(1)}.m-img__skeleton{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,#fff0,#ffffff0d,#fff0);background-size:200% 100%;animation:shimmer 2s infinite linear,pulse 2.5s infinite ease-in-out;border-radius:inherit}.m-img__fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#ffffff80;border-radius:inherit}.m-img__fallback svg{width:clamp(1.5rem,20%,3.5rem);height:auto;aspect-ratio:1;stroke:currentColor;stroke-width:1.5;opacity:.8}@media(hover:hover){.m-img:hover .m-img__img{transform:scale(1.04) translateZ(0);transition-duration:2s}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}\n"] }]
5593
+ `, styles: [":host{display:block;width:100%;height:100%;max-width:100%;overflow:hidden;border-radius:inherit;contain:paint}.m-img{position:relative;width:100%;height:100%;background:#ffffff05;border-radius:inherit;transition:transform .6s cubic-bezier(.2,0,.2,1);display:flex;flex-direction:column}.m-img__img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05) translateZ(0);filter:blur(10px) brightness(.8);transition:opacity 1.2s cubic-bezier(.4,0,.2,1),transform 1.2s cubic-bezier(.2,0,.2,1),filter 1s ease-out}.m-img--loaded .m-img__img,.m-img--priority .m-img__img{opacity:1;transform:scale(1) translateZ(0);filter:blur(0) brightness(1)}.m-img__skeleton{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,#fff0,#ffffff0d,#fff0);background-size:200% 100%;animation:shimmer 2s infinite linear,pulse 2.5s infinite ease-in-out;border-radius:inherit}.m-img__fallback{background:#0003;display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#ffffff80;border-radius:inherit}.m-img__fallback svg{width:clamp(1.5rem,20%,3.5rem);height:auto;aspect-ratio:1;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;opacity:.8}@media(hover:hover){.m-img:hover .m-img__img{transform:scale(1.04) translateZ(0);transition-duration:2s}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}\n"] }]
5685
5594
  }], ctorParameters: () => [], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], dataType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataType", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: true }] }], priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "priority", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], remote: [{ type: i0.Input, args: [{ isSignal: true, alias: "remote", required: false }] }], ngSrcset: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngSrcset", required: false }] }], sizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizes", required: false }] }] } });
5686
5595
 
5687
5596
  const SECTION_FORM_CONTEXT = new InjectionToken('SECTION_FORM_CONTEXT');
@@ -6512,7 +6421,7 @@ class SectionFormItemComponent extends ConfigComponent {
6512
6421
  break;
6513
6422
  }
6514
6423
  case InputType.TOGGLE: {
6515
- const { ToggleInputComponent } = await import('./magmonium-one-toggle-DV8ZrcIu.mjs');
6424
+ const { ToggleInputComponent } = await import('./magmonium-one-toggle-DvI8FcEe.mjs');
6516
6425
  this.createDynamicComponent(seq, ToggleInputComponent, [], true);
6517
6426
  break;
6518
6427
  }
@@ -6524,12 +6433,12 @@ class SectionFormItemComponent extends ConfigComponent {
6524
6433
  break;
6525
6434
  }
6526
6435
  case InputType.PASSWORD: {
6527
- const { PasswordInputComponent } = await import('./magmonium-one-password-ByXNWyk4.mjs');
6436
+ const { PasswordInputComponent } = await import('./magmonium-one-password-zfn5Jaos.mjs');
6528
6437
  this.createDynamicComponent(seq, PasswordInputComponent);
6529
6438
  break;
6530
6439
  }
6531
6440
  case InputType.OTP: {
6532
- const { OtpInputComponent } = await import('./magmonium-one-otp-APADBAsq.mjs');
6441
+ const { OtpInputComponent } = await import('./magmonium-one-otp-C8vIZd-_.mjs');
6533
6442
  this.createDynamicComponent(seq, OtpInputComponent);
6534
6443
  break;
6535
6444
  }
@@ -17950,7 +17859,7 @@ class WrapperInputComponent extends ConfigComponent {
17950
17859
  break;
17951
17860
  }
17952
17861
  case InputType.TOGGLE: {
17953
- const { ToggleInputComponent } = await import('./magmonium-one-toggle-DV8ZrcIu.mjs');
17862
+ const { ToggleInputComponent } = await import('./magmonium-one-toggle-DvI8FcEe.mjs');
17954
17863
  this.createDynamicComponent(seq, ToggleInputComponent, [], true);
17955
17864
  break;
17956
17865
  }
@@ -17962,12 +17871,12 @@ class WrapperInputComponent extends ConfigComponent {
17962
17871
  break;
17963
17872
  }
17964
17873
  case InputType.PASSWORD: {
17965
- const { PasswordInputComponent } = await import('./magmonium-one-password-ByXNWyk4.mjs');
17874
+ const { PasswordInputComponent } = await import('./magmonium-one-password-zfn5Jaos.mjs');
17966
17875
  this.createDynamicComponent(seq, PasswordInputComponent);
17967
17876
  break;
17968
17877
  }
17969
17878
  case InputType.OTP: {
17970
- const { OtpInputComponent } = await import('./magmonium-one-otp-APADBAsq.mjs');
17879
+ const { OtpInputComponent } = await import('./magmonium-one-otp-C8vIZd-_.mjs');
17971
17880
  this.createDynamicComponent(seq, OtpInputComponent);
17972
17881
  break;
17973
17882
  }
@@ -32300,4 +32209,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
32300
32209
  */
32301
32210
 
32302
32211
  export { DateInputComponent as $, ACCESS_DOMAINS as A, BaseInputComponent as B, COMPONENT_INPUT_REGISTRY as C, CardComponent as D, CardWrapperComponent as E, CarouselComponent as F, ChartComponent as G, CheckboxInputComponent as H, IS_DESIGN_MODE as I, ClearableInputComponent as J, ColComponent as K, LabelComponent as L, ColorPickerInputComponent as M, CommentItemComponent as N, CommentsApiService as O, CommentsComponent as P, CommentsStore as Q, ComponentInputComponent as R, ComponentStepperComponent as S, TranslatePipe as T, ConfigComponent as U, ConfirmComponent as V, ContextMenuComponent as W, CustomIconClass as X, CustomIconEditComponent as Y, DEFAULT_SIZE as Z, DashboardCardComponent as _, BaseTextInputComponent as a, NavComponent as a$, DatePickerComponent as a0, DeviceService as a1, DomService as a2, Domain as a3, DotGridComponent as a4, DragListDirective as a5, DragListItemDirective as a6, DraggableDirective as a7, DropdownInputComponent as a8, FLEX_VARIANTS as a9, LOGIN_STORE as aA, LanguageComponent as aB, LogoComponent as aC, MAG_SOCKET_EVENT as aD, MHeroColorDirective as aE, MHeroComponent as aF, MODAL_REF as aG, MODAL_STORE_REF as aH, MRefDirective as aI, MStepComponent as aJ, MURL_PARAM as aK, MURL_SEP as aL, ManifestEnrichmentService as aM, MenuComponent as aN, ModalDirective as aO, ModalRef as aP, ModalStore as aQ, MoneyPipe as aR, MultiRangeInputComponent as aS, MurlUrlSerializer as aT, NAV_DEFAULT_MURL as aU, NAV_ID_SEP as aV, NAV_MAIN_BUTTONS as aW, NAV_SEGMENT_RE as aX, NAV_STORE_REF as aY, NAV_WC_COMPONENTS as aZ, NAV_WIDGET_MAP as a_, FOLDER_PICK_LISTENER as aa, FORM_ASSET_FOLDER as ab, FileService as ac, FileUploadDirective as ad, FileUploadInputComponent as ae, FlexComponent as af, FlexItemComponent as ag, FormGroupComponent as ah, FrameComponent as ai, FreezeService as aj, GRID_BREAKPOINTS as ak, GetNavService as al, HeaderComponent$1 as am, HighlightDirective as an, HttpService as ao, ICON_SOURCE as ap, IS_SIDE_PANEL as aq, IconComponent as ar, ImgComponent as as, InputType as at, InstrumentScoreComponent as au, InterceptorObservables as av, JumbotronComponent as aw, KeyValueComponent as ax, LAYOUT_ASSET_FOLDER as ay, LOGIN_COMPONENT as az, TextOutputComponent as b, SectionFooterComponent as b$, NavDetailsComponent as b0, NavHeaderComponent as b1, NavMenuComponent as b2, NavStore as b3, NavTrailComponent as b4, NothingComponent as b5, NotificationElementComponent as b6, NotificationGroupComponent as b7, NotificationPopupComponent as b8, NotificationService as b9, ReactiveElementComponent as bA, RemoteComponent as bB, RemoteLoaderService as bC, ResizeElementComponent as bD, RouteContainer as bE, RowComponent as bF, SEARCH_QUERY as bG, SEARCH_RESULTS_EVENT as bH, SECTION_ACCORDION_GROUP as bI, SECTION_FORM_CONTEXT as bJ, SHARED_ICONS as bK, SIZE_CONTEXT as bL, ScoreComponent as bM, ScrollComponent as bN, ScrollService as bO, SearchPanelComponent as bP, SearchStore as bQ, SearchUserPanelComponent as bR, SectionAccordionDirective as bS, SectionAccordionGroupDirective as bT, SectionBackComponent as bU, SectionBadgesComponent as bV, SectionButtonGroupComponent as bW, SectionCardComponent as bX, SectionCarouselComponent as bY, SectionComponent as bZ, SectionFilterComponent as b_, NotificationStore as ba, NotificationType as bb, NotificationWidgetComponent as bc, ONE_ASSET_BASE_URL as bd, OPTIONS_SOURCE as be, OVERLAY_WIDGETS as bf, OneApp as bg, OptionsSourceDirective as bh, OverlayBodyComponent as bi, OverlayRef as bj, OverlayService as bk, PLATFORM_BUTTON_NAV_IDS as bl, PLATFORM_EXTENSIBLE_NAV_IDS as bm, PLATFORM_NAV_MAP as bn, PLATFORM_ROOT_CHILDREN as bo, PaginationComponent as bp, PanelComponent as bq, PercentagePipe as br, PlaygroundComponent as bs, PositionDirective as bt, PwaInstallComponent as bu, ROOT_NAV$1 as bv, RadioGroupComponent as bw, RadioInputComponent as bx, RangeInputComponent as by, RatingInputComponent as bz, ButtonComponent as c, WIN_USER_TAB_KEY as c$, SectionFormComponent as c0, SectionFormItemComponent as c1, SectionHeaderComponent as c2, SectionHeroComponent as c3, SectionSearchComponent as c4, SectionStepperComponent as c5, SectionTabsComponent as c6, SectionToggleComponent as c7, SectionToggleItemDirective as c8, SelectableCardInputComponent as c9, ThemeComponent as cA, ThemeDataService as cB, ThemeService as cC, ThemeStore as cD, TimeAgoPipe as cE, TimelineComponent as cF, ToggleButtonComponent as cG, ToggleInputComponent as cH, ToggleRadioInputComponent as cI, ToolTipDirective as cJ, TooltipComponent as cK, TranslateService as cL, TreeGridComponent as cM, URL_SEP as cN, USER_STORE_REF as cO, USER_TAB_MAP as cP, UlComponent as cQ, UniverseComponent as cR, UserApiService as cS, UserAvatarComponent as cT, UserComponent as cU, UserNavComponent as cV, UserSettingsComponent as cW, UserStore as cX, WC_ROUTE_CHANGED_EVENT as cY, WC_SEARCH_GROUPS as cZ, WIN_USER_TAB_HOOK as c_, SelectorDirective as ca, SettingsSearchBarComponent as cb, SettingsSearchService as cc, ShapeComponent as cd, SharedStoreRegistry as ce, SidePanelDirective as cf, Size as cg, SocketStore as ch, SortComponent as ci, StatComponent as cj, StepComponent as ck, StepperComponent as cl, StepsComponent as cm, StorageService as cn, StrokeLinecap as co, StrokeLinejoin as cp, SummaryComponent as cq, SvgGeneratorComponent as cr, SvgGeneratorService as cs, SvgService as ct, TOTAL_COLUMNS as cu, TRANSLATION_SOURCE as cv, TableComponent as cw, TechnicalMeterComponent as cx, TextInputComponent as cy, TextareaInputComponent as cz, APP_CONTEXT_REF as d, linkToId as d$, WatermarkComponent as d0, WcRouterStore as d1, WrapperInputComponent as d2, anchorNavId as d3, applyColorsToElement as d4, bootstrapMagApp as d5, bootstrapPwaInstall as d6, buildWcBaseUrl as d7, calculateLuminance as d8, calculateRanks as d9, getTreeGridRow as dA, getUniqueId as dB, getValue as dC, hasErrorComputed as dD, hexToRgb as dE, hslToRgb$1 as dF, initMagmoniumApp as dG, initialNotificationState as dH, initialState$2 as dI, initials as dJ, injectAuthenticate as dK, injectInstallApp as dL, injectParentSize as dM, injectScrollSticky as dN, isButtonName as dO, isCancelledComputed as dP, isExtensiblePlatformNavId as dQ, isJson as dR, isLoadingComputed as dS, isLocalhost as dT, isPlatformNavId as dU, isSize as dV, isTierPreview as dW, isUrlLocalhost as dX, isValidNavId as dY, isValidNavSegment as dZ, isWebComponent as d_, cellText as da, checkFilterCondition as db, childNavId as dc, classListSignal as dd, coerceSize as de, cornerEdge as df, cornerSide as dg, createMap as dh, createPlatformNavMap as di, deriveAvatarGradient as dj, deriveContrastColor as dk, deriveOppositeColor as dl, derivePropertyName as dm, emailValidation as dn, evaluate as dp, evaluateBool as dq, flattenTreeGridRows as dr, formatBadgeCount as ds, fullName as dt, generateClipPath as du, generateTransform as dv, getClassList as dw, getProperty as dx, getScrollParent as dy, getTierFromPreviewPath as dz, ASSET_BASE_URL as e, toAttrNumber as e$, linkToNav as e0, loadingActions as e1, mInterceptor as e2, manualValidation as e3, matchFieldValidation as e4, maxLengthValidation as e5, maxValidation as e6, mergePlatformNav as e7, mergeUnique as e8, mergeUniqueBy as e9, provideNavWidgets as eA, provideOverlayWidgets as eB, providePlatformNavWidgets as eC, provideSearch as eD, provideSizeContext as eE, provideUserTabs as eF, publicGuard as eG, readFieldPatterns as eH, renderAddress as eI, requiredValidation as eJ, resolveConfigAsset as eK, resolveIconSize as eL, resolvePallet as eM, resolvePatternRules as eN, resolveSize as eO, rgbToHex as eP, rgbToHsl as eQ, rowHasChildren as eR, samePatterns as eS, segmentsToNavId as eT, setProperty as eU, setTreeGridChildren as eV, settingsWidgets as eW, shouldShowBadge as eX, splitNavId as eY, stringToColor as eZ, toAttrBool as e_, mergeUniqueWith as ea, minAgeValidation as eb, minLengthValidation as ec, minValidation as ed, miniMarkToHtml as ee, navIdChain as ef, navIdFor as eg, navIdSegment as eh, navIdToRoutePath as ei, navIdToSegments as ej, navToId as ek, parentNavId as el, parseAddress as em, parseColor as en, parsePatternNames as eo, patternValidation as ep, patternsValidation as eq, platformNavWidgets as er, privateGuard as es, processImageToSvg as et, provideAppContext as eu, provideMagAppConfig as ev, provideMagWcConfig as ew, provideMagWcRoutes as ex, provideModalComponents as ey, provideMurlUrlSerializer as ez, AccordionBodyDirective as f, toCssLength as f0, toHostNavId as f1, toLength$1 as f2, toLocalNavId as f3, toggleTreeGridRow as f4, unfetchedPlatformNav as f5, urlValidation as f6, AccordionComponent as g, AccordionGroupComponent as h, ActionComponent as i, AnimatedGraphsComponent as j, AppCardComponent as k, AppRelationType as l, AppTileComponent as m, AssetStore as n, AssetUrlPipe as o, Assets as p, AuthActivityPageComponent as q, AuthApiService as r, AuthStore as s, AutosizeDirective as t, BadgeComponent as u, BandingComponent as v, BaseArrayInputComponent as w, BaseRootWebComponent as x, BaseWebComponent as y, ButtonGroupComponent as z };
32303
- //# sourceMappingURL=magmonium-one-magmonium-one-BXY0lmeR.mjs.map
32212
+ //# sourceMappingURL=magmonium-one-magmonium-one-DXVayEsc.mjs.map