@magmonium/one 0.2.25 → 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-39v09CW3.mjs → magmonium-one-magmonium-one-BmSXZeTv.mjs} +743 -295
- package/fesm2022/magmonium-one-magmonium-one-BmSXZeTv.mjs.map +1 -0
- package/fesm2022/{magmonium-one-otp-DpHvMD-U.mjs → magmonium-one-otp-f1o0Dsf3.mjs} +2 -2
- package/fesm2022/{magmonium-one-otp-DpHvMD-U.mjs.map → magmonium-one-otp-f1o0Dsf3.mjs.map} +1 -1
- package/fesm2022/{magmonium-one-password-BzPq0-OQ.mjs → magmonium-one-password-CX8kghKQ.mjs} +2 -2
- package/fesm2022/{magmonium-one-password-BzPq0-OQ.mjs.map → magmonium-one-password-CX8kghKQ.mjs.map} +1 -1
- package/fesm2022/{magmonium-one-toggle-BuLdrdrD.mjs → magmonium-one-toggle-BuXPZomi.mjs} +2 -2
- package/fesm2022/{magmonium-one-toggle-BuLdrdrD.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 +327 -62
- package/fesm2022/magmonium-one-magmonium-one-39v09CW3.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,7 +10324,7 @@ 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 },
|
|
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: `
|
|
10304
10328
|
<ul
|
|
10305
10329
|
class="section-filter-panel"
|
|
10306
10330
|
role="listbox"
|
|
@@ -10379,21 +10403,361 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
10379
10403
|
}
|
|
10380
10404
|
</ul>
|
|
10381
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"] }]
|
|
10382
|
-
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }],
|
|
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';
|
|
10383
10735
|
|
|
10384
10736
|
const FILTER_GROUP_CONTEXT = new InjectionToken('FILTER_GROUP_CONTEXT');
|
|
10385
10737
|
|
|
10386
10738
|
class SectionFilterComponent {
|
|
10387
10739
|
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
10388
10740
|
/**
|
|
10389
|
-
* The key this Filter's slice carries in a FilterGroup's
|
|
10741
|
+
* The key this Filter's slice carries in a FilterGroup's payload.
|
|
10390
10742
|
* Falls back to `label`, which is a TranslationAsset key rather than an
|
|
10391
10743
|
* identity — good enough alone, wrong to rely on in a group (ADR 0025).
|
|
10392
10744
|
*/
|
|
10393
10745
|
name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
10394
10746
|
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
10395
10747
|
optionsAsset = input(...(ngDevMode ? [undefined, { debugName: "optionsAsset" }] : /* istanbul ignore next */ []));
|
|
10396
|
-
|
|
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 */ []));
|
|
10397
10761
|
/**
|
|
10398
10762
|
* The glyph on the dropdown toggle, an IconAsset name. Unset keeps the
|
|
10399
10763
|
* `adjust` tuning icon every Filter wears by default — this replaces that
|
|
@@ -10401,13 +10765,18 @@ class SectionFilterComponent {
|
|
|
10401
10765
|
* therefore one place for an icon to sit.
|
|
10402
10766
|
*/
|
|
10403
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
|
+
*/
|
|
10404
10773
|
value = model([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
10405
10774
|
/**
|
|
10406
10775
|
* The picked value, shaped the way this Filter was authored: the value
|
|
10407
|
-
* itself under single
|
|
10408
|
-
* slice a FilterGroup's key would carry (ADR 0026). A single
|
|
10409
|
-
*
|
|
10410
|
-
*
|
|
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.
|
|
10411
10780
|
*/
|
|
10412
10781
|
filterChange = output();
|
|
10413
10782
|
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
@@ -10434,6 +10803,11 @@ class SectionFilterComponent {
|
|
|
10434
10803
|
variant: 'ghost',
|
|
10435
10804
|
iconOnly: true,
|
|
10436
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 */ []));
|
|
10437
10811
|
dropdownRef = viewChild(SelectorDirective, ...(ngDevMode ? [{ debugName: "dropdownRef" }] : /* istanbul ignore next */ []));
|
|
10438
10812
|
assetStore = inject(AssetStore);
|
|
10439
10813
|
assetOptionsResource = rxResource({
|
|
@@ -10447,6 +10821,10 @@ class SectionFilterComponent {
|
|
|
10447
10821
|
},
|
|
10448
10822
|
});
|
|
10449
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 [];
|
|
10450
10828
|
const inline = this.options();
|
|
10451
10829
|
if (inline.length)
|
|
10452
10830
|
return inline;
|
|
@@ -10464,53 +10842,80 @@ class SectionFilterComponent {
|
|
|
10464
10842
|
}, ...(ngDevMode ? [{ debugName: "resolvedOptions" }] : /* istanbul ignore next */ []));
|
|
10465
10843
|
hasSelection = computed(() => this.selected().length > 0, ...(ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []));
|
|
10466
10844
|
selectedOptions = computed(() => this.resolvedOptions().filter((o) => this.selected().includes(o.value)), ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
|
|
10467
|
-
|
|
10468
|
-
|
|
10469
|
-
|
|
10470
|
-
|
|
10471
|
-
|
|
10472
|
-
|
|
10473
|
-
|
|
10474
|
-
|
|
10475
|
-
|
|
10476
|
-
|
|
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 */ []));
|
|
10477
10873
|
selectOption = (opt) => {
|
|
10478
10874
|
if (opt.disabled)
|
|
10479
10875
|
return;
|
|
10480
10876
|
if (this.group) {
|
|
10481
|
-
this.group.toggle(this.resolvedName(), opt, this.
|
|
10482
|
-
if (!this.
|
|
10877
|
+
this.group.toggle(this.resolvedName(), opt, this.variant());
|
|
10878
|
+
if (!filterHoldsList(this.variant()))
|
|
10483
10879
|
this.dropdownRef()?.close();
|
|
10484
10880
|
return;
|
|
10485
10881
|
}
|
|
10486
|
-
|
|
10487
|
-
|
|
10488
|
-
|
|
10882
|
+
const current = this.selected();
|
|
10883
|
+
if (filterHoldsList(this.variant())) {
|
|
10884
|
+
this.write(current.includes(opt.value)
|
|
10489
10885
|
? current.filter((v) => v !== opt.value)
|
|
10490
|
-
: [...current, opt.value];
|
|
10491
|
-
|
|
10886
|
+
: [...current, opt.value]);
|
|
10887
|
+
return;
|
|
10492
10888
|
}
|
|
10493
|
-
|
|
10494
|
-
|
|
10495
|
-
|
|
10496
|
-
|
|
10497
|
-
|
|
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;
|
|
10498
10900
|
}
|
|
10901
|
+
this.write(next ? [next[0], next[1]] : []);
|
|
10499
10902
|
};
|
|
10903
|
+
clearRange = () => this.writeRange(undefined);
|
|
10500
10904
|
removeOption = (val) => {
|
|
10501
10905
|
if (this.group) {
|
|
10502
10906
|
this.group.remove(this.resolvedName(), val);
|
|
10503
10907
|
return;
|
|
10504
10908
|
}
|
|
10505
|
-
this.write(this.
|
|
10909
|
+
this.write(this.selected().filter((v) => v !== val));
|
|
10506
10910
|
};
|
|
10507
10911
|
/**
|
|
10508
|
-
* The model is a list whatever the variant, the badges and
|
|
10912
|
+
* The model is a list whatever the variant, the badges and every panel
|
|
10509
10913
|
* reading one; only what leaves the component is narrowed.
|
|
10510
10914
|
*/
|
|
10511
10915
|
write = (next) => {
|
|
10512
|
-
|
|
10513
|
-
this.
|
|
10916
|
+
const list = [...next];
|
|
10917
|
+
this.value.set(list);
|
|
10918
|
+
this.filterChange.emit(filterHoldsList(this.variant()) ? list : (list[0] ?? ''));
|
|
10514
10919
|
};
|
|
10515
10920
|
constructor() {
|
|
10516
10921
|
const group = this.group;
|
|
@@ -10518,31 +10923,48 @@ class SectionFilterComponent {
|
|
|
10518
10923
|
return;
|
|
10519
10924
|
// Registered rather than found by a content query: a Col may sit between
|
|
10520
10925
|
// this Filter and its group, and squeezed the group renders no bar at all
|
|
10521
|
-
// — the
|
|
10522
|
-
// 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).
|
|
10523
10928
|
const member = {
|
|
10524
10929
|
name: this.resolvedName,
|
|
10525
10930
|
label: this.label,
|
|
10526
10931
|
options: this.resolvedOptions,
|
|
10527
|
-
|
|
10932
|
+
variant: this.variant,
|
|
10933
|
+
min: this.min,
|
|
10934
|
+
max: this.max,
|
|
10935
|
+
step: this.step,
|
|
10528
10936
|
};
|
|
10529
10937
|
group.register(member);
|
|
10530
10938
|
inject(DestroyRef).onDestroy(() => group.unregister(member));
|
|
10531
10939
|
}
|
|
10532
10940
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10533
|
-
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: `
|
|
10534
10942
|
<div class="section-filter__bar">
|
|
10535
10943
|
@if (hasSelection()) {
|
|
10536
10944
|
<div class="section-filter__badges">
|
|
10537
|
-
@
|
|
10538
|
-
|
|
10539
|
-
|
|
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 }}
|
|
10540
10951
|
<m-one-button
|
|
10541
10952
|
name="x"
|
|
10542
|
-
(clicked)="
|
|
10543
|
-
[attr.aria-label]="('remove' | translate) + ' ' + (
|
|
10953
|
+
(clicked)="clearRange()"
|
|
10954
|
+
[attr.aria-label]="('remove' | translate) + ' ' + label()"
|
|
10544
10955
|
/>
|
|
10545
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
|
+
}
|
|
10546
10968
|
}
|
|
10547
10969
|
</div>
|
|
10548
10970
|
} @else {
|
|
@@ -10567,15 +10989,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
10567
10989
|
<div class="section-filter__bar">
|
|
10568
10990
|
@if (hasSelection()) {
|
|
10569
10991
|
<div class="section-filter__badges">
|
|
10570
|
-
@
|
|
10571
|
-
|
|
10572
|
-
|
|
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 }}
|
|
10573
10998
|
<m-one-button
|
|
10574
10999
|
name="x"
|
|
10575
|
-
(clicked)="
|
|
10576
|
-
[attr.aria-label]="('remove' | translate) + ' ' + (
|
|
11000
|
+
(clicked)="clearRange()"
|
|
11001
|
+
[attr.aria-label]="('remove' | translate) + ' ' + label()"
|
|
10577
11002
|
/>
|
|
10578
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
|
+
}
|
|
10579
11015
|
}
|
|
10580
11016
|
</div>
|
|
10581
11017
|
} @else {
|
|
@@ -10603,7 +11039,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
10603
11039
|
'[class.no-border]': 'noBorder()',
|
|
10604
11040
|
'[class.in-group]': '!!group',
|
|
10605
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"] }]
|
|
10606
|
-
}], 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 }] }] } });
|
|
10607
11043
|
|
|
10608
11044
|
/**
|
|
10609
11045
|
* One key of a group's selection read as the list a `multiple` Filter carries.
|
|
@@ -10642,21 +11078,236 @@ function filterOne(selection, name) {
|
|
|
10642
11078
|
function filterValueList(value) {
|
|
10643
11079
|
return toList(value).filter((entry) => entry !== '');
|
|
10644
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
|
+
}
|
|
10645
11117
|
const toList = (value) => {
|
|
10646
11118
|
if (value === undefined)
|
|
10647
11119
|
return [];
|
|
10648
11120
|
return (Array.isArray(value) ? value : [value]).map(String);
|
|
10649
11121
|
};
|
|
10650
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
|
+
|
|
10651
11301
|
/**
|
|
10652
11302
|
* A Row-like container that owns the selection for every Filter beneath it and
|
|
10653
11303
|
* emits one aggregate whenever any of them changes (ADR 0025). Admits Cols, so
|
|
10654
11304
|
* a Filter may sit any depth down — DI, not a content query, is what finds it.
|
|
10655
11305
|
*
|
|
10656
11306
|
* Squeezed, it collapses to one icon whose menu drills into each Filter in
|
|
10657
|
-
* turn
|
|
10658
|
-
*
|
|
10659
|
-
*
|
|
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.
|
|
10660
11311
|
*/
|
|
10661
11312
|
class SectionFilterGroupComponent {
|
|
10662
11313
|
squeeze = input(undefined, ...(ngDevMode ? [{ debugName: "squeeze" }] : /* istanbul ignore next */ []));
|
|
@@ -10668,9 +11319,9 @@ class SectionFilterGroupComponent {
|
|
|
10668
11319
|
config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
|
|
10669
11320
|
/**
|
|
10670
11321
|
* The whole group's selection, keyed by each Filter's `name` — one key per
|
|
10671
|
-
* Filter holding something, and none for a Filter holding nothing. A
|
|
10672
|
-
*
|
|
10673
|
-
* 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).
|
|
10674
11325
|
*/
|
|
10675
11326
|
value = model({}, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
10676
11327
|
filterChange = output();
|
|
@@ -10679,7 +11330,6 @@ class SectionFilterGroupComponent {
|
|
|
10679
11330
|
isDesignMode = !!inject(IS_DESIGN_MODE, {
|
|
10680
11331
|
optional: true,
|
|
10681
11332
|
});
|
|
10682
|
-
translateService = inject(TranslateService);
|
|
10683
11333
|
sectionContext = inject(SECTION_CONTEXT, { optional: true });
|
|
10684
11334
|
selectorDir = viewChild(SelectorDirective, ...(ngDevMode ? [{ debugName: "selectorDir" }] : /* istanbul ignore next */ []));
|
|
10685
11335
|
squeezed = computed(() => this.squeeze() ?? this.config()?.squeeze ?? false, ...(ngDevMode ? [{ debugName: "squeezed" }] : /* istanbul ignore next */ []));
|
|
@@ -10706,96 +11356,53 @@ class SectionFilterGroupComponent {
|
|
|
10706
11356
|
position: 'top-right',
|
|
10707
11357
|
}), ...(ngDevMode ? [{ debugName: "countBadgeConfig" }] : /* istanbul ignore next */ []));
|
|
10708
11358
|
/**
|
|
10709
|
-
*
|
|
10710
|
-
*
|
|
10711
|
-
*
|
|
10712
|
-
*
|
|
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).
|
|
10713
11364
|
*/
|
|
10714
|
-
menuOptions = computed(() => {
|
|
10715
|
-
const rows = this.members().map((member) => {
|
|
10716
|
-
const name = member.name();
|
|
10717
|
-
const selected = this.valueOf(name);
|
|
10718
|
-
const label = selected.length
|
|
10719
|
-
? this.translateService.translate(member.label(), {
|
|
10720
|
-
// Pre-resolved, so the menu's own `| translate` passes it through:
|
|
10721
|
-
// a key with no entry comes back as itself.
|
|
10722
|
-
count: String(selected.length),
|
|
10723
|
-
}) + ` (${selected.length})`
|
|
10724
|
-
: member.label();
|
|
10725
|
-
return {
|
|
10726
|
-
id: name,
|
|
10727
|
-
label,
|
|
10728
|
-
selected: selected.length > 0,
|
|
10729
|
-
options: [
|
|
10730
|
-
member.options().map((opt) => ({
|
|
10731
|
-
id: `${name}:${opt.value}`,
|
|
10732
|
-
label: opt.label,
|
|
10733
|
-
value: opt.value,
|
|
10734
|
-
disabled: opt.disabled,
|
|
10735
|
-
selected: selected.includes(opt.value),
|
|
10736
|
-
})),
|
|
10737
|
-
],
|
|
10738
|
-
};
|
|
10739
|
-
});
|
|
10740
|
-
return rows.length ? [rows] : [];
|
|
10741
|
-
}, ...(ngDevMode ? [{ debugName: "menuOptions" }] : /* istanbul ignore next */ []));
|
|
10742
11365
|
selectorConfig = computed(() => ({
|
|
10743
|
-
component:
|
|
11366
|
+
component: SectionFilterMenuComponent,
|
|
10744
11367
|
base: 'm-section-filter-group',
|
|
10745
11368
|
width: '260px',
|
|
10746
11369
|
bindings: [
|
|
10747
|
-
inputBinding('
|
|
10748
|
-
|
|
10749
|
-
// its selector on every action — right for a menu of commands, wrong for
|
|
10750
|
-
// one of checkboxes (ADR 0025).
|
|
10751
|
-
outputBinding('action', (item) => this.onMenuAction(item)),
|
|
11370
|
+
inputBinding('members', this.members),
|
|
11371
|
+
inputBinding('ctx', () => this.context),
|
|
10752
11372
|
],
|
|
10753
11373
|
}), ...(ngDevMode ? [{ debugName: "selectorConfig" }] : /* istanbul ignore next */ []));
|
|
10754
|
-
onMenuAction = (item) => {
|
|
10755
|
-
const separator = item.id.indexOf(':');
|
|
10756
|
-
if (separator < 0)
|
|
10757
|
-
return;
|
|
10758
|
-
const name = item.id.slice(0, separator);
|
|
10759
|
-
const member = this.members().find((m) => m.name() === name);
|
|
10760
|
-
if (!member)
|
|
10761
|
-
return;
|
|
10762
|
-
const option = member
|
|
10763
|
-
.options()
|
|
10764
|
-
.find((opt) => opt.value === item.id.slice(separator + 1));
|
|
10765
|
-
if (!option)
|
|
10766
|
-
return;
|
|
10767
|
-
this.toggle(name, option, member.multiple());
|
|
10768
|
-
};
|
|
10769
11374
|
/**
|
|
10770
11375
|
* A Filter reads its slice as the list it draws badges from, whatever shape
|
|
10771
11376
|
* the key holds — the map is the payload's shape and not the row's, so the
|
|
10772
11377
|
* scalar a single-select Filter carries is widened back here rather than at
|
|
10773
11378
|
* every reader (ADR 0026).
|
|
10774
11379
|
*/
|
|
10775
|
-
valueOf = (name) =>
|
|
11380
|
+
valueOf = (name) => filterValues(this.value(), name);
|
|
10776
11381
|
/**
|
|
10777
|
-
*
|
|
10778
|
-
* than passed in, because `remove` is called from a badge and knows
|
|
10779
|
-
* value it is dropping. An unregistered name
|
|
10780
|
-
* 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.
|
|
10781
11386
|
*/
|
|
10782
|
-
|
|
11387
|
+
variantOf = (name) => this.members().find((m) => m.name() === name)?.variant() ?? 'single';
|
|
10783
11388
|
write = (name, next) => {
|
|
10784
11389
|
const updated = { ...this.value() };
|
|
10785
11390
|
if (!next.length) {
|
|
10786
11391
|
delete updated[name];
|
|
10787
11392
|
}
|
|
10788
11393
|
else {
|
|
10789
|
-
updated[name] = this.
|
|
11394
|
+
updated[name] = filterHoldsList(this.variantOf(name))
|
|
11395
|
+
? [...next]
|
|
11396
|
+
: next[0];
|
|
10790
11397
|
}
|
|
10791
11398
|
this.value.set(updated);
|
|
10792
11399
|
this.filterChange.emit(updated);
|
|
10793
11400
|
};
|
|
10794
|
-
toggle = (name, option,
|
|
11401
|
+
toggle = (name, option, variant) => {
|
|
10795
11402
|
if (option.disabled)
|
|
10796
11403
|
return;
|
|
10797
11404
|
const current = this.valueOf(name);
|
|
10798
|
-
if (
|
|
11405
|
+
if (filterHoldsList(variant)) {
|
|
10799
11406
|
this.write(name, current.includes(option.value)
|
|
10800
11407
|
? current.filter((v) => v !== option.value)
|
|
10801
11408
|
: [...current, option.value]);
|
|
@@ -10803,17 +11410,25 @@ class SectionFilterGroupComponent {
|
|
|
10803
11410
|
}
|
|
10804
11411
|
this.write(name, current.includes(option.value) ? [] : [option.value]);
|
|
10805
11412
|
// Single-select has nothing more to say once it has said it. Multi-select
|
|
10806
|
-
//
|
|
11413
|
+
// and range both stay open, which is the reason this drill-in is not a
|
|
11414
|
+
// ContextMenuComponent.
|
|
10807
11415
|
if (!this.squeezed())
|
|
10808
11416
|
return;
|
|
10809
11417
|
this.selectorDir()?.close();
|
|
10810
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 ?? []);
|
|
10811
11425
|
context = {
|
|
10812
11426
|
squeeze: this.squeezed,
|
|
10813
11427
|
register: (member) => this.members.update((list) => list.includes(member) ? list : [...list, member]),
|
|
10814
11428
|
unregister: (member) => this.members.update((list) => list.filter((m) => m !== member)),
|
|
10815
11429
|
valueOf: this.valueOf,
|
|
10816
11430
|
toggle: this.toggle,
|
|
11431
|
+
setRange: this.setRange,
|
|
10817
11432
|
remove: (name, val) => this.write(name, this.valueOf(name).filter((v) => v !== val)),
|
|
10818
11433
|
};
|
|
10819
11434
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionFilterGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -15644,173 +16259,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
15644
16259
|
}, styles: [":host{display:grid;box-sizing:border-box;min-width:0}:host(.is-design-mode){min-width:4em;min-height:4em}\n"] }]
|
|
15645
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 }] }] } });
|
|
15646
16261
|
|
|
15647
|
-
class TextInputComponent extends BaseTextInputComponent {
|
|
15648
|
-
value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
15649
|
-
config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
|
|
15650
|
-
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
15651
|
-
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
15652
|
-
invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
15653
|
-
touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
15654
|
-
focused = input(false, ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
15655
|
-
errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
15656
|
-
showErrors = computed(() => this.touched() && this.invalid(), ...(ngDevMode ? [{ debugName: "showErrors" }] : /* istanbul ignore next */ []));
|
|
15657
|
-
hideErrors = input(false, ...(ngDevMode ? [{ debugName: "hideErrors" }] : /* istanbul ignore next */ []));
|
|
15658
|
-
// A `number` Field draws this same component (WrapperInputComponent has no
|
|
15659
|
-
// case of its own for it), so the type it declares decides the element it
|
|
15660
|
-
// draws. What *leaves* the field is coerced a level up, in the wrapper: an
|
|
15661
|
-
// `<input>` reads its value as text whatever its type, and every other
|
|
15662
|
-
// component on this base is a string field.
|
|
15663
|
-
isNumber = computed(() => {
|
|
15664
|
-
const config = this.config();
|
|
15665
|
-
return !!config && config.type === InputType.NUMBER;
|
|
15666
|
-
}, ...(ngDevMode ? [{ debugName: "isNumber" }] : /* istanbul ignore next */ []));
|
|
15667
|
-
onInput(event) {
|
|
15668
|
-
const target = event.target;
|
|
15669
|
-
this.setValue(target?.value ?? '');
|
|
15670
|
-
}
|
|
15671
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
15672
|
-
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: `
|
|
15673
|
-
@if (config(); as text) {
|
|
15674
|
-
@if (text.label) {
|
|
15675
|
-
<m-label
|
|
15676
|
-
[for]="text.name ?? ''"
|
|
15677
|
-
[placeholder]="text.label"
|
|
15678
|
-
[params]="text.params"
|
|
15679
|
-
[required]="required()"
|
|
15680
|
-
[disabled]="disabled()"
|
|
15681
|
-
/>
|
|
15682
|
-
}
|
|
15683
|
-
<div class="input-wrapper">
|
|
15684
|
-
@if (text.icon) {
|
|
15685
|
-
<m-icon
|
|
15686
|
-
[name]="text.icon"
|
|
15687
|
-
[color]="iconColor()"
|
|
15688
|
-
[one]="text.one"
|
|
15689
|
-
/>
|
|
15690
|
-
}
|
|
15691
|
-
@if (text.prefix) {
|
|
15692
|
-
<span class="input-prefix">{{ text.prefix }}</span>
|
|
15693
|
-
}
|
|
15694
|
-
<input
|
|
15695
|
-
[id]="text.name ?? ''"
|
|
15696
|
-
[attr.data-testid]="text.testid ?? (text.name ? text.name + '-input' : null)"
|
|
15697
|
-
[value]="value()"
|
|
15698
|
-
#inputElement
|
|
15699
|
-
[class.error]="showErrors()"
|
|
15700
|
-
[class.has-icon]="!!text.icon"
|
|
15701
|
-
[class.has-prefix]="!!text.prefix"
|
|
15702
|
-
[disabled]="disabled()"
|
|
15703
|
-
[readOnly]="readonly() || config()?.readonly"
|
|
15704
|
-
[placeholder]="text.placeholder ?? '' | translate: text.params"
|
|
15705
|
-
(input)="onInput($event)"
|
|
15706
|
-
(focus)="isFocused.set(true)"
|
|
15707
|
-
(blur)="isFocused.set(false); touched.set(true)"
|
|
15708
|
-
[type]="isNumber() ? 'number' : 'text'"
|
|
15709
|
-
[attr.min]="isNumber() ? text.min ?? null : null"
|
|
15710
|
-
[attr.max]="isNumber() ? text.max ?? null : null"
|
|
15711
|
-
[attr.step]="isNumber() ? text.step ?? null : null"
|
|
15712
|
-
/>
|
|
15713
|
-
@if (config()?.status; as status) {
|
|
15714
|
-
<div class="input-indicator" [class]="'input-indicator--' + status">
|
|
15715
|
-
@if (status === 'checking') {
|
|
15716
|
-
<span class="spinner"></span>
|
|
15717
|
-
} @else if (status === 'available') {
|
|
15718
|
-
<m-icon name="check" color="success" />
|
|
15719
|
-
}
|
|
15720
|
-
</div>
|
|
15721
|
-
}
|
|
15722
|
-
@if (text.suffix) {
|
|
15723
|
-
<span class="input-suffix">{{ text.suffix }}</span>
|
|
15724
|
-
}
|
|
15725
|
-
</div>
|
|
15726
|
-
@if (showErrors() && !hideErrors()) {
|
|
15727
|
-
@for (error of errors(); track $index) {
|
|
15728
|
-
<m-text-output
|
|
15729
|
-
variant="footer"
|
|
15730
|
-
color="error"
|
|
15731
|
-
[label]="error.message"
|
|
15732
|
-
/>
|
|
15733
|
-
}
|
|
15734
|
-
}
|
|
15735
|
-
}
|
|
15736
|
-
`, 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 });
|
|
15737
|
-
}
|
|
15738
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
15739
|
-
type: Component,
|
|
15740
|
-
args: [{ selector: 'm-text-input', template: `
|
|
15741
|
-
@if (config(); as text) {
|
|
15742
|
-
@if (text.label) {
|
|
15743
|
-
<m-label
|
|
15744
|
-
[for]="text.name ?? ''"
|
|
15745
|
-
[placeholder]="text.label"
|
|
15746
|
-
[params]="text.params"
|
|
15747
|
-
[required]="required()"
|
|
15748
|
-
[disabled]="disabled()"
|
|
15749
|
-
/>
|
|
15750
|
-
}
|
|
15751
|
-
<div class="input-wrapper">
|
|
15752
|
-
@if (text.icon) {
|
|
15753
|
-
<m-icon
|
|
15754
|
-
[name]="text.icon"
|
|
15755
|
-
[color]="iconColor()"
|
|
15756
|
-
[one]="text.one"
|
|
15757
|
-
/>
|
|
15758
|
-
}
|
|
15759
|
-
@if (text.prefix) {
|
|
15760
|
-
<span class="input-prefix">{{ text.prefix }}</span>
|
|
15761
|
-
}
|
|
15762
|
-
<input
|
|
15763
|
-
[id]="text.name ?? ''"
|
|
15764
|
-
[attr.data-testid]="text.testid ?? (text.name ? text.name + '-input' : null)"
|
|
15765
|
-
[value]="value()"
|
|
15766
|
-
#inputElement
|
|
15767
|
-
[class.error]="showErrors()"
|
|
15768
|
-
[class.has-icon]="!!text.icon"
|
|
15769
|
-
[class.has-prefix]="!!text.prefix"
|
|
15770
|
-
[disabled]="disabled()"
|
|
15771
|
-
[readOnly]="readonly() || config()?.readonly"
|
|
15772
|
-
[placeholder]="text.placeholder ?? '' | translate: text.params"
|
|
15773
|
-
(input)="onInput($event)"
|
|
15774
|
-
(focus)="isFocused.set(true)"
|
|
15775
|
-
(blur)="isFocused.set(false); touched.set(true)"
|
|
15776
|
-
[type]="isNumber() ? 'number' : 'text'"
|
|
15777
|
-
[attr.min]="isNumber() ? text.min ?? null : null"
|
|
15778
|
-
[attr.max]="isNumber() ? text.max ?? null : null"
|
|
15779
|
-
[attr.step]="isNumber() ? text.step ?? null : null"
|
|
15780
|
-
/>
|
|
15781
|
-
@if (config()?.status; as status) {
|
|
15782
|
-
<div class="input-indicator" [class]="'input-indicator--' + status">
|
|
15783
|
-
@if (status === 'checking') {
|
|
15784
|
-
<span class="spinner"></span>
|
|
15785
|
-
} @else if (status === 'available') {
|
|
15786
|
-
<m-icon name="check" color="success" />
|
|
15787
|
-
}
|
|
15788
|
-
</div>
|
|
15789
|
-
}
|
|
15790
|
-
@if (text.suffix) {
|
|
15791
|
-
<span class="input-suffix">{{ text.suffix }}</span>
|
|
15792
|
-
}
|
|
15793
|
-
</div>
|
|
15794
|
-
@if (showErrors() && !hideErrors()) {
|
|
15795
|
-
@for (error of errors(); track $index) {
|
|
15796
|
-
<m-text-output
|
|
15797
|
-
variant="footer"
|
|
15798
|
-
color="error"
|
|
15799
|
-
[label]="error.message"
|
|
15800
|
-
/>
|
|
15801
|
-
}
|
|
15802
|
-
}
|
|
15803
|
-
}
|
|
15804
|
-
`, imports: [LabelComponent, TextOutputComponent, IconComponent, TranslatePipe], host: {
|
|
15805
|
-
'[class]': "config()?.variant ? 'm-input--' + config()?.variant : ''",
|
|
15806
|
-
}, 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"] }]
|
|
15807
|
-
}], 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 }] }] } });
|
|
15808
|
-
|
|
15809
|
-
var text = /*#__PURE__*/Object.freeze({
|
|
15810
|
-
__proto__: null,
|
|
15811
|
-
TextInputComponent: TextInputComponent
|
|
15812
|
-
});
|
|
15813
|
-
|
|
15814
16262
|
class TextareaInputComponent extends BaseTextInputComponent {
|
|
15815
16263
|
iconSize = Size.SMALL;
|
|
15816
16264
|
translateService = inject(TranslateService);
|
|
@@ -18718,7 +19166,7 @@ class WrapperInputComponent extends ConfigComponent {
|
|
|
18718
19166
|
break;
|
|
18719
19167
|
}
|
|
18720
19168
|
case InputType.TOGGLE: {
|
|
18721
|
-
const { ToggleInputComponent } = await import('./magmonium-one-toggle-
|
|
19169
|
+
const { ToggleInputComponent } = await import('./magmonium-one-toggle-BuXPZomi.mjs');
|
|
18722
19170
|
this.createDynamicComponent(seq, ToggleInputComponent, [], true);
|
|
18723
19171
|
break;
|
|
18724
19172
|
}
|
|
@@ -18730,12 +19178,12 @@ class WrapperInputComponent extends ConfigComponent {
|
|
|
18730
19178
|
break;
|
|
18731
19179
|
}
|
|
18732
19180
|
case InputType.PASSWORD: {
|
|
18733
|
-
const { PasswordInputComponent } = await import('./magmonium-one-password-
|
|
19181
|
+
const { PasswordInputComponent } = await import('./magmonium-one-password-CX8kghKQ.mjs');
|
|
18734
19182
|
this.createDynamicComponent(seq, PasswordInputComponent);
|
|
18735
19183
|
break;
|
|
18736
19184
|
}
|
|
18737
19185
|
case InputType.OTP: {
|
|
18738
|
-
const { OtpInputComponent } = await import('./magmonium-one-otp-
|
|
19186
|
+
const { OtpInputComponent } = await import('./magmonium-one-otp-f1o0Dsf3.mjs');
|
|
18739
19187
|
this.createDynamicComponent(seq, OtpInputComponent);
|
|
18740
19188
|
break;
|
|
18741
19189
|
}
|
|
@@ -33081,5 +33529,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
33081
33529
|
* Generated bundle index. Do not edit.
|
|
33082
33530
|
*/
|
|
33083
33531
|
|
|
33084
|
-
export {
|
|
33085
|
-
//# 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
|