@magmonium/one 0.2.24 → 0.2.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/{magmonium-one-magmonium-one-CPDCRguV.mjs → magmonium-one-magmonium-one-BmSXZeTv.mjs} +815 -311
- package/fesm2022/magmonium-one-magmonium-one-BmSXZeTv.mjs.map +1 -0
- package/fesm2022/{magmonium-one-otp-LcVRya6_.mjs → magmonium-one-otp-f1o0Dsf3.mjs} +2 -2
- package/fesm2022/{magmonium-one-otp-LcVRya6_.mjs.map → magmonium-one-otp-f1o0Dsf3.mjs.map} +1 -1
- package/fesm2022/{magmonium-one-password-DgKbJq2O.mjs → magmonium-one-password-CX8kghKQ.mjs} +2 -2
- package/fesm2022/{magmonium-one-password-DgKbJq2O.mjs.map → magmonium-one-password-CX8kghKQ.mjs.map} +1 -1
- package/fesm2022/{magmonium-one-toggle-D-JsuCLL.mjs → magmonium-one-toggle-BuXPZomi.mjs} +2 -2
- package/fesm2022/{magmonium-one-toggle-D-JsuCLL.mjs.map → magmonium-one-toggle-BuXPZomi.mjs.map} +1 -1
- package/fesm2022/magmonium-one.mjs +1 -1
- package/package.json +1 -1
- package/types/magmonium-one.d.ts +383 -87
- package/fesm2022/magmonium-one-magmonium-one-CPDCRguV.mjs.map +0 -1
|
@@ -6447,7 +6447,7 @@ class SectionFormItemComponent extends ConfigComponent {
|
|
|
6447
6447
|
break;
|
|
6448
6448
|
}
|
|
6449
6449
|
case InputType.TOGGLE: {
|
|
6450
|
-
const { ToggleInputComponent } = await import('./magmonium-one-toggle-
|
|
6450
|
+
const { ToggleInputComponent } = await import('./magmonium-one-toggle-BuXPZomi.mjs');
|
|
6451
6451
|
this.createDynamicComponent(seq, ToggleInputComponent, [], true);
|
|
6452
6452
|
break;
|
|
6453
6453
|
}
|
|
@@ -6459,12 +6459,12 @@ class SectionFormItemComponent extends ConfigComponent {
|
|
|
6459
6459
|
break;
|
|
6460
6460
|
}
|
|
6461
6461
|
case InputType.PASSWORD: {
|
|
6462
|
-
const { PasswordInputComponent } = await import('./magmonium-one-password-
|
|
6462
|
+
const { PasswordInputComponent } = await import('./magmonium-one-password-CX8kghKQ.mjs');
|
|
6463
6463
|
this.createDynamicComponent(seq, PasswordInputComponent);
|
|
6464
6464
|
break;
|
|
6465
6465
|
}
|
|
6466
6466
|
case InputType.OTP: {
|
|
6467
|
-
const { OtpInputComponent } = await import('./magmonium-one-otp-
|
|
6467
|
+
const { OtpInputComponent } = await import('./magmonium-one-otp-f1o0Dsf3.mjs');
|
|
6468
6468
|
this.createDynamicComponent(seq, OtpInputComponent);
|
|
6469
6469
|
break;
|
|
6470
6470
|
}
|
|
@@ -10288,11 +10288,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
10288
10288
|
}]
|
|
10289
10289
|
}], ctorParameters: () => [], propDecorators: { mHeroColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "mHeroColor", required: true }] }], mHeroColorVar: [{ type: i0.Input, args: [{ isSignal: true, alias: "mHeroColorVar", required: false }] }] } });
|
|
10290
10290
|
|
|
10291
|
+
const FILTER_VARIANTS = [
|
|
10292
|
+
'single',
|
|
10293
|
+
'multi',
|
|
10294
|
+
'range',
|
|
10295
|
+
];
|
|
10296
|
+
/** The default a Filter falls back to, and the one variant left off the tag. */
|
|
10297
|
+
const DEFAULT_FILTER_VARIANT = 'single';
|
|
10298
|
+
/**
|
|
10299
|
+
* Whether this variant's key carries a list rather than one value. `range`
|
|
10300
|
+
* counts: a pair is a list, which is what keeps `FilterValue` unchanged and
|
|
10301
|
+
* `filterList` working over every variant that has ever shipped.
|
|
10302
|
+
*/
|
|
10303
|
+
const filterHoldsList = (variant) => variant !== 'single';
|
|
10304
|
+
/** Whether this variant is authored with bounds rather than with options. */
|
|
10305
|
+
const filterHoldsRange = (variant) => variant === 'range';
|
|
10306
|
+
/** Whether this variant picks from an OptionSet. The complement of the above. */
|
|
10307
|
+
const filterHoldsOptions = (variant) => variant !== 'range';
|
|
10308
|
+
|
|
10291
10309
|
class SectionFilterPanelComponent {
|
|
10292
10310
|
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
10293
10311
|
selected = input([], ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
|
|
10294
|
-
|
|
10312
|
+
/**
|
|
10313
|
+
* The two option-picking variants and no others: a `range` Filter opens
|
|
10314
|
+
* `SectionFilterRangePanelComponent` instead, the two panels being what the
|
|
10315
|
+
* variant chooses between rather than a mode inside one of them.
|
|
10316
|
+
*/
|
|
10317
|
+
variant = input('single', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
10295
10318
|
action = output();
|
|
10319
|
+
multiple = computed(() => this.variant() === 'multi', ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
|
|
10296
10320
|
isSelected = (val) => this.selected().includes(val);
|
|
10297
10321
|
selectOption = (opt) => {
|
|
10298
10322
|
if (opt.disabled)
|
|
@@ -10300,8 +10324,12 @@ class SectionFilterPanelComponent {
|
|
|
10300
10324
|
this.action.emit(opt);
|
|
10301
10325
|
};
|
|
10302
10326
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionFilterPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10303
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionFilterPanelComponent, isStandalone: true, selector: "m-section-filter-panel", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null },
|
|
10304
|
-
<ul
|
|
10327
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionFilterPanelComponent, isStandalone: true, selector: "m-section-filter-panel", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: `
|
|
10328
|
+
<ul
|
|
10329
|
+
class="section-filter-panel"
|
|
10330
|
+
role="listbox"
|
|
10331
|
+
[attr.aria-multiselectable]="multiple() || null"
|
|
10332
|
+
>
|
|
10305
10333
|
@for (opt of options(); track opt.value) {
|
|
10306
10334
|
@let selected = isSelected(opt.value);
|
|
10307
10335
|
<li
|
|
@@ -10315,23 +10343,34 @@ class SectionFilterPanelComponent {
|
|
|
10315
10343
|
(keydown.space)="$event.preventDefault(); selectOption(opt)"
|
|
10316
10344
|
tabindex="0"
|
|
10317
10345
|
>
|
|
10318
|
-
|
|
10319
|
-
|
|
10320
|
-
|
|
10321
|
-
|
|
10322
|
-
|
|
10323
|
-
|
|
10324
|
-
|
|
10346
|
+
<!-- The mark says which variant this is before anything is picked:
|
|
10347
|
+
a box under multiple, a ring under single-select. Drawn here
|
|
10348
|
+
rather than reusing m-checkbox / m-radio, which are form inputs
|
|
10349
|
+
carrying a name, an id and a ControlValueAccessor — a panel row
|
|
10350
|
+
is a listbox option and owns none of that. -->
|
|
10351
|
+
<span
|
|
10352
|
+
class="section-filter-panel__mark"
|
|
10353
|
+
[class.section-filter-panel__mark--radio]="!multiple()"
|
|
10354
|
+
[class.is-checked]="selected"
|
|
10355
|
+
>
|
|
10356
|
+
@if (selected && multiple()) {
|
|
10357
|
+
<m-icon [config]="{ name: 'check' }" />
|
|
10358
|
+
}
|
|
10359
|
+
</span>
|
|
10325
10360
|
<span>{{ opt.label | translate }}</span>
|
|
10326
10361
|
</li>
|
|
10327
10362
|
}
|
|
10328
10363
|
</ul>
|
|
10329
|
-
`, 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)}}.section-filter-panel{list-style:none;margin:0;padding:0;min-width:10rem;max-height:15rem;overflow-y:auto;background:var(--m-background);border:1px solid var(--m-mm);border-radius:0;animation:filter-panel-in .2s ease-out}.section-filter-panel__option{display:flex;align-items:center;gap:.5em;padding:calc(.6rem * var(--filter-size, 1)) calc(.9rem * var(--filter-size, 1));cursor:pointer;font-size:calc(.875rem * var(--filter-size, 1));color:var(--m-text);transition:all .3s cubic-bezier(.16,1,.3,1);outline:none}.section-filter-panel__option:hover:not(.is-disabled){background-color:var(--m-backdrop-standard)}.section-filter-panel__option:focus-visible:not(.is-disabled){background-color:var(--m-backdrop-standard)}.section-filter-panel__option.is-selected{color:var(--m-mm);font-weight:500}.section-filter-panel__option.is-disabled{opacity:.4;cursor:not-allowed}.section-filter-
|
|
10364
|
+
`, 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)}}.section-filter-panel{list-style:none;margin:0;padding:0;min-width:10rem;max-height:15rem;overflow-y:auto;background:var(--m-background);border:1px solid var(--m-mm);border-radius:0;animation:filter-panel-in .2s ease-out}.section-filter-panel__option{display:flex;align-items:center;gap:.5em;padding:calc(.6rem * var(--filter-size, 1)) calc(.9rem * var(--filter-size, 1));cursor:pointer;font-size:calc(.875rem * var(--filter-size, 1));color:var(--m-text);transition:all .3s cubic-bezier(.16,1,.3,1);outline:none}.section-filter-panel__option:hover:not(.is-disabled){background-color:var(--m-backdrop-standard)}.section-filter-panel__option:focus-visible:not(.is-disabled){background-color:var(--m-backdrop-standard)}.section-filter-panel__option.is-selected{color:var(--m-mm);font-weight:500}.section-filter-panel__option.is-disabled{opacity:.4;cursor:not-allowed}.section-filter-panel__mark{width:1em;height:1em;flex-shrink:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid var(--m-backdrop-border);border-radius:2px;color:var(--m-background);font-size:inherit;transition:all .3s cubic-bezier(.16,1,.3,1)}.section-filter-panel__mark m-icon{--m-icon-size: .75em;display:flex}.section-filter-panel__mark.is-checked{background-color:var(--m-mm);border-color:var(--m-mm)}.section-filter-panel__mark--radio{border-radius:50%;background-color:transparent}.section-filter-panel__mark--radio.is-checked{background-color:transparent;border-color:var(--m-mm)}.section-filter-panel__mark--radio.is-checked:after{content:\"\";width:.5em;height:.5em;border-radius:50%;background-color:var(--m-mm)}@keyframes filter-panel-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10330
10365
|
}
|
|
10331
10366
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionFilterPanelComponent, decorators: [{
|
|
10332
10367
|
type: Component,
|
|
10333
10368
|
args: [{ selector: 'm-section-filter-panel', template: `
|
|
10334
|
-
<ul
|
|
10369
|
+
<ul
|
|
10370
|
+
class="section-filter-panel"
|
|
10371
|
+
role="listbox"
|
|
10372
|
+
[attr.aria-multiselectable]="multiple() || null"
|
|
10373
|
+
>
|
|
10335
10374
|
@for (opt of options(); track opt.value) {
|
|
10336
10375
|
@let selected = isSelected(opt.value);
|
|
10337
10376
|
<li
|
|
@@ -10345,34 +10384,400 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
10345
10384
|
(keydown.space)="$event.preventDefault(); selectOption(opt)"
|
|
10346
10385
|
tabindex="0"
|
|
10347
10386
|
>
|
|
10348
|
-
|
|
10349
|
-
|
|
10350
|
-
|
|
10351
|
-
|
|
10352
|
-
|
|
10353
|
-
|
|
10354
|
-
|
|
10387
|
+
<!-- The mark says which variant this is before anything is picked:
|
|
10388
|
+
a box under multiple, a ring under single-select. Drawn here
|
|
10389
|
+
rather than reusing m-checkbox / m-radio, which are form inputs
|
|
10390
|
+
carrying a name, an id and a ControlValueAccessor — a panel row
|
|
10391
|
+
is a listbox option and owns none of that. -->
|
|
10392
|
+
<span
|
|
10393
|
+
class="section-filter-panel__mark"
|
|
10394
|
+
[class.section-filter-panel__mark--radio]="!multiple()"
|
|
10395
|
+
[class.is-checked]="selected"
|
|
10396
|
+
>
|
|
10397
|
+
@if (selected && multiple()) {
|
|
10398
|
+
<m-icon [config]="{ name: 'check' }" />
|
|
10399
|
+
}
|
|
10400
|
+
</span>
|
|
10355
10401
|
<span>{{ opt.label | translate }}</span>
|
|
10356
10402
|
</li>
|
|
10357
10403
|
}
|
|
10358
10404
|
</ul>
|
|
10359
|
-
`, imports: [IconComponent, TranslatePipe], 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)}}.section-filter-panel{list-style:none;margin:0;padding:0;min-width:10rem;max-height:15rem;overflow-y:auto;background:var(--m-background);border:1px solid var(--m-mm);border-radius:0;animation:filter-panel-in .2s ease-out}.section-filter-panel__option{display:flex;align-items:center;gap:.5em;padding:calc(.6rem * var(--filter-size, 1)) calc(.9rem * var(--filter-size, 1));cursor:pointer;font-size:calc(.875rem * var(--filter-size, 1));color:var(--m-text);transition:all .3s cubic-bezier(.16,1,.3,1);outline:none}.section-filter-panel__option:hover:not(.is-disabled){background-color:var(--m-backdrop-standard)}.section-filter-panel__option:focus-visible:not(.is-disabled){background-color:var(--m-backdrop-standard)}.section-filter-panel__option.is-selected{color:var(--m-mm);font-weight:500}.section-filter-panel__option.is-disabled{opacity:.4;cursor:not-allowed}.section-filter-
|
|
10360
|
-
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }],
|
|
10405
|
+
`, imports: [IconComponent, TranslatePipe], 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)}}.section-filter-panel{list-style:none;margin:0;padding:0;min-width:10rem;max-height:15rem;overflow-y:auto;background:var(--m-background);border:1px solid var(--m-mm);border-radius:0;animation:filter-panel-in .2s ease-out}.section-filter-panel__option{display:flex;align-items:center;gap:.5em;padding:calc(.6rem * var(--filter-size, 1)) calc(.9rem * var(--filter-size, 1));cursor:pointer;font-size:calc(.875rem * var(--filter-size, 1));color:var(--m-text);transition:all .3s cubic-bezier(.16,1,.3,1);outline:none}.section-filter-panel__option:hover:not(.is-disabled){background-color:var(--m-backdrop-standard)}.section-filter-panel__option:focus-visible:not(.is-disabled){background-color:var(--m-backdrop-standard)}.section-filter-panel__option.is-selected{color:var(--m-mm);font-weight:500}.section-filter-panel__option.is-disabled{opacity:.4;cursor:not-allowed}.section-filter-panel__mark{width:1em;height:1em;flex-shrink:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid var(--m-backdrop-border);border-radius:2px;color:var(--m-background);font-size:inherit;transition:all .3s cubic-bezier(.16,1,.3,1)}.section-filter-panel__mark m-icon{--m-icon-size: .75em;display:flex}.section-filter-panel__mark.is-checked{background-color:var(--m-mm);border-color:var(--m-mm)}.section-filter-panel__mark--radio{border-radius:50%;background-color:transparent}.section-filter-panel__mark--radio.is-checked{background-color:transparent;border-color:var(--m-mm)}.section-filter-panel__mark--radio.is-checked:after{content:\"\";width:.5em;height:.5em;border-radius:50%;background-color:var(--m-mm)}@keyframes filter-panel-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"] }]
|
|
10406
|
+
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
|
|
10407
|
+
|
|
10408
|
+
class TextInputComponent extends BaseTextInputComponent {
|
|
10409
|
+
value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
10410
|
+
config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
|
|
10411
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
10412
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
10413
|
+
invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
10414
|
+
touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
10415
|
+
focused = input(false, ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
10416
|
+
errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
10417
|
+
showErrors = computed(() => this.touched() && this.invalid(), ...(ngDevMode ? [{ debugName: "showErrors" }] : /* istanbul ignore next */ []));
|
|
10418
|
+
hideErrors = input(false, ...(ngDevMode ? [{ debugName: "hideErrors" }] : /* istanbul ignore next */ []));
|
|
10419
|
+
// A `number` Field draws this same component (WrapperInputComponent has no
|
|
10420
|
+
// case of its own for it), so the type it declares decides the element it
|
|
10421
|
+
// draws. What *leaves* the field is coerced a level up, in the wrapper: an
|
|
10422
|
+
// `<input>` reads its value as text whatever its type, and every other
|
|
10423
|
+
// component on this base is a string field.
|
|
10424
|
+
isNumber = computed(() => {
|
|
10425
|
+
const config = this.config();
|
|
10426
|
+
return !!config && config.type === InputType.NUMBER;
|
|
10427
|
+
}, ...(ngDevMode ? [{ debugName: "isNumber" }] : /* istanbul ignore next */ []));
|
|
10428
|
+
onInput(event) {
|
|
10429
|
+
const target = event.target;
|
|
10430
|
+
this.setValue(target?.value ?? '');
|
|
10431
|
+
}
|
|
10432
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
10433
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TextInputComponent, isStandalone: true, selector: "m-text-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, hideErrors: { classPropertyName: "hideErrors", publicName: "hideErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "class": "config()?.variant ? 'm-input--' + config()?.variant : ''" } }, usesInheritance: true, ngImport: i0, template: `
|
|
10434
|
+
@if (config(); as text) {
|
|
10435
|
+
@if (text.label) {
|
|
10436
|
+
<m-label
|
|
10437
|
+
[for]="text.name ?? ''"
|
|
10438
|
+
[placeholder]="text.label"
|
|
10439
|
+
[params]="text.params"
|
|
10440
|
+
[required]="required()"
|
|
10441
|
+
[disabled]="disabled()"
|
|
10442
|
+
/>
|
|
10443
|
+
}
|
|
10444
|
+
<div class="input-wrapper">
|
|
10445
|
+
@if (text.icon) {
|
|
10446
|
+
<m-icon
|
|
10447
|
+
[name]="text.icon"
|
|
10448
|
+
[color]="iconColor()"
|
|
10449
|
+
[one]="text.one"
|
|
10450
|
+
/>
|
|
10451
|
+
}
|
|
10452
|
+
@if (text.prefix) {
|
|
10453
|
+
<span class="input-prefix">{{ text.prefix }}</span>
|
|
10454
|
+
}
|
|
10455
|
+
<input
|
|
10456
|
+
[id]="text.name ?? ''"
|
|
10457
|
+
[attr.data-testid]="text.testid ?? (text.name ? text.name + '-input' : null)"
|
|
10458
|
+
[value]="value()"
|
|
10459
|
+
#inputElement
|
|
10460
|
+
[class.error]="showErrors()"
|
|
10461
|
+
[class.has-icon]="!!text.icon"
|
|
10462
|
+
[class.has-prefix]="!!text.prefix"
|
|
10463
|
+
[disabled]="disabled()"
|
|
10464
|
+
[readOnly]="readonly() || config()?.readonly"
|
|
10465
|
+
[placeholder]="text.placeholder ?? '' | translate: text.params"
|
|
10466
|
+
(input)="onInput($event)"
|
|
10467
|
+
(focus)="isFocused.set(true)"
|
|
10468
|
+
(blur)="isFocused.set(false); touched.set(true)"
|
|
10469
|
+
[type]="isNumber() ? 'number' : 'text'"
|
|
10470
|
+
[attr.min]="isNumber() ? text.min ?? null : null"
|
|
10471
|
+
[attr.max]="isNumber() ? text.max ?? null : null"
|
|
10472
|
+
[attr.step]="isNumber() ? text.step ?? null : null"
|
|
10473
|
+
/>
|
|
10474
|
+
@if (config()?.status; as status) {
|
|
10475
|
+
<div class="input-indicator" [class]="'input-indicator--' + status">
|
|
10476
|
+
@if (status === 'checking') {
|
|
10477
|
+
<span class="spinner"></span>
|
|
10478
|
+
} @else if (status === 'available') {
|
|
10479
|
+
<m-icon name="check" color="success" />
|
|
10480
|
+
}
|
|
10481
|
+
</div>
|
|
10482
|
+
}
|
|
10483
|
+
@if (text.suffix) {
|
|
10484
|
+
<span class="input-suffix">{{ text.suffix }}</span>
|
|
10485
|
+
}
|
|
10486
|
+
</div>
|
|
10487
|
+
@if (showErrors() && !hideErrors()) {
|
|
10488
|
+
@for (error of errors(); track $index) {
|
|
10489
|
+
<m-text-output
|
|
10490
|
+
variant="footer"
|
|
10491
|
+
color="error"
|
|
10492
|
+
[label]="error.message"
|
|
10493
|
+
/>
|
|
10494
|
+
}
|
|
10495
|
+
}
|
|
10496
|
+
}
|
|
10497
|
+
`, 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:contents}.input-wrapper{display:flex;align-items:center;background:var(--m-background);height:calc(var(--input-size, 1em) * 2);min-height:calc(var(--input-size, 1em) * 2);border-width:max(1px,var(--input-size, 1em) * .0625);border-radius:calc(var(--input-size, 1em) * .4);padding:calc(var(--input-size, 1em) * .5) calc(var(--input-size, 1em) * .5);gap:calc(var(--input-size, 1em) * .375);font-size:var(--input-size, 1em);border-width:var(--m-input-border-width, 2px);border-radius:var(--m-input-radius, 4px);height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-top:0;padding-bottom:0;border-color:var(--m-input-color, var(--m-mm));transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.input-wrapper:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 6%,transparent)}.input-wrapper:disabled{opacity:.6;cursor:not-allowed}.input-wrapper{border-style:solid;backdrop-filter:var(--m-text-input-backdrop-filter, none);-webkit-backdrop-filter:var(--m-text-input-backdrop-filter, none);box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(>m-one-button,>m-button,>.input-indicator,>.input-suffix,>m-icon:last-child){padding-right:0}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){border-color:var(--m-text-input-focus-border, color-mix(in srgb, var(--m-focus) 45%, transparent));box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(.error){border-color:var(--m-error);box-shadow:none}.input-wrapper:has(.error):focus-within{border-color:var(--m-error);box-shadow:none}.input-wrapper input,.input-wrapper textarea{flex:1;border:none;outline:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:inherit;padding:0}.input-wrapper input:focus,.input-wrapper textarea:focus{border-color:transparent;box-shadow:none}.input-wrapper{width:100%;padding-left:var(--m-text-input-padding-left, calc(var(--input-size, 1em) * .5 * .7));padding-right:var(--m-text-input-padding-right, calc(var(--input-size, 1em) * .5 * .7));background:var(--m-text-input-background, var(--m-background));border-color:var(--m-text-input-border, var(--m-input-color, var(--m-mm)));transition:var(--m-text-input-transition, border-color .2s ease, box-shadow .2s ease)}.input-wrapper:hover:not(:has(.error)){border-color:var(--m-text-input-hover-border, color-mix(in srgb, var(--m-input-color, var(--m-mm)) 45%, rgba(0, 0, 0, .12)));background:var(--m-text-input-hover-background, var(--m-text-input-background, var(--m-background)))}.input-wrapper:focus-within{border-color:var(--m-text-input-focus-border, color-mix(in srgb, var(--m-focus) 45%, transparent));box-shadow:var(--m-text-input-shadow, none);background:var(--m-text-input-focus-background, var(--m-text-input-background, var(--m-background)))}.input-wrapper .m-icon{--m-icon-size: 1.1em !important;opacity:var(--m-text-input-icon-opacity, 1);transition:opacity .2s ease}.input-wrapper:focus-within .m-icon{opacity:var(--m-text-input-icon-focus-opacity, var(--m-text-input-icon-opacity, 1))}.input-wrapper input{appearance:none;color:var(--m-text-input-color, var(--m-text));font-weight:var(--m-text-input-font-weight, inherit);font-size:var(--input-size, 1em)}.input-wrapper input::placeholder{font-weight:var(--m-text-input-placeholder-weight, inherit);opacity:var(--m-text-input-placeholder-opacity, inherit)}.input-wrapper .input-prefix,.input-wrapper .input-suffix{font-size:.9rem;font-weight:700;color:var(--m-text-tertiary);-webkit-user-select:none;user-select:none;display:flex;align-items:center;flex-shrink:0}.input-wrapper .input-prefix{margin-right:.25rem}.input-wrapper .input-suffix{margin-left:.25rem}:host(.m-input--underlined) .input-wrapper{background:transparent;border:none;border-bottom:2px solid var(--m-backdrop-border);border-radius:0;padding:.5rem 0;min-height:auto;height:auto;transition:border-color .3s ease}:host(.m-input--underlined) .input-wrapper:focus-within{border-bottom-color:var(--m-mm);box-shadow:none}:host(.m-input--underlined) input{font-size:1.125rem;font-weight:700;color:var(--m-text)}:host(.m-input--underlined) .input-prefix,:host(.m-input--underlined) .input-suffix{color:var(--m-mm);font-weight:800;font-size:1rem}:host(.m-input--underlined) .input-indicator{display:flex;align-items:center;justify-content:center;width:1.1em;height:1.1em;margin-left:.375em}:host(.m-input--underlined) .input-indicator--available{color:var(--m-success, #10b981)}:host(.m-input--underlined) .input-indicator .spinner{width:.875rem;height:.875rem;border:2px solid var(--m-border, rgba(255, 255, 255, .1));border-top-color:var(--m-focus, #14b8a6);border-radius:50%;animation:m-spin .8s linear infinite}@keyframes m-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "params", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate", "params"], outputs: ["configChange", "clicked"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10498
|
+
}
|
|
10499
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
10500
|
+
type: Component,
|
|
10501
|
+
args: [{ selector: 'm-text-input', template: `
|
|
10502
|
+
@if (config(); as text) {
|
|
10503
|
+
@if (text.label) {
|
|
10504
|
+
<m-label
|
|
10505
|
+
[for]="text.name ?? ''"
|
|
10506
|
+
[placeholder]="text.label"
|
|
10507
|
+
[params]="text.params"
|
|
10508
|
+
[required]="required()"
|
|
10509
|
+
[disabled]="disabled()"
|
|
10510
|
+
/>
|
|
10511
|
+
}
|
|
10512
|
+
<div class="input-wrapper">
|
|
10513
|
+
@if (text.icon) {
|
|
10514
|
+
<m-icon
|
|
10515
|
+
[name]="text.icon"
|
|
10516
|
+
[color]="iconColor()"
|
|
10517
|
+
[one]="text.one"
|
|
10518
|
+
/>
|
|
10519
|
+
}
|
|
10520
|
+
@if (text.prefix) {
|
|
10521
|
+
<span class="input-prefix">{{ text.prefix }}</span>
|
|
10522
|
+
}
|
|
10523
|
+
<input
|
|
10524
|
+
[id]="text.name ?? ''"
|
|
10525
|
+
[attr.data-testid]="text.testid ?? (text.name ? text.name + '-input' : null)"
|
|
10526
|
+
[value]="value()"
|
|
10527
|
+
#inputElement
|
|
10528
|
+
[class.error]="showErrors()"
|
|
10529
|
+
[class.has-icon]="!!text.icon"
|
|
10530
|
+
[class.has-prefix]="!!text.prefix"
|
|
10531
|
+
[disabled]="disabled()"
|
|
10532
|
+
[readOnly]="readonly() || config()?.readonly"
|
|
10533
|
+
[placeholder]="text.placeholder ?? '' | translate: text.params"
|
|
10534
|
+
(input)="onInput($event)"
|
|
10535
|
+
(focus)="isFocused.set(true)"
|
|
10536
|
+
(blur)="isFocused.set(false); touched.set(true)"
|
|
10537
|
+
[type]="isNumber() ? 'number' : 'text'"
|
|
10538
|
+
[attr.min]="isNumber() ? text.min ?? null : null"
|
|
10539
|
+
[attr.max]="isNumber() ? text.max ?? null : null"
|
|
10540
|
+
[attr.step]="isNumber() ? text.step ?? null : null"
|
|
10541
|
+
/>
|
|
10542
|
+
@if (config()?.status; as status) {
|
|
10543
|
+
<div class="input-indicator" [class]="'input-indicator--' + status">
|
|
10544
|
+
@if (status === 'checking') {
|
|
10545
|
+
<span class="spinner"></span>
|
|
10546
|
+
} @else if (status === 'available') {
|
|
10547
|
+
<m-icon name="check" color="success" />
|
|
10548
|
+
}
|
|
10549
|
+
</div>
|
|
10550
|
+
}
|
|
10551
|
+
@if (text.suffix) {
|
|
10552
|
+
<span class="input-suffix">{{ text.suffix }}</span>
|
|
10553
|
+
}
|
|
10554
|
+
</div>
|
|
10555
|
+
@if (showErrors() && !hideErrors()) {
|
|
10556
|
+
@for (error of errors(); track $index) {
|
|
10557
|
+
<m-text-output
|
|
10558
|
+
variant="footer"
|
|
10559
|
+
color="error"
|
|
10560
|
+
[label]="error.message"
|
|
10561
|
+
/>
|
|
10562
|
+
}
|
|
10563
|
+
}
|
|
10564
|
+
}
|
|
10565
|
+
`, imports: [LabelComponent, TextOutputComponent, IconComponent, TranslatePipe], host: {
|
|
10566
|
+
'[class]': "config()?.variant ? 'm-input--' + config()?.variant : ''",
|
|
10567
|
+
}, 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:contents}.input-wrapper{display:flex;align-items:center;background:var(--m-background);height:calc(var(--input-size, 1em) * 2);min-height:calc(var(--input-size, 1em) * 2);border-width:max(1px,var(--input-size, 1em) * .0625);border-radius:calc(var(--input-size, 1em) * .4);padding:calc(var(--input-size, 1em) * .5) calc(var(--input-size, 1em) * .5);gap:calc(var(--input-size, 1em) * .375);font-size:var(--input-size, 1em);border-width:var(--m-input-border-width, 2px);border-radius:var(--m-input-radius, 4px);height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-top:0;padding-bottom:0;border-color:var(--m-input-color, var(--m-mm));transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.input-wrapper:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 6%,transparent)}.input-wrapper:disabled{opacity:.6;cursor:not-allowed}.input-wrapper{border-style:solid;backdrop-filter:var(--m-text-input-backdrop-filter, none);-webkit-backdrop-filter:var(--m-text-input-backdrop-filter, none);box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(>m-one-button,>m-button,>.input-indicator,>.input-suffix,>m-icon:last-child){padding-right:0}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){border-color:var(--m-text-input-focus-border, color-mix(in srgb, var(--m-focus) 45%, transparent));box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(.error){border-color:var(--m-error);box-shadow:none}.input-wrapper:has(.error):focus-within{border-color:var(--m-error);box-shadow:none}.input-wrapper input,.input-wrapper textarea{flex:1;border:none;outline:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:inherit;padding:0}.input-wrapper input:focus,.input-wrapper textarea:focus{border-color:transparent;box-shadow:none}.input-wrapper{width:100%;padding-left:var(--m-text-input-padding-left, calc(var(--input-size, 1em) * .5 * .7));padding-right:var(--m-text-input-padding-right, calc(var(--input-size, 1em) * .5 * .7));background:var(--m-text-input-background, var(--m-background));border-color:var(--m-text-input-border, var(--m-input-color, var(--m-mm)));transition:var(--m-text-input-transition, border-color .2s ease, box-shadow .2s ease)}.input-wrapper:hover:not(:has(.error)){border-color:var(--m-text-input-hover-border, color-mix(in srgb, var(--m-input-color, var(--m-mm)) 45%, rgba(0, 0, 0, .12)));background:var(--m-text-input-hover-background, var(--m-text-input-background, var(--m-background)))}.input-wrapper:focus-within{border-color:var(--m-text-input-focus-border, color-mix(in srgb, var(--m-focus) 45%, transparent));box-shadow:var(--m-text-input-shadow, none);background:var(--m-text-input-focus-background, var(--m-text-input-background, var(--m-background)))}.input-wrapper .m-icon{--m-icon-size: 1.1em !important;opacity:var(--m-text-input-icon-opacity, 1);transition:opacity .2s ease}.input-wrapper:focus-within .m-icon{opacity:var(--m-text-input-icon-focus-opacity, var(--m-text-input-icon-opacity, 1))}.input-wrapper input{appearance:none;color:var(--m-text-input-color, var(--m-text));font-weight:var(--m-text-input-font-weight, inherit);font-size:var(--input-size, 1em)}.input-wrapper input::placeholder{font-weight:var(--m-text-input-placeholder-weight, inherit);opacity:var(--m-text-input-placeholder-opacity, inherit)}.input-wrapper .input-prefix,.input-wrapper .input-suffix{font-size:.9rem;font-weight:700;color:var(--m-text-tertiary);-webkit-user-select:none;user-select:none;display:flex;align-items:center;flex-shrink:0}.input-wrapper .input-prefix{margin-right:.25rem}.input-wrapper .input-suffix{margin-left:.25rem}:host(.m-input--underlined) .input-wrapper{background:transparent;border:none;border-bottom:2px solid var(--m-backdrop-border);border-radius:0;padding:.5rem 0;min-height:auto;height:auto;transition:border-color .3s ease}:host(.m-input--underlined) .input-wrapper:focus-within{border-bottom-color:var(--m-mm);box-shadow:none}:host(.m-input--underlined) input{font-size:1.125rem;font-weight:700;color:var(--m-text)}:host(.m-input--underlined) .input-prefix,:host(.m-input--underlined) .input-suffix{color:var(--m-mm);font-weight:800;font-size:1rem}:host(.m-input--underlined) .input-indicator{display:flex;align-items:center;justify-content:center;width:1.1em;height:1.1em;margin-left:.375em}:host(.m-input--underlined) .input-indicator--available{color:var(--m-success, #10b981)}:host(.m-input--underlined) .input-indicator .spinner{width:.875rem;height:.875rem;border:2px solid var(--m-border, rgba(255, 255, 255, .1));border-top-color:var(--m-focus, #14b8a6);border-radius:50%;animation:m-spin .8s linear infinite}@keyframes m-spin{to{transform:rotate(360deg)}}\n"] }]
|
|
10568
|
+
}], 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 }] }], hideErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideErrors", required: false }] }] } });
|
|
10569
|
+
|
|
10570
|
+
var text = /*#__PURE__*/Object.freeze({
|
|
10571
|
+
__proto__: null,
|
|
10572
|
+
TextInputComponent: TextInputComponent
|
|
10573
|
+
});
|
|
10574
|
+
|
|
10575
|
+
/**
|
|
10576
|
+
* The panel a `range` Filter opens: two numeric bounds, and nothing else.
|
|
10577
|
+
*
|
|
10578
|
+
* Two inputs rather than the `m-multi-range` slider beside them because this
|
|
10579
|
+
* panel opens inside a selector 260px wide, and narrower still inside a
|
|
10580
|
+
* squeezed FilterGroup's drill-in — a slider needs a pixel width to be usable
|
|
10581
|
+
* and has no keyboard story at that size. The authored bounds clamp the boxes
|
|
10582
|
+
* and stand in as their placeholders rather than being drawn to scale.
|
|
10583
|
+
*
|
|
10584
|
+
* The two boxes are prefixed `≥` and `≤` rather than labelled with words. A
|
|
10585
|
+
* bound reads the same in every locale, and libs/one's TranslationAssets carry
|
|
10586
|
+
* ~150 languages each — two of them for a mark the symbol already makes.
|
|
10587
|
+
*/
|
|
10588
|
+
class SectionFilterRangePanelComponent {
|
|
10589
|
+
/**
|
|
10590
|
+
* The pair this Filter's key carries, read the way every other panel reads
|
|
10591
|
+
* its slice — as the list the group hands down. Empty when nothing is picked,
|
|
10592
|
+
* because a Filter holding nothing carries no key (ADR 0026).
|
|
10593
|
+
*/
|
|
10594
|
+
value = input([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
10595
|
+
min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
|
|
10596
|
+
max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
|
|
10597
|
+
step = input(...(ngDevMode ? [undefined, { debugName: "step" }] : /* istanbul ignore next */ []));
|
|
10598
|
+
/** The Filter's own heading, already a TranslationAsset key. */
|
|
10599
|
+
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
10600
|
+
/**
|
|
10601
|
+
* The new pair, or `undefined` once both boxes are empty — which is what
|
|
10602
|
+
* deletes the key rather than writing a pair of blanks into it.
|
|
10603
|
+
*/
|
|
10604
|
+
action = output();
|
|
10605
|
+
from = computed(() => this.bound(0), ...(ngDevMode ? [{ debugName: "from" }] : /* istanbul ignore next */ []));
|
|
10606
|
+
to = computed(() => this.bound(1), ...(ngDevMode ? [{ debugName: "to" }] : /* istanbul ignore next */ []));
|
|
10607
|
+
fromText = computed(() => textOf(this.from()), ...(ngDevMode ? [{ debugName: "fromText" }] : /* istanbul ignore next */ []));
|
|
10608
|
+
toText = computed(() => textOf(this.to()), ...(ngDevMode ? [{ debugName: "toText" }] : /* istanbul ignore next */ []));
|
|
10609
|
+
fromConfig = computed(() => this.boundConfig('from', '≥', this.min()), ...(ngDevMode ? [{ debugName: "fromConfig" }] : /* istanbul ignore next */ []));
|
|
10610
|
+
toConfig = computed(() => this.boundConfig('to', '≤', this.max()), ...(ngDevMode ? [{ debugName: "toConfig" }] : /* istanbul ignore next */ []));
|
|
10611
|
+
writeFrom = (raw) => this.emit(parse(raw), this.to());
|
|
10612
|
+
writeTo = (raw) => this.emit(this.from(), parse(raw));
|
|
10613
|
+
/**
|
|
10614
|
+
* The authored bound stands in as the placeholder: it says what the box will
|
|
10615
|
+
* do if left empty, which is the one thing a range's empty half means.
|
|
10616
|
+
*/
|
|
10617
|
+
boundConfig = (name, prefix, bound) => ({
|
|
10618
|
+
name,
|
|
10619
|
+
type: InputType.NUMBER,
|
|
10620
|
+
prefix,
|
|
10621
|
+
placeholder: textOf(bound),
|
|
10622
|
+
min: this.min(),
|
|
10623
|
+
max: this.max(),
|
|
10624
|
+
step: this.step(),
|
|
10625
|
+
});
|
|
10626
|
+
bound = (index) => {
|
|
10627
|
+
const entry = this.value()[index];
|
|
10628
|
+
if (entry === undefined || entry === '')
|
|
10629
|
+
return undefined;
|
|
10630
|
+
return parse(String(entry));
|
|
10631
|
+
};
|
|
10632
|
+
/**
|
|
10633
|
+
* A half-filled range is still a range: the empty side falls back to the
|
|
10634
|
+
* authored bound, so typing one number filters from it rather than waiting
|
|
10635
|
+
* for the other box. Both empty and there is nothing to filter on, which is
|
|
10636
|
+
* the `undefined` that drops the key.
|
|
10637
|
+
*/
|
|
10638
|
+
emit = (from, to) => {
|
|
10639
|
+
if (from === undefined && to === undefined) {
|
|
10640
|
+
this.action.emit(undefined);
|
|
10641
|
+
return;
|
|
10642
|
+
}
|
|
10643
|
+
const low = from ?? this.min() ?? 0;
|
|
10644
|
+
const high = to ?? this.max() ?? low;
|
|
10645
|
+
this.action.emit(low <= high ? [low, high] : [high, low]);
|
|
10646
|
+
};
|
|
10647
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionFilterRangePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10648
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: SectionFilterRangePanelComponent, isStandalone: true, selector: "m-section-filter-range-panel", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: `
|
|
10649
|
+
<div class="section-filter-range-panel">
|
|
10650
|
+
<div class="section-filter-range-panel__field">
|
|
10651
|
+
<m-text-input
|
|
10652
|
+
[config]="fromConfig()"
|
|
10653
|
+
[value]="fromText()"
|
|
10654
|
+
(valueChange)="writeFrom($event)"
|
|
10655
|
+
/>
|
|
10656
|
+
</div>
|
|
10657
|
+
<div class="section-filter-range-panel__field">
|
|
10658
|
+
<m-text-input
|
|
10659
|
+
[config]="toConfig()"
|
|
10660
|
+
[value]="toText()"
|
|
10661
|
+
(valueChange)="writeTo($event)"
|
|
10662
|
+
/>
|
|
10663
|
+
</div>
|
|
10664
|
+
</div>
|
|
10665
|
+
`, 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)}}.section-filter-range-panel{display:flex;align-items:center;gap:.5rem;padding:calc(.6rem * var(--filter-size, 1)) calc(.9rem * var(--filter-size, 1));background:var(--m-background);border:1px solid var(--m-mm);animation:filter-range-panel-in .2s ease-out}.section-filter-range-panel__field{flex:1 1 0;min-width:0}.section-filter-range-panel__field m-text-input{display:block;width:100%}@keyframes filter-range-panel-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"], dependencies: [{ kind: "component", type: TextInputComponent, selector: "m-text-input", inputs: ["value", "config", "required", "disabled", "invalid", "touched", "focused", "errors", "hideErrors"], outputs: ["valueChange", "touchedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10666
|
+
}
|
|
10667
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionFilterRangePanelComponent, decorators: [{
|
|
10668
|
+
type: Component,
|
|
10669
|
+
args: [{ selector: 'm-section-filter-range-panel', template: `
|
|
10670
|
+
<div class="section-filter-range-panel">
|
|
10671
|
+
<div class="section-filter-range-panel__field">
|
|
10672
|
+
<m-text-input
|
|
10673
|
+
[config]="fromConfig()"
|
|
10674
|
+
[value]="fromText()"
|
|
10675
|
+
(valueChange)="writeFrom($event)"
|
|
10676
|
+
/>
|
|
10677
|
+
</div>
|
|
10678
|
+
<div class="section-filter-range-panel__field">
|
|
10679
|
+
<m-text-input
|
|
10680
|
+
[config]="toConfig()"
|
|
10681
|
+
[value]="toText()"
|
|
10682
|
+
(valueChange)="writeTo($event)"
|
|
10683
|
+
/>
|
|
10684
|
+
</div>
|
|
10685
|
+
</div>
|
|
10686
|
+
`, imports: [TextInputComponent], 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)}}.section-filter-range-panel{display:flex;align-items:center;gap:.5rem;padding:calc(.6rem * var(--filter-size, 1)) calc(.9rem * var(--filter-size, 1));background:var(--m-background);border:1px solid var(--m-mm);animation:filter-range-panel-in .2s ease-out}.section-filter-range-panel__field{flex:1 1 0;min-width:0}.section-filter-range-panel__field m-text-input{display:block;width:100%}@keyframes filter-range-panel-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"] }]
|
|
10687
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
|
|
10688
|
+
const parse = (raw) => {
|
|
10689
|
+
if (raw.trim() === '')
|
|
10690
|
+
return undefined;
|
|
10691
|
+
const parsed = Number(raw);
|
|
10692
|
+
return Number.isFinite(parsed) ? parsed : undefined;
|
|
10693
|
+
};
|
|
10694
|
+
const textOf = (bound) => bound === undefined ? '' : String(bound);
|
|
10695
|
+
|
|
10696
|
+
/**
|
|
10697
|
+
* Which panel a variant opens, and what drives it — the one place that answers
|
|
10698
|
+
* it, because two hosts ask: a Filter's own dropdown, and the drill-in a
|
|
10699
|
+
* squeezed FilterGroup draws for each Filter beneath it. A `switch` in each
|
|
10700
|
+
* would be the same answer written twice, and the second copy is the one that
|
|
10701
|
+
* would be forgotten when a fourth variant lands (ADR 0025 superseded).
|
|
10702
|
+
*
|
|
10703
|
+
* A flat result object rather than a discriminated union: the `assets:wc`
|
|
10704
|
+
* build runs without `strict`, where a union arm does not narrow, so a shape
|
|
10705
|
+
* that type-checks here would fail to build there.
|
|
10706
|
+
*/
|
|
10707
|
+
const filterPanelOf = (io) => filterHoldsRange(io.variant())
|
|
10708
|
+
? {
|
|
10709
|
+
component: SectionFilterRangePanelComponent,
|
|
10710
|
+
bindings: [
|
|
10711
|
+
inputBinding('value', io.selected),
|
|
10712
|
+
inputBinding('min', io.min),
|
|
10713
|
+
inputBinding('max', io.max),
|
|
10714
|
+
inputBinding('step', io.step),
|
|
10715
|
+
inputBinding('label', io.label),
|
|
10716
|
+
outputBinding('action', (next) => io.setRange(next)),
|
|
10717
|
+
],
|
|
10718
|
+
}
|
|
10719
|
+
: {
|
|
10720
|
+
component: SectionFilterPanelComponent,
|
|
10721
|
+
bindings: [
|
|
10722
|
+
inputBinding('options', io.options),
|
|
10723
|
+
inputBinding('selected', io.selected),
|
|
10724
|
+
inputBinding('variant', io.variant),
|
|
10725
|
+
outputBinding('action', (option) => io.pick(option)),
|
|
10726
|
+
],
|
|
10727
|
+
};
|
|
10728
|
+
/**
|
|
10729
|
+
* How wide that panel wants to be. A range's two boxes need more than an
|
|
10730
|
+
* option list's rows, and the group's drill-in is the narrower of the two
|
|
10731
|
+
* hosts — so the width rides with the panel rather than being guessed at each
|
|
10732
|
+
* call site.
|
|
10733
|
+
*/
|
|
10734
|
+
const filterPanelWidth = (variant) => filterHoldsRange(variant) ? '260px' : 'auto';
|
|
10361
10735
|
|
|
10362
10736
|
const FILTER_GROUP_CONTEXT = new InjectionToken('FILTER_GROUP_CONTEXT');
|
|
10363
10737
|
|
|
10364
10738
|
class SectionFilterComponent {
|
|
10365
10739
|
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
10366
10740
|
/**
|
|
10367
|
-
* The key this Filter's slice carries in a FilterGroup's
|
|
10741
|
+
* The key this Filter's slice carries in a FilterGroup's payload.
|
|
10368
10742
|
* Falls back to `label`, which is a TranslationAsset key rather than an
|
|
10369
10743
|
* identity — good enough alone, wrong to rely on in a group (ADR 0025).
|
|
10370
10744
|
*/
|
|
10371
10745
|
name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
10372
10746
|
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
10373
10747
|
optionsAsset = input(...(ngDevMode ? [undefined, { debugName: "optionsAsset" }] : /* istanbul ignore next */ []));
|
|
10374
|
-
|
|
10748
|
+
/**
|
|
10749
|
+
* Which question this Filter asks and what its key carries as a result.
|
|
10750
|
+
* `single` by default: a Filter that says nothing about itself takes one
|
|
10751
|
+
* answer, and the variants holding more than one value say so on the tag.
|
|
10752
|
+
*
|
|
10753
|
+
* Replaces the `multiple` boolean, which spelled two of three variants and
|
|
10754
|
+
* had no room for `range`.
|
|
10755
|
+
*/
|
|
10756
|
+
variant = input('single', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
10757
|
+
/** A `range` variant's bounds. Ignored by the option-picking variants. */
|
|
10758
|
+
min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
|
|
10759
|
+
max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
|
|
10760
|
+
step = input(...(ngDevMode ? [undefined, { debugName: "step" }] : /* istanbul ignore next */ []));
|
|
10761
|
+
/**
|
|
10762
|
+
* The glyph on the dropdown toggle, an IconAsset name. Unset keeps the
|
|
10763
|
+
* `adjust` tuning icon every Filter wears by default — this replaces that
|
|
10764
|
+
* one rather than adding a second mark, a Filter having one affordance and
|
|
10765
|
+
* therefore one place for an icon to sit.
|
|
10766
|
+
*/
|
|
10767
|
+
icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
10768
|
+
/**
|
|
10769
|
+
* A list whatever the variant: the badges and every panel read one, and only
|
|
10770
|
+
* what *leaves* the component is narrowed. A `range` holds its pair here,
|
|
10771
|
+
* which is why the entries are no longer `string` alone.
|
|
10772
|
+
*/
|
|
10375
10773
|
value = model([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
10774
|
+
/**
|
|
10775
|
+
* The picked value, shaped the way this Filter was authored: the value
|
|
10776
|
+
* itself under `single` and the list under `multi` and `range`, matching the
|
|
10777
|
+
* slice a FilterGroup's key would carry (ADR 0026). A `single` cleared emits
|
|
10778
|
+
* `''` — a group deletes the key instead, and a bare Filter has no key to
|
|
10779
|
+
* delete.
|
|
10780
|
+
*/
|
|
10376
10781
|
filterChange = output();
|
|
10377
10782
|
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
10378
10783
|
/**
|
|
@@ -10390,12 +10795,19 @@ class SectionFilterComponent {
|
|
|
10390
10795
|
resolvedName = computed(() => this.name() || this.label(), ...(ngDevMode ? [{ debugName: "resolvedName" }] : /* istanbul ignore next */ []));
|
|
10391
10796
|
/** The group's slice when there is one, this Filter's own model otherwise. */
|
|
10392
10797
|
selected = computed(() => this.group ? this.group.valueOf(this.resolvedName()) : this.value(), ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
|
|
10798
|
+
// Open, the toggle is always the close mark: what it does at that moment is
|
|
10799
|
+
// dismiss the panel, whatever glyph opened it.
|
|
10393
10800
|
toggleConfig = computed(() => ({
|
|
10394
|
-
icon: this.isOpen() ? 'x' : 'adjust',
|
|
10801
|
+
icon: this.isOpen() ? 'x' : this.icon() || 'adjust',
|
|
10395
10802
|
one: true,
|
|
10396
10803
|
variant: 'ghost',
|
|
10397
10804
|
iconOnly: true,
|
|
10398
10805
|
}), ...(ngDevMode ? [{ debugName: "toggleConfig" }] : /* istanbul ignore next */ []));
|
|
10806
|
+
// A computed rather than a literal in the binding: an inline object is a
|
|
10807
|
+
// new reference every check, and `no-inline-config` refuses one anyway.
|
|
10808
|
+
chipConfig = computed(() => ({
|
|
10809
|
+
variant: 'chip',
|
|
10810
|
+
}), ...(ngDevMode ? [{ debugName: "chipConfig" }] : /* istanbul ignore next */ []));
|
|
10399
10811
|
dropdownRef = viewChild(SelectorDirective, ...(ngDevMode ? [{ debugName: "dropdownRef" }] : /* istanbul ignore next */ []));
|
|
10400
10812
|
assetStore = inject(AssetStore);
|
|
10401
10813
|
assetOptionsResource = rxResource({
|
|
@@ -10409,6 +10821,10 @@ class SectionFilterComponent {
|
|
|
10409
10821
|
},
|
|
10410
10822
|
});
|
|
10411
10823
|
resolvedOptions = computed(() => {
|
|
10824
|
+
// A range is authored with bounds and never with an OptionSet, so a name
|
|
10825
|
+
// left over from a variant flip resolves for a list nothing draws.
|
|
10826
|
+
if (filterHoldsRange(this.variant()))
|
|
10827
|
+
return [];
|
|
10412
10828
|
const inline = this.options();
|
|
10413
10829
|
if (inline.length)
|
|
10414
10830
|
return inline;
|
|
@@ -10426,49 +10842,80 @@ class SectionFilterComponent {
|
|
|
10426
10842
|
}, ...(ngDevMode ? [{ debugName: "resolvedOptions" }] : /* istanbul ignore next */ []));
|
|
10427
10843
|
hasSelection = computed(() => this.selected().length > 0, ...(ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []));
|
|
10428
10844
|
selectedOptions = computed(() => this.resolvedOptions().filter((o) => this.selected().includes(o.value)), ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
|
|
10429
|
-
|
|
10430
|
-
|
|
10431
|
-
|
|
10432
|
-
|
|
10433
|
-
|
|
10434
|
-
|
|
10435
|
-
|
|
10436
|
-
|
|
10437
|
-
|
|
10438
|
-
|
|
10845
|
+
/** The pair drawn as one chip, or `undefined` for the option variants. */
|
|
10846
|
+
rangeLabel = computed(() => {
|
|
10847
|
+
if (!filterHoldsRange(this.variant()))
|
|
10848
|
+
return undefined;
|
|
10849
|
+
const picked = this.selected();
|
|
10850
|
+
if (picked.length !== 2)
|
|
10851
|
+
return undefined;
|
|
10852
|
+
return `${picked[0]} – ${picked[1]}`;
|
|
10853
|
+
}, ...(ngDevMode ? [{ debugName: "rangeLabel" }] : /* istanbul ignore next */ []));
|
|
10854
|
+
selectorConfig = computed(() => {
|
|
10855
|
+
const panel = filterPanelOf({
|
|
10856
|
+
variant: this.variant,
|
|
10857
|
+
label: this.label,
|
|
10858
|
+
options: this.resolvedOptions,
|
|
10859
|
+
selected: this.selected,
|
|
10860
|
+
min: this.min,
|
|
10861
|
+
max: this.max,
|
|
10862
|
+
step: this.step,
|
|
10863
|
+
pick: this.selectOption,
|
|
10864
|
+
setRange: this.writeRange,
|
|
10865
|
+
});
|
|
10866
|
+
return {
|
|
10867
|
+
component: panel.component,
|
|
10868
|
+
base: 'm-section-filter',
|
|
10869
|
+
width: filterPanelWidth(this.variant()),
|
|
10870
|
+
bindings: panel.bindings,
|
|
10871
|
+
};
|
|
10872
|
+
}, ...(ngDevMode ? [{ debugName: "selectorConfig" }] : /* istanbul ignore next */ []));
|
|
10439
10873
|
selectOption = (opt) => {
|
|
10440
10874
|
if (opt.disabled)
|
|
10441
10875
|
return;
|
|
10442
10876
|
if (this.group) {
|
|
10443
|
-
this.group.toggle(this.resolvedName(), opt, this.
|
|
10444
|
-
if (!this.
|
|
10877
|
+
this.group.toggle(this.resolvedName(), opt, this.variant());
|
|
10878
|
+
if (!filterHoldsList(this.variant()))
|
|
10445
10879
|
this.dropdownRef()?.close();
|
|
10446
10880
|
return;
|
|
10447
10881
|
}
|
|
10448
|
-
|
|
10449
|
-
|
|
10450
|
-
|
|
10882
|
+
const current = this.selected();
|
|
10883
|
+
if (filterHoldsList(this.variant())) {
|
|
10884
|
+
this.write(current.includes(opt.value)
|
|
10451
10885
|
? current.filter((v) => v !== opt.value)
|
|
10452
|
-
: [...current, opt.value];
|
|
10453
|
-
|
|
10454
|
-
this.filterChange.emit(next);
|
|
10886
|
+
: [...current, opt.value]);
|
|
10887
|
+
return;
|
|
10455
10888
|
}
|
|
10456
|
-
|
|
10457
|
-
|
|
10458
|
-
|
|
10459
|
-
|
|
10460
|
-
|
|
10461
|
-
|
|
10889
|
+
this.write(current.includes(opt.value) ? [] : [opt.value]);
|
|
10890
|
+
this.dropdownRef()?.close();
|
|
10891
|
+
};
|
|
10892
|
+
/**
|
|
10893
|
+
* A bound moved. Stays open whichever half was typed: a range is two numbers
|
|
10894
|
+
* and closing on the first would take the box away mid-answer.
|
|
10895
|
+
*/
|
|
10896
|
+
writeRange = (next) => {
|
|
10897
|
+
if (this.group) {
|
|
10898
|
+
this.group.setRange(this.resolvedName(), next);
|
|
10899
|
+
return;
|
|
10462
10900
|
}
|
|
10901
|
+
this.write(next ? [next[0], next[1]] : []);
|
|
10463
10902
|
};
|
|
10903
|
+
clearRange = () => this.writeRange(undefined);
|
|
10464
10904
|
removeOption = (val) => {
|
|
10465
10905
|
if (this.group) {
|
|
10466
10906
|
this.group.remove(this.resolvedName(), val);
|
|
10467
10907
|
return;
|
|
10468
10908
|
}
|
|
10469
|
-
|
|
10470
|
-
|
|
10471
|
-
|
|
10909
|
+
this.write(this.selected().filter((v) => v !== val));
|
|
10910
|
+
};
|
|
10911
|
+
/**
|
|
10912
|
+
* The model is a list whatever the variant, the badges and every panel
|
|
10913
|
+
* reading one; only what leaves the component is narrowed.
|
|
10914
|
+
*/
|
|
10915
|
+
write = (next) => {
|
|
10916
|
+
const list = [...next];
|
|
10917
|
+
this.value.set(list);
|
|
10918
|
+
this.filterChange.emit(filterHoldsList(this.variant()) ? list : (list[0] ?? ''));
|
|
10472
10919
|
};
|
|
10473
10920
|
constructor() {
|
|
10474
10921
|
const group = this.group;
|
|
@@ -10476,31 +10923,48 @@ class SectionFilterComponent {
|
|
|
10476
10923
|
return;
|
|
10477
10924
|
// Registered rather than found by a content query: a Col may sit between
|
|
10478
10925
|
// this Filter and its group, and squeezed the group renders no bar at all
|
|
10479
|
-
// — the
|
|
10480
|
-
// why the row is hidden rather than skipped (ADR 0025).
|
|
10926
|
+
// — the drill-in it draws instead is built from these registrations, which
|
|
10927
|
+
// is why the row is hidden rather than skipped (ADR 0025).
|
|
10481
10928
|
const member = {
|
|
10482
10929
|
name: this.resolvedName,
|
|
10483
10930
|
label: this.label,
|
|
10484
10931
|
options: this.resolvedOptions,
|
|
10485
|
-
|
|
10932
|
+
variant: this.variant,
|
|
10933
|
+
min: this.min,
|
|
10934
|
+
max: this.max,
|
|
10935
|
+
step: this.step,
|
|
10486
10936
|
};
|
|
10487
10937
|
group.register(member);
|
|
10488
10938
|
inject(DestroyRef).onDestroy(() => group.unregister(member));
|
|
10489
10939
|
}
|
|
10490
10940
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10491
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionFilterComponent, isStandalone: true, selector: "m-section-filter", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionsAsset: { classPropertyName: "optionsAsset", publicName: "optionsAsset", isSignal: true, isRequired: false, transformFunction: null },
|
|
10941
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionFilterComponent, isStandalone: true, selector: "m-section-filter", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionsAsset: { classPropertyName: "optionsAsset", publicName: "optionsAsset", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", filterChange: "filterChange" }, host: { properties: { "class.has-sidepanel": "sidepanel()", "class.no-border": "noBorder()", "class.in-group": "!!group" } }, viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: SelectorDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
10492
10942
|
<div class="section-filter__bar">
|
|
10493
10943
|
@if (hasSelection()) {
|
|
10494
10944
|
<div class="section-filter__badges">
|
|
10495
|
-
@
|
|
10496
|
-
|
|
10497
|
-
|
|
10945
|
+
@if (rangeLabel(); as bounds) {
|
|
10946
|
+
<!-- One badge for the pair, not two: a range is one answer, and
|
|
10947
|
+
dropping half of it would leave a bound with nothing to bound
|
|
10948
|
+
against. Its × clears the whole key. -->
|
|
10949
|
+
<m-badge [config]="chipConfig()">
|
|
10950
|
+
{{ bounds }}
|
|
10498
10951
|
<m-one-button
|
|
10499
10952
|
name="x"
|
|
10500
|
-
(clicked)="
|
|
10501
|
-
[attr.aria-label]="('remove' | translate) + ' ' + (
|
|
10953
|
+
(clicked)="clearRange()"
|
|
10954
|
+
[attr.aria-label]="('remove' | translate) + ' ' + label()"
|
|
10502
10955
|
/>
|
|
10503
10956
|
</m-badge>
|
|
10957
|
+
} @else {
|
|
10958
|
+
@for (opt of selectedOptions(); track opt.value) {
|
|
10959
|
+
<m-badge [config]="chipConfig()">
|
|
10960
|
+
{{ opt.label | translate }}
|
|
10961
|
+
<m-one-button
|
|
10962
|
+
name="x"
|
|
10963
|
+
(clicked)="removeOption(opt.value)"
|
|
10964
|
+
[attr.aria-label]="('remove' | translate) + ' ' + (opt.label | translate)"
|
|
10965
|
+
/>
|
|
10966
|
+
</m-badge>
|
|
10967
|
+
}
|
|
10504
10968
|
}
|
|
10505
10969
|
</div>
|
|
10506
10970
|
} @else {
|
|
@@ -10525,15 +10989,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
10525
10989
|
<div class="section-filter__bar">
|
|
10526
10990
|
@if (hasSelection()) {
|
|
10527
10991
|
<div class="section-filter__badges">
|
|
10528
|
-
@
|
|
10529
|
-
|
|
10530
|
-
|
|
10992
|
+
@if (rangeLabel(); as bounds) {
|
|
10993
|
+
<!-- One badge for the pair, not two: a range is one answer, and
|
|
10994
|
+
dropping half of it would leave a bound with nothing to bound
|
|
10995
|
+
against. Its × clears the whole key. -->
|
|
10996
|
+
<m-badge [config]="chipConfig()">
|
|
10997
|
+
{{ bounds }}
|
|
10531
10998
|
<m-one-button
|
|
10532
10999
|
name="x"
|
|
10533
|
-
(clicked)="
|
|
10534
|
-
[attr.aria-label]="('remove' | translate) + ' ' + (
|
|
11000
|
+
(clicked)="clearRange()"
|
|
11001
|
+
[attr.aria-label]="('remove' | translate) + ' ' + label()"
|
|
10535
11002
|
/>
|
|
10536
11003
|
</m-badge>
|
|
11004
|
+
} @else {
|
|
11005
|
+
@for (opt of selectedOptions(); track opt.value) {
|
|
11006
|
+
<m-badge [config]="chipConfig()">
|
|
11007
|
+
{{ opt.label | translate }}
|
|
11008
|
+
<m-one-button
|
|
11009
|
+
name="x"
|
|
11010
|
+
(clicked)="removeOption(opt.value)"
|
|
11011
|
+
[attr.aria-label]="('remove' | translate) + ' ' + (opt.label | translate)"
|
|
11012
|
+
/>
|
|
11013
|
+
</m-badge>
|
|
11014
|
+
}
|
|
10537
11015
|
}
|
|
10538
11016
|
</div>
|
|
10539
11017
|
} @else {
|
|
@@ -10561,7 +11039,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
10561
11039
|
'[class.no-border]': 'noBorder()',
|
|
10562
11040
|
'[class.in-group]': '!!group',
|
|
10563
11041
|
}, 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;--m-badge-chip-padding: 0 .25em}.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"] }]
|
|
10564
|
-
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionsAsset: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsAsset", required: false }] }],
|
|
11042
|
+
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionsAsset: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsAsset", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", 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 }] }] } });
|
|
10565
11043
|
|
|
10566
11044
|
/**
|
|
10567
11045
|
* One key of a group's selection read as the list a `multiple` Filter carries.
|
|
@@ -10586,21 +11064,250 @@ function filterList(selection, name) {
|
|
|
10586
11064
|
function filterOne(selection, name) {
|
|
10587
11065
|
return toList(selection?.[name])[0];
|
|
10588
11066
|
}
|
|
11067
|
+
/**
|
|
11068
|
+
* One Filter's own emit read as a list, whichever shape it was authored to
|
|
11069
|
+
* carry — a standalone `multiple` Filter emits its list and a single-select one
|
|
11070
|
+
* emits the value itself (ADR 0026). What `filterList` does for a key of a
|
|
11071
|
+
* group's map, for the Filter that has no group and therefore no map.
|
|
11072
|
+
*
|
|
11073
|
+
* The empty string drops out: a cleared single-select Filter emits it where a
|
|
11074
|
+
* group would delete the key, so the two spellings of "nothing picked" read
|
|
11075
|
+
* the same. `filterList` keeps it — a key a group wrote is a value a User
|
|
11076
|
+
* picked, and a group writes no key at all for nothing.
|
|
11077
|
+
*/
|
|
11078
|
+
function filterValueList(value) {
|
|
11079
|
+
return toList(value).filter((entry) => entry !== '');
|
|
11080
|
+
}
|
|
11081
|
+
/**
|
|
11082
|
+
* One key read without the narrowing `filterList` does — the entries as the
|
|
11083
|
+
* map actually holds them. What a panel inside the library reads, because a
|
|
11084
|
+
* `range` key's pair is numeric and `String`-ing it would make a bound into
|
|
11085
|
+
* text the boxes then have to parse back.
|
|
11086
|
+
*
|
|
11087
|
+
* Not what generated code reads: a payload leaving the library goes through
|
|
11088
|
+
* `filterList` or `filterOne`, whose `string` return is what a StoreMethod
|
|
11089
|
+
* parameter takes (ADR 0026).
|
|
11090
|
+
*/
|
|
11091
|
+
function filterValues(selection, name) {
|
|
11092
|
+
const value = selection?.[name];
|
|
11093
|
+
if (value === undefined)
|
|
11094
|
+
return [];
|
|
11095
|
+
return Array.isArray(value) ? value : [value];
|
|
11096
|
+
}
|
|
11097
|
+
/**
|
|
11098
|
+
* One key read as the numeric pair a `range` Filter carries, or `undefined`
|
|
11099
|
+
* when the Filter holds nothing — a Filter holding nothing carries no key at
|
|
11100
|
+
* all, which is the absence a consumer drops from a query rather than sending
|
|
11101
|
+
* as a pair of blanks (ADR 0026).
|
|
11102
|
+
*
|
|
11103
|
+
* A key holding anything but two finite numbers reads as `undefined`: a
|
|
11104
|
+
* variant flipped after a selection was made leaves an option list behind, and
|
|
11105
|
+
* a list of labels is not a range whatever its length.
|
|
11106
|
+
*/
|
|
11107
|
+
function filterRange(selection, name) {
|
|
11108
|
+
const entries = filterValues(selection, name);
|
|
11109
|
+
if (entries.length !== 2)
|
|
11110
|
+
return undefined;
|
|
11111
|
+
const low = Number(entries[0]);
|
|
11112
|
+
const high = Number(entries[1]);
|
|
11113
|
+
if (!Number.isFinite(low) || !Number.isFinite(high))
|
|
11114
|
+
return undefined;
|
|
11115
|
+
return low <= high ? [low, high] : [high, low];
|
|
11116
|
+
}
|
|
10589
11117
|
const toList = (value) => {
|
|
10590
11118
|
if (value === undefined)
|
|
10591
11119
|
return [];
|
|
10592
11120
|
return (Array.isArray(value) ? value : [value]).map(String);
|
|
10593
11121
|
};
|
|
10594
11122
|
|
|
11123
|
+
/**
|
|
11124
|
+
* What a squeezed FilterGroup opens: one row per Filter beneath it, drilling
|
|
11125
|
+
* into that Filter's *own* panel rather than into a list of MenuItems.
|
|
11126
|
+
*
|
|
11127
|
+
* A ContextMenuBox was what this used to be, and it could only ever draw rows
|
|
11128
|
+
* — which is a `range` Filter's bounds spelled as a list of options it does
|
|
11129
|
+
* not have. Drilling into `filterPanelOf` instead means the group draws
|
|
11130
|
+
* whatever the Filter draws, and a fourth variant needs nothing here at all
|
|
11131
|
+
* (ADR 0025 superseded).
|
|
11132
|
+
*/
|
|
11133
|
+
class SectionFilterMenuComponent {
|
|
11134
|
+
members = input([], ...(ngDevMode ? [{ debugName: "members" }] : /* istanbul ignore next */ []));
|
|
11135
|
+
/**
|
|
11136
|
+
* The group's own contract, handed in rather than injected: this component
|
|
11137
|
+
* is created by the selector outside the group's element injector, so DI
|
|
11138
|
+
* would not reach it.
|
|
11139
|
+
*/
|
|
11140
|
+
ctx = input(...(ngDevMode ? [undefined, { debugName: "ctx" }] : /* istanbul ignore next */ []));
|
|
11141
|
+
activeName = signal(undefined, ...(ngDevMode ? [{ debugName: "activeName" }] : /* istanbul ignore next */ []));
|
|
11142
|
+
// The drill-in's header: what was a row is now the title of what it opened,
|
|
11143
|
+
// and the glyph beside it is the way back out.
|
|
11144
|
+
backConfig = computed(() => ({
|
|
11145
|
+
icon: 'chevron-left',
|
|
11146
|
+
label: this.activeRow()?.label ?? '',
|
|
11147
|
+
one: true,
|
|
11148
|
+
variant: 'ghost',
|
|
11149
|
+
fullWidth: true,
|
|
11150
|
+
}), ...(ngDevMode ? [{ debugName: "backConfig" }] : /* istanbul ignore next */ []));
|
|
11151
|
+
forwardIcon = computed(() => ({ name: 'chevron-right' }), ...(ngDevMode ? [{ debugName: "forwardIcon" }] : /* istanbul ignore next */ []));
|
|
11152
|
+
rows = computed(() => this.members().map((member) => {
|
|
11153
|
+
const name = member.name();
|
|
11154
|
+
const held = this.ctx()?.valueOf(name) ?? [];
|
|
11155
|
+
return {
|
|
11156
|
+
name,
|
|
11157
|
+
label: member.label(),
|
|
11158
|
+
detail: this.detailOf(member.variant(), held),
|
|
11159
|
+
selected: held.length > 0,
|
|
11160
|
+
};
|
|
11161
|
+
}), ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
11162
|
+
active = computed(() => this.members().find((member) => member.name() === this.activeName()), ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
|
|
11163
|
+
activeRow = computed(() => {
|
|
11164
|
+
const member = this.active();
|
|
11165
|
+
return member ? { name: member.name(), label: member.label() } : undefined;
|
|
11166
|
+
}, ...(ngDevMode ? [{ debugName: "activeRow" }] : /* istanbul ignore next */ []));
|
|
11167
|
+
panelHost = viewChild('panelHost', { ...(ngDevMode ? { debugName: "panelHost" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
|
|
11168
|
+
activeVariant = computed(() => this.active()?.variant() ?? 'single', ...(ngDevMode ? [{ debugName: "activeVariant" }] : /* istanbul ignore next */ []));
|
|
11169
|
+
activeLabel = computed(() => this.active()?.label() ?? '', ...(ngDevMode ? [{ debugName: "activeLabel" }] : /* istanbul ignore next */ []));
|
|
11170
|
+
activeOptions = computed(() => this.active()?.options() ?? [], ...(ngDevMode ? [{ debugName: "activeOptions" }] : /* istanbul ignore next */ []));
|
|
11171
|
+
activeSelected = computed(() => {
|
|
11172
|
+
const member = this.active();
|
|
11173
|
+
return member ? (this.ctx()?.valueOf(member.name()) ?? []) : [];
|
|
11174
|
+
}, ...(ngDevMode ? [{ debugName: "activeSelected" }] : /* istanbul ignore next */ []));
|
|
11175
|
+
activeMin = computed(() => this.active()?.min(), ...(ngDevMode ? [{ debugName: "activeMin" }] : /* istanbul ignore next */ []));
|
|
11176
|
+
activeMax = computed(() => this.active()?.max(), ...(ngDevMode ? [{ debugName: "activeMax" }] : /* istanbul ignore next */ []));
|
|
11177
|
+
activeStep = computed(() => this.active()?.step(), ...(ngDevMode ? [{ debugName: "activeStep" }] : /* istanbul ignore next */ []));
|
|
11178
|
+
constructor() {
|
|
11179
|
+
// Recreated when the drilled-into Filter changes and at no other time: the
|
|
11180
|
+
// panel's own bindings are signals, so a selection made inside it updates
|
|
11181
|
+
// in place rather than rebuilding the component under the User's cursor.
|
|
11182
|
+
effect(() => {
|
|
11183
|
+
const member = this.active();
|
|
11184
|
+
const host = this.panelHost();
|
|
11185
|
+
untracked(() => {
|
|
11186
|
+
host?.clear();
|
|
11187
|
+
if (!member || !host)
|
|
11188
|
+
return;
|
|
11189
|
+
const panel = filterPanelOf({
|
|
11190
|
+
variant: this.activeVariant,
|
|
11191
|
+
label: this.activeLabel,
|
|
11192
|
+
options: this.activeOptions,
|
|
11193
|
+
selected: this.activeSelected,
|
|
11194
|
+
min: this.activeMin,
|
|
11195
|
+
max: this.activeMax,
|
|
11196
|
+
step: this.activeStep,
|
|
11197
|
+
pick: this.pick,
|
|
11198
|
+
setRange: this.setRange,
|
|
11199
|
+
});
|
|
11200
|
+
host.createComponent(panel.component, { bindings: panel.bindings });
|
|
11201
|
+
});
|
|
11202
|
+
});
|
|
11203
|
+
}
|
|
11204
|
+
pick = (option) => {
|
|
11205
|
+
const member = this.active();
|
|
11206
|
+
if (!member)
|
|
11207
|
+
return;
|
|
11208
|
+
this.ctx()?.toggle(member.name(), option, member.variant());
|
|
11209
|
+
};
|
|
11210
|
+
setRange = (next) => {
|
|
11211
|
+
const member = this.active();
|
|
11212
|
+
if (!member)
|
|
11213
|
+
return;
|
|
11214
|
+
this.ctx()?.setRange(member.name(), next);
|
|
11215
|
+
};
|
|
11216
|
+
/**
|
|
11217
|
+
* A range says what it holds and an option list says how many: two picked
|
|
11218
|
+
* options are two of a set the row cannot show, while two bounds *are* the
|
|
11219
|
+
* answer and fit.
|
|
11220
|
+
*/
|
|
11221
|
+
detailOf = (variant, held) => {
|
|
11222
|
+
if (!held.length)
|
|
11223
|
+
return '';
|
|
11224
|
+
if (filterHoldsRange(variant)) {
|
|
11225
|
+
return held.length === 2 ? `${held[0]} – ${held[1]}` : '';
|
|
11226
|
+
}
|
|
11227
|
+
return String(held.length);
|
|
11228
|
+
};
|
|
11229
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionFilterMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11230
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionFilterMenuComponent, isStandalone: true, selector: "m-section-filter-menu", inputs: { members: { classPropertyName: "members", publicName: "members", isSignal: true, isRequired: false, transformFunction: null }, ctx: { classPropertyName: "ctx", publicName: "ctx", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "section-filter-menu" }, viewQueries: [{ propertyName: "panelHost", first: true, predicate: ["panelHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
|
|
11231
|
+
@if (activeRow()) {
|
|
11232
|
+
<div class="section-filter-menu__back">
|
|
11233
|
+
<m-button [config]="backConfig()" (clicked)="activeName.set(undefined)" />
|
|
11234
|
+
</div>
|
|
11235
|
+
<div class="section-filter-menu__panel">
|
|
11236
|
+
<ng-container #panelHost />
|
|
11237
|
+
</div>
|
|
11238
|
+
} @else {
|
|
11239
|
+
<ul class="section-filter-menu__rows" role="menu">
|
|
11240
|
+
@for (row of rows(); track row.name) {
|
|
11241
|
+
<li
|
|
11242
|
+
class="section-filter-menu__row"
|
|
11243
|
+
[class.is-selected]="row.selected"
|
|
11244
|
+
role="menuitem"
|
|
11245
|
+
tabindex="0"
|
|
11246
|
+
(click)="activeName.set(row.name)"
|
|
11247
|
+
(keydown.enter)="activeName.set(row.name)"
|
|
11248
|
+
(keydown.space)="$event.preventDefault(); activeName.set(row.name)"
|
|
11249
|
+
>
|
|
11250
|
+
<span class="section-filter-menu__label">{{
|
|
11251
|
+
row.label | translate
|
|
11252
|
+
}}</span>
|
|
11253
|
+
@if (row.detail) {
|
|
11254
|
+
<span class="section-filter-menu__detail">{{ row.detail }}</span>
|
|
11255
|
+
}
|
|
11256
|
+
<m-icon [config]="forwardIcon()" />
|
|
11257
|
+
</li>
|
|
11258
|
+
}
|
|
11259
|
+
</ul>
|
|
11260
|
+
}
|
|
11261
|
+
`, 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)}}.section-filter-menu{display:block;background:var(--m-background);border:1px solid var(--m-mm);min-width:14rem;max-height:20rem;overflow-y:auto}.section-filter-menu__rows{list-style:none;margin:0;padding:0}.section-filter-menu__row{display:flex;align-items:center;gap:.5em;padding:.6rem .9rem;cursor:pointer;font-size:.875rem;color:var(--m-text);transition:all .3s cubic-bezier(.16,1,.3,1);outline:none}.section-filter-menu__row:hover,.section-filter-menu__row:focus-visible{background-color:var(--m-backdrop-standard)}.section-filter-menu__row.is-selected{color:var(--m-mm);font-weight:500}.section-filter-menu__row m-icon{--m-icon-size: .875em;margin-left:auto;display:flex}.section-filter-menu__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.section-filter-menu__detail{font-size:.75rem;color:var(--m-text-secondary);flex-shrink:0}.section-filter-menu__back{display:flex;align-items:center;gap:.5em;width:100%;padding:.6rem .9rem;background:transparent;border:none;border-bottom:1px solid var(--m-backdrop-border);font:inherit;font-size:.875rem;color:var(--m-text);cursor:pointer;outline:none}.section-filter-menu__back:hover,.section-filter-menu__back:focus-visible{background-color:var(--m-backdrop-standard)}.section-filter-menu__back m-icon{--m-icon-size: .875em;display:flex}.section-filter-menu__panel{display:block}.section-filter-menu__panel :where(.section-filter-panel,.section-filter-range-panel){border:none;background:transparent;animation:none;max-height:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { 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", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11262
|
+
}
|
|
11263
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionFilterMenuComponent, decorators: [{
|
|
11264
|
+
type: Component,
|
|
11265
|
+
args: [{ selector: 'm-section-filter-menu', template: `
|
|
11266
|
+
@if (activeRow()) {
|
|
11267
|
+
<div class="section-filter-menu__back">
|
|
11268
|
+
<m-button [config]="backConfig()" (clicked)="activeName.set(undefined)" />
|
|
11269
|
+
</div>
|
|
11270
|
+
<div class="section-filter-menu__panel">
|
|
11271
|
+
<ng-container #panelHost />
|
|
11272
|
+
</div>
|
|
11273
|
+
} @else {
|
|
11274
|
+
<ul class="section-filter-menu__rows" role="menu">
|
|
11275
|
+
@for (row of rows(); track row.name) {
|
|
11276
|
+
<li
|
|
11277
|
+
class="section-filter-menu__row"
|
|
11278
|
+
[class.is-selected]="row.selected"
|
|
11279
|
+
role="menuitem"
|
|
11280
|
+
tabindex="0"
|
|
11281
|
+
(click)="activeName.set(row.name)"
|
|
11282
|
+
(keydown.enter)="activeName.set(row.name)"
|
|
11283
|
+
(keydown.space)="$event.preventDefault(); activeName.set(row.name)"
|
|
11284
|
+
>
|
|
11285
|
+
<span class="section-filter-menu__label">{{
|
|
11286
|
+
row.label | translate
|
|
11287
|
+
}}</span>
|
|
11288
|
+
@if (row.detail) {
|
|
11289
|
+
<span class="section-filter-menu__detail">{{ row.detail }}</span>
|
|
11290
|
+
}
|
|
11291
|
+
<m-icon [config]="forwardIcon()" />
|
|
11292
|
+
</li>
|
|
11293
|
+
}
|
|
11294
|
+
</ul>
|
|
11295
|
+
}
|
|
11296
|
+
`, imports: [IconComponent, ButtonComponent, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'section-filter-menu' }, 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)}}.section-filter-menu{display:block;background:var(--m-background);border:1px solid var(--m-mm);min-width:14rem;max-height:20rem;overflow-y:auto}.section-filter-menu__rows{list-style:none;margin:0;padding:0}.section-filter-menu__row{display:flex;align-items:center;gap:.5em;padding:.6rem .9rem;cursor:pointer;font-size:.875rem;color:var(--m-text);transition:all .3s cubic-bezier(.16,1,.3,1);outline:none}.section-filter-menu__row:hover,.section-filter-menu__row:focus-visible{background-color:var(--m-backdrop-standard)}.section-filter-menu__row.is-selected{color:var(--m-mm);font-weight:500}.section-filter-menu__row m-icon{--m-icon-size: .875em;margin-left:auto;display:flex}.section-filter-menu__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.section-filter-menu__detail{font-size:.75rem;color:var(--m-text-secondary);flex-shrink:0}.section-filter-menu__back{display:flex;align-items:center;gap:.5em;width:100%;padding:.6rem .9rem;background:transparent;border:none;border-bottom:1px solid var(--m-backdrop-border);font:inherit;font-size:.875rem;color:var(--m-text);cursor:pointer;outline:none}.section-filter-menu__back:hover,.section-filter-menu__back:focus-visible{background-color:var(--m-backdrop-standard)}.section-filter-menu__back m-icon{--m-icon-size: .875em;display:flex}.section-filter-menu__panel{display:block}.section-filter-menu__panel :where(.section-filter-panel,.section-filter-range-panel){border:none;background:transparent;animation:none;max-height:none}\n"] }]
|
|
11297
|
+
}], ctorParameters: () => [], propDecorators: { members: [{ type: i0.Input, args: [{ isSignal: true, alias: "members", required: false }] }], ctx: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctx", required: false }] }], panelHost: [{ type: i0.ViewChild, args: ['panelHost', { ...{
|
|
11298
|
+
read: ViewContainerRef,
|
|
11299
|
+
}, isSignal: true }] }] } });
|
|
11300
|
+
|
|
10595
11301
|
/**
|
|
10596
11302
|
* A Row-like container that owns the selection for every Filter beneath it and
|
|
10597
11303
|
* emits one aggregate whenever any of them changes (ADR 0025). Admits Cols, so
|
|
10598
11304
|
* a Filter may sit any depth down — DI, not a content query, is what finds it.
|
|
10599
11305
|
*
|
|
10600
11306
|
* Squeezed, it collapses to one icon whose menu drills into each Filter in
|
|
10601
|
-
* turn
|
|
10602
|
-
*
|
|
10603
|
-
*
|
|
11307
|
+
* turn — into that Filter's own panel, so a `range` Filter offers its bounds
|
|
11308
|
+
* there exactly as it would in its own dropdown. The children are still
|
|
11309
|
+
* projected in that mode, only hidden: a Filter that never instantiates never
|
|
11310
|
+
* registers, and the menu is built from registrations.
|
|
10604
11311
|
*/
|
|
10605
11312
|
class SectionFilterGroupComponent {
|
|
10606
11313
|
squeeze = input(undefined, ...(ngDevMode ? [{ debugName: "squeeze" }] : /* istanbul ignore next */ []));
|
|
@@ -10612,9 +11319,9 @@ class SectionFilterGroupComponent {
|
|
|
10612
11319
|
config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
|
|
10613
11320
|
/**
|
|
10614
11321
|
* The whole group's selection, keyed by each Filter's `name` — one key per
|
|
10615
|
-
* Filter holding something, and none for a Filter holding nothing. A
|
|
10616
|
-
*
|
|
10617
|
-
* value itself (ADR 0026).
|
|
11322
|
+
* Filter holding something, and none for a Filter holding nothing. A `multi`
|
|
11323
|
+
* Filter's key carries its list, a `range` one's carries its `[min, max]`
|
|
11324
|
+
* pair, and a `single` one's carries the value itself (ADR 0026).
|
|
10618
11325
|
*/
|
|
10619
11326
|
value = model({}, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
10620
11327
|
filterChange = output();
|
|
@@ -10623,7 +11330,6 @@ class SectionFilterGroupComponent {
|
|
|
10623
11330
|
isDesignMode = !!inject(IS_DESIGN_MODE, {
|
|
10624
11331
|
optional: true,
|
|
10625
11332
|
});
|
|
10626
|
-
translateService = inject(TranslateService);
|
|
10627
11333
|
sectionContext = inject(SECTION_CONTEXT, { optional: true });
|
|
10628
11334
|
selectorDir = viewChild(SelectorDirective, ...(ngDevMode ? [{ debugName: "selectorDir" }] : /* istanbul ignore next */ []));
|
|
10629
11335
|
squeezed = computed(() => this.squeeze() ?? this.config()?.squeeze ?? false, ...(ngDevMode ? [{ debugName: "squeezed" }] : /* istanbul ignore next */ []));
|
|
@@ -10650,96 +11356,53 @@ class SectionFilterGroupComponent {
|
|
|
10650
11356
|
position: 'top-right',
|
|
10651
11357
|
}), ...(ngDevMode ? [{ debugName: "countBadgeConfig" }] : /* istanbul ignore next */ []));
|
|
10652
11358
|
/**
|
|
10653
|
-
*
|
|
10654
|
-
*
|
|
10655
|
-
*
|
|
10656
|
-
*
|
|
11359
|
+
* The drill-in, handed the registrations and this group's own contract. Not
|
|
11360
|
+
* a ContextMenuBox: a MenuItem is a row with a nested list of rows, which is
|
|
11361
|
+
* the one shape a `range` Filter's bounds do not take. What it opens per
|
|
11362
|
+
* Filter is `filterPanelOf` — the same answer the Filter's own dropdown gets
|
|
11363
|
+
* (ADR 0025 superseded).
|
|
10657
11364
|
*/
|
|
10658
|
-
menuOptions = computed(() => {
|
|
10659
|
-
const rows = this.members().map((member) => {
|
|
10660
|
-
const name = member.name();
|
|
10661
|
-
const selected = this.valueOf(name);
|
|
10662
|
-
const label = selected.length
|
|
10663
|
-
? this.translateService.translate(member.label(), {
|
|
10664
|
-
// Pre-resolved, so the menu's own `| translate` passes it through:
|
|
10665
|
-
// a key with no entry comes back as itself.
|
|
10666
|
-
count: String(selected.length),
|
|
10667
|
-
}) + ` (${selected.length})`
|
|
10668
|
-
: member.label();
|
|
10669
|
-
return {
|
|
10670
|
-
id: name,
|
|
10671
|
-
label,
|
|
10672
|
-
selected: selected.length > 0,
|
|
10673
|
-
options: [
|
|
10674
|
-
member.options().map((opt) => ({
|
|
10675
|
-
id: `${name}:${opt.value}`,
|
|
10676
|
-
label: opt.label,
|
|
10677
|
-
value: opt.value,
|
|
10678
|
-
disabled: opt.disabled,
|
|
10679
|
-
selected: selected.includes(opt.value),
|
|
10680
|
-
})),
|
|
10681
|
-
],
|
|
10682
|
-
};
|
|
10683
|
-
});
|
|
10684
|
-
return rows.length ? [rows] : [];
|
|
10685
|
-
}, ...(ngDevMode ? [{ debugName: "menuOptions" }] : /* istanbul ignore next */ []));
|
|
10686
11365
|
selectorConfig = computed(() => ({
|
|
10687
|
-
component:
|
|
11366
|
+
component: SectionFilterMenuComponent,
|
|
10688
11367
|
base: 'm-section-filter-group',
|
|
10689
11368
|
width: '260px',
|
|
10690
11369
|
bindings: [
|
|
10691
|
-
inputBinding('
|
|
10692
|
-
|
|
10693
|
-
// its selector on every action — right for a menu of commands, wrong for
|
|
10694
|
-
// one of checkboxes (ADR 0025).
|
|
10695
|
-
outputBinding('action', (item) => this.onMenuAction(item)),
|
|
11370
|
+
inputBinding('members', this.members),
|
|
11371
|
+
inputBinding('ctx', () => this.context),
|
|
10696
11372
|
],
|
|
10697
11373
|
}), ...(ngDevMode ? [{ debugName: "selectorConfig" }] : /* istanbul ignore next */ []));
|
|
10698
|
-
onMenuAction = (item) => {
|
|
10699
|
-
const separator = item.id.indexOf(':');
|
|
10700
|
-
if (separator < 0)
|
|
10701
|
-
return;
|
|
10702
|
-
const name = item.id.slice(0, separator);
|
|
10703
|
-
const member = this.members().find((m) => m.name() === name);
|
|
10704
|
-
if (!member)
|
|
10705
|
-
return;
|
|
10706
|
-
const option = member
|
|
10707
|
-
.options()
|
|
10708
|
-
.find((opt) => opt.value === item.id.slice(separator + 1));
|
|
10709
|
-
if (!option)
|
|
10710
|
-
return;
|
|
10711
|
-
this.toggle(name, option, member.multiple());
|
|
10712
|
-
};
|
|
10713
11374
|
/**
|
|
10714
11375
|
* A Filter reads its slice as the list it draws badges from, whatever shape
|
|
10715
11376
|
* the key holds — the map is the payload's shape and not the row's, so the
|
|
10716
11377
|
* scalar a single-select Filter carries is widened back here rather than at
|
|
10717
11378
|
* every reader (ADR 0026).
|
|
10718
11379
|
*/
|
|
10719
|
-
valueOf = (name) =>
|
|
11380
|
+
valueOf = (name) => filterValues(this.value(), name);
|
|
10720
11381
|
/**
|
|
10721
|
-
*
|
|
10722
|
-
* than passed in, because `remove` is called from a badge and knows
|
|
10723
|
-
* value it is dropping. An unregistered name
|
|
10724
|
-
* default.
|
|
11382
|
+
* Which variant this Filter was authored as. Read off the registration
|
|
11383
|
+
* rather than passed in, because `remove` is called from a badge and knows
|
|
11384
|
+
* only the value it is dropping. An unregistered name reads as the input's
|
|
11385
|
+
* own default.
|
|
10725
11386
|
*/
|
|
10726
|
-
|
|
11387
|
+
variantOf = (name) => this.members().find((m) => m.name() === name)?.variant() ?? 'single';
|
|
10727
11388
|
write = (name, next) => {
|
|
10728
11389
|
const updated = { ...this.value() };
|
|
10729
11390
|
if (!next.length) {
|
|
10730
11391
|
delete updated[name];
|
|
10731
11392
|
}
|
|
10732
11393
|
else {
|
|
10733
|
-
updated[name] = this.
|
|
11394
|
+
updated[name] = filterHoldsList(this.variantOf(name))
|
|
11395
|
+
? [...next]
|
|
11396
|
+
: next[0];
|
|
10734
11397
|
}
|
|
10735
11398
|
this.value.set(updated);
|
|
10736
11399
|
this.filterChange.emit(updated);
|
|
10737
11400
|
};
|
|
10738
|
-
toggle = (name, option,
|
|
11401
|
+
toggle = (name, option, variant) => {
|
|
10739
11402
|
if (option.disabled)
|
|
10740
11403
|
return;
|
|
10741
11404
|
const current = this.valueOf(name);
|
|
10742
|
-
if (
|
|
11405
|
+
if (filterHoldsList(variant)) {
|
|
10743
11406
|
this.write(name, current.includes(option.value)
|
|
10744
11407
|
? current.filter((v) => v !== option.value)
|
|
10745
11408
|
: [...current, option.value]);
|
|
@@ -10747,17 +11410,25 @@ class SectionFilterGroupComponent {
|
|
|
10747
11410
|
}
|
|
10748
11411
|
this.write(name, current.includes(option.value) ? [] : [option.value]);
|
|
10749
11412
|
// Single-select has nothing more to say once it has said it. Multi-select
|
|
10750
|
-
//
|
|
11413
|
+
// and range both stay open, which is the reason this drill-in is not a
|
|
11414
|
+
// ContextMenuComponent.
|
|
10751
11415
|
if (!this.squeezed())
|
|
10752
11416
|
return;
|
|
10753
11417
|
this.selectorDir()?.close();
|
|
10754
11418
|
};
|
|
11419
|
+
/**
|
|
11420
|
+
* A `range` member's new pair, or the deletion of its key. Goes through the
|
|
11421
|
+
* same `write` every other variant does — one selection, one owner, whatever
|
|
11422
|
+
* shape the key holds (ADR 0025).
|
|
11423
|
+
*/
|
|
11424
|
+
setRange = (name, next) => this.write(name, next ?? []);
|
|
10755
11425
|
context = {
|
|
10756
11426
|
squeeze: this.squeezed,
|
|
10757
11427
|
register: (member) => this.members.update((list) => list.includes(member) ? list : [...list, member]),
|
|
10758
11428
|
unregister: (member) => this.members.update((list) => list.filter((m) => m !== member)),
|
|
10759
11429
|
valueOf: this.valueOf,
|
|
10760
11430
|
toggle: this.toggle,
|
|
11431
|
+
setRange: this.setRange,
|
|
10761
11432
|
remove: (name, val) => this.write(name, this.valueOf(name).filter((v) => v !== val)),
|
|
10762
11433
|
};
|
|
10763
11434
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionFilterGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -15588,173 +16259,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
15588
16259
|
}, styles: [":host{display:grid;box-sizing:border-box;min-width:0}:host(.is-design-mode){min-width:4em;min-height:4em}\n"] }]
|
|
15589
16260
|
}], propDecorators: { grow: [{ type: i0.Input, args: [{ isSignal: true, alias: "grow", required: false }] }], shrink: [{ type: i0.Input, args: [{ isSignal: true, alias: "shrink", required: false }] }], basis: [{ type: i0.Input, args: [{ isSignal: true, alias: "basis", required: false }] }], alignSelf: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignSelf", required: false }] }], order: [{ type: i0.Input, args: [{ isSignal: true, alias: "order", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }] } });
|
|
15590
16261
|
|
|
15591
|
-
class TextInputComponent extends BaseTextInputComponent {
|
|
15592
|
-
value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
15593
|
-
config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
|
|
15594
|
-
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
15595
|
-
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
15596
|
-
invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
15597
|
-
touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
15598
|
-
focused = input(false, ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
15599
|
-
errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
15600
|
-
showErrors = computed(() => this.touched() && this.invalid(), ...(ngDevMode ? [{ debugName: "showErrors" }] : /* istanbul ignore next */ []));
|
|
15601
|
-
hideErrors = input(false, ...(ngDevMode ? [{ debugName: "hideErrors" }] : /* istanbul ignore next */ []));
|
|
15602
|
-
// A `number` Field draws this same component (WrapperInputComponent has no
|
|
15603
|
-
// case of its own for it), so the type it declares decides the element it
|
|
15604
|
-
// draws. What *leaves* the field is coerced a level up, in the wrapper: an
|
|
15605
|
-
// `<input>` reads its value as text whatever its type, and every other
|
|
15606
|
-
// component on this base is a string field.
|
|
15607
|
-
isNumber = computed(() => {
|
|
15608
|
-
const config = this.config();
|
|
15609
|
-
return !!config && config.type === InputType.NUMBER;
|
|
15610
|
-
}, ...(ngDevMode ? [{ debugName: "isNumber" }] : /* istanbul ignore next */ []));
|
|
15611
|
-
onInput(event) {
|
|
15612
|
-
const target = event.target;
|
|
15613
|
-
this.setValue(target?.value ?? '');
|
|
15614
|
-
}
|
|
15615
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
15616
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TextInputComponent, isStandalone: true, selector: "m-text-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, hideErrors: { classPropertyName: "hideErrors", publicName: "hideErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "class": "config()?.variant ? 'm-input--' + config()?.variant : ''" } }, usesInheritance: true, ngImport: i0, template: `
|
|
15617
|
-
@if (config(); as text) {
|
|
15618
|
-
@if (text.label) {
|
|
15619
|
-
<m-label
|
|
15620
|
-
[for]="text.name ?? ''"
|
|
15621
|
-
[placeholder]="text.label"
|
|
15622
|
-
[params]="text.params"
|
|
15623
|
-
[required]="required()"
|
|
15624
|
-
[disabled]="disabled()"
|
|
15625
|
-
/>
|
|
15626
|
-
}
|
|
15627
|
-
<div class="input-wrapper">
|
|
15628
|
-
@if (text.icon) {
|
|
15629
|
-
<m-icon
|
|
15630
|
-
[name]="text.icon"
|
|
15631
|
-
[color]="iconColor()"
|
|
15632
|
-
[one]="text.one"
|
|
15633
|
-
/>
|
|
15634
|
-
}
|
|
15635
|
-
@if (text.prefix) {
|
|
15636
|
-
<span class="input-prefix">{{ text.prefix }}</span>
|
|
15637
|
-
}
|
|
15638
|
-
<input
|
|
15639
|
-
[id]="text.name ?? ''"
|
|
15640
|
-
[attr.data-testid]="text.testid ?? (text.name ? text.name + '-input' : null)"
|
|
15641
|
-
[value]="value()"
|
|
15642
|
-
#inputElement
|
|
15643
|
-
[class.error]="showErrors()"
|
|
15644
|
-
[class.has-icon]="!!text.icon"
|
|
15645
|
-
[class.has-prefix]="!!text.prefix"
|
|
15646
|
-
[disabled]="disabled()"
|
|
15647
|
-
[readOnly]="readonly() || config()?.readonly"
|
|
15648
|
-
[placeholder]="text.placeholder ?? '' | translate: text.params"
|
|
15649
|
-
(input)="onInput($event)"
|
|
15650
|
-
(focus)="isFocused.set(true)"
|
|
15651
|
-
(blur)="isFocused.set(false); touched.set(true)"
|
|
15652
|
-
[type]="isNumber() ? 'number' : 'text'"
|
|
15653
|
-
[attr.min]="isNumber() ? text.min ?? null : null"
|
|
15654
|
-
[attr.max]="isNumber() ? text.max ?? null : null"
|
|
15655
|
-
[attr.step]="isNumber() ? text.step ?? null : null"
|
|
15656
|
-
/>
|
|
15657
|
-
@if (config()?.status; as status) {
|
|
15658
|
-
<div class="input-indicator" [class]="'input-indicator--' + status">
|
|
15659
|
-
@if (status === 'checking') {
|
|
15660
|
-
<span class="spinner"></span>
|
|
15661
|
-
} @else if (status === 'available') {
|
|
15662
|
-
<m-icon name="check" color="success" />
|
|
15663
|
-
}
|
|
15664
|
-
</div>
|
|
15665
|
-
}
|
|
15666
|
-
@if (text.suffix) {
|
|
15667
|
-
<span class="input-suffix">{{ text.suffix }}</span>
|
|
15668
|
-
}
|
|
15669
|
-
</div>
|
|
15670
|
-
@if (showErrors() && !hideErrors()) {
|
|
15671
|
-
@for (error of errors(); track $index) {
|
|
15672
|
-
<m-text-output
|
|
15673
|
-
variant="footer"
|
|
15674
|
-
color="error"
|
|
15675
|
-
[label]="error.message"
|
|
15676
|
-
/>
|
|
15677
|
-
}
|
|
15678
|
-
}
|
|
15679
|
-
}
|
|
15680
|
-
`, 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:contents}.input-wrapper{display:flex;align-items:center;background:var(--m-background);height:calc(var(--input-size, 1em) * 2);min-height:calc(var(--input-size, 1em) * 2);border-width:max(1px,var(--input-size, 1em) * .0625);border-radius:calc(var(--input-size, 1em) * .4);padding:calc(var(--input-size, 1em) * .5) calc(var(--input-size, 1em) * .5);gap:calc(var(--input-size, 1em) * .375);font-size:var(--input-size, 1em);border-width:var(--m-input-border-width, 2px);border-radius:var(--m-input-radius, 4px);height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-top:0;padding-bottom:0;border-color:var(--m-input-color, var(--m-mm));transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.input-wrapper:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 6%,transparent)}.input-wrapper:disabled{opacity:.6;cursor:not-allowed}.input-wrapper{border-style:solid;backdrop-filter:var(--m-text-input-backdrop-filter, none);-webkit-backdrop-filter:var(--m-text-input-backdrop-filter, none);box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(>m-one-button,>m-button,>.input-indicator,>.input-suffix,>m-icon:last-child){padding-right:0}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){border-color:var(--m-text-input-focus-border, color-mix(in srgb, var(--m-focus) 45%, transparent));box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(.error){border-color:var(--m-error);box-shadow:none}.input-wrapper:has(.error):focus-within{border-color:var(--m-error);box-shadow:none}.input-wrapper input,.input-wrapper textarea{flex:1;border:none;outline:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:inherit;padding:0}.input-wrapper input:focus,.input-wrapper textarea:focus{border-color:transparent;box-shadow:none}.input-wrapper{width:100%;padding-left:var(--m-text-input-padding-left, calc(var(--input-size, 1em) * .5 * .7));padding-right:var(--m-text-input-padding-right, calc(var(--input-size, 1em) * .5 * .7));background:var(--m-text-input-background, var(--m-background));border-color:var(--m-text-input-border, var(--m-input-color, var(--m-mm)));transition:var(--m-text-input-transition, border-color .2s ease, box-shadow .2s ease)}.input-wrapper:hover:not(:has(.error)){border-color:var(--m-text-input-hover-border, color-mix(in srgb, var(--m-input-color, var(--m-mm)) 45%, rgba(0, 0, 0, .12)));background:var(--m-text-input-hover-background, var(--m-text-input-background, var(--m-background)))}.input-wrapper:focus-within{border-color:var(--m-text-input-focus-border, color-mix(in srgb, var(--m-focus) 45%, transparent));box-shadow:var(--m-text-input-shadow, none);background:var(--m-text-input-focus-background, var(--m-text-input-background, var(--m-background)))}.input-wrapper .m-icon{--m-icon-size: 1.1em !important;opacity:var(--m-text-input-icon-opacity, 1);transition:opacity .2s ease}.input-wrapper:focus-within .m-icon{opacity:var(--m-text-input-icon-focus-opacity, var(--m-text-input-icon-opacity, 1))}.input-wrapper input{appearance:none;color:var(--m-text-input-color, var(--m-text));font-weight:var(--m-text-input-font-weight, inherit);font-size:var(--input-size, 1em)}.input-wrapper input::placeholder{font-weight:var(--m-text-input-placeholder-weight, inherit);opacity:var(--m-text-input-placeholder-opacity, inherit)}.input-wrapper .input-prefix,.input-wrapper .input-suffix{font-size:.9rem;font-weight:700;color:var(--m-text-tertiary);-webkit-user-select:none;user-select:none;display:flex;align-items:center;flex-shrink:0}.input-wrapper .input-prefix{margin-right:.25rem}.input-wrapper .input-suffix{margin-left:.25rem}:host(.m-input--underlined) .input-wrapper{background:transparent;border:none;border-bottom:2px solid var(--m-backdrop-border);border-radius:0;padding:.5rem 0;min-height:auto;height:auto;transition:border-color .3s ease}:host(.m-input--underlined) .input-wrapper:focus-within{border-bottom-color:var(--m-mm);box-shadow:none}:host(.m-input--underlined) input{font-size:1.125rem;font-weight:700;color:var(--m-text)}:host(.m-input--underlined) .input-prefix,:host(.m-input--underlined) .input-suffix{color:var(--m-mm);font-weight:800;font-size:1rem}:host(.m-input--underlined) .input-indicator{display:flex;align-items:center;justify-content:center;width:1.1em;height:1.1em;margin-left:.375em}:host(.m-input--underlined) .input-indicator--available{color:var(--m-success, #10b981)}:host(.m-input--underlined) .input-indicator .spinner{width:.875rem;height:.875rem;border:2px solid var(--m-border, rgba(255, 255, 255, .1));border-top-color:var(--m-focus, #14b8a6);border-radius:50%;animation:m-spin .8s linear infinite}@keyframes m-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "params", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate", "params"], outputs: ["configChange", "clicked"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15681
|
-
}
|
|
15682
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
15683
|
-
type: Component,
|
|
15684
|
-
args: [{ selector: 'm-text-input', template: `
|
|
15685
|
-
@if (config(); as text) {
|
|
15686
|
-
@if (text.label) {
|
|
15687
|
-
<m-label
|
|
15688
|
-
[for]="text.name ?? ''"
|
|
15689
|
-
[placeholder]="text.label"
|
|
15690
|
-
[params]="text.params"
|
|
15691
|
-
[required]="required()"
|
|
15692
|
-
[disabled]="disabled()"
|
|
15693
|
-
/>
|
|
15694
|
-
}
|
|
15695
|
-
<div class="input-wrapper">
|
|
15696
|
-
@if (text.icon) {
|
|
15697
|
-
<m-icon
|
|
15698
|
-
[name]="text.icon"
|
|
15699
|
-
[color]="iconColor()"
|
|
15700
|
-
[one]="text.one"
|
|
15701
|
-
/>
|
|
15702
|
-
}
|
|
15703
|
-
@if (text.prefix) {
|
|
15704
|
-
<span class="input-prefix">{{ text.prefix }}</span>
|
|
15705
|
-
}
|
|
15706
|
-
<input
|
|
15707
|
-
[id]="text.name ?? ''"
|
|
15708
|
-
[attr.data-testid]="text.testid ?? (text.name ? text.name + '-input' : null)"
|
|
15709
|
-
[value]="value()"
|
|
15710
|
-
#inputElement
|
|
15711
|
-
[class.error]="showErrors()"
|
|
15712
|
-
[class.has-icon]="!!text.icon"
|
|
15713
|
-
[class.has-prefix]="!!text.prefix"
|
|
15714
|
-
[disabled]="disabled()"
|
|
15715
|
-
[readOnly]="readonly() || config()?.readonly"
|
|
15716
|
-
[placeholder]="text.placeholder ?? '' | translate: text.params"
|
|
15717
|
-
(input)="onInput($event)"
|
|
15718
|
-
(focus)="isFocused.set(true)"
|
|
15719
|
-
(blur)="isFocused.set(false); touched.set(true)"
|
|
15720
|
-
[type]="isNumber() ? 'number' : 'text'"
|
|
15721
|
-
[attr.min]="isNumber() ? text.min ?? null : null"
|
|
15722
|
-
[attr.max]="isNumber() ? text.max ?? null : null"
|
|
15723
|
-
[attr.step]="isNumber() ? text.step ?? null : null"
|
|
15724
|
-
/>
|
|
15725
|
-
@if (config()?.status; as status) {
|
|
15726
|
-
<div class="input-indicator" [class]="'input-indicator--' + status">
|
|
15727
|
-
@if (status === 'checking') {
|
|
15728
|
-
<span class="spinner"></span>
|
|
15729
|
-
} @else if (status === 'available') {
|
|
15730
|
-
<m-icon name="check" color="success" />
|
|
15731
|
-
}
|
|
15732
|
-
</div>
|
|
15733
|
-
}
|
|
15734
|
-
@if (text.suffix) {
|
|
15735
|
-
<span class="input-suffix">{{ text.suffix }}</span>
|
|
15736
|
-
}
|
|
15737
|
-
</div>
|
|
15738
|
-
@if (showErrors() && !hideErrors()) {
|
|
15739
|
-
@for (error of errors(); track $index) {
|
|
15740
|
-
<m-text-output
|
|
15741
|
-
variant="footer"
|
|
15742
|
-
color="error"
|
|
15743
|
-
[label]="error.message"
|
|
15744
|
-
/>
|
|
15745
|
-
}
|
|
15746
|
-
}
|
|
15747
|
-
}
|
|
15748
|
-
`, imports: [LabelComponent, TextOutputComponent, IconComponent, TranslatePipe], host: {
|
|
15749
|
-
'[class]': "config()?.variant ? 'm-input--' + config()?.variant : ''",
|
|
15750
|
-
}, 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:contents}.input-wrapper{display:flex;align-items:center;background:var(--m-background);height:calc(var(--input-size, 1em) * 2);min-height:calc(var(--input-size, 1em) * 2);border-width:max(1px,var(--input-size, 1em) * .0625);border-radius:calc(var(--input-size, 1em) * .4);padding:calc(var(--input-size, 1em) * .5) calc(var(--input-size, 1em) * .5);gap:calc(var(--input-size, 1em) * .375);font-size:var(--input-size, 1em);border-width:var(--m-input-border-width, 2px);border-radius:var(--m-input-radius, 4px);height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-top:0;padding-bottom:0;border-color:var(--m-input-color, var(--m-mm));transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.input-wrapper:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 6%,transparent)}.input-wrapper:disabled{opacity:.6;cursor:not-allowed}.input-wrapper{border-style:solid;backdrop-filter:var(--m-text-input-backdrop-filter, none);-webkit-backdrop-filter:var(--m-text-input-backdrop-filter, none);box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(>m-one-button,>m-button,>.input-indicator,>.input-suffix,>m-icon:last-child){padding-right:0}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){border-color:var(--m-text-input-focus-border, color-mix(in srgb, var(--m-focus) 45%, transparent));box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(.error){border-color:var(--m-error);box-shadow:none}.input-wrapper:has(.error):focus-within{border-color:var(--m-error);box-shadow:none}.input-wrapper input,.input-wrapper textarea{flex:1;border:none;outline:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:inherit;padding:0}.input-wrapper input:focus,.input-wrapper textarea:focus{border-color:transparent;box-shadow:none}.input-wrapper{width:100%;padding-left:var(--m-text-input-padding-left, calc(var(--input-size, 1em) * .5 * .7));padding-right:var(--m-text-input-padding-right, calc(var(--input-size, 1em) * .5 * .7));background:var(--m-text-input-background, var(--m-background));border-color:var(--m-text-input-border, var(--m-input-color, var(--m-mm)));transition:var(--m-text-input-transition, border-color .2s ease, box-shadow .2s ease)}.input-wrapper:hover:not(:has(.error)){border-color:var(--m-text-input-hover-border, color-mix(in srgb, var(--m-input-color, var(--m-mm)) 45%, rgba(0, 0, 0, .12)));background:var(--m-text-input-hover-background, var(--m-text-input-background, var(--m-background)))}.input-wrapper:focus-within{border-color:var(--m-text-input-focus-border, color-mix(in srgb, var(--m-focus) 45%, transparent));box-shadow:var(--m-text-input-shadow, none);background:var(--m-text-input-focus-background, var(--m-text-input-background, var(--m-background)))}.input-wrapper .m-icon{--m-icon-size: 1.1em !important;opacity:var(--m-text-input-icon-opacity, 1);transition:opacity .2s ease}.input-wrapper:focus-within .m-icon{opacity:var(--m-text-input-icon-focus-opacity, var(--m-text-input-icon-opacity, 1))}.input-wrapper input{appearance:none;color:var(--m-text-input-color, var(--m-text));font-weight:var(--m-text-input-font-weight, inherit);font-size:var(--input-size, 1em)}.input-wrapper input::placeholder{font-weight:var(--m-text-input-placeholder-weight, inherit);opacity:var(--m-text-input-placeholder-opacity, inherit)}.input-wrapper .input-prefix,.input-wrapper .input-suffix{font-size:.9rem;font-weight:700;color:var(--m-text-tertiary);-webkit-user-select:none;user-select:none;display:flex;align-items:center;flex-shrink:0}.input-wrapper .input-prefix{margin-right:.25rem}.input-wrapper .input-suffix{margin-left:.25rem}:host(.m-input--underlined) .input-wrapper{background:transparent;border:none;border-bottom:2px solid var(--m-backdrop-border);border-radius:0;padding:.5rem 0;min-height:auto;height:auto;transition:border-color .3s ease}:host(.m-input--underlined) .input-wrapper:focus-within{border-bottom-color:var(--m-mm);box-shadow:none}:host(.m-input--underlined) input{font-size:1.125rem;font-weight:700;color:var(--m-text)}:host(.m-input--underlined) .input-prefix,:host(.m-input--underlined) .input-suffix{color:var(--m-mm);font-weight:800;font-size:1rem}:host(.m-input--underlined) .input-indicator{display:flex;align-items:center;justify-content:center;width:1.1em;height:1.1em;margin-left:.375em}:host(.m-input--underlined) .input-indicator--available{color:var(--m-success, #10b981)}:host(.m-input--underlined) .input-indicator .spinner{width:.875rem;height:.875rem;border:2px solid var(--m-border, rgba(255, 255, 255, .1));border-top-color:var(--m-focus, #14b8a6);border-radius:50%;animation:m-spin .8s linear infinite}@keyframes m-spin{to{transform:rotate(360deg)}}\n"] }]
|
|
15751
|
-
}], 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 }] }], hideErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideErrors", required: false }] }] } });
|
|
15752
|
-
|
|
15753
|
-
var text = /*#__PURE__*/Object.freeze({
|
|
15754
|
-
__proto__: null,
|
|
15755
|
-
TextInputComponent: TextInputComponent
|
|
15756
|
-
});
|
|
15757
|
-
|
|
15758
16262
|
class TextareaInputComponent extends BaseTextInputComponent {
|
|
15759
16263
|
iconSize = Size.SMALL;
|
|
15760
16264
|
translateService = inject(TranslateService);
|
|
@@ -18662,7 +19166,7 @@ class WrapperInputComponent extends ConfigComponent {
|
|
|
18662
19166
|
break;
|
|
18663
19167
|
}
|
|
18664
19168
|
case InputType.TOGGLE: {
|
|
18665
|
-
const { ToggleInputComponent } = await import('./magmonium-one-toggle-
|
|
19169
|
+
const { ToggleInputComponent } = await import('./magmonium-one-toggle-BuXPZomi.mjs');
|
|
18666
19170
|
this.createDynamicComponent(seq, ToggleInputComponent, [], true);
|
|
18667
19171
|
break;
|
|
18668
19172
|
}
|
|
@@ -18674,12 +19178,12 @@ class WrapperInputComponent extends ConfigComponent {
|
|
|
18674
19178
|
break;
|
|
18675
19179
|
}
|
|
18676
19180
|
case InputType.PASSWORD: {
|
|
18677
|
-
const { PasswordInputComponent } = await import('./magmonium-one-password-
|
|
19181
|
+
const { PasswordInputComponent } = await import('./magmonium-one-password-CX8kghKQ.mjs');
|
|
18678
19182
|
this.createDynamicComponent(seq, PasswordInputComponent);
|
|
18679
19183
|
break;
|
|
18680
19184
|
}
|
|
18681
19185
|
case InputType.OTP: {
|
|
18682
|
-
const { OtpInputComponent } = await import('./magmonium-one-otp-
|
|
19186
|
+
const { OtpInputComponent } = await import('./magmonium-one-otp-f1o0Dsf3.mjs');
|
|
18683
19187
|
this.createDynamicComponent(seq, OtpInputComponent);
|
|
18684
19188
|
break;
|
|
18685
19189
|
}
|
|
@@ -33025,5 +33529,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
33025
33529
|
* Generated bundle index. Do not edit.
|
|
33026
33530
|
*/
|
|
33027
33531
|
|
|
33028
|
-
export {
|
|
33029
|
-
//# sourceMappingURL=magmonium-one-magmonium-one-
|
|
33532
|
+
export { DashboardCardComponent 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_FILTER_VARIANT as Z, DEFAULT_SIZE as _, BaseTextInputComponent as a, NAV_STORE_REF as a$, DateInputComponent as a0, DatePickerComponent as a1, DeviceService as a2, DomService as a3, Domain as a4, DotGridComponent as a5, DragListDirective as a6, DragListItemDirective as a7, DraggableDirective as a8, DropdownInputComponent as a9, KeyValueComponent as aA, LAYOUT_ASSET_FOLDER as aB, LOGIN_COMPONENT as aC, LOGIN_STORE as aD, LanguageComponent as aE, LogoComponent as aF, MAG_SOCKET_EVENT as aG, MHeroColorDirective as aH, MHeroComponent as aI, MODAL_REF as aJ, MODAL_STORE_REF as aK, MRefDirective as aL, MStepComponent as aM, MURL_PARAM as aN, MURL_SEP as aO, ManifestEnrichmentService as aP, MenuComponent as aQ, ModalDirective as aR, ModalRef as aS, ModalStore as aT, MoneyPipe as aU, MultiRangeInputComponent as aV, MurlUrlSerializer as aW, NAV_DEFAULT_MURL as aX, NAV_ID_SEP as aY, NAV_MAIN_BUTTONS as aZ, NAV_SEGMENT_RE as a_, FILTER_GROUP_CONTEXT as aa, FILTER_VARIANTS as ab, FLEX_VARIANTS as ac, FOLDER_PICK_LISTENER as ad, FORM_ASSET_FOLDER as ae, FileService as af, FileUploadDirective as ag, FileUploadInputComponent as ah, FlexComponent as ai, FlexItemComponent as aj, FormGroupComponent as ak, FrameComponent as al, FreezeService as am, GRID_BREAKPOINTS as an, GetNavService as ao, HeaderComponent$1 as ap, HighlightDirective as aq, HttpService as ar, ICON_SOURCE as as, IS_SIDE_PANEL as at, IconComponent as au, ImgComponent as av, InputType as aw, InstrumentScoreComponent as ax, InterceptorObservables as ay, JumbotronComponent as az, TextOutputComponent as b, SectionCarouselComponent as b$, NAV_WC_COMPONENTS as b0, NAV_WIDGET_MAP as b1, NavComponent as b2, NavDetailsComponent as b3, NavHeaderComponent as b4, NavMenuComponent as b5, NavStore as b6, NavTrailComponent as b7, NothingComponent as b8, NotificationElementComponent as b9, RadioInputComponent as bA, RangeInputComponent as bB, RatingInputComponent as bC, ReactiveElementComponent as bD, RemoteComponent as bE, RemoteLoaderService as bF, ResizeElementComponent as bG, RouteContainer as bH, RowComponent as bI, SEARCH_QUERY as bJ, SEARCH_RESULTS_EVENT as bK, SECTION_ACCORDION_GROUP as bL, SECTION_FORM_CONTEXT as bM, SHARED_ICONS as bN, SIZE_CONTEXT as bO, ScoreComponent as bP, ScrollComponent as bQ, ScrollService as bR, SearchPanelComponent as bS, SearchStore as bT, SearchUserPanelComponent as bU, SectionAccordionDirective as bV, SectionAccordionGroupDirective as bW, SectionBackComponent as bX, SectionBadgesComponent as bY, SectionButtonGroupComponent as bZ, SectionCardComponent as b_, NotificationGroupComponent as ba, NotificationPopupComponent as bb, NotificationService as bc, NotificationStore as bd, NotificationType as be, NotificationWidgetComponent as bf, ONE_ASSET_BASE_URL as bg, OPTIONS_SOURCE as bh, OVERLAY_WIDGETS as bi, OneApp as bj, OptionsSourceDirective as bk, OverlayBodyComponent as bl, OverlayRef as bm, OverlayService as bn, PLATFORM_BUTTON_NAV_IDS as bo, PLATFORM_EXTENSIBLE_NAV_IDS as bp, PLATFORM_NAV_MAP as bq, PLATFORM_ROOT_CHILDREN as br, PaginationComponent as bs, PanelComponent as bt, PercentagePipe as bu, PlaygroundComponent as bv, PositionDirective as bw, PwaInstallComponent as bx, ROOT_NAV$1 as by, RadioGroupComponent as bz, ButtonComponent as c, UserAvatarComponent as c$, SectionComponent as c0, SectionFilterComponent as c1, SectionFilterGroupComponent as c2, SectionFilterMenuComponent as c3, SectionFilterPanelComponent as c4, SectionFilterRangePanelComponent as c5, SectionFooterComponent as c6, SectionFormComponent as c7, SectionFormItemComponent as c8, SectionHeaderComponent as c9, SvgGeneratorService as cA, SvgService as cB, TOTAL_COLUMNS as cC, TRANSLATION_SOURCE as cD, TableComponent as cE, TechnicalMeterComponent as cF, TextInputComponent as cG, TextareaInputComponent as cH, ThemeComponent as cI, ThemeDataService as cJ, ThemeService as cK, ThemeStore as cL, TimeAgoPipe as cM, TimelineComponent as cN, ToggleButtonComponent as cO, ToggleInputComponent as cP, ToggleRadioInputComponent as cQ, ToolTipDirective as cR, TooltipComponent as cS, TranslateService as cT, TreeGridComponent as cU, URL_SEP as cV, USER_STORE_REF as cW, USER_TAB_MAP as cX, UlComponent as cY, UniverseComponent as cZ, UserApiService as c_, SectionHeroComponent as ca, SectionPaginationComponent as cb, SectionSearchComponent as cc, SectionStepperComponent as cd, SectionTabsComponent as ce, SectionToggleComponent as cf, SectionToggleItemDirective as cg, SelectableCardInputComponent as ch, SelectorDirective as ci, SettingsSearchBarComponent as cj, SettingsSearchService as ck, ShapeComponent as cl, SharedStoreRegistry as cm, SidePanelDirective as cn, Size as co, SocketStore as cp, SortComponent as cq, StatComponent as cr, StepComponent as cs, StepperComponent as ct, StepsComponent as cu, StorageService as cv, StrokeLinecap as cw, StrokeLinejoin as cx, SummaryComponent as cy, SvgGeneratorComponent as cz, APP_CONTEXT_REF as d, initials as d$, UserComponent as d0, UserNavComponent as d1, UserSettingsComponent as d2, UserStore as d3, WC_ROUTE_CHANGED_EVENT as d4, WC_SEARCH_GROUPS as d5, WIN_USER_TAB_HOOK as d6, WIN_USER_TAB_KEY as d7, WatermarkComponent as d8, WcRouterStore as d9, filterHoldsOptions as dA, filterHoldsRange as dB, filterList as dC, filterOne as dD, filterPanelOf as dE, filterPanelWidth as dF, filterRange as dG, filterValueList as dH, filterValues as dI, flattenTreeGridRows as dJ, formatBadgeCount as dK, fullName as dL, generateClipPath as dM, generateTransform as dN, getClassList as dO, getProperty as dP, getScrollParent as dQ, getTierFromPreviewPath as dR, getTreeGridRow as dS, getUniqueId as dT, getValue as dU, hasErrorComputed as dV, hexToRgb as dW, hslToRgb$1 as dX, initMagmoniumApp as dY, initialNotificationState as dZ, initialState$2 as d_, WrapperInputComponent as da, anchorNavId as db, applyColorsToElement as dc, bootstrapMagApp as dd, bootstrapPwaInstall as de, buildWcBaseUrl as df, calculateLuminance as dg, calculateRanks as dh, cellText as di, checkFilterCondition as dj, childNavId as dk, classListSignal as dl, coerceSize as dm, cornerEdge as dn, cornerSide as dp, createMap as dq, createPlatformNavMap as dr, deriveAvatarGradient as ds, deriveContrastColor as dt, deriveOppositeColor as du, derivePropertyName as dv, emailValidation as dw, evaluate as dx, evaluateBool as dy, filterHoldsList as dz, ASSET_BASE_URL as e, requiredValidation as e$, injectAuthenticate as e0, injectInstallApp as e1, injectParentSize as e2, injectScrollSticky as e3, isButtonName as e4, isCancelledComputed as e5, isExtensiblePlatformNavId as e6, isJson as e7, isLoadingComputed as e8, isLocalhost as e9, navIdToRoutePath as eA, navIdToSegments as eB, navToId as eC, parentNavId as eD, parseAddress as eE, parseColor as eF, parsePatternNames as eG, patternValidation as eH, patternsValidation as eI, platformNavWidgets as eJ, privateGuard as eK, processImageToSvg as eL, provideAppContext as eM, provideMagAppConfig as eN, provideMagWcConfig as eO, provideMagWcRoutes as eP, provideModalComponents as eQ, provideMurlUrlSerializer as eR, provideNavWidgets as eS, provideOverlayWidgets as eT, providePlatformNavWidgets as eU, provideSearch as eV, provideSizeContext as eW, provideUserTabs as eX, publicGuard as eY, readFieldPatterns as eZ, renderAddress as e_, isPlatformNavId as ea, isSize as eb, isTierPreview as ec, isUrlLocalhost as ed, isValidNavId as ee, isValidNavSegment as ef, isWebComponent as eg, linkToId as eh, linkToNav as ei, loadingActions as ej, mInterceptor as ek, manualValidation as el, matchFieldValidation as em, maxLengthValidation as en, maxValidation as eo, mergePlatformNav as ep, mergeUnique as eq, mergeUniqueBy as er, mergeUniqueWith as es, minAgeValidation as et, minLengthValidation as eu, minValidation as ev, miniMarkToHtml as ew, navIdChain as ex, navIdFor as ey, navIdSegment as ez, AccordionBodyDirective as f, resolveConfigAsset as f0, resolveIconSize as f1, resolvePallet as f2, resolvePatternRules as f3, resolveSize as f4, rgbToHex as f5, rgbToHsl as f6, rowHasChildren as f7, samePatterns as f8, segmentsToNavId as f9, setProperty as fa, setTreeGridChildren as fb, settingsWidgets as fc, shouldShowBadge as fd, splitNavId as fe, stringToColor as ff, toAttrBool as fg, toAttrNumber as fh, toCssLength as fi, toHostNavId as fj, toLength$1 as fk, toLocalNavId as fl, toggleTreeGridRow as fm, unfetchedPlatformNav as fn, urlValidation as fo, 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 };
|
|
33533
|
+
//# sourceMappingURL=magmonium-one-magmonium-one-BmSXZeTv.mjs.map
|