@magmonium/one 0.1.20 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -51,6 +51,7 @@ const LAYOUT_ASSET_FOLDER = {
51
51
  // `primary` and `size`, none of which a SectionButtonGroup reads (ADR 0009).
52
52
  section_button_group: 'section_button_groups',
53
53
  section_hero: 'section_heroes',
54
+ section_carousel: 'section_carousels',
54
55
  text_output: 'text_outputs',
55
56
  };
56
57
 
@@ -2587,6 +2588,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
2587
2588
  }]
2588
2589
  }] });
2589
2590
 
2591
+ const GRID_BREAKPOINTS = {
2592
+ xs: 0,
2593
+ sm: 576,
2594
+ md: 768,
2595
+ lg: 992,
2596
+ xl: 1200,
2597
+ xxl: 1400,
2598
+ };
2599
+
2590
2600
  const loadingSignal = signal({
2591
2601
  requestCount: 0,
2592
2602
  }, ...(ngDevMode ? [{ debugName: "loadingSignal" }] : /* istanbul ignore next */ []));
@@ -4332,7 +4342,9 @@ function isOneIcon(element, config) {
4332
4342
  return tagName === 'M-ONE-ICON';
4333
4343
  }
4334
4344
  function textToSvg(str = MAGMONIUM, color) {
4335
- return str.includes('#color') ? str.replace(/#color/g, color) : str;
4345
+ if (typeof str !== 'string')
4346
+ return str;
4347
+ return str.replace(/#color/g, color).replace(/currentColor/g, color);
4336
4348
  }
4337
4349
  function svgElementFromString(str, color) {
4338
4350
  const parser = new DOMParser();
@@ -4569,13 +4581,13 @@ class IconComponent {
4569
4581
  element.prepend(svg);
4570
4582
  };
4571
4583
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4572
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: IconComponent, isStandalone: true, selector: "m-icon, m-one-icon", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, one: { classPropertyName: "one", publicName: "one", isSignal: true, isRequired: false, transformFunction: null }, baseUrl: { classPropertyName: "baseUrl", publicName: "baseUrl", isSignal: true, isRequired: false, transformFunction: null }, remote: { classPropertyName: "remote", publicName: "remote", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange" }, host: { properties: { "class.has-color": "resolvedConfig()?.color" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:inline-flex;align-items:center;justify-content:center;height:var(--m-icon-size, 1em);width:var(--m-icon-size, 1em);overflow:hidden}:host svg{width:var(--m-icon-size, 1em);height:var(--m-icon-size, 1em);flex-shrink:0;overflow:visible}:host svg path,:host svg circle,:host svg rect,:host svg line,:host svg polyline,:host svg polygon,:host svg ellipse{fill:var(--m-icon-fill, inherit);stroke:var(--m-icon-stroke, inherit);stroke-width:2px;vector-effect:non-scaling-stroke}:host.has-color{color:var(--m-icon-color, inherit)}:host:has(>:not(svg)){width:auto;gap:.25rem;justify-content:flex-start;overflow:visible}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4584
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: IconComponent, isStandalone: true, selector: "m-icon, m-one-icon", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, one: { classPropertyName: "one", publicName: "one", isSignal: true, isRequired: false, transformFunction: null }, baseUrl: { classPropertyName: "baseUrl", publicName: "baseUrl", isSignal: true, isRequired: false, transformFunction: null }, remote: { classPropertyName: "remote", publicName: "remote", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange" }, host: { properties: { "class.has-color": "resolvedConfig()?.color" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:inline-flex;align-items:center;justify-content:center;height:var(--m-icon-size, 1em);width:var(--m-icon-size, 1em);overflow:hidden}:host svg{width:var(--m-icon-size, 1em);height:var(--m-icon-size, 1em);flex-shrink:0;overflow:visible;fill:var(--m-icon-fill, currentColor);stroke:var(--m-icon-stroke, currentColor)}:host svg path,:host svg circle,:host svg rect,:host svg line,:host svg polyline,:host svg polygon,:host svg ellipse{stroke-width:2px;vector-effect:non-scaling-stroke}:host.has-color{color:var(--m-icon-color, inherit)}:host:has(>:not(svg)){width:auto;gap:.25rem;justify-content:flex-start;overflow:visible}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4573
4585
  }
4574
4586
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IconComponent, decorators: [{
4575
4587
  type: Component,
4576
4588
  args: [{ selector: 'm-icon, m-one-icon', template: `<ng-content></ng-content>`, host: {
4577
4589
  '[class.has-color]': 'resolvedConfig()?.color',
4578
- }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:inline-flex;align-items:center;justify-content:center;height:var(--m-icon-size, 1em);width:var(--m-icon-size, 1em);overflow:hidden}:host svg{width:var(--m-icon-size, 1em);height:var(--m-icon-size, 1em);flex-shrink:0;overflow:visible}:host svg path,:host svg circle,:host svg rect,:host svg line,:host svg polyline,:host svg polygon,:host svg ellipse{fill:var(--m-icon-fill, inherit);stroke:var(--m-icon-stroke, inherit);stroke-width:2px;vector-effect:non-scaling-stroke}:host.has-color{color:var(--m-icon-color, inherit)}:host:has(>:not(svg)){width:auto;gap:.25rem;justify-content:flex-start;overflow:visible}\n"] }]
4590
+ }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:inline-flex;align-items:center;justify-content:center;height:var(--m-icon-size, 1em);width:var(--m-icon-size, 1em);overflow:hidden}:host svg{width:var(--m-icon-size, 1em);height:var(--m-icon-size, 1em);flex-shrink:0;overflow:visible;fill:var(--m-icon-fill, currentColor);stroke:var(--m-icon-stroke, currentColor)}:host svg path,:host svg circle,:host svg rect,:host svg line,:host svg polyline,:host svg polygon,:host svg ellipse{stroke-width:2px;vector-effect:non-scaling-stroke}:host.has-color{color:var(--m-icon-color, inherit)}:host:has(>:not(svg)){width:auto;gap:.25rem;justify-content:flex-start;overflow:visible}\n"] }]
4579
4591
  }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }, { type: i0.Output, args: ["configChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], one: [{ type: i0.Input, args: [{ isSignal: true, alias: "one", required: false }] }], baseUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseUrl", required: false }] }], remote: [{ type: i0.Input, args: [{ isSignal: true, alias: "remote", required: false }] }] } });
4580
4592
 
