@rulecms/source-components-angular 0.2.0 → 0.3.0

package/fesm2022/rulecms-source-components-angular.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
 import { Input, Component, ViewChild } from '@angular/core';
-import { NgStyle } from '@angular/common';
+import { NgStyle, NgComponentOutlet } from '@angular/common';
 import * as i1 from '@angular/platform-browser';
 
 const DEFAULT_CONTENT_TEXT = 'This is a text block. Click to edit and add your own content.';
-const defaultAttributeValues$8 = [
+const defaultAttributeValues$9 = [
     {
         name: 'content-text-3-resolutions',
         defaultValues: {
@@ -695,7 +695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * - Block tag (`p`, `div`, `h1`, `section`, …): RText puts styleProps on the
  *   tag itself → no wrapper, one less element in the DOM.
  */
-const resolveNoContainer$8 = ({ componentAttributes, }) => !isBlockEnclosingTag(resolveEnclosingTag(componentAttributes));
+const resolveNoContainer$9 = ({ componentAttributes, }) => !isBlockEnclosingTag(resolveEnclosingTag(componentAttributes));
 
 /**
  * True when RText is about to render an element that can carry a className —
@@ -705,9 +705,9 @@ const resolveNoContainer$8 = ({ componentAttributes, }) => !isBlockEnclosingTag(
  * disagreed with what the component renders, a class would either land on
  * nothing or force a redundant wrapper.
  */
-const resolveRendersOwnElement$8 = ({ componentAttributes, }) => !!resolveEnclosingTag(componentAttributes);
+const resolveRendersOwnElement$9 = ({ componentAttributes, }) => !!resolveEnclosingTag(componentAttributes);
 
-const attributeEditModeConfigs$8 = [
+const attributeEditModeConfigs$9 = [
     {
         name: 'content-text-3-resolutions',
         defaultValues: {},
@@ -737,15 +737,16 @@ const ComponentIdentifiers = {
     rEmbed: 'r-embed',
     rList: 'r-list',
     rAccordion: 'r-accordion',
+    rMount: 'r-mount',
 };
 
-const displayCardEntry$8 = {
+const displayCardEntry$9 = {
     id: ComponentIdentifiers.rText,
-    resolveNoContainer: resolveNoContainer$8,
-    resolveRendersOwnElement: resolveRendersOwnElement$8,
+    resolveNoContainer: resolveNoContainer$9,
+    resolveRendersOwnElement: resolveRendersOwnElement$9,
     card: RTextComponent,
-    defaultAttributeValues: defaultAttributeValues$8,
-    attributeEditModeConfigs: attributeEditModeConfigs$8,
+    defaultAttributeValues: defaultAttributeValues$9,
+    attributeEditModeConfigs: attributeEditModeConfigs$9,
 };
 
 // Builds Cloudinary delivery URLs directly so the component renders a complete
@@ -930,15 +931,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * only add a redundant element. There is no configuration that changes this,
  * so the answer is the same for every render.
  */
-const resolveNoContainer$7 = () => false;
+const resolveNoContainer$8 = () => false;
 
 /**
  * Always renders an `<img>`, which can carry a className. There is no
  * configuration that changes this.
  */
-const resolveRendersOwnElement$7 = () => true;
+const resolveRendersOwnElement$8 = () => true;
 
-const defaultAttributeValues$7 = [
+const defaultAttributeValues$8 = [
     {
         name: 'cloudinary-cloud-name',
         defaultValues: {},
@@ -983,7 +984,7 @@ const defaultAttributeValues$7 = [
     },
 ];
 
-const attributeEditModeConfigs$7 = [
+const attributeEditModeConfigs$8 = [
     {
         name: 'cloudinary-cloud-name',
         heading: 'Cloudinary Cloud Name',
@@ -1050,13 +1051,13 @@ const attributeEditModeConfigs$7 = [
     },
 ];
 
-const displayCardEntry$7 = {
+const displayCardEntry$8 = {
     id: ComponentIdentifiers.cloudinaryAdvancedImage,
-    resolveNoContainer: resolveNoContainer$7,
-    resolveRendersOwnElement: resolveRendersOwnElement$7,
+    resolveNoContainer: resolveNoContainer$8,
+    resolveRendersOwnElement: resolveRendersOwnElement$8,
     card: CloudinaryAdvancedImageComponent,
-    defaultAttributeValues: defaultAttributeValues$7,
-    attributeEditModeConfigs: attributeEditModeConfigs$7,
+    defaultAttributeValues: defaultAttributeValues$8,
+    attributeEditModeConfigs: attributeEditModeConfigs$8,
 };
 
 // Builds media-host delivery URLs directly so the component renders a complete
@@ -1271,15 +1272,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * only add a redundant element. There is no configuration that changes this,
  * so the answer is the same for every render.
  */
-const resolveNoContainer$6 = () => false;
+const resolveNoContainer$7 = () => false;
 
 /**
  * Always renders a `<video>`, which can carry a className. There is no
  * configuration that changes this.
  */
-const resolveRendersOwnElement$6 = () => true;
+const resolveRendersOwnElement$7 = () => true;
 
-const defaultAttributeValues$6 = [
+const defaultAttributeValues$7 = [
     {
         name: 'video-host-cloud-name',
         defaultValues: {},
@@ -1336,7 +1337,7 @@ const defaultAttributeValues$6 = [
     },
 ];
 
-const attributeEditModeConfigs$6 = [
+const attributeEditModeConfigs$7 = [
     {
         name: 'video-host-cloud-name',
         heading: 'Video Host Cloud Name',
@@ -1421,13 +1422,13 @@ const attributeEditModeConfigs$6 = [
     },
 ];
 
-const displayCardEntry$6 = {
+const displayCardEntry$7 = {
     id: ComponentIdentifiers.rVideo,
-    resolveNoContainer: resolveNoContainer$6,
-    resolveRendersOwnElement: resolveRendersOwnElement$6,
+    resolveNoContainer: resolveNoContainer$7,
+    resolveRendersOwnElement: resolveRendersOwnElement$7,
     card: RVideoComponent,
-    defaultAttributeValues: defaultAttributeValues$6,
-    attributeEditModeConfigs: attributeEditModeConfigs$6,
+    defaultAttributeValues: defaultAttributeValues$7,
+    attributeEditModeConfigs: attributeEditModeConfigs$7,
 };
 
 /**
@@ -1635,16 +1636,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * and colour (via currentColor) directly, so a wrapper div would only add a
  * redundant element. No configuration changes that.
  */
-const resolveNoContainer$5 = () => false;
+const resolveNoContainer$6 = () => false;
 
 /**
  * The `<svg>` carries the className. An unresolvable attribute renders no
  * element at all, but that is a data error rather than a different root type,
  * so the configured happy path is what this answers for.
  */
-const resolveRendersOwnElement$5 = () => true;
+const resolveRendersOwnElement$6 = () => true;
 
-const defaultAttributeValues$5 = [
+const defaultAttributeValues$6 = [
     {
         // Holds `{ name, iconNode }`, not a bare name: the composer stamps the
         // geometry when the author picks the icon so the render path never needs
@@ -1656,7 +1657,7 @@ const defaultAttributeValues$5 = [
     },
 ];
 
-const attributeEditModeConfigs$5 = [
+const attributeEditModeConfigs$6 = [
     {
         name: 'icon-name-3-resolutions',
         heading: 'Icon',
@@ -1667,13 +1668,13 @@ const attributeEditModeConfigs$5 = [
     },
 ];
 
-const displayCardEntry$5 = {
+const displayCardEntry$6 = {
     id: ComponentIdentifiers.rIcon,
-    resolveNoContainer: resolveNoContainer$5,
-    resolveRendersOwnElement: resolveRendersOwnElement$5,
+    resolveNoContainer: resolveNoContainer$6,
+    resolveRendersOwnElement: resolveRendersOwnElement$6,
     card: RIconComponent,
-    defaultAttributeValues: defaultAttributeValues$5,
-    attributeEditModeConfigs: attributeEditModeConfigs$5,
+    defaultAttributeValues: defaultAttributeValues$6,
+    attributeEditModeConfigs: attributeEditModeConfigs$6,
 };
 
 /**
@@ -2400,13 +2401,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * nothing, and would put the column's background behind the button rather than
  * on it. No configuration changes that.
  */
-const resolveNoContainer$4 = () => false;
+const resolveNoContainer$5 = () => false;
 
 /**
  * There is always a root element to carry the class: the button is the
  * component, so no configuration leaves it without one.
  */
-const resolveRendersOwnElement$4 = () => true;
+const resolveRendersOwnElement$5 = () => true;
 
 /**
  * Seeds the button's own semantics only.
@@ -2419,7 +2420,7 @@ const resolveRendersOwnElement$4 = () => true;
  * happened to cover. Leaving the bag empty is what lets "unset means preset"
  * be true.
  */
-const defaultAttributeValues$4 = [
+const defaultAttributeValues$5 = [
     {
         name: BUTTON_PRESET_ATTRIBUTE,
         defaultValues: {
@@ -2443,7 +2444,7 @@ const defaultAttributeValues$4 = [
  * documentation registry asserts its pages match that sequence, so moving an
  * entry here moves it in both places at once.
  */
-const attributeEditModeConfigs$4 = [
+const attributeEditModeConfigs$5 = [
     {
         name: BUTTON_PRESET_ATTRIBUTE,
         heading: 'Button Style',
@@ -2482,13 +2483,13 @@ const attributeEditModeConfigs$4 = [
     },
 ];
 
-const displayCardEntry$4 = {
+const displayCardEntry$5 = {
     id: ComponentIdentifiers.rButton,
-    resolveNoContainer: resolveNoContainer$4,
-    resolveRendersOwnElement: resolveRendersOwnElement$4,
+    resolveNoContainer: resolveNoContainer$5,
+    resolveRendersOwnElement: resolveRendersOwnElement$5,
     card: RButtonComponent,
-    defaultAttributeValues: defaultAttributeValues$4,
-    attributeEditModeConfigs: attributeEditModeConfigs$4,
+    defaultAttributeValues: defaultAttributeValues$5,
+    attributeEditModeConfigs: attributeEditModeConfigs$5,
 };
 
 /**
@@ -2618,13 +2619,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * width and border on itself, so a wrapper div would only add a redundant
  * element. No configuration changes that.
  */
-const resolveNoContainer$3 = () => false;
+const resolveNoContainer$4 = () => false;
 
 /**
  * The `<hr>` carries the className. There is always exactly one element and it
  * is always the root, so there is nothing for this to depend on.
  */
-const resolveRendersOwnElement$3 = () => true;
+const resolveRendersOwnElement$4 = () => true;
 
 /**
  * Seeds the divider's own two settings so the drawer opens on the values a
@@ -2634,7 +2635,7 @@ const resolveRendersOwnElement$3 = () => true;
  * names are the divider's own, so nothing in Column Styles writes to them and
  * a seeded value can never shadow a style the author set.
  */
-const defaultAttributeValues$3 = [
+const defaultAttributeValues$4 = [
     {
         name: DIVIDER_STYLE_ATTRIBUTE,
         defaultValues: {
@@ -2656,7 +2657,7 @@ const defaultAttributeValues$3 = [
  * documentation registry asserts its pages match that sequence, so moving an
  * entry here moves it in both places at once.
  */
-const attributeEditModeConfigs$3 = [
+const attributeEditModeConfigs$4 = [
     {
         name: DIVIDER_STYLE_ATTRIBUTE,
         heading: 'Line Style',
@@ -2671,13 +2672,13 @@ const attributeEditModeConfigs$3 = [
     },
 ];
 
-const displayCardEntry$3 = {
+const displayCardEntry$4 = {
     id: ComponentIdentifiers.rDivider,
-    resolveNoContainer: resolveNoContainer$3,
-    resolveRendersOwnElement: resolveRendersOwnElement$3,
+    resolveNoContainer: resolveNoContainer$4,
+    resolveRendersOwnElement: resolveRendersOwnElement$4,
     card: RDividerComponent,
-    defaultAttributeValues: defaultAttributeValues$3,
-    attributeEditModeConfigs: attributeEditModeConfigs$3,
+    defaultAttributeValues: defaultAttributeValues$4,
+    attributeEditModeConfigs: attributeEditModeConfigs$4,
 };
 
 /**
@@ -3115,7 +3116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * Deciding this from `resolveEmbed`, rather than from the fact that this
  * component "is an iframe component", is what keeps the two in step.
  */
-const resolveNoContainer$2 = ({ componentAttributes }) => resolveEmbed(componentAttributes) === null;
+const resolveNoContainer$3 = ({ componentAttributes }) => resolveEmbed(componentAttributes) === null;
 
 /**
  * The iframe carries the className — when there is one. A rejected or unset
@@ -3123,7 +3124,7 @@ const resolveNoContainer$2 = ({ componentAttributes }) => resolveEmbed(component
  * disappears without trace, so this answers from the same resolution the
  * component uses.
  */
-const resolveRendersOwnElement$2 = ({ componentAttributes, }) => resolveEmbed(componentAttributes) !== null;
+const resolveRendersOwnElement$3 = ({ componentAttributes, }) => resolveEmbed(componentAttributes) !== null;
 
 /**
  * Nothing is seeded, including the URL.
@@ -3136,7 +3137,7 @@ const resolveRendersOwnElement$2 = ({ componentAttributes, }) => resolveEmbed(co
  * Aspect ratio is left unset on purpose too, so it resolves from the provider
  * — a map is 4:3 and a video is 16:9 without either being written down here.
  */
-const defaultAttributeValues$2 = [
+const defaultAttributeValues$3 = [
     {
         name: 'embed-url-3-resolutions',
         defaultValues: {},
@@ -3160,7 +3161,7 @@ const defaultAttributeValues$2 = [
  * the URL first because nothing renders without it, then the three settings
  * that only matter once something does.
  */
-const attributeEditModeConfigs$2 = [
+const attributeEditModeConfigs$3 = [
     {
         name: 'embed-url-3-resolutions',
         heading: 'Embed URL',
@@ -3187,13 +3188,13 @@ const attributeEditModeConfigs$2 = [
     },
 ];
 
-const displayCardEntry$2 = {
+const displayCardEntry$3 = {
     id: ComponentIdentifiers.rEmbed,
-    resolveNoContainer: resolveNoContainer$2,
-    resolveRendersOwnElement: resolveRendersOwnElement$2,
+    resolveNoContainer: resolveNoContainer$3,
+    resolveRendersOwnElement: resolveRendersOwnElement$3,
     card: REmbedComponent,
-    defaultAttributeValues: defaultAttributeValues$2,
-    attributeEditModeConfigs: attributeEditModeConfigs$2,
+    defaultAttributeValues: defaultAttributeValues$3,
+    attributeEditModeConfigs: attributeEditModeConfigs$3,
 };
 
 /**
@@ -3394,16 +3395,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * that element itself. No configuration changes the answer, so no wrapper
  * div, ever.
  */
-const resolveNoContainer$1 = () => false;
+const resolveNoContainer$2 = () => false;
 
 /**
  * RList's root is always a real element — `<ul>` or `<ol>` — so it can always
  * carry the column's className, and the component applies the one it
  * receives.
  */
-const resolveRendersOwnElement$1 = () => true;
+const resolveRendersOwnElement$2 = () => true;
 
-const defaultAttributeValues$1 = [
+const defaultAttributeValues$2 = [
     {
         name: LIST_ITEMS_ATTRIBUTE,
         defaultValues: {
@@ -3444,7 +3445,7 @@ const defaultAttributeValues$1 = [
  * documentation registry asserts its pages match that sequence, so moving an
  * entry here moves it in both places at once.
  */
-const attributeEditModeConfigs$1 = [
+const attributeEditModeConfigs$2 = [
     {
         name: LIST_ITEMS_ATTRIBUTE,
         heading: 'List Items',
@@ -3483,13 +3484,13 @@ const attributeEditModeConfigs$1 = [
     },
 ];
 
-const displayCardEntry$1 = {
+const displayCardEntry$2 = {
     id: ComponentIdentifiers.rList,
-    resolveNoContainer: resolveNoContainer$1,
-    resolveRendersOwnElement: resolveRendersOwnElement$1,
+    resolveNoContainer: resolveNoContainer$2,
+    resolveRendersOwnElement: resolveRendersOwnElement$2,
     card: RListComponent,
-    defaultAttributeValues: defaultAttributeValues$1,
-    attributeEditModeConfigs: attributeEditModeConfigs$1,
+    defaultAttributeValues: defaultAttributeValues$2,
+    attributeEditModeConfigs: attributeEditModeConfigs$2,
 };
 
 /**
@@ -3722,15 +3723,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * element itself. No configuration changes the answer, so no wrapper div,
  * ever.
  */
-const resolveNoContainer = () => false;
+const resolveNoContainer$1 = () => false;
 
 /**
  * RAccordion's root is always a real element — `<details>` — so it can always
  * carry the column's className, and the component applies the one it receives.
  */
-const resolveRendersOwnElement = () => true;
+const resolveRendersOwnElement$1 = () => true;
 
-const defaultAttributeValues = [
+const defaultAttributeValues$1 = [
     {
         name: ACCORDION_SUMMARY_ATTRIBUTE,
         defaultValues: {
@@ -3775,7 +3776,7 @@ const defaultAttributeValues = [
  * documentation registry asserts its pages match that sequence, so moving an
  * entry here moves it in both places at once.
  */
-const attributeEditModeConfigs = [
+const attributeEditModeConfigs$1 = [
     {
         name: ACCORDION_SUMMARY_ATTRIBUTE,
         heading: 'Summary',
@@ -3808,16 +3809,280 @@ const attributeEditModeConfigs = [
     },
 ];
 
-const displayCardEntry = {
+const displayCardEntry$1 = {
     id: ComponentIdentifiers.rAccordion,
+    resolveNoContainer: resolveNoContainer$1,
+    resolveRendersOwnElement: resolveRendersOwnElement$1,
+    card: RAccordionComponent,
+    defaultAttributeValues: defaultAttributeValues$1,
+    attributeEditModeConfigs: attributeEditModeConfigs$1,
+};
+
+/**
+ * The attribute names `r-mount` reads.
+ *
+ * Two, and that is the whole of it: which host component to render, and the
+ * props the author filled in for it. The host application supplies the actual
+ * Angular component through `rulecms-widget`'s `mounts` map. This library never
+ * imports customer code.
+ */
+const MOUNT_NAME_ATTRIBUTE = 'mount-name-3-resolutions';
+const MOUNT_PROPS_ATTRIBUTE = 'mount-props-3-resolutions';
+const MOUNT_PROP_TYPES = ['string', 'number', 'boolean', 'json'];
+const MOUNT_NAME_PATTERN = /^[a-zA-Z][a-zA-Z0-9_-]{0,63}$/;
+const FORBIDDEN_PROP_KEYS = new Set([
+    '__proto__',
+    'constructor',
+    'prototype',
+    'key',
+    'ref',
+    'children',
+    'dangerouslySetInnerHTML',
+]);
+const HTML_EVENT_KEYS = new Set([
+    'onclick',
+    'onsubmit',
+    'onload',
+    'onerror',
+    'onmouseover',
+    'onmouseenter',
+    'onfocus',
+    'onblur',
+    'onchange',
+    'oninput',
+    'onkeydown',
+    'onkeyup',
+]);
+const isMountPropType = (value) => typeof value === 'string' && MOUNT_PROP_TYPES.includes(value);
+const isAllowedMountName = (value) => typeof value === 'string' && MOUNT_NAME_PATTERN.test(value);
+const isForbiddenMountPropKey = (key) => {
+    if (FORBIDDEN_PROP_KEYS.has(key) || HTML_EVENT_KEYS.has(key.toLowerCase())) {
+        return true;
+    }
+    return /^on[A-Z]/.test(key);
+};
+const resolveMountName = (componentAttributes) => {
+    const value = componentAttributes?.[MOUNT_NAME_ATTRIBUTE];
+    return isAllowedMountName(value) ? value : '';
+};
+const isMountPropRow = (value) => {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) {
+        return false;
+    }
+    const row = value;
+    return (typeof row.key === 'string' &&
+        isMountPropType(row.type) &&
+        typeof row.value === 'string');
+};
+const coerceMountPropValue = (row) => {
+    switch (row.type) {
+        case 'string':
+            return row.value;
+        case 'number': {
+            const parsed = Number(row.value);
+            return Number.isFinite(parsed) ? parsed : undefined;
+        }
+        case 'boolean':
+            if (row.value === 'true') {
+                return true;
+            }
+            if (row.value === 'false') {
+                return false;
+            }
+            return undefined;
+        case 'json':
+            try {
+                return JSON.parse(row.value);
+            }
+            catch {
+                return undefined;
+            }
+        default:
+            return undefined;
+    }
+};
+const resolveMountProps = (componentAttributes) => {
+    const raw = componentAttributes?.[MOUNT_PROPS_ATTRIBUTE];
+    if (!Array.isArray(raw)) {
+        return {};
+    }
+    const props = {};
+    for (const entry of raw) {
+        if (!isMountPropRow(entry)) {
+            continue;
+        }
+        const key = entry.key.trim();
+        if (!key || isForbiddenMountPropKey(key)) {
+            continue;
+        }
+        const coerced = coerceMountPropValue(entry);
+        if (coerced === undefined) {
+            continue;
+        }
+        props[key] = coerced;
+    }
+    return props;
+};
+
+const PLACEHOLDER_STYLE = {
+    boxSizing: 'border-box',
+    border: '1px dashed #94a3b8',
+    borderRadius: 4,
+    padding: '12px 16px',
+    color: '#64748b',
+    fontSize: 13,
+    lineHeight: 1.4,
+    fontFamily: 'system-ui, sans-serif',
+    backgroundColor: '#f8fafc',
+};
+const resolveMountRender = ({ componentAttributes, mounts, widgetInstanceProps, styleProps, }) => {
+    const name = resolveMountName(componentAttributes);
+    const hostComponent = name && mounts ? mounts[name] : undefined;
+    return {
+        name,
+        hostComponent,
+        placeholderLabel: name || 'Custom Component',
+        rootStyle: hostComponent ? styleProps : { ...PLACEHOLDER_STYLE, ...styleProps },
+        hostInputs: {
+            ...widgetInstanceProps,
+            ...resolveMountProps(componentAttributes),
+        },
+        shouldWarn: Boolean(name && mounts && !hostComponent),
+    };
+};
+const warnUnmatchedMount = (name, registered) => {
+    const nodeEnv = globalThis.process?.env
+        ?.NODE_ENV;
+    if (nodeEnv === 'production') {
+        return;
+    }
+    const available = registered.length ? registered.join(', ') : '(none)';
+    console.warn(`r-mount: no host component registered as "${name}". Registered names: ${available}.`);
+};
+
+/**
+ * A leaf that renders a host-app component by name.
+ *
+ * The author sets a name and a list of typed props in the composer. The host
+ * application passes the actual component on `rulecms-widget`'s `mounts` map.
+ * This file never imports customer code: a miss is a placeholder, not a
+ * lookup into executable text.
+ *
+ * The root is always a `<div>`. Author props are never spread onto this div
+ * — only onto the resolved host component via `NgComponentOutlet`.
+ */
+class RMountComponent {
+    constructor() {
+        this.state = resolveMountRender({});
+    }
+    ngOnChanges() {
+        this.state = resolveMountRender({
+            componentAttributes: this.componentAttributes,
+            mounts: this.mounts,
+            widgetInstanceProps: this.widgetInstanceProps,
+            styleProps: this.styleProps,
+        });
+        if (this.state.shouldWarn && this.mounts) {
+            warnUnmatchedMount(this.state.name, Object.keys(this.mounts));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RMountComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: RMountComponent, isStandalone: true, selector: "rulecms-r-mount", inputs: { componentAttributes: "componentAttributes", styleProps: "styleProps", className: "className", mounts: "mounts", widgetInstanceProps: "widgetInstanceProps" }, usesOnChanges: true, ngImport: i0, template: `
+    <div [ngStyle]="state.rootStyle" [class]="className || undefined">
+      @if (state.hostComponent) {
+        <ng-container *ngComponentOutlet="state.hostComponent; inputs: state.hostInputs" />
+      } @else {
+        {{ state.placeholderLabel }}
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RMountComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rulecms-r-mount',
+                    standalone: true,
+                    imports: [NgStyle, NgComponentOutlet],
+                    template: `
+    <div [ngStyle]="state.rootStyle" [class]="className || undefined">
+      @if (state.hostComponent) {
+        <ng-container *ngComponentOutlet="state.hostComponent; inputs: state.hostInputs" />
+      } @else {
+        {{ state.placeholderLabel }}
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { componentAttributes: [{
+                type: Input
+            }], styleProps: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], mounts: [{
+                type: Input
+            }], widgetInstanceProps: [{
+                type: Input
+            }] } });
+
+/**
+ * Always renders a root `<div>` that holds the column's box styles — either
+ * around the host component or around the placeholder. The host component is
+ * unknown to this library, so it cannot be trusted to carry styles itself.
+ */
+const resolveNoContainer = () => false;
+
+/**
+ * The root `<div>` carries the className. There is always exactly one element
+ * and it is always the root, whether the host component resolved or not.
+ */
+const resolveRendersOwnElement = () => true;
+
+/**
+ * A fresh mount has no name and no props. Seeding either would invent a
+ * registration the host does not have, so both stay empty until the author
+ * fills them in.
+ */
+const defaultAttributeValues = [
+    {
+        name: MOUNT_NAME_ATTRIBUTE,
+        defaultValues: {},
+    },
+    {
+        name: MOUNT_PROPS_ATTRIBUTE,
+        defaultValues: {},
+    },
+];
+
+/**
+ * Both settings the mount offers, in the order the Modify drawer shows them.
+ */
+const attributeEditModeConfigs = [
+    {
+        name: MOUNT_NAME_ATTRIBUTE,
+        heading: 'Component Name',
+        subHeading: 'The name your developer registered in the app. Must match exactly, for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: MOUNT_PROPS_ATTRIBUTE,
+        heading: 'Props',
+        subHeading: 'Name and value pairs passed to that component. The component decides what each name means, for 3 different device resolutions',
+        defaultValues: {},
+    },
+];
+
+const displayCardEntry = {
+    id: ComponentIdentifiers.rMount,
     resolveNoContainer,
     resolveRendersOwnElement,
-    card: RAccordionComponent,
+    card: RMountComponent,
     defaultAttributeValues,
     attributeEditModeConfigs,
 };
 
 const cardEntries$1 = [
+    displayCardEntry$9,
     displayCardEntry$8,
     displayCardEntry$7,
     displayCardEntry$6,
@@ -3926,6 +4191,11 @@ const componentNameToModifyAttribute = {
     'accordion-open-3-resolutions': 'accordion-open-3-resolutions',
     'accordion-heading-level-3-resolutions': 'accordion-heading-level-3-resolutions',
     'accordion-links-3-resolutions': 'links-3-resolutions',
+    // r-mount: the name is a constrained identifier and reuses the shared
+    // plain-text editor; the props list is a repeatable key/type/value row
+    // and needs its own editor.
+    'mount-name-3-resolutions': 'image-text-3-resolutions',
+    'mount-props-3-resolutions': 'mount-props-3-resolutions',
     'content-title-3-resolutions': 'content-title-3-resolutions',
     'media-selector-3-resolutions': 'media-selector-3-resolutions',
     'pass-through-image-attributes-alt-3-resolutions': 'image-alt-text-3-resolutions',
@@ -3999,6 +4269,7 @@ const cardEntries = [
     { id: ComponentIdentifiers.rEmbed, icon: '⧉', label: 'Embed' },
     { id: ComponentIdentifiers.rList, icon: '☰', label: 'List' },
     { id: ComponentIdentifiers.rAccordion, icon: '▸', label: 'Accordion' },
+    { id: ComponentIdentifiers.rMount, icon: '⌘', label: 'Custom' },
 ];
 
 const cardGroups = [
@@ -4168,5 +4439,5 @@ function serializeInlineMarkers(runs) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACCORDION_HEADING_LEVELS, BLOCK_ENCLOSING_TAGS, BUTTON_BORDER_VARIABLE, BUTTON_CLICK_HANDLER_PROP, BUTTON_CSS_VARIABLE_PREFIX, BUTTON_FILL_ACTIVE_VARIABLE, BUTTON_FILL_HOVER_VARIABLE, BUTTON_FILL_VARIABLE, BUTTON_INK_HOVER_VARIABLE, BUTTON_INK_VARIABLE, BUTTON_LIBRARY_STYLESHEET, BUTTON_RING_VARIABLE, BUTTON_SIZES, BUTTON_TONES, BUTTON_VARIANTS, ComponentIdentifiers, DEFAULT_ACCORDION_HEADING_LEVEL, DEFAULT_BUTTON_LABEL, DEFAULT_BUTTON_PRESET, DEFAULT_EMBED_LOADING, DEFAULT_ICON_POSITION, DEFAULT_LIST_KIND, EMBED_ASPECT_RATIOS, EMBED_LOADING_VALUES, EMBED_PROVIDERS, EMBED_UNSHAPED_HEIGHT, ENCLOSING_TAGS, ICON_POSITIONS, INLINE_ENCLOSING_TAGS, InlineMarkupComponent, LIST_KINDS, LIST_MARKERS, REJECTED_HREF_SCHEMES, SIZE_SCALES, TONE_PALETTES, applyButtonColumnStyles, buildButtonPresetStyles, buildButtonRenderStyles, disabledStyles as buttonDisabledStyles, cardGroups$1 as cardGroups, components, editor, formatInlineMarker, getComponentMetadataForEditing, getPreviewCardGroups, getPreviewComponents, getSourceComponentsPlugin, isAllowedEmbedUrl, isBlockEnclosingTag, isButtonSize, isButtonTone, isButtonVariant, isEnclosingTag, isSafeHref, manifest, normaliseHost, parseInlineLinkMarkers, parseInlineMarkers, resolveButtonPreset, resolveEmbedUrl, resolveLinkAttributes, serializeInlineMarkers, stylesheet, toneCssVariable };
+export { ACCORDION_HEADING_LEVELS, BLOCK_ENCLOSING_TAGS, BUTTON_BORDER_VARIABLE, BUTTON_CLICK_HANDLER_PROP, BUTTON_CSS_VARIABLE_PREFIX, BUTTON_FILL_ACTIVE_VARIABLE, BUTTON_FILL_HOVER_VARIABLE, BUTTON_FILL_VARIABLE, BUTTON_INK_HOVER_VARIABLE, BUTTON_INK_VARIABLE, BUTTON_LIBRARY_STYLESHEET, BUTTON_RING_VARIABLE, BUTTON_SIZES, BUTTON_TONES, BUTTON_VARIANTS, ComponentIdentifiers, DEFAULT_ACCORDION_HEADING_LEVEL, DEFAULT_BUTTON_LABEL, DEFAULT_BUTTON_PRESET, DEFAULT_EMBED_LOADING, DEFAULT_ICON_POSITION, DEFAULT_LIST_KIND, EMBED_ASPECT_RATIOS, EMBED_LOADING_VALUES, EMBED_PROVIDERS, EMBED_UNSHAPED_HEIGHT, ENCLOSING_TAGS, ICON_POSITIONS, INLINE_ENCLOSING_TAGS, InlineMarkupComponent, LIST_KINDS, LIST_MARKERS, MOUNT_NAME_ATTRIBUTE, MOUNT_NAME_PATTERN, MOUNT_PROPS_ATTRIBUTE, MOUNT_PROP_TYPES, REJECTED_HREF_SCHEMES, SIZE_SCALES, TONE_PALETTES, applyButtonColumnStyles, buildButtonPresetStyles, buildButtonRenderStyles, disabledStyles as buttonDisabledStyles, cardGroups$1 as cardGroups, components, editor, formatInlineMarker, getComponentMetadataForEditing, getPreviewCardGroups, getPreviewComponents, getSourceComponentsPlugin, isAllowedEmbedUrl, isAllowedMountName, isBlockEnclosingTag, isButtonSize, isButtonTone, isButtonVariant, isEnclosingTag, isForbiddenMountPropKey, isSafeHref, manifest, normaliseHost, parseInlineLinkMarkers, parseInlineMarkers, resolveButtonPreset, resolveEmbedUrl, resolveLinkAttributes, resolveMountName, resolveMountProps, serializeInlineMarkers, stylesheet, toneCssVariable };
 //# sourceMappingURL=rulecms-source-components-angular.mjs.map