@deenruv/admin-ui 1.0.0

package/fesm2022/deenruv-admin-ui-react.mjs

@@ -0,0 +1,999 @@
+import * as i0 from '@angular/core';
+import { Input, Optional, Directive, InjectionToken, inject, ViewEncapsulation, Component, Injector, APP_INITIALIZER } from '@angular/core';
+import React, { createContext, createElement, useEffect, useContext, useRef, forwardRef, useState, useCallback } from 'react';
+import { createRoot } from 'react-dom/client';
+import * as i1 from '@deenruv/admin-ui/core';
+import { ROUTE_COMPONENT_OPTIONS, RouteComponent, SharedModule, ProsemirrorService, ContextMenuService, DataService, CustomDetailComponentService, DataTableCustomComponentService, ComponentRegistryService, registerRouteComponent } from '@deenruv/admin-ui/core';
+import { ClarityIcons } from '@cds/core/icon';
+import { Router, ActivatedRoute } from '@angular/router';
+import { firstValueFrom } from 'rxjs';
+import { tap } from 'rxjs/operators';
+
+const HostedComponentContext = createContext(null);
+/**
+ * Based on https://netbasal.com/using-react-in-angular-applications-1bb907ecac91
+ */
+class ReactComponentHostDirective {
+    constructor(host, injector, pageMetadataService) {
+        this.host = host;
+        this.injector = injector;
+        this.pageMetadataService = pageMetadataService;
+        this.context = {};
+        this.root = null;
+    }
+    async ngOnChanges() {
+        const Comp = this.reactComponent;
+        if (!this.root) {
+            this.root = createRoot(this.host.nativeElement);
+        }
+        this.root.render(createElement(HostedComponentContext.Provider, {
+            value: {
+                ...this.props,
+                ...this.context,
+                injector: this.injector,
+                pageMetadataService: this.pageMetadataService,
+            },
+        }, createElement(Comp, this.props)));
+    }
+    ngOnDestroy() {
+        this.root?.unmount();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactComponentHostDirective, deps: [{ token: i0.ElementRef }, { token: i0.Injector }, { token: i1.PageMetadataService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ReactComponentHostDirective, isStandalone: true, selector: "[vdrReactComponentHost]", inputs: { reactComponent: ["vdrReactComponentHost", "reactComponent"], props: "props", context: "context" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactComponentHostDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[vdrReactComponentHost]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Injector }, { type: i1.PageMetadataService, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { reactComponent: [{
+                type: Input,
+                args: ['vdrReactComponentHost']
+            }], props: [{
+                type: Input
+            }], context: [{
+                type: Input
+            }] } });
+
+const REACT_CUSTOM_COLUMN_COMPONENT_OPTIONS = new InjectionToken('REACT_CUSTOM_COLUMN_COMPONENT_OPTIONS');
+class ReactCustomColumnComponent {
+    constructor() {
+        this.reactComponent = inject(REACT_CUSTOM_COLUMN_COMPONENT_OPTIONS).component;
+        this.options = inject(REACT_CUSTOM_COLUMN_COMPONENT_OPTIONS);
+    }
+    ngOnInit() {
+        this.props = {
+            rowItem: this.rowItem,
+            ...(this.options.props ?? {}),
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactCustomColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReactCustomColumnComponent, isStandalone: true, selector: "vdr-react-custom-column-component", inputs: { rowItem: "rowItem" }, ngImport: i0, template: ` <div [vdrReactComponentHost]="reactComponent" [props]="props"></div> `, isInline: true, styles: [":host,.vdr-card{display:block;--card-padding: calc(var(--space-unit) * 3);container-type:inline-size}.card-container{border:1px solid var(--color-card-border);background-color:var(--color-card-bg);border-radius:var(--border-radius);padding:var(--card-padding) 0;box-shadow:0 2px 4px #0000000d}@container (max-width: 400px){.card-container{--card-padding: calc(var(--space-unit) * 2)}}.card-container.padding-x{padding-inline-start:var(--card-padding);padding-inline-end:var(--card-padding)}.title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--card-padding)}.title{font-size:var(--font-size-base);padding:0 var(--card-padding)}.padding-x .title{padding:0}::ng-deep vdr-card+vdr-card{margin-top:calc(var(--space-unit) * 2)}.vdr-card+.vdr-card{margin-top:calc(var(--space-unit) * 2)}:host{display:block}.form-group label{font-size:var(--font-size-sm);color:var(--color-weight-800);margin-bottom:4px;display:inline-block}.tooltip-text{font-size:var(--font-size-xs);line-height:var(--font-size-sm);margin-bottom:4px}.input-row{display:flex}::ng-deep .input-row input:not([type=checkbox]),::ng-deep .input-row select,::ng-deep .input-row textarea,::ng-deep .input-row ng-select,::ng-deep .input-row vdr-zone-selector,::ng-deep .input-row vdr-facet-value-selector,::ng-deep .input-row vdr-option-value-input,::ng-deep .input-row vdr-affixed-input,::ng-deep .input-row vdr-currency-input,::ng-deep .input-row vdr-rich-text-editor{width:100%}::ng-deep .input-row.readonly input:not([type=checkbox])[readonly],::ng-deep .input-row.readonly select[readonly],::ng-deep .input-row.readonly textarea[readonly],::ng-deep .input-row.readonly ng-select[readonly],::ng-deep .input-row.readonly vdr-zone-selector[readonly],::ng-deep .input-row.readonly vdr-facet-value-selector[readonly],::ng-deep .input-row.readonly vdr-option-value-input[readonly],::ng-deep .input-row.readonly vdr-affixed-input[readonly],::ng-deep .input-row.readonly vdr-currency-input[readonly],::ng-deep .input-row.readonly vdr-rich-text-editor[readonly]{cursor:not-allowed}.input-row input:not([type=checkbox]),.input-row select,.input-row textarea{width:100%}::ng-deep .input-row.has-toggle input:not([type=checkbox]):not([type=radio]){border-start-end-radius:0!important;border-end-end-radius:0!important}.edit-button{border:1px solid var(--color-weight-200);border-radius:var(--border-radius-input);border-inline-start-width:0;border-start-start-radius:0;border-end-start-radius:0}.edit-button.enabled{color:var(--color-primary-700);background-color:var(--color-primary-100)}:host,.vdr-action-bar{display:flex;justify-content:space-between;align-items:baseline;z-index:25;flex-direction:column-reverse}:host>.grow,.vdr-action-bar>.grow{flex:1}:host .right-content,.vdr-action-bar .right-content{width:100%;display:flex;justify-content:flex-end}:host ::ng-deep vdr-ab-right>*:last-child,.vdr-action-bar ::ng-deep vdr-ab-right>*:last-child{margin-inline-end:0px}@media screen and (min-width: 768px){:host,.vdr-action-bar{flex-direction:row}:host .right-content,.vdr-action-bar .right-content{width:initial}}:host,.vdr-page-detail-layout{display:grid;grid-template-columns:3fr 1fr}@media screen and (max-width: 992px){:host{grid-template-columns:1fr}}.sidebar{padding:var(--space-unit)}.form-group .input-row.invalid input:not([type=checkbox]):not([type=radio]),.form-group .input-row.invalid select,.form-group .input-row.invalid textarea{color:var(--color-error-700);border-color:var(--color-error-300)}\n"], dependencies: [{ kind: "directive", type: ReactComponentHostDirective, selector: "[vdrReactComponentHost]", inputs: ["vdrReactComponentHost", "props", "context"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactCustomColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-react-custom-column-component', template: ` <div [vdrReactComponentHost]="reactComponent" [props]="props"></div> `, encapsulation: ViewEncapsulation.None, standalone: true, imports: [ReactComponentHostDirective], styles: [":host,.vdr-card{display:block;--card-padding: calc(var(--space-unit) * 3);container-type:inline-size}.card-container{border:1px solid var(--color-card-border);background-color:var(--color-card-bg);border-radius:var(--border-radius);padding:var(--card-padding) 0;box-shadow:0 2px 4px #0000000d}@container (max-width: 400px){.card-container{--card-padding: calc(var(--space-unit) * 2)}}.card-container.padding-x{padding-inline-start:var(--card-padding);padding-inline-end:var(--card-padding)}.title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--card-padding)}.title{font-size:var(--font-size-base);padding:0 var(--card-padding)}.padding-x .title{padding:0}::ng-deep vdr-card+vdr-card{margin-top:calc(var(--space-unit) * 2)}.vdr-card+.vdr-card{margin-top:calc(var(--space-unit) * 2)}:host{display:block}.form-group label{font-size:var(--font-size-sm);color:var(--color-weight-800);margin-bottom:4px;display:inline-block}.tooltip-text{font-size:var(--font-size-xs);line-height:var(--font-size-sm);margin-bottom:4px}.input-row{display:flex}::ng-deep .input-row input:not([type=checkbox]),::ng-deep .input-row select,::ng-deep .input-row textarea,::ng-deep .input-row ng-select,::ng-deep .input-row vdr-zone-selector,::ng-deep .input-row vdr-facet-value-selector,::ng-deep .input-row vdr-option-value-input,::ng-deep .input-row vdr-affixed-input,::ng-deep .input-row vdr-currency-input,::ng-deep .input-row vdr-rich-text-editor{width:100%}::ng-deep .input-row.readonly input:not([type=checkbox])[readonly],::ng-deep .input-row.readonly select[readonly],::ng-deep .input-row.readonly textarea[readonly],::ng-deep .input-row.readonly ng-select[readonly],::ng-deep .input-row.readonly vdr-zone-selector[readonly],::ng-deep .input-row.readonly vdr-facet-value-selector[readonly],::ng-deep .input-row.readonly vdr-option-value-input[readonly],::ng-deep .input-row.readonly vdr-affixed-input[readonly],::ng-deep .input-row.readonly vdr-currency-input[readonly],::ng-deep .input-row.readonly vdr-rich-text-editor[readonly]{cursor:not-allowed}.input-row input:not([type=checkbox]),.input-row select,.input-row textarea{width:100%}::ng-deep .input-row.has-toggle input:not([type=checkbox]):not([type=radio]){border-start-end-radius:0!important;border-end-end-radius:0!important}.edit-button{border:1px solid var(--color-weight-200);border-radius:var(--border-radius-input);border-inline-start-width:0;border-start-start-radius:0;border-end-start-radius:0}.edit-button.enabled{color:var(--color-primary-700);background-color:var(--color-primary-100)}:host,.vdr-action-bar{display:flex;justify-content:space-between;align-items:baseline;z-index:25;flex-direction:column-reverse}:host>.grow,.vdr-action-bar>.grow{flex:1}:host .right-content,.vdr-action-bar .right-content{width:100%;display:flex;justify-content:flex-end}:host ::ng-deep vdr-ab-right>*:last-child,.vdr-action-bar ::ng-deep vdr-ab-right>*:last-child{margin-inline-end:0px}@media screen and (min-width: 768px){:host,.vdr-action-bar{flex-direction:row}:host .right-content,.vdr-action-bar .right-content{width:initial}}:host,.vdr-page-detail-layout{display:grid;grid-template-columns:3fr 1fr}@media screen and (max-width: 992px){:host{grid-template-columns:1fr}}.sidebar{padding:var(--space-unit)}.form-group .input-row.invalid input:not([type=checkbox]):not([type=radio]),.form-group .input-row.invalid select,.form-group .input-row.invalid textarea{color:var(--color-error-700);border-color:var(--color-error-300)}\n"] }]
+        }], propDecorators: { rowItem: [{
+                type: Input
+            }] } });
+
+const REACT_CUSTOM_DETAIL_COMPONENT_OPTIONS = new InjectionToken('REACT_CUSTOM_DETAIL_COMPONENT_OPTIONS');
+class ReactCustomDetailComponent {
+    constructor() {
+        this.props = inject(REACT_CUSTOM_DETAIL_COMPONENT_OPTIONS).props ?? {};
+        this.reactComponent = inject(REACT_CUSTOM_DETAIL_COMPONENT_OPTIONS).component;
+    }
+    ngOnInit() {
+        this.context = {
+            detailForm: this.detailForm,
+            entity$: this.entity$,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactCustomDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReactCustomDetailComponent, isStandalone: true, selector: "vdr-react-custom-detail-component", ngImport: i0, template: ` <div [vdrReactComponentHost]="reactComponent" [context]="context" [props]="props"></div> `, isInline: true, styles: [":host,.vdr-card{display:block;--card-padding: calc(var(--space-unit) * 3);container-type:inline-size}.card-container{border:1px solid var(--color-card-border);background-color:var(--color-card-bg);border-radius:var(--border-radius);padding:var(--card-padding) 0;box-shadow:0 2px 4px #0000000d}@container (max-width: 400px){.card-container{--card-padding: calc(var(--space-unit) * 2)}}.card-container.padding-x{padding-inline-start:var(--card-padding);padding-inline-end:var(--card-padding)}.title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--card-padding)}.title{font-size:var(--font-size-base);padding:0 var(--card-padding)}.padding-x .title{padding:0}::ng-deep vdr-card+vdr-card{margin-top:calc(var(--space-unit) * 2)}.vdr-card+.vdr-card{margin-top:calc(var(--space-unit) * 2)}:host{display:block}.form-group label{font-size:var(--font-size-sm);color:var(--color-weight-800);margin-bottom:4px;display:inline-block}.tooltip-text{font-size:var(--font-size-xs);line-height:var(--font-size-sm);margin-bottom:4px}.input-row{display:flex}::ng-deep .input-row input:not([type=checkbox]),::ng-deep .input-row select,::ng-deep .input-row textarea,::ng-deep .input-row ng-select,::ng-deep .input-row vdr-zone-selector,::ng-deep .input-row vdr-facet-value-selector,::ng-deep .input-row vdr-option-value-input,::ng-deep .input-row vdr-affixed-input,::ng-deep .input-row vdr-currency-input,::ng-deep .input-row vdr-rich-text-editor{width:100%}::ng-deep .input-row.readonly input:not([type=checkbox])[readonly],::ng-deep .input-row.readonly select[readonly],::ng-deep .input-row.readonly textarea[readonly],::ng-deep .input-row.readonly ng-select[readonly],::ng-deep .input-row.readonly vdr-zone-selector[readonly],::ng-deep .input-row.readonly vdr-facet-value-selector[readonly],::ng-deep .input-row.readonly vdr-option-value-input[readonly],::ng-deep .input-row.readonly vdr-affixed-input[readonly],::ng-deep .input-row.readonly vdr-currency-input[readonly],::ng-deep .input-row.readonly vdr-rich-text-editor[readonly]{cursor:not-allowed}.input-row input:not([type=checkbox]),.input-row select,.input-row textarea{width:100%}::ng-deep .input-row.has-toggle input:not([type=checkbox]):not([type=radio]){border-start-end-radius:0!important;border-end-end-radius:0!important}.edit-button{border:1px solid var(--color-weight-200);border-radius:var(--border-radius-input);border-inline-start-width:0;border-start-start-radius:0;border-end-start-radius:0}.edit-button.enabled{color:var(--color-primary-700);background-color:var(--color-primary-100)}:host,.vdr-action-bar{display:flex;justify-content:space-between;align-items:baseline;z-index:25;flex-direction:column-reverse}:host>.grow,.vdr-action-bar>.grow{flex:1}:host .right-content,.vdr-action-bar .right-content{width:100%;display:flex;justify-content:flex-end}:host ::ng-deep vdr-ab-right>*:last-child,.vdr-action-bar ::ng-deep vdr-ab-right>*:last-child{margin-inline-end:0px}@media screen and (min-width: 768px){:host,.vdr-action-bar{flex-direction:row}:host .right-content,.vdr-action-bar .right-content{width:initial}}:host,.vdr-page-detail-layout{display:grid;grid-template-columns:3fr 1fr}@media screen and (max-width: 992px){:host{grid-template-columns:1fr}}.sidebar{padding:var(--space-unit)}.form-group .input-row.invalid input:not([type=checkbox]):not([type=radio]),.form-group .input-row.invalid select,.form-group .input-row.invalid textarea{color:var(--color-error-700);border-color:var(--color-error-300)}\n"], dependencies: [{ kind: "directive", type: ReactComponentHostDirective, selector: "[vdrReactComponentHost]", inputs: ["vdrReactComponentHost", "props", "context"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactCustomDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-react-custom-detail-component', template: ` <div [vdrReactComponentHost]="reactComponent" [context]="context" [props]="props"></div> `, encapsulation: ViewEncapsulation.None, standalone: true, imports: [ReactComponentHostDirective], styles: [":host,.vdr-card{display:block;--card-padding: calc(var(--space-unit) * 3);container-type:inline-size}.card-container{border:1px solid var(--color-card-border);background-color:var(--color-card-bg);border-radius:var(--border-radius);padding:var(--card-padding) 0;box-shadow:0 2px 4px #0000000d}@container (max-width: 400px){.card-container{--card-padding: calc(var(--space-unit) * 2)}}.card-container.padding-x{padding-inline-start:var(--card-padding);padding-inline-end:var(--card-padding)}.title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--card-padding)}.title{font-size:var(--font-size-base);padding:0 var(--card-padding)}.padding-x .title{padding:0}::ng-deep vdr-card+vdr-card{margin-top:calc(var(--space-unit) * 2)}.vdr-card+.vdr-card{margin-top:calc(var(--space-unit) * 2)}:host{display:block}.form-group label{font-size:var(--font-size-sm);color:var(--color-weight-800);margin-bottom:4px;display:inline-block}.tooltip-text{font-size:var(--font-size-xs);line-height:var(--font-size-sm);margin-bottom:4px}.input-row{display:flex}::ng-deep .input-row input:not([type=checkbox]),::ng-deep .input-row select,::ng-deep .input-row textarea,::ng-deep .input-row ng-select,::ng-deep .input-row vdr-zone-selector,::ng-deep .input-row vdr-facet-value-selector,::ng-deep .input-row vdr-option-value-input,::ng-deep .input-row vdr-affixed-input,::ng-deep .input-row vdr-currency-input,::ng-deep .input-row vdr-rich-text-editor{width:100%}::ng-deep .input-row.readonly input:not([type=checkbox])[readonly],::ng-deep .input-row.readonly select[readonly],::ng-deep .input-row.readonly textarea[readonly],::ng-deep .input-row.readonly ng-select[readonly],::ng-deep .input-row.readonly vdr-zone-selector[readonly],::ng-deep .input-row.readonly vdr-facet-value-selector[readonly],::ng-deep .input-row.readonly vdr-option-value-input[readonly],::ng-deep .input-row.readonly vdr-affixed-input[readonly],::ng-deep .input-row.readonly vdr-currency-input[readonly],::ng-deep .input-row.readonly vdr-rich-text-editor[readonly]{cursor:not-allowed}.input-row input:not([type=checkbox]),.input-row select,.input-row textarea{width:100%}::ng-deep .input-row.has-toggle input:not([type=checkbox]):not([type=radio]){border-start-end-radius:0!important;border-end-end-radius:0!important}.edit-button{border:1px solid var(--color-weight-200);border-radius:var(--border-radius-input);border-inline-start-width:0;border-start-start-radius:0;border-end-start-radius:0}.edit-button.enabled{color:var(--color-primary-700);background-color:var(--color-primary-100)}:host,.vdr-action-bar{display:flex;justify-content:space-between;align-items:baseline;z-index:25;flex-direction:column-reverse}:host>.grow,.vdr-action-bar>.grow{flex:1}:host .right-content,.vdr-action-bar .right-content{width:100%;display:flex;justify-content:flex-end}:host ::ng-deep vdr-ab-right>*:last-child,.vdr-action-bar ::ng-deep vdr-ab-right>*:last-child{margin-inline-end:0px}@media screen and (min-width: 768px){:host,.vdr-action-bar{flex-direction:row}:host .right-content,.vdr-action-bar .right-content{width:initial}}:host,.vdr-page-detail-layout{display:grid;grid-template-columns:3fr 1fr}@media screen and (max-width: 992px){:host{grid-template-columns:1fr}}.sidebar{padding:var(--space-unit)}.form-group .input-row.invalid input:not([type=checkbox]):not([type=radio]),.form-group .input-row.invalid select,.form-group .input-row.invalid textarea{color:var(--color-error-700);border-color:var(--color-error-300)}\n"] }]
+        }] });
+
+const REACT_INPUT_COMPONENT_OPTIONS = new InjectionToken('REACT_INPUT_COMPONENT_OPTIONS');
+class ReactFormInputComponent {
+    constructor() {
+        this.reactComponent = inject(REACT_INPUT_COMPONENT_OPTIONS).component;
+    }
+    static { this.id = 'react-form-input-component'; }
+    ngOnInit() {
+        this.context = {
+            formControl: this.formControl,
+            readonly: this.readonly,
+            config: this.config,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReactFormInputComponent, isStandalone: true, selector: "vdr-react-form-input-component", ngImport: i0, template: ` <div [vdrReactComponentHost]="reactComponent" [context]="context" [props]="context"></div> `, isInline: true, styles: [":host,.vdr-card{display:block;--card-padding: calc(var(--space-unit) * 3);container-type:inline-size}.card-container{border:1px solid var(--color-card-border);background-color:var(--color-card-bg);border-radius:var(--border-radius);padding:var(--card-padding) 0;box-shadow:0 2px 4px #0000000d}@container (max-width: 400px){.card-container{--card-padding: calc(var(--space-unit) * 2)}}.card-container.padding-x{padding-inline-start:var(--card-padding);padding-inline-end:var(--card-padding)}.title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--card-padding)}.title{font-size:var(--font-size-base);padding:0 var(--card-padding)}.padding-x .title{padding:0}::ng-deep vdr-card+vdr-card{margin-top:calc(var(--space-unit) * 2)}.vdr-card+.vdr-card{margin-top:calc(var(--space-unit) * 2)}:host{display:block}.form-group label{font-size:var(--font-size-sm);color:var(--color-weight-800);margin-bottom:4px;display:inline-block}.tooltip-text{font-size:var(--font-size-xs);line-height:var(--font-size-sm);margin-bottom:4px}.input-row{display:flex}::ng-deep .input-row input:not([type=checkbox]),::ng-deep .input-row select,::ng-deep .input-row textarea,::ng-deep .input-row ng-select,::ng-deep .input-row vdr-zone-selector,::ng-deep .input-row vdr-facet-value-selector,::ng-deep .input-row vdr-option-value-input,::ng-deep .input-row vdr-affixed-input,::ng-deep .input-row vdr-currency-input,::ng-deep .input-row vdr-rich-text-editor{width:100%}::ng-deep .input-row.readonly input:not([type=checkbox])[readonly],::ng-deep .input-row.readonly select[readonly],::ng-deep .input-row.readonly textarea[readonly],::ng-deep .input-row.readonly ng-select[readonly],::ng-deep .input-row.readonly vdr-zone-selector[readonly],::ng-deep .input-row.readonly vdr-facet-value-selector[readonly],::ng-deep .input-row.readonly vdr-option-value-input[readonly],::ng-deep .input-row.readonly vdr-affixed-input[readonly],::ng-deep .input-row.readonly vdr-currency-input[readonly],::ng-deep .input-row.readonly vdr-rich-text-editor[readonly]{cursor:not-allowed}.input-row input:not([type=checkbox]),.input-row select,.input-row textarea{width:100%}::ng-deep .input-row.has-toggle input:not([type=checkbox]):not([type=radio]){border-start-end-radius:0!important;border-end-end-radius:0!important}.edit-button{border:1px solid var(--color-weight-200);border-radius:var(--border-radius-input);border-inline-start-width:0;border-start-start-radius:0;border-end-start-radius:0}.edit-button.enabled{color:var(--color-primary-700);background-color:var(--color-primary-100)}:host,.vdr-action-bar{display:flex;justify-content:space-between;align-items:baseline;z-index:25;flex-direction:column-reverse}:host>.grow,.vdr-action-bar>.grow{flex:1}:host .right-content,.vdr-action-bar .right-content{width:100%;display:flex;justify-content:flex-end}:host ::ng-deep vdr-ab-right>*:last-child,.vdr-action-bar ::ng-deep vdr-ab-right>*:last-child{margin-inline-end:0px}@media screen and (min-width: 768px){:host,.vdr-action-bar{flex-direction:row}:host .right-content,.vdr-action-bar .right-content{width:initial}}:host,.vdr-page-detail-layout{display:grid;grid-template-columns:3fr 1fr}@media screen and (max-width: 992px){:host{grid-template-columns:1fr}}.sidebar{padding:var(--space-unit)}.form-group .input-row.invalid input:not([type=checkbox]):not([type=radio]),.form-group .input-row.invalid select,.form-group .input-row.invalid textarea{color:var(--color-error-700);border-color:var(--color-error-300)}\n"], dependencies: [{ kind: "directive", type: ReactComponentHostDirective, selector: "[vdrReactComponentHost]", inputs: ["vdrReactComponentHost", "props", "context"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactFormInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-react-form-input-component', template: ` <div [vdrReactComponentHost]="reactComponent" [context]="context" [props]="context"></div> `, encapsulation: ViewEncapsulation.None, standalone: true, imports: [ReactComponentHostDirective], styles: [":host,.vdr-card{display:block;--card-padding: calc(var(--space-unit) * 3);container-type:inline-size}.card-container{border:1px solid var(--color-card-border);background-color:var(--color-card-bg);border-radius:var(--border-radius);padding:var(--card-padding) 0;box-shadow:0 2px 4px #0000000d}@container (max-width: 400px){.card-container{--card-padding: calc(var(--space-unit) * 2)}}.card-container.padding-x{padding-inline-start:var(--card-padding);padding-inline-end:var(--card-padding)}.title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--card-padding)}.title{font-size:var(--font-size-base);padding:0 var(--card-padding)}.padding-x .title{padding:0}::ng-deep vdr-card+vdr-card{margin-top:calc(var(--space-unit) * 2)}.vdr-card+.vdr-card{margin-top:calc(var(--space-unit) * 2)}:host{display:block}.form-group label{font-size:var(--font-size-sm);color:var(--color-weight-800);margin-bottom:4px;display:inline-block}.tooltip-text{font-size:var(--font-size-xs);line-height:var(--font-size-sm);margin-bottom:4px}.input-row{display:flex}::ng-deep .input-row input:not([type=checkbox]),::ng-deep .input-row select,::ng-deep .input-row textarea,::ng-deep .input-row ng-select,::ng-deep .input-row vdr-zone-selector,::ng-deep .input-row vdr-facet-value-selector,::ng-deep .input-row vdr-option-value-input,::ng-deep .input-row vdr-affixed-input,::ng-deep .input-row vdr-currency-input,::ng-deep .input-row vdr-rich-text-editor{width:100%}::ng-deep .input-row.readonly input:not([type=checkbox])[readonly],::ng-deep .input-row.readonly select[readonly],::ng-deep .input-row.readonly textarea[readonly],::ng-deep .input-row.readonly ng-select[readonly],::ng-deep .input-row.readonly vdr-zone-selector[readonly],::ng-deep .input-row.readonly vdr-facet-value-selector[readonly],::ng-deep .input-row.readonly vdr-option-value-input[readonly],::ng-deep .input-row.readonly vdr-affixed-input[readonly],::ng-deep .input-row.readonly vdr-currency-input[readonly],::ng-deep .input-row.readonly vdr-rich-text-editor[readonly]{cursor:not-allowed}.input-row input:not([type=checkbox]),.input-row select,.input-row textarea{width:100%}::ng-deep .input-row.has-toggle input:not([type=checkbox]):not([type=radio]){border-start-end-radius:0!important;border-end-end-radius:0!important}.edit-button{border:1px solid var(--color-weight-200);border-radius:var(--border-radius-input);border-inline-start-width:0;border-start-start-radius:0;border-end-start-radius:0}.edit-button.enabled{color:var(--color-primary-700);background-color:var(--color-primary-100)}:host,.vdr-action-bar{display:flex;justify-content:space-between;align-items:baseline;z-index:25;flex-direction:column-reverse}:host>.grow,.vdr-action-bar>.grow{flex:1}:host .right-content,.vdr-action-bar .right-content{width:100%;display:flex;justify-content:flex-end}:host ::ng-deep vdr-ab-right>*:last-child,.vdr-action-bar ::ng-deep vdr-ab-right>*:last-child{margin-inline-end:0px}@media screen and (min-width: 768px){:host,.vdr-action-bar{flex-direction:row}:host .right-content,.vdr-action-bar .right-content{width:initial}}:host,.vdr-page-detail-layout{display:grid;grid-template-columns:3fr 1fr}@media screen and (max-width: 992px){:host{grid-template-columns:1fr}}.sidebar{padding:var(--space-unit)}.form-group .input-row.invalid input:not([type=checkbox]):not([type=radio]),.form-group .input-row.invalid select,.form-group .input-row.invalid textarea{color:var(--color-error-700);border-color:var(--color-error-300)}\n"] }]
+        }] });
+
+const REACT_ROUTE_COMPONENT_OPTIONS = new InjectionToken('REACT_ROUTE_COMPONENT_OPTIONS');
+class ReactRouteComponent {
+    constructor() {
+        this.props = inject(REACT_ROUTE_COMPONENT_OPTIONS).props;
+        this.reactComponent = inject(ROUTE_COMPONENT_OPTIONS).component;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactRouteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReactRouteComponent, isStandalone: true, selector: "vdr-react-route-component", ngImport: i0, template: `
+        <vdr-route-component
+            ><div [vdrReactComponentHost]="reactComponent" [props]="props"></div
+        ></vdr-route-component>
+    `, isInline: true, styles: [":host,.vdr-card{display:block;--card-padding: calc(var(--space-unit) * 3);container-type:inline-size}.card-container{border:1px solid var(--color-card-border);background-color:var(--color-card-bg);border-radius:var(--border-radius);padding:var(--card-padding) 0;box-shadow:0 2px 4px #0000000d}@container (max-width: 400px){.card-container{--card-padding: calc(var(--space-unit) * 2)}}.card-container.padding-x{padding-inline-start:var(--card-padding);padding-inline-end:var(--card-padding)}.title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--card-padding)}.title{font-size:var(--font-size-base);padding:0 var(--card-padding)}.padding-x .title{padding:0}::ng-deep vdr-card+vdr-card{margin-top:calc(var(--space-unit) * 2)}.vdr-card+.vdr-card{margin-top:calc(var(--space-unit) * 2)}:host{display:block}.form-group label{font-size:var(--font-size-sm);color:var(--color-weight-800);margin-bottom:4px;display:inline-block}.tooltip-text{font-size:var(--font-size-xs);line-height:var(--font-size-sm);margin-bottom:4px}.input-row{display:flex}::ng-deep .input-row input:not([type=checkbox]),::ng-deep .input-row select,::ng-deep .input-row textarea,::ng-deep .input-row ng-select,::ng-deep .input-row vdr-zone-selector,::ng-deep .input-row vdr-facet-value-selector,::ng-deep .input-row vdr-option-value-input,::ng-deep .input-row vdr-affixed-input,::ng-deep .input-row vdr-currency-input,::ng-deep .input-row vdr-rich-text-editor{width:100%}::ng-deep .input-row.readonly input:not([type=checkbox])[readonly],::ng-deep .input-row.readonly select[readonly],::ng-deep .input-row.readonly textarea[readonly],::ng-deep .input-row.readonly ng-select[readonly],::ng-deep .input-row.readonly vdr-zone-selector[readonly],::ng-deep .input-row.readonly vdr-facet-value-selector[readonly],::ng-deep .input-row.readonly vdr-option-value-input[readonly],::ng-deep .input-row.readonly vdr-affixed-input[readonly],::ng-deep .input-row.readonly vdr-currency-input[readonly],::ng-deep .input-row.readonly vdr-rich-text-editor[readonly]{cursor:not-allowed}.input-row input:not([type=checkbox]),.input-row select,.input-row textarea{width:100%}::ng-deep .input-row.has-toggle input:not([type=checkbox]):not([type=radio]){border-start-end-radius:0!important;border-end-end-radius:0!important}.edit-button{border:1px solid var(--color-weight-200);border-radius:var(--border-radius-input);border-inline-start-width:0;border-start-start-radius:0;border-end-start-radius:0}.edit-button.enabled{color:var(--color-primary-700);background-color:var(--color-primary-100)}:host,.vdr-action-bar{display:flex;justify-content:space-between;align-items:baseline;z-index:25;flex-direction:column-reverse}:host>.grow,.vdr-action-bar>.grow{flex:1}:host .right-content,.vdr-action-bar .right-content{width:100%;display:flex;justify-content:flex-end}:host ::ng-deep vdr-ab-right>*:last-child,.vdr-action-bar ::ng-deep vdr-ab-right>*:last-child{margin-inline-end:0px}@media screen and (min-width: 768px){:host,.vdr-action-bar{flex-direction:row}:host .right-content,.vdr-action-bar .right-content{width:initial}}:host,.vdr-page-detail-layout{display:grid;grid-template-columns:3fr 1fr}@media screen and (max-width: 992px){:host{grid-template-columns:1fr}}.sidebar{padding:var(--space-unit)}.form-group .input-row.invalid input:not([type=checkbox]):not([type=radio]),.form-group .input-row.invalid select,.form-group .input-row.invalid textarea{color:var(--color-error-700);border-color:var(--color-error-300)}\n"], dependencies: [{ kind: "directive", type: ReactComponentHostDirective, selector: "[vdrReactComponentHost]", inputs: ["vdrReactComponentHost", "props", "context"] }, { kind: "component", type: RouteComponent, selector: "vdr-route-component", inputs: ["locationId", "description"] }, { kind: "ngmodule", type: SharedModule }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactRouteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-react-route-component', template: `
+        <vdr-route-component
+            ><div [vdrReactComponentHost]="reactComponent" [props]="props"></div
+        ></vdr-route-component>
+    `, encapsulation: ViewEncapsulation.None, standalone: true, imports: [ReactComponentHostDirective, RouteComponent, SharedModule], styles: [":host,.vdr-card{display:block;--card-padding: calc(var(--space-unit) * 3);container-type:inline-size}.card-container{border:1px solid var(--color-card-border);background-color:var(--color-card-bg);border-radius:var(--border-radius);padding:var(--card-padding) 0;box-shadow:0 2px 4px #0000000d}@container (max-width: 400px){.card-container{--card-padding: calc(var(--space-unit) * 2)}}.card-container.padding-x{padding-inline-start:var(--card-padding);padding-inline-end:var(--card-padding)}.title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--card-padding)}.title{font-size:var(--font-size-base);padding:0 var(--card-padding)}.padding-x .title{padding:0}::ng-deep vdr-card+vdr-card{margin-top:calc(var(--space-unit) * 2)}.vdr-card+.vdr-card{margin-top:calc(var(--space-unit) * 2)}:host{display:block}.form-group label{font-size:var(--font-size-sm);color:var(--color-weight-800);margin-bottom:4px;display:inline-block}.tooltip-text{font-size:var(--font-size-xs);line-height:var(--font-size-sm);margin-bottom:4px}.input-row{display:flex}::ng-deep .input-row input:not([type=checkbox]),::ng-deep .input-row select,::ng-deep .input-row textarea,::ng-deep .input-row ng-select,::ng-deep .input-row vdr-zone-selector,::ng-deep .input-row vdr-facet-value-selector,::ng-deep .input-row vdr-option-value-input,::ng-deep .input-row vdr-affixed-input,::ng-deep .input-row vdr-currency-input,::ng-deep .input-row vdr-rich-text-editor{width:100%}::ng-deep .input-row.readonly input:not([type=checkbox])[readonly],::ng-deep .input-row.readonly select[readonly],::ng-deep .input-row.readonly textarea[readonly],::ng-deep .input-row.readonly ng-select[readonly],::ng-deep .input-row.readonly vdr-zone-selector[readonly],::ng-deep .input-row.readonly vdr-facet-value-selector[readonly],::ng-deep .input-row.readonly vdr-option-value-input[readonly],::ng-deep .input-row.readonly vdr-affixed-input[readonly],::ng-deep .input-row.readonly vdr-currency-input[readonly],::ng-deep .input-row.readonly vdr-rich-text-editor[readonly]{cursor:not-allowed}.input-row input:not([type=checkbox]),.input-row select,.input-row textarea{width:100%}::ng-deep .input-row.has-toggle input:not([type=checkbox]):not([type=radio]){border-start-end-radius:0!important;border-end-end-radius:0!important}.edit-button{border:1px solid var(--color-weight-200);border-radius:var(--border-radius-input);border-inline-start-width:0;border-start-start-radius:0;border-end-start-radius:0}.edit-button.enabled{color:var(--color-primary-700);background-color:var(--color-primary-100)}:host,.vdr-action-bar{display:flex;justify-content:space-between;align-items:baseline;z-index:25;flex-direction:column-reverse}:host>.grow,.vdr-action-bar>.grow{flex:1}:host .right-content,.vdr-action-bar .right-content{width:100%;display:flex;justify-content:flex-end}:host ::ng-deep vdr-ab-right>*:last-child,.vdr-action-bar ::ng-deep vdr-ab-right>*:last-child{margin-inline-end:0px}@media screen and (min-width: 768px){:host,.vdr-action-bar{flex-direction:row}:host .right-content,.vdr-action-bar .right-content{width:initial}}:host,.vdr-page-detail-layout{display:grid;grid-template-columns:3fr 1fr}@media screen and (max-width: 992px){:host{grid-template-columns:1fr}}.sidebar{padding:var(--space-unit)}.form-group .input-row.invalid input:not([type=checkbox]):not([type=radio]),.form-group .input-row.invalid select,.form-group .input-row.invalid textarea{color:var(--color-error-700);border-color:var(--color-error-300)}\n"] }]
+        }] });
+
+/**
+ * @description
+ * A container for the primary actions on a list or detail page
+ *
+ * @example
+ * ```ts
+ * import { ActionBar } from '@deenruv/admin-ui/react';
+ *
+ * export function MyComponent() {
+ *   return (
+ *     <ActionBar leftContent={<div>Optional left content</div>}>
+ *       <button className='button primary'>Primary action</button>
+ *     </ActionBar>
+ *   );
+ * }
+ * ```
+ *
+ * @docsCategory react-components
+ */
+function ActionBar(props) {
+    return (React.createElement("div", { className: 'vdr-action-bar' },
+        React.createElement("div", { className: "left-content" }, props.leftContent),
+        React.createElement("div", { className: "right-content" }, props.children)));
+}
+
+/**
+ * @description
+ * A card component which can be used to group related content.
+ *
+ * @example
+ * ```ts
+ * import { Card } from '@deenruv/admin-ui/react';
+ *
+ * export function MyComponent() {
+ *   return (
+ *     <Card title='My Title'>
+ *       <p>Some content</p>
+ *     </Card>
+ *   );
+ * }
+ * ```
+ *
+ * @docsCategory react-components
+ */
+function Card(props) {
+    return (React.createElement("div", { className: 'vdr-card' },
+        React.createElement("div", { className: `card-container ${props.paddingX !== false ? 'padding-x' : ''}` },
+            props.title && (React.createElement("div", { className: 'title-row' },
+                React.createElement("div", { className: "title" }, props.title))),
+            React.createElement("div", { className: "contents" }, props.children))));
+}
+
+function registerCdsIcon(icon) {
+    ClarityIcons.addIcons(icon);
+}
+/**
+ * @description
+ * A React wrapper for the Clarity UI icon component.
+ *
+ * @example
+ * ```ts
+ * import { userIcon } from '@cds/core/icon';
+ * import { CdsIcon } from '@deenruv/admin-ui/react';
+ *
+ * registerCdsIcon(userIcon);
+ * export function MyComponent() {
+ *    return <CdsIcon icon={userIcon} badge="warning" solid size="lg"></CdsIcon>;
+ * }
+ * ```
+ *
+ * @docsCategory react-components
+ */
+function CdsIcon(props) {
+    const { icon, ...rest } = props;
+    useEffect(() => {
+        ClarityIcons.addIcons(icon);
+    }, [icon]);
+    return React.createElement("cds-icon", { ...rest, shape: icon[0] });
+}
+
+/**
+ * @description
+ * A wrapper around form fields which provides a label, tooltip and error message.
+ *
+ * @example
+ * ```ts
+ * import { FormField } from '@deenruv/admin-ui/react';
+ *
+ * export function MyReactComponent() {
+ *     return (
+ *        <FormField label="My field" tooltip="This is a tooltip" invalid errorMessage="This field is invalid">
+ *            <input type="text" />
+ *        </FormField>
+ *     );
+ * }
+ * ```
+ *
+ * @docsCategory react-components
+ */
+function FormField(props) {
+    return (React.createElement("div", { className: `form-group ` + (!props.label ? 'no-label' : '') + (props.invalid ? 'clr-error' : '') },
+        props.label && React.createElement("label", { htmlFor: props.for ?? '' }, props.label),
+        props.tooltip && React.createElement("div", { className: "tooltip-text" }, props.tooltip),
+        React.createElement("div", { className: `input-row ` + (props.invalid ? 'invalid' : '') }, props.children),
+        props.errorMessage && React.createElement("div", { className: "error-message" }, props.errorMessage)));
+}
+
+/**
+ * @description
+ * Exposes the Angular injector which allows the injection of services into React components.
+ *
+ * @example
+ * ```ts
+ * import { useInjector } from '\@deenruv/admin-ui/react';
+ * import { NotificationService } from '\@deenruv/admin-ui/core';
+ *
+ * export const MyComponent = () => {
+ *     const notificationService = useInjector(NotificationService);
+ *
+ *     const handleClick = () => {
+ *         notificationService.success('Hello world!');
+ *     };
+ *     // ...
+ *     return <div>...</div>;
+ * }
+ * ```
+ *
+ * @docsCategory react-hooks
+ */
+function useInjector(token) {
+    const context = useContext(HostedComponentContext);
+    const instance = context?.injector.get(token);
+    if (!instance) {
+        throw new Error(`Could not inject ${token.name ?? token.toString()}`);
+    }
+    return instance;
+}
+
+/**
+ * @description
+ * A React component which renders an anchor tag and navigates to the specified route when clicked.
+ * This is useful when you want to use a React component in a Deenruv UI plugin which navigates to
+ * a route in the admin-ui.
+ *
+ * @example
+ * ```ts
+ * import { Link } from '@deenruv/admin-ui/react';
+ *
+ * export const MyReactComponent = () => {
+ *     return <Link href="/extensions/my-extension">Go to my extension</Link>;
+ * }
+ * ```
+ *
+ * @docsCategory react-components
+ */
+function Link(props) {
+    const router = useInjector(Router);
+    const { href, ...rest } = props;
+    function onClick(e) {
+        e.preventDefault();
+        void router.navigateByUrl(href);
+    }
+    return (React.createElement("a", { href: href, onClick: onClick, ...rest }, props.children));
+}
+
+/**
+ * @description
+ * A container for page content which provides a consistent width and spacing.
+ *
+ * @example
+ * ```ts
+ * import { PageBlock } from '@deenruv/admin-ui/react';
+ *
+ * export function MyComponent() {
+ *   return (
+ *     <PageBlock>
+ *       ...
+ *     </PageBlock>
+ *   );
+ * }
+ * ```
+ *
+ * @docsCategory react-components
+ */
+function PageBlock(props) {
+    return React.createElement("div", { className: "page-block" }, props.children);
+}
+
+/**
+ * @description
+ * A responsive container for detail views with a main content area and an optional sidebar.
+ *
+ * @example
+ * ```ts
+ * import { PageDetailLayout } from '@deenruv/admin-ui/react';
+ *
+ * export function MyComponent() {
+ *   return (
+ *     <PageDetailLayout sidebar={<div>Sidebar content</div>}>
+ *       <div>Main content</div>
+ *     </PageDetailLayout>
+ *   );
+ * }
+ * ```
+ *
+ * @docsCategory react-components
+ */
+function PageDetailLayout(props) {
+    return (React.createElement("div", { className: 'vdr-page-detail-layout' },
+        React.createElement("div", { className: "main" }, props.children),
+        React.createElement("div", { className: "sidebar" }, props.sidebar)));
+}
+
+/**
+ * @description
+ * Provides access to the ProseMirror (rich text editor) instance.
+ *
+ * @example
+ * ```ts
+ * import { useRichTextEditor } from '\@deenruv/admin-ui/react';
+ * import React from 'react';
+ *
+ * export function Component() {
+ *     const { ref, editor } = useRichTextEditor({
+ *        attributes: { class: '' },
+ *        onTextInput: (text) => console.log(text),
+ *        isReadOnly: () => false,
+ *     });
+ *
+ *     return <div className="w-full" ref={ref} />
+ * }
+ * ```
+ *
+ * @docsCategory react-hooks
+ */
+const useRichTextEditor = ({ attributes, onTextInput, isReadOnly }) => {
+    const injector = useInjector(Injector);
+    const ref = useRef(null);
+    const prosemirror = new ProsemirrorService(injector, useInjector(ContextMenuService));
+    useEffect(() => {
+        if (!ref.current)
+            return;
+        prosemirror.createEditorView({
+            element: ref.current,
+            isReadOnly,
+            onTextInput,
+        });
+        const readOnly = isReadOnly();
+        prosemirror.editorView.setProps({
+            attributes,
+            editable: readOnly ? () => false : () => true,
+        });
+        return () => {
+            prosemirror.destroy();
+        };
+    }, [ref.current]);
+    return { ref, editor: prosemirror };
+};
+
+/**
+ * @description
+ * A rich text editor component which uses ProseMirror (rich text editor) under the hood.
+ *
+ * @example
+ * ```ts
+ * import { RichTextEditor } from '@deenruv/admin-ui/react';
+ * import React from 'react';
+ *
+ * export function MyComponent() {
+ *   const onSubmit = async (e: React.FormEvent) => {
+ *     e.preventDefault();
+ *     const form = new FormData(e.target as HTMLFormElement);
+ *     const content = form.get("content");
+ *     console.log(content);
+ *   };
+ *
+ *   return (
+ *     <form className="w-full" onSubmit={onSubmit}>
+ *       <RichTextEditor
+ *         name="content"
+ *         readOnly={false}
+ *         onMount={(e) => console.log("Mounted", e)}
+ *       />
+ *       <button type="submit" className="btn btn-primary">
+ *         Submit
+ *       </button>
+ *     </form>
+ *   );
+ * }
+ * ```
+ *
+ * @docsCategory react-components
+ */
+const RichTextEditor = forwardRef((props, ref) => {
+    const [data, setData] = useState('');
+    const { readOnly, label, ...rest } = props;
+    const { ref: _ref, editor } = useRichTextEditor({
+        attributes: props.attributes,
+        isReadOnly: () => readOnly || false,
+        onTextInput: text => {
+            setData(text);
+            if (props.onChange) {
+                props.onChange({
+                    target: { value: text },
+                });
+            }
+            if (ref && 'current' in ref && ref.current) {
+                ref.current.value = text;
+                const event = new Event('input', {
+                    bubbles: true,
+                    cancelable: true,
+                });
+                ref.current.dispatchEvent(event);
+            }
+        },
+    });
+    useEffect(() => {
+        if (props.onMount && editor) {
+            props.onMount(editor);
+        }
+        if (typeof props.defaultValue === 'string') {
+            editor.update(props.defaultValue);
+        }
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: _ref, ...rest }, label && React.createElement("label", { className: "rich-text-label" }, label)),
+        React.createElement("input", { type: "hidden", value: data, ref: ref })));
+});
+RichTextEditor.displayName = 'RichTextEditor';
+
+/**
+ * @description
+ * Provides the data available to React-based CustomDetailComponents.
+ *
+ * @example
+ * ```ts
+ * import { Card, useDetailComponentData } from '\@deenruv/admin-ui/react';
+ * import React from 'react';
+ *
+ * export function CustomDetailComponent(props: any) {
+ *     const { entity, detailForm } = useDetailComponentData();
+ *     const updateName = () => {
+ *         detailForm.get('name')?.setValue('New name');
+ *         detailForm.markAsDirty();
+ *     };
+ *     return (
+ *         <Card title={'Custom Detail Component'}>
+ *             <button className="button" onClick={updateName}>
+ *                 Update name
+ *             </button>
+ *             <pre>{JSON.stringify(entity, null, 2)}</pre>
+ *         </Card>
+ *     );
+ * }
+ * ```
+ *
+ * @docsCategory react-hooks
+ */
+function useDetailComponentData() {
+    const context = useContext(HostedComponentContext);
+    if (!context.detailForm || !context.entity$) {
+        throw new Error(`The useDetailComponentData hook can only be used within a CustomDetailComponent`);
+    }
+    const [entity, setEntity] = useState(null);
+    useEffect(() => {
+        const subscription = context.entity$.subscribe(value => {
+            setEntity(value);
+        });
+        return () => subscription.unsubscribe();
+    }, []);
+    return {
+        entity,
+        detailForm: context.detailForm,
+    };
+}
+
+/**
+ * @description
+ * Provides access to the current FormControl value and a method to update the value.
+ *
+ * @example
+ * ```ts
+ * import { useFormControl, ReactFormInputProps } from '\@deenruv/admin-ui/react';
+ * import React from 'react';
+ *
+ * export function ReactNumberInput({ readonly }: ReactFormInputProps) {
+ *     const { value, setFormValue } = useFormControl();
+ *
+ *     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ *         setFormValue(val);
+ *     };
+ *     return (
+ *         <div>
+ *             <input readOnly={readonly} type="number" onChange={handleChange} value={value} />
+ *         </div>
+ *     );
+ * }
+ * ```
+ *
+ * @docsCategory react-hooks
+ */
+function useFormControl() {
+    const context = useContext(HostedComponentContext);
+    if (!context) {
+        throw new Error('No HostedComponentContext found');
+    }
+    if (!isFormInputContext(context)) {
+        throw new Error('useFormControl() can only be used in a form input component');
+    }
+    const { formControl, config } = context;
+    const [value, setValue] = useState(formControl.value ?? 0);
+    useEffect(() => {
+        const subscription = formControl.valueChanges.subscribe(v => {
+            setValue(v);
+        });
+        return () => {
+            subscription.unsubscribe();
+        };
+    }, []);
+    function setFormValue(newValue) {
+        formControl.setValue(coerceFormValue(newValue, config.type));
+        formControl.markAsDirty();
+    }
+    return { value, setFormValue };
+}
+function isFormInputContext(context) {
+    return context.config && context.formControl;
+}
+function coerceFormValue(value, type) {
+    switch (type) {
+        case 'int':
+        case 'float':
+            return Number(value);
+        case 'boolean':
+            return Boolean(value);
+        default:
+            return value;
+    }
+}
+
+/**
+ * @description
+ * Provides functions for setting the current page title and breadcrumb.
+ *
+ * @example
+ * ```ts
+ * import { usePageMetadata } from '\@deenruv/admin-ui/react';
+ * import { useEffect } from 'react';
+ *
+ * export const MyComponent = () => {
+ *     const { setTitle, setBreadcrumb } = usePageMetadata();
+ *     useEffect(() => {
+ *         setTitle('My Page');
+ *         setBreadcrumb([
+ *             { link: ['./parent'], label: 'Parent Page' },
+ *             { link: ['./'], label: 'This Page' },
+ *         ]);
+ *     }, []);
+ *     // ...
+ *     return <div>...</div>;
+ * }
+ * ```
+ *
+ * @docsCategory react-hooks
+ */
+function usePageMetadata() {
+    const context = useContext(HostedComponentContext);
+    const setBreadcrumb = (newValue) => {
+        context.pageMetadataService?.setBreadcrumbs(newValue);
+    };
+    const setTitle = (newTitle) => {
+        context.pageMetadataService?.setTitle(newTitle);
+    };
+    return {
+        setBreadcrumb,
+        setTitle,
+    };
+}
+
+/**
+ * @description
+ * A React hook which provides access to the results of a GraphQL query.
+ *
+ * @example
+ * ```ts
+ * import { useQuery } from '\@deenruv/admin-ui/react';
+ * import { gql } from 'graphql-tag';
+ *
+ * const GET_PRODUCT = gql`
+ *    query GetProduct($id: ID!) {
+ *      product(id: $id) {
+ *        id
+ *        name
+ *        description
+ *      }
+ *    }`;
+ *
+ * export const MyComponent = () => {
+ *     const { data, loading, error } = useQuery(GET_PRODUCT, { id: '1' }, { refetchOnChannelChange: true });
+ *
+ *     if (loading) return <div>Loading...</div>;
+ *     if (error) return <div>Error! { error }</div>;
+ *     return (
+ *         <div>
+ *             <h1>{data.product.name}</h1>
+ *             <p>{data.product.description}</p>
+ *         </div>
+ *     );
+ * };
+ * ```
+ *
+ * @docsCategory react-hooks
+ */
+function useQuery(query, variables, options = { refetchOnChannelChange: false }) {
+    const { refetchOnChannelChange } = options;
+    const { data, loading, error, runQuery } = useDataService((dataService, vars) => {
+        let queryFn = dataService.query(query, vars);
+        if (refetchOnChannelChange) {
+            queryFn = queryFn.refetchOnChannelChange();
+        }
+        return queryFn.stream$;
+    });
+    useEffect(() => {
+        const subscription = runQuery(variables).subscribe();
+        return () => subscription.unsubscribe();
+    }, [runQuery]);
+    const refetch = (variables) => firstValueFrom(runQuery(variables));
+    return { data, loading, error, refetch };
+}
+/**
+ * @description
+ * A React hook which allows you to execute a GraphQL query lazily.
+ *
+ * @example
+ * ```ts
+ * import { useLazyQuery } from '\@deenruv/admin-ui/react';
+ * import { gql } from 'graphql-tag';
+ *
+ * const GET_PRODUCT = gql`
+ *    query GetProduct($id: ID!) {
+ *      product(id: $id) {
+ *        id
+ *        name
+ *        description
+ *      }
+ *    }`;
+ * type ProductResponse = {
+ *     product: {
+ *         name: string
+ *         description: string
+ *     }
+ * }
+ *
+ * export const MyComponent = () => {
+ *     const [getProduct, { data, loading, error }] = useLazyQuery<ProductResponse>(GET_PRODUCT, { refetchOnChannelChange: true });
+ *
+ *    const handleClick = () => {
+ *         getProduct({
+ *              id: '1',
+ *         }).then(result => {
+ *             // do something with the result
+ *         });
+ *     };
+ *
+ *     if (loading) return <div>Loading...</div>;
+ *     if (error) return <div>Error! { error }</div>;
+ *
+ *     return (
+ *     <div>
+ *         <button onClick={handleClick}>Get product</button>
+ *         {data && (
+ *              <div>
+ *                  <h1>{data.product.name}</h1>
+ *                  <p>{data.product.description}</p>
+ *              </div>)}
+ *     </div>
+ *     );
+ * };
+ * ```
+ *
+ * @since 2.2.0
+ * @docsCategory react-hooks
+ */
+function useLazyQuery(query, options = { refetchOnChannelChange: false }) {
+    const { refetchOnChannelChange } = options;
+    const { data, loading, error, runQuery } = useDataService((dataService, vars) => {
+        let queryFn = dataService.query(query, vars);
+        if (refetchOnChannelChange) {
+            queryFn = queryFn.refetchOnChannelChange();
+        }
+        return queryFn.stream$;
+    });
+    const rest = { data, loading, error };
+    const execute = (variables) => firstValueFrom(runQuery(variables));
+    return [execute, rest];
+}
+/**
+ * @description
+ * A React hook which allows you to execute a GraphQL mutation.
+ *
+ * @example
+ * ```ts
+ * import { useMutation } from '\@deenruv/admin-ui/react';
+ * import { gql } from 'graphql-tag';
+ *
+ * const UPDATE_PRODUCT = gql`
+ *   mutation UpdateProduct($input: UpdateProductInput!) {
+ *     updateProduct(input: $input) {
+ *     id
+ *     name
+ *   }
+ * }`;
+ *
+ * export const MyComponent = () => {
+ *     const [updateProduct, { data, loading, error }] = useMutation(UPDATE_PRODUCT);
+ *
+ *     const handleClick = () => {
+ *         updateProduct({
+ *             input: {
+ *                 id: '1',
+ *                 name: 'New name',
+ *             },
+ *         }).then(result => {
+ *             // do something with the result
+ *         });
+ *     };
+ *
+ *     if (loading) return <div>Loading...</div>;
+ *     if (error) return <div>Error! { error }</div>;
+ *
+ *     return (
+ *     <div>
+ *         <button onClick={handleClick}>Update product</button>
+ *         {data && <div>Product updated!</div>}
+ *     </div>
+ *     );
+ * };
+ * ```
+ *
+ * @docsCategory react-hooks
+ */
+function useMutation(mutation) {
+    const { data, loading, error, runQuery } = useDataService((dataService, variables) => dataService.mutate(mutation, variables));
+    const rest = { data, loading, error };
+    const execute = (variables) => firstValueFrom(runQuery(variables));
+    return [execute, rest];
+}
+function useDataService(operation) {
+    const context = useContext(HostedComponentContext);
+    const dataService = context?.injector.get(DataService);
+    if (!dataService) {
+        throw new Error('No DataService found in HostedComponentContext');
+    }
+    const [data, setData] = useState();
+    const [error, setError] = useState();
+    const [loading, setLoading] = useState(false);
+    const runQuery = useCallback((variables) => {
+        setLoading(true);
+        return operation(dataService, variables).pipe(tap({
+            next: res => {
+                setData(res);
+                setLoading(false);
+            },
+            error: err => {
+                setError(err.message);
+                setLoading(false);
+            },
+        }));
+    }, []);
+    return { data, loading, error, runQuery };
+}
+
+/**
+ * @description
+ * Provides access to the current route params and query params.
+ *
+ * @example
+ * ```ts
+ * import { useRouteParams } from '\@deenruv/admin-ui/react';
+ * import React from 'react';
+ *
+ * export function MyComponent() {
+ *     const { params, queryParams } = useRouteParams();
+ *     // ...
+ *     return <div>{ params.id }</div>;
+ * }
+ * ```
+ *
+ * @docsCategory react-hooks
+ */
+function useRouteParams() {
+    const activatedRoute = useInjector(ActivatedRoute);
+    const [params, setParams] = useState(activatedRoute.snapshot.params);
+    const [queryParams, setQueryParams] = useState(activatedRoute.snapshot.queryParams);
+    useEffect(() => {
+        const subscription = activatedRoute.params.subscribe(value => {
+            setParams(value);
+        });
+        subscription.add(activatedRoute.queryParams.subscribe(value => setQueryParams(value)));
+        return () => subscription.unsubscribe();
+    }, []);
+    activatedRoute;
+    return {
+        params,
+        queryParams,
+    };
+}
+
+/**
+ * @description
+ * Registers a React component to be rendered in a detail page in the given location.
+ * Components used as custom detail components can make use of the {@link useDetailComponentData} hook.
+ *
+ * @docsCategory react-extensions
+ */
+function registerReactCustomDetailComponent(config) {
+    return {
+        provide: APP_INITIALIZER,
+        multi: true,
+        useFactory: (customDetailComponentService) => () => {
+            customDetailComponentService.registerCustomDetailComponent({
+                component: ReactCustomDetailComponent,
+                locationId: config.locationId,
+                providers: [
+                    {
+                        provide: REACT_CUSTOM_DETAIL_COMPONENT_OPTIONS,
+                        useValue: {
+                            component: config.component,
+                            props: config.props,
+                        },
+                    },
+                ],
+            });
+        },
+        deps: [CustomDetailComponentService],
+    };
+}
+
+/**
+ * @description
+ * Registers a React component to be rendered in a data table in the given location.
+ * The component will receive the `rowItem` prop which is the data object for the row,
+ * e.g. the `Product` object if used in the `product-list` table.
+ *
+ * @example
+ * ```ts title="components/SlugWithLink.tsx"
+ * import { ReactDataTableComponentProps } from '\@deenruv/admin-ui/react';
+ * import React from 'react';
+ *
+ * export function SlugWithLink({ rowItem }: ReactDataTableComponentProps<{ slug: string }>) {
+ *     return (
+ *         <a href={`https://example.com/products/${rowItem.slug}`} target="_blank">
+ *             {rowItem.slug}
+ *         </a>
+ *     );
+ * }
+ * ```
+ *
+ * ```ts title="providers.ts"
+ * import { registerReactDataTableComponent } from '\@deenruv/admin-ui/react';
+ * import { SlugWithLink } from './components/SlugWithLink';
+ *
+ * export default [
+ *     registerReactDataTableComponent({
+ *         component: SlugWithLink,
+ *         tableId: 'product-list',
+ *         columnId: 'slug',
+ *         props: {
+ *           foo: 'bar',
+ *         },
+ *     }),
+ * ];
+ * ```
+ *
+ * @docsCategory react-extensions
+ */
+function registerReactDataTableComponent(config) {
+    return {
+        provide: APP_INITIALIZER,
+        multi: true,
+        useFactory: (dataTableCustomComponentService) => () => {
+            dataTableCustomComponentService.registerCustomComponent({
+                ...config,
+                component: ReactCustomColumnComponent,
+                providers: [
+                    {
+                        provide: REACT_CUSTOM_COLUMN_COMPONENT_OPTIONS,
+                        useValue: {
+                            component: config.component,
+                            props: config.props,
+                        },
+                    },
+                ],
+            });
+        },
+        deps: [DataTableCustomComponentService],
+    };
+}
+
+/**
+ * @description
+ * Registers a React component to be used as a {@link FormInputComponent}.
+ *
+ * @docsCategory react-extensions
+ */
+function registerReactFormInputComponent(id, component) {
+    return {
+        provide: APP_INITIALIZER,
+        multi: true,
+        useFactory: (registry) => () => {
+            registry.registerInputComponent(id, ReactFormInputComponent, [
+                {
+                    provide: REACT_INPUT_COMPONENT_OPTIONS,
+                    useValue: {
+                        component,
+                    },
+                },
+            ]);
+        },
+        deps: [ComponentRegistryService],
+    };
+}
+
+/**
+ * @description
+ * Registers a React component to be used as a route component.
+ *
+ * @docsCategory react-extensions
+ */
+function registerReactRouteComponent(options) {
+    const routeDef = registerRouteComponent(options);
+    return {
+        ...routeDef,
+        providers: [
+            {
+                provide: REACT_ROUTE_COMPONENT_OPTIONS,
+                useValue: {
+                    props: options.props,
+                },
+            },
+            ...(routeDef.providers ?? []),
+        ],
+        component: ReactRouteComponent,
+    };
+}
+
+// This file was generated by the build-public-api.ts script
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ActionBar, Card, CdsIcon, FormField, HostedComponentContext, Link, PageBlock, PageDetailLayout, REACT_CUSTOM_COLUMN_COMPONENT_OPTIONS, REACT_CUSTOM_DETAIL_COMPONENT_OPTIONS, REACT_INPUT_COMPONENT_OPTIONS, REACT_ROUTE_COMPONENT_OPTIONS, ReactComponentHostDirective, ReactCustomColumnComponent, ReactCustomDetailComponent, ReactFormInputComponent, ReactRouteComponent, RichTextEditor, registerCdsIcon, registerReactCustomDetailComponent, registerReactDataTableComponent, registerReactFormInputComponent, registerReactRouteComponent, useDataService, useDetailComponentData, useFormControl, useInjector, useLazyQuery, useMutation, usePageMetadata, useQuery, useRichTextEditor, useRouteParams };
+//# sourceMappingURL=deenruv-admin-ui-react.mjs.map