4581
4593
  function genColor(colors, color) {
@@ -6499,7 +6511,7 @@ class SectionFormItemComponent extends ConfigComponent {
6499
6511
  break;
6500
6512
  }
6501
6513
  case InputType.TOGGLE: {
6502
- const { ToggleInputComponent } = await import('./magmonium-one-toggle-C5BYRe1c.mjs');
6514
+ const { ToggleInputComponent } = await import('./magmonium-one-toggle-B0-QV2Ca.mjs');
6503
6515
  this.createDynamicComponent(seq, ToggleInputComponent, [], true);
6504
6516
  break;
6505
6517
  }
@@ -6511,12 +6523,12 @@ class SectionFormItemComponent extends ConfigComponent {
6511
6523
  break;
6512
6524
  }
6513
6525
  case InputType.PASSWORD: {
6514
- const { PasswordInputComponent } = await import('./magmonium-one-password-CPg8XcHq.mjs');
6526
+ const { PasswordInputComponent } = await import('./magmonium-one-password-8vNjP9eJ.mjs');
6515
6527
  this.createDynamicComponent(seq, PasswordInputComponent);
6516
6528
  break;
6517
6529
  }
6518
6530
  case InputType.OTP: {
6519
- const { OtpInputComponent } = await import('./magmonium-one-otp-BODZD9Ns.mjs');
6531
+ const { OtpInputComponent } = await import('./magmonium-one-otp-vnlfiBxo.mjs');
6520
6532
  this.createDynamicComponent(seq, OtpInputComponent);
6521
6533
  break;
6522
6534
  }
@@ -8784,9 +8796,172 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
8784
8796
  ], styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}m-button-group .button-group:not(.is-context),m-one-button-group .button-group:not(.is-context){display:flex;flex-wrap:wrap;align-items:stretch;gap:.375em}m-button-group .button-group:not(.is-context).vertical,m-one-button-group .button-group:not(.is-context).vertical{flex-direction:column;align-items:center}m-button-group .button-group:not(.is-context).horizontal,m-one-button-group .button-group:not(.is-context).horizontal{flex-direction:row;align-items:center}m-button-group .button-group:not(.is-context).align-right,m-one-button-group .button-group:not(.is-context).align-right{justify-content:flex-end}m-button-group .button-group:not(.is-context).align-center,m-button-group .button-group:not(.is-context).center,m-one-button-group .button-group:not(.is-context).align-center,m-one-button-group .button-group:not(.is-context).center{justify-content:center}m-button-group .button-group:not(.is-context).align-left,m-one-button-group .button-group:not(.is-context).align-left{justify-content:flex-start}m-button-group .button-group.is-context,m-one-button-group .button-group.is-context{--m-grp-height: var(--m-button-group-height, 2.75em);--m-grp-radius: var(--m-button-group-radius, .875em);display:inline-flex;align-items:stretch;height:var(--m-grp-height);border-radius:var(--m-grp-radius);background:transparent;overflow:visible;position:relative;gap:.375em;will-change:transform;transition:transform .4s cubic-bezier(.16,1,.3,1)}m-button-group .button-group.is-context.is-primary,m-one-button-group .button-group.is-context.is-primary{background:var(--m-button-group-color-opposite, var(--m-one-button-group-color-opposite, var(--m-mm-dark)));--m-button-color-contrast: var(--m-inverse-text);--m-button-hover-background: rgba(0, 0, 0, .12)}m-button-group .button-group.is-context.is-primary m-button,m-button-group .button-group.is-context.is-primary m-one-button,m-button-group .button-group.is-context.is-primary .m-button,m-button-group .button-group.is-context.is-primary .m-one-button,m-one-button-group .button-group.is-context.is-primary m-button,m-one-button-group .button-group.is-context.is-primary m-one-button,m-one-button-group .button-group.is-context.is-primary .m-button,m-one-button-group .button-group.is-context.is-primary .m-one-button{--m-button-hover-background: rgba(0, 0, 0, .1)}m-button-group .button-group.is-context.is-primary m-context-menu,m-button-group .button-group.is-context.is-primary m-one-context-menu,m-button-group .button-group.is-context.is-primary .m-context-menu,m-one-button-group .button-group.is-context.is-primary m-context-menu,m-one-button-group .button-group.is-context.is-primary m-one-context-menu,m-one-button-group .button-group.is-context.is-primary .m-context-menu{--m-action-dots-hover-icon-color: var(--m-inverse-text)}m-button-group .button-group.is-context.is-primary m-context-menu:hover,m-button-group .button-group.is-context.is-primary m-one-context-menu:hover,m-button-group .button-group.is-context.is-primary .m-context-menu:hover,m-one-button-group .button-group.is-context.is-primary m-context-menu:hover,m-one-button-group .button-group.is-context.is-primary m-one-context-menu:hover,m-one-button-group .button-group.is-context.is-primary .m-context-menu:hover{background:#00000026}m-button-group .button-group.is-context:hover,m-one-button-group .button-group.is-context:hover{transform:scale(1.02);box-shadow:0 8px 24px #0000001a}m-button-group .button-group.is-context:active,m-one-button-group .button-group.is-context:active{transform:scale(.98)}m-button-group .button-group.is-context m-button,m-button-group .button-group.is-context m-one-button,m-button-group .button-group.is-context .m-button,m-button-group .button-group.is-context .m-one-button,m-one-button-group .button-group.is-context m-button,m-one-button-group .button-group.is-context m-one-button,m-one-button-group .button-group.is-context .m-button,m-one-button-group .button-group.is-context .m-one-button{flex:1;z-index:2;height:100%;--m-button-border: none;--m-button-radius: 0;--m-button-padding: 0 1.25rem;--m-button-background: transparent;--m-button-hover-background: rgba(0, 0, 0, .05);transition:all .3s cubic-bezier(.16,1,.3,1)}m-button-group .button-group.is-context m-button button,m-button-group .button-group.is-context m-one-button button,m-button-group .button-group.is-context .m-button button,m-button-group .button-group.is-context .m-one-button button,m-one-button-group .button-group.is-context m-button button,m-one-button-group .button-group.is-context m-one-button button,m-one-button-group .button-group.is-context .m-button button,m-one-button-group .button-group.is-context .m-one-button button{border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-top-left-radius:var(--m-grp-radius)!important;border-bottom-left-radius:var(--m-grp-radius)!important}m-button-group .button-group.is-context m-button button:hover,m-button-group .button-group.is-context m-one-button button:hover,m-button-group .button-group.is-context .m-button button:hover,m-button-group .button-group.is-context .m-one-button button:hover,m-one-button-group .button-group.is-context m-button button:hover,m-one-button-group .button-group.is-context m-one-button button:hover,m-one-button-group .button-group.is-context .m-button button:hover,m-one-button-group .button-group.is-context .m-one-button button:hover{transform:none!important;box-shadow:none!important}m-button-group .button-group.is-context m-button button:active,m-button-group .button-group.is-context m-one-button button:active,m-button-group .button-group.is-context .m-button button:active,m-button-group .button-group.is-context .m-one-button button:active,m-one-button-group .button-group.is-context m-button button:active,m-one-button-group .button-group.is-context m-one-button button:active,m-one-button-group .button-group.is-context .m-button button:active,m-one-button-group .button-group.is-context .m-one-button button:active{transform:none!important}m-button-group .button-group.is-context m-button,m-button-group .button-group.is-context m-one-button,m-button-group .button-group.is-context .m-button,m-button-group .button-group.is-context .m-one-button,m-one-button-group .button-group.is-context m-button,m-one-button-group .button-group.is-context m-one-button,m-one-button-group .button-group.is-context .m-button,m-one-button-group .button-group.is-context .m-one-button{--m-button-radius: var(--m-grp-radius)}m-button-group .button-group.is-context m-button button,m-button-group .button-group.is-context m-one-button button,m-button-group .button-group.is-context .m-button button,m-button-group .button-group.is-context .m-one-button button,m-one-button-group .button-group.is-context m-button button,m-one-button-group .button-group.is-context m-one-button button,m-one-button-group .button-group.is-context .m-button button,m-one-button-group .button-group.is-context .m-one-button button{border-radius:var(--m-grp-radius)!important}m-button-group .button-group.is-context m-context-menu,m-button-group .button-group.is-context m-one-context-menu,m-button-group .button-group.is-context .m-context-menu,m-one-button-group .button-group.is-context m-context-menu,m-one-button-group .button-group.is-context m-one-context-menu,m-one-button-group .button-group.is-context .m-context-menu{display:flex;align-items:center;justify-content:center;width:var(--m-grp-height);height:100%;z-index:2;transition:all .4s cubic-bezier(.16,1,.3,1);border-top-left-radius:0!important;border-bottom-left-radius:0!important;border-top-right-radius:var(--m-grp-radius)!important;border-bottom-right-radius:var(--m-grp-radius)!important;overflow:hidden;--m-action-dots-padding: 0;--m-action-dots-width: 100%;--m-action-dots-height: 100%;--m-action-dots-icon-color: var(--m-text-secondary);--m-action-dots-icon-opacity: .7;--m-action-dots-hover-icon-color: var(--m-mm);--m-action-dots-hover-icon-opacity: 1;--m-action-dots-hover-icon-transform: scale(1.1)}m-button-group .button-group.is-context m-context-menu .action-dots,m-button-group .button-group.is-context m-one-context-menu .action-dots,m-button-group .button-group.is-context .m-context-menu .action-dots,m-one-button-group .button-group.is-context m-context-menu .action-dots,m-one-button-group .button-group.is-context m-one-context-menu .action-dots,m-one-button-group .button-group.is-context .m-context-menu .action-dots{border-top-left-radius:0!important;border-bottom-left-radius:0!important;border-top-right-radius:var(--m-grp-radius)!important;border-bottom-right-radius:var(--m-grp-radius)!important}m-button-group .button-group.is-context m-context-menu:hover,m-button-group .button-group.is-context m-one-context-menu:hover,m-button-group .button-group.is-context .m-context-menu:hover,m-one-button-group .button-group.is-context m-context-menu:hover,m-one-button-group .button-group.is-context m-one-context-menu:hover,m-one-button-group .button-group.is-context .m-context-menu:hover{background:#0000000f}\n"] }]
8785
8797
  }], ctorParameters: () => [], propDecorators: { buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], names: [{ type: i0.Input, args: [{ isSignal: true, alias: "names", required: false }] }], exclude: [{ type: i0.Input, args: [{ isSignal: true, alias: "exclude", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
8786
8798
 
8799
+ // Narrowest first: the first declared breakpoint the bar has fallen under is
8800
+ // the mode it takes, so `{md: icon, sm: menu}` reads as menu at 400px rather
8801
+ // than icon.
8802
+ const BREAKPOINTS$2 = [
8803
+ 'xs',
8804
+ 'sm',
8805
+ 'md',
8806
+ 'lg',
8807
+ 'xl',
8808
+ 'xxl',
8809
+ ];
8787
8810
  class ActionComponent extends ButtonGroupComponent {
8788
8811
  sticky = input(false, ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
8789
8812
  isStuck = signal(false, ...(ngDevMode ? [{ debugName: "isStuck" }] : /* istanbul ignore next */ []));
8813
+ // 'toggle' turns the bar into a segmented control. Declarable on the tag as
8814
+ // well as in the asset because a folded bar has no asset: the Design editor
8815
+ // consumes the Buttons dropped on a SectionAction into `[buttons]` and writes
8816
+ // every other setting as an attribute (ADR 0010).
8817
+ variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : /* istanbul ignore next */ []));
8818
+ // Design-mode only: Button name -> the id of the Control it was folded from.
8819
+ // The Canvas draws a folded Button through this bar rather than as a tag of
8820
+ // its own, so the `render-id` its ControlLayer measures has nowhere else to
8821
+ // ride. Keyed by name rather than by position because a bar may render a
8822
+ // named asset's Buttons ahead of the dropped ones, which shifts every index.
8823
+ renderIds = input(...(ngDevMode ? [undefined, { debugName: "renderIds" }] : /* istanbul ignore next */ []));
8824
+ resolvedVariant = computed(() => this.variant() ?? this.config()?.variant, ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
8825
+ // What the User last pressed. Undefined until then, which is what makes the
8826
+ // default the *first* Button rather than a name written anywhere: a toggle
8827
+ // opens on its first option, and `primary` still speaks for a bar that is a
8828
+ // row of commands.
8829
+ pressed = signal(undefined, ...(ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []));
8830
+ selected = computed(() => {
8831
+ const buttons = this.actionButtons();
8832
+ if (this.resolvedVariant() !== 'toggle')
8833
+ return this.config()?.primary;
8834
+ const pressed = this.pressed();
8835
+ if (pressed && buttons.some((b) => b.name === pressed))
8836
+ return pressed;
8837
+ return buttons[0]?.name;
8838
+ }, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
8839
+ // One step of squeeze, declarable on the tag — which is what the Design
8840
+ // editor writes, and what a bar with no `button_groups/<name>.yml` behind it
8841
+ // has: an object is not an attribute, so the asset's map cannot ride there
8842
+ // (ADR 0010). The two are read together, the attribute's step winning on the
8843
+ // breakpoint it names, so an asset that steps `icon` then `menu` can still
8844
+ // be re-pointed from the tag.
8845
+ squeezeAt = input(...(ngDevMode ? [undefined, { debugName: "squeezeAt" }] : /* istanbul ignore next */ []));
8846
+ squeezeMode = input(...(ngDevMode ? [undefined, { debugName: "squeezeMode" }] : /* istanbul ignore next */ []));
8847
+ squeeze = computed(() => {
8848
+ const fromAsset = this.config()?.squeeze;
8849
+ const at = this.squeezeAt();
8850
+ const mode = this.squeezeMode();
8851
+ if (!at || !mode)
8852
+ return fromAsset;
8853
+ return { ...fromAsset, [at]: mode };
8854
+ }, ...(ngDevMode ? [{ debugName: "squeeze" }] : /* istanbul ignore next */ []));
8855
+ // The bar's own width, measured rather than queried: a `@media` reports the
8856
+ // window, and this bar is routinely the width of a docked panel (ADR 0001).
8857
+ barWidth = signal(undefined, ...(ngDevMode ? [{ debugName: "barWidth" }] : /* istanbul ignore next */ []));
8858
+ activeSqueeze = computed(() => {
8859
+ const squeeze = this.squeeze();
8860
+ const width = this.barWidth();
8861
+ if (!squeeze || width === undefined)
8862
+ return undefined;
8863
+ for (const bp of BREAKPOINTS$2) {
8864
+ const mode = squeeze[bp];
8865
+ if (mode && width < GRID_BREAKPOINTS[bp])
8866
+ return mode;
8867
+ }
8868
+ return undefined;
8869
+ }, ...(ngDevMode ? [{ debugName: "activeSqueeze" }] : /* istanbul ignore next */ []));
8870
+ // Only where the icon can carry the Button on its own — a label dropped off
8871
+ // a Button with no glyph behind it leaves an empty box to press.
8872
+ isLabelHidden(button) {
8873
+ return this.activeSqueeze() === 'icon' && !!button.icon;
8874
+ }
8875
+ // Folded: the Button that speaks for the bar stays out, the rest go in the
8876
+ // menu. Below two Buttons there is nothing to fold, so the bar is left alone.
8877
+ visibleButtons = computed(() => {
8878
+ const buttons = this.actionButtons();
8879
+ if (this.activeSqueeze() !== 'menu' || buttons.length < 2)
8880
+ return buttons;
8881
+ const selected = this.selected();
8882
+ return [buttons.find((b) => b.name === selected) ?? buttons[0]];
8883
+ }, ...(ngDevMode ? [{ debugName: "visibleButtons" }] : /* istanbul ignore next */ []));
8884
+ menuButtons = computed(() => {
8885
+ const visible = this.visibleButtons();
8886
+ if (visible.length === this.actionButtons().length)
8887
+ return [];
8888
+ return this.actionButtons().filter((b) => b !== visible[0]);
8889
+ }, ...(ngDevMode ? [{ debugName: "menuButtons" }] : /* istanbul ignore next */ []));
8890
+ squeezeMenu = computed(() => ({
8891
+ align: 'right',
8892
+ icon: { name: this.config()?.contextMenuIcon ?? 'ellipsis-vertical' },
8893
+ remote: this.remote() ?? this.config()?.remote,
8894
+ options: [
8895
+ this.menuButtons().map((button) => ({
8896
+ id: button.name ?? '',
8897
+ label: button.label ?? button.name ?? '',
8898
+ icon: button.icon,
8899
+ disabled: this.isDisabled(button.name) || undefined,
8900
+ })),
8901
+ ],
8902
+ }), ...(ngDevMode ? [{ debugName: "squeezeMenu" }] : /* istanbul ignore next */ []));
8903
+ onMenuAction(item) {
8904
+ const button = this.actionButtons().find((b) => b.name === item.id);
8905
+ if (button)
8906
+ this.select(button);
8907
+ }
8908
+ // The bar's own colour, for the one thing that has no Button behind it: the
8909
+ // inversion of a selected segment whose Button declared no colour of its own.
8910
+ actionPallet = computed(() => this.pallet() ?? resolvePallet('mm', this.themeStore.color()), ...(ngDevMode ? [{ debugName: "actionPallet" }] : /* istanbul ignore next */ []));
8911
+ // Each Button's `color` decides how that Button is drawn; the bar's is only
8912
+ // the fallback under it. Same precedence m-button applies to itself
8913
+ // (button.ts `colorInput`) — a bar that painted over it would be an m-action
8914
+ // choosing a Button's colour, which is the one thing it must not do.
8915
+ // Undefined when neither declares one, which leaves the `--m-button-color`
8916
+ // preference chain in action.sass standing.
8917
+ buttonPallet(button) {
8918
+ const color = button.color ?? this.config()?.color;
8919
+ return color ? resolvePallet(color, this.themeStore.color()) : undefined;
8920
+ }
8921
+ // A folded bar shows one Button, and one Button lit is not a choice being
8922
+ // shown — it is a primary command that was never asked for. So nothing is
8923
+ // marked for as long as the menu holds the rest.
8924
+ isActive(button) {
8925
+ if (this.activeSqueeze() === 'menu' && this.menuButtons().length)
8926
+ return false;
8927
+ return button.name === this.selected();
8928
+ }
8929
+ // The filled reading of `active`, which only a segmented control has.
8930
+ isSelected(button) {
8931
+ return this.resolvedVariant() === 'toggle' && this.isActive(button);
8932
+ }
8933
+ // Fill and its inverse, written onto the element so one Button's colour
8934
+ // cannot reach the one beside it.
8935
+ fillColor(button) {
8936
+ return this.buttonPallet(button)?.color;
8937
+ }
8938
+ contrastColor(button) {
8939
+ return this.buttonPallet(button)?.contrastColor;
8940
+ }
8941
+ // The resting label. Neutral unless a colour was declared — a command bar is
8942
+ // a row of dark labels, not a row of tinted ones.
8943
+ labelColor(button) {
8944
+ return this.isSelected(button) ? undefined : this.fillColor(button);
8945
+ }
8946
+ // m-icon paints the SVG with a resolved colour rather than leaving
8947
+ // `currentColor` in it (lib-icon substitutes every occurrence), so neither
8948
+ // the Button's colour nor the selected segment's inversion can ride the
8949
+ // <button>'s `color` — both have to be handed to the Icon.
8950
+ iconColor(button) {
8951
+ if (this.isSelected(button)) {
8952
+ return (this.buttonPallet(button) ?? this.actionPallet()).contrastColor;
8953
+ }
8954
+ return this.fillColor(button);
8955
+ }
8956
+ // A toggle keeps the selection it was clicked into; a command bar keeps none.
8957
+ // `clicked` emits either way — which one is lit and what pressing it does are
8958
+ // separate questions.
8959
+ select(button) {
8960
+ if (this.resolvedVariant() === 'toggle') {
8961
+ this.pressed.set(button.name);
8962
+ }
8963
+ this.clicked.emit(button);
8964
+ }
8790
8965
  el = inject((ElementRef));
8791
8966
  destroyRef = inject(DestroyRef);
8792
8967
  // Unlike m-button-group (which renders <m-button> that self-resolves each
@@ -8815,6 +8990,16 @@ class ActionComponent extends ButtonGroupComponent {
8815
8990
  actionButtons = computed(() => this.actionButtonsResource.value() ?? this.mergedButtons(), ...(ngDevMode ? [{ debugName: "actionButtons" }] : /* istanbul ignore next */ []));
8816
8991
  constructor() {
8817
8992
  super();
8993
+ afterNextRender(() => {
8994
+ // No squeeze without a measurement, and no measurement without the
8995
+ // observer — a bar rendered where there is none (SSR, jsdom) stays the
8996
+ // full row it was authored as rather than guessing a width.
8997
+ if (typeof ResizeObserver === 'undefined')
8998
+ return;
8999
+ const observer = new ResizeObserver(([entry]) => this.barWidth.set(entry.contentRect.width));
9000
+ observer.observe(this.el.nativeElement);
9001
+ this.destroyRef.onDestroy(() => observer.disconnect());
9002
+ });
8818
9003
  afterNextRender(() => {
8819
9004
  if (!this.sticky())
8820
9005
  return;
@@ -8826,7 +9011,7 @@ class ActionComponent extends ButtonGroupComponent {
8826
9011
  });
8827
9012
  }
8828
9013
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
8829
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ActionComponent, isStandalone: true, selector: "m-action, m-one-action", inputs: { sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.m-action--host-sticky": "sticky()" } }, usesInheritance: true, ngImport: i0, template: "@if (config(); as group) {\n <div class=\"m-action\" [class.m-action--stuck]=\"isStuck()\">\n @for (button of actionButtons(); track button.name || button.label) {\n <button\n type=\"button\"\n class=\"m-action__btn\"\n [attr.data-testid]=\"(button.name || '') + '-btn'\"\n [class.active]=\"button.name === group.primary\"\n [disabled]=\"isDisabled(button.name)\"\n (click)=\"clicked.emit(button)\"\n >\n @if (button.icon) {\n <m-icon [name]=\"button.icon\" [remote]=\"group.remote\" />\n }\n @if (button.label) {\n <span class=\"m-action__label\">{{ button.label | translate }}</span>\n }\n </button>\n }\n </div>\n}\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}m-action,m-one-action{display:block;grid-column:1/-1}m-action.m-action--host-sticky,m-one-action.m-action--host-sticky{position:sticky;top:0;z-index:50;background:#ffffffeb;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.m-action{display:flex;flex-wrap:nowrap;background:transparent;width:100%;border-bottom:1px solid #f1f5f9}.m-action--stuck{border-bottom-color:#00000014;box-shadow:0 2px 10px #0000000f}.m-action__btn{flex:1;min-width:0;padding:1rem 2rem;border:none;background:transparent;color:#1e293b;font-weight:300;font-size:.9rem;display:flex;align-items:center;justify-content:center;gap:.6rem;white-space:nowrap;overflow:hidden;cursor:pointer;border-right:1px solid #f1f5f9;transition:all .25s cubic-bezier(.4,0,.2,1)}.m-action__btn:last-child{border-right:none}.m-action__btn:hover{background:#f8fafc;color:#3b82f6}.m-action__btn .m-icon{transition:transform .2s ease}.m-action__btn:hover .m-icon{transform:scale(1.1)}.m-action__btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.m-action__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}@container mag-grid (max-width: 767.98px){.m-action__btn{padding:1rem .75rem;gap:.4rem}}@container mag-grid (max-width: 575.98px){.m-action__btn{padding:.85rem .4rem;font-size:.8rem}}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "component", type: i0.forwardRef(() => IconComponent), selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "pipe", type: i0.forwardRef(() => TranslatePipe), name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
9014
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ActionComponent, isStandalone: true, selector: "m-action, m-one-action", inputs: { sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, renderIds: { classPropertyName: "renderIds", publicName: "renderIds", isSignal: true, isRequired: false, transformFunction: null }, squeezeAt: { classPropertyName: "squeezeAt", publicName: "squeezeAt", isSignal: true, isRequired: false, transformFunction: null }, squeezeMode: { classPropertyName: "squeezeMode", publicName: "squeezeMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.m-action--host-sticky": "sticky()" } }, usesInheritance: true, ngImport: i0, template: "@let buttons = actionButtons();\n<!-- No `config()` guard: a bar the Design editor folded its Buttons into has no\n `button_groups/<name>.yml` behind it \u2014 they ride on `[buttons]` instead\n (ADR 0009, ADR 0010) \u2014 so what decides whether the row exists is whether\n there are Buttons in it. Empty, it draws only on the Canvas, where it is\n the drop space a Button lands on. -->\n@if (buttons.length || isDesignMode) {\n <div\n class=\"m-action\"\n [class.m-action--stuck]=\"isStuck()\"\n [class.m-action--toggle]=\"resolvedVariant() === 'toggle'\"\n [class.m-action--icon-only]=\"activeSqueeze() === 'icon'\"\n >\n @for (button of visibleButtons(); track $index) {\n <button\n type=\"button\"\n class=\"m-action__btn\"\n [attr.data-testid]=\"(button.name || '') + '-btn'\"\n [attr.render-id]=\"renderIds()?.[button.name ?? '']\"\n [class.active]=\"isActive(button)\"\n [style.--m-action-color]=\"fillColor(button)\"\n [style.--m-action-color-contrast]=\"contrastColor(button)\"\n [style.--m-action-label]=\"labelColor(button)\"\n [disabled]=\"isDisabled(button.name)\"\n (click)=\"select(button)\"\n >\n @if (button.icon) {\n <m-icon\n [name]=\"button.icon\"\n [color]=\"iconColor(button)\"\n [remote]=\"remote() ?? config()?.remote\"\n />\n }\n @if (button.label && !isLabelHidden(button)) {\n <span class=\"m-action__label\">{{ button.label | translate }}</span>\n }\n </button>\n }\n @if (menuButtons().length) {\n <!-- The Buttons the bar could not fit. Squeezed rather than dropped:\n an action the User can still reach behind one press beats an action\n that silently stopped existing at 400px. -->\n <m-context-menu\n class=\"m-action__overflow\"\n [config]=\"squeezeMenu()\"\n [remote]=\"remote() ?? config()?.remote\"\n (action)=\"onMenuAction($event)\"\n />\n }\n @if (!buttons.length) {\n <!-- A bar with nothing in it has no box, and a slot with no box is a slot\n nothing can be dropped on \u2014 the same rect an empty projected Card is\n given (m-one-ui `.card-drop-space`). -->\n <span class=\"m-action__drop\"></span>\n }\n </div>\n}\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}m-action,m-one-action{display:block;width:100%;grid-column:1/-1}m-action.m-action--host-sticky,m-one-action.m-action--host-sticky{position:sticky;top:0;z-index:50;background:#ffffffeb;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.m-action{display:flex;flex-wrap:nowrap;background:transparent;width:100%;border-bottom:1px solid #f1f5f9;--m-action-color: var(--m-button-color, var(--m-one-button-color, var(--m-mm)));--m-action-color-contrast: var(--m-button-color-contrast, var(--m-one-button-color-contrast, #ffffff))}.m-action--stuck{border-bottom-color:#00000014;box-shadow:0 2px 10px #0000000f}.m-action__btn{flex:1;min-width:0;padding:1rem 2rem;border:none;background:transparent;color:var(--m-action-label, #1e293b);font-weight:300;font-size:.9rem;display:flex;align-items:center;justify-content:center;gap:.6rem;white-space:nowrap;overflow:hidden;cursor:pointer;border-right:1px solid #f1f5f9;transition:all .25s cubic-bezier(.4,0,.2,1)}.m-action__btn:last-child{border-right:none}.m-action__btn:hover{background:#f8fafc;color:var(--m-action-color)}.m-action__btn .m-icon{transition:transform .2s ease}.m-action__btn:hover .m-icon{transform:scale(1.1)}.m-action__btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.m-action__btn.active{color:var(--m-action-color);font-weight:500}.m-action--toggle .m-action__btn{position:relative}.m-action--toggle .m-action__btn.active{background:var(--m-action-color);color:var(--m-action-color-contrast)}.m-action--toggle .m-action__btn.active:hover:not(:disabled){background:color-mix(in srgb,var(--m-action-color) 88%,black);color:var(--m-action-color-contrast)}.m-action--icon-only .m-action__btn{padding:1rem .5rem;gap:0}.m-action__overflow{display:flex;align-items:center;padding:0 .5rem;flex:0 0 auto}.m-action__drop{display:block;flex:1;min-height:3.5rem;margin:.5rem;border:1px dashed currentColor;border-radius:.25rem;opacity:.4;pointer-events:none}.m-action__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}@container mag-grid (max-width: 767.98px){.m-action__btn{padding:1rem .75rem;gap:.4rem}}@container mag-grid (max-width: 575.98px){.m-action__btn{padding:.85rem .4rem;font-size:.8rem}}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "component", type: i0.forwardRef(() => IconComponent), selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "component", type: i0.forwardRef(() => ContextMenuComponent), selector: "m-context-menu, m-one-context-menu", inputs: ["toggle", "remote", "exclude", "visibilityRule", "disableRule", "extraData", "inverted"], outputs: ["toggleChange", "action"] }, { kind: "pipe", type: i0.forwardRef(() => TranslatePipe), name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
8830
9015
  }
8831
9016
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ActionComponent, decorators: [{
8832
9017
  type: Component,
@@ -8834,10 +9019,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
8834
9019
  CommonModule,
8835
9020
  forwardRef(() => IconComponent),
8836
9021
  forwardRef(() => TranslatePipe),
9022
+ forwardRef(() => ContextMenuComponent),
8837
9023
  ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
8838
9024
  '[class.m-action--host-sticky]': 'sticky()',
8839
- }, template: "@if (config(); as group) {\n <div class=\"m-action\" [class.m-action--stuck]=\"isStuck()\">\n @for (button of actionButtons(); track button.name || button.label) {\n <button\n type=\"button\"\n class=\"m-action__btn\"\n [attr.data-testid]=\"(button.name || '') + '-btn'\"\n [class.active]=\"button.name === group.primary\"\n [disabled]=\"isDisabled(button.name)\"\n (click)=\"clicked.emit(button)\"\n >\n @if (button.icon) {\n <m-icon [name]=\"button.icon\" [remote]=\"group.remote\" />\n }\n @if (button.label) {\n <span class=\"m-action__label\">{{ button.label | translate }}</span>\n }\n </button>\n }\n </div>\n}\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}m-action,m-one-action{display:block;grid-column:1/-1}m-action.m-action--host-sticky,m-one-action.m-action--host-sticky{position:sticky;top:0;z-index:50;background:#ffffffeb;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.m-action{display:flex;flex-wrap:nowrap;background:transparent;width:100%;border-bottom:1px solid #f1f5f9}.m-action--stuck{border-bottom-color:#00000014;box-shadow:0 2px 10px #0000000f}.m-action__btn{flex:1;min-width:0;padding:1rem 2rem;border:none;background:transparent;color:#1e293b;font-weight:300;font-size:.9rem;display:flex;align-items:center;justify-content:center;gap:.6rem;white-space:nowrap;overflow:hidden;cursor:pointer;border-right:1px solid #f1f5f9;transition:all .25s cubic-bezier(.4,0,.2,1)}.m-action__btn:last-child{border-right:none}.m-action__btn:hover{background:#f8fafc;color:#3b82f6}.m-action__btn .m-icon{transition:transform .2s ease}.m-action__btn:hover .m-icon{transform:scale(1.1)}.m-action__btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.m-action__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}@container mag-grid (max-width: 767.98px){.m-action__btn{padding:1rem .75rem;gap:.4rem}}@container mag-grid (max-width: 575.98px){.m-action__btn{padding:.85rem .4rem;font-size:.8rem}}\n"] }]
8840
- }], ctorParameters: () => [], propDecorators: { sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }] } });
9025
+ }, template: "@let buttons = actionButtons();\n<!-- No `config()` guard: a bar the Design editor folded its Buttons into has no\n `button_groups/<name>.yml` behind it \u2014 they ride on `[buttons]` instead\n (ADR 0009, ADR 0010) \u2014 so what decides whether the row exists is whether\n there are Buttons in it. Empty, it draws only on the Canvas, where it is\n the drop space a Button lands on. -->\n@if (buttons.length || isDesignMode) {\n <div\n class=\"m-action\"\n [class.m-action--stuck]=\"isStuck()\"\n [class.m-action--toggle]=\"resolvedVariant() === 'toggle'\"\n [class.m-action--icon-only]=\"activeSqueeze() === 'icon'\"\n >\n @for (button of visibleButtons(); track $index) {\n <button\n type=\"button\"\n class=\"m-action__btn\"\n [attr.data-testid]=\"(button.name || '') + '-btn'\"\n [attr.render-id]=\"renderIds()?.[button.name ?? '']\"\n [class.active]=\"isActive(button)\"\n [style.--m-action-color]=\"fillColor(button)\"\n [style.--m-action-color-contrast]=\"contrastColor(button)\"\n [style.--m-action-label]=\"labelColor(button)\"\n [disabled]=\"isDisabled(button.name)\"\n (click)=\"select(button)\"\n >\n @if (button.icon) {\n <m-icon\n [name]=\"button.icon\"\n [color]=\"iconColor(button)\"\n [remote]=\"remote() ?? config()?.remote\"\n />\n }\n @if (button.label && !isLabelHidden(button)) {\n <span class=\"m-action__label\">{{ button.label | translate }}</span>\n }\n </button>\n }\n @if (menuButtons().length) {\n <!-- The Buttons the bar could not fit. Squeezed rather than dropped:\n an action the User can still reach behind one press beats an action\n that silently stopped existing at 400px. -->\n <m-context-menu\n class=\"m-action__overflow\"\n [config]=\"squeezeMenu()\"\n [remote]=\"remote() ?? config()?.remote\"\n (action)=\"onMenuAction($event)\"\n />\n }\n @if (!buttons.length) {\n <!-- A bar with nothing in it has no box, and a slot with no box is a slot\n nothing can be dropped on \u2014 the same rect an empty projected Card is\n given (m-one-ui `.card-drop-space`). -->\n <span class=\"m-action__drop\"></span>\n }\n </div>\n}\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}m-action,m-one-action{display:block;width:100%;grid-column:1/-1}m-action.m-action--host-sticky,m-one-action.m-action--host-sticky{position:sticky;top:0;z-index:50;background:#ffffffeb;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.m-action{display:flex;flex-wrap:nowrap;background:transparent;width:100%;border-bottom:1px solid #f1f5f9;--m-action-color: var(--m-button-color, var(--m-one-button-color, var(--m-mm)));--m-action-color-contrast: var(--m-button-color-contrast, var(--m-one-button-color-contrast, #ffffff))}.m-action--stuck{border-bottom-color:#00000014;box-shadow:0 2px 10px #0000000f}.m-action__btn{flex:1;min-width:0;padding:1rem 2rem;border:none;background:transparent;color:var(--m-action-label, #1e293b);font-weight:300;font-size:.9rem;display:flex;align-items:center;justify-content:center;gap:.6rem;white-space:nowrap;overflow:hidden;cursor:pointer;border-right:1px solid #f1f5f9;transition:all .25s cubic-bezier(.4,0,.2,1)}.m-action__btn:last-child{border-right:none}.m-action__btn:hover{background:#f8fafc;color:var(--m-action-color)}.m-action__btn .m-icon{transition:transform .2s ease}.m-action__btn:hover .m-icon{transform:scale(1.1)}.m-action__btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.m-action__btn.active{color:var(--m-action-color);font-weight:500}.m-action--toggle .m-action__btn{position:relative}.m-action--toggle .m-action__btn.active{background:var(--m-action-color);color:var(--m-action-color-contrast)}.m-action--toggle .m-action__btn.active:hover:not(:disabled){background:color-mix(in srgb,var(--m-action-color) 88%,black);color:var(--m-action-color-contrast)}.m-action--icon-only .m-action__btn{padding:1rem .5rem;gap:0}.m-action__overflow{display:flex;align-items:center;padding:0 .5rem;flex:0 0 auto}.m-action__drop{display:block;flex:1;min-height:3.5rem;margin:.5rem;border:1px dashed currentColor;border-radius:.25rem;opacity:.4;pointer-events:none}.m-action__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}@container mag-grid (max-width: 767.98px){.m-action__btn{padding:1rem .75rem;gap:.4rem}}@container mag-grid (max-width: 575.98px){.m-action__btn{padding:.85rem .4rem;font-size:.8rem}}\n"] }]
9026
+ }], ctorParameters: () => [], propDecorators: { sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], renderIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderIds", required: false }] }], squeezeAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "squeezeAt", required: false }] }], squeezeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "squeezeMode", required: false }] }] } });
8841
9027
 
