@masterteam/properties 0.0.73 → 0.0.75

package/fesm2022/masterteam-properties.mjs

@@ -27,6 +27,11 @@ import { FormulaBuilder } from '@masterteam/formula-builder';
 import { SelectField } from '@masterteam/components/select-field';
 import { TextField } from '@masterteam/components/text-field';
 import { ToggleField } from '@masterteam/components/toggle-field';
+import { ColorPickerField } from '@masterteam/components/color-picker-field';
+import { NumberField } from '@masterteam/components/number-field';
+import { SliderField } from '@masterteam/components/slider-field';
+import { Progress } from '@masterteam/components/progress';
+import { resolvePercentageColor } from '@masterteam/components/entities';
 import { ModalService } from '@masterteam/components/modal';
 import { ModalRef } from '@masterteam/components/dialog';
 
@@ -1899,39 +1904,455 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     ], template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n" }]
         }], ctorParameters: () => [] });
 
+/** Fallback colour applied when no rule matches. */
+const PERCENTAGE_DEFAULT_COLOR = '#293558';
+/**
+ * The colour scale the backend applies to Percentage properties that carry no
+ * custom configuration. A newly created property starts from these so the form
+ * never has to submit `{}` or an empty `colorRules` array.
+ */
+const PERCENTAGE_DEFAULT_COLOR_RULES = [
+    { maxValue: 25, color: '#ed2517' },
+    { maxValue: 50, color: '#FFB300' },
+    { maxValue: 75, color: '#0A5EBE' },
+    { maxValue: 100, color: '#4caf50' },
+];
+const PERCENTAGE_MIN_VALUE = 0;
+const PERCENTAGE_MAX_VALUE = 100;
+const HEX_COLOR_PATTERN = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/;
+function toFiniteNumber(value) {
+    if (value === null || value === undefined || value === '') {
+        return null;
+    }
+    const parsed = typeof value === 'number' ? value : Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+function toColor(value, fallback) {
+    const color = typeof value === 'string' ? value.trim() : '';
+    return color || fallback;
+}
+function cloneDefaultRules() {
+    return PERCENTAGE_DEFAULT_COLOR_RULES.map((rule) => ({ ...rule }));
+}
+/**
+ * Reads whatever the backend stored into the draft the editor works on.
+ *
+ * Three inputs map to three different starting points, and the difference
+ * matters: an absent configuration is a *new* property that should adopt the
+ * default scale, while a legacy `{ color }` is an *existing* property whose
+ * single colour must be preserved as-is — seeding it with default rules would
+ * silently repaint it on the next save.
+ */
+function normalizePercentageConfiguration(raw) {
+    const source = raw && typeof raw === 'object' && !Array.isArray(raw)
+        ? raw
+        : null;
+    if (!source || Object.keys(source).length === 0) {
+        return {
+            colorRules: cloneDefaultRules(),
+            defaultColor: PERCENTAGE_DEFAULT_COLOR,
+        };
+    }
+    const defaultColor = toColor(source['defaultColor'] ?? source['color'], PERCENTAGE_DEFAULT_COLOR);
+    const rawRules = source['colorRules'];
+    if (!Array.isArray(rawRules)) {
+        // Legacy `{ color }`, or a shape with no rules at all: one flat colour.
+        return { colorRules: [], defaultColor };
+    }
+    return {
+        colorRules: rawRules
+            .filter((rule) => !!rule && typeof rule === 'object')
+            .map((rule) => ({
+            minValue: toFiniteNumber(rule['minValue']),
+            maxValue: toFiniteNumber(rule['maxValue']),
+            color: toColor(rule['color'], PERCENTAGE_DEFAULT_COLOR),
+        })),
+        defaultColor,
+    };
+}
+/**
+ * Shapes the draft into what gets sent.
+ *
+ * Two payloads, never a third: with rules it is `{ colorRules, defaultColor }`,
+ * without them it falls back to the legacy `{ color }`. `{}` and an empty
+ * `colorRules` array are both rejected by the backend, so neither is reachable
+ * from here.
+ */
+function serializePercentageConfiguration(draft) {
+    const defaultColor = toColor(draft.defaultColor, PERCENTAGE_DEFAULT_COLOR);
+    const rules = draft.colorRules
+        .filter((rule) => toFiniteNumber(rule.minValue) !== null ||
+        toFiniteNumber(rule.maxValue) !== null)
+        .map((rule) => {
+        const min = toFiniteNumber(rule.minValue);
+        const max = toFiniteNumber(rule.maxValue);
+        return {
+            // `minValue`/`maxValue` are both optional; only send the bounds the
+            // rule actually declares rather than padding them with nulls.
+            ...(min === null ? {} : { minValue: min }),
+            ...(max === null ? {} : { maxValue: max }),
+            color: toColor(rule.color, defaultColor),
+        };
+    });
+    return rules.length
+        ? { colorRules: rules, defaultColor }
+        : { color: defaultColor };
+}
+function isEmptyBand(band) {
+    if (band.from > band.to) {
+        return true;
+    }
+    return band.from === band.to && (band.fromOpen || band.toOpen);
+}
+/** The part of `band` the closed rule range `[min, max]` claims. */
+function intersectRule(band, min, max) {
+    return {
+        from: Math.max(band.from, min),
+        to: Math.min(band.to, max),
+        // The rule range is closed on both ends, so only the band can contribute
+        // an open boundary — and only where the band's own edge is the tighter one.
+        fromOpen: min <= band.from && band.fromOpen,
+        toOpen: max >= band.to && band.toOpen,
+    };
+}
+/** `band` with everything inside `[min, max]` removed — 0, 1, or 2 pieces. */
+function subtractRule(band, min, max) {
+    if (isEmptyBand(intersectRule(band, min, max))) {
+        return [band];
+    }
+    const remainder = [
+        { from: band.from, to: min, fromOpen: band.fromOpen, toOpen: true },
+        { from: max, to: band.to, fromOpen: true, toOpen: band.toOpen },
+    ];
+    return remainder.filter((piece) => !isEmptyBand(piece));
+}
+/**
+ * What the rule list actually covers, given that they are evaluated in order
+ * and the first match wins. Both answers are advisory: a shadowed rule is dead
+ * configuration, and a gap silently falls through to the default colour.
+ */
+function analysePercentageRuleCoverage(rules) {
+    let remaining = [
+        {
+            from: PERCENTAGE_MIN_VALUE,
+            to: PERCENTAGE_MAX_VALUE,
+            fromOpen: false,
+            toOpen: false,
+        },
+    ];
+    const unreachableRuleIndexes = [];
+    rules.forEach((rule, index) => {
+        const min = toFiniteNumber(rule.minValue) ?? PERCENTAGE_MIN_VALUE;
+        const max = toFiniteNumber(rule.maxValue) ?? PERCENTAGE_MAX_VALUE;
+        if (min > max) {
+            // An inverted rule matches nothing, but that is already reported as a
+            // validation error — don't pile a second warning on top of it.
+            return;
+        }
+        const claimsSomething = remaining.some((band) => !isEmptyBand(intersectRule(band, min, max)));
+        if (!claimsSomething) {
+            unreachableRuleIndexes.push(index);
+            return;
+        }
+        remaining = remaining.flatMap((band) => subtractRule(band, min, max));
+    });
+    return {
+        unreachableRuleIndexes,
+        gaps: remaining.map(({ from, to }) => ({ from, to })),
+    };
+}
+
+/** How finely the preview strip samples the 0–100 scale. */
+const PREVIEW_STEP = 0.5;
 class PercentageConfiguration {
     transloco = inject(TranslocoService);
-    formConfig = signal({
-        sections: [
-            {
-                key: 'configuration',
-                label: this.transloco.translate('properties.form.configurationSection'),
-                cssClass: ' rounded-xl bg-content \
-    shadow-sm \
-   px-6 py-4',
-                type: 'header',
-                bodyClass: 'grid grid-cols-1 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] gap-3',
-                fields: [
-                    {
-                        key: 'color',
-                        type: 'color-picker',
-                        label: this.transloco.translate('properties.form.selectColor'),
-                    },
+    minValue = PERCENTAGE_MIN_VALUE;
+    maxValue = PERCENTAGE_MAX_VALUE;
+    form = new FormGroup({
+        defaultColor: new FormControl(PERCENTAGE_DEFAULT_COLOR, {
+            nonNullable: true,
+            validators: [Validators.required, Validators.pattern(HEX_COLOR_PATTERN)],
+        }),
+        colorRules: new FormArray([]),
+    });
+    /** Preview-only; deliberately outside `form` so it never reaches the payload. */
+    previewControl = new FormControl(60, { nonNullable: true });
+    touched = false;
+    onChange = () => { };
+    onTouched = () => { };
+    onValidatorChange = () => { };
+    /**
+     * Bumped on every form change *and* after `writeValue`, which rebuilds the
+     * rule list silently — without this the preview would keep showing the rules
+     * of the previously loaded property.
+     */
+    revision = signal(0, ...(ngDevMode ? [{ debugName: "revision" }] : /* istanbul ignore next */ []));
+    previewValue = toSignal(this.previewControl.valueChanges, {
+        initialValue: this.previewControl.value,
+    });
+    /** The current rule set, as plain data, recomputed on every form change. */
+    draft = computed(() => {
+        this.revision();
+        return this.readDraft();
+    }, ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    rules = computed(() => this.draft().colorRules, ...(ngDevMode ? [{ debugName: "rules" }] : /* istanbul ignore next */ []));
+    hasRules = computed(() => this.rules().length > 0, ...(ngDevMode ? [{ debugName: "hasRules" }] : /* istanbul ignore next */ []));
+    previewColor = computed(() => resolvePercentageColor(this.previewValue(), this.draft()) ?? 'primary', ...(ngDevMode ? [{ debugName: "previewColor" }] : /* istanbul ignore next */ []));
+    /**
+     * The 0–100 scale painted with the colour each value resolves to. Sampling
+     * and then collapsing equal neighbours keeps this to a handful of DOM nodes
+     * regardless of how the rules are written, and flex ordering keeps it correct
+     * in RTL without a direction-aware gradient.
+     */
+    previewSegments = computed(() => {
+        const draft = this.draft();
+        const segments = [];
+        for (let value = PERCENTAGE_MIN_VALUE; value <= PERCENTAGE_MAX_VALUE; value += PREVIEW_STEP) {
+            const color = resolvePercentageColor(value, draft) ?? 'transparent';
+            const last = segments[segments.length - 1];
+            if (last && last.color === color) {
+                last.weight += 1;
+            }
+            else {
+                segments.push({ color, weight: 1 });
+            }
+        }
+        return segments;
+    }, ...(ngDevMode ? [{ debugName: "previewSegments" }] : /* istanbul ignore next */ []));
+    coverage = computed(() => analysePercentageRuleCoverage(this.rules()), ...(ngDevMode ? [{ debugName: "coverage" }] : /* istanbul ignore next */ []));
+    /**
+     * Non-blocking hints about rules that can never fire and values that quietly
+     * fall through to the default colour — both are easy to author by accident
+     * once order decides the winner.
+     */
+    warnings = computed(() => {
+        if (!this.hasRules()) {
+            return [];
+        }
+        const { unreachableRuleIndexes, gaps } = this.coverage();
+        return [
+            ...unreachableRuleIndexes.map((index) => this.transloco.translate('properties.form.percentageWarningUnreachable', {
+                index: index + 1,
+            })),
+            ...gaps.map((gap) => this.transloco.translate('properties.form.percentageWarningGap', {
+                from: gap.from,
+                to: gap.to,
+            })),
+        ];
+    }, ...(ngDevMode ? [{ debugName: "warnings" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.form.valueChanges.pipe(takeUntilDestroyed()).subscribe(() => {
+            this.revision.update((value) => value + 1);
+        });
+        // The value is pushed from an effect rather than straight from
+        // `writeValue`/`valueChanges`, because Angular calls `writeValue` before
+        // `registerOnChange` — anything emitted during setup would land on the
+        // no-op callback and the property would save with no configuration at all.
+        // By the time effects run the callback is registered.
+        let initial = true;
+        effect(() => {
+            this.revision();
+            this.emitValue(!initial);
+            initial = false;
+            this.onValidatorChange();
+        });
+    }
+    get ruleControls() {
+        return this.form.controls.colorRules.controls;
+    }
+    // ── ControlValueAccessor ──
+    writeValue(value) {
+        const draft = normalizePercentageConfiguration(value);
+        this.form.controls.defaultColor.setValue(draft.defaultColor, {
+            emitEvent: false,
+        });
+        this.setRules(draft.colorRules);
+        this.touched = false;
+        // Normalisation is lossy by design — an absent configuration becomes the
+        // default scale, and a stored shape gets its bounds coerced — so the
+        // control has to be told what the editor actually holds now. Bumping the
+        // revision is what schedules that write, via the effect in the constructor.
+        this.revision.update((current) => current + 1);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.form.disable({ emitEvent: false });
+            this.previewControl.disable({ emitEvent: false });
+            return;
+        }
+        this.form.enable({ emitEvent: false });
+        this.previewControl.enable({ emitEvent: false });
+    }
+    // ── Validator ──
+    validate(_) {
+        // A disabled form reports DISABLED rather than VALID; it has nothing to
+        // block the save with.
+        if (this.form.disabled || this.form.valid) {
+            return null;
+        }
+        return { percentageConfigurationInvalid: true };
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
+    // ── Rule list ──
+    addRule() {
+        const rules = this.rules();
+        const previous = rules[rules.length - 1];
+        // Continue the scale rather than starting from a blank row: the next rule
+        // almost always picks up where the previous one stopped.
+        const previousMax = previous?.maxValue;
+        const start = typeof previousMax === 'number' && previousMax < PERCENTAGE_MAX_VALUE
+            ? previousMax + 1
+            : null;
+        this.form.controls.colorRules.push(this.createRuleGroup({
+            minValue: start,
+            maxValue: PERCENTAGE_MAX_VALUE,
+            color: this.form.controls.defaultColor.value,
+        }));
+        this.markTouched();
+    }
+    removeRule(index) {
+        this.form.controls.colorRules.removeAt(index);
+        this.markTouched();
+    }
+    /** Moves a rule by `offset` positions — order is what decides the winner. */
+    moveRule(index, offset) {
+        const rules = this.form.controls.colorRules;
+        const target = index + offset;
+        if (target < 0 || target >= rules.length) {
+            return;
+        }
+        const [moved] = rules.controls.splice(index, 1);
+        rules.controls.splice(target, 0, moved);
+        rules.updateValueAndValidity();
+        this.markTouched();
+    }
+    restoreDefaults() {
+        this.form.controls.defaultColor.setValue(PERCENTAGE_DEFAULT_COLOR, {
+            emitEvent: false,
+        });
+        this.setRules(PERCENTAGE_DEFAULT_COLOR_RULES.map((rule) => ({ ...rule })), true);
+        this.markTouched();
+    }
+    // ── Internals ──
+    readDraft() {
+        return {
+            colorRules: this.ruleControls.map((group) => ({
+                minValue: group.controls.minValue.value,
+                maxValue: group.controls.maxValue.value,
+                color: group.controls.color.value,
+            })),
+            defaultColor: this.form.controls.defaultColor.value,
+        };
+    }
+    setRules(rules, emitEvent = false) {
+        const array = this.form.controls.colorRules;
+        array.clear({ emitEvent: false });
+        rules.forEach((rule) => array.push(this.createRuleGroup(rule), { emitEvent: false }));
+        array.updateValueAndValidity({ emitEvent });
+    }
+    createRuleGroup(rule) {
+        const bounds = [
+            Validators.min(PERCENTAGE_MIN_VALUE),
+            Validators.max(PERCENTAGE_MAX_VALUE),
+        ];
+        return new FormGroup({
+            minValue: new FormControl(rule.minValue ?? null, {
+                validators: bounds,
+            }),
+            maxValue: new FormControl(rule.maxValue ?? null, {
+                validators: bounds,
+            }),
+            color: new FormControl(rule.color ?? PERCENTAGE_DEFAULT_COLOR, {
+                nonNullable: true,
+                validators: [
+                    Validators.required,
+                    Validators.pattern(HEX_COLOR_PATTERN),
                 ],
-            },
-        ],
-    }, ...(ngDevMode ? [{ debugName: "formConfig" }] : /* istanbul ignore next */ []));
+            }),
+        }, { validators: (group) => this.validateRuleBounds(group) });
+    }
+    /**
+     * A rule needs at least one bound — with neither it would match nothing — and
+     * an inverted pair is always a typo.
+     */
+    validateRuleBounds(group) {
+        const min = group.get('minValue')?.value;
+        const max = group.get('maxValue')?.value;
+        if (min === null && max === null) {
+            return {
+                boundsRequired: {
+                    message: this.transloco.translate('properties.form.percentageRuleBoundsRequired'),
+                },
+            };
+        }
+        if (typeof min === 'number' && typeof max === 'number' && min > max) {
+            return {
+                boundsOrder: {
+                    message: this.transloco.translate('properties.form.percentageRuleBoundsOrder'),
+                },
+            };
+        }
+        return null;
+    }
+    emitValue(triggerTouched = true) {
+        this.onChange(serializePercentageConfiguration(this.readDraft()));
+        if (triggerTouched && !this.touched) {
+            this.onTouched();
+            this.touched = true;
+        }
+    }
+    markTouched() {
+        this.form.markAsDirty();
+        if (!this.touched) {
+            this.onTouched();
+            this.touched = true;
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PercentageConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: PercentageConfiguration, isStandalone: true, selector: "mt-percentage-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
-            { provide: ControlContainer, useExisting: FormGroupDirective },
-        ] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: PercentageConfiguration, isStandalone: true, selector: "mt-percentage-configuration", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PercentageConfiguration),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => PercentageConfiguration),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div\r\n  [formGroup]=\"form\"\r\n  class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\"\r\n>\r\n  <div class=\"flex flex-wrap items-start justify-between gap-3\">\r\n    <div class=\"space-y-1\">\r\n      <h3 class=\"text-base font-semibold\">\r\n        {{ \"properties.form.percentageColorsSection\" | transloco }}\r\n      </h3>\r\n      <p class=\"max-w-prose text-xs text-surface-500\">\r\n        {{ \"properties.form.percentageColorsHint\" | transloco }}\r\n      </p>\r\n    </div>\r\n    <div class=\"flex shrink-0 items-center gap-2\">\r\n      <mt-button\r\n        type=\"button\"\r\n        [text]=\"true\"\r\n        icon=\"arrow.refresh-ccw-01\"\r\n        [label]=\"'properties.form.percentageRestoreDefaults' | transloco\"\r\n        (click)=\"restoreDefaults()\"\r\n      />\r\n      <mt-button\r\n        type=\"button\"\r\n        icon=\"general.plus\"\r\n        [label]=\"'properties.form.percentageAddRule' | transloco\"\r\n        (click)=\"addRule()\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  @if (ruleControls.length) {\r\n    <div class=\"space-y-2\">\r\n      @for (ruleCtrl of ruleControls; track ruleCtrl; let i = $index) {\r\n        <div\r\n          [formGroup]=\"ruleCtrl\"\r\n          class=\"rounded-lg border border-surface-200 px-3 py-2\"\r\n        >\r\n          <div\r\n            class=\"grid items-start gap-3 md:grid-cols-[auto_minmax(0,7rem)_minmax(0,7rem)_minmax(0,1fr)_auto]\"\r\n          >\r\n            <span\r\n              class=\"mt-2 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-surface-100 text-xs font-semibold text-surface-600\"\r\n              [title]=\"'properties.form.percentageRuleOrderHint' | transloco\"\r\n            >\r\n              {{ i + 1 }}\r\n            </span>\r\n            <mt-number-field\r\n              formControlName=\"minValue\"\r\n              [min]=\"minValue\"\r\n              [max]=\"maxValue\"\r\n              [label]=\"'properties.form.percentageRuleFrom' | transloco\"\r\n              [placeholder]=\"'properties.form.percentageRuleOpen' | transloco\"\r\n            />\r\n            <mt-number-field\r\n              formControlName=\"maxValue\"\r\n              [min]=\"minValue\"\r\n              [max]=\"maxValue\"\r\n              [label]=\"'properties.form.percentageRuleTo' | transloco\"\r\n              [placeholder]=\"'properties.form.percentageRuleOpen' | transloco\"\r\n            />\r\n            <mt-color-picker-field\r\n              formControlName=\"color\"\r\n              [label]=\"'properties.form.percentageRuleColor' | transloco\"\r\n            />\r\n            <div class=\"flex items-center gap-1 md:mt-6\">\r\n              <mt-button\r\n                type=\"button\"\r\n                [text]=\"true\"\r\n                icon=\"arrow.chevron-up\"\r\n                [disabled]=\"i === 0\"\r\n                [tooltip]=\"'properties.form.percentageMoveUp' | transloco\"\r\n                (click)=\"moveRule(i, -1)\"\r\n              />\r\n              <mt-button\r\n                type=\"button\"\r\n                [text]=\"true\"\r\n                icon=\"arrow.chevron-down\"\r\n                [disabled]=\"i === ruleControls.length - 1\"\r\n                [tooltip]=\"'properties.form.percentageMoveDown' | transloco\"\r\n                (click)=\"moveRule(i, 1)\"\r\n              />\r\n              <mt-button\r\n                type=\"button\"\r\n                [text]=\"true\"\r\n                severity=\"danger\"\r\n                icon=\"general.trash-01\"\r\n                [tooltip]=\"'properties.form.percentageRemoveRule' | transloco\"\r\n                (click)=\"removeRule(i)\"\r\n              />\r\n            </div>\r\n          </div>\r\n          @if (ruleCtrl.errors && ruleCtrl.touched) {\r\n            <p class=\"text-xs text-red-500\">\r\n              {{\r\n                ruleCtrl.errors[\"boundsRequired\"]?.message ??\r\n                  ruleCtrl.errors[\"boundsOrder\"]?.message\r\n              }}\r\n            </p>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  } @else {\r\n    <p\r\n      class=\"rounded-lg border border-dashed border-surface-300 px-4 py-3 text-xs text-surface-500\"\r\n    >\r\n      {{ \"properties.form.percentageNoRules\" | transloco }}\r\n    </p>\r\n  }\r\n\r\n  <div class=\"grid gap-4 md:grid-cols-[minmax(0,18rem)_minmax(0,1fr)]\">\r\n    <div class=\"space-y-1\">\r\n      <mt-color-picker-field\r\n        formControlName=\"defaultColor\"\r\n        [label]=\"'properties.form.percentageDefaultColor' | transloco\"\r\n      />\r\n      <p class=\"text-xs text-surface-400\">\r\n        {{ \"properties.form.percentageDefaultColorHint\" | transloco }}\r\n      </p>\r\n    </div>\r\n\r\n    <div class=\"space-y-2\">\r\n      <span class=\"text-xs font-medium text-surface-500\">\r\n        {{ \"properties.form.percentagePreview\" | transloco }}\r\n      </span>\r\n      <div class=\"flex h-3 overflow-hidden rounded-full\">\r\n        @for (segment of previewSegments(); track $index) {\r\n          <span\r\n            class=\"block h-full\"\r\n            [style.flex-grow]=\"segment.weight\"\r\n            [style.background-color]=\"segment.color\"\r\n          ></span>\r\n        }\r\n      </div>\r\n      <div class=\"flex justify-between text-[10px] text-surface-400\">\r\n        <span>{{ minValue }}%</span>\r\n        <span>{{ maxValue }}%</span>\r\n      </div>\r\n      <div class=\"grid items-center gap-3 md:grid-cols-[minmax(0,1fr)_9rem]\">\r\n        <mt-slider-field\r\n          [formControl]=\"previewControl\"\r\n          [min]=\"minValue\"\r\n          [max]=\"maxValue\"\r\n          [label]=\"'properties.form.percentagePreviewValue' | transloco\"\r\n        />\r\n        <mt-progress\r\n          [value]=\"previewControl.value\"\r\n          [color]=\"previewColor()\"\r\n          [height]=\"9\"\r\n          [showLabel]=\"false\"\r\n        />\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  @if (warnings().length) {\r\n    <ul class=\"space-y-1 text-xs text-amber-600\">\r\n      @for (warning of warnings(); track warning) {\r\n        <li>{{ warning }}</li>\r\n      }\r\n    </ul>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: SliderField, selector: "mt-slider-field", inputs: ["field", "label", "class", "min", "max", "step", "hideNumber", "unit", "readonly", "required"] }, { kind: "component", type: Progress, selector: "mt-progress", inputs: ["value", "mode", "showLabel", "unit", "color", "minValue", "maxValue", "height", "circleSize", "strokeWidth", "customClass"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PercentageConfiguration, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-percentage-configuration', imports: [DynamicForm, ReactiveFormsModule], viewProviders: [
-                        { provide: ControlContainer, useExisting: FormGroupDirective },
-                    ], template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n" }]
-        }] });
+            args: [{ selector: 'mt-percentage-configuration', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        TranslocoModule,
+                        Button,
+                        ColorPickerField,
+                        NumberField,
+                        SliderField,
+                        Progress,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PercentageConfiguration),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => PercentageConfiguration),
+                            multi: true,
+                        },
+                    ], template: "<div\r\n  [formGroup]=\"form\"\r\n  class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\"\r\n>\r\n  <div class=\"flex flex-wrap items-start justify-between gap-3\">\r\n    <div class=\"space-y-1\">\r\n      <h3 class=\"text-base font-semibold\">\r\n        {{ \"properties.form.percentageColorsSection\" | transloco }}\r\n      </h3>\r\n      <p class=\"max-w-prose text-xs text-surface-500\">\r\n        {{ \"properties.form.percentageColorsHint\" | transloco }}\r\n      </p>\r\n    </div>\r\n    <div class=\"flex shrink-0 items-center gap-2\">\r\n      <mt-button\r\n        type=\"button\"\r\n        [text]=\"true\"\r\n        icon=\"arrow.refresh-ccw-01\"\r\n        [label]=\"'properties.form.percentageRestoreDefaults' | transloco\"\r\n        (click)=\"restoreDefaults()\"\r\n      />\r\n      <mt-button\r\n        type=\"button\"\r\n        icon=\"general.plus\"\r\n        [label]=\"'properties.form.percentageAddRule' | transloco\"\r\n        (click)=\"addRule()\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  @if (ruleControls.length) {\r\n    <div class=\"space-y-2\">\r\n      @for (ruleCtrl of ruleControls; track ruleCtrl; let i = $index) {\r\n        <div\r\n          [formGroup]=\"ruleCtrl\"\r\n          class=\"rounded-lg border border-surface-200 px-3 py-2\"\r\n        >\r\n          <div\r\n            class=\"grid items-start gap-3 md:grid-cols-[auto_minmax(0,7rem)_minmax(0,7rem)_minmax(0,1fr)_auto]\"\r\n          >\r\n            <span\r\n              class=\"mt-2 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-surface-100 text-xs font-semibold text-surface-600\"\r\n              [title]=\"'properties.form.percentageRuleOrderHint' | transloco\"\r\n            >\r\n              {{ i + 1 }}\r\n            </span>\r\n            <mt-number-field\r\n              formControlName=\"minValue\"\r\n              [min]=\"minValue\"\r\n              [max]=\"maxValue\"\r\n              [label]=\"'properties.form.percentageRuleFrom' | transloco\"\r\n              [placeholder]=\"'properties.form.percentageRuleOpen' | transloco\"\r\n            />\r\n            <mt-number-field\r\n              formControlName=\"maxValue\"\r\n              [min]=\"minValue\"\r\n              [max]=\"maxValue\"\r\n              [label]=\"'properties.form.percentageRuleTo' | transloco\"\r\n              [placeholder]=\"'properties.form.percentageRuleOpen' | transloco\"\r\n            />\r\n            <mt-color-picker-field\r\n              formControlName=\"color\"\r\n              [label]=\"'properties.form.percentageRuleColor' | transloco\"\r\n            />\r\n            <div class=\"flex items-center gap-1 md:mt-6\">\r\n              <mt-button\r\n                type=\"button\"\r\n                [text]=\"true\"\r\n                icon=\"arrow.chevron-up\"\r\n                [disabled]=\"i === 0\"\r\n                [tooltip]=\"'properties.form.percentageMoveUp' | transloco\"\r\n                (click)=\"moveRule(i, -1)\"\r\n              />\r\n              <mt-button\r\n                type=\"button\"\r\n                [text]=\"true\"\r\n                icon=\"arrow.chevron-down\"\r\n                [disabled]=\"i === ruleControls.length - 1\"\r\n                [tooltip]=\"'properties.form.percentageMoveDown' | transloco\"\r\n                (click)=\"moveRule(i, 1)\"\r\n              />\r\n              <mt-button\r\n                type=\"button\"\r\n                [text]=\"true\"\r\n                severity=\"danger\"\r\n                icon=\"general.trash-01\"\r\n                [tooltip]=\"'properties.form.percentageRemoveRule' | transloco\"\r\n                (click)=\"removeRule(i)\"\r\n              />\r\n            </div>\r\n          </div>\r\n          @if (ruleCtrl.errors && ruleCtrl.touched) {\r\n            <p class=\"text-xs text-red-500\">\r\n              {{\r\n                ruleCtrl.errors[\"boundsRequired\"]?.message ??\r\n                  ruleCtrl.errors[\"boundsOrder\"]?.message\r\n              }}\r\n            </p>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  } @else {\r\n    <p\r\n      class=\"rounded-lg border border-dashed border-surface-300 px-4 py-3 text-xs text-surface-500\"\r\n    >\r\n      {{ \"properties.form.percentageNoRules\" | transloco }}\r\n    </p>\r\n  }\r\n\r\n  <div class=\"grid gap-4 md:grid-cols-[minmax(0,18rem)_minmax(0,1fr)]\">\r\n    <div class=\"space-y-1\">\r\n      <mt-color-picker-field\r\n        formControlName=\"defaultColor\"\r\n        [label]=\"'properties.form.percentageDefaultColor' | transloco\"\r\n      />\r\n      <p class=\"text-xs text-surface-400\">\r\n        {{ \"properties.form.percentageDefaultColorHint\" | transloco }}\r\n      </p>\r\n    </div>\r\n\r\n    <div class=\"space-y-2\">\r\n      <span class=\"text-xs font-medium text-surface-500\">\r\n        {{ \"properties.form.percentagePreview\" | transloco }}\r\n      </span>\r\n      <div class=\"flex h-3 overflow-hidden rounded-full\">\r\n        @for (segment of previewSegments(); track $index) {\r\n          <span\r\n            class=\"block h-full\"\r\n            [style.flex-grow]=\"segment.weight\"\r\n            [style.background-color]=\"segment.color\"\r\n          ></span>\r\n        }\r\n      </div>\r\n      <div class=\"flex justify-between text-[10px] text-surface-400\">\r\n        <span>{{ minValue }}%</span>\r\n        <span>{{ maxValue }}%</span>\r\n      </div>\r\n      <div class=\"grid items-center gap-3 md:grid-cols-[minmax(0,1fr)_9rem]\">\r\n        <mt-slider-field\r\n          [formControl]=\"previewControl\"\r\n          [min]=\"minValue\"\r\n          [max]=\"maxValue\"\r\n          [label]=\"'properties.form.percentagePreviewValue' | transloco\"\r\n        />\r\n        <mt-progress\r\n          [value]=\"previewControl.value\"\r\n          [color]=\"previewColor()\"\r\n          [height]=\"9\"\r\n          [showLabel]=\"false\"\r\n        />\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  @if (warnings().length) {\r\n    <ul class=\"space-y-1 text-xs text-amber-600\">\r\n      @for (warning of warnings(); track warning) {\r\n        <li>{{ warning }}</li>\r\n      }\r\n    </ul>\r\n  }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [] });
 
 class StatusItemForm {
     modal = inject(ModalService);
@@ -2966,12 +3387,22 @@ class PropertyForm {
         const isTranslatable = supportsTranslatableToggle
             ? Boolean(mainValue.isTranslatable)
             : Boolean(this.facade.selected()?.isTranslatable);
+        // On edit `mainValue` is the whole loaded property, so it still carries the
+        // stored lowercase `configuration`. The backend matches JSON keys
+        // case-insensitively, so shipping it alongside `Configuration` leaves which
+        // one binds up to key order — pull it out and send a single canonical key,
+        // still falling back to the stored value for the view types that have no
+        // configuration editor at all.
+        const { configuration: loadedConfiguration, ...mainPayload } = mainValue;
         const payload = {
-            ...mainValue,
+            ...mainPayload,
             isCalculated,
             isTranslatable,
             formula: isCalculated ? this.formulaControl.value : null,
-            Configuration: this.configurationControl.value ?? mainValue.Configuration ?? null,
+            Configuration: this.configurationControl.value ??
+                mainValue.Configuration ??
+                loadedConfiguration ??
+                null,
         };
         // On edit, never prompt: any addToForm value loaded into the form passes
         // through via the spread above so the backend flag stays untouched.
@@ -3091,7 +3522,7 @@ class PropertyForm {
         this.subscriptions.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PropertyForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: PropertyForm, isStandalone: true, selector: "mt-property-form", inputs: { propertyId: { classPropertyName: "propertyId", publicName: "propertyId", isSignal: true, isRequired: false, transformFunction: null }, scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "statusConfigurationSection", first: true, predicate: ["statusConfigurationSection"], descendants: true, isSignal: true }, { propertyName: "configurationHost", first: true, predicate: ["configurationHost"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<mt-page\r\n  [title]=\"\r\n    propertyId()\r\n      ? ('properties.form.editProperty' | transloco)\r\n      : ('properties.form.createNewProperty' | transloco)\r\n  \"\r\n  avatarIcon=\"custom.products-and-services\"\r\n  [avatarStyle]=\"{\r\n    '--p-avatar-background': 'var(--p-sky-50)',\r\n    '--p-avatar-color': 'var(--p-sky-700)',\r\n  }\"\r\n  (backButtonClick)=\"goBack()\"\r\n  backButton\r\n  class=\"h-full\"\r\n>\r\n  <ng-template #headerEnd>\r\n    <mt-button\r\n      class=\"mx-2\"\r\n      [label]=\"submitLabel()\"\r\n      [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\r\n      [loading]=\"submitting()\"\r\n      [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\r\n      (click)=\"createOrEditProperty($event)\"\r\n    />\r\n  </ng-template>\r\n  <div\r\n    [formGroup]=\"propertyForm\"\r\n    class=\"h-full py-4 h-full overflow-y-auto flex justify-center\"\r\n  >\r\n    <div class=\"w-2/3 flex flex-col gap-6\">\r\n      @if (loading()) {\r\n        <!-- Skeleton Loading State -->\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <div class=\"flex justify-between items-center gap-6\">\r\n            <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\r\n            <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <p-skeleton\r\n            width=\"12rem\"\r\n            height=\"1.5rem\"\r\n            styleClass=\"mb-4\"\r\n          ></p-skeleton>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <p-skeleton\r\n            width=\"10rem\"\r\n            height=\"1.5rem\"\r\n            styleClass=\"mb-4\"\r\n          ></p-skeleton>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <mt-dynamic-form\r\n          [formConfig]=\"dynamicFormConfigMain()\"\r\n          [forcedDisabledFieldKeys]=\"lockedMainFieldKeys()\"\r\n          [formControlName]=\"'main'\"\r\n        />\r\n        @if (configurationFormConfig()) {\r\n          <mt-dynamic-form\r\n            formControlName=\"configuration\"\r\n            [formConfig]=\"configurationFormConfig()!\"\r\n          />\r\n        } @else {\r\n          <ng-container #configurationHost></ng-container>\r\n          @if (!configurationComponentExists()) {\r\n            @switch (propertyType()) {\r\n              @case (\"User\") {\r\n                <mt-user-configuration />\r\n              }\r\n              @case (\"Percentage\") {\r\n                <mt-percentage-configuration />\r\n              }\r\n              @case (\"Lookup\") {\r\n                <mt-lookup-configuration />\r\n              }\r\n              @case (\"LookupMultiSelect\") {\r\n                <mt-lookup-configuration />\r\n              }\r\n              @case (\"EntityList\") {\r\n                <mt-entity-list-configuration />\r\n              }\r\n              @case (\"API\") {\r\n                <mt-api-configuration formControlName=\"configuration\" />\r\n              }\r\n              @case (\"Status\") {\r\n                <section #statusConfigurationSection>\r\n                  <mt-status-configuration\r\n                    [propertyId]=\"statusPropertyId()\"\r\n                    [contextKey]=\"formulaContextKey()\"\r\n                    [levelSchemaId]=\"formulaSchemaId()\"\r\n                    [moduleId]=\"formulaModuleId()\"\r\n                  />\r\n                </section>\r\n              }\r\n              <!-- @case('ViewList') { REMOVED FOR NOW\r\n                  <mt-view-list-configuration />\r\n                  } -->\r\n              @case (\"Attachment\") {\r\n                <mt-attachment-configuration />\r\n              }\r\n              <!-- @case('ReferenceProperty') { REMOVED FOR NOW\r\n                   } -->\r\n              @case (\"LookupModuleCheckList\") {\r\n                <mt-check-list-form-configuration />\r\n              }\r\n              <!-- @case('LookupMatrix') { REMOVED FOR NOW\r\n                  <mt-lookup-configuration />\r\n                  } -->\r\n              @case (\"Location\") {\r\n                <mt-location-configuration />\r\n              }\r\n            }\r\n          }\r\n        }\r\n        @if (isCalculated() && !hideFormulaBuilder()) {\r\n          <mt-card>\r\n            <ng-template #headless>\r\n              <div\r\n                class=\"flex items-center justify-between px-4 py-5 border-b border-surface\"\r\n              >\r\n                <h3 class=\"text-xl font-semibold\">\r\n                  {{ \"properties.form.formula\" | transloco }}\r\n                  <span class=\"text-red-500\">*</span>\r\n                </h3>\r\n              </div>\r\n              <div class=\"flex-1 min-h-0 p-4\">\r\n                <mt-formula-builder\r\n                  formControlName=\"formula\"\r\n                  [contextKey]=\"formulaContextKey()\"\r\n                  [levelSchemaId]=\"formulaSchemaId()\"\r\n                  [moduleId]=\"formulaModuleId()\"\r\n                />\r\n              </div>\r\n            </ng-template>\r\n          </mt-card>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</mt-page>\r\n", styles: [""], dependencies: [{ kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormulaBuilder, selector: "mt-formula-builder", inputs: ["propertiesByPath", "levelSchemaId", "moduleId", "contextKey", "contextEntityTypeKey", "templateId", "placeholder", "hideToolbar", "hideStatusBar", "toolbarTabs", "codeOnly", "builderOnly", "valueMode", "isProcessBuilder"], outputs: ["validationChange", "tokensChange"] }, { kind: "component", type: ApiConfiguration, selector: "mt-api-configuration" }, { kind: "component", type: CheckListFormConfiguration, selector: "mt-check-list-form-configuration" }, { kind: "component", type: EntityListConfiguration, selector: "mt-entity-list-configuration" }, { kind: "component", type: LocationConfiguration, selector: "mt-location-configuration" }, { kind: "component", type: LookupConfiguration, selector: "mt-lookup-configuration" }, { kind: "component", type: PercentageConfiguration, selector: "mt-percentage-configuration" }, { kind: "component", type: StatusConfiguration, selector: "mt-status-configuration", inputs: ["propertyId", "contextKey", "levelSchemaId", "moduleId"] }, { kind: "component", type: UserConfiguration, selector: "mt-user-configuration" }, { kind: "component", type: AttachmentConfiguration, selector: "mt-attachment-configuration" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: PropertyForm, isStandalone: true, selector: "mt-property-form", inputs: { propertyId: { classPropertyName: "propertyId", publicName: "propertyId", isSignal: true, isRequired: false, transformFunction: null }, scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "statusConfigurationSection", first: true, predicate: ["statusConfigurationSection"], descendants: true, isSignal: true }, { propertyName: "configurationHost", first: true, predicate: ["configurationHost"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<mt-page\r\n  [title]=\"\r\n    propertyId()\r\n      ? ('properties.form.editProperty' | transloco)\r\n      : ('properties.form.createNewProperty' | transloco)\r\n  \"\r\n  avatarIcon=\"custom.products-and-services\"\r\n  [avatarStyle]=\"{\r\n    '--p-avatar-background': 'var(--p-sky-50)',\r\n    '--p-avatar-color': 'var(--p-sky-700)',\r\n  }\"\r\n  (backButtonClick)=\"goBack()\"\r\n  backButton\r\n  class=\"h-full\"\r\n>\r\n  <ng-template #headerEnd>\r\n    <mt-button\r\n      class=\"mx-2\"\r\n      [label]=\"submitLabel()\"\r\n      [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\r\n      [loading]=\"submitting()\"\r\n      [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\r\n      (click)=\"createOrEditProperty($event)\"\r\n    />\r\n  </ng-template>\r\n  <div\r\n    [formGroup]=\"propertyForm\"\r\n    class=\"h-full py-4 h-full overflow-y-auto flex justify-center\"\r\n  >\r\n    <div class=\"w-2/3 flex flex-col gap-6\">\r\n      @if (loading()) {\r\n        <!-- Skeleton Loading State -->\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <div class=\"flex justify-between items-center gap-6\">\r\n            <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\r\n            <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <p-skeleton\r\n            width=\"12rem\"\r\n            height=\"1.5rem\"\r\n            styleClass=\"mb-4\"\r\n          ></p-skeleton>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <p-skeleton\r\n            width=\"10rem\"\r\n            height=\"1.5rem\"\r\n            styleClass=\"mb-4\"\r\n          ></p-skeleton>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <mt-dynamic-form\r\n          [formConfig]=\"dynamicFormConfigMain()\"\r\n          [forcedDisabledFieldKeys]=\"lockedMainFieldKeys()\"\r\n          [formControlName]=\"'main'\"\r\n        />\r\n        @if (configurationFormConfig()) {\r\n          <mt-dynamic-form\r\n            formControlName=\"configuration\"\r\n            [formConfig]=\"configurationFormConfig()!\"\r\n          />\r\n        } @else {\r\n          <ng-container #configurationHost></ng-container>\r\n          @if (!configurationComponentExists()) {\r\n            @switch (propertyType()) {\r\n              @case (\"User\") {\r\n                <mt-user-configuration />\r\n              }\r\n              @case (\"Percentage\") {\r\n                <mt-percentage-configuration formControlName=\"configuration\" />\r\n              }\r\n              @case (\"Lookup\") {\r\n                <mt-lookup-configuration />\r\n              }\r\n              @case (\"LookupMultiSelect\") {\r\n                <mt-lookup-configuration />\r\n              }\r\n              @case (\"EntityList\") {\r\n                <mt-entity-list-configuration />\r\n              }\r\n              @case (\"API\") {\r\n                <mt-api-configuration formControlName=\"configuration\" />\r\n              }\r\n              @case (\"Status\") {\r\n                <section #statusConfigurationSection>\r\n                  <mt-status-configuration\r\n                    [propertyId]=\"statusPropertyId()\"\r\n                    [contextKey]=\"formulaContextKey()\"\r\n                    [levelSchemaId]=\"formulaSchemaId()\"\r\n                    [moduleId]=\"formulaModuleId()\"\r\n                  />\r\n                </section>\r\n              }\r\n              <!-- @case('ViewList') { REMOVED FOR NOW\r\n                  <mt-view-list-configuration />\r\n                  } -->\r\n              @case (\"Attachment\") {\r\n                <mt-attachment-configuration />\r\n              }\r\n              <!-- @case('ReferenceProperty') { REMOVED FOR NOW\r\n                   } -->\r\n              @case (\"LookupModuleCheckList\") {\r\n                <mt-check-list-form-configuration />\r\n              }\r\n              <!-- @case('LookupMatrix') { REMOVED FOR NOW\r\n                  <mt-lookup-configuration />\r\n                  } -->\r\n              @case (\"Location\") {\r\n                <mt-location-configuration />\r\n              }\r\n            }\r\n          }\r\n        }\r\n        @if (isCalculated() && !hideFormulaBuilder()) {\r\n          <mt-card>\r\n            <ng-template #headless>\r\n              <div\r\n                class=\"flex items-center justify-between px-4 py-5 border-b border-surface\"\r\n              >\r\n                <h3 class=\"text-xl font-semibold\">\r\n                  {{ \"properties.form.formula\" | transloco }}\r\n                  <span class=\"text-red-500\">*</span>\r\n                </h3>\r\n              </div>\r\n              <div class=\"flex-1 min-h-0 p-4\">\r\n                <mt-formula-builder\r\n                  formControlName=\"formula\"\r\n                  [contextKey]=\"formulaContextKey()\"\r\n                  [levelSchemaId]=\"formulaSchemaId()\"\r\n                  [moduleId]=\"formulaModuleId()\"\r\n                />\r\n              </div>\r\n            </ng-template>\r\n          </mt-card>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</mt-page>\r\n", styles: [""], dependencies: [{ kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormulaBuilder, selector: "mt-formula-builder", inputs: ["propertiesByPath", "levelSchemaId", "moduleId", "contextKey", "contextEntityTypeKey", "templateId", "placeholder", "hideToolbar", "hideStatusBar", "toolbarTabs", "codeOnly", "builderOnly", "valueMode", "isProcessBuilder"], outputs: ["validationChange", "tokensChange"] }, { kind: "component", type: ApiConfiguration, selector: "mt-api-configuration" }, { kind: "component", type: CheckListFormConfiguration, selector: "mt-check-list-form-configuration" }, { kind: "component", type: EntityListConfiguration, selector: "mt-entity-list-configuration" }, { kind: "component", type: LocationConfiguration, selector: "mt-location-configuration" }, { kind: "component", type: LookupConfiguration, selector: "mt-lookup-configuration" }, { kind: "component", type: PercentageConfiguration, selector: "mt-percentage-configuration" }, { kind: "component", type: StatusConfiguration, selector: "mt-status-configuration", inputs: ["propertyId", "contextKey", "levelSchemaId", "moduleId"] }, { kind: "component", type: UserConfiguration, selector: "mt-user-configuration" }, { kind: "component", type: AttachmentConfiguration, selector: "mt-attachment-configuration" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PropertyForm, decorators: [{
             type: Component,
@@ -3113,7 +3544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         AttachmentConfiguration,
                         SkeletonModule,
                         TranslocoModule,
-                    ], template: "<mt-page\r\n  [title]=\"\r\n    propertyId()\r\n      ? ('properties.form.editProperty' | transloco)\r\n      : ('properties.form.createNewProperty' | transloco)\r\n  \"\r\n  avatarIcon=\"custom.products-and-services\"\r\n  [avatarStyle]=\"{\r\n    '--p-avatar-background': 'var(--p-sky-50)',\r\n    '--p-avatar-color': 'var(--p-sky-700)',\r\n  }\"\r\n  (backButtonClick)=\"goBack()\"\r\n  backButton\r\n  class=\"h-full\"\r\n>\r\n  <ng-template #headerEnd>\r\n    <mt-button\r\n      class=\"mx-2\"\r\n      [label]=\"submitLabel()\"\r\n      [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\r\n      [loading]=\"submitting()\"\r\n      [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\r\n      (click)=\"createOrEditProperty($event)\"\r\n    />\r\n  </ng-template>\r\n  <div\r\n    [formGroup]=\"propertyForm\"\r\n    class=\"h-full py-4 h-full overflow-y-auto flex justify-center\"\r\n  >\r\n    <div class=\"w-2/3 flex flex-col gap-6\">\r\n      @if (loading()) {\r\n        <!-- Skeleton Loading State -->\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <div class=\"flex justify-between items-center gap-6\">\r\n            <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\r\n            <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <p-skeleton\r\n            width=\"12rem\"\r\n            height=\"1.5rem\"\r\n            styleClass=\"mb-4\"\r\n          ></p-skeleton>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <p-skeleton\r\n            width=\"10rem\"\r\n            height=\"1.5rem\"\r\n            styleClass=\"mb-4\"\r\n          ></p-skeleton>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <mt-dynamic-form\r\n          [formConfig]=\"dynamicFormConfigMain()\"\r\n          [forcedDisabledFieldKeys]=\"lockedMainFieldKeys()\"\r\n          [formControlName]=\"'main'\"\r\n        />\r\n        @if (configurationFormConfig()) {\r\n          <mt-dynamic-form\r\n            formControlName=\"configuration\"\r\n            [formConfig]=\"configurationFormConfig()!\"\r\n          />\r\n        } @else {\r\n          <ng-container #configurationHost></ng-container>\r\n          @if (!configurationComponentExists()) {\r\n            @switch (propertyType()) {\r\n              @case (\"User\") {\r\n                <mt-user-configuration />\r\n              }\r\n              @case (\"Percentage\") {\r\n                <mt-percentage-configuration />\r\n              }\r\n              @case (\"Lookup\") {\r\n                <mt-lookup-configuration />\r\n              }\r\n              @case (\"LookupMultiSelect\") {\r\n                <mt-lookup-configuration />\r\n              }\r\n              @case (\"EntityList\") {\r\n                <mt-entity-list-configuration />\r\n              }\r\n              @case (\"API\") {\r\n                <mt-api-configuration formControlName=\"configuration\" />\r\n              }\r\n              @case (\"Status\") {\r\n                <section #statusConfigurationSection>\r\n                  <mt-status-configuration\r\n                    [propertyId]=\"statusPropertyId()\"\r\n                    [contextKey]=\"formulaContextKey()\"\r\n                    [levelSchemaId]=\"formulaSchemaId()\"\r\n                    [moduleId]=\"formulaModuleId()\"\r\n                  />\r\n                </section>\r\n              }\r\n              <!-- @case('ViewList') { REMOVED FOR NOW\r\n                  <mt-view-list-configuration />\r\n                  } -->\r\n              @case (\"Attachment\") {\r\n                <mt-attachment-configuration />\r\n              }\r\n              <!-- @case('ReferenceProperty') { REMOVED FOR NOW\r\n                   } -->\r\n              @case (\"LookupModuleCheckList\") {\r\n                <mt-check-list-form-configuration />\r\n              }\r\n              <!-- @case('LookupMatrix') { REMOVED FOR NOW\r\n                  <mt-lookup-configuration />\r\n                  } -->\r\n              @case (\"Location\") {\r\n                <mt-location-configuration />\r\n              }\r\n            }\r\n          }\r\n        }\r\n        @if (isCalculated() && !hideFormulaBuilder()) {\r\n          <mt-card>\r\n            <ng-template #headless>\r\n              <div\r\n                class=\"flex items-center justify-between px-4 py-5 border-b border-surface\"\r\n              >\r\n                <h3 class=\"text-xl font-semibold\">\r\n                  {{ \"properties.form.formula\" | transloco }}\r\n                  <span class=\"text-red-500\">*</span>\r\n                </h3>\r\n              </div>\r\n              <div class=\"flex-1 min-h-0 p-4\">\r\n                <mt-formula-builder\r\n                  formControlName=\"formula\"\r\n                  [contextKey]=\"formulaContextKey()\"\r\n                  [levelSchemaId]=\"formulaSchemaId()\"\r\n                  [moduleId]=\"formulaModuleId()\"\r\n                />\r\n              </div>\r\n            </ng-template>\r\n          </mt-card>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</mt-page>\r\n" }]
+                    ], template: "<mt-page\r\n  [title]=\"\r\n    propertyId()\r\n      ? ('properties.form.editProperty' | transloco)\r\n      : ('properties.form.createNewProperty' | transloco)\r\n  \"\r\n  avatarIcon=\"custom.products-and-services\"\r\n  [avatarStyle]=\"{\r\n    '--p-avatar-background': 'var(--p-sky-50)',\r\n    '--p-avatar-color': 'var(--p-sky-700)',\r\n  }\"\r\n  (backButtonClick)=\"goBack()\"\r\n  backButton\r\n  class=\"h-full\"\r\n>\r\n  <ng-template #headerEnd>\r\n    <mt-button\r\n      class=\"mx-2\"\r\n      [label]=\"submitLabel()\"\r\n      [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\r\n      [loading]=\"submitting()\"\r\n      [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\r\n      (click)=\"createOrEditProperty($event)\"\r\n    />\r\n  </ng-template>\r\n  <div\r\n    [formGroup]=\"propertyForm\"\r\n    class=\"h-full py-4 h-full overflow-y-auto flex justify-center\"\r\n  >\r\n    <div class=\"w-2/3 flex flex-col gap-6\">\r\n      @if (loading()) {\r\n        <!-- Skeleton Loading State -->\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <div class=\"flex justify-between items-center gap-6\">\r\n            <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\r\n            <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <p-skeleton\r\n            width=\"12rem\"\r\n            height=\"1.5rem\"\r\n            styleClass=\"mb-4\"\r\n          ></p-skeleton>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <p-skeleton\r\n            width=\"10rem\"\r\n            height=\"1.5rem\"\r\n            styleClass=\"mb-4\"\r\n          ></p-skeleton>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <mt-dynamic-form\r\n          [formConfig]=\"dynamicFormConfigMain()\"\r\n          [forcedDisabledFieldKeys]=\"lockedMainFieldKeys()\"\r\n          [formControlName]=\"'main'\"\r\n        />\r\n        @if (configurationFormConfig()) {\r\n          <mt-dynamic-form\r\n            formControlName=\"configuration\"\r\n            [formConfig]=\"configurationFormConfig()!\"\r\n          />\r\n        } @else {\r\n          <ng-container #configurationHost></ng-container>\r\n          @if (!configurationComponentExists()) {\r\n            @switch (propertyType()) {\r\n              @case (\"User\") {\r\n                <mt-user-configuration />\r\n              }\r\n              @case (\"Percentage\") {\r\n                <mt-percentage-configuration formControlName=\"configuration\" />\r\n              }\r\n              @case (\"Lookup\") {\r\n                <mt-lookup-configuration />\r\n              }\r\n              @case (\"LookupMultiSelect\") {\r\n                <mt-lookup-configuration />\r\n              }\r\n              @case (\"EntityList\") {\r\n                <mt-entity-list-configuration />\r\n              }\r\n              @case (\"API\") {\r\n                <mt-api-configuration formControlName=\"configuration\" />\r\n              }\r\n              @case (\"Status\") {\r\n                <section #statusConfigurationSection>\r\n                  <mt-status-configuration\r\n                    [propertyId]=\"statusPropertyId()\"\r\n                    [contextKey]=\"formulaContextKey()\"\r\n                    [levelSchemaId]=\"formulaSchemaId()\"\r\n                    [moduleId]=\"formulaModuleId()\"\r\n                  />\r\n                </section>\r\n              }\r\n              <!-- @case('ViewList') { REMOVED FOR NOW\r\n                  <mt-view-list-configuration />\r\n                  } -->\r\n              @case (\"Attachment\") {\r\n                <mt-attachment-configuration />\r\n              }\r\n              <!-- @case('ReferenceProperty') { REMOVED FOR NOW\r\n                   } -->\r\n              @case (\"LookupModuleCheckList\") {\r\n                <mt-check-list-form-configuration />\r\n              }\r\n              <!-- @case('LookupMatrix') { REMOVED FOR NOW\r\n                  <mt-lookup-configuration />\r\n                  } -->\r\n              @case (\"Location\") {\r\n                <mt-location-configuration />\r\n              }\r\n            }\r\n          }\r\n        }\r\n        @if (isCalculated() && !hideFormulaBuilder()) {\r\n          <mt-card>\r\n            <ng-template #headless>\r\n              <div\r\n                class=\"flex items-center justify-between px-4 py-5 border-b border-surface\"\r\n              >\r\n                <h3 class=\"text-xl font-semibold\">\r\n                  {{ \"properties.form.formula\" | transloco }}\r\n                  <span class=\"text-red-500\">*</span>\r\n                </h3>\r\n              </div>\r\n              <div class=\"flex-1 min-h-0 p-4\">\r\n                <mt-formula-builder\r\n                  formControlName=\"formula\"\r\n                  [contextKey]=\"formulaContextKey()\"\r\n                  [levelSchemaId]=\"formulaSchemaId()\"\r\n                  [moduleId]=\"formulaModuleId()\"\r\n                />\r\n              </div>\r\n            </ng-template>\r\n          </mt-card>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</mt-page>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { propertyId: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyId", required: false }] }], scope: [{ type: i0.Input, args: [{ isSignal: true, alias: "scope", required: false }] }], configurationHost: [{
                 type: ViewChild,
                 args: ['configurationHost', { read: ViewContainerRef }]