@odx/angular 1.0.0-rc.4 → 1.0.0-rc.6

package/fesm2020/odx-angular-cdk-active-indicator.mjs

@@ -0,0 +1,142 @@
+import { __decorate, __metadata } from 'tslib';
+import * as i0 from '@angular/core';
+import { Directive, Input } from '@angular/core';
+import { CSSModifier, CSSComponent } from '@odx/angular/internal';
+import { fromElementResize$ } from '@odx/angular/rxjs';
+import { untilDestroyed, injectElement, hasChanged, px, disableCSSTransitions, applyStyles } from '@odx/angular/utils';
+import { BehaviorSubject, distinctUntilChanged, switchMap, EMPTY } from 'rxjs';
+
+const ActiveIndicatorDirection = {
+    HORIZONTAL: 'horizontal',
+    VERTICAL: 'vertical',
+};
+
+const ActiveIndicatorPosition = {
+    START: 'start',
+    CENTER: 'center',
+    END: 'end',
+};
+
+let ActiveIndicatorDirective = class ActiveIndicatorDirective {
+    constructor() {
+        this.takeUntilDestroyed = untilDestroyed();
+        this.parentElement$$ = new BehaviorSubject(null);
+        this.onResize$ = this.parentElement$$.pipe(distinctUntilChanged(), switchMap((parentElement) => {
+            return parentElement ? fromElementResize$(parentElement) : EMPTY;
+        }));
+        this.element = injectElement();
+        this.isActive = false;
+        this.activeElement = null;
+        this.direction = ActiveIndicatorDirection.HORIZONTAL;
+        this.position = ActiveIndicatorPosition.CENTER;
+    }
+    set parent(value) {
+        this.parentElement$$.next(value);
+    }
+    ngAfterViewInit() {
+        this.onResize$.pipe(this.takeUntilDestroyed()).subscribe(() => this.updateStyles(true));
+        if (!this.parentElement$$.getValue()) {
+            this.parentElement$$.next(this.element.nativeElement.parentElement);
+        }
+    }
+    ngOnChanges(changes) {
+        if (hasChanged(changes, 'activeElement', false)) {
+            this.isActive = !!this.activeElement;
+        }
+        if (hasChanged(changes, ['activeElement', 'direction', 'position'])) {
+            this.updateStyles();
+        }
+    }
+    updateStyles(disableTransition = false) {
+        if (!this.activeElement)
+            return;
+        const isHorizontal = this.direction === ActiveIndicatorDirection.HORIZONTAL;
+        const isVertical = this.direction === ActiveIndicatorDirection.VERTICAL;
+        const relativeOffset = this.getIndicatorRelativeOffset();
+        let transform = null;
+        if (isHorizontal) {
+            const positionX = this.getIndicatorPositionX(this.activeElement);
+            transform = `translateX(${px(positionX)}) translateX(${relativeOffset}%)`;
+        }
+        if (isVertical) {
+            const positionY = this.getIndicatorPositionY(this.activeElement);
+            transform = `translateY(${px(positionY)}) translateY(${relativeOffset}%)`;
+        }
+        disableTransition && disableCSSTransitions(this.element.nativeElement, true);
+        applyStyles(this.element.nativeElement, {
+            transform,
+            width: isHorizontal ? px(this.activeElement.offsetWidth) : null,
+            height: isVertical ? px(this.activeElement.offsetHeight) : null,
+        });
+        disableTransition && disableCSSTransitions(this.element.nativeElement, false);
+    }
+    getIndicatorPositionX(activeElement) {
+        switch (this.position) {
+            case ActiveIndicatorPosition.START:
+                return activeElement.offsetLeft;
+            case ActiveIndicatorPosition.CENTER:
+                return activeElement.offsetLeft + activeElement.offsetWidth / 2;
+            case ActiveIndicatorPosition.END:
+                return activeElement.offsetLeft + activeElement.offsetWidth;
+        }
+    }
+    getIndicatorPositionY(activeElement) {
+        switch (this.position) {
+            case ActiveIndicatorPosition.START:
+                return activeElement.offsetTop;
+            case ActiveIndicatorPosition.CENTER:
+                return activeElement.offsetTop + activeElement.offsetHeight / 2;
+            case ActiveIndicatorPosition.END:
+                return activeElement.offsetTop + activeElement.offsetHeight;
+        }
+    }
+    getIndicatorRelativeOffset() {
+        switch (this.position) {
+            case ActiveIndicatorPosition.START:
+                return 0;
+            case ActiveIndicatorPosition.CENTER:
+                return -50;
+            case ActiveIndicatorPosition.END:
+                return -100;
+        }
+    }
+};
+ActiveIndicatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ActiveIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ActiveIndicatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: ActiveIndicatorDirective, isStandalone: true, selector: "[odxActiveIndicator]", inputs: { activeElement: ["odxActiveIndicator", "activeElement"], parent: ["odxActiveIndicatorParent", "parent"], direction: ["odxActiveIndicatorDirection", "direction"], position: ["odxActiveIndicatorPosition", "position"] }, usesOnChanges: true, ngImport: i0 });
+__decorate([
+    CSSModifier(),
+    __metadata("design:type", Object)
+], ActiveIndicatorDirective.prototype, "isActive", void 0);
+__decorate([
+    CSSModifier(),
+    __metadata("design:type", String)
+], ActiveIndicatorDirective.prototype, "direction", void 0);
+ActiveIndicatorDirective = __decorate([
+    CSSComponent('cdk-active-indicator')
+], ActiveIndicatorDirective);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ActiveIndicatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[odxActiveIndicator]',
+                }]
+        }], propDecorators: { isActive: [], activeElement: [{
+                type: Input,
+                args: ['odxActiveIndicator']
+            }], parent: [{
+                type: Input,
+                args: ['odxActiveIndicatorParent']
+            }], direction: [{
+                type: Input,
+                args: ['odxActiveIndicatorDirection']
+            }], position: [{
+                type: Input,
+                args: ['odxActiveIndicatorPosition']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ActiveIndicatorDirection, ActiveIndicatorDirective, ActiveIndicatorPosition };
+//# sourceMappingURL=odx-angular-cdk-active-indicator.mjs.map

package/fesm2020/odx-angular-cdk-active-indicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"odx-angular-cdk-active-indicator.mjs","sources":["../../../../libs/angular/cdk/active-indicator/src/lib/models/active-indicator-direction.ts","../../../../libs/angular/cdk/active-indicator/src/lib/models/active-indicator-position.ts","../../../../libs/angular/cdk/active-indicator/src/lib/active-indicator.directive.ts","../../../../libs/angular/cdk/active-indicator/src/odx-angular-cdk-active-indicator.ts"],"sourcesContent":["export type ActiveIndicatorDirection = typeof ActiveIndicatorDirection[keyof typeof ActiveIndicatorDirection];\n\nexport const ActiveIndicatorDirection = {\n  HORIZONTAL: 'horizontal',\n  VERTICAL: 'vertical',\n} as const;\n","export type ActiveIndicatorPosition = typeof ActiveIndicatorPosition[keyof typeof ActiveIndicatorPosition];\n\nexport const ActiveIndicatorPosition = {\n  START: 'start',\n  CENTER: 'center',\n  END: 'end',\n} as const;\n","import { AfterViewInit, Directive, Input, OnChanges } from '@angular/core';\nimport { CSSComponent, CSSModifier } from '@odx/angular/internal';\nimport { fromElementResize$ } from '@odx/angular/rxjs';\nimport { applyStyles, disableCSSTransitions, hasChanged, injectElement, NgChanges, px, untilDestroyed } from '@odx/angular/utils';\nimport { BehaviorSubject, distinctUntilChanged, EMPTY, switchMap } from 'rxjs';\nimport { ActiveIndicatorPosition } from './models';\nimport { ActiveIndicatorDirection } from './models/active-indicator-direction';\n\n@CSSComponent('cdk-active-indicator')\n@Directive({\n  standalone: true,\n  selector: '[odxActiveIndicator]',\n})\nexport class ActiveIndicatorDirective implements OnChanges, AfterViewInit {\n  private readonly takeUntilDestroyed = untilDestroyed();\n  private readonly parentElement$$ = new BehaviorSubject<HTMLElement | null>(null);\n  private readonly onResize$ = this.parentElement$$.pipe(\n    distinctUntilChanged(),\n    switchMap((parentElement) => {\n      return parentElement ? fromElementResize$(parentElement) : EMPTY;\n    })\n  );\n  public readonly element = injectElement();\n\n  @CSSModifier()\n  protected isActive = false;\n\n  @Input('odxActiveIndicator')\n  public activeElement?: HTMLElement | null = null;\n\n  @Input('odxActiveIndicatorParent')\n  public set parent(value: HTMLElement | null) {\n    this.parentElement$$.next(value);\n  }\n\n  @CSSModifier()\n  @Input('odxActiveIndicatorDirection')\n  public direction: ActiveIndicatorDirection = ActiveIndicatorDirection.HORIZONTAL;\n\n  @Input('odxActiveIndicatorPosition')\n  public position: ActiveIndicatorPosition = ActiveIndicatorPosition.CENTER;\n\n  public ngAfterViewInit(): void {\n    this.onResize$.pipe(this.takeUntilDestroyed()).subscribe(() => this.updateStyles(true));\n    if (!this.parentElement$$.getValue()) {\n      this.parentElement$$.next(this.element.nativeElement.parentElement);\n    }\n  }\n\n  public ngOnChanges(changes: NgChanges<ActiveIndicatorDirective>): void {\n    if (hasChanged(changes, 'activeElement', false)) {\n      this.isActive = !!this.activeElement;\n    }\n    if (hasChanged(changes, ['activeElement', 'direction', 'position'])) {\n      this.updateStyles();\n    }\n  }\n\n  private updateStyles(disableTransition = false): void {\n    if (!this.activeElement) return;\n    const isHorizontal = this.direction === ActiveIndicatorDirection.HORIZONTAL;\n    const isVertical = this.direction === ActiveIndicatorDirection.VERTICAL;\n    const relativeOffset = this.getIndicatorRelativeOffset();\n\n    let transform = null;\n    if (isHorizontal) {\n      const positionX = this.getIndicatorPositionX(this.activeElement);\n      transform = `translateX(${px(positionX)}) translateX(${relativeOffset}%)`;\n    }\n    if (isVertical) {\n      const positionY = this.getIndicatorPositionY(this.activeElement);\n      transform = `translateY(${px(positionY)}) translateY(${relativeOffset}%)`;\n    }\n\n    disableTransition && disableCSSTransitions(this.element.nativeElement, true);\n    applyStyles(this.element.nativeElement, {\n      transform,\n      width: isHorizontal ? px(this.activeElement.offsetWidth) : null,\n      height: isVertical ? px(this.activeElement.offsetHeight) : null,\n    });\n    disableTransition && disableCSSTransitions(this.element.nativeElement, false);\n  }\n\n  private getIndicatorPositionX(activeElement: HTMLElement): number {\n    switch (this.position) {\n      case ActiveIndicatorPosition.START:\n        return activeElement.offsetLeft;\n      case ActiveIndicatorPosition.CENTER:\n        return activeElement.offsetLeft + activeElement.offsetWidth / 2;\n      case ActiveIndicatorPosition.END:\n        return activeElement.offsetLeft + activeElement.offsetWidth;\n    }\n  }\n\n  private getIndicatorPositionY(activeElement: HTMLElement): number {\n    switch (this.position) {\n      case ActiveIndicatorPosition.START:\n        return activeElement.offsetTop;\n      case ActiveIndicatorPosition.CENTER:\n        return activeElement.offsetTop + activeElement.offsetHeight / 2;\n      case ActiveIndicatorPosition.END:\n        return activeElement.offsetTop + activeElement.offsetHeight;\n    }\n  }\n\n  private getIndicatorRelativeOffset(): number {\n    switch (this.position) {\n      case ActiveIndicatorPosition.START:\n        return 0;\n      case ActiveIndicatorPosition.CENTER:\n        return -50;\n      case ActiveIndicatorPosition.END:\n        return -100;\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2020/odx-angular-cdk-checkbox-control.mjs

@@ -1,6 +1,5 @@
 import * as i0 from '@angular/core';
 import { Directive, Input } from '@angular/core';
-import { Validators } from '@angular/forms';
 import { detectControllerChanges } from '@odx/angular';
 import { CustomFormControl } from '@odx/angular/cdk/custom-form-control';
 import { injectElement, booleanToAttributeString } from '@odx/angular/utils';
@@ -9,14 +8,15 @@ class CheckBoxControl extends CustomFormControl {
     constructor() {
         super(false);
         this.element = injectElement();
-        this.value = null;
+        // eslint-disable-next-line @angular-eslint/no-input-rename
+        this.controlValue = null;
         detectControllerChanges(this).subscribe();
     }
     set checked(value) {
-        this.controlValue = value;
+        this.value = value;
     }
     get checked() {
-        return this.controlValue;
+        return this.value;
     }
     get ariaChecked() {
         return booleanToAttributeString(this.checked);
@@ -25,21 +25,19 @@ class CheckBoxControl extends CustomFormControl {
         event.stopPropagation();
         super.updateValue(event.target.checked);
     }
-    updateRequiredValidator() {
-        this.toggleValidator(Validators.requiredTrue, this.required);
-    }
 }
-CheckBoxControl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: CheckBoxControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CheckBoxControl.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.9", type: CheckBoxControl, selector: "[odxCheckBoxControl]", inputs: { checked: "checked", value: "value" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: CheckBoxControl, decorators: [{
+CheckBoxControl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CheckBoxControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CheckBoxControl.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: CheckBoxControl, selector: "[odxCheckBoxControl]", inputs: { checked: "checked", controlValue: ["value", "controlValue"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CheckBoxControl, decorators: [{
             type: Directive,
             args: [{
                     selector: '[odxCheckBoxControl]',
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { checked: [{
                 type: Input
-            }], value: [{
-                type: Input
+            }], controlValue: [{
+                type: Input,
+                args: ['value']
             }] } });
 
 /**

package/fesm2020/odx-angular-cdk-checkbox-control.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"odx-angular-cdk-checkbox-control.mjs","sources":["../../../../libs/angular/cdk/checkbox-control/src/lib/checkbox-control.directive.ts","../../../../libs/angular/cdk/checkbox-control/src/odx-angular-cdk-checkbox-control.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport { Directive, Input } from '@angular/core';\nimport { Validators } from '@angular/forms';\nimport { detectControllerChanges } from '@odx/angular';\nimport { CustomFormControl } from '@odx/angular/cdk/custom-form-control';\nimport { booleanToAttributeString, injectElement } from '@odx/angular/utils';\n\n@Directive({\n  selector: '[odxCheckBoxControl]',\n})\nexport class CheckBoxControl extends CustomFormControl<boolean> {\n  public static ngAcceptInputType_checked: BooleanInput;\n\n  public readonly element = injectElement();\n\n  @Input()\n  public set checked(value: boolean) {\n    this.controlValue = value;\n  }\n  public get checked(): boolean {\n    return this.controlValue;\n  }\n\n  @Input()\n  public value: string | null = null;\n\n  public get ariaChecked(): string {\n    return booleanToAttributeString(this.checked);\n  }\n\n  constructor() {\n    super(false);\n    detectControllerChanges(this).subscribe();\n  }\n\n  public onChanged(event: Event): void {\n    event.stopPropagation();\n    super.updateValue((event.target as HTMLInputElement).checked);\n  }\n\n  protected override updateRequiredValidator(): void {\n    this.toggleValidator(Validators.requiredTrue, this.required);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAUM,MAAO,eAAgB,SAAQ,iBAA0B,CAAA;AAoB7D,IAAA,WAAA,GAAA;QACE,KAAK,CAAC,KAAK,CAAC,CAAC;QAlBC,IAAO,CAAA,OAAA,GAAG,aAAa,EAAE,CAAC;QAWnC,IAAK,CAAA,KAAA,GAAkB,IAAI,CAAC;AAQjC,QAAA,uBAAuB,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,CAAC;KAC3C;IAlBD,IACW,OAAO,CAAC,KAAc,EAAA;AAC/B,QAAA,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;KAC3B;AACD,IAAA,IAAW,OAAO,GAAA;QAChB,OAAO,IAAI,CAAC,YAAY,CAAC;KAC1B;AAKD,IAAA,IAAW,WAAW,GAAA;AACpB,QAAA,OAAO,wBAAwB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAC/C;AAOM,IAAA,SAAS,CAAC,KAAY,EAAA;QAC3B,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,KAAK,CAAC,WAAW,CAAE,KAAK,CAAC,MAA2B,CAAC,OAAO,CAAC,CAAC;KAC/D;IAEkB,uBAAuB,GAAA;QACxC,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC9D;;4GAhCU,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;gGAAf,eAAe,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAH3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,sBAAsB;AACjC,iBAAA,CAAA;0EAOY,OAAO,EAAA,CAAA;sBADjB,KAAK;gBASC,KAAK,EAAA,CAAA;sBADX,KAAK;;;ACvBR;;AAEG;;;;"}
+{"version":3,"file":"odx-angular-cdk-checkbox-control.mjs","sources":["../../../../libs/angular/cdk/checkbox-control/src/lib/checkbox-control.directive.ts","../../../../libs/angular/cdk/checkbox-control/src/odx-angular-cdk-checkbox-control.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport { Directive, Input } from '@angular/core';\nimport { detectControllerChanges } from '@odx/angular';\nimport { CustomFormControl } from '@odx/angular/cdk/custom-form-control';\nimport { booleanToAttributeString, injectElement } from '@odx/angular/utils';\n\n@Directive({\n  selector: '[odxCheckBoxControl]',\n})\nexport class CheckBoxControl extends CustomFormControl<boolean> {\n  public static ngAcceptInputType_checked: BooleanInput;\n\n  public readonly element = injectElement();\n\n  @Input()\n  public set checked(value: boolean) {\n    this.value = value;\n  }\n  public get checked(): boolean {\n    return this.value;\n  }\n\n  // eslint-disable-next-line @angular-eslint/no-input-rename\n  @Input('value')\n  public controlValue: string | null = null;\n\n  public get ariaChecked(): string {\n    return booleanToAttributeString(this.checked);\n  }\n\n  constructor() {\n    super(false);\n    detectControllerChanges(this).subscribe();\n  }\n\n  public onChanged(event: Event): void {\n    event.stopPropagation();\n    super.updateValue((event.target as HTMLInputElement).checked);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AASM,MAAO,eAAgB,SAAQ,iBAA0B,CAAA;AAqB7D,IAAA,WAAA,GAAA;QACE,KAAK,CAAC,KAAK,CAAC,CAAC;QAnBC,IAAO,CAAA,OAAA,GAAG,aAAa,EAAE,CAAC;;QAYnC,IAAY,CAAA,YAAA,GAAkB,IAAI,CAAC;AAQxC,QAAA,uBAAuB,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,CAAC;KAC3C;IAnBD,IACW,OAAO,CAAC,KAAc,EAAA;AAC/B,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;KACpB;AACD,IAAA,IAAW,OAAO,GAAA;QAChB,OAAO,IAAI,CAAC,KAAK,CAAC;KACnB;AAMD,IAAA,IAAW,WAAW,GAAA;AACpB,QAAA,OAAO,wBAAwB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAC/C;AAOM,IAAA,SAAS,CAAC,KAAY,EAAA;QAC3B,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,KAAK,CAAC,WAAW,CAAE,KAAK,CAAC,MAA2B,CAAC,OAAO,CAAC,CAAC;KAC/D;;6GA7BU,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;iGAAf,eAAe,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,YAAA,EAAA,CAAA,OAAA,EAAA,cAAA,CAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;4FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAH3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,sBAAsB;AACjC,iBAAA,CAAA;0EAOY,OAAO,EAAA,CAAA;sBADjB,KAAK;gBAUC,YAAY,EAAA,CAAA;sBADlB,KAAK;uBAAC,OAAO,CAAA;;;ACvBhB;;AAEG;;;;"}

package/fesm2020/odx-angular-cdk-custom-form-control.mjs

@@ -1,19 +1,17 @@
 import * as i0 from '@angular/core';
 import { Directive, inject, Input, ViewChild } from '@angular/core';
 import { injectElement } from '@odx/angular/utils';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { NgControl, Validators } from '@angular/forms';
+import { RequiredValidator, NgControl, Validators } from '@angular/forms';
 import { Controller, DisabledController, ReadonlyController } from '@odx/angular';
-import { filter, EMPTY } from 'rxjs';
 
 class ControlDirective {
     constructor() {
         this.element = injectElement();
     }
 }
-ControlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: ControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ControlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.9", type: ControlDirective, isStandalone: true, selector: "[odxControl]", exportAs: ["odxControl"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: ControlDirective, decorators: [{
+ControlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ControlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: ControlDirective, isStandalone: true, selector: "[odxControl]", exportAs: ["odxControl"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ControlDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -25,10 +23,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImpor
 class CustomFormControl extends Controller {
     constructor(initialValue) {
         super();
-        this.isRequired = false;
+        this.requiredValidator = inject(RequiredValidator, { optional: true, self: true });
         this.disabledController = DisabledController.inject();
         this.readonlyController = ReadonlyController.inject();
-        this.enabled$ = this.disabledController?.change$.pipe(filter(() => !this.isDisabled)) ?? EMPTY;
         this.ngControl = inject(NgControl, { self: true, optional: true });
         this.id = null;
         this.name = `odx-form-control-${CustomFormControl.CURRENT_INDEX++}`;
@@ -37,22 +34,14 @@ class CustomFormControl extends Controller {
         if (this.ngControl) {
             this.ngControl.valueAccessor = this;
         }
-        this.enabled$.subscribe(() => this.updateRequiredValidator());
     }
-    set required(value) {
-        this.isRequired = coerceBooleanProperty(value);
-        this.updateRequiredValidator();
-    }
-    get required() {
-        return this.isRequired;
-    }
-    set controlValue(value) {
+    set value(value) {
         if (this.internalValue !== value) {
             this.internalValue = value;
             this.triggerControllerChange();
         }
     }
-    get controlValue() {
+    get value() {
         return this.internalValue;
     }
     get hasError() {
@@ -64,14 +53,14 @@ class CustomFormControl extends Controller {
     get isReadonly() {
         return !!this.readonlyController?.readonly;
     }
-    ngAfterContentInit() {
-        this.updateRequiredValidator();
+    get isRequired() {
+        return !!this.requiredValidator?.required || this.hasValidator(Validators.required) || this.hasValidator(Validators.requiredTrue);
     }
     onTouched() {
-        // empty;
+        // implemented by control value accessor
     }
     onChange(_value) {
-        // empty
+        // implemented by control value accessor
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -83,39 +72,25 @@ class CustomFormControl extends Controller {
         this.disabledController?.setDisabledState(isDisabled);
     }
     writeValue(value) {
-        this.controlValue = value;
+        if (this.isDisabled)
+            return;
+        this.value = value;
+        this.onChange(value);
     }
     updateValue(value) {
+        if (this.isDisabled)
+            return;
         this.writeValue(value);
-        this.onChange(value);
         this.onTouched();
     }
-    toggleValidator(validator, state) {
-        const control = this.ngControl?.control;
-        if (!control)
-            return;
-        const hasValidator = control.hasValidator(validator);
-        if (state && hasValidator)
-            return;
-        if (!state && !hasValidator)
-            return;
-        if (state) {
-            control.addValidators(validator);
-        }
-        else {
-            control.removeValidators(validator);
-        }
-        control.updateValueAndValidity();
-        control.markAsUntouched();
-    }
-    updateRequiredValidator() {
-        this.toggleValidator(Validators.required, this.isRequired);
+    hasValidator(validator) {
+        return !!this.ngControl?.control?.hasValidator(validator);
     }
 }
 CustomFormControl.CURRENT_INDEX = 0;
-CustomFormControl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: CustomFormControl, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-CustomFormControl.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.9", type: CustomFormControl, inputs: { id: "id", name: "name", required: "required" }, host: { properties: { "class.has-error": "hasError", "class.is-disabled": "isDisabled", "class.is-readonly": "isReadonly", "class.is-required": "required" } }, viewQueries: [{ propertyName: "control", first: true, predicate: ControlDirective, descendants: true }], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: CustomFormControl, decorators: [{
+CustomFormControl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomFormControl, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+CustomFormControl.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: CustomFormControl, inputs: { id: "id", name: "name" }, host: { properties: { "class.has-error": "hasError", "class.is-disabled": "isDisabled", "class.is-readonly": "isReadonly", "class.is-required": "required" } }, viewQueries: [{ propertyName: "control", first: true, predicate: ControlDirective, descendants: true }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomFormControl, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -129,8 +104,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImpor
                 type: Input
             }], name: [{
                 type: Input
-            }], required: [{
-                type: Input
             }], control: [{
                 type: ViewChild,
                 args: [ControlDirective]

package/fesm2020/odx-angular-cdk-custom-form-control.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"odx-angular-cdk-custom-form-control.mjs","sources":["../../../../libs/angular/cdk/custom-form-control/src/lib/control.directive.ts","../../../../libs/angular/cdk/custom-form-control/src/lib/custom-form-control.ts","../../../../libs/angular/cdk/custom-form-control/src/odx-angular-cdk-custom-form-control.ts"],"sourcesContent":["import { Directive } from '@angular/core';\nimport { injectElement } from '@odx/angular/utils';\n\n@Directive({\n  standalone: true,\n  selector: '[odxControl]',\n  exportAs: 'odxControl',\n})\nexport class ControlDirective {\n  public readonly element = injectElement();\n}\n","import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { AfterContentInit, Directive, inject, Input, ViewChild } from '@angular/core';\nimport { ControlValueAccessor, NgControl, ValidatorFn, Validators } from '@angular/forms';\nimport { Controller, DisabledController, ReadonlyController } from '@odx/angular';\nimport { EMPTY, filter } from 'rxjs';\nimport { ControlDirective } from './control.directive';\n\n@Directive({\n  host: {\n    '[class.has-error]': 'hasError',\n    '[class.is-disabled]': 'isDisabled',\n    '[class.is-readonly]': 'isReadonly',\n    '[class.is-required]': 'required',\n  },\n})\nexport abstract class CustomFormControl<T> extends Controller implements ControlValueAccessor, AfterContentInit {\n  private static CURRENT_INDEX = 0;\n  public static ngAcceptInputType_required: BooleanInput;\n\n  private internalValue: T;\n  private isRequired = false;\n  protected readonly disabledController = DisabledController.inject();\n  protected readonly readonlyController = ReadonlyController.inject();\n  protected readonly enabled$ = this.disabledController?.change$.pipe(filter(() => !this.isDisabled)) ?? EMPTY;\n  protected readonly ngControl = inject(NgControl, { self: true, optional: true });\n\n  @Input()\n  public id: string | null = null;\n\n  @Input()\n  public name = `odx-form-control-${CustomFormControl.CURRENT_INDEX++}`;\n\n  @Input()\n  public set required(value: unknown) {\n    this.isRequired = coerceBooleanProperty(value);\n    this.updateRequiredValidator();\n  }\n  public get required(): boolean {\n    return this.isRequired;\n  }\n\n  public set controlValue(value: T) {\n    if (this.internalValue !== value) {\n      this.internalValue = value;\n      this.triggerControllerChange();\n    }\n  }\n  public get controlValue(): T {\n    return this.internalValue;\n  }\n\n  public get hasError(): boolean {\n    return !!this.ngControl?.touched && !!this.ngControl?.invalid;\n  }\n\n  public get isDisabled(): boolean {\n    return !!this.disabledController?.disabled;\n  }\n\n  public get isReadonly(): boolean {\n    return !!this.readonlyController?.readonly;\n  }\n\n  @ViewChild(ControlDirective)\n  public readonly control: ControlDirective | null = null;\n\n  constructor(initialValue: T) {\n    super();\n    this.internalValue = initialValue;\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n    this.enabled$.subscribe(() => this.updateRequiredValidator());\n  }\n\n  public ngAfterContentInit(): void {\n    this.updateRequiredValidator();\n  }\n\n  public onTouched() {\n    // empty;\n  }\n\n  public onChange(_value: T) {\n    // empty\n  }\n\n  public registerOnChange(fn: (value: T) => void): void {\n    this.onChange = fn;\n  }\n\n  public registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  public setDisabledState(isDisabled: boolean): void {\n    this.disabledController?.setDisabledState(isDisabled);\n  }\n\n  public writeValue(value: T): void {\n    this.controlValue = value;\n  }\n\n  public updateValue(value: T): void {\n    this.writeValue(value);\n    this.onChange(value);\n    this.onTouched();\n  }\n\n  protected toggleValidator(validator: ValidatorFn, state: boolean): void {\n    const control = this.ngControl?.control;\n    if (!control) return;\n    const hasValidator = control.hasValidator(validator);\n    if (state && hasValidator) return;\n    if (!state && !hasValidator) return;\n    if (state) {\n      control.addValidators(validator);\n    } else {\n      control.removeValidators(validator);\n    }\n    control.updateValueAndValidity();\n    control.markAsUntouched();\n  }\n\n  protected updateRequiredValidator(): void {\n    this.toggleValidator(Validators.required, this.isRequired);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"odx-angular-cdk-custom-form-control.mjs","sources":["../../../../libs/angular/cdk/custom-form-control/src/lib/control.directive.ts","../../../../libs/angular/cdk/custom-form-control/src/lib/custom-form-control.ts","../../../../libs/angular/cdk/custom-form-control/src/odx-angular-cdk-custom-form-control.ts"],"sourcesContent":["import { Directive } from '@angular/core';\nimport { injectElement } from '@odx/angular/utils';\n\n@Directive({\n  standalone: true,\n  selector: '[odxControl]',\n  exportAs: 'odxControl',\n})\nexport class ControlDirective {\n  public readonly element = injectElement();\n}\n","import { Directive, inject, Input, ViewChild } from '@angular/core';\nimport { ControlValueAccessor, NgControl, RequiredValidator, ValidatorFn, Validators } from '@angular/forms';\nimport { Controller, DisabledController, ReadonlyController } from '@odx/angular';\nimport { ControlDirective } from './control.directive';\n\n@Directive({\n  host: {\n    '[class.has-error]': 'hasError',\n    '[class.is-disabled]': 'isDisabled',\n    '[class.is-readonly]': 'isReadonly',\n    '[class.is-required]': 'required',\n  },\n})\nexport abstract class CustomFormControl<T> extends Controller implements ControlValueAccessor {\n  private static CURRENT_INDEX = 0;\n\n  private readonly requiredValidator = inject(RequiredValidator, { optional: true, self: true });\n  private internalValue: T;\n  protected readonly disabledController = DisabledController.inject();\n  protected readonly readonlyController = ReadonlyController.inject();\n  protected readonly ngControl = inject(NgControl, { self: true, optional: true });\n\n  @Input()\n  public id: string | null = null;\n\n  @Input()\n  public name = `odx-form-control-${CustomFormControl.CURRENT_INDEX++}`;\n\n  public set value(value: T) {\n    if (this.internalValue !== value) {\n      this.internalValue = value;\n      this.triggerControllerChange();\n    }\n  }\n  public get value(): T {\n    return this.internalValue;\n  }\n\n  public get hasError(): boolean {\n    return !!this.ngControl?.touched && !!this.ngControl?.invalid;\n  }\n\n  public get isDisabled(): boolean {\n    return !!this.disabledController?.disabled;\n  }\n\n  public get isReadonly(): boolean {\n    return !!this.readonlyController?.readonly;\n  }\n\n  public get isRequired(): boolean {\n    return !!this.requiredValidator?.required || this.hasValidator(Validators.required) || this.hasValidator(Validators.requiredTrue);\n  }\n\n  @ViewChild(ControlDirective)\n  public readonly control: ControlDirective | null = null;\n\n  constructor(initialValue: T) {\n    super();\n    this.internalValue = initialValue;\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  public onTouched() {\n    // implemented by control value accessor\n  }\n\n  public onChange(_value: T) {\n    // implemented by control value accessor\n  }\n\n  public registerOnChange(fn: (value: T) => void): void {\n    this.onChange = fn;\n  }\n\n  public registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  public setDisabledState(isDisabled: boolean): void {\n    this.disabledController?.setDisabledState(isDisabled);\n  }\n\n  public writeValue(value: T): void {\n    if (this.isDisabled) return;\n    this.value = value;\n    this.onChange(value);\n  }\n\n  public updateValue(value: T): void {\n    if (this.isDisabled) return;\n    this.writeValue(value);\n    this.onTouched();\n  }\n\n  protected hasValidator(validator: ValidatorFn): boolean {\n    return !!this.ngControl?.control?.hasValidator(validator);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2020/odx-angular-cdk-dynamic-view.mjs

@@ -1,7 +1,8 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, reflectComponentType, ApplicationRef, createComponent, EnvironmentInjector, InjectionToken, inject, Injector, Injectable, ViewContainerRef, TemplateRef, Directive } from '@angular/core';
-import { injectElement, isString, isTemplateRef, isComponent, hasChanged } from '@odx/angular/utils';
+import { injectElement, isString, isViewContainer, getInjector, isTemplateRef, isComponent, hasChanged } from '@odx/angular/utils';
 import { isObservable, distinctUntilChanged } from 'rxjs';
+import { DOCUMENT } from '@angular/common';
 
 class DynamicViewComponent {
     constructor() {
@@ -27,9 +28,9 @@ class DynamicViewComponent {
         this.element.nativeElement.innerHTML = value;
     }
 }
-DynamicViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: DynamicViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DynamicViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", type: DynamicViewComponent, isStandalone: true, selector: "odx-dynamic-view", inputs: { content: "content" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: DynamicViewComponent, decorators: [{
+DynamicViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DynamicViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DynamicViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DynamicViewComponent, isStandalone: true, selector: "odx-dynamic-view", inputs: { content: "content" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DynamicViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'odx-dynamic-view',
@@ -59,17 +60,20 @@ class DynamicComponentRef {
         this.options = options;
         this.application = this.options.injector.get(ApplicationRef);
         this.componentRef = null;
-        const { component, context, injector, projectableNodes, vcr } = options;
+        const { component, context, injector, projectableNodes, host } = options;
         this.componentRef = createComponent(component, {
             environmentInjector: injector.get(EnvironmentInjector),
             elementInjector: injector,
             projectableNodes,
         });
-        if (vcr) {
-            vcr.insert(this.componentRef.hostView);
+        if (isViewContainer(host)) {
+            host.insert(this.componentRef.hostView);
         }
         else {
             this.application.attachView(this.componentRef.hostView);
+            if (host) {
+                host.appendChild(this.getElement());
+            }
         }
         if (context) {
             this.update(context);
@@ -83,7 +87,7 @@ class DynamicComponentRef {
             this.componentRef = null;
             return;
         }
-        if (this.componentRef && !this.options.vcr) {
+        if (this.componentRef && !isViewContainer(this.options.host)) {
             this.application.detachView(this.componentRef.hostView);
         }
         this.componentRef?.destroy();
@@ -97,6 +101,9 @@ class DynamicComponentRef {
             this.componentRef?.setInput(key, context[key]);
         }
     }
+    getContext() {
+        return this.options.context ?? {};
+    }
     getView() {
         return this.componentRef?.hostView ?? null;
     }
@@ -117,7 +124,7 @@ class DynamicTemplateRef {
             this.embeddedViewRef = null;
             return;
         }
-        if (!this.options.vcr && this.embeddedViewRef) {
+        if (!isViewContainer(this.options.host) && this.embeddedViewRef) {
             this.application.detachView(this.embeddedViewRef);
         }
         this.embeddedViewRef?.destroy();
@@ -132,12 +139,15 @@ class DynamicTemplateRef {
             this.detectChanges();
         }
     }
+    getContext() {
+        return this.options.context ?? {};
+    }
     getView() {
         return this.embeddedViewRef;
     }
-    create({ context, template, vcr }) {
-        if (vcr) {
-            this.embeddedViewRef = vcr.createEmbeddedView(template, context, { injector: this.options.injector });
+    create({ context, template, host }) {
+        if (isViewContainer(host)) {
+            this.embeddedViewRef = host.createEmbeddedView(template, context, { injector: this.options.injector });
         }
         else {
             this.embeddedViewRef = template.createEmbeddedView(context ?? {}, this.options.injector);
@@ -152,15 +162,25 @@ function isDynamicView(value) {
 
 const DYNAMIC_VIEW_CONTEXT = new InjectionToken('@odx/angular/cdk/dynamic-view::DynamicViewContext');
 
+const ODX_DYNAMIC_VIEW_DEFAULT_HOST = new InjectionToken('@odx/angular/cdk/dynamic-view::DynamicViewDefaultHost', {
+    providedIn: 'root',
+    factory: () => inject(DOCUMENT).body,
+});
+function getDynamicViewDefaultHost() {
+    return inject(ODX_DYNAMIC_VIEW_DEFAULT_HOST);
+}
+
 class DynamicViewService {
     constructor() {
-        this.injector = inject(Injector);
+        this.injector = getInjector();
+        this.defaultHost = getDynamicViewDefaultHost();
     }
     createView(content, options = {}) {
         const viewOptions = {
             ...options,
+            host: options.host ?? this.defaultHost,
             injector: Injector.create({
-                providers: [{ provide: DYNAMIC_VIEW_CONTEXT, useValue: options.context }],
+                providers: [{ provide: DYNAMIC_VIEW_CONTEXT, useValue: options.context }, options.providers ?? []],
                 parent: options.injector ?? this.injector,
             }),
         };
@@ -180,9 +200,9 @@ class DynamicViewService {
         throw new Error('Content type is not supported');
     }
 }
-DynamicViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: DynamicViewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DynamicViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: DynamicViewService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: DynamicViewService, decorators: [{
+DynamicViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DynamicViewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DynamicViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DynamicViewService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DynamicViewService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -244,7 +264,7 @@ class DynamicViewDirective {
                 context: this.context ?? undefined,
                 injector: this.injector ?? this.viewContainer.injector,
                 projectableNodes,
-                vcr: this.viewContainer,
+                host: this.viewContainer,
             });
         }
     }
@@ -255,9 +275,9 @@ class DynamicViewDirective {
         this.viewRef = null;
     }
 }
-DynamicViewDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: DynamicViewDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-DynamicViewDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.9", type: DynamicViewDirective, isStandalone: true, selector: "ng-template[odxDynamicView]", inputs: { content: ["odxDynamicView", "content"], injector: ["odxDynamicViewInjector", "injector"], context: ["odxDynamicViewContext", "context"] }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: DynamicViewDirective, decorators: [{
+DynamicViewDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DynamicViewDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DynamicViewDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: DynamicViewDirective, isStandalone: true, selector: "ng-template[odxDynamicView]", inputs: { content: ["odxDynamicView", "content"], injector: ["odxDynamicViewInjector", "injector"], context: ["odxDynamicViewContext", "context"] }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DynamicViewDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[odxDynamicView]',
@@ -278,5 +298,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DYNAMIC_VIEW_CONTEXT, DynamicComponentRef, DynamicTemplateRef, DynamicViewComponent, DynamicViewDirective, DynamicViewService, createProjectableNodes, isDynamicTextContent, isDynamicView };
+export { DYNAMIC_VIEW_CONTEXT, DynamicComponentRef, DynamicTemplateRef, DynamicViewComponent, DynamicViewDirective, DynamicViewService, ODX_DYNAMIC_VIEW_DEFAULT_HOST, createProjectableNodes, getDynamicViewDefaultHost, isDynamicTextContent, isDynamicView };
 //# sourceMappingURL=odx-angular-cdk-dynamic-view.mjs.map