8842
9028
  class BaseInputComponent {
8843
9029
  focused = input(false, ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
@@ -9264,14 +9450,23 @@ class SectionSearchComponent extends BaseTextInputComponent {
9264
9450
  </div>
9265
9451
  } @else {
9266
9452
  <div class="section-search__bar">
9267
- <m-header [level]="3" [label]="resolvedLabel()" />
9453
+ <!-- The heading slot, the shape a SectionHeader's title slot is: the
9454
+ design Canvas projects a span here, and the written label below is
9455
+ what a bar with no slot Control still draws. Drawn beside the slot
9456
+ rather than as its fallback — the Canvas always projects the span,
9457
+ empty until a Control lands in it, so a fallback would blank the
9458
+ label the bar is still configured with. -->
9459
+ <ng-content />
9460
+ @if (resolvedLabel(); as headerLabel) {
9461
+ <m-header [level]="3" [label]="headerLabel" />
9462
+ }
9268
9463
  <div class="section-search__toggle">
9269
9464
  <!-- asset: buttons/search_toggle.yml -->
9270
9465
  <m-one-button name="search_toggle" (clicked)="open()" />
9271
9466
  </div>
9272
9467
  </div>
9273
9468
  }
9274
- `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:flex;align-items:center;width:100%;grid-column:1/-1;box-sizing:border-box;min-height:var(--section-header-min-height, calc(var(--section-header-py, 1rem) * 2 + 1.375rem));border-bottom:1px solid var(--m-section-search-border, var(--m-backdrop-border));padding:var(--section-header-py, .75rem) var(--section-px, 1rem);--m-header-size: 1rem}:host.has-sidepanel{padding-right:50px}:host(.no-border){border-bottom:none}:host(.is-sticky-enabled){position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}.section-search__bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%}.section-search__bar m-header{flex:1;min-width:0;font-size:1rem}.section-search__bar .section-search__toggle{flex-shrink:0;--m-button-size: 1rem !important}.section-search__field{display:flex;align-items:center;width:100%}.section-search__field m-input-clear{width:100%}\n"], dependencies: [{ kind: "component", type: ClearableInputComponent, selector: "m-input-clear", inputs: ["value", "config", "required", "disabled", "readonly", "invalid", "focused", "touched", "errors", "icon", "placeholder", "type", "inputId"], outputs: ["valueChange", "touchedChange"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "component", type: HeaderComponent$1, selector: "m-header", inputs: ["level", "label", "actionButton", "actionLabel", "noTranslate"], outputs: ["actionClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
9469
+ `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:flex;align-items:center;width:100%;grid-column:1/-1;box-sizing:border-box;min-height:var(--section-header-min-height, calc(var(--section-header-py, 1rem) * 2 + 1.375rem));border-bottom:1px solid var(--m-section-search-border, var(--m-backdrop-border));padding:var(--section-header-py, .75rem) var(--section-px, 1rem);--m-header-size: 1rem}:host.has-sidepanel{padding-right:50px}:host(.no-border){border-bottom:none}:host(.is-sticky-enabled){position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}.section-search__bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%}.section-search__bar>*:not(.section-search__toggle){flex:1;min-width:0}.section-search__bar m-header{font-size:1rem}.section-search__bar .section-search__toggle{flex-shrink:0;margin-inline-start:auto;--m-button-size: 1rem !important}.section-search__field{display:flex;align-items:center;width:100%}.section-search__field m-input-clear{width:100%}\n"], dependencies: [{ kind: "component", type: ClearableInputComponent, selector: "m-input-clear", inputs: ["value", "config", "required", "disabled", "readonly", "invalid", "focused", "touched", "errors", "icon", "placeholder", "type", "inputId"], outputs: ["valueChange", "touchedChange"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "component", type: HeaderComponent$1, selector: "m-header", inputs: ["level", "label", "actionButton", "actionLabel", "noTranslate"], outputs: ["actionClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
9275
9470
  }
9276
9471
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionSearchComponent, decorators: [{
9277
9472
  type: Component,
@@ -9288,7 +9483,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
9288
9483
  </div>
9289
9484
  } @else {
9290
9485
  <div class="section-search__bar">
9291
- <m-header [level]="3" [label]="resolvedLabel()" />
9486
+ <!-- The heading slot, the shape a SectionHeader's title slot is: the
9487
+ design Canvas projects a span here, and the written label below is
9488
+ what a bar with no slot Control still draws. Drawn beside the slot
9489
+ rather than as its fallback — the Canvas always projects the span,
9490
+ empty until a Control lands in it, so a fallback would blank the
9491
+ label the bar is still configured with. -->
9492
+ <ng-content />
9493
+ @if (resolvedLabel(); as headerLabel) {
9494
+ <m-header [level]="3" [label]="headerLabel" />
9495
+ }
9292
9496
  <div class="section-search__toggle">
9293
9497
  <!-- asset: buttons/search_toggle.yml -->
9294
9498
  <m-one-button name="search_toggle" (clicked)="open()" />
@@ -9301,7 +9505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
9301
9505
  '[class.is-sticky]': 'isSticky()',
9302
9506
  '[class.has-sidepanel]': 'sidepanel()',
9303
9507
  '[class.no-border]': 'noBorder()',
9304
- }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:flex;align-items:center;width:100%;grid-column:1/-1;box-sizing:border-box;min-height:var(--section-header-min-height, calc(var(--section-header-py, 1rem) * 2 + 1.375rem));border-bottom:1px solid var(--m-section-search-border, var(--m-backdrop-border));padding:var(--section-header-py, .75rem) var(--section-px, 1rem);--m-header-size: 1rem}:host.has-sidepanel{padding-right:50px}:host(.no-border){border-bottom:none}:host(.is-sticky-enabled){position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}.section-search__bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%}.section-search__bar m-header{flex:1;min-width:0;font-size:1rem}.section-search__bar .section-search__toggle{flex-shrink:0;--m-button-size: 1rem !important}.section-search__field{display:flex;align-items:center;width:100%}.section-search__field m-input-clear{width:100%}\n"] }]
9508
+ }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:flex;align-items:center;width:100%;grid-column:1/-1;box-sizing:border-box;min-height:var(--section-header-min-height, calc(var(--section-header-py, 1rem) * 2 + 1.375rem));border-bottom:1px solid var(--m-section-search-border, var(--m-backdrop-border));padding:var(--section-header-py, .75rem) var(--section-px, 1rem);--m-header-size: 1rem}:host.has-sidepanel{padding-right:50px}:host(.no-border){border-bottom:none}:host(.is-sticky-enabled){position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}.section-search__bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%}.section-search__bar>*:not(.section-search__toggle){flex:1;min-width:0}.section-search__bar m-header{font-size:1rem}.section-search__bar .section-search__toggle{flex-shrink:0;margin-inline-start:auto;--m-button-size: 1rem !important}.section-search__field{display:flex;align-items:center;width:100%}.section-search__field m-input-clear{width:100%}\n"] }]
9305
9509
  }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], focused: [{ type: i0.Input, args: [{ isSignal: true, alias: "focused", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], startOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "startOpen", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }] } });
9306
9510
 
9307
9511
  function isWithinBoundary(value, draggable, axis) {
@@ -10225,15 +10429,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
10225
10429
  }, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;border-bottom:1px solid var(--m-section-filter-border, var(--m-backdrop-border))}:host(.no-border){border-bottom:none}.section-filter__bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:var(--section-header-min-height, calc(var(--section-header-py, 1rem) * 2 + 1.375rem));padding:var(--section-header-py, .75rem) var(--section-px, 1rem)}.section-filter__bar m-header{flex:1;min-width:0;font-size:1rem}.section-filter__bar .section-filter__toggle{flex-shrink:0;--m-button-size: 1rem !important}.section-filter__bar .section-filter__toggle.is-active{--m-button-color: var(--m-mm) !important}.section-filter__badges{display:flex;flex-wrap:wrap;gap:.375rem;flex:1;min-width:0;align-items:center}.section-filter__badges m-badge{--m-badge-size: .6rem}.section-filter__badges m-badge m-button{--m-button-size: .6em;--m-button-color: var(--m-mm);opacity:.7}.section-filter__badges m-badge m-button:hover{opacity:1}.section-filter__dropdown{flex-shrink:0}\n"] }]
10226
10430
  }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionsAsset: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsAsset", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], dropdownRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SelectorDirective), { isSignal: true }] }] } });
10227
10431
 
10228
- const GRID_BREAKPOINTS = {
10229
- xs: 0,
10230
- sm: 576,
10231
- md: 768,
10232
- lg: 992,
10233
- xl: 1200,
10234
- xxl: 1400,
10235
- };
10236
-
10237
10432
  const BREAKPOINTS$1 = [
10238
10433
  'xs',
10239
10434
  'sm',
@@ -17683,7 +17878,7 @@ class WrapperInputComponent extends ConfigComponent {
17683
17878
  break;
17684
17879
  }
17685
17880
  case InputType.TOGGLE: {
17686
- const { ToggleInputComponent } = await import('./magmonium-one-toggle-C5BYRe1c.mjs');
17881
+ const { ToggleInputComponent } = await import('./magmonium-one-toggle-B0-QV2Ca.mjs');
17687
17882
  this.createDynamicComponent(seq, ToggleInputComponent, [], true);
17688
17883
  break;
17689
17884
  }
@@ -17695,12 +17890,12 @@ class WrapperInputComponent extends ConfigComponent {
17695
17890
  break;
17696
17891
  }
17697
17892
  case InputType.PASSWORD: {
17698
- const { PasswordInputComponent } = await import('./magmonium-one-password-CPg8XcHq.mjs');
17893
+ const { PasswordInputComponent } = await import('./magmonium-one-password-8vNjP9eJ.mjs');
17699
17894
  this.createDynamicComponent(seq, PasswordInputComponent);
17700
17895
  break;
17701
17896
  }
17702
17897
  case InputType.OTP: {
17703
- const { OtpInputComponent } = await import('./magmonium-one-otp-BODZD9Ns.mjs');
17898
+ const { OtpInputComponent } = await import('./magmonium-one-otp-vnlfiBxo.mjs');
17704
17899
  this.createDynamicComponent(seq, OtpInputComponent);
17705
17900
  break;
17706
17901
  }
@@ -18693,7 +18888,7 @@ var toggleRadio = /*#__PURE__*/Object.freeze({
18693
18888
  // Stand-ins for a card list that has no options yet — DesignMode only. They
18694
18889
  // carry no label: nothing is mapped to them yet, and a name shown here would
18695
18890
  // read as a choice the Field offers. Bare boxes say the shape and no more.
18696
- const DESIGN_STUB_IDS = ['stub-1', 'stub-2', 'stub-3'];
18891
+ const DESIGN_STUB_IDS$1 = ['stub-1', 'stub-2', 'stub-3'];
18697
18892
  class SelectableCardInputComponent extends BaseInputComponent {
18698
18893
  element = input(...(ngDevMode ? [undefined, { debugName: "element" }] : /* istanbul ignore next */ []));
18699
18894
  data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
@@ -18728,7 +18923,7 @@ class SelectableCardInputComponent extends BaseInputComponent {
18728
18923
  return data;
18729
18924
  const options = this.cardOptions();
18730
18925
  if (!options.length && this.isDesignMode) {
18731
- return DESIGN_STUB_IDS.map((id) => ({ id }));
18926
+ return DESIGN_STUB_IDS$1.map((id) => ({ id }));
18732
18927
  }
18733
18928
  return options.map((option) => ({
18734
18929
  id: option.value,
@@ -20947,6 +21142,312 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
20947
21142
  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@charset \"UTF-8\";@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%}.technical-meter{position:relative;height:100px;width:100%;margin-top:2rem;-webkit-user-select:none;user-select:none}.technical-meter .meter__track{position:absolute;top:58px;left:0;right:0;height:4px;border-radius:2px;background:linear-gradient(90deg,transparent 0%,var(--m-border) 6%,var(--m-border) 94%,transparent 100%);box-shadow:inset 0 1px 2px var(--m-backdrop-shadow)}.technical-meter .meter__track:before{content:\"\";position:absolute;left:0;right:0;top:-5px;height:14px;background:repeating-linear-gradient(90deg,var(--m-border) 0 1px,transparent 1px 10%);opacity:.35;pointer-events:none}.technical-meter .meter__range-fill{position:absolute;top:55px;height:10px;border-radius:5px;transition:left .9s cubic-bezier(.34,1.2,.64,1),width .9s cubic-bezier(.34,1.2,.64,1)}.technical-meter .meter__range-fill.bullish{background:linear-gradient(90deg,#6da82f14,#6da82f59);border:1px solid rgba(109,168,47,.4);box-shadow:0 0 14px #6da82f29,inset 0 1px #ffffff4d}.technical-meter .meter__range-fill.bearish{background:linear-gradient(270deg,#eb191a14,#eb191a59);border:1px solid rgba(235,25,26,.4);box-shadow:0 0 14px #eb191a21,inset 0 1px #ffffff4d}.technical-meter .meter__range-fill:not(.bullish):not(.bearish){background:var(--m-backdrop-mm);border:1px solid rgba(65,105,225,.28);box-shadow:0 0 10px #4169e11a}.technical-meter .meter__gap-badge{position:absolute;top:6px;transform:translate(-50%);display:inline-flex;align-items:center;gap:.2rem;padding:.2rem .55rem;border-radius:20px;font-size:.67rem;font-weight:700;letter-spacing:.025em;white-space:nowrap;z-index:5;pointer-events:none;transition:left .9s cubic-bezier(.34,1.2,.64,1)}.technical-meter .meter__gap-badge.bullish{background:var(--m-success-lite);color:var(--m-success);box-shadow:0 2px 8px #6da82f2e,0 0 0 1px #6da82f1f}.technical-meter .meter__gap-badge.bullish:before{content:\"\\25b2\";font-size:.48rem;line-height:1}.technical-meter .meter__gap-badge.bearish{background:var(--m-backdrop-error);color:var(--m-error);box-shadow:0 2px 8px #eb191a24,0 0 0 1px #eb191a24}.technical-meter .meter__gap-badge.bearish:before{content:\"\\25bc\";font-size:.48rem;line-height:1}.technical-meter .meter__gap-badge:not(.bullish):not(.bearish){background:var(--m-highlight);color:var(--m-mm);box-shadow:0 2px 6px var(--m-backdrop-shadow)}.technical-meter .meter__marker{position:absolute;top:58px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;z-index:2;cursor:default}.technical-meter .meter__marker .marker__point{margin-top:-2px;width:8px;height:8px;background:var(--m-text-tertiary);border:2px solid var(--m-background);border-radius:50%;box-shadow:0 1px 4px var(--m-backdrop-shadow);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}.technical-meter .meter__marker.sma50 .marker__point{background:#f59e0b}.technical-meter .meter__marker.sma100 .marker__point{background:#f97316}.technical-meter .meter__marker.sma200 .marker__point{background:var(--m-error)}.technical-meter .meter__marker.low52w .marker__point,.technical-meter .meter__marker.high52w .marker__point{margin-top:-7px;width:2px;height:18px;background:var(--m-text-quaternary);border:none;border-radius:1px;box-shadow:none}.technical-meter .meter__marker.low52w:before,.technical-meter .meter__marker.high52w:before{bottom:22px}.technical-meter .meter__marker:before{content:attr(data-label);position:absolute;bottom:12px;font-size:.57rem;font-weight:700;color:var(--m-text-tertiary);white-space:nowrap;text-transform:uppercase;letter-spacing:.07em;transition:opacity .2s ease}.technical-meter .meter__marker.level-offset:before{bottom:26px}.technical-meter .meter__marker:after{content:attr(data-value);position:absolute;top:-52px;left:50%;transform:translate(-50%) translateY(6px) scale(.9);padding:.28rem .62rem;background:var(--m-tool-tip-bg);color:var(--m-tool-tip-col);font-size:.7rem;font-weight:600;border-radius:8px;opacity:0;visibility:hidden;transition:all .18s cubic-bezier(.16,1,.3,1);pointer-events:none;white-space:nowrap;z-index:20;box-shadow:0 4px 16px #00000024}.technical-meter .meter__marker:hover{z-index:10}.technical-meter .meter__marker:hover:after{opacity:1;visibility:visible;transform:translate(-50%) translateY(0) scale(1)}.technical-meter .meter__marker:hover:before{opacity:0}.technical-meter .meter__marker:hover .marker__point{transform:scale(1.7)}.technical-meter .meter__marker .marker__gap{position:absolute;top:12px;font-size:.6rem;font-weight:600;white-space:nowrap;color:var(--m-text-tertiary);font-variant-numeric:tabular-nums}.technical-meter .meter__marker .marker__gap.positive{color:var(--m-success)}.technical-meter .meter__marker .marker__gap.negative{color:var(--m-error)}.technical-meter .meter__marker.level-offset .marker__gap{top:24px}.technical-meter .meter__marker.price-marker{z-index:3}.technical-meter .meter__marker.price-marker:before{display:block;content:\"\";position:absolute;top:-19px;left:50%;transform:translate(-50%);width:1px;height:14px;background:linear-gradient(to top,rgba(65,105,225,.45),transparent);font-size:0;text-transform:none;letter-spacing:0;white-space:normal}.technical-meter .meter__marker.price-marker .marker__point{margin-top:-5px;width:14px;height:14px;background:radial-gradient(circle at 35% 30%,var(--m-mm-lite),var(--m-mm) 70%);border:2.5px solid var(--m-background);box-shadow:0 0 0 3px #4169e133}.technical-meter .meter__marker.price-marker .marker__point.pulse{animation:pricePulse 2.5s ease-in-out infinite}.technical-meter .meter__marker.price-marker .marker__label{position:absolute;bottom:28px;font-size:.76rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--m-text);white-space:nowrap;background:var(--m-frame);padding:.17rem .45rem;border-radius:5px;line-height:1.35;border:1px solid var(--m-border);transition:transform .3s ease}.technical-meter .meter__marker.price-marker.dodge-left .marker__label{transform:translate(-58%)}.technical-meter .meter__marker.price-marker.dodge-right .marker__label{transform:translate(58%)}.technical-meter .meter__marker.forecast-marker{z-index:2}.technical-meter .meter__marker.forecast-marker:before{display:block;content:\"\";position:absolute;top:-27px;left:50%;transform:translate(-50%);width:1px;height:18px;font-size:0;text-transform:none;letter-spacing:0;white-space:normal}.technical-meter .meter__marker.forecast-marker.bullish{color:var(--m-success)}.technical-meter .meter__marker.forecast-marker.bullish:before{background:repeating-linear-gradient(to bottom,rgba(109,168,47,.55) 0 3px,transparent 3px 6px)}.technical-meter .meter__marker.forecast-marker.bullish .marker__label{background:var(--m-success-lite);border-color:#6da82f40}.technical-meter .meter__marker.forecast-marker.bullish .marker__icon-wrap{background:var(--m-backdrop-success)}.technical-meter .meter__marker.forecast-marker.bearish{color:var(--m-error)}.technical-meter .meter__marker.forecast-marker.bearish:before{background:repeating-linear-gradient(to bottom,rgba(235,25,26,.55) 0 3px,transparent 3px 6px)}.technical-meter .meter__marker.forecast-marker.bearish .marker__label{background:#eb191a14;border-color:#eb191a40}.technical-meter .meter__marker.forecast-marker.bearish .marker__icon-wrap{background:var(--m-backdrop-error)}.technical-meter .meter__marker.forecast-marker:not(.bullish):not(.bearish){color:var(--m-text-secondary)}.technical-meter .meter__marker.forecast-marker:not(.bullish):not(.bearish):before{background:repeating-linear-gradient(to bottom,rgba(101,109,118,.4) 0 3px,transparent 3px 6px)}.technical-meter .meter__marker.forecast-marker:not(.bullish):not(.bearish) .marker__label{background:var(--m-frame);border-color:var(--m-border)}.technical-meter .meter__marker.forecast-marker:not(.bullish):not(.bearish) .marker__icon-wrap{background:var(--m-frame)}.technical-meter .meter__marker.forecast-marker .marker__label{position:absolute;bottom:40px;font-size:.74rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:inherit;padding:.17rem .45rem;border-radius:5px;line-height:1.35;border:1px solid transparent}.technical-meter .meter__marker.forecast-marker .marker__icon-wrap{margin-top:-9px;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%}@keyframes pricePulse{0%,to{box-shadow:0 0 0 3px #4169e138}50%{box-shadow:0 0 0 7px #4169e10a,0 0 14px #4169e147}}\n"] }]
20948
21143
  }], propDecorators: { price: [{ type: i0.Input, args: [{ isSignal: true, alias: "price", required: true }] }], forecast: [{ type: i0.Input, args: [{ isSignal: true, alias: "forecast", required: false }] }], sma50: [{ type: i0.Input, args: [{ isSignal: true, alias: "sma50", required: false }] }], sma100: [{ type: i0.Input, args: [{ isSignal: true, alias: "sma100", required: false }] }], sma200: [{ type: i0.Input, args: [{ isSignal: true, alias: "sma200", required: false }] }], high52w: [{ type: i0.Input, args: [{ isSignal: true, alias: "high52w", required: false }] }], low52w: [{ type: i0.Input, args: [{ isSignal: true, alias: "low52w", required: false }] }] } });
20949
21144
 
21145
+ // Stand-ins for a carousel whose collection is not bound yet — DesignMode only,
21146
+ // the reason a SelectableCard draws its own: an empty track has no height, and
21147
+ // a Control with no rect cannot be selected or moved on a Canvas.
21148
+ const DESIGN_STUB_IDS = ['stub-1', 'stub-2', 'stub-3'];
21149
+ // How far a pointer has to travel before the drag counts as a slide change.
21150
+ // Below it the track springs back, so a press that wanders is still a press.
21151
+ const DRAG_THRESHOLD_PX = 48;
21152
+ const DEFAULT_INTERVAL_MS = 5000;
21153
+ /**
21154
+ * A full-width band that draws one slide at a time out of a bound collection,
21155
+ * with the body of a slide written inline as a template or mounted per row as a
21156
+ * component — the same two ways a SelectableCard draws a card.
21157
+ *
21158
+ * Unlike `m-carousel`, it holds no artwork of its own: a slide is whatever it
21159
+ * was handed, and every setting here is about the band around it — how tall it
21160
+ * may get, where its indicators sit and how they are drawn, and whether it
21161
+ * advances by itself. Width is not among them: it is always the full width of
21162
+ * what holds it.
21163
+ */
21164
+ class SectionCarouselComponent extends ConfigComponent {
21165
+ subFolder = LAYOUT_ASSET_FOLDER.section_carousel;
21166
+ // The rows, mapped. Empty is the ordinary state before a binding resolves —
21167
+ // every read starts `undefined` — so nothing here treats it as an error.
21168
+ data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
21169
+ // A slide rendered by a mounted component: a slide is instantiated per row,
21170
+ // so the markup has nowhere to write its selector.
21171
+ element = input(...(ngDevMode ? [undefined, { debugName: "element" }] : /* istanbul ignore next */ []));
21172
+ // A slide body written inline instead. `ng-content` has no reach here — it
21173
+ // projects once, so inside the `@for` it would land in one slide and leave
21174
+ // the rest empty.
21175
+ template = input(...(ngDevMode ? [undefined, { debugName: "template" }] : /* istanbul ignore next */ []));
21176
+ // Which slide is showing now, every time it changes — by drag, by indicator,
21177
+ // or by the clock.
21178
+ slideChange = output();
21179
+ // The row behind that slide, for a caller that binds the row rather than the
21180
+ // position. Both fire together; a caller binds whichever it needs.
21181
+ itemChange = output();
21182
+ index = signal(0, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
21183
+ hovered = signal(false, ...(ngDevMode ? [{ debugName: "hovered" }] : /* istanbul ignore next */ []));
21184
+ dragging = signal(false, ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
21185
+ dragOffset = signal(0, ...(ngDevMode ? [{ debugName: "dragOffset" }] : /* istanbul ignore next */ []));
21186
+ dragStartX = signal(0, ...(ngDevMode ? [{ debugName: "dragStartX" }] : /* istanbul ignore next */ []));
21187
+ dragPointerId = signal(undefined, ...(ngDevMode ? [{ debugName: "dragPointerId" }] : /* istanbul ignore next */ []));
21188
+ items = computed(() => {
21189
+ const data = this.data() ?? [];
21190
+ if (data.length)
21191
+ return data;
21192
+ return this.isDesignMode ? DESIGN_STUB_IDS.map((id) => ({ id })) : [];
21193
+ }, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
21194
+ maxHeightLength = computed(() => toLength$1(this.config()?.maxHeight, true), ...(ngDevMode ? [{ debugName: "maxHeightLength" }] : /* istanbul ignore next */ []));
21195
+ position = computed(() => this.config()?.indicator ?? 'bottom', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
21196
+ showIndicators = computed(() => this.position() !== 'hidden' && this.items().length > 1, ...(ngDevMode ? [{ debugName: "showIndicators" }] : /* istanbul ignore next */ []));
21197
+ isCapsule = computed(() => this.config()?.indicatorShape === 'capsule', ...(ngDevMode ? [{ debugName: "isCapsule" }] : /* istanbul ignore next */ []));
21198
+ positionClass = computed(() => `m-section-carousel--indicator-${this.position()}`, ...(ngDevMode ? [{ debugName: "positionClass" }] : /* istanbul ignore next */ []));
21199
+ trackTransform = computed(() => {
21200
+ const base = this.index() * 100;
21201
+ const drag = this.dragOffset();
21202
+ return drag
21203
+ ? `translateX(calc(-${base}% + ${drag}px))`
21204
+ : `translateX(-${base}%)`;
21205
+ }, ...(ngDevMode ? [{ debugName: "trackTransform" }] : /* istanbul ignore next */ []));
21206
+ constructor() {
21207
+ super();
21208
+ // A collection that shrank under the index leaves it pointing past the end,
21209
+ // which is an empty viewport rather than a wrong slide.
21210
+ effect(() => {
21211
+ const count = this.items().length;
21212
+ if (count && this.index() > count - 1)
21213
+ this.index.set(count - 1);
21214
+ });
21215
+ effect((onCleanup) => {
21216
+ if (!this.isAdvancing())
21217
+ return;
21218
+ const interval = this.config()?.interval || DEFAULT_INTERVAL_MS;
21219
+ const timer = setInterval(() => this.next(), interval);
21220
+ onCleanup(() => clearInterval(timer));
21221
+ });
21222
+ }
21223
+ /**
21224
+ * Whether the clock is running. A pointer resting on the carousel stops it
21225
+ * unless `pauseOnHover` is turned off, and so does a drag in progress: a
21226
+ * slide moving out from under the hand holding it is the one advance nobody
21227
+ * asked for.
21228
+ */
21229
+ isAdvancing = computed(() => {
21230
+ const config = this.config();
21231
+ if (!config?.autoPlay || this.items().length < 2)
21232
+ return false;
21233
+ if (this.dragging())
21234
+ return false;
21235
+ return !(this.hovered() && config.pauseOnHover !== false);
21236
+ }, ...(ngDevMode ? [{ debugName: "isAdvancing" }] : /* istanbul ignore next */ []));
21237
+ slideInputs = (item) => ({ ...(item.inputs ?? {}) });
21238
+ projectedTemplate = contentChild((TemplateRef), ...(ngDevMode ? [{ debugName: "projectedTemplate" }] : /* istanbul ignore next */ []));
21239
+ // A bound `template` wins over the projected one, the way `data` wins over
21240
+ // the design stubs: what a caller passes at runtime is the more deliberate.
21241
+ slideTemplate = computed(() => this.template() ?? this.projectedTemplate(), ...(ngDevMode ? [{ debugName: "slideTemplate" }] : /* istanbul ignore next */ []));
21242
+ slideContext = (item, index, first, last) => ({
21243
+ $implicit: item,
21244
+ item,
21245
+ row: item.row,
21246
+ index,
21247
+ first,
21248
+ last,
21249
+ });
21250
+ goTo = (index) => {
21251
+ const items = this.items();
21252
+ if (!items.length || index === this.index())
21253
+ return;
21254
+ const clamped = Math.max(0, Math.min(index, items.length - 1));
21255
+ if (clamped === this.index())
21256
+ return;
21257
+ this.index.set(clamped);
21258
+ this.slideChange.emit(clamped);
21259
+ this.itemChange.emit(items[clamped]?.row);
21260
+ };
21261
+ next = () => {
21262
+ const count = this.items().length;
21263
+ if (!count)
21264
+ return;
21265
+ const at = this.index();
21266
+ if (at === count - 1) {
21267
+ if (this.config()?.loop === false)
21268
+ return;
21269
+ this.goTo(0);
21270
+ return;
21271
+ }
21272
+ this.goTo(at + 1);
21273
+ };
21274
+ prev = () => {
21275
+ const count = this.items().length;
21276
+ if (!count)
21277
+ return;
21278
+ const at = this.index();
21279
+ if (at === 0) {
21280
+ if (this.config()?.loop === false)
21281
+ return;
21282
+ this.goTo(count - 1);
21283
+ return;
21284
+ }
21285
+ this.goTo(at - 1);
21286
+ };
21287
+ onPointerLeave = () => {
21288
+ this.hovered.set(false);
21289
+ // A pointer that left mid-drag never reports its release here, so the drag
21290
+ // ends with the track where it was rather than stuck under the cursor.
21291
+ if (this.dragging())
21292
+ this.onDragEnd();
21293
+ };
21294
+ onDragStart = (event) => {
21295
+ if (this.config()?.drag === false || this.items().length < 2)
21296
+ return;
21297
+ this.dragPointerId.set(event.pointerId);
21298
+ this.dragStartX.set(event.clientX);
21299
+ this.dragOffset.set(0);
21300
+ this.dragging.set(true);
21301
+ };
21302
+ onDragMove = (event) => {
21303
+ if (!this.dragging() || event.pointerId !== this.dragPointerId())
21304
+ return;
21305
+ this.dragOffset.set(event.clientX - this.dragStartX());
21306
+ };
21307
+ onDragEnd = () => {
21308
+ if (!this.dragging())
21309
+ return;
21310
+ const offset = this.dragOffset();
21311
+ this.dragging.set(false);
21312
+ this.dragOffset.set(0);
21313
+ this.dragPointerId.set(undefined);
21314
+ if (Math.abs(offset) < DRAG_THRESHOLD_PX)
21315
+ return;
21316
+ if (offset < 0)
21317
+ this.next();
21318
+ else
21319
+ this.prev();
21320
+ };
21321
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
21322
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionCarouselComponent, isStandalone: true, selector: "m-section-carousel, m-one-section-carousel", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slideChange: "slideChange", itemChange: "itemChange" }, host: { properties: { "style.--m-section-carousel-max-height": "maxHeightLength()" } }, queries: [{ propertyName: "projectedTemplate", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
21323
+ <div
21324
+ class="m-section-carousel"
21325
+ [class]="positionClass()"
21326
+ (pointerenter)="hovered.set(true)"
21327
+ (pointerleave)="onPointerLeave()"
21328
+ >
21329
+ <div
21330
+ class="m-section-carousel__viewport"
21331
+ (pointerdown)="onDragStart($event)"
21332
+ (pointermove)="onDragMove($event)"
21333
+ (pointerup)="onDragEnd()"
21334
+ (pointercancel)="onDragEnd()"
21335
+ >
21336
+ <div
21337
+ class="m-section-carousel__track"
21338
+ [class.m-section-carousel__track--dragging]="dragging()"
21339
+ [style.transform]="trackTransform()"
21340
+ >
21341
+ @for (item of items(); track item.id) {
21342
+ <div
21343
+ class="m-section-carousel__slide"
21344
+ [attr.aria-hidden]="$index === index() ? null : true"
21345
+ >
21346
+ @if (element(); as slide) {
21347
+ <ng-container
21348
+ *ngComponentOutlet="slide; inputs: slideInputs(item)"
21349
+ />
21350
+ } @else if (slideTemplate(); as tpl) {
21351
+ <ng-container
21352
+ *ngTemplateOutlet="
21353
+ tpl;
21354
+ context: slideContext(item, $index, $first, $last)
21355
+ "
21356
+ />
21357
+ }
21358
+ </div>
21359
+ }
21360
+ </div>
21361
+ </div>
21362
+
21363
+ @if (showIndicators()) {
21364
+ <div class="m-section-carousel__indicators" role="tablist">
21365
+ @for (item of items(); track item.id) {
21366
+ <button
21367
+ type="button"
21368
+ class="m-section-carousel__indicator"
21369
+ [class.m-section-carousel__indicator--capsule]="isCapsule()"
21370
+ [class.m-section-carousel__indicator--active]="$index === index()"
21371
+ role="tab"
21372
+ [attr.aria-selected]="$index === index()"
21373
+ [attr.aria-label]="
21374
+ 'go-to-slide' | translate: { number: ($index + 1).toString() }
21375
+ "
21376
+ (click)="goTo($index)"
21377
+ ></button>
21378
+ }
21379
+ </div>
21380
+ }
21381
+ </div>
21382
+ `, isInline: true, styles: [":host{display:block;width:100%}.m-section-carousel{display:flex;flex-direction:column;gap:.75rem;width:100%}.m-section-carousel__viewport{position:relative;flex:1;min-width:0;overflow:hidden;max-height:var(--m-section-carousel-max-height, none);touch-action:pan-y}.m-section-carousel__track{display:flex;width:100%;transition:transform .35s cubic-bezier(.4,0,.2,1)}.m-section-carousel__track--dragging{transition:none}.m-section-carousel__slide{flex:0 0 100%;min-width:0;max-height:var(--m-section-carousel-max-height, none);overflow:hidden}.m-section-carousel__indicators{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap}.m-section-carousel__indicator{appearance:none;border:none;padding:0;cursor:pointer;width:.5rem;height:.5rem;border-radius:50%;background:var(--m-section-carousel-indicator, currentColor);opacity:.35;transition:opacity .2s ease,width .2s ease,background .2s ease}.m-section-carousel__indicator--capsule{width:1.25rem;height:.375rem;border-radius:999px}.m-section-carousel__indicator--active{opacity:1}.m-section-carousel__indicator--capsule.m-section-carousel__indicator--active{width:2rem}.m-section-carousel--indicator-top{flex-direction:column-reverse}.m-section-carousel--indicator-left{flex-direction:row-reverse;align-items:center}.m-section-carousel--indicator-right{flex-direction:row;align-items:center}.m-section-carousel--indicator-left .m-section-carousel__indicators,.m-section-carousel--indicator-right .m-section-carousel__indicators{flex-direction:column}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
21383
+ }
21384
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionCarouselComponent, decorators: [{
21385
+ type: Component,
21386
+ args: [{ selector: 'm-section-carousel, m-one-section-carousel', imports: [NgComponentOutlet, NgTemplateOutlet, TranslatePipe], template: `
21387
+ <div
21388
+ class="m-section-carousel"
21389
+ [class]="positionClass()"
21390
+ (pointerenter)="hovered.set(true)"
21391
+ (pointerleave)="onPointerLeave()"
21392
+ >
21393
+ <div
21394
+ class="m-section-carousel__viewport"
21395
+ (pointerdown)="onDragStart($event)"
21396
+ (pointermove)="onDragMove($event)"
21397
+ (pointerup)="onDragEnd()"
21398
+ (pointercancel)="onDragEnd()"
21399
+ >
21400
+ <div
21401
+ class="m-section-carousel__track"
21402
+ [class.m-section-carousel__track--dragging]="dragging()"
21403
+ [style.transform]="trackTransform()"
21404
+ >
21405
+ @for (item of items(); track item.id) {
21406
+ <div
21407
+ class="m-section-carousel__slide"
21408
+ [attr.aria-hidden]="$index === index() ? null : true"
21409
+ >
21410
+ @if (element(); as slide) {
21411
+ <ng-container
21412
+ *ngComponentOutlet="slide; inputs: slideInputs(item)"
21413
+ />
21414
+ } @else if (slideTemplate(); as tpl) {
21415
+ <ng-container
21416
+ *ngTemplateOutlet="
21417
+ tpl;
21418
+ context: slideContext(item, $index, $first, $last)
21419
+ "
21420
+ />
21421
+ }
21422
+ </div>
21423
+ }
21424
+ </div>
21425
+ </div>
21426
+
21427
+ @if (showIndicators()) {
21428
+ <div class="m-section-carousel__indicators" role="tablist">
21429
+ @for (item of items(); track item.id) {
21430
+ <button
21431
+ type="button"
21432
+ class="m-section-carousel__indicator"
21433
+ [class.m-section-carousel__indicator--capsule]="isCapsule()"
21434
+ [class.m-section-carousel__indicator--active]="$index === index()"
21435
+ role="tab"
21436
+ [attr.aria-selected]="$index === index()"
21437
+ [attr.aria-label]="
21438
+ 'go-to-slide' | translate: { number: ($index + 1).toString() }
21439
+ "
21440
+ (click)="goTo($index)"
21441
+ ></button>
21442
+ }
21443
+ </div>
21444
+ }
21445
+ </div>
21446
+ `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
21447
+ '[style.--m-section-carousel-max-height]': 'maxHeightLength()',
21448
+ }, styles: [":host{display:block;width:100%}.m-section-carousel{display:flex;flex-direction:column;gap:.75rem;width:100%}.m-section-carousel__viewport{position:relative;flex:1;min-width:0;overflow:hidden;max-height:var(--m-section-carousel-max-height, none);touch-action:pan-y}.m-section-carousel__track{display:flex;width:100%;transition:transform .35s cubic-bezier(.4,0,.2,1)}.m-section-carousel__track--dragging{transition:none}.m-section-carousel__slide{flex:0 0 100%;min-width:0;max-height:var(--m-section-carousel-max-height, none);overflow:hidden}.m-section-carousel__indicators{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap}.m-section-carousel__indicator{appearance:none;border:none;padding:0;cursor:pointer;width:.5rem;height:.5rem;border-radius:50%;background:var(--m-section-carousel-indicator, currentColor);opacity:.35;transition:opacity .2s ease,width .2s ease,background .2s ease}.m-section-carousel__indicator--capsule{width:1.25rem;height:.375rem;border-radius:999px}.m-section-carousel__indicator--active{opacity:1}.m-section-carousel__indicator--capsule.m-section-carousel__indicator--active{width:2rem}.m-section-carousel--indicator-top{flex-direction:column-reverse}.m-section-carousel--indicator-left{flex-direction:row-reverse;align-items:center}.m-section-carousel--indicator-right{flex-direction:row;align-items:center}.m-section-carousel--indicator-left .m-section-carousel__indicators,.m-section-carousel--indicator-right .m-section-carousel__indicators{flex-direction:column}\n"] }]
21449
+ }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], slideChange: [{ type: i0.Output, args: ["slideChange"] }], itemChange: [{ type: i0.Output, args: ["itemChange"] }], projectedTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
21450
+
20950
21451
  class RemoteLoaderService {
20951
21452
  httpService = inject(HttpService);
20952
21453
  loginStore = inject(LOGIN_STORE, { optional: true });
@@ -31662,5 +32163,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
31662
32163
  * Generated bundle index. Do not edit.
31663
32164
  */
31664
32165
 
31665
- 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, SectionFormComponent 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, SectionComponent as bY, SectionFilterComponent as bZ, SectionFooterComponent 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, WatermarkComponent as c$, SectionFormItemComponent as c0, SectionHeaderComponent as c1, SectionHeroComponent as c2, SectionSearchComponent as c3, SectionStepperComponent as c4, SectionTabsComponent as c5, SectionToggleComponent as c6, SectionToggleItemDirective as c7, SelectableCardInputComponent as c8, SelectorDirective as c9, ThemeDataService as cA, ThemeService as cB, ThemeStore as cC, TimeAgoPipe as cD, TimelineComponent as cE, ToggleButtonComponent as cF, ToggleInputComponent as cG, ToggleRadioInputComponent as cH, ToolTipDirective as cI, TooltipComponent as cJ, TranslateService as cK, TreeGridComponent as cL, URL_SEP as cM, USER_STORE_REF as cN, USER_TAB_MAP as cO, UlComponent as cP, UniverseComponent as cQ, UserApiService as cR, UserAvatarComponent as cS, UserComponent as cT, UserNavComponent as cU, UserSettingsComponent as cV, UserStore as cW, WC_ROUTE_CHANGED_EVENT as cX, WC_SEARCH_GROUPS as cY, WIN_USER_TAB_HOOK as cZ, WIN_USER_TAB_KEY as c_, SettingsSearchBarComponent as ca, SettingsSearchService as cb, ShapeComponent as cc, SharedStoreRegistry as cd, SidePanelDirective as ce, Size as cf, SocketStore as cg, SortComponent as ch, StatComponent as ci, StepComponent as cj, StepperComponent as ck, StepsComponent as cl, StorageService as cm, StrokeLinecap as cn, StrokeLinejoin as co, SummaryComponent as cp, SvgGeneratorComponent as cq, SvgGeneratorService as cr, SvgService as cs, TOTAL_COLUMNS as ct, TRANSLATION_SOURCE as cu, TableComponent as cv, TechnicalMeterComponent as cw, TextInputComponent as cx, TextareaInputComponent as cy, ThemeComponent as cz, APP_CONTEXT_REF as d, linkToNav as d$, WcRouterStore as d0, WrapperInputComponent as d1, anchorNavId as d2, applyColorsToElement as d3, bootstrapMagApp as d4, bootstrapPwaInstall as d5, buildWcBaseUrl as d6, calculateLuminance as d7, calculateRanks as d8, cellText as d9, getUniqueId as dA, getValue as dB, hasErrorComputed as dC, hexToRgb as dD, hslToRgb$1 as dE, initMagmoniumApp as dF, initialNotificationState as dG, initialState$2 as dH, initials as dI, injectAuthenticate as dJ, injectInstallApp as dK, injectParentSize as dL, injectScrollSticky as dM, isButtonName as dN, isCancelledComputed as dO, isExtensiblePlatformNavId as dP, isJson as dQ, isLoadingComputed as dR, isLocalhost as dS, isPlatformNavId as dT, isSize as dU, isTierPreview as dV, isUrlLocalhost as dW, isValidNavId as dX, isValidNavSegment as dY, isWebComponent as dZ, linkToId as d_, checkFilterCondition as da, childNavId as db, classListSignal as dc, coerceSize as dd, cornerEdge as de, cornerSide as df, createMap as dg, createPlatformNavMap as dh, deriveAvatarGradient as di, deriveContrastColor as dj, deriveOppositeColor as dk, derivePropertyName as dl, emailValidation as dm, evaluate as dn, evaluateBool as dp, flattenTreeGridRows as dq, formatBadgeCount as dr, fullName as ds, generateClipPath as dt, generateTransform as du, getClassList as dv, getProperty as dw, getScrollParent as dx, getTierFromPreviewPath as dy, getTreeGridRow as dz, ASSET_BASE_URL as e, toCssLength as e$, loadingActions as e0, mInterceptor as e1, manualValidation as e2, matchFieldValidation as e3, maxLengthValidation as e4, maxValidation as e5, mergePlatformNav as e6, mergeUnique as e7, mergeUniqueBy as e8, mergeUniqueWith as e9, provideOverlayWidgets as eA, providePlatformNavWidgets as eB, provideSearch as eC, provideSizeContext as eD, provideUserTabs as eE, publicGuard as eF, readFieldPatterns as eG, renderAddress as eH, requiredValidation as eI, resolveConfigAsset as eJ, resolveIconSize as eK, resolvePallet as eL, resolvePatternRules as eM, resolveSize as eN, rgbToHex as eO, rgbToHsl as eP, rowHasChildren as eQ, samePatterns as eR, segmentsToNavId as eS, setProperty as eT, setTreeGridChildren as eU, settingsWidgets as eV, shouldShowBadge as eW, splitNavId as eX, stringToColor as eY, toAttrBool as eZ, toAttrNumber as e_, minAgeValidation as ea, minLengthValidation as eb, minValidation as ec, miniMarkToHtml as ed, navIdChain as ee, navIdFor as ef, navIdSegment as eg, navIdToRoutePath as eh, navIdToSegments as ei, navToId as ej, parentNavId as ek, parseAddress as el, parseColor as em, parsePatternNames as en, patternValidation as eo, patternsValidation as ep, platformNavWidgets as eq, privateGuard as er, processImageToSvg as es, provideAppContext as et, provideMagAppConfig as eu, provideMagWcConfig as ev, provideMagWcRoutes as ew, provideModalComponents as ex, provideMurlUrlSerializer as ey, provideNavWidgets as ez, AccordionBodyDirective as f, toHostNavId as f0, toLength$1 as f1, toLocalNavId as f2, toggleTreeGridRow as f3, unfetchedPlatformNav as f4, urlValidation as f5, 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 };
31666
- //# sourceMappingURL=magmonium-one-magmonium-one-D0QGVzFK.mjs.map
32166
+ 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 };
32167
+ //# sourceMappingURL=magmonium-one-magmonium-one-DF6cOA0l.mjs.map